/* ============================================================
   1. TOKENS — paleta, tipografía, ritmo
   ============================================================ */
:root{
    --green-900:#1F4A18;
    --green-700:#2D6B22;
    --green-500:#8AB448;
    --green-300:#ACC864;
    --green-100:#EEF3DE;
    --ink:#14180F;
    --paper:#FAFAF8;
    --white:#FFFFFF;

    --font-display:'Fraunces', serif;
    --font-body:'Manrope', sans-serif;
    --font-mono:'Space Mono', monospace;

    --radius-lg:1.75rem;
    --radius-md:1.1rem;
    --ease-cine: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--paper);
    overflow-x:hidden;
    text-align: justify;
    hyphens: none;
    overflow-wrap: break-word;
}
h1,h2,h3,.font-display{ font-family:var(--font-display); letter-spacing:-.01em; }
.font-mono{ font-family:var(--font-mono); }
::selection{ background:var(--green-300); color:var(--ink); }

a{ color:var(--green-700); }
a:hover{ color:var(--green-900); }

:focus-visible{
    outline:2.5px solid var(--green-500);
    outline-offset:3px;
    border-radius:4px;
}

/* ============================================================
   2. ESTRUCTURA DE "ESCENAS" (scroll-snap tipo película)
   ============================================================ */
main{
    scroll-snap-type:y proximity;
}
.scene{
    position:relative;
    min-height:100svh;
    min-height:100vh;
    display:flex;
    align-items:center;
    scroll-snap-align:start;
    scroll-margin-top:0;
    padding:7.5rem 0 5rem;
    overflow:hidden;
}
.scene-inner{ position:relative; z-index:3; width:100%; }

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--green-700);
    margin-bottom:1rem;
}
.eyebrow .icon-badge{
    width:2rem; height:2rem; font-size:1rem;
}

.icon-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.6rem;
    height:2.6rem;
    border-radius:50%;
    background:var(--green-100);
    color:var(--green-700);
    flex:none;
}

.scene-title{
    font-weight:600;
    font-size:clamp(1.9rem, 4vw, 3rem);
    color:var(--green-900);
    margin-bottom:1.25rem;
}

.ghost-number{
    font-family:var(--font-display);
    font-weight:300;
    font-size:clamp(6rem, 18vw, 13rem);
    line-height:.8;
    color:transparent;
    -webkit-text-stroke:1.5px var(--green-300);
    opacity:.55;
    user-select:none;
}

/* ============================================================
   3. FONDO ANIMADO (botella) — autoescalable + deriva sutil
   ============================================================ */
.bg-drift-wrap{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
}
.bg-drift{
    position:absolute;
    inset:-6%;
    background-image:url('../images/licor_fondo.jpeg');
    background-size:cover;
    background-position:center;
    animation: bgdrift 42s var(--ease-cine) infinite;
    will-change:transform;
}
.bg-drift.image2{
    background-image:url('../images/licor_grupo.jpeg');
}
.bg-drift.slow{ animation-duration:58s; animation-direction:alternate; }
.bg-drift{ animation: kenburns 15s ease-in-out infinite alternate; }
@keyframes kenburns{
    from{
        transform:scale(1);
    }
    to{
        transform:scale(1.25);
    }
}

@keyframes bgdrift{
    0%   { transform:translate(0,0) scale(1.05); }
    14%  { transform:translate(-2.2%, 1.1%) scale(1.085); }
    29%  { transform:translate(1.6%, -1.6%) scale(1.04); }
    45%  { transform:translate(-1%, -2.4%) scale(1.09); }
    60%  { transform:translate(2.1%, .9%) scale(1.06); }
    76%  { transform:translate(-1.7%, 2%) scale(1.05); }
    90%  { transform:translate(1.1%, -1%) scale(1.075); }
    100% { transform:translate(0,0) scale(1.05); }
}

.scrim-light{
    position:absolute; inset:0; z-index:1;
    background:radial-gradient(ellipse at 60% 45%, rgba(255,255,255,.08) 0%, rgba(255,255,255,.12) 62%, rgba(255,255,255,.22) 100%);
}
.scrim-dark{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(20,24,15,.55) 0%, rgba(20,24,15,.78) 55%, rgba(20,24,15,.92) 100%);
}

/* manchas ambientales para escenas blancas (continúan la sensación de movimiento) */
.blob{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    opacity:.45;
    z-index:0;
    animation:floaty var(--dur, 26s) ease-in-out infinite alternate;
}
@keyframes floaty{
    0%   { transform:translate(0,0) scale(1); }
    100% { transform:translate(var(--tx, 4%), var(--ty, -6%)) scale(1.12); }
}

/* ============================================================
   4. TARJETAS DE VIDRIO (transparencia + blur sobre fondo blanco)
   ============================================================ */
.card-glass{
    background:rgba(255,255,255,.74);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    border:1px solid rgba(172,200,100,.4);
    border-radius:var(--radius-lg);
    box-shadow:0 30px 70px -28px rgba(20,24,15,.4);
}
.card-glass-dark{
    background:rgba(20,24,15,.42);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    border:1px solid rgba(172,200,100,.28);
    border-radius:var(--radius-lg);
    color:var(--white);
}
.card-soft{
    background:var(--green-100);
    border:1px solid rgba(45,107,34,.12);
    border-radius:var(--radius-lg);
}

/* ============================================================
   5. NAVBAR
   ============================================================ */
.site-nav{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    padding:1.1rem 0;
    background:linear-gradient(180deg, rgba(250,250,248,.85), rgba(250,250,248,0));
    transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.site-nav.scrolled{
    background:rgba(250,250,248,.92);
    backdrop-filter:blur(10px);
    box-shadow:0 8px 30px -16px rgba(20,24,15,.25);
    padding:.7rem 0;
}
.brand-mark{
    font-family:var(--font-mono);
    font-weight:600;
    font-size:1.35rem;
    color:var(--green-900);
    line-height:1;
}
.brand-sub{
    display:block;
    font-family:var(--font-mono);
    font-size:.62rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--green-700);
}
.nav-btn{
    width:2.7rem; height:2.7rem;
    border-radius:50%;
    border:1px solid rgba(45,107,34,.3);
    background:rgba(255,255,255,.6);
    color:var(--green-900);
    display:inline-flex; align-items:center; justify-content:center;
    transition:background .25s, transform .25s;
}
.nav-btn:hover{ background:var(--green-100); transform:translateY(-1px); }
.status-pill{
    font-family:var(--font-mono);
    font-size:.65rem;
    letter-spacing:.12em;
    color:var(--green-700);
}
.status-pill .dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--green-500);
    display:inline-block;
    margin-right:.4rem;
    animation:pulse 1.6s ease-in-out infinite;
}
body.motion-paused .status-pill .dot{ animation:none; background:var(--ink); opacity:.4; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* ============================================================
   6. NAVEGACIÓN LATERAL "CARRETE" (desktop)
   ============================================================ */
.reel-nav{
    position:fixed; right:1.6rem; top:50%; transform:translateY(-50%);
    z-index:900;
    flex-direction:column;
    align-items:flex-end;
    gap:.85rem;
}
.reel-item{
    display:flex; align-items:center; gap:.6rem;
    background:none; border:none; padding:0; cursor:pointer;
    text-decoration:none;
}
.reel-label{
    font-family:var(--font-mono);
    font-size:.68rem;
    letter-spacing:.06em;
    color:var(--green-900);
    background:rgba(255,255,255,.9);
    border:1px solid rgba(45,107,34,.25);
    padding:.2rem .55rem;
    border-radius:.4rem;
    opacity:0;
    transform:translateX(6px);
    transition:opacity .25s, transform .25s;
    white-space:nowrap;
}
.reel-item:hover .reel-label,
.reel-item:focus-visible .reel-label{ opacity:1; transform:translateX(0); }
.reel-dot{
    width:11px; height:11px; border-radius:50%;
    border:2px solid var(--green-500);
    background:transparent;
    transition:background .25s, transform .25s, border-color .25s;
}
.reel-item.active .reel-dot{
    background:var(--green-700);
    border-color:var(--green-700);
    transform:scale(1.3);
}
.reel-item.active .reel-label{ opacity:1; color:var(--green-700); transform:translateX(0); }

/* barra de progreso móvil */
.mobile-progress-track{
    position:fixed; left:0; right:0; bottom:0; height:3px;
    background:rgba(45,107,34,.12); z-index:1000;
}
.mobile-progress-bar{
    height:100%; width:0%;
    background:var(--green-700);
    transition:width .25s var(--ease-cine);
}

/* ============================================================
   7. BOTONES
   ============================================================ */
.btn-cta{
    display:inline-flex; align-items:center; gap:.6rem;
    background:var(--green-700);
    color:var(--white);
    border:none;
    padding:.95rem 2.1rem;
    border-radius:50px;
    font-weight:600;
    letter-spacing:.02em;
    text-decoration:none;
    box-shadow:0 16px 32px -14px rgba(31,74,24,.55);
    transition:transform .3s var(--ease-cine), background .3s, box-shadow .3s;
}
.btn-cta.min{
    padding:.45rem 1.1rem;
}
.btn-cta:hover{
    background:var(--green-900);
    color:var(--white);
    transform:translateY(-3px);
    box-shadow:0 20px 38px -14px rgba(31,74,24,.65);
}
.btn-cta i{ transition:transform .3s var(--ease-cine); }
.btn-cta:hover i{ transform:translateX(4px); }

/* ============================================================
   8. REVELADO AL HACER SCROLL
   ============================================================ */
.reveal{
    opacity:0;
    transform:translateY(30px);
    transition:opacity .85s ease, transform .85s var(--ease-cine);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-group > *:nth-child(1){ transition-delay:.04s; }
.reveal-group > *:nth-child(2){ transition-delay:.16s; }
.reveal-group > *:nth-child(3){ transition-delay:.28s; }
.reveal-group > *:nth-child(4){ transition-delay:.40s; }
.reveal-group > *:nth-child(5){ transition-delay:.52s; }

/* ============================================================
   9. ACTO 01 — La Familia
   ============================================================ */
.story-lead{
    font-size:1.18rem;
    line-height:1.75;
}
.story-lead::first-letter{
    font-family:var(--font-display);
    font-size:3.6rem;
    font-weight:600;
    color:var(--green-700);
    float:left;
    line-height:.8;
    padding-right:.5rem;
    padding-top:.3rem;
}
.story-body p{ line-height:1.8; font-size:1.05rem; }
.family-image{
    width:100%;
    max-width:380px;
    border-radius:20px;
    box-shadow:0 20px 40px rgba(0,0,0,.15);
    object-fit:cover;
    transition:transform .4s ease;
}

.family-image:hover{
    transform:scale(1.03);
}
/* ============================================================
   10. ACTO 02 — El Reposo (escena de pausa)
   ============================================================ */
.scene-reposo .pause-quote{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:500;
    font-size:clamp(1.8rem, 4.4vw, 3.1rem);
    color:var(--green-900);
    line-height:1.3;
}
.divider-leaf{
    width:46px; height:2px;
    background:var(--green-500);
    margin:1.6rem auto;
    position:relative;
}
.divider-leaf::after{
    content:"";
    position:absolute; left:50%; top:50%;
    width:8px; height:8px;
    background:var(--green-300);
    border-radius:50%;
    transform:translate(-50%,-50%);
}

/* ============================================================
   11. ACTO 03 — El Alma del Mezcal
   ============================================================ */
.soul-card{
    padding:2.2rem;
    height:100%;
    transition:transform .4s var(--ease-cine), box-shadow .4s;
}
.soul-card:hover{ transform:translateY(-6px); }
.soul-card .icon-wrap{
    width:3.6rem; height:3.6rem;
    border-radius:1rem;
    background:var(--white);
    display:flex; align-items:center; justify-content:center;
    color:var(--green-700);
    margin-bottom:1.2rem;
    box-shadow:0 10px 24px -12px rgba(31,74,24,.3);
}
.soul-card .icon-wrap svg{ width:30px; height:30px; }
.soul-tag{
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--green-700);
}

/* ============================================================
   12. ACTO 04 — Galería / Carrusel
   ============================================================ */
.bottle-frame{
    aspect-ratio:914/1280;
    max-height:62vh;
    margin:0 auto;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:0 35px 60px -25px rgba(20,24,15,.45);
    border:1px solid rgba(45,107,34,.18);
}
.bottle-frame img{
    width:100%; height:100%; object-fit:cover; display:block;
}
#bottleCarousel .carousel-indicators [data-bs-target]{
    width:9px; height:9px; border-radius:50%;
    background-color:var(--green-300);
    opacity:.6;
    margin:0 5px;
}
#bottleCarousel .carousel-indicators .active{
    background-color:var(--green-700); opacity:1;
}
.carousel-control-prev, .carousel-control-next{ width:8%; }
.carousel-ctrl-icon{
    width:3rem; height:3rem; border-radius:50%;
    background:rgba(255,255,255,.85);
    color:var(--green-900);
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem;
    box-shadow:0 10px 24px -12px rgba(20,24,15,.3);
}

/* ============================================================
   13. ACTO 05 — Ficha Técnica
   ============================================================ */
.spec-row{
    display:flex; flex-wrap:wrap; gap:.4rem 1rem;
    padding:1.15rem 0;
    border-bottom:1px solid rgba(45,107,34,.16);
}
.spec-row:last-child{ border-bottom:none; }
.spec-label{
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--green-700);
    min-width:200px;
}
.spec-value{ flex:1; min-width:220px; font-size:1.02rem; }

/* ============================================================
   14. ACTO 06 — Notas de Cata
   ============================================================ */
.tasting-card{
    padding:2rem 1.7rem;
    height:100%;
    text-align:justify-all;
}
.tasting-card i{ font-size:1.6rem; color:var(--green-700); }
.tasting-label{
    font-weight:700;
    display:block;
    margin:.85rem 0 .35rem;
    color:var(--green-900);
}

/* ============================================================
   15. CIERRE
   ============================================================ */
.scene-cierre{ color:var(--white); }
.scene-cierre a.btn-cta{ background:var(--green-300); color:var(--green-900); }
.scene-cierre a.btn-cta:hover{ background:var(--white); color:var(--green-900); }
.scene-cierre .ig-link{ color:var(--green-300); }

/* ============================================================
   16. UTILIDADES / SCROLL CUE
   ============================================================ */
.scroll-cue{
    position:absolute; bottom:2.1rem; left:50%; transform:translateX(-50%);
    z-index:3; color:var(--green-900);
    display:flex; flex-direction:column; align-items:center; gap:.4rem;
    font-family:var(--font-mono); font-size:.65rem; letter-spacing:.14em;
    text-transform:uppercase;
    animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

.offcanvas-chapters .offcanvas-header{ border-bottom:1px solid var(--green-100); }
.offcanvas-chapters .list-group-item{
    border:none; background:transparent;
    padding:.9rem .25rem;
    display:flex; align-items:center; gap:.85rem;
    font-family:var(--font-mono); font-size:.8rem; letter-spacing:.04em;
    color:var(--ink);
}
.offcanvas-chapters .list-group-item .num{ color:var(--green-500); }
.offcanvas-chapters .list-group-item:hover{ color:var(--green-700); }

/* ============================================================
   17. RESPETO AL MOVIMIENTO REDUCIDO + PAUSA MANUAL
   ============================================================ */
body.motion-paused .bg-drift,
body.motion-paused .blob,
body.motion-paused .scroll-cue{
    animation-play-state:paused !important;
}
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .bg-drift, .blob, .scroll-cue{ animation:none !important; }
    .reveal{ transition-duration:.01ms !important; }
}

/* ============================================================
   18. RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px){
    .reel-nav{ display:none !important; }
    .scene{ padding:6.5rem 0 4.5rem; }
    .ghost-number{ font-size:clamp(4.5rem, 22vw, 7rem); }
}
@media (max-width: 575.98px){
    .story-lead::first-letter{ font-size:2.6rem; }
    .bottle-frame{ max-height:52vh; }
}