/* ════════════════════════════════════════════════════════════════
   Salón de Eventos Juliana · styles.css · v20260821
   Paradigma «EL LIENZO Y LA LUZ»: superficie de porcelana sin color
   propio; el color entra por las fotos y por --luz, que se REASIGNA
   por sección (y por ficha del mosaico de ocasiones).
   ════════════════════════════════════════════════════════════════ */

/* ── fuentes AUTOHOSPEDADAS (woff2, subconjunto latin) ─────────── */
@font-face{
  font-family:'Italiana';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/italiana-latin.woff2?v=20260824b) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:200 800;            /* archivo variable: cubre 300/400/500/700 */
  font-display:swap;
  src:url(fonts/karla-latin.woff2?v=20260824b) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --luz registrada para que la reasignación sea ANIMABLE */
@property --luz { syntax: '<color>'; inherits: true; initial-value: #B4707E; }

:root{
  --porcelana:#F7F4F1;
  --blanco:#FFFFFF;
  --tinta:#1C1A22;
  --tinta-suave:#5B5566;
  --malva:#B4707E;          /* marca — solo en superficies grandes / hairlines */
  --malva-hondo:#8E4F5D;    /* el que pisa texto y botones (AA sobre porcelana) */
  --champan:#C7B189;        /* SOLO filete 1px, viñeta y micro-label */
  --noche:#14121A;
  --luz:#B4707E;

  --dis:'Italiana', 'Marcellus', Georgia, serif;
  --tex:'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --nav:70px;
  --wrap:1220px;
  --ease:cubic-bezier(.22,.61,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0; background:var(--porcelana); color:var(--tinta);
  font:400 clamp(16px,1.05vw,17.5px)/1.66 var(--tex);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-weight:400}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ol,ul,dl,dd{margin:0; padding:0}
li{list-style:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
svg{display:block}

.wrap{width:min(100% - clamp(24px,8vw,96px), var(--wrap)); margin-inline:auto}

:focus-visible{
  outline:2px solid var(--tinta); outline-offset:3px;
  border-radius:2px;
}
.saltar{
  position:fixed; top:-100px; left:12px; z-index:120;
  background:var(--malva-hondo); color:#fff; padding:.7rem 1rem; border-radius:3px;
  transition:top .2s ease;
}
.saltar:focus{top:12px}

/* ── tipografía compartida ─────────────────────────────────────── */
.tit{
  font-family:var(--dis);
  font-size:clamp(32px,4.6vw,58px);
  line-height:1.16; letter-spacing:.055em;
  text-wrap:balance;
  text-transform:uppercase;
  color:var(--tinta);
  margin:0 0 .5em;
  /* Italiana pone los acentos MUY arriba: aire suficiente para la Ó */
  padding-top:.06em;
}
.micro{
  font:500 11.5px/1 var(--tex); letter-spacing:.32em; text-transform:uppercase;
  color:var(--tinta-suave); margin:0 0 1.35rem; display:flex; align-items:center; gap:.7rem;
}
.micro::before{content:''; width:26px; height:1px; background:var(--champan); flex:0 0 auto}
strong{font-weight:700; color:var(--tinta)}

/* ── botones ───────────────────────────────────────────────────── */
.btn{
  --bg:var(--malva-hondo);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  background:var(--bg); color:#fff; text-decoration:none;
  padding:.86rem 1.5rem; border-radius:2px;
  font:500 15px/1.15 var(--tex); letter-spacing:.02em;
  transition:background .25s ease, transform .25s var(--ease), box-shadow .25s ease;
  box-shadow:0 1px 0 rgba(28,26,34,.14);
}
.btn:hover{background:var(--malva); transform:translateY(-2px); box-shadow:0 8px 22px rgba(142,79,93,.26)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:1.12rem 2.1rem; font-size:clamp(15px,1.5vw,17px)}
.btn--sm{padding:.62rem 1.05rem; font-size:13.5px}
.btn--ghost{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); box-shadow:none;
}
.btn--ghost:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.7); box-shadow:none}

/* ════════════════ NAV ════════════════ */
.nav{
  position:fixed; inset:0 0 auto; z-index:60; height:var(--nav);
  background:rgba(247,244,241,.94);            /* SIN backdrop-filter (barra fija) */
  border-bottom:1px solid rgba(199,177,137,.45);
  transition:height .3s var(--ease), background .35s ease, border-color .35s ease;
}
/* Sobre el hero la barra desaparece: el hero es full-bleed de verdad.
   Estado por defecto = sólido, así que SIN JS nunca queda texto blanco
   sobre porcelana. */
.nav.is-top{
  background:linear-gradient(to bottom, rgba(20,18,26,.5) 0%, rgba(20,18,26,0) 100%);
  border-bottom-color:transparent;
}
.nav.is-top .marca{color:#fff}
.nav.is-top .marca__sub{color:rgba(255,255,255,.7)}
.nav.is-top .nav__links a{color:rgba(255,255,255,.88)}
.nav.is-top .nav__links a:hover{color:#fff}
.nav.is-top .hamb span{background:#fff}
.nav__in{
  height:100%; width:min(100% - clamp(20px,5vw,56px), 1440px); margin-inline:auto;
  display:flex; align-items:center; gap:clamp(14px,3vw,38px);
}
.marca{text-decoration:none; display:grid; line-height:1; margin-right:auto; color:var(--malva-hondo)}
.marca__sup,.marca__sub{
  font:500 8.5px/1 var(--tex); letter-spacing:.42em; text-transform:uppercase; color:var(--champan);
}
.marca__sub{color:var(--tinta-suave); letter-spacing:.46em}
.marca__nom{
  font-family:var(--dis); font-size:27px; line-height:1.05; letter-spacing:.12em;
  text-transform:uppercase; margin:.13em 0;
}
.nav__links{display:flex; gap:clamp(12px,1.8vw,26px)}
.nav__links a{
  text-decoration:none; font-size:14px; color:var(--tinta-suave); position:relative;
  padding:.3rem 0; transition:color .22s ease;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--luz); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease);
}
.nav__links a:hover{color:var(--tinta)}
.nav__links a:hover::after{transform:scaleX(1)}

.hamb{display:none; width:44px; height:44px; padding:11px; flex-direction:column; justify-content:space-between}
.hamb span{display:block; height:1.5px; background:var(--tinta); transition:transform .3s var(--ease), opacity .2s ease}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(9.5px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-9.5px) rotate(-45deg)}

/* A PRUEBA DE FALLOS: por defecto OCULTO; visible solo si NO tiene [hidden] */
.mobile-menu{
  display:none;
  position:fixed; inset:var(--nav) 0 0; z-index:59;
  background:var(--porcelana);
  flex-direction:column; justify-content:center; gap:1.1rem;
  padding:clamp(24px,8vw,56px);
}
.mobile-menu:not([hidden]){display:flex}
.mobile-menu a{
  text-decoration:none; font-family:var(--dis); font-size:clamp(27px,8vw,38px);
  letter-spacing:.08em; text-transform:uppercase; color:var(--tinta);
}
.mobile-menu .btn{
  align-self:flex-start; margin-top:1.2rem; font-family:var(--tex);
  font-size:15px; letter-spacing:.02em; text-transform:none; color:#fff;
}

/* ════════════════ §1 HERO ════════════════ */
.hero{
  position:relative; min-height:100svh; min-height:100vh;
  display:grid; align-items:end; overflow:hidden;
  isolation:isolate;
}
.hero__media{position:absolute; inset:0; margin:0; overflow:hidden}
.hero__bg{position:absolute; inset:-7% -3%; will-change:transform}
.hero__bg img{
  width:100%; height:100%; object-fit:cover;   /* recorte intencional */
  animation:kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns{ from{transform:scale(1) translate3d(0,0,0)} to{transform:scale(1.06) translate3d(-1.2%,-1%,0)} }

.hero__velo{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(20,18,26,.9) 0%, rgba(20,18,26,.74) 26%, rgba(20,18,26,.42) 52%, rgba(20,18,26,.14) 76%, rgba(20,18,26,.4) 100%),
    linear-gradient(to right, rgba(20,18,26,.5) 0%, rgba(20,18,26,.16) 46%, rgba(20,18,26,0) 72%);
}

/* mariposas reales del salón, recortadas de sus propias fotos */
.hero__bichos{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.bf{position:absolute; will-change:transform}
.bf .flota img{filter:drop-shadow(0 12px 26px rgba(0,0,0,.4))}
.bf--a{top:15%; left:6%; width:clamp(74px,10vw,132px)}
.bf--b{top:26%; right:9%; width:clamp(56px,7.2vw,96px); opacity:.92}
.bf--c{bottom:16%; right:5%; width:clamp(88px,12vw,158px); opacity:.9}

.flota{
  will-change:transform;
  animation:deriva var(--dur,9s) ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -1.7s);
}
@keyframes deriva{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%    {transform:translate3d(0, calc(var(--amp,10px) * -1), 0) rotate(var(--rot,.4deg))}
}

/* cortinilla = un REFLECTOR que pasa una sola vez (nunca tapa el hero) */
.hero__barrido{
  position:absolute; top:-20%; bottom:-20%; left:0; width:46%;
  pointer-events:none; z-index:3; opacity:0;
  background:linear-gradient(100deg, transparent 0%, rgba(180,112,126,.34) 42%, rgba(255,255,255,.5) 55%, rgba(180,112,126,.28) 68%, transparent 100%);
}
html.is-anim .hero__barrido{animation:barrido 1150ms cubic-bezier(.3,.7,.25,1) 120ms 1 both}
@keyframes barrido{
  0%  {transform:translate3d(-120%,0,0); opacity:0}
  18% {opacity:1}
  82% {opacity:1}
  100%{transform:translate3d(260%,0,0); opacity:0}
}

.hero__cont{
  position:relative; z-index:4;
  width:min(100% - clamp(24px,8vw,96px), var(--wrap)); margin-inline:auto;
  padding-block:clamp(120px,16vh,190px) clamp(84px,13vh,140px);
  max-width:min(100%, 980px);
}
.hero__h1{margin:0 0 1.15rem; color:#fff}
.h1__sup{
  display:block; font:500 clamp(10.5px,1.6vw,14px)/1 var(--tex);
  letter-spacing:.46em; text-transform:uppercase; color:rgba(255,255,255,.86);
  margin-bottom:.55rem;
}
.h1__nom{
  display:block; font-family:var(--dis);
  font-size:clamp(58px,13.5vw,158px); line-height:.95; letter-spacing:.075em;
  text-transform:uppercase; text-shadow:0 6px 40px rgba(20,18,26,.5);
}
html.is-anim .h1__nom{
  clip-path:inset(0 100% 0 0);
  animation:desvelar 900ms cubic-bezier(.3,.7,.25,1) 380ms both;
}
@keyframes desvelar{ from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 -6% 0 0)} }

.hero__lead{
  color:rgba(255,255,255,.93); font-size:clamp(16px,1.75vw,20.5px); line-height:1.6;
  max-width:60ch; margin:0 0 2rem; text-shadow:0 2px 18px rgba(20,18,26,.55);
}
.hero__acc{display:flex; flex-direction:column; align-items:flex-start; gap:.85rem}

.hero__baja{
  position:absolute; left:50%; bottom:22px; z-index:4; translate:-50% 0;
  width:26px; height:44px; border:1px solid rgba(255,255,255,.5); border-radius:14px;
  display:grid; place-items:start center; padding-top:8px;
}
.hero__baja span{width:2px; height:7px; border-radius:2px; background:rgba(255,255,255,.9)}
html.is-anim .hero__baja span{animation:baja 1.9s ease-in-out infinite}
@keyframes baja{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(13px);opacity:1}}

/* ════════════════ §2 EL LIENZO ════════════════ */
.lienzo{--luz:#B4707E; padding-block:clamp(84px,11vw,150px); position:relative}
.lienzo::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 55% at 78% 30%, var(--luz) 0%, transparent 62%);
  opacity:.09;
}
.lienzo__grid{
  position:relative; display:grid; gap:clamp(40px,6vw,84px);
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); align-items:center;
}
.lienzo__txt .tit{font-size:clamp(30px,3.8vw,48px)}
.lienzo__txt p{color:var(--tinta-suave); max-width:46ch}
.lienzo__txt .nota{
  margin-top:1.6rem; padding-top:1.1rem; border-top:1px solid rgba(199,177,137,.7);
  font-size:14.5px; color:var(--malva-hondo); font-style:italic;
}

.dip{position:relative; margin:0; padding-block:clamp(20px,4vw,54px)}
.dip__a,.dip__b{will-change:transform}
.dip__a{width:82%; margin-left:0}
.dip__a img{
  border-radius:2px; transform:rotate(-2deg);
  box-shadow:0 24px 60px rgba(28,26,34,.16);
}
.dip__b{width:70%; margin-left:auto; margin-top:-16%; position:relative; z-index:2}
.dip__b img{
  border-radius:2px; transform:rotate(1.5deg);
  box-shadow:0 30px 70px rgba(28,26,34,.28);
}
.dip__cap{
  position:absolute; z-index:3;
  font:500 10.5px/1 var(--tex); letter-spacing:.3em; text-transform:uppercase;
  background:var(--porcelana); color:var(--tinta-suave); padding:.5rem .75rem;
  border:1px solid rgba(199,177,137,.8);
}
.dip__cap--a{top:clamp(6px,2vw,30px); left:0}
.dip__cap--b{bottom:clamp(6px,2vw,26px); right:0}

/* ════════════════ divisor de baldosas LED ════════════════ */
.ledline{
  --luz:#B4707E;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:3px;
  height:26px; padding-inline:clamp(12px,4vw,48px);
  background:var(--porcelana);
}
.ledline i{
  background:var(--luz); border-radius:1px; opacity:.1;
  animation:baldosa 2.9s ease-in-out infinite;
  animation-delay:calc(var(--x) * 90ms);
}
@keyframes baldosa{0%,100%{opacity:.10} 45%{opacity:.78}}
.ledline.pausa i,.pista__led.pausa i{animation-play-state:paused}

/* ════════════════ §3 EL MOSAICO DE OCASIONES ════════════════
   Tratamiento propio del sitio. NO es un acordeón de squeeze: las siete
   fichas tienen ANCHO FIJO (grid) y no hay un solo flex-grow. Lo que cambia
   al encender una ficha es la LUZ: ella recupera saturación plena, las otras
   seis se apagan y --luz se reasigna a toda la sección. El hilo del sitio.
   ─ Los spans CIERRAN el rectángulo exacto: 4 columnas × 2 filas = 8 celdas,
     y la ficha 01 ocupa 2 (2+1+1+1+1+1+1 = 8). Sin huecos. ───────────── */
.ocs{
  --luz:#7A3FD1;
  padding-block:clamp(84px,11vw,140px) clamp(70px,9vw,120px);
  position:relative; overflow:hidden;
}
.ocs__glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(66% 54% at 50% 64%, var(--luz) 0%, transparent 66%);
  opacity:.085;
  /* solo opacidad: el gradiente NO se interpola (repintar un degradado a
     pantalla completa por frame es la causa clásica de jank) */
  transition:opacity .45s ease;
}
.ocs.viva .ocs__glow{opacity:.17}
.ocs > .wrap{position:relative; z-index:1}
.ocs__head{max-width:none; margin-bottom:clamp(34px,5vw,58px)}
.ocs__head .tit{max-width:640px}
.ocs__head::after{
  content:''; display:block; width:64px; height:2px; background:var(--luz);
  margin-top:1.6rem; opacity:.9;
}
.ocs__sub{color:var(--tinta-suave); max-width:60ch}

.mos{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:clamp(300px,25vw,368px);
  gap:clamp(8px,1vw,12px);
}
.fic--ancha{grid-column:span 2}

.fic{
  position:relative; overflow:hidden; border-radius:2px;
  background:var(--noche); isolation:isolate;
}
.fic__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;                       /* recorte intencional de la ficha */
  /* estado APAGADO: la foto se ve, pero sin color propio */
  filter:saturate(.3) brightness(.79);
  transform:scale(1.015);
  transition:filter .42s ease, transform .7s var(--ease);
}
/* mientras NINGUNA ficha está encendida (p. ej. sin JS y sin hover) todas
   se quedan en un punto medio legible, no apagadas */
.mos:not(.hay) .fic__img{filter:saturate(.62) brightness(.84)}
.fic.viva .fic__img{filter:saturate(1.05) brightness(1); transform:scale(1.055)}

.fic__vel{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,
    rgba(14,12,20,.94) 0%, rgba(14,12,20,.82) 44%, rgba(14,12,20,.46) 74%, rgba(14,12,20,.16) 100%);
}
.fic__aro{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  box-shadow:inset 0 0 0 1px var(--luz), inset 0 -3px 0 0 var(--luz);
  transition:opacity .38s ease;
}
.fic.viva .fic__aro{opacity:.95}

.fic__txt{
  position:absolute; z-index:3; left:0; right:0; bottom:0;
  padding:clamp(15px,1.7vw,24px);
}
.fic__num{
  font:500 10px/1 var(--tex); letter-spacing:.28em;
  color:var(--champan); margin:0 0 .55rem;
}
.fic__nom{
  font-family:var(--dis); color:#fff; text-transform:uppercase;
  letter-spacing:.055em; line-height:1.06; margin:0;
  font-size:clamp(19px,2vw,27px);
  text-shadow:0 2px 22px rgba(0,0,0,.7);
}
.fic--ancha .fic__nom{font-size:clamp(26px,3.1vw,42px)}
.fic__nom2{display:block; font-size:.62em; letter-spacing:.09em; color:rgba(255,255,255,.92)}

.fic__mas p{
  color:rgba(255,255,255,.92); font-size:14px; line-height:1.5;
  margin:.7rem 0 1rem; max-width:42ch; text-shadow:0 1px 12px rgba(0,0,0,.75);
}
.fic__cta{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  color:#fff; font-size:14px; font-weight:500; letter-spacing:.02em;
  padding:.62rem 1.05rem; border-radius:2px;
  background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.4);
  transition:background .25s ease, border-color .25s ease, transform .25s var(--ease);
}
.fic__cta::after{content:'→'; transition:transform .25s var(--ease)}
.fic__cta:hover{background:rgba(255,255,255,.22); border-color:#fff; transform:translateY(-2px)}
.fic__cta:hover::after{transform:translateX(3px)}
.fic__cta:focus-visible{outline:2px solid var(--luz); outline-offset:3px}

/* En puntero fino la ficha apagada solo muestra número y nombre; el resto
   entra al encenderla. Reserva su altura SIEMPRE → cero reflow en hover. */
@media (hover:hover) and (pointer:fine){
  .fic__mas{
    opacity:0; transform:translateY(10px); pointer-events:none;
    transition:opacity .3s ease, transform .42s var(--ease);
  }
  .fic.viva .fic__mas{opacity:1; transform:none; pointer-events:auto}
}

/* ════════════════ §4 LA PISTA (la única banda oscura) ════════════════ */
.pista{
  --luz:#7A3FD1;
  position:relative; overflow:hidden;
  background:var(--noche); color:rgba(255,255,255,.9);
  padding-block:clamp(86px,12vw,160px);
}
.pista__led{
  position:absolute; inset:0; pointer-events:none;
  display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(5,1fr);
  gap:clamp(4px,.8vw,11px); padding:clamp(4px,.8vw,11px);
  opacity:.5;
}
.pista__led i{
  background:var(--luz); border-radius:2px; opacity:.1;
  animation:baldosa 3.2s ease-in-out infinite;
  animation-delay:calc((var(--x) + var(--y)) * 90ms);
}
.pista::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 70% at 50% 50%, transparent 8%, rgba(20,18,26,.82) 78%);
}
.pista__grid{
  position:relative; z-index:2;
  display:grid; gap:clamp(40px,6vw,80px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center;
}
.pista .tit{color:#fff}
.pista .micro{color:rgba(255,255,255,.7)}
.pista__txt p{color:rgba(255,255,255,.82); max-width:44ch}
.pista__txt strong{color:#fff}
.pista__txt .btn{margin-top:.7rem}

.pista__fotos{position:relative; margin:0; min-height:clamp(340px,44vw,540px)}
.pf{will-change:transform}
.pf img{border-radius:2px}
.pf--a{width:82%; margin-left:auto}
.pf--a img{box-shadow:0 26px 60px rgba(0,0,0,.5)}
.pf--b{position:absolute; left:0; top:12%; width:42%; z-index:3}
.pf--b img{box-shadow:0 30px 70px rgba(0,0,0,.6)}
.pf--c{position:absolute; right:2%; bottom:-6%; width:34%; z-index:2}
.pf--c img{box-shadow:0 22px 48px rgba(0,0,0,.55)}

/* ════════════════ §5 EL MURO ════════════════ */
.muro{
  --luz:#B4707E;
  padding-block:clamp(84px,11vw,140px) clamp(90px,11vw,150px);
  position:relative;
}
.muro__head{max-width:52rem}
.muro__sub{color:var(--tinta-suave)}
.muro__sello{
  display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:.42rem;
  margin-top:1.5rem; padding:.62rem .95rem .62rem .8rem;
  border-left:2px solid var(--champan);
  font-size:14.5px; line-height:1.45; color:var(--tinta-suave);
  background:linear-gradient(to right, rgba(199,177,137,.14), transparent 72%);
}
.muro__sello b{font-family:var(--dis); font-size:20px; letter-spacing:.03em; color:var(--tinta)}
.muro__sello span{color:var(--tinta); font-weight:500}
/* ═══ Carrusel con deriva ═══════════════════════════════════════════════
   Doce montajes en una tira que corre sola. Es un scroller nativo: arrastre,
   rueda, touch y teclado los pone el navegador; main.js sólo le suma
   velocidad. La lista va DOS veces para que el salto de vuelta no se vea
   (la copia lleva data-dup y queda fuera del lightbox y del tabulador).
   Sin JS queda una tira arrastrable normal: nunca una fila rota.        */
.carrusel{
  display:flex; overflow-x:auto; overflow-y:hidden;
  gap:clamp(10px,1.5vw,20px); margin-top:clamp(40px,5vw,64px);
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  cursor:grab; padding-bottom:2px;
}
.carrusel::-webkit-scrollbar{display:none}
.carrusel:focus-visible{outline:2px solid var(--malva-hondo); outline-offset:4px}
.carrusel__pista{display:flex; gap:clamp(10px,1.5vw,20px); flex:0 0 auto}
.carrusel__it{
  margin:0; flex:0 0 auto;
  width:clamp(200px,24vw,300px); height:clamp(260px,30vw,380px);
}
.carrusel__ayuda{
  margin:clamp(14px,2vw,20px) 0 0; font-size:14px; color:var(--tinta-suave);
}
.mfoto{
  display:block; width:100%; height:100%; padding:0; position:relative; overflow:hidden;
  border-radius:2px; background:#e8e2dd; border:0; cursor:pointer;
}
.mfoto img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease), filter .5s ease;
  filter:saturate(.92);
}
.mfoto::after{
  content:''; position:absolute; inset:0; background:var(--luz);
  opacity:0; transition:opacity .4s ease; mix-blend-mode:multiply;
}
.mfoto:hover img,.mfoto:focus-visible img{transform:scale(1.045); filter:saturate(1.04)}
.mfoto:hover::after{opacity:.1}
@media (prefers-reduced-motion:reduce){ .mfoto img{transition:none} }

/* ════════════════ §6 CÓMO SE COTIZA ════════════════ */
.cot{--luz:#B4707E; padding-block:clamp(80px,10vw,130px); position:relative}
.cot__head{max-width:46rem; margin-bottom:clamp(22px,3vw,38px)}
.cot__pasos{position:relative; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,3vw,44px); align-items:start}
.cot__hilo{
  position:absolute; left:0; right:0; top:0; width:100%;
  height:clamp(84px,9vw,132px); pointer-events:none;
}
.cot__hilo path{fill:none; stroke:var(--champan); stroke-width:1.4; stroke-dasharray:1000}
.cot__pasos li{position:relative; padding-top:clamp(16px,2vw,26px)}
.cot__pasos li:nth-of-type(1){margin-top:clamp(62px,6.6vw,98px)}
.cot__pasos li:nth-of-type(2){margin-top:clamp(31px,3.3vw,49px)}
.cot__pasos li:nth-of-type(3){margin-top:0}
.cot__n{
  display:block; font-family:var(--dis); font-size:clamp(52px,7vw,96px); line-height:.9;
  color:var(--malva); opacity:.55; margin-bottom:.35rem;
}
.cot__pasos h3{
  font-family:var(--dis); font-size:clamp(21px,2.3vw,30px); letter-spacing:.05em;
  text-transform:uppercase; margin-bottom:.5rem;
}
.cot__pasos p{color:var(--tinta-suave); font-size:15.5px; max-width:34ch}
.cot__cta{
  margin-top:clamp(46px,6vw,80px); padding-top:clamp(28px,4vw,44px);
  border-top:1px solid rgba(199,177,137,.75);
  display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 2rem;
}
.cot__pie{margin:0; font-size:14px; color:var(--tinta-suave); max-width:34ch}

/* ════════════════ §7 FAQ ════════════════ */
.faq{--luz:#B4707E; padding-block:clamp(70px,9vw,120px); background:#FFFDFB;
  border-block:1px solid rgba(199,177,137,.5)}
.faq__head{margin-bottom:clamp(30px,4vw,52px)}
.faq__lista{display:grid}
.qa{
  display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr);
  gap:clamp(18px,3vw,50px);
  padding-block:clamp(22px,3vw,34px);
  border-top:1px solid rgba(199,177,137,.6);
}
.qa:last-child{border-bottom:1px solid rgba(199,177,137,.6)}
.qa h3{
  font-family:var(--dis); font-size:clamp(20px,2.1vw,27px); line-height:1.2;
  letter-spacing:.045em; text-transform:uppercase; color:var(--malva-hondo);
}
.qa p{color:var(--tinta-suave); margin:0; font-size:16px}

/* ════════════════ §8 CÓMO LLEGAR ════════════════ */
.lleg{--luz:#B4707E; padding-block:clamp(80px,10vw,130px)}
.lleg__head{max-width:46rem; margin-bottom:clamp(30px,4vw,50px)}
.lleg__sub{color:var(--tinta-suave); margin-top:1rem; max-width:52ch}
/* El mapa deja de flotar solo: comparte fila con los datos, la fachada y el
   CTA, y las dos columnas terminan a la misma altura. */
.lleg__grid{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,56px); align-items:stretch;
}
.lleg__col{display:flex; flex-direction:column; gap:clamp(22px,3vw,34px)}
.lleg__dl{display:grid; grid-template-columns:auto; gap:0; margin:0}
.lleg__dl dt{
  font-family:var(--tex); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-suave); margin-top:1.5rem;
}
.lleg__dl dt:first-child{margin-top:0}
.lleg__dl dd{margin:.5rem 0 0; color:var(--tinta); line-height:1.55}
.lleg__dl a{color:var(--malva-hondo); text-decoration:none; border-bottom:1px solid var(--luz)}
.lleg__dl a:hover{color:var(--tinta)}
.lleg__foto{margin:0}
.lleg__foto img{border-radius:2px; box-shadow:0 22px 54px rgba(28,26,34,.16); width:100%; height:auto}
.lleg__foto figcaption{
  margin-top:.7rem; font-size:13px; color:var(--tinta-suave); letter-spacing:.02em;
}
.lleg__cta{margin:auto 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem}
.lleg__maps{
  font-size:14px; color:var(--malva-hondo); text-decoration:none;
  border-bottom:1px solid var(--luz);
}
.lleg__maps:hover{color:var(--tinta)}
.lleg__mapa{
  position:relative; border-radius:2px; overflow:hidden; min-height:clamp(340px,42vw,560px);
  box-shadow:0 22px 54px rgba(28,26,34,.16); border:1px solid rgba(199,177,137,.5);
}
.lleg__mapa iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ════════════════ FOOTER ════════════════ */
.pie{background:var(--noche); color:rgba(255,255,255,.72); padding-block:clamp(52px,7vw,84px); font-size:14.5px}
.pie__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto); gap:clamp(26px,4vw,56px)}
.pie a{color:rgba(255,255,255,.92); text-decoration:none; border-bottom:1px solid rgba(199,177,137,.6)}
.pie a:hover{color:#fff; border-color:#fff}
.pie p{margin:0 0 .5rem}
.pie__marca{font-family:var(--dis); font-size:26px; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:.9rem}
.pie__marca span{font-family:var(--tex); font-size:9.5px; letter-spacing:.4em; color:var(--champan); vertical-align:middle}
.pie__legal{text-align:right; font-size:13px; align-self:end}
.pie__firma{margin-top:.9rem; color:rgba(255,255,255,.62)}

/* ════════════════ FAB ════════════════ */
.fab{
  position:fixed; right:clamp(12px,3vw,26px); bottom:clamp(12px,3vw,26px); z-index:70;
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--malva-hondo); color:#fff; text-decoration:none;
  padding:.85rem 1.25rem; border-radius:40px;
  box-shadow:0 12px 30px rgba(28,26,34,.3);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .3s ease, transform .3s var(--ease), background .25s ease;
  font:500 14.5px/1 var(--tex);
}
.fab.show{opacity:1; transform:none; pointer-events:auto}
.fab.show:hover{background:var(--malva); transform:translateY(-2px)}
.fab svg{width:20px; height:20px; fill:#fff; flex:0 0 auto}

/* ════════════════ MODAL QR ════════════════ */
.wa-modal{display:none; position:fixed; inset:0; z-index:98; place-items:center; padding:1.2rem}
.wa-modal:not([hidden]){display:grid}
.wa-ov{position:absolute; inset:0; background:rgba(20,18,26,.72); backdrop-filter:blur(6px)}
.wa-card{
  position:relative; z-index:2; width:min(100%,392px); background:var(--porcelana);
  border:1px solid rgba(199,177,137,.8); border-radius:3px;
  padding:clamp(24px,4vw,34px); text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.wa-card .micro{justify-content:center; margin-bottom:.7rem}
.wa-card h2{font-family:var(--dis); font-size:29px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.6rem}
.wa-txt{font-size:14px; color:var(--tinta-suave); margin-bottom:1.15rem}
.wa-qr{display:grid; place-items:center; min-height:180px; background:#fff; border:1px solid rgba(199,177,137,.6); padding:12px; margin-bottom:1rem}
.wa-qr img{width:180px; height:180px; image-rendering:pixelated}
.wa-prev{
  font-size:12.5px; color:var(--tinta-suave); background:rgba(199,177,137,.16);
  border-left:2px solid var(--champan); padding:.6rem .75rem; text-align:left; margin-bottom:1rem;
}
.wa-num{margin-top:.9rem; font-size:13px; color:var(--tinta-suave); letter-spacing:.06em}
.wa-x{
  position:absolute; top:6px; right:10px; font-size:28px; line-height:1;
  color:var(--tinta-suave); padding:.3rem .5rem;
}
.wa-x:hover{color:var(--tinta)}

/* ════════════════ LIGHTBOX ════════════════ */
.lb{display:none; position:fixed; inset:0; z-index:99; background:rgba(16,14,22,.94); place-items:center; padding:clamp(12px,4vw,48px)}
.lb:not([hidden]){display:grid}
.lb__fig{margin:0; max-width:min(100%,1000px); max-height:100%; display:grid; gap:.9rem; justify-items:center}
.lb__fig img{max-height:78vh; width:auto; border-radius:2px}
.lb__fig figcaption{color:rgba(255,255,255,.72); font-size:14px; text-align:center}
.lb__x{position:absolute; top:10px; right:16px; font-size:34px; line-height:1; color:#fff; padding:.3rem .6rem}
.lb__nav{
  position:absolute; top:50%; translate:0 -50%; font-size:38px; line-height:1;
  color:#fff; background:rgba(255,255,255,.1); border-radius:50%;
  width:52px; height:52px; display:grid; place-items:center;
}
.lb__nav:hover{background:rgba(255,255,255,.22)}
.lb__nav--prev{left:clamp(6px,2vw,26px)}
.lb__nav--next{right:clamp(6px,2vw,26px)}

/* ════════════════ REVEAL (gated por .is-anim → sin JS todo visible) ════════════════ */
html.is-anim [data-r]{opacity:0; transition:opacity .78s ease, transform .78s var(--ease)}
html.is-anim [data-r="fade"]{transform:translateY(26px)}
html.is-anim [data-r="up"]{transform:translateY(15px)}
html.is-anim [data-r="line"]{transform:none}
html.is-anim [data-r].in{opacity:1; transform:none}
html.is-anim .cot__hilo path{stroke-dashoffset:1000; transition:stroke-dashoffset 1.8s ease .25s}
html.is-anim .cot__hilo.in path{stroke-dashoffset:0}

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width:1080px){
  .lienzo__grid,.pista__grid{grid-template-columns:1fr}
  .pista__fotos{min-height:clamp(300px,60vw,460px)}
  .qa{grid-template-columns:1fr; gap:.6rem}
}

@media (max-width:900px){
  .nav__links{display:none}
  .hamb{display:flex}
  .nav .btn--sm{display:none}

  /* el mosaico pasa a 2 columnas; la ficha 01 sigue ocupando 2 → 2×4 = 8 celdas */
  .mos{grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:clamp(250px,44vw,320px)}
  .fic__cta{white-space:normal}

  .muro{padding-bottom:clamp(70px,12vw,110px)}
  .cot__pasos{grid-template-columns:1fr; gap:clamp(28px,6vw,44px)}
  .cot__pasos li:nth-of-type(1),.cot__pasos li:nth-of-type(2),.cot__pasos li:nth-of-type(3){margin-top:0}
  .cot__hilo{display:none}
  .lleg__grid{grid-template-columns:1fr}
  .lleg__mapa{min-height:clamp(280px,60vw,420px)}
  .pie__grid{grid-template-columns:1fr}
  .pie__legal{text-align:left}
  .dip__a{width:88%}
  .dip__b{width:76%; margin-top:-14%}
}

@media (max-width:620px){
  :root{--nav:62px}
  .hero__cont{padding-block:clamp(100px,14vh,140px) 96px}
  .hero__acc{align-self:stretch}
  .hero__acc .btn{width:100%}
  .bf--b{top:19%; right:6%}
  .bf--c{display:none}
  .fab span{display:none}
  .fab{padding:.95rem 1.05rem}
  .pf--b{width:52%; top:6%}
  .pf--c{width:44%; bottom:-4%}
  .pista__fotos{min-height:clamp(280px,80vw,420px)}
  .lb__nav{width:44px; height:44px; font-size:30px}
  /* una columna: 7 fichas, 7 filas — el rectángulo sigue cerrando exacto */
  .mos{grid-template-columns:1fr; grid-auto-rows:clamp(258px,64vw,340px)}
  .fic--ancha{grid-column:span 1}
  .fic--ancha .fic__nom{font-size:clamp(24px,7vw,32px)}
}

/* ════════════════ ACCESIBILIDAD DE MOVIMIENTO ════════════════ */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .flota,[data-f]{animation:none !important; transform:none !important}
  .hero__bg img{animation:none !important; transform:none !important}
  .hero__barrido{display:none !important}
  html.is-anim .h1__nom{animation:none !important; clip-path:none !important}
  html.is-anim [data-r]{opacity:1 !important; transform:none !important}
  html.is-anim .cot__hilo path{stroke-dashoffset:0 !important}
  .ledline i,.pista__led i{animation:none !important; opacity:.3 !important}
  .hero__baja span{animation:none !important}
  .fic__img{transform:none !important}
}

@media (prefers-contrast:more){
  .hero__velo{background:linear-gradient(to top, rgba(20,18,26,.94) 0%, rgba(20,18,26,.7) 46%, rgba(20,18,26,.4) 100%)}
  .lienzo__txt p,.muro__sub,.ocs__sub,.qa p,.cot__pasos p{color:#3A3542}
}

/* ═══════════════════════════════════════════════════════════════════════
   CORTINA DE ENTRADA — el salón que se abre
   Dos hojas de terciopelo malva que se separan sobre un barrido de luz,
   con el nombre en Italiana en el centro. Sólo se dibuja bajo html.tel,
   clase que pone un script en línea del <head> y que se retira sola a los
   1,7 s. Sin JS o con reduced-motion este bloque nunca se activa: es
   imposible que quede tapando la página.
   ═══════════════════════════════════════════════════════════════════════ */
.telon{display:none}
html.tel .telon{position:fixed; inset:0; z-index:9000; display:block; pointer-events:none}
html.tel .telon__h{
  position:absolute; top:0; bottom:0; width:51%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 2px, rgba(255,255,255,.05) 2px 26px),
    linear-gradient(100deg,#6E3A44 0%,#8E4F5D 42%,#B4707E 68%,#6E3A44 100%);
  animation:telon-abre 900ms cubic-bezier(.62,0,.24,1) 560ms both;
}
html.tel .telon__h--l{left:0}
html.tel .telon__h--r{right:0; animation-name:telon-abre-d}
html.tel .telon__luz{
  position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translate3d(-50%,0,0);
  background:linear-gradient(180deg,transparent,rgba(199,177,137,.95) 22%,rgba(255,255,255,.9) 50%,rgba(199,177,137,.95) 78%,transparent);
  animation:telon-luz 720ms cubic-bezier(.22,.61,.24,1) both;
}
html.tel .telon__marca{
  position:absolute; left:50%; top:50%; transform:translate3d(-50%,-50%,0);
  display:grid; justify-items:center; gap:.15rem; color:#F7F4F1; text-align:center;
  animation:telon-marca 1000ms cubic-bezier(.22,.61,.24,1) both;
}
html.tel .telon__sup,html.tel .telon__sub{
  font-family:var(--tex); font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(247,244,241,.82);
}
html.tel .telon__nom{
  font-family:var(--dis); font-size:clamp(2.4rem,7vw,4.4rem); line-height:1;
  letter-spacing:.04em; color:#F7F4F1;
}
@keyframes telon-abre  { from{transform:translate3d(0,0,0)} to{transform:translate3d(-101%,0,0)} }
@keyframes telon-abre-d{ from{transform:translate3d(0,0,0)} to{transform:translate3d(101%,0,0)} }
@keyframes telon-luz{
  0%  {opacity:0; transform:translate3d(-50%,0,0) scaleY(.2)}
  40% {opacity:1; transform:translate3d(-50%,0,0) scaleY(1)}
  100%{opacity:.35; transform:translate3d(-50%,0,0) scaleY(1)}
}
@keyframes telon-marca{
  0%  {opacity:0; transform:translate3d(-50%,-50%,0) scale(.94)}
  34% {opacity:1; transform:translate3d(-50%,-50%,0) scale(1)}
  62% {opacity:1; transform:translate3d(-50%,-50%,0) scale(1)}
  100%{opacity:0; transform:translate3d(-50%,-50%,0) scale(1.05)}
}
@media (prefers-reduced-motion:reduce){ html.tel .telon{display:none} }