/* ============================================================
   YOLTI V2 — Light theme: todo claro, cálido, premium
   Fuente display: Awesome Serif (self-hosted en theme/assets/fonts)
   ============================================================ */

:root {
    --v2-dark: #432a18;
    --v2-dark-rgb: 67, 42, 24;
    --v2-cream: #fef5e8;
    --v2-cream-light: #f9ead3;
    --v2-white: #fff9f0;
    --v2-accent: #7b6859;
    --v2-accent-warm: #c8956c;
    --v2-card-bg: #ffffff;
    --v2-font-display: 'Awesome Serif', 'Georgia', 'Times New Roman', serif;
    --v2-font-body: 'Rethink Sans', 'Plus Jakarta Sans', sans-serif;
    --v2-container: 1280px;
    --v2-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body.yolti-v2 { background: var(--v2-white); }

/* --- Botones: no full-width dentro de v2 --- */
.yolti-v2 .y-btn { align-self: flex-start; width: auto; }
.yolti-v2 .v2-hero__text .y-btn { align-self: flex-start; }
.v2-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.yolti-v2 .y-btn--outline {
    background: #f1ece3; color: var(--v2-dark);
    border: 1.5px solid #f1ece3;
}
.yolti-v2 .y-btn--outline:hover {
    background: #e6e0d5;
    border-color: #e6e0d5;
    color: var(--v2-dark);
    opacity: 1;
}
.yolti-v2 .v2-statement__philosophy .y-btn { align-self: center; }
.yolti-v2 .v2-flavors__footer .y-btn { align-self: center; }

/* --- Navbar override — claro --- */
.yolti-v2 .y-header {
    background: rgba(255, 249, 240, 0.9);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(var(--v2-dark-rgb), 0.06);
    border-bottom: none;
}
.yolti-v2 .y-header .y-header__inner { max-width: none; }
.yolti-v2 .y-header .y-header__link,
.yolti-v2 .y-header .y-header__icon-btn { color: var(--v2-dark); }
.yolti-v2 .y-header .y-header__link {
    padding: 8px 16px; margin: -8px -16px; border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
}
.yolti-v2 .y-header .y-header__link:hover { color: var(--v2-dark); background: #f1ece3; opacity: 1; }
.yolti-v2 .y-header .y-btn--primary { background: var(--v2-dark); color: var(--v2-cream); }

/* ============================================================
   HERO — fondo claro con gradiente cálido
   ============================================================ */
.v2-hero {
    background: var(--v2-white);
    height: 100vh;
    min-height: 600px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: var(--y-header-h, 72px) var(--y-padding-global) 0;
}

.v2-hero__inner {
    width: 100%; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}

.v2-hero__text { display: flex; flex-direction: column; gap: 28px; z-index: 2; }

.v2-hero__title {
    font-family: var(--v2-font-display); font-weight: 700;
    font-size: clamp(48px, 6vw, 90px); line-height: 0.92;
    color: var(--v2-dark); letter-spacing: -0.01em;
}

.v2-hero__sub {
    font-family: var(--v2-font-body); font-size: 18px; line-height: 1.65;
    color: var(--v2-accent); max-width: 380px;
}

.v2-hero__visual { position: relative; display: flex; align-items: center; justify-content: center; z-index: 1; }
.v2-hero__visual img.v2-hero__product-main {
    width: 800px; height: 800px; object-fit: cover;
    border-radius: 20px;
    border: 1.5px solid rgba(var(--v2-dark-rgb), 0.12);
}
.v2-hero__visual-placeholder {
    width: 380px; height: 500px; border-radius: 24px;
    background: rgba(var(--v2-dark-rgb), 0.03); border: 2px dashed rgba(var(--v2-dark-rgb), 0.08);
    display: flex; align-items: center; justify-content: center;
}
.v2-hero__float {
    position: absolute; width: 35%; z-index: 2;
    filter: drop-shadow(0 16px 40px rgba(var(--v2-dark-rgb), 0.18));
    animation: v2-float 6s ease-in-out infinite;
}
.v2-hero__float--left { top: 10%; left: -10%; transform: rotate(-8deg); animation-delay: 0.5s; }
.v2-hero__float--right { bottom: 5%; right: -8%; transform: rotate(6deg); animation-delay: 1s; }
.v2-hero__glow {
    position: absolute; width: 400px; height: 400px; border-radius: 50%;
    background: radial-gradient(circle, rgba(200,149,108,0.12) 0%, transparent 70%);
    top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none;
}



/* ============================================================
   WAVE DIVIDERS — transiciones suaves entre secciones claras
   ============================================================ */
.v2-wave { position: relative; height: 120px; overflow: hidden; }
.v2-wave--dark-to-cream { background: var(--v2-white); }
.v2-wave--cream-to-dark { background: var(--v2-white); }
.v2-wave svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.v2-wave--footer { margin-top: -1px; }

/* ============================================================
   STATEMENT — word reveal + central product (fondo cream)
   ============================================================ */
.v2-statement { background: var(--v2-white); padding: 100px 64px 60px; }

.v2-statement__inner {
    max-width: 960px; margin: 0 auto; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 64px;
}

.v2-statement__heading {
    font-family: var(--v2-font-display); font-weight: 600;
    font-size: clamp(28px, 4vw, 48px); line-height: 1.4;
    color: var(--v2-dark); letter-spacing: 0.02em;
}
.v2-statement__heading .v2-word {
    display: inline-block; opacity: 0.12; transition: opacity 0.6s ease;
}
.v2-statement__heading .v2-word.active { opacity: 1; }

.v2-statement__separator { width: 60px; height: auto; }

.v2-statement__visual { max-width: 800px; }
.v2-statement__visual img {
    width: 800px; height: 800px; object-fit: cover;
    border-radius: 20px;
    border: 1.5px solid rgba(var(--v2-dark-rgb), 0.12);
    filter: drop-shadow(0 20px 50px rgba(var(--v2-dark-rgb), 0.12));
}
.v2-statement__visual-placeholder {
    width: 320px; height: 400px; border-radius: 24px;
    background: rgba(var(--v2-dark-rgb), 0.03); display: flex; align-items: center; justify-content: center;
}

.v2-statement__philosophy {
    max-width: 680px; margin: 64px auto 0; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.v2-statement__phil-heading {
    font-family: var(--v2-font-display); font-weight: 600;
    font-size: clamp(22px, 3vw, 34px); line-height: 1.4;
    color: var(--v2-dark); letter-spacing: 0.01em;
}
.v2-statement__phil-body {
    font-family: var(--v2-font-body); font-size: 16px; line-height: 1.7;
    color: var(--v2-accent);
}

/* ============================================================
   BENEFITS — fondo blanco cálido
   ============================================================ */
.v2-benefits { background: var(--v2-white); padding: 100px 64px; }

.v2-benefits__inner {
    margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}

.v2-benefits__list { display: flex; flex-direction: column; gap: 20px; }

.v2-benefit-row { position: relative; display: flex; align-items: baseline; gap: 12px; }
.v2-benefit-row__label {
    font-family: var(--v2-font-display); font-weight: 700;
    font-size: clamp(48px, 6vw, 80px); line-height: 1;
    color: var(--v2-dark);
}
.v2-benefit-row__value {
    font-family: var(--v2-font-display); font-weight: 700;
    font-size: clamp(48px, 6vw, 80px); line-height: 1;
    color: rgba(var(--v2-dark-rgb), 0.15);
}

.v2-benefit-row__doodle { position: absolute; pointer-events: none; z-index: 1; }
.v2-benefit-row__doodle--oval { width: 130%; height: 160%; top: -30%; left: -15%; }
.v2-benefit-row__doodle--underline { width: 110%; height: 24px; bottom: -4px; left: -5%; }
.v2-benefit-row__doodle--arc { width: 110%; height: 20px; bottom: -8px; left: -5%; }

.v2-benefits__visual { display: flex; align-items: center; justify-content: center; }
.v2-benefits__visual img {
    width: 800px; height: 800px; object-fit: cover;
    border-radius: 20px;
    border: 1.5px solid rgba(var(--v2-dark-rgb), 0.12);
    filter: drop-shadow(0 20px 50px rgba(var(--v2-dark-rgb), 0.1));
}
.v2-benefits__visual-placeholder {
    width: 100%; aspect-ratio: 3/4; border-radius: 24px;
    background: rgba(var(--v2-dark-rgb), 0.03); display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   FLAVORS — fondo cream claro, cards con textura
   ============================================================ */
.v2-flavors { background: var(--v2-white); padding: 120px 64px; position: relative; }

.v2-flavors__layout {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px;
    align-items: start;
}

.v2-flavors__sticky {
    position: sticky; top: calc(var(--y-header-h, 72px) + 40px);
    display: flex; flex-direction: column; gap: 24px;
}

.v2-flavors__title {
    font-family: var(--v2-font-display); font-weight: 700;
    font-size: clamp(40px, 4.5vw, 64px); line-height: 0.95;
    color: var(--v2-dark); letter-spacing: -0.01em;
}

.v2-flavors__desc {
    font-family: var(--v2-font-body); font-size: 18px; line-height: 1.65;
    color: var(--v2-accent); max-width: 400px;
}

.v2-flavors__grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}

.v2-flavor-item {
    display: flex; flex-direction: column;
}

.v2-flavor-card {
    position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 1;
    display: block; text-decoration: none; cursor: pointer;
    transition: transform 0.5s var(--v2-ease);
    box-shadow: none;
}
.v2-flavor-card:hover { transform: scale(1.02); opacity: 1; }

.v2-flavor-card__texture { position: absolute; inset: 0; z-index: 0; background: rgba(var(--v2-dark-rgb), 0.07); }
.v2-flavor-card__texture img { width: 100%; height: 100%; object-fit: cover; }

.v2-flavor-card__jar {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%) rotate(-12deg);
    width: 55%; z-index: 1;
    filter: drop-shadow(0 16px 40px rgba(0,0,0,0.15));
    transition: transform 0.5s var(--v2-ease);
}
.v2-flavor-card:hover .v2-flavor-card__jar { transform: translate(-50%,-52%) rotate(0deg) scale(1.06); }
.v2-flavor-card__jar img { width: 100%; height: auto; }
.v2-flavor-card__jar-placeholder {
    width: 200px; height: 280px; border-radius: 16px;
    background: rgba(255,255,255,0.2); border: 2px dashed rgba(255,255,255,0.3);
    display: flex; align-items: center; justify-content: center;
}

.v2-flavor-card__info {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 16px 4px 0;
}
.v2-flavor-card__name {
    font-family: var(--v2-font-display); font-weight: 600; font-size: 18px;
    color: var(--v2-dark); letter-spacing: 0.02em;
}
.v2-flavor-card__price {
    font-family: var(--v2-font-body); font-weight: 500; font-size: 15px;
    color: var(--v2-accent);
}
.v2-flavors__footer { text-align: center; margin-top: 56px; }

/* ============================================================
   TESTIMONIALS — scroll infinito con cards v1
   ============================================================ */
.v2-testimonials-scroll {
    background: var(--v2-white); padding: 100px 0; overflow: hidden;
}
.v2-testimonials-scroll__header {
    text-align: center; padding: 0 64px; margin-bottom: 64px;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.v2-testimonials-scroll__mask {
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    overflow: hidden;
}
.v2-testimonials-scroll__track {
    display: flex; gap: 24px; width: max-content;
}
.v2-testimonials-scroll .y-testimonial {
    width: 380px; flex-shrink: 0;
}


/* ============================================================
   STORY — fondo blanco cálido, split layout
   ============================================================ */
.v2-story {
    background: var(--v2-white); padding: 120px 64px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
    margin: 0 auto; align-items: center;
}
.v2-story__visual { border-radius: 24px; overflow: hidden; }
.v2-story__img-main { width: 800px; height: 800px; object-fit: cover; display: block; border-radius: 20px; border: 1.5px solid rgba(var(--v2-dark-rgb), 0.12); }
.v2-story__img-placeholder {
    width: 100%; aspect-ratio: 4/3; border-radius: 24px;
    background: rgba(var(--v2-dark-rgb), 0.04); display: flex; align-items: center; justify-content: center;
}
.v2-story__content { display: flex; flex-direction: column; gap: 32px; }
.v2-story__title {
    font-family: var(--v2-font-display); font-weight: 700;
    font-size: clamp(28px, 4vw, 48px); line-height: 1.1;
    color: var(--v2-dark);
}
.v2-story__body { display: flex; flex-direction: column; gap: 20px; }
.v2-story__body p {
    font-family: var(--v2-font-body); font-size: 16px; line-height: 1.75;
    color: var(--v2-accent);
}
.v2-story__body strong { color: var(--v2-dark); font-weight: 600; }

/* ============================================================
   FOLLOW / INSTAGRAM MARQUEE
   ============================================================ */
.v2-follow { background: var(--v2-white); padding: 100px 0 60px; overflow: hidden; }
.v2-follow__header { text-align: center; margin-bottom: 48px; padding: 0 64px; }
.v2-follow__header h3 {
    font-family: var(--v2-font-display); font-weight: 700;
    font-size: clamp(36px, 5vw, 64px);
    color: var(--v2-dark); margin-bottom: 8px;
}
.v2-follow__handle {
    font-family: var(--v2-font-body); font-weight: 500; font-size: 18px;
    color: var(--v2-accent); text-decoration: none;
}
.v2-follow__handle:hover { color: var(--v2-dark); }

.v2-marquee {
    overflow: hidden; width: 100%;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.v2-marquee__track {
    display: flex; gap: 20px; animation: v2-scroll 40s linear infinite; width: max-content;
}
.v2-marquee__item {
    width: 240px; height: 280px; border-radius: 12px; overflow: hidden; flex-shrink: 0;
    box-shadow: 0 8px 32px rgba(var(--v2-dark-rgb), 0.07); background: #fff; padding: 10px 10px 32px;
    transition: transform 0.3s ease;
}
.v2-marquee__item:nth-child(odd) { transform: rotate(-3deg); }
.v2-marquee__item:nth-child(even) { transform: rotate(2deg); }
.v2-marquee__item:hover { transform: scale(1.06) rotate(0deg) !important; z-index: 3; }
.v2-marquee__item img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.v2-marquee__item-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(var(--v2-dark-rgb), 0.04), rgba(var(--v2-dark-rgb), 0.02));
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   FOOTER V2 override — claro
   ============================================================ */
.yolti-v2 .y-footer {
    background: var(--v2-white);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes v2-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-18px); }
}
@keyframes v2-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Scroll reveal */
.v2-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--v2-ease), transform 0.8s var(--v2-ease); }
.v2-reveal.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .v2-hero__inner { grid-template-columns: 1fr; padding: 0 32px; text-align: center; }
    .v2-hero__sub { margin: 0 auto; }
    .v2-hero__text { align-items: center; }
    .v2-hero__actions { justify-content: center; }
    .v2-hero__visual { order: -1; }
    .v2-hero__float { display: none; }

    .v2-benefits__inner { grid-template-columns: 1fr; }
    .v2-benefits__visual { order: -1; }

    .v2-flavors__layout { grid-template-columns: 1fr; }
    .v2-flavors__sticky { position: static; }
    .v2-flavors__grid { grid-template-columns: 1fr; }
    .v2-flavor-card { aspect-ratio: 4/3; }

    .v2-story { grid-template-columns: 1fr; gap: 40px; padding-left: 32px; padding-right: 32px; }

    .v2-statement,
    .v2-benefits,
    .v2-flavors { padding-left: 32px; padding-right: 32px; }

    .v2-testimonial-card { width: 300px; }
}

@media (max-width: 768px) {
    .v2-hero__inner { padding: 0 20px; }
    .v2-hero__title { font-size: 48px; }

    .v2-statement,
    .v2-benefits,
    .v2-flavors,
    .v2-story { padding: 60px 20px; }

    .v2-benefit-row__label,
    .v2-benefit-row__value { font-size: 42px; }

    .v2-marquee__item { width: 180px; height: 220px; }
    .v2-wave { height: 60px; }
    .v2-testimonial-card { width: 260px; padding: 28px 24px; }
}