/* ═══════════════════════════════════════════════════════════════
   GRUPO VARESCA — sistema de diseño
   Escala de grises pura. Sin color de acento: el contraste, el
   metal (degradados cromados) y el espacio hacen todo el trabajo.
   Compartido por la web del grupo y por Varesca Manufactura.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── tinta / negros ── */
  --void:#000000;
  --ink:#0B0B0C;
  --ink-2:#141416;
  --ink-3:#1E1E21;
  --ink-4:#2A2A2E;
  /* ── grises ── */
  --g-70:#4A4A4E;
  --g-60:#6E6E73;
  --g-50:#8A8A8F;
  --g-40:#A8A8AD;
  --g-30:#C6C6C9;
  --g-20:#DEDEE0;
  --g-10:#EDEDEE;
  /* ── papel ── */
  --paper:#FAFAFA;
  --paper-2:#F3F3F2;
  --white:#FFFFFF;
  /* ── líneas ── */
  --line:#E3E3E2;
  --line-2:#D2D2D1;
  --line-d:rgba(255,255,255,.12);
  --line-d2:rgba(255,255,255,.22);
  /* ── cromo: el único "color" de la marca ── */
  --chrome:linear-gradient(135deg,#FFFFFF 0%,#C9C9CC 22%,#F4F4F4 42%,#8E8E93 62%,#E8E8E8 82%,#B0B0B4 100%);
  --chrome-d:linear-gradient(135deg,#6E6E73 0%,#1A1A1C 30%,#8A8A8F 52%,#111113 74%,#5A5A5F 100%);
  /* ── sombras ── */
  --sh-sm:0 1px 2px rgba(0,0,0,.05),0 4px 16px rgba(0,0,0,.06);
  --sh-md:0 2px 8px rgba(0,0,0,.06),0 20px 50px rgba(0,0,0,.10);
  --sh-lg:0 30px 80px rgba(0,0,0,.28);
  /* ── métrica ── */
  --r:2px;--r-lg:4px;--maxw:1280px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--paper);color:var(--g-70);
  line-height:1.65;font-size:16px;overflow-x:clip;
  -webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01";
}
h1,h2,h3,h4{line-height:1.06;font-weight:800;letter-spacing:-.035em;color:var(--ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
section{position:relative}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 26px}
.wrap-n{width:100%;max-width:940px;margin:0 auto;padding:0 26px}
::selection{background:var(--ink);color:var(--white)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--g-10)}
::-webkit-scrollbar-thumb{background:var(--g-50)}
::-webkit-scrollbar-thumb:hover{background:var(--ink)}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.01em}

/* ═══ grano premium sobre toda la página ═══ */
.grain{position:fixed;inset:0;z-index:400;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ═══ barra de progreso de lectura ═══ */
#prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:300;background:var(--ink);transition:width .1s linear}
#prog.on-dark{background:var(--white)}

/* ═══ retículas de fondo ═══ */
.grid-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.7;
  -webkit-mask-image:radial-gradient(ellipse 78% 65% at 50% 42%,#000 12%,transparent 76%);
  mask-image:radial-gradient(ellipse 78% 65% at 50% 42%,#000 12%,transparent 76%)}
.grid-bg.dark{background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px)}
.rules{position:absolute;inset:0;z-index:0;pointer-events:none;display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--maxw);margin:0 auto}
.rules span{border-left:1px solid var(--line)}
.rules span:last-child{border-right:1px solid var(--line)}
.rules.dark span{border-color:rgba(255,255,255,.07)}

/* ═══ reveals ═══ */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-34px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv-l.in{opacity:1;transform:none}
.rv-r{opacity:0;transform:translateX(34px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv-r.in{opacity:1;transform:none}
.rv-s{opacity:0;transform:scale(.95);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv-s.in{opacity:1;transform:none}
.rv-w{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
.rv-w.in{clip-path:inset(0 0 0 0)}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}
.d4{transition-delay:.24s}.d5{transition-delay:.3s}.d6{transition-delay:.36s}
.d7{transition-delay:.42s}.d8{transition-delay:.48s}

/* línea que se dibuja al entrar */
.hr{height:1px;background:var(--line-2);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
.hr.in{transform:scaleX(1)}
.hr.dark{background:var(--line-d2)}

@media (prefers-reduced-motion:reduce){
  .rv,.rv-l,.rv-r,.rv-s{opacity:1!important;transform:none!important;transition:none!important}
  .rv-w{clip-path:none!important}
  .hr{transform:none!important}
  html{scroll-behavior:auto}
}

/* ═══ etiquetas técnicas ═══ */
.tag{display:inline-flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;
  font-size:.685rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--g-60)}
.tag::before{content:"";width:26px;height:1px;background:var(--g-40);flex-shrink:0}
.tag.on-dark{color:var(--g-40)}
.tag.on-dark::before{background:var(--g-60)}
.tag.bare::before{display:none}
.num{font-family:'IBM Plex Mono',monospace;font-size:.7rem;font-weight:500;letter-spacing:.18em;color:var(--g-40)}

/* ═══ botones ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;font-weight:600;font-size:.9rem;
  padding:16px 30px;border-radius:var(--r);border:1px solid transparent;transition:all .4s var(--ease);
  line-height:1;letter-spacing:-.005em;text-align:center;position:relative;overflow:hidden}
.btn svg{width:16px;height:16px;flex-shrink:0;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-p{background:var(--ink);color:var(--white)}
.btn-p:hover{background:var(--ink-4);transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.22)}
.btn-o{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-o:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-w{background:var(--white);color:var(--ink)}
.btn-w:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.btn-go{background:transparent;color:var(--white);border-color:var(--line-d2)}
.btn-go:hover{background:rgba(255,255,255,.08);border-color:var(--white)}
.btn-lg{padding:19px 38px;font-size:.95rem}
.btn-block{width:100%}

/* enlace con subrayado que crece */
.ul{position:relative;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);padding-bottom:3px}
.ul::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.ul:hover::after{transform:scaleX(1);transform-origin:left}
.ul svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.ul:hover svg{transform:translate(3px,-3px)}

/* ═══ NAV ═══ */
header{position:sticky;top:0;z-index:100;background:rgba(250,250,250,.82);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid transparent;transition:border-color .4s,box-shadow .4s,background .4s}
header.sticky{border-bottom-color:var(--line);background:rgba(255,255,255,.92);box-shadow:0 1px 30px rgba(0,0,0,.05)}
header.dark{background:rgba(11,11,12,.72)}
header.dark.sticky{background:rgba(11,11,12,.94);border-bottom-color:var(--line-d)}
nav{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:var(--maxw);
  margin:0 auto;padding:18px 26px;transition:padding .4s var(--ease)}
header.sticky nav{padding-top:13px;padding-bottom:13px}

/* wordmark */
.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}
.mark{width:34px;height:34px;flex-shrink:0}
.brand-tx{display:flex;flex-direction:column;line-height:1}
.brand-tx b{font-size:1.12rem;font-weight:800;letter-spacing:.16em;color:var(--ink)}
.brand-tx small{font-family:'IBM Plex Mono',monospace;font-size:.56rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--g-50);margin-top:5px}
header.dark .brand-tx b{color:var(--white)}
header.dark .brand-tx small{color:var(--g-50)}

.navlinks{display:flex;align-items:center;gap:34px}
.navlinks a{font-size:.875rem;font-weight:500;color:var(--g-60);position:relative;padding:4px 0;transition:color .3s}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.navlinks a:hover{color:var(--ink)}
.navlinks a:hover::after{transform:scaleX(1);transform-origin:left}
header.dark .navlinks a{color:var(--g-40)}
header.dark .navlinks a:hover{color:var(--white)}
header.dark .navlinks a::after{background:var(--white)}
.nav-cta{display:flex;align-items:center;gap:14px;flex-shrink:0}
.nav-cta .btn{padding:12px 22px;font-size:.83rem}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line-2);background:transparent;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;border-radius:var(--r)}
.burger i{display:block;width:16px;height:1.5px;background:var(--ink);transition:.35s var(--ease)}
header.dark .burger{border-color:var(--line-d2)}
header.dark .burger i{background:var(--white)}
.burger.on i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* menú móvil */
.mnav{position:fixed;inset:0;z-index:99;background:var(--void);display:flex;flex-direction:column;
  justify-content:center;gap:6px;padding:0 34px;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.mnav.on{opacity:1;pointer-events:auto}
.mnav a{font-size:2rem;font-weight:800;letter-spacing:-.04em;color:var(--white);padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.1);transform:translateY(18px);opacity:0;transition:.6s var(--ease)}
.mnav.on a{transform:none;opacity:1}
.mnav.on a:nth-child(1){transition-delay:.05s}.mnav.on a:nth-child(2){transition-delay:.1s}
.mnav.on a:nth-child(3){transition-delay:.15s}.mnav.on a:nth-child(4){transition-delay:.2s}
.mnav.on a:nth-child(5){transition-delay:.25s}.mnav.on a:nth-child(6){transition-delay:.3s}
.mnav.on a:nth-child(7){transition-delay:.35s}
/* CTA dentro del menú móvil */
.mnav a.mcta{font-size:.98rem;font-weight:600;letter-spacing:-.005em;border-bottom:0;
  background:var(--white);color:var(--void);padding:17px 20px;margin-top:26px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px}
.mnav a.mcta svg{width:17px;height:17px}
.mnav a.mback{font-size:.9rem;font-weight:500;color:var(--g-50);border-bottom:0;padding-top:20px}

/* ═══ HERO común ═══ */
.hero{position:relative;background:var(--ink);color:var(--g-30);overflow:hidden;
  padding:clamp(90px,15vh,150px) 0 clamp(70px,10vh,110px)}
.hero .wrap{position:relative;z-index:2}
.hero-glow{position:absolute;z-index:0;pointer-events:none;border-radius:50%;filter:blur(90px)}
.hero h1{color:var(--white);font-size:clamp(2.9rem,8.4vw,7.4rem);font-weight:900;letter-spacing:-.05em;line-height:.94}
.hero h1 .lite{font-weight:200;color:var(--g-50)}
.hero h1 .chrome{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:clamp(1rem,1.9vw,1.2rem);color:var(--g-40);max-width:52ch;line-height:1.7}

/* máscara de líneas para el H1 */
.mask{display:block;overflow:hidden}
.mask>span{display:block;transform:translateY(105%);transition:transform 1.15s var(--ease)}
.mask.in>span{transform:none}
.m1>span{transition-delay:.06s}.m2>span{transition-delay:.16s}.m3>span{transition-delay:.26s}

/* barra inferior del hero (compartida por grupo y manufactura) */
.hero-bar{border-top:1px solid var(--line-d);padding:22px 0 26px;display:flex;justify-content:space-between;
  align-items:center;gap:20px;flex-wrap:wrap}
.hero-bar .mono{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--g-60)}

/* indicador de scroll */
.scroller{display:inline-flex;align-items:center;gap:12px;font-family:'IBM Plex Mono',monospace;
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--g-60)}
.scroller i{display:block;width:1px;height:44px;background:linear-gradient(var(--g-60),transparent);position:relative;overflow:hidden}
.scroller i::after{content:"";position:absolute;top:0;left:0;width:1px;height:14px;background:var(--white);animation:sc 2.1s var(--ease) infinite}
@keyframes sc{0%{transform:translateY(-16px)}60%,100%{transform:translateY(46px)}}

/* ═══ cintas de métricas ═══ */
.strip{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip.dark{background:var(--ink-2);border-color:var(--line-d)}
.strip .in-g{display:grid;grid-template-columns:repeat(4,1fr)}
.strip .cell{padding:38px 26px;border-left:1px solid var(--line)}
.strip .cell:first-child{border-left:0}
.strip.dark .cell{border-color:var(--line-d)}
.strip .cell b{display:block;font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:800;letter-spacing:-.04em;
  color:var(--ink);line-height:1;margin-bottom:11px}
.strip.dark .cell b{color:var(--white)}
.strip .cell span{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--g-50)}

/* ═══ encabezados de sección ═══ */
.sec{padding:clamp(80px,11vw,150px) 0}
.sec.tight{padding:clamp(60px,8vw,100px) 0}
.sec.dark{background:var(--ink);color:var(--g-40)}
.sec.dark h2,.sec.dark h3{color:var(--white)}
.sec.paper{background:var(--paper-2)}
.sec.white{background:var(--white)}
.shead{max-width:820px;margin-bottom:clamp(46px,6vw,76px);position:relative;z-index:2}
.shead h2{font-size:clamp(2rem,4.6vw,3.7rem);margin:22px 0 24px}
.shead p{font-size:clamp(1rem,1.35vw,1.1rem);color:var(--g-60);max-width:60ch;line-height:1.75}
.sec.dark .shead p{color:var(--g-50)}
.shead.center{margin-left:auto;margin-right:auto;text-align:center}
.shead.center .tag{justify-content:center}

/* ═══ marquesina ═══ */
.marq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--white);padding:20px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq.dark{background:var(--ink);border-color:var(--line-d)}
.marq-t{display:flex;gap:0;width:max-content;animation:marq 38s linear infinite}
.marq:hover .marq-t{animation-play-state:paused}
.marq-t span{display:inline-flex;align-items:center;gap:26px;padding:0 26px;font-family:'IBM Plex Mono',monospace;
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--g-50);white-space:nowrap}
.marq-t span::after{content:"";width:5px;height:5px;background:var(--g-30);border-radius:50%}
.marq.dark .marq-t span{color:var(--g-50)}
.marq.dark .marq-t span::after{background:var(--g-70)}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq-t{animation:none}}

/* ═══ LOCKUPS DE MARCA (logo + nombre) ═══ */
.lock{display:inline-flex;align-items:center;gap:14px}
.lock img{width:46px;height:46px;flex-shrink:0;transition:transform .7s var(--ease)}
.lock .lock-tx{display:flex;flex-direction:column;line-height:1}
.lock .lock-tx b{font-size:1.02rem;font-weight:800;letter-spacing:.15em;color:var(--white)}
.lock .lock-tx i{font-family:'IBM Plex Mono',monospace;font-style:normal;font-size:.58rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--g-60);margin-top:7px}
.lock.lg img{width:60px;height:60px}
.lock.lg .lock-tx b{font-size:1.3rem}

/* ═══ MURO DE MARCAS ═══ */
.wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1px;
  background:var(--line-d);border:1px solid var(--line-d)}
.wall a,.wall div{background:var(--ink);padding:clamp(26px,3vw,40px) clamp(16px,2vw,24px);display:flex;
  flex-direction:column;align-items:flex-start;gap:16px;transition:.5s var(--ease);position:relative;overflow:hidden}
.wall a:hover{background:var(--ink-3)}
.wall img{width:52px;height:52px;transition:transform .8s var(--ease)}
.wall a:hover img{transform:translateY(-3px) scale(1.06)}
.wall b{font-size:.94rem;font-weight:800;letter-spacing:.13em;color:var(--white)}
.wall span{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--g-60);line-height:1.7}
.wall .arrow{position:absolute;top:18px;right:18px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;
  color:var(--g-70);opacity:0;transform:translate(-4px,4px);transition:.45s var(--ease)}
.wall a:hover .arrow{opacity:1;transform:none}

/* ═══ FOTOGRAFÍA (tratamiento gris del grupo) ═══ */
.gs{filter:grayscale(1) contrast(1.08) brightness(.94);transition:filter .6s var(--ease),transform 1.1s var(--ease)}
.gs:hover{filter:grayscale(1) contrast(1.14) brightness(1.02)}

/* tira de fotos a sangre */
.band-ph{overflow:hidden;background:var(--ink);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.band-ph .row{display:flex;width:max-content;animation:marq 55s linear infinite}
.band-ph:hover .row{animation-play-state:paused}
.band-ph figure{width:clamp(200px,26vw,330px);aspect-ratio:4/3;position:relative;overflow:hidden;
  border-right:1px solid var(--line-d);flex-shrink:0}
.band-ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.86);
  transition:filter .6s var(--ease),transform 1.2s var(--ease)}
.band-ph figure:hover img{filter:grayscale(1) contrast(1.18) brightness(1);transform:scale(1.05)}
.band-ph figcaption{position:absolute;left:12px;bottom:10px;font-family:'IBM Plex Mono',monospace;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);
  text-shadow:0 1px 6px rgba(0,0,0,.8)}
@media (prefers-reduced-motion:reduce){.band-ph .row{animation:none}}

@media (max-width:900px){
  .wall{grid-template-columns:repeat(2,1fr)}
  /* si el número de marcas es impar, la última ocupa el ancho completo */
  .wall > :last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:520px){
  .wall{grid-template-columns:1fr}
  .wall > :last-child:nth-child(odd){grid-column:auto}
}

/* ═══ CTA final ═══ */
.cta{background:var(--void);color:var(--g-40);position:relative;overflow:hidden;
  padding:clamp(80px,11vw,140px) 0;text-align:center}
.cta h2{color:var(--white);font-size:clamp(2.1rem,5.4vw,4.4rem);margin:24px auto 26px;max-width:18ch}
.cta p{max-width:56ch;margin:0 auto 40px;color:var(--g-50);font-size:1.05rem}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ═══ FOOTER ═══ */
footer{background:var(--void);color:var(--g-50);padding:clamp(60px,8vw,90px) 0 0;border-top:1px solid rgba(255,255,255,.1)}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:50px;padding-bottom:56px}
.f-brand .brand-tx b{color:var(--white)}
.f-brand p{font-size:.9rem;color:var(--g-60);max-width:34ch;margin-top:20px;line-height:1.75}
.f-col h4{font-family:'IBM Plex Mono',monospace;font-size:.66rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--g-60);margin-bottom:20px}
.f-col a,.f-col span{display:block;font-size:.9rem;color:var(--g-40);margin-bottom:13px;transition:color .3s}
.f-col a:hover{color:var(--white)}
.f-col a .ext{font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--g-70);margin-left:6px}
.f-bot{border-top:1px solid rgba(255,255,255,.1);padding:26px 0;display:flex;justify-content:space-between;
  align-items:center;gap:18px;flex-wrap:wrap;font-size:.8rem;color:var(--g-70)}
.f-bot .mono{letter-spacing:.1em}
.f-social{display:flex;gap:10px}
.f-social a{width:36px;height:36px;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;
  justify-content:center;transition:.35s var(--ease)}
.f-social a svg{width:15px;height:15px;stroke:var(--g-40);fill:none}
.f-social a:hover{background:var(--white);border-color:var(--white)}
.f-social a:hover svg{stroke:var(--void)}

/* ═══ botón flotante WhatsApp ═══ */
.wa-fab{position:fixed;right:20px;bottom:20px;z-index:200;width:54px;height:54px;border-radius:50%;
  background:var(--ink);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.32);transition:.4s var(--ease);opacity:0;transform:translateY(20px) scale(.9);pointer-events:none}
.wa-fab.on{opacity:1;transform:none;pointer-events:auto}
.wa-fab:hover{transform:translateY(-3px) scale(1.05)}
.wa-fab svg{width:25px;height:25px;fill:var(--white)}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   El móvil no es la web encogida: cambia la retícula, el peso
   tipográfico y el tamaño de los objetivos táctiles.
   ═══════════════════════════════════════════════════════════════ */

/* anclas por debajo del header pegajoso */
[id]{scroll-margin-top:96px}

/* en pantallas táctiles no dejamos estados :hover "pegados" */
@media (hover:none){
  .btn:hover,.fam:hover,.cap:hover,.cbox:hover,.wall a:hover,
  .lock img,.wall a:hover img{transform:none!important}
  .btn:active{transform:scale(.985)}
  .wall a:active,.cbox:active{background:var(--ink-3)}
  a,button,summary{-webkit-tap-highlight-color:rgba(0,0,0,.06)}
}

@media (max-width:1024px){
  .f-grid{grid-template-columns:1fr 1fr;gap:40px}
  .strip .in-g{grid-template-columns:repeat(2,1fr)}
  .strip .cell:nth-child(3){border-left:0}
  .strip .cell:nth-child(n+3){border-top:1px solid var(--line)}
  .strip.dark .cell:nth-child(n+3){border-top-color:var(--line-d)}
}

@media (max-width:880px){
  .navlinks{display:none}
  .nav-cta .btn{display:none}
  .burger{display:flex}
  .rules{grid-template-columns:repeat(2,1fr)}
  nav{padding:14px 20px}
  header.sticky nav{padding-top:11px;padding-bottom:11px}
}

/* ══════════ MÓVIL ══════════ */
@media (max-width:760px){
  html{font-size:15.5px}
  .wrap,.wrap-n{padding:0 20px}

  /* ritmo vertical: secciones más cortas para que se avance rápido */
  .sec{padding:62px 0}
  .sec.tight{padding:48px 0}
  .shead{margin-bottom:32px}
  .shead h2{font-size:clamp(1.7rem,7.6vw,2.3rem);letter-spacing:-.035em}
  .shead p{font-size:.98rem;line-height:1.72}

  /* marca */
  .brand{gap:11px}
  .mark{width:30px;height:30px}
  .brand-tx b{font-size:1rem;letter-spacing:.14em}
  .brand-tx small{font-size:.52rem;margin-top:4px}

  /* hero */
  .hero{padding-top:52px}
  .hero h1{font-size:clamp(2.3rem,10.6vw,3.4rem);letter-spacing:-.042em;line-height:.98}
  .hero p.lead{font-size:1rem;line-height:1.68}
  .hero-bar{padding:18px 0 22px;gap:12px}
  .hero-bar .mono{font-size:.6rem;letter-spacing:.14em;line-height:1.6}
  .scroller{font-size:.6rem;gap:10px}
  .scroller i{height:34px}
  @keyframes sc{0%{transform:translateY(-14px)}60%,100%{transform:translateY(36px)}}

  /* botones: objetivo táctil cómodo y a ancho completo cuando van solos */
  .btn{padding:15px 22px;font-size:.9rem;min-height:50px}
  .btn-lg{padding:16px 24px;font-size:.92rem;min-height:54px}
  .hero-ctas .btn,.cta-btns .btn{flex:1 1 100%}
  .cta-btns{flex-direction:column;align-items:stretch}

  /* etiquetas */
  .tag{font-size:.62rem;letter-spacing:.16em;gap:8px}
  .tag::before{width:18px}

  /* cintas de cifras: 2 columnas, no 1 (una sola queda larguísima) */
  .strip .in-g{grid-template-columns:repeat(2,1fr)}
  .strip .cell{padding:24px 18px;border-left:1px solid var(--line)}
  .strip .cell:nth-child(odd){border-left:0}
  .strip.dark .cell{border-color:var(--line-d)}
  .strip .cell b{font-size:1.75rem;margin-bottom:8px}
  .strip .cell span{font-size:.6rem;letter-spacing:.13em}

  /* marquesina */
  .marq{padding:15px 0}
  .marq-t{animation-duration:26s}
  .marq-t span{padding:0 16px;gap:16px;font-size:.68rem;letter-spacing:.16em}

  /* muro de marcas: 2 columnas y la última a lo ancho */
  .wall{grid-template-columns:repeat(2,1fr)}
  .wall a,.wall div{padding:22px 16px;gap:12px}
  .wall img{width:40px;height:40px}
  .wall b{font-size:.85rem;letter-spacing:.11em}
  .wall span{font-size:.57rem;letter-spacing:.13em}
  .wall .arrow{top:14px;right:14px;font-size:.66rem;opacity:1;transform:none}
  .wall > :last-child:nth-child(odd){grid-column:1/-1;flex-direction:row;align-items:center;gap:16px}

  /* lockups */
  .lock img{width:38px;height:38px}
  .lock .lock-tx b{font-size:.9rem;letter-spacing:.13em}
  .lock .lock-tx i{font-size:.53rem;letter-spacing:.18em;margin-top:5px}
  .lock.lg img{width:46px;height:46px}
  .lock.lg .lock-tx b{font-size:1.05rem}

  /* tira de fotos: vertical, que es como vienen las fotos reales */
  .band-ph figure{width:58vw;max-width:260px;aspect-ratio:4/5}
  .band-ph .row{animation-duration:38s}
  .band-ph figcaption{font-size:.55rem;left:10px;bottom:8px}

  /* CTA final */
  .cta{padding:70px 0}
  .cta h2{font-size:clamp(1.8rem,8.4vw,2.6rem);margin:18px auto 20px;max-width:14ch}
  .cta p{font-size:.98rem;margin-bottom:28px}

  /* footer */
  .f-grid{grid-template-columns:1fr 1fr;gap:30px 24px;padding-bottom:40px}
  .f-brand{grid-column:1/-1}
  .f-brand p{font-size:.87rem;max-width:none}
  .f-col h4{font-size:.6rem;margin-bottom:15px}
  .f-col a,.f-col span{font-size:.88rem;margin-bottom:14px}
  .f-bot{padding:22px 0;font-size:.72rem}

  /* menú móvil: desplazable y con respiro para el notch */
  .mnav{padding:calc(76px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
    justify-content:flex-start;overflow-y:auto;gap:0}
  .mnav a{font-size:1.55rem;padding:15px 0}

  /* botón flotante fuera del área del gesto de inicio */
  .wa-fab{right:max(16px,env(safe-area-inset-right));
    bottom:calc(16px + env(safe-area-inset-bottom));width:52px;height:52px}
}

@media (max-width:420px){
  .hero h1{font-size:clamp(2.05rem,11.4vw,2.8rem)}
  .wrap,.wrap-n{padding:0 17px}
  .strip .cell b{font-size:1.55rem}
  .wall{grid-template-columns:1fr}
  .wall > :last-child{grid-column:auto;flex-direction:column;align-items:flex-start;gap:12px}
  .mnav a{font-size:1.4rem}
  .f-grid{grid-template-columns:1fr}
  .f-bot{flex-direction:column;align-items:flex-start;gap:14px}
}