/* ══════════════════════════════════════════════════════════════════════
   PASSYOURCDL — SISTEMA INSTITUCIONAL
   ──────────────────────────────────────────────────────────────────────
   Mismo sistema que CiudadaníaFácil: un solo tono en muchos valores,
   serif grande, etiquetas diminutas en versalitas, reglas finas y mucho
   aire. Lo que cambia es de dónde salen los colores.

   Aquí no hay expediente, hay carretera. El acento es el ámbar de las
   luces de posición de un tráiler y de la señalización de obra del DOT:
   el único color que un camionero ve todo el día y asocia con atención.
   Se usa poquísimo — etiquetas y acción — igual que el vino en el otro
   sitio. NADA de amarillo de plantilla sobre azul.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* UN SOLO TONO, MUCHOS VALORES — la escala del azul marino.
     El 900 sale del Old Glory Blue oficial (#041E42) llevado a noche. */
  --azul-900: #0a1b30;   /* noche: fondo de los bloques hondos */
  --azul-800: #112b47;
  --azul-700: #1d3f63;
  --azul-600: #35587e;
  --azul-400: #7d93af;
  --azul-200: #c3cedd;
  --azul-100: #e3e9f1;

  --papel:    #ffffff;
  --papel-2:  #f7f8fa;   /* secciones alternas, apenas perceptible */

  /* EL ÚNICO ACENTO. Ámbar de luz de posición y de señal de obra.
     Se usa en: etiquetas de sección, reglas de énfasis y el botón.
     El tono de texto es más oscuro porque el ámbar vivo no se lee
     sobre papel blanco. */
  /* #a66a0c daba 4.48:1 con texto blanco encima y 4.22:1 como texto
     sobre el fondo tenue: las dos por debajo del 4.5:1 de la WCAG, y una
     de ellas era el botón principal de venta. Oscurecido hasta 5.3:1. */
  --ambar:     #95600a;  /* sobre blanco */
  --ambar-vivo:#e0a33c;  /* sobre fondo hondo */
  --vino:      var(--ambar);
  --vino-vivo: var(--ambar-vivo);

  /* Papel y tinta por omisión: la página va clara */
  --fondo:   var(--papel);
  --tinta:   var(--azul-900);
  --tinta-2: #55637a;
  --linea:   rgba(10,27,48,.14);
  --linea-2: rgba(10,27,48,.28);
  --acento:  var(--vino);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --texto:   "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dato:    "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ancho:  1120px;
  --estrecho: 760px;
  --riel:   84px;
}

/* Los bloques hondos invierten papel y tinta. Mismo tono, otro valor. */
.hondo{
  --fondo:   var(--azul-900);
  --tinta:   #eef2f7;
  --tinta-2: var(--azul-200);
  --linea:   rgba(238,242,247,.18);
  --linea-2: rgba(238,242,247,.36);
  --acento:  var(--vino-vivo);
  background:var(--fondo); color:var(--tinta);
}
/* Alterna clarísima, para separar sin romper el tono */
.tenue{ --fondo:var(--papel-2); background:var(--fondo); }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ─── Riel de progreso ──────────────────────────────────────────────── */
.riel{ position:fixed; inset:0 auto 0 0; width:var(--riel); display:none; z-index:40; pointer-events:none; }
.riel__linea{ position:absolute; left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); background:var(--linea); }
.riel__avance{ position:absolute; left:50%; top:0; width:1px; height:0; transform:translateX(-50%); background:var(--acento); transition:height .12s linear; }
.riel__etapa{
  position:absolute; left:50%; transform:translate(-50%,-50%);
  font-family:var(--dato); font-size:9px; letter-spacing:.16em;
  color:var(--tinta-2); background:var(--fondo); padding:8px 0;
  writing-mode:vertical-rl; text-transform:uppercase;
}
@media (min-width:1120px){ .riel{ display:block; } body{ padding-left:var(--riel); } }

/* ─── Barra ─────────────────────────────────────────────────────────── */
.barra{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px 24px; background:var(--azul-900); color:#eef2f7;
  border-bottom:1px solid rgba(238,242,247,.14);
}
.barra__marca{
  display:flex; align-items:center; gap:11px;
  font-family:var(--display); font-weight:500; font-size:1.08rem;
  letter-spacing:.01em; text-decoration:none; color:inherit;
}
.barra__marca img{ width:28px; height:28px; border-radius:50%; }
.barra__enlaces{ display:none; gap:30px; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; font-family:var(--dato); }
.barra__enlaces a{ text-decoration:none; color:var(--azul-200); }
.barra__enlaces a:hover{ color:#fff; }
@media (min-width:980px){ .barra__enlaces{ display:flex; } }

/* ─── Botones ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 30px; border:1px solid transparent; border-radius:0;
  font-family:var(--dato); font-size:.78rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; line-height:1;
  text-decoration:none; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--principal{ background:var(--vino); color:#fff; }
.btn--principal:hover{ background:#651623; }
.btn--linea{ border-color:var(--linea-2); color:var(--tinta); background:transparent; }
.btn--linea:hover{ border-color:var(--tinta); }
.btn--pequeno{ padding:11px 18px; font-size:.68rem; }

/* ─── Tipografía ────────────────────────────────────────────────────── */
.display{
  font-family:var(--display); font-weight:400;
  letter-spacing:-.012em; line-height:1.1; margin:0;
}
h1.display{ font-size:clamp(2.6rem,5.8vw,4.5rem); line-height:1.05; }
h2.display{ font-size:clamp(1.9rem,3.5vw,2.8rem); }
h3{ font-family:var(--display); font-weight:500; font-size:1.18rem; margin:0 0 8px; letter-spacing:-.005em; }

/* La etiqueta diminuta en versalitas: la única decoración del sistema */
.etiqueta{
  font-family:var(--dato); font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--acento);
  margin:0 0 20px; display:block;
}
.etiqueta--centro{ text-align:center; }

.bajada{ font-size:clamp(1.05rem,1.4vw,1.18rem); color:var(--tinta-2); max-width:60ch; margin:22px 0 0; }
.dato{ font-family:var(--dato); font-variant-numeric:tabular-nums; }
.regla{ border:0; border-top:1px solid var(--linea); margin:0; }

/* ─── Rejilla ───────────────────────────────────────────────────────── */
.seccion{ padding:clamp(72px,10vw,150px) 24px; background:var(--fondo); color:var(--tinta); }
.wrap{ max-width:var(--ancho); margin:0 auto; }
.wrap--estrecho{ max-width:var(--estrecho); margin:0 auto; }
.cabeza{ max-width:64ch; margin-bottom:clamp(44px,6vw,76px); }
.cabeza--centro{ margin-left:auto; margin-right:auto; text-align:center; }

/* ─── Reveal ────────────────────────────────────────────────────────── */
.sube{ opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.sube.visible{ opacity:1; transform:none; }
.sube--b{ transition-delay:.09s; }
.sube--c{ transition-delay:.18s; }
@media (prefers-reduced-motion:reduce){ .sube{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ─── LOGOTIPO: una palabra, sin emblema ────────────────────────────
   Decidido contra el escudo a propósito. El de Harvard funciona porque
   es su escudo real de hace cuatro siglos; aquí un sello inventaría una
   autoridad que no tenemos, y en un sitio de inmigración eso es el
   riesgo equivocado. Cravath, el bufete más serio que miramos, no tiene
   emblema: tiene una palabra. Va compuesta en tipografía, no generada,
   porque así es nítida a cualquier tamaño y pesa cero. */
.logo{
  font-family:var(--display); font-weight:400; font-size:1.16rem;
  letter-spacing:.005em; text-decoration:none; color:inherit;
  display:inline-block; line-height:1;
}
.logo em{ font-style:italic; font-weight:400; }
.logo--grande{ font-size:clamp(1.3rem,2.2vw,1.65rem); }

/* ─── Portada fotográfica (tratamiento Harvard) ─────────────────────── */
.portada{
  position:relative; isolation:isolate;
  min-height:clamp(560px,82vh,780px);
  display:flex; align-items:center;
  padding-top:clamp(80px,10vw,130px); padding-bottom:clamp(56px,7vw,96px);
  background:var(--azul-900); color:#fff;
  --tinta:#fff; --tinta-2:rgba(255,255,255,.82); --acento:#e8b9c2; --linea:rgba(255,255,255,.28);
}
.portada__foto{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.portada__foto img,
.portada__video{ width:100%; height:100%; object-fit:cover; object-position:center 62%; }

/* Ya no hay foto de respaldo: el video va en todas las pantallas. El
   póster (un fotograma suyo) es lo que se ve mientras carga. */
.portada__video{ display:block; }
/* En vertical el recorte centrado se come a la persona de las escaleras,
   que es el sujeto de la foto. Se corre hacia ella. */
/* En vertical, cubrir una pantalla alta con una foto apaisada obliga a un
   acercamiento muy fuerte y la figura se come el encuadre. Se baja la
   altura del héroe para que la escena respire. */
@media (max-width:700px){
  .portada__foto img{ object-position:center 42%; }
}
/* El velo: sin él el titular blanco no se lee sobre el cielo claro. */
.portada__velo{
  position:absolute; inset:0; z-index:-1;
  /* El punto medio era .52. Medido contra el video: donde el cielo sale
     quemado (blanco puro) detras del texto, el blanco sobre ese velo daba
     3.57:1, por debajo del 4.5:1 que necesita el texto chico. El minimo
     calculado es .593; se deja .62 con algo de margen. La imagen se sigue
     viendo: sobre un pixel de brillo medio el contraste sube a 7:1. */
  background:
    linear-gradient(180deg, rgba(10,27,48,.80) 0%, rgba(10,27,48,.62) 38%, rgba(10,27,48,.88) 100%),
    linear-gradient(90deg, rgba(10,27,48,.4) 0%, rgba(10,27,48,0) 60%);
}
.portada__centro{ max-width:900px; margin:0 auto; text-align:center; }
.portada__credito{
  position:absolute; right:18px; bottom:14px; z-index:1;
  font-family:var(--dato); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.portada .btn--linea{ border-color:rgba(255,255,255,.5); color:#fff; }
.portada .btn--linea:hover{ border-color:#fff; background:rgba(255,255,255,.1); }

/* El ascenso. Una foto no puede hacer caminar a nadie: lo que se mueve
   es la cámara. Sube y se acerca, de modo que las escaleras bajan por el
   encuadre y la figura parece ganar altura. Va y vuelve sin fin (20s por
   tramo) para que el movimiento no se acabe mientras se lee. */
@keyframes asciende{
  from{ transform:scale(1.03) translateY(1.4%); }
  to  { transform:scale(1.12) translateY(-2.6%); }
}
.portada__foto img{ animation:asciende 20s ease-in-out infinite alternate; will-change:transform; }
@media (prefers-reduced-motion:reduce){ .portada__foto img{ animation:none; } }

/* Tira de cifras: reglas, no cajas */
.cifras{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:clamp(48px,6vw,80px); border-top:1px solid var(--linea); }
.cifra{ padding:28px 14px 0; text-align:center; }
.cifra + .cifra{ border-left:1px solid var(--linea); }
.cifra__n{ font-family:var(--dato); font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:500; display:block; line-height:1; }
.cifra__t{ font-size:.76rem; color:var(--tinta-2); margin-top:12px; display:block; line-height:1.5; }
/* En teléfono tres columnas parten los números en dos líneas ("12 /
   20"). Se apilan, y la regla pasa de vertical a horizontal. */
@media (max-width:560px){
  .cifras{ grid-template-columns:1fr; }
  .cifra{ padding:20px 0; }
  .cifra + .cifra{ border-left:0; border-top:1px solid var(--linea); }
  .cifra__t{ margin-top:8px; }
}

/* ─── Sumario: el índice del documento ──────────────────────────────── */
.sumario{ border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }
.sumario a{
  display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:baseline;
  padding:17px 0; border-bottom:1px solid var(--linea); text-decoration:none;
  transition:padding-left .2s ease;
}
.sumario a:last-child{ border-bottom:0; }
.sumario a:hover{ padding-left:10px; }
.sumario .n{ font-family:var(--dato); font-size:.72rem; color:var(--acento); letter-spacing:.08em; }
.sumario .t{ font-family:var(--display); font-size:1.08rem; }
.sumario .f{ font-family:var(--dato); font-size:.7rem; color:var(--tinta-2); letter-spacing:.08em; }

/* ─── Partes numeradas ──────────────────────────────────────────────── */
.parte{ display:flex; align-items:baseline; gap:16px; margin-bottom:clamp(30px,4vw,48px); }
.parte__n{ font-family:var(--dato); font-size:.72rem; letter-spacing:.2em; color:var(--acento); }
.parte__l{ flex:1; height:1px; background:var(--linea); }

/* ─── Etapas ────────────────────────────────────────────────────────── */
.etapas{ border-top:1px solid var(--linea); }
.etapa{ display:grid; gap:6px 32px; padding:30px 0; border-bottom:1px solid var(--linea); grid-template-columns:auto 1fr; }
@media (min-width:800px){ .etapa{ grid-template-columns:64px 1.1fr 1.4fr; align-items:start; } }
.etapa__n{ font-family:var(--dato); font-size:.78rem; color:var(--tinta-2); padding-top:5px; letter-spacing:.06em; }
.etapa__t{ font-family:var(--display); font-weight:500; font-size:1.22rem; }
.etapa__d{ color:var(--tinta-2); font-size:.96rem; grid-column:1/-1; margin:0; }
@media (min-width:800px){ .etapa__d{ grid-column:3; } }
.marca{
  display:inline-block; font-family:var(--dato); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--acento); border:1px solid currentColor;
  padding:3px 7px; margin-left:12px; vertical-align:3px;
}

/* ─── Columnas de texto (reglas, no tarjetas) ───────────────────────── */
.columnas{ display:grid; gap:0; border-top:1px solid var(--linea); }
@media (min-width:820px){ .columnas--3{ grid-template-columns:repeat(3,1fr); } }
.columna{ padding:30px 0; border-bottom:1px solid var(--linea); }
@media (min-width:820px){
  .columna{ padding:34px 32px 34px 0; border-bottom:0; }
  .columna + .columna{ border-left:1px solid var(--linea); padding-left:32px; }
}
.columna p{ color:var(--tinta-2); margin:0; font-size:.95rem; }

/* ─── Lista numerada de contenido ───────────────────────────────────── */
.incluye{ list-style:none; margin:0; padding:0; border-top:1px solid var(--linea); }
.incluye li{ display:grid; grid-template-columns:auto 1fr; gap:22px; padding:22px 0; border-bottom:1px solid var(--linea); align-items:baseline; }
.incluye .n{ font-family:var(--dato); font-size:.72rem; color:var(--tinta-2); letter-spacing:.08em; }
.incluye strong{ font-family:var(--display); font-weight:500; font-size:1.06rem; display:block; margin-bottom:4px; }
.incluye span.d{ color:var(--tinta-2); font-size:.93rem; }

/* Bloque a dos columnas: argumento a la izquierda, lista a la derecha */
@media (min-width:900px){
  .columnas-aviso{ grid-template-columns:1fr 1fr; align-items:start; }
}

/* ─── Lista con regla lateral ───────────────────────────────────────── */
.lista{ list-style:none; margin:0; padding:0; }
.lista li{ padding:16px 0 16px 26px; border-bottom:1px solid var(--linea); position:relative; color:var(--tinta-2); font-size:.97rem; }
.lista li::before{ content:""; position:absolute; left:0; top:26px; width:12px; height:1px; background:var(--acento); }

/* ─── Precio ────────────────────────────────────────────────────────── */
.precio{ display:grid; gap:clamp(32px,5vw,64px); align-items:start; }
@media (min-width:900px){ .precio{ grid-template-columns:1fr 1fr; } }
.precio__caja{ border-top:2px solid var(--acento); padding-top:30px; }
.precio__n{ font-family:var(--dato); font-size:clamp(2.8rem,6vw,4rem); font-weight:500; line-height:1; letter-spacing:-.02em; display:block; }
.precio__p{ font-family:var(--dato); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-2); margin:16px 0 0; }

/* ─── Preguntas ─────────────────────────────────────────────────────── */
.preguntas{ border-top:1px solid var(--linea); }
.pregunta{ border-bottom:1px solid var(--linea); padding:28px 0; }
.pregunta p{ color:var(--tinta-2); margin:0; font-size:.96rem; max-width:70ch; }

/* ─── Fuentes: la sección que construye confianza de verdad ─────────── */
.fuentes{ font-size:.9rem; }
.fuentes dt{ font-family:var(--dato); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2); padding-top:20px; border-top:1px solid var(--linea); }
.fuentes dd{ margin:8px 0 22px; color:var(--tinta); }

/* ─── Pie ───────────────────────────────────────────────────────────── */
.pie{ padding:64px 24px 48px; background:var(--azul-900); color:var(--azul-200); font-size:.88rem; }
.pie a{ color:#eef2f7; text-decoration:none; }
.pie a:hover{ text-decoration:underline; }
.pie__nav{ display:flex; flex-wrap:wrap; gap:16px 30px; margin-bottom:28px; font-family:var(--dato); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; }
/* ─── Largo de línea y áreas táctiles ────────────────────────────────
   Medido con el ancho real del carácter: el texto corrido llegaba a 72-73
   caracteres por renglón, dentro de lo cómodo. El tope de 68 es sólo un
   seguro para pantallas anchas, no arregla nada que estuviera roto.

   Lo que sí estaba mal eran los enlaces: 20px de alto, menos de los 44px
   que hacen falta para tocarlos con el pulgar, y este sitio se usa sobre
   todo desde el teléfono. */
.etapa__d, .columna p, .incluye span.d{ max-width:68ch; }
.pie__nav{ gap:4px 30px !important; }
.pie__nav a, .barra__enlaces a, .barra .logo, .barra .btn--pequeno{
  display:inline-flex; align-items:center; min-height:44px;
}

.pie__legal{ border-top:1px solid rgba(238,242,247,.16); padding-top:24px; margin:0; max-width:76ch; line-height:1.7; }


/* ─── PRÁCTICA HABLADA ───────────────────────────────────────────────
   El reglamento 49 CFR 391.11(b)(2) obliga al conductor a hablar inglés
   suficiente para responderle a un oficial en carretera. Ninguna app de
   opción múltiple entrena eso: hay que abrir la boca.
   Esto usa el reconocimiento de voz del propio navegador. Sin servidor,
   sin enviar el audio a ninguna parte: se procesa en el dispositivo. */
.voz{ max-width:760px; margin:0 auto; }
/* La tarjeta es papel blanco dentro de una sección honda: hay que
   devolverle la tinta oscura, o hereda la clara y no se lee nada. */
.voz__tarjeta{
  background:var(--papel); padding:clamp(24px,3.5vw,38px);
  --tinta:   var(--azul-900);
  --tinta-2: #55637a;
  --linea:   rgba(10,27,48,.14);
  --linea-2: rgba(10,27,48,.28);
  --acento:  var(--vino);
  color:var(--tinta);
  border:1px solid var(--linea);
}

.voz__pregunta{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem,2.8vw,1.85rem); line-height:1.2;
  letter-spacing:-.01em; margin:14px 0 6px;
}
.voz__es{ color:var(--tinta-2); font-size:.95rem; margin:0 0 26px; }

/* El botón del micrófono: el centro de gravedad de la tarjeta */
.voz__mic{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; padding:19px 24px; border:1px solid var(--azul-900);
  background:var(--azul-900); color:#fff; cursor:pointer;
  font-family:var(--dato); font-size:.76rem; letter-spacing:.14em;
  text-transform:uppercase; transition:background .2s ease;
}
.voz__mic:hover{ background:#163453; }
.voz__mic[disabled]{ opacity:.45; cursor:not-allowed; }
.voz__mic.escuchando{ background:var(--vino); border-color:var(--vino); }
.voz__onda{
  width:10px; height:10px; border-radius:50%; background:currentColor;
  flex:0 0 auto;
}
.voz__mic.escuchando .voz__onda{ animation:latido 1s ease-in-out infinite; }
@keyframes latido{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.9); opacity:.35 } }
@media (prefers-reduced-motion:reduce){ .voz__mic.escuchando .voz__onda{ animation:none } }

.voz__pista{ font-size:.84rem; color:var(--tinta-2); margin:14px 0 0; text-align:center; }

/* Lo que el navegador entendió, en crudo */
.voz__oido{
  margin:22px 0 0; padding:16px 18px; border-left:2px solid var(--linea-2);
  font-size:.97rem; color:var(--tinta-2);
}
.voz__oido b{ color:var(--tinta); font-weight:500; }

/* El veredicto */
.voz__fallo{ margin:22px 0 0; padding-top:20px; border-top:1px solid var(--linea); }
.voz__marca{
  font-family:var(--dato); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; display:block; margin-bottom:10px;
}
.voz__marca--bien{ color:var(--verde-txt, #1f5c3b); }
.voz__marca--casi{ color:var(--oro-txt, #8a6512); }
.voz__marca--mal{ color:var(--acento); }
.voz__oficial{ font-size:1.02rem; margin:0 0 10px; }
.voz__oficial b{ font-weight:500; }
.voz__explica{ font-size:.94rem; color:var(--tinta-2); margin:0; }

.voz__pie{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.voz__pie .btn{ flex:1 1 auto; }

/* Cuando el navegador no trae reconocimiento de voz */
.voz__nosirve{
  border:1px solid var(--linea); padding:22px 24px;
  font-size:.95rem; color:var(--tinta-2);
}
.voz__nosirve b{ color:var(--tinta); font-weight:500; }

/* ─── Elegir licencia ────────────────────────────────────────────────
   Cada clase es su propia fila y su propio enlace al carrito. Antes
   había un solo precio y un botón genérico, y las otras clases eran
   texto suelto: no se podían elegir. */
.planes{ list-style:none; margin:18px 0 0; padding:0; border-top:1px solid var(--linea); }
.plan{ border-bottom:1px solid var(--linea); }
.plan a{
  display:grid; grid-template-columns:34px 1fr auto; gap:16px; align-items:center;
  padding:18px 4px; text-decoration:none; color:var(--tinta);
  min-height:44px; transition:padding-left .18s ease, background .18s ease;
}
.plan a:hover{ padding-left:12px; background:var(--papel); }
.plan__l{
  justify-self:start; width:30px; height:30px; display:grid; place-items:center;
  border:1px solid var(--linea-2); font-size:.78rem; color:var(--tinta-2);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.plan a:hover .plan__l{ background:var(--acento); color:#fff; border-color:var(--acento); }
.plan__t b{ display:block; font-weight:600; font-size:1.02rem; line-height:1.3; }
.plan__t em{ display:block; font-style:normal; font-size:.88rem; color:var(--tinta-2); margin-top:3px; }
.plan__p{ font-size:1.12rem; font-weight:500; white-space:nowrap; }
.plan__pie{ font-size:.88rem; color:var(--tinta-2); margin:18px 0 0; line-height:1.6; }
@media (max-width:520px){
  .plan a{ grid-template-columns:28px 1fr; row-gap:6px; }
  .plan__p{ grid-column:2; justify-self:start; }
}

/* ─── Un color por clase ─────────────────────────────────────────────
   El color va SÓLO en la casilla de la letra, no en toda la fila: así
   distingue sin romper el sistema de un acento único. Los cuatro se
   midieron con letra blanca encima — el más flojo es el ámbar con
   5.31:1, por encima del 4.5:1. Si alguno se aclara, volver a medir. */
.plan--a .plan__l{ background:#95600a; border-color:#95600a; color:#fff; }
.plan--b .plan__l{ background:#1f5d3f; border-color:#1f5d3f; color:#fff; }
.plan--c .plan__l{ background:#2a4a6b; border-color:#2a4a6b; color:#fff; }
.plan--e .plan__l{ background:#7c1c2c; border-color:#7c1c2c; color:#fff; }
/* Al pasar el cursor ya no se pinta de acento: cada clase conserva el suyo */
.plan a:hover .plan__l{ background:inherit; }
.plan--a a:hover .plan__l{ background:#95600a; border-color:#95600a; }
.plan--b a:hover .plan__l{ background:#1f5d3f; border-color:#1f5d3f; }
.plan--c a:hover .plan__l{ background:#2a4a6b; border-color:#2a4a6b; }
.plan--e a:hover .plan__l{ background:#7c1c2c; border-color:#7c1c2c; }

/* ─── Precio rebajado ────────────────────────────────────────────────
   El precio anterior va tachado y en gris; el nuevo manda. Nunca al
   revés: un tachado que no se distingue del precio real confunde. */
.plan__p{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; }
.plan__antes{ font-size:.82rem; color:var(--tinta-2); text-decoration:line-through; }
.plan__ahora{ font-size:1.18rem; font-weight:500; }

/* ─── El aviso de la oferta ──────────────────────────────────────────
   Con FECHA visible. Una oferta "por tiempo limitado" sin fecha de fin
   es justo lo que la FTC persigue. */
.oferta{
  margin:14px 0 0; padding:12px 0 0;
  border-top:1px solid var(--linea);
  font-size:.92rem; color:var(--tinta-2); line-height:1.6;
}
.oferta b{ color:var(--acento); font-weight:600; }

/* ─── Muestra de pregunta de pre-trip ────────────────────────────── */
.muestra-pt{
  max-width:640px; margin:36px auto 0; background:var(--card);
  border:1px solid var(--linea); border-top:2px solid var(--azul-900);
  padding:clamp(22px,3vw,32px);
}
.muestra-pt__q{ font-size:clamp(1.1rem,2.2vw,1.35rem); font-weight:600; line-height:1.3; margin:12px 0 4px; }
.muestra-pt__es{ font-size:.94rem; color:var(--tinta-2); margin:0 0 18px; }
.muestra-pt__o{ list-style:none; counter-reset:o; margin:0; padding:0; border-top:1px solid var(--linea); }
.muestra-pt__o li{
  counter-increment:o; display:grid; grid-template-columns:34px 1fr; gap:12px;
  align-items:center; padding:13px 2px; border-bottom:1px solid var(--linea); font-size:.98rem;
}
.muestra-pt__o li::before{
  content:counter(o, upper-alpha); font-family:var(--dato); font-size:.72rem;
  color:var(--tinta-2); display:grid; place-items:center;
  border:1px solid var(--linea-2); width:28px; height:28px;
}