/* ============ EXMACHINA LATINO AMERICA ============ */
/* WOFF2 first: the raw .otf trials are rejected by some browsers (the .ttf Jabin
   loaded fine while every .otf silently fell back to a system rounded face). */
@font-face{font-family:'Dapper';src:url('../fonts/NTDapperTrial-Regular.woff2') format('woff2'),url('../fonts/NTDapperTrial-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Dapper';src:url('../fonts/NTDapperTrial-Medium.woff2') format('woff2'),url('../fonts/NTDapperTrial-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Dapper';src:url('../fonts/NTDapperTrial-Bold.woff2') format('woff2'),url('../fonts/NTDapperTrial-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'Dapper';src:url('../fonts/NTDapperTrial-Black.woff2') format('woff2'),url('../fonts/NTDapperTrial-Black.otf') format('opentype');font-weight:900;font-display:block}
@font-face{font-family:'Neureal';src:url('../fonts/OONeurealTrial-SemiMono.woff2') format('woff2'),url('../fonts/OONeurealTrial-SemiMono.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'NeurealMono';src:url('../fonts/OONeurealTrial-Mono.woff2') format('woff2'),url('../fonts/OONeurealTrial-Mono.otf') format('opentype');font-weight:400;font-display:swap}
/* Decima Mono Pro: la voz del hero nuevo. Metricas leidas del propio archivo —
   unitsPerEm 1000, caja alta 700 (0.700em), avance mono 600 (0.600em)— que son
   las que dejan resolver el tamano exacto de la lamina en vez de tantearlo. */
@font-face{font-family:'Decima';src:url('../fonts/DecimaMonoPro-Regular.woff2') format('woff2'),url('../fonts/DecimaMonoPro-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Jabin';src:url('../fonts/Jabin-BoldSwash2.woff2') format('woff2'),url('../fonts/Jabin-BoldSwash2.ttf') format('truetype');font-weight:700;font-display:block}

:root{
  /* La paleta de marca. Estos NO cambian con el tema: son la identidad. */
  --tinta:#100303;
  --oxblood:#1E0606;
  --rojo:#2E0909;
  --naranja:#FF3700;
  --gris:#B4B1B1;
  --blanco:#FFFFFF;
  --crema:#EDE7E1;
  --cyan:#4FC8F2;
  --teal:#2E5D4B;
  --sage:#A9C3B4;

  /* Los que SÍ cambian con el tema. Son ROLES, no colores: el resto de la hoja
     nunca pregunta en qué tema está.
     La idea que ordena todo: en claro la tarjeta es MÁS OSCURA que la página; en
     oscuro tiene que ser MÁS CLARA. Si se invierte la página pero no la relación
     figura/fondo, las tarjetas desaparecen y la página se vuelve una sola mancha
     — que es exactamente lo que pasaba. Por eso hay tres planos, no uno. */
  --fondo:var(--blanco);          /* plano 0 — la página */
  --panel:var(--oxblood);         /* plano 1 — tarjetas sobre la página */
  --panel-2:#1A0505;              /* plano 2 — bloques elevados */
  --panel-texto:var(--crema);
  --texto:var(--rojo);
  --texto-tenue:#6A4B4B;
  --linea:rgba(46,9,9,.12);
  --tarjeta:#F4F4F3;              /* piezas del carrusel de logos */
  --pie:var(--naranja);           /* el pie es la firma de la marca */
  --pie-texto:var(--rojo);
  /* plano 3 — el menú, por encima de todo. Sigue la misma regla que el resto:
     el panel va CONTRA la página. En claro es tinta sobre página clara; en
     oscuro se invierte y es una hoja crema sobre página oscura. Si se quedara
     oscuro sobre oscuro, el menú deja de ser un plano y se vuelve una mancha
     más — que es como estaba. */
  --flyout:var(--tinta);
  --flyout-texto:var(--crema);
  --flyout-texto-2:rgba(237,231,225,.70);
  --flyout-texto-3:rgba(237,231,225,.50);
  --flyout-chip:rgba(237,231,225,.10);
  --flyout-filo-2:rgba(237,231,225,.20);
  --flyout-filo:transparent;
  --flyout-sombra:rgba(16,3,3,.45);
  --flyout-velo:transparent;     /* en claro el panel ya contrasta 20:1, no hace falta */
  --texto-fuerte:var(--tinta);    /* el negro de marca sobre la página clara */
  --fantasma:.13;                 /* opacidad de los números gigantes */
  --wrap:min(92vw,1360px);
  --r-lg:28px;
  --r-md:18px;
  --dur:.75s;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- TEMA OSCURO ----------
   La paleta de marca no se toca: el naranja sigue siendo el mismo naranja y no
   hay dos identidades. Lo que cambia son los planos.
   El suelo baja por debajo de Tinta para que Tinta y Oxblood queden disponibles
   COMO planos elevados: así se conserva el ritmo de la página en claro (fondo,
   tarjeta, bloque) en vez de aplanarlo todo en un mismo negro. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ color-scheme:dark;
    --fondo:#0A0202;
    --panel:#200808;
    --panel-2:#260A0A;
    --panel-texto:var(--crema);
    --texto:var(--crema);
    --texto-tenue:#B49A96;
    --linea:rgba(237,231,225,.10);
    --tarjeta:#1F0808;
    --pie:#EA3400;   /* 4.61:1 con la tinta del pie; #E03000 tocaba techo en 4.37 */
    --pie-texto:#1A0404;
    --texto-fuerte:#FFFFFF;
    --fantasma:.20;
    --flyout:var(--crema);
    --flyout-texto:var(--tinta);
    --flyout-texto-2:rgba(16,3,3,.78);
    --flyout-texto-3:rgba(16,3,3,.56);
    --flyout-chip:rgba(16,3,3,.07);
    --flyout-filo-2:rgba(16,3,3,.18);
    --flyout-filo:rgba(16,3,3,.10);
    --flyout-sombra:rgba(0,0,0,.75);
    --flyout-velo:rgba(4,1,1,.86);
  }
}
:root[data-theme="dark"]{ color-scheme:dark;
  --fondo:#0A0202;
  --panel:#200808;
  --panel-2:#260A0A;
  --panel-texto:var(--crema);
  --texto:var(--crema);
  --texto-tenue:#B49A96;
  --linea:rgba(237,231,225,.10);
  --tarjeta:#1F0808;
  --pie:#EA3400;     /* 4.61:1 con la tinta del pie; #E03000 tocaba techo en 4.37 */
  --pie-texto:#1A0404;
  --texto-fuerte:#FFFFFF;
  --fantasma:.20;
  --flyout:var(--crema);
  --flyout-texto:var(--tinta);
  --flyout-texto-2:rgba(16,3,3,.78);
  --flyout-texto-3:rgba(16,3,3,.56);
  --flyout-chip:rgba(16,3,3,.07);
  --flyout-filo-2:rgba(16,3,3,.18);
  --flyout-filo:rgba(16,3,3,.10);
  --flyout-sombra:rgba(0,0,0,.75);
  --flyout-velo:rgba(4,1,1,.86);
}
/* en oscuro los planos están cerca en valor, así que un filo tenue los separa
   sin tener que subir el contraste y ensuciar la paleta */
:root[data-theme="dark"] .oport-card,
:root[data-theme="dark"] .equipo-card,
:root[data-theme="dark"] .mq-item{border:1px solid rgba(237,231,225,.07)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .oport-card,
  :root:not([data-theme="light"]) .equipo-card,
  :root:not([data-theme="light"]) .mq-item{border:1px solid rgba(237,231,225,.07)}
}
/* el cambio se acompaña, pero sin dejar transiciones puestas en todo el árbol */
:root.tema-cambiando body,
:root.tema-cambiando body *{transition:background-color .32s ease,color .32s ease,border-color .32s ease !important}

/* El atributo hidden tiene que ganar SIEMPRE. Sin este !important, cualquier
   `display` puesto por el autor le gana a la regla [hidden] del navegador —que es
   de la hoja de agente de usuario y pierde por especificidad de origen—. Medido:
   el botón "Atrás" del formulario tenía hidden=true, display:flex y 74px de ancho
   real en el paso 1, o sea que se veía y se podía picar un "Atrás" que no lleva a
   ningún lado. Le pasaba a los seis elementos del sitio que usan el atributo:
   #fq-atras, .fq-error, #fq-listo, #fq-cal, #fq-tel y ul.lemas. */
[hidden]{display:none !important}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html.lenis{scroll-behavior:auto}
body{
  font-family:'Dapper','Helvetica Neue',Helvetica,Arial,sans-serif;
  background:var(--fondo);
  color:var(--texto);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
::selection{background:var(--naranja);color:var(--blanco)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.wrap{width:var(--wrap);margin-inline:auto}
.mono{font-family:'NeurealMono','Courier New',monospace}
.jabin{font-family:'Jabin','Times New Roman',serif;font-weight:700}
/* display caps = NT Dapper Black, tracked tight like the mockup */
.u-font{font-family:'Dapper','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.032em;line-height:.94}
.c-naranja{color:var(--naranja)}
.c-blanco{color:var(--blanco)}
/* el tono más fuerte del texto SOBRE EL FONDO DE PÁGINA. Tiene que seguir al
   tema: fijándolo en Tinta, en oscuro quedaba café sobre café — el "SOMOS" del
   lockup desaparecía por completo. */
.c-tinta{color:var(--texto-fuerte)}
.plus{width:1em;height:1em;display:inline-block;vertical-align:-.12em;color:var(--naranja)}

/* accent overlay: NT Dapper Trial has no ÁÉÍÓÚ glyphs (Ñ is fine) */
.dx{position:relative;display:inline-block}
.dx i{position:absolute;left:52%;top:-.30em;transform:translateX(-50%);font-family:'Dapper','Helvetica Neue',Helvetica,Arial,sans-serif;font-style:normal;font-size:.62em;line-height:1;letter-spacing:0}
.nb{white-space:nowrap}

/* ---------- LOADER ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--tinta);display:grid;place-items:center;animation:loaderAuto .65s var(--ease) 4.4s forwards}
.loader.is-done{animation:loaderOut .65s var(--ease) forwards}
@keyframes loaderOut{to{transform:translateY(-100%);}}
@keyframes loaderAuto{to{transform:translateY(-100%);visibility:hidden}}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:28px;width:min(64vw,540px)}
/* El cromado abre la pagina. Ocupa casi todo el ancho —es una pieza que sangra
   por diseno— y entra con un fundido y un acercamiento minimos: el brillo del
   metal ya es el movimiento, no hace falta agregarle mas. */
.loader-inner:has(.loader-cromo){width:min(86vw,1180px);gap:clamp(26px,4vh,54px)}
.loader-cromo{display:block;width:100%}
.loader-cromo img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 18px 46px rgba(0,0,0,.5));
  opacity:0;transform:scale(1.045);
  animation:cromoIn 1.15s cubic-bezier(.22,.7,.25,1) .12s forwards}
@keyframes cromoIn{to{opacity:1;transform:scale(1)}}
@media (max-width:767px){.loader-inner:has(.loader-cromo){width:86vw}}
@media (prefers-reduced-motion:reduce){
  .loader-cromo img{animation:none;opacity:1;transform:none}
}
.loader-plus{width:54px;height:54px;color:var(--naranja);animation:spin 2.4s linear infinite}
/* Bajo el cromado el signo tiene que ser una señal de que algo carga, no una
   pieza más: la mitad de grande y sin gritar. */
.loader-inner:has(.loader-cromo) .loader-plus{width:26px;height:26px;opacity:.55}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-word{width:100%;fill:var(--naranja);opacity:0;animation:fadeUp .8s var(--ease) .15s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- HEADER / NAV ---------- */
.hdr{position:absolute;top:0;left:0;right:0;z-index:101;padding:26px clamp(18px,3.2vw,46px);pointer-events:none}
.brand{display:flex;align-items:flex-end;gap:14px;pointer-events:auto;width:fit-content;padding:8px 0}
.brand-word{height:clamp(17px,1.6vw,23px);width:auto;fill:var(--naranja);color:var(--naranja)}
.brand-word use[href="#lgPlus"]{stroke:var(--naranja)}
.brand-script{height:clamp(22px,2.1vw,30px);width:auto;fill:var(--crema)}
#lgPlus{stroke:currentColor}

/* ---------- CONTROLES DE CABECERA: idioma y tema ----------
   Viven sobre la fotografía del hero, así que van en blanco y no dependen del
   tema. La cabecera es `absolute`, no `fixed`: sólo existe encima del hero. */
.hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.hdr-tools{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);pointer-events:auto}
.lang{display:flex;align-items:center;gap:10px;
  font-family:'Neureal','Courier New',monospace;font-size:13px;letter-spacing:.1em}
.lang-b{border:0;background:none;padding:4px 2px;cursor:pointer;color:rgba(255,255,255,.5);
  font:inherit;letter-spacing:inherit;transition:color .28s var(--ease)}
.lang-b:hover{color:rgba(255,255,255,.85)}
.lang-b.is-on{color:var(--blanco)}
.lang-sep{width:1px;height:11px;background:rgba(255,255,255,.3)}
/* Interruptor de dos posiciones, no un botón con etiqueta. Antes decía "MODO
   CLARO" y esa frase es ambigua: no se sabe si describe dónde estás o a dónde te
   lleva. Con dos posiciones visibles y una marcada, el estado se lee de un
   vistazo y el destino también — no hay nada que interpretar. */
.tema{position:relative;display:flex;align-items:center;gap:2px;padding:3px;
  border:1px solid rgba(255,255,255,.20);border-radius:999px;
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
/* la pastilla que marca la posición activa se DESLIZA, no aparece: el movimiento
   es lo que comunica que son dos estados de una misma cosa */
.tema::before{content:'';position:absolute;top:3px;left:3px;width:28px;height:28px;
  border-radius:999px;background:rgba(255,255,255,.92);
  transition:transform .34s var(--dock-ease);z-index:0}
:root[data-theme="dark"] .tema::before{transform:translateX(30px)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tema::before{transform:translateX(30px)}
}
.tema-b{position:relative;z-index:1;width:28px;height:28px;display:grid;place-items:center;
  border:0;background:none;padding:0;cursor:pointer;color:rgba(255,255,255,.62);
  transition:color .3s var(--ease)}
.tema-b svg{width:15px;height:15px;display:block}
.tema-b:hover{color:rgba(255,255,255,.9)}
/* el icono que queda sobre la pastilla se pinta oscuro, para leerse contra ella */
:root:not([data-theme="dark"]) .tema-b[data-tema="light"],
:root[data-theme="light"] .tema-b[data-tema="light"]{color:var(--tinta)}
:root[data-theme="dark"] .tema-b[data-tema="dark"]{color:var(--tinta)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tema-b[data-tema="light"]{color:rgba(255,255,255,.62)}
  :root:not([data-theme="light"]) .tema-b[data-tema="dark"]{color:var(--tinta)}
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* los mismos controles dentro del modal, donde el fondo ya es tinta */
.dock-menu-tools{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.dock-menu-tools .lang-b{color:var(--flyout-texto-3)}
.dock-menu-tools .lang-b.is-on{color:var(--flyout-texto)}
.dock-menu-tools .lang-sep{background:var(--flyout-texto-3)}
/* Dentro del panel el interruptor se re-tinta entero. La pastilla que se desliza
   es blanca porque nació sobre el hero oscuro; sobre una hoja crema desaparece.
   Aquí toma la tinta del panel, y el icono que queda encima toma su fondo. */
.dock-menu-tools .tema{border-color:var(--flyout-filo-2);background:var(--flyout-chip)}
.dock-menu-tools .tema::before{background:var(--flyout-texto)}
.dock-menu-tools .tema-b{color:var(--flyout-texto-3)}
.dock-menu-tools .tema-b:hover{color:var(--flyout-texto)}
:root[data-theme="dark"] .dock-menu-tools .tema-b[data-tema="dark"],
:root[data-theme="light"] .dock-menu-tools .tema-b[data-tema="light"],
:root:not([data-theme="dark"]) .dock-menu-tools .tema-b[data-tema="light"]{color:var(--flyout)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dock-menu-tools .tema-b[data-tema="light"]{color:var(--flyout-texto-3)}
  :root:not([data-theme="light"]) .dock-menu-tools .tema-b[data-tema="dark"]{color:var(--flyout)}
}
@media (max-width:767px){
  /* en móvil la cabecera se queda con el logo solo, como el mockup; los controles
     viven en el modal, que en móvil es donde se navega */
  .hdr-tools{display:none}
}

/* ---------- DOCK NAV (Brand Appart structure, ExMachina glass) ----------
   Measured off the reference: 57px buttons, 10.67px radius, 7.11px gap, the
   dock-style hover (5em on the hovered item, 4.5em on each neighbour) and the
   .36/.33/0/1 easing. Vertical rail on desktop, floating glass bar on mobile. */
:root{--dock-ease:cubic-bezier(.36,.33,0,1)}
.dock-group{display:contents}
.dock{
  position:fixed;left:clamp(14px,1.9vw,28px);top:0;bottom:0;height:fit-content;margin:auto 0;
  z-index:100;display:flex;flex-direction:column;gap:7.11px;
  /* flex-start, not the default stretch: stretch forces every button to the
     container width and the dock growth would be silently ignored */
  align-items:flex-start;
  opacity:0;animation:dockIn .8s var(--ease) 2.9s forwards;
}
@keyframes dockIn{from{opacity:0}to{opacity:1}}
.dock-link{
  position:relative;width:57px;height:57px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border-radius:10.67px;color:var(--blanco);
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(255,255,255,.13);
  transition:width .42s var(--dock-ease),background .32s var(--dock-ease),border-color .32s var(--dock-ease);
}
.dock-inner{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative}
.dock-icon{display:flex;align-items:center;justify-content:center;width:23px;height:23px;
  color:rgba(255,255,255,.62);transition:color .32s var(--dock-ease)}
.dock-icon svg{width:100%;height:auto;display:block}
/* the label lives outside the button and slides in on hover */
.dock-tag{
  position:absolute;left:calc(100% + 10px);top:50%;white-space:nowrap;
  padding:7px 12px;border-radius:8px;
  background:rgba(16,3,3,.72);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.12);
  opacity:0;transform:translateY(-50%) translateX(-6px);pointer-events:none;
  transition:transform .32s var(--dock-ease),opacity .24s var(--dock-ease);
}
.dock-tag-title{font-family:'Neureal','Courier New',monospace;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--blanco);line-height:1}
.dock-dot{display:none}

@media (hover:hover) and (pointer:fine) and (min-width:768px){
  /* dock behaviour from the reference: the hovered button grows, and each
     neighbour grows half as much, so the rail swells around the cursor */
  /* px, not em: the reference's 5em resolves against ITS font-size; here the
     inherited size made 5em land on exactly 57px, so nothing ever grew */
  .dock-link:hover{width:80px;background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.26)}
  .dock-link:hover + .dock-link{width:72px}
  .dock-link:has(+ :hover){width:72px}
  .dock-link:hover .dock-icon{color:var(--naranja)}
  .dock-link:hover .dock-tag{opacity:1;transform:translateY(-50%) translateX(0)}
  /* with labels pinned open the tags stay out, so the dock keeps its rhythm */
  .dock.is-open .dock-tag{opacity:1;transform:translateY(-50%) translateX(0)}
  /* panel sits right where the labels would pop out */
  .dock.flyout-open .dock-tag{opacity:0 !important}
}
/* The dock is fixed and rides the whole page: over the white sections a light
   glass button with white icons disappears, so it inverts by context. */
.dock.on-light .dock-link{background:rgba(16,3,3,.08);border-color:rgba(16,3,3,.14)}
.dock.on-light .dock-icon{color:rgba(46,9,9,.55)}
.dock.on-light .dock-link.is-active{background:var(--naranja);border-color:var(--naranja)}
.dock.on-light .dock-link.is-active .dock-icon{color:var(--blanco)}
.dock-menu.on-light{color:var(--rojo);text-shadow:none}
@media (hover:hover) and (pointer:fine) and (min-width:768px){
  .dock.on-light .dock-link:hover{background:rgba(16,3,3,.14);border-color:rgba(16,3,3,.2)}
  .dock.on-light .dock-link:hover .dock-icon{color:var(--naranja)}
}
.dock-link:focus-visible{outline:2px solid var(--naranja);outline-offset:3px}
/* Los cuatro controles del dock son paradas de Tab desde el primer milisegundo,
   pero el bloque entra en opacity:0 con 2.9s de espera (el boton Menu, 3.1s):
   medido a los 189ms, la opacidad computada de los dos es 0 y el foco no la
   cambia, o sea que el anillo existe y no se ve. Enfocar adelanta su entrada.
   El retraso NEGATIVO es a proposito: pone la animacion pasada su final, asi que
   el fill forwards la deja en el estado de llegada; con delay 0 la animacion
   seguiria corriendo desde el principio y pisaria el opacity:1. */
.dock:focus-within,.dock:focus-within .dock-menu{opacity:1;animation-delay:-1s}
.dock-link.is-active{background:rgba(255,55,0,.92);border-color:rgba(255,55,0,.5)}
.dock-link.is-active .dock-icon{color:var(--blanco)}

/* ---------- MENU FLYOUT ----------
   Same anatomy as the reference: a solid ink panel beside the rail that fades and
   slides 16px in over .28s, with the items staggered 35ms apart. On mobile it
   docks above the bottom bar and rises 12px instead. */
.dock-flyout{
  position:fixed;top:12px;bottom:12px;
  left:calc(clamp(14px,1.9vw,28px) + 57px + 26px);
  width:min(50vw,calc(100vw - 120px));
  z-index:99;display:flex;flex-flow:column;overflow:hidden;
  border-radius:24px;background:var(--flyout);color:var(--flyout-texto);
  border:1px solid var(--flyout-filo);
  /* la segunda sombra es el velo: un spread enorme pinta el viewport entero
     alrededor del panel, así que el fondo se apaga sin meter otro elemento ni
     tocar el JS de apertura — y entra y sale con la misma transición. */
  box-shadow:0 30px 80px var(--flyout-sombra), 0 0 0 100vmax var(--flyout-velo);
  opacity:0;pointer-events:none;transform:translateX(-16px);
  transition:opacity .2s cubic-bezier(.4,0,1,1),transform .2s cubic-bezier(.4,0,1,1);
}
.dock-flyout[data-state="open"]{
  opacity:1;pointer-events:auto;transform:translateX(0);
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.dock-flyout-body{flex:1 1 auto;min-height:0;overflow-y:auto;outline:none;
  padding:clamp(84px,10vh,104px) clamp(1.5rem,3vw,2.75rem) 1.75rem;
  display:flex;flex-flow:column;gap:clamp(28px,4vh,54px)}
.dock-menu-sections,.dock-menu-secondary,.dock-menu-socials{margin:0;padding:0;list-style:none}

.dock-menu-section{
  display:block;width:100%;text-align:left;
  font-family:'Dapper','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:900;
  font-size:clamp(2rem,4.4vw,3rem);line-height:1.06;letter-spacing:-.02em;
  color:var(--flyout-texto-2);
  transition:color .32s var(--ease);
}
.dock-menu-section:hover,.dock-menu-section:focus-visible{color:var(--flyout-texto)}

.dock-menu-secondary{display:flex;flex-flow:column;gap:.5rem}
.dock-menu-secondary-link{
  font-family:'Neureal','Courier New',monospace;
  text-transform:uppercase;letter-spacing:.08em;font-size:.8125rem;font-weight:700;
  color:var(--flyout-texto-3);transition:color .32s var(--ease);
}
.dock-menu-secondary-link:hover,.dock-menu-secondary-link:focus-visible{color:var(--flyout-texto)}

.dock-menu-socials{display:flex;gap:.5rem}
.dock-soc{
  display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;
  border-radius:8px;background:var(--flyout-chip);color:var(--flyout-texto-2);
  transition:background-color .32s var(--ease),color .32s var(--ease);
}
.dock-soc:hover,.dock-soc:focus-visible{background:var(--naranja);color:var(--blanco)}
.dock-soc-icon{width:.75rem;height:.75rem}

/* items settle in one after another once the panel is open */
.dock-flyout-body > ul > li,.dock-menu-socials{opacity:0;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.dock-flyout[data-state="open"] .dock-flyout-body > ul > li,
.dock-flyout[data-state="open"] .dock-menu-socials{
  opacity:1;transform:none;transition-delay:calc(var(--i,0) * 35ms + 40ms)}

@media (max-width:767px){
  .dock-flyout{
    top:auto;left:.5rem;right:.5rem;width:auto;
    bottom:calc(81px + .5rem + env(safe-area-inset-bottom));
    max-height:60dvh;transform:translateY(12px);border-radius:18px;
  }
  .dock-flyout[data-state="open"]{transform:translateY(0)}
  .dock-flyout-body{padding:1.25rem 1.25rem 1.5rem;gap:24px}
}
@media (prefers-reduced-motion:reduce){
  .dock-flyout,.dock-flyout[data-state="open"]{transition:opacity .12s linear;transform:none}
  .dock-flyout-body > ul > li,.dock-menu-socials{transition-delay:0s !important;transform:none}
}

/* MENU block, bottom-left, exactly like the reference's toggle */
.dock-menu{
  position:fixed;left:clamp(14px,1.9vw,30px);bottom:22px;z-index:100;
  display:flex;flex-flow:column;align-items:center;gap:.5rem;padding:.25rem;
  min-width:0;width:fit-content;border:0;background:none;cursor:pointer;
  font-family:'Dapper','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:900;
  font-size:1.0625rem;text-transform:uppercase;letter-spacing:-.01em;color:var(--blanco);
  opacity:0;animation:fadeUp .8s var(--ease) 3.1s forwards;
  transition:opacity .32s var(--ease);
  text-shadow:0 1px 12px rgba(16,3,3,.6);
}
.dock-menu:hover{opacity:.6}
.dock-menu-dots{display:flex;gap:3px}
.dock-menu-dots span{width:3px;height:3px;border-radius:50%;background:currentColor}
/* the bar-sized version of the toggle; the bare dots stay on desktop, under MENU */
.dock-menu-icon{display:none}
.dock-menu-icon svg{width:100%;height:100%;display:block}

@media (max-width:767px){
  /* On mobile the reference hides its MENU entirely, which would strand the whole
     flyout — here it becomes one more item in the bar, keeping the three dots. */
  /* justify-content, not align-items: in a flex column `center` aligns across the
     horizontal axis and the vertical one keeps packing from the top. On desktop it
     never showed because the button hugs its content; here it is forced to 57x57. */
  .dock-menu{display:flex;position:static;width:57px;height:57px;padding:0;
    align-items:center;justify-content:center;
    gap:0;min-width:0;font-size:0;opacity:1;animation:none;text-shadow:none}
  /* Bare dots are 4px of ink beside three 23px filled glyphs — a fifth of their
     weight, which reads as a stray mark rather than the fourth button, however
     precisely it is centred. In the bar the toggle takes an icon of the same family
     instead: a filled rounded square with the three dots knocked out of it. */
  .dock-menu-dots{display:none}
  .dock-menu-icon{display:block;width:23px;height:23px;color:rgba(255,255,255,.62);
    transition:color .32s var(--dock-ease)}
  .dock-menu[aria-expanded="true"] .dock-menu-icon{color:var(--naranja)}
  /* the rail becomes a floating glass bar, the labels give way to a dot */
  .dock{
    left:50%;right:auto;top:auto;bottom:calc(22px + env(safe-area-inset-bottom));
    transform:translateX(-50%);flex-direction:row;align-items:center;gap:0;padding:0 12px;
    border-radius:12px;background:rgba(16,3,3,.72);
    -webkit-backdrop-filter:blur(32px) saturate(1.4);backdrop-filter:blur(32px) saturate(1.4);
    border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 34px rgba(16,3,3,.32);
    animation:dockInM .8s var(--ease) 2.9s forwards;
  }
  @keyframes dockInM{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%)}}
  .dock-link{width:57px;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}
  .dock-link.is-active{background:none}
  /* The light-section inversion is for the desktop rail, which sits directly on the
     page. On mobile the bar carries its own dark glass whatever is behind it, so
     that inversion has to be switched off here — it outranks the rules above and
     was repainting the active button as a solid orange plate, which is why the
     first item looked nothing like the other two. */
  .dock.on-light .dock-link,
  .dock.on-light .dock-link.is-active{background:none;border-color:transparent}
  .dock.on-light .dock-icon{color:rgba(255,255,255,.62)}
  .dock.on-light .dock-link.is-active .dock-icon{color:var(--naranja)}
  .dock-tag{display:none}
  .dock-dot{
    display:block;position:absolute;left:50%;bottom:9px;width:4px;height:4px;border-radius:50%;
    background:var(--naranja);opacity:0;transform:translate(-50%,6px);
    transition:transform .32s var(--dock-ease),opacity .24s var(--dock-ease);
  }
  .dock-link.is-active .dock-dot{opacity:1;transform:translate(-50%,0)}
  .dock-link.is-active .dock-icon{color:var(--naranja)}
}

/* ---------- HERO ---------- */
.hero{position:relative;height:100svh;min-height:540px;background:var(--tinta);overflow:hidden}
.hero-slides{position:absolute;inset:0}
/* Crossfade: the outgoing frame keeps drifting while the incoming one settles, so
   the change never reads as a cut. will-change is set only on the two slides in
   play — pinning all four costs real memory on phones and causes the stutter. */
/* Crossfade: the outgoing frame keeps drifting while the incoming one settles, so
   the change never reads as a cut. will-change is set only on the two slides in
   play — pinning all four costs real memory on phones and causes the stutter. */
.hero-slide{position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .95s cubic-bezier(.33,0,.15,1)}
.hero-slide.is-active,.hero-slide.is-leaving{will-change:opacity}
.hero-slide.is-active{opacity:1;z-index:2}
.hero-slide.is-leaving{z-index:1}
/* parallax lives on the wrapper, ken burns on the image: two transforms that
   would otherwise overwrite each other */
/* no CSS transition here on purpose: the JS lerp already smooths the drift, and
   easing it twice makes the parallax feel laggy rather than fluid */
/* scales kept to the minimum that covers the drift — every extra percent here is
   image the viewer loses off the edges */
.hero-slide picture{display:block;width:100%;height:100%;overflow:hidden;
  transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.022)}
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.hero.is-live .hero-slide.is-active img{animation:kenburns 6.6s cubic-bezier(.25,.6,.35,1) forwards}
@keyframes kenburns{from{transform:scale(1.042) translate3d(.35%,0,0)}to{transform:scale(1.0) translate3d(0,0,0)}}
/* ---------- LETTERING ----------
   Es su propia capa y esta vez es seguro: antes las fotos venían inpintadas debajo
   para borrarle el lettering horneado, y cualquier desfase sacaba el parche a la
   vista. Estas fotos están limpias, así que no hay nada que destapar.
   Medido en los mockups de escritorio: la tinta va del 13.013% al 76.538% del alto
   y sangra por izquierda y derecha — el asset ocupa el ancho completo. */
/* OJO: el lettering cromado YA NO vive en el hero — desde el 25-ago abre la
   página en el loader (.loader-cromo). Estas reglas se dejan por si vuelve. */
.hero-letter{position:absolute;left:0;right:0;top:13.013%;height:63.525%;
  z-index:4;pointer-events:none}
.hero-letter picture{display:block;width:100%;height:100%;
  transform:translate3d(var(--lx,0px),var(--ly,0px),0)}
.hero-letter img{width:100%;height:100%;object-fit:contain;object-position:center center;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.34))}
@media (max-width:767px){
  /* en móvil no sangra por ningún borde: es una pieza chica, del 42.1% del ancho,
     apoyada justo encima del copy */
  .hero-letter{left:34%;right:auto;width:42.1%;top:auto;bottom:27%;height:8.33%}
}

/* Velo de base, para que el copy blanco tenga sobre qué apoyarse. Antes medía 24%
   de alto, o sea empezaba en el 76% — por debajo de la primera línea del copy, que
   arranca en el 62%: esa línea no recibía nada, y con una foto de cielo claro
   quedaba blanco sobre blanco.
   Ahora cubre el 55% inferior y, sobre todo, va escalonado en vez de lineal: un
   `linear-gradient` de dos paradas sobre un degradado de foto deja una banda
   visible donde termina, porque el ojo detecta la discontinuidad de la derivada.
   Estas paradas siguen una curva suave, así que el velo se desvanece sin borde. */
/* Las paradas no son decorativas: están puestas para que en la altura de CADA
   línea del copy haya alfa suficiente. Medido sobre la lámina peor —el hombre
   contra un cielo casi blanco—, hace falta α≈.52 donde cae la primera línea para
   que el blanco llegue a 4.5:1; con la curva anterior ahí sólo había .37 y la
   línea se quedaba en 2.58:1, o sea prácticamente sin ayuda.
   Aclarado despues a peticion de Alan: la curva baja mas en la BASE, donde habia
   11:1 y sobraba margen, y poco a la altura de la primera linea, que es la que
   necesita el apoyo. Asi el velo pesa mucho menos sin perder legibilidad. */
.hero::after{content:'';position:absolute;inset:auto 0 0 0;height:62%;z-index:5;
  background:linear-gradient(to top,
    rgba(16,3,3,.62) 0%,
    rgba(16,3,3,.60) 10%,
    rgba(16,3,3,.57) 20%,
    rgba(16,3,3,.54) 30%,
    rgba(16,3,3,.48) 45%,
    rgba(16,3,3,.34) 60%,
    rgba(16,3,3,.18) 75%,
    rgba(16,3,3,.07) 88%,
    transparent 100%);
  pointer-events:none}
@media (max-width:767px){
  /* en móvil el copy arranca más abajo, así que el velo puede ser más corto y por
     tanto menos invasivo sobre la fotografía */
  .hero::after{height:52%}
}

/* ---------- COPY DEL HERO ----------
   Medido sobre los mockups. El invariante que pidió el cliente ("el mismo tamaño
   de tipografía") NO es el font-size sino el ALTO DE MAYÚSCULA, y en los mockups
   es una fracción constante del ANCHO del viewport: 4.115% en escritorio y 5.181%
   en móvil. Como NT Dapper tiene cap-height exactamente 0.700 em, el font-size
   sale de dividir: 4.115/0.7 = 5.879vw y 5.181/0.7 = 7.401vw. Así el texto
   conserva su tamaño relativo en cualquier pantalla, que es lo que se ve en las
   cuatro láminas. La interlínea va igual: 5.208% y 6.364% del ancho. */
.hero-copy{position:absolute;z-index:6;left:3.4%;right:6%;bottom:7.8%;
  pointer-events:none;color:var(--blanco)}
/* El tamaño sale de la lámina con el mismo invariante que se usó siempre aquí:
   NO el font-size sino el ALTO DE MAYÚSCULA como fracción del ancho del viewport.
   En la lámina el lema ocupa el 73% del ancho, que da cap = 5.97% y, como NT
   Dapper tiene cap-height 0.700em, font-size = 5.97/0.7 = 8.53vw.
   El salto de línea va forzado y no dejado al azar: la ventana en la que el
   párrafo cortaría solo después de "marcas" es de 0.03em —los dos renglones
   miden casi lo mismo, que es justo lo que hace bonito el rag y lo que hace
   imposible acertarle por ancho. En móvil el salto se quita y el lema fluye. */
.lema{
  font-family:'Dapper','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:500;
  font-size:8.53vw;line-height:.9;letter-spacing:-.03em;margin:0;
}
/* El lema se lee en dos pesos: los extremos llevan la voz y el centro se retira.
   Es jerarquía, no decoración — dice dónde está el sujeto y dónde el remate. */
/* En LÍNEA, no inline-block, y un run por palabra. Con el salto metido dentro de
   un inline-block la caja pasaba a tener dos renglones y su línea base era la
   última, así que "marcas" se dibujaba ENCIMA de "Co-creamos": el lema salía con
   los renglones invertidos. Con una palabra por run el párrafo fluye solo, el
   corte cae donde quepa —responsive de verdad— y el nowrap impide que una
   palabra se parta entre sus cajas de caracteres. */
.lema-run{white-space:nowrap;transition:opacity .55s var(--ease)}
.lema-dim{opacity:.52}
.lema-ac{opacity:1}

/* ---------- EL TECLEO ----------
   El efecto de shortcut.is, medido: caracteres sueltos sustituidos por
   puntuación de código en el color de acento, a opacity .7 y con
   mix-blend-mode:plus-lighter. Ese blend es lo que hace que el glifo BRILLE en
   vez de taparse: suma luz sobre lo que hay debajo, como el fósforo de una
   pantalla vieja. Con opacidad normal sobre una fotografía se vería sucio.

   Dos decisiones propias, de legibilidad:
   — Cada glifo se dibuja DENTRO de una caja del ancho de la letra que sustituye,
     así que la línea nunca se recorre. Sin eso, cambiar una "a" por una "{" en
     una tipografía proporcional empuja el resto del renglón y se ve barato.
   — Las palabras sólo se parten en cajas mientras hay ráfaga. En reposo son
     texto de verdad, con el kerning y el tracking de Dapper intactos. */
/* font-style normal a mano: con <i> el navegador ponía cursiva y la palabra que
   se estaba tecleando salía inclinada frente al resto del lema. */
.ch{position:relative;display:inline-block;text-align:center;font-style:normal}
.ch-g{position:absolute;inset:0;display:none;color:var(--naranja);opacity:.7;
  mix-blend-mode:plus-lighter}
.ch.on > span:first-child{opacity:0}
.ch.on .ch-g{display:block}
/* el cursor: una sola pieza y toda la lectura de "terminal" se sostiene */
/* El cursor no ocupa ancho: se dibuja en un ::before que sale de su caja. Así
   puede viajar DENTRO de la palabra que se está escribiendo sin empujar nada ni
   provocar un salto de línea a mitad de la entrada.
   Dos tallas: bloque mientras teclea —ahí tiene que marcar la posición— y barra
   fina en reposo, porque un bloque naranja parado tras el punto pesa más que el
   propio punto. */
.lema-cur{position:relative;display:inline-block;width:0;height:.62em;
  vertical-align:baseline}
.lema-cur::before{content:'';position:absolute;left:.07em;bottom:0;
  width:.055em;height:100%;background:var(--naranja);mix-blend-mode:plus-lighter;
  animation:latido 1.06s steps(1) infinite;transition:width .3s var(--ease)}
.lema-cur.tecleando::before{width:.34em;animation:none;opacity:.85}
@keyframes latido{0%,50%{opacity:.92}50.01%,100%{opacity:0}}

/* ---------- HERO: QUIÉN LLEVA LA VOZ ----------
   El lettering cromado y el lema comparten el mismo tercio de la pantalla. En
   vez de bajarle el volumen a los dos —que deja a los dos a medias— se reparte
   por momentos: en reposo manda el lema y el cromo se retira; al pasar el cursor
   manda el cromo y el centro del lema se retira un poco más. Así nunca hay dos
   cosas peleando por el mismo punto de atención. */
.hero-letter img{opacity:.62;transition:opacity .6s var(--ease)}
.hero:hover .hero-letter img{opacity:1}
.hero:hover .lema-dim{opacity:.26}
.hero:hover .lema-cur{opacity:.35;animation:none}

@media (max-width:767px){
  /* en móvil el lema toma las tres líneas que le permite el ancho y se apoya
     más arriba, porque abajo están los puntos del carrusel */
  /* Sube por encima de los puntos del carrusel, que en móvil se despegan del pie
     para librar la barra flotante del dock. Con el lema abajo se tocaban. */
  .hero-copy{left:5.4%;right:6%;bottom:16.4%}
  .lema{font-size:10.6vw;line-height:.94;letter-spacing:-.038em}
  /* el salto forzado se retira y el lema fluye; el espacio a los lados del <br>
     es el que mantiene separadas "marcas" y "y" cuando el salto desaparece */
  .lema-br{display:none}
  .hero-letter img{opacity:.74}
}
@media (hover:none){
  /* Sin cursor no hay hover que revele nada, así que el cromo tiene que quedarse
     ya legible: sube a .88 en vez de esperar un gesto que nunca llega. */
  .hero-letter img{opacity:.88}
}
@media (prefers-reduced-motion:reduce){
  .lema-cur{animation:none;opacity:.5}
}

/* A la derecha, no al centro: con el lema alineado a la izquierda y ocupando casi
   todo el ancho, unos puntos centrados caen justo debajo del texto y se leen como
   parte de él. Cada uno a su esquina y ninguno estorba. */
.hero-dots{position:absolute;right:4.4%;bottom:34px;display:flex;gap:10px;z-index:6}
@media (max-width:767px){.hero-dots{right:auto;left:50%;transform:translateX(-50%);bottom:26px}}
.dot{
  width:11px;height:11px;border-radius:999px;border:0;padding:0;cursor:pointer;position:relative;
  background:rgba(255,255,255,.38);overflow:hidden;
  transition:width .55s var(--ease),background .45s ease;
}
.dot::after{content:'';position:absolute;inset:-17px} /* keeps a 45px touch target */
.dot:hover{background:rgba(255,255,255,.62)}
.dot.is-active{width:52px;background:rgba(255,255,255,.28)}
/* The fill animation IS the clock: its animationend advances the slide, so the bar
   and the crossfade can never drift apart, and pausing one pauses both. */
.dot-fill{position:absolute;inset:0;background:var(--naranja);border-radius:inherit;
  transform:scaleX(0);transform-origin:left center}
.hero.is-live .dot.is-active .dot-fill{animation:dotFill var(--hold,4000ms) linear forwards}
@keyframes dotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- PARAR LO QUE SE MUEVE SOLO ----------
   Tres cosas arrancan sin que nadie las pida: el hero cambia de foto cada 4s —y
   con cada cambio se reescribe el lema letra por letra—, la tira de clientes da
   una vuelta cada ~71s y Claw'd teclea en bucle de 12.4s. Los tres controles son
   el mismo objeto: 44x44 de area tactil, el icono pasa de dos barras a un
   triangulo, y el estado para quien no ve el icono lo lleva el NOMBRE del boton,
   que cambia de "Pausar" a "Reanudar". */
.pausa-btn{
  display:grid;place-items:center;width:44px;height:44px;padding:0;flex:0 0 auto;
  border:1px solid currentColor;border-radius:999px;background:none;color:inherit;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color .25s ease,opacity .25s ease}
.pausa-ico{display:block;width:11px;height:13px;border-inline:3px solid currentColor}
.pausa-btn.esta-parado .pausa-ico{width:0;height:0;border:0;margin-left:3px;
  border-top:7px solid transparent;border-bottom:7px solid transparent;
  border-left:12px solid currentColor}
/* El del hero se mete en la fila de los puntos, delante de ellos: el freno antes
   que el avance, que es el orden en que se necesitan con Tab. */
.hero-dots{align-items:center}
.pausa-hero{color:var(--blanco);opacity:.72;margin-right:4px}
.pausa-hero:hover,.pausa-hero:focus-visible{opacity:1;background:rgba(255,255,255,.16)}
/* El de la tira va centrado debajo de ella, fuera del overflow:hidden que la
   recorta —dentro se lo comeria la mascara. */
.pausa-mq{color:var(--texto);opacity:.62;margin:22px auto 0}
.pausa-mq:hover,.pausa-mq:focus-visible{opacity:1;background:var(--linea)}
/* La placa de Claw'd es crema en los dos temas, asi que este va en tinta fija. */
.pausa-clawd{position:absolute;z-index:3;right:10px;bottom:10px;
  color:var(--tinta);background:rgba(237,235,228,.92);border-color:rgba(16,3,3,.45)}
.pausa-clawd:hover,.pausa-clawd:focus-visible{background:var(--blanco)}
/* Y el freno de verdad: la barra del hero y la tira son animaciones CSS, asi que
   pararlas es pararlas AQUI. Matar el temporizador de JS no alcanzaba. */
.hero.is-pausado .dot.is-active .dot-fill{animation-play-state:paused}
.marquee.is-pausada .marquee-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.pausa-btn{transition:none}}


/* ---------- INTRO ---------- */
.intro{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,96px);align-items:center;padding:clamp(84px,10vw,150px) 0}
.eyebrow{font-family:'Neureal','Courier New',monospace;font-size:14px;letter-spacing:.14em;color:var(--texto);margin-bottom:30px}
.intro-h{font-weight:400;font-size:clamp(27px,2.9vw,42px);line-height:1.22;letter-spacing:-.01em;margin-bottom:30px;max-width:21em}
.intro-p{font-size:clamp(17px,1.45vw,21px);line-height:1.55;color:var(--texto);max-width:34em}
.intro-img{border-radius:var(--r-md);overflow:hidden;aspect-ratio:1445/981}
.intro-img img{width:100%;height:100%;object-fit:cover}

/* ---------- LA OPORTUNIDAD ---------- */
.oport{padding:clamp(10px,2vw,28px) clamp(10px,1.6vw,24px) clamp(48px,6vw,90px)}
.oport-card{background:var(--panel);border-radius:var(--r-lg);padding:clamp(30px,4.5vw,68px);max-width:1600px;margin-inline:auto}
.tag{display:flex;align-items:center;gap:12px;color:var(--naranja);font-size:clamp(17px,1.5vw,21px);margin-bottom:clamp(28px,4vw,54px)}
.tag .plus{font-size:1.25em}
.oport-head{max-width:820px;margin-inline:auto;text-align:left;margin-bottom:clamp(36px,5vw,72px)}
.oport-h{font-weight:400;font-size:clamp(30px,3.9vw,56px);line-height:1.12;letter-spacing:-.012em;margin-bottom:28px}
.oport-sub{font-size:clamp(19px,2vw,28px);line-height:1.3;max-width:24em}
.servs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.serv{
  position:relative;border-radius:var(--r-md);overflow:hidden;cursor:pointer;isolation:isolate;
  aspect-ratio:1034/1213;
  background:var(--edge);
  outline-offset:3px;
}
.serv:focus-visible{outline:3px solid var(--naranja)}
.serv-img{position:absolute;inset:0;overflow:hidden}
.serv-img img{width:100%;height:100%;object-fit:cover;object-position:center center;transition:transform .9s var(--ease)}
/* Lighter veil. It used to reach .94 at the foot and stay above .60 through the
   middle of the card, which buried the photograph. It now falls away much sooner
   and only keeps enough weight under the type to hold it — the shot reads, the
   words still sit on 8:1 or better. */
/* ---------- EL VELO QUE SÓLO APARECE AL ABRIR ----------
   El ::after de abajo es el velo permanente: el que sostiene el título con la
   tarjeta cerrada, y va suave a propósito para no ensuciar la fotografía.
   Éste es otro, y sólo existe mientras la descripción está a la vista. Tiene
   sentido que así sea: cerrada no hay nada abajo que defender, y oscurecer la
   foto todo el tiempo por un texto que no se está leyendo es pagar un precio a
   cambio de nada. Se enciende con el mismo gesto que revela el texto — el cursor
   encima en escritorio, el chip en el teléfono — así que la foto se apaga
   exactamente cuando hay algo que leer sobre ella. */
.serv::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(8,5,4,.80) 0%, rgba(8,5,4,.66) 20%, rgba(8,5,4,.44) 40%,
    rgba(8,5,4,.20) 62%, rgba(8,5,4,.05) 82%, transparent 100%);
  opacity:0;transition:opacity .5s var(--ease)}

.serv::after{content:'';position:absolute;inset:0;z-index:1;
  background:
    /* el suelo del número, en su esquina */
    radial-gradient(58% 28% at 100% 0%, rgba(10,3,3,.86) 0%, rgba(10,3,3,.60) 34%,
                    rgba(10,3,3,.24) 58%, transparent 80%),
    linear-gradient(to top,rgba(10,7,6,.72) 0%,rgba(10,7,6,.58) 20%,rgba(10,7,6,.30) 43%,rgba(10,7,6,.10) 60%,rgba(10,7,6,.01) 80%,transparent 100%);
  opacity:.9;transition:opacity .5s}
/* El número va en NARANJA de marca y con suelo propio.
   Estaba en el rojo oscuro porque cuando se escribió, las tres fotos tenían la
   parte de arriba clara. Con las dos nuevas —fondo negro estrellado— ese rojo dio
   1.16:1 y 1.02:1: literalmente invisible. Pero el naranja solo tampoco sirve
   para las tres: sobre el cielo claro de la tercera da 1.08:1.
   Ningún color acierta a las tres, así que la respuesta no es el color sino el
   suelo: una sombra radial muy suave en esa esquina (ver .serv::after) le da al
   número contra qué apoyarse pase lo que pase con la foto, hoy y el día que se
   cambie. Sobre las oscuras ni se nota. */
.serv-num{position:absolute;top:18px;right:20px;z-index:3;
  font-family:'NeurealMono','Courier New',monospace;
  color:var(--naranja);font-size:16px;letter-spacing:.04em;
  /* halo ceñido al glifo: sube el contraste justo en el borde, que es donde el
     ojo lo lee. Sobre las dos fotos negras no se ve; sobre el cielo claro de la
     tercera es lo que termina de sacar el número. */
  text-shadow:0 0 7px rgba(10,3,3,.95),0 0 2px rgba(10,3,3,.9),0 1px 2px rgba(10,3,3,.85)}
.serv-body{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(18px,1.8vw,28px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.serv-t{font-weight:400;font-size:clamp(23px,2vw,31px);line-height:1.1;color:var(--blanco);letter-spacing:-.01em}
.serv-plus{font-size:22px;transition:transform .5s var(--ease)}
/* La fila que agrupa el + con el chip. El chip y la equis son piezas de TÁCTIL:
   fuera de su media query no existen. Sin esta base un <span> sin regla de
   display se muestra en línea, y en escritorio aparecían los dos junto al +. */
.serv-abre{display:flex;align-items:center;gap:12px}
.serv-chip,.serv-cerrar{display:none}
.serv-d{
  font-size:clamp(15px,1.19vw,17.5px);line-height:1.52;color:rgba(255,255,255,.92);max-width:34em;
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease) .06s,transform .55s var(--ease) .06s;
}
@media (hover:hover){
  .serv:hover .serv-d,.serv:focus-visible .serv-d,.serv.is-open .serv-d{opacity:1;transform:none}
  .serv:hover::before,.serv:focus-visible::before,.serv.is-open::before{opacity:1}
  .serv:hover .serv-img img{transform:scale(1.06)}
  .serv:hover .serv-plus{transform:rotate(135deg)}
  .serv:hover::after{opacity:1}
}
@media (hover:none){
  .serv.is-open .serv-d{opacity:1;transform:none}
  .serv.is-open .serv-plus{transform:rotate(135deg)}
  .serv.is-open::after{opacity:1}
}

/* ---------- CLIENTES ---------- */
.clients{padding:clamp(90px,11vw,170px) 0 clamp(70px,8vw,120px)}
.statement{
  font-weight:400;font-size:clamp(30px,4.6vw,66px);line-height:1.12;letter-spacing:-.015em;
  color:var(--texto);max-width:19em;margin-bottom:clamp(56px,7vw,110px);
}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;gap:clamp(14px,1.6vw,24px);width:max-content;animation:mq var(--mq-dur,52s) linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-item{flex:0 0 auto;width:clamp(190px,20vw,300px);aspect-ratio:300/135;border-radius:14px;background:var(--tarjeta);display:grid;place-items:center;overflow:hidden}
/* contain, not cover: these are the logos themselves now, trimmed to their own ink
   and on transparency — cover would crop them. The padding is what keeps eighteen
   very different shapes reading as one row. */
/* Each logo is centred on a canvas of the card's own proportion, scaled so all
   eighteen share the same optical AREA — otherwise a tall mark, fitted by height,
   carries a fraction of the weight of a wordmark that spans the full width. The
   canvas already holds the margin, so the padding here is only a safety edge.
   px vertically, never %: a percentage padding resolves against the INLINE size on
   every side, and 14% of a 288px card put 40px above and below a 130px box. */
.mq-item img{width:100%;height:100%;object-fit:contain;padding:6px 10px;
  filter:grayscale(1);opacity:.72;transition:opacity .3s}
/* Los archivos son tinta oscura sobre transparencia: sobre la tarjeta clara del
   modo claro se leen solos, y sobre la tarjeta oscura desaparecían. Se invierte
   el tono, NO se rellenan de blanco: cinco de los dieciocho —Cacao Nativa, la
   ONU, CEDIM, Saucony, Interceramic— usan el blanco como parte del dibujo, y
   una silueta plana los convierte en manchas. Invirtiendo, el blanco del dibujo
   se vuelve oscuro y se funde con la tarjeta, así que la marca se lee como
   trazo. El contraste y el brillo emparejan el peso, porque los archivos vienen
   con tonos muy distintos (de negro puro a gris medio). */
:root[data-theme="dark"] .mq-item img{
  filter:grayscale(1) invert(1) contrast(1.06) brightness(1.14);opacity:.82}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mq-item img{
    filter:grayscale(1) invert(1) contrast(1.06) brightness(1.14);opacity:.82}
}
.mq-item:hover img{opacity:1}
.mq-item:hover img{opacity:1}

/* ---------- SOMOS ---------- */
.somos{padding-bottom:clamp(60px,7vw,110px)}
.somos-lockup{text-align:center;padding:clamp(30px,4vw,60px) 0 clamp(70px,9vw,140px)}
.somos-h{display:block}
.somos-h>span{display:block}
.somos-h .u-font{font-size:clamp(44px,8.4vw,124px);line-height:.92}
.somos-script{font-size:clamp(40px,7.6vw,112px);line-height:.52;position:relative;z-index:2;display:block;transform:translateY(-.04em)}
.somos-sub{font-size:clamp(28px,4.4vw,66px) !important;position:relative;z-index:1;max-width:15.5em;margin-inline:auto;padding-top:.12em}
.anio{display:flex;align-items:center;justify-content:center;gap:clamp(36px,7vw,110px);margin:clamp(36px,4.5vw,64px) 0}
.anio .mono{font-size:clamp(26px,3vw,44px);letter-spacing:.06em}
/* El águila va como FONDO y no como <img>, y la razón no es capricho: el dibujo
   es de dos tintas —trazo y contratrazo— y está construido para papel blanco. En
   oscuro no basta con aclararlo: hay que INTERCAMBIAR los dos papeles, porque si
   no el contratrazo blanco tapa la cabeza y todo se vuelve una mancha. Por eso
   son dos archivos con los papeles cambiados. Y van como fondo porque así el
   navegador descarga sólo el que de verdad aplica; con dos <img> se traería los
   dos. 51 KB comprimidos cada uno. */
.anio-aguila{display:block;width:clamp(160px,18.9vw,272px);aspect-ratio:194/201;
  background:url('../img/aguila.svg') center/contain no-repeat}
:root[data-theme="dark"] .anio-aguila{background-image:url('../img/aguila_oscuro.svg')}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .anio-aguila{background-image:url('../img/aguila_oscuro.svg')}
}
/* El águila anterior era línea negra plana sobre fondo blanco: en oscuro había
   que invertirla y componerla en screen para que no quedara un recuadro. Esta
   viene recortada con alfa —no hay recuadro que esconder— y además es un dibujo
   con medios tonos, con tanto blanco como negro. Invertirla la volvería un
   negativo fotográfico: las alas se vuelven manchas claras y se pierde el
   claroscuro. Sobre el fondo oscuro ya se sostiene sola; sólo se le sube un
   punto de brillo para que la guirnalda del pie no se hunda. */
@media (prefers-color-scheme:dark){
}
.mono-block{font-family:'NeurealMono','Courier New',monospace;font-size:clamp(13px,1.25vw,17px);line-height:1.75;letter-spacing:.05em;color:var(--texto);max-width:44em;margin-inline:auto;text-transform:uppercase}

/* ---------- MANIFIESTO ---------- */
/* ---------- MANIFIESTO: SIETE TARJETAS ----------
   (la clase es .mnf y no .mcard porque .mcard ya son las tarjetas
    "Proximamente" del portafolio, y su regla va mas abajo: pisaba esta)
   Todo medido sobre la lámina de Alan, que exporta la tarjeta a 2760x1276:
     proporción       2.163 : 1
     radio            50 / 2760  = 1.81% del ancho
     titular          cap 146 = 11.44% del alto, o sea cuerpo 16.38% del alto
     interlínea       155 / 209 = 0.742
     tracking         la palabra "combinada" mide 1313 donde Dapper Bold da 1413
                      al mismo cap: -0.040em
   Como el alto de la tarjeta sale de su ancho, todo se expresa en cqw sobre el
   ancho de la propia tarjeta: así la lámina escala entera y no hay un solo
   tamaño que se despegue de los demás al cambiar el viewport. */
/* margin:0 AUTO, no margin:0. El atajo pisaba el margin-inline:auto que trae
   .wrap y la sección entera se pegaba al borde izquierdo, dejando todo el aire
   de un solo lado. */
/* Las marcas del observador sólo existen en el teléfono. Fuera de ahí van
   ocultas: `.mani` es flex CON gap, y un elemento de alto cero igual se come un
   hueco. Se ocultan con display:none y no con visibility porque en escritorio no
   hay nada que observar; en móvil el bloque de abajo las vuelve a mostrar (un
   display:none no tiene caja y el observador nunca dispararía). */
.mnf-tope{display:none}
.mani{display:flex;flex-direction:column;gap:clamp(16px,1.9vw,30px);
  padding-bottom:clamp(90px,11vw,170px);list-style:none;margin:0 auto}

.mnf{position:relative;container-type:inline-size;
  aspect-ratio:2760/1276;border-radius:1.81cqw;overflow:hidden;
  background:var(--panel);isolation:isolate}

.mc-foto{position:absolute;inset:0;display:block;overflow:hidden;z-index:0}
/* 118% de alto: el sobrante es lo que el parallax puede recorrer sin que asome
   el borde de la foto por arriba ni por abajo */
.mc-foto img{position:absolute;left:0;top:-9%;width:100%;height:118%;
  object-fit:cover;will-change:transform}

/* El velo, medido: comparé la lámina contra la foto original píxel a píxel y el
   resultado fue contundente — ARRIBA NO HAY VELO, cero en todo el ancho. El
   oscurecimiento vive sólo abajo (α .40 a .51 en la mitad izquierda) y se apaga
   hacia la derecha. Es un degradado desde la esquina inferior izquierda, no una
   diagonal que cruza la tarjeta como yo lo había puesto.
   Lo único que agrego sobre la lámina es un piso general de .20, para que el
   titular tenue no desaparezca sobre las fotos más claras.
   SIN SOMBRA bajo el titular. Puse una y estaba mal: el titular está colocado a
   propósito donde la foto está tranquila, así que la sombra no defendía nada y
   sí ensuciaba la letra. Si algún titular se pierde, la respuesta es mover el
   encuadre de la foto o subir este piso, no ponerle sombra al texto. */
.mc-velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(118% 96% at 3% 112%, rgba(10,3,3,.66) 0%, rgba(10,3,3,.44) 30%,
                    rgba(10,3,3,.18) 56%, transparent 80%),
    linear-gradient(to top, rgba(10,3,3,.22) 0%, transparent 36%),
    linear-gradient(rgba(10,3,3,.20), rgba(10,3,3,.20))}

.mc-cuerpo{position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:3.55cqw 3.33cqw 3.4cqw}

.mc-tag{font-size:1.36cqw;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin:0 0 1.1cqw}

/* la pastilla del contador va sobre el velo, no dentro del cuerpo: su sitio es la
   esquina, no el flujo del texto */
.mc-num{position:absolute;z-index:3;top:2.5cqw;right:2.5cqw;
  display:grid;place-items:center;min-width:8.1cqw;height:3.62cqw;
  border-radius:.62cqw;background:var(--naranja);color:var(--blanco);
  font-size:1.62cqw;letter-spacing:.03em;
  transition:background-color .4s var(--ease),color .4s var(--ease)}
.mnf:hover .mc-num{background:var(--blanco);color:var(--naranja)}

/* La interlínea NO se tanteó: se resolvió contra las métricas reales de las dos
   fuentes. Para cada pareja de renglones de las siete tarjetas se midió cuánto
   BAJA la tinta del de arriba y cuánto SUBE la del de abajo, con los caracteres
   que de verdad tiene cada renglón:
     descenso máximo   0.230 em (la 'g' de Dapper)
     ascenso máximo    0.730 em
     -> hace falta 0.961 em para que no se toquen NUNCA
   Con 0.742 se tocaban las diez parejas de las siete tarjetas, no sólo la de la
   Jabin: ésa se nota más porque el swash es una forma grande, pero el problema
   era general. Va en 0.97, con un pelo de margen. */
.mc-h{margin:0;font-weight:700;font-size:7.57cqw;line-height:.97;
  letter-spacing:-.040em;color:var(--blanco);text-transform:none;
  max-width:15.5em}
/* El renglón ya NO es una ranura. Lo era —una caja con overflow:hidden por la
   que el texto se deslizaba— y con interlínea .742 esa caja es más baja que la
   propia letra, así que a media entrada los glifos salían rebanados por arriba y
   por abajo. Se veía cortado porque literalmente lo estaba.
   Ahora no hay recorte en ninguna parte: el renglón sólo agrupa, y quien se
   mueve son las palabras. */
.ln{display:block}
.lnx{display:block}
/* cada palabra es su propia caja para poder moverla; el kerning de dentro de la
   palabra se conserva, que es donde de verdad importa */
.pal{display:inline-block;will-change:transform,opacity,filter}
/* Los dos pesos de la lámina son el MISMO peso: lo que cambia es la opacidad.
   Lo verifiqué superponiendo las palabras — las astas miden igual. */
.mc-h em{font-style:normal;opacity:.70;transition:opacity .7s var(--ease)}
.mc-h b{font-weight:700}
.mc-h .jabin{font-family:'Jabin',serif;font-style:normal;text-transform:none;
  font-size:1.12em;line-height:.7;vertical-align:-.05em;letter-spacing:0;
  display:inline-block;margin:0 .04em}

/* El aire del signo se ajusta a la interlínea nueva: el titular creció 64px al
   dejar de tocarse y ese espacio tiene que salir de algún lado. Sale de aquí y
   del pie de la caja, no de la letra. */
.mc-plus{width:1.95cqw;height:auto;color:var(--blanco);margin:1.35cqw 0 1.05cqw;
  display:block;transition:transform .8s var(--ease)}
.mnf:hover .mc-plus{transform:rotate(90deg)}

/* Medido contra la lámina: ahí la interlínea del cuerpo es 5.80% del alto de la
   tarjeta, o sea un cuerpo de 1.86cqw. Estaba en 1.48 y se leía chico al lado del
   titular; esto lo devuelve a la proporción del diseño. */
.mc-p{margin:0;font-size:1.79cqw;line-height:1.46;max-width:41em;
  color:rgba(255,255,255,.60);font-weight:500}
.mc-p b{font-weight:500;color:var(--blanco)}

/* ---------- el móvil no es la misma lámina en chiquito ----------
   A 350px de ancho, una tarjeta de 2.16:1 mide 162px de alto: no cabe ni el
   titular. La tarjeta se vuelve vertical, la foto pasa a su recorte alto y los
   tamaños dejan de salir del ancho de la tarjeta —que ahí es pequeño— para
   salir del viewport. */
@media (max-width:767px){
  .mani{gap:14px}
  .mnf{aspect-ratio:auto;min-height:118vw;border-radius:16px}
  /* Un solo valor de padding en los cuatro lados, y la pastilla del contador se
     alinea a ese mismo valor: así el rótulo, el titular, el cuerpo y el número
     comparten el mismo margen contra el borde de la tarjeta.
     El sobrante NO se acumula abajo. Va donde pidió Alan: entre el rótulo chico y
     el titular grande, con un margin-top:auto en el titular que empuja todo el
     bloque contra el pie de la tarjeta. */
  /* La tarjeta pasa a ser columna flexible y la caja de texto se estira hasta su
     alto: sin eso el height:100% de la caja no resuelve —la tarjeta define
     min-height, no height— la caja medía sólo lo que su contenido y el sobrante
     se quedaba abajo, que es exactamente lo que se veía. Ya estirada, el
     margin-top:auto del titular manda el hueco arriba, entre el rótulo y él. */
  .mnf{--pad:clamp(20px,5.6vw,26px);display:flex;flex-direction:column}
  .mc-cuerpo{flex:1 1 auto;min-height:0;padding:var(--pad);justify-content:flex-start}
  .mc-h{margin-top:auto}
  .mc-tag{font-size:10px;letter-spacing:.22em;margin-bottom:14px}
  .mc-num{top:var(--pad);right:var(--pad);min-width:62px;height:27px;border-radius:7px;font-size:12px}
  /* En el teléfono el titular FLUYE. Los saltos de renglón de la lámina son una
     composición pensada para una tarjeta apaisada; forzados en 350px de ancho
     hacían que cada renglón se partiera por su cuenta y dejara huérfanas —"sin"
     solo en una línea, "calidad" en otra— con huecos enormes. Aquí los renglones
     se vuelven texto corrido, el párrafo rompe donde le toca y las siete
     tarjetas comparten exactamente el mismo cuerpo. */
  /* Mismo número: la cuenta es relativa al cuerpo, así que vale igual aquí. */
  .mc-h{font-size:8.5vw;line-height:.97;letter-spacing:-.032em;max-width:none}
  .ln,.lnx{display:inline}
  .ln:not(:last-child)::after{content:' '}
  .mc-plus{width:15px;margin:18px 0 13px}
  .mc-p{font-size:15px;line-height:1.52;max-width:none}
  .mc-velo{background:
    linear-gradient(to top, rgba(10,3,3,.86) 0%, rgba(10,3,3,.70) 34%,
                            rgba(10,3,3,.40) 62%, rgba(10,3,3,.14) 84%, transparent 100%)}
}

/* ---------- entrada ----------
   Aquí SÓLO se esconde con opacidad. El desplazamiento inicial de los renglones
   lo pone GSAP, no esta hoja, y la razón vale la pena anotarla: GSAP lee el
   transform que ya trae el elemento y lo guarda como su base, así que al terminar
   el tween lo restituye. Poner translateY(104%) en CSS hacía que el titular
   volviera a esconderse justo al acabar de entrar — animaba y se iba. */
.js .mnf[data-mc]:not(.mc-lista) .mc-tag,
.js .mnf[data-mc]:not(.mc-lista) .mc-plus,
.js .mnf[data-mc]:not(.mc-lista) .mc-num,
.js .mnf[data-mc]:not(.mc-lista) .mc-p{opacity:0}
@media (prefers-reduced-motion:reduce){
  .js .mnf[data-mc]:not(.mc-lista) .mc-tag,
  .js .mnf[data-mc]:not(.mc-lista) .mc-plus,.js .mnf[data-mc]:not(.mc-lista) .mc-p,
  .js .mnf[data-mc]:not(.mc-lista) .mc-num{opacity:1}
  .mc-foto img{top:0;height:100%}
}
[data-ilum] .w{opacity:var(--dim,.13)}
.no-js [data-ilum] .w,[data-ilum].ilum-done .w{opacity:1}

/* ---------- TRABAJO ---------- */
.trabajo{padding:0 clamp(10px,1.6vw,24px) clamp(60px,7vw,110px)}
.wfpc{
  position:relative;background:var(--teal);border-radius:var(--r-lg);
  max-width:1600px;margin-inline:auto;
  padding:clamp(30px,4.5vw,68px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4vw,60px);
  color:var(--blanco);
}
.wfpc-num{position:absolute;top:clamp(24px,3vw,48px);right:clamp(24px,3vw,48px);color:var(--sage);font-size:clamp(18px,1.8vw,26px)}
.wfpc-h{font-weight:400;font-size:clamp(30px,3.8vw,56px);line-height:1.08;letter-spacing:-.012em;max-width:14em}
.wfpc-sage{color:var(--sage)}
.wfpc-plus{font-size:26px;color:var(--blanco);margin:26px 0 22px;display:block}
.wfpc-p{font-size:clamp(15.5px,1.3vw,18px);line-height:1.55;color:rgba(255,255,255,.92);max-width:36em;margin-bottom:clamp(30px,4vw,56px)}
.wfpc-q p{font-size:clamp(18px,1.7vw,24px);line-height:1.4;max-width:22em;margin-bottom:26px}
.wfpc-who{display:flex;gap:16px;align-items:center}
.wfpc-who img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.wfpc-who div{display:flex;flex-direction:column;gap:2px}
.wfpc-who strong{font-weight:500;font-size:17px}
.wfpc-who span{color:var(--sage);font-size:14.5px}
.wfpc-who em{font-style:normal;font-size:13.5px;font-family:'Neureal','Courier New',monospace;letter-spacing:.03em}
.wfpc-imgs{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(12px,1.4vw,20px);align-content:end}
.wfpc-imgs figure{border-radius:14px;overflow:hidden;aspect-ratio:1/1}
.wfpc-imgs figure:last-child{aspect-ratio:508/637}
.wfpc-imgs img{width:100%;height:100%;object-fit:cover}

/* mosaic placeholders */
.mosaic{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:clamp(150px,17vw,270px);gap:clamp(14px,1.6vw,24px);margin-top:clamp(14px,1.6vw,24px)}
.m-a{grid-column:span 3;grid-row:span 2}
.m-b{grid-column:span 2;grid-row:span 1}
.m-c{grid-column:span 2;grid-row:span 1}
.m-d{grid-column:span 2;grid-row:span 2}
.m-e{grid-column:span 3;grid-row:span 2}
.mcard{
  position:relative;background:var(--bg);color:var(--fg);border-radius:var(--r-md);
  padding:24px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:10px;
  overflow:hidden;transition:transform .5s var(--ease);
}
.mcard:hover{transform:scale(.985)}
.mcard-meta{position:absolute;top:20px;left:22px;font-size:12.5px;letter-spacing:.1em;opacity:.85}
.mcard-plus{font-size:clamp(34px,3.6vw,54px);color:var(--fg);opacity:.9;transition:transform .6s var(--ease)}
.mcard:hover .mcard-plus{transform:rotate(90deg)}
.mcard-t{font-size:clamp(19px,1.9vw,27px);letter-spacing:-.01em}

/* ---------- EQUIPO ---------- */
.equipo-sec{padding:clamp(40px,5vw,80px) clamp(10px,1.6vw,24px) clamp(60px,7vw,110px)}
.equipo-h{font-size:clamp(64px,11vw,168px);color:var(--texto);letter-spacing:-.02em;line-height:1;margin-bottom:clamp(30px,4vw,56px)}
.equipo-card{
  background:var(--panel-2);border-radius:var(--r-lg);max-width:1600px;margin-inline:auto;
  padding:clamp(26px,4vw,64px);display:flex;flex-direction:column;gap:clamp(56px,7vw,110px);
}
.member{display:grid;grid-template-columns:minmax(260px,460px) 1fr;gap:clamp(26px,5vw,80px);align-items:center}
/* the canvas redraws the photo as glyphs; the <img> stays underneath as the
   no-JS fallback and as the luminance source */
.member-ph{border-radius:16px;overflow:hidden;aspect-ratio:1090/1322;background:#12131E;position:relative;cursor:crosshair}
.ascii-cv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none}
/* cutout variant: no plate, no rounded edge — only the glyphs of the silhouette,
   so the figure reads as floating on the section itself */
.member-ph[data-ascii~="cutout"]{background:none;border-radius:0;overflow:visible}
.member-ph:has(.ascii-cv) img{opacity:0}
.member-ph--clawd{background:#EDEBE4}
.member-ph img{width:100%;height:100%;object-fit:cover}
.member-txt{text-align:right;color:var(--naranja);display:flex;flex-direction:column;align-items:flex-end}
.member-name{font-size:clamp(64px,9vw,150px);line-height:.9;margin-bottom:18px}
.member-caps{font-family:'Dapper','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(17px,1.7vw,25px);letter-spacing:-.02em;margin-bottom:6px}
.member-role{font-size:clamp(16px,1.5vw,22px);margin-bottom:26px}
.member-bio{font-size:clamp(12.5px,1.05vw,15px);line-height:1.8;max-width:56em;letter-spacing:.01em}
.member-bio + .member-bio{margin-top:14px}
.member-link{text-decoration:underline;text-underline-offset:4px}
.member-link:hover{color:var(--crema)}
/* 881–1180px · la banda donde la ficha se estrangula.
   Medido: a 890 el reparto es 460px de retrato y 180.7 de texto; a 1080, 460 y
   354. A ese ancho la biografía cae a ~24 caracteres por renglón y la pastilla
   del rol se parte en dos y tres renglones dentro de una forma de 999px de
   radio — y las fichas 2 y 4 ni siquiera caben en su pista: miden 234 y 239px
   dentro de 180.7 y se meten sobre la columna del retrato. De 1181 para arriba
   el reparto ya da (446px de texto, las cuatro pastillas en un renglón), así que
   sólo hay que arreglar la banda, y en ella cede el retrato, que es lo único que
   encoge sin perder nada. Las dos declaraciones hacen falta: con la columna
   ancha pero el rol en 16px la pastilla más larga pide ~370px contra 358
   disponibles y vuelve a partirse. */
@media (min-width:881px) and (max-width:1180px){
  .member{grid-template-columns:minmax(200px,300px) 1fr;gap:clamp(20px,3vw,36px)}
  .member-role{font-size:14px}
}

/* ---------- FOOTER ---------- */
.foot{background:var(--pie);color:var(--pie-texto);padding-top:clamp(70px,8vw,120px);overflow:hidden}
.foot-top{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(40px,6vw,100px);align-items:start;padding-bottom:clamp(70px,9vw,140px)}
.foot-item{margin-bottom:clamp(36px,4.5vw,64px)}
.foot-item .plus{font-size:clamp(20px,2vw,30px);color:var(--rojo);display:block;margin-bottom:16px}
.foot-big{
  font-size:clamp(24px,3.6vw,54px);letter-spacing:-.015em;line-height:1.15;
  border-bottom:2px solid currentColor;padding-bottom:.08em;
  background-image:linear-gradient(currentColor,currentColor);background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:opacity .3s;word-break:break-word;
}
.foot-big:hover{opacity:.72}
.foot-cols{display:flex;gap:clamp(40px,5vw,90px);padding-top:10px}
.foot-col{display:flex;flex-direction:column;gap:16px}
.foot-label{font-family:'Neureal','Courier New',monospace;font-size:13.5px;letter-spacing:.06em;display:flex;align-items:center;gap:9px;margin-bottom:14px}
.foot-label .plus{color:var(--rojo);font-size:1.3em}
.foot-col a{font-size:clamp(17px,1.5vw,21px);width:fit-content;position:relative}
.foot-col a::after{content:'';position:absolute;left:0;bottom:-3px;height:1.5px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.foot-col a:hover::after{transform:scaleX(1);transform-origin:left}
.arrw{font-family:'Neureal','Courier New',monospace;font-size:.85em}
.foot-logo{position:relative;width:98%;margin:0 auto;line-height:0;overflow:hidden;padding-top:1.5%}
.giant-word{width:100%;height:auto;fill:var(--rojo);color:var(--rojo);position:relative;z-index:1}
.giant-word use[href="#lgPlus"]{stroke:var(--rojo)}
.giant-script{position:relative;width:88%;height:auto;fill:var(--gris);margin-top:-4.2%;margin-bottom:-3.4%;z-index:2}

/* ---------- REVEALS (JS-gated) ---------- */
html.js [data-reveal],html.js [data-reveal-group]>*{opacity:0;transform:translateY(34px)}
html.js [data-clip]{clip-path:inset(14% 6% 14% 6% round 18px);transform:scale(1.05)}
html.js.anim-ready [data-reveal],html.js.anim-ready [data-reveal-group]>*,html.js.anim-ready [data-clip]{opacity:initial;transform:initial}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .servs{grid-template-columns:1fr 1fr}
  .serv:last-child{grid-column:span 2;aspect-ratio:2.15/1.2}
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(160px,24vw,240px)}
  .m-a,.m-b,.m-c,.m-d,.m-e{grid-column:span 1;grid-row:span 1}
  .m-a,.m-e{grid-column:span 2}
}
@media (max-width:880px){
  .intro{grid-template-columns:1fr}
  .intro-img{order:-1}
  .wfpc{grid-template-columns:1fr}
  /* ---------- EQUIPO EN MÓVIL: cada quien, una ficha ----------
     En una columna, retrato y nombre quedaban a la misma distancia entre sí que
     de la siguiente persona, y el conjunto se leía como una tira continua: no
     se sabía de quién era cada cara. La agrupación se resuelve con proximidad y
     con un recinto, que es lo que el ojo usa para decidir qué va junto.

     — Cada persona vive dentro de su propia ficha, con fondo, filo y esquinas.
     — El retrato y el nombre se pegan (18px); entre fichas hay 4 veces más.
     — El nombre en fraktur se monta SOBRE el pie del retrato, así que no hay
       manera de leerlo como si fuera del de arriba.
     — Un número al canto (01, 02, 03) da el orden y sirve de ancla. */
  .member{grid-template-columns:1fr;gap:0;position:relative;
    background:var(--panel-2);border:1px solid var(--linea);
    border-radius:20px;padding:20px 20px 26px;overflow:hidden}
  .equipo-card{gap:clamp(28px,7vw,44px) !important;padding:14px !important;
    background:none !important;border-radius:0 !important}
  .member-ph{max-width:none;cursor:default;margin-bottom:-34px}
  .member-txt{text-align:left;align-items:flex-start;position:relative;z-index:2}
  .member-name{font-size:clamp(56px,17vw,86px);margin-bottom:10px;line-height:.86}
  .member-caps{font-size:15px;margin-bottom:3px}
  .member-role{font-size:14px;margin-bottom:16px;opacity:.85}
  .member-bio{font-size:12px;line-height:1.72}
  /* el número al canto: orden y ancla, sin robarle sitio al nombre */
  .member::before{counter-increment:equipo;content:counter(equipo,decimal-leading-zero);
    position:absolute;top:16px;right:18px;z-index:3;
    font-family:'NeurealMono','Courier New',monospace;font-size:12px;
    letter-spacing:.08em;color:var(--naranja);opacity:.85}
  .equipo-card{counter-reset:equipo}
  .foot-top{grid-template-columns:1fr}
}
@media (max-width:720px){
  .hdr{padding:20px 18px}
  .brand-word{height:15px}
  .brand-script{height:19px}
  .pill{top:auto;bottom:calc(16px + env(safe-area-inset-bottom));right:50%;transform:translate(50%,14px)}
  @keyframes pillIn{to{opacity:1;transform:translate(50%,0)}}
  .pill-link{padding:11px 18px;font-size:14px}
  .servs{grid-template-columns:1fr}
  .serv,.serv:last-child{grid-column:span 1}
  /* Three of the four frames are portrait now, so on a phone they fill the screen
     edge to edge on their own — no blurred fill, no bands. The wordmark rides on
     top as its own layer and is fitted whole, so nothing of it gets cropped. */
  .hero{height:100svh;min-height:560px}
  .hero-slide picture{transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.03)}
  .hero-slide img{object-fit:cover;object-position:center 42%}
  .hero-letter picture{transform:translate3d(var(--lx,0px),var(--ly,0px),0)}
  .hero-slide img{object-position:center 50%;transform:none}
  .hero-slide.is-active img{animation:none}
  .hero-dots{bottom:calc(104px + env(safe-area-inset-bottom))}

  .wfpc-imgs{grid-template-columns:1fr 1fr}
  .foot-cols{gap:48px}
  .foot-logo{width:100%}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* NO flex-wrap here. It turned the carousel into a two-column grid, and since the
     track carries a duplicated pass for the seamless loop, every copy rendered as a
     stacked list — screens of the same four logos. Sigue siendo UN renglon: lo que
     cambia es que ya no cruza la pantalla solo. Quien pidio menos movimiento tenia
     la tira de clientes andando igual que todos los demas. */
  .mq-item{width:clamp(150px,42vw,200px)}
  .marquee-track{animation:none}
  /* Parada, la mitad de los logos quedaba detras del overflow:hidden sin manera de
     llegar a ellos. Ahora la tira se arrastra a mano. */
  .marquee{overflow-x:auto;overscroll-behavior-inline:contain}
  /* keep the dissolve and the progress bar — drop only the movement */
  .hero-slide.is-active img{animation:none;transform:none}
  .hero-slide picture{transform:none}
  .hero-slide{transition:opacity .6s ease}
  .loader{animation-delay:.4s}
  .loader-plus{animation:none}
  [data-ilum] .w{opacity:1 !important}
  html.js [data-reveal],html.js [data-reveal-group]>*,html.js [data-clip]{opacity:1;transform:none;clip-path:none}
  .pill{animation-delay:.5s}
}

/* ---------- LO QUE ENTREGAMOS ----------
   La baraja de Brand Appart, medida en su sitio. Lo que la hace ver bien NO es un
   scale(): el contenedor tiene `perspective:256px` y cada tarjeta se empuja en Z.
   El encogimiento sale solo de la perspectiva — 256/(256+30)=0.895, que es
   exactamente la proporción de anchos que medí (770/860). Con scale() la baraja
   se ve plana; con Z hay profundidad de verdad. Es estática: no se anima con el
   scroll, igual que la suya. */
.entregas{padding:clamp(60px,8vw,120px) clamp(14px,3vw,48px) clamp(80px,10vw,150px)}
.entregas-h{text-align:center;margin-bottom:clamp(40px,5vw,80px);
  font-size:clamp(34px,5.4vw,78px);line-height:1;
  text-transform:none;letter-spacing:-.052em}
.entregas-h span{display:block}
/* el juego de opacidades del original: la primera línea se retira, la segunda manda */
.entregas-h1{color:var(--texto);opacity:.38}
.entregas-h2{color:var(--texto)}

/* La mecánica real, leída del DOM en vivo de la referencia. El estilo que el
   sitio escribe en cada tarjeta mientras se hace scroll es:
       transform: translate(0px,-604px) rotateX(15deg)
   y en su titular, por separado:
       transform: translate(0px,-100px) rotateX(40deg)
   O sea NO es profundidad: la tarjeta SUBE y SE INCLINA al salir, y su titular
   sube más rápido y se inclina más. Ese desfase entre la tarjeta y su texto es lo
   que da la sensación de que la pieza flota y pasa, en vez de sólo deslizarse.
   La lista va anclada mientras dura la secuencia; el z-index es explícito y
   descendente, porque el orden del DOM pintaría la última encima de la primera. */
.pila-wrap{position:relative}
.pila{position:relative;max-width:min(1400px,94vw);margin-inline:auto;perspective:1200px}
.pila-item{position:absolute;top:0;left:0;right:0;
  transform-origin:50% 0;backface-visibility:hidden;will-change:transform}
.pila-item:first-child{position:relative}
/* reposo: la baraja, cada una un poco más chica y más abajo */
.pila-item:nth-child(1){z-index:4}
.pila-item:nth-child(2){z-index:3;transform:translateY(18px) scale(.955)}
.pila-item:nth-child(3){z-index:2;transform:translateY(36px) scale(.910)}
.pila-item:nth-child(4){z-index:1;transform:translateY(54px) scale(.865)}
/* Todas del MISMO alto, y generoso. Antes las de atrás llevaban height:100% y su
   alto lo definía un elemento absoluto sin altura propia — por eso salían
   cortadas. Un min-height compartido las empareja y les da aire para que la tira
   de imágenes luzca, que es de lo que vive esta sección. */
.pila-item .proy{min-height:clamp(440px,42vw,660px)}
.proy-cuerpo{will-change:transform}
@media (prefers-reduced-motion:reduce){
  /* sin vuelo ni anclaje: la baraja se vuelve lista y se lee igual */
  .pila{perspective:none}
  .pila-item,.pila-item:first-child{position:relative;transform:none !important;margin-bottom:16px}
}

.proy{background:var(--pbg);color:var(--pfg);border-radius:clamp(14px,1.4vw,22px);
  padding:clamp(26px,3.4vw,54px);position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr;gap:clamp(18px,2vw,30px);
  box-shadow:0 30px 70px rgba(16,3,3,.28)}
/* Fuera de .proy-cuerpo a propósito: ese envoltorio lleva will-change:transform,
   y eso lo convierte en bloque contenedor de sus hijos absolutos — el número se
   anclaba a la columna izquierda y caía encima del titular. */
.proy-num{position:absolute;top:clamp(22px,3vw,46px);right:clamp(22px,3vw,46px);
  font-family:'NeurealMono','Courier New',monospace;font-size:clamp(15px,1.4vw,22px);
  color:var(--pfg);opacity:.9}
.proy-t{font-size:clamp(26px,3.5vw,54px);line-height:1.04;letter-spacing:-.03em;
  max-width:min(15em,calc(100% - 3.5em));text-transform:none}
.proy-plus{width:clamp(16px,1.5vw,22px);height:auto;color:var(--pfg);opacity:.9}
.proy-d{font-size:clamp(14px,1.15vw,17px);line-height:1.5;max-width:44em;color:var(--pfg2)}
.proy-cita{font-size:clamp(16px,1.5vw,22px);line-height:1.32;max-width:20em;color:var(--pfg)}
.proy-quien figcaption{display:flex;flex-direction:column;gap:1px;
  font-size:clamp(12px,1vw,15px);line-height:1.35}
.proy-quien b{font-weight:500;color:var(--pfg)}
.proy-quien span,.proy-quien em{color:var(--pfg2);font-style:normal}
.proy-img{border-radius:10px;overflow:hidden}
.proy-img img{width:100%;height:auto;display:block}

.proy-cuerpo{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,26px)}
@media (min-width:900px){
  /* Como en las láminas: sólo la tarjeta que lleva testimonial parte en dos
     columnas — la cita necesita ir al lado de la tira. Las demás dejan la tira A
     TODO EL ANCHO, que es donde las piezas realmente lucen; meterlas en media
     columna las dejaba en un tercio del tamaño. */
  .proy:has(.proy-cita){grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    align-items:stretch;column-gap:clamp(26px,3vw,58px)}
  .proy:has(.proy-cita) .proy-cuerpo{justify-content:center}
  .proy:has(.proy-cita) .proy-img{align-self:center}
  .proy:not(:has(.proy-cita)){grid-template-columns:1fr;
    grid-template-rows:auto 1fr;align-items:start}
  .proy:not(:has(.proy-cita)) .proy-img{align-self:end}
  .proy:not(:has(.proy-cita)) .previsor{align-self:end}
  .proy-img img{width:100%;height:auto}
}
@media (max-width:899px){
  /* en móvil la baraja se aplana: en una pantalla angosta las tarjetas de atrás
     no alcanzan a asomar y sólo estorbarían al lector */
  .pila{perspective:none}
  .pila-item,.pila-item:first-child{position:relative;margin-bottom:14px}
  /* :nth-child(n) no selecciona nada distinto: está sólo para empatar la
     especificidad de las reglas de apilado (.pila-item:nth-child(2..4)), que si
     no le ganan a este transform:none y dejan las tarjetas encogidas al 86% en
     el teléfono. Antes lo tapaban los transforms en línea de GSAP; al acotar la
     baraja a escritorio quedó descubierto. */
  .pila-item:nth-child(n){transform:none}
  .pila-item:last-child{margin-bottom:0}
}

/* ---------- PROYECTO WEB: previsualizador de dos viewports ----------
   Un screenshot no dice nada de una plataforma web: lo que se vende es el
   movimiento. Van los dos recorridos reales del sitio, corriendo a la vez.

   Antes eran dos maquetas de aparato flotando en la tarjeta, y entre ellas
   quedaban 400px de nada: dos objetos chicos en mucho aire. Aquí es UNA pieza
   que ocupa todo el ancho —como la tira de imágenes de las otras tarjetas—
   partida en dos viewports por una costura, cada uno con su rótulo. Se lee como
   un previsualizador, no como dos fotos de dispositivos.

   Cada vista lleva su propia barra en vez de haber una barra común arriba: así
   la pieza se puede voltear a columna en el teléfono sin que el rótulo se
   despegue de lo que rotula.

   El ancho de la vista móvil sale de su proporción y del alto de la pieza, así
   que su video calza exacto y la costura no corta nada. */
.previsor{--alto:clamp(190px,28vw,400px);--barra:28px;
  --movil:calc((var(--alto) - var(--barra)) * 420 / 900);
  display:flex;height:var(--alto);border-radius:12px;overflow:hidden;
  background:#131011;box-shadow:0 14px 34px rgba(16,3,3,.16)}
.vista{display:flex;flex-direction:column;min-width:0}
.vista-barra{flex:0 0 auto;height:var(--barra);display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:0 11px;background:#1C1819;
  font-family:'NeurealMono','Courier New',monospace;font-size:9px;
  letter-spacing:.07em;text-transform:uppercase;color:#EDE7E1}
/* la URL se retira, el rótulo del aparato manda: es el dato que hay que leer */
.vista-barra b{font-weight:400;text-transform:none;letter-spacing:.05em;opacity:.40;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vista-barra em,.vista-barra i{font-style:normal}   /* jamás itálica en caja alta */
.vista-barra em{flex:0 0 auto;opacity:.72;display:inline-flex;align-items:center;gap:5px}
/* el icono dice de un vistazo cuál pantalla es cuál; la palabra lo confirma */
.vista-icono{width:11px;height:11px;flex:0 0 auto;stroke:currentColor}
/* recorte por abajo, nunca por los lados: una página sigue hacia abajo, así que
   perder el pie se nota mucho menos que perder media columna */
.vista video{flex:1;min-height:0;display:block;width:100%;
  object-fit:cover;object-position:top center;background:#131011}
.vista-desk{flex:1}
.vista-movil{flex:0 0 var(--movil);border-left:1px solid rgba(255,255,255,.14)}
.vista-movil .vista-barra{justify-content:center}

@media (max-width:899px){
  /* En 260px de ancho un viewport de escritorio al lado de un teléfono son dos
     miniaturas ilegibles. En columna cada uno se ve a su tamaño: la página
     completa a todo el ancho, y el teléfono abajo con su proporción real. */
  .previsor{flex-direction:column;height:auto;--barra:22px}
  .vista-barra{font-size:8px;padding:0 9px}
  .vista-desk video{flex:0 0 auto;aspect-ratio:1280/434}
  .vista-movil{flex:0 0 auto;align-items:center;padding-bottom:16px;
    border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .vista-movil .vista-barra{width:100%}
  .vista-movil video{flex:0 0 auto;width:min(44%,158px);aspect-ratio:420/900;
    margin-top:16px;border-radius:9px}
}

/* ---------- VER PROYECTO ----------
   Medido de la lámina de Alan: pastilla de 247x60 con trazo de 3px sobre una
   tarjeta de 1458 de ancho, ojo de 33 y la flecha aparte a 24. Aquí va en
   proporciones para que escale con la tarjeta en vez de quedarse fija.

   El hover invierte: la pastilla se llena de tinta y el texto toma el color de
   la tarjeta. Como la tinta y el fondo son variables por tarjeta, la inversión
   funciona sola en cualquiera de las cuatro sin escribir un color a mano. */
.proy-fila{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,52px);flex-wrap:wrap}
.ver{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none;
  color:var(--pfg);gap:clamp(14px,1.7vw,24px);border-radius:999px;
  transition:transform .18s ease}
.ver-flecha{width:clamp(20px,1.9vw,28px);height:auto;flex:0 0 auto;
  transition:transform .3s cubic-bezier(.2,.8,.3,1)}
/* Todo medido sobre la lámina y expresado como proporción de la tarjeta:
     trazo      2.15 de 60 de alto = 3.6%   (mi conteo previo de 3px contaba el
                                             antialiasing; por eso salía gordo)
     caja alta  14 de 60 = 23.3%  ->  cuerpo = 33.5% del alto de la pastilla
     rótulo     144 de ancho, y Neureal a su espaciado natural da 142: lo que se
                lee "amplio" es la caja de la propia fuente, no tracking añadido */
.ver-pastilla{display:inline-flex;align-items:center;
  gap:clamp(11px,1.03vw,15px);height:clamp(44px,3.85vw,56px);
  padding-inline:clamp(17px,1.67vw,25px) clamp(15px,1.48vw,22px);
  border:2px solid currentColor;border-radius:999px;
  font-family:'Neureal','NeurealMono','Courier New',monospace;
  font-size:clamp(14.5px,1.29vw,18.8px);font-weight:400;letter-spacing:.025em;
  text-transform:uppercase;white-space:nowrap;
  transition:background-color .28s ease,color .28s ease}
.ver-ojo{width:clamp(24px,2.26vw,33px);height:auto;flex:0 0 auto}
/* La inversión pinta el fondo con --pfg, NO con currentColor: currentColor se
   resuelve contra el color YA declarado en esta misma regla, así que habría
   pintado la pastilla del color del texto invertido y todo se volvía invisible. */
.ver:hover .ver-pastilla,.ver:focus-visible .ver-pastilla{
  background:var(--pfg);border-color:var(--pfg);color:var(--pbg)}
.ver:hover .ver-flecha{transform:translateX(7px)}
.ver:active{transform:translateY(1px)}
.ver:focus-visible{outline:2px solid var(--pfg);outline-offset:7px}
@media (max-width:899px){
  .proy-fila{gap:clamp(18px,4vw,26px)}
  .ver{gap:14px}
  .ver-pastilla{border-width:1.5px}   /* 3.6% de una pastilla de 44 */
}
@media (prefers-reduced-motion:reduce){
  .ver,.ver-flecha,.ver-pastilla{transition:none}
  .ver:hover .ver-flecha{transform:none}
}

/* ---------- SERVICIOS EN TÁCTIL ----------
   Va al final del archivo a propósito: la regla de .serv:last-child del corte de
   1080px deja un aspect-ratio 2.15/1.2 que ningún corte posterior anulaba, y como
   :last-child pesa más que .serv, la tercera tarjeta salía con otra forma y se
   desbordaba de la rejilla. Desde aquí gana por orden, sin !important.

   El otro cambio es de fondo: el alto lo manda el CONTENIDO, no una medida fija.
   Yo había puesto un min-height para cerrada y otro para abierta, y con tres
   textos de largos distintos no hay un número que sirva para los tres: o sobra
   hueco o recorta. Ahora la caja del texto crece de 0fr a 1fr — es decir, a su
   alto real— así que la tarjeta se alarga exactamente lo que mide su párrafo, y
   al cerrar vuelve clavada a su tamaño original. */
@media (hover:none){
  .serv,.serv:last-child{aspect-ratio:auto;min-height:0;
    display:flex;flex-direction:column;justify-content:flex-end}
  /* El espacio de la FOTO se reserva como padding arriba del cuerpo, no como
     min-height de la tarjeta. La diferencia importa: con min-height, el texto que
     se despliega cabía dentro del hueco que ya existía y la tarjeta no crecía ni
     un pixel — que es justo lo que se pedía que hiciera. Con padding, el alto es
     siempre "foto + lo que haya", así que abrir la alarga de verdad y cerrar la
     devuelve clavada a su medida. */
  .serv-body{position:relative;inset:auto;
    padding:44vw 20px 20px;gap:0;justify-content:flex-end}
  /* Dos renglones reservados para el título: "Software con agentes de IA" parte
     en dos donde los otros dos caben en uno, y con eso la tercera tarjeta salía
     26px más alta que sus hermanas. Reservando el alto, las tres cierran igual
     sea cual sea el largo del título. */
  .serv-t{min-height:2.2em}
  .serv-abre{margin-top:13px}
  /* En táctil no hay hover que revele nada, así que el + de contorno sobra: la
     afordancia la lleva escrita el chip, y cerrada/abierta se distinguen por dos
     piezas distintas, no por un mismo icono girado. */
  .serv-plus{display:none}
  .serv-chip{display:inline-block;background:var(--naranja);color:var(--blanco);
    font-size:13.5px;font-weight:500;line-height:1;letter-spacing:.01em;
    padding:12px 19px;border-radius:999px;white-space:nowrap}
  .serv-cerrar{display:none;width:42px;height:42px;border-radius:999px;
    background:var(--naranja);color:var(--blanco);
    align-items:center;justify-content:center}
  .serv-cerrar svg{width:19px;height:19px;display:block}
  .serv.is-open .serv-chip{display:none}
  .serv.is-open .serv-cerrar{display:inline-flex}
  /* 0fr → 1fr: la única forma de animar hasta "lo que mida el contenido" */
  .serv-caja{display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .55s var(--ease)}
  .serv.is-open .serv-caja{grid-template-rows:1fr}
  /* El aire entre el chip y el texto va como margen de la CAJA y sólo cuando
     está abierta: puesto como padding del hijo no colapsaba —el padding se suma
     por fuera del min-height:0— y quedaban 15px de nada con la tarjeta cerrada. */
  .serv-caja > *{overflow:hidden;min-height:0}
  .serv-caja{margin-top:0;transition:grid-template-rows .55s var(--ease),margin-top .55s var(--ease)}
  .serv.is-open .serv-caja{margin-top:15px}
  .serv-d{max-width:none;transform:none}
  .serv.is-open .serv-d{opacity:1}
  .serv.is-open::after{opacity:1}
  .serv.is-open::before{opacity:1}
}

/* ============================================================================
   PASE DE USABILIDAD  ·  agosto 2026
   Todo lo de aquí abajo sale de medir el sitio en vivo, no de opinar:
   contraste sobre los píxeles ya compuestos, tamaños de objetivo táctil con
   getBoundingClientRect, y recorrido con Tab de verdad por CDP.
   Va al final del archivo a propósito, para ganar por orden y no por !important.
   ========================================================================= */

/* ---------- Saltar al contenido ----------
   No había ninguno: con Tab desde el tope había que pasar por todo el dock y el
   menú antes de tocar la página. Sólo aparece cuando el teclado lo enfoca. */
.saltar{position:fixed;top:10px;left:max(10px,var(--riel-zona,10px));z-index:1000;
  transform:translateY(-160%);transition:transform .2s var(--ease);
  background:var(--naranja);color:var(--tinta);
  font-family:'Neureal','Courier New',monospace;font-size:14px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;text-decoration:none;
  padding:14px 20px;border-radius:10px;box-shadow:0 8px 28px rgba(16,3,3,.4)}
.saltar:focus{transform:translateY(0)}
/* Y el destino tiene que poder RECIBIR el foco: ver el tabindex="-1" del <main>
   en index.html. Esto es lo que evita que ese foco —programatico, entra por el
   enlace de arriba— dispare el anillo de marca de mas abajo y pinte un
   rectangulo naranja alrededor de la pagina completa. */
main:focus,main:focus-visible{outline:none}

/* ---------- Anillo de foco de marca ----------
   Con Tab real el foco SÍ se veía, pero salvo cuatro elementos era el anillo por
   omisión de Chrome: azul claro de 1px. Sobre el oxblood casi no existe, cambia
   de navegador a navegador y no es de la marca. Un solo token para todo, en
   :where() para que no gane peso contra las reglas que ya existían. */
:where(a,button,[tabindex],summary):focus-visible{
  outline:2px solid var(--naranja);outline-offset:3px;border-radius:4px}
:where(.foot,.oport-card) :where(a,button):focus-visible{outline-color:currentColor}

/* ---------- El disclosure de servicios es un <button> de verdad ----------
   Antes era un <span> dentro de un <li tabindex="0">: te parabas ahí con Tab y
   ni Enter ni Espacio abrían nada. Ahora el control tiene semántica; esto sólo
   le quita al botón la piel que trae de fábrica. */
.serv-abre{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;
  cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}

/* ---------- Legibilidad del rótulo del manifiesto ----------
   Medido sobre píxeles compuestos: el rótulo caía a 1.27:1 en móvil (05 y 06,
   donde la foto arranca en cielo blanco) y a 1.53:1 en escritorio. El velo de la
   lámina no lleva nada arriba —ahí el rótulo iba sobre foto tranquila— así que
   se le añade una banda corta pegada al borde superior.
   Ojo con lo que NO es: no es sombra bajo la letra. Es el mismo velo de la
   tarjeta extendido a la franja donde vive el rótulo, y se apaga mucho antes de
   llegar al titular, que sigue clavado donde lo pusiste. */
.mc-velo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(10,3,3,.68) 0%, rgba(10,3,3,.55) 5%, rgba(10,3,3,.30) 11%,
    rgba(10,3,3,.10) 17%, transparent 23%)}
/* Y el rótulo deja de ir al 72%: a 10px sobre foto ese 28% de transparencia es
   justo lo que lo borra. */
.mc-tag{color:rgba(255,255,255,.96)}

@media (max-width:767px){
  /* 10px queda por debajo del piso de legibilidad; con el tracking de .22em
     además se estiraba hasta chocar con la pastilla del contador. */
  .mc-tag{font-size:11.5px;letter-spacing:.14em;
    /* "REINTERPRETAMOS PRINCIPIOS MAGISTRALES" se cortaba contra el 05/07.
       Ahora respira antes de la pastilla y, si no cabe, baja a dos renglones en
       vez de perder la mitad de la palabra. */
    max-width:calc(100% - 74px);line-height:1.35}
  .mc-velo::after{background:linear-gradient(to bottom,
    rgba(10,3,3,.72) 0%, rgba(10,3,3,.58) 4%, rgba(10,3,3,.32) 9%,
    rgba(10,3,3,.10) 14%, transparent 19%)}
}

/* ---------- El dock móvil deja de ser adivinanza ----------
   Medido: en el teléfono `.dock-tag{display:none}` no sólo escondía el rótulo,
   lo sacaba del árbol de accesibilidad. Los tres enlaces del dock —la navegación
   PRINCIPAL del sitio— no tenían nombre: un lector de pantalla decía "enlace,
   enlace, enlace". Y para quien ve, cuatro iconos sin una palabra obligan a
   adivinar cuál lleva a Contacto, que es justo a donde queremos que llegue.
   El rótulo vuelve, debajo del icono, en la voz mono del sitio. Con eso el
   nombre accesible aparece solo (es texto real) y el punto naranja sobra: el
   "estás aquí" ahora lo dice el propio rótulo al encenderse. */
@media (max-width:767px){
  .dock{padding:6px 7px 5px;border-radius:15px;gap:2px}
  .dock-link{width:auto;min-width:62px;height:auto;padding:8px 4px 7px}
  .dock-inner{flex-direction:column;gap:5px}
  .dock-tag{display:block;position:static;transform:none;opacity:1;
    background:none;border:0;padding:0;pointer-events:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;transition:none}
  .dock-tag-title{display:block;font-size:10.5px;letter-spacing:.04em;
    color:rgba(255,255,255,.66);transition:color .32s var(--dock-ease)}
  .dock-link.is-active .dock-tag-title,
  .dock.on-light .dock-link.is-active .dock-tag-title{color:var(--naranja)}
  .dock.on-light .dock-tag-title{color:rgba(255,255,255,.66)}
  .dock-dot{display:none}
  /* El botón de menú recupera su palabra y se alinea con los otros tres. */
  .dock-menu{width:auto;min-width:62px;height:auto;padding:8px 4px 7px;gap:5px;
    font-family:'Neureal','Courier New',monospace;font-size:10.5px;font-weight:400;
    letter-spacing:.04em;color:rgba(255,255,255,.66);text-transform:uppercase}
  .dock-menu[aria-expanded="true"]{color:var(--naranja)}
  .dock-menu:hover{opacity:1}
}

/* ---------- Objetivos táctiles ----------
   Medidos uno por uno: tema 28×28, idioma 22×27, sociales 32×32, los enlaces
   secundarios del menú 15px de alto y los del pie 25px. El mínimo es 44×44
   (Apple HIG) / 48 (Material). Donde hay sitio se crece de verdad; donde crecer
   rompería la composición se extiende sólo el área de toque con un ::after
   invisible, que es la salida que recomienda la propia guía. */
@media (pointer:coarse){
  .tema-b,.dock-soc{position:relative}
  .tema-b::after,.dock-soc::after{content:'';position:absolute;top:50%;left:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}
  .lang-b{padding:9px 11px;margin:-9px -3px}
  .dock-menu-secondary{gap:0}
  .dock-menu-secondary-link{padding-block:15px}
  .foot-col a{padding-block:9px}
  .foot-big{padding-block:6px;display:inline-block}
}

/* ---------- Aire bajo el dock flotante ----------
   Medido: la barra ocupa los 89px de abajo del viewport. Reservar ese alto al
   final del documento evita que el pie quede atrapado debajo, y el
   scroll-margin hace que saltar a una sección la deje ARRIBA de la barra en vez
   de por debajo. (La barra sigue pasando por encima del contenido mientras se
   hace scroll: eso es lo que es un dock flotante, no un defecto.) */
@media (max-width:767px){
  .foot{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  section[id],footer[id]{scroll-margin-bottom:100px}
  /* Y lo mismo para CUALQUIER cosa que el navegador traiga a la vista, no solo
     para las secciones: al llegar con Tab, al abrirse el teclado sobre un campo
     o cuando el JS llama a scrollIntoView, el navegador acomoda el elemento sin
     saber que los ultimos 89px los tapa la barra. Medido a 375x812, con el dock
     en 722-790: el boton de Enviar (52px) aterrizaba en 760-812 y las pastillas
     (44px) en 768-812, los dos debajo de la barra. Con este relleno quedan en
     660-712 y 668-712. Va en el contenedor de scroll y no en una lista de
     selectores: una linea, y cubre tambien lo que la lista no nombraria. */
  html{scroll-padding-bottom:100px}
}

/* ---------- El lockup de SOMOS ya no se encima ----------
   Medido a 390px: la tinta de "LatinoAmerica" bajaba 13.2px DENTRO del bloque en
   versalitas. La interlínea .52 del script es una decisión óptica y se respeta;
   lo que se corrige es el aire de después. De paso el subtítulo baja de tamaño:
   a 28px y sin interlínea competía de tú a tú con "SOMOS EXMACHINA" en vez de
   apoyarlo. */
@media (max-width:767px){
  .somos-script{margin-bottom:.30em}
  .somos-sub{font-size:21px !important;line-height:1.18;padding-top:0;max-width:19em}
}

/* ---------- Longitud de renglón ----------
   Medido: la biografía del equipo iba a 99 caracteres por renglón en escritorio,
   muy por encima de los 65–75 que se leen sin perder el hilo. */
@media (min-width:900px){
  .member-bio{max-width:62ch}
}

/* ---------- La llamada a la acción ----------
   El hallazgo más grande de toda la auditoría: la página no tenía NINGUNA.
   Para escribirnos había que abrir el menú o llegar hasta el pie, y ahí el
   mailto abre un correo en blanco: "y ahora qué escribo".
   Hereda la pastilla que ya aprobaste en "VER PROYECTO": mismo trazo, misma
   Neureal, misma inversión al pasar el cursor. */
.cta{display:inline-flex;align-items:center;gap:clamp(12px,1.3vw,18px);
  text-decoration:none;color:var(--cta-fg,var(--blanco));
  border:2px solid currentColor;border-radius:999px;
  height:clamp(50px,3.9vw,58px);padding-inline:clamp(20px,1.9vw,28px) clamp(18px,1.7vw,25px);
  font-family:'Neureal','NeurealMono','Courier New',monospace;
  font-size:clamp(14.5px,1.16vw,17px);letter-spacing:.025em;text-transform:uppercase;
  white-space:nowrap;background:transparent;
  transition:background-color .28s ease,color .28s ease,transform .18s ease}
.cta svg{width:clamp(19px,1.6vw,24px);height:auto;flex:0 0 auto;
  transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.cta:hover,.cta:focus-visible{background:currentColor}
.cta:hover span,.cta:focus-visible span,
.cta:hover svg,.cta:focus-visible svg{color:var(--cta-bg,var(--tinta))}
.cta:hover svg,.cta:focus-visible svg{transform:translateX(6px)}
.cta:active{transform:translateY(1px)}
/* Mientras el envío va en camino el botón se deshabilita, pero sin esto seguía
   invirtiéndose al pasarle el ratón —.cta:hover también le pega a :disabled— y
   se veía tan apretable como siempre. El único aviso del estado era la palabra
   "Enviando…". */
.cta:disabled{opacity:.5;cursor:progress}
.cta:disabled:hover{background:transparent}
.cta:disabled:hover span,.cta:disabled:hover svg{color:inherit}
.cta:disabled:hover svg{transform:none}
/* El pie del bloque de servicios: aquí es donde alguien ya sabe qué hacemos. */
.cta-fila{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);flex-wrap:wrap;
  margin-top:clamp(34px,4vw,58px)}
.cta-nota{margin:0;font-family:'Neureal','Courier New',monospace;
  font-size:clamp(12.5px,1vw,14px);letter-spacing:.05em;text-transform:uppercase;
  color:rgba(237,231,225,.55)}
/* En el hero va debajo del lema, con la foto detrás: por eso lleva su propio
   velo en vez de fiarse del contraste de la imagen. */
.hero .cta{margin-top:clamp(20px,2.4vw,30px);
  background:rgba(16,3,3,.34);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero .cta:hover,.hero .cta:focus-visible{background:var(--blanco)}
@media (max-width:767px){
  .cta{height:50px;font-size:14px;padding-inline:20px 17px}
  .hero .cta{margin-top:16px}
  .cta-fila{gap:14px;margin-top:30px}
  .cta-nota{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.cta,.cta svg{transition-property:background-color,color}}

/* El botón de menú trae el texto ANTES de los puntos en el marcado (así se lee
   en el escritorio, donde MENU va arriba y los puntos abajo). En la barra del
   teléfono el rótulo tiene que ir bajo el icono como sus tres hermanos, y eso lo
   arregla el orden visual, no tocar el HTML. */
@media (max-width:767px){
  .dock-menu{flex-direction:column-reverse}
}

/* .hero-copy va con pointer-events:none —el lema es decoración sobre la foto— y
   la pastilla la heredaba: se veía perfecta y NO se podía apretar. Lo cazó la
   prueba de tocar con un dedo de 44px, no la de medir el rectángulo. */
.hero .cta{pointer-events:auto}

/* Lo que faltaba de los 44px, medido con la prueba del dedo: */
@media (pointer:coarse){
  .dock-menu-section{padding-block:6px}
  /* El logo trae alto fijo y box-sizing:border-box, asi que el padding le comia
     el area en vez de darsela. Aqui crece la caja, no el relleno. */
  .brand{min-height:46px;display:flex;align-items:center}
  .lang-b{padding:12px 13px;margin:-12px -4px}
  .member-link{padding-block:15px;display:inline-block}
  .serv-chip{padding:15px 19px}
  .foot-col a{padding-block:11px}
  .foot-big{padding-block:8px}
  .tema-b::after,.dock-soc::after{z-index:1}
}

/* Los puntos del carrusel: el ::after de -17px ya daba area, pero se solapaban
   entre vecinos (11px de punto con 10px de aire y 45px de area cada uno) y el
   borde de abajo caia justo bajo el dock. Se separan y suben; el punto se sigue
   viendo igual de discreto. */
@media (max-width:767px){
  .hero-dots{bottom:calc(120px + env(safe-area-inset-bottom));gap:20px}
}
/* El ::after de -17px que promete "45px touch target" NUNCA existio: el propio
   .dot lleva overflow:hidden (necesario para que la barra de progreso se recorte
   contra la pastilla) y el pseudo salia recortado a 11x11. Lo cazo la prueba de
   tocar; medir el rectangulo no lo veia.
   La salida sin tocar el diseno: un BORDE transparente. El borde es parte de la
   caja de eventos y overflow:hidden no lo recorta —recorta el contenido— asi que
   el dedo agarra 43x31 y el punto se sigue viendo de 11px. */
@media (pointer:coarse){
  .dot{box-sizing:content-box;border:16px solid transparent;border-inline-width:10px;
    margin:-16px -10px;background-clip:content-box}
  .dot::after{content:none}
}

/* ---------- El velo de escritorio, subido ----------
   Tu propia nota en .mc-velo dice qué hacer cuando un titular se pierde: mover el
   encuadre o SUBIR ESTE PISO, nunca ponerle sombra a la letra. Medido sobre los
   píxeles compuestos, en escritorio el cuerpo caía a 2.52–2.81:1 (necesita 4.5) y
   el titular a 2.31–3.14:1 (necesita 3.0) en las tarjetas 01, 04, 05 y 06 —las de
   cielo abierto. Así que subo el piso: la radial de abajo-izquierda se alarga
   hasta cubrir la columna de texto y el piso general pasa de .20 a .28.
   La foto se sigue viendo; lo que cambia es que ahora también se lee lo que va
   encima. En las tarjetas que ya iban bien (8.6:1, 17.4:1) el cambio no se nota,
   porque sobre una foto ya oscura un velo oscuro no suma casi nada. */
@media (min-width:768px){
  .mc-velo{background:
    radial-gradient(126% 108% at 1% 116%, rgba(10,3,3,.80) 0%, rgba(10,3,3,.63) 30%,
                    rgba(10,3,3,.36) 56%, rgba(10,3,3,.12) 78%, transparent 92%),
    linear-gradient(to top, rgba(10,3,3,.30) 0%, transparent 44%),
    linear-gradient(rgba(10,3,3,.28), rgba(10,3,3,.28))}
}

/* Con el velo ya subido el cuerpo del manifiesto llegó a 3.9–4.1:1 y necesita
   4.5. Los últimos puntos no se los puedo pedir a la foto sin apagarla, así que
   salen del texto: el cuerpo pasa de 60% a 72% de blanco. Sigue siendo un peso
   claramente por debajo del <b> en blanco puro —la jerarquía de la lámina se
   conserva— pero ya se lee sobre cielo abierto. */
.mc-p{color:rgba(255,255,255,.72)}

/* El dock apartándose. La transición es corta y con salida más rápida que la
   entrada: irse tiene que sentirse discreto, volver tiene que sentirse presente. */
/* Se mueve con `translate`, NO con `transform`: la barra entra con una animación
   `dockInM ... forwards`, y una animación en fill gana sobre una declaración
   normal, así que un transform aquí no hacía absolutamente nada (lo vi: la clase
   se ponía y la barra no se movía un pixel). `translate` es propiedad aparte, se
   compone antes del transform y no compite con la animación. */
@media (max-width:767px){
  .dock{transition:translate .34s var(--ease)}
  .dock.dock-fuera{translate:0 calc(100% + 30px);
    transition:translate .26s cubic-bezier(.4,0,1,1)}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .dock,.dock.dock-fuera{transition:none;translate:none}
}

/* ============================================================================
   HERO: REDISTRIBUCIÓN  ·  todo medido, ningún elemento rediseñado
   Los tres choques que salieron al medir las cajas de tinta (createRange, no el
   rect del bloque) en 1440×900 / 1512×850 / 1280×720 / 390×844 / 390×667:

     riel del dock  ×  lema        SOLAPA 34–37 px de ancho, SIEMPRE
     MENÚ           ×  pastilla    SOLAPA a 720px de alto (9px libres a 900)
     lettering      ×  lema        SOLAPA 181–207 px, o sea DOS renglones

   Los dos primeros son duros: los iconos y el rótulo se dibujan ENCIMA de la
   letra (z-index 100 contra 6). El tercero es de composición: el lettering
   siempre cruzó el lema —en tu propio mockup se metía 116px— pero la pastilla
   nueva subió el bloque de copy y lo empeoró a 185.
   ========================================================================= */

/* 1 · El copy arranca DESPUÉS del riel, no debajo de él.
      El riel ocupa de clamp(14,1.9vw,28) a +57px. El copy empezaba en 3.4%
      (49px a 1440) — dentro del riel. Ahora sale de la misma medida del riel,
      así que se mueven juntos a cualquier ancho.
      Bonus: con esto la pastilla también deja de chocar con MENÚ, que vive en
      la misma esquina inferior izquierda. */
@media (min-width:768px){
  .hero-copy{
    left:calc(clamp(14px,1.9vw,28px) + 57px + clamp(22px,2.2vw,34px));
    /* 2 · y baja: el bloque volvió a pegarse al pie para no empujar el lema
           contra el lettering. El mínimo en px evita que en pantallas bajas el
           porcentaje lo deje encaramado. */
    bottom:clamp(30px,4.2%,50px);
  }
  /* 3 · el aire entre lema y pastilla, lo justo: 10px menos de subida */
  .hero .cta{margin-top:clamp(14px,1.5vw,20px)}
  /* 4 · y el lettering sube todo lo que le permite el logo (su tinta no puede
         invadir la cabecera). El tope en px lo mantiene siempre 12px por debajo
         del wordmark, sea cual sea el alto de ventana. */
  .hero-letter{top:clamp(84px,9.4%,112px)}
}

/* ---------- móvil ----------
   Aquí el lettering es una pieza chica que, según tu nota, va "apoyada justo
   encima del copy". Estaba anclada al 27% del alto de ventana y el copy crece
   con el ANCHO, así que en cuanto la pastilla lo hizo más alto el lema se le
   subió encima (SOLAPA 164×70 a 844, 130×56 a 667).
   La cura es anclarla a la altura real del copy en vez de a un porcentaje de
   ventana: base del copy + pastilla + aire + los tres renglones del lema.
   El lema mide 33vw de alto (medido: 128px a 390 de ancho), así que la cuenta
   se sostiene sola en cualquier teléfono. */
@media (max-width:767px){
  /* La base pasa a píxeles: con 16.4% del alto, en un iPhone SE la pastilla
     caía encima de los puntos del carrusel (SOLAPA 145×11). En px la distancia
     al dock y a los puntos es la misma en todos. */
  .hero-copy{bottom:calc(146px + env(safe-area-inset-bottom))}
  .hero-letter{bottom:calc(146px + 33vw + 78px + env(safe-area-inset-bottom));top:auto}
}

/* ---------- Los titulares del manifiesto: Dapper regular, sin dos opacidades ----
   Iban en peso 700 con los tramos <em> al 70% y los <b> al 100%: la jerarquía la
   cargaba una diferencia estática de opacidad. Ahora los dos tramos pesan y se
   ven IGUAL —Dapper regular, blanco pleno— y lo que los distingue es el orden en
   que se encienden al hacer scroll.
   El gesto no es nuevo: son los mismos valores del bloque "Desde el 2013"
   (13% → 100%, ease none, 45ms de palabra a palabra, scrub .6), para que los dos
   se sientan el mismo movimiento y no dos parecidos. */
.mc-h{font-weight:400}
.mc-h em{font-style:normal;opacity:1;transition:none}
.mc-h b{font-weight:400}
/* Ya no se mueve ni se desenfoca: lo único que cambia es la luz. */
.pal{will-change:opacity}

/* El lockup de SOMOS, segunda pasada. Con .30em de aire la tinta de
   "LatinoAmerica" seguía tocando las versalitas: medido, 1px de solape — o sea,
   pegadas. Y bajar el subtítulo a 21px dejó el acento montado a mano (.dx i, que
   es como se dibuja el Ó en Dapper) en 4px de ancho: técnicamente ahí, pero
   imposible de ver. Más aire y un punto más de cuerpo arreglan las dos. */
@media (max-width:767px){
  .somos-script{margin-bottom:.46em}
  .somos-sub{font-size:24px !important;line-height:1.2}
}

/* ============================================================================
   HERO NUEVO  ·  cinco fotos, cinco frases, Decima Mono Pro
   Todo sale de medir las cinco láminas (4320×3072) al pixel, no de tantear:

     caja alta del renglón en MAYÚSCULAS   126 px = 2.917% del ancho
     Decima Mono Pro tiene caja alta 0.700em  ->  cuerpo = 2.917/0.700 = 4.167%
     altura de x del renglón bajo           89 px = 2.060% -> cuerpo 4.120%
       (los dos dan el MISMO cuerpo: lo que cambia es la caja y la opacidad)
     base a base                           197 px = 1.094 del cuerpo
     margen izquierdo de la tinta          4.630% del ancho
     renglón alto   blanco puro, opacidad 1
     renglón bajo   rgb(157,157,159) sobre negro  ->  opacidad 0.618
   ========================================================================= */
/* El cuerpo de la lámina es 4.167vw. Aquí va en 4.08 y la razón es concreta: la
   lámina no tiene riel de dock, y el riel se lleva entre 96 y 115px del lado
   izquierdo. Medido con el renglón más largo renderizado de verdad ("de negocio
   con tecnología infalible"), el cuerpo máximo que entra en UN renglón es 4.08vw justo,
   o sea el filo. Uso 3.96vw: 3% por debajo del techo, que es el margen que hace
   falta para que no dependa de un redondeo. Son 5% menos que la lámina —no se
   distingue a ojo— y es lo que hace que las cinco frases midan dos renglones y ni
   uno más, en cualquier ancho. */
.lema{margin:0;font-family:'Decima','Courier New',monospace;font-weight:400;
  font-size:3.96vw;line-height:1.094;
  color:var(--blanco);text-transform:none}
.lema-vis{display:block}
.lema-alta,.lema-baja{display:block;white-space:pre-wrap}
/* Los dos renglones NO llevan el mismo tracking, y eso hay que decirlo porque no
   se ve a ojo: resolviéndolo contra las medidas reales del archivo de fuente
   (avance 0.600em y los sidebearings exactos de C/S y de y/a) la lámina da
   0.0367em en las mayúsculas y 0.0127em en las minúsculas. Es el movimiento
   clásico —la caja alta pide más aire que la baja— y si se promedia en un solo
   valor el segundo renglón sale 27px largo. */
.lema-alta{text-transform:uppercase;letter-spacing:.0367em}
.lema-baja{letter-spacing:.0127em}
/* El segundo renglón NO es otro color: es el mismo blanco a 61.8%, que es lo que
   mide la lámina. Así funciona igual sobre la flor negra y sobre el ojo claro. */
.lema-baja{opacity:.618}
/* El cursor del tecleo, del ancho de un carácter de la propia mono. */
.lema-cur{display:inline-block;width:.6em;height:.86em;vertical-align:-.1em;
  background:var(--naranja);margin-left:.06em;animation:cursorLema 1s steps(2) infinite}
@keyframes cursorLema{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.lema-baja .lema-cur{background:currentColor}

/* El velo. "Una opacidad mínima muy elegante": sube sólo desde el borde inferior,
   se apaga antes de la mitad y no toca la parte alta de la foto. Sobre la flor
   negra y la Venus no se nota; sobre el ojo y el pescador es lo que hace que el
   renglón al 61.8% siga siendo legible. */
.hero-velo{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(to top,
    rgba(10,3,3,.62) 0%, rgba(10,3,3,.44) 12%, rgba(10,3,3,.22) 26%,
    rgba(10,3,3,.07) 38%, transparent 50%)}

@media (min-width:768px){
  /* El margen izquierdo de la lámina (4.630%) cae DENTRO del riel del dock, pero
     el riel vive a media altura y el lema abajo: no se cruzan. El que sí vive en
     esta esquina es MENÚ, así que el bloque sube lo justo para que la pastilla
     pase por encima de él en vez de encimársele. */
  /* El margen de la lámina es 4.145% (mide 4.630% de TINTA y el origen de avance
     está una lsb de la "C" antes). El problema: a 1440 eso son 60px y el riel del
     dock llega hasta el 84. O sea que el texto SIEMPRE arranca dentro de la
     columna del riel, y que no se vea encimado depende de que no coincidan en
     vertical — medido, dejan de coincidir arriba de ~640px de alto de ventana.
     Eso es que no choque por suerte, no por construcción. Y en cuanto un renglón
     parte en dos el bloque crece hacia arriba y se mete de lleno.
     Así que el texto arranca DESPUÉS del riel, calculado desde su misma medida.
     Es lo único que se aparta de la lámina, y se aparta porque el riel es un
     elemento que me pediste respetar y la lámina no lo tiene. */
  /* El margen derecho baja a 2.5%: con 6% la frase mas larga ("de negocio con
     tecnologia infalible", 34 caracteres = 20.83 em con su tracking) no cabia en
     un renglon a 1440 ni a 1024, y partia en dos. Con 2.5% el ancho util pasa de
     86.6% a 90.1% y entra con holgura en todos los anchos. Las cinco frases miden
     lo mismo y ocupan dos renglones, ni uno mas. */
  .hero-copy{
    left:calc(clamp(14px,1.9vw,28px) + 57px + clamp(20px,1.6vw,30px));
    right:2.5%;bottom:clamp(78px,9.2%,112px)}
}
@media (max-width:767px){
  /* La lámina es de escritorio. En el teléfono el cuerpo sale del renglón más
     largo ("de negocio con tecnología infalible", 34 caracteres): a 4.167vw
     quedaría en 16px, ilegible. Sube a 5.6vw y ese renglón parte en dos, que en
     una mono es limpio porque la retícula no se mueve. */
  /* El cuerpo NO sale de un tanteo: sale de medir el renglón más largo renderizado
     de verdad ("de negocio con tecnología infalible", 34 caracteres) contra el
     ancho disponible, y quedarse con el cuerpo máximo que entra en UN renglón.
     Medido: 4.29vw es el techo; uso 4.16vw, 3% abajo, para no depender de un redondeo.
     Como todo va en vw, la proporción es la misma en cualquier teléfono: entra
     igual en un SE de 360 que en un Pro Max de 430.
     A 5.6vw —lo que tenía— tres de las cinco frases partían en dos renglones. */
  .lema{font-size:4.16vw;line-height:1.34}
  .lema-alta{letter-spacing:.026em}
  .lema-baja{letter-spacing:0}
  .hero-copy{left:3.4%;right:3.4%}
}

/* Y la barra tampoco se pinta con movimiento reducido: sin animación no hay
   animationend, así que el carrusel se queda quieto de verdad. Los puntos siguen
   funcionando, o sea que ninguna foto queda fuera del alcance del usuario. */
@media (prefers-reduced-motion:reduce){
  .hero.is-live .dot.is-active .dot-fill{animation:none;transform:scaleX(1)}
}

/* El carácter que está parpadeando mientras se teclea. Naranja de marca y un
   punto más apagado que la letra definitiva, para que se lea como ruido de fondo
   del proceso y no como una palabra con una errata. */
.lema-ruido{color:var(--naranja);opacity:.82}
@media (prefers-reduced-motion:reduce){.lema-ruido{color:inherit;opacity:1}}

/* ============================================================================
   EQUIPO: QUE SE VEA QUÉ PERTENECE A QUÉ
   El problema no era falta de espacio, era falta de GRAMÁTICA: retrato, nombre,
   nombre completo, rol y biografía iban todos en el mismo naranja, apilados, sin
   una sola señal de dónde termina uno y empieza el otro.
   La solución no inventa lenguaje nuevo: usa el que ya habla el sitio.
     · la pastilla naranja del número        —  igual que .mc-num del manifiesto
     · el filete que cierra un bloque        —  igual que --linea en todas partes
     · la pastilla mono para una etiqueta    —  igual que .serv-chip
     · el signo + antes del cuerpo de texto  —  igual que .mc-plus y .serv-plus
   Con eso la tarjeta se lee en cuatro tiempos sin que haya que explicarla.
   ========================================================================= */

/* El signo, en su sitio de siempre: entre la identidad y el texto largo. */
.member-plus{width:clamp(15px,1.5vw,20px);height:auto;color:var(--naranja);
  display:block;margin:0 0 14px;opacity:.9}
.member-txt[data-x] .member-plus{margin-left:auto}

/* El rol deja de ser un renglón más y pasa a ser una ETIQUETA: la misma pastilla
   mono que llevan los servicios, en versión de contorno para que no compita con
   el nombre. Es lo único que hacía falta para que se entienda que "Operaciones &
   Gestión" describe a la persona de arriba y no es el principio de la bio. */
/* La pastilla del rol, invertida: naranja llena con letra de tinta. Sobre el
   contorno tenía 45% de filo y se leía como un apunte; llena se lee como lo que
   es, la etiqueta que dice a qué se dedica la persona de arriba.
   La tinta va en --tinta y no en blanco a propósito: blanco sobre este naranja
   mide 3.6:1 y la tinta mide 5.7:1. La misma pastilla, mejor legible.
   Y en Decima Mono Pro, que es la voz que ya habla el hero y los pies de la
   galería, así que el rol deja de ser el único mono distinto de la página. */
.member-role{display:inline-block;
  font-family:'Decima','NeurealMono','Courier New',monospace;
  text-transform:uppercase;letter-spacing:.04em;
  background:var(--naranja);color:var(--tinta);border:0;
  border-radius:999px;padding:.62em 1.05em;line-height:1.15}

@media (max-width:767px){
  /* Cuatro tiempos, con aire proporcional: dentro de un bloque las piezas se
     tocan, entre bloques respiran. */
  .member{padding:18px 18px 24px}
  /* 1 · el retrato, con su propio suelo */
  /* El filete y el suelo del retrato siguen a la TARJETA, no a la página.
     --linea en claro es tinta al 12% —está calculada contra el fondo
     blanco— y estas fichas son oscuras en los dos temas (#1A0505 en claro,
     #260A0A en oscuro): medido, 1.01:1 sobre la ficha clara, o sea que en
     claro el filete no existía. Crema al 22% da ~1.73:1 en claro y 1.80:1
     en oscuro, que es el mismo peso discreto en los dos. */
  .member{border-color:rgba(237,231,225,.22)}
  .member-ph{margin-bottom:0;border-bottom:1px solid rgba(237,231,225,.22);padding-bottom:14px}
  /* El nombre en fraktur ya no se monta sobre el retrato: lo pisaba de lleno y
     era justo donde el retrato tiene su base. Ahora arranca debajo del filete. */
  .member-txt{padding-top:16px}
  .member-name{margin-bottom:6px}
  /* 2 · identidad: nombre grande y nombre completo pegados, son la misma cosa */
  .member-caps{margin-bottom:12px;opacity:.9}
  /* 3 · el rol, ya como etiqueta */
  .member-role{font-size:11.5px;margin-bottom:20px;opacity:1}
  /* 4 · el cuerpo, un punto más tenue para que la identidad mande */
  .member-plus{width:14px;margin-bottom:12px}
  .member-bio{font-size:12.5px;line-height:1.75;opacity:.78}
  /* El número pasa a pastilla, como el contador del manifiesto: a la misma
     esquina y con la misma forma, para que se lea como parte del mismo sistema. */
  .member::before{top:14px;right:14px;
    display:grid;place-items:center;min-width:46px;height:24px;border-radius:7px;
    background:var(--naranja);color:var(--blanco);opacity:1;
    font-size:11px;letter-spacing:.06em}
}

/* ============================================================================
   LA ZONA DEL RIEL
   El dock va fijo a la izquierda, centrado en vertical, y mide 57px con su
   sangría. Eso significa que CUALQUIER contenido cuyo borde izquierdo caiga en
   esa columna se le va a encimar en algún punto del scroll —todo el contenido
   pasa por el centro de la ventana al bajar—, así que no es cuestión de
   secciones sueltas: es una franja que la página entera tiene que respetar.

   Medido a 1440: el riel termina en 85px, y ocho bloques ponían su texto en 58px
   o menos (intro, somos, equipo, pie, "lo que entregamos" en 43). Otros seis
   quedaban a 3–7px, que es exactamente "muy apretado".

   Aquí se declara la franja UNA vez y la respetan todos. Ningún elemento cambia
   de tamaño ni de forma: sólo dejan de empezar donde no cabían. */
:root{
  --riel: calc(clamp(14px,1.9vw,28px) + 57px);   /* dónde termina el riel */
  --riel-aire: clamp(20px,1.6vw,30px);           /* y el aire que va después */
  --riel-zona: calc(var(--riel) + var(--riel-aire));
}

@media (min-width:768px){
  /* El contenedor general se estrecha lo justo para que sus márgenes automáticos
     nunca sean menores que la franja. Sigue centrado —no se descuadra— y sólo
     pierde ancho en las ventanas donde de verdad hacía falta. */
  .wrap{width:min(var(--wrap), calc(100vw - 2 * var(--riel-zona)))}

  /* Las secciones con tarjeta: la tarjeta puede pasar por debajo del riel —es un
     panel de fondo y el dock es cristal, ahí no estorba—, lo que tiene que
     librarlo es el TEXTO. Así que la sangría de la sección se calcula restándole
     a la franja el relleno que la tarjeta ya aporta por su cuenta. */
  .oport,.trabajo{padding-inline:max(clamp(10px,1.6vw,24px),
    calc(var(--riel-zona) - clamp(30px,4.5vw,68px)))}
  .equipo-sec{padding-inline:max(clamp(10px,1.6vw,24px),
    calc(var(--riel-zona) - clamp(26px,4vw,64px)))}
  .entregas{padding-inline:max(clamp(14px,3vw,48px), var(--riel-zona))}
  .pila{max-width:min(1400px, calc(100vw - 2 * var(--riel-zona)))}
}

/* ============================================================================
   PROYECTOS  ·  la retícula, medida de la lámina
   Nada de esto está estimado. La lámina (4320×3873) se midió detectando el fondo
   y separando los bloques:
     fondo            #FCFEEF
     contenido        3782px de ancho
     tres columnas    1435 : 1137 : 1101  ->  1.303 : 1.033 : 1  (NO son iguales)
     hueco            56px = 1.481% del ancho
     imagen a rótulo  43px = 1.137%
     rótulo a imagen  75px = 1.983%
     caja alta        31px = 0.820%  ->  cuerpo 1.171% (Decima tiene caja 0.700em)
     tinta            rgb(38,38,36)
   Las tres columnas terminan a distinta altura porque cada pieza lleva su propia
   proporción; eso es lo que hace la composición y por eso el aspecto va como
   variable en cada figura y no como una medida global. */
.galeria{background:#FCFEEF;color:#262624;
  padding:clamp(56px,7vw,110px) 0 clamp(60px,8vw,120px)}
.gal{container-type:inline-size;
  display:grid;grid-template-columns:1.3034fr 1.0327fr 1fr;gap:1.481cqw;
  align-items:start}
.gal-col{display:flex;flex-direction:column;gap:1.983cqw}
/* La pieza que abre la retícula. Ocupa las tres pistas pero sólo tres cuartos
   del ancho: a sangre completa se comía la sección entera. Alineada a la
   izquierda, no centrada — así su canto izquierdo cae en la misma línea que todo
   lo que viene abajo, y el cuarto que queda libre a la derecha se lee como aire
   editorial y no como un hueco. */
.gal-p--ancho{grid-column:1/-1;width:75%;margin-bottom:.5cqw}

@media (max-width:767px){
  /* en el teléfono la galería ya es de una sola columna: recortarla a 75% la
     dejaría en 270px, y un espectacular a ese tamaño no se lee */
  .gal-p--ancho{width:100%}
}
/* El radio va en el FIGURE y no en el picture, a propósito: .gal-seq —la capa de
   los cuadros del hover— lleva `border-radius:inherit`, y hereda del figure. Si
   el radio viviera sólo en el picture, la secuencia correría a escuadra dentro de
   una pieza redondeada y se vería el canto en cada cuadro. */
.gal-p{margin:0;display:block;border-radius:var(--r-md)}
.gal-p picture{border-radius:inherit}
/* El aspecto se declara por figura: la caja reserva su alto antes de que la
   imagen cargue, así que la retícula no salta ni una vez mientras baja. */
.gal-p picture{display:block;aspect-ratio:var(--ar);overflow:hidden;
  background:rgba(38,38,36,.05)}
.gal-p img{width:100%;height:100%;object-fit:cover;display:block}
/* Nombre a la izquierda, ciudad a la derecha, alineados por arriba: el nombre
   puede irse a dos renglones (Wedding Films Punta Cana lo hace en la lámina) sin
   arrastrar a la ciudad. */
.gal-cap{display:flex;justify-content:space-between;align-items:flex-start;
  /* 0.96 y no 1.137: la lamina mide TINTA a TINTA y la caja del renglon empieza
     2px arriba de la tinta. Descontado, el hueco visible cae en el 1.137% medido. */
  gap:1.2cqw;margin-top:.96cqw;
  font-family:'Decima','Courier New',monospace;font-weight:400;
  font-size:max(11px,1.171cqw);line-height:1.32;letter-spacing:.01em;color:#262624}
.gal-n{max-width:52%}
.gal-c{text-align:right;white-space:nowrap}

@media (max-width:767px){
  /* Una sola columna: a 390px de ancho, tres columnas dejarían cada pieza en
     110px y no se vería ninguna. El orden de lectura se conserva porque las
     columnas se apilan en el orden del marcado. */
  .galeria{padding:clamp(44px,9vw,64px) 0 clamp(48px,10vw,72px)}
  .gal{grid-template-columns:1fr;gap:34px;container-type:normal}
  .gal-col{gap:34px}
  .gal-cap{margin-top:12px;font-size:12.5px;gap:14px}
  .gal-n{max-width:56%}
  /* Las ciudades largas caben: se les deja partir en vez de desbordar. */
  .gal-c{white-space:normal}
}

/* ============================================================================
   EL RÓTULO DE SECCIÓN
   Manifiesto, Trabajo y Equipo abren con la misma pieza. No es un adorno: cada
   parte responde a una pregunta que el visitante ya se está haciendo.

     el filete      · "aquí empieza algo" — abre la sección
     01/03          · DÓNDE estoy. Es la respuesta que faltaba: el sitio es una
                      sola página larga y no había forma de ubicarse.
     el nombre      · la MISMA palabra que dice el dock, para que llegar confirme
                      lo que se apretó
     la cuenta      · CUÁNTO viene. Antes de siete tarjetas o siete proyectos eso
                      es información, no relleno.
     el gancho      · la razón para seguir bajando. Se ilumina palabra por palabra
                      con el mismo gesto de "Desde el 2013" (data-ilum), así que
                      no es un efecto nuevo: es el que ya tiene el sitio.
     el ⊕           · entrega. El mismo signo que separa titular de cuerpo en las
                      tarjetas, así que no hay que aprender nada.

   La fila copia la retícula de los pies de la galería —dato a la izquierda, dato
   a la derecha— para que las dos se lean como el mismo sistema. */
.rotulo{padding-top:clamp(46px,6vw,92px);padding-bottom:clamp(30px,3.6vw,54px)}
.rot-filete{display:block;height:1px;background:currentColor;opacity:.22;
  margin-bottom:clamp(16px,1.5vw,24px)}
.rot-fila{display:flex;align-items:baseline;gap:clamp(12px,1.4vw,22px);margin:0;
  font-family:'Neureal','NeurealMono','Courier New',monospace;
  font-size:clamp(12px,.98vw,14.5px);letter-spacing:.14em;text-transform:uppercase;
  line-height:1.3}
.rot-i{color:var(--naranja);flex:0 0 auto;font-variant-numeric:tabular-nums}
.rot-n{margin:0;font:inherit;font-weight:400;letter-spacing:inherit;flex:0 0 auto}
/* La cuenta se va al canto derecho, como la ciudad en los pies de la galería. */
.rot-c{margin-left:auto;text-align:right;opacity:.62}

.rot-g{margin:clamp(22px,2.6vw,40px) 0 0;
  font-weight:400;font-size:clamp(27px,3.6vw,52px);line-height:1.14;
  letter-spacing:-.014em;max-width:17em}
.rot-plus{display:block;width:clamp(16px,1.5vw,21px);height:auto;
  color:var(--naranja);margin-top:clamp(24px,2.8vw,42px)}

/* Sobre la crema de proyectos el rótulo hereda su tinta; sólo el índice y el
   signo se quedan naranjas, que es lo que los hace legibles en los dos fondos. */
.rot-claro{color:#262624}
.rot-claro .rot-filete{opacity:.2}

@media (max-width:767px){
  /* En el teléfono la cuenta baja a su propio renglón en vez de apretarse contra
     el nombre: "Siete proyectos, cuatro ciudades" no cabe al lado de "Trabajo". */
  .rotulo{padding-top:40px;padding-bottom:26px}
  .rot-fila{flex-wrap:wrap;gap:10px;font-size:11.5px;letter-spacing:.12em}
  .rot-c{margin-left:0;flex-basis:100%;text-align:left;opacity:.6}
  .rot-g{font-size:clamp(24px,7.2vw,32px);line-height:1.18;margin-top:18px;max-width:none}
  .rot-plus{width:15px;margin-top:20px}
}

/* ============================================================================
   LA PÁGINA DE CASO
   La referencia son las fichas de proyecto de Futura: la marca puesta en el
   mundo antes que cualquier explicación, y después una secuencia de imágenes con
   ritmo —a sangre, en par, centrada— separadas por aire, no por líneas.
   El chasis es el del sitio: mismo rótulo, misma retícula de dato-a-la-izquierda
   y dato-al-canto de los pies de la galería, mismo signo +, misma iluminación.
   ========================================================================= */
.caso{padding-bottom:clamp(70px,9vw,140px)}

/* La portada va a sangre y ocupa una pantalla justa: lo bastante para que la
   pieza se lea entera, no tanto como para que haya que buscar el contenido. */
.caso-portada{margin:0;position:relative;height:min(78svh,760px);overflow:hidden;
  background:var(--panel)}
.caso-portada img{width:100%;height:100%;object-fit:cover;display:block}

.caso-cab{padding-top:clamp(40px,5vw,80px)}
.caso-cab .rot-fila{margin-bottom:0}
.caso-t{margin:clamp(20px,2.4vw,36px) 0 0;font-weight:400;
  font-size:clamp(34px,5.6vw,86px);line-height:1.02;letter-spacing:-.02em;
  color:var(--texto-fuerte);text-wrap:balance}
.caso-g{margin:clamp(18px,2vw,30px) 0 0;font-weight:400;
  font-size:clamp(20px,2.3vw,34px);line-height:1.2;letter-spacing:-.01em;
  max-width:20em;color:var(--texto)}

/* La ficha: cuatro datos con la retícula de los pies de la galería. En una
   columna por dato en escritorio y apilada en el teléfono, siempre con el filete
   que la separa de lo de arriba. */
.ficha{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,32px);
  margin-top:clamp(40px,5vw,78px);padding-top:clamp(18px,2vw,28px);
  border-top:1px solid var(--linea)}
.ficha div{display:flex;flex-direction:column;gap:.55em}
.ficha dt{font-family:'Neureal','NeurealMono','Courier New',monospace;
  font-size:clamp(11px,.86vw,13px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto);opacity:.58}
.ficha dd{margin:0;font-size:clamp(15px,1.15vw,18px);line-height:1.4;color:var(--texto)}

.caso-texto{margin-top:clamp(46px,6vw,96px);max-width:none}
.caso-texto .plus{display:block;width:clamp(16px,1.5vw,21px);height:auto;
  color:var(--naranja);margin-bottom:clamp(16px,1.8vw,26px)}
.caso-texto p{margin:0;font-size:clamp(17px,1.35vw,21px);line-height:1.6;
  max-width:38em;color:var(--texto)}

/* La secuencia. Tres compases y nada más: a sangre, en par, y centrada. Con tres
   basta para dar ritmo; con más, la página se vuelve un catálogo de plantillas. */
.caso-secuencia{margin-top:clamp(56px,7vw,120px);
  display:flex;flex-direction:column;gap:clamp(22px,3vw,52px)}
.caso-fig{margin:0}
.caso-fig img{width:100%;height:auto;display:block;border-radius:var(--r-md)}
.caso-fig.es-llena{width:min(96vw,1680px);margin-inline:auto}
.caso-fig.es-llena img{border-radius:var(--r-lg)}
.caso-fig.es-centro{width:min(78vw,1080px);margin-inline:auto}
.caso-par{width:var(--wrap);margin-inline:auto;display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,32px);align-items:start}

.caso-cita{margin:clamp(60px,8vw,130px) auto 0}
.caso-cita p{margin:0;font-weight:400;font-size:clamp(22px,3vw,44px);
  line-height:1.16;letter-spacing:-.012em;max-width:17em;color:var(--texto-fuerte)}
.caso-quien{display:flex;align-items:center;gap:16px;margin-top:clamp(22px,2.6vw,38px)}
.caso-quien img{width:clamp(48px,4vw,62px);height:auto;border-radius:50%;display:block}
.caso-quien div{display:flex;flex-direction:column;gap:2px;
  font-size:clamp(13px,1vw,15.5px);line-height:1.4}
.caso-quien b{font-weight:500;color:var(--texto-fuerte)}
.caso-quien span,.caso-quien em{color:var(--texto);opacity:.7;font-style:normal}
.caso-quien em{font-family:'Neureal','NeurealMono','Courier New',monospace;
  font-size:.92em;letter-spacing:.06em}

.caso-cierre{display:flex;flex-wrap:wrap;gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(56px,7vw,120px);--cta-fg:var(--texto-fuerte);--cta-bg:var(--fondo)}
.caso-cierre .cta{color:var(--texto-fuerte)}
/* La flecha de "volver" mira al otro lado, y al pasar el cursor se va por donde
   apunta en vez de venirse: el gesto tiene que coincidir con el destino. */
.cta-atras{transform:scaleX(-1)}
.cta:hover .cta-atras,.cta:focus-visible .cta-atras{transform:scaleX(-1) translateX(6px)}

@media (max-width:767px){
  .caso-portada{height:min(64svh,520px)}
  .ficha{grid-template-columns:1fr 1fr;gap:20px 16px}
  .caso-par{grid-template-columns:1fr;gap:14px}
  .caso-fig.es-llena,.caso-fig.es-centro{width:var(--wrap)}
  .caso-secuencia{gap:16px}
  .caso-cierre{flex-direction:column;align-items:flex-start}
  .caso-cierre .cta{width:100%;justify-content:center}
}

/* La pieza que ya tiene ficha se vuelve enlace. El <a> va estirado sobre toda la
   figura —no envolviendo la imagen— para que el pie siga siendo texto suelto y
   la zona de toque sea la pieza entera. */
.gal-p--link{position:relative}
.gal-a{position:absolute;inset:0;z-index:2;border-radius:inherit}
.gal-p--link picture{transition:opacity .35s var(--ease)}
@media (hover:hover){
  .gal-p--link:hover picture{opacity:.86}
}
.gal-a:focus-visible{outline:2px solid var(--naranja);outline-offset:4px}

/* La capa donde se pasan los cuadros. Va encima de la foto base, del mismo
   tamaño, y sólo un cuadro está vivo a la vez. El fundido es de 90ms: lo justo
   para que no estrobe, lo bastante corto para que siga leyéndose como corte de
   gif y no como carrusel. */
.gal-p--seq{position:relative}
/* La capa se ata a la FOTO, no a la figura. Con inset:0 cubría todo el <figure>
   —pie incluido— y al pasar el cursor el nombre y la ciudad desaparecían debajo
   de los cuadros. Anclada arriba y con el mismo aspecto que la foto, ocupa
   exactamente su hueco y el pie se queda donde estaba. */
.gal-seq{position:absolute;top:0;left:0;right:0;aspect-ratio:var(--ar);
  z-index:1;pointer-events:none;overflow:hidden;border-radius:inherit}

/* El chip que avisa que esta pieza abre algo. Va SIEMPRE visible, no en hover: en
   un teléfono el cursor no existe, y Cewámica era el único proyecto con enlace de
   los siete —las siete se veían idénticas—. Se pone sobre la foto, abajo a la
   derecha, anclado al borde inferior de la FOTO y no de la figura, para no
   taparle el pie. pointer-events:none porque quien recibe el toque es el <a>
   estirado que ya cubre toda la pieza. */
.gal-ver{position:absolute;
  /* Una sola medida para arriba y para la derecha: el aire tiene que leerse
     igual por los dos lados, y con dos clamp distintos nunca coincide. */
  --aire:clamp(12px,1.15vw,18px);
  top:var(--aire);right:var(--aire);
  z-index:3;pointer-events:none;
  display:inline-flex;align-items:center;justify-content:center;

  /* La proporción manda sobre el número. El radio se recorta solo si dos
     esquinas de un lado no caben en ese lado: a 40px de alto, 14px dejan 12px
     de canto recto y se lee como rectángulo. Con 18 quedarían 4 y volvería a
     parecer pastilla —que es justo el error del intento anterior—. */
  min-height:40px;box-sizing:border-box;
  padding:0 1.15em;border-radius:14px;
  background:var(--naranja);color:var(--tinta);

  /* La del cuerpo del sitio, en caja de oración y peso medio. Antes iba en la
     mono en MAYÚSCULAS con tracking ancho, que es voz de rótulo técnico y no de
     botón: por eso se sentía pegado con cinta. */
  font-family:'Dapper','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:500;font-size:clamp(13px,1.02vw,15px);
  letter-spacing:-.004em;line-height:1;text-transform:none;
  white-space:nowrap;
  transition:transform .28s cubic-bezier(.22,1,.36,1)}
.gal-p--link:hover .gal-ver{transform:translateY(2px)}
/* La capa entra y sale fundiéndose sobre la foto base, no de golpe. */
.gal-seq{opacity:0;transition:opacity var(--cruce,450ms) cubic-bezier(.4,0,.2,1)}
.gal-seq.es-activa{opacity:1}
/* Y dentro, cada cuadro sólo SUBE. El que sale se queda opaco debajo hasta que
   el de arriba llegó a 1, así que nunca hay dos translúcidos a la vez ni se
   asoma el fondo por el hueco. La curva es de entrada suave —empieza rápido y
   se asienta— que es la que no deja ver el escalón. */
.gal-seq-c{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;will-change:opacity;
  transition:opacity var(--cruce,450ms) cubic-bezier(.33,0,.15,1)}
.gal-seq-c.es-viva{opacity:1}
@media (prefers-reduced-motion:reduce){
  .gal-seq-c{transition:none}
}

/* ============================================================================
   EL MANIFIESTO COMO BARAJA
   Medido del DOM en vivo de brandappart.com: la pieza que sale lleva
   translate(0,-118%) + rotateX(15deg), y su CONTENIDO, por separado,
   translate(0,-100px) + rotateX(40deg) con la opacidad al 35%. Ese desfase entre
   la tarjeta y lo que lleva dentro es lo que hace que flote en vez de deslizarse
   — si los dos se movieran igual, se leería como una diapositiva.
   De su otra pieza (cards_stack_item) viene el giro fijo por tarjeta: ±8° ahí,
   que en fotos a sangre sería demasiado; aquí va en ±1.1° y sólo sirve para que
   la baraja no se lea como una sola lámina repetida.
   ========================================================================= */
/* El apilado va condicionado a que HAYA movimiento. Sin esta condición, con
   prefers-reduced-motion el JS se salta la baraja y no pone ni z-index ni
   transforms, pero el CSS igual pone las siete en position:absolute: quedan una
   encima de otra en el mismo sitio y se ven seis menos. El apilado y la
   animación son la misma decisión y tienen que ir juntos. */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .mani-pin{position:relative}
  /* La lista deja de ser lista y pasa a ser un hueco del alto de UNA tarjeta.
     Las siete se apilan ahí dentro. */
  .mani{position:relative;display:block;aspect-ratio:2760/1276;
    perspective:1500px;perspective-origin:50% 22%}
  .mnf{position:absolute;inset:0;transform-origin:50% 100%;
    will-change:transform;backface-visibility:hidden}
  /* La sombra es lo que separa una tarjeta de la de atrás. Sin ella la baraja se
     ve plana por más que se incline. */
  .mnf::before{content:'';position:absolute;inset:0;z-index:-1;
    border-radius:inherit;box-shadow:0 34px 90px rgba(0,0,0,.5)}
  .mc-cuerpo{will-change:transform,opacity}
  /* Con las tarjetas apiladas el contador es la única pista de dónde va uno en
     las siete, así que se le sube el peso. */
  .mc-num{font-weight:500}
}

/* ============================================================================
   LA BARAJA EN EL TELÉFONO
   Aquí NO se ancla, y la razón no es pereza: anclar en un teléfono significa
   secuestrar el scroll, y el scroll táctil tiene inercia — el dedo suelta y la
   página sigue. Un anclaje pelea con esa inercia y se siente como que la página
   se traba. (Brand Appart tampoco ancla en móvil: lo medí en su sitio, ahí sus
   tarjetas sólo conservan el giro y pasan de largo.)
   La misma sensación de baraja se consigue con `sticky`: cada tarjeta se queda
   pegada un poco más abajo que la anterior, así que al bajar se van APILANDO una
   sobre otra y se ve el canto de las que quedaron debajo. Scroll nativo, inercia
   intacta, y el mismo gesto.
   ========================================================================= */
@media (max-width:899px) and (prefers-reduced-motion:no-preference){
  .mani{gap:0;padding-bottom:clamp(70px,14vw,120px)}
  /* Cada tarjeta se pega 9px más abajo que la de arriba: eso es el canto de la
     baraja, lo que deja ver cuántas quedaron atrás. El tope arranca bajo el
     rótulo para que la primera no se pegue al borde de la pantalla. */
  /* SIN will-change. Con siete tarjetas a sangre son siete capas promovidas de
     ~3 MB cada una: 20 MB de memoria de compositor en un teléfono, y eso se paga
     en tirones. GSAP promueve sola la que está animando, que es la que hace
     falta. */
  .mnf{position:sticky;top:calc(20px + var(--i,0) * 9px);
    transform-origin:50% 0%;
    /* el aire entre tarjetas es el que le da a cada una su tiempo de lectura */
    margin-bottom:clamp(26px,7vw,44px)}
  /* El velo que apaga la tarjeta enterrada. Va como capa con opacidad y NO como
     filter:brightness, y eso no es cosmético: medido con el CPU frenado 6x, el
     filter dejaba el peor cuadro en 30.4ms al asentar el scroll —un cuadro
     perdido— contra 18.7ms sin él. Un filter repinta la foto entera en cada
     cuadro; una capa opaca sólo se compone. Mismo resultado a la vista, gratis. */
  .mnf-velo{position:absolute;inset:0;z-index:4;pointer-events:none;
    background:#0A0202;opacity:0;border-radius:inherit}

  /* ---------- El apilado, sin JavaScript por cuadro ----------
     Medido en la versión anterior: 26 animaciones pegadas al scroll en esta
     sección, hasta 8 corriendo a la vez. En iPhone eso se sentía como topes,
     porque durante la inercia WebKit le baja la prioridad al hilo principal.
     Ahora un observador avisa UNA vez y estas dos transiciones las corre el
     compositor. El scroll queda 100% nativo: la inercia entera es del dedo.

     El encogido va en `scale` —la propiedad independiente— y NO en `transform`,
     porque la animación de entrada de GSAP escribe transform en línea. Son
     propiedades distintas y el navegador las compone: no se pisan. */
  .mnf{transition:scale .5s cubic-bezier(.22,1,.36,1)}
  .mnf.esta-tapada{scale:.93}
  .mnf-velo{transition:opacity .5s cubic-bezier(.22,1,.36,1)}
  .mnf.esta-tapada .mnf-velo{opacity:.42}
  /* La marca que vigila el observador. Va en el flujo, entre tarjeta y tarjeta,
     con alto cero: no ocupa lugar, no se ve, y —a diferencia de meterla dentro
     de la tarjeta— no hereda el `sticky`, así que sí cruza la línea. */
  .mnf-tope{display:block;height:0;margin:0;padding:0;list-style:none}

  /* El titular se enciende al entrar, con el mismo retraso por palabra que antes
     daba el stagger. La clase `atenuado` la pone el JS: sin script, se lee. */
  .mc-h.atenuado .pal{opacity:.13;transition:opacity .55s ease}
  .mc-h.atenuado.encendido .pal{opacity:1;transition-delay:calc(var(--w,0) * 45ms)}
  .mnf:last-child{margin-bottom:0}
  /* La sombra separa una tarjeta de la que quedó debajo. Sin ella la pila se ve
     como un solo bloque por más que estén apiladas. */
  .mnf::before{content:'';position:absolute;inset:0;z-index:-1;
    border-radius:inherit;box-shadow:0 -14px 34px rgba(0,0,0,.45)}
}

/* ============================================================================
   EL FORMULARIO DE CONTACTO
   Fricción a propósito, pero fricción amable: una pregunta a la vez, con una
   barra arriba que dice cuánto falta. Un muro de cinco campos se abandona; una
   pregunta sola se contesta, y la barra es lo que hace que valga la pena seguir.
   Todo el vocabulario es el del sitio: el rótulo de sección, la pastilla mono de
   los roles, la pastilla de la CTA, el signo +.
   ========================================================================= */
.contacto{padding-bottom:clamp(60px,8vw,120px)}
.fq{position:relative;max-width:none}
/* El riel de avance. Va arriba de todo porque su trabajo es contestar "¿cuánto
   me falta?" ANTES de que la pregunta se lea, no después. */
.fq-riel{height:2px;background:var(--linea);border-radius:2px;overflow:hidden;
  margin-bottom:clamp(20px,2.2vw,32px)}
.fq-avance{display:block;height:100%;width:20%;background:var(--naranja);
  transition:width .45s cubic-bezier(.4,0,.2,1)}
/* El atenuado va en el COLOR, no en `opacity`. La opacidad de un padre se
   aplica al grupo YA pintado: ningún hijo puede deshacerla, así que el
   `opacity:1` del número nunca hizo nada. Medido: el 02 quedaba en 2.20:1
   sobre blanco y 2.35:1 sobre #0A0202. Con el atenuado en el color, el
   número va a fuerza completa (4.69:1 en claro, 5.67:1 en oscuro) y el
   "/ 05" sube de 4.15:1 a 5.26:1. */
.fq-cuenta{font-size:clamp(11px,.9vw,13px);letter-spacing:.14em;
  color:color-mix(in srgb, var(--texto) 62%, var(--fondo));
  margin:0 0 clamp(18px,2vw,28px)}
.fq-cuenta .fq-n{color:var(--naranja-texto,var(--naranja))}

/* Los pasos se apilan en el mismo hueco: sólo uno vive a la vez. Se reserva el
   alto del más alto para que el pie no salte de pregunta en pregunta — un botón
   que se mueve mientras lo vas a apretar es de las cosas que más molestan. */
.fq-pasos{position:relative}
.fq-paso{display:none}
.fq-paso.is-viva{display:block;animation:fqEntra .38s cubic-bezier(.2,.7,.3,1) both}
@keyframes fqEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fq-preg{margin:0 0 clamp(18px,2vw,28px);font-weight:400;
  font-size:clamp(24px,3.1vw,44px);line-height:1.14;letter-spacing:-.014em;
  color:var(--texto-fuerte);max-width:16em}
.fq-ayuda{margin:clamp(14px,1.6vw,22px) 0 0;font-size:clamp(13px,1.05vw,15.5px);
  line-height:1.5;color:var(--texto);opacity:.6;max-width:34em}

/* Las opciones son pastillas, la misma forma que el rol del equipo y la CTA.
   Se contestan de un toque y avanzan solas: preguntar y luego pedir "siguiente"
   es cobrar dos veces por la misma respuesta. */
.fq-chips{display:flex;flex-wrap:wrap;gap:clamp(9px,.9vw,13px)}
.fq-chip{font-family:'Decima','NeurealMono','Courier New',monospace;
  font-size:clamp(12px,1vw,14px);letter-spacing:.03em;text-transform:uppercase;
  color:var(--texto);background:none;cursor:pointer;line-height:1.15;
  /* 48% y no 28%: el contorno de un control pide 3:1 (WCAG 1.4.11) y al 28%
     el borde componía 1.89:1 sobre blanco y 2.10:1 sobre #0A0202. Al 48%
     da 3.32:1 en claro y 4.22:1 en oscuro, y sigue siendo un filo, no una
     caja. */
  border:1px solid color-mix(in srgb, var(--texto) 48%, transparent);
  border-radius:999px;padding:.72em 1.15em;
  transition:background-color .22s ease,color .22s ease,border-color .22s ease}
.fq-chip:hover{border-color:var(--naranja)}
.fq-chip.es-puesta{background:var(--naranja);border-color:var(--naranja);color:var(--tinta)}

.fq-campo{width:100%;max-width:34em;display:block;
  font-family:inherit;font-size:clamp(17px,1.5vw,22px);line-height:1.4;
  /* El subrayado es la ÚNICA afordancia del campo, así que pide los 3:1 de
     WCAG 1.4.11, no el peso de un filete decorativo. Con --linea componía
     1.29:1 sobre blanco y 1.19:1 sobre #0A0202 — es decir, no había campo.
     Al 48% da 3.32:1 y 4.22:1, el mismo valor que las pastillas, así que
     los dos controles del formulario pesan igual. */
  color:var(--texto-fuerte);background:none;border:0;
  border-bottom:1px solid color-mix(in srgb, var(--texto) 48%, transparent);
  border-radius:0;padding:.55em 0;transition:border-color .25s ease}
.fq-campo::placeholder{color:var(--texto);opacity:.38}
.fq-campo:focus{outline:none;border-bottom-color:var(--naranja)}
.fq-area{resize:vertical;min-height:5.5em}
.fq-dos{display:flex;flex-direction:column;gap:6px;max-width:34em}
.fq-et{font-family:'Neureal','NeurealMono','Courier New',monospace;
  font-size:clamp(11px,.88vw,13px);letter-spacing:.13em;text-transform:uppercase;
  color:var(--texto);opacity:.55;margin-top:clamp(16px,1.6vw,24px)}
.fq-et:first-child{margin-top:0}

/* El resumen del último paso: se ve lo que se va a mandar antes de mandarlo.
   Es lo que quita el "¿qué puse?" justo cuando hay que apretar enviar. */
.fq-resumen{list-style:none;margin:clamp(24px,2.6vw,38px) 0 0;padding:0;
  display:flex;flex-direction:column;gap:7px;max-width:34em}
.fq-resumen li{display:flex;gap:12px;font-size:clamp(12.5px,1vw,14.5px);line-height:1.45}
.fq-resumen b{flex:0 0 auto;min-width:8.5em;font-weight:400;
  font-family:'Neureal','NeurealMono','Courier New',monospace;
  font-size:.92em;letter-spacing:.08em;text-transform:uppercase;
  color:var(--texto);opacity:.5}
.fq-resumen span{color:var(--texto-fuerte)}

.fq-error{margin:clamp(16px,1.6vw,22px) 0 0;font-size:14px;color:var(--naranja);
  max-width:34em}
.fq-pie{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(28px,3.2vw,48px);--cta-fg:var(--texto-fuerte);--cta-bg:var(--fondo)}
.fq-sig{color:var(--texto-fuerte)}
.fq-atras{display:inline-flex;align-items:center;gap:9px;background:none;border:0;
  cursor:pointer;padding:.6em .2em;color:var(--texto);opacity:.62;
  font-family:'Neureal','NeurealMono','Courier New',monospace;
  font-size:clamp(12px,.95vw,14px);letter-spacing:.09em;text-transform:uppercase;
  transition:opacity .22s ease}
.fq-atras:hover{opacity:1}
.fq-atras svg{width:18px;height:auto;transform:scaleX(-1)}

.fq-listo{padding:clamp(40px,5vw,80px) 0}
.fq-listo .plus{display:block;width:clamp(18px,1.7vw,24px);height:auto;
  color:var(--naranja);margin-bottom:clamp(18px,2vw,28px)}
.fq-listo-t{margin:0;font-weight:400;font-size:clamp(26px,3.4vw,48px);line-height:1.12;
  letter-spacing:-.014em;color:var(--texto-fuerte);max-width:14em}
.fq-listo-p{margin:clamp(16px,1.8vw,26px) 0 0;font-size:clamp(15px,1.2vw,18px);
  line-height:1.55;color:var(--texto);opacity:.7;max-width:30em}

/* ---------- Lo que el prospecto se lleva ----------
   Las tres preguntas son el regalo de reciprocidad: acaba de contarnos su
   presupuesto y esto le sirve aunque nunca contrate. Van numeradas con la mono
   del sitio y en naranja, como el resto de los conteos —el 01/07 del manifiesto,
   el 01/05 del formulario—, para que se lean como una lista de la casa y no como
   una viñeta de plantilla. */
.fq-listo-q{margin:clamp(26px,3vw,42px) 0 0;font-size:clamp(15px,1.2vw,18px);
  line-height:1.55;color:var(--texto);max-width:30em}
.fq-listo-l{margin:clamp(12px,1.4vw,18px) 0 0;padding:0;list-style:none;
  counter-reset:pregunta;max-width:34em}
.fq-listo-l li{counter-increment:pregunta;position:relative;
  /* el sangrado deja sitio al número; en em para que crezca con la letra */
  padding-left:2.6em;margin-top:clamp(10px,1.1vw,15px);
  font-size:clamp(15px,1.2vw,18px);line-height:1.55;color:var(--texto);opacity:.86}
.fq-listo-l li::before{content:counter(pregunta,decimal-leading-zero);
  position:absolute;left:0;top:.18em;color:var(--naranja);
  font-family:'Neureal','NeurealMono','Courier New',monospace;
  font-size:.78em;letter-spacing:.06em}

/* El botón hereda su tinta del bloque, como ya lo hacen .fq-pie y
   .caso-cierre. Sin estas dos variables, .cta se cae a su valor por omisión
   —var(--cta-fg, var(--blanco))— y en claro pinta blanco sobre la página
   blanca: 1.00:1, botón invisible. Con ellas da 20.26:1 en claro y sigue
   igual en oscuro, porque las dos son roles del tema. */
.fq-cal{margin:clamp(30px,3.4vw,48px) 0 0;
  --cta-fg:var(--texto-fuerte);--cta-bg:var(--fondo)}
.fq-cal-n{margin:clamp(14px,1.5vw,20px) 0 0;font-size:clamp(13px,1vw,15px);
  line-height:1.55;color:var(--texto);opacity:.62;max-width:32em}
/* sin calendario puesto, el teléfono queda solo y necesita su propio aire */
#fq-tel{margin-top:clamp(22px,2.4vw,32px)}
/* La misma cuenta que ya está anotada en .member-role, aplicada a las
   pastillas que se quedaron fuera: blanco sobre #FF3700 da 3.62:1 y la
   tinta 5.59:1. Vale igual en los dos temas, porque el naranja de marca no
   se mueve. Va aquí abajo para ganar por orden a las reglas de táctil y de
   móvil, que están más arriba en el archivo. */
.mc-num{color:var(--tinta)}
.mnf:hover .mc-num{color:var(--naranja-texto,var(--naranja))}
/* .serv-cerrar es sólo icono (su mínimo es 3:1 y ya lo cumplía); va con su
   gemelo para que las dos caras del mismo control se pinten igual. */
.serv-chip,.serv-cerrar{color:var(--tinta)}
@media (max-width:767px){
  .member::before{color:var(--tinta)}
}


@media (max-width:767px){
  /* el botón a lo ancho: es la única acción de la pantalla y a una mano
     conviene que el pulgar no tenga que apuntar */
  .fq-cal .cta{display:flex;width:100%;justify-content:space-between}
}

@media (max-width:767px){
  .fq-preg{font-size:clamp(22px,6.4vw,30px);max-width:none}
  .fq-chips{gap:8px}
  /* 44px de alto real: es un formulario, y aquí un toque fallido cuesta un lead */
  .fq-chip{font-size:12px;padding:.85em 1.05em;min-height:44px;display:inline-flex;
    align-items:center}
  .fq-campo{font-size:16px}     /* 16px o iOS hace zoom solo al enfocar */
  .fq-area{min-height:6.5em}
  .fq-pie{flex-direction:row-reverse;justify-content:space-between;gap:10px}
  .fq-sig{flex:1 1 auto;justify-content:center;min-height:52px}
  .fq-atras{min-height:52px}
  .fq-resumen b{min-width:7em}
}
/* =========================================================================
   CONFIANZA
   Lo que faltaba para que un desconocido se anime a escribir: decir a dónde van
   sus datos, en qué carácter están los logos del muro y qué dijo un cliente de
   verdad. Nada de esto inventa una pieza de diseño: son los tokens y las
   familias que ya existen, puestos al servicio de información que faltaba.
   ========================================================================= */

/* El aviso al pie del último paso. El enlace TIENE que verse: la hoja pone
   `a{color:inherit;text-decoration:none}` en la línea 158, global y sin
   excepciones, y aquí se devuelve el subrayado. Un enlace legal que no parece
   enlace es lo mismo que no tenerlo. */
.fq-aviso{max-width:34em}
.fq-aviso a{color:var(--texto-fuerte);text-decoration:underline;
  text-underline-offset:.22em;text-decoration-thickness:1px}
.fq-aviso a:hover{color:var(--naranja)}

/* La línea que califica el muro de logos. Discreta a propósito: su trabajo es
   quitar una duda, no abrir un tema. */
.mq-nota{margin:clamp(18px,2vw,28px) auto 0;max-width:44em;
  font-size:clamp(12.5px,1vw,14.5px);line-height:1.55;color:var(--texto);opacity:.6}

/* SIN ESTE RENGLÓN la columna Legal del pie no existe en teléfono. .foot-cols
   es flex y no envuelve (línea 1122), .foot lleva overflow:hidden (1111) y en
   móvil sólo cambia el gap (1203): con dos columnas alcanzaba, con la tercera
   se pasa de los 345px del wrap a 375px de ancho y lo que sobra se recorta.
   En escritorio no cambia nada, ahí las tres caben de sobra. */
.foot-cols{flex-wrap:wrap}

/* La prueba: una cita y tres cifras. Se estila desde ya aunque su <section>
   nazca con `hidden`, para que el día que haya testimonio real sólo haya que
   quitar el atributo y no inventar el diseño con prisa. La cita toma el tamaño
   del statement de clientes porque es la otra frase grande del sitio que no
   dice "nosotros". */
.prueba{padding:clamp(70px,9vw,130px) 0 clamp(20px,3vw,50px)}
.prueba-cita .plus{display:block;width:clamp(18px,1.7vw,24px);height:auto;
  color:var(--naranja);margin-bottom:clamp(18px,2vw,28px)}
.prueba-cita blockquote{font-size:clamp(22px,2.9vw,40px);line-height:1.18;
  letter-spacing:-.014em;color:var(--texto-fuerte);max-width:17em}
.prueba-cita figcaption{margin-top:clamp(20px,2.2vw,32px);display:flex;
  flex-direction:column;gap:5px;
  font-family:'Neureal','Courier New',monospace;
  font-size:clamp(12px,.95vw,14px);letter-spacing:.09em;text-transform:uppercase}
.prueba-quien{color:var(--texto-fuerte)}
.prueba-donde{color:var(--texto);opacity:.55}
.prueba-cifras{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,70px);
  margin-top:clamp(40px,5vw,72px);padding-top:clamp(28px,3vw,44px);
  border-top:1px solid var(--linea)}
.prueba-cifras li{display:flex;flex-direction:column;gap:8px;min-width:8em}
.prueba-cifras b{font-weight:400;font-size:clamp(30px,3.6vw,52px);line-height:1;
  letter-spacing:-.02em;color:var(--naranja)}
.prueba-cifras span{font-family:'Neureal','Courier New',monospace;
  font-size:clamp(11.5px,.92vw,13.5px);letter-spacing:.08em;text-transform:uppercase;
  line-height:1.45;color:var(--texto);opacity:.6;max-width:14em}

@media (max-width:767px){
  .prueba-cita blockquote{font-size:clamp(21px,6vw,28px);max-width:none}
  .prueba-cifras{gap:26px}
  .prueba-cifras li{min-width:0;flex:1 1 40%}
}

/* ---------- EL NARANJA DE MARCA CUANDO ES TEXTO CHICO, EN CLARO ----------
   Medido con los hex de este archivo: #FF3700 sobre #FFFFFF da 3.62:1 y
   sobre la crema de la galería (#FCFEEF) 3.55:1. AA pide 4.5:1 para texto
   normal. En oscuro, sobre #0A0202, el mismo naranja da 5.67:1 y pasa: por
   eso el problema sólo existe donde el suelo es claro.
   La paleta de marca no se toca — el naranja sigue siendo el naranja. Lo
   que se agrega es un ROL, exactamente por la misma razón por la que --pie
   ya se mueve a #EA3400 en oscuro. #DE2D00 da 4.69:1 sobre blanco y 4.59:1
   sobre la crema, y a ojo es el mismo rojo-naranja.
   Afecta a los cuatro índices de sección, a los mensajes de error del
   formulario y a los números de las tres preguntas del cierre. */
:root{--naranja-texto:#DE2D00}
:root[data-theme="dark"]{--naranja-texto:var(--naranja)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--naranja-texto:var(--naranja)}
}
/* La excepción: el rótulo de la galería NO sigue al tema. .galeria fija
   #FCFEEF en los dos, así que ahí el rol se queda en la versión oscura del
   naranja siempre — si volviera al naranja de marca en oscuro, el 02/04 se
   quedaría en 3.55:1 justo en el único sitio donde el suelo no se invierte. */
.rot-claro{--naranja-texto:#DE2D00}
.rot-i,.fq-error{color:var(--naranja-texto)}
.fq-listo-l li::before{color:var(--naranja-texto)}