/* La portada (W-116, v3; es nausika/index.html desde D1, 30-10). Un solo motivo: el hilo. Blanco piedra, tinta casi negra, naranja solo en el hilo
   y en la acción. Cinco tamaños de letra: nombre, título, entrada, texto y pequeño. */

:root{
  --papel:#F0EFEC;          /* blanco piedra, el llano del relieve medido (W-116) */
  --superficie:#FFFFFF;
  --tierra:#E3E1DB;
  --tinta:#1B1A18;
  --tinta-2:#4A4741;
  --oliva:#404823;
  --acento:#F84E1E;
  --sobre-acento:#1B1A18;
  --tinta-suave:#4A4741;    /* lo usa el objeto de la huella (lib/marca.js) */
  --filtro-fondo:none;

  --margen:clamp(20px, 2.2vw, 32px);
  --fundido:clamp(160px, 22vh, 260px);
  /* Una sola familia de interfaces: la caja, el campo y el botón, cada uno con su esquina */
  --r-campo:14px;
  --flecha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234A4741' stroke-width='1.6'/%3E%3C/svg%3E");
  /* El cristal (Pablo, 28-10): deja ver el relieve, refractado y desenfocado, con un filo de luz arriba */
  --vidrio:rgba(255,255,255,.46);
  --vidrio-luz:rgba(255,255,255,.95);
  --vidrio-filo:rgba(255,255,255,.4);
  --vidrio-brillo:rgba(255,255,255,.55);
  --vidrio-pais:rgba(120,114,104,.16);
  --costa:rgba(27,26,24,.4);
  --vidrio-boton:rgba(255,255,255,.6);
  --r-vidrio:22px;
  --hueco:clamp(16px, 1.6vw, 28px);

  --t-pequeno:1rem;
  --t-texto:clamp(1.0625rem, 1.025rem + .15vw, 1.15625rem);
  --t-entrada:clamp(1.25rem, 1.0625rem + .6vw, 1.625rem);
  --t-titulo:clamp(2.125rem, 1.625rem + 2.2vw, 3.75rem);
  /* La primera pantalla, antes de que llegue la ruta: los valores que luego calcula portada.js (medidos el 29-10),
     para que nada se mueva al cargar. Ordenador; el móvil y la tableta, más abajo. */
  --t-nombre:calc((100vw - 2 * var(--margen)) * .1955);
  --mt-nombre:calc(9.6px - 4.54vw);
  --mt-lema:16px;
  --mt-traza:calc(34.33vw - 233.7px);

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --muelle:cubic-bezier(.34,1.5,.64,1);       /* un muelle con poco rebote (Emil: rebote 0,1-0,3), para lo que cae */
  --t-pulsar:140ms;
  --t-pasar:180ms;
  color-scheme:light;
}
html[data-tono=noche]{
  --papel:#3A3937;          /* gris carbón, el llano del relieve de noche medido (W-116, como la maqueta de Pablo) */
  --superficie:#474542;
  --tierra:#5A5753;
  --tinta:#F2F1EE;
  --tinta-2:#CFCAC0;
  --oliva:#B5C27A;
  --acento:#F84E1E;          /* de noche, el mismo naranja de la cuerda que de día */
  --sobre-acento:#1B1A18;
  --tinta-suave:#CFCAC0;
  --vidrio:rgba(52,51,49,.42);
  --flecha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23CFCAC0' stroke-width='1.6'/%3E%3C/svg%3E");
  --vidrio-luz:rgba(255,255,255,.3);
  --vidrio-filo:rgba(255,255,255,.14);
  --vidrio-brillo:rgba(255,255,255,.07);
  --vidrio-pais:rgba(52,51,49,.42);
  --costa:rgba(255,255,255,.32);
  --vidrio-boton:rgba(255,255,255,.14);
  color-scheme:dark;
}
/* La letra: General Sans, elegida por Pablo el 28-10 entre Chillax, General Sans y Red Hat. Servida desde nuestro
   servidor (Fontshare, licencia ITF Free Font: uso comercial y en web), solo los dos pesos que se usan. */
@font-face{font-family:"General Sans";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/general-sans-400.woff2") format("woff2")}
@font-face{font-family:"General Sans";font-weight:600;font-style:normal;font-display:swap;src:url("assets/fonts/general-sans-600.woff2") format("woff2")}
:root{--f-titulo:"General Sans",system-ui,sans-serif;--f-texto:"General Sans",system-ui,sans-serif}

*{box-sizing:border-box}
input,textarea{caret-color:var(--acento)}
html{background:var(--papel)}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 var(--t-texto)/1.5 var(--f-texto);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal}
h1,h2,h3,p{margin:0}
::selection{background:var(--acento);color:var(--sobre-acento)}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px;border-radius:6px}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:.07em}
button,input,select{font:inherit;color:inherit}

/* ---------- los selectores de la prueba ---------- */
.prueba{position:absolute;z-index:30;top:10px;right:var(--margen);display:flex;gap:28px;font-size:var(--t-pequeno)}
.prueba-grupo{display:flex;gap:14px}
.prueba button{min-height:44px;padding:0 2px;border:0;background:none;cursor:pointer;color:var(--tinta);
  text-decoration:underline 2px;text-decoration-color:transparent;text-underline-offset:.45em;
  transition:text-decoration-color var(--t-pasar) ease}
.prueba button[aria-pressed=true]{text-decoration-color:currentColor}
@media (hover:hover) and (pointer:fine){.prueba button:hover{text-decoration-color:var(--tinta-2)}.prueba button[aria-pressed=true]:hover{text-decoration-color:currentColor}}

/* ---------- el mundo: el relieve por pantallas y el hilo ---------- */
.mundo{position:relative;width:100%;aspect-ratio:2880/10800;overflow-x:clip;overflow-y:visible}
.fondo{position:absolute;inset:0}
/* El relieve no acaba en un corte: se funde con el papel antes del cierre, y el hilo con él. */
.fondo,.capa-bajo{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--fundido)),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - var(--fundido)),transparent)}
.fondo img{display:block;width:100%;height:auto;filter:var(--filtro-fondo)}
.capa{position:absolute;left:0;top:0;width:100%;height:var(--alto-mundo,100%);pointer-events:none;overflow:visible}
.contenido{position:relative;z-index:2;display:flow-root;padding:0 var(--margen) 1px;pointer-events:none}
/* Lo vacío del contenido no tapa el relieve: solo recibe el puntero lo que se lee o se toca */
.contenido :is(h1,h2,h3,p,ul,li,label,button,input,select,output,a,svg,form,.vidrio,.telefono,.mapa-vidrio,.pasos){pointer-events:auto}
.capa-bajo{z-index:1}

/* Un velo muy suave detrás del texto, para leer sobre el relieve: sin caja ni borde. */
.velo{position:relative;isolation:isolate}
.velo::before{content:"";position:absolute;inset:-.9em -1.2em;z-index:-1;background:var(--papel);opacity:.8;filter:blur(18px);border-radius:3em;pointer-events:none}

/* ---------- la primera pantalla ---------- */
.nombre{position:relative;width:max-content;margin:var(--mt,var(--mt-nombre)) 0 -.18em -.045em;padding:.18em .06em .18em 0;mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;
  font:600 var(--t-nombre)/1 var(--f-titulo);letter-spacing:-.035em;white-space:nowrap;color:var(--tinta)}
.lema{margin-top:var(--mt,var(--mt-lema));max-width:24ch;font-weight:inherit;
  font-size:var(--t-entrada);line-height:1.32;text-wrap:balance}

.parada{position:relative;margin-top:var(--mt,64px)}
.parada-1{margin-top:var(--mt,var(--mt-traza))}
/* Hasta que la ruta las coloca, las demás paradas no se enseñan: así no se ven saltar al cargar (en la tableta caen en la primera pantalla) */
.js:not(.colocado) .parada:not(.parada-1){visibility:hidden}
.parada h2{font:600 var(--t-titulo)/1.04 var(--f-titulo);letter-spacing:-.025em;text-wrap:balance;max-width:13ch}
.parada .texto p{margin-top:16px;max-width:34ch;text-wrap:pretty}
.parada-1 h2{max-width:none}

.traza{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 18px;margin-top:22px}
.campo{display:grid;gap:8px;font-size:var(--t-pequeno);font-weight:600;color:var(--tinta)}
.campo select{appearance:none;-webkit-appearance:none;min-height:52px;min-width:220px;padding:0 48px 0 20px;border:0;border-radius:var(--r-campo);
  background:var(--flecha) no-repeat right 20px center/12px 8px;color:var(--tinta);
  font-size:var(--t-texto);cursor:pointer}
.pasos{display:flex;align-items:center;gap:4px;min-height:52px;padding:0 4px;border-radius:999px}
.pasos input{width:3.2ch;border:0;background:none;color:var(--tinta);text-align:center;font-size:var(--t-texto);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.pasos input::-webkit-outer-spin-button,.pasos input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.paso{width:44px;height:44px;border:0;border-radius:50%;background:var(--vidrio-boton);color:var(--tinta);font-size:var(--t-texto);line-height:1;cursor:pointer;
  transition:transform var(--t-pulsar) var(--ease-out),background-color var(--t-pasar) ease}
.paso:active{transform:scale(.95)}   /* E-11: entre 0,95 y 0,98 */
.paso:disabled{opacity:.4;cursor:default}
.pasos input:focus-visible{outline-offset:-2px}

.boton{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border:0;border-radius:999px;
  font:600 var(--t-texto)/1 var(--f-texto);text-decoration:none;cursor:pointer;
  transition:transform var(--t-pulsar) var(--ease-out),background-color var(--t-pasar) ease,color var(--t-pasar) ease}
.boton:active{transform:scale(.97)}
.boton-principal{background:var(--acento);color:var(--sobre-acento)}
.boton-tinta{background:var(--tinta);color:var(--papel)}
@media (hover:hover) and (pointer:fine){
  .boton-principal:hover{background:color-mix(in srgb,var(--acento) 86%,var(--tinta))}
  .boton-tinta:hover{background:color-mix(in srgb,var(--tinta) 82%,var(--papel))}
  .paso:hover{background:color-mix(in srgb,var(--vidrio-boton) 70%,var(--tinta))}
}
.aviso{flex-basis:100%;font-size:var(--t-pequeno);color:var(--tinta)}
.aviso:empty{display:none}

/* ---------- las paradas ---------- */
@media (min-width:1200px){
  .parada:not(.parada-1){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hueco);align-items:start}
  .parada:not(.parada-1) > *{grid-row:1}
  .parada[data-lado=izq] .texto{grid-column:1 / span 5}
  .parada[data-lado=izq] .trozo{grid-column:7 / span 6}
  .parada[data-lado=der] .texto{grid-column:8 / span 5}
  .parada[data-lado=der] .trozo{grid-column:1 / span 6}
  .parada .trozo{margin-top:var(--bajada,64px)}
  .parada-1{width:62%}
  /* Tres paradas rompen la alternancia (W-116, 28-10): una banda ancha, un teléfono en el centro y una en línea. */
  .parada-ancha .trozo,.parada-linea .trozo{grid-row:2;margin-top:40px}
  .parada-ancha[data-lado=der] .trozo{grid-column:3 / span 10}
  .parada-ancha[data-lado=izq] .trozo{grid-column:1 / span 10}
  .parada-ancha .momentos{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
  .parada-ancha .momentos li{display:grid}
  .parada-centro[data-lado=der] .texto{grid-column:9 / span 4}
  .parada-centro[data-lado=izq] .texto{grid-column:1 / span 4}
  .parada-centro[data-lado] .trozo{grid-column:5 / span 4;margin-top:0}
  .parada-centro .trozo-bolsillo{flex-direction:column;align-items:center;gap:22px}
  .parada-centro .telefono{width:280px;height:500px;border-radius:44px;padding:11px}
  .parada-centro .pantalla{border-radius:34px;padding:34px 16px 16px;gap:10px}
}
@media (max-width:1199px){
  :root{--t-nombre:calc((100vw - 2 * var(--margen)) * .2793);--mt-nombre:calc(30.5vw - 31.5px);--mt-lema:19px;--mt-traza:34px}
  .mundo{aspect-ratio:1170/15192}
  .parada .trozo{margin-top:var(--bajada,24px)}
  .parada .texto,.parada .trozo{max-width:640px}
  .parada .texto p{max-width:none}
  .lema{max-width:26ch}
}
/* Tableta: el relieve del móvil, en una columna; a todo el ancho dejaría pantallas enteras de hilo solo */
@media (min-width:600px) and (max-width:1199px){
  :root{--margen:28px;--t-nombre:135.2px;--mt-nombre:121.3px;--mt-lema:16px} /* el margen que la ruta del móvil deja al hilo, a este tamaño */
  .mundo,.cierre{max-width:540px;margin-inline:auto}
  .prueba{right:calc((100vw - 540px) / 2 + var(--margen))}
}
@media (max-width:599px){
  .prueba{left:var(--margen);right:var(--margen);justify-content:space-between;gap:0}
  .prueba-grupo{gap:12px}
  .traza{gap:16px}
  .traza > *{flex:1 1 100%}
  .campo select{width:100%}
  .pasos{justify-content:space-between}
  .boton-principal{width:100%}
}

/* ---------- los trozos de Nausika: en cristal, sin cajas ---------- */
/* El cristal: el relieve de detrás, refractado (#lente, donde el navegador lo admite) y desenfocado, con un filo de
   luz arriba y un brillo que baja. Sin sombras (Taste): se despega del terreno por el tono y el filo, no por sombra.
   Safari no admite la refracción: allí, cristal esmerilado. */
.vidrio,.campo select,.pasos{background-color:var(--vidrio);border:1px solid var(--vidrio-filo);border-top-color:var(--vidrio-luz);
  -webkit-backdrop-filter:blur(14px) saturate(1.6) brightness(1.05);
  backdrop-filter:url(#lente) blur(8px) saturate(1.6) brightness(1.05)}
.vidrio,.pasos{background-image:linear-gradient(180deg,var(--vidrio-brillo),transparent 55%)}
.vidrio{border-radius:var(--r-vidrio)}
.filtros{position:absolute;width:0;height:0;overflow:hidden}
.trozo{position:relative;color:var(--tinta);font-size:var(--t-pequeno);line-height:1.45}
.trozo .grande{font:600 var(--t-titulo)/1 var(--f-titulo);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.trozo input[type=text],.trozo input:not([type]){min-height:52px;width:100%;padding:0 20px;border-radius:999px;color:var(--tinta);font:400 var(--t-pequeno)/1 var(--f-texto)}
.trozo input::placeholder{color:var(--tinta-2);opacity:1}
.mas-suave{color:var(--tinta-2)}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icono{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* Hazlo a tu manera: Italia, una lente de cristal */
.trozo-manera{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
.mapa-vidrio{position:relative;width:100%;max-width:360px;justify-self:center}
.mapa-vidrio .pais{position:absolute;inset:0;border:0;border-radius:0;background-color:var(--vidrio-pais);background-image:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.mapa-vidrio .mapa{position:absolute;inset:0;width:100%;height:100%;overflow:visible;cursor:crosshair;touch-action:manipulation}
.costa{fill:transparent;stroke:var(--costa);stroke-width:1.5}
.punto-mio{fill:var(--acento);stroke:var(--papel);stroke-width:2;vector-effect:non-scaling-stroke}
.punto-mio-g.nuevo{animation:punto-entra 520ms var(--muelle) both;transform-box:fill-box;transform-origin:center}
.punto-n{fill:var(--sobre-acento);font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.tramo-mio{fill:none;stroke:var(--acento);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mis-sitios .n{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:8px;border-radius:50%;background:var(--acento);color:var(--sobre-acento);font-size:12px;font-weight:700}
@keyframes punto-entra{from{transform:translateY(-22px) scale(.7);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
.trozo-manera .lista{display:grid;align-content:start;gap:14px}
.mis-sitios{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mis-sitios li{display:flex;align-items:center;gap:0;min-height:44px;padding:0 0 0 18px;border-radius:999px}
.quitar{display:grid;place-items:center;width:44px;height:44px;margin:-4px 0;border:0;border-radius:50%;background:none;cursor:pointer;color:var(--tinta-2)}
@media (hover:hover) and (pointer:fine){.quitar:hover{background:var(--vidrio-boton);color:var(--tinta)}}
.aviso-trozo:empty{display:none}

/* Cámbialo */
.trozo-cambia{display:grid;gap:10px;max-width:440px}
.lista-dias{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lista-dias li{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:60px;padding:0 8px 0 22px;border-radius:999px}
.lista-dias b{font-weight:600;font-size:var(--t-texto)}
.pasos-mini{display:flex;align-items:center;gap:2px}
.pasos-mini .paso{width:44px;height:44px}
.lista-dias output{min-width:5.2ch;text-align:center;font-variant-numeric:tabular-nums}
.total{display:grid;gap:4px;margin-top:18px}
.total .grande{transition:opacity 160ms ease}
.total .grande.cambia{animation:cifra 360ms var(--ease-out)}
@keyframes cifra{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Cada día, a su hora */
.trozo-dia{display:grid;gap:14px}
.dia-cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 16px}
.dia-cab b{font:600 var(--t-texto)/1.3 var(--f-texto)}
.momentos{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.momento{display:grid;gap:4px;width:100%;height:100%;padding:18px 22px 20px;text-align:left;font:inherit;color:inherit;align-content:start}
button.momento{cursor:pointer}
.momento .cuando{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;color:var(--tinta-2)}
button.momento .cuando::after{content:"";width:8px;height:8px;margin-right:4px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform 240ms var(--ease-out)}
button.momento[aria-expanded=true] .cuando::after{transform:rotate(225deg) translateY(-2px)}
.momento .que{font-size:var(--t-texto);line-height:1.35}
.momento .nota{display:none;padding-top:8px;color:var(--tinta-2)}
.momento[aria-expanded=true] .nota{display:block;animation:nota-abre 320ms var(--ease-out)}
@keyframes nota-abre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Antes de salir */
.reservas{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:480px}
.reservas label{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;padding:16px 22px;cursor:pointer}
.reservas input[type=checkbox]{grid-row:span 2;width:22px;height:22px;margin:2px 0 0;accent-color:var(--oliva)}
.reservas label b{font-weight:600}
.reservas input:checked ~ b{text-decoration:line-through;text-decoration-thickness:.08em}

/* En el bolsillo */
.trozo-bolsillo{display:flex;align-items:center;gap:28px}
.telefono{flex:0 0 auto;width:200px;height:370px;padding:9px;border-radius:34px;background:var(--tinta)}
.pantalla{height:100%;border-radius:26px;background:var(--papel);padding:26px 12px 12px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.estado{display:flex;align-items:center;gap:8px;font-weight:600}
.estado i{width:10px;height:10px;border-radius:50%;background:var(--oliva);transition:background-color var(--t-pasar) ease}
.sin-red .estado i{background:var(--tinta-2)}
.pantalla .tel-titulo{font:600 var(--t-entrada)/1.15 var(--f-titulo)}
.pantalla ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pantalla li{padding:8px 10px;border-radius:12px;background:var(--superficie);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pantalla li b{display:block;font-weight:600}
.tel-quien{display:flex;align-items:center;gap:10px;margin-top:auto;padding:10px 12px;border-radius:12px;background:var(--superficie)}
.caras{display:flex}
.caras i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--oliva);color:var(--papel);font-style:normal;font-weight:600;font-size:13px;border:2px solid var(--superficie)}
.caras i + i{margin-left:-8px;background:var(--acento);color:var(--sobre-acento)}
.interruptor{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 22px 0 12px;border-radius:999px;cursor:pointer}
.interruptor input{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 auto;width:52px;height:32px;margin:0;border-radius:999px;background:var(--vidrio-boton);cursor:pointer;transition:background-color var(--t-pasar) ease}
.interruptor input::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:var(--tinta);transition:transform 240ms var(--ease-out)}
.interruptor input:checked{background:var(--oliva)}
.interruptor input:checked::after{transform:translateX(20px);background:var(--papel)}

/* Si prefieres que lo trace Nausika: el objeto de la huella */
.trozo-huella{display:grid;grid-template-columns:auto 1fr;gap:12px 28px;align-items:center;max-width:620px}
.trozo-huella .objeto{width:clamp(200px,20vw,300px);height:auto;aspect-ratio:1;overflow:visible}
.trozo-huella .huella-lado{display:grid;gap:18px;justify-items:start}

@media (max-width:1199px){
  .trozo-manera{grid-template-columns:1fr;gap:20px}
  .mapa-vidrio{max-width:260px}
  .trozo-huella{grid-template-columns:1fr;justify-items:start}
  .trozo-huella .objeto{width:200px}
  .trozo-bolsillo{flex-direction:column;align-items:center;gap:18px}
  .telefono{width:232px;height:430px}
}

/* ---------- el cierre ---------- */
.cierre{position:relative;padding:clamp(48px,5vw,96px) var(--margen) clamp(24px,3vw,48px);display:grid;gap:clamp(140px,9vw,160px);overflow:clip}
.cierre-texto{display:grid;gap:18px;justify-items:start;max-width:40ch}
.cierre h2{font:600 var(--t-titulo)/1.04 var(--f-titulo);letter-spacing:-.025em;max-width:13ch;text-wrap:balance}
.cierre p{max-width:44ch}
.cierre .boton{margin-top:10px}
.firma{justify-self:end;margin:0 -.02em 0 0;font:600 var(--t-nombre)/.9 var(--f-titulo);letter-spacing:-.035em;white-space:nowrap}

/* ---------- movimiento ---------- */
@media (prefers-reduced-motion:no-preference){
  /* E-09 (auditoría final): la acción principal, visible desde el primer fotograma; el lema, solo un fundido corto */
  .js .lema{animation:funde 300ms var(--ease-out) both}
  .js .parada:not(.parada-1) .texto h2,
  .js .parada:not(.parada-1) .texto p,
  .js .parada:not(.parada-1) .trozo,
  .js .cierre-texto > *{opacity:0;transform:translateY(26px);transition:opacity 600ms var(--ease-out),transform 700ms var(--ease-expo)}
  .js .parada.dentro .texto p{transition-delay:80ms}
  .js .parada.dentro .trozo{transition-delay:160ms}
  .js .cierre.dentro .cierre-texto > :nth-child(2){transition-delay:80ms}
  .js .cierre.dentro .cierre-texto > :nth-child(3){transition-delay:160ms}
  .js .parada.dentro:not(.parada-1) .texto h2,.js .parada.dentro:not(.parada-1) .texto p,.js .parada.dentro:not(.parada-1) .trozo,.js .cierre.dentro .cierre-texto > *{opacity:1;transform:none}
  .aviso:not(:empty){animation:sube 420ms var(--ease-out) both}
}
@keyframes sube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes funde{from{opacity:0}}
/* D6 (30-10): con «menos movimiento» no se desplaza nada; los fundidos cortos se quedan, porque ayudan a ver qué cambia */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-property:opacity,color,background-color,border-color !important;
    transition-duration:150ms !important;transition-delay:0s !important}
}

/* El total que rueda: cada cifra es una columna de 0 a 9 que se desplaza; con transición, se puede interrumpir */
.rueda{display:inline-flex;overflow:hidden;line-height:1;vertical-align:bottom;height:1em;font-variant-numeric:tabular-nums}
.rueda-cifra{display:inline-block;height:1em;overflow:hidden}
.rueda-col{display:flex;flex-direction:column;transition:transform 260ms var(--ease-out)}
.rueda-col::before{content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";white-space:pre;display:block;line-height:1;text-align:center}
@media (prefers-reduced-motion:reduce){.rueda-col{transition:none}}

/* La sombra de cada chincheta: se descubre cuando la cuerda llega a ella (la máscara del hilo, en portada.js) */
.chincheta-luz{opacity:0}
.chincheta-luz.is-dentro{opacity:1}
@media (prefers-reduced-motion:no-preference){.chincheta-luz{transition:opacity .6s cubic-bezier(.23,1,.32,1)}}

/* ---------- Las nubes (29-10): encima de la cuerda, debajo del texto ----------
   La caja no hace capa propia (sin z-index, sin transform): así la sombra multiplica sobre el relieve y la cuerda. Cada
   nube y su sombra van juntas de un lado a otro, a unos 5 px por segundo (lo bastante para verlo); con «menos movimiento», quietas. */
.nubes{position:absolute;inset:0;pointer-events:none}
.nube,.nube-sombra{position:absolute;z-index:1;display:block;height:auto;max-width:none;pointer-events:none;user-select:none}
.nube-sombra{mix-blend-mode:multiply}
@media (prefers-reduced-motion:no-preference){
  .nube,.nube-sombra{animation:nube-deriva 60s ease-in-out infinite alternate;will-change:transform}
}
/* W-139: fuera de la pantalla, quietas y sin capa propia (atlas.js, pararNubesFuera) */
.nube-fuera{animation-play-state:paused!important;will-change:auto!important}
@keyframes nube-deriva{from{transform:translate3d(calc(var(--deriva,0px) * -1),0,0)}to{transform:translate3d(var(--deriva,0px),0,0)}}


/* ============================================================
   La portada como nausika/index.html (D1, 30-10): el marco de la web (marco.css) y el contacto
   ============================================================ */
/* La cabecera, encima del relieve y sin barra: solo «Menú» (y la huella, si la hay). «Nausika», el grande */
body.atlas:not(.portada) .cabecera{position:fixed;top:0;left:auto;right:0;width:auto;z-index:40;background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
.atlas .cabecera .nav{max-width:none;padding-inline:var(--margen)}
.atlas .cabecera .marca{display:none}
.atlas .cabecera .menu-boton,.atlas .cabecera .perfil-boton,.atlas .menu-lateral{pointer-events:auto}
.atlas .cabecera .menu-boton,.atlas .cabecera .perfil-boton{background:var(--vidrio);border:1px solid var(--vidrio-filo);border-top-color:var(--vidrio-luz);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}

/* El contacto: texto y formulario, con los campos de «Traza tu viaje» */
.contacto{display:grid;gap:clamp(24px,4vw,64px);max-width:1180px;margin:0 auto;padding:clamp(56px,8vw,120px) var(--margen)}
@media (min-width:900px){.contacto{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.contacto h2{font-size:var(--t-titulo);font-weight:600;line-height:1.04;letter-spacing:-.025em;margin:0 0 16px}
.contacto-texto p{font-size:var(--t-texto);line-height:1.5;margin:0 0 10px;max-width:42ch}
.contacto-texto a{color:var(--tinta);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.formulario{display:grid;gap:16px}
@media (min-width:640px){.formulario{grid-template-columns:1fr 1fr}.formulario .campo-ancho,.formulario .consentimiento,.formulario .contacto-nota{grid-column:1/-1}}
.formulario textarea{width:100%;min-height:9em;resize:vertical;font:inherit;color:var(--tinta);padding:14px 16px;border-radius:var(--r-campo);
  border:1px solid rgba(27,26,24,.22);background:var(--superficie)}
.formulario input[type=text],.formulario input[type=email]{width:100%;font:inherit;color:var(--tinta);padding:0 16px;min-height:52px;border-radius:var(--r-campo);
  border:1px solid rgba(27,26,24,.22);background:var(--superficie)}
.consentimiento{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-pequeno);line-height:1.45;color:var(--tinta-2)}
.consentimiento input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--oliva);flex:none}
.consentimiento a{color:var(--tinta)}
.formulario .boton{justify-self:start}
.contacto-nota{font-size:var(--t-pequeno);color:var(--tinta-2);margin:0}
.contacto-nota:empty{display:none}
.hpot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* El velo del menú, cerrado, no está (antes quedaba encima de todo, transparente; Taste lo contaba tapando los títulos) */
.atlas .menu-velo:not(.is-on){visibility:hidden;transition:opacity 150ms ease,visibility 0s 150ms}

/* ---------- W-129 · El buscador de países (lib/buscador.js): el campo como el desplegable de cristal que sustituye, y
   la lista en una ficha de cristal debajo ---------- */
.buscador{position:relative}
.buscador-etiqueta{display:block}
.buscador-caja{position:relative}
.buscador-campo{min-height:52px;min-width:240px;width:100%;padding:0 20px;border-radius:var(--r-campo);color:var(--tinta);font:inherit;font-weight:400;
  font-size:var(--t-texto);background-color:var(--vidrio);border:1px solid var(--vidrio-filo);border-top-color:var(--vidrio-luz);
  -webkit-backdrop-filter:blur(14px) saturate(1.6) brightness(1.05);backdrop-filter:url(#lente) blur(8px) saturate(1.6) brightness(1.05)}
.buscador-campo::placeholder{color:var(--tinta-2)}
/* La lupa (Pablo, 31-10), como en sistema.css */
.buscador-lupa{position:absolute;z-index:1;left:18px;top:50%;width:20px;height:20px;margin-top:-10px;pointer-events:none;fill:none;stroke:var(--tinta-2);stroke-width:2;stroke-linecap:round}
.buscador .buscador-campo{padding-left:48px}
.buscador-panel{position:absolute;z-index:6;left:0;top:calc(100% + 6px);width:max(100%,280px);max-height:min(340px,52vh);overflow:auto;overscroll-behavior:contain;
  padding:6px;border-radius:18px;background:rgba(255,255,255,.82);border:1px solid var(--vidrio-filo);border-top-color:var(--vidrio-luz);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 18px 48px rgba(27,26,24,.14)}
.buscador-lista{list-style:none;margin:0;padding:0}
.buscador-op{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:44px;padding:10px 12px;border-radius:12px;cursor:pointer;
  font-size:var(--t-texto);font-weight:400;color:var(--tinta)}
.buscador-op.is-activa{background:rgba(27,26,24,.07)}
.buscador-op[aria-selected="true"] .buscador-nombre{font-weight:600}
.buscador-auto{font-size:14px;color:var(--tinta-2);white-space:nowrap}
.buscador-vacio{margin:0;padding:12px;font-size:var(--t-pequeno);font-weight:400;line-height:1.45;color:var(--tinta)}
.buscador-estado{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* W-136: el país que Exteriores desaconseja, al elegirlo, lo dice debajo (tinta, sin naranja: no es una acción) */
.buscador-desac{margin:8px 0 0;font-size:var(--t-pequeno);font-weight:400;line-height:1.45;color:var(--tinta)}
.traza > .buscador-desac{flex:1 1 100%;margin:0}
.campo-buscador{min-width:240px}
@media (max-width:1199px){.campo-buscador{width:100%}}