:root{
  /* Brand — from Informacion/CLAUDE.md, not eyeballed from the brochure */
  --y:#FFE900;            /* amarillo 820 */
  --slate:#333F48;        /* azul pizarra */
  --brandgrey:#BBBCBC;

  --black:#0A0A0B;
  --ink:#111214;
  --white:#FFFFFF;
  --paper:#F5F5F6;
  --g7:#3E434A;
  --g6:#6B7078;
  --g4:#A2A7AE;
  --g2:#E2E4E7;
  --g1:#EDEEF0;

  --on-black:#F2F3F4;
  --on-black-dim:#8C939B;

  /* Type — Schibsted Grotesk carries the page, Instrument Serif italic is the
     accent voice, DM Mono is data. Shapiro (brand face) is licensed and cannot
     load here; self-host it on the real site and swap --sans/--display. */
  --display:'Schibsted Grotesk',"Helvetica Neue",Arial,sans-serif;
  --sans:'Schibsted Grotesk',"Helvetica Neue",Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,"Times New Roman",serif;
  --mono:'DM Mono',ui-monospace,Consolas,monospace;

  --spine:1320px;
  --gut:clamp(18px,4.2vw,48px);
  --pad:clamp(64px,9vw,148px);
  --ease:cubic-bezier(.22,.61,.36,1);

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --black:#000; --ink:#EDEEF0; --white:#121315; --paper:#0C0D0E;
    --g7:#C4C8CE; --g6:#979CA4; --g4:#666B73; --g2:#26282C; --g1:#1A1C1F;
  }
}
:root[data-theme="dark"]{
  --black:#000; --ink:#EDEEF0; --white:#121315; --paper:#0C0D0E;
  --g7:#C4C8CE; --g6:#979CA4; --g4:#666B73; --g2:#26282C; --g1:#1A1C1F;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--sans);font-size:clamp(15.5px,.32vw + 14.6px,17.5px);
  line-height:1.62;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
p{margin:0;} ul{margin:0;padding:0;list-style:none;} a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.042em;line-height:1.02;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
img{max-width:100%;display:block;}
::selection{background:var(--y);color:#0A0A0B;}

.spine{width:100%;max-width:var(--spine);margin-inline:auto;padding-inline:var(--gut);}
.pad{padding-block:var(--pad);}
.rule{height:1px;background:var(--g2);border:0;margin:0;}

/* ── type scale ─────────────────────────────────────── */
h1.big{font-size:clamp(2.35rem,7.4vw,6.2rem);}
h2.big{font-size:clamp(1.85rem,5vw,4rem);}
h2{font-size:clamp(1.6rem,3.4vw,2.7rem);}
h3{font-size:clamp(1.12rem,1.5vw,1.35rem);font-weight:700;}
.lede{font-size:clamp(1.02rem,.5vw + .92rem,1.26rem);line-height:1.6;color:var(--g7);max-width:58ch;letter-spacing:-.011em;}
.on-black .lede{color:var(--on-black-dim);}

/* the accent voice — Instrument Serif italic, always in yellow, sparingly */
.se{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--y);letter-spacing:-.01em;}

.ix{
  display:flex;align-items:center;gap:clamp(10px,1.4vw,14px);
  font-family:var(--mono);font-size:clamp(.62rem,.9vw,.72rem);font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--g6);
  margin-bottom:clamp(20px,3vw,32px);
}
.ix b{color:var(--y);font-weight:500;}
.ix::after{content:"";flex:1;height:1px;background:var(--g2);min-width:20px;}
.on-black .ix{color:var(--on-black-dim);}
.on-black .ix::after{background:rgba(255,255,255,.15);}
.on-black{background:var(--black);color:var(--on-black);}
.dim{color:var(--g6);} .on-black .dim{color:var(--on-black-dim);}

/* ── buttons — 50px min touch target ────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:50px;font-weight:600;font-size:clamp(.9rem,.9vw,.97rem);letter-spacing:-.01em;
  padding:14px clamp(20px,2.4vw,30px);border:1px solid var(--ink);
  overflow:hidden;isolation:isolate;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.btn::before{content:"";position:absolute;inset:0;background:var(--y);z-index:-1;
  transform:scaleY(0);transform-origin:bottom;transition:transform .36s var(--ease);}
.btn:hover::before{transform:scaleY(1);}
.btn:hover{color:#0A0A0B;border-color:var(--y);}
.btn .arw{font-family:var(--mono);transition:transform .3s var(--ease);}
.btn:hover .arw{transform:translateX(4px);}
.on-black .btn{border-color:rgba(255,255,255,.3);color:var(--on-black);}
.on-black .btn:hover{color:#0A0A0B;border-color:var(--y);}
.btn-y{background:var(--y);color:#0A0A0B;border-color:var(--y);}
.btn-y::before{background:var(--ink);}
.btn-y:hover{color:var(--white);border-color:var(--ink);}
.on-black .btn-y{color:#0A0A0B;}
.on-black .btn-y:hover{color:var(--on-black);border-color:var(--white);}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,4vw,38px);}
@media (max-width:420px){.acts{flex-direction:column;align-items:stretch;}.acts .btn{width:100%;}}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--y);outline-offset:3px;}

/* ── photo frames ───────────────────────────────────── */
.ph{position:relative;overflow:hidden;background:var(--g1);aspect-ratio:4/3;}
.ph::before{content:"";position:absolute;inset:0;
  background:linear-gradient(148deg,#41464D 0%,#15171A 48%,#2C3037 100%);
  filter:grayscale(1);transition:transform .9s var(--ease);}
.ph::after{content:"";position:absolute;inset:0;background-image:var(--grain);
  opacity:.15;mix-blend-mode:overlay;pointer-events:none;}
.ph:hover::before{transform:scale(1.045);}
.ph .meta{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:rgba(255,255,255,.52);}
.ph .meta .tag{border:1px solid rgba(255,255,255,.24);padding:3px 8px;
  letter-spacing:.16em;text-transform:uppercase;flex:none;}
.ph .meta .fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.ph .no{position:absolute;top:14px;left:16px;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.16em;color:rgba(255,255,255,.34);}

/* ── header ─────────────────────────────────────────── */
header{position:sticky;top:0;z-index:70;background:var(--black);color:var(--on-black);}
.bar{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);padding-block:clamp(11px,1.4vw,16px);}
/* 2026-10-05 — logo simple (wordmark horizontal), más grande que el sello
   cuadrado que tenía antes. Alto fijo por clamp(), ancho libre según la
   proporción real del archivo — nunca `aspect-ratio` sola sosteniendo la
   caja, ver la nota en header.html sobre por qué eso fallaba en Safari. */
.brand{display:flex;align-items:center;height:clamp(30px,4.6vw,42px);flex:none;}
.brand img{height:100%;width:auto;display:block;}
nav.main{display:flex;gap:clamp(16px,2vw,30px);margin-left:auto;font-size:.92rem;font-weight:500;}
nav.main a{position:relative;padding-block:10px;color:var(--on-black-dim);transition:color .25s var(--ease);}
nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--y);
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease);}
nav.main a:hover,nav.main a.act{color:var(--on-black);}
nav.main a:hover::after,nav.main a.act::after{transform:scaleX(1);}
.hbtn{display:flex;gap:10px;align-items:center;}
.hbtn .btn{min-height:44px;padding:10px 20px;font-size:.86rem;}
.burger{display:none;margin-left:auto;width:48px;height:48px;position:relative;flex:none;}
.burger span{position:absolute;left:13px;right:13px;height:2px;background:var(--on-black);transition:transform .3s var(--ease),opacity .2s;}
.burger span:nth-child(1){top:18px;} .burger span:nth-child(2){top:24px;} .burger span:nth-child(3){top:30px;}
body.menu .burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.menu .burger span:nth-child(2){opacity:0;}
body.menu .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
@media (max-width:1120px){nav.main,.hbtn{display:none;}.burger{display:block;}}

/* ── Accesibilidad: tamaño de letra, fuente legible, escala de grises ──────
   Nativo, no un plugin — el CSP del sitio no deja cargar uno de terceros.
   Las tres opciones solo tocan variables/clases en <html>, así que el
   mismo mecanismo cubre las 8 páginas sin tocar cada una. */
.a11y-btn{flex:none;width:40px;height:40px;border-radius:8px;
  border:1px solid rgba(255,255,255,.22);background:transparent;color:var(--on-black);
  font-family:var(--sans);font-weight:700;font-size:.9rem;cursor:pointer;
  margin-left:8px;transition:border-color .2s,background .2s;}
.a11y-btn:hover,.a11y-btn[aria-expanded="true"]{border-color:var(--y);background:rgba(255,233,0,.08);}
.a11y-panel{position:absolute;right:var(--gut);top:100%;margin-top:8px;z-index:95;
  width:240px;background:#141518;border:1px solid rgba(255,255,255,.16);
  padding:16px;box-shadow:0 18px 50px rgba(0,0,0,.45);}
.a11y-panel[hidden]{display:none;}
.a11y-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-black-dim);margin:0 0 8px;}
.a11y-row{display:flex;gap:6px;margin-bottom:14px;}
.a11y-row button{flex:1;min-height:38px;border:1px solid rgba(255,255,255,.22);
  background:transparent;color:var(--on-black);font-family:var(--sans);
  font-size:.82rem;cursor:pointer;}
.a11y-row button:hover{border-color:var(--y);color:var(--y);}
.a11y-toggle{display:flex;align-items:center;gap:9px;font-size:.84rem;
  color:var(--on-black);cursor:pointer;padding:7px 0;}
.a11y-statement{display:block;margin-top:10px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.14);font-size:.78rem;color:var(--on-black-dim);}
.a11y-statement:hover{color:var(--y);}

/* Las tres clases que puede traer <html> — cada toggle las agrega/quita,
   site.js decide cuál según lo que ya estaba guardado la visita anterior. */
html.a11y-text-lg{font-size:112.5%;}
html.a11y-text-xl{font-size:125%;}
html.a11y-readable :where(body,input,textarea,select,button){
  font-family:Arial,Helvetica,sans-serif !important;}
html.a11y-grayscale{filter:grayscale(1);}
.drawer{
  position:fixed;inset:0;height:100dvh;z-index:65;background:var(--black);color:var(--on-black);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(2px,1vh,8px);
  padding:0 var(--gut);overflow-y:auto;
  clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease);
}
body.menu{overflow:hidden;}
body.menu .drawer{clip-path:inset(0 0 0 0);}
.drawer a{font-size:clamp(1.6rem,7vw,3rem);font-weight:800;letter-spacing:-.045em;
  line-height:1.18;color:var(--on-black-dim);transition:color .2s;padding-block:4px;}
.drawer a:hover{color:var(--y);}
@media (max-height:520px){.drawer{justify-content:flex-start;padding-top:84px;}.drawer a{font-size:1.35rem;}}

/* ── wipe + reveal ──────────────────────────────────── */
.wipe{position:fixed;inset:0;z-index:90;background:var(--black);pointer-events:none;transform:scaleY(0);transform-origin:bottom;}
.wipe.in{transform:scaleY(1);transform-origin:bottom;transition:transform .34s var(--ease);}
.wipe.out{transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease);}
/* ⚠️ Gated on `js-rv`, which `site.js` sets AS ITS FIRST ACT — not on `js`,
   which an inline script in the head sets.
   Those are different guarantees. The inline script always runs, so `js` was
   landing and hiding every `.rv` on the page even when `site.js` — the file
   that adds `.go` and reveals them — failed to load. A 404, a blocked script
   or a slow CDN left everything below the hero invisible, and the 2-second
   safety net was inside the very file that had not arrived.
   With `js-rv`, the thing that hides the content is written by the same file
   that shows it again. It cannot half-arrive. */
.js-rv .rv{clip-path:inset(0 0 102% 0);opacity:0;transform:translateY(12px);}
.js-rv .rv.go{clip-path:inset(0 0 -10% 0);opacity:1;transform:none;
  transition:clip-path .8s var(--ease),opacity .55s ease,transform .8s var(--ease);}

/* ── hero ───────────────────────────────────────────── */
.hero{background:var(--black);color:var(--on-black);padding-block:clamp(52px,9vw,132px) clamp(44px,7vw,104px);}
.hero .eyeb{font-family:var(--mono);font-size:clamp(.62rem,.9vw,.72rem);letter-spacing:.22em;
  text-transform:uppercase;color:var(--on-black-dim);margin-bottom:clamp(22px,3.4vw,34px);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.hero .eyeb i{width:6px;height:6px;background:var(--y);display:block;font-style:normal;flex:none;}
.hero h1 span{display:block;overflow:hidden;padding-bottom:.06em;}
/* ⚠️ The headline animates with a KEYFRAME, not with a class JavaScript adds.
   It used to wait for `.hero.go`, which `site.js` sets — so if that one file
   failed to load while the inline `js` class had already landed (a 404, a
   blocked script, a slow CDN), the H1 stayed translated 105% down and was
   invisible. Permanently. On the headline, which is the page.
   A keyframe cannot half-arrive: it runs off the stylesheet that is already
   painting the rest of the hero, and it ends visible. */
.hero h1 span b{display:block;font-weight:800;transform:translateY(105%);
  animation:heroLine .85s var(--ease) forwards;}
.hero h1 span:nth-child(2) b{animation-delay:.08s;}
.hero h1 span:nth-child(3) b{animation-delay:.16s;}
@keyframes heroLine{to{transform:none;}}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,44px);
  align-items:end;margin-top:clamp(30px,5vw,64px);}
@media (max-width:900px){.hero-foot{grid-template-columns:1fr;align-items:start;}}

/* ── marquee ────────────────────────────────────────── */
.marq{border-block:1px solid rgba(255,255,255,.14);overflow:hidden;}
/* 🔴 42s era demasiado rapido, y el numero solo era la mitad del problema.
   La duracion es fija pero el recorrido NO: la tira mide lo que midan las
   palabras, asi que en una pantalla ancha recorre mas distancia en los mismos
   42 segundos. Se lee rapido justo donde mas gente la ve.
   90s es el mismo recorrido a poco mas de la mitad de velocidad: se sigue
   moviendo, y ya se alcanza a leer cada palabra al pasar. */
.marq-in{display:flex;width:max-content;animation:slide 90s linear infinite;}
.marq span{font-size:clamp(1rem,2.2vw,1.6rem);font-weight:700;letter-spacing:-.035em;
  padding:clamp(13px,1.8vw,19px) clamp(14px,2vw,24px);display:flex;align-items:center;
  gap:clamp(14px,2vw,24px);color:var(--g4);white-space:nowrap;}
.marq span::after{content:"";width:5px;height:5px;background:var(--y);flex:none;}
@keyframes slide{to{transform:translateX(-50%);}}
.marq:hover .marq-in{animation-play-state:paused;}
/* En celular la tira es mas corta y recorre menos, asi que no necesita los 90s
   completos — pero sigue siendo mas lenta de lo que era. */
@media (max-width:760px){.marq-in{animation-duration:60s;}}
/* Faltaba. El fondo del hero ya respetaba esta preferencia y la marquesina no,
   que es la que de verdad molesta a quien la activo: es la unica cosa de la
   pagina que se mueve sola y sin parar. */
@media (prefers-reduced-motion:reduce){
  .marq-in{animation:none;transform:none;}
  /* Sin animacion la tira se queda quieta a media frase, asi que se deja
     desplazable a mano en vez de cortada. */
  .marq{overflow-x:auto;scrollbar-width:none;}
  .marq::-webkit-scrollbar{display:none;}
}

/* ── stats ──────────────────────────────────────────── */
/* Cinco cifras desde 2026-09-04, no cuatro. El escalón vive AQUÍ, junto a sus
   media queries, y no en el bloque nuevo del final: una regla `.stats` escrita
   después de estas dos las anula por orden de cascada, y eso fue exactamente lo
   que rompió el móvil — dos columnas de 168px no caben en 375px. */
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);}
@media (max-width:1100px){.stats{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:880px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:460px){.stats{grid-template-columns:1fr;}}
.st{background:var(--black);padding:clamp(20px,3vw,32px) clamp(16px,2.2vw,26px);}
.st .n{font-size:clamp(2.1rem,5.4vw,3.7rem);font-weight:800;line-height:.94;
  letter-spacing:-.055em;font-variant-numeric:tabular-nums;}
.st .n em{font-style:normal;color:var(--y);}
.st .l{margin-top:12px;font-size:clamp(.88rem,1vw,.96rem);font-weight:600;line-height:1.3;}
.st .w{margin-top:5px;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-black-dim);}

/* ── grids ──────────────────────────────────────────── */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4.4vw,76px);align-items:center;}
@media (max-width:940px){.duo{grid-template-columns:1fr;}}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);}
@media (max-width:960px){.trio{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.trio{grid-template-columns:1fr;}}

/* ── cards ──────────────────────────────────────────── */
.card{display:block;border-top:1px solid var(--g2);padding-top:20px;}
.on-black .card{border-color:rgba(255,255,255,.15);}
.card .ph{aspect-ratio:5/4;margin-bottom:20px;}
.card .ph-img{aspect-ratio:5/4;margin-bottom:20px;}
.card .kicker{font-family:var(--mono);font-size:.64rem;color:var(--y);letter-spacing:.16em;text-transform:uppercase;}
.card h3{margin:10px 0 10px;transition:color .25s var(--ease);}
.card p{font-size:.96rem;color:var(--g6);}
.on-black .card p{color:var(--on-black-dim);}
.card:hover h3{color:var(--y);}
.card .go{margin-top:16px;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;display:inline-flex;gap:8px;align-items:center;}
.card .go::after{content:"→";transition:transform .3s var(--ease);}
.card:hover .go::after{transform:translateX(5px);}

/* ── rows ───────────────────────────────────────────── */
.rows{border-top:1px solid var(--g2);}
.on-black .rows{border-color:rgba(255,255,255,.15);}
.row{display:grid;grid-template-columns:clamp(38px,5vw,64px) minmax(0,1fr) auto;
  gap:clamp(12px,2vw,24px);align-items:center;min-height:60px;
  padding:clamp(16px,2.4vw,26px) 4px;border-bottom:1px solid var(--g2);
  transition:padding-inline .35s var(--ease),background-color .3s var(--ease);}
.on-black .row{border-color:rgba(255,255,255,.15);}
.row:hover{padding-inline:clamp(8px,1.6vw,18px);background:var(--paper);}
.on-black .row:hover{background:rgba(255,255,255,.05);}
.row .n{font-family:var(--mono);font-size:.68rem;color:var(--g4);letter-spacing:.12em;}
.row .t{font-size:clamp(1.1rem,2.4vw,1.75rem);font-weight:700;letter-spacing:-.038em;line-height:1.12;display:block;}
.row .d{font-size:clamp(.86rem,1vw,.94rem);color:var(--g6);margin-top:6px;max-width:64ch;}
.on-black .row .d{color:var(--on-black-dim);}
.row .arw{font-family:var(--mono);color:var(--y);transition:transform .3s var(--ease);}
.row:hover .arw{transform:translateX(6px);}
@media (max-width:560px){.row{grid-template-columns:32px minmax(0,1fr);}.row .arw{display:none;}}

/* ── steps ──────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--g2);border:1px solid var(--g2);}
@media (max-width:960px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.steps{grid-template-columns:1fr;}}
.step{background:var(--white);padding:clamp(24px,3.2vw,38px) clamp(20px,2.6vw,32px);}
.step .n{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--y);}
.step h3{margin:14px 0 10px;font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:800;letter-spacing:-.04em;}
.step p{font-size:.95rem;color:var(--g6);}
.step p b{color:var(--ink);font-weight:600;}

/* ── app / portal shell ─────────────────────────────── */
.proto{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--y);color:var(--y);
  padding:5px 10px;margin-bottom:20px;}
.app{border:1px solid rgba(255,255,255,.15);background:#0E0F11;}
.app-top{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.13);flex-wrap:wrap;}
.app-top i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2);display:block;flex:none;}
.app-top .u{margin-left:6px;font-family:var(--mono);font-size:.68rem;color:var(--on-black-dim);}
.app-top .who{margin-left:auto;font-family:var(--mono);font-size:.66rem;color:var(--y);display:flex;gap:12px;align-items:center;}
.app-top .who button{font-family:var(--mono);font-size:.66rem;color:var(--on-black-dim);text-decoration:underline;}
.app-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.13);overflow-x:auto;}
.app-tabs button{padding:15px clamp(14px,2vw,20px);font-family:var(--mono);font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-black-dim);
  border-bottom:2px solid transparent;white-space:nowrap;transition:color .25s,border-color .25s;}
.app-tabs button.act{color:var(--on-black);border-bottom-color:var(--y);}
.tabp{display:none;padding:clamp(16px,2.4vw,24px);} .tabp.live{display:block;}
.pr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.09);}
.pr:last-child{border-bottom:0;}
.pr .nm{font-weight:600;font-size:.95rem;}
.pr .sb{font-family:var(--mono);font-size:.68rem;color:var(--on-black-dim);margin-top:4px;line-height:1.5;}
@media (max-width:520px){.pr{grid-template-columns:1fr;gap:8px;}.pr .chip{justify-self:start;}}
.chip{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border:1px solid currentColor;white-space:nowrap;}
.c-ok{color:#5FBA86;} .c-run{color:var(--y);} .c-new{color:#84AEF2;} .c-warn{color:#E5A93F;}

/* ── forms ──────────────────────────────────────────── */
.f-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
@media (max-width:640px){.f-grid{grid-template-columns:1fr;}}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0;}
.fld.full{grid-column:1/-1;}
.fld label{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-black-dim);}
.fld input,.fld select,.fld textarea{
  background:#161719;border:1px solid rgba(255,255,255,.17);color:var(--on-black);
  padding:13px 14px;font-family:var(--sans);font-size:16px;min-height:48px;width:100%;
  border-radius:0;transition:border-color .25s var(--ease);}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--y);outline:none;}
.fld textarea{resize:vertical;min-height:96px;}
.hp{position:absolute;left:-9999px;}
.sent{border:1px solid var(--y);padding:clamp(18px,2.6vw,26px);display:none;}
.sent.show{display:block;animation:pop .45s var(--ease);}
@keyframes pop{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.sent .ref{font-family:var(--mono);color:var(--y);font-size:1.05rem;letter-spacing:.05em;}
.flow{display:flex;flex-direction:column;gap:11px;margin-top:18px;}
.flow li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:11px;font-size:.92rem;color:var(--on-black-dim);}
.flow li::before{content:"→";font-family:var(--mono);color:var(--y);}

/* ── login gate ─────────────────────────────────────── */
.gate{max-width:460px;margin-inline:auto;padding:clamp(26px,4vw,40px);
  border:1px solid rgba(255,255,255,.15);background:#0E0F11;}
.gate h3{font-size:1.5rem;margin-bottom:6px;}
.gate .err{color:#F2777A;font-family:var(--mono);font-size:.72rem;margin-top:12px;display:none;}
.gate .err.show{display:block;}
.demo{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--mono);font-size:.68rem;color:var(--on-black-dim);line-height:1.9;}
.demo b{color:var(--y);font-weight:400;}

/* ── chat mockups ───────────────────────────────────── */
.lab{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);}
@media (max-width:900px){.lab{grid-template-columns:1fr;}}
.labcol h3{margin-bottom:8px;}
.labcol .why{font-size:.94rem;color:var(--on-black-dim);margin-bottom:20px;}
.stage{position:relative;background:#0E0F11;border:1px solid rgba(255,255,255,.15);
  height:clamp(440px,60vh,560px);overflow:hidden;}
.stage .bgnote{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.14);text-align:center;padding:20px;}

/* A — bubble */
.cw{position:absolute;right:16px;bottom:16px;width:min(310px,calc(100% - 32px));
  background:#141518;border:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;
  max-height:calc(100% - 32px);}
.cw-h{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid rgba(255,255,255,.12);}
.av{width:30px;height:30px;background:var(--y);flex:none;display:grid;place-items:center;
  font-weight:800;font-size:.7rem;color:#0A0A0B;letter-spacing:-.04em;}
.cw-h .t{font-weight:600;font-size:.86rem;line-height:1.2;}
.cw-h .s{font-family:var(--mono);font-size:.56rem;color:#5FBA86;letter-spacing:.1em;text-transform:uppercase;}
.cw-b{padding:15px;display:flex;flex-direction:column;gap:11px;overflow-y:auto;flex:1;}
.msg{font-size:.86rem;line-height:1.5;padding:10px 13px;max-width:88%;}
.msg.bot{background:#1D1F23;color:var(--on-black);align-self:flex-start;}
.msg.me{background:var(--y);color:#0A0A0B;align-self:flex-end;font-weight:500;}
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chips button{font-size:.76rem;padding:8px 12px;border:1px solid rgba(255,255,255,.24);
  color:var(--on-black-dim);transition:border-color .2s var(--ease),color .2s var(--ease);min-height:36px;}
.chips button:hover{border-color:var(--y);color:var(--y);}
.cw-f{padding:11px 13px;border-top:1px solid rgba(255,255,255,.12);display:flex;gap:8px;}
.cw-f input{flex:1;background:#1D1F23;border:1px solid rgba(255,255,255,.14);color:var(--on-black);
  padding:9px 12px;font-size:16px;min-width:0;}
.cw-f button{width:40px;background:var(--y);color:#0A0A0B;font-weight:800;flex:none;}
.capture{border:1px solid var(--y);padding:13px;display:flex;flex-direction:column;gap:9px;}
.capture .lb{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--y);}
.capture input{background:#1D1F23;border:1px solid rgba(255,255,255,.16);color:var(--on-black);padding:9px 11px;font-size:16px;}
.capture .go{display:flex;gap:7px;}
.capture .go button{flex:1;padding:9px;font-size:.76rem;font-weight:600;min-height:38px;}
.capture .go .a{background:var(--y);color:#0A0A0B;}
.capture .go .b{border:1px solid #25D366;color:#25D366;}

/* B — ask bar */
.cmd{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  width:min(400px,calc(100% - 32px));background:#141518;border:1px solid rgba(255,255,255,.2);
  padding:8px 8px 8px 16px;display:flex;align-items:center;gap:10px;min-height:48px;
  transition:opacity .3s var(--ease);}
.cmd .ask{flex:1;font-size:.86rem;color:var(--on-black-dim);text-align:left;}
.cmd .k{font-family:var(--mono);font-size:.58rem;border:1px solid rgba(255,255,255,.2);
  padding:3px 6px;color:var(--on-black-dim);}
.cmd .dotp{width:7px;height:7px;background:var(--y);flex:none;animation:pulse 2.2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.sheet{position:absolute;top:0;right:0;bottom:0;width:min(340px,100%);background:#141518;
  border-left:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform .42s var(--ease);}
.sheet.open{transform:none;}
.sheet-h{padding:15px;border-bottom:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:10px;}
.sheet-h .x{margin-left:auto;font-size:1.05rem;color:var(--on-black-dim);width:36px;height:36px;}
.sheet-b{flex:1;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:10px;}
.srow{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:.82rem;
  color:var(--on-black-dim);padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.srow::before{content:"→";font-family:var(--mono);color:var(--y);}

/* ── floating action buttons ────────────────────────── */
.fabs{position:fixed;right:clamp(12px,2vw,22px);bottom:clamp(12px,2vw,22px);z-index:80;
  display:flex;flex-direction:column;gap:11px;}
@media (max-width:760px){.fabs{bottom:88px;}}
.fab{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;
  box-shadow:0 8px 26px rgba(0,0,0,.34);transition:transform .25s var(--ease);position:relative;}
.fab:hover{transform:translateY(-3px) scale(1.05);}
.fab svg{width:26px;height:26px;display:block;}
.fab-wa{background:#25D366;}
.fab-ai{background:var(--y);color:#0A0A0B;font-weight:800;font-size:.74rem;letter-spacing:-.03em;}
.fab .tip{position:absolute;right:64px;top:50%;transform:translateY(-50%) translateX(6px);
  background:var(--black);color:var(--on-black);font-family:var(--mono);font-size:.6rem;
  letter-spacing:.08em;padding:7px 11px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .22s,transform .22s;border:1px solid rgba(255,255,255,.16);}
.fab:hover .tip{opacity:1;transform:translateY(-50%);}
@media (max-width:620px){.fab .tip{display:none;}}

/* Las 3 insignias — esquina opuesta a `.fabs` a propósito, dos grupos de
   botones flotantes en el mismo lado se pisan encima. 2026-10-05: eran una
   sola (Blue Wave); ahora son tres apiladas, cada una más chica que antes
   para que las tres juntas no pesen más que la que había sola. Tarjeta
   blanca redondeada debajo de cada una porque JSEB y MBE vienen en fondo
   claro — sin la tarjeta, ese fondo se vería como un recuadro roto sobre
   el negro de la página. */
.badge-float{position:fixed;left:clamp(10px,2vw,18px);bottom:clamp(12px,2vw,22px);z-index:75;
  display:flex;flex-direction:column;gap:10px;}
.badge-float-item{position:relative;}
.badge-float-item img{width:46px;height:46px;display:block;border-radius:9px;
  background:#fff;padding:4px;box-sizing:border-box;object-fit:contain;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.4));transition:transform .25s var(--ease);}
.badge-float-item:hover img{transform:translateY(-3px) scale(1.08);}
.badge-float-item .tip{position:absolute;left:0;bottom:54px;
  background:var(--black);color:var(--on-black);font-family:var(--mono);font-size:.6rem;
  letter-spacing:.04em;padding:7px 11px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .22s,transform .22s;transform:translateY(6px);
  border:1px solid rgba(255,255,255,.16);}
.badge-float-item:hover .tip{opacity:1;transform:translateY(0);}
/* Escondida en móvil, no encogida: a este ancho ya compite por el mismo
   rincón con `.sticky` (Call/Contact Us) y el fab de WhatsApp — y a
   diferencia de esos dos, esta no es una acción que alguien necesite tocar.
   Comprobado en vivo: a 760px se monta encima del botón "Contact Us" del
   propio hero. Sigue viéndose en el footer del sitio para quien entra desde
   el teléfono y baja hasta ahí — no desaparece, solo deja de flotar. */
@media (max-width:760px){.badge-float{display:none;}}

/* ── contact / footer ───────────────────────────────── */
.addr{font-family:var(--mono);font-size:.9rem;line-height:2;}
.addr a:hover{color:var(--y);}
footer{background:var(--black);color:var(--on-black);padding-block:clamp(46px,6vw,74px) 36px;}
.f4{display:grid;grid-template-columns:1.3fr repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px);}
@media (max-width:940px){.f4{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.f4{grid-template-columns:1fr;}}
footer h4{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-black-dim);font-weight:400;margin-bottom:16px;}
footer ul{display:flex;flex-direction:column;gap:10px;font-size:.92rem;}
footer ul a{color:var(--on-black-dim);transition:color .2s;}
footer ul a:hover{color:var(--y);}
.f-end{margin-top:clamp(34px,5vw,58px);padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:16px;font-family:var(--mono);font-size:.7rem;color:var(--on-black-dim);}
.f-end .r{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap;}

/* La franja "Certifications" del footer — ver la nota en footer.html. */
.certs{margin-top:clamp(34px,5vw,58px);padding-top:28px;border-top:1px solid rgba(255,255,255,.14);}
.certs>.ix{margin-bottom:18px;}
.certs-row{display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,40px);}
.certs-item{display:flex;align-items:center;gap:14px;}
.certs-item img{width:52px;height:52px;flex:none;border-radius:9px;background:#fff;
  padding:4px;box-sizing:border-box;object-fit:contain;}
.certs-item span{font-size:.82rem;color:var(--on-black-dim);line-height:1.4;}
.certs-item span b{color:var(--on-black);font-weight:600;}

/* Footer en celular: las 4 columnas apiladas (.f4 ya cae a 1fr en 520px)
   quedaban con todo pegado a la izquierda — logo, dirección, listas — y se
   veía como un bloque de texto sin orden. Centrado y un poco más chico,
   2026-09-29, José: "el footer se ve horrible en celular". */
@media (max-width:520px){
  .f4{gap:32px;text-align:center;}
  .f4>div{display:flex;flex-direction:column;align-items:center;}
  .f4 .brand{margin-left:auto;margin-right:auto;}
  .f4 .addr{font-size:.78rem;}
  footer h4{font-size:.6rem;margin-bottom:12px;}
  footer ul{gap:8px;font-size:.86rem;}
  .social{justify-content:center;margin-top:14px;}
  .certs{text-align:center;}
  .certs-row{justify-content:center;}
  .certs-item{text-align:left;}
  .f-end{flex-direction:column;align-items:center;text-align:center;gap:10px;font-size:.66rem;}
  .f-end .r{margin-left:0;justify-content:center;gap:16px;}
}

.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:9px;padding:10px 12px;
  background:var(--black);border-top:1px solid rgba(255,255,255,.15);}
.sticky .btn{flex:1;min-height:48px;padding:12px 6px;font-size:.88rem;}
@media (max-width:760px){.sticky{display:flex;}body{padding-bottom:76px;}}

.skip{position:absolute;left:-9999px;background:var(--y);color:#000;padding:12px 18px;font-weight:700;z-index:99;}
.skip:focus{left:14px;top:14px;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important;}
  .js-rv .rv{clip-path:none;opacity:1;transform:none;}
  .hero h1 span b{transform:none !important;}
}

/* ── the assistant, as a real fixed widget (concept A) ──────────────────── */
.cw{
  position:fixed;right:clamp(12px,2vw,22px);bottom:calc(clamp(12px,2vw,22px) + 130px);
  z-index:85;width:min(340px,calc(100vw - 24px));
  background:#141518;border:1px solid rgba(255,255,255,.16);
  display:flex;flex-direction:column;max-height:min(560px,calc(100dvh - 200px));
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  opacity:0;transform:translateY(12px) scale(.98);
  transition:opacity .24s var(--ease),transform .24s var(--ease);
}
.cw.open{opacity:1;transform:none;}
.cw[hidden]{display:none;}
@media (max-width:760px){
  .cw{bottom:calc(88px + 66px);max-height:calc(100dvh - 240px);}
}
@media (max-width:480px){
  .cw{left:12px;right:12px;width:auto;}
}
.cw-x{margin-left:auto;width:36px;height:36px;color:var(--on-black-dim);font-size:.95rem;flex:none;}
.cw-x:hover{color:var(--y);}
.capture .go .b{
  border:1px solid #25D366;color:#25D366;display:flex;align-items:center;justify-content:center;
  flex:1;padding:9px;font-size:.76rem;font-weight:600;min-height:38px;text-decoration:none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-09-04 — landing rebuild
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero with a photograph behind it ──────────────────────────────────────
   Movement without a video: the company's own photo, drifting slowly. It costs
   a fraction of an MP4, plays with the data saver on, and needs no third-party
   player — which matters because the CSP on this site forbids one. */
.hero-media{position:relative;isolation:isolate;}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 60%;
  opacity:.30;animation:heroDrift 26s var(--ease) infinite alternate;}
/* The scrim is what keeps the headline legible over an image nobody art
   directed. Without it the type sits on whatever the sky happened to be. */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,.86) 0%,rgba(10,10,11,.62) 45%,rgba(10,10,11,.94) 100%);}
@keyframes heroDrift{from{transform:scale(1.06) translate3d(0,0,0);}to{transform:scale(1.16) translate3d(-1.5%,-1.5%,0);}}
@media (prefers-reduced-motion:reduce){.hero-bg img{animation:none;transform:scale(1.06);}}

/* The three lines of business. Icons and rules — never counters: the "14
   services" number is the thing the client asked to remove. */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;margin-top:clamp(34px,5vw,58px);background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);}
.pillars li{background:var(--black);padding:20px 22px;display:flex;flex-direction:column;gap:5px;}
.pillars .pi{color:var(--y);font-size:.8rem;line-height:1;}
.pillars b{font-size:1.02rem;letter-spacing:-.03em;}
.pillars span:last-child{color:var(--on-black-dim);font-size:.84rem;line-height:1.5;}

/* Five figures now, not four. */

/* ── Ticks, coverage, gallery ───────────────────────────────────────────── */
.ticks{margin-top:26px;display:flex;flex-direction:column;gap:11px;}
.ticks li{position:relative;padding-left:26px;font-size:.94rem;line-height:1.55;color:var(--g7);}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:2px;background:var(--y);}

.cover{position:relative;overflow:hidden;}
.cover img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;}
.cover-t{position:absolute;z-index:2;left:0;top:0;background:var(--y);color:var(--black);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;padding:7px 12px;}

/* ── Coverage map ──────────────────────────────────────────────────────────
   2026-10-05 — estados reales (us-states-map.php), no una foto. Tres
   niveles nada más, todos el mismo amarillo de marca en distinta opacidad —
   nunca un segundo color, para que la densidad se lea como "más presencia
   aquí", no como una categoría aparte. Sin leyenda: a propósito, ver la
   nota en coverage.php. */
.cov-wrap{margin-top:clamp(36px,5vw,56px);}
.cov-map{width:100%;height:auto;display:block;}
.cov-map path{stroke:var(--black);stroke-width:1;vector-effect:non-scaling-stroke;}
.cov-neutral{fill:#3A3D44;}
.cov-tenue{fill:rgba(255,233,0,.28);}
.cov-active{fill:var(--y);}
.cov-hq-ring{fill:none;stroke:var(--y);stroke-width:1.5;vector-effect:non-scaling-stroke;}
.cov-hq-dot{fill:var(--y);}
.cov-hq-label{fill:var(--on-black);font-family:var(--mono);font-size:15px;
  letter-spacing:.03em;}
/* El texto es una ruta SVG más: a este ancho de contenedor queda demasiado
   chico para leerse sin importar el font-size que se le ponga (toda la caja
   se encoge junta) — el aro+punto de Jacksonville ya basta, el nombre
   también está en la lista de arriba ("Headquartered in Jacksonville..."). */
@media (max-width:640px){.cov-hq-label{display:none;}}

/* A photo in the slot the placeholder used to occupy. `.ph` keeps its frame
   and hover scale; this only swaps the painted background for a real file. */
.ph-img{position:relative;overflow:hidden;background:var(--g1);}
.ph-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.card:hover .ph-img img{transform:scale(1.045);}
.team-shot{aspect-ratio:4/5;}
.team-shot img{width:100%;height:100%;object-fit:cover;}

/* ── Carrusel ──────────────────────────────────────────────────────────────
   Se activa solo cuando un campo de foto tiene 2+ guardadas (ver epick()/
   eimg() en content.php) — el marco (aspect-ratio, tamaño) lo sigue dando
   quien envuelve esto (.ph-img, .team-shot, un <figure>, etc.); esto solo
   llena ese marco con capas que se turnan, nunca lo agranda ni lo encoge.
   2026-09-29, José: "si selecciono 2 fotos o más se convierte en carrusel
   sin salirse del marco". El avance es JS (site.js) — un crossfade con
   porcentajes fijos en CSS no sabe cuántas fotos hay; contar con JS es
   simple y funciona igual con 2 fotos que con 8. */
.car{position:relative;width:100%;height:100%;overflow:hidden;}
.car-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;}
.car-slide.on{opacity:1;z-index:1;}
.car-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.car-dots{position:absolute;left:0;right:0;bottom:10px;z-index:2;
  display:flex;justify-content:center;gap:6px;pointer-events:none;}
.car-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .3s,transform .3s;}
.car-dot.on{background:var(--y);transform:scale(1.25);}
@media (prefers-reduced-motion:reduce){.car-slide{transition:none;}}
/* Proporción cuadrada para un .ph/.ph-img suelto (la foto de "Scope" en
   janitorial, por ejemplo) donde el marco no viene ya dado por .card ni por
   un ancho fijo — 2026-09-29, editor en vivo generalizado a las 7 páginas. */
.sq1x1{aspect-ratio:1/1;}

/* Íconos pequeños, opcionales, junto a un título de grupo (Servicios,
   Industrias, Cómo trabajamos) — 2026-09-29. Sin ícono guardado no se dibuja
   nada (epick() recibe "" como placeholder): nunca aparece un recuadro roto
   en el sitio público solo porque nadie subió uno todavío. */
.ic-img{display:inline-flex;width:1.5em;height:1.5em;vertical-align:-.32em;
  margin-right:.4em;overflow:hidden;border-radius:6px;background:var(--g1);}
.ic-img img{width:100%;height:100%;object-fit:contain;}
.ic-img.ed-img-empty{display:inline-flex;}

.quad{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--g2);border:1px solid var(--g2);margin-top:clamp(26px,3.4vw,44px);}
.qi{background:var(--white);padding:20px 22px;display:flex;flex-direction:column;gap:5px;}
.qi b{font-size:.98rem;letter-spacing:-.028em;}
.qi span{color:var(--g6);font-size:.86rem;line-height:1.5;}

.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(10px,1.4vw,18px);}
.gal figure{margin:0;position:relative;overflow:hidden;background:var(--g1);}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s var(--ease);}
.gal figure:hover img{transform:scale(1.05);}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:13px 15px;
  background:linear-gradient(0deg,rgba(10,10,11,.9),transparent);
  color:#fff;font-size:.86rem;font-weight:700;letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:9px;}
.gal figcaption span{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--y);font-weight:400;}

/* Social links in the footer. */
.social{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px;}
.social a{font-size:.8rem;color:var(--on-black-dim);border-bottom:1px solid transparent;}
.social a:hover{color:var(--y);border-bottom-color:var(--y);}

/* ── Móvil para lo que se agregó el 2026-09-04 ─────────────────────────────
   Faltaba por completo. El bloque de arriba se escribió sin una sola media
   query, y en un teléfono eso se nota antes que en ninguna otra parte. */
@media (max-width:760px){
  /* El hero es lo primero que se ve; en vertical necesita respirar menos de
     lo que respira en un monitor. */
  .hero-bg img{object-position:center 55%;}
  /* Sin `!important` en el escalado: el keyframe del titular ya terminó en
     `transform:none`, y una transformación de más aquí lo volvería a mover. */
  .pillars{grid-template-columns:1fr;}
  .pillars li{padding:15px 17px;}

  .quad{grid-template-columns:1fr;}
  .qi{padding:15px 17px;}

  /* Dos por fila aguanta hasta 480; una sola por debajo. */
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));}

  .cover img{aspect-ratio:3/2;}
  .team-shot{aspect-ratio:3/2;}
  .ticks li{font-size:.9rem;}
}

@media (max-width:480px){
  .gal{grid-template-columns:1fr;}
  /* El pie del hero apila los botones (ya lo hace `.acts` a 420) y el bloque
     de pilares no debe pegarse al borde. */
  .pillars{margin-top:26px;}
  .cover-t{font-size:.56rem;padding:6px 10px;}
  .gal figcaption{font-size:.78rem;padding:10px 12px;}
  .social{gap:12px;}
}

/* ── Services: the three group titles, and bullets instead of 01–14 ─────────
   (José, 2026-09-11 — "los tres títulos de Cleaning, Construction y Specialty
   hazlos más visibles, dales separación, y quita los números del 1 al 14".)

   Both are MODIFIERS, scoped to the services list, on purpose. `.ix` is the
   section eyebrow on seven pages and `.row .n` numbers rows on seven pages —
   including How We Work, where the numbers are the order of the six steps and
   removing them would lose information. Here the numbers only counted, so they
   go; everywhere else they stay. */

/* The title was a 0.65rem grey mono eyebrow — the right size for "section 03",
   the wrong size for the name of a whole family of services. It is now a real
   h2 in the page's own typeface, dark, with the letter as a yellow badge. */
.ix.ix-group{
  font-family:var(--sans);font-size:clamp(1.15rem,2vw,1.55rem);font-weight:800;
  letter-spacing:-.02em;text-transform:none;color:var(--ink);
  line-height:1.15;margin-bottom:clamp(16px,2.2vw,22px);gap:clamp(12px,1.6vw,16px);
}
.ix.ix-group b{
  display:inline-grid;place-items:center;flex:none;
  width:clamp(30px,3vw,38px);height:clamp(30px,3vw,38px);
  background:var(--y);color:var(--ink);font-family:var(--mono);
  font-size:clamp(.8rem,1vw,.95rem);font-weight:500;letter-spacing:0;
}
.ix.ix-group::after{background:var(--g2);}
/* The separation between groups. It used to be an inline style on two of the
   three headings, which is how the first group ended up spaced differently. */
.rows + .ix-group{margin-top:clamp(52px,7vw,84px);}

/* A yellow square — the same mark the marquee already uses between words, so
   the bullet reads as the brand rather than as a list default. */
.rows-bullets .row .n{display:grid;place-items:center;}
.rows-bullets .row .n::before{content:"";width:8px;height:8px;background:var(--y);display:block;}
/* Without a number the first column can be narrower; the text moves closer to
   its mark instead of floating 64px away from it. */
.rows-bullets .row{grid-template-columns:clamp(18px,2.4vw,28px) minmax(0,1fr) auto;}
@media (max-width:560px){.rows-bullets .row{grid-template-columns:18px minmax(0,1fr);}}

/* The Contact button inside the mobile drawer. */
.drawer .drawer-cta{font-size:clamp(1rem,4.4vw,1.25rem);letter-spacing:0;margin-top:14px;align-self:flex-start;}

/* ── Always dark ──────────────────────────────────────────────────────────
   (José, 2026-09-11 — "quiero que siempre fuerces al dispositivo o al
   navegador que esa página se tiene que mostrar en modo oscuro".)

   🔴 The iPhone "white background" at Coverage/Locations was not a rendering
   bug. The dark palette above was only applied inside
   `@media (prefers-color-scheme: dark)`, so a phone in LIGHT mode — most of
   them — got the light palette: a black hero, then "Ten locations should not
   mean ten standards" on white directly underneath.

   So this is not a new design. It is the exact dark palette that visitors with
   dark mode were already seeing, now given to everyone, whatever their device
   is set to. Declared last so it wins over the light defaults without editing
   them, and `color-scheme: dark` makes Safari and Chrome draw their own form
   controls, scrollbars and autofill dark too — otherwise the contact form's
   inputs would still flash white on an iPhone. */
:root,
:root[data-theme="light"]{
  --black:#000; --ink:#EDEEF0; --white:#121315; --paper:#0C0D0E;
  --g7:#C4C8CE; --g6:#979CA4; --g4:#666B73; --g2:#26282C; --g1:#1A1C1F;
  color-scheme:dark;
}
html{background:#121315;}