/* ============ Fuentes (self-hosted, sin CDN) ============ */
@font-face{
  font-family:'Aspekta';
  src:url('../font/Aspekta-500.woff2') format('woff2'),
      url('../font/Aspekta-500.ttf') format('truetype');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../font/Inter-VariableFont_opsz,wght.woff2') format('woff2-variations'),
      url('../font/Inter-VariableFont_opsz,wght.woff2') format('woff2'),
      url('../font/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'DM Mono';
  src:url('../font/DMMono-Regular.woff2') format('woff2'),
      url('../font/DMMono-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ============ Tokens ============ */
:root{
  --blue:#0000EE;
  --ink:#1D1D1D;
  --ink-2:#5A5A5A;
  --bg:#FFFFFF;
  --bg-alt:#FAFAFA;
  --line:#EAEAEA;
  --hero-bg:#0A0A0A;
  --ph-bg:#E5E5E5;
  --ph-text:#8A8A8A;
  --radius:10px;
  --u:4px;
  --font-body:'Inter',system-ui,sans-serif;
  --font-head:'Aspekta','Inter',system-ui,sans-serif;
  --font-mono:'DM Mono',ui-monospace,'SFMono-Regular',monospace;
  --container:1200px;
  --pad:20px;
  --dur:.6s;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media(min-width:768px){:root{--pad:40px}}

/* ============ Reset & Base ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
a{color:var(--blue);text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
section{padding:calc(var(--u)*16) 0}
@media(min-width:768px){section{padding:calc(var(--u)*28) 0}}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 var(--radius) 0}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

h1,h2,h3{font-family:var(--font-head);font-weight:500;letter-spacing:-0.02em;line-height:1.08}
h1{font-size:clamp(40px,8vw,72px);line-height:1.05}
h2{font-size:clamp(30px,5vw,58px);margin-bottom:calc(var(--u)*4)}
h3{font-size:clamp(19px,2.5vw,24px);line-height:1.25}

.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:calc(var(--u)*4)}
.eyebrow--muted{color:var(--ink-2)}
.eyebrow--light{color:rgba(255,255,255,.75)}
.center{text-align:center}
.section-sub{color:var(--ink-2);max-width:560px;font-size:16px}

/* ============ Botones ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:500;font-size:15px;padding:14px 24px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;transition:transform .15s ease,opacity .15s ease,background .15s ease;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{opacity:.88}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-outline-light:hover{background:#fff;color:var(--ink)}
.btn svg{flex:none}

/* ============ Nav ============ */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:var(--font-head);font-weight:500;font-size:18px;color:var(--ink);letter-spacing:-0.01em}
.nav-links{display:none;gap:calc(var(--u)*8)}
.nav-links a{color:var(--ink-2);font-size:14px;transition:color .15s}
.nav-links a:hover{color:var(--ink)}
@media(min-width:900px){.nav-links{display:flex}}
.nav .btn{padding:10px 18px;font-size:14px}

/* ============ Hero ============ */
.hero{position:relative;min-height:92svh;display:flex;align-items:center;color:#fff;background:var(--hero-bg);overflow:hidden;padding:calc(var(--u)*24) 0}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--hero-zoom,1));will-change:transform}
.hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.6)}
.hero-content{position:relative;z-index:2;width:100%}
.hero h1{max-width:14ch;color:#fff}
/* Sin overflow:hidden acá a propósito -- recortaba la caja baja de letras
   como la "g" de "gana". Las palabras inactivas ya están en opacity:0, así
   que no hace falta clip para ocultarlas. */
.word-rotator{display:inline-grid;vertical-align:bottom;line-height:1.2}
.word-rotator .word{grid-row:1;grid-column:1;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease);white-space:nowrap}
.word-rotator .word.is-active{opacity:1;transform:translateY(0)}
.hero-sub{margin:calc(var(--u)*6) 0 calc(var(--u)*8);max-width:520px;font-size:clamp(16px,2vw,18px);color:rgba(255,255,255,.85)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:calc(var(--u)*3)}
.hero-micro{margin-top:calc(var(--u)*10);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.55);text-transform:uppercase}

/* ============ Image slots (placeholder gris hasta que se suelte la foto real) ============ */
.img-slot{position:relative;background:var(--ph-bg);overflow:hidden;border-radius:var(--radius)}
.img-slot img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.card:hover .img-slot img,.case-card:hover .img-slot img{transform:scale(1.05)}
.img-fallback{display:none;position:absolute;inset:0;align-items:center;justify-content:center;text-align:center;padding:8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ph-text)}

/* ============ Marquee logos ============ */
.logos{padding:calc(var(--u)*12) 0;border-bottom:1px solid var(--line)}
.marquee{overflow:hidden;position:relative;margin-top:calc(var(--u)*8);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:calc(var(--u)*12);width:max-content;animation:scroll 28s linear infinite}
/* Ancho libre, alto fijo -- cada logo mantiene su propia proporción
   (object-fit:contain + width:auto) en vez de forzarlos a una caja de ancho
   uniforme, que aplastaba a los angostos y recortaba a los anchos. El gris
   plano #8A8A8A sale de brightness(0) invert(54%): aplasta cualquier color
   de origen a negro puro y después lo aclara a un gris exacto, así los 7
   logos quedan del mismo tono sin importar sus colores reales (verificado
   con un swatch de prueba: da (138,138,138) = #8A8A8A pixel a pixel). */
.logo-slot{position:relative;min-width:160px;height:48px;flex:none;display:flex;align-items:center;justify-content:center}
.logo-slot img{height:28px;width:auto;object-fit:contain;filter:brightness(0) invert(54%);transition:filter .2s}
/* Carmel es muy horizontal (viewBox 320x50, 6.4:1) -- a la misma altura que
   el resto queda mucho más ancho y rompe el equilibrio visual de la tira.
   Bajado un 30% de altura (28px -> ~20px), sigue siendo legible. */
.logo-slot--sm img{height:20px}
/* Gracia se veía chico al lado del resto -- subido 20% (28px -> ~34px). */
.logo-slot--lg img{height:34px}
/* Kreativa trae 4 puntitos decorativos arriba de la palabra, dentro del
   mismo SVG (viewBox 0 0 232 50: puntos en y=0-7, hueco 7-10, texto recién
   en y=10-50). Eso corre el "centro visual" de la palabra hacia abajo
   respecto a los demás logos, que no tienen ese elemento extra y llenan
   todo su viewBox. Medido en pixeles (ver conversación): compensar subiendo
   la imagen completa ~3px para que el ojo perciba a "Kreativa" alineado con
   el resto, aunque eso implique que los puntitos sobresalgan un poco por
   arriba de la fila -- es un detalle decorativo, no molesta. */
.logo-slot--kreativa img{transform:translateY(-3px)}
/* Crillon y Tiendamia: medido por pixel-scan de la fila completa, su línea
   de base de texto queda ~5px más arriba que la del resto (Dentes/Carmel de
   referencia) -- se bajan para apoyar en la misma línea. */
.logo-slot--crillon img,.logo-slot--tiendamia img{transform:translateY(5px)}
/* Plushlamour: 10% más chico que el resto (viewBox propio muy ancho, se
   sentía grande al lado de los demás) y realineado a la misma línea de base
   tras el achique. */
.logo-slot--plushlamour img{height:25.2px;transform:translateY(-2px)}
.logo-slot:hover img{filter:brightness(0) invert(20%)}
.logo-fallback{display:none;position:absolute;inset:0;background:var(--ph-bg);border-radius:6px;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:9px;color:var(--ph-text);letter-spacing:.04em}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============ Métricas ============ */
.metrics{border-bottom:1px solid var(--line)}
.metrics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(var(--u)*10) calc(var(--u)*6)}
@media(min-width:768px){.metrics-grid{grid-template-columns:repeat(4,1fr)}}
.metric .num{font-family:var(--font-mono);font-size:clamp(34px,4.5vw,52px);color:var(--ink);line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;display:inline-block;transition:transform .25s var(--ease)}
.metric .num.settled{transform:scale(1.08)}
.metric .lbl{margin-top:calc(var(--u)*3);color:var(--ink-2);font-size:14px;max-width:22ch}

/* ============ Soluciones ============ */
/* Degradé celeste -> blanco (referencia: apple.com/la) -- rompe la monotonía
   de secciones blancas. Es la única sección, además del hero, que se aparta
   del blanco liso a propósito. */
#soluciones{background:linear-gradient(180deg,#CFE7FA 0%,#E9F4FC 45%,#FFFFFF 100%);padding-top:calc(var(--u)*16);padding-bottom:calc(var(--u)*16)}
@media(min-width:768px){#soluciones{padding-top:calc(var(--u)*22);padding-bottom:calc(var(--u)*22)}}
.cards{display:grid;gap:calc(var(--u)*6);margin-top:calc(var(--u)*12)}
@media(min-width:700px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid transparent;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -8px rgba(0,0,0,.12);transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(0,0,0,.05),0 20px 32px -12px rgba(0,0,0,.16)}
.card-body{padding:calc(var(--u)*6);display:flex;flex-direction:column;gap:calc(var(--u)*3);flex:1}
.card--cta{background:var(--bg-alt)}
.card--cta .card-body{justify-content:space-between}
.card--cta .btn{align-self:flex-start}
.card p{color:var(--ink-2);font-size:14px;flex:1}
.chip{align-self:flex-start;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--blue);border:1px solid var(--blue);border-radius:100px;padding:6px 12px}

/* ============ Hub de integraciones (diagrama SVG) ============
   El SVG es inline (no <img>) para heredar DM Mono/Inter -- por eso el
   toggle mobile/desktop se resuelve con dos <svg> en el DOM y CSS
   display:none, no con <picture> (que solo sabe elegir entre <img>/rutas
   de archivo, no dos nodos SVG ya inlineados). El color de las tiles de
   marca (verde WhatsApp, rosa Instagram, etc.) es el único lugar del sitio
   con color fuera de #0000EE -- no se propaga a ningún otro lado. */
.hub-section{background:var(--bg)}
.hub-diagram{max-width:900px;margin:calc(var(--u)*12) auto 0}
.hub-svg-desktop{display:none;width:100%;height:auto}
.hub-svg-mobile{display:block;width:100%;height:auto;max-width:400px;margin:0 auto}
@media(min-width:768px){
  .hub-svg-desktop{display:block}
  .hub-svg-mobile{display:none}
}

/* Tarjetas de evento + métricas: en el SVG grande ya vienen dibujadas
   (ilegibles a 390px), acá se reconstruyen como HTML real solo para
   mobile, con los tokens del sitio. */
.hub-mobile-extra{margin-top:calc(var(--u)*6)}
@media(min-width:768px){.hub-mobile-extra{display:none}}

.hub-events{display:flex;flex-direction:column;gap:calc(var(--u)*3)}
.hub-event{display:flex;align-items:flex-start;gap:calc(var(--u)*3);padding:calc(var(--u)*4);background:#fff;border:1px solid #EDEDF2;border-radius:var(--radius);box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -8px rgba(0,0,0,.12)}
.hub-event-dot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:6px}
.hub-event-title{font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--ink)}
.hub-event-sub{font-family:var(--font-mono);font-size:11px;color:var(--ph-text);margin-top:2px}

/* ============ Integraciones ============
   Aterriza el discurso: muestra las herramientas que el cliente ya usa
   todos los días. Los logos son SVG monocromo (#9A9A9A) cargados por <img>;
   como el fondo de esta sección es azul pleno, todos van en blanco vía
   filter:brightness(0) invert(1). */
/* Fondo pleno #001DE5, estático, sin transición ni animación -- se probó
   el efecto de degradé blanco->azul atado al scroll y no convenció (con
   esta altura de sección se sentía imperceptible). Queda documentado en
   EFECTO-SCROLL-COLOR.md por si se aplica más adelante a un bloque más
   alto. Todo el contenido va en negativo (blanco) sobre este azul. */
.integrations{background:#001DE5;border-top:1px solid #001DE5;border-bottom:1px solid #001DE5}
.integrations h2,.integrations .int-card h3{color:#fff}
.integrations .eyebrow{color:#fff}
.integrations .section-sub,.integrations .int-note{color:rgba(255,255,255,.75)}
.int-cards{display:grid;grid-template-columns:1fr;gap:calc(var(--u)*5);margin-top:calc(var(--u)*12)}
@media(min-width:900px){.int-cards{grid-template-columns:repeat(3,1fr)}}
.int-card{background:rgba(255,255,255,.1);border-radius:var(--radius);padding:calc(var(--u)*8) calc(var(--u)*7);display:flex;flex-direction:column;gap:calc(var(--u)*3);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);transition:transform .25s var(--ease),border-color .25s var(--ease)}
.int-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.32)}
.int-card h3{font-size:19px}
.int-card p{color:rgba(255,255,255,.75);font-size:14px;line-height:1.55}
.int-logos{display:flex;flex-wrap:wrap;gap:calc(var(--u)*3);margin-top:auto;padding-top:calc(var(--u)*5)}
/* Fondo casi blanco (no el rgba(.12) translúcido de antes): los logos ahora
   van a color real, y sobre el azul de la sección necesitan una base sólida
   para resaltar en vez de lavarse. */
.int-logo{width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;position:relative;transition:transform .2s var(--ease),background .2s}
.int-logo img{width:22px;height:22px;object-fit:contain}
.int-logo:hover{transform:translateY(-3px);background:#fff}
.int-logo--slot{border:1px dashed rgba(255,255,255,.3);background:transparent}
.int-slot-label{display:none;position:absolute;inset:0;align-items:center;justify-content:center;text-align:center;font-family:var(--font-mono);font-size:7px;line-height:1.2;color:rgba(255,255,255,.5);padding:2px;word-break:break-all}
.int-note{margin-top:calc(var(--u)*8);font-size:14px;color:rgba(255,255,255,.75)}

/* Stagger de los logos dentro de cada card */
html.js .int-logo{opacity:0;transform:translateY(10px)}
html.js .reveal.in .int-logo{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
html.js .reveal.in .int-logo:nth-child(1){transition-delay:.05s}
html.js .reveal.in .int-logo:nth-child(2){transition-delay:.1s}
html.js .reveal.in .int-logo:nth-child(3){transition-delay:.15s}
html.js .reveal.in .int-logo:nth-child(4){transition-delay:.2s}
html.js .reveal.in .int-logo:nth-child(5){transition-delay:.25s}
html.js .reveal.in .int-logo:nth-child(6){transition-delay:.3s}
html.js .reveal.in .int-logo:nth-child(7){transition-delay:.35s}
html.js .reveal.in .int-logo:nth-child(8){transition-delay:.4s}
html.js .reveal.in .int-logo:nth-child(9){transition-delay:.45s}
html.js .reveal.in .int-logo:nth-child(n+10){transition-delay:.5s}
@media(prefers-reduced-motion:reduce){
  html.js .int-logo{opacity:1;transform:none}
}

/* ============ Cómo trabajamos ============ */
.steps{display:grid;gap:calc(var(--u)*6);margin-top:calc(var(--u)*12)}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{border-top:2px solid var(--ink);padding-top:calc(var(--u)*5)}
.step .n{font-family:var(--font-mono);color:var(--blue);font-size:12px;letter-spacing:.08em}
.step h3{margin:calc(var(--u)*2) 0 calc(var(--u)*2)}
.step p{color:var(--ink-2);font-size:14px}
.step .t{margin-top:calc(var(--u)*3);font-family:var(--font-mono);font-size:12px;color:var(--ink);letter-spacing:.06em}

/* ============ Sliders (Casos / Testimonios) ============ */
.cases{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.testimonials{background:var(--bg)}
.slider-wrap{margin-top:calc(var(--u)*10)}
.slider-controls{display:flex;align-items:center;justify-content:space-between;margin-bottom:calc(var(--u)*5)}
.slider-hint{font-size:13px;color:var(--ink-2)}
@media(min-width:900px){.slider-hint{display:none}}
.slider-arrows{display:flex;gap:calc(var(--u)*2)}
.arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:border-color .15s,transform .15s}
.arrow:hover{border-color:var(--ink);transform:scale(1.05)}
.arrow:disabled{opacity:.35;cursor:default;transform:none}

.slider{display:flex;gap:calc(var(--u)*5);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 var(--pad) calc(var(--u)*2);scroll-padding-left:var(--pad)}
.slider::-webkit-scrollbar{display:none}
@media(min-width:1200px){.slider{padding-left:max(var(--pad),calc((100vw - var(--container))/2));scroll-padding-left:max(var(--pad),calc((100vw - var(--container))/2))}}

.case-card{scroll-snap-align:start;flex:0 0 85%;max-width:400px;background:#fff;border:1px solid transparent;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -8px rgba(0,0,0,.12);transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.case-card:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(0,0,0,.05),0 20px 32px -12px rgba(0,0,0,.16)}
@media(min-width:640px){.case-card{flex-basis:60%}}
@media(min-width:1024px){.case-card{flex-basis:calc(33.333% - 27px)}}
.case-body{padding:calc(var(--u)*6);display:flex;flex-direction:column;gap:calc(var(--u)*3)}
.tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.case-body p{color:var(--ink-2);font-size:14px;flex:1}
.case-nums{display:flex;gap:calc(var(--u)*8);border-top:1px solid var(--line);padding-top:calc(var(--u)*4)}
.case-nums div b{display:block;font-family:var(--font-mono);font-weight:500;font-size:22px;color:var(--blue);font-variant-numeric:tabular-nums}
.case-nums div span{font-size:12px;color:var(--ink-2)}

/* Testimonios -- banda de punta a punta del browser, una a la vez, foto de
   fondo con overlay oscuro y flechas (mismo componente .arrow que Casos, en
   variante clara para fondo oscuro). Referencia: sección de testimonios
   estilo Frontline que pasó el cliente. */
.testimonials{background:var(--bg)}
/* min-height mobile subió de 460 a 560px: con la caja de texto angostada a
   2/3 del ancho, la cita más larga (Kreativa) pasa a ocupar 8 líneas y
   necesita más alto para no chocar con el nombre. */
.trust-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;min-height:560px;background:var(--hero-bg)}
@media(min-width:768px){.trust-hero{min-height:600px}}

.trust-hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s linear .6s}
.trust-hero-slide.is-active{opacity:1;visibility:visible;transition:opacity .6s var(--ease),visibility 0s linear 0s}
.trust-hero-photo{position:absolute;inset:0}
.trust-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 50%;filter:grayscale(1) contrast(1.05)}
/* Foto de Gracia: Fiorela está corrida al cuarto derecho del encuadre
   original y con la cara en el tercio superior, no centrada -- el crop
   centrado por default la deja fuera de cuadro en mobile (banner angosto,
   recorte horizontal) y le corta los ojos en desktop ancho (banner corto,
   recorte vertical). Se corre el punto de anclaje a la derecha (entra ella,
   no la pared vacía) y hacia arriba (deja aire para la cabeza en vez de
   cortarla a la altura de los ojos). */
.trust-hero-slide[data-index="0"] .trust-hero-photo img{object-position:88% 22%}
/* Foto de Dentes: el crop centrado corta a la altura de los ojos. Se sube el
   punto de anclaje para dejar más aire arriba de la cabeza. */
.trust-hero-slide[data-index="1"] .trust-hero-photo img{object-position:center 32%}
/* Foto de Kreativa: en mobile el banner es angosto y alto (390x560) contra
   una foto muy panorámica (1586x992) -- con el crop centrado casi todo
   Gonzalo queda pegado al borde derecho, cortado en el brazo. Corrido el
   punto de anclaje para que entre completo, con aire de los dos lados. En
   desktop el banner es ancho y el recorte pasa a ser vertical, no horizontal,
   así que este ajuste no le cambia nada a esa vista. */
.trust-hero-slide[data-index="2"] .trust-hero-photo img{object-position:60% center}
.trust-hero-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.2) 100%)}

/* La caja ya no lleva max-width -- eso es lo que la angostaba a nada en
   pantallas anchas, porque el padding-left crece con el viewport (para
   alinearse con el borde del container, como el H2 de arriba) mientras el
   max-width se quedaba fijo en 640px. Ahora la posición (padding-left) y el
   ancho de lectura (max-width en .trust-hero-quote/.trust-hero-who) se
   resuelven por separado. La fórmula de alineación también le faltaba sumar
   var(--pad) -- por eso el texto quedaba corrido respecto al H2. */
/* justify-content:flex-start (no center): la cita arranca siempre desde el
   mismo punto (el padding-top) sin importar cuántas líneas ocupe -- antes, al
   centrar verticalmente, una cita más corta o más larga corría todo el
   bloque de lugar entre una foto y otra. El nombre/cargo, en vez de venir
   después de la cita en el flujo (lo que lo hacía bajar o subir según el
   largo de la cita), queda con position:absolute pegado al piso del banner
   -- así su posición no depende en absoluto de cuántas líneas tenga la cita. */
.trust-hero-content{position:relative;z-index:2;height:100%;width:100%;display:flex;flex-direction:column;justify-content:flex-start;padding:calc(var(--u)*16) var(--pad) calc(var(--u)*20)}
@media(min-width:1200px){.trust-hero-content{padding-left:calc(max(0px,(100vw - var(--container))/2) + var(--pad))}}
/* En desktop (banner de 600px, ver .trust-hero @768px) la cita quedaba pegada
   arriba y el nombre pegado abajo -- se acercan 80px/40px al centro. Mobile
   (banner de 460px, menos aire) queda con los valores originales. */
@media(min-width:768px){.trust-hero-content{padding-top:calc(var(--u)*16 + 80px)}}
.trust-hero-quote{color:#fff;font-family:var(--font-head);font-weight:500;font-size:clamp(24px,3.2vw,34px);line-height:1.3;letter-spacing:-0.01em;margin:0;max-width:656px}
/* bottom sube 40px respecto al piso original (var(--u)*20) en todos los
   tamaños -- primero se pidió solo para desktop, ahora también para mobile. */
.trust-hero-who{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--u)*20 + 40px);max-width:656px}
@media(min-width:1200px){.trust-hero-who{left:calc(max(0px,(100vw - var(--container))/2) + var(--pad))}}
/* En mobile el ancho de lectura no tenía tope (solo el 656px de desktop, que
   nunca se alcanza en un viewport angosto), así que la caja iba de punta a
   punta y el texto quedaba siempre encima de la cara. Se limita a 2/3 del
   ancho disponible. */
@media(max-width:767px){.trust-hero-quote,.trust-hero-who{max-width:66%}}
.trust-hero-who b{display:block;font-family:var(--font-body);font-weight:600;font-size:15px;color:#fff}
.trust-hero-who span{font-size:14px;color:rgba(255,255,255,.7)}

/* Entrada del texto al cambiar de slide: fade + leve elevación. Duración
   propia (no --dur, que comparten los .reveal de scroll de todo el sitio) --
   a pedido, más lenta y suave que el default de .6s, para que acompañe el
   autoplay de 8s sin sentirse apurada. Arranca un poco después del crossfade
   de la foto para que se lea como una secuencia, no un parpadeo simultáneo. */
.trust-hero-quote,.trust-hero-who{opacity:0;transform:translateY(10px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.trust-hero-slide.is-active .trust-hero-quote,.trust-hero-slide.is-active .trust-hero-who{opacity:1;transform:none}
.trust-hero-slide.is-active .trust-hero-who{transition-delay:.2s}
.trust-hero-slide:not(.is-active) .trust-hero-quote,.trust-hero-slide:not(.is-active) .trust-hero-who{transition-delay:0s}

.trust-hero-arrows{position:absolute;left:var(--pad);bottom:calc(var(--u)*8);z-index:3;display:flex;gap:calc(var(--u)*2)}
@media(min-width:1200px){.trust-hero-arrows{left:calc(max(0px,(100vw - var(--container))/2) + var(--pad))}}
.arrow--light{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.arrow--light:hover{border-color:#fff;background:rgba(255,255,255,.12)}

/* ============ Por qué ============ */
.why-grid{display:grid;grid-template-columns:1fr;gap:calc(var(--u)*5);margin-top:calc(var(--u)*12)}
@media(min-width:640px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.why-grid{grid-template-columns:repeat(4,1fr)}}
.why-card{background:#fff;border-radius:var(--radius);padding:calc(var(--u)*8) calc(var(--u)*7);display:flex;flex-direction:column;gap:calc(var(--u)*4);box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -8px rgba(0,0,0,.12);transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.why-card:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(0,0,0,.05),0 20px 32px -12px rgba(0,0,0,.16)}
.why-icon{width:44px;height:44px;color:var(--blue)}
.why-card h3{font-size:19px}
.why-card p{color:var(--ink-2);font-size:14px;line-height:1.55}
.why-card--accent{background:var(--blue);color:#fff}
.why-card--accent p{color:rgba(255,255,255,.8)}
.why-card--accent .why-icon{color:#fff}

/* ============ Contacto ============ */
.contact{background:var(--ink);color:#fff}
.contact .eyebrow{color:rgba(255,255,255,.6)}
.contact h2{color:#fff}
.contact-grid{display:grid;gap:calc(var(--u)*12)}
@media(min-width:900px){.contact-grid{grid-template-columns:1fr 1fr;gap:calc(var(--u)*20)}}
.contact .lead{color:rgba(255,255,255,.75);margin:calc(var(--u)*4) 0 calc(var(--u)*8);max-width:44ch}
.contact-ctas{display:flex;flex-wrap:wrap;gap:calc(var(--u)*3)}
.form{display:grid;gap:calc(var(--u)*4)}
.form label{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);display:block;margin-bottom:6px}
.form input,.form textarea{width:100%;background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:var(--radius);color:#fff;font-family:var(--font-body);font-size:15px;padding:12px 14px}
.form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--blue);border-color:transparent}
.form textarea{min-height:96px;resize:vertical}
.form .btn{margin-top:calc(var(--u)*2)}
.form .botcheck{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ============ Toast (feedback del formulario) ============ */
.toast{position:fixed;left:50%;bottom:calc(var(--u)*8);z-index:60;max-width:calc(100vw - 32px);background:var(--ink);color:#fff;font-family:var(--font-body);font-size:14px;font-weight:500;padding:14px 22px;border-radius:var(--radius);box-shadow:0 8px 28px -6px rgba(0,0,0,.35);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,12px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
.toast.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear 0s}
.toast--success{background:#157347}
.toast--error{background:#B3261E}
@media(max-width:767px){.toast{bottom:calc(var(--u)*8 + 64px)}}

/* ============ Footer ============ */
footer{padding:calc(var(--u)*10) 0;border-top:1px solid var(--line)}
.foot{display:flex;flex-wrap:wrap;gap:calc(var(--u)*4);align-items:center;justify-content:space-between;font-size:13px;color:var(--ink-2)}
.foot a{color:var(--ink-2)}
.foot a:hover{color:var(--ink)}

/* ============ WhatsApp flotante ============ */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.2);transition:transform .15s}
.wa-float:hover{transform:scale(1.06)}

/* ============ Reveal on scroll ============
   Sin JS (o si falla), .reveal queda con opacidad normal -- nunca depende
   de JS para ser visible. Solo se esconde si <html class="js"> está
   presente (lo agrega un inline script mínimo en <head>), y ahí es el JS
   principal el que agrega .in al hacer scroll. */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(28px) scale(.97);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
html.js .reveal.in{opacity:1;transform:none}

/* Stagger: las cards/items de una misma grilla entran en cascada, no todas
   juntas -- es lo que le da ritmo a cada sección en vez de un fade-up plano. */
html.js .cards .card:nth-child(1),html.js .steps .step:nth-child(1),html.js .why-grid .why-card:nth-child(1),html.js .metrics-grid .metric:nth-child(1){transition-delay:0ms}
html.js .cards .card:nth-child(2),html.js .steps .step:nth-child(2),html.js .why-grid .why-card:nth-child(2),html.js .metrics-grid .metric:nth-child(2){transition-delay:80ms}
html.js .cards .card:nth-child(3),html.js .steps .step:nth-child(3),html.js .why-grid .why-card:nth-child(3),html.js .metrics-grid .metric:nth-child(3){transition-delay:160ms}
html.js .cards .card:nth-child(4),html.js .why-grid .why-card:nth-child(4){transition-delay:240ms}
html.js .cards .card:nth-child(5){transition-delay:320ms}
html.js .cards .card:nth-child(6){transition-delay:400ms}

/* ============ Motion & accesibilidad ============ */
@media(prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  .marquee-track{animation:none}
  html{scroll-behavior:auto}
  .slider{scroll-behavior:auto}
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
}