/* ===== Logo ===== */
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-text small{font-family:var(--sans);font-size:.55rem;letter-spacing:.35em;color:var(--gold);text-transform:uppercase;font-weight:400;margin-top:4px}
.logo-img{height:54px;width:auto;max-width:200px;object-fit:contain;transition:height .4s var(--ease)}
.nav.scrolled .logo-img{height:40px}
.footer .logo-img{height:60px;filter:brightness(0) invert(1);opacity:.92}
.footer .logo-text small{display:none}
@media(max-width:860px){.logo-img{height:42px;max-width:150px}}
/* ===== Animaciones y estilo moderno ===== */
.cats{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
:root{--ease:cubic-bezier(.22,.8,.24,1)}
body{animation:pageIn .9s var(--ease) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
::selection{background:var(--gold);color:#fff}
/* nav */
.nav{transition:padding .4s var(--ease),box-shadow .4s}
.nav.scrolled{padding-top:8px;padding-bottom:8px;box-shadow:0 8px 30px rgba(0,0,0,.07)}
.nav.scrolled .logo{font-size:1.5rem}
.logo{transition:font-size .4s var(--ease)}
.badge.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.5)}}
/* botones con brillo */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:background .3s,color .3s,transform .3s var(--ease),box-shadow .3s}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease);z-index:-1}
.btn:hover::after{transform:translateX(120%)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
/* hero */
.slide.active{animation:kenburns 14s ease-out both}
@keyframes kenburns{from{background-size:108%}to{background-size:100%}}
.hero::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 80% 20%,rgba(217,184,101,.18),transparent 55%)}
.slide-inner{position:relative;z-index:3}
.slide-inner>*{opacity:0;transform:translateY(34px)}
.slide.active .slide-inner>*{animation:rise 1s var(--ease) forwards}
.slide.active .slide-inner>:nth-child(1){animation-delay:.2s}
.slide.active .slide-inner>:nth-child(2){animation-delay:.4s}
.slide.active .slide-inner>:nth-child(3){animation-delay:.6s}
.slide.active .slide-inner>:nth-child(4){animation-delay:.8s}
@keyframes rise{to{opacity:1;transform:none}}
.slide-inner h1::after{content:'';display:block;width:0;height:2px;background:var(--gold2);margin-top:20px;transition:width 1.2s var(--ease) 1s}
.slide.active h1::after{width:90px}
.hero-art{position:absolute;right:9%;top:50%;width:min(24vw,260px);transform:translateY(-50%);z-index:1}
.hero-art::before{content:'';position:absolute;inset:-22%;border-radius:50%;border:1px solid rgba(217,184,101,.35);animation:spin 30s linear infinite}
.hero-art::after{content:'';position:absolute;inset:-40%;border-radius:50%;border:1px dashed rgba(217,184,101,.2);animation:spin 50s linear infinite reverse}
.hero-art .bottle{position:relative;width:100%;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
@keyframes float{50%{transform:translateY(-16px) rotate(1.5deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
.dots button{transition:width .4s var(--ease),background .3s;height:3px}
.dots button.on{width:56px}
/* aparición al hacer scroll */
.rv{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
/* tarjetas */
.card{position:relative;overflow:hidden}
.card.rv.in{transition:transform .5s var(--ease),box-shadow .5s,opacity .9s var(--ease);transition-delay:0s}
.card.rv.in:hover{transform:translateY(-8px)}
.card::after{content:'Ver detalle →';position:absolute;left:0;right:0;bottom:0;background:var(--ink);color:var(--gold2);text-align:center;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;padding:13px;transform:translateY(101%);transition:transform .45s var(--ease)}
.card:hover::after{transform:none}
.card-body{padding-bottom:26px}
.card-body h3{transition:color .3s}.card:hover h3{color:var(--gold)}
.bottle{transition:transform .6s var(--ease)}
.card:hover .bottle{transform:translateY(-8px) scale(1.06) rotate(-2deg)}
.card-img::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(255,255,255,.55),transparent 65%);opacity:0;transition:opacity .6s;z-index:1}
.card:hover .card-img::before{opacity:1}
.tag{z-index:3}
/* categorías */
.cat{position:relative;overflow:hidden;background:rgba(255,253,248,.88);backdrop-filter:blur(10px)}
.cat::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--ink),#2a2110);transform:translateY(100%);transition:transform .55s var(--ease)}
.cat:hover::before{transform:none}
.cat>*{position:relative;transition:color .4s}
.cat:hover h3,.cat:hover span{color:#fff}.cat:hover em{color:var(--gold2)}
.cat em{display:inline-block;transition:transform .4s var(--ease),color .4s}.cat:hover em{transform:translateX(6px)}
.sec-head h2::after{content:'';display:block;height:1px;width:0;margin:14px auto 0;background:var(--gold);transition:width 1.1s var(--ease) .3s}
.sec-head.in h2::after{width:70px}
/* marquee */
.marquee{overflow:hidden;background:var(--ink);color:var(--gold2);margin-top:80px;padding:16px 0}
.marquee-track{display:flex;width:max-content;animation:marq 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--serif);font-size:1.5rem;font-style:italic;padding:0 28px;white-space:nowrap}
.marquee span::after{content:'✦';margin-left:56px;font-size:.8rem;font-style:normal;opacity:.6}
@keyframes marq{to{transform:translateX(-50%)}}
/* historia */
.story{position:relative;overflow:hidden;margin-top:0;background:radial-gradient(circle at 20% 0,#2a2110,#0d0d0d 60%)}
.story::before{content:'';position:absolute;width:520px;height:520px;right:-140px;top:-180px;border-radius:50%;border:1px solid rgba(217,184,101,.2);animation:spin 60s linear infinite}
.story-in{position:relative}
.pillars>div{transition:transform .4s var(--ease)}.pillars>div:hover{transform:translateY(-6px)}
/* páginas internas */
.page-head{background:radial-gradient(ellipse at top,#fff 0,var(--ivory) 70%)}
.page-head h1{animation:rise 1s var(--ease) both;opacity:0;transform:translateY(34px)}
.page-head .eyebrow{animation:rise 1s var(--ease) .1s both;opacity:0;transform:translateY(34px)}
.chip{transition:all .3s var(--ease)}.chip:hover{transform:translateY(-2px)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(184,146,58,.15)}
input,select,textarea{transition:border-color .3s,box-shadow .3s}
.p-media{animation:fadeUp 1s var(--ease) both}
.p-media .bottle{animation:float 6s ease-in-out infinite}
.p-info>*{animation:fadeUp .9s var(--ease) both}
.p-info>:nth-child(2){animation-delay:.1s}.p-info>:nth-child(3){animation-delay:.2s}.p-info>:nth-child(n+4){animation-delay:.3s}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.line{transition:background .3s}.line:hover{background:rgba(247,243,234,.6)}
.x{transition:transform .3s,color .3s}.x:hover{transform:rotate(90deg);color:#a33}
.summary{position:sticky;top:96px}
.footer a{transition:color .3s,transform .3s var(--ease)}.footer a:hover{transform:translateX(4px)}
@media(max-width:860px){.hero-art{right:50%;transform:translate(50%,-50%);opacity:.18;width:60vw}.summary{position:static}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.rv,.slide-inner>*,.page-head h1,.page-head .eyebrow{opacity:1;transform:none}}