/* ===========================================================================
   INT Series Group · direccion D
   Esqueleto LaunchDarkly, superficie INT.
   Se toma: reticula de fondo, formulario dentro del hero, corte duro de negro
   a panel blanco, stepper numerado, un numero por prueba, un solo acento.
   No se toma: radios grandes, mascota, gradientes, acentos de color por fila
   — en su lugar va el material.
   Manual v1.0: Negro #141618 · Blanco #FFFFFF · Rojo #F5333A ·
   Teko 700 titulares en caja alta · Plus Jakarta Sans todo lo demas.
   Contraste: rojo sobre negro 4.77:1 · negro sobre rojo 4.77:1 ·
   blanco sobre rojo 3.88:1, por eso el boton rojo lleva tinta negra.
   =========================================================================== */
:root{
  --negro:#141618; --negro-2:#1B1E21; --blanco:#fff; --papel:#F7F5F4;
  --rojo:#F5333A; --rojo-osc:#D92830;
  --tinta-cl:#C9CDD1; --gris-cl:#8E949A; --gris:#6B7076; --linea:#E2DEDC;
  --linea-osc:rgba(255,255,255,.14);
  --display:"Teko","Oswald","Arial Narrow",sans-serif;
  --texto:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  /* lo que sube #resto al salir el hero. Todo lo pegajoso de abajo vive
     dentro de ese bloque transformado, asi que se clava esos pixeles mas
     arriba de su top; hay que devolverselos. Debe coincidir con SUBIDA. */
  --sube:56px;
  --asienta:cubic-bezier(.2,.8,.2,1);
  --gx:clamp(16px,3vw,34px);   /* margen lateral de la cabecera */
  color-scheme:dark;
}
*{box-sizing:border-box}
/* #resto sube 56px al salir el hero y se monta sobre su borde inferior. Sin
   fondo propio, la foto del hero se veia a traves de la franja de
   credenciales. */
#resto{position:relative;z-index:1;background:var(--negro)}
body{margin:0;background:var(--negro);color:var(--blanco);font-family:var(--texto);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a,button,input,select,summary{touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(245,51,58,.18)}
/* enlace de salto: invisible hasta que el teclado lo enfoca */
.saltar{position:absolute;left:-9999px;top:0;z-index:200;background:var(--rojo);color:#fff;
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:18px;
  padding:12px 18px 9px;text-decoration:none}
.saltar:focus{left:12px;top:12px}
img{display:block;max-width:100%}
a{color:inherit}
/* el margen lateral tambien tiene que librar una barra de sistema lateral */
.w{max-width:1280px;margin:0 auto;
  padding-left:max(clamp(16px,3.4vw,40px),env(safe-area-inset-left,0px));
  padding-right:max(clamp(16px,3.4vw,40px),env(safe-area-inset-right,0px))}
h1,h2,h3{text-wrap:balance}

/* entrada sobria: lo mismo que hace la referencia, nada mas */
.ent{opacity:0;transform:translateY(26px)}
.ent.on{opacity:1;transform:none;transition:opacity 1.05s var(--asienta),transform 1.05s var(--asienta)}

/* obertura: primero negro, luego la reticula sola, y al final el contenido.
   Se apaga por contenedor — no por elemento — para que sea un solo gesto. */
html.obertura .reticula{opacity:0}
html.obertura :where(header,.w,.marquesina,.llamada){opacity:0}
html.obertura.rejilla .reticula{opacity:1}
.reticula{transition:opacity 1.4s linear}
header,.w,.marquesina,.llamada{transition:opacity 1.3s var(--asienta)}
/* segunda visita de la sesion: aparece ya puesta, sin fundidos de apertura */
html.directo .reticula,
html.directo :where(header,.w,.marquesina,.llamada){transition:none}

/* ---------- reticula de shop drawing ---------- */
.reticula{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.105) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.105) 1px,transparent 1px),
    linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:72px 72px,72px 72px,24px 24px,24px 24px;
  -webkit-mask-image:radial-gradient(132% 104% at 50% 32%,#000 46%,transparent 94%);
  mask-image:radial-gradient(132% 104% at 50% 32%,#000 46%,transparent 94%)}

/* ---------- cabecera: calcada de la referencia ----------
   Logotipo sangrado a la izquierda ·
   capsula flotante centrada con la navegacion · boton suelto a la derecha. */
header{position:sticky;top:0;z-index:60;background:transparent}
header .fila{display:flex;align-items:center;gap:16px;position:relative;
  padding-block:13px;
  padding-left:max(var(--gx),env(safe-area-inset-left,0px));
  padding-right:max(var(--gx),env(safe-area-inset-right,0px))}

/* ---- el logotipo se repliega al avatar ----
   Horizontal largo arriba del todo; al bajar, el texto se recoge hacia la
   izquierda y la marca queda sola dentro de su placa negra. */
/* Una sola curva y una sola duracion para las tres propiedades que se mueven.
   El ancho se anima en pixeles medidos, nunca con max-width: con max-width la
   primera mitad del recorrido no hace nada visible y luego da el tiron. */
.lock{display:flex;align-items:center;justify-content:center;gap:0;flex:none;
  text-decoration:none;height:46px;
  margin-left:calc(var(--gx) * -1);
  padding:0 22px 0 calc(var(--gx) + 15px);
  border-radius:0 9px 9px 0;
  background:rgba(14,16,18,.9);backdrop-filter:blur(16px);
  transition:padding .44s cubic-bezier(.4,0,.2,1) 0s}
.lock svg{height:28px;width:auto;flex:none}
/* Las dos direcciones llevan tiempos distintos a proposito.
   Al replegar: el texto se apaga primero y la caja se cierra detras.
   Al desplegar: la caja se abre primero y el texto entra cuando ya hay sitio.
   Si la opacidad no se retrasa al abrir, el texto aparece entero dentro de una
   caja a medio abrir y se ve cortado por la mitad. */
.lock .txt{display:block;overflow:hidden;white-space:nowrap;
  width:var(--wtxt,auto);margin-left:11px;opacity:1;
  transition:width .44s cubic-bezier(.4,0,.2,1) 0s,
             margin-left .44s cubic-bezier(.4,0,.2,1) 0s,
             opacity .26s cubic-bezier(.4,0,.2,1) .24s}
.lock .nom{font-family:var(--display);font-weight:700;font-size:25px;line-height:.64;
  letter-spacing:.055em;text-transform:uppercase;white-space:nowrap;display:block;
  padding-top:5px}
.lock .des{font-size:6.6px;line-height:1;letter-spacing:.3em;white-space:nowrap;
  color:var(--gris-cl);display:block;margin-top:6px}

header.compacto .lock{padding:0 18px 0 calc(var(--gx) + 5px);
  transition:padding .44s cubic-bezier(.4,0,.2,1) .1s}
header.compacto .lock .txt{width:0;margin-left:0;opacity:0;
  transition:width .44s cubic-bezier(.4,0,.2,1) .1s,
             margin-left .44s cubic-bezier(.4,0,.2,1) .1s,
             opacity .2s cubic-bezier(.4,0,.2,1) 0s}

/* la capsula */
.capsula{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:2px;background:rgba(46,50,55,.9);
  backdrop-filter:blur(16px);border-radius:999px;padding:5px}
.capsula > a,.capsula > button{font-family:var(--texto);font-size:13.5px;font-weight:500;
  color:var(--tinta-cl);background:none;border:0;cursor:pointer;text-decoration:none;
  padding:9px 15px;border-radius:999px;white-space:nowrap;display:inline-flex;
  align-items:center;gap:7px;transition:background .14s linear,color .14s linear}
.capsula > a:hover,.capsula > button:hover{background:rgba(255,255,255,.1);color:#fff}
.capsula > a:focus-visible,.capsula > button:focus-visible{outline:2px solid var(--rojo);
  outline-offset:2px}
.capsula > button[aria-expanded="true"]{background:rgba(255,255,255,.14);color:#fff}
.capsula .flecha{width:8px;height:8px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s var(--asienta);flex:none}
.capsula > button[aria-expanded="true"] .flecha{transform:rotate(225deg) translate(-2px,-2px)}
.capsula .num{font-variant-numeric:tabular-nums;font-weight:600;color:#fff}

/* El boton del menu habla con la voz del logotipo: Teko 700 en caja alta.
   Blanco sobre el rojo da 3.88:1, por debajo del minimo de texto normal, asi que
   va a 21px en negrita — ahi cuenta como texto grande y el minimo baja a 3:1. */
.btn-der{margin-left:auto;flex:none;display:inline-flex;align-items:center;
  justify-content:center;height:46px;padding:3px 26px 0;
  background:var(--rojo);color:#fff;border-radius:999px;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:21px;line-height:1;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  transition:background .16s linear}
.btn-der:hover{background:var(--rojo-osc);color:#fff}
.btn-der:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* el panel desplegable */
.mega{position:absolute;left:50%;top:calc(100% - 4px);transform:translateX(-50%) translateY(-6px);
  width:min(920px,calc(100vw - 32px));background:#202326;border-radius:18px;
  padding:22px;display:grid;grid-template-columns:1.05fr .95fr;gap:26px;
  opacity:0;visibility:hidden;pointer-events:none;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  transition:opacity .18s linear,transform .22s var(--asienta),visibility .18s}
.mega.abierto{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega .col{min-width:0;display:flex;flex-direction:column;gap:8px}
.tarjeta{display:flex;gap:12px;align-items:center;background:#282C30;border-radius:12px;
  padding:10px;text-decoration:none;transition:background .14s linear}
.tarjeta:hover{background:#31363A}
.tarjeta img{width:44px;height:44px;border-radius:9px;object-fit:cover;flex:none}
.tarjeta b{display:block;font-size:14px;font-weight:700;color:#fff;margin-bottom:3px}
.tarjeta span{display:block;font-size:12px;line-height:1.4;color:var(--gris-cl)}
.mega .cta{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--rojo);color:var(--negro);border-radius:12px;padding:14px 18px;
  font-size:13.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  text-decoration:none;margin-top:auto;transition:background .14s linear}
.mega .cta:hover{background:var(--rojo-osc);color:#fff}
.mega .rot{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--gris-cl);margin:4px 0 10px 4px}
.mega .lista a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;
  text-decoration:none;color:var(--tinta-cl);font-size:14px;transition:background .14s linear,
  color .14s linear}
.mega .lista a:hover{background:rgba(255,255,255,.07);color:#fff}
.mega .lista svg{width:26px;height:26px;flex:none;background:#2C3034;border-radius:7px;
  padding:6px;stroke:var(--rojo);stroke-width:1.6;fill:none;stroke-linecap:square}

.tapa{position:fixed;inset:0;z-index:50;display:none}
.tapa.on{display:block}

/* La capsula NUNCA pierde su fondo: es lo unico que separa el texto del menu
   del texto de la pagina cuando esta pasa por encima. Lo que cambia al
   estrecharse es donde se coloca y cuantos elementos caben dentro. */
/* El cajon no existe en escritorio: display:contents lo borra del layout y la
   capsula y el panel se comportan igual que antes (siguen colgando de .fila,
   que es quien tiene position:relative). En pantalla pequena se convierte en
   un cajon desplegable y se lleva dentro el menu entero, sin duplicar nada. */
.cajon{display:contents}
.hamb{display:none;flex:none;width:46px;height:46px;border-radius:999px;padding:0;
  border:1px solid var(--linea-osc);background:rgba(20,22,24,.92);backdrop-filter:blur(14px);
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.hamb span{display:block;width:19px;height:2px;background:#fff;border-radius:2px;
  transition:transform .3s var(--asienta),opacity .18s linear}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hamb:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}
/* velo del cajon: por debajo del cajon (55) y de la cabecera (60), asi que
   tocar fuera cierra, pero el propio boton sigue siendo pulsable */
.velo-menu{position:fixed;inset:0;z-index:50;background:rgba(10,12,14,.55);
  opacity:0;visibility:hidden;transition:opacity .3s linear,visibility .3s}
.velo-menu.on{opacity:1;visibility:visible}

@media (max-width:1180px){
  .capsula{position:static;transform:none;margin-left:auto;flex-wrap:nowrap}
  .capsula > a,.capsula > button{padding:9px 12px;font-size:13px}
  .btn-der{margin-left:0;padding-inline:20px;font-size:20px}
  .mega{left:auto;right:var(--gx);transform:translateY(-6px);
    grid-template-columns:1fr}
  .mega.abierto{transform:translateY(0)}
}
@media (max-width:1100px){
  .capsula .num{display:none}            /* el telefono ya esta en el pie y junto al boton */
}
@media (max-width:820px){
  .capsula > a[href="#construimos"]{display:none}
}
@media (max-width:700px){
  .capsula > a[href="#pruebas"]{display:none}
}
/* La pildora deja de caber antes de lo que parece: entre 820 y 1000 el
   logotipo largo (315px) mas la pildora (359) mas el boton (187) suman mas
   que el ancho util, y solo no se veia porque body lleva overflow-x:hidden.
   Por eso el cajon entra ya en 1020. */
@media (max-width:1020px){
  .hamb{display:flex}
  /* con el cajon fuera del flujo (position:fixed) ya nadie empuja: el boton y
     la hamburguesa necesitan su propio margen automatico para pegarse a la
     derecha, y el logotipo tiene que poder encogerse para no desbordar. */
  .btn-der{margin-left:auto}
  .lock{min-width:0}
  .lock .txt{min-width:0}
  /* el cajon es hijo de la cabecera y esta posicionado, asi que taparia a sus
     hermanos sin posicion — entre ellos el propio boton que lo cierra */
  .lock,.btn-der,.hamb{position:relative;z-index:56}
  .cajon{display:block;position:fixed;left:0;right:0;top:0;z-index:55;
    background:#191C1F;border-bottom:1px solid var(--linea-osc);
    padding-block:calc(var(--altoCab,72px) + 12px) 22px;
    padding-left:max(var(--gx),env(safe-area-inset-left,0px));
    padding-right:max(var(--gx),env(safe-area-inset-right,0px));
    overscroll-behavior:contain;
    max-height:100dvh;overflow:auto;
    transform:translateY(-101%);transition:transform .44s var(--asienta)}
  .cajon.abierto{transform:none}
  /* dentro del cajon la capsula deja de ser pildora y vuelve a ser lista */
  .cajon .capsula{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:static;transform:none;background:none;backdrop-filter:none;
    border-radius:0;padding:0}
  .cajon .capsula > a,.cajon .capsula > button{display:flex;font-size:17px;
    padding:15px 4px;border-radius:0;color:#fff;justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.09)}
  .cajon .capsula .num{display:flex;font-size:19px;color:var(--rojo)}
  .cajon .mega{position:static;transform:none;width:auto;box-shadow:none;
    background:none;padding:10px 0 2px;grid-template-columns:1fr;gap:14px;
    display:none;opacity:1;visibility:visible;pointer-events:auto}
  .cajon .mega.abierto{display:grid;transform:none}
}
@media (max-width:620px){
  .lock .des{display:none}
  header .fila{gap:10px}
  .btn-der{height:44px;padding-inline:16px;font-size:18.5px}
}
@media (max-width:580px){
  /* aqui ya no cabe el nombre junto al boton y la hamburguesa: queda la marca */
  .lock .txt{display:none}
  .lock{padding-right:14px}
}

/* ---------- hero ---------- */
/* ---- fondo del hero: obra propia, oscurecida y desenfocada ----
   La foto es del vestibulo comercial con guarda de vidrio y pasamanos de
   inoxidable — la prueba literal del titular. Lleva desenfoque horneado en el
   archivo (pesa 110 KB en vez de 227) y otro pequeno en CSS; encima, dos
   velos: uno plano para fijar el contraste del texto y otro vertical que
   funde con la cabecera arriba y con la franja de credenciales abajo.
   La reticula sigue estando, mas tenue: es el lenguaje de la marca y la foto
   no la sustituye. */
.hero-fondo{position:absolute;inset:-24% 0;z-index:0;will-change:transform}
.hero-foto{width:100%;height:100%;object-fit:cover;
  filter:blur(3px) saturate(.8) brightness(.8);transform:scale(1.07)}
.hero-velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(118% 86% at 50% 46%,rgba(20,22,24,.8) 0%,
                    rgba(20,22,24,.56) 52%,rgba(20,22,24,.12) 100%),
    linear-gradient(180deg,rgba(20,22,24,.9) 0%,rgba(20,22,24,.3) 34%,
                    rgba(20,22,24,.42) 66%,rgba(20,22,24,.94) 100%),
    rgba(20,22,24,.2)}
.hero{position:relative;overflow:clip;
  padding-block:clamp(64px,9vw,120px) clamp(58px,6.6vw,92px)}
.hero .w{position:relative;z-index:3}
.ceja{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--linea-osc);
  background:var(--negro);
  padding:7px 14px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--tinta-cl);margin-bottom:26px}
.ceja i{width:6px;height:6px;background:var(--rojo);flex:none}
h1{margin:0 0 22px;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(44px,7.4vw,106px);line-height:.88;letter-spacing:.004em;max-width:16ch}
h1 em{font-style:normal;color:var(--rojo)}
.bajada{margin:0 0 36px;max-width:56ch;font-size:clamp(15.5px,1.5vw,18px);color:var(--tinta-cl)}

/* ---- la corredera, medida sobre la referencia ----
   Alli el control es un formulario de dos pasos: caja oscura de 58px con radio 16,
   un campo dentro y el boton encajado a la derecha con radio 12 — no es una
   pildora. Al pasar el cursor solo pasan dos cosas: la flecha se desplaza 8px y se
   recorta contra el borde (el boton lleva overflow:hidden), y el color cambia en
   0.3s. Nada se expande. */
.hero-rej{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(28px,3.6vw,42px)}
.hero-txt{display:flex;flex-direction:column;align-items:center;max-width:920px}
.hero-txt h1{margin-bottom:20px}
.hero-txt .bajada{margin:0;max-width:52ch}
.hero-lado{width:min(500px,100%);display:flex;flex-direction:column;align-items:center}
.hero-lado .promesa{justify-content:center;margin-top:16px}
.corredera{display:flex;align-items:center;gap:10px;width:100%;
  height:58px;padding:4px 4px 4px 20px;border-radius:16px;
  border:1px solid var(--linea-osc);background:rgba(255,255,255,.055);
  backdrop-filter:blur(10px)}
.corredera input{flex:1;min-width:0;align-self:stretch;background:none;border:0;
  outline:0;padding:0 2px;font-family:var(--texto);font-size:16px;color:#fff}
.corredera input::placeholder{color:#767C81}
/* el input lleva outline:0, asi que el foco lo marca la capsula — y tiene que
   verse de verdad, no un borde al 30% */
.corredera:focus-within{border-color:var(--rojo);
  box-shadow:0 0 0 2px rgba(245,51,58,.45)}
.pastilla{flex:none;display:inline-flex;align-items:center;gap:8px;
  height:50px;padding:3px 12px 0 18px;border:0;cursor:pointer;overflow:hidden;
  background:var(--rojo);color:#fff;border-radius:12px;
  font-family:var(--display);font-weight:700;font-size:21px;line-height:1;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  transition:background-color .3s,color .3s}
.pastilla .flecha2{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex:none;transition:transform .3s ease-in}
.pastilla .flecha2 svg{width:17px;height:12px;display:block}
.pastilla:hover{background:var(--rojo-osc)}
.pastilla:hover .flecha2{transform:translateX(8px)}
.pastilla:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:460px){
  .corredera{height:auto;flex-direction:column;align-items:stretch;gap:12px;
    padding:12px;border-radius:14px}
  .corredera input{flex:none;height:46px;padding:0 10px}
  .pastilla{justify-content:center;width:100%}
}

/* ---- el popup ---- */
.velo-pop{position:fixed;inset:0;z-index:100;background:rgba(8,9,10,.72);
  backdrop-filter:blur(6px);opacity:0;visibility:hidden;
  transition:opacity .24s cubic-bezier(.4,0,.2,1),visibility .24s}
.velo-pop.abierto{opacity:1;visibility:visible}
.pop{position:fixed;z-index:101;left:50%;top:50%;overscroll-behavior:contain;
  transform:translate(-50%,-46%) scale(.98);
  width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;
  background:#1B1E21;border:1px solid var(--linea-osc);border-radius:20px;
  padding:clamp(22px,3vw,34px);opacity:0;visibility:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.7);
  transition:opacity .24s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),visibility .24s}
.pop.abierto{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.pop h3{margin:0 0 8px;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,3.6vw,42px);line-height:.94}
.pop .sub{margin:0 0 24px;font-size:15px;color:var(--gris-cl);max-width:46ch}
.pop .cerrar{position:absolute;right:12px;top:12px;width:46px;height:46px;border-radius:999px;
  border:1px solid var(--linea-osc);background:rgba(255,255,255,.05);color:#fff;
  font-size:19px;line-height:1;cursor:pointer;transition:background .14s linear}
.pop .cerrar:hover{background:rgba(255,255,255,.14)}
body.bloqueado{overflow:hidden}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
/* .btn — la llamada que cierra la pagina y el boton que envia el formulario.
   Misma voz que el boton de la cabecera: Teko caja alta sobre rojo. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:4px 26px 0;border:0;cursor:pointer;text-decoration:none;
  background:var(--rojo);color:#fff;border-radius:999px;
  font-family:var(--display);font-weight:700;font-size:21px;line-height:1;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  transition:background .16s linear,color .16s linear,border-color .16s linear}
.btn:hover{background:var(--rojo-osc);color:#fff}
.btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.btn.fant{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.26)}
.btn.fant:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.campos .btn{grid-column:1/-1;width:100%}
.campo{display:flex;flex-direction:column;gap:7px;min-width:0}
.campo label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--gris-cl)}
.campo input,.campo select{font-family:var(--texto);font-size:15px;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);
  padding:13px 13px;width:100%;border-radius:0;min-width:0}
.campo select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),
  linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 17px) 20px,calc(100% - 12px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.campo select option{background:var(--negro);color:#fff}
.campo input::placeholder{color:#6F7579}
.campo input:focus,.campo select:focus{outline:2px solid var(--rojo);outline-offset:-1px;
  border-color:var(--rojo)}
.promesa{margin:14px 0 0;font-size:12.5px;color:var(--gris-cl);display:flex;gap:9px;
  align-items:center}
.promesa b{color:#fff;font-weight:700}
.promesa i{width:14px;height:1px;background:var(--rojo);flex:none}
.gracias{border-left:3px solid var(--rojo);background:rgba(255,255,255,.05);padding:20px 22px;
  font-size:15px;line-height:1.6}
.gracias b{display:block;font-size:17px;margin-bottom:4px}

/* ---------- tira de clientes: pildoras rodando sin fin ----------
   La cinta lleva el contenido duplicado exactamente dos veces y se desplaza un
   50%: al llegar al final el cuadro es identico al inicial, asi que el salto no
   se ve. Va con su propio reloj, no con el scroll. */
.clientes{position:relative;z-index:2;padding-block:clamp(22px,2.6vw,34px)}
.clientes p{margin:0 0 clamp(12px,1.3vw,16px);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:700;color:var(--rojo)}
.marquesina{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.pista{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);width:max-content;
  animation:rodar 42s linear infinite;will-change:transform}
.marquesina:hover .pista{animation-play-state:paused}
@keyframes rodar{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.nombre{display:inline-flex;align-items:center;background:var(--blanco);color:var(--negro);
  border-radius:999px;padding:10px 22px 7px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(17px,1.9vw,25px);line-height:1;letter-spacing:.03em;white-space:nowrap}

/* ---------- llamada a proyectos ----------
   Medido en el cierre de la referencia: banda de color a sangre, un unico
   titular enorme (112px, peso alto) repetido en bucle horizontal, con un
   signo entre repeticiones, y el texto en el oscuro de la marca sobre el
   color — no al reves. Alli el bucle lo mueve un carrusel con clones; aqui
   se hace con CSS puro, duplicando el contenido exactamente dos veces y
   corriendo la pista de 0 a -50%. Su verde pasa a nuestro rojo y su estrella
   a un rombo, que es el signo de nodo de un plano. */
.llamada{position:relative;z-index:2;background:var(--rojo);color:#fff;
  padding-block:clamp(84px,10vw,170px);overflow:hidden}
.rodillo{overflow:hidden}
/* dos animaciones encadenadas en una sola lista: 'entra' trae el titular
   desde fuera de la pantalla y 'rodar' toma el relevo justo cuando aquella
   acaba (de ahi el retardo igual a su duracion). Las dos nacen pausadas, asi
   que hasta que no se dispare solo se ve el rojo: en el 0% de 'entra' el
   texto esta entero a la derecha del borde. Al relevarse, ambas valen
   translateX(0), asi que el empalme no tiene salto. */
.rodillo .pista2{display:flex;align-items:center;width:max-content;
  animation:entra var(--entra,7s) linear both,
            rodar 30s linear var(--entra,7s) infinite;
  animation-play-state:paused;will-change:transform}
.rodillo .pista2.rueda{animation-play-state:running}
@keyframes entra{from{transform:translate3d(100vw,0,0)}to{transform:translate3d(0,0,0)}}
/* este no se pausa al pasar el cursor: rueda siempre */
.rodillo .pista2 span{display:inline-flex;align-items:center;
  gap:clamp(20px,2.4vw,40px);padding-right:clamp(20px,2.4vw,40px);
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(110px,24vw,360px);line-height:.92;letter-spacing:.008em;white-space:nowrap}
.rodillo .pista2 i{width:clamp(26px,4.4vw,64px);height:clamp(26px,4.4vw,64px);
  flex:none;background:#fff;transform:rotate(45deg)}
.llamada .pie{display:flex;justify-content:center;margin-top:clamp(28px,3.4vw,48px)}
.pastilla.oscura{background:var(--negro);color:#fff;height:44px;font-size:18px;
  padding:3px 10px 0 16px;text-decoration:none}
.pastilla.oscura:hover{background:#000}
.vo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}


/* ---------- franja de credenciales ----------
   Va pegada al hero a proposito: dos de los doce competidores tienen la
   calificacion de soldadura y la esconden en el pie, y es el unico bloque de
   esa pantalla que hace seguir leyendo a un contratista general. Las cuatro
   redacciones son las legales exactas y no se tocan.
   Se lee como el cajetin de un plano: celdas separadas por filetes, sin
   vinetas ni iconos. El filete es la estructura; una vineta solo seria
   adorno repetido cuatro veces. */
.cred{position:relative;z-index:2;border-top:1px solid var(--linea-osc);
  border-bottom:1px solid var(--linea-osc);padding-block:clamp(13px,1.5vw,18px)}
/* mas angosta que el resto de la pagina y centrada: la franja es un pie de
   plano, no un titular, y asi la primera celda no queda pegada al borde */
.cred .w{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  max-width:1020px}
.cred div{min-width:0;padding-inline:clamp(12px,1.5vw,22px);
  border-left:1px solid var(--linea-osc)}
.cred div:first-child{border-left:0}
.cred b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(12.5px,1.02vw,14.5px);line-height:1.05;letter-spacing:.035em;
  margin-bottom:4px}
.cred span{display:block;font-size:10.5px;line-height:1.42;color:var(--gris-cl)}
@media (max-width:860px){
  .cred .w{grid-template-columns:1fr 1fr;row-gap:clamp(14px,2.2vw,20px)}
  .cred div:nth-child(odd){border-left:0}
}
@media (max-width:460px){
  .cred .w{grid-template-columns:1fr;row-gap:16px}
  .cred div{padding-inline:0;border-left:0}
}

/* ---------- las dos puertas ----------
   El bloque 3 de la arquitectura. Ningun competidor separa al dueno de casa
   del comprador por especificacion, y la ruta se elige aqui, no en el menu.
   No son dos tarjetas: son un solo marco partido por una linea de eje, como
   una hoja de plano. La particion ES la informacion, asi que no hace falta
   un antetitulo que anuncie que hay dos caminos — se ven. Tampoco llevan
   numero: 01 y 02 valen para el proceso, que si es una secuencia; esto es
   una bifurcacion y numerarla sugiere un orden que no existe. */
.puertas{position:relative;overflow:clip;padding-block:clamp(40px,5vw,70px)}
.puertas .w{position:relative;z-index:2}
/* Dos piezas separadas, no un bloque partido: unidas eran una sola mancha
   roja y no se leian como dos opciones. En reposo van en blanco; al elegir
   una, esa se vuelve roja y crece un punto. El texto es negro en los dos
   estados — negro sobre rojo da 4.77:1 y sirve a cualquier tamano, mientras
   que blanco sobre rojo da 4.40 y no alcanza para el parrafo de 14px. */
.marco{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,20px)}
.puerta{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(206px,20vw,262px);padding:clamp(22px,2.5vw,34px);
  text-decoration:none;color:var(--negro);background:var(--blanco);
  transition:background .26s var(--asienta),transform .26s var(--asienta);
  will-change:transform}
.puerta:hover{background:var(--rojo);transform:scale(1.028);
  box-shadow:0 18px 44px rgba(0,0,0,.55)}
.puerta:focus-visible{outline:2px solid var(--rojo);outline-offset:4px}
.puerta h2{margin:0 0 10px;max-width:none;font-size:clamp(26px,3.2vw,44px);
  line-height:.94;letter-spacing:.008em}
.puerta p{margin:0;font-size:14px;line-height:1.5;color:rgba(20,22,24,.8);max-width:38ch;
  transition:color .26s var(--asienta)}
.puerta:hover p{color:rgba(20,22,24,.88)}
.puerta .ir{display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:17px;
  letter-spacing:.05em;color:var(--rojo);transition:color .26s var(--asienta)}
.puerta:hover .ir{color:var(--negro)}
.puerta .ir svg{width:17px;height:12px;transition:transform .3s ease-in}
.puerta:hover .ir svg{transform:translateX(8px)}
@media (max-width:760px){
  .marco{grid-template-columns:1fr}
  .puerta:hover{transform:none}
}

/* ---------- muro de obra ----------
   Once huecos de tamanos distintos que cubren el ancho util sin dejar aire:
   una retícula de 6 columnas donde las piezas ocupan 2x2, 2x1, 1x2 o 1x1 y
   suman exactamente las 24 celdas. Las fotos no estan fijas a un hueco: hay
   18 y van rotando, una cada vez, con un fundido cruzado. Cada hueco lleva
   dos capas de imagen y se alternan, que es la unica forma de que el cambio
   no parpadee. */
.muro{position:relative;z-index:2;padding-block:clamp(26px,3.4vw,44px) clamp(18px,2.2vw,28px);
  padding-left:max(var(--gx),env(safe-area-inset-left,0px));
  padding-right:max(var(--gx),env(safe-area-inset-right,0px))}
.rejilla-obra{display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(100px,11.4vw,176px);gap:clamp(6px,.72vw,11px)}
.pieza{position:relative;overflow:hidden;background:var(--negro-2);
  border:1px solid var(--linea-osc)}
.pieza img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s linear}
.pieza img.on{opacity:1}
/* el reparto: 2x2 · 1x1 · 1x1 · 2x2 · 2x1 · 1x2 · 2x2 · 1x1 · 2x1 · 1x1 · 2x1 */
.pieza:nth-child(1){grid-column:span 2;grid-row:span 2}
.pieza:nth-child(4){grid-column:span 2;grid-row:span 2}
.pieza:nth-child(5){grid-column:span 2}
.pieza:nth-child(6){grid-row:span 2}
.pieza:nth-child(7){grid-column:span 2;grid-row:span 2}
.pieza:nth-child(9){grid-column:span 2}
.pieza:nth-child(11){grid-column:span 2}
@media (max-width:760px){
  .rejilla-obra{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(92px,23vw,132px)}
  .pieza:nth-child(n){grid-column:auto;grid-row:auto}
  .pieza:nth-child(1),.pieza:nth-child(7){grid-column:span 2;grid-row:span 2}
  .pieza:nth-child(4),.pieza:nth-child(9){grid-column:span 2}
}
@media (prefers-reduced-motion:reduce){ .pieza img{transition:none} }

/* ---------- "What we do": cinco piezas, quietas, de borde a borde ----------
   Nada se mueve solo. La fila ocupa el ancho util de la pagina y las cinco
   reparten ese ancho por igual; la que recibe el cursor se adelanta — sube,
   crece un punto y proyecta sombra — y las otras cuatro se atenuan, que es lo
   que hace legible cual esta al frente. La animacion es corta (.26s) y sucede
   solo como respuesta al cursor.
   Se abandona el truco de 100vw: con barra de desplazamiento visible, 100vw
   es mas ancho que la pagina y la fila quedaba recortada por la izquierda. */
.hacemos{position:relative;overflow:clip;padding-block:clamp(60px,7.5vw,104px)}
.hacemos > .w{position:relative;z-index:2}
.hacemos .cab{text-align:center;max-width:40ch;margin:0 auto clamp(12px,1.6vw,22px)}
/* el h2 global lleva max-width:17ch; sin margen automatico un titulo corto
   queda pegado a la izquierda de su propia caja y se ve descentrado */
.hacemos h2{margin:0 auto;color:#fff}
.hacemos .nota{margin:14px auto 0;max-width:46ch;font-size:15px;color:var(--gris-cl)}

.fila-obra{position:relative;z-index:2;display:grid;
  grid-template-columns:repeat(5,1fr);gap:clamp(8px,1vw,16px);
  margin-top:clamp(26px,3.4vw,46px);
  padding-left:max(var(--gx),env(safe-area-inset-left,0px));
  padding-right:max(var(--gx),env(safe-area-inset-right,0px))}
/* blancas y opacas: sobre el negro de la pagina cada tarjeta es un objeto,
   no un velo. Al pasar el cursor la elegida se vuelve roja — el rojo de marca
   lleva tinta negra, que sobre el rojo da 4.68:1 y sobre el blanco 18:1, asi
   que el texto no cambia de color al pasar de un estado al otro. */
.tk{position:relative;display:block;text-decoration:none;color:var(--negro);min-width:0;
  background:var(--blanco);border:1px solid var(--blanco);
  padding:10px 10px 16px;
  transition:transform .26s var(--asienta),box-shadow .26s var(--asienta),
             opacity .26s linear,border-color .26s linear,background .26s linear;
  will-change:transform}
.tk figure{margin:0;overflow:hidden;aspect-ratio:2/3;background:var(--negro-2)}
.tk figure img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s var(--asienta)}
.tk b{display:block;margin-top:13px;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:clamp(16px,1.5vw,22px);line-height:.98}
.tk span{display:block;margin-top:5px;font-size:12.5px;line-height:1.45;color:#43484D}
/* al pasar el cursor por la fila, la elegida se adelanta y el resto cede */
.fila-obra:hover .tk{opacity:.5}
.fila-obra .tk:hover{opacity:1;transform:translateY(-12px) scale(1.022);
  background:var(--rojo);border-color:var(--rojo);
  box-shadow:0 26px 54px rgba(0,0,0,.6)}
.fila-obra .tk:hover span{color:var(--negro)}
.fila-obra .tk:hover figure img{transform:scale(1.05)}
.tk:focus-visible{outline:3px solid var(--rojo);outline-offset:3px;opacity:1}

@media (max-width:980px){
  .fila-obra{grid-template-columns:repeat(3,1fr)}
  .fila-obra .tk:nth-child(n+4) figure{aspect-ratio:3/2}
}
@media (max-width:640px){
  .fila-obra{grid-template-columns:1fr 1fr;gap:10px}
  .fila-obra .tk:nth-child(n+4) figure{aspect-ratio:2/3}
}
@media (prefers-reduced-motion:reduce){
  .fila-obra:hover .tk{opacity:1}
  .fila-obra .tk:hover{transform:none}
}

/* ---------- panel blanco montado ---------- */
.panel{position:relative;z-index:3;background:var(--blanco);color:var(--negro);
  margin:0 clamp(0px,1.6vw,18px);padding-block:clamp(74px,9vw,122px)}
.panel .cj{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--rojo);margin:0 0 14px;display:flex;align-items:center;gap:11px}
.panel .cj i{width:26px;height:2px;background:var(--rojo)}
h2{margin:0 0 18px;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(34px,5.2vw,74px);line-height:.92;letter-spacing:.006em;max-width:17ch}
.panel .intro{margin:0 0 54px;max-width:62ch;font-size:17px;color:var(--gris)}

/* ---- proceso: columna izquierda fija, tarjetas a la derecha ----
   Calcado de la referencia: contenedor flex alineado arriba, la columna de la
   izquierda en position:sticky con el titular y los numeros, y a la derecha las
   cinco tarjetas apiladas, todas visibles. El numero activo se enciende segun
   que tarjeta estas leyendo, y al pulsarlo la pagina va a esa tarjeta.
   Detalle que vale la pena robar: el numero inactivo es una pildora y el activo
   se vuelve un cuadrado. */
/* La columna izquierda se estira hasta el alto de las tarjetas: sin eso el
   aside mide lo que mide su contenido y el sticky no tiene por donde viajar,
   asi que se suelta en la primera tarjeta. Estirado, queda fijo hasta la quinta. */
.proc{display:flex;align-items:stretch;gap:clamp(30px,4.2vw,56px)}
.proc-izq{flex:0 0 clamp(290px,31%,420px);min-width:0}
.proc-fijo{position:sticky;top:calc(170px + var(--sube))}
.proc-der{flex:1 1 0;min-width:0}

.pasos{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.pnum{font-family:var(--texto);font-variant-numeric:tabular-nums;font-size:14px;
  font-weight:700;letter-spacing:.04em;background:transparent;color:var(--negro);
  border:1px solid var(--negro);border-radius:999px;padding:12px 16px;cursor:pointer;
  transition:background-color .15s ease-out,border-radius .15s ease-out,color .15s ease-out}
.pnum:hover{background:rgba(20,22,24,.07)}
.pnum[aria-selected="true"]{background:var(--rojo);border-color:var(--rojo);
  color:var(--negro);border-radius:0}
.pnum:focus-visible{outline:2px solid var(--negro);outline-offset:3px}

/* ---- las tarjetas se apilan ----
   Medido en la referencia: cada tarjeta es position:sticky con un top 97px
   mayor que la anterior (90, 187, 284, 381, 478) y fondo opaco. Al pegarse,
   tapa el cuerpo de la de arriba y solo deja ver su cabecera, que mide
   justamente ese escalon. Al final quedan las cinco cabeceras apiladas.
   No hay una sola linea de JavaScript en esto. */
.tpaso{position:sticky;background:var(--blanco);
  padding-bottom:clamp(54px,6vw,86px);scroll-margin-top:160px}
/* cada tarjeta se clava 86px mas abajo que la anterior — la altura exacta de
   la fila de cabecera — que es lo que deja ver solo los titulos apilados.
   El juego entero arranca 56px mas abajo que antes. */
.tpaso:nth-child(1){top:calc(170px + var(--sube))}
.tpaso:nth-child(2){top:calc(256px + var(--sube))}
.tpaso:nth-child(3){top:calc(342px + var(--sube))}
.tpaso:nth-child(4){top:calc(428px + var(--sube))}
.tpaso:nth-child(5){top:calc(514px + var(--sube))}
.tpaso:last-child{padding-bottom:0}
.tcab{display:flex;align-items:center;gap:15px;height:86px;
  border-top:1px solid var(--negro);margin-bottom:18px}
/* El numero va en campo rojo con tinta negra (4.77:1) y el titulo en rojo
   sobre blanco (3.88:1, valido porque es negrita por encima de 18.66px). */
.tn{flex:none;width:42px;height:42px;display:grid;place-items:center;
  background:var(--rojo);color:var(--negro);
  font-family:var(--display);font-weight:700;font-size:22px;
  line-height:1;padding-top:3px;font-variant-numeric:tabular-nums}
.tpaso h3{margin:0;color:var(--rojo);
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,2.8vw,38px);line-height:.98}
.tpaso p{margin:0 0 20px;font-size:16px;color:var(--gris);max-width:50ch}
.plazo{display:inline-flex;align-items:baseline;gap:10px;border-top:2px solid var(--negro);
  padding-top:11px;margin-bottom:0}
.plazo b{font-family:var(--display);font-weight:700;font-size:38px;line-height:.82;
  font-variant-numeric:tabular-nums}
.plazo span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--gris)}
@media (max-width:900px){
  .proc{flex-direction:column;gap:30px}
  .proc-izq{flex:none;width:100%}
  .proc-fijo{position:static}
  .pasos{margin-top:22px}
  /* el apilado se conserva en movil — es la seccion, no un adorno de
     escritorio. Solo cambia la medida: la cabecera baja a 64px y cada
     tarjeta se clava 64px mas abajo que la anterior, el mismo numero,
     que es lo que deja ver los titulos apilados y nada mas. */
  .tcab{height:64px;padding-block:0;gap:12px}
  .tn{width:34px;height:34px;font-size:15px}
  .tpaso h3{font-size:25px}
  /* el titulo de la seccion se queda pegado arriba y las tarjetas se clavan
     justo debajo: --cab es su altura real, medida en vivo, no adivinada */
  .proc{gap:16px}
  /* por debajo de la cabecera, no detras de ella */
  .proc-izq{position:sticky;top:calc(var(--sube) + var(--altoCab,72px));
    z-index:5;background:var(--blanco);padding-block:12px 10px}
  .proc-fijo{position:static}
  .proc-izq h2{font-size:27px}
  .pasos{display:none}
  .tpaso{scroll-margin-top:calc(var(--cab,150px) + 14px);
    padding-bottom:clamp(38px,7vw,58px)}
  .tpaso:nth-child(1){top:calc(var(--cab,150px) + var(--sube) + var(--altoCab,72px))}
  .tpaso:nth-child(2){top:calc(var(--cab,150px) + var(--sube) + var(--altoCab,72px) + 64px)}
  .tpaso:nth-child(3){top:calc(var(--cab,150px) + var(--sube) + var(--altoCab,72px) + 128px)}
  .tpaso:nth-child(4){top:calc(var(--cab,150px) + var(--sube) + var(--altoCab,72px) + 192px)}
  .tpaso:nth-child(5){top:calc(var(--cab,150px) + var(--sube) + var(--altoCab,72px) + 256px)}
}

/* materiales */
.mats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(70px,8vw,110px)}
.mat{position:relative;overflow:hidden;min-height:clamp(230px,27vw,330px);background:var(--negro);
  display:flex;align-items:flex-end}
.mat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mat .tap{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,24,0) 36%,
  rgba(20,22,24,.86) 100%)}
.mat .et{position:relative;z-index:2;padding:18px;color:#fff}
.mat .et b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:30px;line-height:.9;margin-bottom:5px}
.mat .et span{font-size:12px;color:var(--tinta-cl);line-height:1.45;display:block}
.mat.rojo{background:var(--rojo);align-items:stretch}
.mat.rojo .et{color:var(--negro);display:flex;flex-direction:column;justify-content:space-between;
  width:100%}
.mat.rojo .et b{font-size:clamp(30px,3.4vw,42px)}
.mat.rojo .et span{color:rgba(20,22,24,.82);font-weight:500}
.mat.rojo .top{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  margin-bottom:auto}

/* ---------- pruebas ---------- */
.pruebas{position:relative;overflow:clip;background:var(--negro);
  padding-block:clamp(78px,9vw,126px)}
.pruebas .rej{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea-osc);
  border:1px solid var(--linea-osc)}
.dato{background:var(--negro);padding:26px 22px 28px;min-width:0}
.dato b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(44px,5.4vw,74px);
  line-height:.84;color:var(--rojo);font-variant-numeric:tabular-nums;margin-bottom:12px}
.dato strong{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;margin-bottom:7px}
.dato span{font-size:13.5px;line-height:1.55;color:var(--gris-cl)}

/* ---------- cierre ---------- */
.cierre{position:relative;overflow:clip;border-top:1px solid var(--linea-osc);
  padding-block:clamp(86px,10vw,142px)}
.cierre .w{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;
  align-items:center}
.cierre h2{margin-inline:auto;text-align:center;max-width:15ch}
.cierre .acc{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:10px}
@media (max-width:560px){
  /* "Call the shop · (437) 221-8183" mide 416px de una tirada: aqui se parte */
  .cierre .acc{flex-direction:column;align-items:stretch;width:100%}
  .btn{width:100%;white-space:normal;height:auto;min-height:52px;
    padding:15px 18px 12px;line-height:1.05;text-align:center}
}
footer{border-top:1px solid var(--linea-osc);padding-block:28px;font-size:12.5px;
  color:var(--gris-cl)}
footer .w{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* redes, abajo a la derecha. Van con la voz del logotipo — Teko en caja alta —
   y no con iconos de marca ajena: los archivos oficiales de cada plataforma se
   descargan de su pagina de marca y se colocan aqui cuando esten. */
.redes{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.redes a{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:17px;line-height:1;letter-spacing:.05em;color:#9AA1A7;
  text-decoration:none;padding:14px 15px 12px;border-radius:999px;
  border:1px solid var(--linea-osc);
  transition:color .16s linear,border-color .16s linear,background .16s linear}
.redes a:hover{color:#fff;background:var(--rojo);border-color:var(--rojo)}
.redes a:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}
@media (max-width:620px){
  footer .w{justify-content:flex-start}
  .redes{margin-left:0;width:100%}
}

@media (max-width:1080px){
  .mats{grid-template-columns:1fr 1fr}
  .pruebas .rej{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .campos{grid-template-columns:1fr 1fr}
  .campos .btn{grid-column:1/-1;justify-content:center}
  .hoja{grid-template-columns:1fr}
}
@media (max-width:620px){
  .campos{grid-template-columns:1fr}
  .mats{grid-template-columns:1fr}
  .pruebas .rej{grid-template-columns:1fr}
  nav{gap:14px}
  nav a{font-size:12.5px}
}
/* ---------- motor de parallax ---------- */
[data-px],[data-pxx]{will-change:transform}
.lamina img,.mat img{height:122%;top:-11%;bottom:auto}
.reticula{height:156%;top:-28%}
.marquesina{position:relative;overflow:hidden;padding-block:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.pista{display:flex;align-items:center;gap:14px;width:max-content}
.marquesina .chip{white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .pista{transform:none!important}
  .ent{opacity:1!important;transform:none!important}
  [data-px],[data-pxx]{transform:none!important}
  .lamina img,.mat img{height:100%;top:0}
  .reticula{height:100%;top:0}
}

/* enlaces legales del pie, a la izquierda de las redes */
.legales{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.legales a{font-size:12.5px;color:var(--gris-cl);text-decoration:none;
  border-bottom:1px solid transparent;padding-block:4px;
  transition:color .16s linear,border-color .16s linear}
.legales a:hover{color:#fff;border-bottom-color:var(--rojo)}
.legales a:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}

/* ---------- reseñas ----------
   De borde a borde, como la fila de What we do, no dentro de la caja de 1280.
   Arriba el grupo de avatares y la nota; debajo tres tarjetas blancas con la
   reseña entera. Las estrellas van en el rojo de la marca y no en el ambar de
   costumbre: esta pagina tiene un solo acento y meter un segundo color por
   cinco estrellas lo rompe.
   Los circulos llevan la inicial, no una cara: no tenemos foto de quien
   escribio, e inventarla seria falsificar la reseña. Google hace lo mismo. */
.resenas{position:relative;overflow:clip;border-top:1px solid var(--linea-osc);
  padding-block:clamp(54px,6.6vw,96px);
  padding-left:max(var(--gx),env(safe-area-inset-left,0px));
  padding-right:max(var(--gx),env(safe-area-inset-right,0px))}

.nota-res{display:flex;flex-direction:column;align-items:center;text-align:center;
  margin-bottom:clamp(32px,4vw,56px)}
.caras{display:flex;margin-bottom:16px}
.caras span{width:clamp(40px,3.4vw,48px);height:clamp(40px,3.4vw,48px);border-radius:999px;
  display:grid;place-items:center;font-family:var(--display);font-weight:700;
  font-size:clamp(19px,1.5vw,22px);line-height:1;color:#fff;
  border:2px solid var(--negro);margin-left:-13px;letter-spacing:.02em}
.caras span:first-child{margin-left:0}
.caras span:nth-child(1){background:#3A4047}
.caras span:nth-child(2){background:#5A3034}
.caras span:nth-child(3){background:#2F3C46}
.caras span:nth-child(4){background:#4A3A2C}
.caras span:nth-child(5){background:var(--rojo-osc)}

.estrellas{display:flex;gap:4px}
.estrellas svg{width:clamp(20px,1.7vw,25px);height:auto;fill:var(--rojo);display:block}
.estrellas.chica svg{width:16px}

.nota-res strong{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(70px,9.4vw,136px);line-height:.8;color:#fff;
  font-variant-numeric:tabular-nums;margin:14px 0 10px}
.nota-res .pie{margin:0;font-size:13.5px;line-height:1.55;color:var(--gris-cl);max-width:46ch}
.nota-res .pie a{color:#fff;text-decoration:none;border-bottom:1px solid var(--rojo);
  padding-bottom:1px}
.nota-res .pie a:hover{color:var(--rojo)}

/* las tres, superpuestas: la del centro adelante y las de los lados metidas
   debajo y un poco mas abajo, como en la referencia. El resplandor rojo detras
   es lo unico que ilumina el negro en toda la pagina, asi que se queda corto a
   proposito: marca el grupo, no lo decora. */
.escena{position:relative;display:flex;justify-content:center;align-items:flex-start;
  gap:14px;--meter:clamp(26px,3.2vw,52px)}
/* el resplandor sale por encima y por los lados del grupo, no debajo de el */
.escena::before{content:"";position:absolute;left:50%;top:46%;translate:-50% -50%;
  width:min(1120px,100%);aspect-ratio:2.1/1;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(245,51,58,.42),rgba(245,51,58,.15) 54%,transparent 76%);
  filter:blur(26px)}

.res{position:relative;background:var(--blanco);color:var(--negro);
  padding:clamp(22px,2.1vw,30px);display:flex;flex-direction:column;
  width:clamp(260px,28vw,400px);min-width:0;border-radius:4px}
/* las laterales se meten bajo la central por una franja igual a --meter, y se
   les anade esa misma franja de relleno: asi lo que queda tapado es aire y no
   las palabras de nadie */
.res:nth-child(1){z-index:1;padding-right:calc(clamp(22px,2.1vw,30px) + var(--meter));
  transform:translate(calc(var(--meter) + 14px),clamp(22px,2.4vw,36px)) scale(.95);
  box-shadow:0 18px 40px rgba(0,0,0,.5);filter:brightness(.9)}
.res:nth-child(2){z-index:3;box-shadow:0 34px 72px rgba(0,0,0,.66)}
.res:nth-child(3){z-index:1;padding-left:calc(clamp(22px,2.1vw,30px) + var(--meter));
  transform:translate(calc(-1 * (var(--meter) + 14px)),clamp(22px,2.4vw,36px)) scale(.95);
  box-shadow:0 18px 40px rgba(0,0,0,.5);filter:brightness(.9)}

.res blockquote{margin:16px 0 0;font-size:clamp(15.5px,1.3vw,18px);line-height:1.52;
  color:var(--negro);flex:1}
.res footer{display:flex;align-items:center;gap:11px;margin-top:clamp(20px,2vw,28px);
  padding-top:16px;border-top:1px solid var(--linea)}
.res footer i{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;
  font-style:normal;font-family:var(--display);font-weight:700;font-size:18px;line-height:1;
  color:#fff;background:#3A4047;flex:none}
.res footer b{display:block;font-size:14px;font-weight:700;line-height:1.2}
.res footer span{display:block;font-size:12px;color:var(--gris);margin-top:2px}

@media (max-width:860px){
  .escena{flex-direction:column;align-items:stretch;gap:14px}
  .escena::before{display:none}
  .res{width:auto}
  .res:nth-child(1),.res:nth-child(2),.res:nth-child(3){
    transform:none;filter:none;box-shadow:0 14px 30px rgba(0,0,0,.45)}
  .res blockquote{flex:none}
}
}