/* 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. */

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 wordmark.
   Se usa como máscara, así toma el color del texto (claro sobre la foto, verde en el navbar sólido). */
body > header a[href="/"]:first-child {
  width: 8.5rem;
  font-size: 0;
  background: currentColor content-box;
  -webkit-mask: url("/img/logo/yacanto.png") center / contain no-repeat content-box;
  mask: url("/img/logo/yacanto.png") center / contain no-repeat content-box;
  padding-block: 0.6rem;
}
@media (max-width: 24rem) {
  body > header a[href="/"]:first-child { width: 7rem; }
}

/* 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(23 34 29 / 0.85) 0%, rgb(23 34 29 / 0.35) 45%, rgb(23 34 29 / 0.05) 75%),
    linear-gradient(to right, rgb(23 34 29 / 0.55) 0%, rgb(23 34 29 / 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(23 34 29 / 0.6) 0, rgb(23 34 29 / 0) 9rem),
      linear-gradient(to top, rgb(23 34 29 / 0.85) 0%, rgb(23 34 29 / 0.35) 45%, rgb(23 34 29 / 0.05) 75%),
      linear-gradient(to right, rgb(23 34 29 / 0.55) 0%, rgb(23 34 29 / 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(246 247 244 / 0.9);
    border-color: rgb(31 59 45 / 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(246 247 244 / 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;
  }
}