/* ============================================================
   Nausika · sistema.css — el sistema de la portada nueva (W-116) en toda la web (W-125, Pablo 29-10-2026)
   Va la última, después de styles.css y diseno.css, en las páginas interiores. Redefine lo común: colores, letra,
   los cinco tamaños, cabecera, menú, pie, botones y superficies. Lo de cada página se ajusta por fases (W-125).
   - Blanco piedra, tinta casi negra; el naranja, solo en la acción principal; el oliva, para la huella y lo elegido.
   - General Sans, en cinco tamaños: pequeño, texto, entrada, título y grande.
   - Sin etiquetas sobre los títulos, sin rayas, sin sombras en reposo; los controles, en cristal.
   - Solo día por ahora (Pablo, 29-10): la noche llega después; mientras, la noche se ve como el día.
   ============================================================ */

@font-face{font-family:"General Sans";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/general-sans-400.woff2") format("woff2")}
@font-face{font-family:"General Sans";font-weight:600;font-style:normal;font-display:swap;src:url("assets/fonts/general-sans-600.woff2") format("woff2")}

:root,html[data-tono="noche"]{
  --papel:#F0EFEC;              /* blanco piedra, el llano del relieve (W-116) */
  --papel-oscuro:#E6E4DF;
  --linea:#DDDAD3;
  --superficie:#FFFFFF;
  --salvia:#E2E4DC;
  --tinta:#1B1A18;
  --tinta-suave:#4A4741;        /* 8:1 sobre el papel: se lee, no es gris de relleno */
  --oliva:#404823;              /* la huella y lo elegido */
  --acento:#F84E1E;             /* el naranja del hilo: la acción principal */
  --acento-texto:#B8360C;
  --titular:"General Sans",system-ui,sans-serif;
  --letra:"General Sans",system-ui,sans-serif;
  --mono:"General Sans",system-ui,sans-serif;
  --fondo:var(--papel);--texto:var(--tinta);--texto-suave:var(--tinta-suave);
  --boton:var(--acento);--boton-texto:#1B1A18;--sobre-acento:#1B1A18;
  --linea-control:rgba(27,26,24,.22);--linea-tono:var(--linea-control);--linea-suave:rgba(27,26,24,.12);--linea-media:rgba(27,26,24,.3);
  --hoja:rgba(240,239,236,.72);--hoja-borde:transparent;
  --sombra-tarjeta:0 0 #0000;     /* sin sombra, pero válida: con «none» se caían enteras las sombras compuestas (el anillo de lo elegido, F-04) */
  --mar:#E2E4DC;--tierra:#F0EFEC;--tierra-vecina:#E6E3DB;--costa:#C9C1AF;--ruta:var(--oliva);--ruta-texto:#F0EFEC;--ocre-texto:#B8360C;
  /* El cristal (W-116): deja ver lo de detrás, con un filo de luz arriba y un brillo que baja; sin sombra */
  --vidrio:rgba(255,255,255,.55);--vidrio-luz:rgba(255,255,255,.95);--vidrio-filo:rgba(27,26,24,.1);
  /* Los cinco tamaños */
  --t-pequeno:1rem;
  --t-texto:clamp(1.0625rem,1.025rem + .15vw,1.15625rem);
  --t-entrada:clamp(1.25rem,1.0625rem + .6vw,1.625rem);
  --t-titulo:clamp(2.125rem,1.625rem + 2.2vw,3.75rem);
  --t-grande:clamp(2.75rem,1.9rem + 3.6vw,5.25rem);
  --r-campo:14px;
  color-scheme:light;
}
html[data-tono="noche"] .marca .marca-simbolo{content:normal}
::selection{background:var(--acento);color:var(--sobre-acento)}
input,textarea{caret-color:var(--acento)}

/* ---------- La letra y los cinco tamaños ---------- */
body{font-family:var(--letra);font-size:var(--t-texto);line-height:1.5}
h1,h2,h3,h4,h5,h6{font-family:var(--titular);font-weight:600;letter-spacing:-.025em}
h1 em,h2 em,h3 em{color:inherit}
small,.nota,.nota-cta{font-size:var(--t-pequeno)}
.cabecera-pagina h1{font-size:var(--t-grande);font-weight:600;line-height:1;letter-spacing:-.035em}
.seccion-cabecera h2{font-size:var(--t-titulo);font-weight:600;line-height:1.04;letter-spacing:-.025em}
.entradilla{font-family:var(--letra);font-size:var(--t-entrada);line-height:1.32;color:var(--tinta)}
/* Sin etiquetas sobre los títulos (Taste): el título dice lo que es */
.kicker{display:none}
.cabecera-pagina h1{margin-top:0}

/* ---------- Sin rayas: se separa con aire ---------- */
hr{border:0;height:0;margin:clamp(40px,6vw,72px) 0}
.seccion-cabecera{border-top:0;padding-top:0}
.enlace{border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--linea-media)}
.enlace::after{display:none}
@media (hover:hover) and (pointer:fine){.enlace:hover{text-decoration-color:currentColor}}

/* ---------- Cabecera: una barra de cristal, con los bordes del contenido ---------- */
body:not(.portada) .cabecera{background:var(--hoja);border-bottom:0;
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.nav{max-width:1180px;margin:0 auto;padding:16px 44px}
.nav .marca{font:600 22px/1 var(--titular);letter-spacing:-.025em}
.menu-boton,.perfil-boton{min-height:44px;background:var(--vidrio);border:1px solid var(--vidrio-filo);border-top-color:var(--vidrio-luz);
  color:var(--tinta);font:600 var(--t-pequeno)/1 var(--letra)}
.menu-boton[aria-expanded="true"]{border-color:var(--linea-media)}@media (hover:hover) and (pointer:fine){.menu-boton:hover{border-color:var(--linea-media)}}

/* ---------- Menú: una ficha de cristal que flota (los menús sí llevan sombra: flotan de verdad) ---------- */
.menu-lateral{background:rgba(255,255,255,.8);border:1px solid var(--vidrio-filo);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 18px 48px rgba(27,26,24,.16)}
.menu-lateral .menu-fichas li a[aria-current="page"]{background:var(--papel)}@media (hover:hover) and (pointer:fine){.menu-lateral .menu-fichas li a:hover{background:var(--papel)}}
/* Cerrado, el menú no está en la página (antes quedaba transparente, y con «menos movimiento» se contaba como texto
   oculto); al abrirse entra igual que antes donde el navegador sabe hacerlo (@starting-style). */
.menu-lateral:not(.is-abierto){display:none}
@media (prefers-reduced-motion:no-preference){
  @starting-style{.menu-lateral.is-abierto{opacity:0;transform:translateY(-8px) scale(.98)}}
}
.menu-ico{background:var(--papel);color:var(--tinta)}
.menu-txt b{font:600 var(--t-texto)/1.2 var(--titular)}
.menu-lateral .menu-fichas li a small,.menu-txt small{font:400 var(--t-pequeno)/1.3 var(--letra);color:var(--tinta-suave)}
.menu-lateral .menu-fichas li a.menu-primera{background:var(--acento);color:var(--sobre-acento)}
.menu-lateral .menu-fichas li a.menu-primera small{color:color-mix(in srgb,var(--sobre-acento) 78%,transparent)}
.menu-lateral .menu-fichas li a.menu-primera .menu-ico{background:color-mix(in srgb,#fff 28%,transparent);color:var(--sobre-acento)}
@media (hover:hover) and (pointer:fine){.menu-lateral .menu-fichas li a.menu-primera:hover{background:color-mix(in srgb,var(--acento) 88%,var(--tinta));color:var(--sobre-acento)}}
.menu-otros{border-top:0;padding-top:4px;font-size:var(--t-pequeno)}
.menu-lateral .menu-pie{font-size:var(--t-pequeno)}

/* ---------- Botones: la acción en naranja; lo demás, en cristal ---------- */
.cta,.btn,.dna-verpremio{min-height:52px;padding:0 28px;font:600 var(--t-pequeno)/1.2 var(--letra);border-radius:999px}
.cta{background:var(--acento);color:var(--sobre-acento);border-color:transparent}
@media (hover:hover) and (pointer:fine){.cta:hover{background:color-mix(in srgb,var(--acento) 86%,var(--tinta));transform:none}}
.cta--secundario,.btn,.dna-verpremio{background:var(--vidrio);
  color:var(--tinta);border:1px solid var(--vidrio-filo);border-top-color:var(--vidrio-luz);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4)}
@media (hover:hover) and (pointer:fine){.cta--secundario:hover,.btn:hover,.dna-verpremio:hover{border-color:var(--linea-media);transform:none}}
.cta:active,.btn:active{transform:scale(.97)}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}

/* ---------- Superficies: blancas, sin raya ni sombra ---------- */
.dna-intro,.perfil-card,.avatar-card,.lead,.dna-ejes-panel,.itinerario-cifras,.explorador,.ruta-conducir,.demo-reglas,.dia-hoja,.huella-panel,.contacto-hoja,.hoja-planes,.momento,.caja{
  border:0;box-shadow:none;border-radius:24px}
input,textarea,select{border-radius:var(--r-campo)}

/* ---------- Pie: sin rayas, con los bordes del contenido ---------- */
.pie{border-top:0;font-size:var(--t-pequeno);background:transparent}
.pie-marca .marca{font-size:30px}
.pie-marca p{font-family:var(--letra);font-size:var(--t-entrada);line-height:1.32;color:var(--tinta)}
.pie h4,.pie .pie-titulo{font:600 var(--t-pequeno)/1.2 var(--letra);color:var(--tinta)}
.pie-legal{border-top:0;padding-top:0;margin-top:clamp(40px,5vw,64px);font-size:var(--t-pequeno)}
.pie-legal a{text-decoration-color:var(--linea-media)}

/* ---------- La franja de relieve (W-125): arriba de las páginas para leer, el relieve de la portada con su hilo ----------
   Un tramo de los renders de verdad (no generado), con el borde de abajo fundido con el papel; el título entra encima. */
.franja{position:relative;z-index:0;height:clamp(150px,24vw,340px);overflow:hidden;margin-bottom:calc(-1 * clamp(36px,5vw,84px))}
.franja img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.franja + *{position:relative;z-index:1}
.franja + .cabecera-pagina,.franja + article > .cabecera-pagina{padding-top:0}
.franja + .legal,.franja + .recibido{padding-top:0}

@media (max-width:760px){
  .nav{padding:12px 20px}
}

/* ============================================================
   Por página (W-125, fases 2-4): lo que la hoja común no alcanza
   ============================================================ */

/* El cristal de los botones no lleva desenfoque: sobre la piedra no hace falta, y el único cristal desenfocado de la
   página es la barra de arriba (Taste: «uno, como mucho») */
.cta--secundario,.btn,.dna-verpremio{-webkit-backdrop-filter:none;backdrop-filter:none}

/* El sello de lo elegido: dibujado, no un carácter ✓ */
.dna-img-card .sello,.lead-sello{font-size:0}
.dna-img-card .sello::after,.lead-sello::after{content:"";width:46%;height:46%;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.lead-sello{background:var(--oliva)}

/* Lo legal, los créditos, 404 y recibido: una columna de lectura, títulos que caben */
.legal h1,.recibido h1{font-size:var(--t-titulo);font-weight:600;line-height:1.04;letter-spacing:-.025em;max-width:18ch}
.legal h2{font-size:var(--t-entrada);font-weight:600}
.legal p,.legal li{max-width:65ch}
.creditos-lista{border-top:0;display:grid;gap:4px}
.creditos-lista li{border-bottom:0;padding:10px 0;font-size:var(--t-pequeno)}
.creditos-lista li > :first-child{font-weight:600}

/* Las guías: una lista sin rayas, cada guía separada por aire */
.guias-lista{border-top:0;display:grid;gap:8px}
.guia{border-bottom:0}
.guia summary{padding:20px 0}
.guia summary h3,.guia summary h2{font-size:var(--t-entrada)}

/* Los viajes: las zonas sin rayas */
.destino-mas{border-top:0}
.destino-mas > summary{font-size:var(--t-pequeno)}
.destino-mas h3{font-size:var(--t-pequeno)}
.viaje-zonas{border-top:0}
.viaje-zonas li{border-bottom:0;padding:6px 0;font-size:var(--t-pequeno)}
.cabecera-pagina h1{max-width:16ch}

/* El cuestionario: letra de leer, sin la raya de abajo */
.dna-nav{border-top:0;padding-top:0}
.dna-linea,.dna-count{font-size:var(--t-pequeno);max-width:65ch}
.dna p{max-width:65ch}

/* Títulos que caben: el de «recibido» va en su columna; el de los viajes, en dos líneas */
.recibido h1{max-width:none}
.cabecera-pagina h1{max-width:20ch}
.legal .nota{border-top:0;padding-top:0}
.perfil-pagina p{max-width:65ch}

/* La huella: nada por debajo del tamaño pequeño; la etiqueta de encaje, en minúscula; aire entre los mandos y el perfil */
.perfil-boton span,.muestra-eje output,.perfiles-s,.perfil-card p,.perfil-ejes{font-size:var(--t-pequeno)}
.muestra-encaja{font-size:var(--t-pequeno);text-transform:none;letter-spacing:0;font-weight:600;color:var(--oliva)}
.muestra-perfil{margin-top:clamp(28px,4vw,48px)}
.perfiles-plegados > summary,.perfiles-plegados summary{border:0}

/* La prosa de las guías y las fichas, en los cinco tamaños */
.prosa p{font-size:var(--t-texto);line-height:1.6;max-width:65ch}
.prosa h2{font-size:var(--t-entrada);font-weight:600;line-height:1.2;letter-spacing:-.015em}
.prosa-cita p{font-size:var(--t-entrada);line-height:1.32}
.caja h3,.tarjeta h3{font-size:var(--t-entrada);font-weight:600}
.tarjeta p,figcaption,.figura figcaption{font-size:var(--t-pequeno)}

/* Los viajes: la ficha de cada destino en los cinco tamaños */
.viaje-temporada,.viaje-temporada strong,.destino-cuando,.destino-cuando strong,.viaje-etiqueta{font-size:var(--t-pequeno)}
.destino-titulo p{font-size:var(--t-pequeno)}
.destino-titulo h2{font-size:var(--t-titulo)}
.perfiles-plegados .perfil-card p{font-size:var(--t-pequeno)}
.perfiles-plegados .perfil-ejes{font-size:var(--t-pequeno) !important}   /* diseno.css lo fija con !important */
.perfil-card p + .perfil-ejes{border-top:0}
/* El título, de un solo color (en W-032 la segunda mitad iba en gris) */
.cabecera-pagina h1 em,.legal h1 em,h1 em,h2 em{color:inherit !important;font-style:normal}

/* ---------- El pie: los viajes, con su foto (Taste: cada página con fotos de verdad, y que sirvan para algo) ---------- */
.pie-viajes{margin-bottom:clamp(40px,6vw,72px)}
.pie-viajes ul{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}
.pie-viajes a{display:grid;gap:8px;color:var(--tinta);text-decoration:none;font-weight:600}
.pie-viajes img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:14px;transition:transform .3s cubic-bezier(.2,0,.1,1)}
@media (hover:hover) and (pointer:fine){.pie-viajes a:hover img{transform:scale(1.03)}}
@media (max-width:900px){.pie-viajes ul{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){.pie-viajes ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}

/* Los créditos, a dos columnas en el ordenador: la mitad de largo */
@media (min-width:1000px){.legal:has(.creditos-lista){max-width:1180px}.creditos-lista{display:block;columns:2;column-gap:48px}.creditos-lista li{break-inside:avoid}}

/* Los desplegables cerrados no maquetan lo de dentro (no se ve, y el medidor lo contaba como si se viera) */
.destino-mas:not([open]) > :not(summary),.guia:not([open]) > :not(summary),.perfiles-plegados:not([open]) > :not(summary){display:none}

/* La huella: los subtítulos en la escala (el de «Cultura a fondo» iba fino y a 40 px) */
.muestra-perfil h3,.muestra-perfil h4,.muestra-perfil [class*="titulo"]{font-size:var(--t-entrada);font-weight:600;letter-spacing:-.015em}
.perfiles-plegados > summary h2,.perfiles-plegados > summary h3,.perfiles-plegados > summary b{font-size:var(--t-titulo);font-weight:600}

/* El título de las páginas para usar (perfil, cuestionario): visible y el más grande de la pantalla (Taste) */
.pagina-titulo{font-size:var(--t-grande);font-weight:600;line-height:1;letter-spacing:-.035em;padding-top:clamp(28px,4vw,56px);margin:0}
.pagina-titulo + .perfil-pagina,.pagina-titulo + .dna{padding-top:clamp(20px,2.5vw,32px)}
.dna-rank button.is-ranked .pos:empty::after{content:"";display:block;width:60%;height:60%;margin:auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.dna-rank button .pos{display:grid}
/* En el perfil, «Tus viajes» se separa de la tarjeta de la huella: el botón de encima no es una etiqueta suya */
.perfil-pagina h2{margin-top:clamp(56px,7vw,88px)}
.muestra-nombre-perfil{font-size:var(--t-entrada) !important;font-weight:600;letter-spacing:-.015em;line-height:1.15}

/* Las guías: las dos listas a dos columnas en el ordenador, y cada destino con su foto */
@media (min-width:1000px){.guias-lista{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;align-items:start}}
.guia:is(#egipto,#vietnam,#tailandia,#turquia,#china,#irlanda,#italia,#portugal,#grecia,#japon,#mexico,#indonesia,#peru,#namibia,#sudafrica) > summary{display:grid;grid-template-columns:64px 1fr auto;align-items:center;column-gap:18px}
.guia:is(#egipto,#vietnam,#tailandia,#turquia,#china,#irlanda,#italia,#portugal,#grecia,#japon,#mexico,#indonesia,#peru,#namibia,#sudafrica) > summary::before{content:"";width:64px;height:84px;border-radius:12px;background:var(--papel-oscuro) center/cover no-repeat}
.guia#egipto > summary::before{background-image:url("assets/img/mini/dest-egipto-360.avif")}
.guia#vietnam > summary::before{background-image:url("assets/img/mini/dest-vietnam-360.avif")}
.guia#tailandia > summary::before{background-image:url("assets/img/mini/dest-tailandia-360.avif")}
.guia#turquia > summary::before{background-image:url("assets/img/mini/dest-turquia-360.avif")}
.guia#china > summary::before{background-image:url("assets/img/mini/dest-china-360.avif")}
.guia#irlanda > summary::before{background-image:url("assets/img/mini/dest-irlanda-360.avif")}
.guia#italia > summary::before{background-image:url("assets/img/mini/dest-italia-360.avif")}
.guia#portugal > summary::before{background-image:url("assets/img/mini/dest-portugal-360.avif")}
.guia#grecia > summary::before{background-image:url("assets/img/mini/dest-grecia-360.avif")}
.guia#japon > summary::before{background-image:url("assets/img/mini/dest-japon-360.avif")}
.guia#mexico > summary::before{background-image:url("assets/img/mini/dest-mexico-360.avif")}
.guia#indonesia > summary::before{background-image:url("assets/img/mini/dest-indonesia-360.avif")}
.guia#peru > summary::before{background-image:url("assets/img/mini/dest-peru-360.avif")}
.guia#namibia > summary::before{background-image:url("assets/img/mini/dest-namibia-360.avif")}
.guia#sudafrica > summary::before{background-image:url("assets/img/mini/dest-sudafrica-360.avif")}

/* Créditos: arriba, las fotos de los viajes (la página de las fotos enseña fotos) */
.creditos-muestra{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;margin:clamp(28px,4vw,48px) 0 clamp(36px,5vw,64px)}
.creditos-muestra figure{margin:0;display:grid;gap:8px}
.creditos-muestra img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:14px}
@media (max-width:900px){.creditos-muestra{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:999px){.legal:has(.creditos-lista){max-width:calc(65ch + 88px)}}
/* La columna de lo legal, del ancho de su texto: centrada de verdad (Taste: márgenes iguales) */
.legal,.recibido{max-width:calc(65ch + 88px)}
@media (max-width:760px){.legal,.recibido{max-width:calc(65ch + 40px)}}
@media (min-width:1000px){.legal:has(.creditos-lista){max-width:1180px}}
@media (max-width:999px){.creditos-lista li{display:block}.creditos-lista li > strong{display:block}.legal p,.legal li{max-width:none}}
.pagina-cab{display:grid;gap:12px;padding-top:clamp(28px,4vw,56px)}
.pagina-cab .pagina-titulo{padding-top:0}
.pagina-cab + .perfil-pagina{padding-top:clamp(20px,2.5vw,32px)}

/* La marca: solo «Nausika» en General Sans, como la portada (Pablo, 29-10); sin el canto rodado de W-032 */
.marca .marca-simbolo,.marca .marca-objeto{display:none}   /* también la huella del viaje que pone diseno.js (auditoría, 30-10) */
.marca{gap:0}

/* ============================================================
   Fase 5 (W-125): trazar un viaje y el viaje (ruta/), con el acompañante (W-123)
   Son pantallas para usar, no para leer: sin franja de relieve. Lo mismo que en el resto: blanco piedra, superficies
   blancas sin raya ni sombra, botones en cristal y el naranja solo en la acción; nada en mayúsculas ni por debajo de 12 px.
   ============================================================ */

/* La cabecera de la web, con los bordes del viaje (antes la marca iba a 174 px y el viaje a 24) */
body:has(main[data-ruta]) .nav{max-width:none;padding-inline:24px}
@media (max-width:959px){
  body:has(main[data-ruta]) .nav{padding-inline:16px}
}

/* Cabecera del viaje y menú de pestañas: sin raya bajo el título; la de las pestañas, apenas */
.vj-cab{border-bottom:0}
.vj-menu{border-color:var(--linea-suave)}
@media (min-width:960px){.vj-menu{border-bottom-color:var(--linea-suave)}}
.vj-fila{border-bottom-color:var(--linea-suave)}
.vj-seccion-t{border-bottom:0;padding-bottom:0}

/* Los avisos del viaje (sin huella, cambios del acompañante, versión nueva): superficies blancas, sin raya, con el margen
   de la cabecera; el de sin huella iba pegado a los bordes de la pantalla */
.vj > .vj-sh-caja{flex:none;margin:8px 16px 0}
@media (min-width:960px){.vj > .vj-sh-caja{margin:8px 24px 0}}
.vj-sh,.vj-av{border:0;border-radius:20px;background:var(--superficie)}
.vj-sh p,.vj-av p,.vj-av li{font-size:15px}
.vj-sh .vj-sh-t,.vj-av h3{font-weight:600;font-size:16px}
/* Lo que ha cambiado otro: un punto naranja delante del título, en vez de la raya de color al lado */
.vj-av-cambio{border-left:0}
.vj-av-cambio h3::before{content:"";display:inline-block;width:8px;height:8px;margin:0 8px 2px 0;border-radius:50%;background:var(--acento);vertical-align:middle}
.vj-cambios li{border-top-color:var(--linea-suave)}
/* El botón del aviso, a su medida (se estiraba a todo el ancho de la rejilla) */
.vj-av > .vj-btn,.vj-sh > .vj-btn{justify-self:start}

/* Los botones del viaje: en cristal; el lleno, en naranja con la tinta encima */
.vj .vj-btn,.vj-compartir .vj-btn,.vj .vj-compartir-abrir,.vj .vj-asa-accion{
  background:var(--vidrio);border:1px solid var(--vidrio-filo);border-top-color:var(--vidrio-luz);color:var(--tinta);font-weight:600}
.vj .vj-btn.lleno,.vj-compartir .vj-btn.lleno{background:var(--acento);color:var(--sobre-acento);border-color:transparent}
@media (hover:hover) and (pointer:fine){.vj .vj-btn:not(.lleno):hover,.vj-compartir .vj-btn:not(.lleno):hover,.vj .vj-compartir-abrir:hover,.vj .vj-asa-accion:hover{border-color:var(--linea-media)}}
@media (hover:hover) and (pointer:fine){.vj .vj-btn.lleno:hover,.vj-compartir .vj-btn.lleno:hover{background:color-mix(in srgb,var(--acento) 86%,var(--tinta))}}
.vj .vj-btn:active{transform:scale(.97)}

/* «Quién viene» (W-123): aire entre las partes, el enlace en un campo sin raya, la lista de lo que puede con puntos */
[data-mas="grupo"]{display:grid;gap:14px}
[data-mas="grupo"] > header p{font-size:16px;color:var(--tinta)}
[data-mas="grupo"] .vj-seccion-t{margin-top:10px;font-size:16px;font-weight:600}
.vj-enlace{border:0;background:var(--superficie);border-radius:var(--r-campo)}
.vj-puede li::before{top:.95em;left:6px;width:5px;height:5px;border-radius:50%;background:var(--tinta-suave)}

/* Nada en mayúsculas espaciadas ni por debajo de 12 px: las etiquetas, en minúscula y a su tamaño */
.dia-chip small,.vj-kicker,.vj-fila-t small,.vj-cap h3,.vj-dia-num small,.vj-acto-momento,.vj-fecha-campo label,.vj-aero-estado,
.vj-mio-eco,.vj-urgencias h4,.vj-paso,.vj-asa-t b,.vj-medios h3,.vj-muestra,.vj-apuntes-t{text-transform:none;letter-spacing:0}
.dia-chip small{font-size:12px}
.vj-dia-num small{font-size:12px}
.vj-kicker,.vj-fila-t small,.vj-acto-momento,.vj-aero-estado,.vj-mio-eco,.vj-paso,.vj-asa-t b{font-size:13px}
.vj-cap h3,.vj-fecha-campo label,.vj-urgencias h4{font-size:14px;font-weight:600;color:var(--tinta)}
/* El rótulo del asa (Preparar, el día…) no es una etiqueta de color sobre el título: va en la tinta suave */
.vj-asa-t b{font-weight:400;color:var(--tinta-suave)}

/* El presupuesto dentro de la hoja: sin caja dentro de la caja */
.vj-pres{background:none;border-radius:0;padding:0}
.vj-pres-resultado{background:var(--papel)}
.vj-pres-nocabe{border-left:0;padding-left:0}

/* Las ventanas del viaje (compartir…) viven dentro de <main>, que hace capa propia (z-index 1): con una abierta, la
   página entera pasa por encima de la cabecera, que si no tapaba el título de la ventana */
main[data-ruta]:has([aria-modal="true"]:not([hidden])){z-index:30}


/* ============================================================
   Auditoría final, tanda 1 (30-10-2026): estilos comunes. ARCHIVO/mediciones/2026-10-29-auditoria-final/INFORME.md
   ============================================================ */
:root{--t-pulsar:140ms;--t-pasar:180ms;--curva-salida:cubic-bezier(.23,1,.32,1)}

/* F-02 · Los enlaces dentro de un texto, subrayados: la regla vieja de styles.css (mismo selector, antes) se lo quitaba */
p a.enlace,.caja a.enlace,.creditos-lista a.enlace,.guia-cuerpo a.enlace,.legal a.enlace,.prosa a.enlace,.pie-legal a.enlace,.consentimiento a.enlace{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--linea-media)}
@media (hover:hover) and (pointer:fine){
  p a.enlace:hover,.caja a.enlace:hover,.guia-cuerpo a.enlace:hover,.legal a.enlace:hover,.prosa a.enlace:hover{text-decoration-color:currentColor}
}

/* F-04 · Lo elegido, siempre igual y en oliva (W-125): en las fotos, un anillo de 3 px */
.dna-img-card.is-sel{border-color:var(--oliva);box-shadow:0 0 0 3px var(--oliva)}
.dna-img-card .sello{background:var(--oliva);color:var(--papel)}
.dna-rank button.is-ranked{border-color:var(--oliva);box-shadow:inset 0 0 0 2px var(--oliva)}
.reparto-nivel.is-sel,.dia-chip.is-sel,.vj-marca[aria-pressed="true"],.vj-apunte-acc .vj-marca[aria-pressed="true"],.vj-propio-chip input:checked + span,
.vj-sh-zonas button[aria-pressed="true"] .n{background:var(--oliva);color:var(--papel);border-color:var(--oliva)}
.vj-sh-zonas button[aria-pressed="true"]{border-color:var(--oliva)}
.vj-propio-planes button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--oliva)}
.gz-cand.elegida,.gz-aero.elegida,.gz-cero.elegida{box-shadow:0 0 0 2px var(--oliva)}
.vj-permiso input{accent-color:var(--oliva)}

/* E-04, E-29, E-06 · Los controles responden al pulsarlos, en 140 ms; y sin el recuadro azul de Android, que deja de
   ser la única respuesta al toque */
.cta,.btn,.vj .vj-btn,.vj-compartir .vj-btn,.vj-capas button,.vj-cambiar-mapa button,.vj .vj-ver,.vj-menu button,.vj .vj-asa-accion,
.vj .vj-compartir-abrir,.vj .vj-urg,.vj-marca,.menu-boton,.perfil-boton,.dna-sino button,.dna-abcd button,.reparto-nivel,.dna-paso{
  transition:transform var(--t-pulsar) var(--curva-salida),background-color var(--t-pasar) ease,border-color var(--t-pasar) ease,
    color var(--t-pasar) ease,box-shadow var(--t-pasar) ease}
.cta:active,.btn:active,.vj .vj-btn:active,.vj-compartir .vj-btn:active,.vj-capas button:active,.vj-cambiar-mapa button:active,.vj-menu button:active,
.vj .vj-asa-accion:active,.vj .vj-compartir-abrir:active,.vj .vj-urg:active,.vj-marca:active,.menu-boton:active,.perfil-boton:active,
.dna-sino button:active,.dna-abcd button:active,.reparto-nivel:active{transform:scale(.97)}
html{-webkit-tap-highlight-color:transparent}

/* F-11 · Sobre blanco, el cristal se quedaba abierto por arriba (su filo de luz es blanco): ahí, papel con borde fino
   parejo. El cristal, solo sobre el relieve o el mapa (W-116) */
.vj-av .vj-btn:not(.lleno),.vj-sh .vj-btn:not(.lleno),.vj-hoja .vj-btn:not(.lleno),.vj-portada-hoja .vj-btn:not(.lleno),.vj-compartir .vj-btn:not(.lleno),
.vj .vj-asa-accion,.vj-pres .vj-btn:not(.lleno),.vj-columna .vj-btn:not(.lleno){background:var(--papel);border:1px solid var(--linea-control)}
.menu-boton,.perfil-boton{border-color:var(--linea-control)}

/* F-10 · El naranja, solo en la acción principal (W-125). En la ruta, lo que avisa va en tinta: Urgencias, el número
   de Reservas, los momentos del día, las viñetas y las rayas de aviso. La parada que miras queda para D3. */
.vj,.vj-compartir,.gz{--ocre:var(--tinta-suave);--ocre-texto:var(--tinta)}
.vj .vj-urg{border-color:var(--linea-control);color:var(--tinta)}
.vj-cuenta{background:var(--tinta);color:var(--papel)}
.vj-fila-dato.pronto,.vj-plazo.pronto,.vj-plazo.pasado{font-weight:600}
.vj-completo .vj-kicker,.vj-muestra,.vj-apuntes-t{color:var(--tinta-suave);text-transform:none;letter-spacing:0;font-size:13px}
.vj-nota.vj-error{color:var(--tinta);font-weight:600}

/* F-05 · Nada por debajo de 12 px en la ruta (el resto de tamaños, en D2) */
.vj-menu button{font-size:12px}
.vj-cuenta{font-size:12px;min-width:18px;height:18px;line-height:18px}
.vj-m-horas text,.vj-m-aero text{font-size:12px}

/* F-06, E-07, E-08 · Zonas de toque de 44 px como mínimo, sin cambiar el dibujo: un margen invisible alrededor */
.vj-capas button,.vj-cambiar-mapa button,.vj .vj-urg,.vj-marca,.vj .vj-ver,.dna-paso,.vj .vj-compartir-abrir,.vj .vj-asa-accion{position:relative}
.vj-capas button::after,.vj-cambiar-mapa button::after,.vj-marca::after,.dna-paso::after,.vj .vj-compartir-abrir::after,.vj .vj-asa-accion::after{
  content:"";position:absolute;inset:-6px}
.vj .vj-urg::after{content:"";position:absolute;inset:-4px}
.vj .vj-ver::after{content:"";position:absolute;inset:-12px -4px}
.pie-grid a,.pie-legal a,.vj-enlace-mini,.avatar-guardar button,.dna-rank-reset,.pab-sin a.enlace,.q-hint a.enlace{display:inline-block;padding-block:12px;margin-block:-12px}

/* F-13 · La franja de relieve, de borde a borde y fundida también por arriba */
html,body{overflow-x:clip}
.franja{margin-inline:calc(50% - 50vw);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 62%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 62%,transparent)}

/* F-14 · Los cuatro pesos del cuestionario en una fila, sin «Lo principal» sola */
.reparto-niveles{display:grid;grid-template-columns:repeat(4,auto);justify-content:end}
@media (max-width:760px){.reparto-niveles{grid-template-columns:repeat(4,1fr);justify-content:stretch}.reparto-nivel{padding-inline:6px}}

/* F-16 · La barra de «Atrás», sin sombra: papel lleno */
.dna-nav{box-shadow:none;background:var(--papel)}

/* F-19 · «Los 32 perfiles», con el tamaño y el peso de los demás títulos */
.perfiles-t{font-family:var(--titular);font-size:var(--t-titulo);font-weight:600;line-height:1.04;letter-spacing:-.025em}

/* F-23 · Un solo borde izquierdo: el título del cuestionario y de «Trazar» va en la columna de 900 px de debajo */
main:has(> .dna) > .pagina-titulo,main:has(> .dna) > .cabecera-pagina{max-width:900px;margin-inline:auto}
.dna-back{min-height:44px}

/* T-12, FD-19 · El mar, un paso más oscuro que la tierra: Italia se lee en el mapa */
:root,html[data-tono="noche"]{--mar:#D7DCD0}

/* E-14 · El menú entra con curva de salida en 200 ms; el velo, 200 ms al abrir y 150 al cerrar */
.menu-velo{transition:opacity 150ms ease}
.menu-velo.is-on{transition:opacity 200ms ease}
@media (prefers-reduced-motion:no-preference){
  .menu-lateral.is-abierto{transition:transform 200ms var(--curva-salida),opacity 200ms var(--curva-salida)}
}

/* F-20 · Al volver a una pestaña del viaje, sin entrada animada (diseno.js pone la clase 800 ms) */
.vj-sin-entrada .vj-portada-hoja,.vj-sin-entrada .vj-hoja:not([hidden]){animation:none}
/* F-05 · «Imprescindible», «Da forma al día»… y «Por si te apetece»: sin versalitas espaciadas y a 12 px como mínimo */
.imprescindible{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none}
.vj p > small{font-size:max(12px,.833em)}

/* D2 (la letra de la ruta a 16 px) lo lleva la tanda 3, en su bloque de diseno.css, medido texto a texto. */

/* D11 · Destinos: la foto también lleva al viaje (diseno.js pulsa el botón de su tarjeta; sin una capa transparente
   encima, que Taste contaba como pantalla vacía), y el botón va como secundario: un solo naranja por pantalla */
.destino .cta{background:transparent;color:var(--tinta);border:1px solid var(--linea-control)}
.destino .destino-foto{cursor:pointer}
@media (hover:hover) and (pointer:fine){.destino:has(.destino-foto:hover) .cta{border-color:var(--tinta)}}

/* D4 · Las postales del pie: en el móvil, una fila que se desliza (no ocupa dos pantallas ni deja a Italia sola) */
@media (max-width:520px){
  .pie-viajes ul{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:34%;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}
  .pie-viajes ul::-webkit-scrollbar{display:none}
  .pie-viajes li{scroll-snap-align:start}
}

/* D17 · La franja: su cuerda acaba en una chincheta, a la izquierda, junto al título (assets/franjas/cuerda-*, de
   tools/atlas/franjas.py). En pantallas estrechas la imagen se recorta por los lados: se encuadra para que no se corte */
@media (max-width:625px){.franja img{object-position:15% 40%}}

/* ============================================================
   Auditoría final, tanda 2 (30-10-2026): el cuestionario, trazar y el perfil
   ============================================================ */
/* T-06 · Los destinos, con su foto: dos columnas en el móvil, cuatro en el ordenador; «Que lo decida mi huella», arriba
   y a todo el ancho. Lo elegido, con el anillo oliva */
.dna-destinos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:760px){.dna-destinos{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dna-destinos button:not(.con-foto){grid-column:1/-1}
.dna-destinos button.con-foto{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:4px;padding:8px 8px 12px;border:0;border-radius:18px;
  background:var(--superficie);color:var(--tinta);text-align:left}
.dna-destinos button.con-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin-bottom:6px}
.dna-destinos button.con-foto b{padding:0 4px;font:600 var(--t-texto)/1.2 var(--titular)}
.dna-destinos button.con-foto small{padding:0 4px;font-size:var(--t-pequeno);line-height:1.35;color:var(--tinta-suave)}
.dna-destinos button.con-foto.is-sel{background:var(--superficie);color:var(--tinta);box-shadow:0 0 0 3px var(--oliva)}
.dna-destinos button.con-foto.is-sel small{color:var(--tinta-suave);opacity:1}

/* FD-14 · En las tarjetas de foto, la foto arriba en todas (un botón centra su contenido en vertical) */
.dna-img-card{display:flex;flex-direction:column;justify-content:flex-start}
.dna-img-card .frame{flex:none}

/* T-27 · Las estaciones, bajo «Aún no lo sé» */
.q-estaciones{margin-top:12px}
.q-estaciones .q-hint{margin:0 0 8px}

/* F-21, T-14 · El perfil sin huella, sin el hueco de arriba */
.pab-huella h2,.pab-guardar h2{margin-top:0}
.pab-guardar{border:0;background:var(--superficie)}

/* E-14 · El menú abierto con el ratón o el dedo recibe el foco sin anillo */
.menu-lateral:focus{outline:none}

/* ============================================================
   Auditoría final, tanda 5 (30-10-2026): los textos
   ============================================================ */
/* FD-11 · Las respuestas, sin la letra A/B/C/D */
.dna-abcd button{grid-template-columns:1fr}
/* FD-13 · Sin «·» de relleno: lo separa el aire */
.pie-legal span:last-child{display:inline-flex;flex-wrap:wrap;gap:4px 18px}
.avatar-guardar{display:flex;flex-wrap:wrap;gap:8px 20px}
.destino-mas-n{margin-left:10px;color:var(--tinta-suave);font-weight:400}
/* T-09 · El alto a mitad del cuestionario: título corto y la frase como entrada */
.dna-puente-frase{font-size:var(--t-entrada);line-height:1.32;color:var(--tinta);max-width:32ch;margin:14px 0 0;text-wrap:pretty}
.dna-puente-frase + .dna-sub{margin-top:14px}

/* ============================================================
   W-127 (30-10-2026): los países automáticos en la web (con paisesAutomaticos encendida)
   ============================================================ */
/* El aviso del viaje automático: una superficie como los avisos de W-125, sin raya */
.aviso-automatico{display:grid;gap:10px;margin:0 0 24px;padding:18px 20px;border-radius:20px;background:var(--superficie)}
.aviso-automatico h3{margin:0;font-size:var(--t-texto);font-weight:600}
.aviso-automatico p{margin:0}
.aviso-automatico summary{cursor:pointer;font-weight:600}
.aviso-automatico ul{margin:8px 0 0;padding-left:20px}
/* En Destinos, la línea de los automáticos */
.automaticos-linea{max-width:65ch;margin-top:20px;color:var(--tinta-suave)}

/* ============================================================
   W-129 (Pablo, 30-10-2026): el buscador de países (lib/buscador.js), en «Traza tu viaje» y el viaje sin huella
   ============================================================ */
.buscador{position:relative}
.buscador-etiqueta{display:block;margin-bottom:8px;font-size:var(--t-pequeno);font-weight:600;color:var(--tinta)}
.buscador-caja{position:relative}
.buscador-campo{width:100%;min-height:52px;padding:0 18px;border:1px solid var(--linea-control);border-radius:var(--r-campo);background:var(--superficie);
  color:var(--tinta);font:400 var(--t-texto)/1.2 var(--letra)}
.buscador-campo::placeholder{color:var(--tinta-suave)}
/* La lupa (Pablo, 31-10): dentro del campo, a la izquierda; no recibe el toque, que va al campo */
.buscador-lupa{position:absolute;z-index:1;left:16px;top:50%;width:20px;height:20px;margin-top:-10px;pointer-events:none;fill:none;stroke:var(--tinta-suave);
  stroke-width:2;stroke-linecap:round}
.buscador .buscador-campo,.sh-traza .buscador .buscador-campo{padding-left:46px}
.buscador-panel{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);max-height:min(340px,52vh);overflow:auto;overscroll-behavior:contain;padding:6px;
  border-radius:18px;background:var(--superficie);border:1px solid var(--vidrio-filo);box-shadow:0 18px 48px rgba(27,26,24,.14)}
.buscador-lista{list-style:none;margin:0;padding:0}
.buscador-op{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:44px;padding:10px 12px;border-radius:12px;cursor:pointer;
  font-size:var(--t-texto);color:var(--tinta)}
.buscador-op.is-activa{background:var(--papel)}
.buscador-op[aria-selected="true"] .buscador-nombre{font-weight:600}
.buscador-auto{font-size:14px;color:var(--tinta-suave);white-space:nowrap}
.buscador-vacio{margin:0;padding:12px;font-size:var(--t-pequeno);line-height:1.45;color:var(--tinta)}
.buscador-estado{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dna-buscador{max-width:480px;margin:0 0 20px}
.sh-traza .campo[data-buscador-sh]{flex:1 1 260px;min-width:0;display:block}
.sh-traza .buscador-campo{width:100%;min-height:52px;padding:0 18px;border-radius:var(--r-campo);background:var(--superficie);font-size:var(--t-texto);font-weight:400}
.sh-traza .buscador-etiqueta{font-size:14px;margin-bottom:6px}

/* ============================================================
   La guía con la cuerda de la portada (Pablo, 30-10: «pulir y la cuerda»). Cada parada, una chincheta: cabeza de metal
   oscuro con su brillo y su sombra, con el número; la elegida, en el naranja del hilo. Salen cuando la cuerda llega.
   ============================================================ */
.gz-parada.con-chincheta .n{background:radial-gradient(circle at 34% 30%,#6A6762 0,#2B2A27 42%,#0F0E0D 100%);color:#F5F3EC;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,2px 4px 5px rgba(28,26,24,.32)}
.gz-parada.con-chincheta.activa .n{background:radial-gradient(circle at 34% 30%,#FF9A72 0,var(--acento) 45%,#B8360C 100%);color:#1B1A18}
.gz-parada.por-llegar{opacity:0;transform:scale(.6)}
/* W-160: la chincheta de una parada a la que se vuelve lleva los dos números («1·6»): una píldora, no un círculo. */
.gz-parada.varias .n{width:auto;min-width:38px;padding:0 9px;border-radius:999px;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:no-preference){.gz-parada.con-chincheta{transition:opacity .35s cubic-bezier(.23,1,.32,1)}}
/* W-164: sin transición de transform (es el que pone MapLibre para colocar la chincheta: con ella se quedaba atrás del mapa
   al moverlo y se medía donde no estaba). */
/* Taste en la guía (30-10): sin sombras en el texto. Sobre la foto, la letra en blanco y el velo de abajo la sostiene; el
   crédito, en una píldora oscura. El panel del ordenador apoya sobre el mapa con una sombra corta, no flota. */
.gz-hero.con-foto{color:#fff}
:is(main[data-ruta],.gz-antes) .gz-hero .gz-credito{padding:3px 9px;border-radius:999px;background:rgba(20,18,16,.5);color:#fff;opacity:1}
@media (min-width:900px){.gz[data-modelo="a"] .gz-panel{box-shadow:0 1px 2px rgba(28,26,24,.06),0 6px 20px rgba(28,26,24,.07)}}
/* Los números de parada de la lista, como las chinchetas del mapa (en tinta, no en oliva: el oliva es lo elegido) */
.gz-ficha-texto small .n,.gz-paradas .n{background:var(--tinta);color:var(--papel)}
/* «Antes de salir» en el ordenador: el dato de la derecha, más ancho y partido en dos líneas iguales */
@media (min-width:900px){.gz-antes .gz-tarjeta small{max-width:30ch;text-wrap:balance}}
/* Las secciones de «Antes de salir» («Quién viene», «Qué reservar»…): el texto empieza bajo el título, sin el hueco de
   50 px que dejaba la columna de la pantalla de siempre */
.gz-antes[data-seccion] .gz-antes-cuerpo .vj-columna{padding-top:0}
.gz-antes[data-seccion] .gz-antes-cuerpo .vj-columna > .vj-fila:first-child{margin-top:0}

   W-133 (Pablo, 30-10): la huella corta y «Afinar mi huella»
   Fotos en P9, P20, P23 y en «Afinar» (la misma tarjeta que P6 y P7), dos deslizadores en una pantalla, el país que
   encaja bajo la huella, y en el revelado la primera ruta y la llamada a «Afinar». Solo con cuestionarioCorto.
   ============================================================ */
.dna-imgs--elegir{grid-template-columns:repeat(2,minmax(0,1fr))}
.dna-imgs--elegir .dna-img-card:last-child:nth-child(odd){grid-column:1/-1}
.dna-imgs--elegir .dna-img-card:last-child:nth-child(odd) .frame{aspect-ratio:21/9}
/* Sin foto todavía: solo el texto, en una tarjeta lisa de la misma altura (no se pone la foto de otra cosa) */
.dna-img-card.sin-foto{justify-content:center;min-height:120px;background:var(--salvia)}
.dna-img-card.sin-foto .pie-img{font-weight:600}
.dna-sliders-uno + .dna-sliders-uno{margin-top:28px}
.dna-sliders-preg{margin:20px 0 4px;font:600 var(--t-texto)/1.3 var(--letra);color:var(--tinta)}
.dna-pais{margin:-8px 0 18px;font-size:var(--t-pequeno);color:var(--tinta-suave)}
.dna-pais b{color:var(--oliva);font-weight:600}
.dna-porque{margin:0 0 8px;font-size:var(--t-pequeno);color:var(--oliva);font-weight:600}
.dna-cambia{margin:18px 0 0;font-size:var(--t-pequeno);line-height:1.45;color:var(--tinta)}
.huella-ruta{margin:24px 0 8px;text-align:left}
.huella-ruta h3{margin:0 0 10px;font:600 var(--t-entrada)/1.2 var(--titular)}
.huella-ruta-paradas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.huella-ruta-paradas li{display:flex;gap:6px;align-items:baseline;padding:8px 14px;border-radius:999px;background:var(--papel)}
.huella-ruta-paradas span{font-size:var(--t-pequeno);color:var(--tinta-suave)}
.avatar-share [data-ahora-no]{margin-left:12px}
.huella-afinada{margin:10px 0 0;font-size:var(--t-pequeno);font-weight:600;color:var(--oliva)}
/* Dos deslizadores en una pantalla: el valor elegido, del tamaño del texto, sin «Elige dónde te ves» en grande */
.dna-sliders-uno .dna-slider-val{margin:2px 0 10px;min-height:1.5em;font:400 var(--t-texto)/1.4 var(--letra);color:var(--tinta-suave)}
.dna-sliders-uno .dna-pasos{margin-top:8px}
/* W-133: un eje sin medir (la huella corta puede no saber la organización) dice «por saber» en su barra, no un 0 */
.eje-fila.es-sin-dato .eje-track{position:relative;opacity:1;background:transparent;overflow:visible;height:1.5em}
.eje-fila.es-sin-dato .eje-track::after{content:"por saber";position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:var(--t-pequeno);color:var(--tinta-suave)}
/* …y en los de estilo (la línea con sus dos polos), sin punto y sin polos */
.dna-ejes > .eje-fila.es-sin-dato .eje-track > i::after{display:none}
.dna-ejes > .eje-fila.es-sin-dato .eje-track::before{content:"por saber";left:0;top:-10px;transform:none;font-size:var(--t-pequeno)}
.dna-ejes > .eje-fila.es-sin-dato .eje-track::after{content:none}
.dna-ejes > .eje-fila.es-sin-dato .eje-track{background:transparent}

/* ============================================================
   W-136 (30-10-2026): lo que Exteriores desaconseja y el viajero elige igualmente. La superficie de aviso de W-125
   (blanca, sin raya), el texto en tinta y el enlace subrayado; sin naranja: no es una acción
   ============================================================ */
.vj-desac{display:block;margin:0;padding:14px 18px;border:0;border-radius:20px;background:var(--superficie);color:var(--tinta);font-size:15px;line-height:1.45}
.vj-desac a,.vj-desac-linea a,.vj-zona-porque .desac a{color:var(--tinta);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.gz-antes-indice .vj-desac{margin:0 0 12px}
/* «Cambiar el viaje»: su línea, la primera y en tinta */
.vj-zona-porque .en-contra.desac{color:var(--tinta);font-weight:500}
.vj-zona-porque .en-contra.desac::before{content:"!";color:var(--tinta);font-weight:700}
.vj-zona.desac .vj-encaja{color:var(--tinta-suave)}
/* «Empezar de cero»: la que desaconseja, al final y diciéndolo */
.vj-sh-zonas small.desac{color:var(--tinta)}
/* El mapa: en gris y con raya, como las que no caben; nunca en naranja de recomendada */
main[data-ruta] .gz-cand.desaconsejada .punto,.gz-cand.desaconsejada .punto{border-style:dashed;border-color:var(--tinta-suave);background:transparent;color:var(--tinta-suave)}
.gz-cand.desaconsejada b{font-weight:500;color:var(--tinta-suave)}
.vj-m-otra.desac circle.p{fill:transparent;stroke:var(--tinta-suave);stroke-dasharray:2 2}
/* El país entero: el aviso de arriba no se pliega */
.vj-auto-fijo > .vj-auto-t{margin:0;cursor:default}
.vj-auto-fijo > .vj-auto-t::after{content:none}
/* El buscador: al elegir el país, la línea de debajo */
.buscador-desac{margin:8px 0 0;font-size:var(--t-pequeno);font-weight:400;line-height:1.45;color:var(--tinta)}
.sh-traza > .buscador-desac{flex:1 1 100%;margin:0}

/* ---------- W-142. La parada tuya (Pablo, 31-10-2026): una parada que no tenemos, en naranja como lo tuyo ---------- */
.vj-pt-abrir { display: grid; gap: 4px; margin: 16px 0 8px; }
.vj-pt-abrir .vj-btn { justify-self: start; }
.vj-pt { display: grid; gap: 10px; margin: 16px 0 8px; padding: 14px; border-radius: 16px; border: 1px solid var(--linea-suave); background: var(--superficie); }
.vj-pt .vj-seccion-t { margin: 0; }
.vj-pt .vj-pt-privado { margin: 0; }
.vj-pt-campo { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.vj-pt-campo input, .vj-pt-campo select { font: inherit; font-size: 16px; font-weight: 400; min-height: 44px; padding: 8px 12px; border-radius: 12px;
  border: 1px solid var(--linea-control); background: var(--papel); color: var(--tinta); width: 100%; box-sizing: border-box; }
.vj-pt-campo input:focus-visible, .vj-pt-campo select:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.vj-pt-res .vj-pt-ya { color: var(--acento-texto); font-weight: 600; }
.vj-pt-sitio { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--papel); border: 1px solid var(--linea-control); }
.vj-pt-sitio > span:last-child { display: grid; gap: 2px; }
.vj-pt-sitio small { font-size: 13px; color: var(--tinta-suave); }
.vj-pt-pin { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 3px var(--papel), 0 0 0 4px var(--acento); }
.vj-pt-noches { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.vj-pt-noches > span { margin-right: auto; }
.vj-pt-mapa { display: grid; gap: 6px; }
.vj-pt-mapa svg { display: block; width: 100%; height: auto; max-height: 56vh; border-radius: 12px; background: var(--mar); border: 1px solid var(--linea-suave); cursor: crosshair; touch-action: manipulation; }
.vj-pt-mapa .vj-nota { margin: 0; }
.vj-pt-parada { fill: var(--oliva); stroke: var(--papel); stroke-width: 2; vector-effect: non-scaling-stroke; }
.vj-pt-parada.tuya, .vj-pt-punto { fill: var(--acento); }
.vj-pt-punto { stroke: var(--papel); stroke-width: 3; vector-effect: non-scaling-stroke; }
.vj-pt-info { display: grid; gap: 6px; margin: 6px 0 2px 38px; }
.vj-pt-info p { margin: 0; }
.vj-enlace { font: inherit; color: var(--tinta); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 32px; }
/* En la ruta, en la lista y en el mapa, la parada tuya en naranja. */
.vj-zona-fila.tuya .n, .vj-parada-bloque.tuya h3 .n, .vj-sh-zonas li.tuya .n, .vj-sh-zonas li.tuya button[aria-pressed="true"] .n { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.vj-sh-zonas li.tuya button { border-color: var(--acento); }
.vj-m-parada.tuya .cuerpo, .vj-m-parada.pildora.tuya .punto { fill: var(--acento); }
.vj-m-parada.pildora.tuya .fondo { stroke: var(--acento); stroke-dasharray: 4 3; }
.gz-parada.tuya .n, .gz-parada.con-chincheta.tuya .n, .gz-cand.tuya .punto, .gz-cand.gz-cero.elegida.tuya .punto { background: radial-gradient(circle at 34% 30%, #FF9A72 0, var(--acento) 45%, #B8360C 100%); color: #1B1A18; border-color: var(--acento); }
.vj-dia-tuya { display: inline-block; margin: 0 0 4px; font: 600 12px var(--letra); letter-spacing: .04em; color: var(--acento-texto); }
.gz-ficha-parada.tuya .n { background: var(--acento); color: #1B1A18; }
.gz-tuya { display: grid; gap: 4px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--acento); }
.gz-tuya .gz-nota { margin: 0; }
/* La parada tuya no tiene planes que pintar: en su parada y en sus días, se ve ella. */
.gz[data-nivel="zona"] .gz-parada.tuya.activa, .gz[data-nivel="dia"] .gz-parada.tuya.activa { display: flex; }

/* ============================================================
   W-160 (06-11-2026): el viaje de varios países, en la guía y en la pantalla de siempre.
   ============================================================ */
/* El título del viaje: el nombre en una o dos líneas equilibradas y los días aparte, debajo y en pequeño. Con tres botones
   a la derecha, el nombre se quedaba en 74 px y «Sudáfrica y Namibia · 10 días» salía en cuatro líneas. En el móvil, el
   nombre ocupa su fila y los botones van debajo, a la derecha. */
.vj-cab { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 599px) {
  .vj-cab > div:first-child { flex-basis: 100%; }
  .vj-cab > div:first-child + * { margin-left: auto; }
}
.vj-cab h1 { display: flex; flex-direction: column; gap: 1px; }
.vj-cab-nombre { text-wrap: balance; overflow-wrap: anywhere; }
.vj-cab-dias { font: 400 13px/1.3 var(--letra); color: var(--tinta-suave); letter-spacing: 0; white-space: nowrap; }
/* La barra de dónde estás de la guía, en el móvil: en una línea. Con un nombre largo («Río Orange: Noordoewer y
   Vioolsdrif») se partía en tres y tapaba el mapa: se recorta con puntos suspensivos, primero el país. */
@media (max-width: 899px) {
  .gz[data-modelo="a"] .gz-migas { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; min-width: 0; padding-right: 160px; }
  .gz[data-modelo="a"] .gz-migas > button, .gz[data-modelo="a"] .gz-migas > span[aria-current] { 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; }
}
/* La pantalla de siempre (la que queda si la guía no puede montarse) con la cuerda de la guía (W-134): la ruta en el
   naranja del hilo y cada parada en tinta, como la chincheta. Antes, en oliva: era el diseño de antes de W-125. */
.vj-m-tramo { stroke: var(--acento); }
.vj-m-horas rect { stroke: var(--acento); }
.vj-m-parada circle.cuerpo { fill: var(--tinta); stroke: var(--papel); }
.vj-m-parada text.n { fill: var(--papel); }
.vj-m-parada .halo { stroke: var(--acento); }
.vj-m-parada.pildora:not(.tuya):not(.hecha) .punto { fill: var(--tinta); }
/* «Hoy» y los días de la pantalla de siempre, como los de la guía (W-128, G-09): el número del plan en una píldora de
   tinta, no en oliva (el oliva es la huella y lo elegido). En el mapa del día, igual. */
.vj-plan-num, .vj-calle-punto { background: var(--tinta); color: var(--papel); }
.vj-m-dia-punto .punto { fill: var(--tinta); }
.vj-m-dia-punto text { fill: var(--papel); }
.vj-m-dia-punto .zona { fill: var(--tinta); stroke: var(--tinta); }
.vj-calle-punto.zona { box-shadow: 0 0 0 3px var(--superficie), 0 0 0 22px color-mix(in srgb, var(--tinta) 10%, transparent); }
/* W-160: si el mapa no carga, la guía sigue con su hueco y lo dice, en cristal sobre el papel (no la pantalla de antes). */
.gz--sin-mapa .gz-mapa { background: var(--mar); }
.gz-sin-mapa { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); width: min(320px, calc(100% - 32px)); display: grid; gap: 12px; justify-items: start;
  padding: 16px 18px; border-radius: 20px; background: var(--vidrio); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 2px rgba(28,26,24,.06), 0 6px 20px rgba(28,26,24,.07); }
.gz-sin-mapa p { margin: 0; font: 400 var(--t-texto)/1.4 var(--letra); color: var(--tinta); text-wrap: pretty; }
.gz-sin-mapa button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--tinta); color: var(--papel); font: 600 15px var(--letra); cursor: pointer; }
.gz-sin-mapa button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
@media (min-width: 900px) { .gz-sin-mapa { left: calc(50% + 228px); top: 50%; } }

/* ============================================================
   W-166 (Pablo, 06-11-2026: la idea B de la auditoría de la guía): una barra fija abajo con Viaje, Reservas, Grupo e
   Info, y fuera «Antes de salir». En el móvil, a todo lo ancho, con el área segura del iPhone; en pantalla ancha, una
   ficha debajo del panel, del mismo ancho, con el mapa a la vista. Las páginas de Reservas, Grupo e Info van entre la
   cabecera y la barra (en pantalla ancha, en el sitio del panel). Un solo color de acción: el naranja (W-125).
   ============================================================ */
.gz-barra { position: fixed; z-index: 58; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left)); background: var(--superficie); }
.gz-barra button { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 50px; padding: 5px 2px 4px; border: 0;
  background: none; color: var(--tinta-suave); font: 600 12px/1.2 var(--letra); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gz-barra button[hidden] { display: none; }
.gz-barra .gz-ico { position: relative; width: 22px; height: 22px; }
.gz-barra-t { position: relative; }
/* La que estás, en tinta y con su píldora detrás del icono */
.gz-barra button::before { content: ""; position: absolute; top: 3px; left: 50%; width: 54px; height: 28px; translate: -50% 0; border-radius: 999px; background: transparent;
  transition: background-color .2s cubic-bezier(.23,1,.32,1); }
.gz-barra button[aria-current="page"] { color: var(--tinta); }
.gz-barra button[aria-current="page"]::before { background: var(--papel-oscuro); }
.gz-barra button:focus-visible { outline: 2px solid var(--tinta); outline-offset: -4px; border-radius: 14px; }
.gz-barra-n { position: absolute; top: 2px; left: calc(50% + 7px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--tinta);
  color: var(--papel); font: 600 12px/18px var(--letra); font-style: normal; text-align: center; font-variant-numeric: tabular-nums; }
.gz-barra-n[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .gz-barra button::before { transition: none; } }
/* En el móvil, el mapa termina donde empieza la barra */
@media (max-width: 899px) {
  body.con-gz-barra .gz { height: calc(100vh - var(--gz-arriba, 64px) - var(--gz-barra, 50px)); height: calc(100svh - var(--gz-arriba, 64px) - var(--gz-barra, 50px)); }
}
@media (min-width: 900px) {
  .gz-barra { left: 16px; right: auto; bottom: 16px; width: 420px; padding: 4px; gap: 4px; border-radius: 20px;
    box-shadow: 0 1px 2px rgba(28,26,24,.06), 0 6px 20px rgba(28,26,24,.07); }
  .gz-barra { display: flex; }
  .gz-barra button { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 10px; border-radius: 16px; font-size: 15px; }
  .gz-barra button::before { display: none; }
  .gz-barra button[aria-current="page"] { background: var(--papel-oscuro); }
  .gz-barra .gz-ico { width: 20px; height: 20px; }
  .gz-barra-n { position: static; }
  @media (hover: hover) and (pointer: fine) { .gz-barra button:not([aria-current="page"]):hover { color: var(--tinta); background: var(--papel); } }
  /* El panel, encima de la barra */
  body.con-gz-barra .gz[data-modelo="a"] .gz-panel { max-height: calc(100% - 44px - var(--gz-barra, 54px)) !important; }
  /* Con una página abierta, la página va encima del panel, en su mismo sitio (lo tapa entero) */
}

/* ---- Arriba del mapa, menos cosas (I1): en el país, solo «Tu ruta»; dónde estás, al bajar a una parada o a un día ---- */
@media (max-width: 899px) {
  .gz[data-modelo="a"] .gz-migas { padding-right: 6px; }
  .gz[data-modelo="a"][data-nivel="pais"] .gz-migas { display: none; }
}
.gz .gz-arriba-botones { position: relative; }
.gz .gz-centrar { position: absolute; right: 0; top: calc(var(--gz-pista-top, 64px) - 12px); }
/* Los números de «Tu ruta», en tinta como las chinchetas (W-134): el oliva es la huella y lo elegido */
.gz-tu-ruta .it-n { background: var(--tinta); color: var(--papel); }
.gz-tu-ruta .it-p.it-vuelta .it-n { background: transparent; color: var(--tinta); border-color: var(--tinta); }

/* ---- Las páginas: Reservas, Grupo e Info ---- */
body.con-gz-barra .gz-antes.gz-antes--hoja[data-pestana] { inset: var(--gz-arriba, 64px) 0 var(--gz-barra, 50px) 0; z-index: 57; max-height: none; width: auto;
  translate: none; border-radius: 0; box-shadow: none; background: var(--papel); }
body.con-gz-barra .gz-antes[data-pestana] .gz-antes-cab { padding: 18px 16px 10px; border: 0; border-radius: 0; background: var(--papel); }
body.con-gz-barra .gz-antes[data-pestana] .gz-antes-cab h2 { font: 600 min(var(--t-titulo), 34px)/1.05 var(--titular); letter-spacing: -.03em; outline: none; }
body.con-gz-barra .gz-antes[data-pestana] .gz-cerrar, body.con-gz-barra .gz-antes[data-pestana] .gz-asa { display: none; }
body.con-gz-barra .gz-antes[data-pestana]:not([data-seccion]) .gz-antes-indice,
body.con-gz-barra .gz-antes[data-pestana][data-seccion] .gz-antes-seccion { max-width: none; margin: 0; padding: 4px 16px 32px; }
body.con-gz-barra .gz-antes[data-pestana="reservas"] .gz-antes-cuerpo > .vj,
body.con-gz-barra .gz-antes[data-pestana="info"]:not([data-seccion="presupuesto"]):not([data-seccion="urgencias"]) .gz-antes-cuerpo > .vj { display: none !important; }
body.con-gz-barra .gz-antes[data-pestana] .vj-compartir-mas { display: none; }
/* Grupo, el dinero y las urgencias enteras son la pantalla de siempre: sin su título de fila, y lo de la guía debajo del presupuesto */
body.con-gz-barra .gz-antes[data-pestana][data-seccion] .gz-antes-cuerpo .vj-columna { padding: 0 16px 32px; }
body.con-gz-barra .gz-antes[data-pestana][data-seccion] .gz-antes-cuerpo .vj-fila { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
body.con-gz-barra .gz-antes[data-seccion="urgencias"] #vj-mas :is([data-fila="m-vj-urgencias"], [data-fila^="m-Si algo sale mal"]) { display: block; }
body.con-gz-barra .gz-antes[data-seccion="urgencias"] #vj-mas :is([data-fila="m-vj-urgencias"], [data-fila^="m-Si algo sale mal"]) > summary { display: none; }
body.con-gz-barra .gz-antes[data-seccion="presupuesto"] .gz-antes-cuerpo { display: flex; flex-direction: column; }
body.con-gz-barra .gz-antes[data-seccion="presupuesto"] .gz-antes-seccion { order: 2; padding-top: 0; }
body.con-gz-barra .gz-antes[data-seccion="presupuesto"] .gz-antes-cuerpo > .vj { order: 1; }
@media (min-width: 900px) {
  body.con-gz-barra .gz-antes.gz-antes--hoja[data-pestana] { inset: calc(var(--gz-arriba, 64px) + 16px) auto calc(var(--gz-barra, 54px) + 24px) 16px; width: 420px;
    border-radius: 24px; box-shadow: 0 1px 2px rgba(28,26,24,.06), 0 6px 20px rgba(28,26,24,.07); }
  body.con-gz-barra .gz-antes[data-pestana] .gz-antes-cab { padding: 20px 20px 10px; border-radius: 24px 24px 0 0; }
  body.con-gz-barra .gz-antes[data-pestana]:not([data-seccion]) .gz-antes-indice,
  body.con-gz-barra .gz-antes[data-pestana][data-seccion] .gz-antes-seccion { padding: 4px 20px 28px; }
}

/* Info: las urgencias, arriba y grandes */
.gz-urgencias { margin: 4px 0 16px; padding: 16px 18px 6px; border-radius: 22px; background: var(--tinta); color: var(--papel); }
.gz-urgencias h3 { margin: 0; font: 600 var(--t-pequeno)/1.3 var(--letra); color: color-mix(in srgb, var(--papel) 80%, transparent); }
.gz-urg-pais { margin: 12px 0 0; font: 600 var(--t-pequeno)/1.3 var(--letra); }
.gz-urgencias ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.gz-urgencias li a { display: grid; gap: 0; padding: 6px 0; min-height: 44px; color: inherit; text-decoration: none; }
.gz-urgencias li b { font: 600 var(--t-entrada)/1.15 var(--letra); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.gz-urgencias li:first-child b { font-size: min(var(--t-titulo), 40px); line-height: 1.05; letter-spacing: -.03em; }
.gz-urgencias li span { font-size: var(--t-pequeno); line-height: 1.35; color: color-mix(in srgb, var(--papel) 80%, transparent); }
.gz-urg-nada { margin: 6px 0 8px; font-size: var(--t-pequeno); line-height: 1.4; }
.gz-urg-mas { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; margin: 4px 0 0; padding: 0; border: 0;
  background: none; color: var(--papel); font: 600 var(--t-pequeno)/1.3 var(--letra); text-align: left; cursor: pointer; }
.gz-urg-mas .gz-ico { width: 18px; height: 18px; }
.gz-urg-mas:focus-visible { outline: 2px solid var(--papel); outline-offset: 2px; border-radius: 8px; }
/* Info: una fila por cosa */
.gz-info-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gz-antes .gz-info-fila, .gz-info-fila { display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; gap: 14px; align-items: center; width: 100%; min-height: 60px;
  margin: 0; padding: 12px 14px 12px 16px; border: 0; border-radius: 18px; background: var(--superficie); color: var(--tinta); text-align: left; font: inherit; cursor: pointer; }
.gz-info-fila > .gz-ico { width: 22px; height: 22px; color: var(--tinta); }
.gz-info-fila > .gz-ico:last-child { width: 18px; height: 18px; color: var(--tinta-suave); }
.gz-info-fila > span { display: grid; gap: 2px; min-width: 0; }
.gz-info-fila b { font: 600 17px/1.25 var(--letra); }
.gz-info-fila small { font-size: var(--t-pequeno); line-height: 1.35; color: var(--tinta-suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) and (pointer: fine) { .gz-info-fila:hover b { text-decoration: underline; text-underline-offset: 3px; } }
.gz-info-t { margin: 24px 0 10px; font: 600 17px/1.3 var(--letra); color: var(--tinta); }
.gz-antes-indice > .vj-desac, .gz-antes-indice > .gz-exteriores { margin: 0 0 12px; }
/* Una página de Info */
.gz-texto { margin: 0 0 14px; font-size: var(--t-texto); line-height: 1.55; color: var(--tinta); max-width: 62ch; }
.gz-fuente { margin: 0 0 18px; font-size: var(--t-pequeno); color: var(--tinta-suave); }
.gz-fuente a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gz-cambio { margin: 4px 0 2px; font: 600 var(--t-entrada)/1.2 var(--letra); }
.gz-lista { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 10px; font-size: var(--t-texto); line-height: 1.5; }
.gz-info-entero { margin-top: 16px; }
.gz-info-entero > summary { display: inline-flex; align-items: center; min-height: 44px; font: 600 var(--t-pequeno) var(--letra); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--linea-media); text-underline-offset: 3px; }
.gz-info-entero[open] > summary { margin-bottom: 8px; }
.gz-antes-seccion .gz-puntos li { box-shadow: none; }
.gz-antes-seccion .gz-puntos .gz-ico { background: var(--tinta); }

/* La fecha de salida, a la vista en la cabecera del viaje */
.gz-fecha-caja { padding: 12px 14px 0; }
.gz-fecha-fila { display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; gap: 12px; align-items: center; width: 100%; min-height: 60px; padding: 10px 14px 10px 16px;
  border: 0; border-radius: 18px; background: var(--superficie); color: var(--tinta); text-align: left; font: inherit; cursor: pointer; }
.gz-fecha-fila > span { display: grid; gap: 2px; min-width: 0; }
.gz-fecha-fila b { font: 600 17px/1.25 var(--letra); }
.gz-fecha-fila small { font-size: var(--t-pequeno); line-height: 1.35; color: var(--tinta-suave); }
.gz-fecha-fila > .gz-ico { width: 22px; height: 22px; }
.gz-fecha-fila > .gz-ico:last-child { width: 18px; height: 18px; color: var(--tinta-suave); }
@media (hover: hover) and (pointer: fine) { .gz-fecha-fila:hover b { text-decoration: underline; text-underline-offset: 3px; } }
/* W-169: durante el viaje, la fila de la fecha es «Hoy» y lleva al día de hoy. El punto naranja: lo tuyo, ahora (§3). */
.gz-hoy-punto { justify-self: center; width: 12px; height: 12px; border-radius: 50%; background: var(--acento);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--acento) 20%, transparent); }
.gz-hoy-fila small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* W-169: el día, al día. El camino, la noche y las reservas, en tarjetas como las de los planes; las urgencias, en tinta como en Info. */
.gz-dia-bloque { margin: 14px 0 0; padding: 14px 16px; border-radius: 18px; background: var(--superficie); }
.gz-dia-bloque[hidden] { display: none; }
.gz-dia-cab { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; }
.gz-dia-cab > .gz-ico { width: 22px; height: 22px; margin-top: 1px; color: var(--tinta); }
.gz-dia-cab > div { min-width: 0; }
.gz-dia-bloque > .gz-dia-mas { margin-left: 34px; }
.gz[data-modelo="a"] .gz-dia-bloque h2 { margin: 0; font: 600 17px/1.3 var(--letra); letter-spacing: 0; color: var(--tinta); }
.gz-dia-sub { margin: 2px 0 0; font-size: var(--t-pequeno); line-height: 1.45; color: var(--tinta-suave); text-wrap: pretty; }
.gz-dia-mas > summary { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px var(--letra); color: var(--tinta); cursor: pointer; list-style: none;
  text-decoration: underline; text-decoration-color: var(--linea-media); text-underline-offset: 3px; }
.gz-dia-mas > summary::-webkit-details-marker { display: none; }
.gz-dia-mas p { margin: 0 0 4px; font-size: 15px; line-height: 1.5; color: var(--tinta-suave); text-wrap: pretty; }
.gz-res-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.gz-res-lista[hidden] { display: none; }
.gz-res { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--papel); }
.gz-res > span { min-width: 0; }
.gz-res b { display: block; font: 600 16px/1.3 var(--letra); color: var(--tinta); overflow-wrap: anywhere; }
.gz-res small { display: block; margin-top: 2px; font-size: 15px; line-height: 1.35; color: var(--tinta-suave); overflow-wrap: anywhere; }
.gz .gz-res-abrir { margin: 0; min-height: 44px; padding: 0 14px 0 12px; }
.gz-plan .gz-res-lista { margin-top: 10px; }
.gz-plan .gz-horario { margin: 10px 0 0; font: 600 15px/1.35 var(--letra); color: var(--tinta); }
.gz-plan .gz-horario.abierto::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--oliva); }
.gz-plan .gz-horario.cerrado { color: var(--acento-texto); }
.gz-plan .gz-res-plan p { margin: 8px 0 0; font: 600 15px/1.35 var(--letra); }
.gz-plan .gz-res-hecha { color: var(--oliva); }
.gz-plan .gz-res-falta { color: var(--acento-texto); }
.gz-plan .gz-res-falta .gz-enlace { margin-left: 4px; color: var(--tinta); }
.gz-enlace { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--tinta); font: 600 15px var(--letra); text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--linea-media); text-underline-offset: 3px; }
.gz-enlace:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 6px; }
.gz-urg-dia { margin: 16px 0 0; padding: 14px 16px 4px; border-radius: 18px; background: var(--tinta); color: var(--papel); }
.gz[data-modelo="a"] .gz-urg-dia h2 { margin: 0; font: 600 var(--t-pequeno)/1.3 var(--letra); letter-spacing: 0; color: color-mix(in srgb, var(--papel) 82%, transparent); }
.gz-urg-dia ul { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.gz-urg-dia li a { display: grid; min-height: 44px; padding: 4px 0; color: inherit; text-decoration: none; }
.gz-urg-dia li b { font: 600 24px/1.15 var(--letra); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.gz-urg-dia li span { font-size: 14px; line-height: 1.3; color: color-mix(in srgb, var(--papel) 82%, transparent); }
.gz-urg-dia .gz-enlace { color: var(--papel); text-decoration-color: color-mix(in srgb, var(--papel) 50%, transparent); }
.gz-pasos .gz-pasos-hoy { font-weight: 700; }

/* Su hoja: el título dice qué es; el campo no lo repite (I4) */
.gz-ficha-caja--fecha .gz-ficha-cuerpo { gap: 6px; }
.gz-ficha-caja--fecha .gz-fecha { padding-bottom: 4px; }
.gz-ficha .gz-fecha-campo > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gz-ficha .gz-fecha input[type="date"] { min-height: 48px; font-size: 17px; background: var(--superficie); }

/* Un solo color para la acción principal (I2): el naranja, con la tinta encima */
.gz-ficha .gz-accion--llena, .gz-antes .gz-accion--llena, .gz-accion--llena { background: var(--acento); color: var(--sobre-acento); border-color: transparent; }
@media (hover: hover) and (pointer: fine) { .gz-accion--llena:hover { background: color-mix(in srgb, var(--acento) 86%, var(--tinta)); } }
.gz-ficha .gz-fecha-colocar, .gz-fecha-colocar { background: var(--acento); color: var(--sobre-acento); }
.gz-ficha .gz-fecha-quitar { min-height: 44px; text-decoration: underline; text-decoration-color: var(--linea-media); text-underline-offset: 3px; }
body.con-gz-barra .gz-antes[data-pestana] .gz-antes-seccion:empty { display: none; }
/* Volver a Info: redondo, con su foco redondo (M5: el cuadrado negro se cortaba y pisaba el título) */
body.con-gz-barra .gz-antes[data-pestana] .gz-antes-cab { gap: 4px; }
body.con-gz-barra .gz-antes[data-pestana] .gz-atras { flex: none; width: 44px; height: 44px; margin-left: -12px; border-radius: 50%; }
body.con-gz-barra .gz-antes[data-pestana] .gz-atras .gz-ico { width: 24px; height: 24px; }
body.con-gz-barra .gz-antes[data-pestana] .gz-atras:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
.gz-ficha-reserva .gz-accion { margin: 10px 0 0; }
/* La atribución del mapa: a la vista y legible (en el móvil la tapaba el panel; 11 px era menos que lo mínimo) */
.gz .gz-mapa .maplibregl-ctrl-attrib { font-size: 12px; }
@media (max-width: 899px) {
  .gz .gz-mapa .maplibregl-ctrl-bottom-right { top: calc(var(--gz-pista-top, 64px) - 4px); bottom: auto; }
}
/* Taste (--app), de 2 FAIL a 0: el nombre de una parada que no va, con su halo de papel en el trazo y no en sombra; y «Tu
   ruta», plana sobre el mapa (sin sombra: es un control en reposo). */
.gz .gz-otra b { text-shadow: none; -webkit-text-stroke: 3px var(--papel); paint-order: stroke fill; }
.gz .gz-tu-ruta .it-linea { box-shadow: none; border-color: transparent; }
.gz-hero.con-foto .gz-volver { color: #fff; }
.gz-parada.con-chincheta:not(.activa) .n { color: var(--papel); }
@media (min-width: 900px) {
  body.con-gz-barra .gz-antes[data-pestana][data-seccion] .gz-antes-cuerpo .vj-columna { padding: 0 20px 28px; }
}
.gz-panel :is(.gz-sh, .gz-av) p { text-wrap: pretty; }