/* =========================================================================
   Nausika — diseno.css
   La capa del sistema de diseño nuevo (W-032, docs/diseno/DESIGN.md) sobre
   styles.css. Va en un archivo aparte a propósito: la otra conversación sigue
   tocando styles.css y lib/viaje.js, y así lo suyo y lo mío no chocan. Aquí
   solo se sobrescribe; nada de lo que hace la página cambia. Se carga
   después de styles.css en todas las páginas menos la portada, que lleva
   su propio portada.css.
   ========================================================================= */

:root { --sombra-tarjeta: 0 1px 2px rgba(28, 26, 24, .06), 0 12px 32px rgba(28, 26, 24, .10); }
html[data-tono="noche"] { --sombra-tarjeta: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35); }

/* ---------- 1. El objeto de la huella (DESIGN §10) ---------- */
/* Dentro de tu viaje, el logo es tu objeto (lo pone diseno.js), del mismo tamaño que la Piedra */
.marca .marca-objeto { width: 1.15em; height: 1.15em; flex: none; display: block; overflow: visible; }
svg[data-objeto] path, svg[data-objeto] circle { stroke: none; }
.huella[data-objeto] { overflow: visible; }
.huella-3d { width: min(440px, 86vw); height: min(300px, 64vw); }

/* ---------- 2. La tarjeta de la huella ---------- */
.avatar-card { background: var(--superficie); border: 0; border-radius: var(--radio); box-shadow: var(--sombra-tarjeta); }
.avatar-nombre { font-weight: 600; letter-spacing: -.02em; font-size: clamp(40px, 5.6vw, 64px); }
.avatar-gancho { font-family: var(--letra); font-style: normal; font-size: clamp(18px, 2vw, 21px); line-height: 1.45; }
.avatar-ejes-mini span { font-size: 15px; background: var(--papel); border-color: transparent; color: var(--tinta); }
.avatar-ejes-mini span::before { background: var(--acento); }

/* Los nueve ejes: los intereses en barras sin cifras, la más alta en naranja
   (la marca diseno.js); el estilo, como un punto entre sus dos extremos. */
.dna-ejes, .dna-encaja { border-top: 0; background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra-tarjeta);
                         padding: clamp(24px, 4vw, 40px); margin-top: 24px; }
.dna-ejes h3, .dna-encaja h3 { font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -.01em; }
.dna-ejes .sep { font-family: var(--letra); font-weight: 600; font-size: 15px; color: var(--tinta-suave); border-bottom: 0; margin: 28px 0 2px; padding: 0; }
.eje-fila { grid-template-columns: minmax(150px, 230px) 1fr; gap: 20px; padding: 10px 0; }
.eje-fila .nombre { font-size: 16px; color: var(--tinta); }
.eje-fila .num { display: none; }
.eje-track { height: 10px; border-radius: 999px; background: var(--papel); }
.eje-track > i { border-radius: 999px; background: var(--oliva); transition: width 1s cubic-bezier(.2, .7, .2, 1), background-color .4s; }
.eje-fila.es-alta .eje-track > i { background: var(--acento); }
.dna-ejes > .eje-fila:nth-of-type(n+6) { padding-bottom: 26px; }
.dna-ejes > .eje-fila:nth-of-type(n+6) .eje-track { position: relative; height: 2px; background: var(--linea); overflow: visible; }
.dna-ejes > .eje-fila:nth-of-type(n+6) .eje-track > i { position: relative; height: 2px; background: transparent; }
.dna-ejes > .eje-fila:nth-of-type(n+6) .eje-track > i::after {
  content: ""; position: absolute; right: -9px; top: -8px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--oliva); box-shadow: 0 0 0 4px var(--superficie);
}
.dna-ejes > .eje-fila:nth-of-type(n+6) .eje-track::before,
.dna-ejes > .eje-fila:nth-of-type(n+6) .eje-track::after { position: absolute; top: 14px; font-size: 13px; color: var(--tinta-suave); white-space: nowrap; }
.dna-ejes > .eje-fila:nth-of-type(n+6) .eje-track::before { left: 0; }
.dna-ejes > .eje-fila:nth-of-type(n+6) .eje-track::after { right: 0; }
/* Los extremos, resumidos de las respuestas del cuestionario (lib/dna.js) */
.dna-ejes > .eje-fila:nth-of-type(6) .eje-track::before { content: "Sin prisa"; }
.dna-ejes > .eje-fila:nth-of-type(6) .eje-track::after { content: "A tope"; }
.dna-ejes > .eje-fila:nth-of-type(7) .eje-track::before { content: "Improvisar"; }
.dna-ejes > .eje-fila:nth-of-type(7) .eje-track::after { content: "Todo atado"; }
.dna-ejes > .eje-fila:nth-of-type(8) .eje-track::before { content: "Lo básico"; }
.dna-ejes > .eje-fila:nth-of-type(8) .eje-track::after { content: "Alta gama"; }
.dna-ejes > .eje-fila:nth-of-type(9) .eje-track::before { content: "Mi grupo"; }
.dna-ejes > .eje-fila:nth-of-type(9) .eje-track::after { content: "Gente nueva"; }

/* Dónde encaja: cada país con su foto nueva, en vez del relieve */
.encaja-lista { border-top: 0; display: grid; gap: 12px; }
.encaja-item { grid-template-columns: 76px 1fr auto auto; background: var(--papel); border-radius: 18px; padding: 10px 18px 10px 10px; border-bottom: 0; }
.encaja-item .relieve-mini { display: block !important; width: 76px; height: 76px; border-radius: 12px; background: var(--linea) center / cover no-repeat; }
.encaja-item .relieve-mini > * { display: none; }
.relieve-mini[data-relieve-mini="egipto"] { background-image: url("assets/img/dest-egipto.jpg"); }
.relieve-mini[data-relieve-mini="vietnam"] { background-image: url("assets/img/dest-vietnam.jpg"); }
.relieve-mini[data-relieve-mini="tailandia"] { background-image: url("assets/img/dest-tailandia.jpg"); }
.relieve-mini[data-relieve-mini="turquia"] { background-image: url("assets/img/dest-turquia.jpg"); }
.relieve-mini[data-relieve-mini="china"] { background-image: url("assets/img/dest-china.jpg"); }
.relieve-mini[data-relieve-mini="irlanda"] { background-image: url("assets/img/dest-irlanda.jpg"); }
.relieve-mini[data-relieve-mini="italia"] { background-image: url("assets/img/dest-italia.jpg"); }
.relieve-mini[data-relieve-mini="portugal"] { background-image: url("assets/img/dest-portugal.jpg"); }
.relieve-mini[data-relieve-mini="grecia"] { background-image: url("assets/img/dest-grecia.jpg"); }
.relieve-mini[data-relieve-mini="japon"] { background-image: url("assets/img/dest-japon.jpg"); }
.relieve-mini[data-relieve-mini="mexico"] { background-image: url("assets/img/dest-mexico.jpg"); }
.relieve-mini[data-relieve-mini="indonesia"] { background-image: url("assets/img/dest-indonesia.jpg"); }
.relieve-mini[data-relieve-mini="peru"] { background-image: url("assets/img/dest-peru.jpg"); }
.relieve-mini[data-relieve-mini="namibia"] { background-image: url("assets/img/dest-namibia.jpg"); }
.relieve-mini[data-relieve-mini="sudafrica"] { background-image: url("assets/img/dest-sudafrica.jpg"); }
.encaja-nombre { font-weight: 600; }
.encaja-porque { font-style: normal; }
.encaja-cifra b { font-weight: 600; }
@media (max-width: 820px) {
  .encaja-item { grid-template-columns: 64px 1fr auto; }
  .encaja-item .relieve-mini { width: 64px; height: 64px; }
}

/* ---------- 3. El cuestionario ---------- */
.dna h2 { font-weight: 600; letter-spacing: -.015em; }
.q-label em { font-style: normal; }
.q-hint { font-size: 16px; }
.dna-img-card { background: var(--superficie); border: 0; border-radius: var(--radio); padding: 8px; box-shadow: var(--sombra-tarjeta);
                transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
@media (hover:hover) and (pointer:fine){.dna-img-card:hover{ transform: translateY(-2px); }}
.dna-img-card .frame { border-radius: 16px; }
.dna-img-card figcaption, .dna-img-card .pie-img { font-size: 16px; padding: 12px 10px 8px; }
.dna-img-card.is-sel { box-shadow: 0 0 0 2px var(--tinta), var(--sombra-tarjeta); }
.dna-rank button, .dna-sino button { background: var(--superficie); border-color: transparent; border-radius: 18px; font-size: 16px; min-height: 52px;
                                      box-shadow: var(--sombra-tarjeta); }
.dna-rank button.is-ranked { box-shadow: inset 0 0 0 2px var(--tinta), var(--sombra-tarjeta); }
.reparto-nivel { min-height: 40px; font-size: 15px; padding: 0 16px; }
.reparto-info strong { font-weight: 600; }
.reparto-info small { font-size: 15px; }

/* ---------- 4. Las fotos de destino ---------- */
/* Desde el 25-09 las dest-*.jpg son las que eligió Pablo; el encuadre que
   styles.css ajustaba foto a foto era para las de antes. */
.demo-fig img[src*="dest-"], .viaje-foto img[src*="dest-"] { object-position: 50% 50%; }

/* ---------- 5. El itinerario gratuito (viaje.html) y el viaje en texto ---------- */
/* Sin cursivas: la hora vacía, las ideas de cada día y las notas van en letra de texto, en tinta suave */
.ruta-aeropuertos, .ruta-otras, .hora-vacia, .dia-ideas-motivo, .hoja-nota, .encaja-porque { font-family: var(--letra); font-style: normal; }
.momento i { font-family: var(--letra); font-style: normal; font-size: 15px; }
.demo-head h2 em, .cabecera-pagina h1 em { font-style: normal; }
.demo-fig { border-radius: var(--radio); border: 0; }
/* Las cifras del viaje: el precio no parte la línea */
.cifras { grid-template-columns: auto auto auto minmax(0, 1.4fr); gap: 20px 36px; border-top: 0; }
.cifra b { font-weight: 600; letter-spacing: -.02em; }
.cifra--euros b { white-space: nowrap; font-size: clamp(22px, 2.6vw, 30px); }
.cifra span { letter-spacing: .02em; text-transform: none; font-size: 14px; }
@media (max-width: 640px) { .cifras { grid-template-columns: 1fr 1fr; } }
/* Lo que no te vas a perder: tarjetas blancas */
.momento { background: var(--superficie); border: 0; border-radius: var(--radio); box-shadow: var(--sombra-tarjeta); }
.momento b { font-weight: 600; }
@media (hover:hover) and (pointer:fine){.momento:hover b{ color: var(--oliva); }}
/* El esqueleto de la ruta: línea en oliva y paradas como puntos */
.ruta-tramo::before, .ruta-tramo.es-ultimo::after { background: var(--oliva); opacity: 1; height: 2px; }
.ruta-tramo b { font-weight: 600; }
.ruta-punto { background: var(--oliva) !important; border-color: var(--oliva) !important; }
/* Los días: botones redondeados; el elegido, en oliva */
.dia-chip { border-radius: 14px; background: var(--superficie); }
.dia-chip b { font-weight: 600; }
.dia-chip.is-sel { background: var(--oliva); color: var(--sobre-oliva, var(--papel)); border-color: var(--oliva); }
.dia-chip.is-sel small { color: inherit; opacity: .85; }
.dia-hoja, .demo-panel, .demo-lista, .demo-reglas { border-radius: var(--radio); }
/* Pide tu propuesta real */
.lead { border-radius: var(--radio); }
.lead-form input:not([type=checkbox]), .lead-form select, .lead-form textarea { border-radius: 12px; }

/* ---------- 6. La guía del Completo (ruta/) ---------- */
/* La estructura está en lib/viaje.js y la enciende guiaEnMapa en lib/manifest.js:
   - abre en el mapa;
   - la portada del día va encima como una hoja;
   - cada parada es una píldora;
   - la ruta se dibuja al abrir.
   Aquí va cómo se ve (DESIGN §6). */
.vj h2, .vj-cab h1, .vj-seccion-t, .vj-columna > header h2 { font-weight: 600; letter-spacing: -.015em; }
.vj h3, .vj-blq > h3, .vj-ficha > h3 { font-weight: 600; }
.completo-grupo { font-family: var(--letra); font-style: normal; font-weight: 600; }
:root { --sobre-acento: #1C1A18; }

/* La ruta, en oliva y gruesa; las horas, en una píldora blanca */
.vj-m-tramo { stroke-width: 3.5; }
.vj-m-tramo-g.activo .vj-m-tramo { stroke-width: 5.5; }
.vj-m-horas rect { fill: var(--superficie); stroke: var(--linea); }
.vj-m-horas text { font-weight: 600; }

/* Cada parada, una píldora: punto en oliva y el nombre al lado, en letra de texto */
.vj-m-parada.pildora { cursor: pointer; }
.vj-m-parada.pildora .fondo { fill: var(--superficie); stroke: var(--linea); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vj-m-parada.pildora .punto { fill: var(--oliva); }
.vj-m-parada.pildora .pildora-t { font: 600 15px var(--letra); fill: var(--tinta); dominant-baseline: central; }
.vj-m-parada.pildora .pildora-t .dias { font-weight: 500; fill: var(--tinta-suave); }
.vj-m-parada.pildora .onda { fill: none; stroke: var(--acento); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
/* El naranja, solo para lo tuyo en ese momento: la que estás mirando, la de hoy y, después, lo que marcasteis */
.vj-m-parada.pildora.activo .fondo, .vj-m-parada.pildora.hoy .fondo, .vj-m-parada.pildora.marcada .fondo { fill: var(--acento); stroke: var(--acento); }
.vj-m-parada.pildora.activo .punto, .vj-m-parada.pildora.hoy .punto, .vj-m-parada.pildora.marcada .punto { fill: var(--sobre-acento); }
.vj-m-parada.pildora.activo .pildora-t, .vj-m-parada.pildora.hoy .pildora-t, .vj-m-parada.pildora.marcada .pildora-t,
.vj-m-parada.pildora.activo .dias, .vj-m-parada.pildora.hoy .dias, .vj-m-parada.pildora.marcada .dias { fill: var(--sobre-acento); }
/* Durante el viaje, lo ya hecho en tinta suave */
.vj-m-parada.pildora.hecha .pildora-t { fill: var(--tinta-suave); }
.vj-m-parada.pildora.hecha .punto { fill: var(--tinta-suave); }
.vj-mapa .vj-m-parada.pildora:focus { outline: none; }
.vj-mapa .vj-m-parada.pildora:focus-visible .fondo { stroke: var(--tinta); stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
  .vj-m-parada.pildora.enciende .onda { animation: vj-onda 1.4s cubic-bezier(.2, 0, .1, 1) 1; }
}
@keyframes vj-onda { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(2.8); } }

/* La hoja de la parada: una tarjeta blanca con esquina de 24 px que sube desde abajo */
.vj-hoja { background: var(--superficie); border: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -10px 30px var(--sombra); z-index: 3; }
@media (min-width: 960px) { .vj-hoja { border-radius: 24px; box-shadow: var(--sombra-tarjeta); } }
@media (prefers-reduced-motion: no-preference) {
  .vj-hoja:not([hidden]) { animation: vj-sube .35s cubic-bezier(.2, 0, .1, 1); }
}
@keyframes vj-sube { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* «Su cota» era de la cartografía de Cota Cero, que salió entera (W-032) */
.vj-cap-cota { display: none; }
/* El porqué de cada plan, sin cursiva (W-032): en letra de texto, como el resto de notas */
.vj-acto .porque { font-style: normal; font-family: var(--letra); }
/* Cifras en rejilla de dos: si son impares, la última ocupa la fila entera */
.vj-cifras > div:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* La portada del día, encima del mapa: abierta al entrar; plegada, solo su asa */
.vj-portada-hoja { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-height: 56%; display: flex; flex-direction: column;
  background: var(--superficie); border-radius: 24px 24px 0 0; box-shadow: 0 -10px 30px var(--sombra); }
.vj .vj-asa { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 18px 18px 12px; text-align: left; }
.vj-asa::before { content: ""; position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--linea); }
.vj-asa-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vj-asa-t b { font: 600 12px var(--letra); letter-spacing: .08em; text-transform: uppercase; color: var(--acento-texto); }
.vj-asa-t small { font-size: 16px; font-weight: 600; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vj-asa-accion { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--linea-control); font-size: 14px; }
.vj-portada-cuerpo { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid var(--linea-suave); }
.vj-portada-cuerpo[hidden] { display: none; }
.vj-portada-cuerpo .vj-columna { padding-top: 18px; }
.vj-portada-hoja[data-plegada] { max-height: none; }
.vj-portada-hoja[hidden] { display: none; }
/* Cambiar paradas, días y aeropuertos, a la vista sobre el mapa (W-052): en el móvil, abajo a la izquierda
   y flotando justo encima de la portada (--hoja-alto lo pone viaje.js). Arriba quedan cómo se ve el mapa:
   las capas y la leyenda a la izquierda y «País entero» a la derecha. En pantalla ancha, W-057 (abajo). */
.vj-cambiar-mapa { position: absolute; left: 12px; bottom: calc(var(--hoja-alto, 0px) + 12px); z-index: 2;
  display: flex; flex-wrap: wrap; gap: 8px; pointer-events: none; }
.vj-hoja:not([hidden]) ~ .vj-cambiar-mapa, #vj-mapa[data-hoja-alta] .vj-cambiar-mapa { display: none; }
.vj-cambiar-mapa button { pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 14px 6px 11px;
  border-radius: 999px; background: var(--superficie); border: 1px solid var(--linea-control); box-shadow: 0 2px 10px var(--sombra);
  font-size: 14px; font-weight: 500; color: var(--tinta); }
.vj-cambiar-mapa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.vj-cambiar-mapa svg.lleno { fill: currentColor; stroke: none; }
@media (max-width: 959px) {
  /* Las tres capas, en una fila (en un teléfono estrecho se desliza de lado); «País entero», en la de
     debajo a la derecha, junto a la leyenda: en la misma fila se cortaba por el borde */
  .vj-capas { flex-wrap: nowrap; overflow-x: auto; pointer-events: auto; scrollbar-width: none; }
  .vj-capas::-webkit-scrollbar { display: none; }
  .vj-capas button { flex: none; }
  .vj-capas .encuadre { position: absolute; right: 0; top: 42px; margin-left: 0; }
  /* Con la portada abierta, el mapa se queda con la ruta y los botones de cambiar; las capas, plegada */
  #vj-mapa.con-portada .vj-capas, #vj-mapa.con-portada .vj-leyenda { display: none; }
  /* El asa se arrastra (W-054): que el dedo no mueva la página a la vez */
  .vj .vj-asa { touch-action: none; }
  /* Abierta a mano o al leer, casi entera: queda una franja del mapa encima (W-051) */
  .vj-portada-hoja[data-alta] { max-height: calc(100% - 56px); }
  /* El menú del viaje, más bajo: 60 px eran mucho con dos cabeceras encima */
  .vj-menu button { padding: 5px 2px 6px; gap: 1px; }
  .vj-menu svg { width: 20px; height: 20px; }
}
@media (max-width: 959px) and (prefers-reduced-motion: no-preference) {
  .vj-portada-hoja { transition: max-height .35s cubic-bezier(.2, 0, .1, 1); }
}
/* En pantalla ancha, lo que se lee va a la izquierda y lo que maneja el mapa, a la derecha (W-057, con el
   dibujo de Pablo): la hoja de la parada o del tramo arriba a la izquierda y la portada debajo, plegada, o
   a lo alto si está abierta; las capas, «País entero» y la leyenda, arriba a la derecha; y cambiar paradas
   y aeropuertos, abajo a la derecha. En el móvil no cambia nada: ahí todo sube desde abajo. */
@media (min-width: 960px) {
  .vj-mapa-arriba { left: auto; right: 24px; align-items: flex-end; }
  .vj-capas { width: auto; justify-content: flex-end; }
  .vj-capas .encuadre { margin-left: 8px; }
  .vj-cambiar-mapa { left: auto; right: 20px; bottom: 20px; justify-content: flex-end; }
  .vj-hoja { left: 20px; right: auto; }
  /* Con la portada plegada debajo, la hoja acaba antes que ella: las dos a la vista */
  .vj-vistas:has(.vj-portada-hoja:not([hidden])) .vj-hoja { max-height: calc(100% - 118px); }
  .vj-portada-hoja { left: 20px; right: auto; top: 20px; bottom: 20px; width: 400px; max-height: none; border-radius: 24px; box-shadow: var(--sombra-tarjeta); }
  .vj-portada-hoja[data-plegada] { top: auto; }
  .vj .vj-asa::before { display: none; }
  .vj .vj-asa { padding: 14px 18px; }
}
@media (prefers-reduced-motion: no-preference) {
  .vj-portada-hoja { animation: vj-sube .5s cubic-bezier(.2, 0, .1, 1) .15s both; }
}
/* En papel, la portada es una sección más, abierta, detrás del mapa (y sola con «Lo justo») */
@media print {
  .vj-portada-hoja, .vj-portada-hoja[hidden] { position: static; display: block !important; width: auto; max-height: none;
    background: none; border-radius: 0; box-shadow: none; animation: none; }
  .vj .vj-asa { display: none !important; }
  .vj-portada-cuerpo, .vj-portada-cuerpo[hidden] { display: block !important; overflow: visible; border: 0; }
  .vj-portada-cuerpo .vj-columna { padding: 0; }
  /* Lo que solo sirve para tocar: cambiar un plan, las instrucciones de pantalla, el «–» de los días abiertos */
  .vj-cambiar, .vj-pantalla { display: none !important; }
  .vj-dia[open] > summary::after { content: ""; }
  .vj-parada-bloque > h3 { background: none; }
  .vj-m-parada.pildora.activo .fondo { fill: var(--superficie); stroke: var(--linea); }
  .vj-m-parada.pildora.activo .punto { fill: var(--oliva); }
  .vj-m-parada.pildora.activo .pildora-t { fill: var(--tinta); }
  .vj-m-parada.pildora.activo .dias { fill: var(--tinta-suave); }
}
/* El archivo de recuerdo (html.recuerdo, lo escribe viaje.js): se lee de arriba abajo */
html.recuerdo .vj-dia > summary::after, html.recuerdo .vj-dia[open] > summary::after { content: none; }
html.recuerdo #vj-mapa { background: none; }
html.recuerdo .vj-mapa { width: 100%; height: auto; margin: 0 auto; background: var(--mar); border-radius: 24px; }

/* ---------- 7. Sin cursivas en el resto (W-032: toda la letra, de palo y recta) ---------- */
/* El énfasis pasa de cursiva a peso; en los titulares ya iba en tinta suave (fase 1). */
em, .pasos-pie em, .lema em, .lead-grid label > span em { font-style: normal; font-weight: 600; }
.postal figcaption span, .muestra-gancho { font-style: normal; }
h1 em, h2 em, h3 em { font-weight: inherit; }
.viaje-cota { font-family: var(--letra); font-style: normal; }
.prosa-cita, .prosa-cita p { font-family: var(--titular); font-style: normal; font-weight: 500; letter-spacing: -.01em; }

/* ---------- 8. La casa ---------- */
/* La ruta que une los tres pasos del método va en oliva, como las rutas del mapa;
   el naranja queda para lo tuyo. */
.pasos-ruta path { stroke: var(--oliva); }

/* ---------- 9. Entradas animadas que nadie revelaba ---------- */
/* styles.css esconde los hijos de .tarjetas, .pasos, .viajes-lista y .huellas-fila
   hasta que su hoja [data-aparece] recibe is-visto. Fuera de una hoja así no los
   revela nadie: en guias.html la tarjeta de «La guía larga» no se veía nunca
   (también en la web publicada). Solo se esconden donde alguien los va a revelar. */
:not([data-aparece]) > .tarjetas > .tarjeta, section:not([data-aparece]) .tarjetas > .tarjeta,
section:not([data-aparece]) .pasos > .paso, section:not([data-aparece]) .viajes-lista > li,
section:not([data-aparece]) .huellas-fila > li { opacity: 1; transform: none; }
[data-aparece]:not(.is-visto) .tarjetas > .tarjeta, [data-aparece]:not(.is-visto) .pasos > .paso,
[data-aparece]:not(.is-visto) .viajes-lista > li, [data-aparece]:not(.is-visto) .huellas-fila > li { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  [data-aparece]:not(.is-visto) .tarjetas > .tarjeta, [data-aparece]:not(.is-visto) .pasos > .paso,
  [data-aparece]:not(.is-visto) .viajes-lista > li, [data-aparece]:not(.is-visto) .huellas-fila > li { opacity: 1; }
}

/* ---------- 10. Tu perfil (perfil.html; hasta el 26-09-2026, cuenta.html) y los itinerarios guardados ---------- */
.cuenta-form { background: var(--superficie); border-radius: var(--radio); padding: clamp(20px, 3vw, 32px); box-shadow: var(--sombra-tarjeta); max-width: 520px; }
.cuenta-form h2, .cuenta h3, .cuenta .seccion-cabecera h2 { font-weight: 600; letter-spacing: -.01em; }
.cuenta-pestana { min-height: 40px; font-size: 15px; font-weight: 600; background: var(--superficie); border-color: transparent; }
.cuenta-pestana[aria-selected="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.cuenta-viaje, .itinerarios-lista > li { background: var(--superficie); border-radius: 18px; padding: 16px 18px; box-shadow: var(--sombra-tarjeta); border: 0; }
.itinerarios-lista { display: grid; gap: 12px; border-top: 0; }
.cuenta-mas summary { font-weight: 600; }
/* Los botones de cada viaje caben en el móvil: bajan de línea en vez de salirse */
.itinerario-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; min-width: 0; }
.itinerarios-lista > li > div:first-child { min-width: 0; }
@media (max-width: 640px) { .itinerarios-lista > li { flex-direction: column; align-items: flex-start; } }

/* W-046: el perfil en la cabecera, junto a «Menú»; con perfil abierto, su inicial */
.perfil-boton { margin-left: auto; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none;
  border: 1px solid var(--linea-control); background: var(--superficie); color: var(--tinta); text-decoration: none; transition: border-color .25s, background .25s; }
.perfil-boton + .menu-boton { margin-left: 10px; }
.perfil-boton[aria-current="page"]{ border-color: var(--tinta); }@media (hover:hover) and (pointer:fine){.perfil-boton:hover{ border-color: var(--tinta); }}
.perfil-boton:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.perfil-boton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.perfil-boton span { font: 700 16px/1 var(--letra); }
.perfil-boton.con-inicial { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

/* W-046: los cuatro bloques del perfil */
.perfil-cuenta { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; background: var(--superficie); border-radius: var(--radio); padding: 18px 20px; box-shadow: var(--sombra-tarjeta); }
.perfil-cuenta strong { display: block; font-size: 19px; overflow-wrap: anywhere; }
.perfil-cuenta .kicker { margin: 0 0 2px; }
.perfil-cuenta .nota, .cuenta-viaje .nota, .perfil-cambios .nota, .perfil-interruptor .nota { display: block; }
.perfil-indice { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.perfil-indice a { padding: 8px 14px; border-radius: 999px; background: var(--superficie); box-shadow: var(--sombra-tarjeta); text-decoration: none; font-weight: 600; font-size: 15px; color: var(--tinta); }
.perfil-aviso { background: var(--superficie); border-radius: 14px; padding: 12px 16px; margin-top: 16px; }
.perfil-bloque { margin-top: clamp(32px, 5vw, 56px); scroll-margin-top: 96px; }
.perfil-bloque > h2 { font-weight: 600; letter-spacing: -.01em; margin: 0 0 14px; }
.perfil-bloque h3 { margin: 26px 0 10px; }
.perfil-bloque button.enlace { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.perfil-huella { display: flex; gap: 20px; align-items: center; background: var(--superficie); border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra-tarjeta); }
.perfil-huella .huella { width: 96px; height: 96px; flex: none; }
.perfil-huella-nombre { font: 600 22px/1.2 var(--titular); margin: 0 0 6px; }
.perfil-huella .itinerario-botones { margin-top: 12px; }
.perfil-cambios, .perfil-avisos { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.perfil-cambios li { background: var(--superficie); border-radius: 14px; padding: 12px 16px; }
.perfil-interruptor { display: flex; gap: 14px; align-items: flex-start; background: var(--superficie); border-radius: 16px; padding: 14px 16px; box-shadow: var(--sombra-tarjeta); cursor: pointer; }
.perfil-interruptor input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--tinta); flex: none; }
.perfil-entrar .cuenta-form { margin-top: 12px; }
.perfil-proveedores { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; max-width: 520px; }
.perfil-proveedor { flex: 1 1 220px; justify-content: center; }
.perfil-o { display: flex; align-items: center; gap: 12px; max-width: 520px; color: var(--tinta-suave); font-size: 15px; margin: 10px 0; }
.perfil-o::before, .perfil-o::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
@media (max-width: 640px) { .perfil-huella { flex-direction: column; align-items: flex-start; } }

/* ---------- 11. El desplazamiento suave (lib/suave.js, con Lenis) ---------- */
/* Lo que pide Lenis 1.3.26 en su lenis.css, sin lo que aquí no se usa */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Compartir el viaje (W-055): un botón en la cabecera y una ventana con la tarjeta y las tres maneras */
.vj .vj-compartir-abrir { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--linea-control); font-size: 13.5px; flex: none; align-self: center; color: var(--tinta); }
.vj-compartir-abrir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* En el móvil la cabecera no da para otro botón: compartir va en el mapa, abajo a la derecha, flotando
   encima de la portada como los de cambiar (a la izquierda) y escondido cuando ellos se esconden */
.vj-compartir-mapa { display: none; }
@media (max-width: 959px) {
  .vj .vj-compartir-abrir { display: none; }
  .vj-compartir-mapa { position: absolute; right: 12px; bottom: calc(var(--hoja-alto, 0px) + 12px); z-index: 2; display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 50%; background: var(--superficie); border: 1px solid var(--linea-control);
    box-shadow: 0 2px 10px var(--sombra); color: var(--tinta); }
  .vj-compartir-mapa svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .vj-hoja:not([hidden]) ~ .vj-compartir-mapa, #vj-mapa[data-hoja-alta] .vj-compartir-mapa { display: none; }
}
.vj-compartir { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(28, 26, 24, .45); }
.vj-compartir[hidden] { display: none; }
.vj-compartir-caja { display: flex; flex-direction: column; gap: 14px; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 18px; border-radius: 24px; background: var(--superficie); box-shadow: var(--sombra-tarjeta); }
.vj-compartir-img img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--linea-suave); }
.vj-compartir-vias { display: flex; flex-wrap: wrap; gap: 8px; }
.vj-compartir-vias a { color: inherit; text-decoration: none; }
/* Guardar la imagen: al alcance, pero pequeño (Pablo, 27-09: casi nadie quiere descargar) */
.vj-compartir-guardar button { background: none; border: 0; padding: 0; font-size: 13px; color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media print { .vj-compartir, .vj-compartir-abrir, .vj-compartir-mapa { display: none !important; } }

/* La huella: guardar la imagen, pequeño y debajo de compartir (W-055) */
.avatar-guardar { text-align: center; margin-top: 6px; }
.avatar-guardar button { background: none; border: 0; padding: 0; font-size: 13px; color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- 12. Textos cortos (W-058, lista de Pablo del 27-09) ---------- */
/* Los datos de cada plan, en una fila, cada uno con su icono */
.vj-datos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.vj-dato { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; line-height: 1.35; color: var(--tinta-suave); }
.vj-dato svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Lo largo, plegado: «Lo práctico», «Cómo es el camino» */
.vj-plegable { margin-top: 2px; }
.vj-plegable > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
  font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.vj-plegable > summary::-webkit-details-marker { display: none; }
.vj-plegable > summary::after { content: "+"; font-weight: 400; font-size: 16px; line-height: 1; color: var(--tinta-suave); }
.vj-plegable[open] > summary::after { content: "–"; }
.vj-plegable > summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }
.vj-plegable > p + p { margin-top: 8px; }
.vj-plegable > .vj-tramo-nota { padding-left: 0; }
.vj-traslado + .vj-plegable, .vj-patas + .vj-plegable { padding-left: 26px; }
/* «Es una guía, no un horario», aparte del resto */
.vj-recomendacion { border-left: 2px solid var(--oliva); padding-left: 12px; }
@media print { .vj-plegable > summary::after { content: ""; } }
html.recuerdo .vj-plegable > summary::after { content: none; }

/* ---------- 13. El medio de cada tramo (W-059) ---------- */
.vj-medios { display: grid; gap: 8px; }
.vj-medios h3 { font: 600 12px var(--letra); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.vj-medios ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vj-medios li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--linea-suave); }
.vj-medios li.elegido { border-color: var(--oliva); background: color-mix(in srgb, var(--oliva) 7%, transparent); }
.vj-medio-icono { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--tinta); }
.vj-medio-icono .lleno { fill: currentColor; stroke: none; }
.vj-medio-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vj-medio-t b { font-size: 14.5px; font-weight: 600; }
.vj-medio-t small { font-size: 13px; color: var(--tinta-suave); }
.vj-medio-va { flex: none; font-size: 12.5px; font-weight: 600; color: var(--oliva); }
.vj-medios li .vj-mini { flex: none; }
/* Entre dos paradas de «Tus paradas»: el camino, que se despliega para cambiarlo */
.vj-zona-tramo { list-style: none; margin: 2px 0 2px 12px; padding-left: 16px; border-left: 2px dotted var(--linea); }
.vj-zona-tramo > p, .vj-zona-tramo summary { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 13.5px; color: var(--tinta-suave); }
.vj-zona-tramo summary { list-style: none; cursor: pointer; }
.vj-zona-tramo summary::-webkit-details-marker { display: none; }
.vj-zona-tramo .vj-medio-icono { width: 17px; height: 17px; color: var(--tinta-suave); }
.vj-zona-tramo-accion { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.vj-zona-tramo details[open] .vj-zona-tramo-accion { visibility: hidden; }
.vj-zona-tramo .vj-medios { margin: 4px 0 10px; }

/* ---------- 14. Tu perfil sin sesión (W-061): una tarjeta, arriba ---------- */
.perfil-pagina { padding-top: clamp(24px, 5vw, 64px); }
.perfil-tarjeta { max-width: 460px; margin: 0 auto; background: var(--superficie); border-radius: 24px; padding: clamp(22px, 4vw, 32px); box-shadow: var(--sombra-tarjeta);
  display: grid; gap: 12px; }
.perfil-tarjeta h2 { font-weight: 600; letter-spacing: -.01em; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.1; margin: 0; }
.perfil-tarjeta .kicker { margin: 0; }
.perfil-tarjeta .texto { color: var(--tinta-suave); margin: 0; }
.perfil-tarjeta .cuenta-form { background: none; box-shadow: none; padding: 0; max-width: none; margin: 4px 0 0; }
.perfil-tarjeta .cuenta-form .cta { width: 100%; justify-content: center; }
.perfil-tarjeta .perfil-proveedores { margin: 4px 0 0; }
.perfil-tarjeta .perfil-proveedor { flex: 1 1 100%; justify-content: center; }
.campo-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.campo-fila .enlace, .perfil-cambiar .enlace { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--tinta); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }
.perfil-cambiar { margin: 4px 0 0; text-align: center; font-size: 15px; color: var(--tinta-suave); }
.perfil-cambiar .enlace { font-size: 15px; font-weight: 600; }
.perfil-local { max-width: 460px; margin-left: auto; margin-right: auto; }
.perfil-sin { max-width: 460px; margin: 28px auto 0; text-align: center; }
.perfil-pagina > .perfil-aviso { max-width: 460px; margin: 0 auto 16px; }
.perfil-local .nota, .perfil-local .texto { margin-top: 10px; }

/* ---------- 15. El viaje gratis y el Completo (W-062) ---------- */
.vj-completo { display: grid; gap: 10px; padding: 18px; border-radius: 20px; background: var(--superficie); box-shadow: var(--sombra-tarjeta); margin: 8px 0 14px; }
.vj-completo h3 { font-weight: 600; letter-spacing: -.01em; font-size: 20px; line-height: 1.2; margin: 0; }
.vj-completo > p { margin: 0; color: var(--tinta-suave); }
.vj-completo .vj-kicker { color: var(--acento-texto); }
.vj-completo .vj-btn { justify-self: start; }
.vj-precio { font: 600 14px var(--letra); color: var(--tinta); }
.vj-vale { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.vj-vale label { display: grid; gap: 4px; flex: 1 1 180px; font-size: 14px; font-weight: 600; }
.vj-vale input { font: inherit; font-weight: 400; min-height: 40px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--linea-control); background: var(--papel); color: var(--tinta); letter-spacing: .04em; text-transform: uppercase; }
.vj-vale .vj-nota { flex: 1 1 100%; margin: 0; }
.vj-muestra { font: 600 12px var(--letra); letter-spacing: .08em; text-transform: uppercase; color: var(--acento-texto); margin: 0 0 8px; }
.vj-dia-cerrado > summary .vj-dia-res b::after { content: " · Completo"; font-weight: 500; color: var(--tinta-suave); }
.perfil-completo .perfil-vale { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; background: none; box-shadow: none; padding: 0; max-width: 520px; }
.perfil-completo .perfil-vale .campo { flex: 1 1 200px; }
.perfil-completo .perfil-vale .nota { flex: 1 1 100%; }
@media print { .vj-completo form, .vj-completo .vj-btn { display: none; } }

/* ---------- 16. Lo tuyo de cada día (Pablo, 28-09): una actividad o una nota, y si te gustó ---------- */
.vj-apuntes { display: grid; gap: 8px; margin: 10px 0 4px; }
.vj-apuntes-t { font: 600 12px var(--letra); letter-spacing: .08em; text-transform: uppercase; color: var(--acento-texto); margin: 4px 0 0; }
.vj-apunte { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linea-suave); }
.vj-apunte b { font-weight: 600; }
.vj-apunte p { margin: 0; font-size: 14px; color: var(--tinta-suave); }
.vj-apunte-acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.vj-apunte-acc .vj-marca[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.vj-apunte-papel { display: none; }
.vj-apunte-nuevo { justify-self: start; background: none; border: 1px dashed var(--linea-control); border-radius: 999px; padding: 6px 14px; min-height: 36px;
  font: 500 14px var(--letra); color: var(--tinta); cursor: pointer; }
.vj-apunte-form { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linea-suave); }
.vj-apunte-form label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.vj-apunte-form input, .vj-apunte-form textarea { font: inherit; font-weight: 400; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--linea-control);
  background: var(--papel); color: var(--tinta); }
@media print { .vj-apunte-papel { display: block; } }

/* ---- Destinos (viajes.html), como las tarjetas de la portada (plan de páginas, 29-09) ----
   Cada país: la foto con su nombre y una línea, cuándo ir y el botón. Lo demás (el texto, la hora del país y sus
   zonas), en «Qué te espera», un toque más abajo. */
.destinos { display: grid; gap: clamp(40px, 6vw, 64px); padding-bottom: clamp(48px, 8vw, 96px); }
@media (min-width: 900px) { .destinos { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.destino { display: grid; gap: 14px; align-content: start; }
.destino-foto { position: relative; border-radius: var(--radio); overflow: hidden; background: var(--papel-oscuro); }
.destino-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.destino-foto picture { display: block; }   /* W-168: la foto va en AVIF o WebP y a la medida del móvil */
.destino-titulo { position: absolute; left: 0; right: 0; bottom: 0; padding: 72px 22px 20px; color: #fff;
  background: linear-gradient(transparent, rgba(20, 18, 15, .72)); }
.destino-titulo h2 { font-size: clamp(40px, 9vw, 56px); font-weight: 400; line-height: 1; letter-spacing: -.02em; margin: 0 0 6px; color: #fff; }
.destino-titulo p { font-size: 17px; line-height: 1.35; color: rgba(255, 255, 255, .88); margin: 0; }
.destino-cuando { font-size: 15px; color: var(--tinta-suave); margin: 4px 0 0; }
.destino .cta { justify-self: start; margin: 0; }
.destino-mas { border-top: 1px solid var(--linea); }
.destino-mas > summary { list-style: none; cursor: pointer; padding: 14px 0; font-size: 15px; display: flex; align-items: center; }
.destino-mas > summary::-webkit-details-marker { display: none; }
.destino-mas > summary::after { content: "+"; margin-left: auto; color: var(--tinta-suave); font-size: 18px; }
.destino-mas[open] > summary::after { content: "–"; }
.destino-mas > :not(summary) { margin-bottom: 14px; }
.destino-mas .mapa-cota .relieve-mini { width: 72px; height: 72px; }
.destino-mas h3 { font-size: 16px; margin: 20px 0 8px; }


/* ---- Los 32 perfiles, dentro de Tu huella (plan de páginas, 29-09) ---- */
.huella-perfiles { padding-bottom: clamp(40px, 6vw, 72px); }
.perfiles-plegados > summary { list-style: none; cursor: pointer; display: grid; gap: 4px; padding: 18px 0;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); position: relative; }
.perfiles-plegados > summary::-webkit-details-marker { display: none; }
.perfiles-plegados > summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--tinta-suave); }
.perfiles-plegados[open] > summary::after { content: "–"; }
.perfiles-t { font-family: var(--titular); font-size: clamp(24px, 4vw, 32px); }
.perfiles-s { font-size: 15px; color: var(--tinta-suave); padding-right: 28px; }
.perfiles-plegados > .nota { margin: 18px 0; max-width: 62ch; }
.perfiles-plegados .galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; background: none; border: 0; }
@media (min-width: 760px) { .perfiles-plegados .galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.perfiles-plegados .perfil-card { padding: 14px; border-radius: var(--radio); min-height: 0; }
.perfiles-plegados .perfil-card .huella { width: 64px; height: 64px; margin: 0 0 8px; }
.perfiles-plegados .perfil-card h3 { font-size: 17px; line-height: 1.2; margin: 0 0 6px; }
.perfiles-plegados .perfil-card p { font-size: 13.5px; line-height: 1.4; margin: 0; }
.perfiles-plegados .perfil-ejes { margin-top: 8px !important; padding-top: 8px; font-size: 12px !important; }

/* ---------- 17. La guía que se acerca (W-077, Pablo 30-09): un solo mapa, del mundo a la calle ---------- */
/* Con guiaZoom (lib/guia.js). La portada de la web es la referencia: foto, un nombre en grande y una frase. */
body.con-guia-zoom .pie, body.con-guia-zoom [data-demo] { display: none; }
/* A todo lo ancho, como la pantalla del viaje de antes (la pantalla ya no está en main: vive en «Antes de salir») */
body.con-guia-zoom:not(.portada) main { width: 100%; margin: 0; border: 0; box-shadow: none; }
body.gz-antes-abierto { overflow: hidden; }
/* El fondo es el espacio alrededor del globo: el papel, para que la Tierra (con su mar) se recorte. */
.gz { position: relative; height: calc(100vh - var(--gz-arriba, 64px)); height: calc(100svh - var(--gz-arriba, 64px)); overflow: hidden; background: var(--papel); }
/* .gz delante: el CSS de MapLibre pone position: relative a su contenedor y llega después */
.gz .gz-mapa { position: absolute; inset: 0; }
.gz-mapa .maplibregl-ctrl-attrib { font: 11px var(--letra); background: color-mix(in srgb, var(--superficie) 80%, transparent); }

/* Arriba: dónde estás (se toca para volver) y «Antes de salir» */
.gz-arriba { position: absolute; z-index: 3; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none; }
.gz-arriba > * { pointer-events: auto; }
.gz-migas, .gz-antes-abrir { display: flex; align-items: center; min-height: 40px; border-radius: 999px; background: var(--superficie); box-shadow: var(--sombra-tarjeta);
  font: 600 14px var(--letra); color: var(--tinta); }
.gz-migas { padding: 0 6px; flex-wrap: wrap; max-width: calc(100% - 180px); }
/* En el móvil no caben: se vuelve con el botón del panel (y con el de atrás del teléfono) */
@media (max-width: 899px) { .gz-migas { display: none; } .gz-arriba { justify-content: flex-end; } }
.gz-migas button, .gz-migas span[aria-current] { border: 0; background: none; font: inherit; color: var(--tinta-suave); padding: 8px 8px; cursor: pointer; }
.gz-migas [aria-current] { color: var(--tinta); cursor: default; }
.gz-migas .sep { color: var(--linea); }
.gz-antes-abrir { gap: 8px; padding: 0 16px; border: 0; cursor: pointer; }
.gz-cuenta { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--acento); color: #fff; font: 700 12px/20px var(--letra); text-align: center; }
.gz:not([data-nivel]) .gz-arriba, .gz[data-nivel="mundo"] .gz-arriba { opacity: 0; pointer-events: none; }

/* El mundo: el nombre del destino en grande, como «Nausika» en la portada */
/* El nombre arriba y el globo debajo, con tu país en medio */
.gz-intro { position: absolute; z-index: 2; inset: 0; display: grid; align-content: start; justify-content: center; gap: 12px; padding: 7vh 24px 24px; text-align: center; cursor: pointer;
  text-shadow: 0 0 24px var(--papel), 0 0 2px var(--papel); }
/* El nombre grande es la entrada, no el título de la pantalla: el h1 es el de la cabecera del panel (Taste, 30-10) */
.gz-intro .gz-intro-t { margin: 0; font: 700 clamp(64px, 17vw, 200px)/.9 var(--titular); letter-spacing: -.045em; color: var(--tinta); }
.gz-intro-kicker { font: 600 14px var(--mono); letter-spacing: .02em; color: var(--tinta-suave); margin: 0; }
.gz-intro-frase { font-size: clamp(17px, 1.6vw, 22px); color: var(--tinta); margin: 0; }

/* Las paradas en el mapa: una píldora con su número; la elegida en naranja */
.gz-parada { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 4px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-tarjeta); font: 600 15px var(--letra); white-space: nowrap;
  transition: opacity .3s; }
/* W-164: sin transición de transform: ese transform lo pone MapLibre para colocar la marca en el mapa, y con ella la
   chincheta se quedaba atrás al mover el mapa (y se medía donde no estaba). */
/* Guía urgente (06-11): las paradas del viaje, encima de los puntos de las que no van (en Italia, el punto gris de otra
   zona caía sobre «Roma» y se leía «Ro○a»). */
.gz-parada { z-index: 1; }
.gz-otra { z-index: 0; }
.gz-parada .n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--oliva); color: var(--papel); font-size: 13px; }
.gz-parada.activa .n { background: var(--acento); color: #fff; }
.gz-parada.apagada { opacity: .5; transform: scale(.9); }
/* El nombre a la izquierda del punto: el número se queda donde estaba (translate se suma al transform con el que
   MapLibre coloca la marca). */
.gz-parada.a-izquierda { flex-direction: row-reverse; padding: 0 4px 0 14px; translate: calc(-100% + 30px) 0; }
.gz-parada.solo-numero { padding: 0 4px; gap: 0; }
.gz-parada.solo-numero b { display: none; }
.gz[data-nivel="mundo"] .gz-parada, .gz[data-nivel="zona"] .gz-parada, .gz[data-nivel="dia"] .gz-parada { display: none; }
/* El día de camino: de dónde sales y adónde llegas */
.gz[data-camino] .gz-parada.activa, .gz[data-camino] .gz-parada.origen { display: flex; opacity: 1; transform: none; }
/* Los planes: en la parada, el número de su día (se toca y lleva al día); en el día, el número del plan */
.gz-plan-punto { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--superficie);
  background: var(--acento); color: #fff; font: 700 13px var(--letra); box-shadow: var(--sombra-tarjeta); }
/* En la parada, cada sitio lleva el número de su día (Pablo, 01-10), en oliva para no confundirse con los planes del
   día, que van en naranja. Se toca y lleva a su día. */
.gz-plan-punto.de-dia { width: 28px; height: 28px; border-width: 3px; background: var(--oliva); cursor: pointer; padding: 0; }
.gz-plan-punto.de-dia::after { content: ""; position: absolute; inset: -12px; }
.gz-plan-punto.de-dia.junto { width: auto; min-width: 28px; padding: 0 8px; border-radius: 999px; }
.gz-plan-punto.zona { box-shadow: 0 0 0 14px color-mix(in srgb, var(--acento) 18%, transparent), var(--sombra-tarjeta); }
.gz-plan-punto.de-dia.zona { box-shadow: 0 0 0 10px color-mix(in srgb, var(--oliva) 16%, transparent), var(--sombra-tarjeta); }

/* El panel: abajo en el móvil, a la izquierda en pantalla ancha */
.gz-panel { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--papel); border-radius: var(--radio) var(--radio) 0 0; box-shadow: 0 -8px 32px rgba(28, 26, 24, .14);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .45s; }
.gz-panel.entra { transform: translateY(28px); opacity: 0; transition: none; }
.gz-panel--mundo { display: none; }
.gz-panel--zona { max-height: 62%; }
.gz-panel--dia { max-height: 60%; }
@media (min-width: 900px) {
  .gz-panel { top: 0; right: auto; width: 440px; max-height: none !important; border-radius: 0; box-shadow: 8px 0 32px rgba(28, 26, 24, .12); }
  .gz-arriba { left: 464px; }
  /* Con sitio a la izquierda, la cabecera con foto crece: más cerca de la portada */
  .gz-hero.con-foto, .gz-panel--pais .gz-hero.con-foto { min-height: 44vh; }
}
@media (prefers-reduced-motion: reduce) { .gz-panel { transition: none; } .gz-parada { transition: none; } }

/* La cabecera de la parada y del día: la portada en pequeño */
.gz-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; padding: 64px 20px 20px; color: var(--tinta); }
.gz-hero.con-foto { min-height: 240px; color: #F5F3EC; }
.gz-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gz-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 16, .38) 0%, rgba(20, 18, 16, .12) 30%, rgba(20, 18, 16, .5) 60%, rgba(20, 18, 16, .72) 100%); }
.gz-hero.con-foto .gz-kicker { opacity: 1; }
.gz-hero-texto { position: relative; display: grid; gap: 6px; }
.gz-hero h1 { font: 700 clamp(40px, 11vw, 60px)/.95 var(--titular); letter-spacing: -.04em; margin: 0; }
.gz-panel--dia .gz-hero h1 { font-size: clamp(34px, 9vw, 48px); }
.gz-kicker { font: 600 13px var(--mono); letter-spacing: .02em; margin: 0; opacity: .85; }
.gz-frase { font-size: 17px; line-height: 1.4; margin: 0; max-width: 32ch; }
.gz-volver { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 14px 0 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); font: 600 14px var(--letra); }
.gz-hero.con-foto .gz-volver { background: rgba(20, 18, 16, .35); border-color: rgba(245, 243, 236, .45); color: #F5F3EC; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gz-volver svg, .gz-dias svg, .gz-paradas svg, .gz-pasos svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.gz-credito { position: absolute; right: 10px; bottom: 6px; font-size: 11px; opacity: .7; }

/* Las listas: paradas del país y días de la parada */
.gz-cuerpo { padding: 4px 20px 24px; }
.gz-cuerpo--pais { padding-top: 4px; }
.gz-panel--pais .gz-hero.con-foto { min-height: 190px; }
.gz-panel--pais { max-height: 46%; }
.gz-paradas, .gz-dias, .gz-planes { list-style: none; margin: 0; padding: 0; }
.gz-dias { padding: 4px 8px 24px; }
.gz-paradas button, .gz-dias button { display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; align-items: center; width: 100%; text-align: left;
  border: 0; border-bottom: 1px solid var(--linea); background: none; color: var(--tinta); padding: 14px 12px; cursor: pointer; font: inherit; }
.gz-paradas li:last-child button, .gz-dias li:last-child button { border-bottom: 0; }
.gz-paradas .n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--oliva); color: var(--papel); font: 600 13px var(--letra); grid-row: span 2; }
.gz-paradas b, .gz-dias b { font: 600 20px/1.2 var(--titular); letter-spacing: -.01em; }
.gz-paradas small, .gz-dias small { grid-column: 2; font-size: 14px; color: var(--tinta-suave); }
.gz-paradas svg, .gz-dias svg { grid-column: 3; grid-row: 1 / span 2; color: var(--tinta-suave); }
.gz-dia-n { grid-row: span 2; align-self: start; padding-top: 5px; min-width: 52px; font: 600 13px var(--mono); color: var(--tinta-suave); }
@media (hover:hover) and (pointer:fine){.gz-paradas button:hover b,.gz-dias button:hover b{ color: var(--acento-texto); }}

/* El día: sus planes, con la foto si la hay */
.gz-nota { font-size: 15.5px; line-height: 1.5; color: var(--tinta-suave); margin: 16px 0 0; }
/* W-085: dormir, comer y moverse en el panel de la parada. */
.gz-aqui h3 { font: 600 18px/1.25 var(--titular); margin: 20px 0 6px; }
.gz-aqui ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.gz-plan { padding: 18px 0; border-bottom: 1px solid var(--linea); transition: background-color .6s; }
.gz-plan.resalta { background: color-mix(in srgb, var(--acento) 10%, transparent); }
.gz-plan-foto { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; margin-bottom: 12px; }
.gz-plan-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.gz-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--acento); color: #fff; font: 700 13px var(--letra); }
.gz-plan-cab small { font: 600 13px var(--mono); color: var(--tinta-suave); }
.gz-plan h3, .gz-plan h2 { font: 600 19px/1.25 var(--titular); margin: 0 0 6px; }
.gz-plan p { font-size: 15.5px; line-height: 1.5; color: var(--tinta-suave); margin: 0; }
.gz-plan .gz-datos { margin-top: 8px; font: 600 13px var(--mono); color: var(--tinta); }
.gz-pasos { display: flex; justify-content: space-between; gap: 12px; padding: 18px 0 8px; }
.gz-pasos button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linea);
  background: var(--superficie); color: var(--tinta); font: 600 15px var(--letra); cursor: pointer; }

/* Antes de salir: la pantalla de siempre, solo con Reservas y Más */
.gz-antes { position: fixed; z-index: 60; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--papel); }
.gz-antes-cab { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 12px 20px;
  background: var(--papel); border-bottom: 1px solid var(--linea); }
.gz-antes-cab h2 { font: 700 26px var(--titular); letter-spacing: -.02em; margin: 0; }
.gz-cerrar { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); font: 400 24px/1 var(--letra); cursor: pointer; }
/* La pantalla de siempre, en su flujo normal (como en papel): una vista debajo de otra */
.gz-antes .vj { height: auto; min-height: 0; overflow: visible; display: block; }
.gz-antes .vj-vistas { position: static; display: block; min-height: 0; }
.gz-antes .vj-vista { position: static; overflow: visible; }
.gz-antes .vj-menu, .gz-antes #vj-mapa, .gz-antes #vj-preparar, .gz-antes #vj-dias { display: none !important; }
.gz-antes #vj-reservas[hidden], .gz-antes #vj-mas[hidden] { display: block !important; }

/* Cambiar desde la guía (Pablo, 30-09): un plan desde su día y las paradas desde el país o la parada */
.gz-accion, .gz-cambiar > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px 0 14px; margin: 16px 0 4px; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); font: 600 15px var(--letra); cursor: pointer; list-style: none; }
.gz-cambiar > summary::-webkit-details-marker { display: none; }
.gz-accion svg, .gz-cambiar > summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.gz-cambiar[open] > summary { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.gz-cambiar-cuerpo { display: grid; gap: 10px; padding: 14px 0 4px; }
.gz-cambiar-cuerpo p { font-size: 15.5px; line-height: 1.45; margin: 0; }
.gz-cambiar-cuerpo .vj-hoja-pie { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.gz-cambiar-cuerpo .vj-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--linea);
  background: var(--superficie); color: var(--tinta); font: 500 14.5px var(--letra); text-align: left; cursor: pointer; }
.gz-cambiar-cuerpo .vj-btn:disabled { opacity: .5; cursor: default; }
.gz-aviso { font: 600 14px var(--letra); color: var(--acento-texto); }
/* «Paradas y días»: de la pantalla de siempre solo su hoja de paradas, en el flujo de la capa */
.gz-antes[data-modo="paradas"] .vj-cab, .gz-antes[data-modo="paradas"] #vj-reservas, .gz-antes[data-modo="paradas"] #vj-mas { display: none !important; }
.gz-antes[data-modo="paradas"] #vj-mapa, .gz-antes[data-modo="paradas"] #vj-mapa[hidden] { display: block !important; position: static; height: auto; }
.gz-antes[data-modo="paradas"] #vj-mapa > :not(.vj-hoja) { display: none !important; }
.gz-antes[data-modo="paradas"] .vj-hoja { position: static; max-height: none; border: 0; border-radius: 0; box-shadow: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 16px 20px 40px; }
.gz-antes[data-modo="paradas"] .vj-hoja-cab .cerrar, .gz-antes[data-modo="paradas"] .vj-hoja-cab h2 { display: none; }
.gz-antes[data-modo="paradas"] .vj, .gz-antes[data-modo="paradas"] #vj-mapa { background: var(--papel); }
.gz-idea { display: grid; gap: 2px; }
.gz-idea b { font: 600 18px/1.25 var(--titular); }
.gz-idea small { font-size: 14px; color: var(--tinta-suave); }

/* ---------- 18. El cuestionario sin preámbulo y la huella que crece (W-078) ---------- */
.dna-top-texto { flex: 1; display: grid; gap: 8px; min-width: 0; }
.dna-top:has(.dna-top-texto) { flex-direction: row; align-items: center; gap: 14px; margin-bottom: 18px; }
.dna-huella { width: 64px; height: 64px; flex: none; overflow: visible; }
/* El «recuadro negro» del análisis del 29-09: el marco de foco de la pregunta, que recibe el foco al
   cambiar de pantalla para que el lector de pantalla la lea. No se puede tocar ni escribir en ella. */
.dna-screen h2[tabindex="-1"]:focus { outline: none; }
.dna-linea { margin: 0 0 22px; font-size: 15px; color: var(--tinta-suave); }
.dna-linea .dna-rank-reset { margin: 0 0 0 6px; }
.dna-ninguna { display: block; margin: 18px auto 0; padding: 10px 18px; border: 1px solid var(--linea-control); border-radius: 999px;
  background: transparent; color: var(--tinta-suave); font-size: 15px; }
@media (hover:hover) and (pointer:fine){.dna-ninguna:hover{ color: var(--tinta); border-color: var(--tinta); }}
.dna-ninguna.is-sel { color: var(--papel); background: var(--oliva); border-color: var(--oliva); }
.dna-dos .pos { font-size: 16px; }
.dna-dos button:not(.is-ranked) .pos { background: transparent; }
/* En el ordenador, la pregunta de fotos cabe entera en una pantalla: las fotos, más apaisadas. */
@media (min-width: 900px) { .dna-img-card .frame { aspect-ratio: 16 / 9; } }
@media (max-width: 720px) {
  .dna-top:has(.dna-top-texto) { gap: 12px; }
  .dna-huella { width: 56px; height: 56px; }
  .avatar-card--una { padding-top: 22px; padding-bottom: 22px; }
  .avatar-card--una .avatar-figura { margin: 6px 0 0; }
  .avatar-card--una .huella--grande { width: 150px; height: 150px; }
  .avatar-card--una .avatar-nombre { margin-top: 4px; }
}
/* El resultado, en una pantalla */
.con-resultado .cabecera-pagina { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.avatar-card--una { text-align: center; }
.avatar-card--una .avatar-share { justify-content: center; }
.avatar-card--una .q-hint { margin: 10px auto 0; max-width: 34ch; }
.avatar-card--una .avatar-guardar { margin-top: 14px; }
.avatar-guardar button { color: var(--tinta-suave); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; font-size: 14px; }
@media (hover:hover) and (pointer:fine){.avatar-guardar button:hover{ color: var(--tinta); }}
.huella-se-ve { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linea); }
.huella-se-ve p { margin: 0 0 10px; font-size: 15px; color: var(--tinta-suave); }
.huella-se-ve div { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.huella-se-ve button { padding: 8px 16px; border: 1px solid var(--linea-control); border-radius: 999px; font-size: 15px; background: transparent; color: inherit; }
@media (hover:hover) and (pointer:fine){.huella-se-ve button:hover{ border-color: var(--tinta); }}
.huella-se-ve button.is-sel { background: var(--oliva); border-color: var(--oliva); color: var(--papel); }
.huella-detalle { margin-top: 28px; border-top: 1px solid var(--linea); }
.huella-detalle > summary { cursor: pointer; padding: 18px 0; font: 600 18px/1.3 var(--titular); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.huella-detalle > summary::-webkit-details-marker { display: none; }
.huella-detalle > summary::after { content: "+"; font-weight: 400; font-size: 22px; color: var(--tinta-suave); }
.huella-detalle[open] > summary::after { content: "–"; }
.con-resultado .huella-acciones { justify-content: center; margin-top: 8px; }
.con-resultado .dna-result { max-width: 720px; margin: 0 auto; }

/* ---------- 19. Antes de salir por secciones, y cambiar el viaje (W-079, Pablo 01-10) ---------- */
.gz-arriba-botones { display: flex; gap: 8px; align-items: center; }
.gz-cambiar-viaje { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: var(--superficie); box-shadow: var(--sombra-tarjeta); color: var(--tinta); cursor: pointer; }
.gz-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.gz-antes-cab { justify-content: flex-start; gap: 6px; }
.gz-antes-cab .gz-cerrar { margin-left: auto; }
.gz-atras { width: 40px; height: 40px; margin-left: -10px; padding: 0; display: grid; place-items: center; border: 0; background: none; color: var(--tinta); cursor: pointer; }
.gz-atras[hidden] { display: none; }
/* El índice: tarjetas como las de la portada */
.gz-antes .gz-antes-indice, .gz-antes .gz-antes-seccion { display: none; }
.gz-antes[data-modo="antes"]:not([data-seccion]) .gz-antes-indice { display: block; padding: 6px 20px 40px; }
.gz-antes[data-modo="antes"]:not([data-seccion]) .gz-antes-cuerpo > .vj { display: none !important; }
.gz-antes[data-modo="antes"][data-seccion] .gz-antes-seccion { display: block; padding: 4px 20px 0; }
.gz-antes-viaje { font: 600 13px var(--mono); letter-spacing: .02em; color: var(--tinta-suave); margin: 0 0 14px; }
.gz-tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gz-tarjeta { display: grid; gap: 8px; align-content: start; min-height: 132px; padding: 18px; text-align: left; border: 0; border-radius: var(--radio);
  background: var(--superficie); box-shadow: var(--sombra-tarjeta); color: var(--tinta); cursor: pointer; }
.gz-tarjeta .gz-ico { width: 28px; height: 28px; color: var(--oliva); }
.gz-tarjeta b { font: 600 20px/1.15 var(--titular); letter-spacing: -.01em; }
.gz-tarjeta small { font-size: 14px; line-height: 1.35; color: var(--tinta-suave); }
.gz-tarjeta.ancha { grid-column: 1 / -1; min-height: 0; }
.gz-acompanante { display: flex; gap: 14px; align-items: center; width: 100%; margin-top: 18px; padding: 16px 18px; text-align: left;
  border: 1px dashed var(--linea-control); border-radius: var(--radio); background: transparent; color: var(--tinta); cursor: pointer; }
.gz-acompanante .gz-ico { width: 28px; height: 28px; color: var(--oliva); }
.gz-acompanante b { display: block; font: 600 17px/1.25 var(--titular); }
.gz-acompanante small { font-size: 14px; color: var(--tinta-suave); }
/* Dentro de una sección, de la pantalla de siempre solo lo suyo. «En papel» y «Guardarlo para siempre», por ahora, no salen. */
.gz-antes[data-modo="antes"] .vj-cab, .gz-antes[data-modo="antes"] .vj-mas-t, .gz-antes[data-modo="antes"] [data-fila="m-aeropuertos"],
.gz-antes [data-fila="m-En papel"], .gz-antes [data-fila="m-Guardarlo para siempre"] { display: none !important; }
.gz-antes[data-seccion]:not([data-seccion="reservar"]) #vj-reservas { display: none !important; }
.gz-antes[data-seccion="reservar"] #vj-mas { display: none !important; }
.gz-antes[data-seccion] #vj-mas .vj-mas-fila, .gz-antes[data-seccion] .vj-mas-texto { display: none; }
.gz-antes[data-seccion="presupuesto"] #vj-mas [data-fila="m-presupuesto"], .gz-antes[data-seccion="seguro"] #vj-mas [data-fila="m-vj-ficha-seguro"],
.gz-antes[data-seccion="conducir"] #vj-mas [data-fila="m-vj-ficha-conduccion"], .gz-antes[data-seccion="grupo"] #vj-mas [data-fila="m-grupo"],
.gz-antes[data-seccion="mas"] #vj-mas [data-fila="m-vj-urgencias"], .gz-antes[data-seccion="mas"] #vj-mas [data-fila="m-vj-ficha-seguridad"],
.gz-antes[data-seccion="mas"] #vj-mas [data-fila="m-vj-ficha-accesibilidad"], .gz-antes[data-seccion="mas"] #vj-mas [data-fila="m-vj-ficha-menores"],
.gz-antes[data-seccion="mas"] #vj-mas [data-fila="m-vj-ficha-etiqueta"], .gz-antes[data-seccion="mas"] #vj-mas [data-fila="m-Timos conocidos"],
.gz-antes[data-seccion="mas"] #vj-mas [data-fila="m-Errores que se repiten"], .gz-antes[data-seccion="mas"] #vj-mas .vj-mas-texto { display: block; }
.gz-antes[data-seccion="presupuesto"] [data-fila="m-presupuesto"] > summary, .gz-antes[data-seccion="grupo"] [data-fila="m-grupo"] > summary { display: none; }
/* Seguro y Conducir, en corto: un punto por tarjeta, con su icono */
.gz-puntos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.gz-puntos li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: var(--radio);
  background: var(--superficie); box-shadow: var(--sombra-tarjeta); }
.gz-puntos .gz-ico { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--oliva); color: var(--papel); }
.gz-puntos b { display: block; font: 600 17px/1.25 var(--titular); margin-bottom: 2px; }
.gz-puntos span { font-size: 15px; line-height: 1.4; color: var(--tinta-suave); }
.gz-puntos-pie { margin: 22px 0 0; font: 600 13px var(--mono); letter-spacing: .02em; color: var(--tinta-suave); }
/* Cambiar el viaje: paradas y días, o aeropuertos */
.gz-antes-pestanas { display: flex; gap: 8px; padding: 6px 20px 0; }
.gz-antes-pestanas[hidden] { display: none; }
.gz-antes-pestanas button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--linea-control); background: transparent; color: var(--tinta);
  font: 600 15px var(--letra); cursor: pointer; }
.gz-antes-pestanas button[aria-pressed="true"] { background: var(--oliva); border-color: var(--oliva); color: var(--papel); }
/* El presupuesto: otro rango, para quien trazó el viaje */
.vj-pres-rango { margin-top: 24px; }
.vj-pres-rango-campos { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0 4px; }
.vj-pres-rango-campos label { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.vj-pres-rango-campos input { width: 7em; padding: 8px 10px; border: 1px solid var(--linea-control); border-radius: 10px; background: var(--superficie); color: var(--tinta); font: inherit; }
@media (min-width: 900px) {
  .gz-tarjetas { grid-template-columns: repeat(4, 1fr); }
  .gz-antes-indice, .gz-antes-seccion { max-width: 960px; margin: 0 auto; }
}

/* =========================================================================
   §20 — Cambiar el viaje con el mapa a la vista (W-080, Pablo 01-10)
   La hoja de cambiar va abajo en el móvil y a la izquierda en pantalla ancha;
   el mapa se queda, con las zonas que se pueden añadir y los aeropuertos.
   ========================================================================= */
.gz-antes[data-modo="paradas"] { inset: auto 0 0 0; height: 56vh; height: 56svh; border-radius: var(--radio) var(--radio) 0 0;
  box-shadow: 0 -8px 32px rgba(28, 26, 24, .16); }
.gz-antes[data-modo="paradas"] .gz-antes-cab { padding: 10px 16px 8px; border-radius: var(--radio) var(--radio) 0 0; }
.gz-antes[data-modo="paradas"] .gz-antes-cab h2 { font-size: 22px; }
.gz-antes[data-modo="paradas"] .gz-antes-pestanas { padding: 2px 16px 0; }
.gz-antes[data-modo="paradas"] .vj-hoja { padding: 12px 16px 32px; }
@media (min-width: 900px) {
  .gz-antes[data-modo="paradas"] { inset: var(--gz-arriba, 64px) auto 0 0; width: 440px; height: auto; border-radius: 0;
    box-shadow: 8px 0 32px rgba(28, 26, 24, .12); }
  .gz-antes[data-modo="paradas"] .gz-antes-cab { border-radius: 0; }
  .gz-antes[data-modo="paradas"] .vj-hoja { padding: 14px 20px 40px; }
}
/* Mientras se cambia, el mapa enseña la ruta entera: sin el panel de la guía, sin los puntos de los planes y sin los
   botones de arriba, que llevarían a otra parte. */
.gz[data-editando] .gz-arriba, .gz[data-editando] .gz-panel, .gz[data-editando] .gz-plan-punto { visibility: hidden; }
.gz[data-editando] .gz-parada { display: flex !important; opacity: 1; transform: none; z-index: 1; }
/* Las pestañas se quedan arriba al bajar por la lista. */
.gz-antes[data-modo="paradas"] .gz-antes-pestanas { position: sticky; top: var(--gz-cab, 52px); z-index: 2; background: var(--papel); padding-bottom: 8px; }
/* El asa del móvil: baja la hoja para ver más mapa. */
.gz-asa { display: none; }
@media (max-width: 899px) {
  .gz-antes[data-modo="paradas"] { transition: height .3s cubic-bezier(.2, .7, .2, 1); }
  .gz-antes[data-modo="paradas"][data-bajo] { height: 30vh; height: 30svh; }
  .gz-antes[data-modo="paradas"] .gz-antes-cab { padding-top: 18px; }
  .gz-antes[data-modo="paradas"] .gz-asa { display: block; position: absolute; top: 0; left: 50%; width: 88px; height: 20px; margin-left: -44px; padding: 0;
    border: 0; background: none; cursor: pointer; }
  .gz-asa span { display: block; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 999px; background: var(--linea-control); }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .gz-antes[data-modo="paradas"] { transition: none; } }

/* Las zonas que se pueden añadir: un punto con «+», su nombre y lo que suman de camino. Las recomendadas, en naranja;
   las que pillan de paso, con la etiqueta en salvia. Van encima de las paradas, cuyos nombres las esquivan. */
.gz-cand { z-index: 2; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 3px; border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--superficie) 92%, transparent); color: var(--tinta); box-shadow: var(--sombra-tarjeta);
  font: 600 13px var(--letra); white-space: nowrap; }
.gz-cand .punto { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px dashed var(--oliva);
  color: var(--oliva); font: 700 14px/1 var(--letra); }
.gz-cand small { font: 600 11.5px var(--letra); padding: 2px 7px; border-radius: 999px; background: var(--papel-oscuro); color: var(--tinta-suave); }
.gz-cand.de-paso small { background: var(--salvia); color: var(--oliva); }
.gz-cand.recomendada .punto { border-style: solid; border-color: var(--acento); background: var(--acento); color: #fff; }
.gz-cand.encaja-no { opacity: .6; }
.gz-cand.encaja-no b { font-weight: 500; }
.gz-cand.elegida { opacity: 1; box-shadow: 0 0 0 2px var(--acento), var(--sombra-tarjeta); z-index: 3; }
.gz-cand.a-izquierda { flex-direction: row-reverse; padding: 0 3px 0 10px; translate: calc(-100% + 28px) 0; }
.gz-cand.sin-nombre { padding: 0 3px; gap: 0; }
.gz-cand.sin-nombre b, .gz-cand.sin-nombre small { display: none; }
.gz-cand:focus-visible, .gz-aero:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* Los aeropuertos: encima de su parada, con su código; por donde entras o vuelves, en oliva. */
.gz-aero { z-index: 4; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 8px; border: 0; border-radius: 999px;
  cursor: pointer; background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-tarjeta); font: 700 13px var(--letra); white-space: nowrap; }
.gz-aero::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit;
  transform: rotate(45deg); border-radius: 2px; }
.gz-aero .gz-avion { width: 16px; height: 16px; fill: currentColor; }
.gz-aero small { font: 600 11.5px var(--letra); opacity: .85; }
.gz-aero.elegido { background: var(--oliva); color: var(--papel); }
.gz-aero.elegida { box-shadow: 0 0 0 2px var(--acento), var(--sombra-tarjeta); z-index: 5; }

/* En la lista: lo que se mira en el mapa, resaltado; y lo que suma cada zona, en etiquetas. */
.gz-antes .vj-zona, .gz-antes .vj-aero-op { scroll-margin: 80px; transition: background-color .3s; }
.gz-antes .vj-zona.elegida, .gz-antes .vj-aero-op.elegida { background: color-mix(in srgb, var(--acento) 7%, transparent);
  box-shadow: -10px 0 0 color-mix(in srgb, var(--acento) 7%, transparent), 10px 0 0 color-mix(in srgb, var(--acento) 7%, transparent); }
.gz-antes .resalta { animation: gz-resalta 1.4s ease-out; }
@keyframes gz-resalta { from { box-shadow: 0 0 0 3px var(--acento); } to { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .gz-antes .resalta { animation: none; } }
.vj-zona-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.vj-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--papel-oscuro);
  color: var(--tinta); font: 600 13px var(--letra); }
.vj-chip.de-paso { background: var(--salvia); color: var(--oliva); }
.vj-chip small { margin-left: 5px; font-weight: 500; color: inherit; opacity: .8; }
.vj-aero-op .vj-zona-chips { margin: 4px 0 2px; }
.vj-aero-op .vj-chip { white-space: normal; padding: 4px 10px; }
.vj-zona-asi { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--tinta-suave); }
.vj-zona-asi b { color: var(--tinta); font-weight: 700; }

/* =========================================================================
   §21 — Tres consejos la primera vez (W-081, Pablo 01-10)
   Un globo junto a lo que se señala: una parada, el lápiz y «Antes de salir».
   ========================================================================= */
.gz-consejo { position: fixed; z-index: 70; width: min(300px, calc(100vw - 24px)); padding: 14px 16px 12px; border-radius: 16px;
  background: var(--tinta); color: var(--papel); box-shadow: 0 12px 32px rgba(28, 26, 24, .28); font-size: 15px; line-height: 1.4; }
.gz-consejo::before { content: ""; position: absolute; left: var(--flecha, 24px); width: 12px; height: 12px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.gz-consejo[data-lado="abajo"]::before { top: -6px; }
.gz-consejo[data-lado="arriba"]::before { bottom: -6px; }
.gz-consejo p { margin: 0 0 10px; }
.gz-consejo-pie { display: flex; align-items: center; gap: 6px; }
.gz-consejo-pie span { margin-right: auto; font: 600 12px var(--mono); letter-spacing: .02em; opacity: .7; }
.gz-consejo button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--papel); color: var(--tinta); font: 600 14px var(--letra); cursor: pointer; }
.gz-consejo .gz-consejo-saltar { background: transparent; color: var(--papel); padding: 0 8px; text-decoration: underline; text-underline-offset: 3px; }
.gz-consejo button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.gz-con-consejo { outline: 3px solid var(--acento) !important; outline-offset: 3px; }
.gz-panel .gz-paradas button.gz-con-consejo { border-radius: 12px; }

/* ---------- 20. La guía con nombres (W-091, Pablo 21-10: el modelo a de los tres probados) ----------
   Solo con guiaModelo en lib/manifest.js. Sin él, la guía de antes: todo va bajo [data-modelo="a"]. */
.gz-etq { display: none; }
.gz[data-modelo="a"] .gz-cambiar-viaje { width: auto; padding: 0 16px 0 12px; gap: 6px; display: inline-flex; border-radius: 999px; font: 600 14px var(--letra); }
.gz[data-modelo="a"] .gz-etq { display: inline; }
.gz-cambiar-viaje svg { width: 20px; height: 20px; }
/* «Cómo funciona», con su «?» delante */
.gz-ayuda { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border: 0; border-radius: 999px; background: var(--superficie);
  box-shadow: var(--sombra-tarjeta); color: var(--tinta); font: 600 14px var(--letra); white-space: nowrap; cursor: pointer; }
.gz-ayuda-i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tinta); color: var(--papel); font: 700 13px var(--letra); }
.gz-cuenta--texto { width: auto; min-width: 0; padding: 0 8px; font-size: 12.5px; }
/* La pista: una frase, debajo de los botones, la primera vez que se llega a cada nivel */
.gz-pista { position: absolute; z-index: 5; left: 50%; translate: -50% 0; top: calc(var(--gz-pista-top, 64px)); width: min(420px, calc(100% - 24px));
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--tinta); color: var(--papel);
  font-size: 14.5px; line-height: 1.4; box-shadow: var(--sombra-tarjeta); }
.gz-pista span { flex: 1; }
.gz-pista button { flex: none; min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--papel); color: var(--tinta); font: 600 13.5px var(--letra); cursor: pointer; }
.gz[data-nivel="mundo"] .gz-pista, .gz[data-editando] .gz-pista { display: none; }
.gz-pista--todo { align-items: flex-start; }
.gz-pista--todo > div { flex: 1; }
.gz-pista--todo ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.gz-pista--todo li { opacity: .82; }
.gz-pista--todo li.aqui { opacity: 1; }
.gz-pista--todo li b { display: block; font-weight: 700; }
/* Un número, un significado: en la parada, el color y la «D» son del día */
.gz[data-modelo="a"] .gz-plan-punto.de-dia { width: auto; min-width: 34px; padding: 0 7px; border-radius: 999px; background: var(--c, var(--oliva)); font-size: 12px; }
.gz-dia-color { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--c); vertical-align: 0; }
button.gz-plan-punto:not(.de-dia) { cursor: pointer; padding: 0; }
.gz-plan-abrir { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 0; border: 0; background: none; color: var(--acento-texto); font: 600 15px var(--letra); cursor: pointer; }
.gz-plan-abrir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gz[data-modelo="a"] .gz-plan[data-gz-plan] { cursor: pointer; }

/* La ficha de un plan: abajo en el móvil, en medio en pantalla ancha */
.gz-ficha { position: fixed; z-index: 65; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: rgba(20, 18, 16, .42); }
.gz-ficha[hidden] { display: none; }
body.gz-ficha-abierta { overflow: hidden; }
.gz-ficha-caja { position: relative; width: 100%; max-height: 88vh; max-height: 88svh; overflow-y: auto; overscroll-behavior: contain; background: var(--papel);
  border-radius: var(--radio) var(--radio) 0 0; box-shadow: 0 -8px 40px rgba(20, 18, 16, .25); }
@media (min-width: 900px) { .gz-ficha { align-items: center; } .gz-ficha-caja { width: min(560px, calc(100% - 48px)); border-radius: var(--radio); } }
.gz-ficha-cerrar { position: absolute; z-index: 2; top: 12px; right: 12px; }
.gz-ficha-foto { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.gz-ficha-cuerpo { display: grid; gap: 14px; padding: 22px 20px 28px; }
.gz-ficha-cuerpo h2 { font: 700 clamp(26px, 7vw, 34px)/1.05 var(--titular); letter-spacing: -.02em; margin: 0; padding-right: 44px; }
.gz-ficha-cuerpo .gz-datos { font: 600 13px var(--mono); color: var(--tinta); margin: 0; }
.gz-ficha-cuerpo .gz-frase { color: var(--tinta-suave); }
.gz-ficha-bloque h3 { font: 600 13px var(--mono); letter-spacing: .02em; color: var(--tinta-suave); margin: 0 0 4px; }
.gz-ficha-bloque p, .gz-ficha-mas p { font-size: 16px; line-height: 1.5; margin: 0; }
.gz-ficha-reserva { padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--acento) 10%, var(--superficie)); }
.gz-ficha-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.gz-ficha-acciones .gz-accion { margin: 0; text-decoration: none; }
.gz-accion--llena { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.gz-accion[aria-pressed="true"] { background: var(--oliva); color: var(--papel); border-color: var(--oliva); }
.gz-ficha-mas summary { cursor: pointer; font: 600 15px var(--letra); color: var(--tinta); }
.gz-ficha-mas p { margin-top: 10px; color: var(--tinta-suave); font-size: 15px; }

/* En el móvil, la barra de dónde estás arriba y los botones debajo */
@media (max-width: 899px) {
  .gz[data-modelo="a"] .gz-arriba { flex-direction: column; align-items: stretch; }
  .gz[data-modelo="a"] .gz-migas { display: flex; max-width: none; }
  .gz[data-modelo="a"] .gz-arriba-botones { justify-content: flex-end; }
  .gz[data-modelo="a"] { --gz-pista-top: 112px; }
  /* No caben tres botones en una fila: «Cómo funciona» va a la derecha de la barra de dónde estás */
  .gz[data-modelo="a"] .gz-arriba-botones .gz-ayuda { position: absolute; top: 0; right: 0; box-shadow: none; background: transparent; }
  .gz[data-modelo="a"] .gz-migas { padding-right: 148px; }
}
.gz[data-modelo="a"] .gz-migas [aria-current] { font-weight: 700; }

.gz-antes-abrir { white-space: nowrap; }
@media (max-width: 899px) { .gz[data-modelo="a"] .gz-panel--zona, .gz[data-modelo="a"] .gz-panel--dia { max-height: 50%; } .gz[data-modelo="a"] .gz-panel--pais { max-height: 42%; } }

/* ---------- 21. El perfil A+B (W-092, Pablo 21-10) ----------
   Arriba tu huella; debajo tus viajes, que se abren sin cuenta; al final, plegados, los avisos y la cuenta. */
/* Solo «Tus viajes», sin huella (Pablo, 31-10: «queda mejor sin huella y sin espacio») */
.perfil-boton.con-huella { width: auto; gap: 6px; padding: 0 16px; border-radius: 999px; }
.perfil-boton.con-huella svg { width: 32px; height: 32px; stroke: none; }
.perfil-boton.con-huella .huella-generica { width: 22px; height: 22px; margin-left: 6px; fill: var(--oliva); }
.perfil-boton.con-huella span { font: 600 14px var(--letra); white-space: nowrap; }
/* En el teléfono, el texto también (sin la huella cabe en una fila con «Menú») */
@media (max-width: 480px) { .perfil-boton.con-huella { padding: 0 14px; } }
.perfil-pagina:has(.pab-huella) { display: grid; gap: 28px; }
.pab-sesion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; font-size: 14.5px; color: var(--tinta-suave); }
.pab-huella { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 24px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra-tarjeta); }
.pab-huella > svg { width: 132px; height: 132px; }
.pab-huella--vacia { grid-template-columns: 1fr; }
.pab-nombre { font: 700 clamp(30px, 7vw, 42px)/1.02 var(--titular); letter-spacing: -.03em; margin: 4px 0 8px; }
.pab-huella .texto { margin: 0 0 14px; }
.pab-cambios { margin-top: 14px; }
.pab-cambios > summary, .pab-plegable > summary { cursor: pointer; font: 600 16px var(--letra); }
@media (max-width: 560px) { .pab-huella { grid-template-columns: 1fr; justify-items: start; } .pab-huella > svg { width: 110px; height: 110px; } }
.pab-bloque > h2, .pab-guardar > h2 { font: 700 clamp(26px, 6vw, 34px) var(--titular); letter-spacing: -.02em; margin: 0 0 12px; }
.pab-grupo { font: 600 13px var(--mono); letter-spacing: .02em; color: var(--tinta-suave); margin: 18px 0 8px; }
.pab-viajes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pab-viaje { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 18px; background: var(--superficie); box-shadow: var(--sombra-tarjeta); }
.pab-viaje > img, .pab-viaje-foto { width: 96px; height: 80px; border-radius: 12px; object-fit: cover; background: var(--papel); }
.pab-viaje.ido { opacity: .6; }
.pab-viaje-texto { display: grid; gap: 3px; min-width: 0; }
.pab-viaje-texto strong { font: 600 18px/1.2 var(--titular); }
.pab-viaje-texto span { font-size: 14px; color: var(--tinta-suave); }
.pab-fecha { font: 600 13px var(--mono) !important; color: var(--tinta) !important; }
.pab-aqui { font-size: 12.5px !important; }
.pab-abrir { min-height: 40px; }
.pab-mas { grid-column: 1 / -1; font-size: 14px; }
.pab-mas > summary { cursor: pointer; color: var(--tinta-suave); list-style: none; width: max-content; }
.pab-mas > summary::-webkit-details-marker { display: none; }
.pab-mas > div { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
@media (max-width: 560px) { .pab-viaje { grid-template-columns: 76px 1fr; } .pab-viaje > img, .pab-viaje-foto { width: 76px; height: 76px; } .pab-abrir { grid-column: 1 / -1; justify-content: center; } }
.pab-guardar { padding: 24px; border-radius: var(--radio); border: 1px solid var(--linea); }
.pab-guardar .perfil-tarjeta { padding: 0; box-shadow: none; background: none; max-width: 420px; }
.pab-guardar .perfil-tarjeta > .kicker, .pab-guardar .perfil-tarjeta > .texto { display: none; }
.pab-guardar .perfil-tarjeta > h2 { font-size: 20px; margin-top: 8px; }
.pab-plegable { border-top: 1px solid var(--linea); padding-top: 16px; }
.pab-plegable .perfil-bloque { margin: 12px 0 0; }
.pab-plegable .perfil-bloque > h2 { display: none; }
.pab-guardar .perfil-tarjeta { margin: 0; }

/* ---------- 22. La guía sin huecos ni aire de lista de ajustes (W-093, Pablo 22-10) ----------
   «El hueco vacío», «parece una lista de ajustes» y, algo menos, «tamaños y letra». Todo bajo [data-modelo="a"]. */
/* El acceso de la cabecera, en fila (salía la huella encima del texto) */
.perfil-boton.con-huella { display: inline-flex; align-items: center; height: 40px; }
/* La pista, en medio del mapa: en pantalla ancha, a la derecha del panel (se montaba sobre su borde) */
@media (min-width: 900px) { .gz[data-modelo="a"] .gz-pista { left: calc(50% + 218px); width: min(440px, calc(100% - 500px)); } }
/* En pantalla ancha, el panel es una ficha que flota sobre el mapa y mide lo que su contenido: sin columna vacía */
@media (min-width: 900px) {
  .gz[data-modelo="a"] .gz-panel { top: 16px; left: 16px; bottom: auto; width: 420px; max-height: calc(100% - 32px) !important; border-radius: 24px;
    box-shadow: 0 18px 48px rgba(28, 26, 24, .18), var(--sombra-tarjeta); }
  .gz[data-modelo="a"] .gz-arriba { left: 452px; }
  .gz[data-modelo="a"] .gz-hero.con-foto { min-height: 210px; }
  .gz[data-modelo="a"] .gz-panel--pais .gz-hero.con-foto { min-height: 190px; }
}
/* Títulos algo más pequeños */
.gz[data-modelo="a"] .gz-hero.con-foto { min-height: 190px; }
.gz[data-modelo="a"] .gz-panel--pais .gz-hero.con-foto { min-height: 160px; }
.gz[data-modelo="a"] .gz-hero { padding: 56px 20px 18px; }
.gz[data-modelo="a"] .gz-hero h1 { font-size: clamp(34px, 9vw, 46px); }
.gz[data-modelo="a"] .gz-panel--dia .gz-hero h1 { font-size: clamp(28px, 7.5vw, 38px); }
.gz[data-modelo="a"] .gz-frase { font-size: 16px; }
.gz[data-modelo="a"] .gz-cuerpo { padding: 14px 14px 20px; }
/* Paradas y días, en fichas con su foto */
.gz-fichas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gz-ficha-parada, .gz-ficha-dia { display: flex; align-items: center; gap: 14px; width: 100%; padding: 8px 14px 8px 8px; border: 0; border-radius: 18px;
  background: var(--superficie); box-shadow: var(--sombra-tarjeta); color: var(--tinta); text-align: left; font: inherit; cursor: pointer; transition: transform .2s, box-shadow .2s; }
@media (hover:hover) and (pointer:fine){.gz-ficha-parada:hover,.gz-ficha-dia:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(28, 26, 24, .12); }}
.gz-ficha-parada > img, .gz-ficha-sinfoto { flex: none; width: 84px; height: 84px; border-radius: 12px; object-fit: cover; background: var(--papel); }
.gz-ficha-dia { position: relative; padding-left: 18px; min-height: 76px; }
.gz-ficha-dia::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 5px; border-radius: 0 4px 4px 0; background: var(--c); }
.gz-ficha-dia > img { order: 2; flex: none; width: 60px; height: 60px; margin-left: auto; border-radius: 12px; object-fit: cover; }
.gz-ficha-texto { display: grid; gap: 3px; min-width: 0; }
.gz-ficha-texto small { display: flex; align-items: center; gap: 6px; font: 600 12.5px var(--mono); letter-spacing: .01em; color: var(--tinta-suave); }
.gz-ficha-texto small .n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--oliva); color: var(--papel); font: 700 11px var(--letra); }
.gz-ficha-texto b { font: 600 19px/1.2 var(--titular); letter-spacing: -.01em; }
.gz-ficha-frase { font-size: 14px; line-height: 1.35; color: var(--tinta-suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gz-ficha-dia .gz-dia-color { margin-right: 0; }
/* El camino entre parada y parada: una raya de puntos y cuánto se tarda */
.gz-tramo { position: relative; display: flex; align-items: center; min-height: 30px; padding: 2px 0 2px 62px; font: 600 12.5px var(--mono); color: var(--tinta-suave); }
.gz-tramo::before { content: ""; position: absolute; left: 49px; top: -8px; bottom: -8px; border-left: 2px dashed color-mix(in srgb, var(--tinta-suave) 45%, transparent); }
.gz-tramo--extremo { padding: 4px 4px; font: 500 13.5px/1.35 var(--letra); }
.gz-tramo--extremo::before { display: none; }
/* Dormir, comer y moverse: una ficha cada uno, con su icono */
.gz[data-modelo="a"] .gz-aqui { display: grid; gap: 10px; padding-top: 4px; }
.gz-aqui-ficha { position: relative; padding: 14px 16px 14px 50px; border-radius: 18px; background: var(--superficie); box-shadow: var(--sombra-tarjeta); }
.gz-aqui-ficha > .gz-ico { position: absolute; left: 16px; top: 15px; width: 22px; height: 22px; color: var(--oliva); }
.gz[data-modelo="a"] .gz-aqui-ficha h3 { margin: 0 0 2px; font-size: 17px; }
.gz-aqui-ficha .gz-nota { margin: 2px 0 0; font-size: 14.5px; }
.gz-aqui-ficha ul { margin-top: 8px; }
.gz-aqui-ficha .gz-idea b { font-size: 16px; }
/* El día: cada plan, una ficha; el icono del momento en lugar del número */
.gz[data-modelo="a"] .gz-planes { display: grid; gap: 12px; padding-top: 6px; }
.gz[data-modelo="a"] .gz-plan { padding: 14px 16px 16px; border: 0; border-radius: 18px; background: var(--superficie); box-shadow: var(--sombra-tarjeta); }
.gz[data-modelo="a"] .gz-plan-foto { width: calc(100% + 16px); margin: -6px -8px 12px; border-radius: 12px; }
.gz[data-modelo="a"] .gz-plan h3, .gz[data-modelo="a"] .gz-plan h2 { font-size: 18px; }
.gz-momento-ico { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gz-momento-punto { display: block; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.gz-plan-punto.con-momento .gz-momento-ico { width: 15px; height: 15px; }
.gz[data-modelo="a"] .gz-pasos { padding-top: 14px; }
/* «Antes de salir», una hoja: abajo en el móvil y en medio en pantalla ancha, con el mapa detrás */
.gz-antes-velo { position: fixed; z-index: 59; inset: 0; background: rgba(20, 18, 16, .42); }
.gz-antes-velo[hidden] { display: none; }
.gz-antes--hoja[data-modo="antes"] { inset: auto 0 0 0; max-height: 92vh; max-height: 92svh; border-radius: 24px 24px 0 0; box-shadow: 0 -10px 40px rgba(20, 18, 16, .25); }
.gz-antes--hoja[data-modo="antes"] .gz-antes-cab { border-radius: 24px 24px 0 0; }
.gz-antes--hoja[data-modo="antes"]:not([data-seccion]) .gz-antes-indice { padding-bottom: 24px; }
@media (min-width: 900px) {
  .gz-antes--hoja[data-modo="antes"] { left: 50%; right: auto; top: 50%; bottom: auto; translate: -50% -50%; width: min(760px, calc(100% - 48px)); max-height: 86vh; border-radius: 24px; }
}
/* Las tarjetas, más bajas: en dos columnas, sin la altura mínima de la página entera */
.gz-antes--hoja .gz-tarjeta { min-height: 0; padding: 16px; gap: 6px; }
.gz-antes--hoja .gz-tarjeta b { font-size: 18px; }
.gz-antes--hoja .gz-acompanante { margin-top: 12px; padding: 14px 16px; }
.gz-antes--hoja .gz-tarjetas { grid-template-columns: 1fr 1fr; }
/* Dentro de «Antes de salir»: lo que explica el presupuesto, con aire; y las filas de «Qué reservar» y «Lo demás», fichas */
.vj-pres-explica { margin: 16px 0 20px; }
.vj-pres-explica > p { margin: 0 0 10px; line-height: 1.5; }
.gz-antes--hoja[data-seccion="reservar"] .vj-fila, .gz-antes--hoja[data-seccion="mas"] .vj-fila { margin: 0 0 10px; padding: 0 16px; border: 0; border-radius: 16px;
  background: var(--superficie); box-shadow: var(--sombra-tarjeta); }
.gz-antes--hoja[data-seccion="reservar"] .vj-fila > summary, .gz-antes--hoja[data-seccion="mas"] .vj-fila > summary { min-height: 56px; padding: 12px 0; }

/* ---------- 23. Los menús, en fichas (W-094, Pablo 22-10: «el mismo estilo de periódico») ----------
   El lateral deja de ser un panel a toda altura con hueco en medio: es una ficha que baja junto al botón y mide lo que
   su contenido, como el de la portada. Cada entrada, con su icono y su frase debajo; sin rayas. */
.menu-lateral { top: calc(var(--cab-alto, 76px) + 4px); right: 12px; bottom: auto; width: min(400px, calc(100% - 24px)); max-height: calc(100vh - 96px); max-height: calc(100svh - 96px);
  padding: 12px; border: 0; border-radius: 24px; box-shadow: 0 18px 48px rgba(28, 26, 24, .2), var(--sombra-tarjeta); transform: translateY(-8px) scale(.98); opacity: 0;
  transform-origin: top right; transition: transform .25s, opacity .25s, visibility 0s .25s; }
.menu-lateral.is-abierto { transform: none; opacity: 1; transition: transform .25s, opacity .25s; }
.menu-lateral .menu-fichas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.menu-lateral .menu-fichas li a { display: flex; align-items: center; justify-content: flex-start; gap: 14px; padding: 10px; border: 0; border-radius: 16px; color: var(--tinta); text-decoration: none;
  font: inherit; letter-spacing: 0; }
.menu-lateral .menu-fichas li a[aria-current="page"]{ background: var(--papel); color: var(--tinta); }@media (hover:hover) and (pointer:fine){.menu-lateral .menu-fichas li a:hover{ background: var(--papel); color: var(--tinta); }}
.menu-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--oliva) 12%, var(--superficie)); color: var(--oliva); }
.menu-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menu-ico svg.relleno { fill: currentColor; stroke: none; }
.menu-ico svg.huella { width: 34px; height: 34px; stroke: none; }
.menu-txt { display: grid; gap: 2px; min-width: 0; }
.menu-txt b { font: 600 18px/1.2 var(--titular); letter-spacing: -.01em; }
.menu-lateral .menu-fichas li a small, .menu-txt small { max-width: none; text-align: left; font: 400 14px/1.3 var(--letra); color: var(--tinta-suave); }
.menu-lateral .menu-fichas li a.menu-primera { background: var(--oliva); color: var(--papel); margin-bottom: 4px; }
.menu-lateral .menu-fichas li a.menu-primera small { color: color-mix(in srgb, var(--papel) 80%, transparent); }
.menu-lateral .menu-fichas li a.menu-primera .menu-ico { background: color-mix(in srgb, var(--papel) 16%, transparent); color: var(--papel); }
@media (hover:hover) and (pointer:fine){.menu-lateral .menu-fichas li a.menu-primera:hover{ background: color-mix(in srgb, var(--oliva) 88%, var(--tinta)); color: var(--papel); }}
.menu-otros { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 12px 10px 0; padding-top: 12px; border-top: 1px solid var(--linea); font-size: 14px; }
.menu-otros a { color: var(--tinta-suave); text-decoration: none; }
.menu-otros a[aria-current="page"]{ color: var(--tinta); }@media (hover:hover) and (pointer:fine){.menu-otros a:hover{ color: var(--tinta); }}
.menu-lateral .menu-pie { margin: 8px 10px 4px; font-size: 13px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .menu-lateral, .menu-lateral.is-abierto { transition: none; } }

/* ---------- 24. La fecha de salida (W-096) ---------- */
/* En el cuestionario, debajo del mes: opcional, y con ella el mes es el suyo. */
.q-fecha { display: grid; gap: 8px; margin-top: 18px; }
.q-fecha label { font-weight: 600; }
.q-fecha label em { font-style: normal; font-weight: 400; color: var(--tinta-suave); }
.q-fecha input[type="date"], .gz-fecha input[type="date"] { justify-self: start; min-height: 46px; padding: 8px 14px; border: 1px solid var(--linea-control);
  border-radius: 12px; background: var(--superficie); color: var(--tinta); font: 500 16px var(--letra); }
.q-fecha .q-hint { margin-top: 0; }
/* En «Antes de salir»: cuándo es el viaje, el campo, qué gana con la fecha y el botón de colocar los planes. */
.gz-fecha { display: grid; gap: 14px; padding: 6px 0 24px; }
.gz-fecha-cuando { margin: 0; font-size: 17px; line-height: 1.4; }
.gz-fecha-cuando b { font-weight: 600; }
.gz-fecha-campo { display: grid; gap: 6px; }
.gz-fecha-campo span { font: 600 13px var(--mono); color: var(--tinta-suave); }
.gz-fecha .gz-nota { margin: 0; color: var(--tinta-suave); font-size: 15px; line-height: 1.45; }
.gz-fecha-colocar { justify-self: start; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--oliva); color: var(--sobre-oliva, var(--papel));
  font: 600 15px var(--letra); cursor: pointer; }
.gz-fecha-colocar[disabled] { opacity: .6; cursor: progress; }
.gz-fecha-quitar { justify-self: start; padding: 0; border: 0; background: none; color: var(--acento-texto); font: 600 14px var(--letra); cursor: pointer; }

/* ---------- 25. Sin cobertura (W-097) ---------- */
/* El aviso de que el viaje es la copia de este teléfono: arriba, en el centro, y se va solo. */
.aviso-sin-red { position: fixed; z-index: 90; top: 84px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px);
  margin: 0; padding: 10px 16px; border-radius: 14px; background: var(--tinta); color: var(--papel); font: 500 14px/1.4 var(--letra);
  box-shadow: 0 6px 20px rgba(28, 26, 24, .25); transition: opacity .5s; }
.aviso-sin-red.se-va { opacity: 0; }
/* «Llévatela en el móvil» en el menú, como las demás fichas (es un botón, no un enlace) */
.menu-lateral .menu-fichas li .menu-instalar { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px; border: 0; border-radius: 16px;
  background: none; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
@media (hover:hover) and (pointer:fine){.menu-lateral .menu-fichas li .menu-instalar:hover{ background: var(--papel); }}
/* El aviso de instalar en el hueco de las pistas: «Cómo» y «Ahora no» */
.gz-pista-botones { flex: none; display: flex; gap: 6px; }
.gz-pista .gz-pista-otro { background: transparent; color: var(--papel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--papel) 45%, transparent); }
/* «Ponla en tu pantalla de inicio» en «Antes de salir»: dos páginas, cada una con su número */
.gz-instalar { display: grid; gap: 16px; padding: 6px 0 24px; }
.gz-instalar p { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: 17px; line-height: 1.45; }
.gz-instalar-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--oliva); color: var(--papel);
  font: 700 14px var(--letra); }


/* ---------- 26. Lugares propios (Pablo, 23-10-2026): buscar un sitio o ponerlo en el mapa, dentro del viaje ---------- */
.vj-propio-sitio, .vj-propio-cuando, .vj-propio-local { font-size: 14px; color: var(--tinta-suave); }
.vj-propio-local { font-size: 16px; }
.vj-propio .vj-mapas { margin: 0; font-size: 14px; }
.vj-propio-form fieldset { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.vj-propio-form legend { width: 100%; padding: 0; margin-bottom: 4px; font-size: 14px; font-weight: 600; }
.vj-propio-rot { font-size: 14px; font-weight: 600; }
.vj-propio-donde { display: grid; gap: 6px; }
.vj-propio-donde .vj-mini { justify-self: start; }
.vj-propio-chip { position: relative; }
.vj-propio-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vj-propio-chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--linea-control);
  font: 500 14px var(--letra); color: var(--tinta); background: var(--papel); cursor: pointer; }
.vj-propio-chip input:checked + span { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.vj-propio-chip input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.vj-propio-res { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; border-radius: 12px; border: 1px solid var(--linea-suave); background: var(--papel); }
.vj-propio-res button { display: grid; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 10px; background: none;
  font: inherit; color: var(--tinta); cursor: pointer; }
.vj-propio-res button:focus-visible{ background: var(--superficie); }@media (hover:hover) and (pointer:fine){.vj-propio-res button:hover{ background: var(--superficie); }}
.vj-propio-res button span, .vj-propio-fuente, .vj-propio-nada { font-size: 13px; color: var(--tinta-suave); }
.vj-propio-fuente, .vj-propio-nada { padding: 6px 10px; }
.vj-propio-elegido { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px; border-radius: 12px; background: var(--papel);
  border: 1px solid var(--linea-control); font-size: 14px; }
.vj-propio-elegido span { color: var(--tinta-suave); }
.vj-propio-elegido .vj-mini { margin-left: auto; }
/* El mapa pequeño: la cruz encima del mapa, en la misma casilla, y los botones debajo. */
.vj-propio-minimapa { display: grid; gap: 8px; }
.vj-propio-mm { grid-area: 1 / 1; height: 240px; border-radius: 12px; overflow: hidden; border: 1px solid var(--linea-suave); }
.vj-propio-cruz { grid-area: 1 / 1; align-self: center; justify-self: center; z-index: 2; width: 30px; height: 30px; pointer-events: none;
  background: linear-gradient(var(--acento), var(--acento)) center / 3px 100% no-repeat, linear-gradient(var(--acento), var(--acento)) center / 100% 3px no-repeat;
  filter: drop-shadow(0 0 2px var(--superficie)); }
.vj-propio-mm-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--tinta-suave); }
.vj-propio-mm-pie span { flex: 1 1 100%; }
.vj-nota.vj-error { color: var(--acento-texto); }
/* En el mapa de calles, lo tuyo en naranja (DESIGN §6). */
.vj-calle-punto.tuyo { min-width: 18px; width: 18px; height: 18px; padding: 0; border-radius: 50%; background: var(--acento); }
.gz-plan-punto.tuyo { width: 20px; height: 20px; min-width: 20px; padding: 0; background: var(--acento); }
.gz-propios { margin-top: 18px; }
/* En el panel de la guía que se acerca (fuera de .vj), los botones de «Lo tuyo» con la misma forma que en la pantalla del viaje. */
.gz-propios .vj-marca, .gz-propios .vj-mini, .gz-propios .vj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--linea-control); border-radius: 999px; background: none; color: var(--tinta); font: inherit; cursor: pointer; }
.gz-propios .vj-marca { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.gz-propios .vj-mini { min-width: 36px; min-height: 36px; padding: 4px 10px; font-size: 13.5px; line-height: 1; }
.gz-propios .vj-btn { min-height: 42px; padding: 8px 16px; font-size: 14.5px; }
.gz-propios .vj-btn.lleno { background: var(--boton); color: var(--boton-texto); border-color: transparent; }
.gz-propios .vj-hoja-pie { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 26a. Arriba del viaje (W-123, W-124): seguridad, «Nausika ha mejorado» y «Han cambiado el viaje» ---------- */
.vj-av-caja[hidden] { display: none; }
.vj-av-caja { display: grid; gap: 10px; margin: 0 0 14px; }
/* Bajo la cabecera del viaje, con el mismo margen que ella (.vj-cab: 16 px; 24 px en pantalla ancha). */
.vj > .vj-av-caja { flex: none; margin: 12px 16px 0; }
@media (min-width: 960px) { .vj > .vj-av-caja { margin: 12px 24px 0; } }
.gz-av { margin: 14px 16px 4px; }
.vj-av { display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--linea-suave); }
.vj-av h3 { margin: 0; font-size: 16px; font-weight: 700; }
.vj-av p, .vj-av li { margin: 0; font-size: 15px; line-height: 1.45; }
.vj-av .vj-lista { display: grid; gap: 4px; margin: 0; padding-left: 18px; }
.vj-av-cambio { border-left: 3px solid var(--acento); }
.vj-av .vj-hoja-pie { display: flex; flex-wrap: wrap; gap: 8px; }
.vj-av .vj-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--linea-control); background: none; color: var(--tinta); font: inherit; font-size: 14.5px; cursor: pointer; }
.vj-av .vj-btn.lleno { background: var(--boton); color: var(--boton-texto); border-color: transparent; }
.vj-av .vj-btn[disabled] { opacity: .55; cursor: default; }
.vj-av-seguridad { margin: 0; }
/* «Quién viene»: el permiso, quiénes son y los últimos cambios (W-123) */
.vj-permiso { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; cursor: pointer; }
.vj-permiso input { width: 20px; height: 20px; accent-color: var(--acento); }
.vj-personas, .vj-cambios { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vj-personas li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; font-size: 15px; }
.vj-cambios li { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--linea-suave); }
.vj-cambios li p { margin: 0; font-size: 14.5px; line-height: 1.4; }
.vj-cambios li p:first-child { color: var(--tinta-suave); font-size: 13.5px; }
.vj-cambios .vj-mini { justify-self: start; }
.vj-cambios-mas summary { cursor: pointer; font-size: 14.5px; padding: 8px 0; }
.vj-enlace-mini { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--tinta); text-decoration: underline;
  text-decoration-color: var(--linea-control); text-underline-offset: 3px; cursor: pointer; }
@media (hover:hover) and (pointer:fine){.vj-enlace-mini:hover{ text-decoration-color: var(--acento); }}

/* ---------- 26b. El viaje sin huella (W-119): con qué se ha trazado, empezar de cero y ajustarlo con la huella ---------- */
.vj-sh-caja[hidden] { display: none; }
.vj-sh { display: grid; gap: 10px; padding: 16px 18px; margin: 0 0 14px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--linea-suave); }
.gz-sh .vj-sh { margin: 14px 16px 4px; }
.vj-sh p { margin: 0; font-size: 15px; line-height: 1.45; }
.vj-sh .vj-sh-t { font-weight: 700; font-size: 16px; }
.vj-sh-sup { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--tinta-suave); }
.vj-sh-supuestos { padding: 0; border: 0; background: none; font: inherit; color: var(--tinta); text-align: left; text-decoration: underline;
  text-decoration-color: var(--linea-control); text-underline-offset: 3px; cursor: pointer; }
.vj-sh-supuestos[aria-expanded="true"]{ text-decoration-color: var(--acento); }@media (hover:hover) and (pointer:fine){.vj-sh-supuestos:hover{ text-decoration-color: var(--acento); }}
.vj-sh-acc, .vj-sh .vj-hoja-pie { display: flex; flex-wrap: wrap; gap: 8px; }
.vj-sh .vj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--linea-control); background: none; color: var(--tinta); font: inherit; font-size: 14.5px; cursor: pointer; }
.vj-sh .vj-btn.lleno { background: var(--boton); color: var(--boton-texto); border-color: transparent; }
.vj-sh .vj-btn:disabled { opacity: .5; cursor: default; }
.vj-sh-form { display: grid; gap: 14px; }
.vj-sh-form fieldset { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.vj-sh-form legend { width: 100%; padding: 0; margin-bottom: 4px; font-size: 14px; font-weight: 600; }
.vj-sh-una { flex-direction: column; align-items: flex-start; }
.vj-sh-campo { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.vj-sh-campo select { justify-self: start; min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--linea-control); background: var(--papel); color: var(--tinta); font: inherit; font-weight: 400; }
.vj-sh-cero { display: grid; gap: 12px; }
.vj-sh-zonas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vj-sh-zonas button { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 2px 10px; width: 100%; padding: 8px 10px; border-radius: 12px;
  border: 1px solid var(--linea-suave); background: var(--papel); color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.vj-sh-zonas button small { grid-column: 2; font-size: 13px; color: var(--tinta-suave); }
.vj-sh-zonas .n { grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--linea-control);
  font-size: 14px; font-weight: 700; color: var(--tinta-suave); }
.vj-sh-zonas button[aria-pressed="true"] { border-color: var(--tinta); }
.vj-sh-zonas button[aria-pressed="true"] .n { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
/* De cero en el mapa (guia.js): las paradas posibles, y las elegidas con su número en naranja. */
.gz-parada.oculta { opacity: 0; pointer-events: none; }
.gz-cero.elegida .punto { border: 0; background: var(--acento); color: var(--papel); }
.gz-cero.elegida { box-shadow: var(--sombra-tarjeta), 0 0 0 2px var(--acento); }
.vj-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Los planes de la parada, para añadir uno a un día (D6). */
.vj-propio-planes summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.vj-propio-planes ul { list-style: none; margin: 8px 0 0; padding: 4px; display: grid; gap: 2px; max-height: 260px; overflow: auto; border-radius: 12px;
  border: 1px solid var(--linea-suave); background: var(--papel); }
.vj-propio-planes button { display: grid; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 10px; background: none; font: inherit; color: var(--tinta); cursor: pointer; }
.vj-propio-planes button span { font-size: 13px; color: var(--tinta-suave); }
.vj-propio-planes button:focus-visible{ background: var(--superficie); }@media (hover:hover) and (pointer:fine){.vj-propio-planes button:hover{ background: var(--superficie); }}
.vj-propio-planes button[aria-pressed="true"] { background: var(--superficie); box-shadow: inset 3px 0 0 var(--acento); }
/* En viaje.html, sin huella: a dónde y cuántos días. */
.sh-traza { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: 22px; }
.sh-traza .campo { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.sh-traza select, .sh-traza input { min-height: 46px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--linea-control); background: var(--papel); color: var(--tinta); font: inherit; font-weight: 400; }
.sh-traza input { width: 6.5em; }
.dna-intro .sh-traza .cta { margin-top: 0; }
.sh-traza [data-sh-aviso] { flex: 1 1 100%; }

/* ---------- 27. Traslados sin precio (W-106): lo que no cuentan las cifras, al lado ---------- */
.vj-pres-filas .vj-sin-precio { display: block; font-size: 12px; font-weight: 400; color: var(--tinta-suave); }

/* ==========================================================================================================
   28. Auditoría final, tanda 3 (30-10-2026): la ruta, en sus dos pantallas (la guía que se acerca, .gz, y la de
   siempre, .vj, que va en «Antes de salir» o sola si no hay mapa). ARCHIVO/mediciones/2026-10-29-auditoria-final/
   INFORME.md, D2, D3, D5, D9, D12, D13 y D15. Va aquí y no en sistema.css (lo lleva otra sesión): por eso cada regla
   empieza por la ruta (main[data-ruta], .gz-antes o .gz-ficha), que pesa más que las de sistema.css aunque este
   archivo se cargue antes.
   ========================================================================================================== */

/* D2 · 16 px en todo lo que se lee o se pulsa en la ruta. Lista sacada midiendo cada texto de menos de 16 px en las dos
   pantallas, en el móvil (país, parada, día, plan, Cambiar, cada sección de Antes de salir, Días, Reservas, Más y las
   hojas). Se quedan en 13 px solo las cifras sobre el mapa y los nombres de las pestañas (abajo). */
:is(main[data-ruta], .gz-antes, .gz-ficha) :is(
  .a-favor, .acto-cuerpo > small, .acto-hora, .acto-porque, .cifra > span, .completo-mas > p, .completo-mas > summary, .dato,
  .demo-disclaimer, .demo-season, .demo-sub, .demo-zona > p, .dia-chip > small, .dia-ideas > p, .dia-ideas-motivo, .dia-pos,
  .dias-grupo-nombre, .en-contra, .encuadre, .enlace, .explorador-ayuda, .gz-accion, .gz-antes-abrir, .gz-antes-pestanas > button,
  .gz-antes-viaje, .gz-ayuda, .gz-cuenta--texto, .gz-datos, .gz-etq, .gz-fecha-campo > span, .gz-fecha-colocar,
  .gz-ficha-bloque > h3, .gz-ficha-frase, .gz-ficha-mas > p, .gz-ficha-mas > summary, .gz-ficha-texto > small, .gz-idea > small,
  .gz-instalar-n, .gz-kicker, .gz-migas > button, .gz-migas > span, .gz-nota, .gz-nota > b, .gz-pasos > button, .gz-plan > p,
  .gz-plan-abrir, .gz-plan-cab > small, .gz-puntos-pie, .gz-tarjeta > small, .gz-volver, .hoja-num > small, .hoja-tipo,
  .hoja-zona, .imprescindible, .lead-consent > span, .lead-full > span, .lead-sinc, .momento > i, .momento-dia, .momento-ir,
  .num, .porque, .ruta-aeropuertos, .ruta-entorno, .ruta-otras, .ruta-tramo > em, .ruta-tramo > i, .saltar, .stamp, .suave,
  .vj-acto > p, .vj-aero-estado, .vj-apunte-nuevo, .vj-asa-accion, .vj-asa-t > b, .vj-banda-pie > span, .vj-barra > small,
  .vj-barra > span, .vj-blq > p, .vj-btn, .vj-cambiar > p, .vj-cambiar-mapa > button, .vj-cap > h3, .vj-cap > p,
  .vj-capas > button, .vj-consulado > p, .vj-dato, .vj-dia-etq, .vj-dia-num > small, .vj-dias-n, .vj-eje, .vj-encaja,
  .vj-ficha > p, .vj-fila-dato, .vj-fila-t > small, .vj-reserva-fila > p, .vj-fuente, .vj-fuente > a, .vj-gama,
  .vj-hoja-resumen, .vj-kicker, .vj-legal, .vj-legal > a, .vj-leyenda > span, .vj-lista > li, .vj-llegada > h4, .vj-mapas,
  .vj-mapas > a, .vj-marca, .vj-mas-texto > summary, .vj-medio-t > b, .vj-medio-t > small, .vj-medio-va, .vj-medios > h3,
  .vj-mini, .vj-mio-campo > span, .vj-nota, .vj-paso, .vj-perfil, .vj-plazo, .vj-plazo > a, .vj-plegable > summary,
  .vj-practico, .vj-pres-rango-campos > label, .vj-puede > li, .vj-temporada, .vj-temporada > b, .vj-tramo-nota, .vj-traslado,
  .vj-tuya, .vj-tuya > b, .vj-ver, .vj-zona-asi, .vj-zona-asi > b, .vj-zona-tramo-accion, .vj-zonas-resto > summary,
  .vj-completo .vj-kicker, .vj-muestra, .vj-apuntes-t, .vj-sin-precio, .vj-urgencias h4, .vj-av p, .vj-av li, .vj-sh p,
  .gz-parada > b, .gz-tramo > span, .gz-intro-kicker
) { font-size: 16px; }
/* Las cifras sobre el mapa y los nombres de las pestañas, 13 px: tienen que caber sin tapar el mapa (D2, la excepción). */
main[data-ruta] :is(.vj-menu button, .vj-m-horas text, .vj-m-aero text, .gz-plan-punto > span, .vj-chip, .gz-ficha-texto small .n) { font-size: 13px; }
main[data-ruta] .vj-cuenta { font-size: 13px; min-width: 20px; height: 20px; line-height: 20px; }

/* D3 · La parada que miras, en naranja (ya lo está: .vj-m-parada.activo y .gz-parada.activa), y fuera los demás
   naranjas de esa pantalla, que competían con ella. Lo tuyo en el mapa (.gz-plan-punto.tuyo, W-115) sigue en naranja. */
:is(main[data-ruta], .gz-antes, .gz-ficha) .gz-cuenta { background: var(--tinta); color: var(--papel); }
main[data-ruta] .gz-plan-punto.zona { box-shadow: 0 0 0 14px color-mix(in srgb, var(--oliva) 18%, transparent), var(--sombra-tarjeta); }
:is(main[data-ruta], .gz-antes) .gz-plan.resalta { background: color-mix(in srgb, var(--oliva) 12%, transparent); }
:is(main[data-ruta], .gz-antes) .gz-num { background: var(--oliva); color: var(--papel); }
:is(main[data-ruta], .gz-antes, .gz-ficha) :is(.gz-aviso, .gz-plan-abrir, .gz-fecha-quitar) { color: var(--tinta); }
:is(main[data-ruta], .gz-antes, .gz-ficha) .gz-plan-abrir { text-decoration: underline; text-decoration-color: var(--linea-media); text-underline-offset: .22em; }
:is(main[data-ruta], .gz-antes, .gz-ficha) .gz-ficha-reserva { background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea-suave); }
main[data-ruta] .gz-cand.recomendada .punto { border-color: var(--oliva); background: var(--oliva); color: var(--papel); }
main[data-ruta] .gz-cand .punto { border-color: var(--tinta-suave); color: var(--tinta); }
.gz-con-consejo { outline-color: var(--tinta) !important; }
@media (hover:hover) and (pointer:fine) { main[data-ruta] :is(.gz-paradas, .gz-dias) button:hover b { color: var(--tinta); } }
/* La fila de arriba de la guía, con 16 px, no cabe a 375 px con «3 por reservar»: en el móvil, solo la cifra. */
@media (max-width: 480px) {
  main[data-ruta] .gz-cuenta--texto { min-width: 24px; height: 24px; padding: 0 7px; line-height: 24px; }
  main[data-ruta] .gz-cuenta-resto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* D12 · La barra de avisos: abajo, encima de las pestañas, una sola. Oscura para que se separe sin sombra (W-125).
   Entra con 8 px y fundido en 200 ms con curva de salida, y sale en 150 ms (Emil, E-23). */
.nk-aviso { position: fixed; z-index: 70; left: 50%; bottom: calc(var(--nk-abajo, 0px) + 12px + env(safe-area-inset-bottom, 0px));
  width: min(calc(100% - 24px), 520px); display: flex; align-items: center; gap: 4px 12px; padding: 10px 6px 10px 18px;
  border-radius: 18px; background: var(--tinta); color: var(--papel); transform: translateX(-50%);
  transition: opacity 200ms var(--curva-salida, cubic-bezier(.23,1,.32,1)), transform 200ms var(--curva-salida, cubic-bezier(.23,1,.32,1)); }
@starting-style { .nk-aviso { opacity: 0; transform: translate(-50%, 8px); } }
.nk-aviso.sale { opacity: 0; transform: translate(-50%, 8px); transition-duration: 150ms; }
.nk-aviso p { flex: 1; margin: 0; font-size: 16px; line-height: 1.35; }
.nk-aviso-accion { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--papel); color: var(--tinta);
  font: 600 16px var(--letra); cursor: pointer; transition: transform 140ms var(--curva-salida, ease-out); }
.nk-aviso-cerrar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none;
  color: inherit; cursor: pointer; transition: transform 140ms var(--curva-salida, ease-out); }
.nk-aviso-cerrar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nk-aviso-accion:active, .nk-aviso-cerrar:active { transform: scale(.96); }
/* D5 · La ficha de Nausika en lugar de los cuadros del navegador: sube desde abajo en el móvil, en medio en ancho. */
.nk-ficha-velo { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center;
  background: color-mix(in srgb, var(--tinta) 38%, transparent); transition: opacity 200ms ease; }
@starting-style { .nk-ficha-velo { opacity: 0; } }
.nk-ficha-velo.sale { opacity: 0; transition-duration: 150ms; }
.nk-ficha { width: 100%; max-width: 520px; display: grid; gap: 12px; padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  border-radius: 24px 24px 0 0; background: var(--papel); color: var(--tinta);
  transition: transform 260ms cubic-bezier(.32,.72,0,1); }
@starting-style { .nk-ficha { transform: translateY(100%); } }
.nk-ficha-velo.sale .nk-ficha { transform: translateY(100%); transition-duration: 160ms; }
.nk-ficha h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; }
.nk-ficha p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--tinta-suave); }
.nk-ficha-pie { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.nk-btn { flex: 1 1 auto; min-height: 48px; padding: 0 18px; border: 1px solid var(--linea-control); border-radius: 999px; background: var(--papel);
  color: var(--tinta); font: 600 16px var(--letra); cursor: pointer; transition: transform 140ms var(--curva-salida, ease-out); }
.nk-btn.lleno { border-color: transparent; background: var(--acento); color: var(--sobre-acento); }
.nk-btn:active { transform: scale(.97); }
@media (min-width: 640px) {
  .nk-ficha-velo { align-items: center; }
  .nk-ficha { border-radius: 24px; padding-bottom: 24px; transition: transform 200ms var(--curva-salida, ease-out), opacity 200ms ease; }
  @starting-style { .nk-ficha { transform: scale(.97); opacity: 0; } }
  .nk-ficha-velo.sale .nk-ficha { transform: scale(.97); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nk-aviso, .nk-aviso.sale { transform: translateX(-50%); }
  @starting-style { .nk-aviso { transform: translateX(-50%); } }
  .nk-ficha, .nk-ficha-velo.sale .nk-ficha { transform: none; transition: none; }
  @starting-style { .nk-ficha { transform: none; } }
}

/* D15 · En el móvil, sobre el mapa, un solo botón «Capas» (lo que se ve, la leyenda y «País entero» dentro) y
   compartir en «Más». En ancho, todo a la vista, como estaba. */
.vj-capas-abrir { display: none; }
.vj-compartir-mas { display: none; }
@media (max-width: 959px) {
  main[data-ruta] .vj-capas-abrir { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 1px solid var(--linea-control);
    border-radius: 999px; background: var(--papel); color: var(--tinta); font: 600 16px var(--letra); pointer-events: auto; cursor: pointer;
    transition: transform 140ms var(--curva-salida, ease-out); }
  main[data-ruta] .vj-capas-abrir:active { transform: scale(.97); }
  main[data-ruta] .vj-capas-abrir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
  main[data-ruta] .vj-capas-caja { display: none; pointer-events: auto; flex-direction: column; gap: 10px; width: min(100%, 320px); padding: 12px;
    border-radius: 18px; background: var(--papel); box-shadow: 0 0 0 1px var(--linea-suave); transform-origin: top left;
    transition: opacity 180ms ease, transform 180ms var(--curva-salida, ease-out); }
  main[data-ruta] .vj-capas-caja.abierta { display: flex; }
  @starting-style { main[data-ruta] .vj-capas-caja.abierta { opacity: 0; transform: scale(.97) translateY(-4px); } }
  main[data-ruta] .vj-capas-caja .vj-capas { flex-wrap: wrap; overflow: visible; }
  main[data-ruta] .vj-capas-caja .vj-capas .encuadre { position: static; }
  main[data-ruta] .vj-capas-caja .vj-leyenda { background: none; padding: 0; }
  main[data-ruta] #vj-mapa.con-portada .vj-capas-abrir { display: none; }
  main[data-ruta] .vj-compartir-mapa { display: none; }
  main[data-ruta] .vj-compartir-mas { display: inline-flex; justify-content: center; width: 100%; margin: 0 0 16px; }
}

/* D13 · «Invitar» en la cabecera: con su nombre en ancho, solo el icono (44 px) en el móvil. */
main[data-ruta] .vj-invitar { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--linea-control); border-radius: 999px; background: var(--papel); color: var(--tinta); font: 600 16px var(--letra); cursor: pointer;
  flex: none; transition: transform 140ms var(--curva-salida, ease-out); }
main[data-ruta] .vj-invitar:active { transform: scale(.97); }
main[data-ruta] .vj-invitar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (max-width: 959px) {
  main[data-ruta] .vj-invitar { padding: 0; width: 44px; }
  main[data-ruta] .vj-invitar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
main[data-ruta] .gz-invitar { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; }
main[data-ruta] .gz-invitar svg { width: 20px; height: 20px; }
@media (max-width: 480px) {
  main[data-ruta] .gz-invitar { padding: 0; width: 44px; }
  main[data-ruta] .gz-invitar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* «Quién viene», rehecho (apartado 4 del informe): el enlace primero, en un campo que no se sale de la pantalla
   (antes medía 637 px en una de 375), el interruptor de la v3 para el permiso, la regla en una frase, el grupo con
   el nombre escrito en su fila y los cambios como una línea en el tiempo. */
:is(main[data-ruta], .gz-antes) [data-mas="grupo"] { display: grid; gap: 14px; min-width: 0; }
:is(main[data-ruta], .gz-antes) [data-mas="grupo"] > * { min-width: 0; }
:is(main[data-ruta], .gz-antes) [data-mas="grupo"] header h2 { margin: 0 0 4px; font-size: 20px; font-weight: 600; line-height: 1.25; }
:is(main[data-ruta], .gz-antes) .vj-grupo-txt { margin: 0; font-size: 16px; line-height: 1.45; color: var(--tinta-suave); }
:is(main[data-ruta], .gz-antes) .vj-grupo-regla { margin: 0; font-size: 16px; line-height: 1.45; }
:is(main[data-ruta], .gz-antes) .vj-grupo-acc { display: flex; flex-wrap: wrap; gap: 8px; }
:is(main[data-ruta], .gz-antes) .vj-enlace { display: flex; gap: 8px; align-items: center; min-width: 0; max-width: 100%; padding: 6px 6px 6px 14px; border: 0;
  border-radius: 16px; background: var(--superficie); }
:is(main[data-ruta], .gz-antes) .vj-enlace input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: none; color: var(--tinta);
  font: 16px var(--letra); text-overflow: ellipsis; padding: 8px 0; }
:is(main[data-ruta], .gz-antes) .vj-enlace input:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-radius: 6px; }
:is(main[data-ruta], .gz-antes) .vj-enlace .vj-btn { flex: none; min-height: 44px; }
:is(main[data-ruta], .gz-antes) .vj-interruptor { display: flex; align-items: center; gap: 12px; min-height: 52px; font-size: 16px; font-weight: 600; cursor: pointer; }
:is(main[data-ruta], .gz-antes) .vj-interruptor input { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 52px; height: 32px; margin: 0;
  border-radius: 999px; background: var(--linea-control); cursor: pointer; transition: background-color 180ms ease; }
:is(main[data-ruta], .gz-antes) .vj-interruptor input::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--papel); transition: transform 240ms var(--curva-salida, cubic-bezier(.23,1,.32,1)); }
:is(main[data-ruta], .gz-antes) .vj-interruptor input:checked { background: var(--oliva); }
:is(main[data-ruta], .gz-antes) .vj-interruptor input:checked::after { transform: translateX(20px); }
:is(main[data-ruta], .gz-antes) .vj-interruptor input:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
:is(main[data-ruta], .gz-antes) .vj-personas li { min-height: 44px; }
:is(main[data-ruta], .gz-antes) .vj-nombre { display: flex; gap: 8px; width: 100%; }
:is(main[data-ruta], .gz-antes) .vj-nombre input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--linea-control); border-radius: 12px;
  background: var(--papel); font: 16px var(--letra); color: var(--tinta); }
:is(main[data-ruta], .gz-antes) ol.vj-cambios { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--linea-suave); }
:is(main[data-ruta], .gz-antes) ol.vj-cambios li { position: relative; border-top: 0; padding: 4px 0 14px; }
:is(main[data-ruta], .gz-antes) ol.vj-cambios li::before { content: ""; position: absolute; left: -24px; top: 10px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--papel); box-shadow: inset 0 0 0 2px var(--oliva); }
:is(main[data-ruta], .gz-antes) .vj-cambio-quien { color: var(--tinta-suave); }
:is(main[data-ruta], .gz-antes) ol.vj-cambios .vj-btn { justify-self: start; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  :is(main[data-ruta], .gz-antes) .vj-interruptor input, :is(main[data-ruta], .gz-antes) .vj-interruptor input::after { transition: none; }
}
main[data-ruta] .gz-invitar { padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: var(--superficie); box-shadow: var(--sombra-tarjeta);
  color: var(--tinta); font: 600 16px var(--letra); cursor: pointer; transition: transform 140ms var(--curva-salida, ease-out); }
main[data-ruta] .gz-invitar[hidden] { display: none; }
main[data-ruta] .gz-invitar:active { transform: scale(.97); }
main[data-ruta] .gz-invitar svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* En la guía, «Antes de salir» enseña la pantalla de siempre por secciones: compartir no va dentro de «Quién viene». */
.gz-antes .vj-compartir-mas { display: none !important; }

/* Emil, E-17: el asa de la hoja de la parada, para cerrarla bajándola (solo en el móvil). */
.vj-hoja-asa { display: none; }
@media (max-width: 959px) {
  main[data-ruta] .vj-hoja-asa { display: block; flex: none; width: 40px; height: 5px; margin: -6px auto -4px; border-radius: 999px; background: var(--linea-control); }
  main[data-ruta] .vj-hoja-asa, main[data-ruta] .vj-hoja-cab { touch-action: none; }
}

/* Emil, E-21: el panel de la guía entra en 220 ms (se salta de país a parada a día muchas veces); en pantalla ancha,
   donde es una columna a la izquierda, solo con fundido. */
main[data-ruta] .gz-panel { transition: transform 220ms cubic-bezier(.23,1,.32,1), opacity 220ms ease; }
main[data-ruta] .gz-panel.entra { transition: none; }
@media (prefers-reduced-motion: reduce) { main[data-ruta] .gz-panel { transition: none; } }
@media (min-width: 900px) { main[data-ruta] .gz-panel.entra { transform: none; } }
/* Emil, E-22: la hoja de «Cambiar» baja y sube moviéndose (transform), no cambiando su alto: tiene siempre el alto
   grande, y abajo deja hueco para que lo último se pueda subir a la vista. */
@media (max-width: 899px) {
  .gz-antes[data-modo="paradas"] { transition: transform 260ms cubic-bezier(.32,.72,0,1); }
  .gz-antes[data-modo="paradas"][data-bajo] { height: 56vh; height: 56svh; transform: translateY(26vh); transform: translateY(26svh); padding-bottom: 26svh; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .gz-antes[data-modo="paradas"] { transition: none; } }

/* Emil, E-15: la portada del día ya no anima su alto (se mueve con transform desde viaje.js). */
@media (max-width: 959px) { main[data-ruta] .vj-portada-hoja { transition: none; will-change: transform; } }

/* W-127: el viaje automático. Arriba, el aviso (con la superficie de .vj-av: tinta, sin naranja, no es una acción);
   el mapa, con los caminos calculados de puntos; y en «Antes de salir», la ficha de Exteriores lo primero. */
.vj-auto .vj-auto-ex a, .gz-exteriores a { color: var(--tinta); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vj-auto-falta summary { min-height: 44px; display: flex; align-items: center; font-size: 15px; font-weight: 600; cursor: pointer; }
.vj-auto-falta ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; }
.vj-m-tramo.estimado { stroke-dasharray: 0 7; }
.gz-exteriores { margin: 0 0 16px; padding: 14px 16px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linea-suave); font-size: 15px; line-height: 1.45; }
.vj-auto > .vj-auto-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 16px; font-weight: 700; cursor: pointer; list-style: none; }
.vj-auto > .vj-auto-t::-webkit-details-marker { display: none; }
.vj-auto > .vj-auto-t::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.vj-auto[open] > .vj-auto-t::after { transform: translateY(2px) rotate(-135deg); }
.vj-auto { display: block; padding-top: 6px; }
.vj-auto:not([open]) { padding-block: 4px; }
.vj-auto > :not(summary) { margin-top: 8px; }

/* Tanda 7 (G-01): en el móvil, la ayuda va arriba del panel, no encima del mapa. Con letra de 16 px (D2, G-15). */
.gz-pista.gz-pista--panel { position: relative; z-index: 2; left: auto; top: auto; translate: none; width: auto; margin: 12px 16px; font-size: 16px; }
.gz-pista.gz-pista--panel button { min-height: 44px; font-size: 16px; }
/* Tanda 7 (G-04): el aviso del viaje sin huella va una vez, en el panel del país: no en cada sección de «Antes de salir»
   (la pantalla de siempre va dentro y lo arrastraba a «Lo demás», «Cambiar el viaje» y «Quién viene»). */
.gz-antes .vj-sh-caja { display: none !important; }

/* Tanda 7 (G-05): el asa del panel en el móvil, que se arrastra (asomado, medio, entero) y que, tocada, lo pliega o
   lo despliega. En su propia franja, pegada arriba aunque el panel se desplace (encima del contenido robaba el toque de
   «‹ Volver»); el toque mide 32 px de alto. */
.gz-panel-asa { display: none; }
@media (max-width: 899px) {
  .gz[data-modelo="a"] .gz-panel-asa { position: sticky; top: 0; z-index: 3; display: block; width: 100%; height: 32px; margin: 0; padding: 0; border: 0;
    background: var(--papel); cursor: grab; touch-action: none; }
  .gz[data-modelo="a"] .gz-panel-asa::before { content: ""; position: absolute; left: 50%; top: 12px; width: 40px; height: 5px; margin-left: -20px; border-radius: 999px;
    background: var(--linea-control); box-shadow: 0 0 0 2px color-mix(in srgb, var(--papel) 70%, transparent); }
  .gz[data-modelo="a"] .gz-panel[data-hoja="entera"] { border-radius: var(--radio) var(--radio) 0 0; }
}

/* Tanda 7 (G-08): los planes del día en el mapa, en oliva con el icono en papel, como en la lista del panel (antes,
   naranja con letra blanca: D3 y DESIGN §3). El naranja queda para lo que tocas y para lo tuyo (W-115). */
main[data-ruta] .gz-plan-punto:not(.de-dia):not(.tuyo) { background: var(--oliva); color: var(--papel); }
main[data-ruta] .gz-plan-punto:not(.de-dia):not(.tuyo) .gz-momento-ico { stroke: var(--papel); }
main[data-ruta] button.gz-plan-punto:not(.de-dia):not(.tuyo):is(:hover, :focus-visible, :active) { background: var(--acento); color: var(--tinta); }
main[data-ruta] button.gz-plan-punto:not(.de-dia):not(.tuyo):is(:hover, :focus-visible, :active) .gz-momento-ico { stroke: currentColor; }
main[data-ruta] .gz-plan-punto:not(.de-dia):not(.tuyo) .gz-momento-punto { background: currentColor; }

/* Tanda 7 (G-15): lo que D2 no alcanzaba en la guía, medido en el móvil: «Cambiar este día», las filas de abajo de
   «Antes de salir», «Quién viene» (los nombres, «Ponerle nombre», quién cambió y cuándo), las urgencias, el aviso de la
   copia y lo de las secciones de «Antes de salir». Los créditos de foto, a 13 px: no se leen como texto, pero a 11 no se
   leían. */
:is(main[data-ruta], .gz-antes, .gz-ficha) :is(
  .gz-cambiar > summary, .gz-antes-indice small, .vj-compartir-abrir span, .vj-blq > ul > li, .vj-blq > ul > li > b,
  .vj-fecha-campo > label, .vj-reserva > p, .vj-mio > summary span, .vj-previa-campo > label, .vj-previa-campo select,
  .vj-parada-bloque h3 small, .vj-acto-momento, .vj-pantalla, .vj-recomendacion, .vj-personas li, .vj-personas span,
  .vj-enlace-mini, .vj-cambio-quien, .vj-cambio-quien b, .vj-cambios p, .vj-grupo-txt, .vj-aviso, .vj-urgencias li,
  .vj-urgencias .vj-nota, .gz-ayuda
) { font-size: 16px; }
:is(main[data-ruta], .gz-antes) .gz-credito { font-size: 13px; }

/* Tanda 7 (G-16): zonas de toque de 44 px. Los puntos de plan, con el mismo margen invisible que los de la parada (F-06);
   los enlaces pequeños («Ponerle nombre», «Vaciar la lista», «Anular el enlace»), «Más sobre el sitio», «‹ Volver», el
   asa de «Cambiar el viaje» y los botones de la cabecera de «Antes de salir», que un título de dos líneas aplastaba. */
main[data-ruta] button.gz-plan-punto:not(.de-dia)::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
:is(main[data-ruta], .gz-antes, .gz-ficha) .vj-enlace-mini { display: inline-flex; align-items: center; min-height: 44px; }
.gz-ficha-mas > summary { display: flex; align-items: center; min-height: 44px; }
main[data-ruta] .gz-volver { height: 44px; }
.gz-antes[data-modo="paradas"] .gz-asa { width: 120px; height: 32px; margin-left: -60px; }
.gz-antes-cab :is(.gz-cerrar, .gz-atras) { flex: none; width: 44px; height: 44px; }

/* Tanda 7 (G-14): «Si algo sale mal», su propia sección de «Antes de salir». */
.gz-antes[data-seccion="urgencias"] #vj-mas [data-fila="m-vj-urgencias"] { display: block; }
/* Varios países: las urgencias de cada uno, con su nombre encima (guía urgente, 06-11). */
.vj-urgencias .vj-urg-pais + .vj-urg-pais { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea); }
.vj-urgencias h4.vj-urg-pais-t { font-size: 17px; margin: 4px 0 10px; }
.gz-antes--hoja[data-seccion="urgencias"] .vj-fila { margin: 0 0 10px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--superficie); box-shadow: var(--sombra-tarjeta); }
.gz-antes--hoja[data-seccion="urgencias"] .vj-fila > summary { min-height: 56px; padding: 12px 0; }

/* Tanda 7 (G-07): en pantalla ancha, dónde estás en una línea (la burbuja se quedaba en 122 px y lo partía en cuatro). */
@media (min-width: 900px) {
  .gz[data-modelo="a"] .gz-migas { flex: none; flex-wrap: nowrap; white-space: nowrap; max-width: 45%; overflow: hidden; }
  .gz[data-modelo="a"] .gz-migas > :last-child { overflow: hidden; text-overflow: ellipsis; }
}
/* Guía urgente (06-11): las migas ceden sitio a los botones («Invitar» se salía por la derecha) y se recortan por el país,
   no por donde estás («Dí…»). Si aun así algo no cabe, la parada va con su nombre corto (guia.js, ajustarMigas). */
.gz-migas .gz-miga-corto { display: none; }
.gz-migas.corta .gz-miga-largo { display: none; }
.gz-migas.corta .gz-miga-corto { display: inline; }
@media (min-width: 900px) {
  .gz[data-modelo="a"] .gz-arriba-botones { flex: none; }
  .gz[data-modelo="a"] .gz-migas { flex: 0 1 auto; min-width: 0; max-width: none; }
  .gz[data-modelo="a"] .gz-migas > button { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
  .gz[data-modelo="a"] .gz-migas > :first-child:not(:last-child) { flex-shrink: 4; min-width: 3.5em; }
  .gz[data-modelo="a"] .gz-migas > .sep, .gz[data-modelo="a"] .gz-migas > span[aria-current] { flex: none; }
}
@media (max-width: 899px) {
  .gz[data-modelo="a"][data-nivel="zona"] .gz-migas > :nth-child(-n+2), .gz[data-modelo="a"][data-nivel="dia"] .gz-migas > :nth-child(-n+2) { display: none; }
}

/* =========================================================================
   W-128 (Pablo, 30-10-2026): lo que quedaba de la auditoría de la guía, con las tres decisiones suyas (G-09, G-13, G-26)
   ========================================================================= */
/* G-09 (cambia W-091): el número del día en una píldora de tinta, con el tono del día en un punto de 8 px; fuera la raya
   de 5 px de las fichas de día. */
main[data-ruta] .gz[data-modelo="a"] .gz-plan-punto.de-dia { background: var(--tinta); color: var(--papel); }
main[data-ruta] .gz[data-modelo="a"] .gz-plan-punto.de-dia > span { display: inline-flex; align-items: center; gap: 4px; }
main[data-ruta] .gz[data-modelo="a"] .gz-plan-punto.de-dia > span::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--oliva));
  box-shadow: 0 0 0 1.5px var(--papel); }
.gz-ficha-dia::before { content: none; }
.gz-ficha-dia { padding-left: 14px; }
.gz-dia-color { width: 8px; height: 8px; margin-right: 2px; }
/* G-26 (cambia W-079): «Antes de salir» es una lista de filas: icono de 20 px a la izquierda, el título y, a la derecha,
   el dato («3 cosas con plazo»). Sin cajas y sin la raya de la cabecera. G-19: las filas de abajo («Invita», «Guárdalo»,
   «Ponla en tu pantalla de inicio»), igual, sin el borde discontinuo que las hacía parecer huecos por rellenar. */
.gz-antes .gz-tarjetas, .gz-antes--hoja .gz-tarjetas { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 900px) { .gz-antes .gz-tarjetas { grid-template-columns: 1fr; } }
.gz-antes .gz-tarjeta, .gz-antes--hoja .gz-tarjeta { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: 56px; padding: 10px 2px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.gz-antes .gz-tarjeta .gz-ico { width: 20px; height: 20px; }
.gz-antes .gz-tarjeta b, .gz-antes--hoja .gz-tarjeta b { font: 600 17px/1.25 var(--letra); letter-spacing: 0; }
.gz-antes .gz-tarjeta small { max-width: 22ch; text-align: right; line-height: 1.3; }
.gz-antes .gz-acompanante, .gz-antes--hoja .gz-acompanante { gap: 14px; margin-top: 0; min-height: 56px; padding: 10px 2px; border: 0; border-radius: 0; }
.gz-antes .gz-acompanante .gz-ico { width: 20px; height: 20px; }
.gz-antes .gz-acompanante b { font: 600 17px/1.25 var(--letra); }
.gz-antes .gz-acompanante:first-of-type { margin-top: 18px; }
.gz-antes[data-modo="antes"] .gz-antes-cab { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .gz-antes :is(.gz-tarjeta, .gz-acompanante):hover b { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 479px) {
  .gz-antes .gz-tarjeta, .gz-antes--hoja .gz-tarjeta { grid-template-columns: 20px minmax(0, 1fr); grid-template-areas: "i t" ". d"; row-gap: 2px; align-items: start; }
  .gz-antes .gz-tarjeta .gz-ico { grid-area: i; margin-top: 2px; }
  .gz-antes .gz-tarjeta b { grid-area: t; }
  .gz-antes .gz-tarjeta small { grid-area: d; max-width: none; text-align: left; }
}
/* G-17: el crédito de la foto, arriba a la derecha: abajo pisaba el título. */
:is(main[data-ruta], .gz-antes) .gz-hero .gz-credito { top: 12px; right: 12px; bottom: auto; max-width: 40%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
 }
/* G-12: «Centrar», redondo, con los botones de arriba. */
.gz-centrar { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--superficie); color: var(--tinta);
  box-shadow: var(--sombra-tarjeta); cursor: pointer; pointer-events: auto; transition: transform 140ms cubic-bezier(.23,1,.32,1); }
.gz-centrar[hidden] { display: none; }
.gz-centrar:active { transform: scale(.96); }
.gz-centrar .gz-ico { width: 20px; height: 20px; }
/* «Capas» en la guía: la leyenda de la ruta, bajo las paradas del país. */
.gz-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 2px 0; font-size: 16px; color: var(--tinta-suave); }
.gz-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.gz-leyenda svg { width: 26px; height: 6px; fill: none; stroke: var(--oliva); stroke-width: 2.5; stroke-linecap: round; }

/* W-131: «Qué es» (Wikipedia) en los planes de los países en crecimiento: el texto, como cita sin sangría.
   W-187 («Todo en Fuentes», Pablo 09-11-2026): debajo no va nada; las fuentes, en el plegable «Fuentes» del final de cada
   parada y de cada plan. En papel sale abierto y cada enlace lleva escrita su dirección (un enlace no se pulsa). */
.vj-descripcion { margin: 0; padding: 0; border: 0; }
.vj-descripcion p { margin: 0; }
.vj-que-es h5 { margin: 12px 0 4px; font-size: 16px; }
.vj-fuentes { margin-top: 14px; }
.vj-fuentes > summary { color: var(--tinta-suave); }
.vj-fuentes-lista { margin: 2px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.45; color: var(--tinta-suave); }
.vj-fuentes-lista li + li { margin-top: 4px; }
.vj-fuentes-lista a { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.vj-fuentes-nota { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--tinta-suave); }
@media print {
  .vj-fuentes-lista a[href]::after { content: " (" attr(href) ")"; word-break: break-all; }
}