/* Composición de página. Todo color, tipo y espaciado sale de los tokens de
   Nocturne (static/ds/styles.css). Aquí no hay ni un hex ni una fuente. */

:root {
  /* Ancho del contenido. Fijo en 1240 dejaba 340 px muertos a cada lado en Full HD
     y 660 en un monitor de 2560: el sitio se veía encogido en el centro. Con esto
     crece con la pantalla y para en 1720, que es donde una línea de texto deja de
     ser cómoda de leer. */
  --ancho-pagina: clamp(1240px, 78vw, 1720px);
  --ancho-lectura: clamp(1080px, 68vw, 1400px);
}

@media (max-width: 1280px) {
  /* Por debajo del techo el clamp no aporta: manda el ancho real menos el margen. */
  :root { --ancho-pagina: 100%; --ancho-lectura: 100%; }
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.saltar {
  position: absolute;
  left: -9999px;
  background: var(--color-surface);
  color: var(--color-accent);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  z-index: 100;
}
.saltar:focus { left: var(--space-6); top: var(--space-6); }

/* ---------------------------------------------------------------- cabecera */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: block;                 /* el interior hace el flex; esto solo pinta el fondo */
  padding: 0;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-divider);
}

.nav-interior {
  max-width: var(--ancho-pagina);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-left: auto;
}

/* Reservar es la acción, no un enlace más: en la barra va como botón. */
.nav-cta { padding: 6px 14px; font-size: 13px; }

/* En el teléfono manda la barra de abajo: repetir los mismos enlaces arriba es
   navegación duplicada, y encima se cortaba a media palabra. Arriba queda solo la
   marca, que sirve para volver al inicio y para saber dónde estás. */
@media (max-width: 899px) {
  .nav-interior { padding: var(--space-3) var(--space-4); }
  .nav-brand { font-size: 16px; }
  .nav-links { display: none; }
}

/* ---------------------------------------------------------------- estructura */

main { flex: 1; width: 100%; }

.envoltura {
  max-width: var(--ancho-lectura);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) 80px;
  width: 100%;
}
.estrecho { max-width: 720px; }

.pila { display: flex; flex-direction: column; gap: var(--space-6); }
.pila-ancha { display: flex; flex-direction: column; gap: var(--space-8); }

h1 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 6vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}
.entrada { color: var(--color-neutral-400); max-width: 62ch; margin: 0; }

/* ---------------------------------------------------------------- cotizador */

.cotizador {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 900px) {
  .cotizador { grid-template-columns: minmax(0, 1fr) 340px; }
  .panel-precio { position: sticky; top: 72px; }
}

.grupo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

.bloque {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.bloque-titulo {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
}

select.input { appearance: none; background-image: none; }
textarea.input { min-height: 84px; resize: vertical; font: inherit; }

.checkbox {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: 14px;
  cursor: pointer;
  line-height: 1.5;
}
.checkbox input { margin-top: 3px; accent-color: var(--color-accent); flex: 0 0 auto; }

/* ---------------------------------------------------------------- panel de precio */

.linea {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 13px;
}
.linea-destacada { color: var(--color-accent-300); }
.total {
  font-family: var(--font-heading);
  font-size: 30px;
  letter-spacing: -0.02em;
}
.total-cup { font-family: var(--font-heading); font-size: 19px; color: var(--color-accent-300); }

.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator { opacity: 1; }

/* ---------------------------------------------------------------- turnos */

.turnos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.turno {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  cursor: pointer;
  min-height: 44px;          /* área táctil: se usa desde el móvil, en la calle */
}
.turno:hover { border-color: var(--color-accent); }
.turno input { position: absolute; opacity: 0; width: 0; height: 0; }
.turno:has(input:checked) {
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.turno:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.turno .luna { color: var(--color-accent-300); font-size: 11px; }

/* ---------------------------------------------------------------- avisos */

.aviso {
  border-left: 2px solid var(--color-accent);
  padding: var(--space-3) var(--space-6);
  font-size: 13.5px;
  color: var(--color-neutral-300);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
  margin: 0 auto var(--space-6);
  max-width: var(--ancho-lectura);
}
.aviso-ok { border-color: var(--color-accent-400); }
.aviso strong { color: var(--color-text); font-weight: 500; }
.errorlist { list-style: none; padding: 0; margin: var(--space-2) 0 0; font-size: 12.5px; color: var(--color-accent-300); }

/* ---------------------------------------------------------------- mapa */

.marco-mapa {
  width: 100%;
  height: 300px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
}
.marco-mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (min-width: 700px) { .marco-mapa { height: 380px; } }

/* ---------------------------------------------------------------- línea de tiempo */

.tiempo { display: flex; flex-direction: column; gap: var(--space-4); }
.tiempo-fila {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) max-content;
  gap: var(--space-4);
  align-items: center;
  font-size: 14px;
}
.tiempo-punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-accent);
}
.tiempo-fila.pasado .tiempo-punto { background: var(--color-neutral-700); }
.tiempo-fila.pasado { color: var(--color-neutral-500); }

/* ---------------------------------------------------------------- tablas y pie */

.tabla-scroll { overflow-x: auto; }

.pie {
  border-top: 1px solid var(--color-divider);
  padding: var(--space-8) var(--space-6) 64px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
  max-width: var(--ancho-pagina);
  margin: 0 auto;
  width: 100%;
}
.pie-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-8);
}
.pie-cols a { display: block; color: var(--color-neutral-400); text-decoration: none; font-size: 13px; padding: 3px 0; }
.pie-cols a:hover { color: var(--color-accent); }
.pie-titulo {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: var(--space-3);
}

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

.portada {
  max-width: var(--ancho-pagina);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) var(--space-6) var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  width: 100%;
}

/* En escritorio el texto se centra contra la tarjeta: el titular ocupa la mitad de
   alto que el cotizador, y alineado arriba dejaba 280 px de vacío debajo. */
@media (min-width: 901px) {
  .portada {
    /* La tarjeta crece con la pantalla en vez de quedarse clavada en 420 px:
       fija, a partir de Full HD abría un pasillo vacío de medio metro entre el
       titular y ella. */
    grid-template-columns: minmax(0, 1fr) clamp(400px, 34vw, 560px);
    align-items: center;
    gap: var(--space-8) clamp(32px, 4vw, 64px);
  }
  /* Y el titular deja de estirarse hasta el borde del hueco. */
  .portada-texto { max-width: 40em; }
}

.portada-cotizador {
  padding: var(--space-4);
  gap: var(--space-3);
  width: 100%;
  justify-self: end;
}

/* El resto de la portada comparte el ancho de la cabecera y del bloque de arriba:
   con 1080 los bordes de las tarjetas no cuadraban con los del titular. */
.envoltura-portada { max-width: var(--ancho-pagina); }

/* El prototipo corta la entradilla a 46ch: a 62ch el párrafo se estira hasta debajo
   de la tarjeta y el titular pierde su columna. */
.portada-texto .entrada { max-width: 46ch; }

.hero {
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: var(--space-4) 0;
  text-wrap: pretty;
}

.cifras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}

/* En el teléfono las tres cifras van en rejilla: en flex, «450 · tasa CUP/USD de
   hoy» no cabía junto a las otras dos y caía sola a una tercera fila, dejando un
   escalón feo justo encima del cotizador. */
@media (max-width: 899px) {
  .cifras {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
  }
  .cifra { font-size: 24px; }
  .cifras .text-muted { font-size: 11px; line-height: 1.35; }

  /* El cotizador es a lo que se viene: no puede quedar a una pantalla entera de
     distancia. Se recorta el aire del titular sin apretarlo. */
  .portada { padding: var(--space-6) var(--space-4) var(--space-6); }
  .hero { font-size: clamp(28px, 8.5vw, 40px); margin: var(--space-3) 0; }
  .portada-texto .entrada { font-size: 15px; }
  .secciones { padding: 0 var(--space-4); }
  .seccion { padding: var(--space-6) 0; }
}
.cifra {
  font-family: var(--font-heading);
  font-size: 30px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- barra de precio

   Solo en el teléfono. En escritorio el panel lateral acompaña al formulario;
   en móvil quedaba debajo del botón de enviar, así que el cliente rellenaba todo
   sin ver el precio. Un precio que no se ve mientras se decide es un cliente que
   abandona. */

.barra-precio { display: none; }

@media (max-width: 899px) {
  .barra-precio {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-divider);
  }
  .barra-precio .btn { white-space: nowrap; }

  /* Sitio para la barra, solo donde la barra existe: aplicado a todo `main` sumaba
     84 px de vacío al final de la portada y de las páginas de texto, que no la tienen. */
  main:has(.barra-precio) { padding-bottom: 84px; }

  /* En móvil el panel completo va arriba del formulario, no debajo del botón. */
  .cotizador { display: flex; flex-direction: column; }
  .cotizador > form { order: 2; }
  .cotizador > .panel-precio { order: 1; }
}

.barra-precio-total {
  font-family: var(--font-heading);
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.barra-precio-cup {
  font-size: 12px;
  color: var(--color-accent-300);
}

/* ---------------------------------------------------------------- silueta

   Marca dónde va a aparecer el precio mientras todavía no hay uno. No es
   decoración: sin ella el panel vacío mide 40 px y al llegar la cotización crece
   a 400 px, empujando el formulario entero hacia abajo mientras se rellena. */

.silueta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.silueta span {
  display: block;
  height: 10px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

/* ---------------------------------------------------------------- secciones de la portada

   Composición del prototipo Muevete.dc.html: modalidades, cómo funciona, Mipymes,
   fundador y preguntas, separadas por reglas y con el mismo ancho que la cabecera. */

.secciones {
  max-width: var(--ancho-pagina);
  margin: 0 auto;
  padding: 0 var(--space-6);
  width: 100%;
}

.seccion { padding: var(--space-8) 0; }

.titulo-seccion {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 4vw, 30px);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}

.rejilla-modalidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-8);
}
.dos-columnas > div { display: flex; flex-direction: column; }

.paso {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.paso-numero {
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--color-accent);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.paso-titulo { font-family: var(--font-heading); font-size: 16px; }

/* ---------------------------------------------------------------- fundador */

.fundador {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-8);
  align-items: end;
}
.fundador-foto { align-self: end; }
.fundador-foto img { width: 100%; height: auto; display: block; }
.fundador-texto { padding-bottom: var(--space-8); }

/* En el teléfono el retrato a ancho completo empuja el texto una pantalla entera
   hacia abajo: se recorta a una altura que deja ver la cara y poco más. */
@media (max-width: 700px) {
  .fundador-foto img { max-height: 320px; width: auto; margin: 0 auto; }
  .fundador-texto { padding-bottom: 0; }
}

/* ---------------------------------------------------------------- acordeón */

.acordeon { display: flex; flex-direction: column; max-width: 74ch; }

.acordeon details {
  border-top: 1px solid var(--color-divider);
  padding: var(--space-3) 0;
}
.acordeon summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-heading);
  font-size: 17px;
  padding: var(--space-2) 0;
  min-height: 44px;               /* se despliega con el pulgar */
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary:hover { color: var(--color-accent); }
.acordeon summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.acordeon-signo { color: var(--color-neutral-500); font-size: 20px; line-height: 1; }
.acordeon details[open] .acordeon-signo { color: var(--color-accent); }
.acordeon details[open] .acordeon-signo::before { content: "−"; }
.acordeon details[open] .acordeon-signo { font-size: 0; }
.acordeon details[open] .acordeon-signo::before { font-size: 20px; }

.acordeon p {
  font-size: 14px;
  margin: var(--space-2) 0 var(--space-3);
  max-width: 64ch;
  line-height: 1.6;
}
.acordeon-cierre { border-top: 1px solid var(--color-divider); }

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

.pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  font-size: 13px;
}
.pie-enlaces a { color: var(--color-neutral-400); text-decoration: none; }
.pie-enlaces a:hover { color: var(--color-accent); }

/* ---------------------------------------------------------------- mapa dormido

   El mapa de la portada espera a que lo pidan: 144 KB de Leaflet más las teselas
   son medio megabyte que nadie encargó al entrar. Mientras duerme se ve la
   invitación; al tocarla, movimiento.js le pone el `src` al iframe. */

.marco-mapa-dormido { position: relative; cursor: pointer; }
.marco-mapa-dormido iframe { opacity: 0; transition: opacity .4s ease; }
.marco-mapa-dormido.despierto iframe { opacity: 1; }

.mapa-invitacion {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--color-neutral-400);
  background:
    radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 60%),
    var(--color-bg);
  transition: opacity .35s ease, color .2s ease;
}
.marco-mapa-dormido:hover .mapa-invitacion { color: var(--color-accent-300); }
.marco-mapa-dormido.despierto .mapa-invitacion { opacity: 0; pointer-events: none; }
.mapa-invitacion svg { color: var(--color-accent); }

/* ---------------------------------------------------------------- barra inferior

   Solo en el teléfono. El pulgar llega abajo, no arriba: las cuatro acciones del
   sitio viven donde la mano ya está. En escritorio la barra de arriba hace el
   trabajo y esta no existe. */

.barra-abajo { display: none; }

@media (max-width: 899px) {
  .barra-abajo {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: color-mix(in srgb, var(--color-surface) 97%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--color-divider);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .barra-abajo a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;                 /* área táctil holgada, se usa en la calle */
    padding: 8px 4px;
    font-size: 10px;
    letter-spacing: 0;
    padding-inline: 2px;
    color: var(--color-neutral-400);
    text-decoration: none;
    position: relative;
  }
  .barra-abajo a svg { width: 22px; height: 22px; }

  .barra-abajo a[aria-current='page'] { color: var(--color-accent); }
  /* La marca de la sección abierta va ARRIBA del icono: abajo la tapa el borde
     inferior del teléfono en pantallas con gesto de inicio. */
  .barra-abajo a[aria-current='page']::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--color-accent);
  }

  .barra-abajo a:active { color: var(--color-accent-300); }

  /* Reservar es la acción: se distingue sin gritar. */
  .barra-abajo-cta { color: var(--color-accent-300); }

  /* Sitio para la barra al final de cada página. */
  body { padding-bottom: 62px; }

  /* La barra de precio del cotizador se apoya encima de la de navegación, no
     debajo: si no, una tapa a la otra y el precio desaparece. */
  .barra-precio { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  main:has(.barra-precio) { padding-bottom: 96px; }
}

/* ---------------------------------------------------------------- confirmación

   Lo que se ve justo después de enviar. Hace dos cosas: dice que llegó y enseña
   el recorrido entendido — la última oportunidad de detectar un punto mal marcado
   antes de que salga un conductor. */

.confirmacion {
  padding: var(--space-8);
  gap: var(--space-4);
  text-align: center;
  align-items: center;
}

.ruta-trazo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 340px;
  margin: var(--space-2) 0;
}
.ruta-punto {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-accent);
}
.ruta-punto-b { background: var(--color-accent-300); }

.ruta-linea {
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: var(--color-divider);
  position: relative;
  overflow: hidden;
}
/* El trazo se dibuja de A a B: no es adorno, dice la dirección del viaje. */
.ruta-linea i {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--color-accent), var(--color-accent-300));
  transform-origin: left;
  animation: trazar 1.1s cubic-bezier(.16, 1, .3, 1) .15s backwards;
}
@keyframes trazar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.ruta-texto {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  align-items: baseline;
}

.confirmacion-folio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-8);
  margin-top: var(--space-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.folio-grande {
  font-family: var(--font-heading);
  font-size: clamp(26px, 7vw, 38px);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  user-select: all;              /* un toque largo lo selecciona entero */
}

/* Botón mientras se envía: sin `disabled`, porque un botón deshabilitado no manda
   su propio `name` y hay formularios que lo necesitan. */
.btn-enviando {
  opacity: .65;
  cursor: progress;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ruta-linea i { animation: none; }
}

/* ---------------------------------------------------------------- lugares guardados

   Van antes de los campos que rellenan: puestos debajo, cuando los ves ya
   escribiste todo y el atajo llega tarde. */

.guardadas { display: flex; flex-direction: column; gap: var(--space-2); }
.guardadas-fila { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.guardada { font-size: 13px; padding: 6px 12px; min-height: 36px; }

/* ---------------------------------------------------------------- asistente guiado

   Un árbol de botones que llega a lo mismo que el formulario. Sin IA: los planes
   gratuitos entrenan con lo que les mandas —y aquí viajan nombres, teléfonos y
   direcciones—, y Cuba no está en los países soportados de los de pago. */

.asistente {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 180px;
}

.asistente-pregunta {
  font-family: var(--font-heading);
  font-size: 17px;
  margin: 0;
}

.asistente-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.asistente-opciones-anchas { flex-direction: column; }

.asistente .opcion {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;           /* se usa desde el móvil, muchas veces en la calle */
  font-size: 14px;
}
.asistente .opcion-ancha {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
}

/* Las migas deshacen un paso. Son botones, no enlaces: mandan el formulario con
   ese dato vaciado, que es exactamente «vuelve a preguntarme esto». */
.asistente-migas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.miga {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 12px;
  color: var(--color-neutral-400);
  cursor: pointer;
}
.miga:hover { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }

.asistente-nota { font-size: 12.5px; line-height: 1.5; margin: 0; }

.asistente-precio {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.asistente-total {
  font-family: var(--font-heading);
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: var(--space-1);
}

/* ---------------------------------------------------------------- la escena */

.escena-seccion { padding-top: 0; }
.escena-pie {
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 auto;
}

/* ---------------------------------------------------------------- el vehículo que sale

   En la confirmación, lo que la persona quiere saber es «¿esto está en marcha?».
   Ver el vehículo salir hacia el punto de recogida lo dice mejor que una frase. */

.ruta-linea { position: relative; }

.ruta-vehiculo {
  position: absolute;
  top: 50%;
  left: 0;
  width: 34px;
  height: 17px;
  margin-top: -14px;
  animation: salir-a-recoger 3.4s cubic-bezier(.45, .05, .55, .95) infinite;
}

@keyframes salir-a-recoger {
  0%        { left: -6px;  opacity: 0; }
  12%       { opacity: 1; }
  88%       { opacity: 1; }
  100%      { left: calc(100% - 28px); opacity: 0; }
}

.ruta-carroceria { fill: var(--color-accent); }
.ruta-rueda { fill: var(--color-bg); stroke: var(--color-accent-300); stroke-width: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .ruta-vehiculo { animation: none; left: 42%; opacity: 1; }
}