/* Portal de Turismo de Lago Puelo — hoja de estilos
   Cuatro temas, uno por estación (html[data-estacion]). El sitio elige el de la fecha (hemisferio sur)
   y el visitante puede cambiarlo. Todo lo que se mueve tiene su versión quieta. */

/* ---------- tipografía (alojada en el sitio) ---------- */
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- tokens comunes ---------- */
:root {
  --font: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1rem + 1.1vw, 1.875rem);
  --step-head: clamp(2rem, 1.3rem + 3vw, 4rem);
  --step-display: clamp(2.75rem, 1rem + 7vw, 7.5rem);
  --margin: clamp(1rem, 3vw, 3rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --radius: 12px;
  --ancho: 80rem;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 140ms;
  --t-hover: 200ms;
  --t-tema: 600ms;
}

/* ---------- los cuatro temas ---------- */
/* Primavera: colorida, florida */
html[data-estacion="primavera"] {
  --bg: #fffefb; --surface: #f3f8ee; --surface-2: #fdeef3; --ink: #16322a; --muted: #4c6158;
  --accent: #c93a6c; --accent-hover: #b02f5d; --accent-ink: #ffffff;
  --campo: #23633f; --campo-ink: #ffffff; --campo-soft: #cfe8d6;
  --tinte-1: #f7b733; --tinte-2: #8a5cc2; --tinte-3: #e94f86; --tinte-4: #57b36a;
  --velo: rgba(18, 52, 34, 0.55);
}
/* Verano: cálida, soleada */
html[data-estacion="verano"] {
  --bg: #fffbf2; --surface: #fdf1d8; --surface-2: #e6f6f6; --ink: #0f2a3a; --muted: #536170;
  --accent: #f29d12; --accent-hover: #ffb52e; --accent-ink: #1d1500;
  --campo: #0a7c88; --campo-ink: #ffffff; --campo-soft: #d4f0f1;
  --tinte-1: #ffcf4a; --tinte-2: #ff8a3d; --tinte-3: #0aa5b0; --tinte-4: #f2d38f;
  --velo: rgba(9, 52, 66, 0.45);
}
/* Otoño: marrones, lengas, ocres */
html[data-estacion="otono"] {
  --bg: #fffaf3; --surface: #f6ead9; --surface-2: #f3dfcd; --ink: #3a2416; --muted: #6d5646;
  --accent: #b14d16; --accent-hover: #963f10; --accent-ink: #ffffff;
  --campo: #5a2d18; --campo-ink: #ffffff; --campo-soft: #f0d8bd;
  --tinte-1: #c0392b; --tinte-2: #d9822b; --tinte-3: #e0b13c; --tinte-4: #7a3b1d;
  --velo: rgba(58, 28, 12, 0.55);
}
/* Invierno: blanco de la nieve, azules fríos */
html[data-estacion="invierno"] {
  --bg: #ffffff; --surface: #eef4f9; --surface-2: #e4edf5; --ink: #142838; --muted: #50657a;
  --accent: #23679f; --accent-hover: #1b5584; --accent-ink: #ffffff;
  --campo: #1b3247; --campo-ink: #ffffff; --campo-soft: #d6e4f0;
  --tinte-1: #ffffff; --tinte-2: #cfe3f3; --tinte-3: #9fc2df; --tinte-4: #e9f2fa;
  --velo: rgba(16, 34, 52, 0.5);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background-color var(--t-tema) ease, color var(--t-tema) ease; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; text-wrap: balance; }
p { text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 0.75rem 1rem; border-radius: 8px; font-weight: 600; text-decoration: none; }
.saltar:focus { top: 1rem; }
.contenedor { width: min(100% - 2 * var(--margin), var(--ancho)); margin-inline: auto; }
.seccion { padding-block: var(--section); }
.seccion--campo { background: var(--campo); color: var(--campo-ink); }
.seccion--suave { background: var(--surface); }
.cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.cabeza h2 { font-size: var(--step-head); max-width: 18ch; }
.cabeza p { max-width: 46ch; color: var(--muted); }
.seccion--campo .cabeza p { color: var(--campo-soft); }
.chico { font-size: var(--step-small); color: var(--muted); }

/* ---------- botones y enlaces ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 3rem; padding: 0 1.35rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.boton:active { transform: scale(0.97); }
.boton--claro { background: #ffffff; color: #13202a; }
.boton--borde { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.boton svg { width: 1.05em; height: 1.05em; flex: none; }
.link { color: inherit; text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
.link-flecha { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; text-decoration: none; color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--accent-hover); }
  .boton--claro:hover { background: #f1f1f1; }
  .boton--borde:hover { background: rgba(127, 127, 127, 0.12); }
  .link-flecha:hover { text-decoration: underline; }
}

/* ---------- barra del clima ---------- */
.clima-barra { background: var(--campo); color: var(--campo-ink); font-size: var(--step-small); transition: background-color var(--t-tema) ease; }
.clima-barra .contenedor { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.45rem; }
.clima-barra a { color: inherit; }
.clima-barra__dato { display: inline-flex; gap: 0.5rem; align-items: center; }

/* ---------- encabezado ---------- */
.encabezado { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); transition: background-color var(--t-tema) ease; }
.encabezado .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.marca { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; flex: none; }
.marca img { height: 2.6rem; width: auto; }
.marca span { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.menu { display: flex; align-items: center; gap: 0.25rem; }
.menu > li { position: relative; }
.menu a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; border-radius: 999px; text-decoration: none; font-weight: 500; }
.menu a[aria-current="page"] { background: var(--surface); }
.submenu { position: absolute; top: 100%; left: 0; min-width: 16rem; padding: 0.5rem; background: var(--bg); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14); display: none; }
.submenu a { display: flex; width: 100%; border-radius: 8px; }
.menu > li:hover > .submenu, .menu > li:focus-within > .submenu { display: block; }
.menu__registro a { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .menu a:hover { background: var(--surface); } .menu__registro a:hover { background: var(--accent-hover); } }
.boton-menu { display: none; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; background: var(--surface); font-weight: 600; }
@media (max-width: 68em) {
  .boton-menu { display: inline-flex; align-items: center; }
  .navegacion { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); padding: 0.75rem var(--margin) 1.25rem; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); max-height: calc(100svh - 5rem); overflow: auto; }
  .encabezado[data-abierto] .navegacion { display: block; }
  .menu { flex-direction: column; align-items: stretch; }
  .menu a { width: 100%; padding: 0 0.75rem; min-height: 3rem; }
  .submenu { position: static; display: block; box-shadow: none; padding: 0 0 0 1rem; min-width: 0; }
}

/* ---------- selector de estación ---------- */
.estaciones { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background: var(--surface); }
.estaciones button { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.5rem; padding: 0 0.8rem; border-radius: 999px; font-size: var(--step-small); font-weight: 600; color: var(--muted); transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.estaciones button svg { width: 1.1rem; height: 1.1rem; }
.estaciones button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.estaciones .ahora { font-weight: 500; opacity: 0.8; }
@media (max-width: 30em) { .estaciones button span.nombre { display: none; } .estaciones button[aria-pressed="true"] span.nombre { display: inline; } }

/* ---------- partículas (pétalos, sol, hojas, nieve) ---------- */
.particulas { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.pausa-animacion { position: fixed; z-index: 45; right: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; background: var(--bg); color: var(--ink); font-size: var(--step-small); font-weight: 600; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); }
.pausa-animacion svg { width: 1rem; height: 1rem; }
@media (prefers-reduced-motion: reduce) { .particulas, .pausa-animacion { display: none; } }
/* el verano: luz cálida que entra desde arriba a la derecha */
html[data-estacion="verano"] body::before { content: ""; position: fixed; inset: 0; z-index: 29; pointer-events: none; background: radial-gradient(60rem 40rem at 92% -8%, rgba(255, 214, 102, 0.42), rgba(255, 214, 102, 0) 70%); mix-blend-mode: soft-light; }
html[data-estacion="verano"][data-animacion="activa"] body::before { animation: sol 9s ease-in-out infinite alternate; }
@keyframes sol { from { opacity: 0.75; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html[data-estacion="verano"] body::before { animation: none; } }

/* ---------- portada ---------- */
.portada { position: relative; min-height: min(88svh, 56rem); display: grid; align-items: end; color: #fff; overflow: hidden; background: #1b2b33; }
.portada__foto { position: absolute; inset: 0; }
.portada__foto img { width: 100%; height: 100%; object-fit: cover; transition: opacity 700ms ease; }
.portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 30%, var(--velo) 100%); }
.portada__texto { position: relative; z-index: 2; padding-block: clamp(3rem, 8vw, 6rem); }
.portada__estacion { font-weight: 600; font-size: var(--step-lead); margin-bottom: 0.75rem; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); }
.portada h1 { font-size: var(--step-display); line-height: 0.92; letter-spacing: -0.035em; max-width: 12ch; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }
.portada__bajada { margin-top: 1.25rem; max-width: 46ch; font-size: var(--step-lead); line-height: 1.35; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4); }
.portada__acciones { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.portada__credito { position: absolute; z-index: 2; right: var(--margin); bottom: 1rem; font-size: 0.8125rem; opacity: 0.85; }
.portada--chica { min-height: min(52svh, 30rem); }
.portada--chica h1 { font-size: var(--step-head); max-width: 20ch; }

/* ---------- textos ---------- */
.intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem var(--gutter); align-items: start; }
.intro h2 { grid-column: 1 / span 5; font-size: var(--step-head); }
.intro__texto { grid-column: 7 / span 6; font-size: var(--step-lead); line-height: 1.4; }
.intro__texto p + p { margin-top: 1rem; }
.palabras { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; grid-column: 1 / -1; }
.palabras li { padding: 0.5rem 1rem; border-radius: 999px; background: var(--surface); font-weight: 600; transition: background-color var(--t-tema) ease; }
.palabras li:nth-child(4n+1) { background: color-mix(in srgb, var(--tinte-1) 35%, var(--bg)); }
.palabras li:nth-child(4n+2) { background: color-mix(in srgb, var(--tinte-2) 28%, var(--bg)); }
.palabras li:nth-child(4n+3) { background: color-mix(in srgb, var(--tinte-3) 28%, var(--bg)); }
.palabras li:nth-child(4n+4) { background: color-mix(in srgb, var(--tinte-4) 30%, var(--bg)); }
@media (max-width: 52em) { .intro h2, .intro__texto { grid-column: 1 / -1; } }

/* ---------- tarjetas ---------- */
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--gutter); }
.grilla--grande { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.tarjeta { position: relative; display: flex; flex-direction: column; background: var(--bg); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent), 0 8px 30px color-mix(in srgb, var(--ink) 8%, transparent); transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
.tarjeta__foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.tarjeta__cuerpo { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.1rem 1.25rem 1.3rem; flex: 1; }
.tarjeta__cat { font-size: var(--step-small); font-weight: 600; color: var(--accent); }
.tarjeta h3 { font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.015em; }
.tarjeta h3 a { text-decoration: none; }
.tarjeta h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tarjeta__bajada { color: var(--muted); font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta__pie { margin-top: auto; padding-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: var(--step-small); color: var(--muted); }
.tarjeta__pie a { position: relative; z-index: 2; color: var(--ink); font-weight: 600; }
.tarjeta__fecha { position: absolute; z-index: 2; top: 0.9rem; left: 0.9rem; display: grid; place-items: center; min-width: 4.25rem; padding: 0.45rem 0.6rem; border-radius: 10px; background: var(--bg); color: var(--ink); text-align: center; line-height: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.tarjeta__fecha strong { font-size: 1.6rem; }
.tarjeta__fecha span { font-size: 0.8rem; font-weight: 600; text-transform: capitalize; }
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover { transform: translateY(-3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent), 0 16px 40px color-mix(in srgb, var(--ink) 14%, transparent); }
  .tarjeta:hover .tarjeta__foto img { transform: scale(1.04); }
}

/* mosaico de accesos (alojamientos, comemos, qué hacemos, senderos) */
.accesos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.acceso { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; color: #fff; text-decoration: none; display: flex; align-items: flex-end; background: #222; }
.acceso img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.acceso::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.62)); }
.acceso div { position: relative; z-index: 1; padding: 1.25rem; }
.acceso strong { display: block; font-size: var(--step-lead); line-height: 1.05; }
.acceso span { font-size: var(--step-small); opacity: 0.92; }
@media (hover: hover) and (pointer: fine) { .acceso:hover img { transform: scale(1.05); } }
@media (max-width: 60em) { .accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- ¿qué hacemos hoy? ---------- */
.hoy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem var(--gutter); align-items: start; }
.hoy__clima { position: sticky; top: 6rem; }
.hoy__temp { font-size: var(--step-display); font-weight: 600; line-height: 0.9; letter-spacing: -0.04em; margin-top: 1rem; }
.hoy__linea { margin-top: 0.75rem; font-size: var(--step-lead); line-height: 1.35; color: var(--campo-soft); max-width: 26ch; }
.hoy__manana { margin-top: 0.75rem; color: var(--campo-soft); font-size: var(--step-small); }
.hoy__lista { display: grid; gap: 0.75rem; }
.hoy__item { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 0.75rem; border-radius: var(--radius); background: color-mix(in srgb, var(--campo-ink) 10%, transparent); text-decoration: none; color: inherit; }
.hoy__item img { width: 5.5rem; height: 4.25rem; object-fit: cover; border-radius: 8px; }
.hoy__item strong { display: block; font-size: 1.15rem; }
.hoy__item span { display: block; font-size: var(--step-small); color: var(--campo-soft); }
.hoy__item [data-hoy] { margin-top: 0.15rem; color: #fff; font-weight: 600; }
.hoy__item [data-estado]::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.45em; border-radius: 50%; background: #7ee08f; vertical-align: 0.05em; }
.hoy__item [data-estado="no"]::before { background: #ff9b8a; }
.hoy__item [data-estado="medio"]::before { background: #ffd166; }
@media (max-width: 56em) { .hoy { grid-template-columns: 1fr; } .hoy__clima { position: static; } }

/* ---------- galería por estación ---------- */
.pestanas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.pestanas button { min-height: 2.75rem; padding: 0 1.1rem; border-radius: 999px; background: var(--surface); font-weight: 600; }
.pestanas button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.6rem; }
.galeria a { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface); }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.galeria [hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .galeria a:hover img { transform: scale(1.05); } }

/* visor de fotos */
.visor { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(5, 10, 14, 0.92); padding: 4rem 1rem; }
.visor[hidden] { display: none; }
.visor img { max-height: 82svh; width: auto; max-width: min(100%, 90rem); border-radius: 8px; }
.visor p { color: #fff; margin-top: 0.75rem; text-align: center; font-size: var(--step-small); }
.visor button { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; }
.visor button svg { width: 1.4rem; height: 1.4rem; }
.visor__cerrar { top: 1rem; right: 1rem; }
.visor__ant { left: 1rem; top: 50%; translate: 0 -50%; }
.visor__sig { right: 1rem; top: 50%; translate: 0 -50%; }

/* ---------- consejos ---------- */
.consejos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.consejo { padding: 1.5rem; border-radius: var(--radius); background: var(--bg); }
.consejo strong { display: block; font-size: 1.2rem; line-height: 1.2; margin-bottom: 0.5rem; }
.consejo p { color: var(--muted); font-size: 1rem; }
@media (max-width: 60em) { .consejos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34em) { .consejos { grid-template-columns: 1fr; } }

/* ---------- tablas legibles ---------- */
.tabla-envoltorio { overflow-x: auto; border-radius: var(--radius); background: var(--bg); box-shadow: 0 8px 30px color-mix(in srgb, var(--ink) 8%, transparent); }
.tabla { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tabla caption { text-align: left; padding: 1.25rem 1.25rem 0.5rem; font-weight: 600; }
.tabla th { text-align: left; font-size: var(--step-small); font-weight: 600; color: var(--muted); padding: 0.75rem 1.25rem; border-bottom: 2px solid var(--surface-2); white-space: nowrap; }
.tabla td { padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--surface); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla td:first-child { font-weight: 600; }
.tabla a { font-weight: 600; }
.nivel { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: var(--step-small); font-weight: 600; white-space: nowrap; }
.nivel--baja { background: #dff3e4; color: #1d5c2e; }
.nivel--media { background: #fff0cc; color: #7a5200; }
.nivel--alta { background: #fde0dc; color: #8f2416; }
@media (max-width: 40em) {
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; }
  .tabla tr { padding: 1rem 1.25rem; border-bottom: 1px solid var(--surface); }
  .tabla td { padding: 0.15rem 0; border: 0; }
  .tabla td[data-et]::before { content: attr(data-et) ": "; color: var(--muted); font-weight: 500; }
}

/* ---------- cómo llegar, teléfonos ---------- */
.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
@media (max-width: 56em) { .dos { grid-template-columns: 1fr; } }
.panel { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius); background: var(--bg); }
.panel h3 { font-size: var(--step-lead); margin-bottom: 1rem; }
.panel p + p { margin-top: 0.75rem; }
.telefonos li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--surface-2); }
.telefonos li:last-child { border-bottom: 0; }
.telefonos a { font-weight: 600; text-decoration: none; }
.pestana-panel[hidden] { display: none; }
.horario { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-variant-numeric: tabular-nums; }
.horario th, .horario td { padding: 0.55rem 0.75rem; text-align: center; border-bottom: 1px solid var(--surface-2); }
.horario th { font-size: var(--step-small); color: var(--muted); font-weight: 600; }

/* ---------- directorio ---------- */
.filtros { display: grid; gap: 1rem; margin-bottom: 2rem; }
.buscador { display: flex; align-items: center; gap: 0.6rem; padding: 0 1rem; min-height: 3.25rem; border-radius: 999px; background: var(--surface); }
.buscador svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--muted); }
.buscador input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 1.0625rem; padding: 0.75rem 0; }
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip { min-height: 2.5rem; padding: 0 0.95rem; border-radius: 999px; background: var(--surface); font-size: var(--step-small); font-weight: 600; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.chips__titulo { font-size: var(--step-small); color: var(--muted); font-weight: 600; margin-right: 0.25rem; align-self: center; }
.cuenta { font-size: var(--step-small); color: var(--muted); margin-bottom: 1rem; }
.directorio [hidden] { display: none; }
.vacio { padding: 3rem 1rem; text-align: center; color: var(--muted); }

/* ---------- ficha ---------- */
.migas { font-size: var(--step-small); color: var(--muted); margin-bottom: 1rem; }
.migas a { color: inherit; }
.ficha { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 2.5rem var(--gutter); align-items: start; }
.ficha__fotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.ficha__fotos a { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--surface); }
.ficha__fotos a:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.ficha__fotos img { width: 100%; height: 100%; object-fit: cover; }
.ficha__texto { margin-top: 2rem; font-size: 1.0625rem; }
.ficha__texto p + p, .ficha__texto ul { margin-top: 0.9rem; }
.ficha__texto h2 { font-size: var(--step-lead); margin: 2rem 0 0.75rem; }
.ficha__lado { position: sticky; top: 6rem; display: grid; gap: 1rem; }
.caja { padding: 1.4rem; border-radius: var(--radius); background: var(--surface); }
.caja h2 { font-size: 1.15rem; margin-bottom: 0.75rem; }
.caja ul { display: grid; gap: 0.5rem; }
.caja a { font-weight: 600; overflow-wrap: anywhere; }
.servicios { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.servicios li { padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--bg); font-size: var(--step-small); font-weight: 500; }
.tecnica { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; }
.tecnica dt { color: var(--muted); }
.tecnica dd { font-weight: 600; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.etiquetas li { padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--surface); font-size: var(--step-small); font-weight: 600; }
@media (max-width: 60em) { .ficha { grid-template-columns: 1fr; } .ficha__lado { position: static; } }

/* ---------- artículos (historia, notas) ---------- */
.articulo { max-width: 46rem; margin-inline: auto; font-size: 1.125rem; line-height: 1.65; }
.articulo > * + * { margin-top: 1.1rem; }
.articulo h2 { font-size: var(--step-lead); margin-top: 2.5rem; line-height: 1.15; }
.articulo h3 { font-size: 1.2rem; line-height: 1.3; margin-top: 1.75rem; }
.articulo img { border-radius: 10px; margin-inline: auto; }
.articulo figure img { width: 100%; }
.articulo figcaption { font-size: var(--step-small); color: var(--muted); margin-top: 0.5rem; }
.articulo audio { width: 100%; }
.articulo ul, .articulo ol { padding-left: 1.25rem; }
.articulo .posta { scroll-margin-top: 6rem; padding-top: 1rem; border-top: 3px solid var(--accent); }
.articulo .posta span { display: block; font-size: var(--step-small); color: var(--accent); font-weight: 600; }
.indice-postas { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.indice-postas a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--surface); font-weight: 700; text-decoration: none; }

/* ---------- formulario embebido ---------- */
.formulario { width: 100%; min-height: 1800px; border: 0; border-radius: var(--radius); background: #fff; }

/* ---------- pie ---------- */
.pie { background: var(--campo); color: var(--campo-ink); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; transition: background-color var(--t-tema) ease; }
.pie__grilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem var(--gutter); }
.pie h2 { font-size: 1rem; margin-bottom: 1rem; }
.pie ul { display: grid; gap: 0.55rem; }
.pie a { color: inherit; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie__marca img { height: 3.5rem; width: auto; margin-bottom: 1rem; }
.pie__marca p { color: var(--campo-soft); max-width: 32ch; }
.pie__legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--campo-ink) 20%, transparent); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; font-size: var(--step-small); color: var(--campo-soft); }
@media (max-width: 60em) { .pie__grilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34em) { .pie__grilla { grid-template-columns: 1fr; } }

@media print { .particulas, .pausa-animacion, .clima-barra, .encabezado, .pie { display: none; } }

/* ---------- piezas de la v2 ---------- */
.marca svg { height: 2.9rem; width: auto; color: var(--campo); transition: color var(--t-tema) ease; }
.pie__marca svg { height: auto; width: 100%; margin-bottom: 1rem; }
.portada h1 .salto { display: block; font-size: 0.5em; line-height: 1.05; letter-spacing: -0.02em; margin-top: 0.35em; max-width: 20ch; }
.ficha-cabeza { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.ficha-cabeza h1 { font-size: var(--step-head); max-width: 22ch; margin-top: 0.35rem; }
.ficha-cabeza__bajada { margin-top: 0.9rem; font-size: var(--step-lead); line-height: 1.35; color: var(--muted); max-width: 44ch; }
.ficha__fecha { margin-top: 1rem; display: inline-block; padding: 0.45rem 0.95rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.ficha__texto h2 { font-size: var(--step-lead); margin: 2rem 0 0.9rem; }
.ficha__texto h3 { font-size: 1.2rem; margin: 1.6rem 0 0.4rem; line-height: 1.25; }
.ficha__texto h3 .nivel { margin-left: 0.4rem; vertical-align: 0.1em; }
.ficha__texto ul { padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.ficha__texto ul li::marker { color: var(--accent); }
.ficha__texto a { color: var(--accent); font-weight: 600; }
.aviso { display: inline-block; margin-top: 0.6rem; padding: 0.5rem 0.8rem; border-radius: 8px; font-size: var(--step-small); background: color-mix(in srgb, #f2b705 22%, var(--bg)); color: var(--ink); }
.fuente { font-size: var(--step-small); color: var(--muted); padding-inline: 0.25rem; }
.fuente a { color: var(--accent); font-weight: 600; }
.caja--acento { background: var(--campo); color: var(--campo-ink); }
.caja--acento p { color: var(--campo-soft); }
.aviso-grande { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.aviso-grande h2 { font-size: var(--step-lead); }
.aviso-grande p { margin-top: 0.5rem; color: var(--muted); max-width: 52ch; }
.aviso-grande a:not(.boton) { color: var(--accent); font-weight: 600; }
.nota-tabla { margin-top: 1.25rem; font-size: var(--step-small); color: var(--muted); max-width: 70ch; }
.cabeza p a { color: var(--accent); font-weight: 600; }
.titulo, .titulo-campo { font-size: var(--step-head); max-width: 16ch; }
.campo-texto { margin-top: 1rem; color: var(--campo-soft); max-width: 40ch; font-size: var(--step-lead); line-height: 1.35; }
.boton--borde-claro { background: transparent; color: var(--campo-ink); box-shadow: inset 0 0 0 2px currentColor; }
.lista-recs { counter-reset: rec; display: grid; gap: 0.1rem; }
.lista-recs li { counter-increment: rec; display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--campo-ink) 18%, transparent); }
.lista-recs li::before { content: counter(rec); font-weight: 700; color: var(--campo-soft); font-variant-numeric: tabular-nums; }
.panel--borde { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); }
.panel--foto { display: grid; padding: 0; overflow: hidden; text-decoration: none; background: var(--surface); }
.panel--foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 600ms var(--ease-out); }
.panel--foto div { padding: 1.4rem 1.5rem 1.6rem; }
.panel--foto p { margin-top: 0.5rem; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .panel--foto:hover img { transform: scale(1.03); } }
.hoy__fuente { margin-top: 1.5rem; font-size: var(--step-small); color: var(--campo-soft); max-width: 36ch; }
.consejos--seis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.consejos--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.consejo .link-flecha { margin-top: 0.75rem; }
@media (max-width: 60em) { .consejos--seis, .consejos--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34em) { .consejos--seis, .consejos--tres { grid-template-columns: 1fr; } }
.articulo .consejos { margin-block: 1.5rem; }
.articulo .consejo { background: var(--surface); }
.fondos { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.6rem; }
.fondos a { display: block; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.fondos img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .fondos a:hover img { transform: scale(1.05); } }
@media (max-width: 60em) { .fondos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 34em) { .fondos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.articulo-portada img { width: 100%; max-height: 32rem; object-fit: cover; border-radius: var(--radius); }
.articulo .entrada { font-size: var(--step-lead); line-height: 1.4; }
.articulo a { color: var(--accent); }
.articulo .boton { color: inherit; }
.articulo-cabeza h1 { max-width: 26ch; }
.pestana-panel p + p { margin-top: 0.85rem; }
.pestana-panel { margin-top: 0.25rem; }
.tarjeta__pie a { position: relative; z-index: 2; }
.link-flecha svg { width: 1.1em; height: 1.1em; flex: none; }
.pie ul { list-style: none; padding: 0; }
.seccion--campo .chico { color: var(--campo-soft); }
.tarjeta[data-cats="Eventos"] .tarjeta__foto img { object-fit: contain; background: var(--surface-2); }
.menu a { white-space: nowrap; }
.clima-barra .contenedor { align-items: center; flex-wrap: wrap; padding-block: 0.3rem; }
.clima-barra__estacion { display: inline-flex; align-items: center; gap: 0.6rem; }
.clima-barra__rotulo { color: var(--campo-soft); }
.clima-barra .estaciones { background: color-mix(in srgb, var(--campo-ink) 12%, transparent); padding: 0.15rem; }
.clima-barra .estaciones button { min-height: 2rem; padding: 0 0.7rem; color: var(--campo-ink); }
.clima-barra .estaciones button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 62em) { .clima-barra__dato { display: none; } }
@media (max-width: 40em) {
  .clima-barra__hoy, .clima-barra__rotulo { display: none; }
  .clima-barra .contenedor { justify-content: center; }
  .clima-barra .estaciones button span.nombre { display: none; }
  .clima-barra .estaciones button[aria-pressed="true"] span.nombre { display: inline; }
}
.nivel--varia { background: var(--surface-2); color: var(--ink); }
.nivel--varia { white-space: normal; border-radius: 8px; }
.caja ul { list-style: none; padding: 0; }
.tarjeta__foto--vacia { display: grid; place-content: center; justify-items: center; gap: 0.6rem; aspect-ratio: 4 / 3; padding: 1.5rem; text-align: center; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface-2)); color: color-mix(in srgb, var(--accent) 70%, var(--ink)); }
.tarjeta__foto--vacia svg { width: 3rem; height: 3rem; }
.tarjeta__foto--vacia span { font-weight: 700; font-size: 1.25rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); max-width: 16ch; }

/* ---------- verano: toda la página bajo el sol ---------- */
html[data-estacion="verano"] body::before { background: radial-gradient(75rem 55rem at 100% 0%, rgba(255, 200, 80, 0.34), rgba(255, 210, 110, 0.12) 45%, rgba(255, 210, 110, 0) 78%); mix-blend-mode: multiply; }
html[data-estacion="verano"] body::after { content: ""; position: fixed; z-index: 29; pointer-events: none; top: -70vmax; right: -70vmax; width: 140vmax; height: 140vmax; background: repeating-conic-gradient(from 0deg, rgba(255, 196, 72, 0.13) 0deg 3deg, rgba(255, 196, 72, 0) 3deg 11deg); -webkit-mask: radial-gradient(closest-side, #000 15%, transparent 100%); mask: radial-gradient(closest-side, #000 15%, transparent 100%); mix-blend-mode: multiply; }
html[data-estacion="verano"][data-animacion="activa"] body::after { animation: rayos 120s linear infinite; }
@keyframes rayos { to { transform: rotate(360deg); } }
/* invierno: nieve acumulada al pie de las portadas */
html[data-estacion="invierno"] .portada::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(2.5rem, 6vw, 5rem); z-index: 2; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 46c90-26 170-30 260-12s150 30 250 8 190-40 300-22 170 36 280 20 180-34 350-20v60H0z' fill='%23ffffff'/%3E%3Cpath d='M0 62c120-14 220-10 330 2s200 8 300-6 230-16 340 0 260 12 470-2v24H0z' fill='%23eef4fa'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; }
/* (la guirnalda de colores de primavera se quitó: la paleta queda en magenta + verde) */
/* otoño: tonos tierra en las fotos */
html[data-estacion="otono"] .portada__foto img { filter: saturate(1.08) sepia(0.12); }
@media (prefers-reduced-motion: reduce) { html[data-estacion="verano"] body::after { animation: none; } }
.pausa-animacion svg { width: 0.95rem; height: 0.95rem; }
@media (max-width: 40em) {
  .pausa-animacion { width: 2.75rem; padding: 0; justify-content: center; right: 0.75rem; bottom: 0.75rem; }
  .pausa-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .clima-barra .estaciones .ahora { display: none; }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
}
.promos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--gutter); align-items: start; }
.promo { padding: 1.5rem; border-radius: var(--radius); background: var(--surface); display: grid; gap: 0.6rem; }
.seccion--suave .promo { background: var(--bg); }
.promo h3 { font-size: 1.35rem; line-height: 1.15; }
.promo__quien { font-weight: 600; color: var(--muted); }
.promo__quien a, .promo__contacto a { color: var(--accent); font-weight: 600; }
.promo__texto { display: grid; gap: 0.5rem; }
.promo__texto ul { padding-left: 1.1rem; }
.promo .aviso { margin-top: 0; justify-self: start; }

/* =====================================================================
   v3 — movimiento, botones, carrusel de estaciones y guarda de eventos
   ===================================================================== */

/* ---------- transición entre páginas (Chrome/Edge/Safari recientes) ---------- */
@view-transition { navigation: auto; }
.clima-barra { view-transition-name: barra; }
.encabezado { view-transition-name: encabezado; }
::view-transition-old(root) { animation: 160ms var(--ease-out) both vt-salir; }
::view-transition-new(root) { animation: 300ms var(--ease-out) both vt-entrar; }
::view-transition-old(encabezado), ::view-transition-old(barra) { animation: none; opacity: 0; }
::view-transition-new(encabezado), ::view-transition-new(barra) { animation: none; }
@keyframes vt-salir { to { opacity: 0; } }
@keyframes vt-entrar { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- entradas al hacer scroll (solo lo que está fuera de pantalla al cargar) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-aparece] { opacity: 0; transform: translateY(22px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); }
  .js [data-aparece].visible { opacity: 1; transform: none; }
}

/* ---------- botones ---------- */
.boton { position: relative; isolation: isolate; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 10px 22px -12px color-mix(in srgb, var(--accent) 85%, transparent);
  transition: background-color 200ms ease, box-shadow 220ms ease, transform 180ms var(--ease-out); }
.boton::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 60%); }
.boton svg { transition: transform 220ms var(--ease-out); }
.boton--claro { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06), 0 10px 22px -12px rgba(0, 0, 0, 0.45); }
.boton--claro::before, .boton--borde::before, .boton--borde-claro::before { display: none; }
.boton--borde { box-shadow: inset 0 0 0 2px currentColor; }
.boton--borde-claro { box-shadow: inset 0 0 0 2px currentColor; }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 16px 30px -12px color-mix(in srgb, var(--accent) 90%, transparent); }
  .boton--claro:hover { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06), 0 16px 30px -12px rgba(0, 0, 0, 0.5); }
  .boton--borde:hover, .boton--borde-claro:hover { box-shadow: inset 0 0 0 2px currentColor; background: color-mix(in srgb, currentColor 10%, transparent); }
  .boton:hover svg { transform: translateX(3px); }
  .link-flecha svg { transition: transform 220ms var(--ease-out); }
  .link-flecha:hover svg { transform: translateX(4px); }
  .chip:hover { background: color-mix(in srgb, var(--ink) 10%, var(--surface)); }
  .chip[aria-pressed="true"]:hover { background: var(--ink); }
}
.boton:active { transform: translateY(0) scale(0.97); transition-duration: 200ms, 220ms, 100ms; }
.chip { transition: background-color 200ms ease, color 200ms ease, transform 140ms var(--ease-out); }
.chip:active, .pestanas [role="tab"]:active { transform: scale(0.96); }
.estaciones button { transition: background-color 220ms ease, color 220ms ease, transform 140ms var(--ease-out); }
.estaciones button:active { transform: scale(0.94); }
.menu a { transition: background-color 180ms ease, color 180ms ease; }
@media (hover: hover) and (pointer: fine) { .menu a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); } }

/* menú en celular: entra deslizando */
@media (max-width: 68em) and (prefers-reduced-motion: no-preference) {
  .encabezado[data-abierto] .navegacion { animation: menu-entra 240ms var(--ease-out); }
}
@keyframes menu-entra { from { opacity: 0; transform: translateY(-8px); } }

/* volver */
.volver { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; margin-bottom: 0.25rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.volver svg { width: 1.15em; height: 1.15em; transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .volver:hover svg { transform: translateX(-4px); } }

/* visor: entra y sale suave (lo maneja el script) */
.visor img { transition: opacity 180ms ease; }
.visor.cambiando img { opacity: 0.35; }
.visor figure { touch-action: pan-y; }

/* ---------- carrusel de estaciones ---------- */
.estaciones-sec { overflow: hidden; }
.carrusel { --lado: max(var(--margin), calc((100vw - var(--ancho)) / 2)); }
.carrusel__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.carrusel__tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.carrusel__tab { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: var(--step-small); font-weight: 600; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent); transition: background-color 220ms ease, color 220ms ease, transform 140ms var(--ease-out); }
.carrusel__tab svg { width: 1.05rem; height: 1.05rem; }
.carrusel__n { font-weight: 500; opacity: 0.65; }
.carrusel__tab[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.carrusel__tab:active { transform: scale(0.95); }
.carrusel__ctrl { display: flex; gap: 0.5rem; }
.carrusel__boton { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--bg); color: var(--ink); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent), 0 8px 18px -12px rgba(0, 0, 0, 0.4); transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out); }
.carrusel__boton svg { width: 1.2rem; height: 1.2rem; }
.carrusel__boton .ic-play, .carrusel__boton[aria-pressed="true"] .ic-pausa { display: none; }
.carrusel__boton[aria-pressed="true"] .ic-play { display: block; }
.carrusel__boton:active { transform: scale(0.9); }
@media (hover: hover) and (pointer: fine) {
  .carrusel__tab:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, var(--bg)); }
  .carrusel__tab[aria-pressed="true"]:hover { background: var(--ink); color: var(--bg); }
  .carrusel__boton:hover { background: var(--accent); color: var(--accent-ink); }
}
.carrusel__pista { display: flex; gap: clamp(0.75rem, 1.6vw, 1.25rem); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--lado); padding: 0.5rem var(--lado) 1rem; scrollbar-width: none; cursor: grab; }
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.carrusel__foto:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.carrusel__pista.arrastrando { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.carrusel__pista.arrastrando .carrusel__foto { pointer-events: none; }
.carrusel__foto { position: relative; flex: 0 0 auto; display: block; width: min(76vw, 58rem); aspect-ratio: 16 / 10; border-radius: calc(var(--radius) + 6px); color: #fff; text-decoration: none; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; }
.carrusel__caja { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: var(--surface-2); }
.carrusel__marco { position: absolute; inset: 0; overflow: hidden; transition: transform 700ms var(--ease-out); }
.carrusel__marco img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.carrusel__caja::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.5)); pointer-events: none; }
.carrusel__rotulo { position: absolute; left: 1rem; bottom: 1rem; z-index: 1; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; border-radius: 999px; background: rgba(0, 0, 0, 0.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: var(--step-small); font-weight: 600; }
.carrusel__rotulo svg { width: 1rem; height: 1rem; }
@media (hover: hover) and (pointer: fine) { .carrusel__foto:hover .carrusel__marco { transform: scale(1.04); } }
.carrusel__pie { display: flex; align-items: center; gap: 1rem; margin-top: 0.75rem; }
.carrusel__progreso { flex: 1; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.carrusel__progreso span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; transform: scaleX(0.02); }
.carrusel__cuenta { min-width: 4.5rem; text-align: right; font-size: var(--step-small); color: var(--muted); }
@media (max-width: 40em) {
  .carrusel__foto { width: 84vw; aspect-ratio: 4 / 5; }
  .carrusel__ctrl [data-dir] { display: none; }
  .carrusel__tab { padding: 0 0.8rem; }
  .carrusel__n { display: none; }
}
/* foco en la foto central: con scroll-driven animations donde existen, con clase como respaldo */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .carrusel__caja { animation: carrusel-foco linear both; animation-timeline: view(inline); }
    .carrusel__marco img { animation: carrusel-paralaje linear both; animation-timeline: view(inline); }
  }
  .carrusel.sin-timeline .carrusel__caja { transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); }
  .carrusel.sin-timeline .carrusel__foto:not(.activa) .carrusel__caja { opacity: 0.55; transform: scale(0.94); }
}
@keyframes carrusel-foco { 0% { opacity: 0.45; transform: scale(0.9); } 38%, 62% { opacity: 1; transform: none; } 100% { opacity: 0.45; transform: scale(0.9); } }
@keyframes carrusel-paralaje { from { transform: translateX(-5%) scale(1.12); } to { transform: translateX(5%) scale(1.12); } }

/* ---------- guarda de próximos eventos ---------- */
.guarda-sec { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); background: var(--surface); overflow: hidden; }
.guarda__cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.75rem 2rem; }
.guarda__cabeza h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.guarda { position: relative; overflow: hidden; padding-block: 2.5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.guarda__pista { display: flex; width: max-content; }
.guarda__grupo { display: flex; gap: 1.5rem; padding: 0 1.5rem 0 0; margin: 0; list-style: none; }
.guarda__item { position: relative; flex: 0 0 auto; width: clamp(16rem, 24vw, 21rem); }
.guarda__tarjeta { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: calc(var(--radius) + 4px); overflow: hidden; background: var(--bg); color: var(--ink); text-decoration: none; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent), 0 12px 30px -18px rgba(0, 0, 0, 0.4); transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out); -webkit-tap-highlight-color: transparent; }
.guarda__foto { display: block; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.guarda__foto img { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.guarda__dia { position: absolute; top: 0.75rem; left: 0.75rem; display: grid; place-items: center; min-width: 3.6rem; padding: 0.45rem 0.6rem; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; line-height: 1.05; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5); }
.guarda__dia strong { font-size: 1.55rem; letter-spacing: -0.02em; }
.guarda__dia--todo strong { font-size: 1rem; }
.guarda__texto { display: grid; gap: 0.3rem; padding: 1rem 1.15rem 1.25rem; }
.guarda__fecha { font-size: var(--step-small); font-weight: 600; color: var(--accent); }
.guarda__texto strong { font-size: 1.2rem; line-height: 1.15; }
.guarda__bajada { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--step-small); color: var(--muted); }
.guarda__item:hover, .guarda__item:focus-within { z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .guarda__tarjeta:hover { transform: scale(1.12); box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.5); }
}
.guarda__tarjeta:focus-visible { transform: scale(1.06); outline-offset: 4px; }
/* sin animación (movimiento reducido o pausada): cinta que se desliza a mano */
.guarda.estatica { overflow-x: auto; scroll-snap-type: x proximity; -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; }
.guarda.estatica .guarda__grupo { padding-inline: var(--margin); }
.guarda.estatica .guarda__item { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .guarda__tarjeta:hover { transform: none; } }
@media (max-width: 40em) {
  .carrusel__barra { flex-wrap: nowrap; gap: 0.5rem; }
  .carrusel__tabs { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -0.25rem; padding: 0.25rem; }
  .carrusel__tabs::-webkit-scrollbar { display: none; }
  .carrusel__tab { flex: none; }
  .carrusel__tab:not([aria-pressed="true"]) span:not(.carrusel__n) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .carrusel__tab:not([aria-pressed="true"]) { padding: 0; width: 2.75rem; justify-content: center; }
}
.portada__acciones .boton { min-height: 3.4rem; padding: 0 1.7rem; font-size: 1.05rem; }

/* =====================================================================
   v4 — deslizador de estaciones (barra superior)
   ===================================================================== */
.estaciones-control { display: inline-grid; row-gap: 0.1rem; }
.deslizador { position: relative; height: 1.1rem; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }
.deslizador.arrastrando { cursor: grabbing; }
.deslizador__riel { position: absolute; top: 50%; left: 0; height: 3px; margin-top: -1.5px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--campo-ink) 24%, transparent); }
.deslizador__lleno { position: absolute; inset: 0; background: var(--accent); transform-origin: left center; transform: scaleX(0); }
.deslizador__marca { position: absolute; top: 50%; left: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--campo-ink); opacity: 0.5; pointer-events: none; }
/* perilla plana: no crece al pasar el mouse ni al arrastrar */
.deslizador__perilla { position: absolute; top: 50%; left: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--campo-ink); box-shadow: 0 0 0 2.5px var(--accent); pointer-events: none; }
.deslizador:focus-visible .deslizador__perilla { outline: 2px solid var(--campo-ink); outline-offset: 4px; }
/* mientras los colores se mezclan cuadro a cuadro, sin transiciones de color que los atrasen */
html.tema-vivo body, html.tema-vivo .clima-barra, html.tema-vivo .encabezado, html.tema-vivo .pie, html.tema-vivo .palabras li, html.tema-vivo .marca svg { transition: none; }
@media (max-width: 40em) {
  .deslizador { height: 1.5rem; }
  /* en celular, cuatro íconos del mismo ancho: la barra queda pareja debajo */
  .clima-barra .estaciones button { min-width: 2.9rem; justify-content: center; padding: 0 0.5rem; }
  .clima-barra .estaciones button[aria-pressed] span.nombre { display: none; }
}
@media print { .deslizador { display: none; } }
/* foto de portada que se va mientras entra la de la nueva estación */
.portada__foto img.foto-saliente { position: absolute; inset: 0; pointer-events: none; }
/* video timelapse que aparece mientras se arrastra la barra de estaciones */
/* sin z-index: queda por debajo del velo (.portada::after) y del texto, así el título se lee igual */
.portada__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; user-select: none; transition: opacity 450ms var(--ease-out); }
.portada__video.activo { opacity: 1; transition-duration: 160ms; }
@media (prefers-reduced-motion: reduce) { .portada__video, .portada__video.activo { transition-duration: 1ms; } }

/* ---------- ajustes para celular ---------- */
@media (max-width: 30em) {
  /* un botón con texto largo baja de renglón en vez de empujar la página hacia el costado */
  .boton { white-space: normal; text-align: center; line-height: 1.25; padding-block: 0.7rem; }
}
@media (max-width: 40em) {
  /* links del pie con área de toque de dedo (44 px), sin agrandar la letra */
  .pie ul { gap: 0; }
  .pie ul a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}
/* ---------- postales: carrusel en abanico (assets/postales.js) ---------- */
/* Las alturas de .fan-layout son las que usa postales.js para achicar el abanico en pantallas bajas. */
.postales { overflow-x: clip; padding-bottom: clamp(3rem, 6vw, 5rem); }
.postales .cabeza { margin-bottom: 0.5rem; }
.postales .cabeza p span:empty { display: none; }
.fan-layout { --fan-w: 19rem; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 80rem; height: 38rem; margin-inline: auto; touch-action: pan-y; -webkit-tap-highlight-color: transparent; user-select: none; }
.fan-card { position: absolute; display: block; width: var(--fan-w); aspect-ratio: 3 / 4; border-radius: 1.4rem; overflow: hidden; background: var(--surface-2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 18px 40px -18px rgba(0, 0, 0, 0.55), 0 4px 12px -6px rgba(0, 0, 0, 0.25); opacity: 0; will-change: transform; cursor: pointer; }
.fan-card__foto { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.fan-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.fan-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (max-width: 1023px) { .fan-layout { --fan-w: 17rem; height: 34rem; } }
@media (max-width: 767px) { .fan-layout { --fan-w: 14.5rem; height: 28rem; } }
@media (max-width: 639px) { .fan-layout { --fan-w: 13rem; height: 26rem; } }
@media (max-width: 479px) { .fan-layout { --fan-w: 11rem; height: 22rem; } .fan-card { border-radius: 1rem; } }
.fan-controles { position: relative; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.fan-controles[hidden] { display: none; }
.fan-flecha { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ink) 10%, transparent); background: color-mix(in srgb, var(--ink) 5%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: color-mix(in srgb, var(--ink) 45%, transparent); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); transition: border-color 300ms ease, color 300ms ease, transform 140ms var(--ease-out); }
.fan-flecha::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 4%, transparent); pointer-events: none; }
.fan-flecha svg { position: relative; z-index: 2; width: 1.25rem; height: 1.25rem; }
.fan-flecha:active { transform: scale(0.92); opacity: 0.7; }
@media (hover: hover) and (pointer: fine) { .fan-flecha:hover { border-color: color-mix(in srgb, var(--ink) 25%, transparent); color: color-mix(in srgb, var(--ink) 75%, transparent); } }
@media (max-width: 767px) { .fan-flecha { width: 2.75rem; height: 2.75rem; } .fan-flecha svg { width: 1rem; height: 1rem; } }
.fan-puntos { display: flex; align-items: center; gap: 0.5rem; }
.fan-puntos span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: color-mix(in srgb, var(--ink) 15%, transparent); transition: background-color 300ms ease, transform 300ms ease; }
.fan-puntos span.activo { background: color-mix(in srgb, var(--ink) 70%, transparent); transform: scale(1.3); }
.fan-puntos--cuenta { min-width: 4.5rem; justify-content: center; font-size: var(--step-small); font-weight: 600; color: var(--muted); }/* en pantallas chicas las tarjetas de las puntas bajan más que el alto del abanico: se le hace lugar abajo
   y se aprovecha el aire de arriba, así las flechas no quedan encima de las fotos */
@media (max-width: 767px) { .fan-layout { margin-top: -1rem; margin-bottom: 1.5rem; } }
@media (max-width: 479px) { .fan-layout { margin-top: -1.75rem; margin-bottom: 2.75rem; } }
/* Botón de WhatsApp: el verde es el mismo en todas las estaciones, para que se reconozca */
a.boton-wa, .tarjeta__pie a.boton-wa, .caja a.boton-wa, .promo__contacto a.boton-wa, .articulo a.boton-wa, .ficha__texto a.boton-wa {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 2.5rem; padding: 0 0.95rem; border-radius: 999px;
  background: #0e7a55; color: #ffffff; font-size: var(--step-small); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
a.boton-wa::before {
  content: ""; width: 1.15em; height: 1.15em; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat;
}
a.boton-wa:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { a.boton-wa:hover, .tarjeta__pie a.boton-wa:hover, .caja a.boton-wa:hover, .promo__contacto a.boton-wa:hover, .articulo a.boton-wa:hover, .ficha__texto a.boton-wa:hover { background: #0a6143; color: #ffffff; } }
.caja li:has(> .boton-wa), .promo__contacto:has(> .boton-wa) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; }
.tarjeta__pie:has(> .boton-wa) { align-items: center; }
/* Fichas cuya única imagen es el logo: se ve entero, sin recortar ni agrandar de más */
.foto-logo img { object-fit: contain; padding: 0.75rem; }
.ficha__fotos.foto-logo a:first-child { grid-column: auto; aspect-ratio: 1; }

/* Contador de visitas en la cabeza de la ficha */
.visitas-ficha { display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.5rem; font-size: var(--step-small); font-weight: 600; color: var(--muted); }
.visitas-ficha svg { width: 1.15em; height: 1.15em; flex: none; }

/* Logo oficial: siempre en su turquesa. En el pie va sobre un recuadro claro, porque los fondos de las estaciones no le dan contraste */
:root { --logo: #03a5a4; }
.marca svg { color: var(--logo); }
.pie__logo { width: 11rem; margin-bottom: 1rem; padding: 0.85rem 1.1rem; border-radius: var(--radius); background: #fffefb; color: var(--logo); }
.pie__logo svg { display: block; margin-bottom: 0; }
/* Escudo de la Municipalidad: debajo del logo turístico, mismo ancho y mismo recuadro claro (la imagen trae fondo blanco) */
.pie__muni { display: block; width: 11rem; margin-bottom: 1rem; padding: 0.45rem 0.7rem; border-radius: var(--radius); background: #fff; }
.pie__marca .pie__muni img { display: block; width: 100%; height: auto; margin-bottom: 0; }

/* =====================================================================
   v5 — tipografía de acento, portada inmersiva, menú de vidrio, bento,
        cortes de montaña, cintas, íconos dibujados y pie con firma
   ===================================================================== */

/* ---------- tipografía de acento (alojada en el sitio) ---------- */
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
:root { --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --alto-enc: 4.5rem; }
h1 em, h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.14em; letter-spacing: -0.015em; line-height: 0.9; }
h2 em { color: var(--accent); }
html[data-estacion="verano"] h2 em { color: var(--campo); }
.seccion--campo h2 em, .portada h1 em { color: inherit; }

/* ---------- rótulo numerado arriba de los títulos ---------- */
main { counter-reset: seccion; }
.rotulo { counter-increment: seccion; display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.rotulo::before { content: counter(seccion, decimal-leading-zero) " — "; color: var(--ink); }
.cabeza .rotulo, .guarda__cabeza .rotulo { flex-basis: 100%; max-width: none; margin-bottom: -0.25rem; }
.intro .rotulo { grid-column: 1 / -1; margin-bottom: -1rem; }
.seccion--campo .rotulo { color: var(--campo-soft); }
.seccion--campo .rotulo::before { color: var(--campo-ink); }

/* ---------- menú de vidrio; transparente mientras está sobre la foto de portada ---------- */
.encabezado { background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease; }
.submenu { color: var(--ink); }
@media (max-width: 68em) { .navegacion { color: var(--ink); } }
main > .portada:first-child { margin-top: calc(-1 * var(--alto-enc) - 1px); }
.js body:has(main > .portada:first-child) .encabezado:not(.con-fondo):not([data-abierto]) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; color: #fff; }
.js body:has(main > .portada:first-child) .encabezado:not(.con-fondo):not([data-abierto]) .marca svg { color: #fff; }
.js body:has(main > .portada:first-child) .encabezado:not(.con-fondo):not([data-abierto]) .menu > li > a[aria-current="page"] { background: rgba(255, 255, 255, 0.2); }
.js body:has(main > .portada:first-child) .encabezado:not(.con-fondo):not([data-abierto]) .boton-menu { background: rgba(255, 255, 255, 0.2); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (hover: hover) and (pointer: fine) {
  .js body:has(main > .portada:first-child) .encabezado:not(.con-fondo):not([data-abierto]) .menu > li:not(.menu__registro) > a:hover { background: rgba(255, 255, 255, 0.18); }
}
.marca svg { transition: color 320ms ease; }

/* ---------- portada inmersiva ---------- */
.portada:not(.portada--chica) { min-height: min(94svh, 60rem); }
.portada::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0, rgba(0, 0, 0, 0) 10rem), linear-gradient(180deg, rgba(0, 0, 0, 0.05) 30%, var(--velo) 100%); }
.portada--chica .portada__texto { padding-top: calc(var(--alto-enc) + 2rem); }
@media (prefers-reduced-motion: no-preference) {
  /* la foto respira: zoom lento al entrar */
  html:not([data-animacion="pausada"]) .portada__foto { animation: portada-zoom 16s var(--ease-out) both; }
  /* el texto entra en cascada; el título, palabra por palabra (las arma sitio.js) */
  .js .portada.por-entrar :is(h1, .portada__estacion, .portada__bajada, .portada__acciones) { opacity: 0; animation: portada-seguro 1ms 3s forwards; }
  .portada.entra .portada__estacion { animation: portada-sube 800ms var(--ease-out) 60ms both; }
  .portada.entra .pal { display: inline-block; animation: portada-palabra 900ms var(--ease-out) both; animation-delay: calc(var(--i) * 80ms + 160ms); }
  .portada.entra .portada__bajada { animation: portada-sube 800ms var(--ease-out) 620ms both; }
  .portada.entra .portada__acciones { animation: portada-sube 800ms var(--ease-out) 760ms both; }
  /* al bajar, la portada se achica a una tarjeta y el texto se va antes que la foto */
  @supports (animation-timeline: view()) {
    html:not([data-animacion="pausada"]) .portada { view-timeline: --portada block; animation: portada-sale linear both; animation-timeline: --portada; animation-range: exit 0% exit 95%; }
    html:not([data-animacion="pausada"]) .portada__texto { animation: portada-texto-sale linear both; animation-timeline: --portada; animation-range: exit 0% exit 60%; }
    html:not([data-animacion="pausada"]) .portada__foto img { animation: portada-paralaje linear both; animation-timeline: --portada; animation-range: exit 0% exit 100%; }
  }
}
@keyframes portada-zoom { from { transform: scale(1.14); } to { transform: none; } }
@keyframes portada-seguro { to { opacity: 1; } }
@keyframes portada-sube { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
@keyframes portada-palabra { from { opacity: 0; transform: translateY(0.45em); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes portada-sale { to { transform: scale(0.92); border-radius: 2.5rem; } }
@keyframes portada-texto-sale { to { opacity: 0; transform: translateY(-3rem); } }
@keyframes portada-paralaje { to { transform: translateY(14%) scale(1.06); } }

/* ---------- partículas: solo acompañan a la portada ---------- */
.particulas { transition: opacity 500ms ease; }

/* ---------- mosaico de accesos (bento) ---------- */
.accesos--bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(12rem, 19vw, 17rem); }
.accesos--bento .acceso { aspect-ratio: auto; border-radius: calc(var(--radius) + 8px); }
.acceso--grande { grid-column: span 2; grid-row: span 2; }
.acceso--ancho { grid-column: span 2; }
.acceso::after { transition: opacity 400ms ease; }
.acceso div { transition: transform 450ms var(--ease-out); }
.acceso--grande strong { font-size: var(--step-head); letter-spacing: -0.02em; }
.acceso--grande div { padding: clamp(1.25rem, 2.5vw, 2rem); }
.acceso__flecha { position: absolute; top: 1rem; right: 1rem; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; transition: background-color 300ms ease, color 300ms ease, transform 450ms var(--ease-out); }
.acceso__flecha svg { width: 1.2rem; height: 1.2rem; transform: rotate(-45deg); transition: transform 450ms var(--ease-out); }
.acceso:active { transform: scale(0.985); }
.acceso { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .acceso:hover img { transform: scale(1.07); }
  .acceso:hover div { transform: translateY(-0.4rem); }
  .acceso:hover .acceso__flecha { background: #fff; color: #13202a; transform: scale(1.1); }
  .acceso:hover .acceso__flecha svg { transform: none; }
}
@media (max-width: 60em) {
  .accesos--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(11rem, 42vw, 16rem); }
  .acceso--grande { grid-row: span 1; }
  .acceso--grande strong { font-size: var(--step-lead); }
}

/* ---------- corte con silueta de cerros sobre las secciones de color y el pie ---------- */
.seccion--campo, .pie { position: relative; }
.seccion--campo::before, .pie::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: clamp(1.5rem, 4.5vw, 4rem); pointer-events: none; background: var(--campo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V62l70-22 50 14 90-40 60 26 80-30 110 44 70-20 90 28 100-52 60 30 80-18 120 40 90-34 70 22 100-30 80 26 120-16v70z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V62l70-22 50 14 90-40 60 26 80-30 110 44 70-20 90 28 100-52 60 30 80-18 120 40 90-34 70 22 100-30 80 26 120-16v70z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; }
@media print { .seccion--campo::before, .pie::before { display: none; } }
/* fondo de las secciones de color: luz del acento y curvas de nivel */
.seccion--campo { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='white' stroke-opacity='.09' stroke-width='1.2'%3E%3Cellipse cx='300' cy='300' rx='36' ry='24' transform='rotate(-20 300 300)'/%3E%3Cellipse cx='304' cy='298' rx='78' ry='54' transform='rotate(-16 300 300)'/%3E%3Cellipse cx='310' cy='296' rx='124' ry='90' transform='rotate(-12 300 300)'/%3E%3Cellipse cx='314' cy='300' rx='170' ry='128' transform='rotate(-8 300 300)'/%3E%3Cellipse cx='316' cy='304' rx='218' ry='168' transform='rotate(-5 300 300)'/%3E%3Cellipse cx='318' cy='306' rx='266' ry='210' transform='rotate(-3 300 300)'/%3E%3Cellipse cx='320' cy='308' rx='290' ry='250' transform='rotate(-1 300 300)'/%3E%3C/svg%3E") right -14rem top -10rem / 58rem no-repeat,
  radial-gradient(70rem 36rem at 88% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%),
  var(--campo); }

/* ---------- ¿qué hacemos hoy? ---------- */
.hoy__ahora { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem); margin-top: 1rem; }
.hoy__ahora .hoy__temp { margin-top: 0; }
.hoy__icono { flex: none; width: clamp(3.5rem, 7vw, 6rem); color: var(--campo-ink); }
.hoy__icono:empty { display: none; }
.ci { display: none; width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
html[data-cielo="sol"] .ci-sol, html[data-cielo="luna"] .ci-luna, html[data-cielo="nubes"] .ci-nubes, html[data-cielo="lluvia"] .ci-lluvia, html[data-cielo="nieve"] .ci-nieve { display: block; }
.ci .lleno { fill: currentColor; stroke: none; }
.ci-sol .lleno, .ci-nubes .ci-solcito { color: #ffd166; }
.ci-rayos { transform-box: view-box; transform-origin: 50% 50%; color: #ffd166; }
@media (prefers-reduced-motion: no-preference) {
  html[data-animacion="activa"] .ci-rayos { animation: ci-gira 24s linear infinite; }
  html[data-animacion="activa"] .ci-nube { animation: ci-flota 6s ease-in-out infinite alternate; }
  html[data-animacion="activa"] .ci-gota { animation: ci-cae 1.1s linear infinite; }
  html[data-animacion="activa"] .ci-gota:nth-child(2) { animation-delay: -0.4s; }
  html[data-animacion="activa"] .ci-gota:nth-child(3) { animation-delay: -0.75s; }
  html[data-animacion="activa"] .ci-luna { animation: ci-flota 7s ease-in-out infinite alternate; }
}
@keyframes ci-gira { to { transform: rotate(360deg); } }
@keyframes ci-flota { from { transform: translateX(-2px); } to { transform: translateX(3px); } }
@keyframes ci-cae { from { transform: translate(1px, -3px); opacity: 0; } 30% { opacity: 1; } to { transform: translate(-3px, 7px); opacity: 0; } }
.hoy__item { transition: background-color 250ms ease, transform 350ms var(--ease-out); }
.hoy__item::after { display: none; content: ""; width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; background: currentColor; opacity: 0; transform: translateX(-0.5rem); transition: opacity 250ms ease, transform 350ms var(--ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.hoy__item img { transition: transform 450ms var(--ease-out); }
.hoy__item:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  .hoy__item { grid-template-columns: 5.5rem minmax(0, 1fr) auto; }
  .hoy__item::after { display: block; }
  .hoy__item:hover { background: color-mix(in srgb, var(--campo-ink) 18%, transparent); transform: translateX(0.4rem); }
  .hoy__item:hover::after { opacity: 1; transform: none; }
  .hoy__item:hover img { transform: scale(1.06); }
}

/* ---------- cintas de palabras ---------- */
.cintas { display: grid; gap: 0.35rem; margin-top: clamp(2.5rem, 5vw, 4.5rem); overflow: hidden; }
.cinta, .cinta__grupo { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.cinta__grupo { margin: 0; padding: 0; list-style: none; }
.cinta__grupo li { display: flex; align-items: center; font-size: clamp(2rem, 1rem + 4.4vw, 4.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; white-space: nowrap; }
.cinta__grupo li:nth-child(even) { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.3rem, 1.15rem + 5vw, 5.1rem); letter-spacing: -0.015em; color: var(--accent); }
html[data-estacion="verano"] .cinta__grupo li:nth-child(even) { color: var(--campo); }
.cinta__grupo li::after { content: ""; flex: none; width: 0.22em; height: 0.22em; margin-inline: 0.75em; border-radius: 2px; transform: rotate(45deg); background: var(--tinte-2); }
.cinta__grupo li:nth-child(3n+1)::after { background: var(--tinte-3); }
.cinta__grupo li:nth-child(3n+2)::after { background: var(--tinte-4); }
.cinta--vuelta .cinta__grupo li, html[data-estacion] .cinta--vuelta .cinta__grupo li:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 42%, transparent); }
.cintas.andando { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cintas.andando .cinta { flex-wrap: nowrap; justify-content: flex-start; width: max-content; animation: cinta-va 60s linear infinite; }
.cintas.andando .cinta__grupo { flex: none; flex-wrap: nowrap; }
.cintas.andando .cinta--vuelta { animation-direction: reverse; animation-duration: 75s; }
html[data-animacion="pausada"] .cintas.andando .cinta { animation-play-state: paused; }
@keyframes cinta-va { to { transform: translateX(-50%); } }

/* ---------- recomendaciones: ícono de línea que se dibuja ---------- */
.consejo { transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out); }
.consejo__icono { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: 1rem; border-radius: 1rem; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--campo); transition: background-color 300ms ease, color 300ms ease, transform 450ms var(--ease-out); }
.consejo__icono svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.consejo__icono path { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .consejos.por-dibujar .consejo__icono path { transition: stroke-dashoffset 1300ms var(--ease-in-out) 150ms; }
  .consejos.por-dibujar .consejo:not(.dibujado) .consejo__icono path { stroke-dashoffset: 1; }
}
@media (hover: hover) and (pointer: fine) {
  .consejo:has(.consejo__icono):hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--ink) 45%, transparent); }
  .consejo:hover .consejo__icono { background: var(--campo); color: var(--campo-ink); transform: rotate(-6deg) scale(1.06); }
}

/* ---------- de la tarjeta a la ficha: la foto viaja (navegadores con view transitions) ---------- */
.ficha__fotos:not(.foto-logo) a:first-child img { view-transition-name: foto-ficha; }
::view-transition-group(foto-ficha) { animation-duration: 460ms; animation-timing-function: var(--ease-out); }
::view-transition-old(foto-ficha), ::view-transition-new(foto-ficha) { height: 100%; object-fit: cover; overflow: clip; animation-duration: 460ms; }

/* ---------- carrusel de estaciones: versión liviana de fondo mientras baja la foto ---------- */
.carrusel__caja { background-size: cover; background-position: center; }
.carrusel.con-carga .carrusel__marco img { transition: opacity 500ms ease; }
.carrusel.con-carga .carrusel__marco img:not(.cargada) { opacity: 0; }

/* ---------- pie: subrayado que crece y firma grande ---------- */
.pie ul a, .pie__legal a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 320ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pie ul a:hover, .pie__legal a:hover { text-decoration: none; background-size: 100% 1px; } }
.pie__firma { width: min(100%, 50rem); margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; color: var(--campo-ink); opacity: 0.14; }
.pie__firma svg { display: block; width: 100%; height: auto; }
.pie__firma + .pie__legal { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (prefers-reduced-motion: no-preference) {
  /* el recorte va en el svg y no en la caja: una caja recortada del todo nunca "entra en pantalla" */
  .pie__firma.por-ver svg { clip-path: inset(0 100% 0 0); transition: clip-path 2200ms var(--ease-in-out); }
  .pie__firma.por-ver.visible svg { clip-path: inset(0 0 0 0); }
}
@media print { .pie__firma { display: none; } }