/* ============================================================================
 * SureCall · L01 — connect.surecallcc.com/contact-center
 * Sistema visual: ver DESIGN.md en la raíz del repo.
 * ⛔ NO declarar `scroll-behavior` acá: el desplazamiento de ?s= lo resuelve
 *    landing.js con `behavior` explícito. Declararlo convierte la rama que
 *    respeta prefers-reduced-motion en la que sí anima.
 * ========================================================================== */

:root{
  /* campos de color — cada sección posee uno entero */
  --cream:#FBF6EC;
  --paper:#FFFFFF;
  --lime-band:#E9F2D2;
  --lime-soft:#F5F9EA;
  --ink:#1A1A18;

  /* marca */
  --lime:#8FB515;
  --lime-deep:#6E8F0F;
  --orange:#FC702C;        /* GRÁFICO: nunca lleva texto encima */
  /* ACENTO — elegido por Alejandro el 2026-09-17. Va en los números de la franja
     de prueba, en enlaces y en textos secundarios.
     ⚠️ CONTRASTE MEDIDO: 2,82:1 sobre blanco y 2,62:1 sobre crema. El piso de
     WCAG es 4,5:1 para texto normal y 3:1 para texto grande, así que NO lo pasa
     en ninguno de los dos. Se aplica igual porque es decisión suya; si en algún
     momento hay que corregirlo, se cambia SOLO este token y toda la página lo
     sigue. Lo que nunca puede llevar este valor es texto blanco encima. */
  --accent:#FC702C;
  --orange-btn:#DC6208;    /* fondo de botón + etiqueta 18px/700 → 3,65:1 */
  --orange-btn-h:#BF5206;
  --orange-ink:#B34D00;    /* texto naranja chico sobre claro → 4,83:1 */
  /* Destacado del titular. Mismo valor que el botón y por la misma razón: es el
     naranja más VIVO que llega a 3:1 sobre crema, el piso del texto grande. El
     naranja de marca da 2,64:1 y no pasa ni a 60px. */
  --orange-hi:#DC6208;

  /* texto — el secundario se tinta del campo, nunca gris neutro */
  --ink-soft:#55534C;
  --ink-soft-lime:#4C5738;
  --paper-soft:#C6C3B8;
  --line:rgba(26,26,24,.13);
  --line-ink:rgba(255,255,255,.16);

  --r:20px;
  --shadow:0 14px 34px -22px rgba(26,26,24,.55);
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* 2026-09-29 · NADA puede desbordar el ancho en móvil. Los globos de ayuda
   ocultos (.hint-bub) y el dibujo del cierre (.close-art) se salían hasta 415px en
   un teléfono de 390: el navegador móvil agranda entonces el viewport de layout
   a 415×899 y todo lo `position:fixed` abajo —el banner de cookies de HubSpot—
   queda con su borde inferior FUERA de la pantalla: Accept/Decline no se veían y
   los toques no llegaban. `clip` y no `hidden` en <body>: `hidden` lo volvería
   contenedor de scroll y rompería la barra `sticky`. En <html> se propaga al
   viewport (con `hidden` delante para navegadores sin `clip`). */
html{overflow-x:hidden;overflow-x:clip}
body{overflow-x:clip}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font:400 1.0625rem/1.62 Archivo,"Helvetica Neue",Arial,sans-serif;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
h2{font-size:clamp(1.9rem,3.3vw,2.8rem)}
h3{font-size:1.1875rem;letter-spacing:-.02em}
p{margin:0}
ul,ol,dl{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px}

/* El anillo de foco va en TINTA, no en naranja: contra el propio botón naranja que
   rodea, el naranja da 1,28:1 — se lee como un doble borde decorativo, no como
   foco (WCAG 1.4.11 pide 3:1 contra lo adyacente). */
:where(a,button,input,[tabindex]):focus-visible{
  outline:3px solid var(--ink);outline-offset:3px;border-radius:6px;
}
.sec-ink :where(a,button,input,[tabindex]):focus-visible,
.foot :where(a,button,input,[tabindex]):focus-visible{outline-color:#fff}

/* ─── Píldora de sección ───────────────────────────────────────────────────
   No es un eyebrow decorativo: nombra la sección que el sitelink prometió. */
.kicker{
  display:inline-block;margin:0 0 20px;padding:7px 15px;
  background:var(--lime-band);color:#33401E;
  font-size:.8125rem;font-weight:700;letter-spacing:-.005em;border-radius:999px;
}
.kicker-on-lime{background:rgba(26,26,24,.08);color:#33401E}
.kicker-on-ink{background:rgba(255,255,255,.12);color:#EAF3D2}

/* ─── Botones ──────────────────────────────────────────────────────────────
   ⚠️ Un botón naranja nunca baja de 18px ni de peso 700: es lo que sostiene
   el contraste del texto blanco encima. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border:2px solid transparent;border-radius:999px;
  font:700 1.125rem/1 Archivo,sans-serif;letter-spacing:-.015em;
  text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
/* Naranja más vivo y con un degradado leve para que el botón "pida" el clic.
   ⚠️ CONTRA QUÉ SE ELIGIERON LOS DOS TONOS: el texto blanco encima obliga a que
   el punto MÁS CLARO del degradado siga pasando. #F4661A (arriba) da 3,11:1 y
   #D4570A (abajo) 4,06:1, así que toda la superficie pasa el piso de texto
   grande. Un naranja más chillón que #F4661A rompe eso, y el botón es
   justamente donde no se puede perder legibilidad. */
.btn-primary{
  background-image:linear-gradient(180deg,#F4661A 0%,#D4570A 100%);
  color:#fff;box-shadow:0 8px 18px -10px rgba(212,87,10,.85);
}
.btn-primary:hover{
  background-image:linear-gradient(180deg,#FF7526 0%,#E15F0B 100%);
  box-shadow:0 10px 22px -10px rgba(212,87,10,.95);
}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(26,26,24,.28)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(26,26,24,.05)}
.sec-ink .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.sec-ink .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* El tamaño NO baja de 18px ni el peso de 700 — es la regla que sostiene el
   contraste del naranja. Lo que se achica es el padding. */
.btn-sm{padding:11px 20px}
.btn-lg{padding:19px 36px;font-size:1.1875rem}
.btn-block{width:100%}
.btn[disabled],.btn.is-busy{opacity:.6;pointer-events:none}

/* ─── Barra superior ───────────────────────────────────────────────────────*/
/* Barra BLANCA sobre el crema del hero: el contraste de campo alcanza para
   separarlas y el filete sobraba.
   STICKY: el CTA y el teléfono quedan a la vista durante todo el scroll. Como la
   barra tapa el tope de la sección a la que se salta, cada destino declara
   `scroll-margin-top` — sin eso, el sitelink `?s=` deja el título debajo de la
   barra y parece que no desplazó bien. */
.topbar{
  background:var(--paper);position:sticky;top:0;z-index:50;
  box-shadow:0 1px 0 rgba(26,26,24,.07), 0 10px 22px -20px rgba(26,26,24,.5);
}
#top,#human-ai,#who-its-for,#onshore,#how-it-works,#coverage,
#form,#why-surecall,#reviews,#channels,#awards,#compliance{scroll-margin-top:86px}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:16px}
/* El gap bajó de 26 a 20 al entrar «Human + AI» (2026-09-21): con seis enlaces el
   menú empujaba el teléfono y el CTA fuera del ancho. Por la misma razón se
   oculta 60px antes — ver el breakpoint de 1120px. */
.topnav{display:flex;align-items:center;gap:20px;margin-inline:auto}
.topnav a{
  font-size:.9375rem;font-weight:600;color:var(--ink-soft);text-decoration:none;
  padding-block:6px;border-bottom:2px solid transparent;transition:color .16s ease,border-color .16s ease;
}
.topnav a:hover{color:var(--ink);border-bottom-color:var(--orange)}
.logo{width:168px;height:auto}
.topbar-right{display:flex;align-items:center;gap:22px}
.tel{text-decoration:none;display:flex;flex-direction:column;line-height:1.2}
.tel-label{font-size:.75rem;color:var(--ink-soft);font-weight:500}
.tel-num{font-weight:700;letter-spacing:-.02em}
.tel:hover .tel-num{color:var(--accent)}

/* ─── HERO ─────────────────────────────────────────────────────────────────*/
.hero{background:var(--cream);padding-block:clamp(44px,6vw,76px) clamp(40px,5vw,66px)}
.hero-in{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,5vw,60px);align-items:center}
.hero-h{font-size:clamp(2.5rem,5.4vw,4.1rem);line-height:.99;letter-spacing:-.037em}
/* ─── Degradado de marca (lima → naranja) ──────────────────────────────────
   Es el recurso de la home de SureCall, pedido por Alejandro. Va en DOS lugares
   y en ninguno más: el tramo destacado del titular y el titular del cierre — la
   promesa de entrada y la de salida.
   ⚠️ Arranca en `--lime-deep` y no en el lima brillante de la referencia: el
   brillante da 2,2:1 sobre crema y la mitad de la frase quedaría ilegible. Así
   el extremo verde pasa 3,49:1 y el degradado se sigue leyendo como el mismo.
   El `color` de respaldo va PRIMERO: si `background-clip:text` no existe, el
   texto se ve en el acento en vez de desaparecer. */
.grad{
  color:var(--accent);
  background-image:linear-gradient(100deg,var(--lime-deep) 0%,#B8871B 42%,var(--accent) 86%);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
}
.hero-h .hi{color:var(--orange-hi)}
.hero-sub{
  margin-top:22px;max-width:53ch;font-size:1.125rem;line-height:1.58;color:var(--ink-soft);
}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.cta-note{margin-top:14px;font-size:.9375rem;color:var(--ink-soft)}

/* Hero adaptativo: 4 variantes en el HTML, el CSS pinta una — antes del paint.
   Sin JS (o con ?g= ausente) se ve la genérica. */
.hv{display:none}
.hv[data-hv="generic"]{display:inline}
.hero-h .hv[data-len="long"]{font-size:.74em;line-height:1.07;letter-spacing:-.03em}
html[data-g="outsourcing"] .hv[data-hv="generic"]{display:none}
html[data-g="outsourcing"] .hv[data-hv="outsourcing"]{display:inline}
html[data-g="answering"]   .hv[data-hv="generic"]{display:none}
html[data-g="answering"]   .hv[data-hv="answering"]{display:inline}
html[data-g="onshore"]     .hv[data-hv="generic"]{display:none}
html[data-g="onshore"]     .hv[data-hv="onshore"]{display:inline}

/* ─── Foto del hero ────────────────────────────────────────────────────────
   Placa lima asomando por detrás + ficha flotante. La placa es un
   pseudo-elemento: es decoración pura y no merece un div propio. */
.hero-art{position:relative;margin:0;padding-bottom:28px}
/* La placa asoma DE VERDAD por la derecha: con 14px apenas se adivinaba. Sale 42
   y se mete hacia adentro arriba y abajo, así se lee como una segunda lámina
   detrás de la foto y no como un borde. */
.hero-art::after{
  content:"";position:absolute;right:-42px;top:52px;bottom:76px;width:60%;
  background:var(--lime-band);border-radius:22px;z-index:0;
}
.hero-photo{position:relative;z-index:1;border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
/* La foto es CUADRADA y se muestra CUADRADA: con `aspect-ratio:1/1` sobre un
   original 1:1 el `cover` no recorta ni un píxel. Recortarla a 4/3 le cortaba la
   cabeza y las manos, que es justo lo que la foto viene a mostrar. */
.hero-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 50%}
.hero-chip{
  position:absolute;left:-12px;bottom:0;z-index:2;
  display:flex;align-items:center;gap:13px;
  /* Techo de ancho desde que la ficha lleva DOS claims (IA + origen): sin él la
     caja se estira más allá de la foto y se sale de la composición. */
  max-width:min(96%,360px);
  background:var(--paper);border-radius:16px;padding:13px 20px 13px 13px;
  box-shadow:0 16px 36px -22px rgba(26,26,24,.6);
}
.chip-ic{
  flex:none;width:40px;height:40px;border-radius:11px;background:var(--lime-band);
  color:#33401E;display:flex;align-items:center;justify-content:center;
}
.chip-tx{font-size:.8125rem;line-height:1.35;color:var(--ink-soft)}
.chip-tx b{display:block;color:var(--ink);font-size:.9375rem;letter-spacing:-.015em}
@media (max-width:1000px){
  .hero-art{margin-top:8px}
  .hero-art::after{right:-22px;top:40px;bottom:62px;width:56%}
  .hero-chip{left:0}
}

/* ─── PANEL DE GUARDIA — la pieza firmada ──────────────────────────────────*/
.watch{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;box-shadow:var(--shadow);
}
.watch-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.live{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:700;color:var(--accent)}
.live i{width:9px;height:9px;border-radius:50%;background:var(--orange);flex:none}
.watch-title{font-size:.8125rem;font-weight:600;color:var(--ink-soft)}
.watch-cities{margin-top:6px}
.watch-cities li{
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"city time" "prov time";
  align-items:center;column-gap:16px;padding:15px 12px;margin-inline:-12px;border-radius:12px;
  border-bottom:1px solid var(--line);transition:background-color .5s ease;
}
.watch-cities li:last-child{border-bottom:0}
.city{grid-area:city;font-weight:700;letter-spacing:-.02em}
.prov{grid-area:prov;font-size:.8125rem;color:var(--ink-soft)}
.clock{
  grid-area:time;font-size:1.5rem;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.watch-foot{margin-top:16px;font-size:.875rem;color:var(--ink-soft)}

/* Tira compacta del panel de guardia. Desde que la foto ocupa la derecha del
   hero, ésta es la que sostiene la demostración del mecanismo en el primer
   pliegue —tres ciudades reales con su hora corriendo—, así que va en TODOS los
   anchos. El panel completo sigue en la sección de cobertura. */
.watch-inline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:22px;
  padding:13px 16px;background:var(--paper);border:1px solid var(--line);border-radius:14px;
  font-size:.875rem;color:var(--ink-soft)}
.watch-inline b{color:var(--ink);font-variant-numeric:tabular-nums}
.watch-inline .live{font-size:.75rem}

/* versión sobre tinta */
.sec-ink .watch{background:rgba(255,255,255,.055);border-color:var(--line-ink);box-shadow:none}
.sec-ink .watch-head,.sec-ink .watch-cities li{border-color:var(--line-ink)}
.sec-ink .live{color:#FFB877}
.sec-ink .watch-title,.sec-ink .prov,.sec-ink .watch-foot{color:var(--paper-soft)}
.sec-ink .watch .city,.sec-ink .clock{color:#fff}

/* Latido del panel de guardia — parte del sistema de movimiento del final. */
.watch-cities li.is-ping{background:rgba(243,118,16,.09)}
.sec-ink .watch-cities li.is-ping{background:rgba(255,255,255,.08)}
@keyframes air{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
.live i{animation:air 2.4s ease-in-out infinite}

/* ─── Franja de prueba ─────────────────────────────────────────────────────*/
/* El panel de guardia monta sobre la franja de prueba: es el único solape de la
   página y es lo que le da profundidad real a la sombra, que sola se leía plana. */
.hero-in{position:relative;z-index:2}
.proofbar{background:var(--paper);border-bottom:1px solid var(--line)}
/* CINCO columnas desde el 2026-09-21 (entró «Human + AI» al centro). El
   padding-inline bajó de 24 a 16: con una columna más, 24px de aire a cada lado
   partía «North American agents, no offshore» en tres líneas. */
.proof{display:grid;grid-template-columns:repeat(5,1fr);padding:30px 0}
.proof li{
  display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;
  padding-inline:16px;border-left:1px solid var(--line);
}
.proof li:first-child{border-left:0}
.proof b{font-size:1.71875rem;letter-spacing:-.03em;color:var(--accent)}
.proof span{font-size:.9375rem;color:var(--ink-soft);line-height:1.4}
/* ⛔ Acá hubo un solape (el panel del hero montando sobre la banda blanca) y se
   quitó: para lograrlo el hero tenía `margin-bottom` negativo, y eso le cortaba
   el crema 46px antes de tiempo — la línea «Tell us your call volume…», que es
   del hero, terminaba sobre el blanco de la sección siguiente. Cada sección
   conserva su campo de color hasta donde termina. */
.proof li{display:flex;flex-direction:column;gap:3px}
.proof b{font-size:1.25rem;letter-spacing:-.03em;color:var(--orange-ink)}
.proof span{font-size:.875rem;color:var(--ink-soft);line-height:1.4}

/* ─── Secciones ────────────────────────────────────────────────────────────*/
.sec{padding-block:clamp(64px,8vw,104px)}
.sec-paper{background:var(--paper)}
.sec-cream{background:var(--cream)}   /* para que el blanco deje de ser el default */
.sec-lime{background:var(--lime-band)}
.sec-lime-soft{background:var(--lime-soft)}
.sec-form{background:var(--cream)}
.sec-ink{background:var(--ink);color:#fff}
.sec-lime .lead{color:var(--ink-soft-lime)}
.sec-lime-soft .lead{color:var(--ink-soft-lime)}
.sec-ink .lead{color:var(--paper-soft)}
.lead{margin-top:18px;max-width:62ch;font-size:1.125rem;line-height:1.6;color:var(--ink-soft)}
.sec .btn{margin-top:34px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.two>*{min-width:0}

/* Dos bloques dentro de UNA sola sección. Existe porque el `id` de una sección
   es una dirección pública a la que se puede enlazar desde afuera: partirla en
   dos secciones para ganar aire le daría al segundo bloque un id distinto, o lo
   dejaría sin ninguno. El aire entre los dos bloques es MENOR que el
   `padding-block` de la sección — tienen que leerse como dos partes de lo
   mismo, no como dos secciones pegadas. */
.wrap-next{margin-top:clamp(56px,7vw,92px)}

/* Y esta fila se centra en vertical, contra el `align-items:start` de `.two`.
   Medido: la columna del copy mide 538px y la del relevo 631px, así que con
   `start` sobran 93px que se acumulan ENTEROS abajo a la izquierda — debajo del
   botón naranja, y encima del `padding-block` de la sección. No se lee como
   aire: se lee como que falta algo. Centrado, los mismos 93px se reparten en dos
   mitades de ~46px y pasan a leerse como composición.
   ⚠️ Va colgado de `.wrap-next` y NO de `.two`: `.two` la usan las dos páginas y
   varias filas donde `start` es lo correcto (las que alinean un título con una
   lista). Acá el caso es el opuesto: dos bloques de peso parecido. */
.wrap-next.two{align-items:center}

/* ─── Human + AI — la enmienda del cliente (2026-09-21) ────────────────────
   El relevo es el MECANISMO dibujado: dos tarjetas y el traspaso explícito
   entre ellas. Se construye como pieza y no como una rejilla más de
   icono + título + texto — DESIGN.md prohíbe esa rejilla como estructura, y acá
   además sería mentir sobre la forma: no son dos cosas en paralelo, es una que
   le pasa la llamada a la otra.
   ⚠️ La llamada de atención va en CAMPO LIMA, no con filete de color a la
   izquierda: DESIGN.md prohíbe el `border-left` de color, y esta gramática ya
   existe en las páginas legales (`.legal-callout`). Una forma para una idea. */
.ai-note{
  margin-top:26px;max-width:58ch;
  background:var(--lime-band);border-radius:16px;padding:20px 24px;
  font-size:1.0625rem;line-height:1.55;color:var(--ink-soft-lime);
}
.ai-note b{color:var(--ink);font-weight:800;letter-spacing:-.01em}

.relay{display:flex;flex-direction:column}
.relay-step{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 28px 28px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.relay-step:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.relay-mark{font-size:.8125rem;font-weight:700;color:var(--orange-ink);margin-bottom:5px}
.relay-step h3{font-size:1.25rem;margin-bottom:10px}
.relay-step>p:last-of-type{color:var(--ink-soft);font-size:1rem;line-height:1.58}

/* El traspaso. La píldora se apoya en un riel vertical que la une a las dos
   tarjetas: sin el riel son dos cajas con una etiqueta suelta en el medio; con
   él se lee UN recorrido. Los 14px de margen y los 14px de riel son el mismo
   número a propósito — si se cambia uno, se cambian los dos o queda un hueco. */
.relay-hand{
  position:relative;align-self:center;z-index:1;
  display:inline-flex;align-items:center;gap:9px;
  margin-block:14px;padding:9px 18px;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);
  font-size:.8125rem;font-weight:700;color:var(--ink-soft);letter-spacing:-.01em;
}
.relay-hand svg{flex:none;color:var(--orange)}
.relay-hand::before,.relay-hand::after{
  content:"";position:absolute;left:50%;width:2px;height:14px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,var(--lime-deep),var(--orange));
}
.relay-hand::before{top:-14px}
.relay-hand::after{bottom:-14px}

.relay-foot{
  display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding-inline:4px;
  font-size:.875rem;line-height:1.5;color:var(--ink-soft);
}
.relay-foot svg{flex:none;color:var(--lime-deep);margin-top:1px}

/* ─── Industrias ───────────────────────────────────────────────────────────*/
.ind{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
/* Variante de TRES columnas. Es una clase aparte y no un cambio en `.ind` a
   propósito: la rejilla de dos la usa la página de servicio con dos tarjetas, y
   ahí está bien — tocar `.ind` para acomodar a tres rompería la otra. Con tres
   tarjetas en dos columnas quedan 2+1 y un hueco, que es justo lo que esto
   evita.
   ⚠️ Colapso: ver la sección Responsive. Pasa de 3 a 1 sin escalón intermedio,
   y el porqué está escrito ahí. */
.ind-3{grid-template-columns:repeat(3,1fr)}
/* Y van en BLANCO. La tarjeta de `.ind` es crema porque en su página vive sobre
   campo blanco; acá vive sobre campo CREMA, o sea el mismo color contra el mismo
   color, y lo único que la dibujaba era el borde de 1px. En blanco vuelve a ser
   un objeto, y queda en la misma gramática que las tarjetas del relevo que van
   justo abajo. Va colgado de `.ind-3` para no tocar la otra página. */
.ind-3 .ind-main{background:var(--paper)}
.ind-main{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 30px 34px;
}
.ind-main h3{font-size:1.4375rem}
.ind-main>p{margin-top:12px;color:var(--ink-soft)}
.ind-for{font-weight:600;color:var(--accent)!important;margin-top:8px!important}
.ticks{margin-top:20px;display:flex;flex-direction:column;gap:9px}
.ticks li{position:relative;padding-left:27px;font-size:.9375rem;line-height:1.45}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:15px;height:8px;
  border-left:2.5px solid var(--lime-deep);border-bottom:2.5px solid var(--lime-deep);
  transform:rotate(-45deg);
}
.ticks-lg li{font-size:1rem}
.sec-ink .ticks li::before{border-color:var(--lime)}
.ind-rest{margin-top:30px;font-size:1.0625rem;color:var(--ink-soft);max-width:70ch}

/* ─── Onshore ──────────────────────────────────────────────────────────────*/
.places{display:flex;flex-direction:column;gap:8px}
.places li{
  display:flex;flex-direction:column;gap:2px;padding:18px 22px;
  background:rgba(255,255,255,.66);border-radius:14px;
}
.places b{font-size:1.1875rem;letter-spacing:-.025em}
.places span{font-size:.9375rem;color:var(--ink-soft-lime)}
.places-no{background:var(--ink)!important;margin-top:10px}
.places-no b{color:#fff}
.places-no span{color:var(--paper-soft)}

/* ─── How it works — los números SÍ son información: es una secuencia ──────*/
.steps{margin-top:42px;display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.steps li{position:relative;padding-top:18px;border-top:2px solid var(--ink)}
/* Numerales a tamaño de display. Eran el texto MÁS CHICO de su propia sección, en
   la única sección cuya razón de ser es que la secuencia se lea. */
.steps .n{
  display:block;font:800 2.75rem/1 Archivo,sans-serif;color:var(--orange);
  letter-spacing:-.04em;margin-bottom:6px;
}
.steps h3{margin-bottom:10px}
.steps p{color:var(--ink-soft);font-size:1rem}

/* ─── Why SureCall ─────────────────────────────────────────────────────────
   Se invierte el orden a propósito: cuatro secciones seguidas con la misma
   disposición (copy izquierda / bloque derecha) convierten una gramática en una
   plantilla. Acá la prueba entra primero y el texto la explica. */
.two-flip>.record{order:-1}
@media (max-width:1000px){.two-flip>.record{order:0}}
.record{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:30px}
.rating{display:flex;flex-direction:column;gap:4px;padding-bottom:24px;border-bottom:1px solid var(--line)}
/* 4,8 se dibuja como 4,8: la capa naranja se recorta al 96 %. */
.stars{position:relative;display:inline-block;font-size:1.25rem;letter-spacing:.14em;line-height:1.2;width:max-content}
.stars-bg{color:rgba(26,26,24,.22)}
.stars-fg{position:absolute;inset:0;width:96%;overflow:hidden;white-space:nowrap;color:var(--orange)}
.rating b{font-size:1.375rem;letter-spacing:-.03em}
.rating span{font-size:.9375rem;color:var(--ink-soft)}
.facts{margin-top:8px}
.facts div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line)}
.facts div:last-child{border-bottom:0}
.facts dt{font-size:.9375rem;color:var(--ink-soft)}
.facts dd{margin:0;font-weight:700;font-size:.9375rem;text-align:right;letter-spacing:-.01em}

/* ─── Reseñas de Trustpilot ────────────────────────────────────────────────*/
.rev-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 40px}
.rev-head h2{max-width:22ch}
.rev-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;font-size:.9375rem}
.rev-rated{display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft)}
.rev-rated b{color:var(--ink)}
.tp-stars{position:relative;display:inline-block;font-size:1.0625rem;letter-spacing:.1em;line-height:1.2;width:max-content}
.arrow-link{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--accent);
  text-decoration:none;
}
.arrow-link:hover{text-decoration:underline;text-underline-offset:4px}
.arrow-link span{transition:transform .18s ease}
.arrow-link:hover span{transform:translateX(3px)}

.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.reviews li{
  display:flex;gap:18px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 24px;
}
/* Todas blancas en reposo; el crema entra SOLO al pasar el cursor. Un tinte fijo
   en una de las tres jerarquiza una reseña sobre las otras sin ningún motivo. */
.reviews li{transition:background-color .18s ease,border-color .18s ease}
.reviews li:hover{background:#FCF2E2;border-color:rgba(26,26,24,.08)}
/* La comilla es un BLOQUE de marca, no un signo tipográfico suelto: el glifo se
   recorta arriba a propósito para que la caja quede ópticamente centrada. */
.r-mark{
  flex:none;width:54px;height:54px;border-radius:14px;background:var(--lime-band);
  color:var(--lime-deep);font:700 3.4rem/1 Archivo,serif;
  display:flex;align-items:flex-start;justify-content:center;overflow:hidden;
  padding-top:14px;
}
.r-body{display:flex;flex-direction:column;min-width:0}
.r-stars{color:var(--orange);font-size:1.0625rem;letter-spacing:.1em;line-height:1;margin-bottom:12px}
.reviews blockquote{margin:0;font-size:1rem;line-height:1.6;color:var(--ink)}
/* Verbatim de Trustpilot: las comillas van en el CSS, no en el texto, para que el
   contenido del bloque sea EXACTAMENTE lo que publicó la persona. */
.reviews blockquote::before{content:"“"}
.reviews blockquote::after{content:"”"}
/* `margin-top:auto` para que la firma quede al pie de la tarjeta aunque las tres
   reseñas tengan largos distintos: si no, cada una firma a una altura. */
.r-by{margin-top:auto;padding-top:16px;font-size:.875rem;font-weight:600;color:var(--ink-soft)}
.reviews blockquote{margin-bottom:16px}
.r-by time{font-weight:400;color:var(--ink-soft)}

/* ─── Reconocimientos ──────────────────────────────────────────────────────*/
/* 7 columnas: los 14 reconocimientos entran en DOS filas exactas. A 6 sobraban
   dos en una tercera fila casi vacía y la sección ocupaba media pantalla de más. */
.awards{
  display:grid;grid-template-columns:repeat(7,1fr);gap:14px;margin-top:40px;
  align-items:center;
}
.awards li{
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:13px;aspect-ratio:1/1;
}
.awards img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media (max-width:1000px){.awards{grid-template-columns:repeat(5,1fr);gap:12px}}
@media (max-width:700px){.awards{grid-template-columns:repeat(4,1fr);gap:10px}.awards li{padding:9px;border-radius:12px}}
@media (max-width:440px){.awards{grid-template-columns:repeat(3,1fr)}}

/* ─── Canales ──────────────────────────────────────────────────────────────*/
.chans{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.chans li{
  padding:11px 20px;background:var(--paper);border:1px solid var(--line);
  border-radius:999px;font-weight:600;font-size:.9375rem;letter-spacing:-.01em;
}

/* ─── Certificaciones — banda a lo ancho ───────────────────────────────────*/
.cred-head{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,64px);align-items:end}
.cred-head .lead{margin-top:0}
.creds{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:48px}
.creds li{display:flex;flex-direction:column;gap:5px;padding-top:18px;border-top:2px solid rgba(26,26,24,.22)}
/* Las que SÍ son certificaciones se marcan; las otras dos no pueden leerse como
   si lo fueran. */
.creds .cred-cert{border-top-color:var(--lime-deep)}
.creds b{font-size:1.0625rem;letter-spacing:-.02em}
.creds span{font-size:.9375rem;color:var(--ink-soft);line-height:1.5}
@media (max-width:1000px){
  .cred-head{grid-template-columns:1fr;align-items:start}
  .cred-head .lead{margin-top:18px}
  .creds{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:560px){.creds{grid-template-columns:1fr}}

/* ─── Formulario ───────────────────────────────────────────────────────────*/
.two-form{grid-template-columns:.95fr 1.05fr;align-items:start}
.form-copy .ticks{margin-top:28px}
.or{margin-top:26px;font-size:.9375rem;color:var(--ink-soft)}
.or a{color:var(--accent);font-weight:600}

/* ⚠️ PRIMERA regla: neutraliza `.step` si algo del sitio lo define. Va antes
   que las de visibilidad a propósito — mismo peso, gana la última. */
.lead-formhost .step{display:block;gap:0;align-items:initial}
.lead-formhost .step-2,.lead-formhost .step-3{display:none}
.lead-formhost[data-step] .step{display:none}
.lead-formhost[data-step] .step.is-current{display:block}
.lead-formhost.is-sent[data-step] .step.is-current{display:none}
.lead-formhost.is-sent form>fieldset{display:none}
.lead-formhost .lead-sent{display:none}
.lead-formhost.is-sent .lead-sent{display:block}

.lead-formhost{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3vw,34px);box-shadow:var(--shadow);
}
.lead-form fieldset{border:0;margin:0;padding:0;min-width:0}
/* `float` porque el navegador IZA el <legend> por encima del fieldset sin importar
   el orden del HTML: sin esto «Step 2 of 3» cae ENTRE la pregunta y las opciones,
   y el paso 1 —que no tiene legend— queda con otro orden que los demás. */
.lead-form legend{
  float:left;width:100%;
  padding:0;font:800 1.375rem/1.2 Archivo,sans-serif;letter-spacing:-.03em;margin-bottom:20px;
}
/* 🔴 SIN ESTO EL FORMULARIO NO SE PUEDE COMPLETAR, y el fallo no se ve en el paso 1.
   El `float` de arriba resuelve el izado del <legend>, pero deja una trampa: `.opts`
   es `display:flex`, o sea un CONTEXTO DE FORMATO NUEVO, y un contexto de formato
   nuevo tiene prohibido solaparse con un flotante — el navegador lo corre a la
   derecha del flotante, que mide el 100 % del ancho. Resultado medido en producción
   el 2026-09-22: en los pasos 2 y 3 las opciones salían FUERA de la tarjeta con
   ancho 0 (escritorio: tarjeta en x=730 ancho 557, opciones en x=1251 ancho 0).
   Nadie podía elegir tamaño de empresa ni industria.
   `clear:both` baja lo que sigue al legend por debajo del flotante. Va con `~` y no
   con `+` para que valga también si algún día se mete algo entre los dos. */
.lead-form legend ~ *{clear:both}
.hp{position:absolute;left:-9999px}
.step-mark{margin-bottom:18px;font-size:.8125rem;font-weight:700;color:var(--ink-soft)}
.step-mark span{display:inline-block;padding:5px 12px;background:var(--lime-band);color:#33401E;border-radius:999px}

.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:.9375rem;font-weight:600}
.field input,.field select{
  font:400 1.0625rem/1.4 Archivo,sans-serif;color:var(--ink);
  padding:14px 16px;border:1.5px solid rgba(26,26,24,.22);border-radius:12px;
  background:var(--paper);transition:border-color .16s ease,box-shadow .16s ease;
}
.field input::placeholder{color:#6E6B62}
.field input:focus,.field select:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 3px rgba(243,118,16,.18)}
.field.err input,.field.err select{border-color:#B3261E}
/* País (2026-09-24): el select hereda el look del input; la flecha propia porque
   `appearance:none` quita la nativa, que en Safari no respeta el padding. */
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231A1A18' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
/* `!important` a propósito: el motor escribe estos mensajes con estilo EN LÍNEA
   (`font-size:.82rem; color:#c0392b`), así que sin esto la regla no se aplica nunca
   y en el mismo formulario conviven dos rojos distintos de error. */
.lead-form [data-err-for]{margin-top:6px;font-size:.875rem!important;color:#B3261E!important;font-weight:600}

.opts{display:flex;flex-direction:column;gap:9px}
/* Campo condicional de «Other» (2026-09-22). `[hidden]` NO alcanza: `.field` se
   declara `display:flex` arriba, y una declaración de display le gana al atributo.
   Por eso la regla explícita — si se quita, el campo queda SIEMPRE visible. */
.field-cond[hidden]{display:none}
.field-cond{margin-top:12px;padding:14px;border-radius:12px;background:var(--lime-band);
  border:1px solid rgba(26,26,24,.10)}
.field-cond label{color:var(--ink)}
.field-cond .req{color:var(--orange-ink)}
.field-cond.err input{border-color:#B3261E}
.field-cond .err{margin-top:2px}
/* «What type of services are you inquiring about?» y «Who else are you considering?».
   Separados de las opciones de industria igual que el condicional. */
.field-service,.field-considering{margin:20px 0 0}
.field-optional{margin-left:6px;font-size:.8125rem;font-weight:400;color:var(--ink-soft)}
.opt{
  display:flex;align-items:center;gap:13px;padding:14px 17px;
  border:1.5px solid rgba(26,26,24,.18);border-radius:12px;cursor:pointer;
  font-size:1rem;transition:border-color .16s ease,background-color .16s ease;
}
.opt:hover{border-color:rgba(26,26,24,.4);background:#FCFAF5}
.opt input{accent-color:var(--orange-btn);width:19px;height:19px;flex:none;margin:0}
.opt:has(input:checked){border-color:var(--orange-btn);background:#FDF3EA}
/* `p.err` y no `.err`: el motor pone la clase `err` en el WRAPPER del campo
   (`div.field.err`), así que una regla suelta le metía margen y color rojo al
   contenedor entero — la etiqueta roja parecía intencional y era un accidente. */
p.err{margin-top:12px;font-size:.875rem;color:#B3261E;font-weight:600}

.consent{display:flex;gap:11px;margin-top:18px;font-size:.8125rem;line-height:1.5;color:var(--ink-soft);cursor:pointer}
.consent input{accent-color:var(--orange-btn);width:17px;height:17px;flex:none;margin:2px 0 0}
/* Paso 1 (2026-09-29): el permiso de guardar lo incompleto. Discreto a propósito —es un
   permiso, no una oferta— y pegado al botón para que se lea antes de avanzar. */
.consent-save{margin-top:16px}
.consent-save + .btn-block{margin-top:18px}
.consent-save a{color:var(--accent);font-weight:600;white-space:nowrap}
/* `flex-wrap` porque el motor cuelga el aviso de «falló el envío» de
   `btn.parentNode`, que es esta fila: sin envolver, el aviso entra como hermano
   flex y parte el botón de envío en dos líneas justo cuando algo salió mal. */
.navrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.navrow .lead-submit-msg{flex-basis:100%;margin-top:4px;font-size:.875rem;font-weight:600}
.lead-form .btn{margin-top:0}
.lead-form .btn-block{margin-top:24px}
.fineprint{margin-top:16px;font-size:.8125rem;line-height:1.5;color:var(--ink-soft)}
.fineprint a,.lead-sent a:not(.btn){color:var(--accent);font-weight:600}
/* 🔴 2026-09-22 · el `:not(.btn)` NO es cosmético. «Book a call now» es un <a>
   dentro de `.lead-sent`, así que esta regla le pisaba el blanco de `.btn-primary`
   y dejaba texto naranja sobre botón naranja: ~1,1:1, ilegible. Una regla escrita
   para enlaces de TEXTO alcanzó a un botón que llegó después. */

/* El estado enviado es una pantalla, no un párrafo suelto: es lo último que ve
   alguien que acaba de convertir, y tiene que ofrecerle el siguiente paso que SÍ
   se cuenta como conversión. */
.lead-sent{font-size:1.0625rem;line-height:1.6;text-align:center;padding:14px 4px 6px}
.lead-sent .sent-mark{
  width:64px;height:64px;margin:0 auto 20px;border-radius:50%;
  background:var(--lime-band);color:var(--lime-deep);
  font:700 2rem/64px Archivo,sans-serif;
}
.lead-sent b{display:block;font-size:1.5rem;letter-spacing:-.03em;margin-bottom:6px}
.lead-sent .sent-lead{max-width:38ch;margin:0 auto}
.lead-sent .btn{margin-top:26px}
.sent-or{margin-top:16px;font-size:.9375rem;color:var(--ink-soft)}
/* Cuando el lead ya entró, la columna de la izquierda deja de vender: sus ticks y
   el «Prefer to talk first?» compiten con el único paso que queda por dar. */
.two-form:has(.lead-formhost.is-sent) .form-copy .ticks,
.two-form:has(.lead-formhost.is-sent) .form-copy .or{display:none}

/* ─── Popup del formulario ─────────────────────────────────────────────────
   Todos los CTA de la página abren este popup en vez de desplazar hasta #form:
   el visitante pide la cotización desde donde se convenció, sin perder de vista
   la sección que lo convenció.

   ⚠️ EL FORMULARIO NO SE DUPLICA. Se declara UNA sola vez en #form y el motor
   (captura-tracking v1.21) lo MUDA acá adentro al cargar. Dos copias obligarían
   a mantener el TEXTO DEL CONSENTIMIENTO —que es la evidencia legal de lo que el
   visitante vio ese día— en dos lugares: la primera vez que uno se edita solo,
   el registro deja de probar lo que dice el otro.
   Sin JS no se muda nada: el form se queda en su sección, los CTA `href="#form"`
   siguen llevando hasta ahí y este popup jamás se abre. Por eso su caja está
   VACÍA en el HTML servido.

   La tarjeta blanca de acá es `.box`: adentro, al `.lead-formhost` se le quitan
   fondo, borde y sombra, o serían dos tarjetas una dentro de la otra. */
.lead-modal{
  position:fixed;inset:0;z-index:2000;display:none;
  align-items:flex-start;justify-content:center;overflow-y:auto;
  padding:clamp(16px,4vh,44px) 16px;
  /* En móviles con barra de gestos el último campo queda debajo de la barra: el
     popup scrollea, pero el envío se ve tapado justo en el paso 3. */
  padding-bottom:calc(clamp(16px,4vh,44px) + env(safe-area-inset-bottom,0px));
}
.lead-modal.is-open{display:flex}
.lead-modal .ov{
  position:fixed;inset:0;background:rgba(26,26,24,.64);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.lead-modal .box{
  position:relative;margin:auto;width:100%;max-width:560px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(26px,3.4vw,38px);
  box-shadow:0 34px 80px -34px rgba(26,26,24,.75);
  animation:lead-pop .2s ease;
}
@keyframes lead-pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.lead-modal .x{
  position:absolute;top:12px;right:12px;width:40px;height:40px;
  display:grid;place-items:center;cursor:pointer;
  background:var(--cream);color:var(--ink);border:1px solid var(--line);
  border-radius:999px;font:400 22px/1 Archivo,sans-serif;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .25s ease;
}
.lead-modal .x:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:rotate(90deg)}
/* La píldora no puede crecer hasta debajo de la ✕. */
.lead-modal .kicker{margin-bottom:12px;max-width:calc(100% - 52px)}
.lead-modal h3{font:800 clamp(1.5rem,3.2vw,1.875rem)/1.15 Archivo,sans-serif;letter-spacing:-.035em;margin:0 0 8px}
.lead-modal .modal-lead{margin:0 0 22px;max-width:44ch;font-size:1rem;line-height:1.55;color:var(--ink-soft)}
.lead-modal .lead-formhost{background:transparent;border:0;box-shadow:none;padding:0;border-radius:0}
@media (max-width:560px){
  .lead-modal{padding-left:12px;padding-right:12px}
  .lead-modal .box{padding:24px 18px 22px}
  .lead-modal h3{font-size:1.375rem}
  .lead-modal .modal-lead{font-size:.9375rem;margin-bottom:18px}
}
@media (prefers-reduced-motion:reduce){.lead-modal .box{animation:none}}

/* Tarjeta que ocupa el lugar del formulario en #form cuando el motor lo muda al
   popup. Nace `hidden` en el HTML y el motor la revela al mudar: si el JS no
   corre, el que se queda en la sección es el formulario de verdad y esta tarjeta
   no aparece nunca — de lo contrario habría un botón que no abre nada. */
[data-modal-jsonly][hidden]{display:none}
.formcta{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(28px,3.2vw,40px);box-shadow:var(--shadow);text-align:center;
}
.formcta h3{font:800 1.5rem/1.2 Archivo,sans-serif;letter-spacing:-.03em;margin:0 0 10px}
.formcta .formcta-lead{margin:0 auto 26px;max-width:34ch;color:var(--ink-soft);line-height:1.55}
.formcta .fineprint{margin-top:16px;text-align:center}

/* ─── Cierre — tarjeta recortada, no banda a sangre ────────────────────────
   Es el único bloque que se despega del borde, y ahí está su trabajo: cierra en
   vez de continuar. El ornamento de trazos es el recurso más propio de la marca
   y hasta acá no aparecía en ninguna parte de la página. */
.close{background:var(--paper);padding-block:clamp(48px,6vw,84px)}
.close-card{
  position:relative;overflow:hidden;
  background:var(--lime-band);border-radius:28px;
  padding:clamp(34px,4.5vw,62px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:32px;align-items:center;
  min-height:330px;
}
.close-copy{position:relative;z-index:2}
.close h2{max-width:17ch}
.close p{margin-top:16px;max-width:46ch;color:var(--ink-soft-lime);font-size:1.0625rem}
.close .btn{margin-top:30px}
.close .arrow{flex:none;transition:transform .2s ease}
.close .btn:hover .arrow{transform:translateX(3px)}
.tel-close{margin-top:16px;font-weight:600;color:var(--ink-soft-lime);
  text-decoration:underline;text-underline-offset:3px;display:block;width:max-content}
.tel-close:hover{color:var(--ink)}

/* La banda de trazos EXCEDE la tarjeta por los tres lados que toca; el
   `overflow:hidden` de `.close-card` la corta y por eso los trazos salen del
   borde en lugar de morir adentro con un margen.
   `preserveAspectRatio="none"` es deliberado: la curva se estira para tocar las
   cuatro esquinas de su caja, que es la única forma de garantizar que llegue al
   borde en cualquier ancho. En una curva suave la distorsión no se ve.
   `vector-effect:non-scaling-stroke` mantiene el grosor del trazo constante pese
   al estirado — sin eso, se deforma a lo ancho. */
.close-art{position:absolute;top:-8%;bottom:-10%;left:40%;right:-6%;z-index:0;pointer-events:none}
.close-art .swoosh{width:100%;height:100%;display:block}

.close-card .script{
  position:absolute;right:5%;bottom:9%;z-index:2;
  font:600 2.15rem/1.1 Caveat,"Segoe Script","Bradley Hand",cursive;
  color:var(--accent);transform:rotate(-4deg);text-align:left;
}
.close-card .underline{display:block;width:150px;height:11px;margin-top:4px;margin-left:8px}

@media (max-width:1000px){
  .close-card{grid-template-columns:1fr;gap:10px;min-height:0;padding-bottom:220px}
  .close-art{top:auto;height:220px;bottom:-10%;left:22%;right:-10%}
  .close-card .script{right:4%;bottom:6%;font-size:1.75rem}
}
@media (max-width:560px){
  .close-card{border-radius:22px;padding-bottom:150px}
  .close-art{height:160px;left:8%}
  /* En móvil la esquina es TODA trazos: la nota encima no se leía. Sale del
     absoluto y entra al flujo, debajo del botón, sobre el verde limpio que queda
     antes de la banda de trazos. */
  .close-card .script{position:relative;right:auto;bottom:auto;
    margin-top:18px;margin-left:6px;font-size:1.6rem;justify-self:start}
}

/* ─── Pie ──────────────────────────────────────────────────────────────────*/
/* Pie CLARO con el logo a color: la página cierra en crema y el negro cortaba
   de golpe. La única franja oscura sigue siendo la de noches y feriados, que es
   la que tiene motivo. */
.foot{background:var(--paper);color:var(--ink);padding-block:52px 24px}
.foot-in{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:40px}
.logo-foot{width:192px}
.foot-brand p{margin-top:18px;color:var(--ink-soft);font-size:.9375rem;line-height:1.6}
.foot-col h3{font-size:1rem;letter-spacing:-.02em;color:var(--ink);margin-bottom:14px;font-weight:800}
.foot-col p{font-size:.9375rem;line-height:1.9;color:var(--ink-soft)}
.foot-col a{text-decoration:none;color:var(--ink-soft)}
.foot-col a:hover{color:var(--accent);text-decoration:underline}
.foot-legal{
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  font-size:.8125rem;color:var(--ink-soft);
}
.foot-legal a{color:var(--ink-soft)}
.foot-legal a:hover{color:var(--accent)}

/* ─── Responsive ───────────────────────────────────────────────────────────*/
@media (max-width:1120px){
  /* El menú no entra junto al teléfono y el CTA. Se oculta en vez de encogerse:
     es navegación secundaria — las secciones ya tienen su CTA y sus sitelinks.
     Era 1060px; subió a 1120 porque desde el 2026-09-21 son SEIS enlaces. */
  .topnav{display:none}
}
@media (max-width:1000px){
  .hero-in,.two,.two-form,.close-in{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:26px}
  /* `.ind-3` pasa de TRES a UNA acá mismo, sin escalón de dos, y por dos
     razones: tres tarjetas en dos columnas dan 2+1 con un hueco al lado —el
     defecto que la variante existe para evitar—, y a 1000px tres columnas dejan
     ~300px por tarjeta, que parte cualquier `h3` en cuatro líneas. Además la
     sección entera cambia de forma en UN solo ancho: `.two` colapsa acá.
     ⚠️ La rejilla de dos (`.ind`) colapsa más abajo, a 680: son dos reglas y
     dos anchos distintos a propósito. */
  .ind-3{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
  .proof{grid-template-columns:1fr 1fr;row-gap:26px}
  /* Con CINCO elementos en dos columnas las filas arrancan en 1, 3 y 5 — todos
     impares — y el quinto quedaría solo en media fila: se le da el ancho entero
     para que cierre la franja centrado en vez de colgar a la izquierda. */
  .proof li:nth-child(odd){border-left:0}
  .proof li:last-child{grid-column:1/-1}
  .hero-h{font-size:clamp(2.4rem,7vw,3.2rem)}
}
@media (max-width:680px){
  .wrap{padding-inline:18px}
  /* Logo y CTA en UNA línea. El salto de línea y el `width:100%` venían de cuando
     el teléfono compartía fila con el botón (retirado 2026-09-22); sin él, sólo
     empujaban el botón debajo del logo. */
  .topbar-in{flex-wrap:nowrap;gap:12px}
  .topbar-right{width:auto;flex-shrink:0}
  .logo{min-width:0;flex-shrink:1}
  .ind{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr;gap:16px}
  .rev-head{flex-direction:column;align-items:flex-start}
  .foot-in{grid-template-columns:1fr;gap:34px}
  /* Los CTA de sección ocupan el ancho; el de la barra superior NO — ahí un
     botón a pantalla completa empuja el teléfono a dos líneas. */
  .cta-row .btn,
  .sec .wrap>.btn,
  .sec .wrap>div>.btn,
  .close-cta .btn,
  .lead-form .btn-block{width:100%}
  .tel-num{white-space:nowrap}
  .navrow .btn{flex:1}
  /* «Get a Tailored Quote» a 18px no entra en una línea al lado del teléfono en
     400px: en móvil el botón dice «Get a Quote». El del hero conserva el texto largo. */
  .hide-sm{display:none}
  .btn i{font-style:normal}
  .topbar .btn-sm{white-space:nowrap}
  .clock{font-size:1.3125rem}
  .sec{padding-block:56px}
}
@media (max-width:420px){
  .proof{grid-template-columns:1fr;row-gap:22px}
  .proof li{border-left:0;padding-inline:0}
  .logo{width:144px}
  .topbar .btn-sm{padding-inline:14px}
}

/* ─── Banner de cookies de HubSpot: VENTANA CENTRADA (2026-10-01) ───────────
   Aprobado por Ryan Demchuk (SureCall) el 30-sep: «centered window, Accept and
   Decline equal in size, color and weight, and the page stays usable after
   Decline». Reemplaza a la barra compacta de abajo (29-sep).

   · El banner es del portal del cliente: NO se toca su texto ni su lógica, solo
     la forma. Se ancla al centro con un fondo que pide elegir antes de seguir.
   · Accept y Decline son IDÉNTICOS: mismo ancho (mitad y mitad), mismo fondo,
     mismo borde, mismo peso. Nada de patrón engañoso.
   · Después de Accept o Decline HubSpot retira el banner, `landing.js` quita la
     clase `hs-banner-on` y la página queda entera y operable.
   · `html body` delante no es decorativo: HubSpot inyecta su hoja DESPUÉS de
     ésta, así que con la misma especificidad ganaría la suya por orden. Y sus
     botones van con 3 IDs (`div#…  div#…-inner a#…`, con !important): los
     nuestros llevan los mismos 3 IDs + `html body` para ganarles. */
html body #hs-eu-cookie-confirmation{
  position:fixed!important;top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:min(560px,calc(100vw - 32px))!important;max-width:none!important;box-sizing:border-box!important;
  margin:0!important;max-height:min(80vh,560px)!important;overflow:hidden!important;
  background:var(--paper)!important;color:var(--ink)!important;
  border:1px solid var(--line)!important;border-radius:18px!important;
  box-shadow:0 30px 80px -20px rgba(26,26,24,.55)!important;
  z-index:2147483647!important;
}
html body #hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner{
  padding:24px 24px 20px!important;box-sizing:border-box!important;max-width:none!important;
  display:flex!important;flex-direction:column!important;max-height:min(80vh,560px)!important;
  background:transparent!important;
}
/* El texto scrollea dentro de su caja; los dos botones quedan SIEMPRE a la vista. */
html body #hs-eu-cookie-confirmation #hs-eu-policy-wording,
html body #hs-eu-cookie-confirmation #hs-eu-cookie-disclaimer{flex:0 1 auto!important;min-height:0!important;overflow-y:auto!important}
html body #hs-eu-cookie-confirmation p,
html body #hs-eu-cookie-confirmation div{font-size:.875rem!important;line-height:1.5!important;color:var(--ink)!important}
html body #hs-eu-cookie-confirmation p{margin:0 0 10px!important}
html body #hs-eu-cookie-confirmation a:not([role="button"]){color:var(--orange-ink)!important}
html body #hs-eu-cookie-confirmation #hs-en-cookie-confirmation-buttons-area{
  flex:none!important;margin:8px 0 0!important;display:block!important;
}
html body #hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-button-group{
  display:flex!important;gap:12px!important;width:100%!important;margin:0!important;justify-content:stretch!important;
}
html body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button,
html body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-decline-button{
  flex:1 1 0!important;min-width:0!important;margin:0!important;box-sizing:border-box!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:48px!important;padding:12px 16px!important;
  background:var(--ink)!important;color:#fff!important;border:1px solid var(--ink)!important;border-radius:999px!important;
  font:600 1rem/1.2 inherit!important;font-family:inherit!important;font-size:1rem!important;font-weight:600!important;
  text-decoration:none!important;text-align:center!important;box-shadow:none!important;
}
html body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button:hover,
html body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-decline-button:hover{background:#3A3A36!important;border-color:#3A3A36!important}
html body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button:focus-visible,
html body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-decline-button:focus-visible{outline:3px solid var(--orange-btn)!important;outline-offset:2px!important}
@media (max-width:640px){
  html body #hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner{padding:18px 16px 16px!important}
  html body #hs-eu-cookie-confirmation p,
  html body #hs-eu-cookie-confirmation div{font-size:.8125rem!important;line-height:1.45!important}
}
/* El fondo: mientras el banner está abierto la página se oscurece y no recibe
   clics (hay que elegir Accept o Decline, los dos igual de fáciles). Al elegir,
   `landing.js` quita `hs-banner-on` y desaparece. */
html.hs-banner-on body::after{
  content:"";position:fixed;inset:0;z-index:2147483646;background:rgba(26,26,24,.45);
}
html.hs-banner-on{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .watch-cities li.is-ping{background:none}
}

/* El <i> del CTA es un gancho de CSS, no énfasis tipográfico. */
.btn i{font-style:normal}

/* ─── Iconos ───────────────────────────────────────────────────────────────
   Un solo lenguaje: trazo 1.8, extremos redondeados, sin relleno, heredando el
   color del contenedor. Las baldosas lima son el mismo componente a dos tamaños,
   no dos componentes. */
svg use{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:46px;height:46px;border-radius:13px;background:var(--lime-band);color:#33401E;
  margin-bottom:16px;
}
.tile-sm{width:38px;height:38px;border-radius:11px;margin-bottom:12px}
.chans li{display:inline-flex;align-items:center;gap:9px}
.chans svg{color:var(--lime-deep)}
.creds li{align-items:flex-start}

/* How It Works: círculos lima con el ordinal, en vez del numeral suelto. */
.steps li{display:flex;flex-direction:column}
.steps .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;background:var(--lime-band);
  font:800 1rem/1 Archivo,sans-serif;color:#33401E;letter-spacing:-.01em;
  margin-bottom:18px;
}

/* ═══ MOVIMIENTO ═══════════════════════════════════════════════════════════
   Dos momentos firmados que abren y cierran la página —la llamada que entra
   arriba, la firma que se dibuja abajo— más dos apariciones escalonadas donde
   hay una colección, y nada más. No hay una entrada idéntica en cada sección:
   eso es decoración repetida, no ritmo.

   ⚠️ TODO cuelga de `.js-motion`, que el script del <head> pone SOLO si hay JS y
   el sistema no pide menos movimiento. Sin esa clase la página se ve completa y
   quieta: el estado por defecto es "visible", nunca "oculto esperando a que
   alguien lo revele". El hero no se anima a propósito — es el LCP. */

.js-motion [data-reveal],
.js-motion [data-stagger] > *{
  opacity:0;transform:translateY(14px);
  transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1);
}
.js-motion [data-reveal].in,
.js-motion [data-stagger] > .in{opacity:1;transform:none}

/* La tira de guardia y la ficha de la foto entran con un respiro de diferencia:
   es la llamada aterrizando, no dos cajas apareciendo. */
.js-motion .watch-inline{transition-delay:.22s}
.js-motion .hero-chip{transform:translateY(18px) scale(.97);transition-delay:.38s}
.js-motion .hero-chip.in{transform:none}

/* Los trazos del cierre se dibujan solos. `pathLength="1"` normaliza el largo,
   así el mismo par de valores sirve para las cuatro curvas y para el subrayado
   pese a medir cosas distintas. */
.js-motion [data-draw] path{stroke-dasharray:1;stroke-dashoffset:1}
.js-motion [data-draw].in path{
  animation:draw 1.5s cubic-bezier(.22,1,.36,1) forwards;
}
.js-motion .swoosh.in path:nth-child(2){animation-delay:.10s}
.js-motion .swoosh.in path:nth-child(3){animation-delay:.20s}
.js-motion .swoosh.in path:nth-child(4){animation-delay:.30s}
.js-motion .underline.in path{animation-duration:.7s;animation-delay:.55s}
@keyframes draw{to{stroke-dashoffset:0}}

/* La barra sólo levanta sombra cuando hay contenido pasando por debajo. Fija
   desde el principio, la sombra es un adorno; al aparecer, explica. */
#topsentinel{position:absolute;top:0;height:1px;width:1px}
.topbar{box-shadow:0 1px 0 rgba(26,26,24,.07);transition:box-shadow .25s ease}
.is-stuck .topbar{box-shadow:0 1px 0 rgba(26,26,24,.07),0 10px 24px -18px rgba(26,26,24,.55)}

/* ─── Hover: levantar, no parpadear ────────────────────────────────────────*/
.awards li,.chans li,.ind-main{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.awards li:hover{transform:translateY(-3px);box-shadow:0 12px 24px -18px rgba(26,26,24,.6)}
.chans li:hover{transform:translateY(-2px);border-color:rgba(26,26,24,.28)}
.ind-main:hover{box-shadow:0 16px 34px -26px rgba(26,26,24,.55)}
.places li,.creds li{transition:transform .2s ease}
.places li:hover{transform:translateX(3px)}

@media (prefers-reduced-motion:reduce){
  /* Cinturón y tirantes: la clase ya no debería estar, pero si alguien la fuerza
     nada se mueve igual. */
  .js-motion [data-reveal],.js-motion [data-stagger] > *{opacity:1!important;transform:none!important}
  .js-motion [data-draw] path{stroke-dasharray:none!important;stroke-dashoffset:0!important;animation:none!important}
}

/* ─── Páginas legales ──────────────────────────────────────────────────────
   Medida corta y jerarquía marcada: un documento legal se abandona por
   ilegible mucho antes que por largo. Sin degradados ni ornamento: acá el
   trabajo es que se lea, no que impresione. */
.legal{background:var(--paper);padding-block:clamp(40px,5vw,68px) clamp(48px,6vw,80px)}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:10px}
.legal h2{
  font-size:1.3125rem;letter-spacing:-.025em;
  margin:44px 0 12px;padding-top:22px;border-top:1px solid var(--line);
}
.legal-meta{font-size:.9375rem;color:var(--ink-soft);margin-bottom:30px}
.legal p{margin-bottom:14px;line-height:1.68;max-width:70ch}
.legal a{color:var(--accent);font-weight:600}
.legal code{
  font:600 .875em/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--cream);padding:2px 6px;border-radius:5px;
}
.legal-list{margin:0 0 16px;display:flex;flex-direction:column;gap:10px;max-width:70ch}
.legal-list li{position:relative;padding-left:22px;line-height:1.62}
.legal-list li::before{
  content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--lime-deep);
}
/* La caja de arranque dice lo más importante de las dos páginas: que NO
   reemplazan a los documentos maestros del cliente. Va antes que todo y con
   campo de color propio para que no se lea como un párrafo más. */
.legal-callout{
  background:var(--lime-band);border-radius:16px;padding:22px 26px;margin-bottom:34px;
}
.legal-callout p{margin:0;color:var(--ink-soft-lime)}
.legal-contact{
  margin-top:44px;padding-top:24px;border-top:2px solid var(--ink);
  font-size:.9375rem;color:var(--ink-soft);
}
.legal-contact p{margin-bottom:8px}

/* `.creds` es de CUATRO columnas porque en L01 la lista de certificaciones tiene
   exactamente cuatro ítems. La lista de «lo que NO hacemos» de L02 tiene TRES, así
   que dejaba la cuarta columna vacía y la fila terminaba a dos tercios del ancho —
   se leía como que faltaba una tarjeta, no como composición.
   Va como modificador y no tocando `.creds`: la de L01 y la de certificaciones de
   L02 siguen en cuatro, que es lo correcto para ellas. */
.creds-3{grid-template-columns:repeat(3,1fr)}

/* ⚠️ Y sus DOS cortes, repetidos acá a propósito. `.creds` ya tiene los suyos en
   las media queries de más arriba, pero esta regla vive al FINAL de la hoja: con
   la misma especificidad gana la última en orden de aparición, así que la media
   query de `.creds` no llegaba a aplicarse nunca. Sin estas dos líneas la lista
   se quedaba en TRES columnas también a 385px — 116px por tarjeta, ilegible.
   Medido en vivo antes de corregirlo. */
@media (max-width:1000px){ .creds-3{grid-template-columns:1fr 1fr} }
@media (max-width:560px) { .creds-3{grid-template-columns:1fr} }

/* La ficha de datos es crema porque en L01 vive sobre `sec-paper`, que es blanco.
   En L02 su sección es `sec-cream`: el mismo color contra el mismo color, y sólo
   la dibujaba el borde de 1px. Va en blanco, igual que se resolvieron las
   tarjetas de las tres preguntas.
   Colgado del `id` —que sólo existe en esta página— y no de `.record`: así L01
   queda intocada por construcción, no por suerte. */
#track-record .record{background:var(--paper)}

/* ─── Marcador de término con explicación (inc-hint.php) ──────────────────
   Un «?» diminuto al lado de «Amazon Connect». Va donde el término aparece
   como ETIQUETA SUELTA —la ficha del hero, la fila «Platform»— y no en las
   frases que ya lo explican: repetirlo en cada mención sería justo lo
   invasivo que se quería evitar.
   `cursor:help` y no `pointer`: no lleva a ningún lado, explica. */
.hint{position:relative;white-space:nowrap}
.hint-i{
  appearance:none;-webkit-appearance:none;margin:0 0 0 5px;
  /* ⚠️ 1px de relleno ARRIBA, y no es un ajuste a ojo. El «?» no tiene
     descendente, así que su mancha de tinta queda por encima del centro de
     la caja de línea y el signo se ve alto dentro del círculo. Medido en
     vivo: 1,5px de aire arriba contra 2,4px abajo. Con `align-items:center`
     el contenido se centra en la CAJA DE CONTENIDO, así que 1px de relleno
     superior lo baja medio píxel — justo la diferencia. */
  padding:1px 0 0;
  width:15px;height:15px;flex:0 0 auto;border-radius:50%;
  border:1.3px solid currentColor;background:none;color:inherit;
  /* ⚠️ Propiedades LARGAS, no el atajo `font`: `inherit` no es un valor válido
     como componente de la abreviada, así que `font:700 10px/1 inherit` se
     descarta ENTERA y el marcador hereda lo que haya alrededor. */
  font-family:inherit;font-weight:700;font-size:10px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  vertical-align:.32em;cursor:help;opacity:.42;
  transition:opacity .15s ease;
}
.hint-i:hover,.hint-i:focus-visible,.hint.open .hint-i{opacity:1}

.hint-bub{
  position:absolute;left:50%;bottom:calc(100% + 11px);
  width:max-content;max-width:min(74vw,290px);
  background:var(--ink);color:#fff;
  padding:11px 14px;border-radius:12px;
  /* Idem: con el atajo, el globo heredaba la NEGRITA del <b> de la ficha del
     hero, porque la declaración entera era inválida y se ignoraba. */
  font-family:inherit;font-weight:400;font-size:.8125rem;line-height:1.45;
  white-space:normal;text-align:left;letter-spacing:0;
  box-shadow:0 12px 32px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;
  transform:translateX(-50%) translateY(4px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  z-index:40;pointer-events:none;
}
.hint:hover .hint-bub,
.hint:focus-within .hint-bub,
.hint.open .hint-bub{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
/* El piquito se ancla al MARCADOR y no al centro del globo: cuando el JS corre
   el globo para que entre en pantalla, el piquito tiene que quedarse señalando
   el «?», no viajar con la caja. */
.hint-bub::after{
  content:'';position:absolute;top:100%;left:50%;
  margin-left:var(--hint-nudge,0px);
  transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--ink);
}