/* =====================================================================
 *  sitio.css -- Shoolin Logistics, rediseño 2026
 *
 *  Una sola hoja, sin frameworks. Fuentes servidas desde el propio sitio:
 *  ningún pedido a Google ni a otro tercero al abrir una página.
 * ===================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Sistema Shoolin: el azul manda; el champagne sólo firma. */
  --tinta: #17232d;
  --texto: #344553;
  --texto-suave: #5b6c79;
  --marino: #071d33;
  --marino-oscuro: #041525;
  --azul: #033d77;
  --azul-claro: #eaf5fa;
  --celeste: #9dd1e5;
  /* Champagne. Conserva el nombre de la paleta anterior. Sobre fondos claros
     no llega a 3:1: se usa sólo sobre navy. */
  --naranja: #c6a66a;
  --naranja-claro: #d8be8d;
  --fondo: #faf8f3;
  --fondo-gris: #f2f4f6;
  --linea: #e4e9ed;
  --linea-fuerte: #cbd5dc;

  --radio: 14px;
  --radio-chico: 10px;
  --sombra: 0 1px 2px rgba(13, 27, 42, .05), 0 10px 30px rgba(13, 27, 42, .08);

  --ancho: 1200px;
  --margen: clamp(16px, 4vw, 32px);
  --alto-cabecera: 68px;

  --titulos: "Archivo", "Arial Narrow", Arial, sans-serif;
  --cuerpo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* --- base ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--alto-cabecera);
}

body {
  margin: 0;
  font-family: var(--cuerpo);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); }

/* El navegador oculta lo que lleva "hidden" con display:none, pero cualquier
   regla nuestra que fije display se lo gana por especificidad. Pasó el 16/09:
   la botonera de cotizar del asistente es flex, así que seguía a la vista en
   los resultados que piden revisión, que son justamente los que no deben
   ofrecer cotizar. Se declara una vez, para todo el sitio. */
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--titulos);
  font-stretch: 108%;
  color: var(--tinta);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Azul sobre fondos claros (10:1). Sobre navy pasa a champagne: ver "fondos oscuros". */
:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}

main:focus { outline: none; }

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

.saltar {
  position: absolute;
  left: 12px;
  top: -120px;
  z-index: 100;
  background: var(--tinta);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radio-chico);
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus { top: 12px; }

.icono { flex: none; }

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

/* --- botones ------------------------------------------------------------ */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .85em 1.35em;
  border: 2px solid transparent;
  border-radius: var(--radio-chico);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.boton .icono { width: 1.15em; height: 1.15em; }

/* Blanco sobre Shoolin Blue: 10,8:1. En la portada el botón se invierte: azul sobre ivory. */
.boton--acento { background: var(--azul); color: #fff; }
.boton--acento:hover { background: #052f5d; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(3, 61, 119, .26); }
.boton--acento:disabled { opacity: .7; cursor: progress; transform: none; box-shadow: none; }

.boton--claro { border-color: rgba(255, 255, 255, .32); color: #fff; }
.boton--claro:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

.boton--ancho { width: 100%; }

/* --- encabezado --------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 243, .97);
  border-bottom: 1px solid var(--linea);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}

.marca img { width: 158px; }

.menu { display: flex; align-items: center; gap: 28px; }

.menu__lista {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__lista a,
.menu__desplegar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tinta);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.menu__lista a:hover,
.menu__desplegar:hover { background: var(--fondo-gris); }
.menu__lista a[aria-current="page"],
.menu__desplegar.es-actual { color: var(--azul); }

.menu__desplegar .icono { width: 16px; height: 16px; transition: transform .15s; }
.menu__desplegar[aria-expanded="true"] .icono { transform: rotate(180deg); }

.menu__grupo { position: relative; }

.submenu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: -8px;
  min-width: 290px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.submenu a { display: flex; width: 100%; gap: 12px; padding: 10px 12px; }
.submenu .icono { width: 20px; height: 20px; color: var(--azul); }

.menu__desplegar[aria-expanded="true"] + .submenu { display: block; }
/* Sin JavaScript el desplegable abre con el mouse o con el teclado. */
html:not(.js) .menu__grupo:hover .submenu,
html:not(.js) .menu__grupo:focus-within .submenu { display: block; }

.menu__acciones { display: flex; align-items: center; gap: 18px; }
.cabecera .boton { padding: .72em 1.2em; }

.tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.tel .icono { width: 18px; height: 18px; color: var(--azul); }

.menu-boton {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  background: var(--fondo);
  color: var(--tinta);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.menu-boton .icono { width: 20px; height: 20px; }
.menu-boton__cerrar,
.menu-boton[aria-expanded="true"] .menu-boton__abrir { display: none; }
.menu-boton[aria-expanded="true"] .menu-boton__cerrar { display: block; }

@media (max-width: 1023px) {
  :root { --alto-cabecera: 68px; }
  .cabecera__fila { flex-wrap: wrap; min-height: 68px; }
  .marca img { width: 150px; }

  .menu-boton { display: inline-flex; }
  html:not(.js) .menu-boton { display: none; }

  .menu {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    padding-bottom: 16px;
  }
  html.js .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    padding: 8px var(--margen) 20px;
    background: var(--fondo);
    border-bottom: 1px solid var(--linea);
    box-shadow: 0 16px 30px rgba(13, 27, 42, .1);
  }
  html.js .menu-boton[aria-expanded="true"] + .menu { display: flex; }

  .menu__lista { flex-direction: column; align-items: stretch; }
  .menu__lista a, .menu__desplegar { width: 100%; justify-content: space-between; padding: 12px 8px; }
  .submenu { position: static; min-width: 0; padding: 0 0 6px 8px; border: 0; box-shadow: none; }
  .submenu a { justify-content: flex-start; }
  .menu__acciones { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 12px; border-top: 1px solid var(--linea); }
  .tel { justify-content: center; padding: 8px; }
}

/* --- portada ------------------------------------------------------------ */

.portada {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--marino);
  color: #c9d7e8;
}
.portada::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(7, 29, 51, .16), rgba(7, 29, 51, .2)),
    radial-gradient(55% 70% at 88% 18%, rgba(157, 209, 229, .22), transparent 65%),
    radial-gradient(45% 60% at 0% 100%, rgba(3, 61, 119, .68), transparent 70%);
}
.portada::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(7, 29, 51, .88) 0%, rgba(7, 29, 51, .68) 42%, rgba(7, 29, 51, .22) 72%, rgba(7, 29, 51, .08) 100%);
}

.portada__grilla {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
  padding-block: clamp(56px, 8vw, 110px);
}

/* La foto 16:9 pasa a ser paisaje de la portada, de borde a borde: se ubica
   contra la sección y no contra el contenedor, que la cortaba a 1200 px. El
   texto conserva una zona de lectura navy a la izquierda. En pantallas
   angostas la foto va entera debajo del texto, sin velo. Las portadas
   interiores siguen compactas. */
.portada:not(.portada--servicio) .portada__grilla {
  grid-template-columns: minmax(0, 650px);
  min-height: calc(100svh - var(--alto-cabecera));
  padding-block: clamp(28px, 3.5vw, 52px);
}
.portada:not(.portada--servicio) .portada__texto {
  position: relative;
  z-index: 2;
  align-self: start;
  padding-top: 0;
}
.portada:not(.portada--servicio) .portada__foto {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.portada:not(.portada--servicio) .foto--portada {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}
.portada:not(.portada--servicio) .foto--portada img {
  object-position: 68% center;
  filter: brightness(.94);
}
/* El velo va dentro de la foto, entre la imagen y la etiqueta de vista previa:
   con el velo sobre toda la sección, la etiqueta y la tarjeta quedaban tapadas. */
.portada:not(.portada--servicio)::before,
.portada:not(.portada--servicio)::after { content: none; }
.portada:not(.portada--servicio) .foto--portada::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 29, 51, .88) 0%, rgba(7, 29, 51, .68) 42%, rgba(7, 29, 51, .22) 72%, rgba(7, 29, 51, .08) 100%),
    linear-gradient(rgba(7, 29, 51, .16), rgba(7, 29, 51, .2)),
    radial-gradient(45% 60% at 0% 100%, rgba(3, 61, 119, .68), transparent 70%);
}
.portada:not(.portada--servicio) .tarjeta-servicios {
  left: auto;
  /* Alineada con el borde del contenido, no con el de la ventana. */
  right: max(var(--margen), calc((100% - var(--ancho)) / 2));
  bottom: clamp(22px, 4vw, 52px);
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(250, 248, 243, .94);
  box-shadow: 0 18px 40px rgba(4, 21, 37, .25);
}

.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--azul);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.antetitulo::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.portada .antetitulo,
.cotizar__panel .antetitulo { color: var(--celeste); }

.portada h1 {
  color: #fff;
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
  font-weight: 760;
  letter-spacing: -.022em;
  line-height: 1.02;
  margin-bottom: .4em;
}
.portada h1 em {
  color: #fff;
  font-style: normal;
}

.portada:not(.portada--servicio) .boton--acento { background: var(--fondo); color: #033d77; }
.portada:not(.portada--servicio) .boton--acento:hover { background: #efe9dc; box-shadow: 0 8px 22px rgba(4, 21, 37, .28); }
.portada:not(.portada--servicio) .portada__acciones [data-asistente-abrir] {
  border-color: var(--naranja);
  background: var(--naranja);
  color: var(--tinta);
}
.portada:not(.portada--servicio) .portada__acciones [data-asistente-abrir]:hover {
  border-color: var(--naranja-claro);
  background: var(--naranja-claro);
}

.portada__bajada {
  max-width: 33em;
  margin-bottom: 34px;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
}

.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; }

.portada__foto { position: relative; }

.foto { position: relative; overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: cover; }

.foto--portada {
  aspect-ratio: 1 / 1.02;
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}
.foto--portada img { object-position: 74% 60%; }

.tarjeta-servicios {
  position: absolute;
  left: -32px;
  bottom: 32px;
  max-width: 300px;
  padding: 18px 20px;
  background: var(--fondo);
  color: var(--tinta);
  border-radius: var(--radio);
  box-shadow: 0 18px 40px rgba(7, 26, 47, .3);
}
.tarjeta-servicios__titulo {
  margin-bottom: 12px;
  font-family: var(--titulos);
  font-stretch: 108%;
  font-size: 1.05rem;
  font-weight: 700;
}

.fichas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fichas li {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--azul-claro);
  color: var(--azul);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
}

@media (max-width: 899px) {
  .portada__grilla { grid-template-columns: 1fr; }
  .foto--portada { aspect-ratio: 16 / 11; }
  .tarjeta-servicios { left: 16px; bottom: 16px; }
  /* En mobile la foto vuelve a ser parte del hero, no una franja separada
     debajo del texto. El velo celeste claro da contraste sin esconder la
     operación que muestra la imagen. About conserva su portada editorial. */
  .portada:not(.portada--servicio):not(.portada--about) {
    min-block-size: calc(100svh - var(--alto-cabecera));
    background: #dceef3;
  }
  .portada:not(.portada--servicio):not(.portada--about) .portada__grilla {
    position: relative;
    z-index: 2;
    grid-template-columns: 1fr;
    min-height: calc(100svh - var(--alto-cabecera));
    padding-block: clamp(46px, 8svh, 72px);
  }
  .portada:not(.portada--servicio):not(.portada--about) .portada__foto {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
  }
  .portada:not(.portada--servicio):not(.portada--about) .foto--portada {
    height: 100%;
    aspect-ratio: auto;
  }
  .portada:not(.portada--servicio):not(.portada--about) .foto--portada img {
    object-position: 62% center;
    filter: saturate(.62) brightness(.92);
  }
  .portada:not(.portada--servicio):not(.portada--about) .foto--portada::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(90deg, rgba(236, 246, 248, .97) 0%, rgba(230, 242, 246, .89) 55%, rgba(220, 238, 244, .42) 100%),
      linear-gradient(rgba(214, 235, 241, .12), rgba(214, 235, 241, .28));
  }
  .portada:not(.portada--servicio):not(.portada--about) .portada__texto { z-index: 2; }
  .portada:not(.portada--servicio):not(.portada--about) h1,
  .portada:not(.portada--servicio):not(.portada--about) h1 em { color: var(--tinta); }
  .portada:not(.portada--servicio):not(.portada--about) .portada__bajada { color: #244257; }
  .portada:not(.portada--servicio):not(.portada--about) .boton--acento {
    border-color: var(--azul);
    background: var(--azul);
    color: #fff;
  }
  .portada:not(.portada--servicio):not(.portada--about) .portada__acciones [data-asistente-abrir] {
    border-color: rgba(198, 166, 106, .9);
    background: rgba(255, 255, 255, .72);
    color: var(--tinta);
  }
}
@media (max-width: 599px) {
  .portada__acciones .boton { width: 100%; }
  .tarjeta-servicios { position: relative; left: auto; bottom: auto; max-width: none; margin: -44px 12px 0; }
  .portada:not(.portada--servicio) .tarjeta-servicios { display: none; }
}

/* --- franja de puntos --------------------------------------------------- */

.puntos {
  position: relative;
  overflow: hidden;
  padding-block: clamp(28px, 3.5vw, 46px);
  border-bottom: 1px solid var(--linea);
  background:
    linear-gradient(rgba(250, 248, 243, .36), rgba(250, 248, 243, .5)),
    url("/imagenes/conexiones-1600.webp") center / cover no-repeat;
}

.puntos__encabezado { max-width: 690px; margin-bottom: clamp(20px, 2.5vw, 30px); }
.puntos__encabezado .antetitulo { margin-bottom: 8px; }
.puntos__encabezado h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); font-weight: 730; }
.puntos__encabezado p:last-child { max-width: 44em; margin-bottom: 0; color: var(--texto-suave); font-size: 1rem; }

.puntos__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.puntos__lista li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 28px 16px 0; border-left: 0; }
.puntos__lista li:first-child { padding-left: 0; border-left: 0; }
.puntos__lista li + li { padding-left: 28px; border-left: 1px solid var(--linea); }
.puntos__lista .icono {
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: var(--radio-chico);
  background: var(--azul-claro);
  color: var(--azul);
}
.puntos__lista strong { display: block; color: var(--tinta); font-family: var(--titulos); font-stretch: 108%; font-size: 1.08rem; line-height: 1.3; }
.puntos__lista span { color: var(--texto-suave); font-size: .95rem; }
.puntos .nota-previa { margin-bottom: 24px; }

.puntos__flujo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 640px);
  margin: clamp(20px, 3vw, 30px) auto 12px;
  color: var(--marino);
  font-family: var(--titulos);
  font-size: .94rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.puntos__flujo::before,
.puntos__flujo::after { content: ""; flex: 1; min-width: 20px; height: 1px; background: linear-gradient(90deg, transparent, var(--celeste)); }
.puntos__flujo::after { transform: scaleX(-1); }
.puntos__flujo .icono { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--fondo); color: var(--azul); }

.puntos__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.puntos__chips li { padding: 6px 12px; border: 1px solid rgba(3, 61, 119, .16); border-radius: 999px; background: rgba(250, 248, 243, .82); color: var(--azul); font-size: .8rem; font-weight: 700; letter-spacing: .035em; }

/* La pantalla de cobertura conserva su alto completo, pero reparte sus capas
   dentro del pliegue para que el cierre visual llegue a Services sin un vacío
   residual abajo. */
.puntos.seccion--pantalla > .contenedor {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: clamp(18px, 2.4vw, 30px);
  min-block-size: calc(100svh - var(--alto-cabecera) - 64px);
}
.puntos.seccion--pantalla .puntos__encabezado { margin-bottom: 0; }
.puntos.seccion--pantalla .puntos__lista { align-self: center; }

@media (max-width: 767px) {
  .puntos.seccion--pantalla > .contenedor { display: block; min-block-size: 0; }
  .puntos.seccion--pantalla .puntos__encabezado { margin-bottom: 24px; }
  .puntos__lista { grid-template-columns: 1fr; }
  .puntos__lista li,
  .puntos__lista li + li { padding: 20px 0; border-left: 0; border-top: 1px solid var(--linea); }
  .puntos__lista li:first-child { border-top: 0; }
  .puntos__flujo { gap: 8px; font-size: .76rem; }
  .puntos__flujo .icono { width: 20px; height: 20px; padding: 3px; }
}

/* --- secciones ---------------------------------------------------------- */

.seccion { padding-block: clamp(64px, 9vw, 116px); }
.seccion--gris { background: var(--fondo-gris); }
.seccion--corta { padding-block: clamp(32px, 5vw, 56px); }

/* Sección navy: el champagne sólo firma sobre fondo oscuro, donde contrasta. */
.seccion--marino { background: var(--marino); color: #c9d7e8; }
.seccion--marino h2,
.seccion--marino h3 { color: #fff; }
.seccion--marino .antetitulo { color: var(--celeste); }
.seccion--marino .encabezado p { color: #c9d7e8; }

/* Cada bloque de la portada ocupa un pliegue completo como mínimo. Si sus
   tarjetas, notas o formulario requieren más alto, conserva su alto natural:
   no se oculta ni se fuerza un scroll interno. Los atributos data-pantalla
   delimitan las futuras animaciones de entrada y salida por sección. */
.seccion--pantalla {
  min-block-size: calc(100svh - var(--alto-cabecera));
  display: grid;
  align-items: center;
}
.seccion--pantalla > .contenedor { width: 100%; }

/* Fondos oscuros: el foco pasa de azul a champagne (7,3:1 sobre navy). */
.portada :focus-visible,
.seccion--marino :focus-visible,
.buscador :focus-visible,
.cotizar__panel :focus-visible,
.pie :focus-visible,
.asistente__cabecera :focus-visible { outline-color: var(--naranja); }

.encabezado { max-width: 700px; margin-bottom: clamp(36px, 5vw, 56px); }
.encabezado--centro { margin-inline: auto; text-align: center; }
.encabezado h2 { font-size: clamp(1.95rem, 3.6vw, 2.9rem); font-weight: 730; }
.encabezado p { color: var(--texto-suave); font-size: 1.125rem; }

/* --- servicios ---------------------------------------------------------- */

.grupos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* En la portada, la categoría vive dentro de cada módulo. El encabezado de
   grupo se conserva para lectores de pantalla y para la relación aria. */
.seccion--services .grupo__nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.grupo__nombre {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--texto-suave);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.grupo__nombre::after { content: ""; flex: 1; height: 1px; background: var(--linea-fuerte); }

.grupo__lista { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }

.servicio {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px;
  overflow: hidden;
  background: #fffdf9;
  border: 1px solid #cbd9e3;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.servicio::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 76px;
  opacity: .55;
  background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(3, 61, 119, .14) 8px 9px);
  pointer-events: none;
}
.servicio:hover { border-color: #8cb2cc; box-shadow: var(--sombra); transform: translateY(-2px); }
.servicio:focus-within { border-color: var(--azul); }

.servicio__identidad {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.servicio__categoria {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--azul);
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.servicio__icono {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  background: var(--azul-claro);
  color: var(--azul);
}
.servicio__titulo { position: static; z-index: auto; margin-bottom: 8px; font-size: 1.35rem; font-weight: 720; }
.servicio__titulo a { color: inherit; text-decoration: none; }
/* Toda la tarjeta responde al clic, pero el enlace es sólo el título. */
.servicio__titulo a::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: var(--radio); }
.servicio__titulo a:focus-visible { outline: none; }
.servicio__titulo a:focus-visible::after { outline: 3px solid var(--azul); outline-offset: 3px; }
.servicio p:not(.servicio__categoria) { position: relative; z-index: 1; margin-bottom: 14px; font-size: .97rem; }

.servicio__mas { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; color: var(--azul); font-weight: 650; font-size: .95rem; }
.servicio__mas .icono { width: 16px; height: 16px; transition: transform .15s; }
.servicio:hover .servicio__mas .icono { transform: translateX(3px); }

/* En cuatro columnas, las tarjetas de una misma fila miden lo mismo aunque
   el texto de una sea más largo: cada grupo toma las filas de la grilla. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1200px) {
    .grupos { grid-template-rows: auto auto auto; row-gap: 0; }
    .grupo { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    .grupo__lista { grid-row: span 2; grid-template-rows: subgrid; row-gap: 16px; }
    .grupo__lista > li { display: grid; }
  }
}

@media (max-width: 1199px) { .grupos { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; } }
@media (max-width: 767px) { .grupos { grid-template-columns: 1fr; gap: 32px; } .grupo__lista { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .grupo__lista { grid-template-columns: 1fr; } }

/* --- pasos -------------------------------------------------------------- */

.pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.paso { position: relative; padding: 30px 28px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); }
.paso::before {
  counter-increment: paso;
  content: counter(paso, decimal-leading-zero);
  display: block;
  margin-bottom: 18px;
  color: var(--naranja);
  font-family: var(--titulos);
  font-stretch: 112%;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
}
.paso:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50px;
  right: -25px;
  width: 26px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--linea-fuerte) 0 6px, transparent 6px 10px);
}
.paso h3 { font-size: 1.25rem; font-weight: 700; }
.seccion--marino .paso { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); }
.seccion--marino .paso:not(:last-child)::after { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 6px, transparent 6px 10px); }

@media (max-width: 859px) {
  .pasos { grid-template-columns: 1fr; gap: 16px; }
  .paso:not(:last-child)::after { display: none; }
}

/* La portada convierte los tres pasos en una sola ruta; las tarjetas de
   Carrier conservan arriba su tratamiento original. */
.seccion--ruta {
  position: relative;
  overflow: hidden;
  /* Mantiene esta tarjeta en el mismo pliegue que 03/06. El contenido sigue
     pudiendo crecer en pantallas angostas: la altura general nunca se fija. */
  min-block-size: min(calc(100svh - var(--alto-cabecera)), 720px);
  padding-block: clamp(48px, 4.5vw, 64px);
  background: linear-gradient(135deg, #071d33 0%, #09243c 58%, #071d33 100%);
  isolation: isolate;
}
.seccion--ruta::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .05;
  background: url("/imagenes/conexiones-1600.webp") center / cover no-repeat;
  mix-blend-mode: screen;
}
.seccion--ruta::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .12;
  background-image:
    linear-gradient(rgba(140, 201, 238, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 201, 238, .14) 1px, transparent 1px),
    radial-gradient(circle at 12% 28%, #c6a66a 0 2px, transparent 3px),
    radial-gradient(circle at 86% 70%, #8cc9ee 0 2px, transparent 3px);
  background-size: 72px 72px, 72px 72px, 100% 100%, 100% 100%;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.seccion--ruta > .contenedor { position: relative; z-index: 1; }
.seccion--ruta .encabezado { margin-bottom: clamp(20px, 2.4vw, 30px); }
.seccion--ruta .encabezado h2 { max-width: 18ch; margin-inline: auto; }

.ruta-logistica { position: relative; min-height: 280px; isolation: isolate; }
.ruta-logistica__linea {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 130px;
  overflow: visible;
}
.ruta-logistica__trazo { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ruta-logistica__trazo--base { stroke: rgba(201, 215, 232, .28); stroke-width: 2; stroke-dasharray: 5 8; }
.ruta-logistica__trazo--avance { stroke: url("#ruta-champagne"); stroke-width: 3; }
.ruta-logistica__trazo--flujo {
  stroke: #fff0c5;
  stroke-width: 4;
  stroke-dasharray: .012 .088;
  stroke-linecap: round;
  opacity: .72;
}
.ruta-logistica__vehiculos { position: absolute; z-index: 20; inset: 0 0 auto; height: 130px; }
.ruta-logistica__vehiculo {
  position: absolute;
  z-index: 1;
  display: grid;
  width: 38px;
  height: 30px;
  place-items: center;
  border-radius: 5px;
  background: #0a2945;
  color: #e6c98e;
  box-shadow: 0 0 0 6px rgba(7, 29, 51, .86), 0 4px 12px rgba(0, 0, 0, .2);
}
.ruta-logistica__vehiculo .icono { width: 25px; height: 25px; stroke-width: 1.9; }
.ruta-logistica__vehiculo--camion { top: 29px; left: 31%; }
.ruta-logistica__vehiculo--contenedor { top: 61px; left: 66%; }
.ruta-logistica__vehiculo--avion { top: 25px; left: 75%; }

.pasos--ruta { position: relative; z-index: 2; gap: 0; }
.pasos--ruta .paso {
  min-width: 0;
  min-height: 280px;
  padding: 150px clamp(20px, 3vw, 42px) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
}
.pasos--ruta .paso::before,
.pasos--ruta .paso::after { content: none; }
.paso__estacion {
  position: absolute;
  z-index: 3;
  top: 37px;
  left: 50%;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 2px solid rgba(198, 166, 106, .92);
  border-radius: 50%;
  background: #071d33;
  color: #e6c98e;
  box-shadow: 0 0 0 8px rgba(7, 29, 51, .82);
  transform: translateX(-50%);
}
.paso__fase {
  position: absolute;
  z-index: 5;
  top: 1px;
  left: 50%;
  padding: 4px 10px;
  border: 1px solid rgba(198, 166, 106, .34);
  border-radius: 999px;
  background: rgba(7, 29, 51, .88);
  color: #e6c98e;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.paso__estacion > .icono { width: 25px; height: 25px; }
.paso__estacion--final { box-shadow: 0 0 0 8px rgba(7, 29, 51, .82), 0 0 30px rgba(198, 166, 106, .34); }
.paso__estacion--final > .icono:first-child { transform: translate(-3px, 2px); }
.paso__estacion .paso__check {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 17px;
  height: 17px;
  padding: 2px;
  border-radius: 50%;
  background: #c6a66a;
  color: #071d33;
  stroke-width: 2.4;
}
.paso__numero {
  position: absolute;
  z-index: -1;
  top: 104px;
  left: 25%;
  color: rgba(198, 166, 106, .11);
  font-family: var(--titulos);
  font-stretch: 112%;
  font-size: clamp(4.2rem, 5vw, 4.8rem);
  font-weight: 800;
  line-height: .8;
  transform: translateX(-50%);
  user-select: none;
}
.paso__contenido { position: relative; z-index: 1; max-width: 21rem; margin-inline: auto; }
.pasos--ruta .paso h3 { min-height: 2.3em; margin-bottom: 9px; font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.15; text-wrap: balance; }
.pasos--ruta .paso p { margin-bottom: 0; color: #c2cfdb; font-size: .95rem; line-height: 1.55; text-wrap: balance; }
.ruta-logistica__cierre { display: grid; justify-items: center; gap: 12px; margin-top: clamp(16px, 2vw, 24px); text-align: center; }
.ruta-logistica__cierre p { margin: 0; color: #fff; font-family: var(--titulos); font-size: 1.05rem; font-weight: 700; }
.boton--ruta { min-width: 220px; justify-content: space-between; border-color: #c6a66a; background: #c6a66a; color: #071d33; }
.boton--ruta:hover { border-color: #e6c98e; background: #e6c98e; box-shadow: 0 8px 24px rgba(198, 166, 106, .18); }
.boton--ruta .icono { width: 18px; height: 18px; }

@media (prefers-reduced-motion: no-preference) {
  html.js.motion-ready .seccion--ruta .ruta-logistica__trazo--avance { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html.js.motion-ready .seccion--ruta.es-visible .ruta-logistica__trazo--avance { animation: dibujar-ruta .9s cubic-bezier(.22, .8, .26, 1) forwards; }
  html.js.motion-ready .seccion--ruta .ruta-logistica__trazo--flujo { opacity: 0; }
  html.js.motion-ready .seccion--ruta.es-visible .ruta-logistica__trazo--flujo { opacity: .72; animation: flujo-ruta 3.2s linear infinite; }
  html.js.motion-ready .seccion--ruta.es-visible .ruta-logistica__vehiculo--camion { animation: mover-camion 2.6s ease-in-out infinite alternate; }
  html.js.motion-ready .seccion--ruta.es-visible .ruta-logistica__vehiculo--contenedor { animation: mover-contenedor 3s .25s ease-in-out infinite alternate; }
  html.js.motion-ready .seccion--ruta.es-visible .ruta-logistica__vehiculo--avion { animation: mover-avion 2.2s .15s ease-in-out infinite alternate; }
  html.js.motion-ready .seccion--ruta .paso__estacion { opacity: .45; transform: translateX(-50%) scale(.82); }
  html.js.motion-ready .seccion--ruta.es-visible .paso__estacion { animation: encender-estacion .42s .18s ease-out forwards; }
  html.js.motion-ready .seccion--ruta.es-visible .paso:nth-child(2) .paso__estacion { animation-delay: .5s; }
  html.js.motion-ready .seccion--ruta.es-visible .paso:nth-child(3) .paso__estacion { animation-delay: .78s; }
  html.js.motion-ready .seccion--ruta.es-visible .paso__estacion--final { animation: encender-estacion .42s .78s ease-out forwards, pulso-entrega 2.8s 1.2s ease-in-out infinite; }
}
@keyframes dibujar-ruta { to { stroke-dashoffset: 0; } }
@keyframes flujo-ruta { to { stroke-dashoffset: -1; } }
@keyframes mover-camion { to { translate: 12px -2px; } }
@keyframes mover-contenedor { to { translate: 7px 2px; } }
@keyframes mover-avion { to { translate: 14px -4px; } }
@keyframes encender-estacion { to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes pulso-entrega {
  50% { box-shadow: 0 0 0 8px rgba(7, 29, 51, .82), 0 0 38px rgba(198, 166, 106, .5); }
}

@media (max-width: 859px) {
  .seccion--ruta { align-items: start; }
  .seccion--ruta .encabezado { margin-bottom: 34px; text-align: left; }
  .seccion--ruta .encabezado h2 { margin-inline: 0; }
  .ruta-logistica { min-height: 0; }
  .ruta-logistica__linea,
  .ruta-logistica__vehiculos { display: none; }
  .pasos--ruta {
    display: grid;
    gap: 0;
    padding-left: 0;
  }
  .pasos--ruta::before,
  .pasos--ruta::after {
    content: "";
    position: absolute;
    top: 27px;
    bottom: 27px;
    left: 27px;
    width: 2px;
    transform-origin: top;
  }
  .pasos--ruta::before { background: rgba(201, 215, 232, .2); }
  .pasos--ruta::after { background: linear-gradient(#8cc9ee, #c6a66a, #e6c98e); }
  .pasos--ruta .paso {
    min-height: 0;
    padding: 3px 0 48px 82px;
    text-align: left;
  }
  .pasos--ruta .paso:last-child { padding-bottom: 4px; }
  .paso__estacion { top: 8px; left: 28px; width: 54px; height: 54px; }
  .paso__fase { top: 0; left: 82px; padding: 0; border: 0; background: transparent; transform: none; }
  .paso__numero { z-index: 0; top: 4px; right: 0; left: auto; font-size: 4.2rem; transform: none; }
  .paso__contenido { margin-inline: 0; padding-top: 62px; }
  .pasos--ruta .paso h3 { min-height: 0; padding-right: 52px; }
  .ruta-logistica__cierre { margin-top: 42px; }
  @media (prefers-reduced-motion: no-preference) {
    html.js.motion-ready .seccion--ruta .pasos--ruta::after { transform: scaleY(0); }
    html.js.motion-ready .seccion--ruta.es-visible .pasos--ruta::after { animation: dibujar-ruta-vertical .9s cubic-bezier(.22, .8, .26, 1) forwards; }
  }
}
@keyframes dibujar-ruta-vertical { to { transform: scaleY(1); } }

/* --- nosotros ----------------------------------------------------------- */

/* El mapa conecta visualmente los tres países sin competir con el texto. */
[data-pantalla="about-shoolin"] {
  background-color: #dce6eb;
  background-image:
    linear-gradient(rgba(242, 246, 248, .04), rgba(224, 233, 238, .14)),
    url("/imagenes/conexiones-1600.webp");
  background-blend-mode: multiply, multiply;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.nosotros { max-width: 1200px; text-align: center; }
.nosotros h2 { max-width: 100%; margin-inline: auto; font-size: clamp(1.95rem, 3.35vw, 2.75rem); font-weight: 730; text-wrap: balance; }
.nosotros h2 span { display: block; }
.nosotros__texto { max-width: 43em; margin: clamp(22px, 2.5vw, 32px) auto; color: var(--texto-suave); font-size: clamp(1rem, 1.4vw, 1.16rem); }
.nosotros__texto p { margin: 0; }
.nosotros__texto p + p { margin-top: .9em; }
.nosotros__texto h3 { margin: 1.8em 0 .7em; color: var(--azul); font-size: clamp(1.05rem, 1.45vw, 1.24rem); font-weight: 760; letter-spacing: .035em; line-height: 1.2; }
/* Sin white-space: nowrap. El ajuste normal ya deja el titulo en una linea
   donde entra -de 769px para arriba- y lo parte en dos donde no, que es lo
   que se busca. Forzarlo desbordaba la pagina 6px a 760px justos, y anulaba
   el text-wrap: balance de arriba. */
.nosotros .nota-previa { text-align: left; }

@media (max-width: 599px) {
  [data-pantalla="about-shoolin"] { background-size: auto 100%; }
}

.lista-check { display: grid; gap: 12px; margin: 26px 0 30px; padding: 0; list-style: none; }
.lista-check li { display: flex; align-items: flex-start; gap: 12px; color: var(--tinta); font-weight: 500; }
.lista-check .icono { width: 22px; height: 22px; margin-top: 2px; color: var(--azul); }

.enlace-flecha { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.enlace-flecha .icono { width: 18px; height: 18px; transition: transform .15s; }
.enlace-flecha:hover .icono { transform: translateX(3px); }


/* --- cotización --------------------------------------------------------- */

.cotizar {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(13, 27, 42, .1);
}

.cotizar__panel {
  position: relative;
  isolation: isolate;
  padding: clamp(28px, 4.5vw, 56px);
  background: var(--marino);
  color: #c9d7e8;
}
.cotizar__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(80% 60% at 100% 0%, rgba(157, 209, 229, .22), transparent 70%);
}
.cotizar__panel h2 { color: #fff; font-size: clamp(1.85rem, 3vw, 2.5rem); font-weight: 730; }

.contacto-lista { display: grid; gap: 16px; margin: 34px 0 0; padding: 0; list-style: none; }
.contacto-lista a { display: flex; align-items: center; gap: 14px; color: #fff; font-weight: 600; text-decoration: none; }
.contacto-lista a:hover .contacto-lista__texto > :last-child { text-decoration: underline; }
.contacto-lista .icono {
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: var(--radio-chico);
  background: rgba(255, 255, 255, .08);
  color: var(--celeste);
}
.contacto-lista__texto { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.35; }
.contacto-lista small { color: #9fb3c8; font-size: .8125rem; font-weight: 500; }

.cotizar__form { padding: clamp(24px, 4.5vw, 56px); background: var(--fondo); }

.formulario__grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.campo--ancho { grid-column: 1 / -1; }

.campo label { display: block; margin-bottom: 6px; color: var(--tinta); font-size: .9rem; font-weight: 600; }
.campo .req { color: #b3261e; }
.campo .opcional { color: var(--texto-suave); font-weight: 400; }

.campo input,
.campo select,
.campo textarea {
  display: block;
  width: 100%;
  padding: .72em .9em;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  background: var(--fondo);
  color: var(--tinta);
  font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.campo textarea { min-height: 116px; resize: vertical; }
.campo select {
  appearance: none;
  padding-right: 2.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85em center;
  background-size: 18px;
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #9fb0c3; }
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 4px rgba(0, 91, 172, .18);
}

.shl-campo-mal input, .shl-campo-mal select, .shl-campo-mal textarea { border-color: #b3261e; }
.shl-error { display: block; margin-top: 5px; color: #b3261e; font-size: .84rem; line-height: 1.4; }
.shl-error:empty { display: none; }

.shl-aviso { display: none; margin-bottom: 20px; padding: 14px 18px; border-radius: var(--radio-chico); font-size: .95rem; }
.shl-aviso.ok { display: block; background: #e6f4ea; color: #0b6b2f; border-left: 4px solid #0b6b2f; }
.shl-aviso.mal { display: block; background: #fdecea; color: #a5150a; border-left: 4px solid #a5150a; }

.shl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consentimiento { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0 24px; color: var(--texto-suave); font-size: .8rem; line-height: 1.55; }
.consentimiento input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--azul); }

.formulario__acciones {
  display: grid;
  grid-template-columns: minmax(280px, .95fr) minmax(180px, 1.05fr);
  align-items: center;
  gap: 14px;
}
.campo--turnstile { min-width: 0; }
.cf-turnstile { width: 100%; min-height: 65px; }
.campo--turnstile .shl-error { margin-top: 3px; }
.campo--turnstile.shl-campo-mal .cf-turnstile { border-radius: 4px; outline: 2px solid #b3261e; outline-offset: 2px; }
.formulario__acciones .boton { min-height: 48px; }

/* En la portada, la cotización completa cabe en un pliegue de escritorio.
   Las páginas interiores conservan el formulario amplio original. */
[data-pantalla="free-quote"] { padding-block: 20px; }
[data-pantalla="free-quote"] > .contenedor { max-width: calc(1080px + 2 * var(--margen)); }
[data-pantalla="free-quote"] .cotizar {
  grid-template-columns: .72fr 1.28fr;
  max-width: 1080px;
  margin-inline: auto;
  border-radius: 14px;
}
[data-pantalla="free-quote"] .cotizar__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
[data-pantalla="free-quote"] .cotizar__panel,
[data-pantalla="free-quote"] .cotizar__form { padding: clamp(20px, 2vw, 28px); }
[data-pantalla="free-quote"] .cotizar__panel h2 { font-size: clamp(1.75rem, 2.5vw, 2.25rem); }
[data-pantalla="free-quote"] .contacto-lista { gap: 10px; margin-top: 20px; }
[data-pantalla="free-quote"] .contacto-lista .icono { width: 36px; height: 36px; padding: 9px; }
[data-pantalla="free-quote"] .formulario__grilla { gap: 10px 12px; }
[data-pantalla="free-quote"] .campo label { margin-bottom: 4px; }
[data-pantalla="free-quote"] .campo__fila { margin-bottom: 4px; }
[data-pantalla="free-quote"] .campo input,
[data-pantalla="free-quote"] .campo select,
[data-pantalla="free-quote"] .campo textarea { padding-block: .5em; }
[data-pantalla="free-quote"] .campo textarea { min-height: 72px; }
[data-pantalla="free-quote"] .consentimiento { margin: 10px 0 12px; font-size: .74rem; line-height: 1.35; }

@media (min-width: 900px) {
  [data-pantalla="free-quote"] .cotizar__panel > p:not(.antetitulo) { font-size: .9rem; line-height: 1.55; }
  [data-pantalla="free-quote"] .contacto-lista a { font-size: .9rem; }
  [data-pantalla="free-quote"] .contacto-lista small { font-size: .74rem; }
  [data-pantalla="free-quote"] .campo label { font-size: .82rem; }
  [data-pantalla="free-quote"] .campo input,
  [data-pantalla="free-quote"] .campo select,
  [data-pantalla="free-quote"] .campo textarea { font-size: .92rem; }
  [data-pantalla="free-quote"] .campo__ayuda { font-size: .76rem; }
}

@media (max-width: 899px) {
  .cotizar,
  [data-pantalla="free-quote"] .cotizar { grid-template-columns: 1fr; }
}
@media (max-width: 699px) { .formulario__acciones { grid-template-columns: 1fr; } }
@media (max-width: 559px) { .formulario__grilla { grid-template-columns: 1fr; } }

/* --- páginas legales ----------------------------------------------------- */

/* Texto corrido y nada más. Una medida angosta porque estas tres páginas se
   leen de arriba a abajo, y a 1200px una línea de texto legal se vuelve
   incómoda de seguir. */
.contenedor--angosto { max-width: calc(760px + 2 * var(--margen)); }

.legal { font-size: 1.02rem; line-height: 1.75; color: var(--texto); }

/* Aviso de revisión legal: se lee antes que el texto y no se confunde con él. */
.legal .legal__revision {
  margin: 0 0 28px;
  padding: 14px 18px;
  border-left: 3px solid var(--naranja);
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  background: var(--fondo-gris);
  font-size: .95rem;
}
.legal .legal__revision strong { color: var(--tinta); }

.legal h2 {
  margin: 44px 0 14px;
  color: var(--tinta);
  font-size: clamp(1.32rem, 2.4vw, 1.6rem);
  line-height: 1.25;
  scroll-margin-top: calc(var(--alto-cabecera) + 16px);
}
.legal > h2:first-child { margin-top: 0; }

.legal p { margin: 0 0 16px; }
.legal strong { color: var(--tinta); }

.legal ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 10px; }
.legal ul li { padding-left: 26px; position: relative; }
.legal ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--naranja);
}

.legal a { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--marino); }

/* Bloque de contacto del final: los mismos tres datos en las tres páginas. */
.legal__contacto { margin-top: 18px; }
.legal__contacto li { display: flex; gap: 12px; align-items: flex-start; padding-left: 0; }
.legal__contacto li::before { content: none; }
.legal__contacto .icono { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 4px; color: var(--azul); }
.legal__contacto a { text-decoration: none; }
.legal__contacto a:hover { text-decoration: underline; }

@media (max-width: 599px) {
  .legal { font-size: .98rem; }
  .legal h2 { margin-top: 34px; }
}

/* --- pie ---------------------------------------------------------------- */

/* El espacio extra inferior sólo existe cuando el botón flotante de WhatsApp
   está disponible. Sin ese canal, el pie termina cerca de su franja legal. */
.pie { padding-top: clamp(38px, 4vw, 52px); padding-bottom: 16px; background: var(--marino-oscuro); color: #9fb3c8; font-size: .95rem; }
/* El botón flotante no necesita reservar una franja de 76px: esa separación
   volvía al cierre de navegación más alto que el contenido que contiene. */
.pie--con-whatsapp { padding-bottom: 28px; }

.pie__grilla { display: grid; grid-template-columns: 1.4fr 1.1fr .8fr 1.2fr; gap: 28px; padding-bottom: 24px; }

.pie__marca img { width: 156px; margin-bottom: 12px; }
.pie__marca p { max-width: 26em; }

.pie__titulo {
  margin-bottom: 10px;
  color: #fff;
  font-family: var(--cuerpo);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.pie ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.pie a { color: #c9d7e8; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }

.pie__contacto li { display: flex; align-items: flex-start; gap: 10px; }
.pie__contacto .icono { width: 18px; height: 18px; margin-top: 3px; color: var(--celeste); }
.pie__contacto small { display: block; color: #7f95ad; font-size: .8rem; }

.pie__legal {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px 24px;
  padding-block: 14px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: .875rem;
}
.pie__legal > p { margin: 0; }
.pie__legal ul { display: flex; flex-wrap: wrap; justify-self: end; gap: 8px 22px; }
.pie__credito { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #7f95ad; font-size: .58rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.pie__credito a { display: inline-flex; padding: 3px 7px; border-radius: 6px; background: #faf8f3; }
.pie__credito a:hover { background: #fff; text-decoration: none; }
.pie__credito img { width: 70px; height: auto; }

@media (max-width: 959px) {
  .pie__grilla { grid-template-columns: 1fr 1fr; }
  .pie__legal { grid-template-columns: 1fr auto; }
  .pie__credito { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
}
@media (max-width: 559px) {
  .pie,
  .pie--con-whatsapp { padding-bottom: 12px; }
  .pie__grilla { grid-template-columns: 1fr; gap: 32px; padding-bottom: 30px; }
  .pie__legal { grid-template-columns: 1fr; justify-items: start; padding-block: 16px; }
  .pie__credito { grid-column: auto; grid-row: auto; justify-self: start; }
  .pie__legal ul { justify-self: start; }
}

/* --- WhatsApp ----------------------------------------------------------- */

.whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(7, 29, 51, .28);
  transition: transform .15s, background-color .15s;
}
.whatsapp:hover { background: #1ebe5d; transform: translateY(-2px); }
.whatsapp__marca { display: block; width: 31px; height: 31px; fill: #fff; }
.whatsapp > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 559px) {
  .whatsapp {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
  }
  .whatsapp__marca { width: 27px; height: 27px; }
}

/* --- páginas de servicio ------------------------------------------------ */

.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.migas { padding-top: clamp(20px, 3vw, 30px); font-size: .875rem; }
.migas ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; color: #9fb3c8; }
.migas li + li::before { content: "/"; margin-right: 6px; color: #5f7a96; }
.migas a { color: #c9d7e8; text-decoration: none; }
.migas a:hover { color: #fff; text-decoration: underline; }
.migas [aria-current] { color: #fff; }

.portada--servicio .portada__grilla {
  grid-template-columns: 1.1fr .9fr;
  padding-block: clamp(28px, 4vw, 56px) clamp(52px, 7vw, 92px);
}
.portada--servicio {
  --imagen-portada-servicios: url("/imagenes/portadaServicios-1600.webp");
  background-color: var(--marino);
  background-image:
    linear-gradient(90deg, rgba(4, 21, 37, .96) 0%, rgba(4, 21, 37, .88) 48%, rgba(4, 21, 37, .72) 100%),
    linear-gradient(rgba(7, 29, 51, .34), rgba(7, 29, 51, .58)),
    var(--imagen-portada-servicios);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.portada--servicio h1 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); }
.portada--servicio .boton--asistente { border-color: #c6a66a; background: #c6a66a; color: #071d33; }
.portada--servicio .boton--asistente:hover { border-color: #e6c98e; background: #e6c98e; box-shadow: 0 8px 22px rgba(198, 166, 106, .2); }

.resumen-servicio {
  padding: 26px 28px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: rgba(255, 255, 255, .06);
  color: #c9d7e8;
}
.resumen-servicio__cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.resumen-servicio__icono { width: 46px; height: 46px; padding: 11px; border-radius: 12px; background: rgba(157, 209, 229, .14); color: var(--celeste); }
.resumen-servicio__titulo { margin: 0; color: #fff; font-family: var(--titulos); font-stretch: 108%; font-size: 1.1rem; font-weight: 700; }
.resumen-servicio dl { display: grid; margin: 0; }
.resumen-servicio dl > div { display: grid; grid-template-columns: 9em 1fr; gap: 4px 16px; padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.resumen-servicio dt { color: #9fb3c8; font-size: .875rem; line-height: 1.5; }
.resumen-servicio dd { margin: 0; color: #fff; font-weight: 500; line-height: 1.45; }

@media (max-width: 899px) { .portada--servicio .portada__grilla { grid-template-columns: 1fr; } }
@media (max-width: 459px) { .resumen-servicio dl > div { grid-template-columns: 1fr; } }

.motivos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.motivo { padding: 26px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); }
.motivo__icono { width: 26px; height: 26px; margin-bottom: 14px; color: var(--azul); }
.motivo h3 { margin-bottom: 8px; font-size: 1.15rem; font-weight: 700; }
.motivo p { font-size: .95rem; }
@media (max-width: 1023px) { .motivos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .motivos { grid-template-columns: 1fr; } }

.dos-columnas { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(32px, 6vw, 88px); }
.dos-columnas .encabezado { margin-bottom: 0; }
@media (min-width: 900px) { .encabezado--pegajoso { position: sticky; top: 110px; } }
@media (max-width: 899px) { .dos-columnas { grid-template-columns: 1fr; } }

.lista-detalle { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.lista-detalle > li { display: flex; align-items: flex-start; gap: 18px; padding: 24px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); }
.lista-detalle__icono { width: 48px; height: 48px; padding: 12px; border-radius: 12px; background: var(--azul-claro); color: var(--azul); }
.lista-detalle h3 { margin-bottom: 6px; font-size: 1.15rem; font-weight: 700; }
.lista-detalle p { font-size: .97rem; }
.lista-detalle .nota-previa { margin-top: 12px; }

.tabla-desplazable { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); }
.comparacion { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .97rem; }
.comparacion th, .comparacion td { padding: 16px 20px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.comparacion tbody tr:last-child th, .comparacion tbody tr:last-child td { border-bottom: 0; }
.comparacion thead th { background: var(--fondo-gris); color: var(--tinta); font-family: var(--titulos); font-stretch: 108%; font-size: 1.05rem; }
.comparacion tbody th { width: 24%; color: var(--texto-suave); font-weight: 600; }
.comparacion td.es-actual { background: var(--azul-claro); color: var(--tinta); font-weight: 500; }
.comparacion thead th.es-actual { background: var(--azul); color: #fff; }
.comparacion__enlace { margin-top: 20px; }

.preguntas { display: grid; gap: 12px; }
.pregunta { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); }
.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  color: var(--tinta);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary:focus-visible { outline-offset: -3px; }
.pregunta__icono { width: 20px; height: 20px; color: var(--azul); transition: transform .15s; }
.pregunta[open] .pregunta__icono { transform: rotate(180deg); }
.pregunta__respuesta { padding: 0 22px 20px; }

.seccion > .contenedor > .buscador:first-child { margin-top: 0; }
.encabezado--otros { margin: clamp(48px, 7vw, 80px) 0 28px; }
.encabezado--otros h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.relacionados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.relacionados > li { display: grid; }
@media (max-width: 899px) { .relacionados { grid-template-columns: 1fr; } }

/* --- asistente para elegir servicio ------------------------------------- */

.portada__ayuda {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  color: #c9d7e8;
  font-size: .95rem;
  text-decoration: none;
}
.portada__ayuda .icono { width: 20px; height: 20px; color: var(--celeste); }
.portada__ayuda strong {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--naranja);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.portada__ayuda:hover strong { color: var(--naranja); }

.buscador {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 32px;
  padding: 24px 28px;
  border-radius: var(--radio);
  background: var(--marino);
  color: #c9d7e8;
}
.buscador__texto { display: flex; align-items: center; gap: 16px; }
.buscador__icono {
  width: 52px;
  height: 52px;
  padding: 13px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  color: var(--celeste);
}
.buscador__titulo { margin: 0 0 2px; color: #fff; font-family: var(--titulos); font-stretch: 108%; font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
.buscador p { margin-bottom: 0; }
.buscador .boton { flex: none; }
@media (max-width: 599px) {
  .buscador { padding: 22px 20px; }
  .buscador__texto { align-items: flex-start; }
  .buscador .boton { width: 100%; }
}

.campo__fila { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 6px; }
.campo__fila label { margin-bottom: 0; }
.campo__ayuda { font-size: .84rem; font-weight: 600; }

.asistente {
  --alto: min(640px, calc(100dvh - 32px));
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  max-height: var(--alto);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: var(--fondo);
  color: var(--texto);
  box-shadow: 0 30px 80px rgba(7, 26, 47, .35);
}
.asistente::backdrop { background: rgba(7, 26, 47, .55); }

.asistente__marco { display: flex; flex-direction: column; max-height: var(--alto); }

.asistente__cabecera { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; background: var(--marino); }
.asistente__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--celeste);
}
.asistente__avatar .icono { width: 22px; height: 22px; }
.asistente__titulo { margin: 0; color: #fff; font-family: var(--titulos); font-stretch: 108%; font-weight: 700; line-height: 1.25; }
.asistente__sub { margin: 0; color: #9fb3c8; font-size: .8rem; line-height: 1.35; }
.asistente__cerrar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: 0;
  border-radius: var(--radio-chico);
  background: transparent;
  color: #c9d7e8;
  cursor: pointer;
}
.asistente__cerrar:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.asistente__cerrar .icono { width: 20px; height: 20px; }

.asistente__cuerpo {
  flex: 1;
  min-height: 260px;
  overflow-y: auto;
  background: var(--fondo-gris);
}

.asistente__log {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px;
}

.burbuja {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: .95rem;
  line-height: 1.5;
  animation: aparecer .22s ease-out;
}
.burbuja p { margin: 0; }
.burbuja--asistente { align-self: flex-start; border: 1px solid var(--linea); border-bottom-left-radius: 4px; background: var(--fondo); color: var(--tinta); }
.burbuja--visitante { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--azul); color: #fff; }

.opciones { display: flex; flex-direction: column; gap: 8px; animation: aparecer .22s ease-out; }
.opcion {
  padding: 11px 14px;
  border: 1.5px solid #b9cfe6;
  border-radius: 12px;
  background: var(--fondo);
  color: var(--azul);
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.opcion:hover { border-color: var(--azul); background: var(--azul-claro); }

/* Selección múltiple: los complementarios no son caminos que se excluyan, así
   que se marcan varios y se sigue con un botón. */
.opciones--multiple { gap: 4px; }
.opcion-multiple {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  background: #fff;
  font-size: .92rem;
  line-height: 1.4;
  cursor: pointer;
}
.opcion-multiple:hover { border-color: var(--azul); background: var(--azul-claro); }
.opcion-multiple input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--azul); flex: 0 0 auto; }
.opcion-multiple:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.opcion-seguir { margin-top: 6px; align-self: flex-start; }

.recomendacion { padding: 18px; border: 1px solid var(--linea); border-radius: 16px; background: var(--fondo); animation: aparecer .22s ease-out; }
.recomendacion__principal { display: flex; align-items: flex-start; gap: 14px; }
.recomendacion__icono { width: 46px; height: 46px; padding: 11px; border-radius: 12px; background: var(--azul-claro); color: var(--azul); flex: 0 0 auto; }
.recomendacion .recomendacion__nombre { margin-bottom: 4px; color: var(--tinta); font-family: var(--titulos); font-stretch: 108%; font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
.recomendacion p { font-size: .93rem; }
.recomendacion .recomendacion__resumen { margin: 0; }

/* La explicación: por qué esto y no otra cosa. Es lo que separa una
   recomendación de una sigla. */
.recomendacion .recomendacion__razon { margin: 12px 0 0; color: var(--texto); }

.recomendacion__extras { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); }
.recomendacion .recomendacion__extras-titulo {
  margin: 0 0 8px;
  color: var(--texto-suave);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.recomendacion__lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.recomendacion__extra { display: flex; align-items: center; gap: 9px; font-size: .92rem; }
.recomendacion__extra-icono { width: 20px; height: 20px; color: var(--azul); flex: 0 0 auto; }
.recomendacion__extra a { color: var(--tinta); text-decoration: none; font-weight: 600; }
.recomendacion__extra a:hover { color: var(--azul); text-decoration: underline; }

.recomendacion .recomendacion__manejo { margin: 12px 0 0; color: var(--tinta); }
.recomendacion .recomendacion__respuestas { margin: 10px 0 0; color: var(--texto-suave); font-size: .82rem; }
.recomendacion .recomendacion__respuestas strong { color: var(--texto-suave); font-weight: 600; }

.recomendacion__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 0; }
.recomendacion__acciones .boton { padding: .75em 1.1em; }
.recomendacion__acciones .enlace-flecha .icono { width: 16px; height: 16px; }
.recomendacion .recomendacion__nota { margin-top: 12px; color: var(--texto-suave); font-size: .8rem; }

/* Un caso a revisar se distingue a simple vista del que ya está resuelto. */
.recomendacion[data-revisar] { border-color: var(--naranja); }

.asistente__form {
  margin: 0 18px 20px;
  padding: 18px;
  border: 1px solid rgba(3, 61, 119, .18);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(7, 29, 51, .08);
  animation: aparecer .24s ease-out;
}
.asistente__form-cabecera { margin-bottom: 16px; }
.asistente__form-cabecera p { margin: 0; font-size: .82rem; line-height: 1.45; }
.asistente__form-cabecera .asistente__form-titulo {
  margin-bottom: 3px;
  color: var(--tinta);
  font-family: var(--titulos);
  font-stretch: 108%;
  font-size: 1.12rem;
  font-weight: 720;
}
.asistente__form .formulario__grilla { gap: 11px 10px; }
.asistente__form .campo label { margin-bottom: 4px; font-size: .78rem; }
.asistente__form .campo input,
.asistente__form .campo textarea { padding: .58em .72em; font-size: .9rem; }
.asistente__form .campo textarea { min-height: 84px; }
.asistente__form .shl-error { font-size: .76rem; }
.asistente__privacidad { margin: 12px 0; color: var(--texto-suave); font-size: .72rem; line-height: 1.45; }
.asistente__privacidad a { color: var(--azul); }
.asistente__form .formulario__acciones { grid-template-columns: 1fr; gap: 10px; }
.asistente__form .formulario__acciones .boton { width: 100%; }
.asistente__form .cf-turnstile { min-height: 65px; }
.asistente__form .shl-aviso { margin-bottom: 14px; padding: 11px 13px; font-size: .82rem; }

.asistente__pie { display: flex; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--linea); background: var(--fondo); }
.asistente__reiniciar {
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--texto-suave);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}
.asistente__reiniciar:hover { background: var(--fondo-gris); color: var(--tinta); }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* En el teléfono, hoja que sube desde abajo. */
@media (max-width: 559px) {
  .asistente {
    --alto: 88dvh;
    width: 100%;
    margin: auto 0 0;
    border-radius: 20px 20px 0 0;
  }
  .asistente__form { margin-inline: 12px; padding: 16px; }
  .asistente__form .formulario__grilla { grid-template-columns: 1fr; }
}

/* --- about y contact ---------------------------------------------------- */

.cita { margin: 28px 0 0; padding: 2px 0 2px 22px; border-left: 3px solid var(--naranja); }
.cita p {
  color: var(--tinta);
  font-family: var(--titulos);
  font-stretch: 108%;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  font-weight: 650;
  line-height: 1.35;
}

.resumen-servicio .contacto-lista { margin-top: 18px; }

.direcciones { display: grid; gap: 18px; margin: 34px 0 0; padding: 0; list-style: none; }
.direcciones li { display: flex; align-items: center; gap: 14px; }
.direcciones .icono {
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: var(--radio-chico);
  background: rgba(255, 255, 255, .08);
  color: var(--celeste);
}
.direcciones__texto { display: flex; flex-direction: column; align-items: flex-start; color: #fff; font-weight: 600; line-height: 1.35; }
.direcciones small { color: #9fb3c8; font-size: .8125rem; font-weight: 500; }
.direcciones__mapa { margin-top: 26px; }

.enlace-flecha--claro { color: #fff; }
.enlace-flecha--claro .icono { color: var(--naranja); }
.enlace-flecha--claro:hover { text-decoration: underline; }

/* --- texto largo (About) ------------------------------------------------ */

.texto-largo > p { max-width: 40em; font-size: 1.08rem; }
.texto-largo > .lista-check { margin: 0 0 28px; }
.texto-largo > .cita { margin: 30px 0; }
.texto-largo > .cita:last-child { margin-bottom: 0; }
.encabezado--frase h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }

/* --- carrier y 404 ------------------------------------------------------ */

.aviso-documentos {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radio-chico);
  background: rgba(255, 255, 255, .06);
  font-size: .95rem;
}
.aviso-documentos .icono { width: 22px; height: 22px; margin-top: 2px; color: var(--naranja); }
.aviso-documentos strong { color: #fff; }

.enlaces-utiles { display: grid; margin: 8px 0 0; padding: 0; list-style: none; }
.enlaces-utiles a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}
.enlaces-utiles li:first-child a { border-top: 0; }
.enlaces-utiles a:hover { text-decoration: underline; }
.enlaces-utiles .icono { width: 20px; height: 20px; color: var(--celeste); }

/* --- sólo en la vista previa -------------------------------------------- */

.pendiente {
  padding: 0 .2em;
  border-radius: 3px;
  background: #fff4c2;
  outline: 1.5px dashed #c99a00;
  outline-offset: 1px;
  color: #5c4400;
}

.pendiente-punto {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 6px;
  border-radius: 50%;
  background: #ffd84d;
  vertical-align: middle;
}

.nota-previa {
  margin: 24px 0 0;
  padding: 10px 14px;
  border: 1.5px dashed #c99a00;
  border-radius: var(--radio-chico);
  background: #fffbea;
  color: #5c4400;
  font-size: .875rem;
}

.etiqueta-previa {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 12px;
  padding: 4px 8px;
  border: 1px dashed #c99a00;
  border-radius: 6px;
  background: rgba(255, 244, 194, .95);
  color: #5c4400;
  font-size: .75rem;
  font-weight: 600;
}

.reservado {
  padding: clamp(28px, 4vw, 44px);
  border: 2px dashed #c99a00;
  border-radius: var(--radio);
  background: #fffbea;
  color: #5c4400;
  text-align: center;
}
.reservado__titulo { margin-bottom: 6px; font-family: var(--titulos); font-stretch: 108%; font-size: 1.2rem; font-weight: 700; }

/* --- dirección visual: portada editorial --------------------------------
   Las primeras tres pantallas comparten un lenguaje de operaciones: numeración,
   reglas de trazado y módulos inspirados en contenedores. */

.portada:not(.portada--servicio) .portada__grilla { grid-template-columns: minmax(0, 680px); }
.portada:not(.portada--servicio) .portada__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* La grilla ya ocupa el pliegue; repetirlo aquí sumaba una segunda altura
     mínima y hacía que los botones quedaran debajo de la vista inicial. */
  min-block-size: 0;
  padding-block: clamp(26px, 4vw, 62px);
}

.portada__indice,
.puntos__indice,
.seccion__indice {
  margin: 0 0 clamp(18px, 2vw, 28px);
  color: var(--naranja-claro);
  font-family: var(--titulos);
  font-size: .78rem;
  font-stretch: 115%;
  font-weight: 760;
  letter-spacing: .16em;
  line-height: 1;
}
.portada__indice span { color: rgba(255, 255, 255, .48); }
.portada:not(.portada--servicio) .portada__texto .antetitulo {
  margin-bottom: 18px;
  color: var(--celeste);
  letter-spacing: .12em;
}
.portada:not(.portada--servicio) h1 {
  max-width: 10.25ch;
  margin-bottom: .38em;
  font-size: clamp(3.55rem, 5.5vw, 6.15rem);
  letter-spacing: -.045em;
  line-height: .9;
}
.portada:not(.portada--servicio) h1 em { color: #fff; }
.portada:not(.portada--servicio) .portada__bajada {
  max-width: 39rem;
  color: #d5e1eb;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
}
.portada:not(.portada--servicio) .portada__acciones { margin-top: 12px; }
.portada:not(.portada--servicio) .portada__acciones .boton { min-height: 54px; }

/* En un escritorio bajo, la cabecera sigue ocupando 76 px. El contenido del
   hero se adelanta sin reducirlo ni ocultar las acciones: ambos CTAs deben
   seguir completos dentro del primer encuadre. */
@media (min-width: 900px) and (max-height: 850px) {
  /* Sólo la portada del Home: en el About subía el "01 / 07" bajo la cabecera. */
  .portada:not(.portada--servicio):not(.portada--about) .portada__texto { top: -60px; }
}

.portada:not(.portada--servicio) .portada__acciones [data-asistente-abrir] {
  border-color: rgba(198, 166, 106, .72);
  background: rgba(7, 29, 51, .42);
  color: #fff;
}
.portada:not(.portada--servicio) .foto--portada img {
  object-position: 70% center;
  filter: saturate(.9) contrast(1.06);
}
.portada:not(.portada--servicio) .foto--portada::before { content: none; }
.portada:not(.portada--servicio) .foto--portada::after {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(4, 21, 37, .94) 0%, rgba(4, 21, 37, .78) 37%, rgba(4, 21, 37, .25) 69%, rgba(4, 21, 37, .1) 100%),
    linear-gradient(0deg, rgba(4, 21, 37, .44), transparent 46%);
}

/* Coverage: la imagen ya contiene los mensajes de los contenedores. Se muestra
   completa, a su proporción original; sólo el bloque editorial izquierdo se
   superpone como HTML. */
.puntos {
  padding-block: 0;
  border-bottom: 0;
  background: linear-gradient(180deg, #72add8 0%, #2c6698 48%, #082a4e 100%);
}
.puntos::before { content: none; }
.puntos.seccion--pantalla { display: block; min-block-size: 0; }
.puntos.seccion--pantalla > .contenedor {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: none;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  display: block;
}
.puntos__encabezado {
  position: absolute;
  z-index: 2;
  inset-block: 0;
  left: max(var(--margen), calc((100% - var(--ancho)) / 2));
  width: min(42%, 36rem);
  margin: 0;
  padding-top: clamp(50px, 5vw, 82px);
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  translate: 0;
}
.puntos__encabezado h2 {
  max-width: 16ch;
  margin-bottom: .5em;
  color: #fffdf7;
  font-size: clamp(2.5rem, 4.3vw, 4.4rem);
  letter-spacing: -.04em;
  line-height: .93;
  text-shadow: 0 2px 16px rgba(2, 15, 32, .74);
}
.puntos__encabezado p:last-child {
  max-width: 28rem;
  color: #fffdf7;
  text-shadow: 0 2px 14px rgba(2, 15, 32, .78);
  font-size: 1.05rem;
  line-height: 1.45;
}
.puntos__indice,
.puntos__encabezado .antetitulo { color: #d5f1ff; text-shadow: 0 2px 12px rgba(2, 15, 32, .72); }
.puntos__containers {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
}
.puntos__containers-imagen { height: 100%; }
.puntos__containers-imagen picture { display: block; height: 100%; }
.puntos__containers-imagen img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* La foto es 1672:941. En monitores muy anchos, mostrarla a todo el ancho
   excede el alto de un pliegue. Se la contiene completa a la izquierda —donde
   vive el texto editorial— y el fondo prolonga sus tonos a la derecha. */
@media (min-width: 768px) {
  .puntos.seccion--pantalla {
    display: grid;
    min-block-size: calc(100svh - var(--alto-cabecera));
    place-items: center start;
  }
  .puntos.seccion--pantalla > .contenedor {
    width: min(100%, calc(177.68svh - 121px));
  }
  .puntos__encabezado {
    left: clamp(48px, 2.5vw, 64px);
  }
}

/* Services: bahías de carga en lugar de tarjetas genéricas. */
@media (min-width: 768px) and (min-aspect-ratio: 2 / 1) {
  .puntos.seccion--pantalla { display: block; min-block-size: 0; }
  .puntos.seccion--pantalla > .contenedor { width: 100%; }
  .puntos__containers { aspect-ratio: 23 / 10; }
  .puntos__containers-imagen img { object-fit: cover; }
  .puntos__encabezado { width: min(38%, 32rem); }
  .puntos__encabezado p:last-child { max-width: 27rem; }
}

.seccion--services {
  position: relative;
  display: block;
  overflow: hidden;
  min-block-size: 0;
  padding-block: 0;
  background-color: #eef3f5;
  background-image: linear-gradient(rgba(3, 61, 119, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(3, 61, 119, .045) 1px, transparent 1px);
  background-size: 42px 42px;
}
.seccion--services__escena {
  position: relative;
  background: #eef3f5;
}
.seccion--services__imagen { width: 100%; }
.seccion--services__imagen img { width: 100%; height: auto; filter: grayscale(1); }
.seccion--services__cabecera {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 0;
}
.seccion--services .encabezado {
  display: flex;
  max-width: min(50%, 31rem);
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 0;
}
.seccion--services .encabezado h2 {
  max-width: 10ch;
  margin-bottom: .5em;
  color: #263b4e;
  font-size: clamp(2.5rem, 4.3vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .93;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .72);
}
.seccion--services .encabezado .seccion__indice { color: #40586b; font-size: .78rem; font-weight: 800; line-height: 1; }
.seccion--services .encabezado .antetitulo { color: #40586b; margin-bottom: 8px; font-size: .8125rem; font-weight: 800; }
.seccion--services .encabezado p:last-child {
  max-width: 28rem;
  color: #263b4e;
  font-size: 1.05rem;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .78);
}
.seccion__indice { color: var(--azul); }
.seccion--services__selector { width: min(50%, 600px); margin-top: clamp(16px, 2svh, 24px); }
.selector-servicios__boton {
  display: inline-flex;
  min-width: min(100%, 390px);
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: .78em 1.35em;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radio-chico);
  background: linear-gradient(135deg, #075395, var(--azul));
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(3, 61, 119, .2);
  transition: transform .15s, box-shadow .15s;
}
.selector-servicios__boton:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(3, 61, 119, .26); }
.selector-servicios__boton .icono { width: 25px; height: 25px; transition: transform .2s; }
.selector-servicios__boton[aria-expanded="true"] .icono { transform: rotate(90deg); }
.selector-servicios__asistente {
  display: inline-flex;
  width: min(100%, 390px);
  min-height: 36px;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
  padding: .45em 1.05em;
  border: 1px solid #b8975c;
  border-radius: var(--radio-chico);
  background: var(--naranja);
  color: #071d33;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(7, 29, 51, .16);
}
.selector-servicios__asistente:hover { border-color: #a58349; background: #d5b77c; }
.selector-servicios__asistente .icono { width: 19px; height: 19px; flex: 0 0 auto; }
.vias-envio {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: clamp(26px, 3svh, 34px) 0 0;
  padding: 0;
  list-style: none;
}
.vias-envio li { position: relative; display: grid; gap: 7px; min-width: 0; padding-bottom: 8px; color: #506679; font-size: .8125rem; font-weight: 600; }
.vias-envio li::after { content: ""; position: absolute; bottom: 0; left: 0; width: 24px; height: 2px; background: #7891a3; }
.vias-envio .icono { width: 34px; height: 34px; color: #3e6078; stroke-width: 1.6; }
@media (min-width: 900px) and (max-width: 1100px) {
  .seccion--services .encabezado p:last-child { line-height: 1.5; }
  .vias-envio li { font-size: .72rem; }
}
@media (min-width: 900px) and (max-width: 950px) {
  .seccion--services__selector { margin-top: 6px; }
  .selector-servicios__boton { min-height: 50px; padding-block: .7em; }
  .selector-servicios__asistente { min-height: 34px; margin-top: 7px; padding-block: .4em; }
  .vias-envio { margin-top: 23px; }
  .vias-envio li { padding-bottom: 4px; }
  .vias-envio .icono { width: 26px; height: 26px; }
}
@media (min-width: 1360px) {
  .seccion--services__cabecera { display: block; }
  .seccion--services .encabezado {
    position: absolute;
    top: 50%;
    left: var(--margen);
    transform: translateY(-50%);
  }
  .seccion--services .encabezado h2 { margin-bottom: .4em; }
  .seccion--services .encabezado p:last-child { width: 36rem; max-width: none; line-height: 1.5; }
  .seccion--services__selector {
    position: absolute;
    bottom: 2px;
    left: var(--margen);
    margin-top: 0;
  }
}
.seccion--services__contenido { position: relative; z-index: 1; padding-block: clamp(64px, 7vw, 92px); }
.carrusel-servicios__cabecera { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.carrusel-servicios__cabecera .antetitulo { margin-bottom: 8px; }
.carrusel-servicios__cabecera h3 { max-width: 18ch; font-size: clamp(1.75rem, 3vw, 2.7rem); line-height: 1; }
.carrusel-servicios__controles { display: flex; gap: 10px; }
.carrusel-servicios__controles button { display: grid; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(3, 61, 119, .24); border-radius: 50%; place-items: center; background: #fff; color: var(--azul); cursor: pointer; }
.carrusel-servicios__controles button:hover { border-color: var(--azul); background: var(--azul); color: #fff; }
.carrusel-servicios__controles button:first-child .icono { transform: rotate(180deg); }
.carrusel-servicios__ventana { overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: thin; scrollbar-color: var(--azul) rgba(3, 61, 119, .1); }
.carrusel-servicios__pista { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, calc((100% - 60px) / 4)); gap: 20px; margin: 0; padding: 4px 4px 22px; list-style: none; }
.carrusel-servicios__pista > li { display: flex; scroll-snap-align: start; }
.carrusel-servicios__pista .servicio { width: 100%; }
.seccion--services .grupo { --grupo-acento: #0a548a; }
.seccion--services .grupo--ocean { --grupo-acento: #147594; }
.seccion--services .grupo--transfer { --grupo-acento: #5a8391; }
.seccion--services .grupo--support { --grupo-acento: #a27b3f; }
.seccion--services .servicio {
  min-height: 222px;
  padding: 18px 20px 16px;
  border: 1px solid rgba(3, 61, 119, .22);
  border-top: 4px solid var(--grupo-acento);
  border-radius: 3px 3px 14px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,248,243,.94)),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(3, 61, 119, .035) 14px 15px);
  box-shadow: 0 14px 30px rgba(7, 29, 51, .07);
}
.seccion--services .servicio::before {
  top: 14px;
  right: 16px;
  width: 42px;
  height: 60px;
  opacity: .9;
  background: repeating-linear-gradient(90deg, transparent 0 7px, color-mix(in srgb, var(--grupo-acento) 22%, transparent) 7px 8px);
}
.seccion--services .servicio__identidad { margin-bottom: 12px; }
.seccion--services .servicio__categoria { color: var(--grupo-acento); font-size: .64rem; }
.seccion--services .servicio__icono { width: 42px; height: 42px; padding: 10px; background: color-mix(in srgb, var(--grupo-acento) 11%, white); color: var(--grupo-acento); }
.seccion--services .servicio__titulo { margin-bottom: 5px; font-size: 1.17rem; }
.seccion--services .servicio p:not(.servicio__categoria) { margin-bottom: 8px; font-size: .88rem; line-height: 1.45; }
.seccion--services .servicio__mas { padding-top: 10px; border-top: 1px solid rgba(3, 61, 119, .13); color: var(--grupo-acento); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }

/* Las pantallas de la portada no terminan en un borde seco. Cada una entrega
   el color a la siguiente mediante una bruma corta y una ruta que se dibuja
   cuando la unión entra en la ventana. Es decorativo: sin JS queda estático. */
[data-pantalla="freight-logistics"],
[data-pantalla="coverage"],
[data-pantalla="services"],
[data-pantalla="how-it-works"],
[data-pantalla="about-shoolin"],
[data-pantalla="free-quote"] { position: relative; isolation: isolate; }

.transicion-pantalla {
  --transicion-acento: rgba(3, 61, 119, .42);
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  display: block;
  height: 24px;
  overflow: hidden;
  pointer-events: none;
}
.transicion-pantalla::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--transicion-acento) 12%, var(--transicion-acento) 88%, transparent 100%);
  transform: scaleX(1);
  transform-origin: left center;
}
.transicion-pantalla::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 82%;
  width: 58px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--transicion-acento), var(--transicion-punto, #faf8f3), var(--transicion-acento), transparent);
  box-shadow: 0 0 10px var(--transicion-halo, rgba(3, 61, 119, .08));
}
.transicion-pantalla--cobertura {
  --transicion-acento: rgba(157, 209, 229, .75);
  --transicion-punto: #eaf4fd;
  --transicion-halo: rgba(157, 209, 229, .15);
  background: linear-gradient(to bottom, rgba(234, 244, 253, 0), rgba(234, 244, 253, .34) 56%, #eaf4fd 100%);
}
.transicion-pantalla--servicios {
  --transicion-acento: rgba(3, 61, 119, .34);
  --transicion-punto: #eef3f5;
  --transicion-halo: rgba(3, 61, 119, .08);
  background: linear-gradient(to bottom, rgba(238, 243, 245, 0), rgba(238, 243, 245, .56) 58%, #eef3f5 100%);
}
.transicion-pantalla--ruta {
  --transicion-acento: rgba(198, 166, 106, .78);
  --transicion-punto: #071d33;
  --transicion-halo: rgba(198, 166, 106, .16);
  background: linear-gradient(to bottom, rgba(7, 29, 51, 0), rgba(7, 29, 51, .68) 62%, #071d33 100%);
}
/* Los iconos de vías de envío viven muy cerca del borde inferior de Services:
   quedan por encima de la bruma para conservar contraste y lectura. */
.seccion--services > .transicion-pantalla--ruta { z-index: 1; }
.transicion-pantalla--about {
  --transicion-acento: rgba(216, 190, 141, .72);
  --transicion-punto: #dce6eb;
  --transicion-halo: rgba(216, 190, 141, .14);
  background: linear-gradient(to bottom, rgba(220, 230, 235, 0), rgba(220, 230, 235, .36) 56%, #dce6eb 100%);
}
.transicion-pantalla--cierre {
  --transicion-acento: rgba(3, 61, 119, .36);
  --transicion-punto: #faf8f3;
  --transicion-halo: rgba(3, 61, 119, .08);
  background: linear-gradient(to bottom, rgba(250, 248, 243, 0), rgba(250, 248, 243, .56) 58%, #faf8f3 100%);
}
.transicion-pantalla--pie {
  --transicion-acento: rgba(198, 166, 106, .72);
  --transicion-punto: #041525;
  --transicion-halo: rgba(198, 166, 106, .14);
  background: linear-gradient(to bottom, rgba(4, 21, 37, 0), rgba(4, 21, 37, .66) 62%, #041525 100%);
}

/* La animación es progresiva: no hay contenido oculto si falla JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  html.js.motion-ready [data-pantalla] [data-revelar] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.8,.26,1); }
  html.js.motion-ready [data-pantalla].entra-desde-arriba [data-revelar] { transform: translateY(-26px); }
  html.js.motion-ready [data-pantalla].es-visible [data-revelar] { opacity: 1; transform: none; }
  html.js.motion-ready [data-pantalla] [data-revelar]:nth-child(2) { transition-delay: .1s; }
  html.js.motion-ready [data-pantalla] [data-revelar]:nth-child(3) { transition-delay: .18s; }
  html.js.motion-ready [data-pantalla="free-quote"] .cotizar__panel,
  html.js.motion-ready [data-pantalla="free-quote"] .cotizar__form { opacity: 0; transform: translateY(24px); transition: opacity .72s ease, transform .72s cubic-bezier(.22, .8, .26, 1); }
  html.js.motion-ready [data-pantalla="free-quote"].es-visible .cotizar__panel,
  html.js.motion-ready [data-pantalla="free-quote"].es-visible .cotizar__form { opacity: 1; transform: none; }
  html.js.motion-ready [data-pantalla="free-quote"].es-visible .cotizar__form { transition-delay: .12s; }
}

@media (max-width: 899px) {
  .portada:not(.portada--servicio) .portada__grilla { grid-template-columns: 1fr; }
  .portada:not(.portada--servicio) .portada__texto { min-block-size: 0; }
  .portada:not(.portada--servicio) h1 { font-size: clamp(3.15rem, 13vw, 4.5rem); }
  .portada__avance { display: none; }
  .puntos { padding-top: clamp(48px, 9vw, 72px); }
  .puntos.seccion--pantalla > .contenedor { display: block; min-block-size: 0; }
  .puntos__encabezado {
    position: relative;
    inset: auto;
    width: auto;
    margin: 0 var(--margen) clamp(30px, 6vw, 48px);
    padding: 0;
    display: block;
    translate: none;
  }
  .puntos__encabezado h2 { max-width: 13ch; font-size: clamp(2.35rem, 10vw, 3.6rem); }
  .puntos__flujo, .puntos__chips { margin-top: 24px; }
  .puntos__chips { justify-content: center; }
  .seccion--services__cabecera {
    position: relative;
    inset: auto;
    padding-block: clamp(56px, 9vw, 76px);
  }
  .seccion--services .encabezado { max-width: none; }
  .seccion--services__selector { width: 100%; margin-top: 24px; }
  .seccion--services .encabezado h2 { max-width: 13ch; font-size: clamp(2.35rem, 10vw, 3.6rem); }
  .carrusel-servicios__pista { grid-auto-columns: minmax(260px, 72vw); }
}

@media (max-width: 599px) {
  .transicion-pantalla { height: 18px; }
  .transicion-pantalla::after { width: 42px; }
  .selector-servicios__boton { width: 100%; min-width: 0; }
  .vias-envio { grid-template-columns: repeat(3, 1fr); }
  .seccion--services__contenido { padding-block: 48px 64px; }
  .carrusel-servicios__cabecera { align-items: center; }
  .carrusel-servicios__cabecera h3 { font-size: 1.65rem; }
  .carrusel-servicios__pista { grid-auto-columns: 84vw; }
}

/* --- About editorial --------------------------------------------------- */

.portada--about {
  /* Mapamundi de conexiones, el mismo del bloque "About Shoolin" del Home:
     acompaña "One world… countless connections" y la historia de las
     fundadoras entre tres países. No habla de cobertura (que es EE.UU.).
     El velo de la izquierda es liviano a propósito: más fuerte tapaba América,
     que es la parte de la historia (EE.UU. y Argentina). */
  --imagen-portada-about: url("/imagenes/conexiones-1600.webp");
  background-color: #f6f4ee;
  background-image:
    linear-gradient(90deg, rgba(250, 248, 243, .42) 0%, rgba(250, 248, 243, .22) 36%, rgba(250, 248, 243, 0) 56%),
    var(--imagen-portada-about);
  background-position: center, 62% center;
  background-size: cover;
  background-repeat: no-repeat;
}
.portada--about::before,
.portada--about::after { content: none; }
/* Portada del About: texto a la izquierda sobre el mapamundi de conexiones
   (fondo de la sección) y "At a glance" como franja con íconos al pie. El
   mapa de EE.UU. dibujado en código se probó el 01/10/2026 y se descartó.
   La grilla de la portada se disuelve (display: contents) para que texto y
   franja sean celdas de la misma grilla. */
.about-hero {
  position: relative;
  display: grid;
  min-block-size: calc(100svh - var(--alto-cabecera));
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "texto" "glance";
  align-content: center;
  row-gap: 32px;
  padding-block: clamp(32px, 5vh, 56px);
}
.portada.portada--about .portada__grilla { display: contents; }
.portada.portada--about .portada__texto {
  grid-area: texto;
  z-index: 2;
  max-width: 40rem;
  min-block-size: 0;
  align-self: center;
  padding-block: 0;
}

.about-glance-wrap { grid-area: glance; z-index: 2; }
.about-glance { padding-top: 22px; border-top: 1px solid rgba(3, 61, 119, .16); }
.about-glance dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; }
.about-glance dl > div { position: relative; min-width: 0; padding: 10px 14px 10px 50px; }
.about-glance dt { margin-bottom: 4px; color: #a7792d; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.about-glance dd { margin: 0; color: var(--azul); font-size: .95rem; font-weight: 600; line-height: 1.4; }
.about-glance__icono { position: absolute; top: 10px; left: 10px; width: 28px; height: 28px; color: #b4873e; }
.about-glance-wrap > .nota-previa { margin-top: 12px; }

@media (min-width: 900px) {
  .about-hero { row-gap: clamp(28px, 6vh, 64px); }
  .about-glance dl { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .about-glance dl > div { padding: 4px 18px 4px 62px; border-left: 1px solid rgba(3, 61, 119, .14); }
  .about-glance dl > div:first-child { padding-left: 44px; border-left: 0; }
  .about-glance__icono { top: 4px; left: 18px; }
  .about-glance dl > div:first-child .about-glance__icono { left: 0; }
}

/* Pantalla baja (notebook con zoom): se esconde el "01 / 07" y se ajustan los
   espacios del texto para que la franja entre en la primera vista, en una
   sola línea. Pedido de Mati, 01/10/2026. */
@media (min-width: 900px) and (max-height: 780px) {
  .about-hero { row-gap: 20px; padding-block: 18px 16px; }
  .portada--about .portada__texto .seccion__indice { display: none; }
  .portada--about .antetitulo { margin-bottom: 10px; }
  .portada.portada--about h1 { margin-bottom: .32em; }
  .portada--about .portada__bajada p { font-size: .95rem; line-height: 1.55; }
  .portada--about .portada__bajada p + p { margin-top: .5em; }
  .portada:not(.portada--servicio).portada--about .portada__acciones { margin-top: 18px; }
  .portada:not(.portada--servicio).portada--about .portada__acciones .boton { min-height: 48px; }
  .about-glance { padding-top: 12px; }
  .about-glance dl > div { padding: 2px 12px 2px 50px; }
  .about-glance dl > div:first-child { padding-left: 36px; }
  .about-glance__icono { top: 3px; left: 14px; width: 24px; height: 24px; }
  .about-glance dt { margin-bottom: 2px; font-size: .62rem; }
  .about-glance dd { font-size: .86rem; line-height: 1.3; }
}

.about-hero .migas { position: relative; z-index: 3; color: var(--texto-suave); }
.about-hero .migas a { color: var(--azul); }
.portada--about .seccion__indice { color: #a7792d; }
.portada--about .antetitulo { color: var(--azul); }
.portada.portada--about h1 {
  max-width: none;
  margin-bottom: .42em;
  color: var(--tinta);
  font-size: clamp(2.25rem, 2.3vw, 2.75rem);
  font-stretch: 94%;
  letter-spacing: -.045em;
  line-height: .94;
}
.portada:not(.portada--servicio).portada--about .portada__bajada { max-width: 38rem; color: #30475b; }
.portada--about h1 span { display: block; }
.portada--about .portada__bajada p { margin: 0; }
.portada--about .portada__bajada p + p { margin-top: .8em; }
/* Con ".portada" adelante: la regla de las portadas no de servicio (botón
   claro sobre la foto oscura del Home) tenía más especificidad y dejaba este
   botón blanco. Acá va el azul de siempre, el mismo de "Get a quote". */
.portada.portada--about .boton--acento { border-color: var(--azul); background: var(--azul); color: #fff; }
.portada.portada--about .boton--acento:hover { border-color: #052f5d; background: #052f5d; box-shadow: 0 8px 22px rgba(3, 61, 119, .26); }
.portada--about .boton--claro { border-color: rgba(3, 61, 119, .42); color: var(--azul); }
.portada--about .boton--claro:hover { border-color: var(--azul); background: rgba(3, 61, 119, .06); }

.about-section {
  position: relative;
  overflow: hidden;
  /* Las secciones editoriales sostienen más texto que la home, pero no deben
     volver a la escala inflada del diseño anterior. */
  padding-block: clamp(52px, 5vw, 72px);
}
.about-care { background: #faf8f3; }
.about-story { background: #e8f0f2; }
.about-editorial {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(48px, 7vw, 104px);
}
.about-editorial > .encabezado {
  display: flex;
  max-width: 29rem;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 0;
}
.about-editorial > .encabezado h2,
.seccion--services-about .encabezado h2 {
  font-size: clamp(2.5rem, 4.3vw, 4.4rem);
  letter-spacing: -.04em;
  line-height: .93;
}
.about-editorial > .encabezado > p:not(.antetitulo):not(.seccion__indice) { max-width: 28rem; font-size: 1.05rem; }
.about-section .seccion__indice,
.seccion--services-about .seccion__indice { margin-bottom: 28px; font-size: .78rem; line-height: 1; }
.about-section .antetitulo,
.seccion--services-about .antetitulo { margin-bottom: 8px; font-size: .8125rem; }
.about-section .texto-largo p { max-width: 38rem; font-size: 1.06rem; line-height: 1.72; }

.about-timeline { position: relative; display: grid; gap: 42px; padding-left: 72px; }
.about-timeline::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 25px;
  width: 2px;
  background: #b4873e;
  transform-origin: top;
}
.about-timeline__item { position: relative; }
.about-timeline__item > div { display: grid; gap: 15px; }
.about-timeline__item p { margin: 0; }
.about-timeline__numero {
  position: absolute;
  top: -4px;
  left: -72px;
  display: grid;
  width: 52px;
  height: 52px;
  border: 2px solid #b4873e;
  border-radius: 50%;
  place-items: center;
  background: var(--fondo);
  color: var(--azul);
  font-family: var(--titulos);
  font-size: .78rem;
  font-weight: 760;
  letter-spacing: .08em;
  box-shadow: 0 8px 20px rgba(7, 29, 51, .1);
}
.about-timeline__item--final .about-timeline__numero { border-color: var(--naranja); background: var(--marino); color: var(--naranja-claro); }
.about-timeline__item--final .about-timeline__numero { border-color: #b4873e; background: var(--fondo); color: #8d682b; }
.about-timeline .cita { margin: 8px 0 0; }

.about-trust {
  background:
    radial-gradient(circle at 8% 18%, rgba(140, 201, 238, .09), transparent 25%),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(135deg, #071d33, #09243c);
  background-size: auto, 52px 52px, 52px 52px, auto;
}
.about-trust .seccion__indice { color: var(--naranja-claro); }
.about-trust .encabezado > p:not(.antetitulo):not(.seccion__indice),
.about-trust__contenido > p { color: #c9d7e8; }
.about-trust { padding-block: clamp(42px, 4vw, 56px); }
.about-trust__manifiesto { max-width: 29rem; margin-top: 24px; }
.about-trust__manifiesto > p { margin: 0; color: #c9d7e8; font-size: .95rem; line-height: 1.48; }
.about-trust__manifiesto > p + p { margin-top: .55em; }
.about-connections {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0 0 38px;
  padding: 0;
  list-style: none;
}
.about-connections::before { content: ""; position: absolute; top: 25px; right: 12%; left: 12%; height: 2px; background: linear-gradient(90deg, var(--celeste), var(--naranja)); }
.about-connections li { position: relative; z-index: 1; }
.about-connections li > span { display: grid; width: 52px; height: 52px; margin-bottom: 16px; border: 2px solid var(--naranja); border-radius: 50%; place-items: center; background: var(--marino); color: var(--naranja-claro); font-family: var(--titulos); font-size: .75rem; font-weight: 760; }
.about-connections p { margin: 0; color: #fff; font-size: .94rem; font-weight: 650; line-height: 1.45; }
.about-trust__manifiesto .about-connections { grid-template-columns: 1fr; gap: 9px; margin: 18px 0 0; }
.about-trust__manifiesto .about-connections::before { content: none; }
.about-trust__manifiesto .about-connections li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.about-trust__manifiesto .about-connections li > span { width: 22px; height: 22px; margin: 0; border-width: 1px; font-size: .58rem; }
.about-trust__manifiesto .about-connections p { padding-top: 1px; font-size: .82rem; font-weight: 650; line-height: 1.35; }
.about-trust .cita { border-color: var(--naranja); }
.about-trust .cita p { color: #fff; }

.about-why { background: #fff; }
.about-why__marca {
  position: absolute;
  right: clamp(24px, 4vw, 80px);
  bottom: clamp(48px, 8vw, 100px);
  width: min(38vw, 480px);
  opacity: .11;
  pointer-events: none;
}
.about-why__marca img { display: block; width: 100%; height: auto; }
.about-why__texto { position: relative; z-index: 1; }
.about-why__texto > p:last-child { margin-top: 30px; padding: 18px 0 18px 24px; border-left: 3px solid var(--naranja); color: var(--tinta); font-family: var(--titulos); font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-stretch: 108%; font-weight: 680; line-height: 1.35; }

.about-growth {
  background: linear-gradient(135deg, #e7f0f3, #faf8f3 68%);
}
.about-growth__texto { padding: clamp(24px, 3vw, 38px); border-left: 3px solid #b4873e; background: rgba(250, 248, 243, .62); }
.about-growth__cierre { margin-top: 32px; }
.about-growth__cierre p { color: var(--tinta); font-size: clamp(1.2rem, 1.7vw, 1.45rem); font-weight: 700; line-height: 1.35; }

@media (prefers-reduced-motion: no-preference) {
  html.js.motion-ready .about-story .about-timeline::before { transform: scaleY(0); }
  html.js.motion-ready .about-story.es-visible .about-timeline::before { animation: dibujar-ruta-vertical .9s .18s cubic-bezier(.22, .8, .26, 1) forwards; }
}

@media (max-width: 1023px) {
  .portada--about { --imagen-portada-about: url("/imagenes/conexiones-960.webp"); }
}

@media (max-width: 599px) {
  .portada--about { --imagen-portada-about: url("/imagenes/conexiones-640.webp"); }
}

@media (max-width: 899px) {
  .about-editorial { grid-template-columns: 1fr; align-items: start; gap: 42px; }
  .about-editorial > .encabezado { max-width: 40rem; }
  .about-editorial > .encabezado h2 { max-width: 14ch; }
  .about-editorial .encabezado--pegajoso { position: static; }
  .about-connections { max-width: 42rem; }
  .about-why__marca { right: 4vw; width: min(58vw, 480px); }
}

@media (max-width: 599px) {
  .about-section { padding-block: 68px; }
  .about-editorial { gap: 34px; }
  .about-editorial > .encabezado h2,
  .seccion--services-about .encabezado h2 { font-size: clamp(2.35rem, 10vw, 3.6rem); }
  .about-section .seccion__indice,
  .seccion--services-about .seccion__indice { margin-bottom: 20px; }
  .about-timeline { gap: 34px; padding-left: 56px; }
  .about-timeline::before { left: 19px; }
  .about-timeline__numero { left: -56px; width: 40px; height: 40px; font-size: .66rem; }
  .about-section .texto-largo p { font-size: 1rem; line-height: 1.68; }
  .about-connections { grid-template-columns: 1fr; gap: 24px; padding-left: 58px; }
  .about-connections::before { top: 20px; right: auto; bottom: 20px; left: 19px; width: 2px; height: auto; }
  .about-connections li > span { position: absolute; top: 0; left: -58px; width: 40px; height: 40px; margin: 0; font-size: .66rem; }
  /* En el manifiesto el numero va en el carril del grid, no absoluto: si sale
     del flujo, el parrafo se auto-coloca en el primer carril -el de 24px- y el
     texto queda a una palabra por renglon. */
  .about-trust__manifiesto .about-connections { padding-left: 0; }
  .about-trust__manifiesto .about-connections li > span { position: static; }
  .about-why__marca { right: -12vw; bottom: 8%; width: min(86vw, 480px); }
  .about-growth__texto { padding: 22px 20px; backdrop-filter: none; }
}

/* --- Full Truckload: primera pagina del barrido visual ---------------- */

/* El rediseño de servicios se activa pagina por pagina. Todas estas reglas
   llevan la clase de FTL para no cambiar las otras siete fichas mientras se
   revisan y aprueban de forma individual. */
.portada--full-truck-load { --servicio-sigla: "FTL"; }
.portada--less-than-truck-load { --servicio-sigla: "LTL"; }
.portada--full-container-load-FCL { --servicio-sigla: "FCL"; }
.portada--less-container-load-LCL { --servicio-sigla: "LCL"; }
.portada--transloading { --servicio-sigla: "TRANS"; }
.portada--airport-pickup { --servicio-sigla: "AIR"; }
.portada--warehouse { --servicio-sigla: "WARE"; }
.portada--customs-clearance { --servicio-sigla: "CUSTOMS"; }
.portada--customs-clearance .resumen-servicio::after { font-size: 5.5rem; }

.portada--servicio-revisada {
  display: grid;
  min-block-size: calc(100svh - var(--alto-cabecera));
  grid-template-rows: auto 1fr;
  background-color: var(--marino);
  background-image:
    radial-gradient(circle at 88% 16%, rgba(157, 209, 229, .16), transparent 27%),
    linear-gradient(rgba(255, 255, 255, .027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 21, 37, .96) 0%, rgba(4, 21, 37, .88) 48%, rgba(4, 21, 37, .72) 100%),
    linear-gradient(rgba(7, 29, 51, .34), rgba(7, 29, 51, .58)),
    var(--imagen-portada-servicios);
  background-position: center;
  background-size: auto, 52px 52px, 52px 52px, cover, cover, cover;
  background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
}
.portada--servicio-revisada::before {
  inset: auto -8% 8% auto;
  width: min(58vw, 820px);
  height: 220px;
  border: 2px solid rgba(198, 166, 106, .26);
  border-color: rgba(198, 166, 106, .3) transparent transparent transparent;
  border-radius: 50%;
  transform: rotate(-7deg);
  background: none;
}
.portada--servicio-revisada::after {
  inset: auto 12% 25% auto;
  width: 10px;
  height: 10px;
  border: 2px solid var(--naranja);
  border-radius: 50%;
  background: var(--marino);
  box-shadow: 0 0 0 8px rgba(198, 166, 106, .09), -35vw 8vw 0 -2px var(--celeste);
}
.portada--servicio-revisada .portada__grilla {
  min-block-size: 0;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .82fr);
  align-self: center;
  padding-block: clamp(32px, 5vw, 72px) clamp(52px, 6vw, 86px);
}
.portada--servicio-revisada .portada__texto { max-width: 680px; }
.portada--servicio-revisada .seccion__indice,
.servicio-pantalla .seccion__indice {
  margin-bottom: 28px;
  color: var(--azul);
  font-family: var(--titulos);
  font-size: .78rem;
  font-weight: 760;
  letter-spacing: .15em;
  line-height: 1;
}
.portada--servicio-revisada .seccion__indice { color: var(--naranja-claro); }
.portada--servicio-revisada .antetitulo,
.servicio-pantalla .antetitulo {
  margin-bottom: 8px;
  font-size: .8125rem;
}
.portada.portada--servicio-revisada h1 {
  max-width: 9.5ch;
  margin-bottom: .42em;
  font-size: clamp(3.25rem, 5.1vw, 4.8rem);
  letter-spacing: -.045em;
  line-height: .92;
}
.portada--servicio-revisada .portada__bajada {
  max-width: 42rem;
  margin-bottom: 28px;
  font-size: 1.05rem;
  line-height: 1.62;
}
.portada--servicio-revisada .resumen-servicio {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  border-color: rgba(198, 166, 106, .34);
  background: rgba(4, 21, 37, .62);
  box-shadow: 0 24px 54px rgba(0, 0, 0, .22);
  backdrop-filter: blur(8px);
}
.portada--servicio-revisada .resumen-servicio::after {
  content: var(--servicio-sigla, "");
  position: absolute;
  right: -10px;
  bottom: -28px;
  color: rgba(255, 255, 255, .035);
  font-family: var(--titulos);
  font-size: 7rem;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: 1;
  pointer-events: none;
}
.portada--servicio-revisada .resumen-servicio__icono {
  background: rgba(198, 166, 106, .12);
  color: var(--naranja-claro);
}
.portada--servicio-revisada .resumen-servicio dl,
.portada--servicio-revisada .resumen-servicio__cabeza { position: relative; z-index: 1; }

/* En ventanas desktop con poco alto (incluido zoom elevado), la portada
   conserva la misma composición sin empujar la botonera fuera del primer
   viewport. El contenido no se oculta: sólo se compactan los espacios. */
@media (min-width: 1000px) and (max-height: 700px) {
  .portada--servicio-revisada .portada__grilla { padding-block: 18px 28px; }
  .portada--servicio-revisada .seccion__indice { margin-bottom: 20px; }
  .portada.portada--servicio-revisada h1 { font-size: clamp(3.25rem, 4.5vw, 4.2rem); }
  .portada--servicio-revisada .portada__bajada {
    margin-bottom: 20px;
    font-size: .95rem;
    line-height: 1.55;
  }
}

@media (min-width: 1000px) and (max-width: 1199px) and (max-height: 700px) {
  .portada--servicio-revisada .resumen-servicio { padding: 20px 22px; }
  .portada--servicio-revisada .resumen-servicio__cabeza { margin-bottom: 6px; }
  .portada--servicio-revisada .resumen-servicio dl > div { grid-template-columns: 7.5em 1fr; padding-block: 9px; }
  .portada--servicio-revisada .resumen-servicio dt { font-size: .8rem; }
  .portada--servicio-revisada .resumen-servicio dd { font-size: .92rem; line-height: 1.35; }
}

.servicio-pantalla {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 8vw, 108px);
}
.servicio-pantalla > .contenedor { min-width: 0; align-self: center; }
.servicio-pantalla .encabezado {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 34rem;
  flex-direction: column;
  align-items: flex-start;
}
.servicio-pantalla .encabezado h2 {
  width: 100%;
  max-width: 13ch;
  font-size: clamp(2.5rem, 4.3vw, 4.4rem);
  letter-spacing: -.04em;
  line-height: .93;
}
.servicio-pantalla .encabezado > p:not(.antetitulo):not(.seccion__indice) {
  max-width: 30rem;
  font-size: 1.05rem;
  line-height: 1.65;
}
.servicio-pantalla .encabezado--pegajoso { position: static; }

/* 02: las cuatro decisiones se leen como una secuencia, no como cajas
   independientes. */
.servicio-pantalla--conviene .encabezado { margin-bottom: clamp(44px, 5vw, 66px); }
.servicio-pantalla--conviene .motivos { position: relative; counter-reset: motivo; gap: 0; }
.servicio-pantalla--conviene .motivos::before {
  content: "";
  position: absolute;
  top: 24px;
  right: 9%;
  left: 9%;
  height: 2px;
  background: linear-gradient(90deg, var(--celeste), var(--azul), var(--naranja));
}
.servicio-pantalla--conviene .motivo {
  position: relative;
  counter-increment: motivo;
  padding: 68px 24px 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.servicio-pantalla--conviene .motivo::before {
  content: counter(motivo, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  width: 50px;
  height: 50px;
  border: 2px solid var(--azul);
  border-radius: 50%;
  place-items: center;
  background: var(--fondo);
  color: var(--azul);
  font-family: var(--titulos);
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .08em;
}
.servicio-pantalla--conviene .motivo__icono { display: none; }
.servicio-pantalla--conviene .motivo h3 { max-width: 15rem; font-size: 1.22rem; }
.servicio-pantalla--conviene .motivo p { max-width: 16rem; color: var(--texto-suave); }

/* Drayage 02/06: los cuatro hitos entran con holgura sin consumir un pliegue
   completo sólo en aire vertical. */
.servicio-pantalla--drayage.servicio-pantalla--conviene {
  min-block-size: min(calc(100svh - var(--alto-cabecera)), 720px);
  padding-block: clamp(56px, 4.5vw, 64px);
}
.servicio-pantalla--drayage.servicio-pantalla--conviene .encabezado {
  margin-bottom: clamp(30px, 3vw, 38px);
}

/* Drayage 04/06: la explicación comparativa es editorial y necesita el ancho
   de la sección, no la columna estrecha de los encabezados de servicio. */
.servicio-pantalla--drayage.servicio-pantalla--comparacion .encabezado {
  max-width: 100%;
}
.servicio-pantalla--drayage.servicio-pantalla--comparacion .encabezado > p:not(.antetitulo):not(.seccion__indice) {
  max-width: 64rem;
}

/* 03: una ruta vertical une los hitos operativos. */
.servicio-pantalla--incluye .dos-columnas { align-items: center; }
.servicio-pantalla--incluye .lista-detalle { position: relative; gap: 10px; padding-left: 68px; }
.servicio-pantalla--incluye .lista-detalle::before {
  content: "";
  position: absolute;
  top: 25px;
  bottom: 25px;
  left: 24px;
  width: 2px;
  background: linear-gradient(var(--celeste), var(--azul), var(--naranja));
}
.servicio-pantalla--incluye .lista-detalle > li {
  position: relative;
  min-height: 86px;
  padding: 18px 20px;
  border-color: rgba(3, 61, 119, .12);
  background: rgba(250, 248, 243, .74);
}
.servicio-pantalla--incluye .lista-detalle__icono {
  position: absolute;
  top: 17px;
  left: -68px;
  z-index: 1;
  border: 2px solid var(--azul);
  background: var(--fondo-gris);
}

/* 04: la comparacion conserva la lectura tabular y jerarquiza la opcion
   elegida con el mismo navy y champagne del resto de la pagina. */
.servicio-pantalla--comparacion .encabezado { margin-bottom: clamp(38px, 4vw, 50px); }
.servicio-pantalla--comparacion .tabla-desplazable {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border-color: rgba(3, 61, 119, .18);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(7, 29, 51, .08);
}
.servicio-pantalla--comparacion .comparacion th,
.servicio-pantalla--comparacion .comparacion td { padding-block: 18px; }
.servicio-pantalla--comparacion .comparacion thead th.es-actual { background: var(--marino); color: var(--naranja-claro); }
.servicio-pantalla--comparacion .comparacion td.es-actual { background: #eef6f8; }

/* 05: un bloque oscuro corta el ritmo sin cambiar la jerarquia tipografica. */
.servicio-pantalla--preguntas {
  background:
    radial-gradient(circle at 92% 12%, rgba(157, 209, 229, .1), transparent 25%),
    linear-gradient(rgba(255, 255, 255, .024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .024) 1px, transparent 1px),
    linear-gradient(135deg, #071d33, #09243c);
  background-size: auto, 52px 52px, 52px 52px, auto;
}
.servicio-pantalla--preguntas .seccion__indice { color: var(--naranja-claro); }
.servicio-pantalla--preguntas .antetitulo { color: var(--celeste); }
.servicio-pantalla--preguntas .encabezado h2 { color: #fff; }
.servicio-pantalla--preguntas .pregunta { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .055); }
.servicio-pantalla--preguntas .pregunta summary { color: #fff; }
.servicio-pantalla--preguntas .pregunta__icono { color: var(--naranja-claro); }
.servicio-pantalla--preguntas .pregunta__respuesta { color: #c9d7e8; }

/* 06: relacionados primero; el asistente queda como cierre contextual. */
.servicio-pantalla--otros .encabezado--otros { margin: 0 0 32px; }
.servicio-pantalla--otros .encabezado--otros h2 { font-size: clamp(2.5rem, 4.3vw, 4.4rem); }
.servicio-pantalla--otros .relacionados { gap: 18px; }
.servicio-pantalla--otros .servicio-asistente { margin-top: 28px; }
.servicio-pantalla--otros .buscador { margin-top: 0; }

@media (max-width: 1023px) {
  .portada--servicio { --imagen-portada-servicios: url("/imagenes/portadaServicios-960.webp"); }
  .portada--servicio-revisada .portada__grilla { grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr); }
  .servicio-pantalla--conviene .motivos { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
  .servicio-pantalla--conviene .motivos::before { content: none; }
  .servicio-pantalla--conviene .motivo { padding-top: 64px; }
}

@media (max-width: 899px) {
  .portada--servicio-revisada { min-block-size: 0; }
  .portada--servicio-revisada .portada__grilla { grid-template-columns: 1fr; padding-block: 38px 68px; }
  .portada--servicio-revisada .portada__texto { max-width: 42rem; }
  .portada.portada--servicio-revisada h1 { max-width: 10ch; }
  .portada--servicio-revisada .resumen-servicio { max-width: 42rem; }
  .servicio-pantalla { min-block-size: 0; }
  .servicio-pantalla .dos-columnas { align-items: start; gap: 42px; }
  .servicio-pantalla .encabezado { max-width: 42rem; }
}

@media (max-width: 599px) {
  .portada--servicio { --imagen-portada-servicios: url("/imagenes/portadaServicios-640.webp"); }
  .portada--servicio-revisada .portada__grilla { gap: 34px; padding-block: 30px 58px; }
  .portada.portada--servicio-revisada h1 { max-width: none; font-size: clamp(2.35rem, 10.6vw, 3.1rem); }
  .portada--servicio-revisada .seccion__indice,
  .servicio-pantalla .seccion__indice { margin-bottom: 20px; }
  .portada--servicio-revisada .portada__bajada { font-size: 1rem; }
  .portada--servicio-revisada .portada__acciones .boton { width: 100%; }
  .portada--servicio-revisada .resumen-servicio { padding: 22px 20px; backdrop-filter: none; }
  .servicio-pantalla { padding-block: 68px; }
  .servicio-pantalla .encabezado { margin-bottom: 34px; }
  .servicio-pantalla .encabezado h2,
  .servicio-pantalla--otros .encabezado--otros h2 { max-width: none; font-size: clamp(2.35rem, 10vw, 3.6rem); }
  .servicio-pantalla--conviene .motivos { grid-template-columns: 1fr; gap: 26px; }
  .servicio-pantalla--conviene .motivo { padding: 0 0 0 58px; }
  .servicio-pantalla--conviene .motivo::before { width: 40px; height: 40px; }
  .servicio-pantalla--incluye .lista-detalle { padding-left: 54px; }
  .servicio-pantalla--incluye .lista-detalle::before { left: 19px; }
  .servicio-pantalla--incluye .lista-detalle > li { padding: 18px; }
  .servicio-pantalla--incluye .lista-detalle__icono { left: -54px; width: 40px; height: 40px; padding: 9px; }
  .servicio-pantalla--comparacion .tabla-desplazable { margin-right: calc(-1 * var(--margen)); border-radius: 14px 0 0 14px; }
  .servicio-pantalla--preguntas .pregunta summary { padding: 18px; }
  .servicio-pantalla--preguntas .pregunta__respuesta { padding: 0 18px 18px; }
  .servicio-pantalla--otros .relacionados { gap: 14px; }
  .servicio-pantalla--otros .buscador__icono { display: none; }
}

/* --- Contact: tres pantallas con la misma grilla editorial ------------- */

.portada--contacto {
  --imagen-portada-contacto: url("/imagenes/contactoPortada-1600.webp");
  display: grid;
  min-block-size: calc(100svh - var(--alto-cabecera));
  grid-template-rows: auto 1fr;
  background-color: var(--marino);
  background-image:
    linear-gradient(90deg, rgba(4, 21, 37, .94) 0%, rgba(4, 21, 37, .82) 40%, rgba(4, 21, 37, .52) 64%, rgba(4, 21, 37, .3) 100%),
    linear-gradient(rgba(255, 255, 255, .027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .027) 1px, transparent 1px),
    var(--imagen-portada-contacto);
  background-position: center;
  background-size: cover, 52px 52px, 52px 52px, cover;
  background-repeat: no-repeat, repeat, repeat, no-repeat;
}
.portada--contacto::before {
  display: none;
}
.portada--contacto::after {
  display: none;
}
.portada--contacto .portada__grilla {
  min-block-size: 0;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .82fr);
  align-self: center;
  padding-block: clamp(32px, 5vw, 72px) clamp(52px, 6vw, 86px);
}
.portada--contacto .portada__texto { max-width: 680px; }
.portada--contacto .seccion__indice,
.contacto-pantalla .seccion__indice {
  margin-bottom: 28px;
  color: var(--azul);
  font-family: var(--titulos);
  font-size: .78rem;
  font-weight: 760;
  letter-spacing: .15em;
  line-height: 1;
}
.portada--contacto .seccion__indice { color: var(--naranja-claro); }
.portada--contacto .antetitulo,
.contacto-pantalla .antetitulo { margin-bottom: 8px; font-size: .8125rem; }
.portada.portada--contacto h1 {
  max-width: 10.5ch;
  margin-bottom: .42em;
  font-size: clamp(3.25rem, 5.1vw, 4.8rem);
  letter-spacing: -.045em;
  line-height: .92;
}
.portada--contacto .portada__bajada {
  max-width: 42rem;
  margin-bottom: 28px;
  font-size: 1.05rem;
  line-height: 1.62;
}
.portada--contacto .portada__bajada-titulo {
  margin: 0 0 12px;
  color: #fff;
  font-family: var(--titulos);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 680;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.portada--contacto .resumen-servicio {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  border-color: rgba(198, 166, 106, .34);
  background: rgba(4, 21, 37, .66);
  box-shadow: 0 24px 54px rgba(0, 0, 0, .22);
  backdrop-filter: blur(8px);
}
.portada--contacto .resumen-servicio::after {
  content: "";
  position: absolute;
  right: -52px;
  bottom: -82px;
  width: 250px;
  height: 176px;
  border: 1px solid rgba(157, 209, 229, .2);
  border-radius: 52% 48% 0 0;
  transform: rotate(-18deg);
  pointer-events: none;
}
.portada--contacto .resumen-servicio::before {
  content: "";
  position: absolute;
  right: 54px;
  bottom: 42px;
  z-index: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--naranja-claro);
  box-shadow: -88px 42px 0 -1px rgba(157, 209, 229, .72), -146px -13px 0 -1px rgba(157, 209, 229, .55);
  pointer-events: none;
}
.portada--contacto .resumen-servicio__cabeza,
.portada--contacto .contacto-lista { position: relative; z-index: 1; }
.portada--contacto .resumen-servicio__icono { background: rgba(198, 166, 106, .12); color: var(--naranja-claro); }

.contacto-pantalla { position: relative; overflow: hidden; padding-block: clamp(52px, 6vw, 82px); }
.contacto-mensaje {
  background:
    radial-gradient(circle at 92% 8%, rgba(157, 209, 229, .2), transparent 28%),
    linear-gradient(rgba(3, 61, 119, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(3, 61, 119, .025) 1px, transparent 1px),
    var(--fondo-gris);
  background-size: auto, 52px 52px, 52px 52px, auto;
}
.contacto-mensaje__grilla {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(48px, 7vw, 104px);
}
.contacto-mensaje__texto { max-width: 29rem; }
.contacto-mensaje__texto h2,
.contacto-cotizacion__texto h2 {
  max-width: 11ch;
  font-size: clamp(2.5rem, 4.3vw, 4.4rem);
  letter-spacing: -.04em;
  line-height: .93;
}
.contacto-mensaje__texto > p:not(.antetitulo):not(.seccion__indice),
.contacto-cotizacion__texto > p:not(.antetitulo):not(.seccion__indice) {
  max-width: 30rem;
  font-size: 1.05rem;
  line-height: 1.65;
}
.contacto-mensaje .direcciones { margin-top: 30px; }
.contacto-mensaje .direcciones li { align-items: center; }
.contacto-mensaje .direcciones .icono { border: 1px solid rgba(3, 61, 119, .12); background: #fff; color: var(--azul); box-shadow: 0 8px 20px rgba(7, 29, 51, .06); }
.contacto-mensaje .direcciones__texto { color: var(--tinta); }
.contacto-mensaje .direcciones small { color: var(--texto-suave); }
.contacto-mensaje__form {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid rgba(3, 61, 119, .13);
  border-radius: 18px;
  background: rgba(250, 248, 243, .96);
  box-shadow: 0 24px 56px rgba(7, 29, 51, .11);
}
.contacto-mensaje__form .formulario__grilla { gap: 12px 14px; }
.contacto-mensaje__form .campo label { margin-bottom: 4px; font-size: .82rem; }
.contacto-mensaje__form .campo input,
.contacto-mensaje__form .campo select,
.contacto-mensaje__form .campo textarea { padding-block: .55em; font-size: .92rem; }
.contacto-mensaje__form .campo textarea { min-height: 88px; }
.contacto-mensaje__form .consentimiento { margin: 14px 0 16px; font-size: .75rem; line-height: 1.42; }

.contacto-cotizacion { background: #041525; }
.contacto-cotizacion__imagen {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.contacto-cotizacion__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.contacto-cotizacion::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: '';
  pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 21, 37, .14), transparent 46%);
}
.contacto-cotizacion__grilla { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); align-items: center; gap: clamp(52px, 8vw, 120px); }
.contacto-cotizacion .seccion__indice { color: var(--naranja-claro); }
.contacto-cotizacion__texto h2 { color: #fff; }
.contacto-cotizacion__texto > p:not(.antetitulo):not(.seccion__indice) { margin-bottom: 30px; color: #c9d7e8; }

@media (min-width: 1000px) and (max-height: 700px) {
  .portada--contacto .portada__grilla { padding-block: 18px 28px; }
  .portada--contacto .seccion__indice,
  .contacto-pantalla .seccion__indice { margin-bottom: 20px; }
  .portada.portada--contacto h1,
  .contacto-mensaje__texto h2,
  .contacto-cotizacion__texto h2 { font-size: clamp(3.05rem, 4.5vw, 4.2rem); }
  .portada--contacto .portada__bajada { margin-bottom: 20px; font-size: .95rem; line-height: 1.55; }
  .contacto-pantalla { padding-block: 24px; }
  .contacto-mensaje__form { padding: 22px 24px; }
  .contacto-mensaje__form .formulario__grilla { gap: 8px 12px; }
  .contacto-mensaje__form .campo input,
  .contacto-mensaje__form .campo textarea { padding-block: .42em; }
  .contacto-mensaje__form .campo textarea { min-height: 66px; }
  .contacto-mensaje__form .consentimiento { margin: 9px 0 10px; font-size: .69rem; line-height: 1.32; }
  .contacto-mensaje .direcciones { gap: 12px; margin-top: 20px; }
  .contacto-mensaje .direcciones .icono { width: 38px; height: 38px; padding: 9px; }
}

@media (max-width: 1023px) {
  .portada--contacto { --imagen-portada-contacto: url("/imagenes/contactoPortada-960.webp"); }
  .portada--contacto .portada__grilla { grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr); }
  .contacto-mensaje__grilla { gap: 48px; }
}

@media (max-width: 899px) {
  .portada--contacto { min-block-size: 0; }
  .portada--contacto .portada__grilla { grid-template-columns: 1fr; padding-block: 38px 68px; }
  .portada--contacto .portada__texto,
  .portada--contacto .resumen-servicio { max-width: 42rem; }
  .portada.portada--contacto h1 { max-width: 10ch; }
  .contacto-pantalla { min-block-size: 0; padding-block: 76px; }
  .contacto-mensaje__grilla,
  .contacto-cotizacion__grilla { grid-template-columns: 1fr; align-items: start; gap: 42px; }
  .contacto-mensaje__texto,
  .contacto-cotizacion__texto { max-width: 42rem; }
}

@media (max-width: 599px) {
  .portada--contacto { --imagen-portada-contacto: url("/imagenes/contactoPortada-640.webp"); background-position: 57% center; }
  .portada--contacto .portada__grilla { gap: 34px; padding-block: 30px 58px; }
  .portada.portada--contacto h1 { max-width: none; font-size: clamp(2.35rem, 10.6vw, 3.1rem); }
  .portada--contacto .seccion__indice,
  .contacto-pantalla .seccion__indice { margin-bottom: 20px; }
  .portada--contacto .portada__bajada { font-size: 1rem; }
  .portada--contacto .portada__acciones .boton { width: 100%; }
  .portada--contacto .resumen-servicio { padding: 22px 20px; backdrop-filter: none; }
  .contacto-pantalla { padding-block: 68px; }
  .contacto-mensaje__texto h2,
  .contacto-cotizacion__texto h2 { max-width: none; font-size: clamp(2.35rem, 10vw, 3.6rem); }
  .contacto-mensaje__form { padding: 22px 20px; }
  .contacto-mensaje__form .formulario__grilla { grid-template-columns: 1fr; }
}

/* --- Carriers: tres pantallas alineadas con servicios y Contact -------- */

.portada--carrier {
  display: grid;
  min-block-size: calc(100svh - var(--alto-cabecera));
  grid-template-rows: auto 1fr;
  background-color: var(--marino);
  background-image:
    radial-gradient(circle at 86% 18%, rgba(157, 209, 229, .16), transparent 27%),
    linear-gradient(rgba(255, 255, 255, .027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 21, 37, .97) 0%, rgba(4, 21, 37, .9) 48%, rgba(4, 21, 37, .7) 100%),
    linear-gradient(rgba(7, 29, 51, .38), rgba(7, 29, 51, .58)),
    var(--imagen-portada-servicios);
  background-position: center;
  background-size: auto, 52px 52px, 52px 52px, cover, cover, cover;
  background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
}
.portada--carrier::before {
  inset: auto -8% 10% auto;
  width: min(58vw, 820px);
  height: 220px;
  border: 2px solid rgba(198, 166, 106, .3);
  border-color: rgba(198, 166, 106, .3) transparent transparent transparent;
  border-radius: 50%;
  transform: rotate(-7deg);
  background: none;
}
.portada--carrier::after {
  inset: auto 12% 27% auto;
  width: 10px;
  height: 10px;
  border: 2px solid var(--naranja);
  border-radius: 50%;
  background: var(--marino);
  box-shadow: 0 0 0 8px rgba(198, 166, 106, .09), -35vw 8vw 0 -2px var(--celeste);
}
.portada--carrier .portada__grilla {
  min-block-size: 0;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .82fr);
  align-self: center;
  padding-block: clamp(32px, 5vw, 72px) clamp(52px, 6vw, 86px);
}
.portada--carrier .portada__texto { max-width: 680px; }
.portada--carrier .seccion__indice,
.carrier-pantalla .seccion__indice {
  margin-bottom: 28px;
  color: var(--azul);
  font-family: var(--titulos);
  font-size: .78rem;
  font-weight: 760;
  letter-spacing: .15em;
  line-height: 1;
}
.portada--carrier .seccion__indice { color: var(--naranja-claro); }
.portada--carrier .antetitulo,
.carrier-pantalla .antetitulo { margin-bottom: 8px; font-size: .8125rem; }
.portada.portada--carrier h1 {
  max-width: 10.5ch;
  margin-bottom: .42em;
  font-size: clamp(3.25rem, 5.1vw, 4.8rem);
  letter-spacing: -.045em;
  line-height: .92;
}
.portada--carrier .portada__bajada {
  max-width: 42rem;
  margin-bottom: 28px;
  font-size: 1.05rem;
  line-height: 1.62;
}
.portada--carrier .resumen-servicio {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  border-color: rgba(198, 166, 106, .34);
  background: rgba(4, 21, 37, .66);
  box-shadow: 0 24px 54px rgba(0, 0, 0, .22);
  backdrop-filter: blur(8px);
}
.portada--carrier .resumen-servicio::after {
  content: "READY";
  position: absolute;
  right: -8px;
  bottom: -23px;
  color: rgba(255, 255, 255, .032);
  font-family: var(--titulos);
  font-size: 5.3rem;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: 1;
  pointer-events: none;
}
.portada--carrier .resumen-servicio__cabeza,
.portada--carrier .resumen-servicio dl { position: relative; z-index: 1; }
.portada--carrier .resumen-servicio__icono { background: rgba(198, 166, 106, .12); color: var(--naranja-claro); }

.carrier-pantalla { position: relative; overflow: hidden; padding-block: clamp(52px, 6vw, 82px); }
.carrier-pasos {
  background:
    radial-gradient(circle at 92% 8%, rgba(198, 166, 106, .17), transparent 28%),
    linear-gradient(rgba(3, 61, 119, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(3, 61, 119, .025) 1px, transparent 1px),
    var(--fondo-gris);
  background-size: auto, 52px 52px, 52px 52px, auto;
}
.carrier-pasos__grilla {
  display: grid;
  grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
  align-items: center;
  gap: clamp(52px, 8vw, 116px);
}
.carrier-pasos .encabezado { max-width: 30rem; margin: 0; }
.carrier-pasos .encabezado h2 {
  max-width: 11ch;
  font-size: clamp(2.5rem, 4.3vw, 4.4rem);
  letter-spacing: -.04em;
  line-height: .93;
}
.carrier-pasos__recorrido { min-width: 0; }
.carrier-ruta {
  position: relative;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0 0 0 72px;
  list-style: none;
  counter-reset: carrier-paso;
}
.carrier-ruta::before {
  content: "";
  position: absolute;
  top: 25px;
  bottom: 25px;
  left: 25px;
  width: 2px;
  background: linear-gradient(var(--celeste), var(--azul), var(--naranja));
}
.carrier-ruta__paso {
  position: relative;
  display: grid;
  min-height: 112px;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid rgba(3, 61, 119, .14);
  border-radius: 16px;
  background: rgba(250, 248, 243, .88);
  box-shadow: 0 14px 34px rgba(7, 29, 51, .07);
  counter-increment: carrier-paso;
}
.carrier-ruta__paso::before {
  content: counter(carrier-paso, decimal-leading-zero);
  position: absolute;
  top: 26px;
  left: -72px;
  z-index: 1;
  display: grid;
  width: 52px;
  height: 52px;
  border: 2px solid var(--naranja);
  border-radius: 50%;
  place-items: center;
  background: var(--marino);
  color: var(--naranja-claro);
  font-family: var(--titulos);
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .08em;
  box-shadow: 0 0 0 8px rgba(198, 166, 106, .08);
}
.carrier-ruta__icono {
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: 12px;
  background: var(--azul-claro);
  color: var(--azul);
}
.carrier-ruta__paso h3 { margin-bottom: 5px; font-size: 1.18rem; font-weight: 720; }
.carrier-ruta__paso p { color: var(--texto-suave); font-size: .94rem; line-height: 1.55; }
.carrier-pasos__recorrido .nota-previa { margin: 18px 0 0 72px; }

.carrier-aplicar {
  background:
    radial-gradient(circle at 92% 8%, rgba(157, 209, 229, .2), transparent 28%),
    linear-gradient(rgba(3, 61, 119, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(3, 61, 119, .025) 1px, transparent 1px),
    var(--fondo-gris);
  background-size: auto, 52px 52px, 52px 52px, auto;
}
.carrier-aplicar .cotizar { border-color: rgba(3, 61, 119, .13); border-radius: 18px; box-shadow: 0 24px 56px rgba(7, 29, 51, .11); }
.carrier-aplicar .cotizar__panel,
.carrier-aplicar .cotizar__form { padding: clamp(24px, 3vw, 36px); }
.carrier-aplicar .cotizar__panel {
  background:
    radial-gradient(circle at 88% 12%, rgba(157, 209, 229, .18), transparent 30%),
    linear-gradient(135deg, #071d33, #09243c);
}
.carrier-aplicar .cotizar__panel h2 { max-width: 11ch; font-size: clamp(2.25rem, 3.6vw, 3.5rem); line-height: .96; }
.carrier-aplicar .aviso-documentos { border-color: rgba(198, 166, 106, .28); background: rgba(198, 166, 106, .07); }
.carrier-aplicar .aviso-documentos .icono { color: var(--naranja-claro); }
.carrier-aplicar .formulario__grilla { gap: 12px 14px; }
.carrier-aplicar .campo label { margin-bottom: 4px; font-size: .82rem; }
.carrier-aplicar .campo input,
.carrier-aplicar .campo textarea { padding-block: .52em; font-size: .92rem; }
.carrier-aplicar .campo textarea { min-height: 78px; }
.carrier-aplicar .consentimiento { margin: 12px 0 14px; font-size: .72rem; line-height: 1.38; }

@media (prefers-reduced-motion: no-preference) {
  html.js.motion-ready .carrier-ruta::before { transform: scaleY(0); transform-origin: top; }
  html.js.motion-ready .carrier-pasos.es-visible .carrier-ruta::before { animation: dibujar-ruta-vertical .9s .18s cubic-bezier(.22, .8, .26, 1) forwards; }
}

@media (min-width: 1000px) and (max-height: 700px) {
  .portada--carrier .portada__grilla { padding-block: 18px 28px; }
  .portada--carrier .seccion__indice,
  .carrier-pantalla .seccion__indice { margin-bottom: 20px; }
  .portada.portada--carrier h1,
  .carrier-pasos .encabezado h2 { font-size: clamp(3.05rem, 4.5vw, 4.2rem); }
  .portada--carrier .portada__bajada { margin-bottom: 20px; font-size: .95rem; line-height: 1.55; }
  .carrier-pantalla { padding-block: 24px; }
  .carrier-ruta { gap: 9px; }
  .carrier-ruta__paso { min-height: 0; padding-block: 14px; }
  .carrier-ruta__paso::before { top: 17px; }
  .carrier-ruta__paso p { font-size: .86rem; line-height: 1.42; }
  .carrier-aplicar .cotizar__panel,
  .carrier-aplicar .cotizar__form { padding: 22px 24px; }
  .carrier-aplicar .aviso-documentos { margin-top: 18px; padding-block: 12px; font-size: .82rem; }
  .carrier-aplicar .formulario__grilla { gap: 8px 12px; }
  .carrier-aplicar .campo input,
  .carrier-aplicar .campo textarea { padding-block: .42em; }
  .carrier-aplicar .campo textarea { min-height: 62px; }
  .carrier-aplicar .consentimiento { margin: 9px 0 10px; font-size: .67rem; line-height: 1.3; }
}

@media (max-width: 1023px) {
  .portada--carrier .portada__grilla { grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr); }
  .carrier-pasos__grilla { gap: 48px; }
}

@media (max-width: 899px) {
  .portada--carrier { min-block-size: 0; }
  .portada--carrier .portada__grilla { grid-template-columns: 1fr; padding-block: 38px 68px; }
  .portada--carrier .portada__texto,
  .portada--carrier .resumen-servicio { max-width: 42rem; }
  .portada.portada--carrier h1 { max-width: 10ch; }
  .carrier-pantalla { min-block-size: 0; padding-block: 76px; }
  .carrier-pasos__grilla { grid-template-columns: 1fr; align-items: start; gap: 42px; }
  .carrier-pasos .encabezado { max-width: 42rem; }
  .carrier-aplicar .cotizar { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
  .portada--carrier { background-image: linear-gradient(90deg, rgba(4, 21, 37, .96), rgba(4, 21, 37, .78)), var(--imagen-portada-servicios); background-size: cover; }
  .portada--carrier .portada__grilla { gap: 34px; padding-block: 30px 58px; }
  .portada.portada--carrier h1 { max-width: none; font-size: clamp(2.35rem, 10.6vw, 3.1rem); }
  .portada--carrier .seccion__indice,
  .carrier-pantalla .seccion__indice { margin-bottom: 20px; }
  .portada--carrier .portada__bajada { font-size: 1rem; }
  .portada--carrier .portada__acciones .boton { width: 100%; }
  .portada--carrier .resumen-servicio { padding: 22px 20px; backdrop-filter: none; }
  .carrier-pantalla { padding-block: 68px; }
  .carrier-pasos .encabezado h2 { max-width: none; font-size: clamp(2.35rem, 10vw, 3.6rem); }
  .carrier-ruta { padding-left: 54px; }
  .carrier-ruta::before { left: 19px; }
  .carrier-ruta__paso { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px 16px; }
  .carrier-ruta__paso::before { left: -54px; width: 40px; height: 40px; box-shadow: 0 0 0 6px rgba(198, 166, 106, .08); }
  .carrier-ruta__icono { width: 40px; height: 40px; padding: 9px; }
  .carrier-ruta__paso h3 { font-size: 1.08rem; }
  .carrier-pasos__recorrido .nota-previa { margin-left: 54px; }
  .carrier-aplicar .cotizar__panel,
  .carrier-aplicar .cotizar__form { padding: 22px 20px; }
  .carrier-aplicar .formulario__grilla { grid-template-columns: 1fr; }
}

/* Home composition pass: 02 uses an editorially treated image and 03 a muted
   sepia freight scene. Both preserve text contrast without visual noise. */
.puntos {
  position: relative;
  overflow: hidden;
  padding-block: clamp(76px, 10svh, 132px);
  background: #e8f0f4;
}
.puntos.seccion--pantalla {
  display: grid;
  min-block-size: calc(100svh - var(--alto-cabecera));
  align-items: center;
}
.puntos__imagen {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}
.puntos__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 53%;
  filter: saturate(.58) brightness(1.08) contrast(.82);
}
.puntos::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(248, 250, 249, .94) 0%, rgba(248, 250, 249, .86) 40%, rgba(235, 243, 246, .62) 66%, rgba(235, 243, 246, .42) 100%),
    linear-gradient(180deg, rgba(244, 238, 225, .18), rgba(222, 235, 241, .18));
}
.puntos.seccion--pantalla > .contenedor {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  min-block-size: 0;
  margin-inline: auto;
  padding-inline: var(--margen);
}
.puntos.seccion--pantalla > .puntos__contenido {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
  grid-template-rows: none;
  min-block-size: 0;
  align-items: center;
  gap: clamp(42px, 9vw, 156px);
}
.puntos__encabezado {
  position: relative;
  inset: auto;
  left: auto;
  width: min(100%, 46rem);
  margin: 0;
  padding: 0;
  display: block;
}
.puntos__encabezado h2 {
  color: var(--tinta);
  text-shadow: none;
}
.puntos__encabezado p:last-child {
  color: var(--texto-suave);
  text-shadow: none;
}
.puntos__indice,
.puntos__encabezado .antetitulo {
  color: var(--azul);
  text-shadow: none;
}
.puntos__placa {
  position: relative;
  justify-self: end;
  width: 100%;
  padding: clamp(22px, 2vw, 28px) clamp(20px, 2.2vw, 30px) clamp(22px, 2vw, 28px) clamp(28px, 3vw, 42px);
  border-left: 2px solid rgba(180, 141, 74, .86);
  border-top: 1px solid rgba(3, 61, 119, .14);
  border-bottom: 1px solid rgba(3, 61, 119, .14);
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(250, 250, 248, .92), rgba(244, 248, 248, .78));
}
.puntos__placa::before {
  content: none;
}
.puntos__placa-bloque + .puntos__placa-bloque {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(3, 61, 119, .22);
}
.puntos__placa-bloque > p {
  margin: 0 0 8px;
  color: #8d682b;
  font-family: var(--titulos);
  font-size: .68rem;
  font-weight: 780;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.puntos__placa-bloque > strong {
  display: block;
  color: var(--tinta);
  font-family: var(--titulos);
  font-size: clamp(1.04rem, 1.35vw, 1.24rem);
  font-weight: 700;
  line-height: 1.25;
}
.puntos__servicios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.puntos__servicios li {
  position: relative;
  display: block;
  padding-left: 12px;
  color: #29495f;
  font-size: .76rem;
  font-weight: 620;
  line-height: 1.35;
}
.puntos__servicios li::before {
  content: "";
  position: absolute;
  top: .58em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b48d4a;
}
@media (prefers-reduced-motion: no-preference) {
  html.js.motion-ready .puntos__placa { opacity: 0; transform: translateX(28px); }
  html.js.motion-ready .puntos.es-visible .puntos__placa { animation: presentar-placa-cobertura .58s .14s cubic-bezier(.22, .8, .26, 1) forwards; }
  html.js.motion-ready .puntos__placa-bloque { opacity: 0; transform: translateY(10px); }
  html.js.motion-ready .puntos.es-visible .puntos__placa-bloque { animation: revelar-bloque-cobertura .38s cubic-bezier(.22, .8, .26, 1) forwards; }
  html.js.motion-ready .puntos.es-visible .puntos__placa-bloque--cobertura { animation-delay: .32s; }
  html.js.motion-ready .puntos.es-visible .puntos__placa-bloque--capacidades { animation-delay: .42s; }
  html.js.motion-ready .puntos.es-visible .puntos__placa-bloque--coordinacion { animation-delay: .52s; }
}
@keyframes presentar-placa-cobertura { to { opacity: 1; transform: none; } }
@keyframes revelar-bloque-cobertura { to { opacity: 1; transform: none; } }

.seccion--services__escena {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-block-size: calc(100svh - var(--alto-cabecera));
  overflow: hidden;
  background: #e9e0d2;
}
.seccion--services__imagen {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: auto;
}
.seccion--services__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.58) brightness(1.06) contrast(.86);
}
.seccion--services__escena::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(249, 246, 237, .94) 0%, rgba(249, 246, 237, .80) 39%, rgba(245, 238, 222, .44) 68%, rgba(245, 238, 222, .32) 100%),
    linear-gradient(180deg, rgba(255, 251, 241, .08), rgba(157, 122, 66, .08));
}
.seccion--services-about .seccion--services__escena::before {
  background:
    linear-gradient(0deg, rgba(249, 246, 237, .82) 0%, rgba(249, 246, 237, .52) 21%, rgba(249, 246, 237, 0) 42%),
    linear-gradient(90deg, rgba(249, 246, 237, .94) 0%, rgba(249, 246, 237, .80) 39%, rgba(239, 246, 247, .26) 68%, rgba(229, 240, 243, .13) 100%),
    radial-gradient(circle at 86% 15%, rgba(3, 61, 119, .18), transparent 34%),
    linear-gradient(180deg, rgba(255, 251, 241, .08), rgba(157, 122, 66, .08));
}
.seccion--services-about .seccion--services__imagen img {
  object-position: center top;
  filter: saturate(.5) brightness(1.08) contrast(.72);
}
.seccion--services__cabecera {
  position: relative;
  z-index: 2;
  inset: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
  min-block-size: 0;
  align-items: center;
  gap: clamp(36px, 7vw, 112px);
  padding-block: clamp(54px, 7svh, 82px) 28px;
}
.seccion--services .encabezado {
  position: relative;
  top: auto;
  left: auto;
  max-width: 34rem;
  transform: none;
}
.seccion--services__selector {
  position: relative;
  bottom: auto;
  left: auto;
  align-self: center;
  justify-self: end;
  width: min(100%, 360px);
  margin: 0;
}
.seccion--services__selector .selector-servicios__boton,
.seccion--services__selector .selector-servicios__asistente { width: 100%; }
.seccion--services-about .seccion--services__selector {
  transform: translateY(clamp(56px, 7svh, 88px));
}
.seccion--services__vias {
  position: relative;
  top: -2px;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--margen);
  padding-bottom: clamp(28px, 3svh, 42px);
}
.seccion--services__vias .vias-envio {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 30px);
  margin: 0;
}
.seccion--services__vias .vias-envio li {
  align-items: center;
  justify-items: center;
  padding: 0 0 9px;
  color: #29495f;
  font-size: .75rem;
  text-align: center;
}
.seccion--services__vias .vias-envio li::after {
  right: 0;
  left: 0;
  width: auto;
  background: rgba(180, 141, 74, .72);
}
.seccion--services__vias .vias-envio .icono { color: #0d507f; }

@media (max-width: 767px) {
  .puntos { padding-block: 72px; }
  .puntos.seccion--pantalla { display: block; min-block-size: 0; }
  .puntos.seccion--pantalla > .contenedor { padding-inline: var(--margen); }
  .puntos.seccion--pantalla > .puntos__contenido { grid-template-columns: 1fr; gap: 28px; }
  .puntos__placa { justify-self: stretch; }
  .seccion--services__escena { display: block; min-block-size: 0; }
  .seccion--services__cabecera {
    grid-template-columns: 1fr;
    min-block-size: 0;
    padding-block: 72px;
  }
  .seccion--services__vias { padding-bottom: 32px; }
  .seccion--services__vias .vias-envio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}