/* Portada del inicio a pantalla completa con fotos de Villa Yacanto.
   Se agrega aparte del CSS compilado de Next.js, así no hay que tocar el build.
   Fotos cedidas por la Municipalidad de Villa Yacanto (originales en Downloads\yacanto-fotos).
   Para cambiarlas: reemplazar los archivos en /img/hero/ (mismos nombres)
   y actualizar el crédito en la regla "content" de abajo. */

/* Paleta ¡Sin Apuro! Pisa los colores del build (Tailwind los define en :root dentro de
   @layer theme, así que estas variables sin capa ganan). Se mantienen los nombres viejos
   para no tocar el HTML: pino = azul profundo, espinillo = naranja, piedra = nieve. */
:root {
  --color-pino: #102b3f;       /* azul profundo */
  --color-espinillo: #ffa552;  /* amarillo / naranja */
  --color-piedra: #fffbfc;     /* nieve */
  --color-superficie: #ffffff;
  --color-niebla: #e4eef3;     /* celeste muy claro, derivado de 74A4BC */
  --color-tinta: #0b1e2c;
  --color-granito: #4d6473;
  --color-verde: #495f41;
  --color-celeste: #74a4bc;
}

main > section:first-child:has(> p.absolute + div > h1) {
  --hero-ciclo: 35s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100svh - 3.5rem);
  background-color: var(--color-pino);
}

/* Logo en el navbar (todas las páginas): el texto "Yacanto" se reemplaza por el de ¡Sin Apuro!
   (original en /img/logo/sin apuro v3.png; /img/logo/sin-apuro.png es el recorte, 1000x457).
   Se usa como máscara, así toma el color del texto (claro sobre la foto, oscuro en el navbar sólido). */
body > header a[href="/"]:first-child {
  width: 6.5rem;
  font-size: 0;
  background: currentColor content-box;
  -webkit-mask: url("/img/logo/sin-apuro-v7.png") left center / contain no-repeat content-box;
  mask: url("/img/logo/sin-apuro-v7.png") left center / contain no-repeat content-box;
  padding-block: 0.1rem;
}
@media (max-width: 24rem) {
  body > header a[href="/"]:first-child { width: 6rem; }
}

/* Fotos de las actividades (stock de Unsplash, licencia libre) en lugar de las curvas de
   relleno. Se reconocen por el aria-label que arma el build; cuando haya fotos propias
   alcanza con reemplazar el archivo en /img/actividades/. */
[role="img"][aria-label$="(sin foto todavía)"] {
  background-color: var(--color-pino);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: none;
}
[role="img"][aria-label$="(sin foto todavía)"] > svg { display: none; }
[aria-label^="Cabalgatas: Cabalgata al atardecer"] { background-image: url("/img/actividades/cabalgata-atardecer.jpg"); }
[aria-label^="Cabalgatas: Día de campo"]           { background-image: url("/img/actividades/cabalgata-dia-completo.jpg"); }
[aria-label^="Excursiones: Excursión 4x4"]         { background-image: url("/img/actividades/excursion-4x4.jpg"); }
[aria-label^="Gastronomía: Merienda serrana"]      { background-image: url("/img/actividades/merienda-serrana.jpg"); }
[aria-label^="Trekking: Ascenso al Cerro Champaquí"] { background-image: url("/img/actividades/champaqui.jpg"); }
[aria-label^="Trekking: Caminata a la cascada"]    { background-image: url("/img/actividades/cascada.jpg"); }
a:hover > [role="img"][aria-label$="(sin foto todavía)"] { filter: brightness(1.06); }

/* Curvas de nivel (las de la portada, en /img/curvas.svg) como recurso de la marca.
   Se usan como máscara, así toman cualquier color con background-color. */
:root { --curvas: url("/img/curvas.svg") center / 900px auto repeat; }

/* Encabezado de las páginas internas: las curvas se desvanecen hacia abajo detrás del título */
main:has(> :first-child > h1, > article:first-child) { position: relative; isolation: isolate; }
main:has(> :first-child > h1, > article:first-child)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 18rem;
  z-index: -1;
  background-color: var(--color-pino);
  opacity: 0.09;
  -webkit-mask: var(--curvas), linear-gradient(#000, transparent);
  -webkit-mask-composite: source-in;
  mask: var(--curvas), linear-gradient(#000, transparent);
  mask-composite: intersect;
  pointer-events: none;
}

/* Tarjetas "Por tipo de salida": curvas en la esquina que se marcan al pasar el mouse */
a[href^="/actividades/#"].rounded-md { position: relative; overflow: hidden; isolation: isolate; }
a[href^="/actividades/#"].rounded-md::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-espinillo);
  opacity: 0.35;
  -webkit-mask: var(--curvas), linear-gradient(to top left, #000, transparent 70%);
  -webkit-mask-composite: source-in;
  mask: var(--curvas), linear-gradient(to top left, #000, transparent 70%);
  mask-composite: intersect;
  transition: opacity 0.2s;
}
a[href^="/actividades/#"].rounded-md:hover::before { opacity: 0.8; }
/* Cada tipo muestra otra zona del mapa */
a[href="/actividades/#trekking"].rounded-md::before    { -webkit-mask-position: 30% 70%, 0 0; mask-position: 30% 70%, 0 0; }
a[href="/actividades/#excursiones"].rounded-md::before { -webkit-mask-position: 70% 20%, 0 0; mask-position: 70% 20%, 0 0; }
a[href="/actividades/#gastronomia"].rounded-md::before { -webkit-mask-position: 90% 90%, 0 0; mask-position: 90% 90%, 0 0; }

/* Recuadro "Cómo se reserva" */
.rounded-md.bg-niebla:has(> h2) { position: relative; overflow: hidden; isolation: isolate; }
.rounded-md.bg-niebla:has(> h2)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-pino);
  opacity: 0.08;
  -webkit-mask: var(--curvas);
  mask: var(--curvas);
  -webkit-mask-position: 80% 40%;
  mask-position: 80% 40%;
}

/* Pie de página */
body > footer { position: relative; overflow: hidden; isolation: isolate; }
body > footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-espinillo);
  opacity: 0.18;
  -webkit-mask: var(--curvas), linear-gradient(to left, #000, transparent 75%);
  -webkit-mask-composite: source-in;
  mask: var(--curvas), linear-gradient(to left, #000, transparent 75%);
  mask-composite: intersect;
}

/* Capa de fotos */
main > section:first-child:has(> p.absolute + div > h1)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: center / cover no-repeat url("/img/hero/valle-1920.jpg");
  animation:
    hero-fotos var(--hero-ciclo) infinite,
    hero-zoom calc(var(--hero-ciclo) / 2) ease-in-out infinite alternate;
}

/* Las curvas de nivel quedan muy suaves y el SVG hace de velo oscuro para leer el texto */
main > section:first-child:has(> p.absolute + div > h1) > svg {
  opacity: 1 !important;
  background:
    linear-gradient(to top, rgb(11 30 44 / 0.85) 0%, rgb(11 30 44 / 0.35) 45%, rgb(11 30 44 / 0.05) 75%),
    linear-gradient(to right, rgb(11 30 44 / 0.55) 0%, rgb(11 30 44 / 0) 65%);
}
/* Las curvas de nivel no van sobre las fotos: se usan en el resto del sitio (ver /img/curvas.svg) */
main > section:first-child:has(> p.absolute + div > h1) > svg path {
  display: none;
}

/* Navbar transparente sobre la portada.
   Arriba de todo el navbar no tiene fondo, el texto es claro con sombra y la foto se
   oscurece suavemente detrás. Apenas se empieza a bajar recupera el fondo claro y el
   texto verde (en los primeros 6rem de scroll, atado al scroll), así el texto de la
   portada nunca pasa por detrás de un navbar transparente. Los navegadores que no
   soportan esa animación (Firefox, por ahora) ven el navbar claro de siempre. */
@supports (animation-timeline: scroll()) {
  body:has(> main > section:first-child > p.absolute + div > h1) > header {
    animation: navbar-solido linear both;
    animation-timeline: scroll(root);
    animation-range: 1rem 6rem;
  }
  body:has(> main > section:first-child > p.absolute + div > h1) > header a {
    color: inherit;
    transition: opacity 0.15s;
  }
  body:has(> main > section:first-child > p.absolute + div > h1) > header a:hover {
    opacity: 0.75;
  }

  /* La portada sube por debajo del navbar y ocupa toda la pantalla */
  main > section:first-child:has(> p.absolute + div > h1) {
    margin-top: -3.5rem;
    min-height: 100svh;
  }
  main > section:first-child:has(> p.absolute + div > h1) > svg {
    background:
      linear-gradient(to bottom, rgb(11 30 44 / 0.6) 0, rgb(11 30 44 / 0) 9rem),
      linear-gradient(to top, rgb(11 30 44 / 0.85) 0%, rgb(11 30 44 / 0.35) 45%, rgb(11 30 44 / 0.05) 75%),
      linear-gradient(to right, rgb(11 30 44 / 0.55) 0%, rgb(11 30 44 / 0) 65%);
  }
}

@keyframes navbar-solido {
  from {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-piedra);
    text-shadow: 0 1px 8px rgb(0 0 0 / 0.5);
    backdrop-filter: none;
  }
  to {
    background-color: rgb(255 251 252 / 0.9);
    border-color: rgb(16 43 63 / 0.1);
    color: var(--color-pino);
    text-shadow: none;
    backdrop-filter: blur(8px);
  }
}

main > section:first-child:has(> p.absolute + div > h1) > div {
  width: 100%;
}
main > section:first-child:has(> p.absolute + div > h1) h1,
main > section:first-child:has(> p.absolute + div > h1) h1 + p {
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.35);
}

/* Etiqueta de lugar (la del punto amarillo): sube para dejar lugar al crédito y muestra
   dónde fue tomada cada foto. El texto original del build se oculta y se reemplaza por
   el de la animación "hero-lugar"; si de una foto no sabemos el lugar, la etiqueta no se ve. */
main > section:first-child:has(> p.absolute + div > h1) > p.absolute {
  bottom: 2.5rem;
  z-index: 1;
  font-size: 0;
  animation: hero-lugar-visible var(--hero-ciclo) infinite;
}
main > section:first-child:has(> p.absolute + div > h1) > p.absolute::after {
  content: "Sendero Blanco · Villa Yacanto";
  font-size: 13px;
  animation: hero-lugar var(--hero-ciclo) infinite;
}

/* Crédito de la foto, esquina inferior derecha */
main > section:first-child:has(> p.absolute + div > h1)::after {
  content: "Foto: Municipalidad de Villa Yacanto";
  position: absolute;
  right: 1rem;
  bottom: 0.75rem;
  font-size: 11px;
  line-height: 1;
  color: rgb(255 251 252 / 0.7);
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.6);
  animation: hero-creditos var(--hero-ciclo) infinite;
}
@media (min-width: 40rem) {
  main > section:first-child:has(> p.absolute + div > h1) > p.absolute {
    bottom: 3rem;
    right: 2rem;
  }
  main > section:first-child:has(> p.absolute + div > h1)::after {
    right: 2rem;
    bottom: 1.25rem;
  }
}

/* Precarga invisible de las fotos que vienen después, para que no aparezcan de golpe */
body:has(main > section:first-child > p.absolute + div > h1)::after {
  content: url("/img/hero/cantera-1920.jpg") url("/img/hero/rio-1920.jpg") url("/img/hero/cumbre-1920.jpg") url("/img/hero/senderistas-1920.jpg");
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

@keyframes hero-fotos {
  0%, 16%   { background-image: url("/img/hero/valle-1920.jpg"); }
  20%, 36%  { background-image: url("/img/hero/cantera-1920.jpg"); }
  40%, 56%  { background-image: url("/img/hero/rio-1920.jpg"); }
  60%, 76%  { background-image: url("/img/hero/cumbre-1920.jpg"); }
  80%, 96%  { background-image: url("/img/hero/senderistas-1920.jpg"); }
  100%      { background-image: url("/img/hero/valle-1920.jpg"); }
}

/* Lugar de cada foto. Para sumar uno: cambiar "" por el nombre en su tramo y
   pasar ese tramo a opacity 1 en hero-lugar-visible.
   valle: sin dato · cantera: Sendero Blanco · río: sin dato · cumbre y senderistas: Champaquí */
@keyframes hero-lugar {
  0%, 17%   { content: ""; }
  18%, 37%  { content: "Sendero Blanco · Villa Yacanto"; }
  38%, 57%  { content: ""; }
  58%, 100% { content: "Cerro Champaquí · 2.790 m"; }
}
@keyframes hero-lugar-visible {
  0%, 16%   { opacity: 0; }
  20%, 36%  { opacity: 1; }
  40%, 56%  { opacity: 0; }
  60%, 96%  { opacity: 1; }
  100%      { opacity: 0; }
}

/* El crédito cambia a mitad de cada fundido */
@keyframes hero-creditos {
  0%, 17%   { content: "Foto: Municipalidad de Villa Yacanto"; }
  18%, 37%  { content: "Foto: Yacanto"; }
  38%, 100% { content: "Foto: Municipalidad de Villa Yacanto"; }
}

@keyframes hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* Pantallas grandes o de alta densidad (notebooks retina, monitores 2K/4K): versiones de 2560 px.
   Río y cantera no tienen original más grande, sus "-2560" son del tamaño máximo disponible. */
@media (min-width: 1921px), (min-width: 1100px) and (min-resolution: 1.5dppx) {
  main > section:first-child:has(> p.absolute + div > h1)::before {
    background-image: url("/img/hero/valle-2560.jpg");
    animation-name: hero-fotos-hd, hero-zoom;
  }
  body:has(main > section:first-child > p.absolute + div > h1)::after {
    content: url("/img/hero/cantera-2560.jpg") url("/img/hero/rio-2560.jpg") url("/img/hero/cumbre-2560.jpg") url("/img/hero/senderistas-2560.jpg");
  }
}

@keyframes hero-fotos-hd {
  0%, 16%   { background-image: url("/img/hero/valle-2560.jpg"); }
  20%, 36%  { background-image: url("/img/hero/cantera-2560.jpg"); }
  40%, 56%  { background-image: url("/img/hero/rio-2560.jpg"); }
  60%, 76%  { background-image: url("/img/hero/cumbre-2560.jpg"); }
  80%, 96%  { background-image: url("/img/hero/senderistas-2560.jpg"); }
  100%      { background-image: url("/img/hero/valle-2560.jpg"); }
}

/* Celulares: recortes verticales hechos desde los originales (hasta 1200x2000), así la
   foto no se agranda para cubrir la pantalla alta y se ve nítida */
@media (max-width: 900px) {
  main > section:first-child:has(> p.absolute + div > h1)::before {
    background-image: url("/img/hero/valle-movil.jpg");
    animation-name: hero-fotos-movil, hero-zoom;
  }
  body:has(main > section:first-child > p.absolute + div > h1)::after {
    content: url("/img/hero/cantera-movil.jpg") url("/img/hero/rio-movil.jpg") url("/img/hero/cumbre-movil.jpg") url("/img/hero/senderistas-movil.jpg");
  }
}

/* Los recortes ya vienen centrados en lo importante (persona en la cumbre, senderistas);
   la cantera usa la foto vertical de la laguna verde */
@keyframes hero-fotos-movil {
  0%, 16%   { background-image: url("/img/hero/valle-movil.jpg"); }
  20%, 36%  { background-image: url("/img/hero/cantera-movil.jpg"); }
  40%, 56%  { background-image: url("/img/hero/rio-movil.jpg"); }
  60%, 76%  { background-image: url("/img/hero/cumbre-movil.jpg"); }
  80%, 96%  { background-image: url("/img/hero/senderistas-movil.jpg"); }
  100%      { background-image: url("/img/hero/valle-movil.jpg"); }
}

/* Sin movimiento para quien lo pidió en su sistema: queda la primera foto fija */
@media (prefers-reduced-motion: reduce) {
  main > section:first-child:has(> p.absolute + div > h1)::before,
  main > section:first-child:has(> p.absolute + div > h1)::after,
  main > section:first-child:has(> p.absolute + div > h1) > p.absolute::after {
    animation: none;
  }
  /* La primera foto (valle) no tiene lugar cargado */
  main > section:first-child:has(> p.absolute + div > h1) > p.absolute {
    animation: none;
    opacity: 0;
  }
}

/* Páginas "Gratis en Yacanto" y "Dónde comer" (se generan con _datos/generar.cjs) */
.y-saltos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.y-saltos a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem;
  border: 1px solid rgb(16 43 63 / 0.2); border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; color: var(--color-pino); background: var(--color-superficie, #fff);
}
.y-saltos a:hover { border-color: var(--color-pino); }
.y-grupo { max-width: 48rem; margin: 3.5rem auto 0; padding: 0 1rem; scroll-margin-top: 5rem; }
.y-cuenta { margin-left: 0.25rem; font-size: 1rem; font-weight: 500; color: var(--color-granito); }
.y-lista { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
@media (min-width: 40rem) { .y-lista-compacta { grid-template-columns: 1fr 1fr; } }
.y-tarjeta {
  display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem;
  border: 1px solid rgb(16 43 63 / 0.12); border-radius: 0.375rem; background: var(--color-superficie, #fff);
}
.y-tarjeta h3 { font-family: var(--font-display, inherit); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-pino); line-height: 1.25; }
.y-tarjeta > p { color: rgb(from var(--color-tinta) r g b / 0.8); line-height: 1.6; }
.y-rubro { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-granito) !important; }
.y-datos { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.y-datos li { padding: 0.25rem 0.625rem; border-radius: 999px; background: var(--color-niebla); font-size: 0.8125rem; color: var(--color-pino); }
.y-nota { font-size: 0.875rem; color: var(--color-granito) !important; }
.y-aviso {
  padding: 0.75rem 1rem; border-left: 3px solid var(--color-espinillo); border-radius: 0.25rem;
  background: rgb(from var(--color-espinillo) r g b / 0.12); font-size: 0.875rem; line-height: 1.55;
}
.y-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; }
.y-boton {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 0.375rem;
  border: 1px solid rgb(16 43 63 / 0.25); font-size: 0.875rem; font-weight: 600; color: var(--color-pino);
}
.y-boton:hover { border-color: var(--color-pino); }
.y-boton-wa { background: var(--color-pino); border-color: var(--color-pino); color: var(--color-piedra); }
.y-boton-wa:hover { opacity: 0.9; }
.y-fuente { margin-top: 3rem; font-size: 0.8125rem; line-height: 1.6; color: var(--color-granito); }
.y-fuente a { text-decoration: underline; text-underline-offset: 2px; }

/* Menú: con "Gratis" y "Dónde comer" no entra todo en el celular, así que ahí
   "Cómo funciona" queda solo en el pie y "Dónde comer" se acorta a "Comer" */
body > header nav a[aria-current="page"] { color: var(--color-pino); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.y-corto { display: none; }
@media (max-width: 40rem) {
  body > header nav a[href="/como-funciona/"] { display: none; }
  .y-largo { display: none; }
  .y-corto { display: inline; }
}

/* Logo ¡Sin Apuro! también en el pie, en lugar del texto "Yacanto" */
body > footer p.font-display.text-2xl {
  width: 10rem;
  height: 3.2rem;
  font-size: 0;
  background: currentColor;
  -webkit-mask: url("/img/logo/sin-apuro-v7.png") left center / contain no-repeat;
  mask: url("/img/logo/sin-apuro-v7.png") left center / contain no-repeat;
}

/* ===== Portada ¡Sin Apuro! (generada por _datos/portada.cjs): mapa de valles, destacados, cerca tuyo ===== */
.p-hero { background: var(--color-pino); color: var(--color-piedra); background-image: var(--curvas, none); }
.p-hero-in { max-width: 64rem; margin: 0 auto; padding: 2.5rem 1rem 3rem; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 48rem) { .p-hero-in { grid-template-columns: 1fr 1fr; padding-block: 4rem; } }
.p-hero h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.p-hero p { margin-top: 1rem; font-size: 1.1rem; opacity: .85; max-width: 32rem; }
.p-lista-valles { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.p-lista-valles button { border: 1px solid rgb(255 251 252 / .35); border-radius: 999px; padding: .35rem .8rem; font-size: .9rem; color: inherit; cursor: pointer; }
.p-lista-valles button:hover, .p-lista-valles .p-elegido { background: var(--color-espinillo); border-color: var(--color-espinillo); color: var(--color-pino); }
.p-lista-valles .p-pronto-btn { opacity: .6; }
.p-mapa { width: 100%; max-height: 34rem; }
.p-provincia { fill: rgb(116 164 188 / .18); stroke: var(--color-celeste); stroke-width: 2; stroke-linejoin: round; }
.p-valle { cursor: pointer; outline: none; }
.p-valle ellipse { fill: rgb(116 164 188 / .35); stroke: var(--color-piedra); stroke-width: 1; stroke-dasharray: 3 3; transition: fill .2s; }
.p-valle.p-activo ellipse { fill: var(--color-verde); stroke-dasharray: none; }
.p-valle:hover ellipse, .p-valle:focus-visible ellipse, .p-valle.p-elegido ellipse { fill: var(--color-espinillo); }
.p-valle text { fill: var(--color-piedra); font-size: 13px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.p-valle:hover text, .p-valle.p-elegido text { fill: var(--color-pino); }
.p-capital { fill: var(--color-piedra); }
.p-capital-txt { fill: var(--color-piedra); font-size: 12px; opacity: .8; }
.p-panel { padding-top: 3rem; scroll-margin-top: 4rem; }
.p-pueblo { margin-top: 1.5rem; }
.p-pueblo h3 { font-size: 1.25rem; font-weight: 700; color: var(--color-pino); }
.p-pronto { margin-top: .5rem; color: var(--color-granito); }
.p-bajada { margin-top: .25rem; color: var(--color-granito); }
.p-grilla { display: grid; gap: 1.25rem; margin-top: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.p-tarjeta { display: flex; flex-direction: column; gap: .3rem; color: var(--color-tinta); }
.p-tarjeta strong { font-size: 1.05rem; line-height: 1.3; }
.p-foto { position: relative; aspect-ratio: 4 / 3; border-radius: .9rem; background-size: cover; background-position: center; margin-bottom: .4rem; transition: filter .2s; }
.p-tarjeta:hover .p-foto { filter: brightness(1.06); }
.p-sello { position: absolute; top: .6rem; left: .6rem; background: var(--color-espinillo); color: var(--color-pino); font-size: .75rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; }
.p-tipo { font-size: .8rem; color: var(--color-verde); font-weight: 600; }
.p-meta { font-size: .9rem; color: var(--color-granito); }
.p-cerca-cab { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: end; }
/* Fondo de fotos del hero de la portada */
.p-hero { position: relative; overflow: hidden; isolation: isolate; }
.p-fondo { position: absolute; inset: 0; z-index: -1; }
.p-fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.2s ease, transform 6s ease-out, filter .6s; }
.p-fondo img.p-ver { opacity: 1; transform: scale(1); }
.p-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(16 43 63 / .88) 0%, rgb(16 43 63 / .6) 55%, rgb(16 43 63 / .45) 100%); }
.p-hero.p-apagado .p-fondo img { filter: saturate(.35); }
.p-provincia { fill: rgb(16 43 63 / .55); }
.p-valle.p-no { cursor: default; }
.p-valle.p-no ellipse { fill: rgb(255 251 252 / .08); stroke: rgb(255 251 252 / .45); }
.p-valle.p-no text { fill: rgb(255 251 252 / .55); }
.p-valle.p-no:hover ellipse { fill: rgb(255 251 252 / .16); }
.p-valle .p-pronto-txt { font-size: 9px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.p-valle.p-activo ellipse { fill: var(--color-espinillo); stroke: var(--color-piedra); stroke-width: 2; }
.p-valle.p-activo text { fill: var(--color-pino); }
.p-lista-valles .p-pronto-btn { display: inline-block; border: 1px dashed rgb(255 251 252 / .3); border-radius: 999px; padding: .35rem .8rem; font-size: .9rem; opacity: .6; cursor: default; }
.p-lista-valles .p-pronto-btn small { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; margin-left: .25rem; }
.p-lista-valles button[data-valle] { background: var(--color-espinillo); border-color: var(--color-espinillo); color: var(--color-pino); font-weight: 600; }
/* Página de cada valle (/calamuchita/, …) */
.p-valle-cab { position: relative; isolation: isolate; color: var(--color-piedra); background-size: cover; background-position: center; padding: 5rem 0 3rem; }
.p-valle-cab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(16 43 63 / .9), rgb(16 43 63 / .35)); }
.p-valle-cab h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin-top: .75rem; }
.p-valle-cab p { margin-top: .5rem; opacity: .85; }
.p-volver { font-size: .9rem; opacity: .85; }
.p-volver:hover { opacity: 1; text-decoration: underline; }
.p-valle.p-activo:hover ellipse { fill: var(--color-piedra); }
/* Mapa con regiones calcadas (reemplaza los óvalos) */
.p-mapa { max-height: 40rem; overflow: visible; }
.p-valle polygon { stroke: var(--color-piedra); stroke-width: 3; stroke-linejoin: round; transition: fill .25s; }
.p-valle.p-no polygon { fill: rgb(255 251 252 / .1); stroke: rgb(255 251 252 / .5); }
.p-valle.p-no:hover polygon { fill: rgb(255 251 252 / .22); }
.p-valle.p-activo polygon { fill: var(--color-espinillo); }
.p-valle.p-activo:hover polygon, .p-valle.p-activo:focus-visible polygon { fill: var(--color-piedra); }
.p-valle[data-foco="ansenuza"] polygon { fill: rgb(116 164 188 / .45); }
.p-valle[data-foco="ansenuza"]:hover polygon { fill: rgb(116 164 188 / .65); }
.p-valle text { font-size: 34px; }
.p-valle .p-pronto-txt { font-size: 18px; letter-spacing: .08em; }
.p-capital { fill: var(--color-piedra); }
/* Mapa con límites reales: relleno por región, bordes entre regiones aparte y etiquetas encima */
.p-valle path { stroke: none; transition: fill .25s; }
.p-valle.p-no path { fill: rgb(255 251 252 / .1); }
.p-valle.p-no:hover path { fill: rgb(255 251 252 / .24); }
.p-valle.p-activo path { fill: var(--color-espinillo); }
.p-valle.p-activo:hover path, .p-valle.p-activo:focus-visible path { fill: var(--color-piedra); }
.p-bordes { fill: none; stroke: var(--color-piedra); stroke-width: 1.2; stroke-linejoin: round; opacity: .8; pointer-events: none; }
.p-et { fill: var(--color-piedra); font-size: 12.5px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.p-et-activo { fill: var(--color-pino); font-weight: 700; }
.p-capital { pointer-events: none; }
/* Portada y páginas de valle: sin franja blanca arriba; el menú va encima de la foto */
html body:has(.p-hero, .p-valle-cab, .s-hero) > header { position: absolute; left: 0; right: 0; background: transparent; border: 0; backdrop-filter: none; color: var(--color-piedra); }
html body:has(.p-hero, .p-valle-cab, .s-hero) > header a { color: var(--color-piedra); }
.p-hero-in { padding-top: 5.5rem; }
.p-valle-cab { padding-top: 7rem; }
.p-credito { margin-top: 2.5rem; font-size: .8rem; color: var(--color-granito); }
.p-credito a, .p-creditos a { text-decoration: underline; }
.p-creditos { margin-top: 1.5rem; display: grid; gap: .5rem; font-size: .9rem; color: var(--color-granito); }

/* Reserva: salidas disponibles del prestador (salidas.js + salidas.json) en lugar de fecha libre */
.y-salidas-caja { grid-column: 1 / -1; }
.y-salidas-hora { margin-top: .25rem; font-size: .9rem; color: var(--color-granito); }
.y-salidas-lista { display: flex; gap: .5rem; overflow-x: auto; padding: .5rem 0 .25rem; scroll-snap-type: x mandatory; }
.y-salida { flex: 0 0 4.6rem; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .55rem .25rem; border: 1px solid rgb(16 43 63 / .25); border-radius: .6rem; background: var(--color-superficie); color: var(--color-tinta); cursor: pointer; }
.y-salida strong { font-size: 1.35rem; line-height: 1.1; }
.y-salida-dia, .y-salida-mes { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-granito); }
.y-salida-cupo { font-size: .68rem; margin-top: .2rem; color: var(--color-verde); font-weight: 600; }
.y-salida:hover { border-color: var(--color-pino); }
.y-salida[aria-pressed="true"] { background: var(--color-pino); border-color: var(--color-pino); color: var(--color-piedra); }
.y-salida[aria-pressed="true"] span { color: var(--color-piedra); }
.y-salida:disabled { opacity: .4; cursor: not-allowed; }

/* Sendero Blanco: actividad con opciones (generada por _datos/sendero.cjs) */
.s-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .375rem; }
.s-miniaturas { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; margin-top: .5rem; }
.s-miniaturas button { aspect-ratio: 1; border-radius: .3rem; overflow: hidden; cursor: pointer; }
.s-miniaturas img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.s-miniaturas button:hover img { opacity: .8; }
.s-credito { margin-top: .4rem; font-size: .75rem; color: var(--color-granito); }
.s-opciones { display: grid; gap: .5rem; margin-top: .5rem; }
@media (min-width: 30rem) { .s-opciones { grid-template-columns: 1fr 1fr; } }
.s-opciones button { text-align: left; padding: .8rem 1rem; border: 1.5px solid rgb(16 43 63 / .2); border-radius: .6rem; background: var(--color-superficie); cursor: pointer; display: grid; gap: .2rem; }
.s-opciones button strong { color: var(--color-pino); line-height: 1.25; }
.s-opciones button span { font-size: .8rem; color: var(--color-granito); }
.s-opciones button[aria-checked="true"] { border-color: var(--color-espinillo); background: rgb(255 165 82 / .12); box-shadow: 0 0 0 1px var(--color-espinillo); }
.s-desde { margin-top: 1.25rem; display: inline-block; background: var(--color-celeste); color: var(--color-pino); font-weight: 600; font-size: .85rem; padding: .3rem .7rem; border-radius: 999px; }
.s-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; margin-top: 1.75rem; }
.s-campo { min-width: 0; }
.s-ancho { grid-column: 1 / -1; }
@media (max-width: 30rem) { .s-campo { grid-column: 1 / -1; } }
.s-contador { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; }
.s-contador button { width: 3rem; height: 3rem; border: 1px solid rgb(16 43 63 / .25); border-radius: .375rem; font-size: 1.25rem; background: var(--color-superficie); cursor: pointer; }
.s-contador input { width: 4rem; text-align: center; font-size: 1.25rem; font-weight: 600; background: transparent; }
.s-error { color: #b42318; font-size: .9rem; }
.s-detalles { margin-top: 1.25rem; display: grid; gap: .6rem; }
.s-detalles div { display: grid; grid-template-columns: 9rem 1fr; gap: .75rem; font-size: .95rem; }
.s-detalles dt { color: var(--color-granito); }
.s-info { display: grid; gap: 3rem; margin-top: 4rem; padding-top: 3rem; border-top: 1px solid rgb(16 43 63 / .15); }
@media (min-width: 48rem) { .s-info { grid-template-columns: 1fr 1fr; } }
.s-faq { margin-top: 1rem; border-top: 1px solid rgb(16 43 63 / .12); }
.s-faq details { border-bottom: 1px solid rgb(16 43 63 / .12); padding: .8rem 0; }
.s-faq summary { cursor: pointer; font-weight: 600; color: var(--color-pino); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.s-faq summary::after { content: "+"; color: var(--color-espinillo); font-size: 1.2rem; line-height: 1; }
.s-faq details[open] summary::after { content: "−"; }
.s-faq details p { margin-top: .5rem; color: rgb(11 30 44 / .8); }
.s-aviso { margin-top: 1.5rem; padding: .8rem 1rem; border: 1px solid var(--color-pino); border-radius: .6rem; font-weight: 600; color: var(--color-pino); }
/* Etiquetas del mapa: contorno oscuro para leerse sobre cualquier foto; más chicas en las regiones angostas */
.p-et { paint-order: stroke; stroke: rgb(16 43 63 / .85); stroke-width: 3px; stroke-linejoin: round; }
.p-et-activo { stroke: none; }
.p-et-chico { font-size: 9.5px; }
/* Sendero Blanco: fotos de fondo a pantalla completa + galería abajo */
.s-hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: flex-end; color: var(--color-piedra); overflow: hidden; }
.s-fondo { position: absolute; inset: 0; z-index: -1; }
.s-fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1.2s ease, transform 6s ease-out; }
.s-fondo img.s-ver { opacity: 1; transform: scale(1); }
.s-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(16 43 63 / .85) 0%, rgb(16 43 63 / .25) 45%, rgb(16 43 63 / .35) 100%); }
.s-hero-in { width: 100%; padding-bottom: 3.5rem; }
.s-volver { font-size: .9rem; opacity: .85; }
.s-kicker { margin-top: 1.25rem; font-size: .95rem; opacity: .9; }
.s-hero h1 { font-size: clamp(2.8rem, 9vw, 5.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: .95; margin-top: .3rem; }
.s-bajar { display: inline-block; margin-top: 1.5rem; padding: .6rem 1.1rem; border-radius: 999px; background: var(--color-espinillo); color: var(--color-pino); font-weight: 600; }
.s-credito-hero { position: absolute; right: 1rem; bottom: .75rem; font-size: .7rem; opacity: .7; }
.s-galeria-sec { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid rgb(16 43 63 / .15); }
.s-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .6rem; margin-top: 1.25rem; }
.s-galeria button { aspect-ratio: 1; border-radius: .5rem; overflow: hidden; cursor: zoom-in; }
.s-galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.s-galeria button:hover img { transform: scale(1.04); }
.s-visor { max-width: 95vw; max-height: 92vh; padding: 0; border: 0; background: transparent; }
.s-visor::backdrop { background: rgb(11 30 44 / .9); }
.s-visor img { max-width: 95vw; max-height: 92vh; border-radius: .5rem; }
.s-cerrar { position: fixed; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--color-piedra); color: var(--color-pino); font-size: 1.5rem; line-height: 1; }
/* Aviso de actividad desactivada desde el panel (extras.js) */
.y-no-disponible { max-width: 64rem; margin: 1rem auto 0; padding: .9rem 1rem; border-radius: .6rem; background: var(--color-niebla); color: var(--color-pino); }
.y-no-disponible a { text-decoration: underline; margin-left: .25rem; }
body:has(.s-hero) .y-no-disponible { position: relative; z-index: 5; margin-top: 4.5rem; }

/* Mapa estilo dibujo: rellenos suaves por región, bordes gruesos redondeados, sombra desplazada y trazo "a mano" */
.p-sombra path { fill: rgb(11 30 44 / .55); stroke: rgb(11 30 44 / .55); stroke-width: 4; stroke-linejoin: round; }
.p-valle path { stroke: none; transition: fill .25s, transform .25s; }
.p-valle.p-no path { fill: #f3ece0; }
.p-valle[data-foco="noroeste"] path      { fill: #e7dcc8; }
.p-valle[data-foco="norte"] path         { fill: #efe3c9; }
.p-valle[data-foco="ansenuza"] path      { fill: #bcd6e2; }
.p-valle[data-foco="punilla"] path       { fill: #dcd3c2; }
.p-valle[data-foco="sierras-chicas"] path{ fill: #cfdcc6; }
.p-valle[data-foco="capital"] path       { fill: #f6efe2; }
.p-valle[data-foco="traslasierra"] path  { fill: #d6dfcc; }
.p-valle[data-foco="paravachasca"] path  { fill: #e3d8c3; }
.p-valle[data-foco="sur"] path           { fill: #c8d6bd; }
.p-valle[data-foco="llanura"] path       { fill: #ece4cf; }
.p-valle.p-no:hover path { fill: #fffbfc; }
.p-valle.p-activo path { fill: var(--color-espinillo); }
.p-valle.p-activo:hover path, .p-valle.p-activo:focus-visible path { fill: #ffb978; }
.p-bordes { stroke: var(--color-pino); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 1; }
.p-et { fill: var(--color-pino); stroke: rgb(255 251 252 / .7); stroke-width: 2.5px; font-weight: 700; letter-spacing: .01em; }
.p-et-activo { fill: var(--color-pino); stroke: none; font-size: 14px; }
.p-capital { fill: var(--color-pino); }

/* Portada: valles como tarjetas con foto (reemplaza al mapa) */
.p-hero-in:has(.p-valles) { grid-template-columns: 1fr; }
.p-valles { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 40rem) { .p-valles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 60rem) { .p-valles { grid-template-columns: repeat(4, 1fr); } }
.p-vt { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 3; padding: .8rem .9rem; border-radius: .9rem; overflow: hidden; background-size: cover; background-position: center; color: var(--color-piedra); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.p-vt::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(16 43 63 / .9), rgb(16 43 63 / .15) 70%); }
.p-vt strong { font-family: var(--font-display, inherit); font-size: 1.05rem; line-height: 1.15; }
.p-vt span { margin-top: .2rem; font-size: .8rem; opacity: .85; }
.p-vt.p-activo { outline: 3px solid var(--color-espinillo); outline-offset: -3px; }
.p-vt.p-activo strong { font-size: 1.4rem; }
.p-vt.p-activo span { color: var(--color-espinillo); font-weight: 600; opacity: 1; }
.p-vt.p-activo:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgb(0 0 0 / .3); }
.p-vt.p-no { filter: saturate(.55); }
.p-vt.p-no::after { content: ""; position: absolute; inset: 0; background: rgb(16 43 63 / .25); z-index: -1; }
.p-valles li:has(.p-activo) { grid-column: span 2; }
.p-vt.p-activo { aspect-ratio: auto; height: 100%; min-height: 11rem; }
/* Portada: solo 2 tarjetas (valle disponible + próximamente) */
.p-valles { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .p-valles { grid-template-columns: 2fr 1fr; } }
.p-valles li:has(.p-activo) { grid-column: auto; }
.p-vt.p-no strong { font-size: 1.2rem; }
@media (max-width: 39.99rem) { .p-vt.p-no { aspect-ratio: auto; min-height: 8rem; } }
/* Portada: el hero ocupa toda la primera pantalla */
.p-hero:has(.p-valles) { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.p-hero:has(.p-valles) .p-hero-in { width: 100%; }
@media (min-width: 40rem) { .p-hero:has(.p-valles) .p-vt { min-height: clamp(14rem, 42svh, 26rem); } }