@import "./tokens.css";

/* =====================================================================
   DCORRALOT — hoja única. Reglas del sistema, en este orden:
     1. Base y accesibilidad
     2. Estructura (contenedor, secciones, ritmo vertical)
     3. Cabecera y navegación
     4. Héroe y banners
     5. Bloques de contenido (tarjetas, servicios, pasos, cifras)
     6. Formularios y botones
     7. Avisos, tablas, datos y estados
     8. Área privada
     9. Prosa legal
    10. Pie y WhatsApp

   Ningún valor suelto: todo sale de tokens.css.
   ===================================================================== */

/* ── 1. Base ───────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  /* La cabecera es fija: los saltos de ancla aterrizan por debajo de ella. */
  scroll-padding-top: calc(var(--alto-cabecera) + var(--e4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--texto-base);
  line-height: var(--alto-texto);
  color: var(--texto);
  background: var(--superficie);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* El pie, siempre abajo: con poco contenido quedaba a media pantalla. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Nada se sale de ancho: el desbordamiento horizontal en móvil es el error
     más caro de una web, porque el usuario lo lee como "está rota". */
  overflow-x: hidden;
}

h1,
h2,
h3 {
  margin: 0 0 var(--e3);
  font-weight: 600;
  line-height: var(--alto-titular);
  color: var(--texto);
  text-wrap: balance;
}

h1 {
  font-size: var(--texto-2xl);
}

h2 {
  font-size: var(--texto-xl);
}

h3 {
  font-size: var(--texto-lg);
}

p {
  margin: 0 0 var(--e4);
  max-width: var(--ancho-lectura);
}

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

a {
  color: var(--marca);
  text-underline-offset: 0.15em;
}

img {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--marca);
  color: var(--blanco);
}

/* --- Accesibilidad --- */
.skip-link {
  position: absolute;
  left: var(--e2);
  top: -4rem;
  z-index: 100;
  background: var(--marca);
  color: var(--blanco);
  padding: var(--e3) var(--e4);
  border-radius: 0 0 var(--radio-sm) var(--radio-sm);
  text-decoration: none;
  transition: top var(--transicion);
}

.skip-link:focus {
  top: 0;
}

/* Un foco visible SIEMPRE, y con el mismo grosor en toda la web: es el único
   camino de quien navega con teclado. */
:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

.cabecera :focus-visible,
.hero :focus-visible,
.banner :focus-visible,
.pie :focus-visible {
  outline-color: var(--blanco);
}

main:focus,
#solicitar:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── 2. Estructura ─────────────────────────────────────────────────── */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e5);
}

main:has(> .seccion:last-child) {
  padding-bottom: 0;
}

main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: var(--e7) var(--e5) var(--e8);
  display: flex;
  flex-direction: column;
  gap: var(--e5);
}

/* Una sección a sangre completa (fondo de borde a borde) con su contenido
   centrado dentro. Se usa para romper el "todo son tarjetas blancas". */
.seccion {
  margin-inline: calc(50% - 50vw);
  padding-block: var(--e-seccion);
  width: 100vw;
}

.seccion--suave {
  background: var(--gris-50);
  border-block: 1px solid var(--borde);
}

/* Mismo ancho y mismo padding que `main`: así el borde izquierdo del texto de
   una banda cae exactamente sobre el de las tarjetas de fuera. */
.seccion__interior {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e5);
}

.seccion__cabecera {
  max-width: var(--ancho-lectura);
  margin-bottom: var(--e6);
}

.seccion__cabecera p {
  color: var(--texto-suave);
  font-size: var(--texto-lg);
  margin: 0;
}

/* Antetítulo: sitúa la sección en una palabra sin robarle jerarquía al H2. */
.eyebrow {
  display: block;
  margin-bottom: var(--e2);
  font-size: var(--texto-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--marca);
}

/* ── 3. Cabecera y navegación ──────────────────────────────────────── */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--marca-honda);
  color: var(--blanco);
}

.cabecera__interior {
  max-width: var(--ancho);
  margin-inline: auto;
  min-height: var(--alto-cabecera);
  padding: var(--e3) var(--e5);
  display: flex;
  align-items: center;
  gap: var(--e5);
}

.cabecera__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.cabecera__logo img {
  height: 44px;
  width: auto;
  display: block;
}

.cabecera__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--e5);
}

.cabecera__nav a {
  position: relative;
  padding: var(--e2) 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--texto-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transicion);
}

.cabecera__nav a:hover {
  color: var(--blanco);
}

/* Página activa: subrayado ámbar, que sobre el azul se ve de lejos. */
.cabecera__nav a[aria-current="page"] {
  color: var(--blanco);
}

.cabecera__nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  border-radius: var(--radio-pildora);
  background: var(--acento);
}

/* "Salir" es un POST, así que es un <button> disfrazado de enlace. */
.cabecera__salir {
  display: flex;
}

.cabecera__salir button {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--texto-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}

.cabecera__salir button:hover {
  color: var(--blanco);
}

/* --- Menú de móvil ---
   Una casilla oculta y su etiqueta, sin una línea de JavaScript: el menú abre
   y cierra con teclado y con lector de pantalla, y si el JS falla o tarda, la
   web sigue navegable. Que es lo que importa cuando alguien la abre desde el
   móvil en un área de servicio. */
.menu-check {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.menu-boton {
  display: none;
  align-items: center;
  gap: var(--e2);
  margin-left: auto;
  padding: var(--e3);
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radio-sm);
  color: var(--blanco);
  font-size: var(--texto-sm);
  font-weight: 600;
  cursor: pointer;
}

.menu-check:focus-visible + .menu-boton {
  outline: 3px solid var(--blanco);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .menu-boton {
    display: inline-flex;
  }

  .menu-check:checked + .menu-boton {
    border-color: var(--blanco);
    background: rgba(255, 255, 255, 0.12);
  }

  .cabecera__nav {
    display: none;
  }

  .menu-check:checked ~ .cabecera__nav {
    position: absolute;
    right: var(--e5);
    left: var(--e5);
    top: calc(100% - var(--e2));
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--e1);
    min-width: 232px;
    padding: var(--e3);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-3);
  }

  .cabecera__nav a,
  .cabecera__salir button {
    padding: var(--e3);
    border-radius: var(--radio-sm);
    color: var(--texto);
    font-size: var(--texto-base);
  }

  .cabecera__nav a:hover,
  .cabecera__salir button:hover {
    background: var(--marca-suave);
    color: var(--marca);
  }

  .cabecera__nav a[aria-current="page"] {
    color: var(--marca);
    background: var(--marca-suave);
  }

  .cabecera__nav a[aria-current="page"]::after {
    display: none;
  }

  .cabecera__salir {
    border-top: 1px solid var(--borde);
    margin-top: var(--e2);
    padding-top: var(--e2);
  }
}

@media (max-width: 480px) {
  .cabecera__logo img {
    height: 36px;
  }

  .cabecera__interior {
    padding-inline: var(--e4);
  }
}

/* --- Selector de idioma: desplegable con banderas ---
   Discreto cerrado (sin caja con borde compitiendo con el menú), evidente
   abierto. La bandera va en SVG con las esquinas redondeadas y un filo tenue,
   que es lo que evita que un rectángulo de color plano parezca una pegatina. */
.idiomas {
  position: relative;
  flex-shrink: 0;
}

.idiomas__actual {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: 40px;
  padding: 0 var(--e3);
  border-radius: var(--radio-sm);
  background: rgba(255, 255, 255, 0.1);
  color: var(--blanco);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  list-style: none;
  transition: background var(--transicion);
}

.idiomas__actual::-webkit-details-marker {
  display: none;
}

.idiomas__actual:hover,
.idiomas[open] .idiomas__actual {
  background: rgba(255, 255, 255, 0.2);
}

/* Flecha dibujada con bordes: no depende del nombre de la familia de iconos. */
.idiomas__flecha {
  width: 7px;
  height: 7px;
  margin: -3px 0 0 var(--e1);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.75;
  transition: transform var(--transicion);
}

.idiomas[open] .idiomas__flecha {
  transform: rotate(-135deg);
  margin-top: 2px;
}

.idiomas__lista {
  position: absolute;
  right: 0;
  top: calc(100% + var(--e2));
  z-index: 70;
  min-width: 190px;
  margin: 0;
  padding: var(--e2);
  list-style: none;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-3);
  animation: desplegar 0.14s ease;
}

@keyframes desplegar {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* En la cabecera cada opción es un <button>: sin quitarle borde, fondo y
   ancho propios del navegador salían como botones grises de distinto ancho.
   Aquí es una fila de lista, todas del mismo ancho. */
.idiomas__opcion {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 0 var(--e3);
  border: 0;
  border-radius: var(--radio-sm);
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: var(--texto-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  transition: background var(--transicion);
}

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

.idiomas__opcion span {
  flex: 1;
}

.idiomas__opcion:hover {
  background: var(--marca-suave);
}

.idiomas__opcion[aria-current="true"] {
  font-weight: 700;
  color: var(--marca);
  background: var(--marca-suave);
}

.idiomas__opcion .fa-check {
  font-size: 0.75rem;
}

/* La bandera, con esquinas y filo: un SVG a pelo se ve como un recorte. */
.bandera {
  display: block;
  width: 21px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.idiomas__actual .bandera {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* ── 4. Héroe y banners ────────────────────────────────────────────── */

/* El texto va a la izquierda, no centrado: se lee antes y deja ver la foto,
   que es la que cuenta a qué se dedica la empresa. El velo es un degradado
   direccional —opaco donde está el texto, transparente donde está el camión—
   en vez de una capa plana que apaga la imagen entera. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(78vh, 620px);
  background: var(--marca-honda) url("/camion.jpg") center 60% / cover no-repeat;
  color: var(--blanco);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(6, 26, 51, 0.94) 0%, rgba(6, 26, 51, 0.82) 42%, rgba(6, 26, 51, 0.28) 100%),
    linear-gradient(to bottom, rgba(6, 26, 51, 0.5) 0%, transparent 30%);
}

.hero__contenido {
  position: relative;
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: var(--e8) var(--e5);
}

.hero__eyebrow {
  display: inline-block;
  margin-bottom: var(--e4);
  padding: var(--e1) var(--e3);
  border-radius: var(--radio-pildora);
  background: rgba(244, 183, 64, 0.16);
  border: 1px solid rgba(244, 183, 64, 0.45);
  color: var(--acento);
  font-size: var(--texto-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hero__titulo {
  max-width: 16ch;
  margin: 0 0 var(--e4);
  color: var(--blanco);
  font-size: var(--texto-3xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hero__sub {
  max-width: 46ch;
  margin: 0 0 var(--e6);
  font-size: var(--texto-lg);
  color: rgba(255, 255, 255, 0.92);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
}

@media (max-width: 640px) {
  .hero {
    min-height: 0;
  }

  .hero__contenido {
    padding: var(--e7) var(--e4);
  }

  .hero__overlay {
    background: linear-gradient(180deg, rgba(6, 26, 51, 0.86) 0%, rgba(6, 26, 51, 0.92) 100%);
  }

  /* Botones a ancho completo: apilados y con anchos distintos se ven como un
     descuido, y además el pulgar acierta menos. */
  .hero__acciones .btn {
    width: 100%;
  }

  .hero__eyebrow {
    font-size: var(--texto-xs);
  }
}

/* Cabecera de página interna: la misma foto, más baja y sin CTA. */
.banner {
  position: relative;
  background: var(--marca-honda) url("/camion.jpg") center 42% / cover no-repeat;
  color: var(--blanco);
}

.banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(6, 26, 51, 0.93) 0%, rgba(6, 26, 51, 0.78) 100%);
}

.banner__contenido {
  position: relative;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: var(--e7) var(--e5);
}

.banner__titulo {
  margin: 0;
  color: var(--blanco);
  font-size: var(--texto-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.banner__titulo::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  border-radius: var(--radio-pildora);
  background: var(--acento);
  margin-top: var(--e3);
}

.banner__sub {
  max-width: 60ch;
  margin: var(--e3) 0 0;
  color: rgba(255, 255, 255, 0.9);
}

/* ── 5. Bloques de contenido ───────────────────────────────────────── */

.card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-1);
  padding: var(--e6);
}

@media (max-width: 560px) {
  .card {
    padding: var(--e5) var(--e4);
  }
}

.card h2:first-child,
.card h1:first-child {
  margin-top: 0;
}

.subtitulo {
  margin-top: calc(-1 * var(--e2));
  margin-bottom: var(--e5);
  color: var(--texto-suave);
}

/* La tarjeta de la tarea principal (pedir presupuesto) pesa más que el resto:
   más elevación y un filete de marca arriba. Si todo tiene el mismo peso, no
   hay jerarquía y el ojo no sabe por dónde empezar. */
.card--principal {
  box-shadow: var(--sombra-3);
  border-color: transparent;
  border-top: 4px solid var(--marca);
  padding: var(--e7);
}

@media (max-width: 560px) {
  .card--principal {
    padding: var(--e5) var(--e4);
  }
}

/* --- Rejilla de servicios (portada) --- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e4);
}

.feature {
  display: flex;
  flex-direction: column;
  padding: var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  transition:
    box-shadow var(--transicion),
    transform var(--transicion);
}

.feature:hover {
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
}

.feature h3 {
  margin: var(--e4) 0 var(--e2);
  font-size: var(--texto-base);
}

.feature p {
  margin: 0;
  color: var(--texto-suave);
  font-size: var(--texto-sm);
}

.feature__icono,
.servicio__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radio);
  background: var(--marca-suave);
  color: var(--marca);
  font-size: 1.15rem;
}

/* --- Servicios (página): icono a un lado, texto al otro --- */
.servicios {
  display: grid;
  gap: var(--e4);
}

.servicio {
  display: flex;
  gap: var(--e5);
  padding: var(--e6);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
}

.servicio h2 {
  margin: 0 0 var(--e2);
  font-size: var(--texto-lg);
}

.servicio p {
  margin: 0;
  color: var(--texto-suave);
}

@media (max-width: 560px) {
  .servicio {
    flex-direction: column;
    gap: var(--e3);
    padding: var(--e5) var(--e4);
  }
}

/* --- Cómo funciona: pasos numerados --- */
.como {
  margin: 0;
}

.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e5);
}

.paso h3 {
  margin: var(--e3) 0 var(--e2);
  font-size: var(--texto-base);
}

.paso p {
  margin: 0;
  color: var(--texto-suave);
  font-size: var(--texto-sm);
}

.paso__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radio-pildora);
  background: var(--marca);
  color: var(--blanco);
  font-weight: 700;
  font-size: var(--texto-sm);
}

/* --- Cifras (área privada y quiénes somos) --- */
.resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e4);
}

.resumen__dato {
  display: block;
  padding: var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transicion);
}

a.resumen__dato:hover {
  border-color: var(--marca);
}

.resumen__num {
  display: block;
  font-size: var(--texto-2xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--marca);
  letter-spacing: -0.02em;
}

.resumen__txt {
  display: block;
  font-size: var(--texto-sm);
  color: var(--texto-suave);
}

/* --- Retrato del fundador --- */
.retrato {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: var(--e6);
  align-items: start;
}

.retrato__figura img {
  width: 100%;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-2);
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
}

.retrato__figura {
  margin: 0;
}

/* El sello de los 10 años viene de su marca en un PNG ancho con el escudo a la
   izquierda y el logotipo en blanco a la derecha (invisible sobre fondo
   claro). Se recorta con la caja: se enseña solo el escudo. */
.retrato__sello {
  width: 104px;
  height: 104px;
  object-fit: cover;
  object-position: 6% center;
  float: right;
  margin: 0 0 var(--e3) var(--e4);
}

.retrato__pie {
  margin: var(--e3) 0 0;
  font-size: var(--texto-sm);
  color: var(--texto-suave);
}

.retrato__pie strong {
  display: block;
  color: var(--texto);
  font-size: var(--texto-base);
}

@media (max-width: 720px) {
  .retrato {
    grid-template-columns: 1fr;
    gap: var(--e5);
  }

  .retrato__figura img {
    max-width: 260px;
  }
}

/* --- Llamada a la acción --- */
.llamada {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e5);
  background: var(--marca-suave);
  border: 1px solid var(--marca-tenue);
}

.llamada h2 {
  margin: 0 0 var(--e1);
}

.llamada p {
  margin: 0;
  color: var(--texto-suave);
}

/* ── 6. Formularios y botones ──────────────────────────────────────── */

.campo {
  margin-bottom: var(--e4);
}

.campo label {
  display: block;
  margin-bottom: var(--e2);
  font-size: var(--texto-sm);
  font-weight: 600;
}

/* Icono dentro del control: se posiciona sobre el input, y el input reserva
   el hueco con el padding. Nada de anidar el icono en un contenedor con
   borde, que obliga a duplicar los estados de foco. */
.entrada {
  position: relative;
  display: flex;
  align-items: center;
}

.entrada > i {
  position: absolute;
  left: var(--e3);
  color: var(--gris-500);
  pointer-events: none;
  font-size: 0.95rem;
}

.entrada--origen > i {
  color: var(--exito);
}

.entrada--destino > i {
  color: var(--peligro);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  /* 44px de alto mínimo: es el tamaño de destino táctil que piden tanto las
     WCAG 2.2 como las guías de Apple y Google. */
  min-height: 44px;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  font: inherit;
  font-size: var(--texto-base);
  color: var(--texto);
  background: var(--superficie);
  transition:
    border-color var(--transicion),
    box-shadow var(--transicion);
}

.entrada input,
.entrada select {
  padding-left: calc(var(--e6) + var(--e1));
}

.campo textarea {
  resize: vertical;
  min-height: 140px;
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--gris-500);
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
  border-color: var(--gris-500);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-tenue);
}

.campo input:disabled,
.campo select:disabled,
.campo textarea:disabled {
  background: var(--gris-100);
  color: var(--texto-suave);
  cursor: not-allowed;
}

/* Obligatorio marcado sin tocar cada etiqueta. */
.campo:has(input:required) label::after,
.campo:has(select:required) label::after,
.campo:has(textarea:required) label::after {
  content: " *";
  color: var(--peligro);
}

.form-nota {
  margin: calc(-1 * var(--e2)) 0 var(--e4);
  font-size: var(--texto-sm);
  color: var(--texto-suave);
}

/* Dentro de un campo la nota va DEBAJO del control, no pisándolo: el margen
   negativo solo tiene sentido cuando la nota sigue a un campo ya cerrado. */
.campo .form-nota {
  margin: var(--e2) 0 0;
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 var(--e4);
}

/* Bloque de ruta: origen y destino como un par, con la flecha en medio. */
.ruta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--e2) var(--e4);
  margin-bottom: var(--e5);
  padding: var(--e5);
  background: var(--gris-50);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.ruta .campo {
  margin-bottom: 0;
}

.ruta__flecha {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  color: var(--gris-500);
}

@media (max-width: 640px) {
  .ruta {
    grid-template-columns: 1fr;
    padding: var(--e4);
  }

  .ruta__flecha {
    height: auto;
    margin: var(--e1) 0;
    transform: rotate(90deg);
  }
}

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
}

.check input {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin-top: 2px;
  accent-color: var(--marca);
  flex-shrink: 0;
}

.check label {
  margin: 0;
  font-weight: 400;
  font-size: var(--texto-sm);
}

/* Sugerencias de Google Places, para que no desentonen. */
.pac-container {
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-3);
  font-family: var(--fuente);
  margin-top: var(--e1);
}

.pac-item {
  padding: var(--e2) var(--e3);
  font-size: var(--texto-sm);
  cursor: pointer;
}

/* --- Formulario progresivo de la portada --- */
.solicitud__pista {
  display: none;
}

html.js .solicitud__pista {
  display: block;
}

html.js .solicitud__resto {
  display: none;
}

html.js .solicitud--completa .solicitud__pista {
  display: none;
}

html.js .solicitud--completa .solicitud__resto {
  display: block;
  animation: revelar 0.18s ease;
}

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

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 44px;
  padding: var(--e3) var(--e5);
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
  font: inherit;
  font-size: var(--texto-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    background var(--transicion),
    border-color var(--transicion),
    box-shadow var(--transicion);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn--primario {
  background: var(--marca);
  color: var(--blanco);
}

.btn--primario:hover:not(:disabled) {
  background: var(--marca-fuerte);
}

.btn--secundario {
  background: var(--superficie);
  border-color: var(--borde-fuerte);
  color: var(--texto);
}

.btn--secundario:hover:not(:disabled) {
  border-color: var(--marca);
  background: var(--marca-suave);
  color: var(--marca);
}

/* Sobre la foto del héroe: blanco sólido para el primario y contorno para el
   secundario. Un botón traslúcido sobre una foto no se lee. */
.btn--hero {
  background: var(--blanco);
  color: var(--marca-honda);
  box-shadow: var(--sombra-2);
}

.btn--hero:hover:not(:disabled) {
  background: var(--marca-suave);
}

.btn--fantasma {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--blanco);
}

.btn--fantasma:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--blanco);
}

.btn--grande {
  min-height: 52px;
  padding: var(--e3) var(--e6);
  font-size: var(--texto-lg);
}

.btn--menudo {
  min-height: 36px;
  padding: var(--e2) var(--e3);
  font-size: var(--texto-sm);
  white-space: nowrap;
}

.btn--enlace {
  min-height: 0;
  padding: var(--e2) 0;
  background: none;
  color: var(--marca);
}

.btn--enlace:hover:not(:disabled) {
  text-decoration: underline;
}

/* El paso siguiente del transportista: verde, ancho completo, imposible de
   fallar con guantes puestos. */
.btn--paso {
  width: 100%;
  min-height: 56px;
  background: var(--exito);
  color: var(--blanco);
  font-size: var(--texto-lg);
}

.btn--paso:hover:not(:disabled) {
  background: #0b5c26;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
}

.acciones--secundarias {
  margin-top: var(--e4);
  justify-content: space-between;
}

/* ── 7. Avisos, datos, tablas y estados ────────────────────────────── */

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e4);
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--radio-sm);
  color: var(--texto);
  font-size: var(--texto-sm);
}

.aviso > i {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.aviso--exito {
  background: #f0faf3;
  border-color: #bce3c9;
  border-left-color: var(--exito);
}

.aviso--exito > i {
  color: var(--exito);
}

.aviso--info {
  background: var(--marca-suave);
  border-color: #c8dcf0;
  border-left-color: var(--marca);
}

.aviso--info > i {
  color: var(--marca);
}

.aviso--candado {
  background: #fff9ee;
  border-color: #ecd9a8;
  border-left-color: var(--aviso);
}

.aviso--candado > i {
  color: var(--aviso);
}

.aviso--error {
  background: #fdf3f2;
  border-color: #eeb4b0;
  border-left-color: var(--peligro);
}

.aviso--error > i {
  color: var(--peligro);
}

/* --- Pares clave/valor --- */
.datos {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--e3) var(--e5);
  margin: 0;
}

.datos dt {
  color: var(--texto-suave);
  font-size: var(--texto-sm);
}

.datos dd {
  margin: 0;
  font-weight: 600;
}

@media (max-width: 480px) {
  .datos {
    grid-template-columns: 1fr;
    gap: var(--e1);
  }

  .datos dd {
    margin-bottom: var(--e3);
  }
}

/* --- Estados --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: var(--e1) var(--e3);
  border-radius: var(--radio-pildora);
  font-size: var(--texto-xs);
  font-weight: 700;
  background: var(--gris-100);
  color: var(--gris-600);
}

.badge--cargado,
.badge--llegada_carga,
.badge--transportista_asignado {
  background: var(--marca-suave);
  color: var(--marca);
}

.badge--en_aduana {
  background: #fff4d6;
  color: var(--aviso);
}

.badge--aduana_pasada,
.badge--entregado,
.badge--cerrado {
  background: #eaf7ee;
  color: var(--exito);
}

.badge--incidencia,
.badge--anulado {
  background: #fdeceb;
  color: var(--peligro);
}

.estado-actual {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3) var(--e5);
}

.estado-actual__eta {
  color: var(--texto-suave);
  font-size: var(--texto-sm);
}

.estado-actual__eta i {
  margin-right: var(--e1);
  color: var(--marca);
}

.estado-actual__eta strong {
  color: var(--texto);
}

/* Ilustración del estado del transporte: la animación va dentro del SVG. */
.estado-ilustracion {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--e5) auto;
}

/* Preloader al pedir cotización: ocupa el sitio del formulario dentro de la tarjeta. */
.dc-preload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e3);
  padding: var(--e6) var(--e4);
}

.dc-preload img {
  max-width: 100%;
  height: auto;
}

.dc-preload p {
  margin: 0;
  color: var(--texto);
  font-weight: 600;
}

/* --- Progreso del envío --- */
.stepper {
  list-style: none;
  margin: var(--e6) 0 0;
  padding: 0;
  display: flex;
}

.stepper li {
  flex: 1;
  position: relative;
  text-align: center;
  font-size: var(--texto-xs);
  color: var(--texto-suave);
}

.stepper li::before {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(-50% + 18px);
  right: calc(50% + 18px);
  height: 2px;
  background: var(--borde-fuerte);
}

.stepper li:first-child::before {
  display: none;
}

.stepper li.stepper--hecho::before,
.stepper li.stepper--actual::before {
  background: var(--marca);
}

.stepper__punto {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radio-pildora);
  background: var(--superficie);
  border: 2px solid var(--borde-fuerte);
  color: var(--texto-suave);
  font-size: var(--texto-sm);
  margin-bottom: var(--e2);
}

.stepper--hecho .stepper__punto {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--blanco);
}

.stepper--actual {
  color: var(--marca);
  font-weight: 600;
}

.stepper--actual .stepper__punto {
  border-color: var(--marca);
  color: var(--marca);
  box-shadow: 0 0 0 4px var(--marca-tenue);
}

.stepper__nombre {
  display: block;
  padding: 0 var(--e1);
}

@media (max-width: 640px) {
  .stepper__nombre {
    display: none;
  }

  .stepper--actual .stepper__nombre {
    display: block;
  }
}

/* Cabecera del seguimiento: la referencia que dicta el cliente al llamar y la ruta, que es lo que busca. */
.dc-envio-cabecera {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}

.dc-envio-cabecera__referencia {
  align-self: flex-start;
  padding: 2px var(--e2);
  border-radius: var(--radio-pildora);
  background: var(--marca-suave);
  color: var(--marca);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.dc-envio-cabecera__ruta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e1) var(--e3);
  margin: 0;
  line-height: 1.2;
}

.dc-envio-cabecera__eta {
  margin: 0;
  color: var(--texto-suave);
}

.dc-envio-cabecera__eta strong {
  color: var(--texto);
}

.dc-envio-cabecera__ruta i {
  color: var(--marca);
  font-size: 0.8em;
}

/* Datos del envío en fichas: se leen de un vistazo y no dejan media tarjeta en blanco. */
.dc-envio-camion {
  display: flex;
  justify-content: center;
  margin-bottom: var(--e5);
  padding: var(--e3) var(--e4) 0;
  border-radius: var(--radio);
  background: linear-gradient(180deg, var(--marca-suave), transparent);
}

.dc-envio-camion img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
}

/* Una franja sin cajas: los datos separados por una línea fina. La línea del primero de cada fila
   se sale del contenedor por el margen negativo y queda recortada, así ninguna fila empieza con raya. */
.dc-envio-datos {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--e5);
  margin: 0 0 0 calc(-1 * var(--e5));
  overflow: hidden;
}

.dc-envio-dato {
  flex: 1 1 150px;
  margin-left: -1px;
  padding: 0 var(--e5);
  border-left: 1px solid var(--borde);
}

.dc-envio-dato dt {
  display: flex;
  align-items: center;
  gap: var(--e2);
  color: var(--texto-suave);
  font-size: var(--texto-xs);
}

.dc-envio-dato dt i {
  color: var(--texto-suave);
  font-size: 0.85em;
}

.dc-envio-dato dd {
  margin: var(--e1) 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--texto);
}

.dc-envio-dato--precio dd {
  color: var(--marca);
}

/* Actualizaciones del envío: línea de tiempo, lo más reciente arriba y en una caja. */
.dc-act-titulo {
  margin: 0 0 var(--e5);
}

.dc-act-lista {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dc-act-lista::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 11px;
  width: 2px;
  background: var(--borde);
}

.dc-act {
  list-style: none;
  --c: var(--marca);
  --f: var(--marca-suave);
  position: relative;
  padding: 0 0 var(--e5) 38px;
}

.dc-act:last-child {
  padding-bottom: 0;
}

.dc-act--retraso {
  --c: #b45309;
  --f: #fef3c7;
}

.dc-act--aduana {
  --c: #6d28d9;
  --f: #f3e8ff;
}

.dc-act--incidencia {
  --c: #c2410c;
  --f: #ffedd5;
}

.dc-act--resuelto {
  --c: var(--exito);
  --f: #dcfce7;
}

.dc-act__punto {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid var(--superficie);
  background: var(--c);
  box-shadow: 0 0 0 2px var(--c);
}

.dc-act--ultima .dc-act__punto {
  top: 14px;
}

.dc-act--ultima .dc-act__caja {
  margin-left: calc(-1 * var(--e3));
  padding: var(--e3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--fondo);
}

.dc-act__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  color: var(--texto-suave);
  font-size: var(--texto-xs);
}

.dc-act__tipo {
  padding: 2px var(--e2);
  border-radius: var(--radio-pildora);
  background: var(--f);
  color: var(--c);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.dc-act__rango {
  padding: 2px var(--e2);
  border-radius: var(--radio-pildora);
  background: var(--marca-suave);
  color: var(--texto);
  font-weight: 600;
}

.dc-act__texto {
  margin: var(--e1) 0 0;
  line-height: 1.45;
  white-space: pre-line;
}

/* --- Barra del seguimiento del cliente --- */
/* Colores del diseño de Angel (dc-timeline-*.svg). El ancho lo decide el contenedor, no la pantalla. */
.dc-linea-marco {
  container-type: inline-size;
  margin: var(--e6) 0 0;
}

.dc-linea {
  --d: 44px;
  --da: 54px;
  --ic: 24px;
  --ica: 29px;
  --grosor: 6px;
  --paso-t: 0.32s;
  --azul-claro: #1aa9f2;
  --azul: #0a58b8;
  --verde-claro: #4fd486;
  --verde: #188a52;
  --rojo-claro: #ff5d58;
  --rojo: #c7192d;
  --gris-pista: #e2e8f0;
  --gris-borde: #cbd5e1;
  --gris-apagado: #94a3b8;
  --gris-texto: #334155;
  position: relative;
}

.dc-linea__pista {
  position: absolute;
  top: calc(var(--da) / 2 - var(--grosor) / 2);
  left: calc(50% / var(--pasos));
  right: calc(50% / var(--pasos));
  height: var(--grosor);
  border-radius: var(--grosor);
  background: var(--gris-pista);
}

.dc-linea--cancelada .dc-linea__pista {
  background: radial-gradient(circle, var(--gris-pista) calc(var(--grosor) / 2), transparent calc(var(--grosor) / 2 + 0.5px)) 0 50% / 14px var(--grosor) repeat-x;
}

.dc-linea__progreso {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--actual) * 100% / (var(--pasos) - 1));
  border-radius: inherit;
  background: linear-gradient(90deg, var(--azul), var(--azul-claro));
  transform-origin: left center;
  animation: dc-linea-dibujar calc(var(--actual) * var(--paso-t)) linear both;
}

.dc-linea__siguiente {
  position: absolute;
  top: 1px;
  left: calc(var(--actual) * 100% / (var(--pasos) - 1) + var(--da) / 2 + 7px);
  width: max(0px, calc(100% / (var(--pasos) - 1) - var(--da) / 2 - var(--d) / 2 - 13px));
  height: calc(var(--grosor) - 2px);
  border-radius: var(--grosor);
  background: repeating-linear-gradient(90deg, var(--azul-claro) 0 6px, transparent 6px 18px);
  opacity: 0.55;
  animation: dc-linea-fluir 0.7s linear infinite, dc-linea-aparecer 0.4s ease-out calc(var(--actual) * var(--paso-t) + 0.3s) both;
}

.dc-linea__pasos {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.dc-linea__paso {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dc-linea__punto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--da);
  height: var(--da);
}

.dc-linea__circulo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gris-borde);
  color: var(--gris-apagado);
}

.dc-linea__icono {
  width: var(--ic);
  height: var(--ic);
  overflow: visible;
}

.dc-linea__rueda {
  fill: #fff;
}

.dc-linea__paso--anulado .dc-linea__circulo {
  opacity: 0.5;
}

.dc-linea__paso--hecho .dc-linea__circulo,
.dc-linea__paso--actual .dc-linea__circulo {
  background: linear-gradient(135deg, var(--azul-claro), var(--azul));
  border: 3px solid #fff;
  color: #fff;
  box-shadow: 0 4px 8px rgba(8, 45, 89, 0.2);
  animation: dc-linea-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) calc(var(--i) * var(--paso-t)) both;
}

.dc-linea__paso--hecho .dc-linea__rueda,
.dc-linea__paso--actual .dc-linea__rueda {
  fill: var(--azul);
}

.dc-linea__paso--actual .dc-linea__circulo {
  width: var(--da);
  height: var(--da);
  border-width: 3.5px;
}

.dc-linea__paso--actual .dc-linea__icono {
  width: var(--ica);
  height: var(--ica);
}

.dc-linea--completada .dc-linea__paso--actual .dc-linea__circulo {
  background: linear-gradient(135deg, var(--verde-claro), var(--verde));
}

.dc-linea--cancelada .dc-linea__paso--actual .dc-linea__circulo {
  background: linear-gradient(135deg, var(--rojo-claro), var(--rojo));
  animation: dc-linea-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.1s both, dc-linea-sacudir 0.55s ease-in-out 0.7s both;
}

.dc-linea__halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--azul-claro);
  opacity: 0;
  animation: dc-linea-halo 2.2s ease-out calc(var(--i) * var(--paso-t) + 0.45s) infinite;
}

.dc-linea--completada .dc-linea__halo {
  background: #2fbf71;
}

.dc-linea--cancelada .dc-linea__halo {
  background: #e5343e;
  animation-delay: 0.55s;
}

.dc-linea__check {
  position: absolute;
  top: calc(50% - 16px - 9.5px);
  left: calc(50% + 16px - 9.5px);
  width: 19px;
  height: 19px;
  animation: dc-linea-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) calc(var(--i) * var(--paso-t)) both;
}

.dc-linea__nombre {
  display: block;
  margin-top: var(--e2);
  padding: 0 var(--e1);
  font-size: var(--texto-sm);
  font-weight: 500;
  line-height: 1.25;
  color: var(--gris-apagado);
  overflow-wrap: anywhere;
}

.dc-linea__paso--hecho .dc-linea__nombre {
  color: var(--gris-texto);
}

.dc-linea__paso--actual .dc-linea__nombre {
  font-weight: 700;
  color: var(--azul);
}

.dc-linea--completada .dc-linea__paso--actual .dc-linea__nombre {
  color: var(--verde);
}

.dc-linea--cancelada .dc-linea__paso--actual .dc-linea__nombre {
  color: var(--rojo);
}

/* Cada icono se mueve solo en el paso actual, como en el diseño. */
.dc-linea__paso--actual .dc-linea__icono--puntos circle {
  animation: dc-linea-punto 1.2s ease-in-out infinite;
}

.dc-linea__paso--actual .dc-linea__icono--puntos circle:nth-child(2) {
  animation-delay: 0.15s;
}

.dc-linea__paso--actual .dc-linea__icono--puntos circle:nth-child(3) {
  animation-delay: 0.3s;
}

.dc-linea__paso--actual .dc-linea__icono--calendario {
  animation: dc-linea-tic 2.4s ease-in-out 1.2s infinite;
}

.dc-linea__paso--actual .dc-linea__icono--camion {
  animation: dc-linea-botar 0.45s ease-in-out infinite alternate;
}

.dc-linea__paso--actual .dc-linea__tela {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: dc-linea-ondear 1.4s ease-in-out infinite;
}

/* En un móvil caben los cinco pasos en fila: más pequeños y con el nombre partido en dos líneas. */
@container (max-width: 520px) {
  .dc-linea {
    --d: 34px;
    --da: 42px;
    --ic: 18px;
    --ica: 22px;
    --grosor: 4px;
  }

  .dc-linea__check {
    top: calc(50% - 12px - 8px);
    left: calc(50% + 12px - 8px);
    width: 16px;
    height: 16px;
  }

  .dc-linea__nombre {
    padding: 0 2px;
    font-size: var(--texto-xs);
  }
}

@keyframes dc-linea-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes dc-linea-sacudir {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-12deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(3deg); }
}

@keyframes dc-linea-halo {
  0% { opacity: 0.35; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.75); }
}

@keyframes dc-linea-dibujar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes dc-linea-aparecer {
  from { opacity: 0; }
}

@keyframes dc-linea-fluir {
  to { background-position: 18px 0; }
}

@keyframes dc-linea-punto {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-3.5px); }
}

@keyframes dc-linea-tic {
  0%, 80%, 100% { transform: rotate(0); }
  85% { transform: rotate(-8deg); }
  90% { transform: rotate(6deg); }
  95% { transform: rotate(-2deg); }
}

@keyframes dc-linea-botar {
  from { transform: translateY(0); }
  to { transform: translateY(-1.6px); }
}

@keyframes dc-linea-ondear {
  0%, 100% { transform: skewY(0); }
  50% { transform: skewY(-7deg); }
}

/* --- Línea de tiempo --- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--borde);
}

.timeline li {
  position: relative;
  padding: 0 0 var(--e5) var(--e6);
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: var(--radio-pildora);
  background: var(--superficie);
  border: 3px solid var(--marca);
}

.timeline li:last-child::before {
  background: var(--marca);
  box-shadow: 0 0 0 4px var(--marca-tenue);
}

.timeline .fecha {
  display: block;
  font-size: var(--texto-xs);
  color: var(--texto-suave);
  margin-top: var(--e1);
}

/* --- Lista de enlaces --- */
.enlaces {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e2);
}

.enlaces a {
  display: block;
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  text-decoration: none;
  color: var(--texto);
  transition:
    border-color var(--transicion),
    background var(--transicion);
}

.enlaces a:hover {
  border-color: var(--marca);
  background: var(--marca-suave);
}

/* --- Tablas --- */
.tabla-scroll {
  overflow-x: auto;
  margin-inline: calc(-1 * var(--e2));
  padding-inline: var(--e2);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
}

.tabla th,
.tabla td {
  padding: var(--e3);
  border-bottom: 1px solid var(--borde);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.tabla th {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-suave);
  border-bottom-color: var(--borde-fuerte);
}

.tabla tbody tr:hover {
  background: var(--gris-50);
}

.tabla__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabla__enlace {
  display: block;
  font-size: var(--texto-xs);
}

.tabla--prosa th,
.tabla--prosa td {
  white-space: normal;
  vertical-align: top;
}

/* Aviso de error sin controlar de Blazor: oculto hasta que Blazor le pone display: block. */
#blazor-error-ui {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 100;
  padding: var(--e3) var(--e4);
  background: var(--peligro);
  color: var(--blanco);
  font-size: var(--texto-sm);
  box-shadow: var(--sombra-3);
}

#blazor-error-ui .reload {
  margin-left: var(--e2);
  color: var(--blanco);
  font-weight: 600;
}

/* ── 8. Área privada y acceso ──────────────────────────────────────── */

/* Las pantallas de acceso son una sola tarea: columna estrecha y centrada. */
.acceso {
  width: 100%;
  max-width: var(--ancho-formulario);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

.acceso__pie {
  margin: var(--e5) 0 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--borde);
  text-align: center;
  font-size: var(--texto-sm);
  color: var(--texto-suave);
}

.acceso__dato {
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--borde);
}

.plegable {
  margin-top: var(--e5);
  border-top: 1px solid var(--borde);
  padding-top: var(--e4);
}

/* La contraseña es la puerta secundaria, pero tiene que PARECER una puerta:
   quien se acaba de registrar con contraseña la busca, y un texto pequeño de
   pie de página se lee como una nota, no como una opción. Se le da forma de
   control, con su alto de 44 px. */
.plegable summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-height: 44px;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  cursor: pointer;
  font-weight: 600;
  color: var(--texto);
  list-style: none;
  transition:
    border-color var(--transicion),
    background var(--transicion);
}

.plegable summary::-webkit-details-marker {
  display: none;
}

/* Chevron dibujado con bordes, no con un icono de fuente: así no depende de
   cómo se llame la familia de Font Awesome en la versión instalada. */
.plegable summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave);
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform var(--transicion);
}

.plegable[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 2px;
}

.plegable summary:hover {
  border-color: var(--marca);
  background: var(--marca-suave);
  color: var(--marca);
}

.plegable > form {
  margin-top: var(--e4);
}

/* --- Lista de envíos --- */
.envios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e4);
}

.envio {
  padding: var(--e5);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--gris-50);
}

.envio__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
}

.envio__ref {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.envio__ruta {
  margin: var(--e3) 0 var(--e1);
  font-weight: 600;
}

.envio__ruta i {
  margin-right: var(--e2);
  color: var(--texto-suave);
}

.envio__meta {
  margin: 0 0 var(--e4);
  font-size: var(--texto-sm);
  color: var(--texto-suave);
}

/* ── 9. Prosa legal ────────────────────────────────────────────────── */

.prosa {
  max-width: var(--ancho-lectura);
  margin-inline: auto;
}

.prosa h2 {
  margin: var(--e6) 0 var(--e3);
  font-size: var(--texto-lg);
  color: var(--marca);
}

.prosa h2:first-of-type {
  margin-top: var(--e4);
}

.prosa ul {
  padding-left: var(--e5);
}

.prosa li {
  margin-bottom: var(--e2);
}

.prosa .datos,
.prosa .tabla {
  margin: var(--e4) 0 var(--e5);
}

.prosa__fecha {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--texto-suave);
}

.prosa__pie {
  margin-top: var(--e6);
  padding-top: var(--e4);
  border-top: 1px solid var(--borde);
  font-size: var(--texto-sm);
  color: var(--texto-suave);
}

/* ── 10. Contacto, pie y WhatsApp ──────────────────────────────────── */

.contacto {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
  gap: var(--e5);
  align-items: start;
}

@media (max-width: 800px) {
  .contacto {
    grid-template-columns: 1fr;
  }
}

.contacto__direccion {
  font-style: normal;
  font-weight: 600;
}

.pie {
  background: var(--pie-fondo);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--texto-sm);
  margin-top: var(--e8);
}

.pie__interior {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: var(--e7) var(--e5) var(--e5);
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) 1fr;
  gap: var(--e6);
  align-items: start;
}

@media (max-width: 800px) {
  .pie__interior {
    grid-template-columns: 1fr;
    gap: var(--e5);
  }
}

.pie__logo {
  height: 40px;
  width: auto;
  display: block;
}

.pie__tagline {
  margin: var(--e3) 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--texto-sm);
}

.pie__datos {
  margin: var(--e3) 0 0;
  font-style: normal;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.66);
}

.pie__nav {
  display: grid;
  gap: var(--e2);
}

.pie a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
}

.pie a:hover {
  color: var(--blanco);
  text-decoration: underline;
}

.pie__nav a {
  font-weight: 600;
}

/* Al final de la barra legal, empujado a la derecha; al envolver en móvil baja a su propia línea. */
.pie__dinaup {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--texto-xs);
}

.pie__dinaup img {
  height: 16px;
  width: auto;
  display: block;
}

.pie__legal {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: var(--e4) var(--e5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  align-items: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--texto-xs);
}

/* Botón flotante de WhatsApp: siempre a mano, nunca encima de un control.
   Por eso el `main` reserva sitio abajo y en móvil se reduce a círculo. */
.whatsapp {
  position: fixed;
  right: var(--e5);
  bottom: var(--e5);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e3) var(--e5);
  border-radius: var(--radio-pildora);
  background: #1faf54;
  color: var(--blanco);
  font-weight: 700;
  font-size: var(--texto-sm);
  text-decoration: none;
  box-shadow: var(--sombra-3);
  transition:
    transform var(--transicion),
    box-shadow var(--transicion);
}

.whatsapp i {
  font-size: 1.4rem;
}

.whatsapp:hover {
  transform: translateY(-2px);
  color: var(--blanco);
}

@media (max-width: 640px) {
  .whatsapp {
    right: var(--e4);
    bottom: var(--e4);
    padding: 0;
    width: 56px;
    height: 56px;
    justify-content: center;
  }

  .whatsapp__txt {
    display: none;
  }
}

.seccion__acciones {
  margin-top: var(--e5);
}

/* --- El desplegable de idioma dentro de un formulario ---
   Mismo componente que el de la cabecera, con dos diferencias: va sobre fondo
   claro (así que el resumen parece un control, no una pastilla) y las opciones
   son radios, para que el idioma viaje con el resto del formulario. */
.idiomas--campo {
  display: block;
  max-width: 260px;
}

.idiomas--campo .idiomas__actual {
  min-height: 44px;
  padding: 0 var(--e4);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--texto-base);
  font-weight: 400;
  letter-spacing: 0;
}

.idiomas--campo .idiomas__actual span[data-nombre] {
  flex: 1;
}

.idiomas--campo .idiomas__actual:hover,
.idiomas--campo[open] .idiomas__actual {
  background: var(--superficie);
  border-color: var(--marca);
}

.idiomas--campo .bandera {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.idiomas--campo .idiomas__lista {
  left: 0;
  right: auto;
  min-width: 100%;
}

/* El radio no se ve: lo que marca la opción elegida es el check de la derecha,
   igual que en el desplegable de la cabecera. */
.idiomas__opcion input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.idiomas__opcion .fa-check {
  opacity: 0;
  font-size: 0.75rem;
  color: var(--marca);
}

.idiomas__opcion:has(input:checked) {
  font-weight: 700;
  color: var(--marca);
}

.idiomas__opcion:has(input:checked) .fa-check,
.idiomas__opcion[aria-current="true"] .fa-check {
  opacity: 1;
}

.idiomas__opcion:has(input:focus-visible) {
  outline: 3px solid var(--marca);
  outline-offset: -2px;
}

/* Etiqueta de un grupo de controles: mismo peso que un <label> normal. */
.campo__etiqueta {
  display: block;
  margin-bottom: var(--e2);
  font-size: var(--texto-sm);
  font-weight: 600;
}

/* --- CTA de WhatsApp (página de contacto) ---
   Verde de marca de WhatsApp, ancho completo y con su flecha: se lee como un
   botón grande, no como un enlace más de la lista de datos. */
.cta-whatsapp {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e5);
  border-radius: var(--radio-lg);
  background: linear-gradient(100deg, #1faf54 0%, #17944a 100%);
  color: var(--blanco);
  text-decoration: none;
  box-shadow: var(--sombra-2);
  transition:
    transform var(--transicion),
    box-shadow var(--transicion);
}

.cta-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-3);
  color: var(--blanco);
}

.cta-whatsapp__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radio-pildora);
  background: rgba(255, 255, 255, 0.18);
  font-size: 1.7rem;
}

.cta-whatsapp__texto {
  flex: 1;
  font-size: var(--texto-sm);
  color: rgba(255, 255, 255, 0.9);
}

.cta-whatsapp__texto strong {
  display: block;
  font-size: var(--texto-lg);
  color: var(--blanco);
}

.cta-whatsapp__flecha {
  flex-shrink: 0;
  opacity: 0.85;
  transition: transform var(--transicion);
}

.cta-whatsapp:hover .cta-whatsapp__flecha {
  transform: translateX(3px);
}

@media (max-width: 560px) {
  .cta-whatsapp {
    padding: var(--e4);
    gap: var(--e3);
  }

  .cta-whatsapp__flecha {
    display: none;
  }
}

/* --- Navegación del área privada ---
   Pestañas: dicen dónde estás y qué más hay, en el mismo sitio en las tres
   pantallas. La acción principal va a la derecha, separada por una línea de
   base común, para que no se confunda con una sección más. */
.panel-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  margin-bottom: var(--e2);
  border-bottom: 1px solid var(--borde);
}

.panel-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.panel-nav ul a {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 44px;
  padding: 0 var(--e3);
  border-bottom: 3px solid transparent;
  color: var(--texto-suave);
  font-size: var(--texto-sm);
  font-weight: 600;
  text-decoration: none;
  transition:
    color var(--transicion),
    border-color var(--transicion);
}

.panel-nav ul a:hover {
  color: var(--marca);
}

.panel-nav ul a[aria-current="page"] {
  color: var(--marca);
  border-bottom-color: var(--marca);
}

.panel-nav > .btn {
  margin-bottom: var(--e2);
}

@media (max-width: 640px) {
  .panel-nav {
    justify-content: flex-start;
  }

  .panel-nav ul {
    width: 100%;
    /* Los tres caben en una fila de móvil sin partirse porque el icono ya
       identifica cada sección; si algún día son más, esto se desliza. */
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .panel-nav ul a {
    padding: 0 var(--e2);
    white-space: nowrap;
  }

  .panel-nav > .btn {
    width: 100%;
    margin-bottom: var(--e3);
  }
}