/* ═══════════════════════════════════════════════════════════════
   Islandia · hoja de estilo común de las dos guías
   Idea: un cuaderno de viaje. Papel cálido, esquinas redondas,
   dibujos, fotos pegadas con washi tape y notas a mano.
   El mapa y el index traen encima lo suyo, pero beben de aquí.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* papel y tinta */
  --papel:#FBF3E7;
  --papel-2:#FFFDF7;
  --papel-3:#F4E8D6;
  --tinta:#2E2A3B;
  --tinta-2:#6B647E;
  --linea:#E4D6C0;

  /* colores del viaje */
  --aurora:#45B08C;
  --glaciar:#6FA8D0;
  --coral:#E8746B;
  --mantequilla:#F7C948;
  --lava:#F0873F;
  --musgo:#9FCF8F;
  --noche:#221F3A;
  --noche-2:#2E2A4A;

  --col:64rem;
  --r:1.25rem;          /* radio base */
  --sombra:0 2px 0 rgba(46,42,59,.07), 0 10px 26px -14px rgba(46,42,59,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:"Nunito",system-ui,sans-serif;
  font-size:1.0625rem;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  /* lunares muy tenues: papel, no pantalla */
  background-image:radial-gradient(rgba(46,42,59,.045) 1px, transparent 1px);
  background-size:22px 22px;
}

h1,h2,h3,h4,.disp{
  font-family:"Fredoka",system-ui,sans-serif;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0;
}
p{margin:0 0 1rem}
.dim{color:var(--tinta-2)}
.narrow{max-width:42rem}

a{color:#2F7FA8;text-decoration:none;border-bottom:2px solid rgba(111,168,208,.4);
  border-radius:2px;transition:border-color .15s,color .15s}
a:hover{border-bottom-color:var(--glaciar);color:#1F6488}
a:focus-visible,button:focus-visible{outline:3px solid var(--mantequilla);outline-offset:3px;border-radius:6px}

.hoja{max-width:var(--col);margin:0 auto;padding:0 1.25rem}

/* ── dibujos ────────────────────────────────────────────────── */
.ico{width:1.6em;height:1.6em;flex:none;vertical-align:-.45em}
.ico-g{width:3.4rem;height:3.4rem;flex:none}
.ico-xl{width:5.5rem;height:5.5rem;flex:none}

/* ── cabecera de sección: número en pegatina + subrayado a mano ── */
/* ── secciones plegables ─────────────────────────────────────────
   Las trece secciones son un <details>. Nativo, sin una línea de
   script: es la única forma de que sigan plegando en el fichero de
   bolsillo, que el visor de Archivos del iPhone abre sin JavaScript.
   El id vive en la .sec-cab, DENTRO del <summary>, a propósito: así
   el navegador abre la sección sola al saltar desde el índice, que
   no ocurriría si el id estuviese en el <section>. */
.sec{padding:0}
.pliegue > summary{
  list-style:none;cursor:pointer;
  padding:1.5rem 0;border-top:2px dashed var(--linea);
  transition:background .15s;
}
.pliegue > summary::-webkit-details-marker{display:none}
.pliegue > summary:hover{background:rgba(247,201,72,.10)}
.pliegue > summary:focus-visible{outline:2.5px solid var(--aurora);outline-offset:-3px}
.pliegue > summary .sec-cab{margin-bottom:0}
.pliegue > summary h2{font-size:clamp(1.5rem,4vw,2.1rem)}

/* el botón de abrir: un frailecillo distinto por sección, pequeño, y una
   flecha que gira. Sin texto: el dibujo y la flecha ya dicen qué hace. */
.abreme{
  margin-left:auto;display:inline-flex;align-items:center;gap:.15rem;flex:none;align-self:center;
  background:var(--papel-2);border:1.5px solid var(--linea);border-radius:999px;
  padding:.28rem .5rem .28rem .3rem;
  box-shadow:0 2px 0 rgba(46,42,59,.06);
}
.abreme .ico-fr{width:1.55rem;height:1.55rem;flex:none;transform-origin:60% 80%}
.abreme .chev{width:.95rem;height:.95rem;flex:none;color:var(--tinta-2);transition:transform .25s ease}
.pliegue > summary:hover .abreme{background:var(--mantequilla);border-color:var(--mantequilla)}
.pliegue[open] .abreme .chev{transform:rotate(180deg)}

/* la descripción: dos líneas para saber si merece la pena abrir */
.sec-tit{min-width:0}
.sec-desc{
  margin:.45rem 0 0;font-size:.95rem;line-height:1.45;color:var(--tinta-2);
  max-width:34rem;font-weight:400;
}
.pliegue[open] .sec-desc{opacity:.55}

/* al abrir: el contenido entra deslizándose y el bicho da un salto.
   Nada de parpadeos; y si el sistema pide menos movimiento, no se mueve. */
@keyframes despliega{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes saltito{
  0%{transform:translateY(0) rotate(0)}
  35%{transform:translateY(-6px) rotate(-12deg)}
  70%{transform:translateY(0) rotate(4deg)}
  100%{transform:translateY(0) rotate(0)}
}
.pliegue[open] > .hoja{animation:despliega .3s cubic-bezier(.2,.7,.3,1) both}
.pliegue[open] .abreme .ico-fr{animation:saltito .55s ease-out}
@media (prefers-reduced-motion:reduce){
  .pliegue[open] > .hoja,.pliegue[open] .abreme .ico-fr{animation:none}
  .abreme .chev{transition:none}
}

.pliegue > .hoja{padding-top:2rem;padding-bottom:3rem}
/* El ancla de cada sección va DENTRO del contenido plegado, no en el <summary>:
   solo así el navegador abre la sección sola al saltar desde el índice, y sin
   JavaScript. El margen deja la cabecera a la vista bajo la barra de arriba. */
.ancla{display:block;height:0;scroll-margin-top:6rem}

@media (max-width:520px){
  .sec-desc{font-size:.88rem}
  .abreme{padding:.24rem .38rem .24rem .24rem}
  .abreme .ico-fr{width:1.4rem;height:1.4rem}
}

.sec-cab{display:flex;align-items:center;gap:1rem;margin-bottom:1.75rem}
.sec-num{
  flex:none;width:3rem;height:3rem;border-radius:50%;
  display:grid;place-items:center;
  font-family:"Fredoka",sans-serif;font-weight:600;font-size:1.25rem;
  background:var(--mantequilla);color:var(--tinta);
  box-shadow:0 3px 0 rgba(46,42,59,.18);
  transform:rotate(-6deg);
}
.sec h2{font-size:clamp(1.7rem,4.5vw,2.5rem)}
/* subrayado ondulado, dibujado, no un border-bottom */
.garabato{
  display:block;width:100%;max-width:16rem;height:.7rem;margin-top:.35rem;
  color:var(--coral);
}

/* ── tarjetas ───────────────────────────────────────────────── */
.rejilla{display:grid;gap:1.1rem}
.r2{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.r3{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}

.tarjeta{
  background:var(--papel-2);
  border:1.5px solid var(--linea);
  border-radius:var(--r);
  padding:1.35rem;
  box-shadow:var(--sombra);
}
.tarjeta h3,.tarjeta h4{margin-bottom:.5rem}
.tarjeta p:last-child{margin-bottom:0}
.tarjeta .cab{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem}
.tarjeta .cab h3,.tarjeta .cab h4{margin:0}

/* la elegida del grupo: se nota sin gritar */
.tarjeta.elegida{border-color:var(--aurora);background:#F4FBF7;
  box-shadow:0 2px 0 rgba(69,176,140,.18), 0 12px 28px -16px rgba(69,176,140,.6)}

/* ── tarjeta plegable ────────────────────────────────────────────
   Cada quien abre la de su dispositivo. Es un <details>, igual que el
   índice flotante y por la misma razón: en el fichero de bolsillo no
   se ejecuta JavaScript, y así sigue plegando sin una línea de script. */
.rejilla.plegables{align-items:start}
details.tarjeta{padding:0}
details.tarjeta > summary{
  display:flex;align-items:center;gap:.7rem;
  padding:1.35rem;cursor:pointer;list-style:none;
  border-radius:calc(var(--r) - .15rem);
}
details.tarjeta > summary::-webkit-details-marker{display:none}
details.tarjeta > summary h3,details.tarjeta > summary h4{margin:0;flex:1;min-width:0}
details.tarjeta > summary:hover{background:var(--papel-3)}
details.tarjeta > summary:focus-visible{outline:2.5px solid var(--aurora);outline-offset:-3px}
details.tarjeta > summary .abre{
  width:1.05rem;height:1.05rem;flex:none;color:var(--tinta-2);
  transition:transform .2s ease;
}
details.tarjeta[open] > summary .abre{transform:rotate(180deg)}
details.tarjeta > .cuerpo{padding:0 1.35rem 1.35rem}
details.tarjeta > .cuerpo > :last-child{margin-bottom:0}

/* ── fotos, pegadas con washi tape ──────────────────────────── */
.foto{
  margin:1.5rem 0;position:relative;
  background:var(--papel-2);
  border:1.5px solid var(--linea);
  border-radius:var(--r);
  padding:.6rem .6rem .2rem;
  box-shadow:var(--sombra);
}
/* Recortadas a una banda constante. Sin esto, las verticales (la iglesia,
   el perrito) miden más de 1000 px y la guía se vuelve un scroll infinito
   justo en el móvil, que es donde se va a leer. */
.foto img{
  display:block;width:100%;height:auto;
  max-height:min(52vh,380px);object-fit:cover;
  border-radius:calc(var(--r) - .5rem);
  background:var(--papel-3);
}
.foto-mini img{max-height:min(38vh,250px)}
.foto figcaption{padding:.7rem .5rem .8rem;font-size:.92rem;color:var(--tinta-2)}
.foto .pie{display:block;color:var(--tinta)}
.foto .credito{display:block;font-size:.72rem;opacity:.65;margin-top:.35rem}
.foto .credito a{border:none;color:inherit;text-decoration:underline}

/* el trocito de cinta */
.foto::before{
  content:"";position:absolute;top:-.6rem;left:50%;
  width:5.5rem;height:1.5rem;
  background:rgba(247,201,72,.5);
  border:1px solid rgba(46,42,59,.08);
  transform:translateX(-50%) rotate(-2.5deg);
  border-radius:2px;
}
.foto.izq::before{left:2.5rem;transform:rotate(-7deg)}
.foto.der::before{left:auto;right:2.5rem;transform:rotate(6deg)}
.foto.cinta-verde::before{background:rgba(69,176,140,.45)}
.foto.cinta-coral::before{background:rgba(232,116,107,.42)}

/* foto pequeña dentro de una tarjeta o parada */
.foto-mini{margin:.9rem 0 .2rem;padding:.45rem .45rem .1rem}
.foto-mini figcaption{padding:.5rem .35rem .55rem;font-size:.85rem}
.foto-mini::before{width:4rem;height:1.15rem}

/* enlace de "saber más" */
.mas{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:"Fredoka",sans-serif;font-size:.85rem;font-weight:500;
  color:var(--tinta);background:var(--papel-3);
  border:1.5px solid var(--linea);border-radius:999px;
  padding:.22rem .7rem;margin-top:.5rem;
  transition:background .15s,border-color .15s,transform .15s;
}
.mas:hover{background:var(--mantequilla);border-color:var(--mantequilla);transform:translateY(-1px)}
.mas::after{content:"↗";font-size:.9em;opacity:.6}

/* ── el frailecillo que da consejos (nuestro bicho) ─────────── */
.consejo{
  display:flex;align-items:flex-start;gap:.75rem;
  margin:1.75rem 0;
}
.consejo .bicho{width:3.6rem;height:3.6rem;flex:none;margin-top:.4rem}
.consejo .globo{
  position:relative;flex:1;
  background:var(--papel-2);
  border:2px solid var(--tinta);
  border-radius:1.1rem;
  padding:.95rem 1.1rem;
  box-shadow:0 3px 0 rgba(46,42,59,.14);
}
.consejo .globo::before,.consejo .globo::after{
  content:"";position:absolute;left:-9px;top:1.4rem;
  width:0;height:0;border:9px solid transparent;
  border-right-color:var(--tinta);border-left:0;
}
.consejo .globo::after{left:-6px;border-right-color:var(--papel-2)}
.consejo p{margin:0;font-size:.97rem}
.consejo p + p{margin-top:.6rem}
.consejo strong{font-weight:700}

/* aviso serio: mismo lenguaje, otro color y otro dibujo */
.aviso{display:flex;align-items:flex-start;gap:.75rem;margin:1.75rem 0}
.aviso .bicho{width:3rem;height:3rem;flex:none;margin-top:.5rem;color:var(--tinta)}
.aviso .globo{
  position:relative;flex:1;
  background:#FFF3EC;border:2px solid var(--lava);border-radius:1.1rem;
  padding:.95rem 1.1rem;box-shadow:0 3px 0 rgba(240,135,63,.22);
}
.aviso .globo::before,.aviso .globo::after{
  content:"";position:absolute;left:-9px;top:1.4rem;
  width:0;height:0;border:9px solid transparent;border-right-color:var(--lava);border-left:0;
}
.aviso .globo::after{left:-6px;border-right-color:#FFF3EC}
.aviso p{margin:0;font-size:.97rem}
.aviso p + p{margin-top:.6rem}

/* nota corta escrita a mano, para apuntes al margen */
.manuscrita{
  font-family:"Caveat",cursive;font-size:1.3rem;line-height:1.35;
  color:var(--coral);transform:rotate(-1.2deg);
  margin:1rem 0;
}

/* ── días e itinerario ──────────────────────────────────────── */
.dia{margin:2.5rem 0}
.dia-cab{display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem}
.dia-num{
  flex:none;width:3.6rem;height:3.6rem;border-radius:1rem;
  display:grid;place-items:center;line-height:1;
  background:var(--papel-2);border:2px solid var(--tinta);
  box-shadow:0 3px 0 rgba(46,42,59,.16);
  transform:rotate(-3deg);
}
.dia-num b{font-family:"Fredoka",sans-serif;font-size:1.5rem;font-weight:600}
.dia-num span{font-size:.6rem;letter-spacing:.04em;color:var(--tinta-2);display:block;text-align:center}
.dia-cab h3{font-size:1.4rem}
.dia-cab .fecha{
  font-family:"Fredoka",sans-serif;font-size:.8rem;color:var(--tinta-2);
  background:var(--papel-3);border-radius:999px;padding:.15rem .65rem;
  display:inline-block;margin-top:.2rem;
}

/* la ruta del día: una línea de puntos con burbujas */
.ruta{list-style:none;margin:0;padding:0 0 0 1rem;position:relative}
.ruta::before{
  content:"";position:absolute;left:2.25rem;top:1.2rem;bottom:1.2rem;
  border-left:3px dotted var(--linea);
}
.parada{position:relative;padding:0 0 1.4rem 4rem;min-height:3rem}
.parada .burbuja{
  position:absolute;left:0;top:0;
  width:3rem;height:3rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--papel-2);border:2px solid var(--linea);
  box-shadow:0 2px 0 rgba(46,42,59,.08);
}
.parada .burbuja svg{width:1.7rem;height:1.7rem}
.parada .hora{
  font-family:"Fredoka",sans-serif;font-weight:500;font-size:.8rem;
  color:var(--tinta);background:var(--mantequilla);
  border-radius:999px;padding:.1rem .6rem;display:inline-block;margin-bottom:.3rem;
}
.parada h4{font-size:1.08rem;margin-bottom:.25rem}
.parada .sitio{font-size:.85rem;color:var(--tinta-2);font-weight:600}
.parada p{margin:.35rem 0 0;font-size:.97rem;color:var(--tinta-2)}
.parada.opcional .burbuja{border-style:dashed}
/* En móvil la burbuja se salía del margen y el texto quedaba pegado al borde:
   se acerca la línea y se encoge el círculo para recuperar ancho de lectura. */
@media (max-width:520px){
  .ruta{padding-left:.5rem}
  .ruta::before{left:1.7rem}
  .parada{padding-left:3.2rem}
  .parada .burbuja{width:2.5rem;height:2.5rem}
  .parada .burbuja svg{width:1.4rem;height:1.4rem}
}

/* ── etiquetas ──────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.chip{
  font-family:"Fredoka",sans-serif;font-size:.75rem;font-weight:500;
  background:var(--papel-3);color:var(--tinta-2);
  border-radius:999px;padding:.15rem .65rem;
  display:inline-flex;align-items:center;gap:.3rem;
}
.chip svg{width:.95rem;height:.95rem}
.chip.si{background:#E4F5EC;color:#2C7A5E}
.chip.ojo{background:#FDE8E4;color:#B44A3F}
.chip.euro{background:#FDF2D6;color:#8A6A16}

/* ── tablas, con aire ───────────────────────────────────────── */
.tabla-caja{overflow-x:auto;margin:1.25rem 0;
  border:1.5px solid var(--linea);border-radius:var(--r);background:var(--papel-2);
  box-shadow:var(--sombra)}
.tabla{width:100%;border-collapse:collapse;font-size:.95rem;min-width:33rem}
.tabla th{
  text-align:left;font-family:"Fredoka",sans-serif;font-weight:500;font-size:.78rem;
  color:var(--tinta-2);background:var(--papel-3);
  padding:.7rem .9rem;white-space:nowrap;
}
.tabla th:first-child{border-top-left-radius:calc(var(--r) - .35rem)}
.tabla th:last-child{border-top-right-radius:calc(var(--r) - .35rem)}
.tabla td{padding:.8rem .9rem;border-top:1.5px solid var(--linea);vertical-align:top;color:var(--tinta-2)}
.tabla td:first-child{color:var(--tinta);font-weight:700}
.tabla .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla tr:last-child td{border-bottom:none}
.tabla .total td{background:#FDF2D6;color:var(--tinta);font-weight:700}

/* ── listas con dibujito ────────────────────────────────────── */
.lista{list-style:none;padding:0;margin:0}
.lista li{
  display:flex;gap:.7rem;align-items:flex-start;
  padding:.55rem 0;border-bottom:1.5px dashed var(--linea);
  font-size:.97rem;color:var(--tinta-2);
}
.lista li:last-child{border-bottom:none}
.lista li svg{width:1.35rem;height:1.35rem;flex:none;margin-top:.2rem;color:var(--coral)}
.lista li svg + span{flex:1 1 0%;min-width:0}
/* Red de seguridad: el <li> es flex, así que el texto suelto y cualquier
   <strong>/<a> sin envolver se convertían en cajas flexibles independientes
   y la línea se partía en trozos (se veía roto en «Antes de salir de casa»).
   El texto va siempre dentro de un <span>; esto lo cubre si algún día se
   olvida uno. */
.lista li > :not(svg){flex:1 1 0%;min-width:0}
.lista li > strong,.lista li > b,.lista li > em,.lista li > a{flex:0 0 auto}

/* ── bloque nocturno (auroras) ──────────────────────────────── */
.noche-caja{
  background:var(--noche);color:#EDEAF7;
  border-radius:1.75rem;padding:2rem 1.5rem;margin:2rem 0;
  position:relative;overflow:hidden;
  --tinta:#EDEAF7;--tinta-2:#A9A2C9;--linea:rgba(237,234,247,.18);
  --papel-2:rgba(255,255,255,.05);--papel-3:rgba(255,255,255,.09);
}
.noche-caja h2,.noche-caja h3,.noche-caja h4{color:#FFF}
.noche-caja .tarjeta{backdrop-filter:blur(2px)}
.noche-caja a{color:#8FD9BE;border-bottom-color:rgba(143,217,190,.4)}
.noche-caja a:hover{color:#B6EBD6}
.noche-caja .estrellas{position:absolute;inset:0;pointer-events:none;opacity:.55}
.noche-caja > *{position:relative}

/* lunas dibujadas de verdad */
.lunas{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.8rem;margin:1.5rem 0}
.luna{
  text-align:center;padding:1rem .6rem;border-radius:1rem;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(237,234,247,.14);
}
.luna .disco{
  width:2.6rem;height:2.6rem;border-radius:50%;margin:0 auto .55rem;
  background:#3A3557;position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 1.5px rgba(237,234,247,.2);
}
.luna .disco i{position:absolute;inset:0 0 0 auto;background:#F2EFC8;display:block}
.luna b{font-family:"Fredoka",sans-serif;font-size:1.05rem;display:block}
.luna span{font-size:.72rem;color:#A9A2C9;display:block}
.luna.buena{background:rgba(69,176,140,.16);border-color:rgba(69,176,140,.5)}
.luna.buena b{color:#8FD9BE}

/* ── pie ────────────────────────────────────────────────────── */
footer{
  margin-top:3rem;padding:2.5rem 0 4rem;
  border-top:2px dashed var(--linea);color:var(--tinta-2);font-size:.94rem;
}

/* ── separador ondulado entre bloques ───────────────────────── */
.ola{display:block;width:100%;height:1.6rem;color:var(--linea);margin:.5rem 0}

/* ── móvil ──────────────────────────────────────────────────── */
@media (max-width:640px){
  body{font-size:1rem}
  .parada{padding-left:3.5rem}
  .parada .burbuja{width:2.6rem;height:2.6rem}
  .parada .burbuja svg{width:1.45rem;height:1.45rem}
  .ruta::before{left:1.25rem}
  .consejo .bicho{width:2.8rem;height:2.8rem}
  .noche-caja{padding:1.5rem 1.1rem;border-radius:1.35rem}
  .sec{padding-top:2.5rem}
}

/* en táctil no hay hover: que los enlaces se vean tocables igual */
@media (hover:none){
  .mas{background:var(--mantequilla);border-color:rgba(46,42,59,.15)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* imprimir la guía en papel de verdad, por si acaso */
@media print{
  body{background:#fff;background-image:none}
  .foto::before,.ola{display:none}
  .tarjeta,.foto,.tabla-caja{box-shadow:none;break-inside:avoid}
  .noche-caja{background:#fff;color:#000;--tinta:#000;--tinta-2:#333;border:2px solid #000}
}

/* ═══════════════════════════════════════════════════════════════
   GUÍA DE CONSULTA — piezas de la reestructuración
   La web dejó de ser un itinerario cerrado para ser un catálogo de
   sitios, cosas que hacer y enlaces que resuelven dudas sobre la marcha.
   ═══════════════════════════════════════════════════════════════ */

/* ── ¿qué necesitas? el índice grande de la portada ── */
.necesidades{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.7rem;margin:1.5rem 0}
.necesidad{
  display:flex;flex-direction:column;gap:.35rem;align-items:flex-start;
  background:var(--papel-2);border:1.5px solid var(--linea);border-radius:1rem;
  padding:.85rem .9rem;color:var(--tinta);box-shadow:var(--sombra);
  transition:transform .15s,border-color .15s,background .15s;
}
.necesidad:hover{transform:translateY(-2px);border-color:var(--mantequilla);background:#FFFBF0}
.necesidad svg{width:1.9rem;height:1.9rem}
.necesidad b{font-family:"Fredoka",sans-serif;font-weight:600;font-size:.98rem;line-height:1.2}
.necesidad span{font-size:.78rem;color:var(--tinta-2);line-height:1.35}

/* ── zona: el separador entre grupos de sitios ── */
.zona{display:flex;align-items:center;gap:.7rem;margin:2.5rem 0 1.1rem}
.zona svg{width:2.1rem;height:2.1rem;flex:none;color:var(--tinta-2)}
.zona h3{font-size:1.25rem}
.zona p{margin:.1rem 0 0;font-size:.85rem;color:var(--tinta-2)}

/* ── ficha de sitio: el ladrillo del catálogo ── */
/* align-items:start para que las fichas sin foto no se estiren hasta la
   altura de las que sí la tienen y queden con un vacío dentro. */
.sitios{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:1.1rem;align-items:start}
/* Ojo: la ficha del catálogo se escopa con .sitios porque `.sitio` a secas
   chocaba con el <span class="sitio"> de .parada (la línea del vuelo salía
   dentro de una caja con borde). Dos cosas distintas, mismo nombre. */
.sitios .sitio{
  display:flex;flex-direction:column;
  background:var(--papel-2);border:1.5px solid var(--linea);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sombra);
}
.sitios .sitio > img{display:block;width:100%;height:11rem;object-fit:cover;background:var(--papel-3)}
/* Sitio sin foto libre: va un dibujo, no una foto de otro sitio parecido.
   Mismo alto que la imagen para que la rejilla no cojee, y peso cero en el
   fichero offline (el icono ya está en el sprite). Ahora mismo lo usan
   Sky Lagoon y Suðurbæjarlaug: no hay imagen con licencia libre de ninguno
   en Wikimedia Commons, y poner la piscina de otro pueblo sería mentir. */
.sitios .sitio > .dibujo{
  display:flex;align-items:center;justify-content:center;
  height:11rem;background:var(--papel-3);
  background-image:radial-gradient(rgba(46,42,59,.07) 1px,transparent 1px);
  background-size:15px 15px;
  border-bottom:1.5px solid var(--linea);
}
.sitios .sitio > .dibujo svg{width:4.4rem;height:4.4rem;color:var(--glaciar);opacity:.9}
.sitios .sitio .cuerpo{padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;flex:1}
.sitios .sitio .titulo{display:flex;align-items:center;gap:.55rem;margin-bottom:.15rem}
.sitios .sitio .titulo svg{width:1.6rem;height:1.6rem;flex:none}
.sitios .sitio h4{font-size:1.1rem}
.sitios .sitio .donde{font-size:.78rem;color:var(--tinta-2);margin-bottom:.6rem;display:block}
.sitios .sitio p{font-size:.93rem;color:var(--tinta-2);margin:0 0 .7rem}
.sitios .sitio .pie-ficha{margin-top:auto;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.sitios .sitio .credito-mini{width:100%;font-size:.66rem;color:var(--tinta-2);opacity:.6;margin-top:.5rem}
.sitios .sitio .credito-mini a{color:inherit;border:none;text-decoration:underline}

/* datos duros de la ficha: tiempo, precio, aparcamiento */
.datos{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .7rem}
.dato{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.76rem;color:var(--tinta-2);
  background:var(--papel-3);border-radius:.55rem;padding:.2rem .5rem;
}
.dato svg{width:.95rem;height:.95rem;flex:none}
.dato b{font-family:"Fredoka",sans-serif;font-weight:500;color:var(--tinta)}

/* ── comparativa de escenarios: el precio manda ──────────────────
   Se usa en «Cuánto cuesta». La cifra grande es lo primero que se
   lee; debajo, en pequeño, a cuánta gente corresponde. La opción
   recomendada lleva además .elegida, que ya existe más arriba. */
.precio{
  display:block;font-family:"Fredoka",system-ui,sans-serif;font-weight:600;
  font-size:1.85rem;line-height:1.05;color:var(--tinta);
  font-variant-numeric:tabular-nums;margin:.15rem 0 .9rem;
}
.precio small{
  display:block;font-family:"Nunito",system-ui,sans-serif;
  font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tinta-2);margin-top:.3rem;
}
.tarjeta.elegida .precio{color:#2C7A5E}
.tarjeta.elegida{position:relative}
/* el sello va en la esquina, fuera del flujo: así las tres cifras
   grandes siguen a la misma altura y se pueden comparar de un vistazo */
.sello{
  position:absolute;top:-.65rem;right:1rem;
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:#E4F5EC;color:#2C7A5E;border:1.5px solid rgba(69,176,140,.45);
  border-radius:.55rem;padding:.2rem .55rem;
}
.desglose{list-style:none;margin:0 0 .8rem;padding:0;font-size:.88rem}
.desglose li{
  display:flex;justify-content:space-between;gap:.8rem;
  padding:.3rem 0;border-bottom:1.5px dashed var(--linea);color:var(--tinta-2);
}
.desglose li:last-child{border-bottom:none}
.desglose li b{color:var(--tinta);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── directorio de enlaces ── */
.directorio{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.1rem}
.grupo-enlaces{background:var(--papel-2);border:1.5px solid var(--linea);border-radius:var(--r);
  padding:1.1rem 1.2rem;box-shadow:var(--sombra)}
.grupo-enlaces h4{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem;font-size:1rem}
.grupo-enlaces h4 svg{width:1.5rem;height:1.5rem;flex:none}
.grupo-enlaces ul{list-style:none;margin:0;padding:0}
.grupo-enlaces li{padding:.4rem 0;border-bottom:1.5px dashed var(--linea);font-size:.9rem}
.grupo-enlaces li:last-child{border-bottom:none}
.grupo-enlaces li a{font-weight:600}
.grupo-enlaces li span{display:block;font-size:.78rem;color:var(--tinta-2);line-height:1.35}

/* ── ruta sugerida: lo que antes era "el día N" ── */
.ruta-sug{background:var(--papel-2);border:1.5px solid var(--linea);border-radius:var(--r);
  padding:1.2rem 1.3rem;box-shadow:var(--sombra);margin-bottom:1.1rem}
.ruta-sug .cab{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.ruta-sug .cab svg{width:2.2rem;height:2.2rem;flex:none}
.ruta-sug h4{font-size:1.12rem}
.ruta-sug .duracion{font-size:.78rem;color:var(--tinta-2)}
.ruta-sug ol{margin:.6rem 0 .8rem;padding-left:1.1rem;font-size:.93rem;color:var(--tinta-2)}
.ruta-sug ol li{padding:.15rem 0}
.ruta-sug ol li b{color:var(--tinta)}

/* ── pasos numerados (el plan del iPhone) ── */
.pasos{list-style:none;counter-reset:paso;margin:1rem 0 0;padding:0}
.pasos li{
  counter-increment:paso;position:relative;padding:.1rem 0 1rem 3rem;
  font-size:.96rem;color:var(--tinta-2);
}
.pasos li::before{
  content:counter(paso);position:absolute;left:0;top:0;
  width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;
  background:var(--mantequilla);color:var(--tinta);
  font-family:"Fredoka",sans-serif;font-weight:600;font-size:.9rem;
  box-shadow:0 2px 0 rgba(46,42,59,.16);
}
.pasos li b{color:var(--tinta)}
.pasos li code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
  background:var(--papel-3);border-radius:.4rem;padding:.05rem .35rem;
}

@media (max-width:640px){
  .sitio > img{height:9.5rem}
  .necesidades{grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}
}

/* ══════════════════════════════════════════════════════════════
   ÍNDICE FLOTANTE
   Un cuaderno se abre por donde hace falta, no se lee de arriba
   abajo. Botón fijo abajo a la derecha (alcance del pulgar) que
   despliega el índice completo. Es un <details>: funciona sin una
   línea de JavaScript, que es la condición para que siga sirviendo
   en el fichero offline si el visor del móvil no ejecuta scripts.
   ══════════════════════════════════════════════════════════════ */
.indice{
  position:fixed;z-index:60;
  right:max(1rem,env(safe-area-inset-right));
  bottom:calc(1rem + env(safe-area-inset-bottom));
}
.indice > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:.5rem;
  padding:.62rem .95rem .62rem .8rem;
  background:var(--papel-2);color:var(--tinta);
  border:2.5px solid var(--tinta);border-radius:2rem;
  font-family:"Fredoka","Zen Maru Gothic",sans-serif;
  font-weight:600;font-size:.95rem;line-height:1;
  box-shadow:0 3px 0 var(--tinta),0 8px 22px rgba(46,42,59,.22);
  transition:transform .12s ease,box-shadow .12s ease;
}
.indice > summary::-webkit-details-marker{display:none}
.indice > summary:active{transform:translateY(3px);box-shadow:0 0 0 var(--tinta),0 4px 12px rgba(46,42,59,.2)}
.indice > summary svg{width:1.5rem;height:1.5rem;flex:none}
.indice > summary .cerrar{display:none}
.indice[open] > summary{background:var(--mantequilla)}
.indice[open] > summary .abrir{display:none}
.indice[open] > summary .cerrar{display:flex}

.indice-panel{
  position:absolute;right:0;bottom:calc(100% + .7rem);
  width:min(21rem,calc(100vw - 2rem));
  max-height:min(70vh,32rem);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:var(--papel-2);border:2.5px solid var(--tinta);
  border-radius:1.3rem;padding:.9rem;
  box-shadow:0 4px 0 var(--tinta),0 18px 40px rgba(46,42,59,.28);
  animation:indice-sube .16s ease-out;
}
@keyframes indice-sube{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.indice-panel{animation:none}}

.indice-panel h4{
  margin:.1rem 0 .5rem;font-size:.76rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tinta-2);font-weight:600;
}
.indice-panel h4 + h4,.indice-panel ol + h4{margin-top:.9rem}
.indice-panel ol{list-style:none;margin:0;padding:0;counter-reset:ind}
.indice-panel ol li{counter-increment:ind}
.indice-panel a{
  display:flex;align-items:center;gap:.65rem;
  padding:.5rem .55rem;border-radius:.8rem;
  color:var(--tinta);text-decoration:none;font-size:.97rem;font-weight:500;
}
.indice-panel a:hover,.indice-panel a:focus-visible{background:var(--papel-3)}
.indice-panel svg{width:1.35rem;height:1.35rem;flex:none;color:var(--tinta-2)}
.indice-panel ol a::after{
  content:counter(ind,decimal-leading-zero);
  margin-left:auto;font-size:.72rem;color:var(--tinta-2);
  font-variant-numeric:tabular-nums;
}
.indice-zonas a{padding-left:1.1rem;font-size:.92rem;color:var(--tinta-2)}
.indice-zonas a::before{
  content:"";width:.36rem;height:.36rem;border-radius:50%;
  background:var(--aurora);flex:none;
}
.indice-arriba{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  margin-top:.7rem;padding-top:.7rem;border-top:2px dashed var(--linea);
  font-size:.88rem;color:var(--tinta-2);text-decoration:none;
}
.indice-arriba:hover{color:var(--tinta)}

@media (max-width:420px){
  .indice > summary .txt{display:none}
  .indice > summary{padding:.7rem;border-radius:50%}
}