/* Corsa Logistics · colores tomados del logotipo aprobado (versión idéntica a la referencia) */
:root {
  --abismo: #021b36;
  --marino: #0a2e55;
  --marino-2: #163f6b;
  --rojo: #b3101f;
  --rojo-oscuro: #8e0c18;
  --cielo: #a9cbe6;
  --niebla: #eef3f7;
  --acero: #4f6478;
  --linea: #d3dde6;
  --blanco: #fff;

  --letra: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --margen: clamp(16px, 4vw, 48px);
  --seccion: clamp(72px, 9vw, 128px);
  --cabecera: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--letra);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--marino);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-stretch: 125%; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 1.3rem + 2.7vw, 3.75rem); font-weight: 760; font-stretch: 118%; line-height: 1.02; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.85rem, 1.3rem + 2vw, 3rem); font-weight: 720; letter-spacing: -0.01em; }
h3 { font-size: 1.1875rem; font-weight: 680; font-stretch: 112%; }
p { margin: 0; text-wrap: pretty; }
.entrada { font-size: 1.25rem; line-height: 1.5; max-width: 34em; }

.contenedor { width: min(1240px, 100% - 2 * var(--margen)); margin-inline: auto; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 16px; top: -100px; z-index: 20; padding: 10px 16px; background: var(--blanco); }
.saltar:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 22px;
  border: 2px solid transparent; border-radius: 4px;
  font: 650 1rem/1.2 var(--letra); font-stretch: 108%;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.boton--rojo { background: var(--rojo); color: var(--blanco); }
.boton--rojo:hover { background: var(--rojo-oscuro); }
.boton--claro { border-color: currentColor; color: var(--blanco); }
.boton--claro:hover { background: var(--blanco); color: var(--marino); border-color: var(--blanco); }
.boton--marino { background: var(--marino); color: var(--blanco); }
.boton--marino:hover { background: var(--abismo); }

/* Franja Empresas | Personas: va fuera de la cabecera para no mover el menú móvil, que se cuelga de --cabecera */
.perfiles { background: var(--abismo); font-size: .875rem; font-weight: 600; }
.perfiles__fila { display: flex; gap: 4px; }
.perfiles a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: 14px; color: #c6d7e7; text-decoration: none; border-bottom: 3px solid transparent; }
.perfiles a:first-child { margin-left: -14px; }
.perfiles a:hover { color: var(--blanco); }
.perfiles a[aria-current] { color: var(--blanco); border-bottom-color: var(--rojo); }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 10; background: var(--blanco); border-bottom: 1px solid var(--linea); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--cabecera); }
.cabecera__logo { flex: none; }
.cabecera__logo img { width: auto; height: 64px; }   /* versión con frase: más alta para que la frase se alcance a leer */
.navegacion { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); font-size: .9688rem; font-weight: 560; }
.navegacion a:not(.boton) { text-decoration: none; padding-block: 6px; border-bottom: 2px solid transparent; }
.navegacion a:not(.boton):hover { border-bottom-color: var(--rojo); }
.navegacion .boton { min-height: 44px; padding: 10px 18px; }
.cabecera__menu { display: none; }

@media (max-width: 1120px) {
  .cabecera__menu {
    display: block; min-height: 44px; padding: 8px 16px;
    border: 2px solid var(--marino); border-radius: 4px; background: none;
    font: 650 1rem var(--letra); color: var(--marino); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  /* El menú se despliega desde la cabecera; visibility lo saca del orden de tabulación mientras está cerrado */
  .navegacion {
    position: absolute; inset: var(--cabecera) 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--margen) 24px; background: var(--blanco); border-bottom: 1px solid var(--linea);
    visibility: hidden; clip-path: inset(0 0 100% 0);
    transition: clip-path .28s cubic-bezier(.4, 0, .2, 1), visibility 0s .28s;
  }
  .navegacion a { opacity: 0; transform: translateY(-8px); transition: opacity .15s, transform .15s; }
  .navegacion a:not(.boton) { padding-block: 14px; border-bottom: 1px solid var(--linea); }
  .navegacion .boton { margin-top: 16px; }
  .cabecera--abierta .navegacion { visibility: visible; clip-path: inset(0); transition: clip-path .38s cubic-bezier(.2, .8, .2, 1); }
  .cabecera--abierta .navegacion a { opacity: 1; transform: none; transition: opacity .3s ease-out, transform .3s ease-out; }
  .cabecera--abierta .navegacion a:nth-child(2) { transition-delay: 40ms; }
  .cabecera--abierta .navegacion a:nth-child(3) { transition-delay: 80ms; }
  .cabecera--abierta .navegacion a:nth-child(4) { transition-delay: 120ms; }
  .cabecera--abierta .navegacion a:nth-child(5) { transition-delay: 160ms; }
  .cabecera--abierta .navegacion a:nth-child(6) { transition-delay: 200ms; }
}
@media (max-width: 1120px) and (prefers-reduced-motion: reduce) {
  .navegacion, .navegacion a, .cabecera--abierta .navegacion, .cabecera--abierta .navegacion a { transition: none; }
}

/* Portada: el globo es el único momento animado sin interacción */
.portada { background: var(--abismo); color: var(--blanco); overflow: hidden; }
.portada__rejilla {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); align-items: center;
  gap: clamp(24px, 4vw, 64px); min-height: min(860px, calc(100svh - var(--cabecera)));
  padding-block: clamp(48px, 6vw, 80px);
}
.portada__entrada { margin-top: 28px; font-size: 1.25rem; line-height: 1.5; color: #c6d7e7; max-width: 30em; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.portada__firma { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(169, 203, 230, .25); font-size: .9375rem; color: #9fb7cd; max-width: 30em; }

.globo { position: relative; margin: 0; }
.globo__lienzo { width: 100%; aspect-ratio: 1; }
.globo__ruta {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; align-content: center; gap: 2px 32px;
  margin-top: -2%; padding: 16px 20px;
  border: 1px solid rgba(169, 203, 230, .22); border-radius: 6px;
}
.globo__nota, .globo__titulo { grid-column: 1; }
.globo__nota { font-size: .8125rem; color: #9fb7cd; }
.globo__titulo { font-size: 1.125rem; font-weight: 680; font-stretch: 115%; }
.globo__tramos { grid-column: 2; grid-row: 1 / span 2; list-style: none; margin: 0; padding: 0; display: grid; align-content: center; gap: 6px; font-size: .875rem; }
.globo__tramos li { display: grid; grid-template-columns: 44px auto; column-gap: 12px; align-items: center; color: #7f98b0; transition: color .3s; }
.globo__tramos li.activo, .globo__tramos li.hecho { color: var(--blanco); }
.globo__tramos svg { width: 44px; height: 10px; }
.globo__tramos small { grid-column: 2; font-size: .8125rem; color: #9fb7cd; }

/* Trazos: la misma línea de cada modalidad que dibuja el globo */
.trazo line { stroke: var(--rojo); stroke-width: 2.5; fill: none; }
.trazo .trazo--maritimo { stroke-dasharray: 9 6; }
.trazo .trazo--aereo { stroke-dasharray: 0.1 6.5; stroke-linecap: round; stroke-width: 3.2; }
.trazo .trazo--durmientes { stroke-width: 9; stroke-dasharray: 1.6 6.4; }
.portada .trazo line { stroke: #ff5a64; }

/* Modalidades */
.modalidades { padding-block: var(--seccion) calc(var(--seccion) * .75); }
.modalidades h2 { max-width: 16em; }
.modalidades__lista { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.modalidades__lista .trazo { width: 120px; height: 12px; margin-bottom: 20px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .modalidades__lista .trazo { animation: trazar linear both; animation-timeline: view(); animation-range: entry 40% cover 35%; }
  }
}
@keyframes trazar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.modalidades__lista p { margin-top: 8px; color: var(--acero); max-width: 22em; }
.modalidades__nota { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--linea); color: var(--acero); }

/* Importaciones */
.importaciones { padding-block: var(--seccion); background: var(--niebla); }
.importaciones__rejilla, .dos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.importaciones .entrada { margin-block: 24px 32px; }
.incluye { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.incluye div { padding-block: 24px; border-top: 2px solid var(--marino); }
.incluye dt { font-weight: 680; font-stretch: 112%; font-size: 1.1875rem; }
.incluye dd { margin: 8px 0 0; color: var(--acero); }

/* Proceso: escena fija que avanza con el scroll */
.proceso__pista { position: relative; height: 420vh; }
.proceso__fijo { position: sticky; top: var(--cabecera); height: calc(100svh - var(--cabecera)); display: flex; align-items: center; overflow: hidden; }
.proceso__rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.proceso__pasos { list-style: none; margin: 40px 0 0; padding: 0; position: relative; }
.proceso__pasos li { position: relative; padding: 16px 0 16px 64px; }
.proceso__pasos li > * { opacity: .35; transition: opacity .35s; }
.proceso__pasos li.activo > * { opacity: 1; }
/* Tramo de un círculo al siguiente; se llena de rojo con --f (0 a 1) mientras dura ese paso */
.proceso__pasos li:not(:last-child)::after {
  content: ""; position: absolute; left: 19px; top: 34px; height: 100%; width: 2px;
  background: linear-gradient(var(--rojo), var(--rojo)) top / 100% calc(var(--f, 0) * 100%) no-repeat, var(--linea);
}
.proceso__pasos li::before {
  content: attr(data-n); position: absolute; left: 0; top: 14px; z-index: 1;   /* número fijo: en teléfono los pasos inactivos se ocultan */
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--blanco); box-shadow: inset 0 0 0 2px var(--linea); color: var(--acero); font-weight: 700; font-stretch: 112%;
  transition: background-color .35s, color .35s, box-shadow .35s;
}
.proceso__pasos li.hecho::before, .proceso--quieto .proceso__pasos li::before { background: var(--marino); box-shadow: none; color: var(--blanco); }
.proceso__pasos li.activo::before { background: var(--rojo); box-shadow: none; color: var(--blanco); }
.proceso__pasos p { margin-top: 6px; color: var(--acero); max-width: 30em; }
.escena { width: 100%; height: auto; max-height: calc(100svh - var(--cabecera) - 48px); font-family: var(--letra); }
.escena .revela { fill: none; stroke: #fff; stroke-width: 18; stroke-dasharray: 1; stroke-dashoffset: 1; }
.escena .ruta { fill: none; stroke: #ff5a64; stroke-width: 3; }
.escena .ruta--mar { stroke-dasharray: 10 7; }
.escena .ruta--durmientes { stroke-width: 8; stroke-dasharray: 1.4 6.6; stroke-opacity: .7; }   /* durmientes finos, como en la leyenda del globo */
.escena .enlace { fill: none; stroke: #a9cbe6; stroke-opacity: .5; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.escena .nodo circle { fill: #fff; stroke: #ff5a64; stroke-width: 3; }
.escena .nodo text { fill: #dce9f4; font-size: 14px; font-weight: 600; }
.escena .nodo .pulso { fill: none; stroke: #ff5a64; stroke-width: 2; opacity: 0; }
.escena .destino { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; transition: fill .3s; }
.escena .destino.lleno { fill: #e2323e; }
.escena .nodo, .escena .pastilla, .escena .centro { opacity: 0; transform-box: fill-box; transform-origin: center; }
.escena .modo rect { fill: rgba(255, 90, 100, .14); stroke: #ff5a64; stroke-opacity: .6; }
.escena .modo text { fill: #ffd5d8; font-size: 13px; font-weight: 600; }
.escena .aliado rect { fill: #123f6b; stroke: #a9cbe6; stroke-opacity: .45; }
.escena .aliado text { fill: #fff; font-size: 13.5px; font-weight: 600; }
.escena .centro rect { fill: #fff; }
/* La carga es un punto de luz que deja una estela sobre la ruta */
.escena .carga, .escena .estela { opacity: 0; }
.escena .carga__halo { fill: url(#carga-halo); transform-box: fill-box; transform-origin: center; }
.escena .carga__nucleo { fill: #fff; }
.escena .estela circle { fill: #ffc2c6; }
@media (prefers-reduced-motion: no-preference) {
  .escena .carga__halo { animation: latido 1.6s ease-in-out infinite; }
}
@keyframes latido { 50% { transform: scale(1.3); opacity: .65; } }
.escena .entregado rect { fill: #fff; }
.escena .entregado path { fill: none; stroke: #b3101f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.escena .entregado text { fill: var(--marino); font-size: 14px; font-weight: 700; }
.escena .tarjeta__fondo { fill: #fff; }
.escena .tarjeta__titulo { fill: var(--marino); font-size: 17px; font-weight: 700; font-stretch: 112%; }
.escena .tarjeta__etq { fill: var(--acero); font-size: 12px; }
.escena .tarjeta__val { fill: var(--marino); font-size: 15px; font-weight: 600; }
.escena .tarjeta__linea { stroke: var(--linea); }
.escena .tarjeta__boton rect { fill: none; stroke: var(--marino); stroke-width: 1.5; transition: fill .25s, stroke .25s; }
.escena .tarjeta__boton text { fill: var(--marino); font-size: 13.5px; font-weight: 650; }
.escena .tarjeta__boton.enviada rect { fill: var(--rojo); stroke: var(--rojo); }
.escena .tarjeta__boton.enviada text { fill: #fff; }
.proceso--quieto .proceso__pista { height: auto; }
.proceso--quieto .proceso__fijo { position: static; height: auto; padding-block: var(--seccion); }
.proceso--quieto .proceso__pasos li > * { opacity: 1; }

/* Soluciones */
.soluciones { padding-block: 0 var(--seccion); }
.soluciones__lista, .datos-lista { margin: 48px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.soluciones__lista div, .datos-lista div { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; padding-block: 22px; border-top: 1px solid var(--linea); }
.soluciones__lista dt, .datos-lista dt { font-weight: 660; font-stretch: 110%; font-size: 1.125rem; }
.soluciones__lista dd, .datos-lista dd { margin: 6px 0 0; color: var(--acero); }

/* Gran volumen y encabezados de páginas internas: imagen generada con Higgsfield; el video sólo se carga en pantallas grandes */
.volumen, .encabezado { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: min(760px, 88svh); padding-block: var(--seccion); background: var(--abismo); color: var(--blanco); }
.volumen__medio, .encabezado__medio { position: absolute; inset: 0; z-index: -1; }
.volumen__medio img, .encabezado__medio img, .volumen__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.volumen__video { opacity: 0; transition: opacity .8s; }
.volumen__video.listo { opacity: 1; }
.volumen__medio::after, .encabezado__medio::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 27, 54, .94) 0%, rgba(2, 27, 54, .78) 34%, rgba(2, 27, 54, .1) 66%, rgba(2, 27, 54, 0) 100%); }
.volumen__contenido > *, .encabezado__contenido > * { max-width: 34rem; }
.volumen .entrada, .encabezado .entrada { margin-block: 24px 32px; color: #d3e1ee; }

/* Nosotros */
.nosotros { padding-block: var(--seccion); }
.nosotros__rejilla { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); }
.nosotros__texto p + p { margin-top: 20px; color: var(--acero); max-width: 34em; }
.nosotros__datos { list-style: none; margin: 32px 0 0; padding: 0; }
.nosotros__datos li { border-top: 1px solid var(--linea); }
.nosotros__datos li:last-child { border-bottom: 1px solid var(--linea); }
/* Sellos: entran como un sello de goma al llegar a la vista; al darles clic despliegan la ventaja */
.sello summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; cursor: pointer; list-style: none; }
.sello summary::-webkit-details-marker { display: none; }
.sello summary::after { content: "+"; flex: none; font-size: 1.5rem; line-height: 1; color: var(--rojo); transition: transform .2s; }
.sello[open] summary::after { transform: rotate(45deg); }
.sello__golpe { display: flex; align-items: center; gap: 16px; transform-origin: 22px 50%; }
.sello__marca {
  position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border: 2px solid var(--rojo); border-radius: 50%;
  box-shadow: inset 0 0 0 4px var(--blanco), inset 0 0 0 5px rgba(179, 16, 31, .4);
}
.sello__marca::before { content: ""; margin-top: -3px; border: 8px solid transparent; border-bottom: 13px solid var(--rojo); border-top: 0; }
.sello__marca::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--rojo); border-radius: 50%; opacity: 0; }
.sello__texto { font-size: 1.1875rem; font-weight: 680; font-stretch: 112%; line-height: 1.3; }
.sello summary:hover .sello__texto { color: var(--rojo); }
.sello p { padding: 0 0 20px 60px; color: var(--acero); max-width: 36em; }
.sello[open] p { animation: desplegar .3s ease-out; }
@keyframes desplegar { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: no-preference) {
  .con-js .nosotros__datos:not(.sellado) .sello__golpe { opacity: 0; }
  .sellado .sello__golpe { animation: sellar .6s cubic-bezier(.2, .9, .3, 1.15) both; }
  .sellado .sello__marca::after { animation: tinta .9s ease-out both; }
  .sellado li:nth-child(2) .sello__golpe, .sellado li:nth-child(2) .sello__marca::after { animation-delay: .3s; }
  .sellado li:nth-child(3) .sello__golpe, .sellado li:nth-child(3) .sello__marca::after { animation-delay: .6s; }
}
@keyframes sellar {
  0% { opacity: 0; transform: scale(1.9) rotate(-7deg); }
  55% { opacity: 1; transform: scale(.95) rotate(.6deg); }
  78% { transform: scale(1.02) rotate(0); }
  100% { opacity: 1; transform: none; }
}
@keyframes tinta {
  0%, 34% { opacity: 0; transform: scale(1); }
  36% { opacity: .55; }
  100% { opacity: 0; transform: scale(1.9); }
}

/* Localiza tu carga */
.localiza { padding-block: var(--seccion); background: var(--niebla); }
.localiza__rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.localiza__intro > p { margin-top: 16px; color: var(--acero); max-width: 30em; }
.localiza__form { margin-top: 32px; }
.localiza__form label { display: block; margin-bottom: 8px; font-weight: 600; font-size: .9375rem; }
.localiza__campo { display: flex; gap: 10px; }
.localiza__campo input {
  flex: 1; min-width: 0; min-height: 52px; padding: 10px 14px; border: 1px solid #9fb0c0; border-radius: 4px;
  font: 600 1.0625rem var(--letra); letter-spacing: .04em; text-transform: uppercase; color: var(--marino); background: var(--blanco);
}
.localiza__campo input::placeholder { color: #9aabbb; letter-spacing: .04em; }
.localiza__campo input[aria-invalid="true"] { border-color: var(--rojo); box-shadow: inset 0 0 0 1px var(--rojo); }
.localiza__campo input:focus-visible { outline: 3px solid var(--cielo); outline-offset: 0; border-color: var(--marino); }
.localiza__campo .boton { min-height: 52px; }
.localiza__demo { margin-top: 12px; font-size: .875rem; color: var(--acero); }
.localiza__mensaje { padding: 28px; border: 1px dashed #b6c6d4; border-radius: 8px; color: var(--acero); }

.carga { padding: clamp(22px, 3vw, 32px); background: var(--blanco); border-radius: 8px; box-shadow: 0 1px 0 var(--linea), 0 18px 40px -24px rgba(10, 46, 85, .35); }
.carga__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.carga__ref { font-size: .9375rem; color: var(--acero); }
.carga__estatus { padding: 6px 12px; border-radius: 999px; background: var(--marino); color: var(--blanco); font-size: .875rem; font-weight: 650; }
.carga__ruta { margin-top: 10px; font-size: 1.375rem; font-weight: 700; font-stretch: 112%; line-height: 1.25; }
.carga__fases { --fase: 0; list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; font-size: .8125rem; color: var(--acero); }
.carga__fases::before, .carga__fases::after { content: ""; position: absolute; top: 7px; left: 12.5%; height: 2px; }
.carga__fases::before { right: 12.5%; background: var(--linea); }
.carga__fases::after { width: calc(75% * var(--fase) / 3); background: var(--rojo); }
.carga__fases li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; text-align: center; }
.carga__fases li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--blanco); border: 2px solid var(--linea); box-sizing: border-box; }
.carga__fases li.hecha::before { background: var(--rojo); border-color: var(--rojo); }
.carga__fases li.actual { color: var(--marino); font-weight: 700; }
.carga__fases li.actual::before { border: 5px solid var(--rojo); }
.carga__datos { margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.carga__datos dt { font-size: .8125rem; color: var(--acero); }
.carga__datos dd { margin: 2px 0 0; font-weight: 600; }
.carga__nota { margin-top: 20px; padding: 14px 16px; background: var(--niebla); border-radius: 6px; font-size: .9375rem; }
.carga .boton { margin-top: 22px; }

/* Preguntas */
.preguntas { padding-block: var(--seccion); }
.preguntas__rejilla { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); }
.preguntas__lista details { border-top: 1px solid var(--linea); }
.preguntas__lista details:last-child { border-bottom: 1px solid var(--linea); }
.preguntas__lista summary {
  display: flex; justify-content: space-between; gap: 24px; padding-block: 20px;
  font-weight: 620; font-size: 1.125rem; cursor: pointer; list-style: none;
}
.preguntas__lista summary::-webkit-details-marker { display: none; }
.preguntas__lista summary::after { content: "+"; flex: none; font-size: 1.5rem; line-height: 1; color: var(--rojo); transition: transform .2s; }
.preguntas__lista details[open] summary::after { transform: rotate(45deg); }
.preguntas__lista details p { padding-bottom: 22px; color: var(--acero); max-width: 40em; }

/* Cotización */
.cotizacion { padding-block: var(--seccion); background: var(--abismo); color: var(--blanco); }
.cotizacion__rejilla { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.cotizacion__intro p { margin-top: 20px; color: #c6d7e7; max-width: 26em; }
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; padding: clamp(24px, 4vw, 44px); background: var(--blanco); color: var(--marino); border-radius: 6px; }
.campo { display: grid; gap: 6px; align-content: start; }
.campo--ancho { grid-column: 1 / -1; }
.campo[hidden] { display: none; }
.perfil { margin: 0; padding: 0; border: 0; min-width: 0; }
.perfil legend { padding: 0; margin-bottom: 6px; font-size: .9375rem; font-weight: 600; }
.perfil__opciones { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #9fb0c0; border-radius: 4px; overflow: hidden; }
.perfil__opciones label { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; cursor: pointer; font-weight: 600; }
.perfil__opciones label + label { border-left: 1px solid #9fb0c0; }
.perfil .perfil__opciones input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--rojo); }   /* le gana a .campo input */
.perfil__opciones label:has(:checked) { background: var(--marino); color: var(--blanco); }
.perfil__opciones label:has(:focus-visible) { outline: 3px solid var(--cielo); outline-offset: -3px; }
.campo label { font-size: .9375rem; font-weight: 600; }
.opcional { font-weight: 400; color: var(--acero); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1px solid #9fb0c0; border-radius: 4px; background: var(--blanco);
  font: 400 1rem/1.4 var(--letra); color: var(--marino);
}
.campo textarea { resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--cielo); outline-offset: 0; border-color: var(--marino); }
.campo [aria-invalid="true"] { border-color: var(--rojo); box-shadow: inset 0 0 0 1px var(--rojo); }
.formulario__ayuda { grid-column: 1 / -1; margin-top: -10px; font-size: .875rem; color: var(--acero); }
.campo--casilla { grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.campo--casilla input { width: 22px; min-height: 22px; height: 22px; accent-color: var(--rojo); }
.campo--casilla label { font-weight: 400; }
.formulario__envio { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.formulario__estado { font-size: .9375rem; }
.campo-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* sólo lo llenan los robots */
.formulario__estado.error { color: var(--rojo); font-weight: 600; }
.formulario--enviado { display: block; }
.formulario--enviado h3 { margin-bottom: 12px; }

/* Pie */
.pie { padding-block: 56px 40px; background: var(--niebla); font-size: .9375rem; }
.pie__rejilla { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: 32px 48px; align-items: start; }
.pie img { width: 240px; height: auto; }
.pie address { font-style: normal; color: var(--acero); }
.pie__enlaces { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.pie__enlaces a { text-decoration: none; }
.pie__enlaces a:hover { text-decoration: underline; }
.pie__legal { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--linea); color: var(--acero); font-size: .875rem; }

/* Enlaces «ver más» de la portada hacia cada página */
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.enlace-mas { display: inline-block; padding-block: 10px; font-weight: 650; font-stretch: 108%; text-decoration-color: var(--rojo); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.enlace-mas:hover { color: var(--rojo); }
.volumen .enlace-mas { text-decoration-color: var(--cielo); }
.volumen .enlace-mas:hover { color: var(--cielo); }
.mas { margin-top: 24px; }

/* Páginas internas */
.navegacion a[aria-current="page"] { border-bottom-color: var(--rojo); }
.migas { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 20px; font-size: .9375rem; color: var(--acero); }
.migas a { text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.encabezado .migas, .cotizacion .migas { color: #9fb7cd; }
.encabezado { min-height: min(640px, 76svh); }
.encabezado__acciones { display: flex; flex-wrap: wrap; gap: 14px; }
.encabezado--sin-foto { min-height: 0; }   /* Personas, mientras no haya foto */
.bloque { padding-block: var(--seccion); }
.bloque--niebla { background: var(--niebla); }
.bloque--oscuro { background: var(--abismo); color: var(--blanco); }
.bloque__intro { margin-top: 20px; color: var(--acero); max-width: 36em; }
.dos h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
.dos > div > p + p { margin-top: 16px; }
.dos .entrada + p { margin-top: 20px; color: var(--acero); max-width: 34em; }
.bloque--oscuro .bloque__intro, .bloque--oscuro .dos p { color: #c6d7e7; }
.bloque--oscuro .dos .entrada { color: var(--blanco); }
.bloque address { font-style: normal; }
.nota { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--linea); font-size: .9375rem; color: var(--acero); max-width: 48em; }
.modalidades__lista--tres { grid-template-columns: repeat(3, 1fr); }

/* Pasos de una operación: secuencia numerada, horizontal en escritorio */
.pasos { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 32px; counter-reset: paso; }
.pasos li { position: relative; padding-top: 60px; counter-increment: paso; }
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: 0; z-index: 1;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--marino); color: var(--blanco); font-weight: 700; font-stretch: 112%;
}
.pasos li:last-child::before { background: var(--rojo); }
.pasos li:not(:last-child)::after { content: ""; position: absolute; left: 40px; right: -32px; top: 19px; height: 2px; background: var(--linea); }
.pasos p { margin-top: 8px; color: var(--acero); }

/* Viñeta con el triángulo rojo del logotipo */
.lista-triangulo { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.lista-triangulo li { position: relative; padding-left: 26px; }
.lista-triangulo li::before { content: ""; position: absolute; left: 0; top: .5em; border: 6px solid transparent; border-bottom: 10px solid var(--rojo); border-top: 0; }

.comparar { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.comparar > div { padding: clamp(24px, 3vw, 40px); background: var(--blanco); border-top: 4px solid var(--marino); border-radius: 4px; }
.comparar > div + div { border-top-color: var(--rojo); }
.comparar__siglas { margin-top: 4px; font-size: .9375rem; color: var(--acero); }
.comparar .lista-triangulo { color: var(--acero); }

.llamado { padding-block: clamp(64px, 8vw, 112px); background: var(--abismo); color: var(--blanco); }
.llamado__fila { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; }
.llamado p { margin-top: 16px; color: #c6d7e7; max-width: 34em; }
.llamado__acciones { display: flex; flex-wrap: wrap; gap: 14px; }

.contacto { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(169, 203, 230, .25); font-style: normal; color: #c6d7e7; }
.contacto a { color: var(--blanco); }

/* Tableta */
@media (max-width: 960px) {
  .portada__rejilla { grid-template-columns: 1fr; min-height: 0; }
  .globo { max-width: 620px; width: 100%; justify-self: center; }
  .modalidades__lista { grid-template-columns: 1fr 1fr; }
  .importaciones__rejilla, .dos, .nosotros__rejilla, .preguntas__rejilla, .cotizacion__rejilla, .localiza__rejilla { grid-template-columns: 1fr; }
  .proceso__rejilla { grid-template-columns: 1fr; gap: 16px; }
  .proceso__pasos { margin-top: 12px; }
  .proceso__pasos li::after { display: none; }
  .proceso:not(.proceso--quieto) .proceso__pasos li:not(.activo) { display: none; }
  .escena { max-height: 52svh; }
  .volumen, .encabezado { display: block; min-height: 0; padding-top: 0; }
  .encabezado--sin-foto { padding-top: var(--seccion); }
  .volumen__medio, .encabezado__medio { position: relative; z-index: auto; height: min(68vw, 460px); margin-bottom: 8px; }
  .volumen__medio img, .encabezado__medio img { object-position: 74% 50%; }
  .volumen__medio::after, .encabezado__medio::after { background: linear-gradient(180deg, rgba(2, 27, 54, 0) 55%, var(--abismo) 100%); }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .pasos { grid-auto-flow: row; gap: 0; }
  .pasos li { padding: 0 0 28px 64px; }
  .pasos li:not(:last-child)::after { left: 19px; right: auto; top: 40px; bottom: 0; width: 2px; height: auto; }
  .modalidades__lista--tres { grid-template-columns: 1fr; }
}

/* Teléfono */
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .entrada, .portada__entrada { font-size: 1.125rem; }
  .cabecera__logo img { height: 52px; }
  .globo__ruta { grid-template-columns: 1fr; align-content: start; margin-top: 8px; }
  .globo__tramos { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; margin-top: 10px; }
  .modalidades__lista, .incluye, .soluciones__lista, .datos-lista, .comparar, .pie__rejilla, .formulario, .carga__datos { grid-template-columns: 1fr; }
  .proceso h2 { font-size: 1.75rem; }
  .proceso__pasos li { padding-block: 10px; }
  .localiza__campo { flex-direction: column; }
  .modalidades__lista { gap: 32px; }
  .formulario__ayuda { margin-top: -6px; }
}