/* ============================================================
NAUSIKA — hoja de estilos única
------------------------------------------------------------
Índice
00 Variables y base
01 Tipografía y utilidades (.kicker, .entradilla, .nota, .enlace…)
02 Botones (.cta, .btn)
03 Maquetación (.wrap, .seccion, .seccion-cabecera, .cabecera-pagina)
04 Marca: logotipo, símbolo, huellas
05 Cabecera y navegación
06 Portada: .web, relieve, hero, esquina
07 Portada: método, viajes, huellas, tarjetas, contacto
08 Fotos y cotas (.marco, .figura, .cota-mini)
09 viajes.html (.viaje-ficha, .viaje-zonas)
10 perfiles.html (.galeria, .perfil-card)
11 Guías, prosa, legal, créditos
12 Cuestionario (.dna…)
13 Resultado (.avatar-card, .dna-ejes)
14 Demo de itinerario (.demo…)
15 Formulario de propuesta (.lead…)
16 Pie
17 Movimiento (solo bajo prefers-reduced-motion: no-preference)
18 Responsive
19 Textura y detalles de portada (grano, ruta del método, hovers)
20 Muestra de huella (huella.html)
22 La pantalla del viaje (ruta/, lib/viaje.js): mapa, días, reservas, presupuesto
============================================================ */
/* ============================================================
00 Variables y base
============================================================ */
/* Tokens. La paleta de marca no cambia; lo que cambia con el tono es qué
papel y qué tinta hacen de fondo y de texto. En noche se intercambian. */
/* Letras (DESIGN.md §4): Red Hat Display para titulares y Red Hat Text para texto, de
MCKL, con licencia SIL Open Font License 1.1 (assets/fonts/OFL-red-hat.txt). Pablo las
eligió el 25-09 en vez de GT Walsheim y GT Standard, cuyas licencias salían demasiado
caras. Van dentro del proyecto, en dos trozos cada una (latin y latin-ext, que trae el
turco), y el navegador solo baja el que usa. No llevan las letras propias del vietnamita
(ơ, ư, ạ…): esas salen con la del sistema. Red Hat Mono, para cifras, solo la usa la portada. */
@font-face{font-family:"Red Hat Display";font-style:normal;font-weight:300 900;font-display:swap;src:url("assets/fonts/red-hat-display-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Red Hat Display";font-style:normal;font-weight:300 900;font-display:swap;src:url("assets/fonts/red-hat-display-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Red Hat Text";font-style:normal;font-weight:300 700;font-display:swap;src:url("assets/fonts/red-hat-text-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Red Hat Text";font-style:normal;font-weight:300 700;font-display:swap;src:url("assets/fonts/red-hat-text-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
/* DESIGN.md §3 (W-032): papel crudo, tinta cálida, oliva para la acción y el
naranja solo para «lo tuyo», como mucho un punto por pantalla. */
--papel:#F5F3EC; --papel-oscuro:#ECE8DD; --linea:#D9D3C5; --superficie:#FFFFFF; --salvia:#DBDED5;
--tinta:#1C1A18; --tinta-suave:#5C564D; --oliva:#404823; --acento:#F84E1E; --acento-texto:#B8360C;
/* Los nombres de antes siguen valiendo: el nilo es ahora el oliva y el ocre, el naranja */
--nilo:var(--oliva); --ocre:var(--acento);
--titular:"Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif;
--letra:"Red Hat Text", system-ui, -apple-system, "Segoe UI", sans-serif;
/* Los nombres de antes, que aún usa algún CSS */
--serif:var(--titular); --sans:var(--letra);
--mono:"Red Hat Mono", ui-monospace, "SF Mono", Menlo, monospace;
--radio:24px; --radio-pequeno:12px;
--fondo:var(--papel);
--texto:var(--tinta);
--texto-suave:var(--tinta-suave);
--boton:var(--nilo);
--boton-texto:#F5F3EC;
/* Borde de los controles (chips, botones del cuestionario, campos, puntos
del slider): 3:1 sobre el papel como pide WCAG 1.4.11. --linea se queda
para separadores decorativos. */
--linea-control:rgba(28,26,24,.55);
--linea-tono:var(--linea-control);
/* Colores de eje (barras de la huella, pastillas, sliders): AA sobre papel */
--eje-contenido:#404823; --eje-estilo:#5C564D;
--linea-suave:rgba(28,26,24,.18);
--linea-media:rgba(28,26,24,.35);
--hoja:rgba(255,255,255,.94);
--hoja-borde:rgba(28,26,24,.10);
--sombra:rgba(28,26,24,.16);
--capa-1:rgba(28,26,24,.08);
--capa-2:rgba(28,26,24,.05);
--luz:rgba(64,72,35,.25);
/* El mapa del viaje: mar, tierra del país, tierra de los vecinos, costa */
/* El mapa del viaje (DESIGN.md §6): tierra y mar planos, ruta en oliva */
--mar:#DBDED5; --tierra:#F5F3EC; --tierra-vecina:#E9E5DA; --costa:#C9C1AF;
--ruta:var(--oliva); --ruta-texto:#F5F3EC; --ocre-texto:#B8360C;
color-scheme:light;
}
html[data-tono="noche"]{
--papel:#171614; --papel-oscuro:#1D1B18; --linea:#3A3631; --superficie:#221F1C; --salvia:#2A2D26;
--tinta:#F2EFE7; --tinta-suave:#B3AC9F; --oliva:#B5C27A; --acento:#FF6A3D; --acento-texto:#FF8A63;
--boton:var(--oliva); --boton-texto:#171614;
--linea-control:rgba(242,239,231,.45);
--eje-contenido:#B5C27A; --eje-estilo:#B3AC9F;
--linea-suave:rgba(242,239,231,.22);
--linea-media:rgba(242,239,231,.4);
--hoja:rgba(34,31,28,.94);
--hoja-borde:rgba(242,239,231,.12);
--sombra:rgba(0,0,0,.4);
--capa-1:rgba(0,0,0,.28);
--capa-2:rgba(0,0,0,.16);
--luz:rgba(181,194,122,.24);
--mar:#2A2D26; --tierra:#221F1C; --tierra-vecina:#1D1B18; --costa:rgba(242,239,231,.3);
--ruta:#B5C27A; --ruta-texto:#171614; --ocre-texto:#FF8A63;
color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--papel);color:var(--tinta);-webkit-text-size-adjust:100%;scroll-padding-top:24px}
/* sin transición de fondo: la web es nocturna siempre y no debe fundirse desde otro tono */
body{
margin:0;min-height:100vh;display:flex;flex-direction:column;
font-family:var(--letra);font-size:16px;line-height:1.55;
background:transparent;color:var(--tinta);
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
main{flex:1 0 auto}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--titular);font-weight:500;line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:normal;color:var(--tinta-suave)}
p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding-left:1.25em}
img,svg,video{max-width:100%}
img{height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
strong,b{font-weight:600}
small{font-size:14px}
hr{border:0;border-top:1px solid var(--linea);margin:32px 0}
[hidden]{display:none !important}
[id]{scroll-margin-top:24px}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.cta:focus-visible,.btn:focus-visible,.dna-verpremio:focus-visible,.nav-boton:focus-visible,.dna-sino button:focus-visible,.dna-abcd button:focus-visible,.dna-rank button:focus-visible,.dna-img-card:focus-visible{outline-color:var(--texto)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
::selection{background:var(--tinta);color:var(--papel)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--nilo)}
/* Enlaces dentro de texto corrido: subrayado fino */
p a,li p a,.caja a,.creditos-lista a,.guia-cuerpo a,.legal a,.prosa a,.pie-legal a{
text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;
text-decoration-color:var(--linea-media);
}
@media (hover:hover) and (pointer:fine){p a:hover,.caja a:hover,.creditos-lista a:hover,.guia-cuerpo a:hover,.legal a:hover,.prosa a:hover,.pie-legal a:hover{text-decoration-color:currentColor}}
/* ============================================================
01 Tipografía y utilidades
============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{
position:absolute;left:-9999px;top:12px;z-index:100;
padding:10px 16px;background:var(--tinta);color:var(--papel);
font-size:15px;border-radius:999px;
}
.saltar:focus{left:12px}
/* Etiqueta de sección: en cursiva y a tamaño de lectura, como una anotación
al margen, no como un rótulo de panel */
.kicker{
display:flex;align-items:center;gap:10px;
font-family:var(--letra);font-style:normal;font-weight:600;font-size:15px;line-height:1.4;
letter-spacing:.01em;text-transform:none;color:var(--texto-suave);
margin:0;
}
.kicker::before{content:"";flex:none;width:18px;height:1px;background:var(--linea-media)}
.kicker a{letter-spacing:inherit}
.seccion-cabecera .kicker{justify-content:flex-end}
.avatar-card .kicker,.revelado .kicker{justify-content:center}
.entradilla{
font-family:var(--titular);font-weight:400;font-size:clamp(22px,2.6vw,28px);line-height:1.32;
color:var(--texto-suave);
max-width:640px;
}
.nota{font-size:14px;line-height:1.5;color:var(--texto-suave)}
.nota-cta{margin-top:14px;font-size:14px;color:var(--texto-suave)}
/* Enlace con subrayado que crece (uso en enlaces de sección, "Ver los cinco viajes"…) */
.enlace{
position:relative;display:inline-block;padding-bottom:2px;
border-bottom:1px solid var(--linea-suave);
color:inherit;text-decoration:none;
}
.enlace::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
background:currentColor;transform:scaleX(0);transform-origin:left;
}
.enlace:focus-visible::after{transform:scaleX(1)}@media (hover:hover) and (pointer:fine){.enlace:hover::after{transform:scaleX(1)}}
/* Un .enlace dentro de texto corrido no lleva además el subrayado de texto */
p a.enlace,.caja a.enlace,.creditos-lista a.enlace,.guia-cuerpo a.enlace,.legal a.enlace,.legal a.cta,.prosa a.enlace,.pie-legal a.enlace,.consentimiento a.enlace{text-decoration:none}
.seccion-pie{margin-top:36px}
/* ============================================================
02 Botones
============================================================ */
.cta,.btn,.dna-verpremio{
display:inline-flex;align-items:center;justify-content:center;gap:12px;
padding:17px 28px;border-radius:999px;border:1px solid transparent;
background:var(--boton);color:var(--boton-texto);
font-family:var(--letra);font-size:16px;font-weight:600;line-height:1.2;
text-align:center;text-decoration:none;cursor:pointer;
-webkit-appearance:none;appearance:none;
}
@media (hover:hover) and (pointer:fine){.cta:hover,.btn:hover{filter:brightness(1.08)}}
.cta--nav{padding:10px 18px;font-size:15px}
.cta--secundario,.btn,.dna-verpremio{
background:transparent;color:inherit;border-color:var(--linea-tono);
}
@media (hover:hover) and (pointer:fine){.cta--secundario:hover,.btn:hover,.dna-verpremio:hover{filter:none;border-color:currentColor}}
.cta[disabled],.btn[disabled]{opacity:.4;cursor:not-allowed;filter:none}
/* ============================================================
03 Maquetación
============================================================ */
.wrap{width:100%;max-width:1180px;margin-left:auto;margin-right:auto;padding-left:44px;padding-right:44px}
.seccion{margin-top:clamp(64px,9vw,120px);margin-bottom:clamp(64px,9vw,120px)}
main > .seccion:first-child,main > .cabecera-pagina + .seccion{margin-top:clamp(40px,6vw,72px)}
.seccion-cabecera{
display:grid;grid-template-columns:1fr auto;gap:12px 40px;align-items:baseline;
border-top:1px solid var(--linea);padding-top:22px;
margin-bottom:clamp(32px,5vw,56px);
}
.seccion-cabecera h2{
font-size:clamp(30px,4vw,44px);font-weight:400;line-height:1.08;letter-spacing:-.015em;
}
.seccion-cabecera .kicker{margin:0}
.seccion > .entradilla,.seccion > .texto{margin-bottom:clamp(28px,4vw,44px)}
.seccion .texto{max-width:64ch}
.cabecera-pagina{padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(24px,4vw,40px)}
.cabecera-pagina .kicker{margin-bottom:22px}
.cabecera-pagina h1{
font-size:clamp(44px,7vw,84px);font-weight:400;line-height:.98;letter-spacing:-.03em;
max-width:14em;
}
.cabecera-pagina h1 em{font-style:italic;font-weight:400}
.cabecera-pagina .entradilla{margin-top:28px}
.cabecera-pagina .cta{margin-top:32px}
.cabecera-pagina .cota-mini{margin-top:32px}
/* ============================================================
04 Marca: logotipo, símbolo, huellas
============================================================ */
.marca{
display:inline-flex;align-items:center;gap:.32em;font-family:var(--titular);font-weight:600;line-height:1;
letter-spacing:-.02em;color:inherit;text-decoration:none;white-space:nowrap;
}
.marca .marca-simbolo{width:1.15em;height:1.15em;flex:none;display:block}
html[data-tono="noche"] .marca .marca-simbolo{content:url("assets/nausika-simbolo-noche.svg")}
.marca em,.marca .z{font-style:normal;font-weight:inherit}
svg.marca-cero,svg.huella{display:block;color:inherit}
.marca-cero path,.huella path{fill:none;stroke:currentColor;vector-effect:non-scaling-stroke}
.marca-cero{width:48px;height:60px}
.huella{width:120px;height:120px}
.huella--grande{width:220px;height:220px}
.huella--mini{width:72px;height:72px}
/* Relieve pequeño por destino: bandas rellenas de día */
.relieve-mini{display:block;width:56px;height:56px;flex:none}
.viaje .relieve-mini{width:44px;height:44px}
.viaje-ficha .relieve-mini{width:88px;height:88px;margin:0 0 18px}
/* La cota, clavada en el relieve del destino como una etiqueta en el mapa */
.mapa-cota{position:relative;display:inline-block;margin:4px 0 14px;padding-right:150px}
.mapa-cota .relieve-mini{width:150px;height:150px;margin:0}
.mapa-cota .cota-mini{position:absolute;left:112px;bottom:14px;margin:0;padding:8px 12px 8px 14px;background:var(--hoja);border-left:2px solid var(--ocre);white-space:nowrap}
.mapa-cota .cota-mini::before{content:"";position:absolute;left:-2px;bottom:-1px;width:2px;height:22px;background:var(--ocre)}
/* La huella como montaña (canvas) */
.huella-3d{display:block;width:min(360px,82vw);height:min(360px,82vw);margin:0 auto}
.avatar-figura{position:relative}
/* Tu propio relieve, tenue, detrás de la tarjeta */
[data-pagina-huella]{position:relative}
.huella-fondo{position:absolute;left:50%;top:-60px;width:min(1100px,150vw);height:auto;transform:translateX(-50%);opacity:.11;pointer-events:none;z-index:0}
[data-pagina-huella] > :not(.huella-fondo){position:relative;z-index:1}
/* La esquina de la cota, fija, en viajes.html */
/* Va sobre el contenido, así que lleva su propia hoja detrás para no pisarse con el texto */
.esquina.esquina--fija{position:fixed;right:44px;bottom:36px;z-index:4;color:var(--tinta-suave);opacity:0;pointer-events:none;padding:12px 16px 14px;background:var(--hoja);box-shadow:0 0 0 1px var(--hoja-borde),0 18px 30px -20px var(--sombra)}
.esquina--fija .cota,.esquina--fija .coord{color:var(--tinta)}
.esquina.esquina--fija.is-on{opacity:1}
.viaje-nombre{display:flex;align-items:center;gap:16px}
.cta .marca-cero{width:12px;height:15px;margin-right:2px;flex:none}
.cta--nav .marca-cero path{stroke-width:2.2}
/* ============================================================
05 Cabecera y navegación
============================================================ */
.cabecera{position:relative;z-index:3;color:var(--texto)}
body:not(.portada) .cabecera{background:var(--hoja);border-bottom:1px solid var(--hoja-borde)}
/* Icono de día / noche: un círculo con su terminador */
.tono-boton{
width:38px;height:38px;flex:none;margin-left:4px;
display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--linea-tono);border-radius:999px;color:inherit;background:transparent;
}
.tono-boton svg{width:18px;height:18px;display:block}
.tono-boton .mitad{transform-box:fill-box;transform-origin:center}
html[data-tono="noche"] .tono-boton .mitad{transform:scaleX(-1)}
@media (hover:hover) and (pointer:fine){.tono-boton:hover{border-color:currentColor}}
.nav{
max-width:1180px;margin:0 auto;padding:26px 44px;
display:flex;align-items:center;gap:32px;font-size:15px;
}
.nav .marca{
font-size:24px;font-weight:500;letter-spacing:-.015em;
}
.nav-lista{display:flex;gap:32px;list-style:none;margin:0 0 0 auto;padding:0;color:var(--texto-suave)}
.nav-lista a{position:relative;display:inline-block;padding:2px 0;color:inherit}
.nav-lista a::after{
content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
background:currentColor;transform:scaleX(0);transform-origin:left;
}
.nav-lista a:focus-visible,.nav-lista a[aria-current="page"]{color:var(--texto)}@media (hover:hover) and (pointer:fine){.nav-lista a:hover{color:var(--texto)}}
.nav-lista a[aria-current="page"]::after{transform:scaleX(1)}@media (hover:hover) and (pointer:fine){.nav-lista a:hover::after{transform:scaleX(1)}}
.nav-boton{
display:none;align-items:center;padding:8px 14px;
border:1px solid var(--linea-tono);border-radius:999px;
font-size:15px;color:inherit;background:transparent;
}
.nav-boton[aria-expanded="true"]{background:var(--texto);color:var(--fondo);border-color:var(--texto)}
/* ============================================================
06 Portada: .web, relieve, hero, esquina
============================================================ */
.web{
position:relative;
min-height:clamp(640px,92vh,900px);
display:flex;flex-direction:column;
color:var(--texto);
}
/* El terreno: un solo relieve fijo detrás de toda la página. Arriba la cima, abajo la llanura. */
.terreno{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--papel)}
.terreno svg{position:absolute;left:0;top:0;width:100%;max-width:none;height:auto;min-height:175vh;display:block;will-change:transform}
/* Las bandas no se promueven a capa propia: 34 capas a pantalla completa en móvil era memoria de GPU sin beneficio; el svg entero sí. */
.terreno path{transition:fill .9s cubic-bezier(.2,0,.1,1)}
.terreno [data-fondo]{transition:fill .9s cubic-bezier(.2,0,.1,1)}
.terreno-luz{
position:absolute;inset:0;opacity:0;
background:radial-gradient(760px circle at var(--lx,60%) var(--ly,35%),var(--luz),transparent 65%);
mix-blend-mode:soft-light;
}
.terreno.is-luz .terreno-luz{opacity:1}
/* Hojas de papel sobre el terreno */
body.portada main{position:relative;z-index:1;background:transparent}
body.portada main > .seccion{
position:relative;background:var(--hoja);border:0;
padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(36px,5vw,64px);
/* Capas de papel recortado, como la huella en relieve: dos cantos por
debajo y una sombra larga sobre el terreno. Nada de marco fino. */
box-shadow:
0 0 0 1px var(--hoja-borde),
0 12px 0 -5px var(--capa-1),
0 24px 0 -10px var(--capa-2),
0 60px 90px -40px var(--sombra);
}
body:not(.portada) main{
position:relative;z-index:1;
width:min(1180px,calc(100% - 32px));margin:24px auto 0;
background:var(--hoja);border:1px solid var(--hoja-borde);
box-shadow:0 40px 80px -40px var(--sombra);
}
.hero{
position:relative;z-index:2;
width:100%;max-width:1180px;margin:auto auto 0;
padding:40px 44px 60px;
}
.hero > *{max-width:760px}
.hero-titulo{
font-family:var(--titular);font-weight:400;
font-size:clamp(88px,14vw,190px);line-height:.86;letter-spacing:-.035em;
margin:0;
}
.hero-titulo em{font-style:italic;font-weight:400}
.lema{
font-family:var(--titular);font-weight:400;font-size:clamp(22px,2.7vw,32px);line-height:1.28;
margin:30px 0 0;max-width:560px;color:var(--texto);
}
.lema em{font-style:italic}
.hero .cta{margin-top:40px}
.hero .nota-cta{margin-top:14px}
.esquina{
position:absolute;z-index:2;
right:max(44px,calc((100% - 1180px) / 2 + 44px));bottom:60px;
text-align:right;font-family:var(--titular);font-size:15px;line-height:1.45;
color:var(--texto-suave);
}
.esquina span{display:block}
.esquina .coord{color:var(--texto);font-size:17px}
.esquina .cota{
font-size:52px;line-height:1;color:var(--texto);margin-bottom:6px;font-weight:400;
font-variant-numeric:tabular-nums;
}
.esquina .cota small{font-size:16px;margin-left:4px;color:var(--texto-suave)}
/* ============================================================
07 Portada: método, viajes, huellas, tarjetas, contacto
============================================================ */
/* Tres pasos */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.paso{border-top:1px solid var(--linea);padding-top:20px}
.paso-num{
display:block;font-family:var(--titular);font-size:15px;color:var(--tinta-suave);
font-variant-numeric:tabular-nums;
}
.paso h3{font-size:24px;line-height:1.2;margin:28px 0 12px;}
.paso p{color:var(--tinta-suave)}
/* Lista de viajes */
.viajes-lista{border-top:1px solid var(--linea);list-style:none;margin:0;padding:0}
.viaje{
display:grid;grid-template-columns:auto 1fr auto auto;grid-template-areas:"foto nombre meta cota";
gap:6px 28px;align-items:center;
padding:16px 0;border-bottom:1px solid var(--linea);color:inherit;
}
/* Una miniatura de la foto por fila, como una copia pequeña sobre la mesa */
.viaje-foto{grid-area:foto;display:block;width:64px;height:80px;overflow:hidden;background:var(--papel-oscuro);box-shadow:0 0 0 1px var(--hoja-borde),0 6px 14px -8px var(--sombra)}
.viaje-foto img{display:block;width:100%;height:100%;object-fit:cover}
.viaje-nombre{grid-area:nombre}
.viaje-meta{grid-area:meta}
.viaje-cota{grid-area:cota}
@media (max-width:820px){
.viaje{grid-template-columns:auto 1fr auto;grid-template-areas:"foto nombre cota" "foto meta meta";gap:4px 16px}
.viaje-foto{width:56px;height:70px}
}
.viaje-nombre{
font-family:var(--titular);font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1.05;
letter-spacing:-.02em;
}
.viaje-meta{font-size:15px;color:var(--tinta-suave)}
/* La hora del sitio, no su altitud: "Luxor, 6:00" */
.viaje-cota{
font-family:var(--titular);font-style:italic;font-size:17px;font-weight:400;color:var(--tinta-suave);
font-variant-numeric:tabular-nums;
text-align:right;white-space:nowrap;
}
a.viaje:focus-visible .viaje-nombre{color:var(--boton)}@media (hover:hover) and (pointer:fine){a.viaje:hover .viaje-nombre{color:var(--boton)}}
/* Ruta de muestra en la portada: tres días de una ruta real, con sus horas */
.muestra-ruta{max-width:900px}
.muestra-ruta-sub{
font-family:var(--titular);font-weight:400;font-size:clamp(18px,2.1vw,22px);line-height:1.4;
max-width:58ch;
}
/* Tres postales bajo el hero: copias sobre la mesa, cada una con su hora */
.postales{position:relative;margin-top:clamp(28px,4vw,52px)}
.postales-lista{list-style:none;margin:0;padding:8px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3.4vw,40px);align-items:end}
.postal figure{
margin:0;padding:10px 10px 14px;background:var(--hoja);
box-shadow:0 0 0 1px var(--hoja-borde),0 30px 50px -30px var(--sombra);
transform:rotate(-1.1deg);
}
.postal:nth-child(2) figure{transform:rotate(.8deg) translateY(-14px)}
.postal:nth-child(3) figure{transform:rotate(-.5deg)}
.postal img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--papel-oscuro)}
.postal figcaption{
display:flex;gap:10px;align-items:baseline;margin-top:12px;
font-family:var(--titular);font-size:15px;line-height:1.35;color:var(--tinta-suave);
}
.postal figcaption b{flex:none;font-weight:400;font-size:24px;line-height:1;color:var(--tinta);font-variant-numeric:tabular-nums;}
.postal figcaption span{font-style:italic}
/* Lo que hay detrás, dicho en una frase y no en un panel de cifras */
.pasos-pie{margin-top:40px;font-family:var(--titular);font-weight:400;font-size:clamp(19px,2.2vw,23px);line-height:1.35;max-width:62ch;}
.pasos-pie em{font-style:italic;font-weight:400}
/* La hora vacía: dos horas grandes, una buena y otra mala */
.horas-contraste{display:grid;grid-template-columns:1fr 1fr;gap:32px 48px}
.hora-bloque{border-top:1px solid var(--tinta);padding-top:18px}
.hora-bloque.es-tarde{border-top-color:var(--linea);color:var(--tinta-suave)}
.hora-grande{
display:block;font-family:var(--titular);font-weight:400;font-size:clamp(64px,9vw,120px);line-height:.95;letter-spacing:-.03em;
font-variant-numeric:tabular-nums;
}
.hora-bloque.es-tarde .hora-grande{}
.hora-sitio{margin-top:16px;font-family:var(--titular);font-size:19px;line-height:1.3;}
.hora-bloque p+p{margin-top:8px;font-size:15px;line-height:1.55;max-width:38ch}
.hora-bloque.es-tarde p{color:var(--tinta-suave)}
.horas-pie{margin-top:32px;font-family:var(--titular);font-weight:400;font-size:clamp(19px,2.2vw,23px);line-height:1.35;max-width:60ch;}
/* La muestra de la portada usa el explorador del itinerario, con tres hojas */
.explorador--muestra{margin-top:24px;padding-top:0;border-top:0}
.explorador--muestra .dia-hoja[hidden]{display:none}
.muestra-ruta .demo-days{margin-top:28px}
.muestra-ruta-pie{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;font-size:15px;color:var(--tinta-suave)}
.muestra-ruta-pie span{flex:1 1 34ch;max-width:52ch}
/* Fila de huellas de ejemplo */
.huellas-fila{
display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:32px 24px;
list-style:none;margin:0;padding:0;
}
.huellas-fila > *{text-align:center;color:inherit}
.huellas-fila .huella{margin:0 auto}
.huellas-fila figcaption,.huellas-fila .huella-nombre{
display:block;margin-top:12px;font-family:var(--titular);font-size:17px;line-height:1.3;
}
@media (hover:hover) and (pointer:fine){.huellas-fila a:hover .huella{color:var(--nilo)}}
/* Tarjetas de guías */
.tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.tarjeta .marco{aspect-ratio:4/3}
.tarjeta h3{font-size:22px;line-height:1.25;margin:18px 0 8px;}
.tarjeta p{font-size:15px;color:var(--tinta-suave)}
@media (hover:hover) and (pointer:fine){.tarjeta h3 a:hover{color:var(--boton)}}
/* Tarjeta ancha: la guía larga cuando va sola en .tarjetas (guias.html): foto a la izquierda, texto a la derecha */
.tarjeta--ancha{grid-column:1 / -1;display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:start}
.tarjeta--ancha .marco{aspect-ratio:16/10}
.tarjeta--ancha h3{margin-top:0;font-size:clamp(24px,2.8vw,30px);}
.tarjeta--ancha p + p{margin-top:12px}
/* Contacto */
.contacto{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start}
.contacto .texto p + p{margin-top:16px}
.formulario{display:grid;gap:20px;max-width:640px}
.campo{display:grid;gap:8px}
.campo > span,.campo > label{font-size:14px;font-weight:500}
.campo input,.campo textarea,.lead-grid input,.lead-grid textarea,.dna-abierta textarea{
display:block;width:100%;padding:13px 14px;
border:1px solid var(--linea-control);border-radius:0;background:transparent;color:inherit;
font-family:var(--letra);font-size:16px;line-height:1.4;
-webkit-appearance:none;appearance:none;
}
.campo textarea,.lead-grid textarea{min-height:140px;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder,.lead-grid input::placeholder,.lead-grid textarea::placeholder,.dna-abierta textarea::placeholder{color:var(--tinta-suave)}
.campo input:focus,.campo textarea:focus,.lead-grid input:focus,.lead-grid textarea:focus,.dna-abierta textarea:focus{outline:2px solid currentColor;outline-offset:2px;border-color:var(--tinta)}
.consentimiento{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--tinta-suave)}
.consentimiento input{margin:3px 0 0;flex:none;width:16px;height:16px}
.formulario .cta{justify-self:start}
.formulario .nota{margin-top:-6px}
/* ============================================================
08 Fotos y cotas
============================================================ */
.marco{display:block;overflow:hidden;border:1px solid var(--linea);background:var(--papel-oscuro)}
.marco img{display:block;width:100%;height:100%;object-fit:cover}
.figura{margin:2.4em 0}
.figura .marco img{height:auto}
.figura figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--tinta-suave)}
.cota-mini{display:block;font-family:var(--titular);font-size:14px;line-height:1.45;color:var(--tinta-suave);}
.cota-mini span{display:block}
.cota-mini .cota{
font-size:34px;line-height:1;font-weight:400;color:var(--tinta);margin-bottom:4px;
font-variant-numeric:tabular-nums;
}
.cota-mini .cota small{font-size:14px;margin-left:3px;color:var(--tinta-suave)}
.cota-mini .coord{color:var(--tinta);font-size:15px}
/* ============================================================
09 viajes.html
============================================================ */
.viaje-ficha{
display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start;
padding:clamp(48px,7vw,96px) 0;border-top:1px solid var(--linea);
}
.viaje-ficha:first-of-type{border-top:0;padding-top:clamp(24px,4vw,48px)}
.viaje-ficha .marco{aspect-ratio:4/5}
.viaje-ficha h2{
font-size:clamp(40px,5vw,64px);font-weight:400;line-height:1;letter-spacing:-.025em;
margin:6px 0 16px;
}
.viaje-etiqueta{font-family:var(--titular);font-size:15px;color:var(--tinta-suave);}
.viaje-ficha > div > .cota-mini{margin:24px 0}
.viaje-ficha .texto p + p{margin-top:14px}
.viaje-temporada{margin-top:18px;font-size:14px;color:var(--tinta-suave)}
.viaje-ficha h3{font-size:17px;margin:32px 0 10px;}
.viaje-zonas{columns:2;column-gap:32px;list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.viaje-zonas li{padding:8px 0;border-bottom:1px solid var(--linea);font-size:15px;break-inside:avoid}
.viaje-ficha .cta{margin-top:32px}
/* ============================================================
10 perfiles.html
============================================================ */
.galeria{
display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
gap:1px;background:var(--linea);border:1px solid var(--linea);
}
.perfil-card{background:var(--papel);padding:32px 28px 30px;display:flex;flex-direction:column}
.perfil-card .huella{width:104px;height:104px}
.perfil-card h3{font-size:24px;line-height:1.15;margin:22px 0 8px;}
.perfil-card p{font-size:15px;color:var(--tinta-suave)}
.perfil-ejes{margin-top:auto;padding-top:14px;font-size:13.5px;color:var(--tinta-suave)}
.perfil-card p + .perfil-ejes{margin-top:18px;border-top:1px solid var(--linea)}
/* ============================================================
11 Guías, prosa, legal, créditos
============================================================ */
.guias-lista{border-top:1px solid var(--linea)}
.guia{border-bottom:1px solid var(--linea)}
.guia summary{
list-style:none;cursor:pointer;
display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
padding:24px 0;
}
.guia summary::-webkit-details-marker{display:none}
.guia summary::after{
content:"+";flex:none;font-family:var(--titular);font-weight:400;font-size:30px;line-height:1;
color:var(--tinta-suave);margin-top:2px;
}
.guia[open] summary::after{content:"−"}
@media (hover:hover) and (pointer:fine){.guia summary:hover h3{color:var(--boton)}}
.guia summary h3,.guia summary .titulo{
font-family:var(--titular);font-weight:400;font-size:clamp(22px,2.6vw,28px);line-height:1.2;margin:0;
}
.ojo{display:block;margin-top:6px;font-size:15px;color:var(--tinta-suave);font-family:var(--letra)}
.guia-cuerpo{padding:0 0 32px;max-width:68ch}
.guia-cuerpo p{margin:0 0 1em}
.guia-cuerpo h4{font-size:18px;margin:1.6em 0 .5em;}
.guia-cuerpo ul,.guia-cuerpo ol{margin:0 0 1em;padding-left:1.25em}
.guia-cuerpo li{margin:.3em 0}
.guia-cuerpo li::marker{color:var(--tinta-suave)}
.guia-cuerpo > :last-child{margin-bottom:0}
/* Prosa larga (guia-egipto.html) */
.prosa{max-width:68ch}
.prosa p{font-size:18px;line-height:1.6;margin:0 0 1.2em}
.prosa h2{font-size:clamp(28px,3.5vw,38px);line-height:1.12;margin:2.2em 0 .7em;letter-spacing:-.01em;}
.prosa h3{font-size:24px;margin:1.8em 0 .6em;}
.prosa ul,.prosa ol{margin:0 0 1.2em;padding-left:1.25em;font-size:18px;line-height:1.6}
.prosa li{margin:.3em 0}
.prosa li::marker{color:var(--tinta-suave)}
.prosa > :first-child{margin-top:0}
.prosa-cita{
font-family:var(--titular);font-style:italic;font-weight:400;
font-size:clamp(24px,3vw,32px);line-height:1.3;
margin:2em 0;padding-left:24px;border-left:1px solid var(--linea);
}
.prosa-cita p{font:inherit;margin:0}
.prosa-cita cite{display:block;margin-top:12px;font-family:var(--letra);font-style:normal;font-size:14px;color:var(--tinta-suave)}
.prosa .figura{margin:2.4em 0}
.prosa .cta{margin-top:12px}
.caja{border:1px solid var(--linea);padding:28px 32px;margin:2.4em 0}
.caja h3,.caja h4{font-size:22px;margin:0 0 14px;}
.caja p{font-size:16px;margin:0 0 .8em}
.caja ul,.caja ol{margin:0;padding-left:1.2em;font-size:16px}
.caja li{margin:.35em 0}
.caja > :last-child{margin-bottom:0}
/* Legal */
.legal{max-width:760px;padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(40px,6vw,72px)}
.legal h1{font-size:clamp(40px,6vw,64px);font-weight:400;line-height:1;letter-spacing:-.03em;margin-bottom:.6em}
.legal h2{font-size:26px;margin:2em 0 .6em;}
.legal h3{font-size:20px;margin:1.6em 0 .5em;}
.legal p{margin:0 0 1em}
.legal ul,.legal ol{margin:0 0 1em;padding-left:1.25em}
.legal li{margin:.3em 0}
.legal .nota{margin-top:2em;padding-top:1em;border-top:1px solid var(--linea)}
.pendiente{background:rgba(183,145,63,.22);padding:0 4px;border-radius:2px}
/* Créditos fotográficos */
.creditos-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.creditos-lista li{
display:flex;flex-wrap:wrap;gap:4px 24px;align-items:baseline;
padding:14px 0;border-bottom:1px solid var(--linea);font-size:15px;
}
.creditos-lista li > :first-child{flex:0 0 220px;font-weight:500}
.creditos-lista li > span:last-child{color:var(--tinta-suave)}
.creditos-lista small{color:var(--tinta-suave)}
/* Dentro de .legal (creditos.html): a ras del texto, sin sangría; filas pegadas (solo su padding) */
.legal .creditos-lista{margin:0;padding-left:0}
.legal .creditos-lista li{margin:0}
/* ============================================================
12 Cuestionario
============================================================ */
.dna{max-width:900px}
.dna-intro{border:1px solid var(--linea);padding:clamp(32px,5vw,56px)}
.dna-intro h2{font-size:clamp(26px,3.4vw,36px);line-height:1.15;margin:14px 0 18px;}
.dna-intro p{max-width:60ch}
.dna-intro p + p{margin-top:12px}
.dna-intro .cta{margin-top:28px}
.dna-intro .dna-verpremio{margin:28px 0 0 12px}
.dna-intro .nota{margin-top:16px}
.dna-wizard{padding-top:8px}
.dna-top{display:flex;align-items:center;gap:20px;margin-bottom:36px}
.dna-count{font-family:var(--titular);font-size:15px;color:var(--tinta-suave);white-space:nowrap;font-variant-numeric:tabular-nums;}
.dna-bar{flex:1;height:2px;background:var(--linea);overflow:hidden}
.dna-bar i{display:block;height:100%;width:0;background:var(--tinta)}
.dna-stage{position:relative;min-height:360px}
.dna-screen{position:relative}
.dna-screen.is-out{pointer-events:none}
.dna-screen h2{
font-size:clamp(24px,3.2vw,34px);line-height:1.15;margin:0 0 10px;
max-width:24em;
}
.dna-sub{color:var(--tinta-suave);margin:0 0 28px;max-width:60ch}
.dna-screen h2 + *:not(.dna-sub){margin-top:28px}
.dna-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:36px;padding-top:20px;border-top:1px solid var(--linea)}
.dna-back{padding:8px 0;color:var(--tinta-suave)}
@media (hover:hover) and (pointer:fine){.dna-back:hover{color:var(--tinta)}}
.dna-back[disabled]{opacity:0;pointer-events:none}
.dna-next[disabled]{opacity:.4;cursor:not-allowed;filter:none}
/* Reparto: cinco filas con cuatro niveles (Nada / Algo / Mucho / Lo principal) */
.reparto-fila{display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:center;padding:16px 0;border-top:1px solid var(--linea)}
.reparto-fila:last-child{border-bottom:1px solid var(--linea)}
.reparto-info strong{display:block;font-weight:500}
.reparto-info small{display:block;font-size:14px;color:var(--tinta-suave)}
.reparto-niveles{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.reparto-nivel{
padding:8px 14px;border:1px solid var(--linea-control);border-radius:999px;
font-size:14px;line-height:1.3;background:transparent;color:inherit;
}
@media (hover:hover) and (pointer:fine){.reparto-nivel:hover{border-color:var(--tinta-suave)}}
.reparto-nivel.is-sel{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.reparto-nivel:focus-visible{outline-color:var(--texto)}
.dna-slider-wrap .q-hint{margin-top:18px}
.reparto-track{grid-column:1 / -1;height:4px;background:var(--linea);overflow:hidden}
.eje-fila.es-sin-dato .nombre,.eje-fila.es-sin-dato .num{color:var(--tinta-suave)}
.eje-fila.es-sin-dato .eje-track{opacity:.5}
.reparto-track > i{display:block;height:100%;width:0;background:var(--eje-color,var(--nilo))}
/* Slider de un eje */
.dna-slider-wrap{padding:8px 0 4px}
.dna-slider-val{
font-family:var(--titular);font-weight:400;font-size:clamp(56px,8vw,88px);line-height:1;
margin-bottom:22px;font-variant-numeric:tabular-nums;
}
.dna-polos{display:flex;justify-content:space-between;gap:24px;margin-top:16px;font-size:14px;color:var(--tinta-suave)}
.dna-polos span:last-child{text-align:right}
/* Slider de siete posiciones (v5): la etiqueta manda, el número desaparece */
.dna-slider-wrap--pasos .dna-slider-val{
font-size:clamp(26px,3.4vw,40px);line-height:1.15;margin-bottom:26px;
min-height:2.3em;display:flex;align-items:flex-end;
font-variant-numeric:normal;text-wrap:balance;
}
.dna-pasos{position:relative;display:flex;justify-content:space-between;align-items:center;padding:6px 0}
.dna-pasos-linea{
position:absolute;left:20px;right:20px;top:50%;height:4px;transform:translateY(-50%);
background:var(--linea);border-radius:2px;overflow:hidden;
}
.dna-pasos-linea > i{display:block;height:100%;width:0;background:var(--eje-color,var(--nilo))}
.dna-paso{
position:relative;z-index:1;flex:0 0 auto;width:40px;height:40px;padding:0;border:0;
background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.dna-paso::before{
content:"";width:13px;height:13px;border-radius:50%;
background:var(--papel);border:1px solid var(--linea-control);
}
@media (hover:hover) and (pointer:fine){.dna-paso:hover::before{border-color:var(--eje-color,var(--nilo))}}
.dna-paso.is-hecho::before{background:var(--eje-color,var(--nilo));border-color:var(--eje-color,var(--nilo))}
.dna-paso.is-sel::before{
width:26px;height:26px;background:var(--eje-color,var(--nilo));
border:3px solid var(--papel);box-shadow:0 0 0 1px var(--eje-color,var(--nilo));
}
.dna-paso:focus-visible{outline:2px solid var(--texto);outline-offset:-4px;border-radius:50%}
/* Telemetría (huella.html?debug=1): tabla de trabajo, no pieza de marca */
.telemetria{border-top:1px solid var(--linea);margin-top:48px;padding-top:32px}
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla-tele{width:100%;border-collapse:collapse;font-size:14px;margin-top:16px;min-width:460px}
.tabla-tele th,.tabla-tele td{padding:8px 12px;border-bottom:1px solid var(--linea);text-align:left;white-space:nowrap}
.tabla-tele th{font-weight:500;color:var(--tinta-suave)}
.tabla-tele .num{text-align:right;font-variant-numeric:tabular-nums}
.tabla-tele .barra{width:34%;min-width:120px}
.tabla-tele .barra > i{display:block;height:6px;background:var(--nilo);border-radius:3px}
.tabla-tele tr.es-abandono td{color:var(--texto);font-weight:500}
.tabla-tele tr.es-abandono td:first-child::after{content:" ← se fue aquí";font-weight:400;color:var(--tinta-suave)}
/* Pantalla puente entre capítulos: una frase grande y un botón. Nada más */
.dna-puente{
font-family:var(--titular);font-weight:400;font-size:clamp(28px,4vw,46px);line-height:1.15;
margin:6px 0 0;max-width:22ch;text-wrap:balance;
}
.dna-puente + .dna-sub{margin-top:18px}
.dna-puente-nav{margin-top:32px}
/* Aviso del reparto: solo ocupa sitio cuando tiene algo que decir */
.dna-aviso:empty{display:none}
.dna-aviso.is-on{
margin-top:18px;padding:12px 14px;border-left:3px solid var(--eje-color,var(--nilo));
background:color-mix(in srgb,var(--linea) 45%,transparent);color:var(--texto);
}
/* Elección de imágenes */
.dna-imgs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dna-img-card{
position:relative;display:block;width:100%;padding:0;text-align:left;
border:1px solid var(--linea);background:var(--papel);color:inherit;
}
@media (hover:hover) and (pointer:fine){.dna-img-card:hover{border-color:var(--tinta-suave)}}
.dna-img-card .frame{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--papel-oscuro)}
.dna-img-card img{display:block;width:100%;height:100%;object-fit:cover}
.dna-img-card figcaption,.dna-img-card .pie-img{display:block;padding:14px 16px;font-size:15px;line-height:1.4}
.dna-img-card .sello{
position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;
background:var(--tinta);color:var(--papel);
display:flex;align-items:center;justify-content:center;font-size:14px;
opacity:0;
}
.dna-img-card.is-sel{border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)}
.dna-img-card.is-sel .sello{opacity:1}
/* Sí / No */
.dna-sino{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.dna-sino button{
padding:28px 20px;border:1px solid var(--linea-control);background:transparent;color:inherit;
font-family:var(--titular);font-weight:400;font-size:28px;line-height:1;
}
@media (hover:hover) and (pointer:fine){.dna-sino button:hover{border-color:var(--tinta)}}
.dna-sino button.is-sel{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
/* Escenarios A/B/C/D */
.dna-abcd{display:grid;gap:10px}
.dna-abcd button{
display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:center;
width:100%;padding:16px 18px;text-align:left;line-height:1.4;
border:1px solid var(--linea-control);background:transparent;color:inherit;
}
.dna-abcd .letra{
width:36px;height:36px;border:1px solid var(--linea-control);border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:var(--titular);font-size:17px;line-height:1;
}
@media (hover:hover) and (pointer:fine){.dna-abcd button:hover{border-color:var(--tinta)}}
.dna-abcd button.is-sel{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.dna-abcd button.is-sel .letra{background:var(--papel);color:var(--tinta);border-color:var(--papel)}
/* Ordenar */
.dna-rank{display:grid;gap:10px}
.dna-rank button{
display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:center;
width:100%;padding:14px 18px;text-align:left;line-height:1.4;
border:1px solid var(--linea-control);background:transparent;color:inherit;
}
.dna-rank .pos{
width:36px;height:36px;border:1px solid var(--linea-control);border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:var(--titular);font-size:18px;line-height:1;font-variant-numeric:tabular-nums;
color:var(--tinta-suave);
}
@media (hover:hover) and (pointer:fine){.dna-rank button:hover{border-color:var(--tinta)}}
.dna-rank button.is-ranked{border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)}
.dna-rank button.is-ranked .pos{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.dna-destinos button{grid-template-columns:1fr;gap:2px}
.dna-destinos b{font-family:var(--titular);font-weight:400;font-size:20px;line-height:1.2;}
.dna-destinos small{font-size:14px;color:var(--tinta-suave)}
.dna-destinos button.is-sel small{color:inherit;opacity:.8}
.huella-acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
.huella-acciones .nota{flex-basis:100%;margin:0}
.viaje-huella{display:flex;align-items:center;gap:14px;margin-top:24px;font-size:15px;color:var(--tinta-suave)}
.viaje-huella:empty{display:none}
.viaje-huella .huella{width:56px;height:56px;flex:none;color:var(--tinta)}
.itinerarios-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.itinerarios-lista li{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--linea)}
.itinerarios-lista strong{display:block;font-family:var(--titular);font-weight:400;font-size:20px;line-height:1.25;}
.itinerarios-lista .nota{display:block;margin-top:4px}
.itinerario-botones{display:flex;gap:16px;align-items:center}
.itinerario-botones .dna-rank-reset{margin:0}
.itinerario-acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:32px}
.itinerario-acciones .q-hint{flex-basis:100%;margin:0}
.itinerario-acciones .q-hint:empty{display:none}
.dna-rank-reset{
margin-top:16px;font-size:14px;color:var(--tinta-suave);
text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;
}
@media (hover:hover) and (pointer:fine){.dna-rank-reset:hover{color:var(--tinta)}}
/* Nota abierta */
.dna-abierta textarea{min-height:160px;resize:vertical}
/* Brief: quién, cuánto, presupuesto, destino */
.q-group + .q-group{margin-top:32px}
.q-label{display:block;font-weight:500;margin-bottom:12px}
.q-label em{font-style:italic;font-weight:400;color:var(--tinta-suave)}
.q-hint{font-size:14px;line-height:1.5;color:var(--tinta-suave);margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-block}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-block;padding:9px 16px;border:1px solid var(--linea-control);border-radius:999px;font-size:15px;line-height:1.3;cursor:pointer}
@media (hover:hover) and (pointer:fine){.chip:hover span{border-color:var(--tinta-suave)}}
.chip input:checked + span{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.chip input:focus-visible + span{outline:2px solid var(--texto);outline-offset:3px}
.dual{padding:4px 0 8px}
.dual-vals{
display:flex;align-items:baseline;gap:8px;margin-bottom:12px;
font-family:var(--titular);font-weight:400;font-size:28px;line-height:1;
font-variant-numeric:tabular-nums;
}
.dual-vals b{font-weight:400}
.dual-vals span{color:var(--tinta-suave);font-size:20px}
.dual-unidad{font-family:var(--letra);font-size:14px;color:var(--tinta-suave);margin-left:2px}
.dual-track{position:relative;height:32px}
.dual-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;transform:translateY(-50%);background:var(--linea);border-radius:2px}
.dual-track [data-fill]{position:absolute;top:50%;height:4px;transform:translateY(-50%);background:var(--nilo);border-radius:2px;pointer-events:none}
[data-fill]{display:block}
.dual-track input[type="range"]{
-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:100%;
margin:0;background:none;pointer-events:none;outline-offset:6px;
}
.dual-track input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;pointer-events:auto;
width:24px;height:24px;border-radius:50%;
background:var(--nilo);border:3px solid var(--papel);box-shadow:0 0 0 1px var(--nilo);cursor:grab;
}
.dual-track input[type="range"]::-moz-range-thumb{
pointer-events:auto;width:18px;height:18px;border-radius:50%;
background:var(--nilo);border:3px solid var(--papel);box-shadow:0 0 0 1px var(--nilo);cursor:grab;
}
.dual-track input[type="range"]::-moz-range-track{background:none}
/* Con teclado se ve qué tope se mueve: el anillo va en el pulgar, no en la pista */
.dual-track input[type="range"]:focus-visible{outline:0}
.dual-track input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--papel),0 0 0 5px var(--texto)}
.dual-track input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--papel),0 0 0 5px var(--texto)}
.dual-track input[type="range"]:active::-webkit-slider-thumb{cursor:grabbing}
/* ============================================================
13 Resultado
============================================================ */
.dna-result{max-width:900px}
.dna-result:empty{display:none}
.avatar-card{
position:relative;text-align:center;
padding:clamp(32px,5vw,64px) clamp(20px,4vw,48px);
border:1px solid var(--linea);
}
.avatar-card .kicker{margin:0}
.avatar-figura{display:flex;justify-content:center;margin:22px 0 6px;color:var(--tinta)}
.avatar-figura .huella{margin:0 auto}
.avatar-nombre{
font-size:clamp(40px,6vw,64px);font-weight:400;line-height:1;letter-spacing:-.025em;
margin:18px 0 14px;
}
.avatar-gancho{
font-family:var(--titular);font-style:italic;font-weight:400;
font-size:clamp(19px,2.4vw,24px);line-height:1.35;color:var(--tinta-suave);
max-width:46ch;margin:0 auto;
}
.avatar-ejes-mini{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:24px}
.avatar-ejes-mini span{
display:inline-flex;align-items:center;gap:8px;
padding:6px 12px;border:1px solid var(--linea);border-radius:999px;
font-size:13.5px;color:var(--tinta-suave);
}
.avatar-ejes-mini span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--eje-color,var(--nilo));flex:none}
.avatar-share{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.avatar-card .q-hint{margin-top:14px;overflow-wrap:anywhere}
.dna-ejes{border-top:1px solid var(--linea);padding:clamp(24px,4vw,44px) 0 0}
.dna-ejes h3{font-size:24px;line-height:1.2;margin:6px 0 20px;}
.dna-ejes .sep{
font-family:var(--titular);font-size:15px;color:var(--tinta-suave);
margin:24px 0 8px;padding-bottom:8px;border-bottom:1px solid var(--linea);
}
.eje-fila{display:grid;grid-template-columns:minmax(150px,220px) 1fr 3ch;gap:16px;align-items:center;padding:8px 0}
.eje-fila .nombre{font-size:14px;color:var(--tinta-suave)}
.eje-fila .num{font-family:var(--titular);font-size:18px;text-align:right;font-variant-numeric:tabular-nums}
.eje-track{display:block;height:6px;background:var(--linea);overflow:hidden}
/* Dónde encaja la huella: tres destinos y un botón cada uno */
.dna-encaja{border-top:1px solid var(--linea);margin-top:clamp(24px,4vw,44px);padding:clamp(24px,4vw,44px) 0 0}
.dna-encaja h3{font-size:24px;line-height:1.2;margin:6px 0 8px;}
.dna-encaja-sub{color:var(--tinta-suave);margin:0 0 20px;max-width:60ch}
.encaja-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.encaja-item{
display:grid;grid-template-columns:56px 1fr auto auto;gap:16px 20px;align-items:center;
padding:18px 0;border-bottom:1px solid var(--linea);
}
.encaja-item .relieve-mini{width:56px;height:56px;flex:none}
.encaja-texto{display:flex;flex-direction:column;gap:3px;min-width:0}
.encaja-nombre{font-family:var(--titular);font-size:22px;line-height:1.15;}
.encaja-etiqueta{font-size:13.5px;color:var(--tinta-suave)}
.encaja-porque{font-size:13.5px;color:var(--tinta-suave);font-style:italic}
.encaja-cifra{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.encaja-cifra b{font-family:var(--titular);font-weight:400;font-size:30px;font-variant-numeric:tabular-nums}
.encaja-cifra small{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave);margin-top:4px}
.encaja-item .cta{white-space:nowrap}
.dna-encaja .q-hint{margin-top:18px}
@media (max-width:820px){
.encaja-item{grid-template-columns:48px 1fr auto}
.encaja-item .relieve-mini{width:48px;height:48px}
.encaja-item .cta{grid-column:2 / -1;justify-self:start}
}
.eje-track > i{display:block;height:100%;width:0;background:var(--eje-color,var(--nilo))}
/* ============================================================
14 Demo de itinerario
============================================================ */
.demo{max-width:900px}
.demo:empty{display:none}
.demo-head{border-top:1px solid var(--linea);padding-top:24px}
.demo-head h2{
font-size:clamp(34px,5vw,56px);font-weight:400;line-height:1.02;letter-spacing:-.02em;
margin:10px 0 12px;
}
.demo-head h2 em{font-style:italic;font-weight:400}
.demo-sub{font-size:15px;color:var(--tinta-suave)}
/* La puerta a la pantalla del viaje, recién trazado (W-019) */
.demo-abrir{margin:18px 0 0}
.demo-fig{
display:block;margin:32px 0 0;aspect-ratio:16/9;overflow:hidden;
border:1px solid var(--linea);background:var(--papel-oscuro);
}
.demo-fig img{display:block;width:100%;height:100%;object-fit:cover}
/* Las fotos de destino son verticales y el marco apaisado: cada una dice
dónde está lo que importa (la cima de la pirámide, la mujer del carro) */
.demo-fig img[src*="dest-egipto"],.viaje-foto img[src*="dest-egipto"]{object-position:50% 38%}
.demo-fig img[src*="dest-china"],.viaje-foto img[src*="dest-china"]{object-position:50% 72%}
.demo-fig img[src*="dest-vietnam"],.viaje-foto img[src*="dest-vietnam"]{object-position:50% 74%}
.demo-fig img[src*="dest-tailandia"],.viaje-foto img[src*="dest-tailandia"]{object-position:50% 42%}
.demo-fig img[src*="dest-turquia"],.viaje-foto img[src*="dest-turquia"]{object-position:50% 30%}
.demo-why{
font-family:var(--titular);font-weight:400;font-size:clamp(20px,2.4vw,24px);line-height:1.35;
margin-top:28px;max-width:60ch;
}
.demo-season{margin-top:14px;font-size:15px;color:var(--tinta-suave)}
.demo-ruta{margin-top:40px;padding-top:20px;border-top:1px solid var(--linea)}
/* El esqueleto como perfil: una línea, y cada parada ocupa lo que dura */
.ruta-perfil{display:flex;margin-top:18px}
.ruta-tramo{flex:var(--dias,1) 1 0;min-width:88px;position:relative;padding:24px 16px 0 0}
.ruta-tramo::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--tinta-suave);opacity:.55}
.ruta-tramo.es-ultimo::before{right:16px}
.ruta-tramo.es-ultimo::after{content:"";position:absolute;right:16px;top:3px;width:1px;height:9px;background:var(--tinta-suave);opacity:.55}
.ruta-punto{
position:absolute;left:0;top:0;width:15px;height:15px;border-radius:50%;
background:var(--hoja);border:1.5px solid var(--tinta);box-shadow:inset 0 0 0 3px var(--hoja),inset 0 0 0 4.5px var(--tinta);
}
.ruta-tramo b{display:block;font-family:var(--titular);font-weight:400;font-size:17px;line-height:1.2;text-wrap:balance;overflow-wrap:anywhere}
.ruta-tramo i{display:block;font-style:normal;font-size:13px;color:var(--tinta-suave);margin-top:3px;font-variant-numeric:tabular-nums}
/* Por dónde se entra y por dónde se sale, debajo del esqueleto */
.ruta-aeropuertos{margin-top:14px;font-family:var(--titular);font-style:italic;font-size:15px;line-height:1.45;color:var(--tinta-suave);max-width:60ch;}
/* El viaje en cifras: cuatro números grandes antes de leer nada */
.cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:36px;padding-top:24px;border-top:1px solid var(--linea)}
.cifra b{
display:block;font-family:var(--titular);font-weight:400;font-size:clamp(34px,4.6vw,52px);line-height:1;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;
}
.cifra b small{font-size:.5em;font-weight:400;margin-left:2px;color:var(--tinta-suave)}
.cifra--euros b{font-size:clamp(24px,3vw,34px);line-height:1.2;padding-top:.15em}
.cifra span{display:block;margin-top:8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave)}
/* Los momentos: tres planes que resumen el viaje, cada uno lleva a su día */
.momentos{margin-top:40px}
.momentos-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:16px}
.momento{
display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;
padding:18px 0 16px;border:0;border-top:1px solid var(--tinta);background:transparent;color:inherit;
font:inherit;cursor:pointer;
}
.momento-dia{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-suave)}
.momento b{font-family:var(--titular);font-weight:400;font-size:20px;line-height:1.2;text-wrap:balance}
.momento i{font-family:var(--titular);font-style:italic;font-size:15px;line-height:1.4;color:var(--tinta-suave);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.momento-ir{margin-top:auto;padding-top:6px;font-size:14px;font-weight:500;border-bottom:1px solid var(--linea-suave)}
.momento:focus-visible .momento-ir{border-bottom-color:currentColor}@media (hover:hover) and (pointer:fine){.momento:hover .momento-ir{border-bottom-color:currentColor}}
@media (hover:hover) and (pointer:fine){.momento:hover b{color:var(--boton)}}
/* El explorador: la tira de días y la hoja del día elegido */
.explorador{margin-top:44px;padding-top:24px;border-top:1px solid var(--linea)}
.explorador-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px 32px;flex-wrap:wrap}
.explorador-ayuda{font-size:14px;color:var(--tinta-suave);max-width:46ch}
.dias-tira{display:flex;gap:18px;margin-top:22px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.dias-grupo{flex:none;scroll-snap-align:start}
.dias-grupo-nombre{display:block;font-family:var(--titular);font-size:14px;color:var(--tinta-suave);white-space:nowrap;margin-bottom:8px;}
.dias-grupo-chips{display:flex;gap:6px}
.dia-chip{
flex:none;width:46px;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
border:1px solid var(--linea-control);border-radius:8px;background:transparent;color:inherit;cursor:pointer;
font-family:var(--titular);
}
.dia-chip b{font-weight:400;font-size:20px;line-height:1;font-variant-numeric:tabular-nums}
.dia-chip small{font-family:var(--letra);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave);line-height:1}
@media (hover:hover) and (pointer:fine){.dia-chip:hover{border-color:var(--tinta)}}
.dia-chip.is-sel{background:var(--boton);color:var(--boton-texto);border-color:var(--boton)}
.dia-chip.is-sel small{color:inherit;opacity:.8}
.dia-chip:focus-visible{outline:2px solid var(--texto);outline-offset:3px}
.dia-hoja{
margin-top:20px;padding:28px 28px 24px;background:var(--hoja);border:1px solid var(--hoja-borde);
box-shadow:0 18px 40px -28px var(--sombra);min-height:220px;
}
.dia-hoja:focus{outline:0}
.hoja-cab{display:grid;grid-template-columns:auto 1fr;gap:8px 28px;align-items:start}
.hoja-num{
font-family:var(--titular);font-weight:400;font-size:clamp(56px,8vw,88px);line-height:.9;letter-spacing:-.03em;
font-variant-numeric:tabular-nums;
}
.hoja-num small{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--letra);font-weight:500;color:var(--tinta-suave);margin-bottom:8px}
.hoja-titulo{padding-top:22px}
.hoja-tipo{display:block;margin-top:10px;font-size:14px;color:var(--tinta-suave)}
.hoja-zona{margin-top:10px;font-size:15px;color:var(--tinta-suave);max-width:56ch}
.hoja-planes{margin-top:22px;padding-top:6px;border-top:1px solid var(--linea)}
.hoja-planes ul{list-style:none;margin:0;padding:0}
.hoja-planes li.acto{display:grid;grid-template-columns:5ch 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--linea)}
.hoja-planes li.acto:last-child{border-bottom:0}
.hoja-planes .acto-cuerpo{font-family:var(--titular);font-size:19px;line-height:1.3;}
.hoja-planes .acto-cuerpo small,.hoja-planes .hora-vacia{font-family:var(--titular);font-size:15px}
.hoja-planes .hora-vacia{margin-top:6px}
.hoja-planes .dia-libre{padding:10px 0 4px;font-size:19px;line-height:1.4}
.hoja-nota{margin-top:16px;font-family:var(--titular);font-style:italic;color:var(--tinta-suave);}
.dia-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px}
.dia-nav-btn{
padding:10px 16px;border:1px solid var(--linea-control);border-radius:999px;background:transparent;color:inherit;
font-family:var(--letra);font-size:14px;font-weight:500;cursor:pointer;
}
@media (hover:hover) and (pointer:fine){.dia-nav-btn:hover{border-color:currentColor}}
.dia-nav-btn[disabled]{opacity:.35;cursor:not-allowed}
.dia-pos{font-family:var(--titular);font-size:15px;color:var(--tinta-suave);font-variant-numeric:tabular-nums}
/* La lista completa, plegada: para quien quiere leerlo todo o imprimirlo */
.demo-lista{margin-top:28px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.demo-lista summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-weight:500}
.demo-lista summary::-webkit-details-marker{display:none}
.demo-lista summary span{font-family:var(--titular);font-weight:400;font-size:24px;line-height:1;color:var(--tinta-suave)}
.demo-lista[open] summary span{transform:rotate(45deg)}
.demo-days{border-top:1px solid var(--linea)}
.demo-zona{padding:28px 0 10px}
.demo-zona p{margin-top:10px;font-size:15px;color:var(--tinta-suave);max-width:64ch}
.stamp{
display:inline-block;font-family:var(--titular);font-size:15px;line-height:1.2;
padding:5px 12px;border:1px solid var(--tinta);border-radius:999px;
}
.demo-day{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--linea)}
.demo-day-num{
font-family:var(--titular);font-weight:400;font-size:22px;line-height:1.25;
font-variant-numeric:tabular-nums;
}
.demo-day ul{list-style:none;margin:0;padding:0}
.demo-day li{padding:4px 0}
.demo-day li::before{content:"— ";color:var(--tinta-suave)}
/* Cada plan con su hora a la izquierda, como un horario. Sin hora, hueco. */
.demo-day li.acto{display:grid;grid-template-columns:5ch 1fr;gap:14px;padding:6px 0}
.demo-day li.acto::before{content:none}
.acto-hora{
font-family:var(--titular);font-size:15px;line-height:1.55;color:var(--tinta-suave);
font-variant-numeric:tabular-nums;white-space:nowrap;
}
.acto-hora:empty::before{content:"·";display:block;text-align:center;opacity:.5}
.acto-cuerpo{min-width:0}
.demo-day li small{font-size:14px;color:var(--tinta-suave)}
/* Imprescindible: una palabra en versalita delante del plan. Sin icono y sin
color de semáforo; la jerarquía la da la forma de la letra. */
.imprescindible{
font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
color:var(--tinta-suave);white-space:nowrap;margin-right:2px}
/* El papel de cada plan se lee como el imprescindible: una palabra, sin
iconos, con el mismo estilo. */
/* Las ideas por si cambias de opinión: bajo el día, en la serif y en pequeño,
una línea por motivo y sin viñetas. Nunca compiten con el plan. */
.dia-ideas{margin-top:10px;padding-top:8px;border-top:1px dotted var(--linea)}
.dia-ideas p{margin:0 0 4px;font-family:var(--titular);font-size:15px;line-height:1.4;color:var(--tinta-suave);}
.dia-ideas-motivo{font-style:italic}
.demo-day .dia-ideas p{font-size:14px}
.ruta-otras{margin-top:10px;font-family:var(--titular);font-style:italic;font-size:15px;line-height:1.45;color:var(--tinta-suave);max-width:60ch;}
.ruta-entorno{margin-top:12px;font-family:var(--titular);font-size:15px;line-height:1.45;color:var(--tinta-suave);max-width:60ch;}
.ruta-tramo em{display:block;font-style:normal;font-size:12px;line-height:1.3;color:var(--tinta-suave);margin-top:3px}
.ruta-conducir{margin-top:18px;max-width:60ch}
.ruta-conducir ul{list-style:none;margin:8px 0 0;padding:0;font-size:15px;line-height:1.5;color:var(--tinta-suave)}
.ruta-conducir li+li{margin-top:4px}
.ruta-conducir b{font-weight:500;color:var(--texto)}
.ruta-conducir-fecha{font-size:13px}
.dna-moverse button b{font-weight:400}
.moverse-casilla{margin-top:22px}
/* La hora vacía: la firma de la casa, en la serif de la marca y en su línea. */
.hora-vacia{
display:block;margin-top:4px;font-family:var(--titular);font-style:italic;
color:var(--tinta-suave);}
.demo-repite{
margin:0 0 20px;font-family:var(--titular);font-style:italic;color:var(--tinta-suave);
}
.dia-libre{font-family:var(--titular);font-style:italic;color:var(--tinta-suave);}
.demo-reglas{margin-top:28px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:0}
.demo-reglas summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-weight:500}
.demo-reglas summary::-webkit-details-marker{display:none}
.demo-reglas summary span{font-family:var(--titular);font-weight:400;font-size:24px;line-height:1;color:var(--tinta-suave)}
.demo-reglas[open] summary span{transform:rotate(45deg)}
.demo-reglas ul{list-style:none;margin:0;padding:0 0 16px}
.demo-reglas li{padding:8px 0;border-top:1px solid var(--linea);font-size:14px;color:var(--tinta-suave)}
.demo-panels{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.demo-panels--uno{grid-template-columns:minmax(0,560px)}
.demo-avisos{margin-top:28px}
.demo-avisos .demo-panel{border-top:0;border-left:2px solid var(--ocre);padding-left:20px}
.lead-aviso{margin:0 0 18px;font-family:var(--titular);font-style:italic;font-size:15px;color:var(--tinta-suave)}
.lead-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lead-sinc{font-size:13.5px;color:var(--tinta-suave)}
.demo-panel{border-top:1px solid var(--linea);padding:24px 0 26px}
.demo-panel h3{font-size:22px;line-height:1.2;margin:6px 0 16px;}
.demo-panel ul{list-style:none;margin:0;padding:0}
.demo-panel li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--linea);font-size:15px}
.demo-panel li:first-child{border-top:0}
.demo-panel li strong{font-weight:500}
.demo-panel li span{font-variant-numeric:tabular-nums}
.demo-banderas li{display:block}
.budget-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:14px;padding-top:14px;border-top:1px solid var(--tinta)}
.budget-total .num{font-family:var(--titular);font-weight:400;font-size:24px;line-height:1;font-variant-numeric:tabular-nums;}
.demo-panel .q-hint{margin-top:14px}
.demo-disclaimer{margin-top:32px;font-size:14px;line-height:1.55;color:var(--tinta-suave);max-width:68ch}
/* ============================================================
15 Formulario de propuesta real
============================================================ */
.lead{margin-top:48px;border:1px solid var(--linea);padding:clamp(28px,5vw,56px)}
.lead h3{font-size:clamp(26px,3.4vw,36px);line-height:1.15;margin:10px 0 12px;}
.lead-sub{color:var(--tinta-suave);max-width:56ch;margin:0 0 28px}
.lead-form{max-width:640px}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.lead-full{grid-column:1 / -1}
.lead-grid label{display:grid;gap:8px}
.lead-grid label > span{font-size:14px;font-weight:500}
.lead-grid label > span em{font-style:italic;font-weight:400;color:var(--tinta-suave)}
.hpot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.lead-consent{display:flex;gap:12px;align-items:flex-start;margin-top:20px;font-size:14px;color:var(--tinta-suave)}
.lead-consent input{margin:3px 0 0;flex:none;width:16px;height:16px}
.lead-actions{margin-top:24px}
.lead .q-hint{margin-top:12px}
.lead .q-hint:empty{display:none}
.lead-ok{padding:8px 0 0}
.lead-sello{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:50%;
background:var(--nilo);color:var(--papel);font-size:18px;
}
.lead-ok h4{font-size:26px;line-height:1.2;margin:16px 0 8px;}
.lead-ok p{max-width:52ch;color:var(--tinta-suave)}
/* ============================================================
16 Pie
============================================================ */
.pie{
position:relative;z-index:1;
margin-top:clamp(64px,9vw,120px);padding:64px 0 32px;font-size:15px;
border-top:1px solid var(--linea);
background:transparent;color:var(--texto);
}
.pie-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.pie-marca .marca{font-size:30px}
.pie-marca p{
margin-top:14px;max-width:30ch;
font-family:var(--titular);font-weight:400;font-size:19px;line-height:1.35;color:var(--tinta-suave);
}
.pie h4,.pie .pie-titulo{font-size:17px;margin:0 0 14px;font-family:var(--titular);font-weight:400;line-height:1.15;}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{color:var(--texto-suave);line-height:1.8}
.pie li a{color:var(--texto-suave)}
@media (hover:hover) and (pointer:fine){.pie li a:hover{color:var(--texto);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}}
.pie-legal{
display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;
margin-top:48px;padding-top:20px;border-top:1px solid var(--linea-tono);
font-size:14px;color:var(--texto-suave);
}
.pie-legal a{color:var(--texto-suave);text-decoration-color:var(--linea-media)}
@media (hover:hover) and (pointer:fine){.pie-legal a:hover{color:var(--texto)}}
/* ============================================================
17 Movimiento
Un solo movimiento propio: la entrada de la portada. El resto son
transiciones en respuesta a una acción (hover, cambio de pantalla,
"Ver mi resultado"). Todo bajo prefers-reduced-motion: no-preference.
============================================================ */
@media (prefers-reduced-motion:no-preference){
html{scroll-behavior:smooth}
/* Portada: las bandas suben de la base a la cima, después aparece el texto */
.terreno.is-entrada .entrada{opacity:0;animation:subir 1.1s cubic-bezier(.2,0,.1,1) forwards;animation-delay:calc(var(--i) * 40ms)}
@keyframes subir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* El terreno respira: cada banda deriva muy despacio, a su ritmo */
.terreno path[data-t]{transform-box:view-box;transform-origin:74.6% 21.2%;animation:deriva var(--dur,30s) ease-in-out infinite alternate;animation-delay:var(--delay,0s)}
@keyframes deriva{to{transform:translate(6px,-4px) scale(1.014)}}
.terreno-luz{transition:opacity .8s}
.tono-boton .mitad{transition:transform .6s cubic-bezier(.2,0,.1,1)}
.tono-boton{transition:border-color .2s}
.lema,.hero .cta,.hero .nota-cta,.esquina{opacity:0;animation:aparecer 1.2s cubic-bezier(.2,0,.1,1) 1.1s forwards}
@keyframes aparecer{to{opacity:1}}
.esquina--fija{transition:opacity .45s cubic-bezier(.2,0,.1,1)}
.esquina--fija .cota,.esquina--fija .coord,.esquina--fija .lugar{transition:opacity .3s}
/* Reveals ligados al scroll: la sección aparece mientras entra en pantalla */
@supports (animation-timeline: view()){
[data-aparece]{animation:aparece-scroll linear both;animation-timeline:view();animation-range:entry 0% entry 38%}
@keyframes aparece-scroll{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
}
@supports not (animation-timeline: view()){
[data-aparece]{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,0,.1,1),transform .6s cubic-bezier(.2,0,.1,1)}
[data-aparece].is-visto{opacity:1;transform:none}
}
/* Enlaces: subrayado que crece */
.nav-lista a::after,.enlace::after{transition:transform .45s cubic-bezier(.3,0,.2,1)}
.nav-lista a,.pie li a,.pie-legal a,a.viaje .viaje-nombre,.tarjeta h3 a,.guia summary h3{transition:color .25s}
.huellas-fila .huella{transition:color .25s,transform .5s cubic-bezier(.2,0,.1,1)}
/* Portada (§19): la fila de viajes y la foto de las guías responden al ratón */
a.viaje::before{transition:opacity .4s}
.viaje .relieve-mini{transition:transform .55s cubic-bezier(.2,0,.1,1)}
.viaje-cota{transition:color .3s}
.tarjeta .marco{transition:border-color .35s}
.tarjeta .marco img{transition:transform 1.3s cubic-bezier(.2,0,.1,1)}
.cta,.btn,.dna-verpremio{transition:filter .2s,border-color .2s,opacity .2s}
body.portada main > .seccion{transition:box-shadow .5s cubic-bezier(.2,0,.1,1)}
.nav-boton{transition:background-color .2s,color .2s,border-color .2s}
/* Formularios y controles */
.campo input,.campo textarea,.lead-grid input,.lead-grid textarea,.dna-abierta textarea{transition:border-color .2s}
.chip span,.dna-sino button,.dna-abcd button,.dna-abcd .letra,.dna-rank button,.dna-rank .pos,.dna-img-card,.reparto-nivel{transition:background-color .25s,color .25s,border-color .25s,box-shadow .25s}
.dna-img-card .sello{transition:opacity .2s}
.dna-back{transition:opacity .2s,color .2s}
.demo-reglas summary span,.demo-lista summary span{transition:transform .3s cubic-bezier(.3,0,.2,1)}
/* Explorador de días: la hoja se funde al cambiar de día; el chip elegido responde */
.dia-hoja{transition:opacity .22s cubic-bezier(.2,0,.1,1),transform .22s cubic-bezier(.2,0,.1,1)}
.dia-hoja.is-out{opacity:0;transform:translateY(6px)}
.dia-chip{transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.dia-chip.is-sel{transform:translateY(-2px)}
.momento b,.momento-ir{transition:color .2s,border-color .2s}
/* Cuestionario: fundido corto al pasar al resultado y entre pantallas */
.dna{transition:opacity .45s cubic-bezier(.2,0,.1,1)}
body.is-cargando .dna{opacity:0}
.dna-bar i{transition:width .45s cubic-bezier(.3,0,.2,1)}
.dna-screen{opacity:0;transform:translateY(6px);transition:opacity 180ms cubic-bezier(.23,1,.32,1),transform 180ms cubic-bezier(.23,1,.32,1)}
.dna-screen.is-in{opacity:1;transform:none}
/* la que sale, encima y fundiéndose en 120 ms, mientras entra la nueva (F-09) */
.dna-stage{position:relative}
.dna-screen.is-out{position:absolute;top:0;left:0;right:0;opacity:0;transform:none;transition:opacity 120ms ease-out;pointer-events:none}
.reparto-track > i{transition:width .35s cubic-bezier(.3,0,.2,1)}
/* Resultado: respuesta a "Ver mi resultado" */
.avatar-card{opacity:0;transform:translateY(8px);transition:opacity .6s cubic-bezier(.2,0,.1,1),transform .6s cubic-bezier(.2,0,.1,1)}
.avatar-card.is-on{opacity:1;transform:none}
.eje-track > i{transition:width .9s cubic-bezier(.2,0,.1,1)}
.lead-ok{opacity:0;transition:opacity .45s cubic-bezier(.2,0,.1,1)}
.lead-ok.is-on{opacity:1}
}
/* ============================================================
18 Responsive
============================================================ */
@media (max-width:1024px){
.pasos{gap:32px}
.tarjetas{gap:24px}
.viaje-ficha{gap:40px}
.contacto{gap:40px}
}
@media (max-width:820px){
/* Navegación plegable */
.nav{flex-wrap:wrap;gap:16px;padding:20px 44px}
.nav-boton{display:inline-flex;order:3}
.cta--nav{order:2;margin-left:auto}
.nav-lista{
display:none;order:4;flex-basis:100%;flex-direction:column;gap:0;
margin:8px 0 0;padding:8px 0 4px;border-top:1px solid var(--linea-tono);
}
.nav.is-abierta .nav-lista{display:flex}
.nav-lista li{border-bottom:1px solid var(--linea-tono)}
.nav-lista li:last-child{border-bottom:0}
.nav-lista a{display:block;padding:14px 0;font-size:17px}
.nav-lista a::after{display:none}
}
@media (max-width:640px){
/* Entre 520 y 640 la fila cabe si se aprietan los márgenes */
.nav{padding:20px 24px;gap:12px}
.cta--nav{padding:9px 14px;font-size:14px}
}
@media (max-width:820px){
/* Portada */
.esquina{display:none}
.esquina.esquina--fija{display:none}
/* En pantallas estrechas la cima se va a la derecha para dejar el texto sobre la ladera */
.terreno svg{left:auto;right:-48%;width:160%}
.huella-fondo{width:160vw;top:0}
.tono-boton{order:2}
body:not(.portada) main{width:calc(100% - 16px);margin-top:12px}
.web{min-height:clamp(480px,78vh,720px)}
.hero{padding:32px 44px 52px}
/* Rejillas a una columna */
.seccion-cabecera{grid-template-columns:1fr;gap:8px}
.pasos,.tarjetas,.contacto,.pie-grid,.viaje-ficha,.demo-panels,.lead-grid{grid-template-columns:1fr}
/* Las preguntas de imágenes siguen a dos columnas: cuatro fotos a pantalla
completa eran cuatro pantallas de scroll por pregunta */
.dna-imgs{gap:12px}
.dna-img-card .frame{aspect-ratio:1/1}
.dna-img-card figcaption,.dna-img-card .pie-img{padding:10px 12px;font-size:14px;line-height:1.35}
.dna-img-card .sello{top:8px;right:8px;width:24px;height:24px;font-size:12px}
/* "Siguiente" siempre a mano: la botonera se pega al borde inferior */
.dna-nav{
position:sticky;bottom:0;z-index:2;margin-top:28px;padding:12px 0 14px;
/* la hoja es translúcida (92 %): debajo va el papel para que no se transparente lo que queda detrás */
background:linear-gradient(var(--hoja),var(--hoja)),var(--papel);box-shadow:0 -14px 14px -14px var(--sombra);
}
.pasos{gap:28px}
.viaje-ficha{gap:28px}
.viaje-ficha .marco{aspect-ratio:4/3}
.tarjeta--ancha{grid-template-columns:1fr;gap:18px}
.viaje-zonas{columns:1}
/* (la rejilla móvil de .viaje, con la miniatura, está en §Lista de viajes) */
.huellas-fila{grid-template-columns:repeat(3,1fr);gap:24px 16px}
.huellas-fila .huella{width:96px;height:96px}
.creditos-lista li > :first-child{flex-basis:100%}
/* Cuestionario y resultado */
.dna-stage{min-height:300px}
.dna-top{flex-direction:column;align-items:stretch;gap:10px}
.dna-count{white-space:normal}
.reparto-fila{grid-template-columns:1fr}
.reparto-niveles{justify-content:flex-start}
.dna-paso{width:34px;height:34px}
.dna-pasos-linea{left:17px;right:17px}
.dna-slider-wrap--pasos .dna-slider-val{font-size:24px;min-height:3.4em}
/* En móvil: nombre y número en la misma línea, la barra debajo (dos filas, no tres) */
.eje-fila{grid-template-columns:1fr 3ch;grid-template-areas:"nombre num" "track track";gap:4px 16px;padding:7px 0}
.eje-fila .nombre{grid-area:nombre}
.eje-fila .eje-track{grid-area:track}
.eje-fila .num{grid-area:num;font-size:16px}
.cifras{grid-template-columns:1fr 1fr;gap:18px 16px}
.postales-lista{display:flex;overflow-x:auto;gap:16px;padding:8px 4px 16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.postal{flex:0 0 74%;scroll-snap-align:center}
.postal:nth-child(2) figure{transform:rotate(.8deg)}
.horas-contraste{grid-template-columns:1fr;gap:24px}
.momentos-lista{grid-template-columns:1fr;gap:0}
.momento{padding:14px 0}
.dia-hoja{padding:20px 18px 18px;margin-left:-4px;margin-right:-4px}
.hoja-cab{grid-template-columns:1fr;gap:4px}
.hoja-titulo{padding-top:0}
.hoja-planes li.acto{grid-template-columns:4.6ch 1fr;gap:10px}
.hoja-planes .acto-cuerpo{font-size:17px}
.dia-nav-btn{padding:9px 12px;font-size:13px}
.demo-day{grid-template-columns:1fr;gap:6px}
.demo-day-num{font-size:18px}
.demo-day li.acto{grid-template-columns:4.6ch 1fr;gap:10px}
.acto-hora{font-size:14px}
/* El perfil de la ruta se pone en vertical: cada tramo mide lo que dura */
.ruta-perfil{flex-direction:column}
.ruta-tramo{flex:none;min-height:calc(var(--dias,1) * 14px + 46px);padding:0 0 12px 26px}
.ruta-tramo::before{left:7px;right:auto;top:0;bottom:0;width:1px;height:auto}
.ruta-tramo.es-ultimo::before{bottom:12px}
.ruta-tramo.es-ultimo::after{left:3px;right:auto;top:auto;bottom:12px;width:9px;height:1px}
.demo-panel li{flex-wrap:wrap}
}
@media (max-width:520px){
.wrap{padding-left:20px;padding-right:20px}
.nav{padding:18px 20px}
.nav .marca{font-size:22px}
/* El botón principal no desaparece en el móvil: se hace compacto */
.hero{padding:28px 20px 44px}
.lema{margin-top:22px}
.cta{padding:15px 22px}
/* El botón principal no cabe en la fila con el logotipo, el tono y el menú:
pasa a una segunda fila a todo el ancho, a propósito y no por desbordamiento */
.nav{gap:12px 10px}
.nav .tono-boton{margin-left:auto}
.cta--nav{order:4;flex-basis:100%;margin:2px 0 0;padding:12px 18px;font-size:15px;gap:8px}
.nav-lista{order:5}
.huellas-fila{grid-template-columns:repeat(2,1fr)}
.huellas-fila .huella{width:88px;height:88px}
.cabecera-pagina h1{letter-spacing:-.025em}
.dna-intro{padding:24px 20px}
.dna-sino{grid-template-columns:1fr}
.dna-sino button{padding:20px}
.dna-nav{flex-direction:column-reverse;align-items:stretch;gap:10px}
.dna-nav .dna-next{flex:1 1 auto}
.dna-back{align-self:flex-start}
.dual-vals{font-size:24px}
.avatar-card{padding:32px 18px}
.avatar-nombre{letter-spacing:-.02em}
.huella--grande{width:180px;height:180px}
.dna-ejes{padding:20px 16px}
.demo-panel{padding:20px 18px}
.lead{padding:24px 18px}
.prosa p,.prosa ul,.prosa ol{font-size:17px}
.caja{padding:22px 20px}
.pie{padding-top:40px}
.pie-legal{flex-direction:column}
}
/* El revelado: la huella se traza sola al terminar el cuestionario */
.revelado{
position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
background:var(--papel);color:var(--tinta);opacity:0;transition:opacity .35s ease;
}
.revelado.is-on{opacity:1}
.revelado.se-va{opacity:0;transition:opacity .5s ease}
.revelado .kicker{margin:0}
.revelado-huella{width:min(62vw,300px);height:auto;display:block}
.revelado-huella path{fill:none;stroke:currentColor;stroke-width:1.15;vector-effect:non-scaling-stroke}
.revelado-nombre{
font-family:var(--titular);font-weight:400;font-size:clamp(34px,6vw,56px);line-height:1;letter-spacing:-.02em;
margin:6px 0 0;min-height:1em;
opacity:0;transform:translateY(6px);transition:opacity .7s cubic-bezier(.2,0,.1,1),transform .7s cubic-bezier(.2,0,.1,1);
}
.revelado.con-nombre .revelado-nombre{opacity:1;transform:none}
@media (max-width:520px){
.mapa-cota{padding-right:0}
.mapa-cota .relieve-mini{width:120px;height:120px}
.mapa-cota .cota-mini{position:static;display:inline-block;margin-top:-28px;margin-left:80px}
}
/* Portada (§19) y muestra de huella.html (§20) en pantallas estrechas */
@media (max-width:820px){
.kicker{font-size:15px}
.hero-figura{order:-1;margin:-8px 0 4px}
.huella-3d--hero{width:min(300px,68vw);height:min(300px,68vw)}
.muestra-encaja{display:block}
.muestra-eje{grid-template-columns:84px 1fr 3ch}
.dna-intro--muestra{grid-template-columns:1fr}
.dna-intro--muestra .hero-figura{order:-1}
.dna-intro--muestra .huella-3d--hero{width:min(280px,64vw);height:min(280px,64vw)}
}
/* Las hojas de la portada no caen alineadas: cada una se desplaza un poco
respecto a la anterior, como capas de un mapa apiladas a mano. */
@media (min-width:1024px){
body.portada main > .seccion:nth-child(odd){transform:translateX(-14px)}
body.portada main > .seccion:nth-child(even){transform:translateX(14px)}
}
/* ============================================================
19 Textura y detalles de portada: grano de papel, ruta del método,
hover de la lista de viajes y de las guías, entrada del título
============================================================ */
/* Grano de papel sobre toda la página: se ve impresa, no pintada en pantalla */
body::after{
content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.06;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,");
background-size:180px 180px;
}
[data-tono="noche"] body::after,html[data-tono="noche"] body::after{mix-blend-mode:screen;opacity:.045}
/* Método: la ruta que une las tres cotas */
.pasos{position:relative}
.pasos-ruta{position:absolute;left:0;right:0;top:-20px;width:100%;height:40px;overflow:visible;pointer-events:none}
.pasos-ruta path{fill:none;stroke:var(--ocre);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.is-visto .pasos-ruta path{stroke-dashoffset:0}
.paso-num::before{content:"";display:inline-block;width:10px;height:1px;background:var(--ocre);vertical-align:middle;margin-right:8px}
/* Lista de viajes: la fila responde como un mapa que se acerca */
a.viaje{position:relative;padding-left:12px;margin-left:-12px}
a.viaje::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--papel-oscuro),transparent 70%);opacity:0}
a.viaje > *{position:relative}
.viaje .relieve-mini{transform-origin:center}
a.viaje:focus-visible::before{opacity:1}@media (hover:hover) and (pointer:fine){a.viaje:hover::before{opacity:1}}
a.viaje:focus-visible .relieve-mini{transform:scale(1.22) rotate(-8deg)}@media (hover:hover) and (pointer:fine){a.viaje:hover .relieve-mini{transform:scale(1.22) rotate(-8deg)}}
a.viaje:focus-visible .viaje-cota{color:var(--boton)}@media (hover:hover) and (pointer:fine){a.viaje:hover .viaje-cota{color:var(--boton)}}
/* Guías: la foto se acerca dentro del marco */
.tarjeta .marco{overflow:hidden}
@media (hover:hover) and (pointer:fine){.tarjeta:hover .marco{border-color:var(--tinta)}}
@media (hover:hover) and (pointer:fine){.tarjeta:hover .marco img{transform:scale(1.045)}}
/* Huellas de ejemplo: se dibujan solas al llegar a la vista */
@media (hover:hover) and (pointer:fine){.huellas-fila a:hover .huella{transform:scale(1.06)}}
@media (prefers-reduced-motion:no-preference){
/* El título emerge del terreno en vez de fundirse */
.hero-titulo{animation:emerger 1.5s cubic-bezier(.2,0,.1,1) 1s both}
@keyframes emerger{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(28px)}to{opacity:1;clip-path:inset(-4% 0 -8% 0);transform:none}}
.lema{animation-delay:1.55s}.hero .cta{animation-delay:1.75s}.hero .nota-cta{animation-delay:1.85s}.esquina{animation-delay:1.65s}
.pasos-ruta path{transition:stroke-dashoffset 1.8s cubic-bezier(.2,0,.1,1) .2s}
/* Los hijos de cada hoja entran escalonados */
.pasos > .paso,.viajes-lista > li,.huellas-fila > li,.tarjetas > .tarjeta{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,0,.1,1),transform .7s cubic-bezier(.2,0,.1,1)}
.is-visto .pasos > .paso,.is-visto .viajes-lista > li,.is-visto .huellas-fila > li,.is-visto .tarjetas > .tarjeta{opacity:1;transform:none}
.is-visto > * > :nth-child(2),.is-visto .viajes-lista > li:nth-child(2),.is-visto .huellas-fila > li:nth-child(2){transition-delay:.1s}
.is-visto .pasos > .paso:nth-child(3),.is-visto .viajes-lista > li:nth-child(3),.is-visto .huellas-fila > li:nth-child(3),.is-visto .tarjetas > .tarjeta:nth-child(2){transition-delay:.2s}
.is-visto .pasos > .paso:nth-child(4),.is-visto .viajes-lista > li:nth-child(4),.is-visto .huellas-fila > li:nth-child(4),.is-visto .tarjetas > .tarjeta:nth-child(3){transition-delay:.3s}
.is-visto .viajes-lista > li:nth-child(5),.is-visto .huellas-fila > li:nth-child(5){transition-delay:.4s}
.is-visto .huellas-fila > li:nth-child(6){transition-delay:.5s}
}
/* ============================================================
20 Muestra de huella (huella.html): el relieve 3D, tres ejes con
deslizador y el perfil que cambia, para quien llega sin huella
============================================================ */
.hero-figura{display:flex;flex-direction:column;align-items:center;gap:0}
.huella-3d--hero{width:min(540px,42vw);height:min(540px,42vw);margin:0;filter:drop-shadow(0 30px 40px rgba(38,35,30,.18))}
.muestra{margin-top:30px;max-width:520px}
.muestra-ejes{display:grid;gap:8px;margin-top:14px}
.muestra-eje{
display:grid;grid-template-columns:96px 1fr 3ch;align-items:center;gap:14px;
font-family:var(--titular);font-size:16px;color:var(--texto);
}
.muestra-eje output{text-align:right;font-variant-numeric:tabular-nums;color:var(--texto-suave);font-size:15px}
.muestra-eje input[type="range"]{
-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;
}
.muestra-eje input[type="range"]::-webkit-slider-runnable-track{height:1px;background:var(--linea-media)}
.muestra-eje input[type="range"]::-moz-range-track{height:1px;background:var(--linea-media)}
.muestra-eje input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-8.5px;border-radius:50%;
background:var(--texto);border:3px solid var(--papel);box-shadow:0 0 0 1px var(--texto);
}
.muestra-eje input[type="range"]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--texto);border:3px solid var(--papel);box-shadow:0 0 0 1px var(--texto)}
.muestra-eje input[type="range"]:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.muestra-perfil{display:flex;flex-direction:column;gap:6px;margin:22px 0 0;min-height:88px}
.muestra-nombre-perfil{
font-family:var(--titular);font-weight:400;font-size:clamp(30px,3.4vw,42px);line-height:1;letter-spacing:-.02em;
}
.muestra-gancho{font-family:var(--titular);font-style:italic;font-weight:400;font-size:16px;line-height:1.35;color:var(--texto-suave);max-width:46ch}
.muestra-encaja{display:none;font-family:var(--letra);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave);margin-top:4px}
@media (prefers-reduced-motion:no-preference){
.muestra-nombre-perfil,.muestra-gancho{transition:opacity .18s ease,transform .18s ease}
.muestra.is-cambiando .muestra-nombre-perfil,.muestra.is-cambiando .muestra-gancho{opacity:0;transform:translateY(4px)}
}
/* La intro de huella.html con la muestra dentro */
.dna-intro--muestra{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,42%);gap:24px 40px;align-items:center;max-width:none}
.dna-intro--muestra h2{margin:12px 0 14px}
.dna-intro--muestra .muestra{margin-top:22px}
.dna-intro--muestra .huella-3d--hero{width:min(440px,36vw);height:min(440px,36vw)}
.dna-intro--muestra .cta{margin-top:22px}
.muestra-encaja--siempre{display:block}
/* ============================================================
21 Propuesta privada (p/.html, propuestas/generar.py; pendiente de pasar a Nausika, W-148)
============================================================ */
.propuesta-cab{display:grid;grid-template-columns:1fr auto;gap:24px 48px;align-items:end}
.propuesta-huella .huella{width:150px;height:150px;display:block}
.propuesta-carta .texto{max-width:62ch}
.propuesta-carta .texto p{font-family:var(--titular);font-weight:400;font-size:clamp(19px,2.1vw,22px);line-height:1.45;}
.propuesta-carta .firma{font-style:italic;color:var(--tinta-suave);margin-top:20px}
.hoja-extras{margin-top:18px;padding-top:12px;border-top:1px solid var(--linea)}
.hoja-extra{font-size:15px;line-height:1.5;color:var(--tinta-suave);margin:4px 0}
.hoja-extra b{font-weight:500;color:var(--tinta)}
.propuesta-sitios h3{font-size:22px;margin:28px 0 8px;}
.propuesta-sitios ul,.propuesta-tramos ul{list-style:none;margin:0;padding:0}
.ficha-sitio{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(auto-fit,minmax(120px,1fr));gap:6px 20px;padding:14px 0;border-top:1px solid var(--linea);align-items:baseline}
.ficha-sitio b{font-family:var(--titular);font-weight:400;font-size:19px;line-height:1.25;}
.ficha-sitio span{font-size:15px;line-height:1.45;color:var(--tinta-suave)}
.propuesta-tramos li{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(90px,1fr));gap:6px 20px;padding:12px 0;border-top:1px solid var(--linea);font-size:15px;line-height:1.45}
.propuesta-tramos li span:first-child{font-family:var(--titular);font-size:18px;}
.reservas{margin:0;padding:0 0 0 1.4em;font-size:16px;line-height:1.5}
.reservas li{padding:8px 0;border-top:1px solid var(--linea)}
.reservas li span+span::before{content:" · ";color:var(--tinta-suave)}
.presupuesto{width:100%;border-collapse:collapse;font-size:16px}
.presupuesto td{padding:10px 12px 10px 0;border-top:1px solid var(--linea);vertical-align:top}
.presupuesto td:nth-child(2){font-family:var(--titular);font-size:19px;white-space:nowrap;font-variant-numeric:tabular-nums}
.presupuesto td:last-child{color:var(--tinta-suave);font-size:14px}
.presupuesto-total{margin-top:18px;font-family:var(--titular);font-weight:400;font-size:clamp(22px,2.6vw,28px);}
.descartado{margin:0;padding:0;list-style:none}
.descartado li{padding:10px 0;border-top:1px solid var(--linea);font-size:16px;line-height:1.5}
.propuesta-revisiones .nota ul{display:inline;padding:0;list-style:none}
.propuesta-revisiones .nota li{display:inline}
mark.pendiente{background:#F3D66B;color:#26231E;padding:0 4px}
.demo-day-num small{display:block;font-size:12px;color:var(--tinta-suave);margin-top:4px;text-transform:none;letter-spacing:0}
@media (max-width:640px){
.propuesta-cab{grid-template-columns:1fr}
.propuesta-huella .huella{width:110px;height:110px}
.ficha-sitio,.propuesta-tramos li{grid-template-columns:1fr}
}
@media print{
.cabecera,.pie,.dias-tira,.demo-lista summary,.propuesta-revisiones .cta{display:none!important}
.dia-hoja[hidden]{display:block!important}
.demo-lista{border:0}.demo-lista:not([open]) .demo-days{display:block}
body{background:#fff}
}
/* ============================================================
21 Muestra de huella en pantallas estrechas
Va al final porque las reglas de §20 pisaban las de §18: el panel se
quedaba a dos columnas y el relieve se salía por la izquierda.
============================================================ */
@media (max-width:640px){
.dna-intro--muestra{grid-template-columns:minmax(0,1fr)}
.dna-intro--muestra .hero-figura{order:-1;margin:-4px auto 8px}
.dna-intro--muestra .huella-3d--hero{width:min(260px,62vw);height:min(260px,62vw)}
.dna-intro--muestra .muestra{max-width:none}
.muestra-eje{grid-template-columns:78px minmax(0,1fr) 3ch}
}
/* ============================================================
NAUSIKA — el sistema de 2026 (W-032) en toda la web
Hasta el 25-09 este bloque ponía Nausika de noche fija, con el mar
en penumbra detrás de cada página y paneles de cristal. Ahora la web
va sobre papel crudo, con tarjetas blancas de esquina amplia; la noche
la pide el sistema o quien la elija, y el vídeo de la cala vive solo
en la portada. Se queda lo que era estructura: la cabecera fija, el
botón de menú y el menú lateral.
============================================================ */
html{background:var(--papel)}
/* ---------- Cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:20}
body:not(.portada) .cabecera{background:var(--hoja);border-bottom:1px solid var(--hoja-borde);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav{padding:18px clamp(20px,4vw,56px);max-width:none}
.nav .marca{font-size:22px;color:var(--tinta)}
.nav-lista,.tono-boton,.cta--nav{display:none!important}
.menu-boton{
margin-left:auto;appearance:none;border:1px solid var(--linea-control);background:var(--superficie);color:var(--tinta);
font:600 14px/1 var(--letra);padding:12px 16px 12px 14px;border-radius:999px;cursor:pointer;
display:inline-flex;align-items:center;gap:10px;transition:border-color .25s,background .25s;
}
.menu-boton[aria-expanded="true"]{border-color:var(--tinta)}@media (hover:hover) and (pointer:fine){.menu-boton:hover{border-color:var(--tinta)}}
.menu-boton:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
.menu-boton i{position:relative;width:16px;height:10px;display:block}
.menu-boton i::before,.menu-boton i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s cubic-bezier(.2,0,.1,1),top .3s}
.menu-boton i::before{top:0}.menu-boton i::after{top:8.5px}
.menu-boton[aria-expanded="true"] i::before{top:4px;transform:rotate(45deg)}
.menu-boton[aria-expanded="true"] i::after{top:4px;transform:rotate(-45deg)}
.menu-boton .cerrar{display:none}
.menu-boton[aria-expanded="true"] .abrir{display:none}
.menu-boton[aria-expanded="true"] .cerrar{display:inline}
/* ---------- Menú lateral ---------- */
.menu-lateral{
position:fixed;top:0;right:0;bottom:0;z-index:30;width:min(440px,100%);
background:var(--superficie);border-left:1px solid var(--linea);box-shadow:-20px 0 60px var(--capa-1);
padding:96px clamp(28px,5vw,56px) 36px;display:flex;flex-direction:column;overflow-y:auto;
transform:translateX(100%);visibility:hidden;transition:transform .5s cubic-bezier(.2,0,.1,1),visibility 0s .5s;
}
.menu-lateral.is-abierto{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.2,0,.1,1)}
.menu-velo{position:fixed;inset:0;z-index:25;background:rgba(28,26,24,.25);opacity:0;pointer-events:none;transition:opacity .4s}
.menu-velo.is-on{opacity:1;pointer-events:auto}
.menu-lateral h2{margin:0 0 12px;font:600 14px/1 var(--letra);color:var(--tinta-suave)}
.menu-lateral ul{list-style:none;margin:0 0 34px;padding:0}
.menu-lateral li a{
display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;text-decoration:none;color:var(--tinta);
font-family:var(--titular);font-weight:500;font-size:clamp(24px,2.8vw,30px);line-height:1.1;letter-spacing:-.01em;
border-bottom:1px solid var(--linea);
}
.menu-lateral li a small{font:500 13px/1.3 var(--letra);color:var(--tinta-suave);text-align:right;max-width:44%}
.menu-lateral li a[aria-current="page"]{color:var(--oliva)}@media (hover:hover) and (pointer:fine){.menu-lateral li a:hover{color:var(--oliva)}}
.menu-lateral .secundario li a{font-family:var(--letra);font-size:15px;font-weight:500;border:0;padding:7px 0;color:var(--tinta-suave)}
@media (hover:hover) and (pointer:fine){.menu-lateral .secundario li a:hover{color:var(--tinta)}}
.menu-lateral .menu-pie{margin-top:auto;font-size:14px;color:var(--tinta-suave);line-height:1.6}
.menu-lateral .menu-pie a{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--linea-media)}
.menu-boton[aria-expanded="true"]{position:relative;z-index:31}
.cabecera:has(.menu-boton[aria-expanded="true"]){z-index:31}
/* ---------- Botones: la acción en oliva, lo demás en blanco con borde ---------- */
.cta,.btn,.dna-verpremio{border-radius:999px;font-size:16px;padding:15px 26px;min-height:48px;transition:transform .3s cubic-bezier(.2,0,.1,1),background .25s,border-color .25s}
@media (hover:hover) and (pointer:fine){.cta:hover{filter:none;transform:translateY(-1px)}}
.cta--secundario,.btn,.dna-verpremio{background:var(--superficie);color:var(--tinta);border-color:var(--linea-control)}
@media (hover:hover) and (pointer:fine){.cta--secundario:hover,.btn:hover,.dna-verpremio:hover{border-color:var(--tinta);transform:translateY(-1px)}}
.dna-back{color:var(--tinta-suave)}
@media (hover:hover) and (pointer:fine){.dna-back:hover{color:var(--tinta)}}
/* ---------- Tarjetas: blancas sobre el papel, esquina de 24 px (DESIGN.md §6) ---------- */
.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{
background:var(--superficie);border:1px solid var(--hoja-borde);border-radius:var(--radio);
}
.dna-intro,.perfil-card,.avatar-card,.lead{padding:clamp(28px,4vw,48px)}
.dna-screen .dna-abcd button,.dna-sino button,.dna-rank button,.dna-img-card,.chip span,.dna-destinos button,.dna-moverse button{
background:var(--superficie);border-color:var(--linea-control);border-radius:var(--radio-pequeno);
}
.tarjeta .marco,.viaje-ficha .marco,.marco{border:0;border-radius:var(--radio);overflow:hidden}
.dna-img-card{overflow:hidden}
.dna-abcd button.is-sel,.dna-sino button.is-sel,.chip input:checked + span,.dna-destinos button.is-sel,.dna-moverse button.is-sel{background:var(--oliva);color:var(--papel);border-color:var(--oliva)}
.dna-abcd button.is-sel .letra{background:var(--papel);color:var(--oliva)}
.dna-rank button.is-ranked .pos{background:var(--oliva);color:var(--papel)}
.dna-img-card.is-sel{border-color:var(--oliva);box-shadow:0 0 0 2px var(--oliva)}
input,textarea,select{background:var(--superficie);color:var(--tinta);border-radius:var(--radio-pequeno)}
input::placeholder,textarea::placeholder{color:var(--tinta-suave)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--oliva)}
.viaje-ficha,.guia,.guias-lista,.seccion-cabecera,.dna-ejes,.itinerarios-lista li{border-color:var(--linea)}
/* Fichas de viaje: la foto en tarjeta y el texto al lado, sobre el papel */
.viaje-ficha > div:not(.marco){background:var(--superficie);border-radius:var(--radio);padding:clamp(24px,3.5vw,40px)}
/* ---------- Pie ---------- */
.pie{background:transparent;border-top:1px solid var(--linea);color:var(--tinta-suave)}
.pie a{color:var(--tinta)}
.pie-legal{font-size:13px}
/* ---------- Detalles ---------- */
::selection{background:rgba(64,72,35,.22)}
.dna-pasos-linea > i{background:var(--oliva)}
.ruta-tramo::before,.ruta-tramo.es-ultimo::after{background:var(--tinta)}
@media (max-width:640px){
.menu-lateral{padding-top:88px}
.dna-intro,.perfil-card,.avatar-card,.lead{padding:24px 20px}
.viaje-ficha > div:not(.marco){padding:22px 18px}
}
@media (prefers-reduced-motion:reduce){.menu-lateral,.menu-velo,.cta{transition:none}}
/* Nada de la portada de Cota Cero: main.js dibuja su relieve detrás de todas las
páginas, y en Nausika no existe. */
.terreno,.terreno-luz{display:none!important}
html{overscroll-behavior-x:none}
html,body{overflow-x:hidden}
/* ============================================================
22 Sin desplazamiento lateral
El relieve del fondo es más ancho que la pantalla y en iOS bastaba con
deslizar hacia la izquierda para verlo asomar: el contenedor lo recorta
y el html tampoco se desplaza en horizontal.
============================================================ */
html{overflow-x:hidden}
.terreno{overflow:hidden}
@media (max-width:820px){
.viaje-ficha{grid-template-columns:minmax(0,1fr)}
.viaje-ficha > div{min-width:0}
.mapa-cota .cota-mini{white-space:normal}
}
/* ============================================================
23 Pantalla «cómo te gusta moverte»
Hereda de .dna-abcd, cuya rejilla reserva una columna para la letra;
aquí no hay letra y el texto caía en la columna estrecha, palabra a palabra.
============================================================ */
.dna-moverse button{grid-template-columns:1fr;padding:18px 20px}
.dna-moverse button b{font-family:var(--titular);font-size:19px;line-height:1.3;}
/* ============================================================
24 Petición recibida (recibido.html) y formulario de propuesta
La pantalla a la que se llega cuando el servidor confirma la petición:
la referencia, la hora a la que vence la respuesta con su cuenta atrás,
qué pasa después y lo que nos ha contado. Todo de lectura, sin cajas
de más: el reloj es lo único que va enmarcado.
============================================================ */
.recibido{max-width:760px;padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(40px,6vw,72px)}
.recibido h1{font-size:clamp(38px,5.6vw,60px);font-weight:400;line-height:1.02;letter-spacing:-.03em;text-wrap:balance;margin:10px 0 .5em}
.recibido h2{font-size:24px;margin:0 0 18px;}
.recibido .entradilla{max-width:56ch}
.recibido-ref{font-variant-numeric:tabular-nums;letter-spacing:.06em}
.recibido > div > section{margin-top:clamp(40px,6vw,64px)}
.reloj{border:1px solid var(--linea);padding:clamp(24px,4vw,40px)}
.reloj-kicker{margin:0;font-size:14px;color:var(--tinta-suave)}
.reloj-fecha{margin:6px 0 22px;font-family:var(--titular);font-weight:400;font-size:clamp(28px,4.4vw,44px);line-height:1.1;text-wrap:balance;}
.reloj-barra{height:3px;background:var(--linea)}
.reloj-barra i{display:block;height:100%;width:0;background:var(--boton);transition:width .6s cubic-bezier(.2,0,.1,1)}
.reloj-pie{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:14px;color:var(--tinta-suave);font-variant-numeric:tabular-nums}
.reloj-pie [data-reloj-falta]{color:var(--tinta);font-weight:500}
.reloj-nota{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--linea);font-size:15px}
.recibido-pasos ol{list-style:none;margin:0;padding:0}
.recibido-pasos li{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:8px 24px;padding:16px 0;border-top:1px solid var(--linea)}
.recibido-pasos li:last-child{border-bottom:1px solid var(--linea)}
.recibido-pasos b{font-family:var(--titular);font-weight:400;font-size:18px;line-height:1.3;}
.recibido-pasos span{color:var(--tinta-suave);max-width:52ch}
.recibido-pasos strong{color:var(--tinta);font-weight:500;overflow-wrap:anywhere}
.recibido-resumen dl{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin:0}
.recibido-resumen dl > div{padding:12px 0;border-top:1px solid var(--linea)}
.recibido-resumen dt{font-size:13px;letter-spacing:.04em;color:var(--tinta-suave)}
.recibido-resumen dd{margin:4px 0 0;overflow-wrap:anywhere}
.recibido-resumen .q-hint{margin-top:18px}
.recibido-mientras p{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.recibido-nota{margin-top:40px;font-size:14px;color:var(--tinta-suave)}
.recibido-vacio p + p{margin-top:24px}
.recibido-vacio p:last-child{display:flex;flex-wrap:wrap;gap:12px}
/* En el formulario de propuesta: el aviso de una petición anterior al mismo
destino y el desplegable de «¿cómo nos has conocido?» */
.lead-previa{margin:0 0 24px;padding-left:18px;border-left:2px solid var(--ocre);font-size:15px;max-width:60ch}
.lead-grid select{
display:block;width:100%;padding:13px 14px;
border:1px solid var(--linea-control);border-radius:0;background-color:var(--papel);color:var(--tinta);
font-family:var(--letra);font-size:16px;line-height:1.4;
}
.lead-grid select:focus{outline:2px solid currentColor;outline-offset:2px;border-color:var(--tinta)}
@media (max-width:640px){
.recibido-pasos li{grid-template-columns:minmax(0,1fr);gap:4px}
.recibido-resumen dl{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.reloj-barra i{transition:none}}
/* El reloj y los bloques de «recibido», en tarjetas blancas (W-032) */
.recibido > div > .reloj,.recibido-vacio{background:var(--superficie);border:1px solid var(--hoja-borde);border-radius:var(--radio)}
.recibido-vacio{padding:clamp(24px,4vw,40px)}
.recibido-pasos,.recibido-resumen,.recibido-mientras{background:var(--superficie);border:1px solid var(--hoja-borde);border-radius:var(--radio);padding:clamp(22px,3.5vw,36px)}
.reloj-barra i{background:var(--tinta)}
.lead-grid select{background-color:var(--superficie)}
.lead-grid select option{background:var(--superficie);color:var(--tinta)}
/* ---- El enlace de un itinerario guardado ---- */
.itinerario-enlace{margin-top:40px;padding-top:24px;border-top:1px solid var(--linea-suave)}
.itinerario-enlace-fila{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin:8px 0 12px}
.itinerario-enlace-fila input{flex:1 1 280px;min-width:0;font:inherit;font-variant-numeric:tabular-nums;padding:12px 14px;
background:transparent;color:var(--tinta);border:1px solid var(--linea-control);border-radius:0}
.itinerario-enlace-fila input:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
.lead--ajena .lead-actions{margin-top:20px}
/* ---- Las piezas del Completo: cómo te mueves, dónde duermes, dónde comes, qué reservar ---- */
.acto-porque{display:block;margin-top:4px;font-size:14px;color:var(--tinta-suave)}
.acto-porque::before{content:"Por qué para ti · ";font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-suave)}
.completo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:0 40px;margin-top:36px}
.completo-panel h3{margin-bottom:10px}
.completo-lista li strong{display:block;min-width:0}
.completo-lista li strong small{display:block;font-weight:400;font-size:13px;color:var(--tinta-suave);margin-top:2px}
.completo-lista .num{text-align:right;white-space:nowrap}
.completo-lista .completo-gamas{white-space:normal;max-width:22ch;font-size:14px}
.demo-panel .completo-lista--texto li{display:block}
.completo-lista--texto li p{margin:4px 0 0;font-size:15px;max-width:62ch}
.completo-lista--texto li p small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-suave)}
.completo-grupo{margin:18px 0 2px;font-family:var(--titular);font-style:italic;color:var(--tinta-suave);}
.completo-mas{margin-top:6px;font-weight:400}
.completo-mas summary{cursor:pointer;font-size:13px;color:var(--tinta-suave);text-decoration:underline;text-underline-offset:3px}
.completo-mas p{margin:8px 0 0;font-size:14px;color:var(--tinta-suave);max-width:60ch}
.demo-panel li.completo-desglose{display:block}
.completo-desglose ul{margin-top:8px}
.completo-desglose li{font-size:14px}
.completo-desglose li small{color:var(--tinta-suave)}
/* ============================================================
El itinerario en papel (Guardar en PDF)
No hay generador de PDF: es la misma página, impresa. En papel no hay
pestañas ni plegados: salen los días seguidos, las piezas abiertas y,
al pie, la dirección del itinerario. Fuera todo lo que es de pantalla.
============================================================ */
.solo-papel{display:none}
@media print{
@page{margin:16mm 15mm 18mm}
html,body{background:#fff!important;color:#1b1916!important}
.terreno,.saltar,.explorador,.itinerario-acciones,.lead,.demo-atajo,.demo-abrir,.momento-ir,.itinerario-enlace-fila,
.demo-reglas summary span,.completo-mas summary,[data-ruta-estado]{display:none!important}
.solo-papel{display:block}
.wrap{max-width:none;padding:0}
.demo-fig{max-height:70mm;overflow:hidden;break-inside:avoid}
.demo-fig img{width:100%;height:70mm;object-fit:cover}
.demo-lista,.demo-reglas{border:0}
.demo-lista > .demo-days,.demo-reglas > ul,.completo-mas > *{display:block!important}
details.completo-mas,details.demo-reglas,details.demo-lista{display:block}
.demo-day,.demo-zona,.momento,.completo-lista li,.demo-panel li,.cifra{break-inside:avoid}
.completo{display:block}
.completo-panel,.demo-panel{break-before:auto;break-inside:auto}
.demo-panel h3,.completo-panel h3,.kicker{break-after:avoid}
.momentos-lista{display:block}
.momento{display:block;border:0;padding:6px 0;text-align:left;background:none;color:inherit}
a{color:inherit;text-decoration:none}
.itinerario-enlace{border-top:1px solid #999}
.papel-enlace{font-variant-numeric:tabular-nums;font-size:12pt;margin:6px 0;overflow-wrap:anywhere;word-break:break-all}
}
/* ---- Cambiar un plan por una idea del día ---- */
.dia-cambiar{margin-top:14px;padding-top:12px;border-top:1px dashed var(--linea);font-size:14px;color:var(--tinta-suave)}
.dia-cambiar p{margin:6px 0}
.dia-cambiar p span{color:var(--tinta)}
.dia-cambiar button.enlace{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.dia-cambiar button.enlace:hover{color:var(--tinta)}}
.dia-cambiar button.enlace:disabled{opacity:.5;cursor:default}
.dia-cambiar button.enlace:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
@media print{.dia-cambiar{display:none!important}}
/* ============================================================
22 La pantalla del viaje (ruta/, lib/viaje.js)
Una sola pantalla que llena lo que queda bajo la cabecera: el mapa con la
ruta, y detrás del menú los días, las reservas, el presupuesto y el
itinerario en texto de siempre. Móvil primero: el menú va abajo; en
pantallas anchas sube y la hoja del mapa se vuelve un panel lateral.
============================================================ */
/* Con la pantalla montada, la página deja de ser una hoja con margen: la
pantalla ocupa todo lo que hay bajo la cabecera. */
body:not(.portada) main:has(.vj:not([hidden])){width:100%;margin:0;border:0;box-shadow:none}
body:has(.vj:not([hidden])) > .pie{display:none}
.vj-legal{padding:24px 16px 0;font-size:13px;color:var(--tinta-suave);text-align:center}
.vj-legal a{color:inherit}
.vj{display:flex;flex-direction:column;height:calc(100dvh - var(--vj-arriba,0px));min-height:480px;overflow:hidden;background:var(--papel)}
.vj[hidden]{display:none}
.vj button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.vj h1,.vj h2,.vj h3,.vj h4,.vj p,.vj ul,.vj ol{margin:0}
.vj ul,.vj ol{padding:0;list-style:none}
.vj .suave{color:var(--tinta-suave)}
.vj-kicker{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:6px}
.vj-cab{padding:10px 16px;border-bottom:1px solid var(--linea);flex:none;display:flex;align-items:center;gap:12px}
.vj-cab > div:first-child{flex:1;min-width:0}
.vj-cab-acciones{flex:none}
.vj-cab-acciones:empty{display:none}
.vj .vj-perfil{display:inline-flex;align-items:center;min-height:34px;padding:5px 12px;border-radius:999px;border:1px solid var(--linea-control);font-size:13px;color:inherit;text-decoration:none;white-space:nowrap}
.vj .vj-perfil:disabled{opacity:.6}
.vj-cab h1{font-family:var(--titular);font-weight:400;font-size:20px;line-height:1.2;text-wrap:balance;letter-spacing:0}
.vj-cab p{font-size:13px;color:var(--tinta-suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vj-menu{display:flex;flex:none;order:3;border-top:1px solid var(--linea);background:var(--papel);padding-bottom:env(safe-area-inset-bottom)}
.vj-menu button{flex:1;min-width:0;padding:8px 2px 9px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;color:var(--tinta-suave);position:relative}
.vj-menu svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.vj-menu button[aria-current="page"]{color:var(--tinta)}
.vj-menu button[aria-current="page"]::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:2px;background:var(--ruta)}
.vj-cuenta{position:absolute;top:4px;left:calc(50% + 8px);min-width:16px;height:16px;border-radius:8px;background:var(--acento);color:var(--tinta);font-size:10.5px;line-height:16px;padding:0 4px;font-variant-numeric:tabular-nums}
.vj-cuenta[hidden]{display:none}
.vj-vistas{flex:1;min-height:0;position:relative;order:2}
.vj-vista{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch}
.vj-vista[hidden]{display:none}
.vj-columna{max-width:720px;margin:0 auto;padding:20px 16px 40px;display:flex;flex-direction:column;gap:20px}
.vj-columna > header h2{font-family:var(--titular);font-weight:400;font-size:26px;line-height:1.15;letter-spacing:0}
.vj-columna > header p{color:var(--tinta-suave);margin-top:4px;max-width:60ch}
#vj-texto{padding:0 0 40px}
#vj-texto .demo{margin-top:24px}
/* El mapa */
#vj-mapa{overflow:hidden;background:var(--mar)}
.vj-mapa{width:100%;height:100%;display:block;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.vj-mapa.arrastra{cursor:grabbing}
.vj-sin-mapa{position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);text-align:center;color:var(--tinta-suave)}
.vj-sin-mapa[hidden]{display:none}
.vj-m-vecinos{fill:var(--tierra-vecina);stroke:none}
.vj-m-pais{fill:var(--tierra);stroke:var(--costa);stroke-width:.8;vector-effect:non-scaling-stroke;stroke-linejoin:round}
/* El mapa del día (W-068): sin la ruta ni las paradas, cada plan del día con su número. */
#vj-mapa.con-dia [data-capa="ruta"],#vj-mapa.con-dia [data-capa="otras"],#vj-mapa.con-dia [data-capa="paradas"],#vj-mapa.con-dia .vj-capas [data-ver],#vj-mapa.con-dia .vj-leyenda{display:none}
#vj-mapa:not(.con-dia) [data-capa="dia"]{display:none}
.vj-m-dia-punto .fondo{fill:var(--superficie)}
.vj-m-dia-punto .punto{fill:var(--oliva)}
.vj-m-dia-punto text{fill:var(--superficie);font:700 14px var(--letra);letter-spacing:0}
.vj-m-dia-punto .zona{fill:var(--oliva);fill-opacity:.1;stroke:var(--oliva);stroke-opacity:.4;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.vj-escala{position:absolute;left:20px;bottom:18px;padding-bottom:6px;font-size:12px;line-height:1;color:var(--tinta-suave);text-align:center;pointer-events:none}
.vj-escala::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;border:1.5px solid var(--tinta-suave);border-top:0}
.vj-escala[hidden]{display:none}
/* El mapa con calles (W-069): encima del dibujo, que se esconde; los puntos, iguales que los del dibujo. */
#vj-mapa .vj-calles{position:absolute;display:none} /* maplibre-gl.css le pone position:relative */
#vj-mapa.con-calles .vj-calles{display:block}
#vj-mapa.con-calles svg.vj-mapa{visibility:hidden}
.vj-calle-punto{display:grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:13px;background:var(--oliva);color:var(--superficie);font:700 13px/1 var(--letra);letter-spacing:0;box-shadow:0 0 0 3px var(--superficie);cursor:default}
.vj-calle-punto.zona{box-shadow:0 0 0 3px var(--superficie),0 0 0 22px color-mix(in srgb,var(--oliva) 12%,transparent)}
.vj-calles .maplibregl-ctrl-attrib{font:12px var(--letra);background:color-mix(in srgb,var(--superficie) 85%,transparent)}
.vj-plan-num{display:inline-block;flex:none;width:22px;height:22px;margin-right:10px;border-radius:50%;background:var(--oliva);color:var(--superficie);font:700 12px/22px var(--letra);letter-spacing:0;text-align:center;text-transform:none}
.vj-acto-momento:has(.vj-plan-num){display:flex;align-items:center}
/* El día, ligero (W-071): la foto de la parada, el día y sus planes en una línea cada uno, que se abren. */
.vj-dia-cab{display:flex;flex-direction:column;gap:12px}
.vj-dia-cab.con-foto{position:relative;gap:0}
.vj-dia-cab.con-foto .vj-dia-foto{aspect-ratio:5/2}
.vj-dia-cab.con-foto .vj-dia-titulo{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 12px;border-radius:0 0 16px 16px;background:linear-gradient(transparent,rgba(20,18,15,.72));color:#fff}
.vj-dia-cab.con-foto .vj-dia-titulo p{color:rgba(255,255,255,.85)}
.vj-fila-dato{font-size:13.5px;color:var(--tinta-suave)}
/* Las barras del móvil, juntas (W-071): la del viaje en una línea, y la de la hoja sin repetir el día cuando está abierta. */
@media (max-width:959px){
[data-ligera] .vj-cab{padding-top:8px;padding-bottom:8px;gap:8px;align-items:center}
[data-ligera] .vj-cab h1{font-size:17px}
[data-ligera] .vj-cab h1+p{display:none}
[data-ligera] .vj-cab .vj-urg{font-size:0;gap:0;padding:8px;width:40px;height:40px;justify-content:center}
[data-ligera] .vj-cab .vj-urg svg{width:20px;height:20px}
[data-ligera] .vj-cab-acciones .vj-btn,[data-ligera] .vj-cab-acciones button,[data-ligera] .vj-cab-acciones a{font-size:13px;padding:8px 12px}
[data-ligera] .vj-portada-hoja:not([data-plegada]) [data-asa-sub]{display:none}
}
.vj-dia-foto{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:16px;background:var(--papel-oscuro)}
.vj-dia-titulo h2{margin:0}.vj-dia-titulo p{margin:2px 0 0;color:var(--tinta-suave)}
.vj-planes-dia{list-style:none;margin:8px 0 0;padding:0}
.vj-fila{border-bottom:1px solid var(--linea)}
.vj-fila>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 0;cursor:pointer;min-height:56px}
.vj-fila>summary::-webkit-details-marker{display:none}
.vj-fila>summary::after{content:"";flex:none;width:8px;height:8px;margin-left:auto;border-right:1.5px solid var(--tinta-suave);border-bottom:1.5px solid var(--tinta-suave);transform:rotate(45deg);transition:transform .2s}
.vj-fila[open]>summary::after{transform:rotate(225deg)}
.vj-fila-t{display:flex;flex-direction:column;gap:2px;font-size:17px;line-height:1.3;min-width:0}
.vj-fila-t small{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ocre-texto)}
.vj-plan-marca{flex:none;width:24px;height:24px}
.vj-plan-marca:not(.vj-plan-num){border:1.5px dashed var(--linea);border-radius:50%}
.vj-fila>.vj-acto,.vj-fila>:not(summary){margin-bottom:14px}
.vj-plan-fila .vj-acto>.vj-acto-momento,.vj-plan-fila .vj-acto>h4{display:none} /* ya van en la fila */
.vj-fila-camino .vj-fila-t{font-weight:600;font-size:16px}
.vj-mas-hoy{margin-top:12px}.vj-mas-hoy .vj-fila-t{font-weight:600}
.vj-dia-libre{color:var(--tinta-suave)}
.vj-acto-foto{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px;margin:0 0 14px;background:var(--papel-oscuro)}
.vj-plan-sin{margin:.2em 0 .4em;font-size:.88em;color:var(--tinta-suave)}
.vj-m-tramo{fill:none;stroke:var(--ruta);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linecap:round}
.vj-m-tramo.aire{stroke-dasharray:7 6}
.vj-m-tramo.agua{stroke-dasharray:1 6}
.vj-m-tramo-toque{fill:none;stroke:transparent;stroke-width:26;vector-effect:non-scaling-stroke;cursor:pointer}
.vj-m-tramo-g.activo .vj-m-tramo{stroke-width:4.5}
.vj-m-horas rect{fill:var(--papel);stroke:var(--ruta);stroke-width:1}
.vj-m-horas text{font:500 11px var(--letra);fill:var(--tinta);text-anchor:middle;dominant-baseline:central}
.vj-m-parada{cursor:pointer}
.vj-m-parada circle.cuerpo{fill:var(--ruta);stroke:var(--papel);stroke-width:2.5}
.vj-m-parada text.n{font:500 14px var(--letra);fill:var(--ruta-texto);text-anchor:middle;dominant-baseline:central}
.vj-m-parada text.nombre{font:400 17px var(--titular);fill:var(--tinta);paint-order:stroke;stroke:var(--mar);stroke-width:4px;stroke-linejoin:round}
.vj-m-parada text.dias{font:400 12px var(--letra);fill:var(--tinta-suave);paint-order:stroke;stroke:var(--mar);stroke-width:4px;stroke-linejoin:round}
.vj-m-parada .halo{fill:none;stroke:var(--ruta);stroke-width:1.5;opacity:0}
.vj-m-parada.activo .halo{opacity:.7}
/* La parada de hoy, con la fecha puesta (K3) */
.vj-m-parada.hoy .halo{opacity:1;stroke:var(--ocre);stroke-width:3}
.vj-tira button.hoy{border-color:var(--ocre)}
.vj-tira button.hoy small::after{content:" · hoy estás aquí"}
.vj-mapas{font-size:13.5px;color:var(--tinta-suave)}
.vj-mapas a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.vj-m-aero circle{fill:var(--papel);stroke:var(--tinta);stroke-width:1.2}
.vj-m-aero path{fill:var(--tinta)}
.vj-m-aero text{font:400 11.5px var(--letra);fill:var(--tinta-suave);paint-order:stroke;stroke:var(--mar);stroke-width:4px;stroke-linejoin:round}
/* Donde se cambia de tren, de barco o de avión: ni es parada ni se duerme ahí,
así que es un rombo pequeño y sin nombre encima. El nombre va en la hoja. */
.vj-m-cambio path{fill:var(--papel);stroke:var(--tinta-suave);stroke-width:1.4}
.vj-patas{margin:.5rem 0 0;padding-left:1.1rem;display:grid;gap:.35rem;font-size:.92rem;color:var(--tinta-suave)}
.vj-patas b{color:var(--tinta);font-weight:600}
.vj-cambio-en{display:block;font-size:.85rem;color:var(--tinta-suave)}
.vj-traslado + .vj-patas{margin-top:.15rem}
.vj-m-otra{cursor:pointer}
.vj-m-otra circle.p{fill:var(--mar);stroke:var(--tinta-suave);stroke-width:1.4}
.vj-m-otra.encaja circle.p{stroke:var(--ocre);stroke-width:2}
.vj-m-otra circle.toque{fill:transparent}
.vj-m-otra.activo circle.p{fill:var(--ocre)}
.vj-m-otra text{font:400 12.5px var(--letra);fill:var(--tinta);paint-order:stroke;stroke:var(--mar);stroke-width:4px;stroke-linejoin:round;opacity:0}
.vj-m-otra.activo text{opacity:1}
.vj-mapa [data-capa][hidden]{display:none}
.vj-mapa :focus-visible{outline:none}
.vj-mapa .vj-m-parada:focus-visible .halo,.vj-mapa .vj-m-otra:focus-visible circle.p{stroke:var(--tinta);opacity:1}
.vj-mapa-arriba{position:absolute;top:12px;left:12px;right:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;pointer-events:none}
.vj-capas{width:100%;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none}
.vj-capas[hidden]{display:none}
.vj-capas button{pointer-events:auto;background:var(--hoja);border:1px solid var(--linea-control);border-radius:999px;padding:6px 12px 6px 10px;font-size:13.5px;display:inline-flex;align-items:center;gap:7px;min-height:34px}
.vj-capas button i{width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;display:block}
.vj-capas button[aria-pressed="true"] i{background:currentColor}
.vj-capas button[aria-pressed="false"]{color:var(--tinta-suave);border-color:var(--linea-suave)}
.vj-capas .encuadre{margin-left:auto;padding:6px 12px}
.vj-leyenda{display:flex;flex-wrap:wrap;gap:6px 12px;max-width:100%;font-size:12px;color:var(--tinta-suave);background:var(--hoja);border-radius:6px;padding:3px 8px}
.vj-leyenda[hidden]{display:none}
.vj-leyenda span{display:inline-flex;align-items:center;gap:5px}
.vj-leyenda svg{width:26px;height:6px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.vj-tira{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;padding:10px 12px;overflow-x:auto;scrollbar-width:none}
.vj-tira[hidden]{display:none}
.vj-tira::-webkit-scrollbar{display:none}
.vj-tira button{flex:none;background:var(--hoja);border:1px solid var(--hoja-borde);border-radius:12px;padding:8px 12px;display:flex;align-items:center;gap:10px;text-align:left;box-shadow:0 2px 10px var(--sombra)}
.vj-tira .n,.vj-hoja-cab .n,.vj-parada-bloque .n{width:24px;height:24px;border-radius:50%;background:var(--ruta);color:var(--ruta-texto);display:grid;place-items:center;font:500 13px var(--letra);flex:none}
.vj-tira b{display:block;font-family:var(--titular);font-weight:400;font-size:16px;line-height:1.15}
.vj-tira small{font-size:12.5px;color:var(--tinta-suave)}
.vj-hoja{position:absolute;left:0;right:0;bottom:0;max-height:66%;background:var(--hoja);border-top:1px solid var(--hoja-borde);border-radius:16px 16px 0 0;box-shadow:0 -6px 24px var(--sombra);overflow:auto;padding:14px 16px 20px;display:flex;flex-direction:column;gap:14px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.vj-hoja[hidden]{display:none}
.vj-hoja-cab{display:flex;align-items:flex-start;gap:12px}
.vj-hoja-cab .n{width:32px;height:32px;font-size:15px;margin-top:2px}
.vj-hoja-cab h2{font-family:var(--titular);font-weight:400;font-size:24px;line-height:1.15;letter-spacing:0}
.vj-hoja-cab p{font-size:13.5px;color:var(--tinta-suave)}
.vj-hoja-cab .cerrar{margin-left:auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--linea-control);display:grid;place-items:center;flex:none;font-size:18px;line-height:1}
.vj-cifras{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vj-cifras div{border:1px solid var(--linea-suave);border-radius:10px;padding:9px 12px}
.vj-cifras b{display:block;font-family:var(--titular);font-weight:400;font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums}
.vj-cifras span{font-size:12.5px;color:var(--tinta-suave);display:block;margin-top:2px}
.vj-ejes{display:flex;flex-wrap:wrap;gap:8px}
.vj-eje{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:4px 12px 4px 6px;border:1px solid var(--ruta);font-size:13.5px}
.vj-eje svg{width:24px;height:24px;fill:none;stroke:var(--ruta);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.vj-hoja-resumen{font-size:14.5px;color:var(--tinta-suave);max-width:62ch}
.vj-hoja-dias details{border-top:1px solid var(--linea-suave)}
.vj-hoja-dias details:last-child{border-bottom:1px solid var(--linea-suave)}
.vj-hoja-dias summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:8px;padding:9px 0;font-size:14.5px}
.vj-hoja-dias summary::-webkit-details-marker{display:none}
.vj-hoja-dias summary::after{content:"+";margin-left:auto;color:var(--tinta-suave);font-size:17px;line-height:1}
.vj-hoja-dias details[open] summary::after{content:"–"}
.vj-hoja-dias summary small{color:var(--tinta-suave);font-size:12.5px}
.vj-hoja-dias li{font-size:14px;padding:0 0 8px 14px;position:relative}
.vj-hoja-dias li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--ruta)}
.vj-cap{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-top:1px solid var(--linea-suave)}
.vj-cap h3{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-suave)}
.vj-cap p{font-size:14px;line-height:1.5;max-width:62ch}
.vj-hoja-pie{display:flex;flex-wrap:wrap;gap:8px}
.vj .vj-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:8px 16px;border-radius:999px;border:1px solid var(--linea-control);font-size:14.5px;text-align:center;max-width:100%}
.vj .vj-btn.lleno{background:var(--boton);color:var(--boton-texto);border-color:transparent}
/* Días */
.vj-parada-bloque{display:flex;flex-direction:column;gap:12px;scroll-margin-top:0}
.vj-parada-bloque > h3{font-family:var(--titular);font-weight:400;font-size:21px;letter-spacing:0;display:flex;align-items:center;gap:10px;position:sticky;top:0;background:var(--papel);padding:8px 0;z-index:1;border-bottom:1px solid var(--linea)}
.vj-parada-bloque > h3 .n{width:26px;height:26px}
.vj-parada-bloque > h3 small{font:400 13px var(--letra);color:var(--tinta-suave);margin-left:auto}
/* Los días van plegados (W-020): cerrado se lee la lista entera de un vistazo. */
.vj-dia{border-bottom:1px solid var(--linea-suave)}
.vj-dia > summary{display:grid;grid-template-columns:44px 1fr auto;gap:4px 12px;align-items:baseline;padding:12px 0;cursor:pointer;list-style:none}
.vj-dia > summary::-webkit-details-marker{display:none}
.vj-dia > summary::after{content:"+";color:var(--tinta-suave);font-size:18px;line-height:1;align-self:center}
.vj-dia[open] > summary::after{content:"–"}
.vj-dia > summary:focus-visible{outline:2px solid var(--ruta);outline-offset:2px}
.vj-dia-num{font-family:var(--titular);font-size:28px;line-height:1;text-align:right;font-variant-numeric:tabular-nums}
.vj-dia-num small{display:block;font:400 10.5px var(--letra);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:2px}
.vj-dia-res{display:flex;flex-direction:column;gap:2px;min-width:0}
.vj-dia-res b{font:400 16px/1.3 var(--titular);letter-spacing:0}
.vj-dia-cuerpo{display:flex;flex-direction:column;gap:10px;padding:2px 0 18px 56px}
.vj-dia-etq{font-size:12.5px;color:var(--tinta-suave)}
.vj-practico{font-size:13.5px;line-height:1.5;color:var(--tinta-suave);max-width:62ch;border-left:2px solid var(--linea);padding-left:10px}
.vj-temporada{font-size:13px;color:var(--tinta-suave);max-width:62ch}
.vj-temporada b{font-weight:500;color:var(--tinta)}
.vj-tramo-nota{font-size:13px;color:var(--tinta-suave);max-width:62ch;padding-left:26px}
.vj-acto{display:flex;flex-direction:column;gap:4px}
.vj-acto-momento{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ocre-texto)}
.vj-acto h4{font:400 17px/1.25 var(--titular);letter-spacing:0}
.vj-acto p{font-size:14px;color:var(--tinta-suave);max-width:62ch}
.vj-acto .porque{font-style:italic;font-family:var(--titular)}
.vj-ideas{font-size:13.5px;color:var(--tinta-suave);border-left:2px solid var(--linea);padding-left:10px;display:flex;flex-direction:column;gap:3px}
.vj-ideas b{font-weight:500;color:var(--tinta)}
.vj-traslado{font-size:13.5px;display:flex;gap:8px;align-items:center;color:var(--tinta-suave)}
.vj-traslado svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}
/* Reservas */
.vj-reserva{padding:14px 0;border-bottom:1px solid var(--linea-suave);display:flex;flex-direction:column;gap:6px}
.vj-reserva h3{font:400 17px/1.25 var(--titular);letter-spacing:0}
.vj-reserva p{font-size:14px;color:var(--tinta-suave);max-width:62ch}
.vj-nota{font-size:13.5px;color:var(--tinta-suave);max-width:62ch}
/* La guía: Preparar y Más.
Un bloque por asunto, con la fuente y la fecha debajo: lo que se lee cuando
algo sale mal tiene que verse de un vistazo y poder tocarse para llamar. */
.vj-fecha-campo{display:flex;flex-direction:column;gap:5px;max-width:20ch}
.vj-fecha-campo label{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-suave)}
.vj-fecha input[type="date"]{font:inherit;font-size:16px;min-height:44px;padding:8px 12px;border:1px solid var(--linea-control);border-radius:10px;background:var(--papel);color:var(--tinta)}
/* «Lo tuyo»: el acento significa siempre lo que ha puesto el viajero (W-020). */
/* Por dónde se entra y se sale: una opción por fila, con lo que cuesta cada una. */
.vj-aero-lista{display:flex;flex-direction:column;gap:2px}
.vj-aero-op{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-top:1px solid var(--linea-suave)}
.vj-aero-op b{font:400 16px/1.25 var(--titular);letter-spacing:0}
.vj-aero-op.elegido{border-left:2px solid var(--ocre);padding-left:10px}
.vj-aero-estado{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ocre-texto)}
.vj-aero .vj-hoja-pie{margin-top:4px}
.vj-mio{margin-top:4px}
.vj-mio-papel,.vj-pie-papel{display:none}
.vj-mio > summary{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tinta-suave);cursor:pointer;list-style:none;padding:4px 0}
.vj-mio > summary::-webkit-details-marker{display:none}
.vj-mio > summary > span:first-child{border-bottom:1px dotted var(--linea-control)}
.vj-mio-eco{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ocre-texto)}
.vj-mio-eco[hidden]{display:none}
.vj-mio-campo{display:flex;flex-direction:column;gap:4px;margin:6px 0}
.vj-mio-campo span{font-size:12.5px;color:var(--tinta-suave)}
.vj-mio textarea{font:inherit;font-size:16px;padding:8px 10px;border:1px solid var(--linea-control);border-radius:10px;background:var(--papel);color:var(--tinta);resize:vertical;min-height:44px}
.vj-mio textarea:focus-visible{outline:2px solid var(--ocre);outline-offset:1px}
.vj-mueve{font-size:14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--tinta-suave)}
.vj-mueve select{font:inherit;font-size:15px;min-height:38px;padding:4px 8px;border:1px solid var(--linea-control);border-radius:8px;background:var(--papel);color:var(--tinta)}
.vj-mueve .vj-nota{flex-basis:100%}
/* La vista previa (W-047): ver la guía como otro momento del viaje */
.vj-previa{margin:0 0 18px}
.vj-previa-campo{font-size:14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--tinta-suave);margin:0}
.vj-previa-campo select{font:inherit;font-size:15px;min-height:38px;padding:4px 8px;border:1px solid var(--linea-control);border-radius:8px;background:var(--papel);color:var(--tinta);max-width:100%}
.vj-previa-aviso{font-size:14px;color:var(--ocre-texto);border-left:2px solid var(--ocre);padding-left:10px;margin:10px 0 0}
.vj-previa-aviso .vj-btn{margin-top:6px}
.vj-cuenta-atras{font-family:var(--titular);font-size:24px;color:var(--tinta)!important}
.vj-aviso-mes{font-size:14px;color:var(--ocre-texto)!important;border-left:2px solid var(--ocre);padding-left:10px}
.vj-portada h2{font-size:34px;line-height:1.05}
.vj-portada p{max-width:46ch}
.vj-blq{display:flex;flex-direction:column;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--linea-suave)}
.vj-blq > h3,.vj-ficha > h3{font:400 19px/1.2 var(--titular);letter-spacing:0}
.vj-urgencias h4{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-suave);margin-top:6px}
.vj-reserva h4{font:400 17px/1.25 var(--titular);letter-spacing:0}
.vj-ficha{display:flex;flex-direction:column;gap:7px;padding-bottom:16px;border-bottom:1px solid var(--linea-suave)}
.vj-ficha p,.vj-blq > p{font-size:14.5px;line-height:1.55;color:var(--tinta-suave);max-width:62ch}
.vj-fuente{font-size:12.5px;color:var(--tinta-suave);opacity:.85}
.vj-fuente a{color:inherit}
.vj-lista{display:flex;flex-direction:column;gap:9px}
.vj-lista li{font-size:14px;line-height:1.5;color:var(--tinta-suave);padding-left:14px;position:relative;max-width:62ch}
.vj-lista li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--ocre)}
.vj-cambio{font-family:var(--titular);font-size:20px;color:var(--tinta)!important}
.vj-urgencias ul{display:flex;flex-direction:column;gap:10px}
.vj-urgencias li{font-size:14.5px;display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline}
.vj-urgencias li b{font-family:var(--titular);font-size:21px;font-variant-numeric:tabular-nums}
.vj-urgencias li a{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--linea-control)}
.vj-urgencias li .vj-nota{flex-basis:100%;margin-top:2px}
.vj-consulado{display:flex;flex-direction:column;gap:4px;padding:10px 0;border-top:1px solid var(--linea-suave)}
.vj-consulado h5{font:400 16px/1.25 var(--titular);letter-spacing:0}
.vj-consulado p{font-size:14px;color:var(--tinta-suave)}
.vj-consulado a{color:inherit}
.vj-mas-texto{border-top:1px solid var(--linea)}
.vj-mas-texto > summary{padding:14px 0;font-size:14.5px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.vj-mas-texto > summary::-webkit-details-marker{display:none}
.vj-mas-texto > summary::after{content:"+";margin-left:auto;color:var(--tinta-suave)}
.vj-mas-texto[open] > summary::after{content:"–"}
/* Marcas del grupo: «me apetece» y «reservado» */
.vj .vj-marca{align-self:flex-start;margin-top:2px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linea-control);border-radius:999px;padding:4px 12px 4px 9px;font-size:13px;min-height:32px}
.vj-marca svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.vj-marca i{width:14px;height:14px;border-radius:4px;border:1.5px solid currentColor;display:grid;place-items:center;font-style:normal;font-size:11px;line-height:1}
.vj-marca[aria-pressed="true"]{background:var(--boton);color:var(--boton-texto);border-color:transparent}
.vj-marca[aria-pressed="true"] svg{fill:currentColor}
.vj-marca[aria-pressed="true"] .suave{color:inherit;opacity:.8}
.vj-marca:disabled{cursor:default}
.vj-marca:disabled[aria-pressed="false"]{color:var(--tinta-suave);border-style:dashed}
.vj-reserva.hecha h3{text-decoration:line-through;text-decoration-thickness:1px;color:var(--tinta-suave)}
.vj-progreso{height:6px;border-radius:3px;background:var(--papel-oscuro);overflow:hidden;margin-top:6px}
.vj-progreso i{display:block;height:100%;background:var(--ruta);transition:width .3s}
.vj-aviso{font-size:13.5px;color:var(--ocre-texto)}
.vj-aviso[hidden]{display:none}
/* La guía: en un minuto, la víspera, mañana y urgencias a un toque */
.vj .vj-urg{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid var(--ocre);color:var(--ocre-texto);font-size:13.5px;flex:none;align-self:center}
.vj .vj-urg svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.vj-minuto ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14.5px}
.vj .vj-ver{font-size:13px;color:var(--tinta-suave);text-decoration:underline;text-underline-offset:3px;padding:0 2px}
.vj-ficha-plegada{margin-top:4px;font-size:13.5px;color:var(--tinta-suave)}
.vj-ficha-plegada summary{cursor:pointer}
.vj-vispera li{display:flex;flex-direction:column;gap:4px}
.vj-llegada h4,.vj-manana h4{font-size:14px;font-weight:500;margin-top:6px}
/* La llegada paso a paso (W-049): el vuelo, dónde se aterriza, cómo se sigue y la primera noche */
.vj-pasos{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.vj-pasos > li{display:grid;grid-template-columns:88px minmax(0,1fr);gap:4px 12px;align-items:baseline}
.vj-paso{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ocre-texto)}
.vj-pasos > li > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.vj-pasos p{font-size:14px;max-width:62ch}
.vj-pasos b{font-weight:500}
.vj-pasos .vj-tramo-nota,.vj-pasos .vj-fuente{padding-left:0;font-size:13px}
.vj-llegada-dia{display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--linea);padding-left:12px;margin-bottom:6px}
@media (max-width:520px){.vj-pasos > li{grid-template-columns:minmax(0,1fr)}}
.vj-ficha-plan{font-size:13px;color:var(--tinta-suave);margin-top:2px}
.vj-marcas{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.vj-contado h4{font-size:15px;font-weight:500;margin-top:8px}
.vj-contado p{font-size:14px}
.vj-plazo{font-size:13.5px;color:var(--tinta-suave)}
.vj-plazo.pronto,.vj-plazo.pasado{color:var(--ocre-texto)}
.vj-plazo a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
/* Cambiar un plan desde Días y Hoy */
.vj-cambiar{border-top:1px dashed var(--linea-suave);padding-top:10px;margin-top:8px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.vj-cambiar .vj-hoja-pie .vj-btn{min-height:36px;font-size:13.5px}
/* Cambiar paradas (25-09-2026): la hoja con tus paradas, las recomendadas y el resto */
.vj-tira .vj-tira-zonas{border-style:dashed}
.vj-tira .vj-tira-zonas .n{background:transparent;color:var(--tinta);border:1px solid var(--linea-control)}
.vj-zonas-ruta{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.vj-zona-fila{border:1px solid var(--linea-suave);border-radius:12px;padding:8px 10px}
.vj-zona-fila.confirmando{border-color:var(--ocre)}
.vj-zona-cab{display:flex;align-items:center;gap:10px}
.vj-zona-cab .n{width:24px;height:24px;border-radius:50%;background:var(--ruta);color:var(--ruta-texto);display:grid;place-items:center;font:500 13px var(--sans);flex:none}
.vj-zona-cab b{display:block;font-weight:500;font-size:15px;line-height:1.2}
.vj-zona-cab small{font-size:12.5px;color:var(--tinta-suave)}
.vj-zona-acciones{margin-left:auto;display:flex;gap:6px;flex:none}
.vj .vj-mini{min-width:36px;min-height:36px;padding:4px 10px;border-radius:999px;border:1px solid var(--linea-control);font-size:13.5px;line-height:1}
.vj .vj-mini:disabled{opacity:.35;cursor:default}
.vj-zona-confirma{margin-top:10px;display:flex;flex-direction:column;gap:8px;font-size:14px}
/* Días por parada (26-09-2026): − 3 días + en cada fila de «Tus paradas». */
.vj-zona-dias{display:flex;align-items:center;gap:10px;margin:6px 0 0 34px}
.vj-dias-n{font-size:14px;font-weight:500;min-width:56px;text-align:center}
.vj-zona-confirma .vj-hoja-pie{flex-wrap:wrap}
.vj-zona{border-top:1px solid var(--linea-suave);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.vj-zona header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vj-zona header b{font-weight:500;font-size:15.5px}
/* W-155: el país de la parada, en un viaje de varios países */
.vj-zona header .vj-zona-pais{font-size:12.5px;color:var(--tinta-suave)}
.vj-tramo-mano{margin-top:10px;display:grid;gap:8px}
.vj-tramo-mano h3{font-size:14px;font-weight:500;margin:0}
.vj-encaja{font-size:12.5px;color:var(--tinta-suave)}
.vj-encaja.si{color:var(--ruta)}
.vj-encaja.no{color:var(--ocre-texto)}
.vj-zona-porque{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px}
.vj-zona-porque li{padding-left:18px;position:relative}
.vj-zona-porque li::before{position:absolute;left:0;top:0;color:var(--tinta-suave)}
.vj-zona-porque .a-favor::before{content:"+";color:var(--ruta)}
.vj-zona-porque .en-contra::before{content:"−";color:var(--ocre-texto)}
.vj-zona-porque .dato{color:var(--tinta-suave)}
.vj-zona-porque .dato::before{content:"·"}
.vj-seccion-t + .vj-zona{border-top:0;padding-top:0}
.vj-zonas-resto summary{cursor:pointer;font-size:14.5px;padding:8px 0}
.vj-zonas-resto[open] summary{margin-bottom:4px}
.vj-zonas-hecho{border-left:2px solid var(--ruta);padding:4px 0 4px 12px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.vj-zonas-hecho h3{font-size:16px;font-weight:500}
.vj-cambiado{border-left:2px solid var(--ocre);padding:6px 12px;font-size:14px;color:var(--tinta-suave);background:var(--capa-2)}
.vj-enlace{display:flex;gap:8px;align-items:center;border:1px solid var(--linea-control);border-radius:12px;padding:8px 8px 8px 12px}
.vj-enlace .vj-btn{flex:none;min-height:36px;padding:6px 14px}
.vj-enlace code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:13px ui-monospace,Menlo,monospace}
.vj-puede li{padding:6px 0 6px 22px;position:relative;font-size:14.5px}
.vj-puede li::before{content:"";position:absolute;left:4px;top:.85em;width:8px;height:2px;background:var(--ruta)}
/* Presupuesto */
.vj-total{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vj-total b{font:400 46px/1 var(--titular);letter-spacing:0;font-variant-numeric:tabular-nums}
.vj-total span{color:var(--tinta-suave)}
.vj-banda{position:relative;height:34px;margin-top:4px}
.vj-banda .eje{position:absolute;left:0;right:0;top:14px;height:6px;border-radius:3px;background:var(--papel-oscuro)}
.vj-banda .tramo{position:absolute;top:14px;height:6px;border-radius:3px;background:var(--ocre);opacity:.55}
.vj-banda .punto{position:absolute;top:9px;width:16px;height:16px;border-radius:50%;background:var(--ruta);border:2.5px solid var(--papel);transform:translateX(-50%)}
.vj-banda-pie{display:flex;justify-content:space-between;font-size:12.5px;color:var(--tinta-suave);font-variant-numeric:tabular-nums}
.vj-barras{display:flex;flex-direction:column;gap:12px}
.vj-barra{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:14.5px;font-variant-numeric:tabular-nums}
.vj-barra .pista{grid-column:1 / -1;height:8px;border-radius:4px;background:var(--papel-oscuro);overflow:hidden}
.vj-barra .pista i{display:block;height:100%;background:var(--ruta);border-radius:4px}
.vj-barra small{grid-column:1 / -1;font-size:12.5px;color:var(--tinta-suave)}
.vj-seccion-t{font:400 20px var(--titular);letter-spacing:0;padding-bottom:6px;border-bottom:1px solid var(--linea)}
/* Pantallas anchas: menú arriba, hoja como panel lateral */
@media (min-width:960px){
.vj-menu{order:1;border-top:0;border-bottom:1px solid var(--linea);justify-content:center;gap:8px;padding:0 24px}
.vj-menu button{flex:none;flex-direction:row;gap:8px;font-size:14px;padding:12px 16px}
.vj-menu button[aria-current="page"]::before{top:auto;bottom:-1px;left:12px;right:12px}
.vj-cuenta{position:static}
.vj-cab{padding:12px 24px}
.vj-cab h1{font-size:22px}
.vj-mapa-arriba{top:20px;left:24px;right:auto;max-width:calc(100% - 460px)}
.vj-tira{left:12px;right:auto;bottom:12px;max-width:calc(100% - 460px)}
.vj-hoja{left:auto;right:20px;top:20px;bottom:auto;width:400px;max-height:calc(100% - 40px);border-radius:16px;border:1px solid var(--hoja-borde);box-shadow:0 8px 30px var(--sombra)}
.vj-columna{padding-top:32px}
}
@media print{
/* La guía en papel (tanda 6). Se imprime la guía, no la pestaña de texto:
la portada con el mapa, los días abiertos —uno no se parte por la mitad—,
lo que hay que cerrar con su hueco para el localizador, y el país. Fuera
todo lo que solo sirve para tocar. */
@page{margin:14mm 12mm 16mm}
html,body{background:#fff!important;color:#1b1916!important}
.vj{height:auto;min-height:0;overflow:visible;display:block;background:#fff}
.vj-menu,.vj-cab-acciones,.vj-urg,.vj-ver,.vj-tira,.vj-capas,.vj-leyenda,.vj-hoja,.vj-fecha-campo,
.vj-mueve,.vj-previa,.vj-marca,.vj-mio > summary,.vj-mio textarea,.vj-mio .vj-nota,.vj-mas-texto,
.vj-hoja-pie,.vj-legal,.vj-cambiado{display:none!important}
.vj-vistas{position:static;display:block;min-height:0}
.vj-vista,.vj-vista[hidden]{position:static;display:block!important;overflow:visible}
.vj-columna{max-width:none;padding:0;gap:14px}
.vj-cab{border-bottom:1px solid #ccc;padding:0 0 8px}
#vj-mapa{break-after:page;background:none}
.vj-mapa{width:100%;height:130mm}
.vj-parada-bloque > h3{position:static;break-after:avoid}
.vj-dia{break-inside:avoid}
.vj-dia > summary::after{content:""}
.vj-dia-cuerpo{padding-left:44px}
.vj-blq,.vj-ficha,.vj-reserva,.vj-consulado,.vj-acto{break-inside:avoid}
.vj-blq > h3,.vj-ficha > h3{break-after:avoid}
#vj-dias,#vj-mas{break-before:page}
.vj-mio{display:block!important}
.vj-mio-papel{display:block}
.vj-mio-papel:empty::after{content:"Localizador: ";color:#777}
.vj-mio-papel:empty{border-bottom:1px solid #bbb;min-height:9mm}
.vj-pie-papel{display:block;margin-top:10mm;padding-top:4mm;border-top:1px solid #ccc;font-size:11px;color:#555}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#666;word-break:break-all}
.vj-papel{display:none}
/* «Lo justo»: qué hay que cerrar, los teléfonos y el consulado. Nada más. */
body[data-papel="esencial"] #vj-dias,
body[data-papel="esencial"] #vj-mapa,
body[data-papel="esencial"] #vj-mas .vj-ficha,
body[data-papel="esencial"] #vj-mas .vj-blq:not(.vj-urgencias),
body[data-papel="esencial"] #vj-preparar .vj-blq:not(.vj-fecha):not(:nth-of-type(1)){display:none!important}
}
/* ============================================================
23 El perfil (perfil.html; hasta el 26-09-2026, cuenta.html)
============================================================ */
.cuenta{display:flex;flex-direction:column;gap:28px;padding-top:24px;padding-bottom:64px}
.cuenta-pestanas{display:flex;flex-wrap:wrap;gap:8px}
.cuenta-pestana{font:inherit;font-size:14px;color:var(--tinta-suave);background:none;border:1px solid var(--linea-suave);border-radius:999px;padding:8px 14px;cursor:pointer}
.cuenta-pestana[aria-selected="true"]{color:var(--tinta);border-color:var(--tinta)}
.cuenta-form{display:grid;gap:16px;max-width:460px}
.cuenta-form h2{font-size:24px}
.cuenta-form .nota a{color:inherit}
.cuenta h3{font-size:22px;margin-top:8px}
.cuenta-viaje > div:first-child{display:grid;gap:4px}
.cuenta-viaje.ido strong{color:var(--tinta-suave)}
.cuenta button.enlace{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cuenta-mas summary{cursor:pointer;font-size:16px;font-weight:500;padding:8px 0}
.cuenta-mas .cuenta-form{margin:16px 0 24px}
/* ============================================================
23 Sistema de diseño de 2026 (W-032), fase 1
------------------------------------------------------------
Fuera la cartografía de adorno: el relieve de fondo, los relieves
pequeños, la cota con sus coordenadas y el símbolo de curvas de nivel
de los botones. La huella dibujada y el mapa del viaje se rehacen en
sus fases (DESIGN.md §13). El mar de fondo era de la web de noche.
============================================================ */
.terreno,.fondo-mar,.relieve-mini,[data-relieve-mini],.mapa-cota,.cota-mini,.esquina,.huella-fondo,.marca-cero,.pie .cota,.pie .coord{display:none !important}
.demo-panel{border-left-color:var(--linea)}
.lead-previa{border-left-color:var(--linea)}
.vj-hoja{border-radius:var(--radio)}
.vj-fecha input[type="date"],.vj-mio textarea,.vj-mueve select{border-radius:var(--radio-pequeno)}
/* El contenido va sobre el papel; lo que era un panel de cristal no es una hoja blanca */
body:not(.portada) main{background:transparent;border:0;box-shadow:none}
.hero-titulo{font-weight:600;letter-spacing:-.03em}
/* Lo que era Fraunces fino (300) pasa a 400 en el texto y a 500 en los titulares, y
las partes en cursiva de los titulares van rectas, en tinta suave (W-032) */
.cabecera-pagina h1,.legal h1,.recibido h1,.demo-head h2{font-weight:500}
.cabecera-pagina h1 em,.hero-titulo em,.demo-head h2 em{font-style:normal;font-weight:inherit;color:var(--tinta-suave)}
/* W-042: el presupuesto al abrir el viaje y en «Más» */
.vj-pres{background:var(--salvia);border-radius:20px;padding:16px 16px 14px;border-bottom:0}
.vj-pres > p{margin:0;font-size:14.5px}
.vj-pres .vj-total b{font-size:34px}
.vj-pres-filas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.vj-pres-filas li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--linea-suave);font-size:15px}
.vj-pres-filas li:first-child{border-top:0}
.vj-pres-filas span,.vj-pres-cambio h4 span{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.vj-pres-detalle{display:flex;flex-direction:column;gap:14px}
.vj-pres-cambio{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--linea-suave)}
.vj-pres-cambio h4{display:flex;justify-content:space-between;gap:12px;font-size:15.5px;margin:0}
.vj-pres-cambio p{margin:0;font-size:14px;color:var(--tinta-suave)}
.vj-pres-resultado{background:var(--papel);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.vj-pres-resultado p{color:var(--tinta);font-size:14.5px}
.vj-pres-nocabe{border-left:3px solid var(--ocre);padding-left:12px;display:flex;flex-direction:column;gap:8px}
.vj-pres-nocabe h4{margin:0;font-size:16px}
.vj-pres-nocabe p{margin:0;font-size:14.5px}
.vj-banda .antes{position:absolute;top:10px;width:12px;height:12px;border-radius:50%;border:2px solid var(--tinta-suave);background:var(--papel);transform:translateX(-50%)}
.vj-barra .pista{position:relative}
.vj-barra .pista s{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,var(--linea) 0 3px,transparent 3px 6px)}
.vj-pres .vj-btn{background:var(--superficie);color:var(--tinta)}
.vj-pres .vj-btn.lleno{background:var(--boton);color:var(--boton-texto)}
.vj-gama{display:inline-block;margin-left:6px;padding:0 8px;border:1px solid var(--linea);border-radius:999px;font-size:12px;color:var(--tinta-suave)}
@media (prefers-reduced-motion:no-preference){.vj-pres-resultado{animation:vj-pres-entra .2s ease-out}@keyframes vj-pres-entra{from{opacity:0;transform:translateY(-3px)}}}
/* Días, Reservas y Más, ligeros (W-071): la misma fila que en Hoy. */
.vj-parada-foto{display:block;width:100%;height:auto;aspect-ratio:5/2;object-fit:cover;border-radius:16px;background:var(--papel-oscuro)}
[data-ligera] .vj-dia-cuerpo{padding-left:0}
[data-ligera] .vj-dia-cuerpo .vj-planes-dia{margin:0}
.vj-dias-pie{margin-top:24px;display:flex;flex-direction:column;gap:6px}
.vj-dias-pie p{font-size:14px;color:var(--tinta-suave)}
.vj-fila-dato.pronto{color:var(--ocre-texto)}
.vj-reserva-fila.hecha .vj-fila-t{color:var(--tinta-suave)}
.vj-reserva-fila.hecha>summary .vj-fila-t:first-line{text-decoration:line-through;text-decoration-thickness:1px}
.vj-reserva-fila>p{font-size:14px;color:var(--tinta-suave);max-width:62ch}
.vj-mas-t{margin-bottom:4px}
.vj-mas-fila .vj-fila-t{font-weight:600;font-size:16px}
.vj-mas-fila .vj-fila-dato{font-weight:400}
.vj-mas-fila [data-mas]>header>h2,.vj-mas-fila .vj-aero>h3{display:none}
.vj-mas-fila>section{padding-top:0;border-top:0}