@import url("../fonts/fonts.css");

/* ============================================================
   Fletes USA — sistema visual

   La marca manda cuatro colores y una tipografia. Lo demas de
   este bloque son derivados suyos: ningun componente inventa un
   color, todos salen de aqui.

   El sitio no es oscuro ni claro, es las dos cosas por franjas.
   Sobre gris claro va el contenido que se lee; el marino se
   reserva para las bandas a sangre con foto o video, que son las
   que cortan la pagina y dan el respiro. Medido sobre las
   maquetas: entre 31 y 54 por ciento de claro segun la pagina.

   Lo que no cambia del encargo anterior: quien decide un flete de
   maquinaria suele tener 40+, escanea en vez de leer y muchas
   veces mira el telefono a plena luz en un patio. De ahi que la
   tipografia siga siendo grande y que cada dato importante se vea
   sin leer un parrafo.

   Los tokens de abajo son la fuente normativa. No metas valores
   sueltos en los componentes.
   ============================================================ */

:root {
  /* Error de formulario. No esta en la hoja de marca, pero un
     campo en rojo tiene que leerse como rojo. */
  --error: #c0392b;

  /* ---- Los cuatro de la marca ---- */
  --navy: #22335f;
  --blue: #375da8;
  --sky: #669ad3;
  /* El azul claro de la marca sirve para superficies y titulares,
     pero sobre marino se queda en 4.18 y el texto corrido pide
     4.5. Esta version aclarada da 5.68 y es para eso: texto chico
     sobre fondo oscuro. */
  --sky-text: #8ab4e1;
  --mist: #e7ecf8;

  /* ---- Fondos ----
     El gris es el suelo real de las maquetas, no el blanco: el
     blanco queda para las tarjetas, que asi se levantan solas sin
     necesidad de sombra. */
  --page: #ffffff;
  --tint: #f1f1f1;
  --tint-2: var(--mist);
  --rule: #dde2ec;
  --rule-soft: #ebeef4;

  /* ---- Bandas oscuras ---- */
  --deep: var(--navy);
  --deep-2: #1a2847;
  --deep-rule: #33456f;

  /* ---- Acento ----
     Los nombres corridor/hazard vienen del sistema anterior y se
     conservan para no tener que tocar los trescientos usos que ya
     hay repartidos; lo que cambia es a que color apuntan. El
     primario dejo de ser ambar: en las maquetas todos los botones
     son azules. */
  --corridor: var(--blue);
  --corridor-deep: var(--navy);
  --corridor-soft: var(--mist);
  /* El boton primario usa el azul medio y no el claro, que es lo
     que dibuja la maqueta. Con el claro, el texto blanco encima se
     queda en 2.95 de contraste y el minimo es 4.5: no es un matiz
     de gusto, es que no se lee a plena luz, que es justo donde se
     mira esta pagina. Con el medio sube a 6.38 y sigue siendo un
     color de la marca. El claro se queda para superficies y para
     texto grande. */
  --hazard: var(--blue);
  --hazard-deep: #2b4d8c;
  --hazard-soft: var(--mist);
  --clear: #16794f;
  --pin: #e02b20;
  --pin-deep: #a81d15;

  /* ---- Texto ----
     El tenue es mas oscuro que el de la hoja de marca a proposito:
     con el tono de la maqueta las pistas y las letras chicas se
     quedaban en 3.45 sobre el gris, por debajo del minimo. */
  --ink: var(--navy);
  --ink-soft: #4b587a;
  --ink-faint: #606a85;
  --on-deep: #eef2fa;
  --on-deep-soft: #a9b8d6;

  /* ---- Tipografia ----
     Una sola familia. Figtree no tiene version estrecha, asi que
     los titulares que antes eran Barlow Condensed ahora se apoyan
     en el peso y en el interletraje, no en el ancho. */
  --font-display: Figtree, system-ui, -apple-system, sans-serif;
  --font-body: Figtree, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Espaciado */
  --s-hair: 4px;
  --s-xs: 8px;
  --s-sm: 14px;
  --s-md: 22px;
  --s-lg: 36px;
  --s-xl: 60px;
  --s-section: clamp(76px, 9vw, 140px);

  /* Forma */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  /* Contenedor */
  --container: 1560px;
  --gutter: clamp(22px, 3vw, 48px);
  --rail: 64px;

  /* Sombras: suaves, solo donde algo se levanta de verdad */
  --shadow-sm: 0 1px 2px rgba(34, 51, 95, 0.06),
    0 2px 8px -2px rgba(34, 51, 95, 0.08);
  --shadow-md: 0 4px 12px -2px rgba(34, 51, 95, 0.1),
    0 12px 32px -12px rgba(34, 51, 95, 0.18);
  --shadow-lg: 0 8px 24px -6px rgba(34, 51, 95, 0.12),
    0 32px 64px -24px rgba(34, 51, 95, 0.26);
  --focus: 0 0 0 3px rgba(55, 93, 168, 0.36);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h, 136px) + 16px);
}
body {
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Esto recorta lo que se sale de lado. Con "hidden" el body se
     vuelve un contenedor con scroll propio y eso rompe el
     position:sticky de la cabecera en varios navegadores, aunque en
     Chrome se salve de milagro. "clip" recorta igual pero no crea
     scroll, asi que la cabecera se sigue pegando. El "hidden" queda
     de respaldo para los navegadores viejos que no conocen "clip". */
  overflow-x: hidden;
  overflow-x: clip;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
}
ul,
ol {
  list-style: none;
  padding: 0;
}

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

::selection {
  background: var(--hazard);
  color: var(--ink);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 200;
  background: var(--hazard);
  color: var(--ink);
  padding: 14px 22px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: var(--r-sm);
}
.skip-link:focus {
  top: 12px;
}

/* ---------- Tipografia ----------
   Escala deliberadamente grande. El publico no lee letra chica. */

/* Escala tipografica.

   Barlow Condensed cabia mucho texto en poco ancho; Figtree no es
   estrecha, asi que los mismos tamanos reventaban el titular del
   hero. Los de abajo estan medidos sobre las maquetas: la altura de
   mayuscula del titular del hero equivale a unos 47 px a 1360 de
   ancho y a 54 a 1560, y la del titular grande de Cobertura a 62 y
   72. Se dejan un punto por encima de eso, que es la direccion que
   ha pedido el cliente siempre. */

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 4.4vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.print > * {
  display: block;
}

.headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.875rem, 2.8vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}

.title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.3;
}

/* Rotulo de seccion. Ya no es monoespaciada: la marca tiene una
   sola familia, y en las maquetas estos rotulos son Figtree en
   mayuscula con el interletraje abierto. */
.label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* La monoespaciada se queda solo donde hace falta que las cifras
   alineen en columna: licencias, dimensiones, rutas. */
.ann,
.measure {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.prose {
  max-width: 64ch;
}
.prose p + p {
  margin-top: var(--s-md);
}

.soft {
  color: var(--ink-soft);
}
.amber {
  color: var(--hazard-deep);
}

/* ---------- Fondos ---------- */

.ground-page {
  background: var(--page);
  color: var(--ink);
}
.ground-tint {
  background: var(--tint);
  color: var(--ink);
}
.ground-deep {
  background: var(--deep);
  color: var(--on-deep);
}
.ground-deep .soft {
  color: var(--on-deep-soft);
}
/* Donde el diseno anterior ponia ambar sobre oscuro ahora iria el
   azul de la marca, que sobre marino da 1.93 y es practicamente
   invisible. Va el azul aclarado. */
.ground-deep .amber {
  color: var(--sky-text);
}
.ground-deep .headline,
.ground-deep .display,
.ground-deep .title {
  color: #fff;
}

/* Reticula de carta: presente pero discreta */
.graticule {
  position: relative;
}
.graticule::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 104px 104px;
  opacity: 0.5;
  mask-image: radial-gradient(
    ellipse 100% 80% at 50% 35%,
    #000 25%,
    transparent 100%
  );
}
.ground-deep.graticule::before {
  background-image: linear-gradient(to right, var(--deep-rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--deep-rule) 1px, transparent 1px);
  opacity: 0.6;
}

/* ---------- Layout ---------- */

/* A sangre: rompe el contenedor y ocupa el ancho de la ventana.
   Las fotos son el argumento de venta; encerrarlas en la columna
   de texto las convierte en ilustracion. */
.bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--s-section);
}

.section-head {
  display: grid;
  gap: var(--s-md);
  margin-bottom: var(--s-xl);
}
@media (min-width: 900px) {
  .section-head {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--s-lg) clamp(36px, 5vw, 76px);
    align-items: end;
  }
}
.section-head .ann {
  max-width: 46ch;
  padding-bottom: 5px;
  color: var(--ink-soft);
}
.ground-deep .section-head .ann {
  color: var(--on-deep-soft);
}

.section-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--s-sm);
  color: var(--hazard-deep);
}
.section-tag::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--hazard);
  flex: none;
  border-radius: 2px;
}
.ground-deep .section-tag {
  color: var(--sky-text);
}

/* El rail del corredor solo tiene sentido en pantallas anchas */
.spine {
  display: none;
}

/* ---------- Botones ----------
   Grandes y con etiqueta legible. Nada de mono diminuto. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  padding: 19px 34px;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease),
    border-color 0.15s var(--ease), box-shadow 0.15s var(--ease),
    transform 0.12s var(--ease);
}
.btn:active {
  transform: translateY(1px);
}

/* El primario era ambar con texto oscuro encima. Ahora el fondo es
   azul, asi que el texto va en blanco: dejarlo marino daba 1.93 de
   contraste, que es practicamente ilegible. En blanco son 6.38. */
.btn-primary {
  background: var(--hazard);
  color: #ffffff;
  border-color: var(--hazard);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--corridor-deep);
  border-color: var(--corridor-deep);
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  background: var(--page);
  color: var(--ink);
  border-color: var(--rule);
}
.btn-ghost:hover {
  border-color: var(--corridor);
  color: var(--corridor);
  background: var(--corridor-soft);
}
.ground-deep .btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.ground-deep .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--tint-2);
  border-color: var(--tint-2);
  color: var(--ink-faint);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn .tick {
  width: 8px;
  height: 8px;
  border-right: 2.5px solid currentColor;
  border-top: 2.5px solid currentColor;
  transform: rotate(45deg);
  flex: none;
}

/* ---------- Panel ---------- */

.panel {
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 30px;
  box-shadow: var(--shadow-sm);
}
.ground-deep .panel {
  background: var(--deep-2);
  border-color: var(--deep-rule);
  box-shadow: none;
}
.panel-flagged {
  border-top: 4px solid var(--hazard);
}

/* ---------- Bloque de autoridad ---------- */

.stamp {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--page);
  overflow: hidden;
}
.stamp > * {
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-right: 1px solid var(--rule);
}
.stamp > *:last-child {
  border-right: 0;
}
.stamp b {
  color: var(--hazard-deep);
  font-weight: 600;
}
.ground-deep .stamp {
  background: var(--deep-2);
  border-color: var(--deep-rule);
}
.ground-deep .stamp > * {
  color: var(--on-deep-soft);
  border-color: var(--deep-rule);
}
.ground-deep .stamp b {
  color: var(--sky-text);
}

/* ---------- Llamada sobre foto ---------- */

.callout {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.callout-leader {
  width: clamp(28px, 5vw, 64px);
  height: 2px;
  background: var(--hazard);
  position: relative;
  flex: none;
}
.callout-leader::before {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  width: 2px;
  height: 12px;
  background: var(--hazard);
}
.callout-body {
  background: var(--hazard);
  border-radius: var(--r-sm);
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
  text-transform: uppercase;
}

/* ---------- Marcador de via ---------- */

.waypoint {
  position: relative;
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
}
.waypoint::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--hazard);
  background: var(--page);
  border-radius: var(--r-sm);
  transform: rotate(45deg);
}
.ground-deep .waypoint::before {
  background: var(--deep);
}
.waypoint span {
  position: relative;
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--hazard-deep);
}
.ground-deep .waypoint span {
  color: var(--sky-text);
}

/* ---------- Cabecera ----------

   La maqueta quita la franja de anuncio que habia encima y pone en
   su lugar el sello de autorizacion flotante, que acompana toda la
   pagina. Cambia la forma, no la intencion: lo que el visitante
   tiene que ver antes de leer nada es con que autoridad opera esta
   empresa.

   El menu son tres grupos. Dos abren un panel; Noticias es un
   enlace directo. */

.siteheader {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.2s var(--ease);
}
.siteheader.is-stuck {
  box-shadow: 0 6px 20px -12px rgba(34, 51, 95, 0.42);
}

.masthead {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.masthead-in {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  min-height: 92px;
  padding-block: 12px;
}

.brand {
  display: flex;
  align-items: center;
  flex: none;
}
.brand img {
  display: block;
  width: 186px;
  height: auto;
  max-width: none;
}

/* ---- El menu ---- */

.nav {
  display: none;
  margin-left: auto;
  align-items: stretch;
  gap: clamp(10px, 2vw, 34px);
}
@media (min-width: 1100px) {
  .nav {
    display: flex;
  }
}

.navgroup {
  position: relative;
  display: flex;
  align-items: center;
}
.navtop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 2px;
  background: none;
  border: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s var(--ease);
}
.navtop:hover,
.navgroup.is-open .navtop {
  color: var(--corridor);
}
.navtop:focus-visible {
  outline: none;
  color: var(--corridor);
  box-shadow: var(--focus);
  border-radius: var(--r-sm);
}
/* La flecha solo existe donde hay algo que abrir. */
.navtop[aria-expanded]::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s var(--ease);
}
.navgroup.is-open .navtop[aria-expanded]::after {
  transform: translateY(1px) rotate(225deg);
}

/* El panel cuelga del grupo. Se abre al pasar el cursor y tambien
   al pulsar: en una pantalla tactil no hay cursor que pasar. */
.navmenu {
  position: absolute;
  top: 100%;
  left: -22px;
  z-index: 10;
  min-width: 290px;
  padding: 14px 0;
  background: var(--navy);
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease),
    visibility 0.18s;
}
.navgroup.is-open .navmenu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.navmenu a {
  /* El z-index crea contexto propio: sin el, el ala del ::before se
     iria detras del fondo del panel y no se veria. */
  position: relative;
  z-index: 0;
  display: block;
  padding: 13px 30px;
  color: #ffffff;
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* El ala: al pasar por una opcion, el fondo de color sale un poco
   por la derecha y redondea solo esa esquina de abajo. Va en un
   pseudo-elemento y no en el fondo del enlace para que pueda
   desbordar el panel sin empujar nada. */
.navmenu a::before {
  content: "";
  position: absolute;
  inset: 0 -18px 0 0;
  z-index: -1;
  background: var(--sky);
  border-radius: 0 0 22px 0;
  opacity: 0;
  transform: scaleX(0.94);
  transform-origin: left center;
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}
.navmenu a:hover::before,
.navmenu a:focus-visible::before {
  opacity: 1;
  transform: none;
}
.navmenu a:hover,
.navmenu a:focus-visible {
  outline: none;
  color: var(--navy);
}

/* ---- Telefono, cotizar e idioma ---- */

.masthead-actions {
  display: none;
  flex: none;
  flex-direction: column;
  gap: 7px;
  margin-left: clamp(14px, 2vw, 30px);
}
@media (min-width: 1100px) {
  .masthead-actions {
    display: flex;
  }
}
.phone-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 18px;
  border: 1.5px solid var(--sky);
  border-radius: var(--r-sm);
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.phone-pill:hover {
  background: var(--mist);
  border-color: var(--corridor);
}
.masthead-actions .btn {
  padding: 8px 18px;
  font-size: 0.9375rem;
  justify-content: center;
}

.lang {
  display: none;
  flex: none;
  flex-direction: column;
  gap: 3px;
  margin-left: var(--s-sm);
}
@media (min-width: 1100px) {
  .lang {
    display: flex;
  }
}
.lang button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.lang button svg {
  width: 20px;
  height: 14px;
  flex: none;
  border-radius: 1px;
}
.lang button:hover {
  background: var(--mist);
}
.lang button[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
}

/* ---- Menu de telefono ---- */

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  flex: none;
  margin-left: auto;
  width: 52px;
  height: 52px;
  padding: 0 13px;
  background: var(--page);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
}
@media (min-width: 1100px) {
  .burger {
    display: none;
  }
}
.burger i {
  display: block;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
}

.drawer {
  display: none;
  background: var(--navy);
  border-top: 1px solid var(--deep-rule);
  padding-block: var(--s-md) var(--s-lg);
}
.drawer.open {
  display: block;
}
@media (min-width: 1100px) {
  .drawer {
    display: none;
  }
}
.drawer h3 {
  margin: var(--s-md) 0 2px;
  color: var(--sky);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.drawer a {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
}
.drawer .btn {
  margin-top: var(--s-md);
  width: 100%;
  justify-content: center;
}
.drawer .lang {
  display: flex;
  flex-direction: row;
  margin: var(--s-md) 0 0;
}

/* ---------- Sello de autorizacion ----------

   Flotante y presente en toda la pagina, como pide el documento.
   En telefono no: ocuparia una esquina de una pantalla que ya es
   chica. Ahi se ve una vez, dentro del hero, que es donde importa. */

/* En telefono no cabe la tarjeta entera, pero el documento pide que
   la autoridad acompane toda la pagina. Va una version corta: una
   pastilla con los dos numeros, pegada bajo la cabecera y a la
   derecha, que ocupa treinta pixeles y sigue llevando al
   verificador. La tarjeta completa entra en pantallas grandes. */
.seal {
  position: fixed;
  top: calc(var(--header-h, 92px) + 8px);
  right: 10px;
  z-index: 90;
  pointer-events: none;
}
.seal img,
.seal p:not(.seal-ids),
.seal-tag {
  display: none;
}
.seal a {
  display: block;
  pointer-events: auto;
  text-decoration: none;
}
.seal .seal-ids {
  margin: 0;
  padding: 5px 11px;
  background: rgba(26, 40, 71, 0.94);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  color: var(--sky-text);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* En la pastilla los dos numeros van en una linea. */
.seal .seal-ids br {
  display: none;
}
.seal .seal-ids span:last-of-type::before {
  content: " \00b7  ";
}
@media (min-width: 1100px) {
  .seal img,
  .seal p:not(.seal-ids),
  .seal-tag {
    display: block;
  }
  .seal .seal-ids br {
    display: inline;
  }
  .seal .seal-ids span:last-of-type::before {
    content: none;
  }
  .seal .seal-ids {
    margin: 0 -12px;
    padding: 5px;
    background: var(--deep-2);
    border-radius: 0;
    box-shadow: none;
    white-space: normal;
  }
  .seal {
    display: block;
    position: fixed;
    top: 112px;
    right: 0;
    z-index: 90;
    /* El contenedor no recibe clics: sin esto se come los del panel
       de cotizacion que queda debajo. El enlace de dentro si, que
       para eso esta. */
    pointer-events: none;
    width: 128px;
    padding: 12px 12px 0;
    background: var(--page);
    border: 1px solid var(--rule);
    border-right: 0;
    border-radius: var(--r-md) 0 0 var(--r-md);
    box-shadow: var(--shadow-md);
    text-align: center;
  }
}
.seal a {
  display: block;
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
}
.seal a:hover .seal-tag {
  background: var(--blue);
}
.seal img {
  width: 42px;
  height: auto;
  margin: 0 auto 6px;
}
.seal p {
  font-size: 0.625rem;
  line-height: 1.3;
  color: var(--ink-soft);
}
.seal b {
  display: block;
  color: var(--ink);
  font-weight: 700;
}
.seal-tag {
  margin: 8px -12px 0;
  padding: 5px;
  background: var(--navy);
  color: #ffffff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.seal-ids {
  margin: 0 -12px;
  padding: 5px;
  background: var(--deep-2);
  color: var(--sky);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-variant-numeric: tabular-nums;
}
.seal-ids span {
  color: #ffffff;
}

/* ---------- Hero ----------
   La foto ocupa todo el fondo. El velo que lleva encima es oscuro y
   no claro como antes: el titular ahora es blanco, y sobre el cielo
   de la foto sin velo se queda en dos de contraste. Va mas cargado
   a la izquierda, que es donde cae el texto. */

.hero {
  position: relative;
  background: var(--navy);
  overflow: hidden;
}
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      100deg,
      rgba(26, 40, 71, 0.94) 0%,
      rgba(26, 40, 71, 0.82) 38%,
      rgba(26, 40, 71, 0.34) 68%,
      rgba(26, 40, 71, 0.2) 100%
    ),
    linear-gradient(to bottom, rgba(26, 40, 71, 0.4), rgba(26, 40, 71, 0));
}
.hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--s-xl);
  padding-block: clamp(44px, 6vw, 84px) clamp(52px, 7vw, 96px);
  align-items: start;
}
@media (min-width: 1000px) {
  .hero-in {
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.86fr);
    gap: clamp(40px, 5vw, 76px);
  }
}

/* El rotulo sale por el borde izquierdo, como en la maqueta: la
   barra no empieza en el margen, viene de fuera de la pantalla. */
.hero-tag {
  display: inline-block;
  margin: 0 0 var(--s-md) calc(var(--gutter) * -1);
  padding: 10px var(--s-lg) 10px var(--gutter);
  background: var(--blue);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 500;
}

.hero-copy .display {
  color: #ffffff;
  margin-bottom: var(--s-md);
}
.hero-copy .display em {
  display: block;
  color: var(--sky);
  font-style: italic;
  font-weight: 700;
  font-size: 0.62em;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.hero-lede {
  color: #e4ebf7;
  font-size: 1.1875rem;
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: var(--s-lg);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
}

/* ---------- Panel de cotizacion ---------- */

.survey {
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.survey-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm);
  padding: 20px 26px;
  border-bottom: 1px solid var(--rule);
  background: var(--tint);
}
.survey-head .label {
  color: var(--ink);
  font-size: 1rem;
}
.survey-status {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 8px;
}
.survey-status::before {
  content: "";
  width: 8px;
  height: 8px;
  background: currentColor;
  transform: rotate(45deg);
}
.survey-status[data-state="plotted"] {
  color: var(--corridor);
}
.survey-status[data-state="sent"] {
  color: var(--clear);
}

.survey-map {
  position: relative;
  height: 112px;
  background: var(--corridor-soft);
  border-bottom: 1px solid var(--rule);
}
.survey-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.survey-map .route {
  fill: none;
  stroke: var(--corridor);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 300);
  stroke-dashoffset: var(--len, 300);
  transition: stroke-dashoffset 0.9s var(--ease);
}
.survey-map.plotted .route {
  stroke-dashoffset: 0;
}
.map-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.map-node i {
  width: 12px;
  height: 12px;
  flex: none;
  background: var(--page);
  border: 2.5px solid var(--hazard);
  transform: rotate(45deg);
}
.map-node b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.map-node-a {
  left: 10.5%;
  top: 71%;
  transform: translate(-6px, -50%);
}
.map-node-b {
  right: 10.5%;
  top: 23%;
  transform: translate(6px, -50%);
  flex-direction: row-reverse;
}

.survey-body {
  padding: 26px;
}

/* ---------- Servicios en franjas ----------

   La pagina deja de ser una matriz comparativa y pasa a cinco
   franjas a pantalla completa, alternando oscuro y claro. Cada una
   es un servicio y tiene su ancla, porque el menu desplegable
   apunta directo a cada uno.

   La alternancia no es un capricho visual: cinco bloques iguales
   seguidos se leen como una lista y se saltan; cambiando el suelo,
   cada uno se lee como una parada. */

.svcband {
  position: relative;
  overflow: hidden;
  scroll-margin-top: calc(var(--header-h, 92px) + 20px);
}
.svcband-dark {
  background: var(--navy);
  color: var(--on-deep);
}
.svcband-light {
  background: var(--tint);
  color: var(--ink);
}

.svcband-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.svcband-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svcband-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(26, 40, 71, 0.95) 0%,
    rgba(26, 40, 71, 0.86) 40%,
    rgba(26, 40, 71, 0.42) 72%,
    rgba(26, 40, 71, 0.24) 100%
  );
}

.svcband-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-lg);
  padding-block: clamp(56px, 7vw, 104px);
  align-items: center;
}
@media (min-width: 900px) {
  .svcband-light .svcband-in {
    grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
  }
}

/* El rotulo: barra que sale por la izquierda en las franjas
   oscuras, pastilla centrada en las claras. Es la misma idea del
   hero, adaptada al suelo de cada una. */
.svcband-tag {
  margin-bottom: var(--s-md);
  font-size: 1.0625rem;
  line-height: 1.45;
}
.svcband-dark .svcband-tag {
  display: inline-block;
  margin-left: calc(var(--gutter) * -1);
  padding: 12px var(--s-lg) 12px var(--gutter);
  background: rgba(55, 93, 168, 0.88);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: #ffffff;
}
.svcband-light .svcband-tag {
  display: inline-block;
  padding: 11px var(--s-lg);
  border: 1.5px solid var(--sky);
  border-radius: 999px;
  color: var(--ink);
}

/* El minimo del clamp lo fija la palabra mas larga que hay en la
   pagina: "SOBREDIMENSIONADAS" no se puede partir y a 36 px empujaba
   la columna cincuenta pixeles fuera de la pantalla en telefono. El
   break-word es la red de seguridad para cualquier palabra que
   aparezca despues y sea todavia mas larga. */
.svcband h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 5vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  margin-bottom: var(--s-sm);
}
.svcband-dark h2 {
  color: #ffffff;
}
.svcband-light h2 {
  color: var(--navy);
}

.svcband-sub {
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.45;
  margin-bottom: var(--s-sm);
  max-width: 62ch;
}
.svcband-dark .svcband-sub {
  color: var(--sky-text);
}
.svcband-light .svcband-sub {
  color: var(--corridor);
}

.svcband p.svcband-body {
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 58ch;
  margin-bottom: var(--s-md);
}
.svcband-dark p.svcband-body {
  color: #dde5f3;
}
.svcband-light p.svcband-body {
  color: var(--ink-soft);
}

.svcband-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
}

/* La foto de las franjas claras va en columna propia, de pie. */
.svcband-side {
  order: -1;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-md);
}
.svcband-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El enlace entre franjas. Es una ayuda, no la unica forma de
   bajar, asi que se esconde del lector de pantalla. */
.svcband-next {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
  background: var(--page);
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.svcband-next:hover {
  border-color: var(--corridor);
  color: var(--corridor);
}
.svcband-next i {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

/* ---------- Panel por pasos ----------
   Tres pasos: que se mueve, de donde a donde, y quien es. El primero
   se resuelve escogiendo una tarjeta, no escribiendo, porque es lo
   unico que el visitante sabe con seguridad antes de pensar. */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.steps li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 10px;
  border-top: 3px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.steps li b {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tint-2);
  color: var(--ink-faint);
  font-weight: 600;
  font-size: 0.75rem;
}
.steps li.is-done {
  border-top-color: var(--corridor);
  color: var(--ink-soft);
}
.steps li.is-done b {
  background: var(--corridor-soft);
  color: var(--corridor-deep);
}
.steps li.is-now {
  border-top-color: var(--hazard);
  color: var(--ink);
}
.steps li.is-now b {
  background: var(--hazard);
  color: var(--deep);
}
/* El rotulo del paso estorba en pantallas angostas: el numero y la
   barra ya dicen por donde va. */
@media (max-width: 400px) {
  .steps li span {
    display: none;
  }
}

.step {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.step:focus {
  outline: none;
}
.step > legend {
  padding: 0;
  margin-bottom: 14px;
  font-size: 1.25rem;
}

/* ---- Paso 1: escoger ----
   Tarjetas grandes con el dibujo arriba. El area que se toca es toda
   la tarjeta, no el icono, que en telefono es la diferencia entre
   funcionar y no. */

/* Dos o tres columnas, nunca mas: son seis tarjetas y con cinco
   columnas la ultima se queda sola en su renglon. */
.picks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 430px) {
  .picks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.pick {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 18px 10px;
  background: var(--page);
  border: 2px solid var(--rule);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease),
    transform 0.15s var(--ease);
}
.pick svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.15s var(--ease);
}
.pick:hover {
  border-color: var(--corridor);
  transform: translateY(-2px);
}
.pick:hover svg {
  stroke: var(--corridor);
}
.pick:focus-visible {
  outline: none;
  border-color: var(--corridor);
  box-shadow: var(--focus);
}
.pick.is-on {
  border-color: var(--hazard);
  background: var(--hazard-soft);
}
.pick.is-on svg {
  stroke: var(--hazard-deep);
}

/* ---- Paso 1b: el tipo exacto ---- */

.subpicks {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.subpicks > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  padding: 11px 15px;
  background: var(--page);
  border: 2px solid var(--rule);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.chip:hover {
  border-color: var(--corridor);
}
.chip:focus-visible {
  outline: none;
  border-color: var(--corridor);
  box-shadow: var(--focus);
}
.chip.is-on {
  border-color: var(--hazard);
  background: var(--hazard-soft);
}
.linky {
  display: inline-block;
  margin-top: 14px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--corridor-deep);
  font-family: var(--font-body);
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linky:hover {
  color: var(--corridor);
}

/* ---- Interruptor de cruce de frontera ----
   El cuadro es una caja de verdad, no un deslizador: a los 40 un
   cuadro palomeado se entiende sin pensarlo y un deslizador no
   siempre. */

.switch {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 20px;
  padding: 13px 15px;
  background: var(--tint);
  border: 2px solid var(--rule);
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-box {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  background: var(--page);
  border: 2px solid var(--ink-faint);
  border-radius: 4px;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.switch-box i {
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--deep);
  border-bottom: 2.5px solid var(--deep);
  transform: rotate(-45deg) translate(1px, -1px) scale(0.4);
  opacity: 0;
  transition: transform 0.15s var(--ease), opacity 0.15s var(--ease);
}
.switch:hover {
  border-color: var(--corridor);
}
.switch input:checked ~ .switch-box {
  background: var(--hazard);
  border-color: var(--hazard-deep);
}
.switch input:checked ~ .switch-box i {
  opacity: 1;
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}
.switch:has(input:checked) {
  border-color: var(--hazard);
  background: var(--hazard-soft);
}
.switch input:focus-visible ~ .switch-box {
  border-color: var(--corridor);
  box-shadow: var(--focus);
}

/* ---- Telefono: pais y numero en una sola linea ---- */

.phone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
}
.phone select {
  width: auto;
  font-family: var(--font-mono);
  font-size: 1rem;
  padding-left: 13px;
  padding-right: 34px;
  background-position: calc(100% - 17px) calc(50% + 1px),
    calc(100% - 11px) calc(50% + 1px);
}

/* ---- Pie de cada paso ---- */

.survey-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.survey-foot .btn {
  flex: 1 1 auto;
  justify-content: center;
}
.survey-note {
  margin-top: 14px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* ---------- Campos ---------- */

.field {
  margin-bottom: 18px;
}
.field > label,
.fieldset-label {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 7px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--page);
  border: 2px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 15px 16px;
  color: var(--ink);
  font-size: 1.0625rem;
  transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
.field textarea {
  min-height: 110px;
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-faint);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--corridor);
  box-shadow: var(--focus);
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 21px) calc(50% + 1px),
    calc(100% - 15px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.field .hint {
  display: block;
  margin-top: 6px;
  font-size: 0.9375rem;
  color: var(--ink-faint);
}
.field.invalid input,
.field.invalid select,
.field.invalid textarea {
  border-color: var(--error);
}
.field.invalid > label {
  color: var(--error);
}
.field .error {
  display: none;
  margin-top: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--error);
}
.field.invalid .error {
  display: block;
}
.field-row {
  display: grid;
  gap: 18px;
}
@media (min-width: 440px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Barra de confianza ---------- */

.creds {
  border-bottom: 1px solid var(--rule);
  padding-block: 0;
}
.creds-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm) var(--s-lg);
  padding-block: var(--s-md);
}
.ratings {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm) var(--s-lg);
}
.rating {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.14s var(--ease);
}
.rating:hover {
  color: var(--corridor);
}
.rating b {
  color: var(--ink);
  font-weight: 700;
  font-size: 1.625rem;
  font-family: var(--font-display);
}

/* ---------- Rotulo de banda ---------- */

.band-title {
  text-align: center;
  padding-block: var(--s-lg) var(--s-md);
  color: var(--ink-faint);
}

/* ---------- Mosaico de cargas ----------
   Visual antes que texto: fotos grandes, a sangre, con el rotulo
   encima. Nada de tarjetas del ancho de un parrafo. */

/* ---------- Que transportamos ----------
   Diez categorias en rejilla pareja, no en collage: en la maqueta
   todas pesan lo mismo porque todas son servicios que se venden
   igual. Dos columnas en telefono, tres en tableta, cinco arriba. */

.mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 680px) {
  .mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1080px) {
  .mosaic {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.cargo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  aspect-ratio: 3 / 4;
  background: var(--tint-2);
}

/* La version azulada va de fondo y no de segunda imagen: asi el
   navegador solo la descarga cuando el cursor llega. Son diez
   archivos de cien kilos que si no se bajarian siempre.

   La ruta de --hover va desde la raiz y no en relativo. Una url()
   dentro de una variable se resuelve contra la hoja de estilos y no
   contra la pagina, asi que en relativo pedia
   /assets/css/assets/img/... y fallaban las diez. */
.cargo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
/* La imagen se nombra solo dentro del :hover. Puesta en la regla
   base el navegador la descarga igual aunque la opacidad sea cero
   —lo comprobe, bajaba las diez al cargar la pagina— y son un mega
   de fotos que la mayoria de visitantes no va a ver nunca. El
   precio es que la primera pasada del cursor tarda un instante. */
.cargo:hover::after {
  background-image: var(--hover);
  opacity: 1;
}

.cargo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cargo-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--s-sm) var(--s-md) var(--s-md);
  background: linear-gradient(
    to top,
    rgba(26, 40, 71, 0.95),
    rgba(26, 40, 71, 0.6) 58%,
    transparent
  );
  color: #fff;
  text-align: center;
}
/* El nombre va en pastilla blanca como en la maqueta: sobre foto,
   una pastilla se lee siempre y un texto suelto depende de lo que
   haya detras. */
.cargo-body .title {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 7px;
  background: var(--page);
  border-radius: var(--r-sm);
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.875rem, 1.1vw, 1.0625rem);
  line-height: 1.2;
}
.cargo-body .ann {
  color: #dbe6f6;
  font-size: 0.8125rem;
  line-height: 1.35;
}

/* ---------- Franja de marcas ----------
   Sobre marino, como la maqueta: corta el gris de la pagina y le
   da a los logotipos un fondo parejo. En blanco cada logo trae su
   propio recorte y se ven desalineados. */

.brandband {
  background: var(--navy);
  padding-block: var(--s-md) var(--s-lg);
}
.brandband .band-title {
  color: var(--sky-text);
  text-align: center;
  padding-block: var(--s-sm) var(--s-md);
}
.brandband .rail-track figure img {
  filter: brightness(0) invert(1);
  opacity: 0.78;
  transition: opacity 0.2s var(--ease);
}
.brandband .rail-track figure img:hover {
  opacity: 1;
}

/* ---------- Por que elegirnos ----------
   Siete razones sobre la foto. Las cajas son translucidas sobre el
   marino para que la carretera siga leyendose detras sin que el
   texto pelee con ella. */

.whyband {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #ffffff;
}
.whyband-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.whyband-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.whyband-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26, 40, 71, 0.72) 0%,
    rgba(26, 40, 71, 0.55) 35%,
    rgba(26, 40, 71, 0.92) 100%
  );
}
.whyband-in {
  position: relative;
  z-index: 2;
  padding-block: clamp(56px, 7vw, 108px);
  text-align: center;
}
.whyband h2 {
  color: #ffffff;
  margin-bottom: var(--s-xs);
}
.whyband-sub {
  font-style: italic;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  color: var(--sky-text);
  margin-bottom: var(--s-xl);
}

/* Cuatro y tres, como la maqueta. Con auto-fit salian cinco y la
   segunda fila quedaba coja. */
.whygrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-sm);
  list-style: none;
  padding: 0;
  margin-bottom: var(--s-lg);
  text-align: left;
}
@media (min-width: 1040px) {
  .whygrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.whybox {
  padding: var(--s-md);
  background: rgba(26, 40, 71, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-md);
  backdrop-filter: blur(3px);
}
.whybox-t {
  font-weight: 700;
  font-size: 1.0625rem;
  color: #ffffff;
  margin-bottom: 5px;
}
.whybox p {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #cfdcf0;
}
.whyband-foot {
  font-size: 1.0625rem;
  color: #dbe6f6;
}

/* ---------- Cobertura ----------
   Fondo de video. El velo de siempre, porque sobre un video en
   movimiento el texto blanco pierde y gana segun el fotograma. */

.coverband {
  position: relative;
  overflow: hidden;
  background: var(--deep-2);
  color: #ffffff;
}
.coverband-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.coverband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(26, 40, 71, 0.78),
    rgba(26, 40, 71, 0.52) 40%,
    rgba(26, 40, 71, 0.88)
  );
}
/* Quien pidio menos movimiento no ve el video: un bucle de fondo es
   justo lo que esa preferencia trata de evitar. */
@media (prefers-reduced-motion: reduce) {
  .coverband-video {
    display: none;
  }
}
.coverband-in {
  position: relative;
  z-index: 2;
  padding-block: clamp(60px, 8vw, 120px);
  text-align: center;
}
.coverband h2 {
  color: #ffffff;
  margin-bottom: var(--s-xs);
}
.coverband-sub {
  font-style: italic;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  color: var(--sky-text);
  margin-bottom: clamp(var(--s-xl), 12vw, 220px);
}
.coverband-list {
  display: grid;
  gap: var(--s-sm);
  list-style: none;
  padding: 0;
  max-width: 820px;
  margin-inline: auto;
  text-align: left;
}
.coverband-list li {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  gap: var(--s-md);
  align-items: baseline;
  padding: 11px var(--s-md);
  background: rgba(26, 40, 71, 0.68);
  border-radius: var(--r-sm);
}
.coverband-list b {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.375rem;
  color: #ffffff;
}
.coverband-list span {
  font-size: 1rem;
  color: #dbe6f6;
}

/* ---------- Llamada de cierre ---------- */

.ctaband {
  background: var(--navy);
  color: #ffffff;
  padding-block: clamp(44px, 5vw, 76px);
  text-align: center;
}
.ctaband h2 {
  color: #ffffff;
  margin-bottom: var(--s-xs);
}
.ctaband-sub {
  font-style: italic;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  color: var(--sky-text);
  margin-bottom: var(--s-lg);
}
.ctaband-btn {
  padding: 15px 48px;
  border-radius: 999px;
  font-size: 1.125rem;
}

/* ---------- Banda de opiniones ----------
   Sobre azul claro. Las tarjetas blancas encima se levantan solas
   sin necesidad de borde ni sombra fuerte, que es justo lo que
   hace la maqueta. */

.reportband {
  background: var(--sky);
}
/* El texto de apoyo va mas oscuro que el marino de la marca: sobre
   este azul el marino da 4.18, que alcanza para un titular grande
   pero no para una linea de texto corrido, que pide 4.5. Con
   deep-2 son 4.96. */
.reportband .headline {
  color: var(--navy);
}
/* El rotulo es de quince pixeles: con el marino se queda en 4.18 y
   necesita 4.5. */
.reportband .section-tag {
  color: var(--deep-2);
}
.reportband .ann,
.reportband .report blockquote,
.reportband .report figcaption {
  color: var(--deep-2);
}
.reportband .section-tag::before {
  background: var(--navy);
}
.reportband .report {
  background: var(--page);
  border: 0;
  border-radius: var(--r-md);
  box-shadow: 0 10px 28px -14px rgba(26, 40, 71, 0.45);
}

/* ---------- Cargas que hemos movido ---------- */

.loadsband {
  background: var(--tint);
}
.section-head-mid {
  display: block;
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}
/* La etiqueta es un flex con su rayita delante: centrada hay que
   decirselo, el text-align del padre no la mueve. */
.section-head-mid .section-tag {
  justify-content: center;
}
.loadsband .headline {
  color: var(--navy);
  font-style: italic;
  margin-bottom: var(--s-xs);
}
.loadsband-sub {
  font-style: italic;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  color: var(--corridor);
}

/* ---------- Acreditaciones ----------
   En la maqueta el rotulo va centrado arriba y debajo las dos
   calificaciones con el numero grande, al lado de los sellos.
   Las cuatro cosas enlazan a su portal: un sello que no se puede
   comprobar no sirve de nada. */

.creds {
  background: var(--tint);
  border-top: 1px solid var(--rule);
}
.creds-head {
  display: grid;
  justify-items: center;
  gap: var(--s-md);
  padding-block: var(--s-lg) var(--s-md);
  text-align: center;
}
.creds-title {
  color: var(--ink-soft);
}
.creds .ratings {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(var(--s-lg), 6vw, 92px);
}
.creds .rating {
  display: flex;
  align-items: baseline;
  gap: 11px;
  text-decoration: none;
  color: inherit;
}
.creds .rating b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.creds .rating span {
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 13ch;
  text-align: left;
}
.creds .rating:hover b {
  color: var(--corridor);
}
.creds .rating:hover span {
  color: var(--corridor-deep);
}

/* ---------- Leyenda ---------- */

.legend {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--ink);
}
@media (min-width: 760px) {
  .legend {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-xl);
  }
}
.legend-item {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: var(--s-md);
  padding: var(--s-md) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.legend-mark {
  width: 54px;
  height: 54px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--corridor-soft);
  border-radius: var(--r-md);
}
.legend-mark svg {
  width: 34px;
  height: 34px;
}
.legend-item .title {
  margin-bottom: 4px;
}
.legend-item p {
  color: var(--ink-soft);
  font-size: 1.125rem;
  line-height: 1.55;
}

/* ---------- Corredor: proceso ---------- */

.corridor {
  position: relative;
  display: grid;
  gap: 0;
}
.corridor::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 30px;
  bottom: 30px;
  width: 3px;
  background: var(--rule);
  border-radius: 2px;
}
.corridor::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 30px;
  width: 3px;
  height: var(--draw, 0%);
  background: var(--corridor);
  border-radius: 2px;
  transition: height 0.6s var(--ease);
}
.leg {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--s-md);
  padding-block: var(--s-md);
  align-items: start;
}
/* En movil son dos columnas y tres hijos, asi que el texto caia
   solo en la columna del diamante, de 48px, y salia una palabra
   por linea. Va en la segunda columna, alineado bajo el titulo. */
.leg > div {
  grid-column: 2;
}
@media (min-width: 900px) {
  .leg {
    grid-template-columns: 48px minmax(0, 320px) minmax(0, 1fr);
    gap: var(--s-lg);
    align-items: baseline;
  }
  /* Con tres columnas los tres hijos entran en una sola fila. */
  .leg > div {
    grid-column: auto;
  }
}
.leg-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.125rem;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--ink);
}
.leg p {
  color: var(--ink-soft);
  font-size: 1.125rem;
  line-height: 1.55;
}
.leg .ann {
  display: block;
  margin-top: 10px;
  color: var(--hazard-deep);
  font-weight: 500;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.leg .waypoint::before {
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.leg.lit .waypoint::before {
  background: var(--hazard);
}
.leg.lit .waypoint span {
  color: var(--ink);
}

/* ---------- Cobertura ---------- */

.coverage {
  display: grid;
  gap: var(--s-xl);
  align-items: center;
}
@media (min-width: 940px) {
  .coverage {
    grid-template-columns: minmax(0, 2fr) minmax(0, 0.85fr);
    gap: clamp(36px, 4vw, 72px);
  }
}
.coverage-map {
  position: relative;
  border-radius: var(--r-md);
  background: var(--tint);
  padding: var(--s-sm);
}
.coverage-map img {
  width: 100%;
  height: auto;
  display: block;
}
.coverage-map svg {
  position: absolute;
  inset: var(--s-sm);
  width: calc(100% - var(--s-sm) * 2);
  height: calc(100% - var(--s-sm) * 2);
  overflow: visible;
}
/* ---------- Pines por estado ----------
   Un pin en cada estado, encendiendose por turnos al azar. No es
   adorno: dice "operamos en todos", que es exactamente lo que la
   lista de al lado afirma en palabras. */

.pin-dot {
  fill: var(--pin);
  opacity: 0.3;
}
.pin-mark path {
  fill: var(--pin);
  stroke: #fff;
  stroke-width: 2;
}
.pin-eye {
  fill: #fff;
}
.pin-mark {
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: scale(0) translateY(6px);
  opacity: 0;
}
.pin-ring {
  fill: none;
  stroke: var(--pin);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.3);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .pin-mark {
    animation: pin-drop var(--dur, 11s) var(--delay, 0s) infinite;
  }
  .pin-ring {
    animation: pin-ring var(--dur, 11s) var(--delay, 0s) infinite;
  }
}
@keyframes pin-drop {
  0%, 3% {
    transform: scale(0) translateY(8px);
    opacity: 0;
  }
  9% {
    transform: scale(1.16) translateY(0);
    opacity: 1;
  }
  12%, 58% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  66%, 100% {
    transform: scale(0) translateY(8px);
    opacity: 0;
  }
}
@keyframes pin-ring {
  0%, 8% {
    transform: scale(0.3);
    opacity: 0;
  }
  13% {
    opacity: 0.7;
  }
  30%, 100% {
    transform: scale(3);
    opacity: 0;
  }
}
/* Sin animacion, los pines se quedan puestos: el mensaje es el
   mismo aunque no haya movimiento. */
@media (prefers-reduced-motion: reduce) {
  .pin-mark {
    transform: none;
    opacity: 1;
  }
}

.lanes {
  display: grid;
  border-top: 2px solid var(--ink);
}
.lane {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-xs) var(--s-sm);
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.lane b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  text-transform: uppercase;
}
.lane .ann {
  color: var(--ink-soft);
}

/* ---------- Resenas ---------- */

/* Las opiniones van en el mismo carril que las cargas, con el mismo
   motor: avanza solo, para con el cursor encima y las flechas son
   las de siempre. Lo que cambia es que aqui las tarjetas son texto y
   no fotos, asi que se le quita al carril generico todo lo que da
   por hecho que dentro hay una imagen. */
.rail-reports {
  margin-top: var(--s-lg);
}
.rail-reports .rail-track {
  grid-auto-columns: minmax(280px, 86vw);
  gap: var(--s-md);
  align-items: stretch;
  padding-bottom: 4px;
}
@media (min-width: 680px) {
  .rail-reports .rail-track {
    grid-auto-columns: minmax(320px, 44vw);
  }
}
@media (min-width: 1060px) {
  .rail-reports .rail-track {
    grid-auto-columns: minmax(340px, 30vw);
  }
}
/* Ojo con el fondo: `.rail-track > figure` gana por especificidad a
   `.report`, asi que si aqui se pone `none` la tarjeta se queda sin
   su blanco y el texto cae directo sobre el azul de la banda, a 1.83
   de contraste. Se repite el blanco a proposito. */
.rail-reports .rail-track > figure {
  aspect-ratio: auto;
  overflow: visible;
  background: var(--page);
  scroll-snap-align: start;
}
.report {
  display: flex;
  flex-direction: column;
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-md);
  box-shadow: var(--shadow-sm);
}
.report::before {
  content: "★★★★★";
  display: block;
  color: var(--hazard);
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.report blockquote {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: var(--s-md);
  color: var(--ink);
}
.report figcaption {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px var(--s-sm);
  padding-top: var(--s-sm);
  border-top: 1px solid var(--rule);
}
.report figcaption b {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--ink);
  display: block;
}
.report-who {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Marcador de rostro: iniciales, no una cara de banco de imagenes.
   Poner la foto de un desconocido junto al nombre de un cliente
   real seria inventar a la persona. */
.avatar {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--corridor-soft);
  border: 2px solid var(--corridor);
  color: var(--corridor-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}
/* La fuente es el enlace a la resena original. Va subrayada al pasar
   para que se note que lleva a algun lado: una prueba social que no
   se puede comprobar no prueba nada. */
.report .src {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  white-space: nowrap; /* que no parta la fecha en dos lineas */
  transition: color 0.14s var(--ease);
}
.report a.src:hover,
.report a.src:focus-visible {
  color: var(--corridor-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.report .measure {
  font-size: 0.8125rem;
  color: var(--ink-faint);
}
.reports-more {
  margin-top: var(--s-xl);
  text-align: center;
}

/* ---------- FAQ ---------- */

.faq {
  border-top: 2px solid var(--ink);
  max-width: 940px;
}
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  padding: var(--s-md) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.875rem;
  text-transform: uppercase;
  line-height: 1.15;
  transition: color 0.14s var(--ease);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  color: var(--corridor);
}
.faq summary .sign {
  position: relative;
  width: 26px;
  height: 26px;
  flex: none;
}
.faq summary .sign::before,
.faq summary .sign::after {
  content: "";
  position: absolute;
  background: var(--hazard-deep);
  border-radius: 2px;
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}
.faq summary .sign::before {
  inset: 11px 0 auto 0;
  height: 4px;
}
.faq summary .sign::after {
  inset: 0 11px auto 11px;
  height: 26px;
  width: 4px;
}
.faq details[open] summary .sign::after {
  transform: rotate(90deg);
  opacity: 0;
}
.faq details > .faq-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.34s var(--ease);
}
.faq details > .faq-body > div {
  overflow: hidden;
  min-height: 0;
}
.faq details.collapsing > .faq-body,
.faq details.expanding > .faq-body {
  grid-template-rows: 0fr;
}
.faq details.expanding.run > .faq-body {
  grid-template-rows: 1fr;
}
.faq .faq-body p {
  padding-bottom: var(--s-md);
  color: var(--ink-soft);
  max-width: 64ch;
}

/* ---------- Puertas ---------- */

.doors {
  display: grid;
  gap: var(--s-sm);
  margin-top: var(--s-xl);
}
@media (min-width: 720px) {
  .doors {
    grid-template-columns: 1fr 1fr;
  }
}
.door {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  padding: var(--s-lg);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--page);
  text-decoration: none;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease),
    transform 0.16s var(--ease);
}
.door:hover {
  border-color: var(--corridor);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.ground-deep .door {
  background: var(--deep-2);
  border-color: var(--deep-rule);
}
.ground-deep .door:hover {
  border-color: var(--hazard);
}
.door .title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  text-transform: uppercase;
}
.door p {
  color: var(--ink-soft);
  font-size: 1.0625rem;
}
.ground-deep .door p {
  color: var(--on-deep-soft);
}
.door .label {
  margin-top: auto;
  padding-top: var(--s-sm);
  color: var(--hazard-deep);
  font-size: 1rem;
}
.ground-deep .door .label {
  color: var(--sky-text);
}

/* ---------- Contacto ---------- */

/* La maqueta lo pone sobre el gris: la foto y los datos en un solo
   panel marino, y las dos puertas apiladas al lado. Asi el bloque
   de cierre no repite la banda oscura que ya trae la ctaband justo
   arriba. */

.contactband {
  background: var(--tint);
  border-top: 1px solid var(--rule);
}
.contactgrid {
  display: grid;
  gap: var(--s-md);
  margin-top: var(--s-xl);
}
@media (min-width: 940px) {
  .contactgrid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

/* El panel: foto arriba en movil, foto a la izquierda en cuanto
   hay ancho, para que los datos no queden en una columna estrecha. */
.contactcard {
  display: grid;
  gap: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--deep);
}
@media (min-width: 600px) {
  .contactcard {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  }
}
.contactcard-photo {
  position: relative;
  min-height: 260px;
}
.contactcard-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-facts {
  display: grid;
  align-content: center;
  padding: var(--s-lg);
}
.contact-facts a,
.contact-facts p {
  display: grid;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--deep-rule);
  text-decoration: none;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--on-deep);
  overflow-wrap: break-word;
  transition: color 0.14s var(--ease);
}
.contact-facts a:last-child,
.contact-facts p:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.contact-facts a:hover {
  color: var(--sky-text);
}
.contact-facts .k {
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-deep-soft);
}
.contact-facts .measure {
  font-family: var(--font-mono);
}

/* Las puertas, dentro del cierre, van marino como el panel y
   apiladas: son dos atajos, no dos ofertas que haya que comparar. */
.contactgrid .doors {
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-md);
}
.contactgrid .door {
  background: var(--deep-2);
  border-color: var(--deep-rule);
  border-radius: var(--r-lg);
  padding: var(--s-md) var(--s-lg);
  justify-content: center;
}
.contactgrid .door:hover {
  border-color: var(--sky);
}
.contactgrid .door .title {
  font-size: 1.375rem;
  color: var(--on-deep);
}
.contactgrid .door p {
  color: var(--on-deep-soft);
  font-size: 1rem;
}
.contactgrid .door .label {
  color: var(--sky-text);
  padding-top: var(--s-xs);
}

/* ---------- App para empresas ---------- */

/* Las dos bandas de video comparten el mismo armado: el video a
   sangre, un velo marino encima para que el texto se lea, y el
   contenido por delante. El marino de fondo esta puesto a proposito,
   no por si acaso: mientras el video carga, o si el sistema esta en
   ahorro de bateria y no lo reproduce, la banda sigue siendo la
   misma banda y no un rectangulo blanco. */
.videohead,
.videoband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--deep);
  color: var(--on-deep);
  text-align: center;
}
.videohead {
  padding-block: clamp(70px, 10vw, 150px);
}
.videoband {
  padding-block: clamp(60px, 8vw, 120px);
}
.videohead-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.videohead::after,
.videoband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(26, 40, 71, 0.82),
    rgba(26, 40, 71, 0.68) 45%,
    rgba(26, 40, 71, 0.86)
  );
}
.videohead-in,
.videoband-in {
  display: grid;
  justify-items: center;
  gap: var(--s-md);
}
.videohead-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 1.125rem;
  color: var(--sky-text);
}
.videohead h1,
.videoband h2 {
  max-width: 20ch;
  color: #ffffff;
}
.videoband h2 {
  display: grid;
  gap: 2px;
  max-width: 24ch;
}
.videoband h2 em {
  font-style: italic;
  font-weight: 600;
  font-size: 0.82em;
}
.videohead-lede {
  max-width: 62ch;
  font-size: 1.1875rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--on-deep);
}
/* Fantasma sobre video. Ojo con el fondo: .btn-ghost trae blanco, y
   cambiar solo el borde y el color dejaba letra blanca sobre boton
   blanco. Invisible, 1.0 de contraste. */
.btn-on-deep {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}
.btn-on-deep:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
}

/* Las dos columnas */
.twocol {
  display: grid;
  gap: var(--s-lg);
}
@media (min-width: 900px) {
  .twocol {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-md);
  }
}
.colside {
  display: flex;
  flex-direction: column;
  padding: var(--s-lg);
  border-radius: var(--r-lg);
  background: var(--deep);
  color: var(--on-deep);
}
.colside-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 1rem;
  color: var(--sky-text);
}
.colside-h {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  color: #ffffff;
  margin: 4px 0 var(--s-sm);
}
.colside-d {
  color: var(--on-deep-soft);
  font-size: 1.0625rem;
  line-height: 1.55;
}
.colside-list {
  display: grid;
  gap: 2px;
  margin: var(--s-md) 0 var(--s-md);
  list-style: none;
}
/* Las filas alternan fondo como el diseno. Lo que no se copia es que
   la maqueta alterna tambien la alineacion: un parrafo alineado a la
   derecha se lee peor, y esta pagina esta para que se entienda. */
.colside-list > li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-sm);
  padding: var(--s-sm) var(--s-md);
  border-radius: var(--r-sm);
  background: var(--deep-2);
}
.colside-list > li:nth-child(even) {
  background: rgba(102, 154, 211, 0.22);
}
.colside-ico {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--sky-text);
}
.colside-ico svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.colside-list .t {
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 2px;
}
/* Un punto mas claro que --on-deep-soft: sobre la fila par, que es
   mas clara que el marino, ese tono se quedaba en 4.43 y el minimo
   para 15 px es 4.5. */
.colside-list p:not(.t) {
  color: #c2cde2;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.colside-btn {
  margin-top: auto;
  align-self: start;
}

/* La banda que junta las dos puntas */
.bridgeband {
  background: var(--deep-2);
  color: var(--on-deep);
  text-align: center;
}
.bridgeband-in {
  display: grid;
  justify-items: center;
  gap: var(--s-md);
  max-width: 76ch;
  margin-inline: auto;
}
.bridgeband h2 {
  display: grid;
  gap: 2px;
  color: #ffffff;
}
.bridgeband h2 em {
  font-style: italic;
  font-weight: 700;
}
.bridgeband p {
  color: var(--on-deep-soft);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* ---------- Trabaja con nosotros ---------- */

.hiringhead {
  padding-block: calc(var(--s-xl) + 20px) var(--s-xl);
  background: linear-gradient(180deg, var(--mist), var(--page) 70%);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.hiringhead-in {
  display: grid;
  gap: var(--s-md);
  justify-items: center;
}
.hiringhead h1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  justify-items: center;
  max-width: min(18ch, 100%);
  /* Escala propia, mas agresiva que la del display general: en un
     telefono "NORTEAMERICA" mas el relleno de la cinta mide 362 px y
     la columna da 331, y un elemento de grid no encoge por debajo de
     su contenido minimo. Se salia 8 px. */
  font-size: clamp(2rem, 7vw, 4.5rem);
}
.hiringhead h1 em {
  font-style: italic;
  font-weight: 800;
}
.hiringhead h1 span {
  font-weight: 500;
  font-size: 0.62em;
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.01em;
}
/* La cinta del titular: el fondo marino se sale del texto por los
   lados y redondea solo la esquina de abajo a la derecha, igual que
   el ala del menu. Es el mismo gesto de marca, no uno nuevo. */
.hiringhead h1 .ribbon {
  display: block;
  padding: 2px clamp(12px, 4vw, 26px) 6px;
  background: var(--deep);
  color: var(--on-deep);
  border-radius: 0 0 26px 0;
  font-weight: 800;
}
.hiringhead-lede {
  max-width: 54ch;
  font-size: 1.1875rem;
  font-style: italic;
  color: var(--ink-soft);
}

.creed {
  display: grid;
  gap: var(--s-md);
  max-width: 62ch;
  margin-inline: auto;
  margin-top: var(--s-lg);
  text-align: center;
  font-size: 1.1875rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* La foto de equipo va a sangre y recortada a una banda: la original
   es un grupo posando, y a pantalla completa en escritorio quedarian
   mas ladrillos que personas. */
.teamband {
  position: relative;
  height: clamp(220px, 32vw, 420px);
  overflow: hidden;
  background: var(--deep);
}
.teamband img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* El riel de razones. En escritorio cuelgan alternando lado de una
   linea central; en movil la linea se va a la izquierda y todas caen
   del mismo lado, porque alternar en una columna estrecha no se lee
   como alternancia sino como desorden. */
.whyhiring .spineline {
  position: relative;
  display: grid;
  gap: var(--s-lg);
  margin-top: var(--s-xl);
  padding-left: 30px;
  list-style: none;
  counter-reset: none;
}
.whyhiring .spineline::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 5px;
  width: 2px;
  background: var(--on-deep-soft);
  opacity: 0.5;
}
.whyhiring .spineline > li {
  position: relative;
}
.whyhiring .spineline > li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: -30px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--on-deep);
}
.whyhiring .spineline h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--on-deep);
  margin-bottom: 6px;
}
.whyhiring .spineline p {
  color: var(--on-deep-soft);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 46ch;
}
@media (min-width: 900px) {
  .whyhiring .spineline {
    grid-template-columns: 1fr 1fr;
    column-gap: 72px;
    row-gap: var(--s-lg);
    padding-left: 0;
  }
  .whyhiring .spineline::before {
    left: 50%;
    transform: translateX(-1px);
  }
  /* Impares a la izquierda y alineados a su borde; pares a la
     derecha. El punto de cada uno se pega al riel por dentro. */
  .whyhiring .spineline > li:nth-child(odd) {
    grid-column: 1;
    text-align: right;
  }
  .whyhiring .spineline > li:nth-child(even) {
    grid-column: 2;
  }
  .whyhiring .spineline > li:nth-child(even) {
    margin-top: calc(-1 * var(--s-lg) + 26px);
  }
  .whyhiring .spineline > li:nth-child(odd)::before {
    left: auto;
    right: -42px;
  }
  .whyhiring .spineline > li:nth-child(even)::before {
    left: -42px;
  }
  .whyhiring .spineline > li:nth-child(odd) p {
    margin-left: auto;
  }
}

.applybox {
  display: grid;
  gap: var(--s-lg);
  align-items: center;
}
@media (min-width: 880px) {
  .applybox {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 80px);
  }
}
.applybox-act {
  display: grid;
  gap: var(--s-sm);
  justify-items: start;
}
@media (min-width: 880px) {
  .applybox-act {
    justify-items: stretch;
  }
}

/* ---------- Pie ---------- */

.footer {
  border-top: 1px solid var(--deep-2);
  padding-block: var(--s-xl) var(--s-lg);
}
/* El pie se acomoda solo: el navegador mete tantas columnas como
   quepan de 150px. Sin anchos inventados, porque un punto de corte
   a ojo siempre deja alguna pantalla con una columna sola y medio
   pie vacio al lado. */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-lg) var(--s-md);
  align-items: start;
}

/* Las cinco columnas completas entran a partir de unos 860px. Por
   debajo de eso la marca se pone de ancho completo y hace de
   cabecera del pie, y las cuatro listas se reparten el resto. Si
   se dejara en columna, quedaria alta y flaca al lado de tres
   listas cortas. */
@media (max-width: 859px) {
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* Con sitio de sobra, la marca y el alta al boletin piden mas
   ancho que una lista de enlaces: una lleva parrafo y la otra un
   campo de texto. */
@media (min-width: 1240px) {
  .footer-grid {
    grid-template-columns: 1.5fr repeat(3, 1fr) 1.4fr;
    gap: var(--s-lg) var(--s-xl);
  }
}
/* Los titulos del pie van en azul claro, no en blanco: en la
   maqueta es lo que separa la columna de sus enlaces sin tener que
   meter una linea. */
.footer h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sky);
  margin-bottom: var(--s-md);
}
.footer li {
  margin-bottom: 11px;
}
.footer li a {
  font-size: 1.0625rem;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.14s var(--ease);
}
.footer li a:hover {
  color: var(--sky);
}
.footer-brand img {
  height: 46px;
  width: auto;
  max-width: none;
  margin-bottom: var(--s-md);
}
.footer-brand p {
  color: var(--sky-text);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.5;
  max-width: 32ch;
  margin-bottom: var(--s-md);
}
.socials {
  display: flex;
  gap: var(--s-xs);
}
.socials a {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-sm);
  color: var(--on-deep-soft);
  transition: color 0.14s var(--ease), border-color 0.14s var(--ease),
    background 0.14s var(--ease);
}
.socials a:hover {
  color: var(--ink);
  background: var(--hazard);
  border-color: var(--hazard);
}
.socials svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-xs) var(--s-md);
  margin-top: var(--s-xl);
  padding-top: var(--s-md);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.9375rem;
  color: var(--on-deep-soft);
}
.footer-base a {
  text-decoration: none;
}
.footer-base a:hover {
  color: var(--sky-text);
}

/* ---------- Barra de accion movil ---------- */

.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -6px 24px -8px rgba(15, 27, 45, 0.24);
  transform: translateY(100%);
  transition: transform 0.32s var(--ease);
}
.actionbar.show {
  transform: translateY(0);
}
.actionbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 20px 22px;
  background: var(--page);
  font-weight: 600;
  font-size: 1.125rem;
  text-decoration: none;
  color: var(--ink);
}
.actionbar a.primary {
  background: var(--hazard);
  color: var(--ink);
}
.actionbar svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
@media (min-width: 1200px) {
  .actionbar {
    display: none;
  }
}

/* ---------- Pagina de servicios: matriz comparativa ----------
   Los tres datos de cada servicio son las mismas tres preguntas en
   los cinco. Repetirlas cinco veces en bloques identicos obliga a
   recordar; enfrentarlas en una matriz deja compararlas de un
   vistazo, que es como lee este publico.

   En escritorio: una columna de rotulos y cinco de servicios, cada
   una encabezada por una foto real. En movil se rompe en tarjetas
   apiladas y cada celda recupera su propio rotulo. */

.servicenav {
  position: sticky;
  top: var(--header-h, 136px);
  z-index: 60;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.servicenav-in {
  display: flex;
  gap: var(--s-xs);
  overflow-x: auto;
  padding-block: 12px;
  scrollbar-width: none;
}
.servicenav-in::-webkit-scrollbar {
  display: none;
}
.servicenav a {
  flex: none;
  padding: 12px 20px;
  border: 2px solid var(--rule);
  border-radius: 999px;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
    color 0.15s var(--ease);
}
.servicenav a:hover {
  border-color: var(--corridor);
  color: var(--corridor);
}
.servicenav a[aria-current="true"] {
  background: var(--corridor);
  border-color: var(--corridor);
  color: #fff;
}

.matrix {
  display: grid;
  gap: var(--s-md);
}
@media (min-width: 1000px) {
  .matrix {
    grid-template-columns: minmax(150px, 0.62fr) repeat(5, minmax(0, 1fr));
    grid-template-rows: auto repeat(4, auto);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .matrix-labels,
  .svc {
    grid-row: span 5;
    display: grid;
    grid-template-rows: subgrid;
  }
}

/* Columna de rotulos: solo tiene sentido cuando hay que comparar */
.matrix-labels {
  display: none;
}
@media (min-width: 1000px) {
  .matrix-labels {
    display: grid;
    background: var(--tint);
  }
  .matrix-labels > * {
    display: flex;
    align-items: center;
    padding: var(--s-md);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border-top: 1px solid var(--rule);
  }
  .matrix-labels > :first-child {
    border-top: 0;
  }
}

.svc {
  display: grid;
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  scroll-margin-top: calc(var(--header-h, 136px) + 70px);
}
@media (min-width: 1000px) {
  .svc {
    border: 0;
    border-radius: 0;
  }
}

/* Cabecera de columna: la foto hace el trabajo visual */
.svc-head {
  position: relative;
  min-height: 260px;
  overflow: hidden;
}
.svc-head img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.svc:hover .svc-head img {
  transform: scale(1.05);
}
.svc-head-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s-md);
  background: linear-gradient(
    to top,
    rgba(9, 17, 30, 0.94),
    rgba(9, 17, 30, 0.5) 58%,
    rgba(9, 17, 30, 0.12)
  );
  color: #fff;
}
.svc-num {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  color: var(--hazard);
  margin-bottom: 6px;
}
.svc-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.9vw, 2rem);
  line-height: 1.03;
  text-transform: uppercase;
  color: #fff;
}

.svc-cell {
  padding: var(--s-md);
  border-top: 1px solid var(--rule);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--ink);
}
.svc-cell b {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 7px;
}
/* En escritorio el rotulo vive en la columna de la izquierda */
@media (min-width: 1000px) {
  .svc-cell b {
    display: none;
  }
}
.svc-cell.is-spec {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--corridor);
  background: var(--corridor-soft);
}

/* Servicio apuntado desde el pie o desde los chips */
.svc:target,
.svc.is-active {
  box-shadow: inset 0 0 0 3px var(--hazard);
}

/* ---------- Pagina de plataforma ---------- */

/* Dos publicos enfrentados: el que manda la carga y el que la
   lleva. Puestos lado a lado se entiende de un vistazo que el
   sistema sirve a los dos. */
.twoside {
  display: grid;
  gap: var(--s-md);
}
@media (min-width: 860px) {
  .twoside {
    grid-template-columns: 1fr 1fr;
  }
}
.side {
  padding: var(--s-lg);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--page);
  box-shadow: var(--shadow-sm);
  border-top: 5px solid var(--corridor);
}
.side-alt {
  border-top-color: var(--hazard);
}
.side-tag {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--corridor);
  margin-bottom: 10px;
}
.side-alt .side-tag {
  color: var(--hazard-deep);
}
.side-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: var(--s-md);
}
.side-list {
  display: grid;
  gap: 14px;
}
.side-list li {
  position: relative;
  padding-left: 30px;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.side-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.6em;
  width: 9px;
  height: 9px;
  background: var(--corridor);
  transform: rotate(45deg);
}
.side-alt .side-list li::before {
  background: var(--hazard);
}

/* Bolsa de carga, sobre fondo oscuro */
.boardrow {
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 820px) {
  .boardrow {
    grid-template-columns: repeat(3, 1fr);
  }
}
.boardcell {
  background: var(--deep);
  padding: var(--s-md);
}
.boardcell-k {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky-text);
  margin-bottom: 10px;
}
.boardcell-v {
  color: var(--on-deep-soft);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* Lo que se construye a pedido */
.prodgrid {
  display: grid;
  gap: var(--s-md);
}
@media (min-width: 680px) {
  .prodgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1180px) {
  .prodgrid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.prod {
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-lg);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease),
    transform 0.16s var(--ease);
}
.prod:hover {
  border-color: var(--corridor);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.prod-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: var(--r-md);
  background: var(--corridor-soft);
  color: var(--corridor);
  margin-bottom: var(--s-md);
}
.prod-mark svg {
  width: 32px;
  height: 32px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.prod-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.08;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.prod p {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* ---------- Freight News ----------
   La seccion de blog. Las tarjetas y el articulo comparten el
   mundo visual del resto: papel, azul de ruta y ambar de senal.
   El articulo se lee, asi que ahi la medida de linea y el ritmo
   vertical mandan sobre cualquier otra cosa. */

/* Enlace destacado en la cabecera */
.nav a.nav-news,
.drawer a.nav-news {
  color: var(--hazard-deep);
}
.nav a.nav-news:hover {
  color: var(--hazard-deep);
  background: var(--hazard-soft);
}

/* --- Rejilla de tarjetas --- */

.newsgrid {
  display: grid;
  gap: var(--s-md);
}
@media (min-width: 720px) {
  .newsgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .newsgrid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* En el indice el primero manda: ocupa dos columnas y la foto
     se pone horizontal. */
  .newsgrid > .newscard-lead {
    grid-column: span 2;
  }
  .newsgrid > .newscard-lead .newscard-link {
    flex-direction: row;
  }
  .newsgrid > .newscard-lead .newscard-img {
    flex: 0 0 52%;
    aspect-ratio: auto;
  }
  .newsgrid > .newscard-lead .newscard-title {
    font-size: 2rem;
  }
}

/* La tarjeta se alinea con el resto del sitio nuevo: sin borde
   gris, apoyada en la sombra, y al pasar el cursor el marino sube
   por el pie en vez de cambiar el borde. Es el mismo gesto que el
   ala del menu, en otra escala. */
.newscard {
  position: relative;
  background: var(--page);
  border: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.newscard::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--sky);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s var(--ease);
}
.newscard:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.newscard:hover::after {
  transform: none;
}
.newscard-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.newscard-img {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--tint-2);
}
.newscard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.newscard:hover .newscard-img img {
  transform: scale(1.05);
}
.newscard-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--s-md);
}
.newscard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* La categoria en pastilla, como los nombres de las categorias de
   carga del inicio: el mismo recurso para la misma idea. */
.newscard-cat {
  padding: 4px 11px;
  background: var(--mist);
  border-radius: 999px;
  color: var(--corridor-deep);
  font-weight: 700;
}
.newscard-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3125rem;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
.newscard-excerpt {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* --- Articulo --- */

.post-head {
  background: var(--tint);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(40px, 5vw, 72px) clamp(28px, 3vw, 44px);
}
.post-wrap {
  max-width: 820px;
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-md);
}
.crumbs a {
  color: var(--ink-soft);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--corridor);
}
.post-cat {
  color: var(--hazard-deep);
  margin-bottom: 12px;
}
.post-title {
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  text-transform: none;
  letter-spacing: -0.01em;
}
.post-excerpt {
  font-size: 1.375rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: var(--s-md);
  max-width: 44ch;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px var(--s-md);
  margin-top: var(--s-md);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--ink-faint);
}

.post-hero {
  max-height: clamp(260px, 42vw, 520px);
  overflow: hidden;
  background: var(--tint-2);
}
.post-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El cuerpo es para leer: medida corta y aire entre bloques. */
.post-body {
  padding-block: clamp(40px, 5vw, 72px);
}
.post-body > * + * {
  margin-top: var(--s-md);
}
.post-body p {
  font-size: 1.25rem;
  line-height: 1.7;
  max-width: 62ch;
  color: var(--ink);
}
.post-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  line-height: 1.1;
  text-transform: uppercase;
  margin-top: var(--s-xl);
}
.post-body h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.375rem;
  margin-top: var(--s-lg);
}
.post-body .bullets,
.post-body .steps {
  max-width: 62ch;
  display: grid;
  gap: 12px;
}
.post-body .bullets li,
.post-body .steps li {
  position: relative;
  padding-left: 34px;
  font-size: 1.1875rem;
  line-height: 1.6;
}
.post-body .bullets li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.62em;
  width: 10px;
  height: 10px;
  background: var(--hazard);
  transform: rotate(45deg);
}
.post-body .steps {
  counter-reset: step;
}
.post-body .steps li {
  counter-increment: step;
}
.post-body .steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid var(--corridor);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--corridor);
}
.post-body blockquote {
  border-left: 4px solid var(--hazard);
  padding-left: var(--s-md);
  max-width: 60ch;
}
.post-body blockquote p {
  font-size: 1.375rem;
  line-height: 1.5;
  font-weight: 500;
}
.post-body .note {
  background: var(--corridor-soft);
  border-radius: var(--r-md);
  padding: var(--s-md);
  max-width: 62ch;
}
.post-body .note p {
  font-size: 1.125rem;
  margin: 0;
}
.post-figure {
  max-width: none;
  border-radius: var(--r-md);
  overflow: hidden;
}

/* --- Mas articulos --- */

.morerow {
  display: grid;
  gap: var(--s-md);
  margin-top: var(--s-md);
}
@media (min-width: 720px) {
  .morerow {
    grid-template-columns: repeat(2, 1fr);
  }
}
.morecard {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s-md);
  align-items: center;
  padding: var(--s-sm);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--page);
  text-decoration: none;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.morecard:hover {
  border-color: var(--corridor);
  box-shadow: var(--shadow-sm);
}
.morecard img {
  width: 120px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--r-sm);
}
.morecard span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
}

/* --- Suscripcion --- */

.subscribe {
  display: grid;
  gap: var(--s-lg);
  align-items: center;
}
@media (min-width: 900px) {
  .subscribe {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(40px, 5vw, 84px);
  }
}
.subscribe-form .field > label {
  color: #fff;
}
.subscribe-form .field input {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.subscribe-form .field input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.subscribe-form .field input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--hazard);
  box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.28);
}
.subscribe-form .btn {
  width: 100%;
}
.subscribe-note {
  margin-top: 12px;
  font-size: 0.9375rem;
  color: var(--on-deep-soft);
}
.subscribe-ok {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--s-md);
  border: 2px solid var(--clear);
  border-radius: var(--r-md);
  color: #fff;
  font-size: 1.125rem;
}
.subscribe-ok::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background: var(--clear);
  transform: rotate(45deg);
}

/* Bloque de Freight News en el pie.
   Cuando no entra como quinta columna se queda solo en su fila, y
   una caja de 160px con 360 vacios al lado se ve rota. Asi que en
   ese caso toma la fila entera y se pone horizontal: el texto a la
   izquierda y el formulario a la derecha. */
@media (max-width: 1239px) {
  .footer-news {
    grid-column: 1 / -1;
    padding-top: var(--s-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
}
@media (max-width: 1239px) and (min-width: 620px) {
  .footer-news {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
    column-gap: var(--s-xl);
    align-items: center;
  }
  .footer-news h3,
  .footer-news p {
    grid-column: 1;
  }
  .footer-news form {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .footer-news p {
    margin-bottom: 0;
    max-width: 44ch;
  }
}
.footer-news p {
  color: var(--on-deep-soft);
  font-size: 1rem;
  margin-bottom: var(--s-sm);
}
.footer-news form {
  display: grid;
  gap: 10px;
}
/* Con sitio, el campo y el boton van uno al lado del otro. */
@media (min-width: 420px) {
  .footer-news form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}
@media (min-width: 1240px) {
  .footer-news form {
    grid-template-columns: 1fr;
  }
}
.footer-news input {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  color: #fff;
  font-size: 1rem;
}
.footer-news input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.footer-news input:focus {
  outline: none;
  border-color: var(--hazard);
}
.footer-news .btn {
  padding: 13px 20px;
  font-size: 1rem;
}

/* ---------- Franjas de carga ----------
   Fotos reales de equipos que la empresa ya movio. Van a sangre y
   sin recuadro: son la prueba, no una ilustracion. */

.loadstrip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}
@media (min-width: 720px) {
  .loadstrip {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1200px) {
  .loadstrip-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}
.loadstrip figure {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tint-2);
}
.loadstrip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.loadstrip figure:hover img {
  transform: scale(1.05);
}

/* ---------- Carrusel de cargas ----------
   Se desliza de verdad: rueda, arrastre, flechas y teclado. El
   scroll nativo hace el trabajo pesado, asi que funciona en tactil
   sin nada extra y se puede recorrer con Tab. */

.rail {
  position: relative;
}
.rail-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 30vw);
  gap: 3px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.rail-track::-webkit-scrollbar {
  display: none;
}
.rail-track.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}
@media (min-width: 720px) {
  .rail-track {
    grid-auto-columns: minmax(300px, 23vw);
  }
}
@media (min-width: 1200px) {
  .rail-track {
    grid-auto-columns: minmax(340px, 19vw);
  }
}
.rail-track > figure {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tint-2);
  scroll-snap-align: start;
}
.rail-track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
  user-select: none;
  -webkit-user-drag: none;
}
.rail-track > figure:hover img {
  transform: scale(1.05);
}

.rail-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--page);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: opacity 0.2s var(--ease), transform 0.15s var(--ease),
    background 0.15s var(--ease);
}
.rail-nav:hover {
  background: var(--hazard);
  transform: translateY(-50%) scale(1.06);
}
.rail-nav svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-prev {
  left: 14px;
}
.rail-next {
  right: 14px;
}
.rail-nav[disabled] {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 719px) {
  .rail-nav {
    width: 46px;
    height: 46px;
  }
  .rail-prev {
    left: 8px;
  }
  .rail-next {
    right: 8px;
  }
}

/* Barra de avance: dice cuanto falta sin ocupar sitio */
.rail-bar {
  height: 4px;
  background: var(--rule);
  margin-top: 3px;
  overflow: hidden;
}
.rail-bar span {
  display: block;
  height: 100%;
  width: var(--seen, 20%);
  background: var(--corridor);
  transition: width 0.15s linear;
}

/* Variante del carril para logos: piezas mas angostas, fondo claro
   y el logo centrado. Comparte comportamiento con el de fotos. */
.rail-logos .rail-track {
  grid-auto-columns: minmax(180px, 1fr);
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
@media (min-width: 720px) {
  .rail-logos .rail-track {
    grid-auto-columns: minmax(220px, 1fr);
  }
}
.rail-logos .rail-track > figure {
  aspect-ratio: auto;
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: var(--s-sm);
  background: var(--page);
}
.ground-tint .rail-logos .rail-track > figure {
  background: var(--tint);
}
.rail-logos img {
  width: auto;
  height: auto;
  max-height: 96px;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.92;
}
.rail-logos .rail-track > figure:hover img {
  transform: scale(1.06);
  opacity: 1;
}
.rail-logos-seals img {
  filter: invert(1) grayscale(1);
  opacity: 0.6;
  max-height: 74px;
}
.rail-logos-seals .rail-track > figure:hover img {
  filter: invert(1) grayscale(1);
  opacity: 0.9;
}

/* Franja ancha: una sola foto a lo largo, como corte de respiro */
/* El fondo marino no es decoracion: el texto de encima es blanco y
   se apoya en la foto para tener contraste. Si la foto tarda, falla
   o el visitante la bloquea, sin este color quedaria blanco sobre
   blanco, o sea invisible. */
.loadband {
  position: relative;
  height: clamp(240px, 32vw, 420px);
  overflow: hidden;
  background: var(--deep-2);
}
.loadband img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}
.loadband-copy {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  background: linear-gradient(
    100deg,
    rgba(9, 17, 30, 0.86) 0%,
    rgba(9, 17, 30, 0.6) 42%,
    rgba(9, 17, 30, 0.15) 100%
  );
}
.loadband-copy .headline {
  color: #fff;
}
.loadband-copy p {
  color: rgba(255, 255, 255, 0.86);
  max-width: 46ch;
  margin-top: var(--s-sm);
}

/* ---------- Video de presentacion ---------- */

.videoblock {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--deep);
  max-width: 980px;
  margin-inline: auto;
}
.videoblock video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--deep);
}

/* ---------- Equipo ---------- */

.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-md);
}
@media (min-width: 620px) {
  .team {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 900px) {
  .team {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1160px) {
  .team {
    grid-template-columns: repeat(6, 1fr);
  }
}
.member {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.member-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--tint-2);
  border: 1px solid var(--rule);
}
.member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.member-open .member-photo img {
  filter: grayscale(1);
  opacity: 0.35;
}
.member-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--ink);
}
.member-open .member-name {
  color: var(--ink-faint);
}
.member-role {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.35;
}
.member-langs {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.team-note {
  margin-top: var(--s-lg);
  color: var(--ink-faint);
  max-width: 70ch;
}

/* ---------- Paginas interiores ---------- */

.pagehead {
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--tint) 0%, var(--page) 100%);
  padding-block: clamp(52px, 7vw, 96px) clamp(40px, 5vw, 68px);
}
.pagehead .display {
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
}
.pagehead p {
  color: var(--ink-soft);
  font-size: 1.25rem;
  max-width: 60ch;
  margin-top: var(--s-md);
}

.wip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--hazard);
  background: var(--hazard-soft);
  border-radius: var(--r-sm);
  padding: 9px 15px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hazard-deep);
  margin-bottom: var(--s-md);
}
.wip::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--hazard);
  transform: rotate(45deg);
}

.outline {
  display: grid;
  border-top: 2px solid var(--ink);
  max-width: 940px;
}
.outline li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--s-md);
  padding: var(--s-md) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.outline .title {
  margin-bottom: 4px;
}
.outline p {
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

/* ---------- Pagina 404 ----------
   Un desvio, no una falla de sistema. La franja habla el mismo
   idioma que el inicio (la carta de ruta), pero el corredor se
   corta a la mitad y sigue en puntos que se apagan: asi la frase
   "esta ruta no existe" se dibuja en vez de escribirse.
   Abajo van las salidas de verdad, en renglones grandes: quien
   cae aqui llega contrariado y no se va a poner a leer. */

.nf {
  --strip: clamp(190px, 24vw, 280px);
  position: relative;
  background: var(--tint);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
/* La cuadricula de la carta, a sangre y sin SVG: son dos rayados
   cruzados de 80px, desvanecidos con una mascara radial para que
   no lleguen secos a los bordes. */
.nf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: repeating-linear-gradient(
      to right,
      var(--rule) 0 1px,
      transparent 1px 80px
    ),
    repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 80px);
  -webkit-mask-image: radial-gradient(ellipse 76% 76% at 46% 46%, #000, transparent);
  mask-image: radial-gradient(ellipse 76% 76% at 46% 46%, #000, transparent);
  opacity: 0.75;
}
/* El corredor va en una franja abajo, no en toda la caja: asi el
   rombo del corte queda encuadrado tanto en escritorio como en
   telefono. El alto explicito importa, porque un <svg> absoluto
   sin height se queda con el de su viewBox. */
.nf-chart {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  width: 100%;
  height: var(--strip);
}
.nf-in {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--s-xl);
  padding-block: clamp(44px, 6vw, 92px);
  align-items: center;
}
/* Apilado, la foto cae encima de la franja del corredor y tapa el
   rombo. Se le reserva el hueco de abajo para que el corte se vea.
   En escritorio no hace falta: el corte queda a la izquierda de la
   foto. */
@media (max-width: 999px) {
  .nf-in {
    padding-bottom: calc(var(--strip) + var(--s-md));
  }
}
@media (min-width: 1000px) {
  .nf-in {
    grid-template-columns: minmax(0, 1.06fr) minmax(360px, 0.78fr);
    gap: clamp(36px, 4.5vw, 72px);
  }
}
.nf .display {
  font-size: clamp(3rem, 6.2vw, 6rem);
}
.nf .display em {
  font-style: normal;
  color: var(--corridor);
}
.nf-lede {
  color: var(--ink-soft);
  font-size: 1.375rem;
  line-height: 1.55;
  max-width: 42ch;
  margin-bottom: var(--s-lg);
}

/* La direccion que se pidio, tal cual. Va en mono porque es un
   dato, no una frase, y porque asi se distingue de la copia.
   El codigo en rojo es lo unico que nombra el error: el titular
   ya lo dijo con palabras. */
.nf-path {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  max-width: 100%;
  margin: var(--s-md) 0 var(--s-lg);
  padding: 9px 15px;
  background: var(--page);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--pin);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.nf-path b {
  flex: none;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--pin-deep);
}
.nf-path span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La foto no ilustra el error, sostiene la pagina: es una carga
   real de la empresa, sin recuadro decorativo. */
.nf-photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 3;
  max-width: 100%;
}
.nf-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Salidas del 404 ----------
   Renglones, no tarjetas: se leen de corrido y el area que se
   puede tocar es toda la linea, que en telefono importa mas que
   la forma. */

.ways {
  display: grid;
  border-top: 2px solid var(--ink);
}
@media (min-width: 900px) {
  .ways {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(32px, 4vw, 72px);
  }
}
.way {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-md);
  padding: clamp(18px, 2.2vw, 28px) 0;
  border-bottom: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s var(--ease);
}
.way h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.3vw, 2.125rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transition: color 0.2s var(--ease);
}
.way p {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.45;
  max-width: 44ch;
}
.way .tick {
  width: 11px;
  height: 11px;
  border-right: 3px solid var(--ink-faint);
  border-top: 3px solid var(--ink-faint);
  transform: rotate(45deg);
  flex: none;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.way:hover {
  border-bottom-color: var(--corridor);
}
.way:hover h2 {
  color: var(--corridor);
}
.way:hover .tick {
  border-color: var(--corridor);
  transform: rotate(45deg) translate(3px, -3px);
}
.way:focus-visible {
  outline: 3px solid var(--corridor);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

/* ---------- Movimiento ---------- */

.reveal {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }
  .reveal.in {
    opacity: 1;
    transform: none;
  }

  .print > * {
    clip-path: inset(0 0 108% 0);
    transform: translateY(0.16em);
    transition: clip-path 0.85s var(--ease), transform 0.85s var(--ease);
    transition-delay: calc(var(--i, 0) * 110ms);
  }
  .print.in > *,
  .in .print > * {
    clip-path: inset(0 0 -14% 0);
    transform: none;
  }

  .stagger > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .stagger.in > *,
  .in .stagger > * {
    opacity: 1;
    transform: none;
  }

  .lift {
    opacity: 0;
    transform: translateY(18px);
    animation: lift-in 0.7s var(--ease) forwards;
    animation-delay: calc(0.2s + var(--i, 0) * 110ms);
  }
  @keyframes lift-in {
    to {
      opacity: 1;
      transform: none;
    }
  }

  .survey {
    opacity: 0;
    transform: translate3d(22px, 12px, 0);
    animation: survey-in 0.85s var(--ease) 0.45s forwards;
  }
  @keyframes survey-in {
    to {
      opacity: 1;
      transform: none;
    }
  }

  .lane-line {
    stroke-dashoffset: var(--len, 600);
    transition: stroke-dashoffset 1.5s var(--ease);
    transition-delay: calc(var(--i, 0) * 220ms);
  }
  .in .lane-line {
    stroke-dashoffset: 0;
  }
  .lane-node rect {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.2);
    transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
    transition-delay: calc(0.5s + var(--i, 0) * 160ms);
  }
  .in .lane-node rect {
    opacity: 1;
    transform: scale(1);
  }

  .hero-route {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    animation: draw-route 2.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
  }
  @keyframes draw-route {
    to {
      stroke-dashoffset: 0;
    }
  }

  /* El 404 en tres tiempos: el corredor avanza, se planta en el
     rombo y lo que seguia aparece en puntos que ya no llegan a
     ningun lado. Es el unico momento animado de la pagina. */
  .nf-route {
    stroke-dasharray: 1800;
    stroke-dashoffset: 1800;
    animation: draw-route 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
  }
  .nf-break {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.3);
    animation: nf-plant 0.45s cubic-bezier(0.22, 1, 0.36, 1) 1.15s forwards;
  }
  .nf-ghost {
    opacity: 0;
    animation: nf-vanish 1s var(--ease) 1.4s forwards;
  }
  @keyframes nf-plant {
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes nf-vanish {
    to {
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}