/* ==========================================================================
   VLT Freight · estilos
   Corporativo, limpio y luminoso. Contenido al 95 % en escritorio y 90 % en
   celular y tableta. Botones redondeados tipo píldora. Perfil de movimiento: sólido.
   ========================================================================== */

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

/* ---------- Tokens de marca (muestreados del logo) ---------- */
:root {
  --marino: #01172d;
  --marino-2: #0b2545;
  --marino-3: #133461;
  --azul: #0061e9;
  --azul-oscuro: #0042d8;
  --azul-cielo: #008dfc;
  --azul-brillo: #39a6ff;
  --azul-tinte: #e9f2ff;
  --gris-fondo: #f4f6fa;
  --gris-fondo-2: #eaeef5;
  --borde: #e2e7ef;
  --borde-fuerte: #c9d3e1;
  --texto: #0b1a2c;
  --suave: #4a5a70;
  --error: #c0262d;
  --exito: #0a8a5a;
  --degradado: linear-gradient(120deg, #008dfc 0%, #0061e9 48%, #0042d8 100%);
  --degradado-oscuro: linear-gradient(160deg, #0b2545 0%, #01172d 60%);

  --color-fondo: #fff;
  --color-fondo-alt: var(--gris-fondo);
  --color-texto: var(--texto);
  --color-suave: var(--suave);
  --color-marca: var(--azul);
  --color-marca-oscuro: var(--azul-oscuro);
  --color-sobre-marca: #fff;
  --color-menu-fondo: var(--marino);
  --color-borde: var(--borde);

  --fuente: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ancho-titulos: 110%;
  --alto-encabezado: 64px;
  --alto-barra: 66px;
  --radio: 18px;
  --radio-grande: 26px;
  --sombra: 0 14px 40px rgb(1 23 45 / 0.10);
  --sombra-suave: 0 4px 16px rgb(1 23 45 / 0.06);
  --sombra-fuerte: 0 24px 60px rgb(1 23 45 / 0.18);
  --espacio-seccion: clamp(72px, 8vw, 128px);

  --mov-dur: 0.6s;
  --mov-curva: cubic-bezier(0.22, 1, 0.36, 1);
  --mov-dist: 24px;
  --mov-escalon: 80ms;

  --g1: #39a6ff;
  --g2: #a7d8ff;
  --g3: #8a96ff;
  --g4: #4fdcc0;

  interpolate-size: allow-keywords;
}
@media (min-width: 1260px) { :root { --alto-encabezado: 80px; } }

[data-perfil="solido"] { --mov-dur: 0.55s; --mov-curva: cubic-bezier(0.2, 0.8, 0.2, 1); --mov-dist: 28px; --mov-escalon: 60ms; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 400 1.0625rem/1.65 var(--fuente); color: var(--texto); background: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0 0 0.5em; font-family: var(--fuente); font-stretch: var(--ancho-titulos); font-weight: 720; line-height: 1.06; letter-spacing: -0.022em; text-wrap: balance; overflow-wrap: break-word; color: inherit; }
h1 { font-size: clamp(2.375rem, 3.6vw + 1.1rem, 4.875rem); font-weight: 760; line-height: 1.02; }
h2 { font-size: clamp(1.875rem, 2.2vw + 1rem, 3.25rem); }
h3 { font-size: clamp(1.1875rem, 0.5vw + 1rem, 1.375rem); line-height: 1.22; font-weight: 680; font-stretch: 104%; letter-spacing: -0.01em; }
/* Palabra en degradado. Cuando el título entra palabra por palabra (data-dividir), el texto vive en cajas .palabra
   (inline-block) y WebKit —Safari y todos los navegadores del iPhone— no recorta el fondo del padre al texto de esas
   cajas: la palabra quedaba transparente. Por eso, con JS, el degradado va en cada .palabra y no en el <em>. */
h1 em, h2 em { --degradado-texto: var(--degradado); font-style: normal; background: var(--degradado-texto); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.js [data-dividir] em { background: none; -webkit-text-fill-color: currentColor; color: inherit; }
.js [data-dividir] em .palabra { background: var(--degradado-texto); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--azul); text-underline-offset: 0.18em; }
strong { font-weight: 650; }
:focus-visible { outline: 3px solid var(--azul-cielo); outline-offset: 3px; border-radius: 6px; }
[id] { scroll-margin-top: calc(var(--alto-encabezado) + 20px); }
input, select, textarea, button { font: inherit; }
input, select, textarea { font-size: 16px; }
::selection { background: #cfe3ff; color: var(--marino); }
.saltar { position: absolute; left: 5%; top: -100px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--marino); color: #fff; font-weight: 600; }
.saltar:focus { top: 12px; }
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Contenedor: 90 % en celular y tableta, 95 % en escritorio (sin tope) ---------- */
.contenedor { width: 90%; margin-inline: auto; }
@media (min-width: 1024px) { .contenedor { width: 95%; } }
.seccion { padding-block: var(--espacio-seccion); position: relative; }
.seccion--alt { background: var(--gris-fondo); }
.seccion--oscuro { background: var(--degradado-oscuro); color: #fff; overflow: hidden; isolation: isolate; }
.seccion--oscuro::before { content: ""; position: absolute; z-index: -1; inset: -20% -10% auto auto; width: min(70%, 900px); aspect-ratio: 1; background: radial-gradient(circle, rgb(0 141 252 / 0.28), transparent 62%); pointer-events: none; }
.seccion--oscuro::after { content: ""; position: absolute; z-index: -1; inset: auto auto -30% -15%; width: min(60%, 760px); aspect-ratio: 1; background: radial-gradient(circle, rgb(0 66 216 / 0.30), transparent 65%); pointer-events: none; }
.seccion--marca { padding-block: clamp(64px, 7vw, 112px); background: var(--degradado); color: #fff; overflow: hidden; isolation: isolate; }
.texto-largo { max-width: 68ch; }
.centrado { margin-inline: auto; }

/* ---------- Frases: antetítulo, título y bajada ---------- */
.titulo-seccion { max-width: 54rem; margin-bottom: clamp(36px, 4.2vw, 64px); }
.titulo-seccion--centro { margin-inline: auto; text-align: center; }
.titulo-seccion h2 { margin-bottom: 0.4em; }
.antetitulo { display: inline-flex; align-items: center; gap: 0.6em; margin: 0 0 1.1rem; font-size: 0.8125rem; font-weight: 700; font-stretch: 105%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--azul); }
.antetitulo .icono { width: 1.25em; height: 1.25em; }
.bajada { max-width: 62ch; margin-bottom: 0; font-size: clamp(1.0625rem, 0.4vw + 0.98rem, 1.3125rem); line-height: 1.55; color: var(--suave); }
.titulo-seccion--centro .bajada { margin-inline: auto; }
.seccion--oscuro .antetitulo, .seccion--marca .antetitulo { color: #8fd0ff; }
.seccion--marca .antetitulo { color: #fff; opacity: 0.9; }
.seccion--oscuro .bajada, .seccion--marca .bajada { color: rgb(255 255 255 / 0.82); }
.seccion--oscuro h2 em { --degradado-texto: linear-gradient(120deg, #8fd0ff, #39a6ff); }
.seccion--marca h2 em, .js .seccion--marca h2[data-dividir] em .palabra { background: none; color: #fff; -webkit-text-fill-color: #fff; text-decoration: underline 0.08em; text-underline-offset: 0.14em; }

/* Frase que rota en la portada */
.js [data-rotar] { display: inline-grid; }
.js [data-rotar] > span { grid-area: 1 / 1; opacity: 0; translate: 0 0.35em; transition: opacity 0.35s ease, translate 0.5s var(--mov-curva); }
.js [data-rotar] > span.activa { opacity: 1; translate: none; }

/* ---------- Íconos ---------- */
.icono { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -0.2em; stroke-width: 1.9; }

/* ---------- Botones (píldora) ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 52px; padding: 13px 26px;
  border: 2px solid transparent; border-radius: 999px; background: var(--azul); color: #fff;
  font-weight: 650; font-size: 1rem; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: translate 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}
.boton:hover { background: var(--azul-oscuro); translate: 0 -2px; box-shadow: 0 10px 24px rgb(0 66 216 / 0.28); }
.boton:active { translate: 0 0; }
.boton .icono { width: 1.15em; height: 1.15em; transition: translate 0.2s ease; }
.boton:hover .icono--flecha { translate: 4px 0; }
.boton--secundario { background: transparent; color: var(--marino); border-color: var(--borde-fuerte); }
.boton--secundario:hover { background: var(--marino); border-color: var(--marino); color: #fff; box-shadow: var(--sombra-suave); }
.boton--chico { min-height: 46px; padding: 9px 18px; font-size: 0.9375rem; }
.boton--grande { min-height: 58px; padding: 15px 32px; font-size: 1.0625rem; }
.boton--ancho { width: 100%; }
.boton--contorno { background: transparent; color: var(--marino); border-color: var(--borde-fuerte); }
.boton--contorno:hover { background: var(--gris-fondo); color: var(--marino); box-shadow: none; }
.boton--claro { color: #fff; border-color: rgb(255 255 255 / 0.4); }
.boton--claro:hover { background: #fff; color: var(--marino); border-color: #fff; }
.portada .boton--secundario, .seccion--oscuro .boton--secundario, .seccion--marca .boton--secundario { color: #fff; border-color: rgb(255 255 255 / 0.55); }
.portada .boton--secundario:hover, .seccion--oscuro .boton--secundario:hover, .seccion--marca .boton--secundario:hover { background: #fff; color: var(--marino); border-color: #fff; }
.seccion--marca .boton:not(.boton--secundario) { background: #fff; color: var(--azul-oscuro); }
.seccion--marca .boton:not(.boton--secundario):hover { background: var(--marino); color: #fff; box-shadow: 0 12px 28px rgb(1 23 45 / 0.35); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.acciones--centro { justify-content: center; margin-top: clamp(32px, 4vw, 56px); }
.acciones--compactas { margin-top: 20px; }
@media (max-width: 599px) { .acciones .boton { flex: 1 1 100%; } .boton { white-space: normal; } }

.enlace-flecha { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; margin-top: auto; font-weight: 650; text-decoration: none; color: var(--azul); background: none; border: 0; padding: 0; cursor: pointer; }
.enlace-flecha .icono { transition: translate 0.2s ease; }
.enlace-flecha:hover .icono { translate: 4px 0; }

.insignia { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--gris-fondo-2); color: var(--suave); font-size: 0.75rem; font-weight: 650; letter-spacing: 0.02em; white-space: nowrap; }
.insignia--oscura { background: rgb(255 255 255 / 0.1); color: rgb(255 255 255 / 0.75); }

/* Elementos inhábiles pero visibles (Iniciar sesión, Seguimiento, Oportunidades) */
.es-inactivo { position: relative; opacity: 0.6; cursor: not-allowed; }
.es-inactivo:hover { translate: none; box-shadow: none; background: transparent; }
[data-tooltip]::after {
  content: attr(data-tooltip); position: absolute; left: 50%; top: calc(100% + 10px); translate: -50% -4px; padding: 6px 12px; border-radius: 8px;
  background: var(--marino); color: #fff; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, translate 0.2s ease;
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; translate: -50% 0; }

/* ---------- Encabezado ---------- */
.encabezado { position: sticky; top: 0; z-index: 50; transition: box-shadow 0.25s ease; }
.encabezado::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(255 255 255 / 0.9); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.25s ease; }
.encabezado.con-scroll { box-shadow: 0 8px 30px rgb(1 23 45 / 0.08); }
.encabezado.con-scroll::before, .encabezado.mega-abierto::before { border-bottom-color: var(--borde); }
.encabezado__barra { height: var(--alto-encabezado); display: flex; align-items: center; gap: 16px; }
.marca { display: flex; align-items: center; flex: none; min-height: 44px; min-width: 44px; margin-right: auto; }
.marca img { height: 40px; width: auto; }
@media (min-width: 1260px) { .marca { margin-right: 0; } .marca img { height: 46px; } }

/* ---------- Menú de escritorio (≥ 1260 px) ---------- */
.menu__lista { margin: 0; padding: 0; list-style: none; }
.menu__lista .icono { width: 1.1em; height: 1.1em; }
@media (min-width: 1260px) {
  .menu-boton, .encabezado__cotizar, .menu__extra, .menu__lista > li > a > .icono:first-child, .menu__disparador > .icono:first-child, .menu__flecha { display: none; }
  .menu { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 24px; margin-left: clamp(20px, 2.6vw, 48px); }
  .menu__lista { display: flex; align-items: center; gap: clamp(2px, 0.5vw, 8px); }
  .menu__item--desplegable { position: relative; }
  .menu__enlace, .menu__disparador {
    position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 999px;
    background: transparent; color: var(--marino); font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease;
  }
  .menu__enlace:hover, .menu__disparador:hover { background: var(--gris-fondo); }
  .menu__disparador[aria-expanded="true"] { background: var(--azul-tinte); color: var(--azul); }
  .menu__enlace[aria-current="page"], .menu__disparador--actual { color: var(--azul); }
  .menu__enlace[aria-current="page"]::after, .menu__disparador--actual::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--azul); }
  .menu__chevron { width: 1em; height: 1em; transition: rotate 0.25s var(--mov-curva); }
  .menu__disparador[aria-expanded="true"] .menu__chevron { rotate: 180deg; }

  .menu__acciones { display: flex; align-items: center; gap: 10px; }
  /* entre 1260 y 1439 px el español no cabe con el aire completo: se compacta un poco */
  @media (max-width: 1439px) {
    .menu { margin-left: 20px; gap: 14px; }
    .menu__enlace, .menu__disparador { padding-inline: 11px; }
    .menu__acciones { gap: 8px; }
    .menu__acciones .boton--chico { padding-inline: 14px; }
    .menu__enlace[aria-current="page"]::after, .menu__disparador--actual::after { left: 11px; right: 11px; }
  }

  /* Megamenú: categorías a la izquierda, enlaces de la categoría activa a la derecha */
  .mega {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 49;
    background: linear-gradient(90deg, var(--gris-fondo) calc(2.5% + 300px), #fff calc(2.5% + 300px));
    border-top: 1px solid var(--borde); box-shadow: 0 30px 60px rgb(1 23 45 / 0.14);
    opacity: 0; visibility: hidden; translate: 0 -8px; transition: opacity 0.2s ease, translate 0.25s var(--mov-curva), visibility 0s linear 0.25s;
  }
  .menu__disparador[aria-expanded="true"] + .mega { opacity: 1; visibility: visible; translate: none; transition: opacity 0.2s ease, translate 0.3s var(--mov-curva), visibility 0s; }
  .mega__marco { width: 95%; margin-inline: auto; display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; min-height: 340px; }
  .mega__lateral { padding: 32px 28px 32px 0; }
  .mega__todo { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 12px 14px; margin-bottom: 10px; border-bottom: 1px solid var(--borde-fuerte); color: var(--azul); font-weight: 700; text-decoration: none; }
  .mega__todo .icono { transition: translate 0.2s ease; }
  .mega__todo:hover .icono { translate: 4px 0; }
  .mega__categorias { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
  .mega__categoria { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--marino); font-weight: 600; text-align: left; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
  .mega__categoria:hover { background: var(--gris-fondo-2); }
  .mega__categoria[aria-current="true"] { background: #fff; color: var(--azul); box-shadow: var(--sombra-suave); }
  .mega__paneles { padding: 32px 0 32px clamp(28px, 3vw, 56px); }
  .mega__panel { display: none; }
  .mega__panel--activo { display: block; animation: aparecer-panel 0.3s var(--mov-curva); }
  @keyframes aparecer-panel { from { opacity: 0; translate: 8px 0; } }
  .mega__titulo { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--borde); color: var(--azul); font-weight: 700; }
  .mega__enlaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
  .mega__enlaces a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 12px; border-radius: 14px; color: var(--marino); text-decoration: none; transition: background-color 0.2s ease; }
  .mega__enlaces a:hover, .mega__enlaces a[aria-current="page"] { background: var(--gris-fondo); }
  .mega__icono { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--azul-tinte); color: var(--azul); transition: background-color 0.2s ease, color 0.2s ease; }
  .mega__enlaces a:hover .mega__icono { background: var(--azul); color: #fff; }
  .mega__textos { display: grid; gap: 2px; }
  .mega__textos strong { font-weight: 650; line-height: 1.25; }
  .mega__textos small { color: var(--suave); font-size: 0.875rem; line-height: 1.35; }
  .mega__promo { position: relative; display: block; margin: 28px 0; overflow: hidden; border-radius: var(--radio); color: #fff; text-decoration: none; isolation: isolate; }
  .mega__promo-img, .mega__promo .imagen-pendiente { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--mov-curva); }
  .mega__promo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(1 23 45 / 0.05) 20%, rgb(1 23 45 / 0.88)); }
  .mega__promo:hover .mega__promo-img { scale: 1.05; }
  .mega__promo-texto { position: absolute; inset: auto 0 0 0; display: grid; gap: 6px; padding: 22px; }
  .mega__promo-texto strong { font-size: 1.1875rem; font-stretch: 106%; line-height: 1.2; }
  .mega__promo-texto span { display: inline-flex; align-items: center; gap: 6px; color: #8fd0ff; font-weight: 650; font-size: 0.9375rem; }

  /* Desplegable sencillo (Nosotros) */
  .desplegable {
    position: absolute; left: 50%; top: calc(100% + 14px); z-index: 49; min-width: 270px; padding: 8px;
    border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; box-shadow: var(--sombra-fuerte);
    opacity: 0; visibility: hidden; translate: -50% -6px; transition: opacity 0.2s ease, translate 0.25s var(--mov-curva), visibility 0s linear 0.25s;
  }
  .desplegable::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; } /* puente para el mouse */
  .menu__disparador[aria-expanded="true"] + .desplegable { opacity: 1; visibility: visible; translate: -50% 0; transition: opacity 0.2s ease, translate 0.3s var(--mov-curva), visibility 0s; }
  .desplegable__lista { margin: 0; padding: 0; list-style: none; }
  .desplegable__lista a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; border-radius: 12px; color: var(--marino); font-weight: 600; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; }
  .desplegable__lista a .icono { color: var(--azul); }
  .desplegable__lista a:hover, .desplegable__lista a[aria-current="page"] { background: var(--gris-fondo); color: var(--azul); }
}

/* Selector de idioma */
.idioma { display: inline-flex; padding: 2px; border: 1px solid var(--borde); border-radius: 999px; background: #fff; }
.idioma a { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 999px; color: var(--suave); font-size: 0.875rem; font-weight: 700; text-decoration: none; letter-spacing: 0.04em; transition: background-color 0.2s ease, color 0.2s ease; }
.idioma a:hover { color: var(--marino); }
.idioma a[aria-current="true"] { background: var(--marino); color: #fff; }

/* Velo detrás del megamenú abierto */
.velo { position: fixed; inset: 0; z-index: 40; background: rgb(1 23 45 / 0.28); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
.velo.visible { opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0s; }

/* ---------- Menú en celular y tableta (< 1260 px): cortina que se abre en círculo ---------- */
.menu-boton { display: none; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border: 1px solid var(--borde); border-radius: 50%; background: #fff; color: var(--marino); cursor: pointer; }
.menu-boton span, .menu-boton span::before, .menu-boton span::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; position: relative; transition: transform 0.35s var(--mov-curva), background-color 0.2s ease, width 0.3s ease; }
.menu-boton span::before, .menu-boton span::after { content: ""; position: absolute; left: 0; }
.menu-boton span::before { top: -6px; }
.menu-boton span::after { top: 6px; width: 14px; }
.menu-boton:hover span::after { width: 20px; }
.menu-abierto .menu-boton { background: var(--marino); color: #fff; border-color: var(--marino); }
.menu-abierto .menu-boton span { background-color: transparent; }
.menu-abierto .menu-boton span::before { transform: translateY(6px) rotate(45deg); }
.menu-abierto .menu-boton span::after { width: 20px; transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1259px) {
  .menu-boton { display: grid; }
  .encabezado__cotizar { display: inline-flex; padding-inline: 16px; }
  .menu {
    position: fixed; inset: var(--alto-encabezado) 0 0 0; z-index: 60;
    display: flex; flex-direction: column; gap: 28px;
    padding: 12px 5% calc(32px + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    background:
      radial-gradient(120% 60% at 100% 0%, rgb(0 141 252 / 0.22), transparent 60%),
      radial-gradient(90% 50% at 0% 100%, rgb(0 66 216 / 0.28), transparent 60%),
      var(--marino);
    color: #fff;
    clip-path: circle(0 at calc(95% - 24px) 0); visibility: hidden;
    transition: clip-path 0.4s cubic-bezier(0.7, 0, 0.84, 0), visibility 0s linear 0.4s;
  }
  .menu-abierto .menu { clip-path: circle(160% at calc(95% - 24px) 0); visibility: visible; transition: clip-path 0.55s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
  html.menu-abierto { overflow: hidden; }
  .menu-abierto .encabezado::before { background: #fff; }

  .menu__lista { display: flex; flex-direction: column; }
  .menu__item { border-bottom: 1px solid rgb(255 255 255 / 0.1); }
  .menu__enlace, .menu__disparador {
    display: flex; align-items: center; gap: 16px; width: 100%; min-height: 66px; padding: 8px 0; border: 0; background: none;
    color: #fff; font-size: clamp(1.375rem, 5.6vw, 1.875rem); font-weight: 700; font-stretch: 108%; letter-spacing: -0.015em; text-align: left; text-decoration: none; cursor: pointer;
  }
  .menu__enlace > .icono:first-child, .menu__disparador > .icono:first-child { width: 0.85em; height: 0.85em; color: var(--azul-brillo); }
  .menu__flecha, .menu__chevron { margin-left: auto; width: 0.75em; height: 0.75em; opacity: 0.55; transition: rotate 0.3s var(--mov-curva), translate 0.25s ease, opacity 0.2s; }
  .menu__enlace:hover .menu__flecha { translate: 4px 0; opacity: 1; }
  .menu__enlace[aria-current="page"], .menu__disparador--actual { color: #8fd0ff; }
  .menu__disparador[aria-expanded="true"] .menu__chevron { rotate: 180deg; opacity: 1; }

  /* acordeón: el panel crece de 0 a su alto (grid 0fr → 1fr) */
  .mega, .desplegable { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.4s var(--mov-curva), visibility 0s linear 0.4s; }
  .menu__disparador[aria-expanded="true"] + .mega, .menu__disparador[aria-expanded="true"] + .desplegable { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.45s var(--mov-curva), visibility 0s; }
  .mega__marco, .desplegable__lista { min-height: 0; overflow: hidden; }
  .mega__marco { padding-left: calc(0.85em + 16px); }
  .mega__lateral { padding-bottom: 4px; }
  .mega__categorias, .mega__promo { display: none; }
  .mega__todo { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-bottom: 4px; color: #8fd0ff; font-weight: 650; text-decoration: none; }
  .mega__panel { display: block; padding-bottom: 8px; }
  .mega__titulo { margin: 8px 0 2px; color: rgb(255 255 255 / 0.5); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
  .mega__enlaces, .desplegable__lista { margin: 0 0 6px; padding: 0; list-style: none; }
  .mega__enlaces a, .desplegable__lista a { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 0; color: #fff; text-decoration: none; }
  .mega__enlaces a[aria-current="page"], .desplegable__lista a[aria-current="page"] { color: #8fd0ff; }
  .mega__icono { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: rgb(255 255 255 / 0.08); color: var(--azul-brillo); }
  .desplegable__lista a .icono { width: 18px; height: 18px; margin: 0 10px; color: var(--azul-brillo); }
  .mega__textos { display: grid; }
  .mega__textos strong { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
  .mega__textos small { color: rgb(255 255 255 / 0.6); font-size: 0.875rem; line-height: 1.35; }
  .desplegable__lista { padding-left: calc(0.85em + 6px); }

  .menu__acciones { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
  .menu__cotizar { grid-column: 1 / -1; min-height: 56px; font-size: 1.0625rem; background: var(--degradado); }
  .menu__acciones .boton--contorno { color: #fff; border-color: rgb(255 255 255 / 0.3); justify-content: center; }
  .menu__acciones .idioma { background: transparent; border-color: rgb(255 255 255 / 0.25); }
  .menu__acciones .idioma a { color: rgb(255 255 255 / 0.7); }
  .menu__acciones .idioma a[aria-current="true"] { background: #fff; color: var(--marino); }
  .menu__extra { display: grid; gap: 14px; margin-top: auto; padding-top: 8px; }
  .menu__extra-lema { margin: 0; color: rgb(255 255 255 / 0.45); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }
  .menu__rapidos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
  .menu__rapidos .boton { width: 100%; white-space: normal; }
  [data-tooltip]::after { display: none; }

  /* entrada escalonada (main.js pone --i) */
  .menu__item, .menu__acciones, .menu__extra { opacity: 0; translate: 0 16px; transition: opacity 0.2s ease, translate 0.2s ease; }
  .menu-abierto :is(.menu__item, .menu__acciones, .menu__extra) { opacity: 1; translate: none; transition: opacity 0.45s ease, translate 0.6s var(--mov-curva); transition-delay: calc(120ms + var(--i, 0) * 55ms); }
}
@media (max-width: 400px) { .encabezado__cotizar .icono { display: none; } .marca img { height: 34px; } }

/* ---------- Barra de acciones (celular y tableta) ---------- */
.barra-acciones { display: none; }
@media (max-width: 1023px) {
  .barra-acciones { display: block; position: fixed; inset: auto 0 0 0; z-index: 45; padding-bottom: env(safe-area-inset-bottom); background: rgb(255 255 255 / 0.97); border-top: 1px solid var(--borde); box-shadow: 0 -10px 30px rgb(1 23 45 / 0.08); }
  .barra-acciones .contenedor { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; height: var(--alto-barra); align-items: center; }
  .barra-acciones a, .barra-acciones button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 0 4px; border: 0; border-radius: 16px; background: none; color: var(--marino); font-size: 0.8125rem; font-weight: 650; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, scale 0.15s ease; }
  .barra-acciones a:active, .barra-acciones button:active { scale: 0.96; }
  .barra-acciones .principal { flex-direction: row; gap: 8px; background: var(--degradado); color: #fff; font-size: 0.9375rem; box-shadow: 0 8px 20px rgb(0 97 233 / 0.3); }
  .barra-acciones .icono { width: 22px; height: 22px; color: var(--azul); }
  .barra-acciones .principal .icono { color: #fff; width: 20px; height: 20px; }
  body { padding-bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom)); }
}

/* ---------- Portada (hero) ---------- */
.portada { position: relative; display: flex; align-items: flex-end; min-height: clamp(520px, 72vh, 720px); padding-block: clamp(56px, 7vw, 112px); color: #fff; isolation: isolate; overflow: hidden; background: var(--marino); }
.portada--inicio { min-height: clamp(600px, 88vh, 900px); align-items: center; padding-bottom: clamp(112px, 12vw, 176px); }
.portada__fondo { position: absolute; inset: 0; z-index: -2; }
.portada__fondo picture { display: block; width: 100%; height: 100%; }
.portada__fondo img, .portada__fondo .imagen-pendiente { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; animation: entrada-imagen 1.6s var(--mov-curva) both; }
/* video de fondo: visible desde el inicio con la misma foto como póster (iPhone no reproduce solo un video invisible) */
.portada__video { position: absolute; inset: 0; }
.portada__video video { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.portada__pausa { position: absolute; z-index: 3; right: 2.5%; bottom: calc(clamp(56px, 6vw, 88px) + 20px); display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgb(255 255 255 / 0.35); border-radius: 50%; background: rgb(1 23 45 / 0.45); color: #fff; cursor: pointer; transition: background-color 0.2s ease; }
.portada__pausa[hidden] { display: none; }
.portada__pausa:hover { background: rgb(1 23 45 / 0.75); }
.portada__pausa .icono { width: 18px; height: 18px; }
.portada__pausa .icono-play, .portada__pausa.pausado .icono-pausa { display: none; }
.portada__pausa.pausado .icono-play { display: block; }
@media (max-width: 1023px) { .portada__pausa { top: 16px; bottom: auto; right: 5%; } } /* en celular, arriba sobre el cielo: abajo están los botones */
.portada::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(1 23 45 / 0.92) 0%, rgb(1 23 45 / 0.78) 34%, rgb(1 23 45 / 0.25) 68%, rgb(1 23 45 / 0.05) 100%), linear-gradient(0deg, rgb(1 23 45 / 0.55), transparent 45%); }
.portada__contenido { position: relative; }
.portada__contenido > * { max-width: 46rem; }
.portada h1 { max-width: 20ch; margin-bottom: 0.32em; font-size: clamp(2.25rem, 2.9vw + 1.05rem, 4.5rem); }
.portada--inicio h1 { max-width: 20ch; font-size: clamp(2.625rem, 3.9vw + 1rem, 5.75rem); }
.portada .antetitulo { color: #8fd0ff; }
.portada .bajada { color: rgb(255 255 255 / 0.86); font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.4375rem); }
.portada .bajada strong { color: #fff; font-weight: 650; }
.sellos { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 32px 0 0; padding: 0; list-style: none; }
.sellos li { display: inline-flex; align-items: center; gap: 0.55em; color: rgb(255 255 255 / 0.9); font-weight: 600; font-size: 0.9375rem; }
.sellos .icono { color: var(--azul-brillo); }
@media (max-width: 767px) {
  .portada { min-height: auto; padding-top: 120px; }
  .portada--inicio { min-height: min(92svh, 760px); padding-top: 160px; padding-bottom: 112px; align-items: flex-end; }
  .portada::before { background: linear-gradient(180deg, rgb(1 23 45 / 0.35) 0%, rgb(1 23 45 / 0.72) 42%, rgb(1 23 45 / 0.95) 100%); }
  .portada__fondo img { object-position: 72% 50%; }
  .portada__fondo picture img, .portada__video video { object-position: 50% 50%; } /* foto y video verticales: ya vienen encuadrados */
}
.portada--404 { min-height: clamp(480px, 70vh, 680px); }

/* Migas */
.migas { margin-bottom: 12px; }
.migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.migas li { display: inline-flex; align-items: center; gap: 6px; color: rgb(255 255 255 / 0.7); }
.migas a { display: inline-flex; align-items: center; min-height: 46px; min-width: 46px; color: rgb(255 255 255 / 0.85); text-decoration: none; }
.migas a:hover { color: #fff; text-decoration: underline; }
.migas .icono { width: 14px; height: 14px; opacity: 0.6; }
.migas [aria-current] { color: #fff; font-weight: 600; }

/* ---------- Franja de datos destacados (se monta sobre la portada) ---------- */
.franja { position: relative; z-index: 2; margin-top: calc(-1 * clamp(56px, 6vw, 88px)); }
.franja__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: 0; padding: 0; list-style: none; border-radius: var(--radio-grande); background: var(--degradado); box-shadow: 0 24px 60px rgb(0 66 216 / 0.28); overflow: hidden; color: #fff; }
.franja__item { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.4vw, 36px); }
.franja__item + .franja__item::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: rgb(255 255 255 / 0.22); }
.franja__icono { grid-row: 1 / 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgb(255 255 255 / 0.14); }
.franja__icono .icono { width: 26px; height: 26px; }
.franja__item strong { font-size: clamp(1.5rem, 1.4vw + 1rem, 2.25rem); font-weight: 760; font-stretch: 112%; line-height: 1.05; letter-spacing: -0.02em; }
.franja__item span:last-child { color: rgb(255 255 255 / 0.85); font-size: 0.9375rem; line-height: 1.35; }
.franja__item strong { white-space: nowrap; }
.franja__item--largo strong { font-size: clamp(1.25rem, 0.8vw + 0.95rem, 1.875rem); }
/* la mitad de abajo de la franja toma el fondo de la sección que sigue */
.franja { --monta: clamp(56px, 6vw, 88px); }
.franja:has(+ .seccion--oscuro) { background: linear-gradient(180deg, transparent var(--monta), #0a2242 var(--monta)); }
.franja:has(+ .seccion--alt) { background: linear-gradient(180deg, transparent var(--monta), var(--gris-fondo) var(--monta)); }
.portada:has(+ .franja) { padding-bottom: clamp(120px, 12vw, 184px); }
@media (max-width: 719px) {
  /* en celular, 2 × 2: ícono arriba, cifra y texto debajo */
  .franja__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .franja__item { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 4px; align-content: start; padding: 20px 16px 22px 18px; }
  .franja__icono { grid-row: auto; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 12px; }
  .franja__icono .icono { width: 21px; height: 21px; }
  .franja__item strong { font-size: 1.5rem; }
  .franja__item span:last-child { font-size: 0.875rem; }
  .franja__item + .franja__item::before { display: none; }
  .franja__item:nth-child(odd) { box-shadow: inset -1px 0 rgb(255 255 255 / 0.18); }
  .franja__item:nth-child(n + 3) { border-top: 1px solid rgb(255 255 255 / 0.18); }
  .franja__item:last-child:nth-child(odd) { grid-column: 1 / -1; box-shadow: none; }
}

/* ---------- Cinta de frases ---------- */
.cinta { overflow: hidden; padding-block: clamp(28px, 4vw, 56px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cinta__pista { display: flex; align-items: center; gap: 2.5rem; width: max-content; margin: 0; padding: 0; list-style: none; will-change: translate; }
.cinta__pista li { display: inline-flex; align-items: center; gap: 2.5rem; font-size: clamp(1.75rem, 3.6vw, 3.75rem); font-weight: 760; font-stretch: 115%; letter-spacing: -0.02em; white-space: nowrap; color: var(--marino); }
.cinta__pista li:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--marino-3); }
.cinta__pista li::after { content: ""; width: 0.22em; height: 0.62em; background: var(--degradado); transform: skewX(-22deg); border-radius: 2px; }

/* ---------- Rejillas ---------- */
.rejilla { display: grid; gap: clamp(16px, 1.8vw, 28px); grid-template-columns: 1fr; }
/* la rejilla usa medias columnas (cada tarjeta ocupa 2) para poder centrar la última fila incompleta */
@media (min-width: 640px) {
  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rejilla--2 > *, .rejilla--3 > *, .rejilla--4 > * { grid-column: span 2; }
  .rejilla--2 > :last-child:nth-child(odd), .rejilla--3 > :last-child:nth-child(odd), .rejilla--4 > :last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
@media (min-width: 1024px) {
  .rejilla--3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rejilla--3 > :last-child:nth-child(odd) { grid-column: span 2; }
  .rejilla--3 > :nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
  .rejilla--3 > :last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
}
@media (min-width: 1180px) {
  .rejilla--4 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .rejilla--4 > :last-child:nth-child(odd) { grid-column: span 2; }
  .rejilla--4 > :nth-last-child(3):nth-child(4n+1) { grid-column: 2 / span 2; }
  .rejilla--4 > :nth-last-child(2):nth-child(4n+1) { grid-column: 3 / span 2; }
  .rejilla--4 > :last-child:nth-child(4n+1) { grid-column: 4 / span 2; }
}
.dos-columnas { display: grid; gap: clamp(36px, 5vw, 96px); align-items: center; }
@media (min-width: 1024px) { .dos-columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Beneficios ---------- */
.beneficio { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(26px, 2.4vw, 38px); border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; transition: translate 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.beneficio:hover { translate: 0 -4px; box-shadow: var(--sombra); border-color: transparent; }
.beneficio h3 { margin: 10px 0 0; }
.beneficio p { margin: 0; color: var(--suave); }
.beneficio__icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--azul-tinte); color: var(--azul); transition: background 0.3s ease, color 0.3s ease; }
.beneficio__icono .icono { width: 28px; height: 28px; }
.beneficio:hover .beneficio__icono { background: var(--degradado); color: #fff; }
.seccion--oscuro .beneficio { background: rgb(255 255 255 / 0.04); border-color: rgb(255 255 255 / 0.1); }
.seccion--oscuro .beneficio p { color: rgb(255 255 255 / 0.75); }

/* ---------- Tarjetas con foto ---------- */
.tarjeta {
  --relleno: clamp(22px, 2vw, 32px);
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--borde); border-radius: var(--radio); background: #fff;
  transition: translate 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.tarjeta:hover { translate: 0 -5px; box-shadow: var(--sombra); border-color: transparent; }
.tarjeta__imagen { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--gris-fondo-2); }
.tarjeta__imagen img, .tarjeta__imagen .imagen-pendiente { width: 100%; height: 100%; object-fit: cover; transition: scale 0.7s var(--mov-curva); }
.tarjeta:hover .tarjeta__imagen img { scale: 1.06; }
.tarjeta__etiqueta { position: absolute; left: 16px; top: 16px; padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / 0.94); color: var(--marino); font-size: 0.75rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: var(--sombra-suave); }
.tarjeta__etiqueta--suelta { position: static; align-self: flex-start; background: var(--azul-tinte); color: var(--azul); box-shadow: none; }
.tarjeta__cuerpo { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: var(--relleno); }
.tarjeta__imagen + .tarjeta__cuerpo { padding-top: calc(var(--relleno) + 8px); }
.tarjeta__icono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--azul-tinte); color: var(--azul); }
.tarjeta__imagen + .tarjeta__cuerpo .tarjeta__icono { position: absolute; margin-top: calc(-1 * var(--relleno) - 34px); width: 52px; height: 52px; background: var(--degradado); color: #fff; box-shadow: 0 10px 22px rgb(0 97 233 / 0.32); border: 3px solid #fff; }
.tarjeta__icono .icono { width: 26px; height: 26px; }
.tarjeta h3 { margin: 4px 0 0; }
.tarjeta p { margin: 0; color: var(--suave); }
.tarjeta__enlace { display: inline-flex; align-items: center; gap: 0.4em; margin-top: auto; padding-top: 8px; min-height: 44px; border: 0; background: none; color: var(--azul); font-weight: 650; text-decoration: none; cursor: pointer; }
.tarjeta__enlace::before { content: ""; position: absolute; inset: 0; } /* toda la tarjeta se puede tocar */
.tarjeta__enlace .icono { transition: translate 0.2s ease; }
.tarjeta:hover .tarjeta__enlace .icono { translate: 4px 0; }
.tarjeta .insignia { align-self: flex-start; }
.tarjeta--icono:hover .tarjeta__icono { background: var(--degradado); color: #fff; }
.tarjeta:target { border-color: var(--azul); box-shadow: 0 0 0 4px rgb(0 97 233 / 0.15), var(--sombra); }

/* ---------- Mapa animado ---------- */
/* celular: título → mapa → leyenda · escritorio: título y leyenda a la izquierda, mapa a la derecha */
.mapa-seccion { display: grid; grid-template-areas: "titulo" "mapa" "leyenda"; column-gap: clamp(40px, 5vw, 88px); row-gap: 28px; }
.mapa-seccion__titulo { grid-area: titulo; }
.mapa-seccion__leyenda { grid-area: leyenda; }
.mapa-seccion .mapa { grid-area: mapa; }
@media (min-width: 1024px) {
  .mapa-seccion { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-areas: "titulo mapa" "leyenda mapa"; grid-template-rows: auto 1fr; row-gap: 0; }
  .mapa-seccion .mapa { align-self: center; }
}
.mapa-seccion .titulo-seccion { margin-bottom: 32px; }
@media (max-width: 1023px) { .mapa-seccion .titulo-seccion { margin-bottom: 0; } .mapa-seccion .mapa { margin-inline: -2%; } }
.leyenda { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.leyenda__item { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 16px; background: rgb(255 255 255 / 0.03); transition: background-color 0.25s ease, border-color 0.25s ease, translate 0.25s ease; }
.leyenda__item strong { display: block; color: #fff; font-weight: 650; font-size: 1.0625rem; line-height: 1.3; }
.leyenda__item span span { display: block; margin-top: 4px; color: rgb(255 255 255 / 0.72); font-size: 0.9688rem; line-height: 1.5; }
.leyenda__icono { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; background: rgb(255 255 255 / 0.08); color: var(--azul-brillo); }
.leyenda--grupos .leyenda__item { cursor: pointer; }
.leyenda--grupos .leyenda__item[data-grupo="1"] .leyenda__icono { color: var(--g1); box-shadow: inset 0 0 0 1.5px var(--g1); }
.leyenda--grupos .leyenda__item[data-grupo="2"] .leyenda__icono { color: var(--g2); box-shadow: inset 0 0 0 1.5px var(--g2); }
.leyenda--grupos .leyenda__item[data-grupo="3"] .leyenda__icono { color: var(--g3); box-shadow: inset 0 0 0 1.5px var(--g3); }
.leyenda--grupos .leyenda__item[data-grupo="4"] .leyenda__icono { color: var(--g4); box-shadow: inset 0 0 0 1.5px var(--g4); }
.leyenda--grupos .leyenda__item:hover, .leyenda--grupos .leyenda__item:focus-visible, .leyenda--grupos .leyenda__item.activa { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.22); translate: 4px 0; }
.seccion--oscuro .acciones { margin-top: 28px; }

.mapa { position: relative; margin: 0; -webkit-mask-image: radial-gradient(120% 110% at 50% 45%, #000 62%, transparent 100%); mask-image: radial-gradient(120% 110% at 50% 45%, #000 62%, transparent 100%); }
.mapa--base-norteamerica { aspect-ratio: 1000 / 689; }
.mapa--base-mexico { aspect-ratio: 1000 / 636; }
.mapa--base-frontera { aspect-ratio: 1000 / 719; }
.mapa__base, .mapa__capa { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa__capa { overflow: visible; }
.mapa__ruta { fill: none; stroke: var(--g1); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.3s ease, stroke-width 0.3s ease; }
.mapa__ruta[data-grupo="2"] { stroke: var(--g2); }
.mapa__ruta[data-grupo="3"] { stroke: var(--g3); stroke-dasharray: none; }
.mapa__ruta[data-grupo="4"] { stroke: var(--g4); }
.mapa--aereo .mapa__ruta { stroke-width: 2; }
.mapa__nodo { transition: opacity 0.3s ease; }
.mapa__disco { fill: #fff; stroke: var(--marino); stroke-width: 2.5; }
.mapa__nodo--oficina .mapa__disco { fill: var(--azul-brillo); stroke: #fff; stroke-width: 3; }
.mapa__nodo--terrestre .mapa__disco, .mapa__nodo--maritimo .mapa__disco, .mapa__nodo--aereo .mapa__disco { fill: var(--marino-2); stroke: var(--g1); stroke-width: 2; }
.mapa__nodo--maritimo .mapa__disco { stroke: var(--g2); }
.mapa__nodo--aereo .mapa__disco { stroke: var(--g3); }
.mapa__nodo use { color: #fff; stroke-width: 2.2; }
.mapa__nodo--terrestre use { color: var(--g1); }
.mapa__nodo--maritimo use { color: var(--g2); }
.mapa__nodo--aereo use { color: var(--g3); }
.mapa__pulso, .mapa__vehiculo { display: none; }
.js .mapa__pulso { display: inline; fill: none; stroke: var(--azul-brillo); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.mapa__etiqueta { fill: rgb(255 255 255 / 0.86); font: 600 15px var(--fuente); paint-order: stroke; stroke: var(--marino); stroke-width: 5px; stroke-linejoin: round; }
.mapa__etiqueta--oficina { fill: #fff; font-size: 17px; font-weight: 750; }
.js .mapa__vehiculo { display: inline; fill: #fff; opacity: 0; filter: drop-shadow(0 0 6px var(--azul-brillo)); }
@media (max-width: 639px) { .mapa__etiqueta:not(.mapa__etiqueta--oficina) { display: none; } .mapa__etiqueta--oficina { font-size: 26px; } }
/* resaltar un grupo desde la leyenda */
.mapa[data-resaltar] .mapa__ruta, .mapa[data-resaltar] .mapa__nodo:not([data-grupo="0"]) { opacity: 0.16; }
.mapa[data-resaltar="1"] [data-grupo="1"], .mapa[data-resaltar="2"] [data-grupo="2"], .mapa[data-resaltar="3"] [data-grupo="3"], .mapa[data-resaltar="4"] [data-grupo="4"] { opacity: 1 !important; }
.mapa[data-resaltar="1"] .mapa__ruta[data-grupo="1"], .mapa[data-resaltar="2"] .mapa__ruta[data-grupo="2"], .mapa[data-resaltar="3"] .mapa__ruta[data-grupo="3"], .mapa[data-resaltar="4"] .mapa__ruta[data-grupo="4"] { stroke-width: 4; }
/* animación: se esconde solo con JS; al entrar en pantalla se dibuja */
.js .mapa:not(.visible) .mapa__ruta { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .mapa:not(.visible) .mapa__nodo { opacity: 0; }
.js .mapa.visible .mapa__ruta { stroke-dasharray: 1; animation: dibujar-ruta 1.8s var(--mov-curva) backwards; animation-delay: calc(0.25s + var(--i, 0) * 0.22s); }
.js .mapa.visible .mapa__ruta.trazada { stroke-dasharray: none; }
.js .mapa.visible .mapa__nodo { animation: aparecer-nodo 0.6s var(--mov-curva) backwards; animation-delay: calc(0.1s + var(--i, 0) * 0.06s); }
.js .mapa.visible .mapa__pulso { animation: pulso 2.4s ease-out 3; animation-delay: calc(1.2s + var(--i, 0) * 0.15s); }
.js .mapa.visible .mapa__nodo--oficina .mapa__pulso { animation-iteration-count: 6; }
@keyframes dibujar-ruta { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes aparecer-nodo { from { opacity: 0; } }
@keyframes pulso { 0% { opacity: 0.8; scale: 1; } 100% { opacity: 0; scale: 2.8; } }

/* ---------- Pasos ---------- */
.pasos { display: grid; gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; counter-reset: paso; }
@media (min-width: 768px) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pasos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pasos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pasos--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.paso { position: relative; padding: clamp(24px, 2.2vw, 32px); border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); }
.seccion--blanco .paso { background: var(--gris-fondo); border-color: transparent; }
.paso__numero { display: block; margin-bottom: 18px; font-size: clamp(2.5rem, 2.4vw + 1rem, 3.5rem); font-weight: 780; font-stretch: 118%; line-height: 1; letter-spacing: -0.04em; background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.paso h3 { margin-bottom: 8px; }
.paso p { margin: 0; color: var(--suave); }
@media (min-width: 1100px) {
  .paso:not(:last-child)::after { content: ""; position: absolute; top: calc(clamp(24px, 2.2vw, 32px) + 1.6rem); right: calc(-1 * clamp(16px, 2vw, 28px)); width: clamp(16px, 2vw, 28px); height: 2px; background: linear-gradient(90deg, var(--azul-cielo), var(--azul-oscuro)); }
}

/* ---------- Lista con palomitas y foto ---------- */
.lista-check { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lista-check li { display: flex; gap: 14px; align-items: flex-start; font-weight: 500; }
.lista-check .icono { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--azul-tinte); color: var(--azul); stroke-width: 3; }
.lista-check--compacta { gap: 10px; margin-top: 8px; }
.lista-check--compacta li { font-size: 0.9688rem; color: var(--suave); }
.lista-check--compacta .icono { width: 24px; height: 24px; padding: 5px; }
.lista-sola .lista-check { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px 32px; }
.lista-sola .lista-check li { padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--borde); }
.seccion--alt .lista-sola .lista-check li { border-color: transparent; }
.dos-columnas--imagen .acciones { margin-top: 36px; }
.foto-grande { position: relative; margin: 0; }
.foto-grande::before { content: ""; position: absolute; z-index: 0; inset: 7% -2% -5% 10%; background: var(--degradado); clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%); opacity: 0.9; } /* paralelogramo del logo sin transform: no se sale de su caja */
.foto-grande img, .foto-grande .imagen-pendiente { position: relative; z-index: 1; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radio-grande); box-shadow: var(--sombra-fuerte); }
@media (max-width: 1023px) { .foto-grande::before { inset: 10% -2% -4% 14%; } }

/* ---------- Bloques grandes ---------- */
.bloques { display: grid; gap: clamp(20px, 2.4vw, 36px); }
@media (min-width: 900px) { .bloques { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bloque { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radio-grande); background: #fff; border: 1px solid var(--borde); transition: box-shadow 0.25s ease, translate 0.25s ease; }
.bloque:hover { box-shadow: var(--sombra); translate: 0 -4px; }
.bloque__imagen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.bloque__imagen img, .bloque__imagen .imagen-pendiente { width: 100%; height: 100%; object-fit: cover; transition: scale 0.7s var(--mov-curva); }
.bloque:hover .bloque__imagen img { scale: 1.05; }
.bloque__cuerpo { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(26px, 2.6vw, 42px); }
.bloque__imagen + .bloque__cuerpo .tarjeta__icono { position: absolute; top: -30px; background: var(--degradado); color: #fff; border: 3px solid #fff; width: 58px; height: 58px; box-shadow: 0 10px 22px rgb(0 97 233 / 0.3); }
.bloque__imagen + .bloque__cuerpo h3 { margin-top: 18px; }
.bloque h3 { font-size: clamp(1.375rem, 0.9vw + 1rem, 1.75rem); margin-bottom: 0; }
.bloque p { margin: 0; color: var(--suave); }

/* ---------- Dúo (misión y visión) ---------- */
.duo { display: grid; gap: clamp(20px, 2.4vw, 32px); }
@media (min-width: 900px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo__item { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(32px, 4vw, 64px); border-radius: var(--radio-grande); overflow: hidden; isolation: isolate; background: var(--marino); color: #fff; }
.duo__item:nth-child(2) { background: var(--degradado); }
.duo__item::after { content: ""; position: absolute; z-index: -1; right: -40px; top: -40px; width: 220px; height: 300px; background: rgb(255 255 255 / 0.06); transform: skewX(-22deg); }
.duo__item h3 { margin: 8px 0 0; font-size: clamp(1.5rem, 1.2vw + 1rem, 2.125rem); }
.duo__item p { margin: 0; color: rgb(255 255 255 / 0.85); font-size: 1.125rem; line-height: 1.6; }
.duo__item .beneficio__icono { background: rgb(255 255 255 / 0.12); color: #fff; }

/* ---------- Texto con datos ---------- */
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.datos li { padding: 20px 22px; border-radius: 16px; background: var(--gris-fondo); }
.seccion--alt .datos li { background: #fff; }
.datos strong { display: block; font-size: clamp(1.75rem, 1.5vw + 1rem, 2.5rem); font-weight: 780; font-stretch: 114%; letter-spacing: -0.03em; line-height: 1.05; background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.datos span { color: var(--suave); font-size: 0.9375rem; font-weight: 550; }

/* ---------- Selector (Estados Unidos / México) ---------- */
.selector { display: grid; gap: clamp(20px, 2.4vw, 32px); }
@media (min-width: 900px) { .selector { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.selector__item { display: flex; flex-direction: column; gap: 12px; padding: clamp(28px, 3.4vw, 52px); border: 1.5px solid var(--borde); border-radius: var(--radio-grande); background: #fff; transition: border-color 0.25s ease, box-shadow 0.25s ease, translate 0.25s ease; }
.selector__item:hover { border-color: var(--azul); box-shadow: var(--sombra); translate: 0 -4px; }
.selector__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.selector__icono { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--degradado); color: #fff; }
.selector__icono .icono { width: 30px; height: 30px; }
.selector__etiqueta { padding: 6px 14px; border-radius: 999px; background: var(--azul-tinte); color: var(--azul); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.selector__item h3 { font-size: clamp(1.5rem, 1vw + 1rem, 2rem); margin-bottom: 0; }
.selector__item p { margin: 0; color: var(--suave); }
.selector__item .boton { margin-top: auto; }
.selector__item .lista-check { margin-bottom: 16px; }

/* ---------- Oficinas ---------- */
.oficinas { display: grid; gap: clamp(20px, 2.4vw, 32px); }
@media (min-width: 900px) { .oficinas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.oficina { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--borde); border-radius: var(--radio-grande); background: #fff; box-shadow: var(--sombra-suave); }
.oficina__mapa { aspect-ratio: 16 / 10; background: var(--gris-fondo-2); }
.oficina__mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
.oficina__cuerpo { display: flex; flex-direction: column; gap: 6px; padding: clamp(24px, 2.6vw, 40px); }
.oficina__pais { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--azul); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.oficina h3 { margin: 4px 0 0; font-size: clamp(1.5rem, 1vw + 1rem, 2rem); }
.oficina__direccion { margin: 0 0 4px; color: var(--marino); font-weight: 600; }
.oficina p { color: var(--suave); }

/* ---------- Cierre (banda de marca) ---------- */
.cierre { position: relative; display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .cierre { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); } }
.cierre .titulo-seccion { margin-bottom: 0; }
.cierre h2 { font-size: clamp(2rem, 2.8vw + 1rem, 3.75rem); }
.cierre__nota { display: flex; gap: 10px; align-items: flex-start; max-width: 62ch; margin: 28px 0 0; color: rgb(255 255 255 / 0.78); font-size: 0.9375rem; }
.cierre__nota .icono { margin-top: 3px; }
.cierre__marca { position: relative; height: 100%; min-height: 220px; }
.cierre__marca span { position: absolute; top: 50%; width: 22%; height: 140%; translate: 0 -50%; transform: skewX(-24deg); border-radius: 6px; background: linear-gradient(180deg, rgb(255 255 255 / 0.32), rgb(255 255 255 / 0.04)); }
.cierre__marca span:nth-child(1) { right: 52%; opacity: 0.45; }
.cierre__marca span:nth-child(2) { right: 26%; background: linear-gradient(180deg, #fff, rgb(255 255 255 / 0.2)); opacity: 0.9; }
.cierre__marca span:nth-child(3) { right: 0; opacity: 0.3; }
@media (max-width: 1023px) { .cierre__marca { display: none; } }

/* ---------- Formularios ---------- */
.formulario-marco { display: grid; gap: clamp(24px, 3vw, 48px); align-items: start; }
@media (min-width: 1100px) { .formulario-marco--lado { grid-template-columns: minmax(0, 1.65fr) minmax(0, 0.75fr); } }
.formulario-tarjeta { padding: clamp(22px, 3.4vw, 56px); border: 1px solid var(--borde); border-radius: var(--radio-grande); background: #fff; box-shadow: var(--sombra); }
.formulario-lado { position: sticky; top: calc(var(--alto-encabezado) + 24px); padding: clamp(26px, 2.6vw, 40px); border-radius: var(--radio-grande); background: var(--degradado-oscuro); color: #fff; overflow: hidden; isolation: isolate; }
.formulario-lado::after { content: ""; position: absolute; z-index: -1; right: -60px; bottom: -60px; width: 220px; height: 260px; background: var(--degradado); transform: skewX(-22deg); opacity: 0.55; border-radius: 12px; }
.formulario-lado__titulo { margin: 0 0 20px; font-size: 1.25rem; font-weight: 720; font-stretch: 106%; }
.formulario-lado ul { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.formulario-lado li { display: flex; gap: 14px; align-items: flex-start; }
.formulario-lado li > .icono { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgb(255 255 255 / 0.1); color: var(--azul-brillo); }
.formulario-lado strong { display: block; margin-bottom: 2px; font-weight: 650; }
.formulario-lado li span { color: rgb(255 255 255 / 0.78); font-size: 0.9688rem; line-height: 1.5; }
.formulario-lado li span strong { color: #fff; }
@media (max-width: 1099px) { .formulario-lado { position: relative; top: auto; } } /* relative: el adorno ::after queda recortado dentro de la caja */

.formulario { display: grid; gap: 24px; }
.formulario__nota { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--suave); font-size: 0.9375rem; }
.formulario__nota .icono { color: var(--azul); }
.formulario__grupo { margin: 0; padding: 0; border: 0; min-width: 0; }
.formulario__subtitulo { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 18px; padding: 0; font-size: 1.0625rem; font-weight: 720; font-stretch: 106%; color: var(--marino); }
.formulario__subtitulo::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
.formulario__campos { display: grid; gap: 18px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campo { grid-column: 1 / -1; display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
@media (min-width: 640px) { .campo--medio { grid-column: auto; } }
.campo label, .campo legend { padding: 0; color: var(--marino); font-size: 0.9688rem; font-weight: 600; line-height: 1.35; }
.campo legend { margin-bottom: 8px; }
.campo__req { color: var(--azul); }
.campo__ayuda { margin: -4px 0 0; color: var(--suave); font-size: 0.9375rem; }
.campo input:not([type="checkbox"]):not([type="radio"]), .campo select, .campo textarea {
  width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--borde-fuerte); border-radius: 14px; background: #fff; color: var(--texto); font-size: 16px; line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; appearance: none;
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #9fb0c6; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px rgb(0 97 233 / 0.14); }
.campo__select { position: relative; }
.campo__select select { padding-right: 46px; cursor: pointer; }
.campo__select .icono { position: absolute; right: 16px; top: 50%; translate: 0 -50%; color: var(--suave); pointer-events: none; }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--error) !important; background: #fff8f8 !important; }
.campo__error { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--error); font-size: 0.875rem; font-weight: 600; }
.campo__error::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* [hidden] gana sobre el display de estos bloques */
.campo__error[hidden], .formulario[hidden], .formulario__estado[hidden], .formulario__exito[hidden] { display: none; }

/* Opciones (radio y casillas): el input cubre toda la opción para que el toque sea grande */
.opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.opcion { position: relative; display: inline-flex; }
.opcion input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 999px; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.opcion__texto { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 18px 10px 14px; border: 1.5px solid var(--borde-fuerte); border-radius: 999px; background: #fff; color: var(--texto); font-weight: 550; font-size: 0.9688rem; line-height: 1.3; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
.opcion__texto::before { content: ""; flex: none; width: 20px; height: 20px; border: 2px solid var(--borde-fuerte); border-radius: 50%; background: #fff center / 12px no-repeat; transition: border-color 0.2s ease, background-color 0.2s ease; }
.opcion input[type="checkbox"] + .opcion__texto::before { border-radius: 6px; }
.opcion input:hover + .opcion__texto { border-color: #9fb0c6; }
.opcion input:checked + .opcion__texto { border-color: var(--azul); background: var(--azul-tinte); color: var(--marino); }
.opcion input:checked + .opcion__texto::before { border-color: var(--azul); background-color: var(--azul); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.opcion input[type="radio"]:checked + .opcion__texto::before { background-image: none; box-shadow: inset 0 0 0 4px #fff; }
.opcion input:focus-visible + .opcion__texto { outline: 3px solid var(--azul-cielo); outline-offset: 2px; }
.campo--error .opcion__texto { border-color: #e7a4a7; }
.opciones--tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.opciones--tarjetas .opcion, .opciones--tarjetas .opcion input { border-radius: 18px; }
.opciones--tarjetas .opcion__texto { width: 100%; min-height: 72px; padding: 16px 18px; border-radius: 18px; font-weight: 650; }
.opciones--tarjetas .opcion__texto .icono { order: 2; margin-left: auto; width: 26px; height: 26px; color: var(--azul); }
.opciones--dias { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 479px) { .opciones--dias { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.opciones--dias .opcion, .opciones--dias .opcion input { border-radius: 16px; }
.opciones--dias .opcion__texto { flex-direction: column; justify-content: center; gap: 0; width: 100%; min-height: 76px; padding: 8px 4px; border-radius: 16px; text-align: center; }
.opciones--dias .opcion__texto::before { display: none; }
.opciones--dias small { color: var(--suave); font-size: 0.75rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; }
.opciones--dias b { font-size: 1.375rem; font-weight: 760; font-stretch: 110%; line-height: 1.15; }
.opciones--dias input:checked + .opcion__texto { background: var(--azul); border-color: var(--azul); color: #fff; }
.opciones--dias input:checked + .opcion__texto small { color: rgb(255 255 255 / 0.85); }
.opciones--chips .opcion__texto::before { display: none; }
.opciones--chips .opcion__texto { padding-inline: 20px; }
.campo--privacidad .opcion { display: flex; }
.campo--privacidad .opcion input { border-radius: 12px; }
.campo--privacidad .opcion__texto { align-items: flex-start; padding: 12px 16px; border-radius: 14px; border-color: var(--borde); background: var(--gris-fondo); font-size: 0.9375rem; }
.campo--privacidad .opcion__texto::before { margin-top: 1px; border-radius: 6px; }
.campo--privacidad a { position: relative; z-index: 2; font-weight: 650; }

.formulario__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.formulario__seguro { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--suave); font-size: 0.9375rem; }
.formulario__seguro .icono { color: var(--exito); }
@media (max-width: 599px) { .formulario__pie .boton { width: 100%; white-space: normal; } }
.formulario__estado { padding: 14px 18px; border-radius: 14px; background: #fff3f3; color: var(--error); font-weight: 600; font-size: 0.9375rem; }
.formulario [type="submit"][aria-busy="true"] { pointer-events: none; opacity: 0.8; }
.formulario [type="submit"][aria-busy="true"] .icono { animation: girar 0.9s linear infinite; }
@keyframes girar { to { rotate: 360deg; } }
.formulario__exito { padding: clamp(12px, 2vw, 24px) 0; text-align: center; }
.formulario__exito:focus { outline: none; }
.formulario__exito-icono { display: inline-grid; place-items: center; width: 84px; height: 84px; margin-bottom: 20px; border-radius: 50%; background: #e6f6ef; color: var(--exito); }
.formulario__exito:not([hidden]) .formulario__exito-icono { animation: exito 0.6s var(--mov-curva); }
.formulario__exito-icono .icono { width: 44px; height: 44px; }
.formulario__exito-titulo { margin: 0 0 10px; font-size: clamp(1.5rem, 1vw + 1rem, 2rem); font-weight: 740; font-stretch: 108%; color: var(--marino); }
.formulario__exito p:not(.formulario__exito-titulo) { max-width: 52ch; margin-inline: auto; color: var(--suave); }
@keyframes exito { from { scale: 0.5; opacity: 0; } }

/* ---------- Ventanas emergentes ---------- */
.modal { width: min(720px, 94%); max-width: none; max-height: min(92vh, 980px); max-height: min(92dvh, 980px); padding: 0; border: 0; border-radius: var(--radio-grande); background: #fff; color: var(--texto); box-shadow: 0 40px 100px rgb(1 23 45 / 0.4); overflow: hidden; }
.modal--ancho { width: min(860px, 94%); }
.modal::backdrop { background: rgb(1 23 45 / 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal[open] { display: flex; animation: abrir-modal 0.4s var(--mov-curva); }
.modal[open]::backdrop { animation: abrir-velo 0.3s ease; }
@keyframes abrir-modal { from { opacity: 0; translate: 0 24px; scale: 0.98; } }
@keyframes abrir-velo { from { opacity: 0; } }
.modal__caja { position: relative; width: 100%; max-height: inherit; overflow-y: auto; overscroll-behavior: contain; padding: clamp(24px, 4vw, 48px); }
.modal__cabeza { margin-bottom: 24px; padding-right: 48px; }
.modal__cabeza h2 { font-size: clamp(1.625rem, 1.6vw + 1rem, 2.375rem); margin-bottom: 10px; }
.modal__cabeza .bajada { font-size: 1.0625rem; }
.modal__cuerpo .acciones { margin-top: 24px; }
.modal__cerrar { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--borde); border-radius: 50%; background: #fff; color: var(--marino); cursor: pointer; transition: background-color 0.2s ease, rotate 0.3s var(--mov-curva); }
.modal__cerrar:hover { background: var(--gris-fondo); rotate: 90deg; }
html.modal-abierto { overflow: hidden; }
@media (max-width: 639px) {
  .modal { width: 100%; max-height: 94dvh; margin: auto 0 0; border-radius: var(--radio-grande) var(--radio-grande) 0 0; }
  .modal[open] { animation: subir-modal 0.45s var(--mov-curva); }
  @keyframes subir-modal { from { translate: 0 100%; } }
}

/* ---------- Legal ---------- */
.legal { max-width: 76ch; }
.legal__fecha { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 40px; padding: 8px 16px; border-radius: 999px; background: var(--gris-fondo); color: var(--suave); font-size: 0.9375rem; font-weight: 600; }
.legal__bloque { padding-block: 28px; border-top: 1px solid var(--borde); }
.legal__bloque h2 { font-size: clamp(1.375rem, 0.8vw + 1rem, 1.75rem); margin-bottom: 0.7em; }
.legal__bloque p, .legal__bloque li { color: #2b3a4f; }
.legal__bloque ul { display: grid; gap: 8px; margin: 0 0 1em; padding-left: 1.3em; }
.legal__bloque li::marker { color: var(--azul); }

/* ---------- Pie ---------- */
.pie { padding-block: clamp(56px, 6vw, 96px) 28px; background: var(--marino); color: rgb(255 255 255 / 0.74); position: relative; overflow: hidden; isolation: isolate; }
.pie::before { content: ""; position: absolute; z-index: -1; right: -8%; top: -30%; width: 46%; height: 160%; background: linear-gradient(180deg, rgb(0 141 252 / 0.10), transparent 70%); transform: skewX(-22deg); }
.pie a { color: #fff; text-decoration: none; }
.pie a:hover { color: #8fd0ff; text-decoration: underline; }
.pie__rejilla { display: grid; gap: 40px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .pie__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .pie__rejilla { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); } }
.pie__marca { grid-column: 1 / -1; }
@media (min-width: 1180px) { .pie__marca { grid-column: auto; padding-right: 32px; } }
.pie__marca img { width: 230px; height: auto; margin-bottom: 20px; }
.pie__marca p { max-width: 38ch; }
.pie__titulo { margin: 0 0 14px; color: #fff; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; }
.pie ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pie li { display: flex; gap: 10px; align-items: center; }
.pie li > a, .pie__boton-enlace, .pie__inactivo { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.pie__boton-enlace { padding: 0; border: 0; background: none; color: #fff; font-size: inherit; text-align: left; cursor: pointer; }
.pie__boton-enlace:hover { color: #8fd0ff; text-decoration: underline; }
.pie__boton-enlace .icono { display: none; }
.pie__inactivo { color: rgb(255 255 255 / 0.5); cursor: not-allowed; }
.pie__oficinas { margin-top: 18px !important; }
.pie__oficinas li { min-height: 32px; color: rgb(255 255 255 / 0.85); }
.pie__oficinas .icono { color: var(--azul-brillo); }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 0.12); font-size: 0.9375rem; }
.pie__legal p { margin: 0; }
.pie__lema { color: rgb(255 255 255 / 0.5); font-weight: 600; letter-spacing: 0.04em; }

/* ---------- Aviso de cookies ---------- */
.aviso-cookies { position: fixed; z-index: 44; right: 2.5%; bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; width: min(560px, 95%); padding: 18px 20px; border-radius: 20px; background: var(--marino); color: rgb(255 255 255 / 0.86); box-shadow: var(--sombra-fuerte); font-size: 0.9375rem; animation: abrir-modal 0.5s var(--mov-curva) 0.8s backwards; }
.aviso-cookies[hidden] { display: none; }
.aviso-cookies p { display: flex; gap: 10px; flex: 1 1 280px; margin: 0; line-height: 1.5; }
.aviso-cookies p .icono { color: var(--azul-brillo); margin-top: 2px; }
.aviso-cookies a { color: #8fd0ff; }
.aviso-cookies .boton { background: #fff; color: var(--marino); }
@media (max-width: 1023px) { .aviso-cookies { right: 5%; width: 90%; bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom) + 12px); } }

/* ---------- Imagen pendiente (mientras llega la foto) ---------- */
.imagen-pendiente { width: 100%; height: 100%; min-height: 160px; background: radial-gradient(80% 80% at 80% 20%, rgb(0 141 252 / 0.5), transparent 60%), var(--degradado-oscuro); }

/* ---------- Avance de lectura ---------- */
.progreso { position: fixed; inset: 0 0 auto 0; z-index: 70; height: 3px; background: var(--degradado); transform-origin: left; scale: 0 1; pointer-events: none; }

/* ---------- Animaciones ---------- */
@keyframes entrada { from { opacity: 0; translate: 0 var(--mov-dist); } }
@keyframes entrada-imagen { from { scale: 1.08; } }
.entrada { animation: entrada var(--mov-dur) var(--mov-curva) both; animation-delay: calc(80ms + var(--i, 0) * var(--mov-escalon)); }

@keyframes revelar { from { opacity: 0; translate: 0 var(--mov-dist); } }
@keyframes revelar-izquierda { from { opacity: 0; translate: calc(-1 * var(--mov-dist)) 0; } }
@keyframes revelar-derecha { from { opacity: 0; translate: var(--mov-dist) 0; } }
@keyframes revelar-escala { from { opacity: 0; scale: 0.94; } }
@keyframes revelar-cortina { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes revelar-palabra { from { opacity: 0; translate: 0 0.45em; } }

.js [data-revelar]:not(.visible) { opacity: 0; }
.js [data-revelar="cortina"]:not(.visible) { opacity: 1; clip-path: inset(0 100% 0 0); }
.js [data-revelar].visible { animation: revelar var(--mov-dur) var(--mov-curva) backwards; animation-delay: calc(var(--i, 0) * var(--mov-escalon)); }
.js [data-revelar="izquierda"].visible { animation-name: revelar-izquierda; }
.js [data-revelar="derecha"].visible { animation-name: revelar-derecha; }
.js [data-revelar="escala"].visible { animation-name: revelar-escala; }
.js [data-revelar="cortina"].visible { animation-name: revelar-cortina; animation-duration: calc(var(--mov-dur) * 2); }
@media (max-width: 1023px) { .js [data-revelar="izquierda"].visible, .js [data-revelar="derecha"].visible { animation-name: revelar; } }

.js [data-dividir] .palabra { display: inline-block; }
.js [data-dividir]:not(.visible) .palabra { opacity: 0; }
.js [data-dividir].visible .palabra { animation: revelar-palabra calc(var(--mov-dur) * 0.9) var(--mov-curva) backwards; animation-delay: calc(var(--p, 0) * 40ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  html { scroll-behavior: auto; }
  .js [data-revelar]:not(.visible), .js [data-dividir]:not(.visible) .palabra { opacity: 1; clip-path: none; }
  .js .mapa:not(.visible) .mapa__ruta { stroke-dashoffset: 0; }
  .js .mapa:not(.visible) .mapa__nodo { opacity: 1; }
  .mapa__vehiculo, .mapa__pulso { display: none; }
}