/* =========================================================================
   Guía de Nerja (que-ver-en-nerja/) · 2026-10-17
   Va DESPUÉS de styles.css, del que toma los colores (:root), la letra, la
   cabecera, los botones y el pie. Aquí solo lo propio de la guía: portada,
   barra de secciones, tarjetas de lugares, mapa de playas, gráfica del tiempo,
   meses, historia, zonas y preguntas.
   ========================================================================= */

/* El grosor 800 de la letra: los 400-700 están en styles.css (ver allí por
   qué la letra va en la propia web). Las guías siempre lo han tenido; la
   portada, no. Los mismos archivos: el navegador no los baja dos veces. */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap;
  src: url(../fonts/open-sans-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap;
  src: url(../fonts/open-sans-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap;
  src: url(../fonts/open-sans-greek-ext.woff2) format("woff2");
  unicode-range: U+1F00-1FFF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap;
  src: url(../fonts/open-sans-greek.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap;
  src: url(../fonts/open-sans-hebrew.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap;
  src: url(../fonts/open-sans-math.woff2) format("woff2");
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap;
  src: url(../fonts/open-sans-symbols.woff2) format("woff2");
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap;
  src: url(../fonts/open-sans-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap;
  src: url(../fonts/open-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap;
  src: url(../fonts/open-sans-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 {
  --azul-bandera: #1f7fc4;   /* las playas con Bandera Azul (mapa y lista) */
  --texto-suave: #3d4a50;
  /* que <details> pueda animar su alto hasta "auto" (Chrome 129+; en los demás
     se abre de golpe, como siempre) */
  interpolate-size: allow-keywords;
}

/* ---------------------------- Cabecera ----------------------------
   La de la portada, con la barra de secciones de la guía debajo. Al bajar se
   recoge la fila del logo (queda solo la barra); al subir vuelve. */
.site-header--guia {
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), background-color .35s ease, box-shadow .35s ease, padding .35s ease;
}
.site-header--guia.is-solid { padding-bottom: 0; }
.site-header--guia.is-solid .site-header__inner { padding-bottom: 8px; }
.site-header--guia.es-recogida:not(.is-open) { transform: translateY(calc(-1 * var(--alto-marca, 60px))); }

/* en el menú, "Guía de Nerja" va marcado: estás en ella; y dentro, la página
   en la que estás, en azul marino (en dorado, en el menú del móvil se
   confundía con el botón del teléfono, que va justo debajo). Desde el
   18-oct-2026 la guía es un desplegable: ver styles.css, "Guía de Nerja con
   sus dos páginas". */
.nav__abre.es-actual { background: var(--oro); border-color: var(--oro); color: #2a2205; }
.site-header.is-solid .nav__abre.es-actual { background: var(--azul-800); border-color: var(--azul-800); color: #fff; }
.site-header .nav__list .nav__sub a[aria-current="page"] { background: var(--azul-800); border-color: var(--azul-800); color: #fff; }

.guia-nav { display: none; position: relative; border-top: 1px solid rgba(11, 43, 61, .08); }
.site-header--guia.is-solid .guia-nav { display: block; }
.site-header--guia.is-open .guia-nav { display: none; }
.guia-nav__pista {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 7px 9px;
}
.guia-nav__pista::-webkit-scrollbar { display: none; }
/* centradas cuando caben, y desde el borde cuando no (sin que se corte la primera) */
.guia-nav__pista > :first-child { margin-left: auto; }
.guia-nav__pista > :last-child { margin-right: auto; }
.guia-nav__pista a {
  flex: none;
  padding: 7px 15px;
  border-radius: 999px;
  color: var(--azul-800);
  font-size: .86rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
.guia-nav__pista a:hover { background: #e9f0f4; text-decoration: none; }
.guia-nav__pista a[aria-current="true"] { background: var(--azul-800); color: #fff; }
.guia-nav__progreso { position: absolute; inset: auto 0 0; height: 3px; background: rgba(11, 43, 61, .06); }
.guia-nav__progreso i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--oro), var(--terracota));
  transform: scaleX(var(--progreso, 0));
  transform-origin: left center;
}

/* ---------------------------- Créditos de las fotos ---------------------------- */
.credito { font-size: .68rem; line-height: 1.3; letter-spacing: .01em; }
figure > .credito,
.credito--portada {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  margin: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(6, 26, 38, .55);
  color: rgba(255, 255, 255, .9);
}
.lugar__foto > .credito { right: auto; left: 10px; }
.credito a, a.credito { color: inherit; }
.credito a:hover, a.credito:hover { color: #fff; }
.credito--linea { margin-left: .35em; color: var(--gris); white-space: nowrap; }

/* ---------------------------- Portada ---------------------------- */
.guia-portada {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: min(92vh, 880px);
  min-height: min(92svh, 880px);
  overflow: hidden;
  background: var(--azul-900);
  color: #fff;
}
.guia-portada__foto { position: absolute; inset: 0; z-index: -2; }
.guia-portada__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 28% 62%;
  will-change: transform;
}
/* oscurece arriba (la cabecera) y sobre todo abajo a la izquierda, donde va el texto */
.guia-portada::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 26, 38, .5) 0%, rgba(6, 26, 38, 0) 24%, rgba(6, 26, 38, 0) 40%, rgba(6, 26, 38, .72) 74%, rgba(6, 26, 38, .9) 100%),
    linear-gradient(90deg, rgba(6, 26, 38, .5) 0%, rgba(6, 26, 38, 0) 70%);
}
.guia-portada__contenido { padding-top: calc(150px + var(--franja)); padding-bottom: clamp(56px, 9vh, 104px); }
.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: .86rem;
  color: rgba(255, 255, 255, .82);
}
.migas li + li::before { content: "›"; margin-right: 6px; opacity: .7; }
.migas a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .45);
  text-underline-offset: 3px;
}
.guia-portada__antetitulo { margin-bottom: 12px; }
.guia-portada__titulo {
  max-width: 16ch;
  text-wrap: balance;
  margin-bottom: .32em;
  font-size: clamp(2.5rem, 1.35rem + 4.8vw, 5.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-shadow: 0 2px 34px rgba(0, 0, 0, .28);
}
.guia-portada__entradilla {
  max-width: 48ch;
  font-size: clamp(1.05rem, .96rem + .45vw, 1.32rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, .93);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .3);
}
.guia-portada__firma {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-size: .9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .86);
}
.guia-portada__firma img { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; padding: 2px; }
.guia-portada__firma strong { color: #fff; }

/* ---------------------------- Introducción ---------------------------- */
.guia-intro { padding: clamp(52px, 7vw, 92px) 0 clamp(48px, 6vw, 80px); }
.guia-intro__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}
.guia-intro__destacado {
  font-size: clamp(1.25rem, 1.02rem + .85vw, 1.72rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.012em;
  color: var(--azul-800);
}
.guia-intro__texto p:not(.guia-intro__destacado) { color: var(--gris); }
.cifras-guia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--arena-200);
  border-radius: 20px;
  background: var(--arena-200);
}
.cifras-guia li { padding: clamp(16px, 2vw, 24px); background: var(--arena-50); }
.cifras-guia strong {
  display: block;
  margin-bottom: 2px;
  font-size: clamp(1.55rem, 1.15rem + 1.3vw, 2.3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--azul-800);
}
.cifras-guia span { font-size: .88rem; line-height: 1.35; color: var(--gris); }

.indice {
  margin-top: clamp(38px, 5vw, 60px);
  padding: clamp(22px, 3vw, 34px);
  border-radius: 24px;
  background: var(--azul-800);
  color: #fff;
}
.indice__titulo {
  margin: 0 0 16px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oro-claro);
}
.indice__lista {
  counter-reset: indice;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* nueve apartados en Dónde comer (30-oct-2026): de tres en fila, que de cuatro
   quedaba uno solo abajo */
@media (min-width: 1000px) {
  .indice__lista--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.indice__lista a {
counter-increment: indice;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  transition: background-color .25s ease, transform .25s ease, border-color .25s ease;
}
.indice__lista a::before {
  content: counter(indice, decimal-leading-zero);
  grid-row: span 2;
  font-size: .95rem;
  font-weight: 800;
  color: var(--oro);
}
.indice__lista span { font-weight: 700; line-height: 1.3; }
.indice__lista small { font-size: .82rem; color: rgba(255, 255, 255, .7); }
.indice__lista a:hover { text-decoration: none; background: rgba(255, 255, 255, .12); border-color: rgba(233, 170, 18, .5); transform: translateY(-2px); }

/* ---------------------------- Secciones ---------------------------- */
/* con la cabecera entera a la vista (logo + barra) mide ~110 px */
.guia-seccion { scroll-margin-top: calc(112px + var(--franja)); }

.datos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.datos li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--arena-100);
  color: var(--azul-800);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
}
.datos .ico { width: 1.05em; height: 1.05em; }
.datos li.datos__aviso { background: #fbe4d8; color: #8a3a17; }

/* ---------------------------- Qué ver: los 10 lugares ---------------------------- */
.lugares {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}
.lugar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(11, 43, 61, .07);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--sombra-1);
  scroll-margin-top: calc(120px + var(--franja));
  transition: transform .35s ease, box-shadow .35s ease;
}
.lugar:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.lugar__foto { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--arena-100); }
.lugar__foto picture { display: block; height: 100%; }
.lugar__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.2, .7, .2, 1);
}
.lugar:hover .lugar__foto img { transform: scale(1.05); }
.lugar__foto--alta img { object-position: 50% 28%; }
/* tres fotos en fila en el hueco de una (Origen, 29-oct-2026; Tardeo, 30-oct) */
.lugar__foto--tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
/* la del atardecer de Tardeo es apaisada: que el recorte deje las dos copas */
#tardeo picture:last-child img { object-position: 66% 50%; }
/* la ficha de Cielito Lindo va sola y es más ancha: a 4/3 las fotos salían altísimas */
#cielito-lindo .lugar__foto { aspect-ratio: 3 / 2; }
.lugar__cuerpo { position: relative; display: flex; flex: 1; flex-direction: column; padding: 28px 24px 24px; }
.lugar__cuerpo > p { font-size: .97rem; color: var(--texto-suave); }
.lugar__cuerpo .datos { margin-top: auto; padding-top: 6px; }
.lugar__num {
  position: absolute;
  top: -27px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--oro);
  color: #2a2205;
  font-size: 1.02rem;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(233, 170, 18, .32);
}
.lugar__titulo { margin-bottom: .5em; padding-right: 48px; font-size: 1.24rem; color: var(--azul-800); }
.lugar--aviso .lugar__num { background: var(--terracota); color: #fff; box-shadow: 0 8px 20px rgba(192, 113, 75, .3); }

/* el primero, a lo ancho: foto a la izquierda y texto a la derecha */
.lugar--grande { grid-column: 1 / -1; flex-direction: row; }
.lugar--grande .lugar__foto { flex: 0 0 58%; aspect-ratio: auto; min-height: 440px; }
.lugar--grande .lugar__cuerpo { justify-content: center; padding: clamp(30px, 4vw, 56px); }
.lugar--grande .lugar__num { position: static; margin-bottom: 18px; border: 0; }
.lugar--grande .lugar__titulo { padding-right: 0; font-size: clamp(1.7rem, 1.25rem + 1.3vw, 2.4rem); }
.lugar--grande .lugar__cuerpo > p { font-size: 1.04rem; }

/* ---------------------------- El mapa de playas ---------------------------- */
.mapa {
  margin: 0 0 clamp(34px, 5vw, 56px);
  overflow: hidden;
  border: 1px solid rgba(11, 43, 61, .07);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--sombra-1);
}
.mapa__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 18px clamp(18px, 2.4vw, 26px);
}
.mapa__titulo { margin: 0; font-weight: 700; color: var(--azul-800); }
.mapa__leyenda,
.clima__leyenda { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; font-size: .84rem; color: var(--gris); }
.mapa__leyenda li,
.clima__leyenda li { display: inline-flex; align-items: center; gap: 8px; }
.leyenda {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: .68rem;
  font-weight: 800;
}
.leyenda--playa { background: var(--azul-800); color: #fff; }
.leyenda--azul { background: var(--azul-bandera); color: #fff; }
.leyenda--lugar { border: 2px solid var(--azul-800); background: #fff; }
.mapa__lienzo { position: relative; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.mapa__lienzo:focus-visible { outline-offset: -3px; }
.mapa__svg { display: block; width: 100%; min-width: 760px; height: auto; }
.mapa__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 18px;
  padding: 12px clamp(18px, 2.4vw, 26px) 14px;
  border-top: 1px solid var(--arena-200);
  font-size: .78rem;
  color: var(--gris);
}
.mapa__pie a { color: inherit; text-decoration: underline; }
.mapa__desliza { display: none; align-items: center; gap: 6px; font-weight: 700; color: var(--azul-700); }

/* lo de dentro del SVG */
.mapa__rotulo {
  font: 600 14px var(--sans);
  fill: var(--azul-700);
  paint-order: stroke;
  stroke: rgba(247, 241, 228, .92);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.mapa__rotulo--paraje { font-size: 15px; font-style: italic; fill: #557542; stroke: rgba(223, 234, 210, .95); }
.mapa__rotulo--rio { font-size: 13px; font-style: italic; fill: #2f7499; }
.mapa__rotulo--borde { font-size: 13px; font-weight: 700; fill: var(--azul-800); stroke: rgba(205, 228, 237, .9); }
.mapa__pueblo { font: 800 26px var(--sans); letter-spacing: .32em; fill: rgba(14, 50, 71, .8); }
.mapa__pueblo--peq { font-size: 16px; letter-spacing: .26em; }
.mapa__norte text,
.mapa__escala text { font: 700 12px var(--sans); fill: var(--azul-800); }
.mapa__lugar circle { fill: #fff; stroke: var(--azul-800); stroke-width: 2; }
.mapa__lugar svg { overflow: visible; fill: none; stroke: var(--azul-800); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mapa__lugar text {
  font: 700 13.5px var(--sans);
  fill: var(--azul-800);
  paint-order: stroke;
  stroke: rgba(247, 241, 228, .94);
  stroke-width: 4.5px;
  stroke-linejoin: round;
}
.mapa__lugar--oro circle { fill: var(--oro); stroke: #fff; stroke-width: 2.5; }
.mapa__lugar--oro svg { fill: #fff; stroke: #fff; stroke-width: 1; }
.mapa__lugar--oro text { font-size: 15px; font-weight: 800; }
.mapa__pin { cursor: pointer; }
.mapa__pin:focus { outline: none; }
.mapa__guia { stroke: var(--azul-800); stroke-width: 1.2; opacity: .5; }
.mapa__orilla-punto { fill: var(--azul-800); }
.mapa__chincheta { transform-box: fill-box; transform-origin: center; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.mapa__chincheta circle { fill: var(--azul-800); stroke: #fff; stroke-width: 2.5; transition: fill .2s ease; }
.mapa__chincheta text { font: 800 13px var(--sans); fill: #fff; pointer-events: none; }
.mapa__bandera { fill: none; stroke: var(--azul-bandera); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mapa__pin--azul .mapa__chincheta circle { fill: var(--azul-bandera); }
.mapa__pin:hover .mapa__chincheta,
.mapa__pin:focus-visible .mapa__chincheta,
.mapa__pin.es-activo .mapa__chincheta { transform: scale(1.28); }
.mapa__pin:hover .mapa__chincheta circle,
.mapa__pin:focus-visible .mapa__chincheta circle,
.mapa__pin.es-activo .mapa__chincheta circle { fill: var(--oro); }
.mapa__pin:hover .mapa__chincheta text,
.mapa__pin:focus-visible .mapa__chincheta text,
.mapa__pin.es-activo .mapa__chincheta text { fill: #2a2205; }
.mapa__pin:focus-visible .mapa__chincheta circle { stroke: var(--azul-800); stroke-width: 3; }
.mapa__nombre {
  font: 700 13px var(--sans);
  fill: var(--azul-800);
  paint-order: stroke;
  stroke: rgba(210, 232, 240, .95);
  stroke-width: 4.5px;
  stroke-linejoin: round;
}
.mapa__nombre--grupo { font-style: italic; }

/* ---------------------------- Las playas ---------------------------- */
/* columnas de texto y no rejilla: las fichas pasan de una columna a la
   siguiente en orden (de oeste a este) y las tres quedan igual de altas */
.playas { columns: 3; column-gap: clamp(18px, 2.4vw, 32px); }
.playas__zona { display: contents; }
.playas__zona-titulo {
  break-after: avoid;
  margin: 0 0 12px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terracota);
}
.playas__lista { margin: 0 0 24px; padding: 0; list-style: none; }
.playas__lista > li + li { margin-top: 10px; }
.playa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(11, 43, 61, .08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 43, 61, .04);
  break-inside: avoid;
  scroll-margin-top: calc(130px + var(--franja));
  transition: border-color .25s ease, box-shadow .25s ease;
}
.playa.es-activa,
.playa:target { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(233, 170, 18, .25), var(--sombra-1); }
.playa__num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--azul-800);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
}
.playa--azul .playa__num { background: var(--azul-bandera); }
.playa__nombre { margin: 3px 0 7px; font-size: 1.05rem; color: var(--azul-800); }
.playa__etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--arena-100);
  color: var(--azul-700);
  font-size: .72rem;
  font-weight: 700;
}
.etiqueta .ico { width: 1em; height: 1em; }
.etiqueta--azul { background: #e2f0fa; color: #145a8c; }
.playa p { margin: 0; font-size: .91rem; color: #46545a; }

.destacado-foto {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(300px, 34vw, 420px);
  margin: clamp(16px, 3vw, 32px) 0 0;
  overflow: hidden;
  border-radius: 24px;
  color: #fff;
}
.destacado-foto picture,
.destacado-foto img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.destacado-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(6, 26, 38, .86) 0%, rgba(6, 26, 38, .55) 48%, rgba(6, 26, 38, .05) 82%);
}
.destacado-foto figcaption { max-width: 640px; padding: clamp(24px, 3.4vw, 40px); font-size: 1.04rem; line-height: 1.6; }
.destacado-foto strong { display: block; margin-bottom: 6px; font-size: 1.15rem; color: var(--oro-claro); }
.destacado-foto .credito--linea { display: block; margin: 12px 0 0; color: rgba(255, 255, 255, .7); }

/* ---------------------------- Qué hacer ---------------------------- */
.plan {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(26px, 4.5vw, 64px);
  align-items: center;
  margin-bottom: clamp(44px, 6vw, 76px);
}
.plan--al-reves .plan__foto { order: 2; }
.plan__foto {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: var(--sombra-2);
}
.plan__foto picture { display: block; height: 100%; }
.plan__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plan__tipo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 13px;
  border-radius: 999px;
  background: #e9f0f4;
  color: var(--azul-700);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.plan__titulo { font-size: clamp(1.45rem, 1.12rem + 1vw, 2.05rem); color: var(--azul-800); }
.plan__texto > p { color: var(--texto-suave); }
.plan__texto .datos { margin-top: 18px; }
/* el botón a la web del sitio (Chiringuito de Ayo, 2026-10-25; Origen y
   Tardeo, 2026-10-29: en las fichas, que son columnas flex, sin estirarse) */
.plan__boton { margin-top: 20px; align-self: flex-start; }

.planes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.planes__item {
  padding: 26px 24px;
  border: 1px solid var(--arena-200);
  border-radius: 20px;
  background: var(--arena-50);
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.planes__item:hover { transform: translateY(-3px); background: #fff; box-shadow: var(--sombra-1); }
.planes__ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--azul-800);
  color: var(--oro-claro);
}
.planes__ico .ico { width: 24px; height: 24px; }
.planes__titulo { margin-bottom: .4em; font-size: 1.08rem; color: var(--azul-800); }
.planes__item p { margin: 0; font-size: .94rem; color: #46545a; }
.planes__item a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------- Mes a mes ---------------------------- */
.clima {
  margin: 0 0 22px;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid rgba(11, 43, 61, .07);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--sombra-1);
}
.clima__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-bottom: 6px; }
.clima__titulo { margin: 0; font-weight: 700; color: var(--azul-800); }
.leyenda--aire { width: 12px; height: 24px; border-radius: 6px; background: linear-gradient(#e9aa12, #e0915a 50%, #5e9cc0); }
.leyenda--agua { position: relative; width: 26px; height: 3px; border-radius: 2px; background: var(--azul-600); }
.leyenda--agua::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 2.5px solid var(--azul-600);
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}
.clima__lienzo { overflow-x: auto; scrollbar-width: thin; }
.clima__svg { display: block; width: 100%; min-width: 620px; height: auto; }
.clima__rejilla path { stroke: rgba(11, 43, 61, .12); stroke-dasharray: 4 6; }
.clima__rejilla text { font: 600 13px var(--sans); fill: var(--gris); }
.clima__fondo { fill: transparent; transition: fill .3s ease; }
.clima__mes.es-ahora .clima__fondo { fill: rgba(233, 170, 18, .13); }
.clima__max { font: 800 15px var(--sans); fill: var(--azul-800); }
.clima__min { font: 600 13px var(--sans); fill: var(--gris); }
.clima__nombre { font: 700 14px var(--sans); fill: var(--azul-800); }
.clima__mes.es-ahora .clima__nombre { fill: #9a6a00; }
.clima__agua { stroke: var(--azul-600); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.clima__punto { fill: #fff; stroke: var(--azul-600); stroke-width: 2.5; }
.clima__pie { margin-top: 10px; font-size: .78rem; color: var(--gris); }

.meses-atajo { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 18px; padding: 3px 0; }
.meses-atajo::-webkit-scrollbar { display: none; }
.meses-atajo a {
  flex: 1 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--arena-200);
  border-radius: 999px;
  background: #fff;
  color: var(--azul-800);
  font-size: .84rem;
  font-weight: 700;
  text-align: center;
  transition: background-color .2s ease, border-color .2s ease;
}
.meses-atajo a:hover { text-decoration: none; border-color: var(--azul-800); }
.meses-atajo a.es-ahora { border-color: var(--oro); background: var(--oro); color: #2a2205; }

.meses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ficha-mes {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 18px;
  border: 1px solid rgba(11, 43, 61, .08);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 43, 61, .04);
  scroll-margin-top: calc(130px + var(--franja));
  transition: box-shadow .3s ease, transform .3s ease;
}
.ficha-mes:hover { transform: translateY(-3px); box-shadow: var(--sombra-1); }
.ficha-mes.es-ahora { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(233, 170, 18, .22), var(--sombra-1); }
.ficha-mes.es-ahora::after {
  content: "Este mes";
  position: absolute;
  top: -11px;
  left: 18px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--oro);
  color: #2a2205;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ficha-mes__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ficha-mes__titulo { margin: 0; font-size: 1.04rem; line-height: 1.25; text-align: left; color: var(--azul-800); }
.ficha-mes__temp { display: grid; justify-items: end; gap: 2px; margin: 0; line-height: 1; white-space: nowrap; }
.ficha-mes__max { font-size: .72rem; font-weight: 700; color: var(--terracota); }
.ficha-mes__max strong { font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; }
.ficha-mes__min { font-size: .7rem; font-weight: 700; color: var(--azul-400); }
.ficha-mes__min strong { font-size: 1rem; font-weight: 800; }
.ficha-mes__datos {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 11px 0;
  border-block: 1px solid var(--arena-200);
  list-style: none;
  font-size: .85rem;
  color: #46545a;
}
.ficha-mes__datos li { display: flex; align-items: center; gap: 8px; }
.ficha-mes__datos .ico { color: var(--azul-400); }
.ficha-mes__datos b { color: var(--azul-800); }
.ficha-mes__texto { margin-bottom: 12px; font-size: .9rem; color: var(--texto-suave); }
.ficha-mes__plan {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: auto 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--arena-50);
  color: var(--azul-800);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
}
.ficha-mes__plan .ico { flex: none; margin-top: 1px; color: var(--terracota); }

/* ---------------------------- Historia ---------------------------- */
.linea { position: relative; max-width: 1000px; margin: 0 auto; padding: 0; list-style: none; }
.linea::before,
.linea::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
}
.linea::before { background: var(--arena-200); }
/* el trazo dorado avanza con el scroll (guia.js le da --avance); sin JS, entero */
.linea::after {
  background: linear-gradient(var(--oro), var(--terracota));
  transform: scaleY(var(--avance, 1));
  transform-origin: top center;
}
.linea__hito { position: relative; width: 50%; padding: 0 46px 38px 0; text-align: right; }
.linea__hito:nth-child(even) { margin-left: 50%; padding: 0 0 38px 46px; text-align: left; }
@media (min-width: 861px) {
  .linea__hito + .linea__hito { margin-top: -56px; }
}
.linea__hito::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 5px;
  right: -11px;
  width: 22px;
  height: 22px;
  border: 5px solid var(--oro);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(233, 170, 18, .14);
}
.linea__hito:nth-child(even)::before { right: auto; left: -11px; }
.linea__fecha {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 13px;
  border-radius: 999px;
  background: var(--azul-800);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .03em;
}
.linea__hito--hoy .linea__fecha { background: var(--oro); color: #2a2205; }
.linea__titulo { margin-bottom: .35em; font-size: 1.2rem; color: var(--azul-800); }
.linea__hito > p:not(.linea__fecha) { margin: 0; font-size: .97rem; color: var(--texto-suave); }
.linea__foto { max-width: 380px; margin: 16px 0 0; text-align: left; }
.linea__hito:nth-child(odd) .linea__foto { margin-left: auto; }
.linea__foto img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: var(--sombra-1); }
.linea__foto figcaption { margin-top: 9px; font-size: .8rem; line-height: 1.45; color: var(--gris); }
.linea__hito:nth-child(odd) .linea__foto figcaption { text-align: right; }

/* ---------------------------- Dónde alojarse ---------------------------- */
.zonas-guia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.zona-guia {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  border: 1px solid rgba(11, 43, 61, .07);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--sombra-1);
}
.zona-guia__ico {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 16px;
  border-radius: 15px;
  background: #e9f0f4;
  color: var(--azul-700);
}
.zona-guia__ico .ico { width: 25px; height: 25px; }
.zona-guia__titulo { margin-bottom: .45em; font-size: 1.16rem; color: var(--azul-800); }
.zona-guia > p { font-size: .95rem; color: #46545a; }
.zona-guia > p.zona-guia__ideal {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--arena-200);
  font-size: .82rem;
  font-weight: 700;
  color: var(--terracota);
}
.zona-guia--cta {
  justify-content: center;
  border: 0;
  background: radial-gradient(130% 120% at 100% 0%, #1d5a7d 0%, var(--azul-800) 58%, var(--azul-900) 100%);
  color: #fff;
}
.zona-guia--cta .zona-guia__titulo { font-size: 1.4rem; color: #fff; }
.zona-guia--cta > p { color: rgba(255, 255, 255, .82); }
.zona-guia--cta .btn { align-self: flex-start; margin-top: 6px; }
.zona-guia__wa { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: #fff; font-size: .92rem; font-weight: 600; }
.zona-guia__wa svg { width: 20px; height: 20px; fill: #25d366; }
.zona-guia__wa:hover { color: var(--oro-claro); }

/* ---------------------------- Preguntas ---------------------------- */
.preguntas {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: clamp(24px, 5vw, 76px);
  align-items: start;
}
.preguntas__cabeza { position: sticky; top: 130px; margin-bottom: 0; }
.pregunta { border-bottom: 1px solid var(--arena-200); }
.pregunta:first-child { border-top: 1px solid var(--arena-200); }
.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  list-style: none;
  cursor: pointer;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--azul-800);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e9f0f4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e3247' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .3s ease, background-color .3s ease;
}
.pregunta summary:hover { color: var(--azul-600); }
.pregunta[open] summary::after { transform: rotate(45deg); background-color: var(--oro); }
.pregunta p { margin: 0; padding: 0 50px 22px 0; color: var(--texto-suave); }
.pregunta::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .35s ease, content-visibility .35s allow-discrete;
}
.pregunta[open]::details-content { block-size: auto; }

/* ---------------------------- Fuentes ---------------------------- */
.fuentes {
  padding: clamp(40px, 5vw, 64px) 0;
  border-top: 1px solid var(--arena-200);
  background: var(--arena-50);
  font-size: .86rem;
  color: var(--gris);
}
.fuentes__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); }
.fuentes__titulo {
  margin-bottom: 12px;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--azul-800);
}
.fuentes__nota { margin-bottom: 8px; }
.fuentes__lista { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.fuentes__lista li { position: relative; padding-left: 16px; }
.fuentes__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oro);
}
.fuentes a { color: var(--azul-600); text-decoration: underline; text-decoration-color: rgba(24, 79, 125, .3); text-underline-offset: 2px; }

/* ---------------------------- Llamada final ---------------------------- */
.guia-final { padding: clamp(48px, 6vw, 84px) 0; background: var(--arena-100); }
.guia-final__caja {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 26px 48px;
  align-items: center;
  overflow: hidden;
  padding: clamp(30px, 4.4vw, 60px);
  border-radius: 28px;
  background: radial-gradient(120% 140% at 100% 0%, #1d5a7d 0%, var(--azul-800) 55%, var(--azul-900) 100%);
  color: rgba(255, 255, 255, .85);
}
/* el aro dorado del logo, de adorno */
.guia-final__caja::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -90px;
  top: -110px;
  width: 340px;
  height: 340px;
  border: 2px solid rgba(233, 170, 18, .45);
  border-radius: 50%;
}
.guia-final__titulo { margin-bottom: .4em; font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.5rem); color: #fff; }
.guia-final__caja p:last-child { max-width: 56ch; }
.guia-final__botones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------- Pantallas ---------------------------- */
@media (max-width: 1100px) {
  .meses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .lugares,
  .planes,
  .zonas-guia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .playas { columns: 2; }
  .preguntas { grid-template-columns: 1fr; }
  .preguntas__cabeza { position: static; }
}
@media (max-width: 900px) {
  .mapa__desliza { display: inline-flex; }
  .mapa__svg { min-width: 900px; }
}
@media (max-width: 860px) {
  .guia-intro__rejilla,
  .plan,
  .fuentes__rejilla,
  .guia-final__caja { grid-template-columns: 1fr; }
  .plan--al-reves .plan__foto { order: 0; }
  .lugar--grande { flex-direction: column; }
  .lugar--grande .lugar__foto { flex: none; min-height: 0; aspect-ratio: 4 / 3; }
  .meses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* la historia, a un solo lado */
  .linea::before,
  .linea::after { left: 11px; }
  .linea__hito,
  .linea__hito:nth-child(even) { width: auto; margin-left: 0; padding: 0 0 32px 46px; text-align: left; }
  .linea__hito::before,
  .linea__hito:nth-child(even)::before { right: auto; left: 0; }
  .linea__hito:nth-child(odd) .linea__foto figcaption { text-align: left; }
}
@media (max-width: 640px) {
  /* los doce meses, en una tira que se desliza (el mes en curso, a la vista) */
  .meses {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 12px;
    margin-inline: calc(-1 * clamp(20px, 5vw, 40px));
    padding: 14px clamp(20px, 5vw, 40px) 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(20px, 5vw, 40px);
    scrollbar-width: none;
  }
  .meses::-webkit-scrollbar { display: none; }
  .ficha-mes { scroll-snap-align: start; }
  .ficha-mes:hover { transform: none; }
  /* la gráfica, más grande y deslizable: a 620 px las cifras no se leían */
  .clima__svg { min-width: 880px; }
  .guia-final__caja::after { right: -150px; top: -190px; width: 300px; height: 300px; opacity: .6; }
  .lugares,
  .planes,
  .zonas-guia { grid-template-columns: 1fr; }
  .playas { columns: 1; }
  .guia-portada__contenido { padding-top: calc(120px + var(--franja)); }
  .guia-portada__firma { font-size: .84rem; }
  .lugar__cuerpo { padding: 28px 20px 22px; }
  .pregunta p { padding-right: 0; }
  .destacado-foto::before { background: linear-gradient(0deg, rgba(6, 26, 38, .9) 0%, rgba(6, 26, 38, .6) 55%, rgba(6, 26, 38, .15) 100%); }
  .credito--portada { right: 8px; bottom: 8px; font-size: .62rem; }
}
@media (max-width: 380px) {
  .cifras-guia li { padding: 14px; }
  .cifras-guia strong { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lugar:hover,
  .ficha-mes:hover,
  .planes__item:hover,
  .indice__lista a:hover { transform: none; }
  .lugar:hover .lugar__foto img { transform: none; }
  .pregunta::details-content { transition: none; }
  .site-header--guia { transition: none; }
}

/* ---- Dónde comer en Nerja (donde-comer-en-nerja/, 18-oct-2026) -----------
   La misma maqueta que la guía. Solo hacen falta rejillas de dos, la línea
   de la dirección con su enlace al mapa y la etiqueta de las distinciones
   (Guía Michelin, Guía Repsol). */
.lugares--dos,
.planes--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* una ficha sola, del ancho de la entradilla (Cielito Lindo, 30-oct-2026) */
.lugares--uno { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.guia .sitio__donde {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 14px 0 0;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--gris);
}
.guia .sitio__donde .ico { width: 1.05em; height: 1.05em; color: var(--terracota); }
.guia .sitio__donde a { font-weight: 700; color: var(--azul-700); text-decoration: underline; text-underline-offset: 2px; }
.guia .sitio__donde a:hover { color: var(--terracota); }
.guia .sitio__distincion { margin: 0 0 10px; }
.planes--debajo { margin-top: clamp(18px, 2.2vw, 28px); }
.etiqueta--oro { background: #fbf0d2; color: #6f5205; }
/* en las secciones de fondo arena, los datos y las etiquetas en blanco: del
   mismo color que el fondo no se distinguían */
.section--sand .datos li,
.section--sand .plan__tipo,
.section--sand .etiqueta:not(.etiqueta--oro) { background: #fff; }
/* ...menos dentro de una ficha, que ya es blanca (30-oct-2026) */
.section--sand .lugar .etiqueta:not(.etiqueta--oro) { background: var(--arena-100); }
@media (max-width: 640px) {
  .lugares--dos,
  .planes--dos { grid-template-columns: 1fr; }
}

/* ---- Qué ver en Granada (que-ver-en-granada/, 21-oct-2026) ----------------
   La misma maqueta. Lo nuevo: las seis Suites Dreams Granada (tarjetas como
   las de los lugares, con su enlace para reservar en Icnea), el título de esa
   rejilla y la lista de más alojamientos de Cánovas en Granada. */
.suites__titulo { margin: clamp(34px, 4.5vw, 54px) 0 18px; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); color: var(--azul-800); }
.suite__reservar {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: 16px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--azul-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.suite__reservar .ico { width: 1.1em; height: 1.1em; transition: transform .3s ease; }
.suite__reservar:hover { color: var(--terracota); }
.suite__reservar:hover .ico { transform: translateX(4px); }
.mas-granada {
  margin-top: clamp(30px, 4vw, 48px);
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--arena-200);
  border-radius: 22px;
  background: #fff;
}
.mas-granada__titulo { margin: 0 0 10px; font-size: 1.15rem; color: var(--azul-800); }
.mas-granada__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.mas-granada__lista li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--arena-200); }
.mas-granada__lista a { font-weight: 700; color: var(--azul-700); text-decoration: underline; text-underline-offset: 2px; }
.mas-granada__lista a:hover { color: var(--terracota); }
.mas-granada__lista span { font-size: .88rem; color: var(--gris); }
@media (max-width: 640px) {
  .mas-granada__lista { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .suite__reservar .ico { transition: none; }
}

/* ---------------------------- Páginas legales ----------------------------
   Aviso legal, privacidad, cookies y condiciones de reserva (21-oct-2026).
   Arriba, una franja azul marino con el título, que hace de portada: la
   cabecera va transparente encima y se vuelve blanca al bajar, como en las
   guías (sin la barra de secciones, así que no se recoge al bajar). Debajo,
   a la izquierda, las cuatro páginas (fijas al bajar) y el texto en una
   columna de lectura; en el móvil, las cuatro arriba en pastillas. */
.legal-cabeza {
  padding: calc(128px + var(--franja)) 0 clamp(36px, 5vw, 58px);
  background: var(--azul-800);
  color: #fff;
}
.legal-cabeza__titulo {
  margin: 0 0 .3em;
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: #fff;
}
.legal-cabeza__fecha { margin: 0; font-size: .92rem; color: rgba(255, 255, 255, .74); }
.legal {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 5vw, 76px);
  padding-block: clamp(40px, 6vw, 72px) var(--paso);
}
.legal__otras { position: sticky; top: 96px; }
.legal__otras-titulo {
  margin: 0 0 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terracota);
}
.legal__otras ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.legal__otras a {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--azul-800);
  transition: background-color .2s ease;
}
.legal__otras a:hover { background: var(--arena-100); }
.legal__otras a[aria-current="page"] { background: var(--azul-800); color: #fff; }
.legal__texto { max-width: 74ch; color: var(--texto-suave); }
.legal__texto p, .legal__texto li { line-height: 1.7; }
.legal__texto ul, .legal__texto ol { margin: 0 0 1em; padding-left: 1.3em; }
.legal__texto li + li { margin-top: .45em; }
.legal__texto h2 {
  margin: 2.2em 0 .6em;
  scroll-margin-top: calc(100px + var(--franja));
  font-size: clamp(1.25rem, 1.12rem + .55vw, 1.55rem);
  color: var(--azul-800);
}
.legal__texto h3 { margin: 1.7em 0 .45em; font-size: 1.07rem; color: var(--azul-800); }
.legal__texto a {
  color: var(--azul-600);
  text-decoration: underline;
  text-decoration-color: rgba(24, 79, 125, .3);
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.legal__texto a:hover { text-decoration-color: currentColor; }
.legal__texto strong { color: var(--tinta); }
.legal__entradilla { font-size: clamp(1.05rem, 1rem + .25vw, 1.15rem); color: var(--tinta); }
/* los datos del titular, en una ficha arena con la raya dorada de la web */
.legal__datos {
  margin: 0 0 1.2em;
  padding: 16px 22px;
  border-left: 4px solid var(--oro);
  border-radius: 14px;
  background: var(--arena-100);
}
.legal__datos > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 7px 0; }
.legal__datos > div + div { border-top: 1px solid var(--arena-200); }
.legal__datos dt { font-weight: 700; color: var(--azul-800); }
.legal__datos dd { margin: 0; }
/* "En resumen" y el punto 14 de las condiciones: la tabla de la primera capa */
.legal__resumen { width: 100%; margin: 0 0 1.2em; border-collapse: collapse; font-size: .96rem; }
.legal__resumen th, .legal__resumen td { padding: 12px 14px; border-bottom: 1px solid var(--arena-200); text-align: left; vertical-align: top; line-height: 1.6; }
.legal__resumen th { width: 30%; font-weight: 700; color: var(--azul-800); background: var(--arena-50); }
.legal__resumen tr:first-child th, .legal__resumen tr:first-child td { border-top: 1px solid var(--arena-200); }
.legal__letras { list-style: lower-alpha; }
@media (max-width: 880px) {
  .legal { grid-template-columns: 1fr; gap: 26px; }
  .legal__otras { position: static; }
  .legal__otras ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .legal__otras a { padding: 7px 13px; border: 1px solid var(--arena-200); border-radius: 999px; font-size: .88rem; }
  .legal__otras a[aria-current="page"] { border-color: var(--azul-800); }
}
@media (max-width: 560px) {
  .legal-cabeza { padding-top: calc(112px + var(--franja)); }
  .legal__datos { padding: 12px 16px; }
  .legal__datos > div { grid-template-columns: 1fr; gap: 1px; }
  .legal__resumen th, .legal__resumen td { display: block; width: auto; padding: 8px 12px; }
  .legal__resumen th { border-bottom: 0; }
  .legal__resumen tr:first-child td { border-top: 0; }
}