/* ============================================================
   BODEGA ROMANORUM — hoja de estilos compartida
   Tipografías: Cinzel (títulos) + EB Garamond (texto)
   ============================================================ */

/* ===================== TOKENS ===================== */
/* Tema único: NEGRO + oro (cava de noche) */
:root{
  --granite:#0B0A0D;      /* fondo principal (negro) */
  --stone-1:#141118;      /* panel elevado */
  --stone-2:#0F0D13;      /* franjas */
  --ink:#EEE7D6;          /* texto principal */
  --ink-soft:#B6AD9B;     /* texto secundario */
  --ink-faint:#7E7666;    /* leyendas */
  --gold:#D8B45F;         /* acento */
  --gold-bright:#EFD48E;
  --wine:#B23A50;
  --line:color-mix(in srgb,var(--gold) 34%, transparent);
  --line-soft:color-mix(in srgb,var(--ink) 14%, transparent);
  --glow:radial-gradient(60% 60% at 50% 40%, color-mix(in srgb,var(--gold) 26%,transparent), transparent 70%);
  --hero-sky: linear-gradient(180deg,#0A090D 0%, #17121C 50%, #08070A 100%);
  --hero-veil: linear-gradient(180deg, rgba(8,7,10,0) 50%, rgba(8,7,10,.92) 100%);
  --shadow: 0 30px 70px -30px rgba(0,0,0,.85);
  --w-tinto:#6B1725;--w-rosado:#C87E92;--w-reserva:#3A0F16;--w-blanco:#B9A24C;
  --radius:16px;         /* esquinas redondeadas de las cajas */
  --radius-lg:22px;
  color-scheme: dark;
}

/* ===================== BASE ===================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
img{max-width:100%}
[hidden]{display:none!important}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0;background:var(--granite);color:var(--ink);
  font-family:"EB Garamond",Georgia,"Times New Roman",serif;
  font-size:clamp(1.02rem,.98rem + .3vw,1.14rem);line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:"Cinzel",Georgia,serif;font-weight:600;line-height:1.14;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
::selection{background:color-mix(in srgb,var(--gold) 40%,transparent);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.wrap{width:min(1120px,100% - 12vw);margin-inline:auto}
@media (max-width:640px){ .wrap{width:min(1120px,100% - 40px)} }

.eyebrow{font-family:"Cinzel",serif;font-size:.72rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:.9em}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--line)}
.eyebrow.center::after{content:"";width:34px;height:1px;background:var(--line)}
.rule{width:56px;height:1px;background:var(--line);margin:1.6rem auto}

/* ===================== NAV ===================== */
header.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--granite) 80%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .4s,background .4s}
header.nav.solid{border-bottom-color:var(--line-soft);background:color-mix(in srgb,var(--granite) 95%,transparent)}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.brand svg{width:30px;height:30px;color:var(--gold)}
.brand .navmark{height:46px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.brand b{font-family:"Cinzel",serif;font-weight:600;letter-spacing:.22em;font-size:.98rem}
.brand small{display:block;font-family:"Cinzel",serif;font-size:.52rem;letter-spacing:.34em;color:var(--gold);text-align:center;margin-top:2px}
nav ul{list-style:none;display:flex;gap:clamp(1rem,2.4vw,2.1rem);margin:0;padding:0;flex-wrap:wrap;justify-content:center}
nav a{text-decoration:none;font-family:"Cinzel",serif;font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);padding-bottom:3px;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
nav a:hover{color:var(--gold);border-bottom-color:var(--gold)}
nav a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}

/* ===================== HERO (inicio) ===================== */
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero{position:relative;min-height:min(720px,88vh);display:grid;place-items:center;text-align:center;overflow:hidden;background:var(--hero-sky);padding-block:clamp(3rem,10vh,6rem)}
.hero .veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,9,14,.58) 0%,rgba(12,9,14,.34) 42%,rgba(12,9,14,.84) 100%)}
.hero .inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.3rem;padding-inline:20px}
.crest{width:clamp(96px,15vw,140px);height:auto;color:var(--gold-bright);filter:drop-shadow(0 0 22px rgba(0,0,0,.5))}
.hero-logo{display:block;height:clamp(230px,40vh,410px);width:auto;max-width:88vw;filter:drop-shadow(0 8px 28px rgba(0,0,0,.55))}
.footer-logo{display:block;height:130px;width:auto;max-width:78%;margin:0 auto 1.4rem}
.hero h1{font-size:clamp(2.9rem,10vw,7.2rem);font-weight:700;letter-spacing:.14em;color:#F5EDDD;text-shadow:0 3px 30px rgba(0,0,0,.65)}
.hero .tag{font-family:"Cinzel",serif;font-size:clamp(.66rem,1.6vw,.86rem);letter-spacing:.32em;text-transform:uppercase;color:#E7DAC0;max-width:34ch;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.herocta{margin-top:.6rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}

/* ===================== PAGE BANNER ===================== */
.pagehead{position:relative;overflow:hidden;background:var(--hero-sky);text-align:center;padding-block:clamp(4.5rem,12vh,7rem);border-bottom:1px solid var(--line-soft)}
.pagehead .veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,9,14,.6) 0%,rgba(12,9,14,.4) 45%,rgba(12,9,14,.8) 100%)}
.pagehead .inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1rem;padding-inline:20px}
.pagehead h1{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(2.2rem,6vw,4rem);letter-spacing:.1em;color:#F5EDDD;text-shadow:0 3px 26px rgba(0,0,0,.6)}
.pagehead p{max-width:44ch;color:#EADFC9;font-style:italic;font-size:1.1em;text-shadow:0 1px 12px rgba(0,0,0,.5)}

.btn{display:inline-block;font-family:"Cinzel",serif;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;color:var(--granite);background:var(--gold);padding:.95em 2.4em;transition:background .3s,transform .3s}
.btn:hover{background:var(--gold-bright);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--line)}
.btn.ghost:hover{background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--gold)}

@media (prefers-reduced-motion:no-preference){
  .flicker{animation:flick 5s ease-in-out infinite}
  @keyframes flick{0%,100%{filter:drop-shadow(0 0 22px color-mix(in srgb,var(--gold) 55%,transparent))}45%{filter:drop-shadow(0 0 30px color-mix(in srgb,var(--gold) 78%,transparent))}70%{filter:drop-shadow(0 0 16px color-mix(in srgb,var(--gold) 42%,transparent))}}
  .hero .inner > *{opacity:0;transform:translateY(16px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
  .hero .inner > *:nth-child(1){animation-delay:.05s}.hero .inner > *:nth-child(2){animation-delay:.25s}.hero .inner > *:nth-child(3){animation-delay:.45s}.hero .inner > *:nth-child(4){animation-delay:.65s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ===================== SECTIONS ===================== */
section.block{padding-block:clamp(4rem,9vw,7rem)}
.kicker-row{display:flex;align-items:center;gap:1.2rem;margin-bottom:2.4rem;flex-wrap:wrap}

.story{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.story .art{position:relative;display:grid;place-items:center;min-height:340px}
.story .art::before{content:"";position:absolute;inset:6% 12%;background:var(--glow);z-index:0}
.story .art svg{position:relative;z-index:1;width:min(300px,80%);height:auto;color:var(--gold)}
.story .art img{position:relative;z-index:1;width:100%;min-height:340px;max-height:480px;object-fit:cover;border:1px solid var(--line);box-shadow:var(--shadow)}
.story h2{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:.04em;margin-bottom:1.4rem}
.story .lede{font-size:1.18em;color:var(--ink);margin-bottom:1.3rem;font-style:italic}
.story p + p{margin-top:1rem;color:var(--ink-soft)}
.story .sign{margin-top:1.8rem;font-family:"Cinzel",serif;letter-spacing:.16em;font-size:.78rem;color:var(--gold);text-transform:uppercase}

.band{background:var(--stone-2);border-block:1px solid var(--line-soft);text-align:center}
.band .quote{font-family:"Cinzel",serif;font-weight:500;letter-spacing:.06em;font-size:clamp(1.4rem,4.5vw,2.9rem);color:var(--ink);line-height:1.25}
.band .quote em{color:var(--gold);font-style:normal}

.intro{max-width:66ch;margin-inline:auto}
.intro h2{text-align:center;font-size:clamp(1.6rem,3.6vw,2.5rem);letter-spacing:.03em;margin-bottom:1.5rem}
.intro p{color:var(--ink-soft)}
.intro p + p{margin-top:1.1rem}
.wines-intro{background:var(--stone-1)}
.poem{max-width:52ch;margin:0 auto 3.6rem;text-align:center;font-size:1.16em;font-style:italic;color:var(--ink-soft);line-height:1.8}
.poem b{color:var(--gold);font-style:normal;font-weight:600;letter-spacing:.06em}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.4vw,1.8rem)}
.wine{text-align:center;padding:2.6rem 1.2rem 2.1rem;border:1px solid var(--line-soft);background:color-mix(in srgb,var(--granite) 40%,transparent);transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease}
.wine:hover{transform:translateY(-8px);border-color:var(--line);box-shadow:var(--shadow)}
.wine .bottlebox{height:clamp(320px,30vw,440px);display:grid;place-items:end center;margin-bottom:1.5rem}
.wine svg{height:210px;width:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.28))}
.wine .bottlebox img{height:100%;width:auto;max-width:100%;object-fit:contain;cursor:zoom-in;filter:drop-shadow(0 18px 26px rgba(0,0,0,.45));transition:transform .4s ease}
.wine:hover .bottlebox img{transform:translateY(-4px) scale(1.03)}
.wine h3{font-size:1.02rem;letter-spacing:.14em;margin-bottom:.5rem}
.wine .type{font-family:"Cinzel",serif;font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.9rem}
.wine p{font-size:.94em;color:var(--ink-soft)}

.cellar{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.cellar .txt h2{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:.04em;margin-bottom:1.4rem}
.cellar .txt p{color:var(--ink-soft)}
.cellar .txt p + p{margin-top:1rem}
.cellar .figure{position:relative;display:grid;place-items:center}
.cellar .figure::before{content:"";position:absolute;inset:10%;background:var(--glow)}
.cellar .figure svg{position:relative;width:100%;max-width:420px;height:auto;color:var(--gold)}
.cellar .figure img{position:relative;z-index:1;width:100%;max-width:540px;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);box-shadow:var(--shadow)}

.pull{background:var(--stone-2);border-block:1px solid var(--line-soft);text-align:center}
.pull .mark{font-family:"Cinzel",serif;font-size:3.4rem;color:var(--gold);line-height:0;display:block;margin-bottom:1rem}
.pull blockquote{margin:0;max-width:30ch;margin-inline:auto;font-size:clamp(1.25rem,3.4vw,2rem);line-height:1.4;font-style:italic;color:var(--ink)}

.explore{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,2rem)}
.xcard{position:relative;display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line-soft);padding:2.4rem 1.8rem;background:color-mix(in srgb,var(--granite) 40%,transparent);transition:transform .35s,border-color .35s,box-shadow .35s}
.xcard:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:var(--shadow)}
.xcard{padding:0;overflow:hidden}
.xcard .pad{display:block;padding:1.8rem 1.8rem 2.2rem}
.xcard img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;filter:saturate(.95)}
.xcard .eyebrow{margin-bottom:.9rem}
.xcard h3{font-size:1.3rem;letter-spacing:.06em;margin-bottom:.6rem}
.xcard p{color:var(--ink-soft);font-size:.96em}
.xcard .go{margin-top:1.1rem;font-family:"Cinzel",serif;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:block}

.horarios{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,4vw,3rem);margin-bottom:4rem}
.horario{border:1px solid var(--line-soft);padding:2rem 1.8rem;text-align:center;background:color-mix(in srgb,var(--granite) 30%,transparent)}
.horario h3{font-size:.9rem;letter-spacing:.2em;color:var(--gold);margin-bottom:1.1rem}
.horario .big{font-size:1.5rem;font-family:"Cinzel",serif;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.horario .small{color:var(--ink-soft);font-size:.92em;margin-top:.4rem}

.guide h3.gtitle{text-align:center;font-size:clamp(1.5rem,3.4vw,2.2rem);letter-spacing:.05em}
.acc{max-width:760px;margin:2.4rem auto 0;border-top:1px solid var(--line-soft)}
details.item{border-bottom:1px solid var(--line-soft)}
details.item summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:1.1rem;padding:1.5rem .2rem;font-family:"Cinzel",serif;font-weight:600;letter-spacing:.1em;font-size:clamp(1rem,2.4vw,1.25rem);color:var(--ink)}
details.item summary::-webkit-details-marker{display:none}
details.item summary .no{color:var(--gold);font-size:.8em;min-width:2.2ch}
details.item summary .plus{margin-left:auto;color:var(--gold);font-size:1.4rem;transition:transform .35s;line-height:1}
details.item[open] summary .plus{transform:rotate(45deg)}
details.item .body{padding:0 .2rem 1.8rem;color:var(--ink-soft);font-size:1.02em;max-width:70ch}
details.item .body strong{color:var(--gold);font-family:"Cinzel",serif;font-size:.82em;letter-spacing:.08em}
details.item .senses{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.35rem}
details.item .senses li{padding-left:1.2rem;position:relative}
details.item .senses li::before{content:"·";position:absolute;left:.2rem;color:var(--gold);font-weight:700}

.visit{text-align:center}
.card-visit{max-width:560px;margin-inline:auto;border:1px solid var(--line);padding:clamp(2.4rem,6vw,3.6rem) 2rem;background:color-mix(in srgb,var(--granite) 45%,transparent);box-shadow:var(--shadow);position:relative}
.card-visit .crest{width:64px;margin:0 auto 1.4rem;display:block}
.card-visit .name{font-family:"Cinzel",serif;letter-spacing:.24em;color:var(--gold);font-size:.8rem;text-transform:uppercase;margin-bottom:.9rem}
.card-visit .addr{font-size:1.14em;color:var(--ink)}
.card-visit .tel{margin-top:.4rem;font-size:1.14em;font-variant-numeric:tabular-nums}
.card-visit .tel a{color:var(--gold);text-decoration:none;letter-spacing:.04em}
.card-visit .btn{margin-top:2rem}

footer{background:var(--granite);border-top:1px solid var(--line-soft);text-align:center;padding-block:4rem 2.4rem}
footer .crest{width:66px;margin:0 auto 1.4rem;display:block}
footer .fbrand{font-family:"Cinzel",serif;letter-spacing:.3em;font-size:1rem;margin-bottom:1.4rem}
footer .cols{display:flex;justify-content:center;gap:clamp(1.5rem,6vw,4rem);flex-wrap:wrap;color:var(--ink-soft);font-size:.96em}
footer .cols a{color:var(--gold);text-decoration:none}
footer .footer-map{max-width:560px;margin:2.4rem auto 0}
footer .footer-map iframe{width:100%;height:220px;border:0;border-radius:var(--radius);filter:grayscale(.2)}
footer .footer-map .map-link{display:inline-block;margin-top:.9rem;font-family:"Cinzel",serif;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);text-decoration:none}
footer .footer-map .map-link:hover{color:var(--gold-bright)}
footer .legal{margin-top:2.6rem;color:var(--ink-faint);font-family:"Cinzel",serif;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;line-height:2}
footer .drink{color:var(--gold);opacity:.85}

@media (max-width:860px){
  .story,.cellar{grid-template-columns:1fr}
  .story .art{order:-1;min-height:280px}
  .cellar .figure{order:-1}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .horarios{grid-template-columns:1fr}
  .explore{grid-template-columns:1fr}
}
@media (max-width:460px){
  .grid4{grid-template-columns:1fr;max-width:280px;margin-inline:auto}
  nav ul{gap:.7rem 1.2rem}
  .navbar{justify-content:center}
}

/* ============================================================
   MOVIMIENTO / MOTION 2026
   ============================================================ */

/* Barra de progreso de scroll (la crea motion.js) */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  box-shadow:0 0 14px color-mix(in srgb,var(--gold) 65%,transparent);
  transition:width .12s linear}

/* Aparición al hacer scroll (sólo con JS; sin JS todo visible) */
html.js .block .kicker-row,
html.js .story h2, html.js .story .lede, html.js .story p, html.js .story .sign, html.js .story .art,
html.js .cellar .txt > *, html.js .cellar .figure,
html.js .pull blockquote, html.js .pull .mark,
html.js .wine, html.js .xcard, html.js .horario, html.js .guide .gtitle,
html.js .acc details, html.js .poem, html.js .band .quote, html.js .card-visit,
html.js .stat, html.js .score, html.js .feat, html.js .review, html.js .vut-lead .txt > *,
html.js .gallery figure, html.js .award{
  opacity:0;transform:translateY(32px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);
}
html.js .reveal-in{opacity:1 !important;transform:none !important}

/* Ken Burns en las fotos de fondo */
@media (prefers-reduced-motion:no-preference){
  .hero .bg{animation:kenburns 22s ease-in-out infinite alternate}
  .pagehead .bg{animation:kenburns 26s ease-in-out infinite alternate}
  @keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1.18) translate(-1.5%,-2.5%)}}
}

/* Indicador de scroll en la portada */
.scrollcue{margin-top:1.4rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;
  color:#E7DAC0;font-family:"Cinzel",serif;font-size:.56rem;letter-spacing:.3em;text-transform:uppercase}
.scrollcue .chev{width:18px;height:18px;border-right:1.5px solid var(--gold-bright);border-bottom:1.5px solid var(--gold-bright);transform:rotate(45deg)}
@media (prefers-reduced-motion:no-preference){
  .scrollcue .chev{animation:bob 1.8s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:rotate(45deg) translate(-3px,-3px);opacity:.4}50%{transform:rotate(45deg) translate(3px,3px);opacity:1}}
}

/* Brillo que barre los botones */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:65%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .65s ease}
.btn:hover::after{left:150%}

/* Tarjetas de vino: resplandor + flotación de la botella */
.wine{position:relative;overflow:hidden}
.wine::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 60% at 50% 118%, color-mix(in srgb,var(--gold) 24%,transparent), transparent 70%);
  opacity:0;transition:opacity .5s}
.wine:hover::before{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .wine .bottlebox img{animation:float 6s ease-in-out infinite}
  .wine:nth-child(2) .bottlebox img{animation-delay:-1.5s}
  .wine:nth-child(3) .bottlebox img{animation-delay:-3s}
  .wine:nth-child(4) .bottlebox img{animation-delay:-4.5s}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  .wine:hover .bottlebox img{animation-play-state:paused;transform:translateY(-10px) scale(1.05)}
}

/* Zoom suave en las imágenes de las tarjetas de inicio */
.xcard img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.xcard:hover img{transform:scale(1.07)}

/* Subrayado del menú que crece desde el centro */
nav a{border-bottom:none !important;padding-bottom:4px}
nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:1px;background:var(--gold);
  transition:left .3s ease,right .3s ease}
nav a:hover::after,nav a[aria-current="page"]::after{left:0;right:0}

/* Logo de la portada: flotación + resplandor */
@media (prefers-reduced-motion:no-preference){
  .hero-logo{animation:logofloat 7s ease-in-out infinite, logoglow 5s ease-in-out infinite}
  @keyframes logofloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  @keyframes logoglow{0%,100%{filter:drop-shadow(0 8px 26px rgba(0,0,0,.5))}
    50%{filter:drop-shadow(0 10px 36px color-mix(in srgb,var(--gold) 55%,transparent))}}
}

/* Franja de cifras */
.stats-band{background:var(--stone-2);border-block:1px solid var(--line-soft)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.stat{background:var(--granite);padding:clamp(1.8rem,4vw,2.8rem) 1rem;text-align:center}
.stat .num{font-family:"Cinzel",serif;font-size:clamp(1.7rem,4.4vw,2.9rem);color:var(--gold);letter-spacing:.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat .lbl{margin-top:.8rem;font-family:"Cinzel",serif;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
@media (max-width:640px){ .stats{grid-template-columns:repeat(2,1fr)} }

@media (prefers-reduced-motion:reduce){
  html.js .block .kicker-row, html.js .story h2, html.js .story .lede, html.js .story p,
  html.js .story .sign, html.js .story .art, html.js .cellar .txt > *, html.js .cellar .figure,
  html.js .pull blockquote, html.js .pull .mark, html.js .wine, html.js .xcard, html.js .horario,
  html.js .guide .gtitle, html.js .acc details, html.js .poem, html.js .band .quote,
  html.js .card-visit, html.js .stat{opacity:1;transform:none;transition:none}
  .hero-logo{animation:none}
}

/* ============================================================
   ESQUINAS REDONDEADAS (cajas de toda la web)
   ============================================================ */
.wine,
.horario,
.xcard,
.story .art img,
.cellar .figure img{border-radius:var(--radius)}
.card-visit{border-radius:var(--radius-lg)}
.stats{border-radius:var(--radius);overflow:hidden}
.acc{border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden}
.acc details:last-child{border-bottom:none}
.btn{border-radius:999px}
.horario,.wine,.xcard{overflow:hidden}
.acc details summary{padding-inline:1.5rem}
.acc details .body{padding-inline:1.5rem}
/* la barra de progreso mantiene su forma; el logo y fotos de fondo no se redondean */

/* ============================================================
   VUT / ALOJAMIENTO
   ============================================================ */
.vut-lead{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.vut-lead .txt h2{font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:.03em;margin-bottom:1.3rem}
.vut-lead .txt p{color:var(--ink-soft)} .vut-lead .txt p + p{margin-top:1rem}
.score{border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,2.2rem);text-align:center;background:color-mix(in srgb,var(--granite) 45%,transparent);box-shadow:var(--shadow)}
.score .big{font-family:"Cinzel",serif;font-size:3.6rem;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.score .word{font-family:"Cinzel",serif;letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;color:var(--ink);margin-top:.5rem}
.score .sub{color:var(--ink-soft);font-size:.9em;margin-top:.35rem}
.score .cats{margin-top:1.5rem;display:grid;gap:.55rem;text-align:left}
.score .cats div{display:flex;justify-content:space-between;font-size:.9em;color:var(--ink-soft);border-bottom:1px solid var(--line-soft);padding-bottom:.4rem}
.score .cats b{color:var(--gold);font-variant-numeric:tabular-nums}

.features{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.feat{border:1px solid var(--line-soft);border-radius:var(--radius);padding:1.6rem 1rem;text-align:center;background:color-mix(in srgb,var(--granite) 40%,transparent)}
.feat .n{font-family:"Cinzel",serif;font-size:clamp(1.8rem,4vw,2.6rem);color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.feat .t{font-family:"Cinzel",serif;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:.6rem}
.amenities{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:2.2rem}
.chip{border:1px solid var(--line-soft);border-radius:999px;padding:.55em 1.15em;font-family:"Cinzel",serif;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.chip::before{content:"·";color:var(--gold);margin-right:.55em;font-weight:700}

.reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.review{border:1px solid var(--line-soft);border-radius:var(--radius);padding:1.7rem;background:color-mix(in srgb,var(--granite) 40%,transparent)}
.review .stars{color:var(--gold);letter-spacing:.24em;font-size:.85rem}
.review p{margin-top:.7rem;font-style:italic;color:var(--ink)}
.review .who{margin-top:1rem;font-family:"Cinzel",serif;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.booking-cta{text-align:center}
.license{margin-top:1.2rem;font-family:"Cinzel",serif;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.rules{margin-top:.6rem;color:var(--ink-soft);font-size:.9em}

@media (max-width:760px){ .vut-lead{grid-template-columns:1fr} .features{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .reviews{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  html.js .score, html.js .feat, html.js .review{opacity:1;transform:none;transition:none}
}

/* Galería de fotos de la vivienda */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem}
.gallery figure{margin:0;overflow:hidden;border-radius:var(--radius)}
.gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .5s;filter:saturate(.96)}
.gallery figure:hover img{transform:scale(1.06);filter:saturate(1.05)}
@media (max-width:760px){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media (max-width:440px){ .gallery{grid-template-columns:1fr} }

/* Premios / reconocimientos */
.awards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.award{border:1px solid var(--line-soft);border-radius:var(--radius);padding:2rem 1.4rem;text-align:center;background:color-mix(in srgb,var(--granite) 40%,transparent)}
.award .medal{width:60px;height:60px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;
  font-family:"Cinzel",serif;font-weight:700;font-size:.72rem;line-height:1;color:#2A2114;text-align:center;
  background:linear-gradient(145deg,var(--gold-bright),var(--gold));box-shadow:0 6px 18px color-mix(in srgb,var(--gold) 45%,transparent)}
.award .lvl{font-family:"Cinzel",serif;letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;color:var(--gold);margin-bottom:.45rem}
.award .comp{color:var(--ink);font-weight:600}
.award .det{color:var(--ink-soft);font-size:.9em;margin-top:.35rem}
@media (max-width:760px){ .awards{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .awards{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ html.js .award{opacity:1;transform:none;transition:none} }

/* Visor ampliado (lightbox) */
#lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,5,8,.93);display:flex;
  align-items:center;justify-content:center;padding:24px;cursor:zoom-out;opacity:0;
  pointer-events:none;transition:opacity .3s}
#lightbox.open{opacity:1;pointer-events:auto}
#lightbox img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.7)}
#lightbox .x{position:absolute;top:18px;right:24px;color:var(--gold-bright);font-size:2rem;font-family:"Cinzel",serif;line-height:1}