/* =====================================================================
   SABAOTH FQ INSULATION LLC - base.css
   V3 "THE SILVER STANDARD" - industrial oscuro cinematografico.
   Piel compartida por las 10 paginas (EN raiz + ES bajo /es/).
   Fuente de verdad: concepts/v3 (prototipo aprobado por el dueno).

   LENGUAJE: fondo tinta #0A0A0B / #101013 - papel #FBFBFA - UN acento
   #FE7300 semantico - hairlines rgba(251,251,250,.14) - Anton display +
   Inter texto - eyebrows con "//" - loader "THE WRAP".

   LEYES HORNEADAS AQUI
     0720-a #1  logo nav grande (50-58px) + links 14.5px
     0720-c     nav persistente premium: absolute transparente en reposo,
                .is-stuck = fixed + fondo tinta + slide-down .35s
                (la histeresis 120/40 vive en js/boot.js; NINGUN tween
                GSAP toca el nodo del header)
     0714-c     rendija del loader inset:0 0 2px 0 - pre-siembra .001
     l3         burger <-> X mismo boton, scroll preservado
     0720-d     .form-note inline bajo el form + honeypot display:none
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 - TIPOGRAFIA self-hosted (cero CDN, ley t5), font-display swap
   --------------------------------------------------------------------- */
@font-face { font-family:'Anton'; src:url('/assets/fonts/anton-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter-800.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }

/* ---------------------------------------------------------------------
   2 - TOKENS (paleta exacta del prototipo v3; todo vw con techo px)
   --------------------------------------------------------------------- */
:root {
  --ink:#0A0A0B;                       /* fondo maestro */
  --ink2:#101013;                      /* banda alterna */
  --ink3:#070708;                      /* boca de escena / loader */
  --paper:#FBFBFA;
  --soft:#D9D9D8;
  --mut:#979797;
  --dim:#585858;
  --acc:#FE7300;
  --acc-hi:#FF8A24;
  --acc-ink:#160B02;                   /* tinta sobre naranja (contraste AAA) */
  --hair:rgba(251,251,250,.14);
  --hair-soft:rgba(251,251,250,.07);

  --disp:'Anton','Arial Narrow',Impact,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;

  --gut:clamp(18px,4.6vw,96px);
  --maxw:1560px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------------------------------------------------------------------
   3 - RESET
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--ink); overflow-x:clip; scroll-behavior:auto; }
body {
  background:var(--ink); color:var(--paper);
  font-family:var(--body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
ul, ol { list-style:none; }
a { color:inherit; text-decoration:none; }
img, svg { display:block; max-width:100%; }
button { font:inherit; color:inherit; background:none; border:0; }
::selection { background:var(--acc); color:var(--acc-ink); }

.vh {
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
/* anclas bajo el header pegado (0720-c: el nav fijo no tapa destinos) */
main [id] { scroll-margin-top:96px; }
a:focus-visible, button:focus-visible {
  outline:2px solid var(--acc); outline-offset:3px;
}

/* ancho util compartido de interiores */
.wrap { width:min(100% - (var(--gut) * 2), var(--maxw)); margin-inline:auto; }

/* ---------------------------------------------------------------------
   4 - LOADER "THE WRAP" (solo Home, cada carga)
   La linea caliente naranja se forra de plata y la hoja se abre.
   Rendija 0714-c p1: inset 0 0 2px 0 (2px de hero visible fuerzan el
   decode + raster + upload de texturas DURANTE el loader).
   --------------------------------------------------------------------- */
.loader { position:fixed; inset:0 0 2px 0; z-index:90; pointer-events:none; }
.ld-half { position:absolute; left:0; right:0; height:50.2%; background:var(--ink3); will-change:transform; }
.ld-top { top:0; } .ld-bot { bottom:0; }
.ld-core {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px;
}
.ld-core img { width:196px; height:auto; opacity:.001; }
.ld-pipe { position:relative; width:min(320px,60vw); height:4px; }
.ld-pipe .hot { position:absolute; inset:0; background:var(--acc); transform:scaleX(0); transform-origin:left; will-change:transform; }
.ld-pipe .wrap-line { position:absolute; inset:-2px 0; background:linear-gradient(180deg,#EDEDEC,#B9B9B7 45%,#8E8E8C); transform:scaleX(0); transform-origin:left; will-change:transform; }
.ld-tag {
  font-size:10.5px; font-weight:600; letter-spacing:.34em;
  color:var(--mut); text-transform:uppercase; opacity:.001;
}
html:not(.js) .loader, html.langswap .loader { display:none; }
/* backdrop-filter apagado en vuelo (0714-c p5) */
body.is-booting .bf { backdrop-filter:none !important; }

/* ---------------------------------------------------------------------
   5 - NAV PERSISTENTE (ley 0720-c)
   Reposo: absolute y transparente sobre la escena, links papel.
   Pegado: boot.js pone .is-stuck -> fixed, fondo tinta solido, hairline,
   slide-down .35s por @keyframes (cero GSAP sobre el nodo, cero CLS).
   --------------------------------------------------------------------- */
.site-nav {
  position:absolute; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; gap:clamp(12px,2vw,26px);
  padding:clamp(16px,1.8vw,26px) var(--gut);
  pointer-events:none;
}
.site-nav > * { pointer-events:auto; }
.nav-logo { flex-shrink:0; }                                 /* jamas aplastar el logo */
/* ancho fluido con techo (AR 3.5 intacto via height:auto): 119px @390 -> 203px @1440 */
.nav-logo img { width:clamp(112px, 8vw + 88px, 203px); height:auto; max-width:none; }   /* 0720-a #1 */

.nav-links { display:flex; gap:clamp(16px,2.1vw,32px); margin-left:auto; }
.nl {
  position:relative; display:block; padding-bottom:6px;
  font-size:14.5px; font-weight:600; letter-spacing:.13em;
  color:var(--paper); text-transform:uppercase; opacity:.86;
}
.nl:hover, .nl:focus-visible { opacity:1; }
.nl::after {
  content:''; position:absolute; left:0; right:14%; bottom:0; height:2px;
  background:var(--acc); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.nl:hover::after, .nl:focus-visible::after { transform:scaleX(1); }
.nl.is-active, .nl.on { opacity:1; }
.nl.is-active::after, .nl.on::after { transform:scaleX(1); }

.nav-side { display:flex; align-items:center; gap:clamp(10px,1.3vw,18px); }

/* telefono con presencia junto al CTA */
.nav-tel {
  display:inline-flex; align-items:baseline; gap:8px; white-space:nowrap;
  padding-left:14px; border-left:1px solid var(--hair);
}
.nav-tel .k { font-size:9px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--mut); }
.nav-tel b { font-size:14.5px; font-weight:800; letter-spacing:.02em; color:var(--paper); }
.nav-tel:hover b { color:var(--acc-hi); }

.lang-pill {
  display:flex; border:1px solid var(--hair); border-radius:99px; overflow:hidden;
  font-size:11px; font-weight:600; letter-spacing:.1em;
}
.lang-pill a { padding:7px 12px; color:var(--mut); }
.lang-pill a.on { background:var(--paper); color:var(--ink); }

/* --- estado PEGADO (boot.js, histeresis pega>120 / despega<40) --- */
.site-nav.is-stuck {
  position:fixed; z-index:50; background:var(--ink2);
  padding-top:10px; padding-bottom:10px;
  border-bottom:1px solid var(--hair);
  animation:nav-stick-in .35s var(--ease);
}
@keyframes nav-stick-in { from { transform:translateY(-100%); } to { transform:translateY(0); } }
.site-nav.is-stuck .nav-logo img { width:clamp(122px, 4vw + 110px, 168px); }

/* --- burger + overlay movil (ley l3) --- */
.nav-burger {
  display:none; width:44px; height:44px; padding:0 9px; cursor:pointer;
  border:1px solid var(--hair); border-radius:3px;
  flex-direction:column; justify-content:center; gap:5px;
}
.nav-burger span { display:block; height:2px; background:var(--paper); }
.nav-burger.is-x span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-burger.is-x span:nth-child(2) { opacity:0; }
.nav-burger.is-x span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
/* con el menu abierto el header sube sobre el overlay: el mismo boton
   cierra a cualquier profundidad de scroll (ley l3) */
html.menu-locked .site-nav { z-index:70; }
html.menu-locked .site-nav:not(.is-stuck) { background:transparent; }
html.menu-locked { overflow:hidden; }    /* lock SOLO en html (ley l3) */

.mobile-menu {
  position:fixed; inset:0; z-index:60; background:var(--ink3);
  display:none; flex-direction:column; justify-content:center;
  padding:14vh 8vw 8vh;
}
.mobile-menu.is-open { display:flex; }
.mobile-menu[aria-hidden="true"] { display:none; }
.mm-link {
  display:flex; align-items:baseline; gap:14px; padding:11px 0;
  font-family:var(--disp); font-weight:400;
  font-size:clamp(2rem,10vw,2.9rem); line-height:1;
  text-transform:uppercase; color:var(--paper); letter-spacing:.01em;
}
.mm-link i { width:16px; height:2px; background:var(--hair); flex:0 0 auto; }
.mm-link.is-active i { background:var(--acc); width:30px; }
.mm-foot { margin-top:6vh; display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.mm-foot .mm-tel { display:flex; flex-direction:column; gap:3px; }
.mm-foot .mm-tel span { font-size:9px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--mut); }
.mm-foot .mm-tel b { font-size:17px; font-weight:800; color:var(--paper); }
.mm-lang { display:flex; margin-left:auto; border:1px solid var(--hair); border-radius:99px; overflow:hidden; font-size:11.5px; font-weight:600; letter-spacing:.1em; }
.mm-lang a { padding:7px 12px; color:var(--soft); }
.mm-lang a.on { background:var(--paper); color:var(--ink); }

/* NOTA de cascada: .btn/.nav-cta base viven mas abajo (seccion 7); estas
   reglas responsivas usan .site-nav .nav-cta para GANARLES siempre. */
@media (max-width:1340px) { .nav-tel { display:none; } }
@media (max-width:1120px) {
  .nav-links, .lang-pill { display:none; }
  .site-nav .nav-cta { margin-left:auto; }
  .nav-burger { display:flex; }
  .site-nav { gap:10px; }
  .site-nav.is-stuck { animation:nav-stick-fade .35s ease; }
}
@keyframes nav-stick-fade { from { opacity:.001; } to { opacity:1; } }
@media (max-width:640px) {
  .site-nav .nav-cta { padding:12px 14px; font-size:10.5px; letter-spacing:.06em; }
}
@media (max-width:430px) {
  .site-nav { gap:8px; }
  .site-nav .nav-cta { padding:11px 8px; font-size:9px; letter-spacing:.02em; }
  .nav-burger { width:38px; }
}
@media (max-width:360px) {
  /* en pantallas minimas el CTA vive en el menu y en el hero */
  .site-nav .nav-cta { display:none; }
}

/* ---------------------------------------------------------------------
   6 - TIPOGRAFIA APLICADA + componentes de rotulacion
   --------------------------------------------------------------------- */
.h1 {
  font-family:var(--disp); font-weight:400;
  font-size:clamp(64px,10vw,148px); line-height:.94; letter-spacing:.004em;
  text-transform:uppercase; color:var(--paper);
  text-shadow:0 3px 34px rgba(0,0,0,.5);        /* 0720-a #4: respaldo horneado */
}
.h1 .dot { color:var(--acc); font-style:normal; }
.h2 {
  font-family:var(--disp); font-weight:400;
  font-size:clamp(38px,4.6vw,64px); line-height:1.02;
  text-transform:uppercase; letter-spacing:.006em; color:var(--paper);
}
.h2 em { font-style:normal; color:var(--acc); }
.h3 {
  font-family:var(--disp); font-weight:400;
  font-size:clamp(22px,2.4vw,32px); line-height:1.06;
  text-transform:uppercase; letter-spacing:.01em; color:var(--paper);
}

/* ventana de linea del titular del hero (v3)
   padding-top + margin-top negativo: techo para acentos de mayusculas Anton
   (la tilde de ESTÁNDAR en /es/) sin mover el layout ni romper el reveal 112% */
.lw { display:block; overflow:hidden; padding-right:.06em; padding-top:.14em; margin-top:-.14em; }
.lw > span { display:block; }

/* mascara de linea reutilizable en secciones (mask-up) */
.hl { display:block; overflow:hidden; padding:0 16px; margin:0 -16px; }
.hl-in { display:block; }

/* eyebrow con "//" (v3) */
.eyebrow {
  display:flex; align-items:center; gap:12px;
  font-size:11.5px; font-weight:600; letter-spacing:.3em;
  text-transform:uppercase; color:var(--mut);
}
.eyebrow b { color:var(--acc); font-weight:800; }

/* hairlines */
.hair { display:block; height:1px; background:var(--hair); }

/* parrafo de banda */
.copy { font-size:15px; line-height:1.7; color:#BDBDBB; max-width:52ch; }
.copy b, .copy strong { color:var(--paper); font-weight:600; }

/* ---------------------------------------------------------------------
   7 - BOTONES / CTA / TELEFONO / CHIPS (v3)
   El naranja es superficie con tinta encima. Hover = cambio de color
   (el transform pertenece a GSAP: cero transition de transform en CSS).
   --------------------------------------------------------------------- */
.btn, .cta {
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--acc); color:var(--acc-ink);
  font-family:var(--body); font-size:13.5px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  padding:18px 30px; border-radius:3px; white-space:nowrap;
  transition:background-color .25s var(--ease); will-change:transform;
}
.btn:hover, .cta:hover { background:var(--acc-hi); }
.btn-ghost {
  background:transparent; color:var(--paper);
  border:1px solid var(--hair); transition:border-color .25s var(--ease);
}
.btn-ghost:hover { background:transparent; border-color:var(--acc); }
.nav-cta { padding:13px 22px; font-size:12.5px; letter-spacing:.1em; }
button[disabled], .btn[disabled] { opacity:.62; cursor:progress; }

/* telefono grande junto al CTA (v3 .tel) */
.tel { display:flex; flex-direction:column; gap:3px; }
.tel a {
  font-size:22px; font-weight:800; letter-spacing:.02em; color:var(--paper);
  border-bottom:2px solid var(--acc); padding-bottom:2px; width:max-content;
}
.tel i {
  font-style:normal; font-size:10.5px; font-weight:600;
  letter-spacing:.26em; color:var(--mut); text-transform:uppercase;
}

/* chips (v3) */
.chips { display:flex; gap:10px; flex-wrap:wrap; }
.chip {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--hair); background:rgba(10,10,11,.55);
  border-radius:99px; padding:9px 16px;
  font-size:11.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--soft);
}
.chip b { color:var(--acc); font-weight:800; }

/* ---------------------------------------------------------------------
   8 - HERO "ESCENA MAESTRA" (solo Home) - v3 al pie de la letra
   La caldera vive a la derecha; scene-front re-dibuja la escena delante
   con mascara suave: el titular se mete DETRAS de la caldera.
   --------------------------------------------------------------------- */
.hero { position:relative; height:100vh; min-height:640px; overflow:hidden; background:var(--ink3); }
.scene, .scene-front { position:absolute; inset:0; }
.scene img, .scene-front img { width:100%; height:100%; object-fit:cover; object-position:88% 58%; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:88% 58%; pointer-events:none; }
/* el dueno junto a la caldera: anclado al borde inferior, entre la maquina y el borde derecho */
.hero-ceo { position:absolute; z-index:4; right:clamp(8px,3.2vw,72px); bottom:0; height:min(80vh,780px); pointer-events:none;
  filter:drop-shadow(-14px 10px 26px rgba(0,0,0,.55)); }
.hero-ceo img { height:100%; width:auto; display:block; }
.hero-ceo::after { content:''; position:absolute; left:-6%; right:-6%; bottom:-2px; height:22%;
  background:linear-gradient(180deg,transparent, rgba(7,7,8,.66) 78%); }
@media (max-width:1180px){ .hero-ceo { height:min(70vh,640px); right:0.6vw; } }
@media (max-width:900px){ .hero-ceo { display:none; } }
.scene-front {
  pointer-events:none;
  -webkit-mask-image:linear-gradient(97deg,transparent 52%,#000 67%);
          mask-image:linear-gradient(97deg,transparent 52%,#000 67%);
}
.shade {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(7,7,8,.62) 0%,rgba(7,7,8,.12) 30%,rgba(7,7,8,.05) 55%,rgba(7,7,8,.66) 100%),
             linear-gradient(94deg,rgba(7,7,8,.78) 0%,rgba(7,7,8,.38) 34%,rgba(7,7,8,0) 60%);
}
.glow {
  position:absolute; z-index:2; right:-4%; bottom:-4%; width:60vw; height:66vh;
  pointer-events:none; mix-blend-mode:screen; will-change:opacity;
  background:radial-gradient(58% 52% at 64% 66%,rgba(254,115,0,.46),rgba(254,115,0,.15) 46%,transparent 72%);
}
.wisp {
  position:absolute; z-index:3; width:44vw; height:30vh; pointer-events:none; opacity:.10;
  background:radial-gradient(50% 60% at 50% 50%,rgba(251,251,250,.55),transparent 70%);
  will-change:transform;
}
.w1 { right:0%; top:6%; } .w2 { right:16%; top:2%; opacity:.07; }
/* humo vivo: bocanadas que suben desde la caldera (transform/opacity only) */
.puff {
  position:absolute; z-index:3; width:230px; height:230px; pointer-events:none; opacity:0;
  background:radial-gradient(50% 50% at 50% 55%,rgba(251,251,250,.34),rgba(251,251,250,.10) 55%,transparent 74%);
  will-change:transform,opacity;
}
.p1 { right:14%; top:12%; } .p2 { right:22%; top:16%; width:180px; height:180px; } .p3 { right:9%; top:20%; width:150px; height:150px; }

.hero-copy {
  position:absolute; z-index:5; left:var(--gut); top:50%;
  transform:translateY(-52%); max-width:min(760px,60vw);
}
.hero-copy .eyebrow { margin-bottom:26px; }
.sub { margin-top:26px; max-width:47ch; font-size:15.5px; line-height:1.65; color:var(--soft); }
.sub b { color:var(--paper); }
.cta-row { display:flex; align-items:center; gap:26px; margin-top:34px; flex-wrap:wrap; }
.hero .chips { margin-top:34px; }

.rail {
  position:absolute; z-index:5; right:var(--gut); bottom:44px;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
}
.rail b { font-family:var(--disp); font-weight:400; font-size:44px; letter-spacing:.02em; color:var(--paper); }
.rail b .plus { color:var(--acc); }
.rail span { font-size:10.5px; font-weight:600; letter-spacing:.3em; color:var(--mut); text-transform:uppercase; }
.rail .bar { width:64px; height:3px; background:var(--acc); margin-top:4px; }

.scrollcue {
  position:absolute; z-index:5; left:var(--gut); bottom:34px;
  display:flex; align-items:center; gap:12px;
  font-size:10.5px; font-weight:600; letter-spacing:.3em;
  color:var(--mut); text-transform:uppercase;
}
.scrollcue i { width:44px; height:1px; background:var(--mut); display:block; }

/* ---------------------------------------------------------------------
   9 - BANDA + SALA + PLACAS "REAL WORK" (v3, compartido)
   Las fotos reales del cliente viven en placas con etiqueta para
   convivir con las escenas cinematograficas sin chocar (cap.13 §16).
   --------------------------------------------------------------------- */
.band { position:relative; background:var(--ink2); padding:110px var(--gut) 120px; border-top:1px solid var(--hair-soft); }
.band-head { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:end; margin-bottom:54px; }
.band-copy { font-size:15px; line-height:1.7; color:#BDBDBB; max-width:52ch; }

.room { position:relative; height:52vh; min-height:380px; border-radius:6px; overflow:hidden; }
.room img { width:100%; height:118%; object-fit:cover; object-position:50% 72%; position:absolute; top:-9%; will-change:transform; }
.room .cap {
  position:absolute; left:22px; bottom:18px; background:rgba(10,10,11,.72);
  border:1px solid var(--hair); border-radius:3px; padding:10px 16px;
  font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--soft);
}

.plates { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; }
.plate { position:relative; border-radius:6px; overflow:hidden; aspect-ratio:4/3; background:#0D0D0F; }
.plate img { width:100%; height:100%; object-fit:cover; }
.plate span {
  position:absolute; left:14px; bottom:12px; background:rgba(10,10,11,.78);
  border-radius:3px; padding:7px 12px; font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--soft);
}
.plate b {
  position:absolute; right:14px; top:12px; background:var(--acc); color:var(--acc-ink);
  border-radius:3px; padding:5px 9px; font-size:10px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase;
}

/* ---------------------------------------------------------------------
   10 - BANNER DE INTERIOR (§12.2-§12.3) - mismo mundo que el hero
   banner-pipes / banners por pagina, espacio negativo a la izquierda
   para el titular. Breadcrumb COMPLETO dentro del banner (0720-a #10).
   Parallax de 3 capas via js/main.js (img sobredimensionado 118%).
   --------------------------------------------------------------------- */
.banner { position:relative; height:min(56vh,640px); min-height:400px; overflow:hidden; background:var(--ink3); }
.banner-media { position:absolute; inset:0; }
.banner-media img { width:100%; height:118%; object-fit:cover; object-position:70% 50%; position:absolute; top:-9%; will-change:transform; }
.banner-scrim {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(94deg,rgba(7,7,8,.82) 0%,rgba(7,7,8,.44) 38%,rgba(7,7,8,.05) 62%),
             linear-gradient(180deg,rgba(7,7,8,.35) 0%,rgba(7,7,8,0) 30%,rgba(7,7,8,.72) 100%);
}
.banner-content { position:absolute; z-index:5; left:var(--gut); right:var(--gut); bottom:clamp(44px,6vh,72px); }
.banner-crumb {
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin-bottom:18px; font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);
}
.banner-crumb a { color:var(--soft); }
.banner-crumb a:hover { color:var(--paper); }
.banner-crumb .sep { color:var(--acc); font-weight:800; }
.banner .eyebrow { margin-bottom:16px; }
.banner-h1 {
  font-family:var(--disp); font-weight:400;
  font-size:clamp(44px,6.4vw,96px); line-height:.96; letter-spacing:.006em;
  text-transform:uppercase; color:var(--paper);
  text-shadow:0 3px 30px rgba(0,0,0,.55);
}
.banner-h1 em { font-style:normal; color:var(--acc); }
.banner-sub { margin-top:18px; max-width:52ch; font-size:15px; line-height:1.65; color:var(--soft); }

/* ---------------------------------------------------------------------
   11 - SISTEMA DE REVEALS - pre-siembra pintada .001, jamas 0 (0714-c)
   Hooks que js/main.js sabe leer:
     .rv          bloque que entra al scroll (fade + y26)
     .hl > .hl-in titular con mascara de linea (mask-up)
     [data-pop]   satelite / chip / placa (scale + fade)
     [data-pre]   entrada coreografiada del hero / banner
     [data-gate]  <img> critica que entra al decode-gate
   Solo bajo html.js: sin JS todo se ve.
   --------------------------------------------------------------------- */
.js .rv { opacity:.001; transform:translateY(26px); }
.js .hl .hl-in { transform:translateY(112%); }
.js [data-pop] { opacity:.001; }
.js [data-pre] { opacity:.001; }
/* pre-estados del hero (el loader los tapa; el JS los anima) */
.js .hero .lw > span { transform:translateY(112%); }
.js .hero .eyebrow, .js .hero .sub, .js .hero .cta, .js .hero .btn,
.js .hero .tel, .js .hero .chip, .js .rail, .js .scrollcue { opacity:.001; }
.js .glow { opacity:.001; }
/* pre-estados del banner de interior */
.js .banner-media, .js .banner-crumb, .js .banner .eyebrow,
.js .banner-sub { opacity:.001; }
.js .banner-h1 .hl-in { transform:translateY(112%); }

/* vuelta del toggle EN|ES: compone en estado final, cero parpadeo */
.js.langswap .rv, .js.langswap [data-pop], .js.langswap [data-pre],
.js.langswap .hero .eyebrow, .js.langswap .hero .sub, .js.langswap .hero .cta,
.js.langswap .hero .btn, .js.langswap .hero .tel, .js.langswap .hero .chip,
.js.langswap .rail, .js.langswap .scrollcue,
.js.langswap .banner-media, .js.langswap .banner-crumb,
.js.langswap .banner .eyebrow, .js.langswap .banner-sub { opacity:1; transform:none; }
.js.langswap .hl .hl-in, .js.langswap .hero .lw > span,
.js.langswap .banner-h1 .hl-in { transform:none; }
.js.langswap .glow { opacity:.85; }

@media (prefers-reduced-motion:reduce) {
  .js .rv, .js [data-pop], .js [data-pre],
  .js .hero .eyebrow, .js .hero .sub, .js .hero .cta, .js .hero .btn,
  .js .hero .tel, .js .hero .chip, .js .rail, .js .scrollcue,
  .js .banner-media, .js .banner-crumb, .js .banner .eyebrow,
  .js .banner-sub { opacity:1 !important; transform:none !important; }
  .js .hl .hl-in, .js .hero .lw > span, .js .banner-h1 .hl-in { transform:none !important; }
  .js .glow { opacity:.85 !important; }
  .loader { display:none !important; }
  .site-nav.is-stuck { animation:none; }
}

/* ---------------------------------------------------------------------
   12 - FORMULARIO (ley 0720-d) - notificacion inline BAJO el form
   El markup lo escribe la pagina de contacto; este es el contrato de
   clases que consume js/main.js.
   --------------------------------------------------------------------- */
.form-note {
  display:none; margin-top:18px; padding:14px 16px;
  border:1px solid var(--hair); border-radius:3px; background:var(--ink2);
  font-size:13px; line-height:1.55; color:var(--soft);
  opacity:.001; transform:translateY(8px);
}
.form-note.is-on { display:block; }
.form-note.is-ok { border-left:3px solid var(--acc); }
.form-note.is-err { border-left:3px solid var(--mut); }
.form-note a { font-weight:600; color:var(--paper); border-bottom:1px solid var(--acc); }
.hp-wrap { display:none; }               /* honeypot: display:none, jamas clip */

/* ---------------------------------------------------------------------
   13 - FOOTER - byte a byte en las 10 paginas (§12.5)
   NAP identico al JSON-LD y a la pagina de contacto.
   Logo -> Home del idioma (ley 0720-a #2).
   --------------------------------------------------------------------- */
.site-footer { position:relative; z-index:2; background:var(--ink3); color:var(--soft); overflow:clip; }
.site-footer::before { content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--acc); }
.foot-grid {
  position:relative; z-index:2;
  width:min(100% - (var(--gut) * 2), var(--maxw)); margin-inline:auto;
  padding:clamp(3.4rem,6vw,5.6rem) 0 clamp(1.8rem,3vw,2.8rem);
  display:grid; grid-template-columns:1.5fr 1fr 1.15fr 1.35fr; gap:clamp(1.6rem,3vw,3rem);
}
/* el footer es tinta -> logo-onDark; bajo 90px la banda es ilegible */
.foot-brand .f-logo { display:inline-block; cursor:pointer; }
.foot-brand .f-logo img { height:clamp(90px,7.4vw,104px); width:auto; }
.foot-brand p { margin-top:18px; max-width:32ch; font-size:13.5px; line-height:1.7; color:var(--soft); }
.foot-rail { margin-top:26px; display:flex; flex-direction:column; gap:6px; }
.foot-rail b { font-family:var(--disp); font-weight:400; font-size:34px; letter-spacing:.02em; color:var(--paper); }
.foot-rail b .plus { color:var(--acc); }
.foot-rail span { font-size:10px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--mut); }
.foot-h {
  margin-bottom:15px; font-size:10px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mut);
}
.site-footer nav a, .foot-list a {
  display:block; padding:5px 0; font-size:13.5px; color:var(--soft);
  transition:color .25s var(--ease);
}
.site-footer nav a:hover, .foot-list a:hover { color:var(--paper); }
.foot-nap { font-size:13.5px; line-height:1.95; font-style:normal; }
.foot-nap a { color:var(--paper); font-weight:600; }
.foot-nap a:hover { color:var(--acc-hi); }
.foot-nap .lbl {
  display:block; margin-top:12px; font-size:9.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);
}
.foot-social { display:flex; gap:10px; margin-top:16px; }
.foot-social a {
  display:inline-flex; align-items:center; padding:6px 12px;
  border:1px solid var(--hair); border-radius:99px; font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--soft);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.foot-social a:hover { border-color:var(--acc); color:var(--paper); }

.foot-legal {
  position:relative; z-index:2; border-top:1px solid var(--hair-soft);
  width:min(100% - (var(--gut) * 2), var(--maxw)); margin-inline:auto;
  padding:16px 0 22px; display:flex; flex-wrap:wrap; gap:8px 24px;
  justify-content:space-between; font-size:11.5px; color:var(--mut);
}
.foot-legal a { color:var(--soft); }
.foot-legal a:hover { color:var(--paper); }
/* la firma: el wordmark cortado por el borde inferior de la hoja */
.foot-word { position:relative; height:clamp(52px,7.4vw,124px); pointer-events:none; user-select:none; }
.foot-word span {
  position:absolute; left:50%; bottom:0; transform:translate(-50%,45%);
  font-family:var(--disp); font-weight:400; font-size:min(18vw,320px); line-height:1;
  letter-spacing:.01em; color:#141417; white-space:nowrap; text-transform:uppercase;
}

@media (max-width:980px) {
  .foot-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .foot-grid { grid-template-columns:1fr; gap:2rem; }
  .foot-word { height:clamp(44px,13vw,64px); }
  .foot-word span { font-size:25vw; }
}

/* ---------------------------------------------------------------------
   14 - RESPONSIVE del mundo (v3)
   --------------------------------------------------------------------- */
@media (max-width:1080px) {
  .hero-copy { max-width:78vw; }
  .scene img, .scene-front img { object-position:74% 58%; }
  .band-head { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .hero-copy { left:5vw; right:5vw; max-width:none; top:auto; bottom:110px; transform:none; }
  .h1 { font-size:clamp(52px,15.5vw,72px); }
  .sub { font-size:14px; max-width:none; }
  .scene img, .scene-front img { object-position:66% 50%; }
  .scene-front {
    -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 55%);
            mask-image:linear-gradient(180deg,#000 30%,transparent 55%);
  }
  .rail { display:none; }
  .scrollcue { display:none; }
  .eyebrow { align-items:flex-start; }
  .eyebrow b { line-height:inherit; }
  .chips { gap:8px; }
  .chip { padding:8px 12px; font-size:10.5px; }
  .plates { grid-template-columns:1fr; }
  .room { height:38vh; min-height:300px; }
  .band { padding:72px var(--gut) 84px; }
  .banner { height:min(46vh,520px); min-height:340px; }
  .banner-h1 { font-size:clamp(36px,11vw,54px); }
  .tel a { font-size:19px; }
}