/* =========================================================
   RENASIE — Reserva natural, refugio en el páramo
   Hoja de estilos principal

   Paleta oficial: verde pasto + amarillo frailejón (ver nota en :root).
   El verde es la base y el amarillo el único acento de acción. El azul
   cobalto que usa el WordPress actual se descartó: tres colores fuertes
   compitiendo hacen que ninguno signifique nada.

   Todo el sitio lee de los tokens de :root — cambiar ahí recolorea todo.
   ========================================================= */

:root {
  /* --- Marca --- */
  --verde-pasto: #006b52;
  --amarillo-frailejon: #fbb034;

  --verde-profundo: var(--verde-pasto);
  --verde-oscuro: #004a39;
  --verde-claro: #0a8e6e;
  --naranja: var(--amarillo-frailejon);
  --naranja-claro: #ffc35c;

  /* --- Neutros --- */
  --crema: #fdf9ea;
  --crema-oscuro: #f0e9d3;
  --tinta: #1c2422;
  --tinta-suave: #4a5654;
  --blanco: #ffffff;

  /* --- Roles semánticos (usar estos en los componentes) --- */
  --fondo: var(--crema);
  --fondo-alt: #ffffff;
  --fondo-tarjeta: rgba(255, 255, 255, 0.85);
  --fondo-oscuro: var(--verde-profundo);
  --texto: var(--tinta);
  --texto-suave: var(--tinta-suave);
  --texto-invertido: var(--crema);
  --acento: var(--naranja);
  --borde: rgba(0, 107, 82, 0.16);

  /* --- Glassmorphism y sombras de lujo --- */
  --glass-bg: rgba(253, 249, 234, 0.78);
  --glass-border: rgba(255, 255, 255, 0.4);
  --sombra-sm: 0 4px 12px rgba(0, 50, 38, 0.06);
  --sombra-md: 0 12px 32px rgba(0, 50, 38, 0.12);
  --sombra-lg: 0 20px 48px rgba(0, 50, 38, 0.18);
  --sombra-glow: 0 0 24px rgba(251, 176, 52, 0.35);

  /* --- Tipografía --- */
  --fuente-display: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  --fuente-texto: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  --fuente-script: "Caveat", cursive;

  /* --- Escala fluida --- */
  --paso--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --paso-0: clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
  --paso-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.55rem);
  --paso-2: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  --paso-3: clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --paso-4: clamp(2.6rem, 1.9rem + 3.4vw, 4.8rem);

  /* --- Espaciado y forma --- */
  --ancho-max: 1200px;
  --ancho-texto: 62ch;
  --radio: 8px;
  --radio-lg: 20px;
  --seccion-y: clamp(4.5rem, 9vw, 8.5rem);
  --transicion: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   Modo Noche en el Páramo
   ========================================================= */
[data-theme="dark"] {
  --fondo: #091d17;
  --fondo-alt: #0d271f;
  --fondo-tarjeta: rgba(13, 39, 31, 0.85);
  --fondo-oscuro: #05130f;
  --texto: #f2ede0;
  --texto-suave: #a8b8b3;
  --texto-invertido: #fdf9ea;
  --borde: rgba(251, 176, 52, 0.2);
  --glass-bg: rgba(9, 29, 23, 0.82);
  --glass-border: rgba(251, 176, 52, 0.18);
  --sombra-sm: 0 4px 16px rgba(0, 0, 0, 0.35);
  --sombra-md: 0 12px 36px rgba(0, 0, 0, 0.5);
  --sombra-lg: 0 20px 48px rgba(0, 0, 0, 0.65);
}

/* =========================================================
   Reset
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--paso-0);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--fuente-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   Utilidades de layout
   ========================================================= */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.seccion {
  padding-block: var(--seccion-y);
}

.seccion--oscura {
  background: var(--fondo-oscuro);
  color: var(--texto-invertido);
}

.seccion--alt {
  background: var(--fondo-alt);
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Etiqueta de sección: la línea + texto en mayúsculas */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  font-size: var(--paso--1);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--verde-claro);
}

.etiqueta::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.seccion--oscura .etiqueta {
  color: var(--acento);
}

.encabezado-seccion {
  max-width: var(--ancho-texto);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.encabezado-seccion h2 {
  font-size: var(--paso-3);
  margin-bottom: 1rem;
}

.encabezado-seccion p {
  font-size: var(--paso-1);
  color: var(--texto-suave);
  line-height: 1.6;
}

.seccion--oscura .encabezado-seccion p {
  color: rgba(253, 249, 234, 0.75);
}

/* =========================================================
   Botones
   ========================================================= */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 2rem;
  border-radius: 100px;
  font-size: var(--paso--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--transicion), background-color var(--transicion),
    color var(--transicion), border-color var(--transicion);
}

.boton:hover {
  transform: translateY(-2px);
}

/* Botones ámbar: texto blanco, un poco más grueso (a pedido de Luis). */
.boton--primario {
  background: var(--acento);
  color: var(--blanco);
  font-weight: 600;
}

.boton--primario:hover {
  background: var(--naranja-claro);
}

.boton--fantasma {
  border: 1px solid currentColor;
  color: inherit;
}

/* Al pasar el cursor se rellena de verde con texto crema: legible tanto
   sobre la foto del hero como en las secciones claras. (Antes usaba
   currentColor para fondo y texto a la vez y el texto quedaba invisible.) */
.boton--fantasma:hover {
  background: var(--verde-profundo);
  color: var(--crema);
  border-color: var(--verde-profundo);
}

/* Variante para secciones claras: borde y texto verde en reposo. */
.boton--fantasma-verde {
  color: var(--verde-profundo);
  border-color: var(--verde-profundo);
}

.seccion--oscura .boton--fantasma:hover {
  color: var(--crema);
}

/* =========================================================
   Marcador de posición para imágenes
   Se activa (.is-empty) cuando el <img> no carga, para que
   la maqueta no se vea rota mientras faltan las fotos.
   ========================================================= */

.media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, var(--verde-claro), var(--verde-oscuro));
  border-radius: var(--radio-lg);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media.is-empty img {
  display: none;
}

.media.is-empty::after {
  content: attr(data-etiqueta);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  font-size: var(--paso--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(253, 249, 234, 0.7);
}

/* =========================================================
   Cabecera y navegación
   ========================================================= */

.cabecera {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding-block: 1.25rem;
  transition: background-color var(--transicion), padding var(--transicion),
    box-shadow var(--transicion);
}

.cabecera.esta-fija {
  padding-block: 0.75rem;
  background: var(--verde-profundo);
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.18);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--crema);
}

/* Logo horizontal oficial (versión crema para el fondo verde) */
.marca__logo {
  height: clamp(42px, 5vw, 52px);
  width: auto;
  transition: height var(--transicion);
}

.cabecera.esta-fija .marca__logo {
  height: 40px;
}

.marca__texto {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.marca__nombre {
  font-family: var(--fuente-display);
  font-size: 1.35rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.marca__bajada {
  font-family: var(--fuente-script);
  font-size: 0.95rem;
  color: var(--acento);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.nav a {
  position: relative;
  font-size: var(--paso--1);
  letter-spacing: 0.04em;
  color: var(--crema);
  transition: color var(--transicion);
}

.nav a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--acento);
  transition: width var(--transicion);
}

.nav a:hover::after {
  width: 100%;
}

.nav .boton {
  color: var(--blanco);
}

.nav .boton::after {
  display: none;
}

/* Página actual: se marca con class="esta-activo" en cada archivo,
   así funciona aunque el JS no cargue. */
.nav a.esta-activo {
  color: var(--acento);
}

/* El botón de Contacto es amarillo relleno: si además se le aplica el
   color de "página activa" (que también es amarillo), el texto
   desaparece sobre su propio fondo. En la página de Contacto el botón
   conserva el texto blanco; que sea la página actual ya se indica con
   aria-current, y para quien mira, con el propio botón resaltado. */
.nav .boton.esta-activo {
  color: var(--blanco);
}

.nav a.esta-activo::after {
  width: 100%;
}

/* Botón hamburguesa */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  z-index: 110;
}

.menu-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--crema);
  transition: transform var(--transicion), opacity var(--transicion);
}

.menu-abierto .menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-abierto .menu-toggle span:nth-child(2) {
  opacity: 0;
}

.menu-abierto .menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
  .menu-toggle {
    display: flex;
  }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    background: var(--verde-profundo);
    font-size: var(--paso-1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--transicion), transform var(--transicion),
      visibility var(--transicion);
  }

  .menu-abierto .nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav a {
    font-size: var(--paso-1);
  }
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: 8rem 5rem;
  background: var(--verde-profundo);
  color: var(--texto-invertido);
  isolation: isolate;
}

.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: 0;
  background: linear-gradient(150deg, var(--verde-claro), var(--verde-oscuro));
}

/* El marcador del hero va abajo a la derecha, para no chocar con el titular */
.hero__fondo.is-empty::after {
  inset: auto 0 1.5rem auto;
  padding-right: clamp(1.25rem, 5vw, 3rem);
  font-size: 0.7rem;
  opacity: 0.5;
}

.hero__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__fondo.is-empty img {
  display: none;
}

/* Velo para que el texto se lea sobre la foto */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(0, 74, 57, 0.92) 0%,
    rgba(0, 74, 57, 0.72) 45%,
    rgba(0, 74, 57, 0.35) 100%
  );
}

.hero__contenido {
  max-width: 52rem;
}

/* Hero de Inicio: título a la izquierda con énfasis en negrita. */

/* .hero .hero__titulo para ganarle en especificidad a `.hero h1`,
   que fija --paso-4. */
.hero .hero__titulo {
  font-weight: 400;
  /* Mismo tamaño que los títulos de sección (h2 = --paso-3) */
  font-size: var(--paso-3);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.hero__titulo strong {
  font-weight: 700;
}

.hero__script {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--fuente-script);
  font-size: var(--paso-2);
  color: var(--acento);
}

.hero h1 {
  font-size: var(--paso-4);
  margin-bottom: 1.5rem;
}

.hero__texto {
  max-width: 34rem;
  margin-bottom: 2.5rem;
  font-size: var(--paso-1);
  color: rgba(253, 249, 234, 0.85);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero__datos {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(253, 249, 234, 0.18);
}

.dato__valor {
  font-family: var(--fuente-display);
  font-size: var(--paso-2);
  line-height: 1;
  color: var(--acento);
}

.dato__etiqueta {
  font-size: var(--paso--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(253, 249, 234, 0.6);
}

/* =========================================================
   Portada compacta de las páginas internas
   ========================================================= */

.hero--pagina {
  min-height: 0;
  padding-block: clamp(9rem, 16vw, 12rem) clamp(4rem, 8vw, 6rem);
}

.hero--pagina .hero__contenido {
  max-width: 44rem;
}

.hero--pagina h1 {
  font-size: var(--paso-3);
  margin-bottom: 1rem;
}

.hero--pagina .hero__texto {
  margin-bottom: 0;
}

/* Migas de pan */
.migas {
  margin-bottom: 1rem;
  font-size: var(--paso--1);
  letter-spacing: 0.06em;
  color: rgba(253, 249, 234, 0.6);
}

.migas a:hover {
  color: var(--acento);
}

.migas span {
  margin-inline: 0.5rem;
}

/* =========================================================
   Los cuatro pilares
   ========================================================= */

.pilares__intro {
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  font-size: var(--paso-1);
  text-align: center;
  color: var(--texto-suave);
  line-height: 1.6;
}

.pilares__intro strong {
  font-weight: 500;
  color: var(--texto);
}

.pilares__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.pilar {
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  text-align: center;
  transition: transform var(--transicion), border-color var(--transicion);
}

.pilar:hover {
  transform: translateY(-4px);
  border-color: var(--verde-claro);
}

.pilar__icono {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-inline: auto;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: rgba(0, 107, 82, 0.08);
  color: var(--verde-profundo);
}

.pilar__icono svg {
  width: 1.75rem;
  height: 1.75rem;
}

.pilar h3 {
  font-size: var(--paso-1);
  margin-bottom: 0.5rem;
}

.pilar p {
  font-size: var(--paso--1);
  color: var(--texto-suave);
  line-height: 1.6;
}

/* =========================================================
   Manifiesto
   ========================================================= */

.manifiesto__grilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.manifiesto .media {
  aspect-ratio: 4 / 5;
}

.manifiesto h2 {
  font-size: var(--paso-3);
  margin-bottom: 1.5rem;
}

.manifiesto p + p {
  margin-top: 1.25rem;
}

.manifiesto p {
  color: var(--texto-suave);
}

.cita {
  margin-top: 2.5rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--acento);
  font-family: var(--fuente-display);
  font-size: var(--paso-1);
  font-style: italic;
  color: var(--texto);
}

@media (max-width: 860px) {
  .manifiesto__grilla {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Experiencias
   ========================================================= */

.experiencias__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.experiencia {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.experiencia:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 74, 57, 0.13);
}

.experiencia .media {
  aspect-ratio: 3 / 2;
  border-radius: 0;
}

.experiencia__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.5rem, 3vw, 2rem);
}

.experiencia__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.pastilla {
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  background: rgba(0, 107, 82, 0.08);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde-profundo);
}

.experiencia h3 {
  font-size: var(--paso-2);
  margin-bottom: 0.75rem;
}

.experiencia p {
  color: var(--texto-suave);
  margin-bottom: 1.5rem;
}

.experiencia__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borde);
}

.precio {
  font-family: var(--fuente-display);
  font-size: var(--paso-1);
  color: var(--verde-profundo);
}

.precio span {
  display: block;
  font-family: var(--fuente-texto);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--paso--1);
  font-weight: 500;
  color: var(--verde-profundo);
  transition: gap var(--transicion);
}

.enlace-flecha:hover {
  gap: 0.75rem;
}

/* =========================================================
   El páramo (sección oscura con lista)
   ========================================================= */

.paramo__grilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.paramo .media {
  aspect-ratio: 1 / 1;
}

.lista-datos {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.lista-datos li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--borde);
}

.lista-datos li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.lista-datos strong {
  display: block;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

/* Por defecto, texto oscuro: esta lista también se usa sobre fondos
   claros (el reglamento de mascotas). En las secciones verdes se
   invierte a crema con las reglas de abajo. */
.lista-datos p {
  font-size: var(--paso--1);
  color: var(--texto);
  line-height: 1.6;
}

.seccion--oscura .lista-datos li {
  border-bottom-color: rgba(253, 249, 234, 0.14);
}

.seccion--oscura .lista-datos li:last-child {
  border-bottom: none;
}

.seccion--oscura .lista-datos p {
  color: rgba(253, 249, 234, 0.7);
}

.icono-punto {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(251, 176, 52, 0.18);
  color: var(--acento);
  font-size: 1.1rem;
}

@media (max-width: 860px) {
  .paramo__grilla {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Galería
   ========================================================= */

.galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 1rem;
}

.galeria .media:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.galeria .media:nth-child(4) {
  grid-column: span 2;
}

@media (max-width: 760px) {
  .galeria {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
  }

  .galeria .media:nth-child(1) {
    grid-column: span 2;
  }
}

/* =========================================================
   Testimonios
   ========================================================= */

.testimonios__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

.testimonio {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
}

.estrellas {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  color: var(--acento);
}

.testimonio blockquote {
  flex: 1;
  font-family: var(--fuente-display);
  font-size: var(--paso-1);
  font-style: italic;
  line-height: 1.5;
  color: var(--texto);
}

.testimonio figcaption {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borde);
}

.testimonio figcaption strong {
  display: block;
  font-weight: 500;
}

.testimonio figcaption span {
  font-size: var(--paso--1);
  color: var(--texto-suave);
}

/* =========================================================
   Preguntas frecuentes (acordeón)
   ========================================================= */

.faq {
  max-width: 46rem;
  margin-inline: auto;
}

.faq__item {
  border-bottom: 1px solid var(--borde);
}

.faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding-block: 1.5rem;
  text-align: left;
  font-family: var(--fuente-display);
  font-size: var(--paso-1);
  transition: color var(--transicion);
}

.faq__pregunta:hover {
  color: var(--verde-claro);
}

.faq__icono {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--borde);
  border-radius: 50%;
  font-size: 1.1rem;
  transition: transform var(--transicion), background-color var(--transicion);
}

.faq__item.esta-abierto .faq__icono {
  transform: rotate(45deg);
  background: var(--acento);
  border-color: var(--acento);
}

.faq__respuesta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transicion);
}

.faq__item.esta-abierto .faq__respuesta {
  grid-template-rows: 1fr;
}

.faq__respuesta > div {
  overflow: hidden;
}

.faq__respuesta p {
  padding-bottom: 1.5rem;
  color: var(--texto-suave);
}

/* =========================================================
   Llamado final
   ========================================================= */

.cta-final {
  position: relative;
  text-align: center;
  isolation: isolate;
}

.cta-final h2 {
  font-size: var(--paso-3);
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: 1.25rem;
}

.cta-final p {
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: 2.5rem;
  font-size: var(--paso-1);
  color: rgba(253, 249, 234, 0.8);
}

/* =========================================================
   Pie de página
   ========================================================= */

.pie {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  background: var(--verde-oscuro);
  color: rgba(253, 249, 234, 0.7);
  font-size: var(--paso--1);
}

/* Marca de agua: el mandala tenue en la esquina inferior derecha,
   en diagonal con las puntas hacia la izquierda (rotado -45°). */
.pie::before {
  content: "";
  position: absolute;
  right: clamp(-70px, -3vw, -30px);
  bottom: clamp(-90px, -4vw, -50px);
  width: clamp(260px, 34vw, 420px);
  height: clamp(260px, 34vw, 420px);
  background: url("../assets/logo/isotipo-blanco-hd.png") no-repeat center / contain;
  opacity: 0.07;
  transform: rotate(-45deg);
  transform-origin: center;
  pointer-events: none;
}

.pie .contenedor {
  position: relative;
  z-index: 1;
}

.pie__grilla {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(253, 249, 234, 0.12);
}

.pie h4 {
  margin-bottom: 1.25rem;
  font-family: var(--fuente-texto);
  font-size: var(--paso--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crema);
}

.pie ul {
  display: grid;
  gap: 0.75rem;
}

.pie a:hover {
  color: var(--acento);
}

.pie__marca p {
  max-width: 32ch;
  margin-top: 1.25rem;
}

.redes {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.redes a {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(253, 249, 234, 0.2);
  border-radius: 50%;
  transition: background-color var(--transicion), color var(--transicion),
    border-color var(--transicion);
}

.redes a:hover {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--verde-oscuro);
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  font-size: 0.8rem;
}

@media (max-width: 760px) {
  .pie__grilla {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Plan en detalle (página Planes)
   Filas alternadas: foto a un lado, contenido al otro.
   ========================================================= */

.plan-detalle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: 2.5rem;
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.plan-detalle:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-lg);
}

.plan-detalle:last-child {
  margin-bottom: 0;
}

.plan-detalle:nth-child(even) .plan-detalle__media {
  order: 2;
}

.plan-detalle__media {
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radio-lg) - 4px);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicion);
}

.plan-detalle:hover .plan-detalle__media {
  transform: scale(1.02);
}

.plan-detalle h2 {
  font-size: var(--paso-2);
  margin-bottom: 1rem;
}

.plan-detalle > div > p {
  color: var(--texto-suave);
}

.incluye {
  display: grid;
  gap: 0.6rem;
  margin-block: 1.75rem;
}

.incluye li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: var(--paso--1);
  line-height: 1.6;
}

.incluye li::before {
  content: "◈";
  color: var(--verde-claro);
  line-height: 1.6;
}

.plan-detalle__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borde);
}

@media (max-width: 860px) {
  .plan-detalle {
    grid-template-columns: 1fr;
  }

  .plan-detalle:nth-child(even) .plan-detalle__media {
    order: 0;
  }
}

/* =========================================================
   Pasos numerados (página Reservas)
   ========================================================= */

.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: paso;
}

.paso {
  counter-increment: paso;
  position: relative;
  padding-top: 3.5rem;
}

.paso::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--fuente-display);
  font-size: var(--paso-2);
  line-height: 1;
  color: var(--acento);
}

.paso h3 {
  font-size: var(--paso-1);
  margin-bottom: 0.5rem;
}

.paso p {
  font-size: var(--paso--1);
  color: var(--texto-suave);
  line-height: 1.6;
}

.seccion--oscura .paso p {
  color: rgba(253, 249, 234, 0.7);
}

/* =========================================================
   Calendario de disponibilidad (página Reservas)

   Los colores de las celdas van por tokens propios para que
   funcionen en modo día y en modo noche: si se dejara el
   fondo blanco fijo, en modo noche el número quedaría
   ilegible (el texto se aclara con el tema).
   ========================================================= */

:root {
  --cal-libre-fondo: var(--blanco);
  --cal-libre-texto: var(--texto);
  --cal-ocupado-fondo: var(--crema-oscuro);
  --cal-ocupado-texto: var(--texto-suave);
}

[data-theme="dark"] {
  --cal-libre-fondo: rgba(253, 249, 234, 0.08);
  --cal-libre-texto: var(--texto);
  --cal-ocupado-fondo: rgba(0, 0, 0, 0.3);
  --cal-ocupado-texto: rgba(242, 237, 224, 0.4);
}

.calendario {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
}

.calendario__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.calendario__mes {
  font-family: var(--fuente-display);
  font-size: var(--paso-1);
  font-weight: 600;
  text-transform: capitalize;
  color: var(--verde-profundo);
}

.calendario__nav {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--borde);
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--verde-profundo);
  transition: background-color var(--transicion), color var(--transicion),
    opacity var(--transicion);
}

.calendario__nav:hover:not(:disabled) {
  background: var(--verde-profundo);
  color: var(--crema);
}

.calendario__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.calendario__dias,
.calendario__grilla {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
}

.calendario__dias {
  margin-bottom: 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.calendario__celda {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-size: var(--paso--1);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--transicion), color var(--transicion),
    border-color var(--transicion);
}

.calendario__celda.es-vacia {
  border: none;
}

/* Día disponible: se puede tocar */
.calendario__celda.es-libre {
  background: var(--cal-libre-fondo);
  border-color: var(--borde);
  color: var(--cal-libre-texto);
  cursor: pointer;
}

.calendario__celda.es-libre:hover {
  background: var(--verde-profundo);
  border-color: var(--verde-profundo);
  color: var(--crema);
}

/* Día ya reservado */
.calendario__celda.es-ocupado {
  background: var(--cal-ocupado-fondo);
  color: var(--cal-ocupado-texto);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Día que ya pasó */
.calendario__celda.es-pasado {
  color: var(--texto-suave);
  opacity: 0.4;
}

/* La fecha que eligió el visitante */
.calendario__celda.es-elegido,
.calendario__celda.es-libre.es-elegido:hover {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--tinta);
  font-weight: 600;
}

.calendario__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borde);
  font-size: 0.8rem;
  color: var(--texto-suave);
}

.calendario__leyenda li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.calendario__leyenda i {
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  border: 1px solid var(--borde);
}

.calendario__leyenda .es-libre {
  background: var(--cal-libre-fondo);
}

.calendario__leyenda .es-ocupado {
  background: var(--cal-ocupado-fondo);
}

.calendario__leyenda .es-elegido {
  background: var(--acento);
  border-color: var(--acento);
}

.calendario__nota {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--texto-suave);
}

/* =========================================================
   Formulario
   No hay servidor: al enviar se arma un mensaje de WhatsApp
   con los datos. Ver js/main.js.
   ========================================================= */

.formulario {
  display: grid;
  gap: 1.25rem;
}

.campo {
  display: grid;
  gap: 0.4rem;
}

.campo--doble {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.campo label {
  font-size: var(--paso--1);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: var(--paso--1);
  color: var(--texto);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color var(--transicion);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--verde-claro);
}

.campo textarea {
  min-height: 7rem;
  resize: vertical;
}

.campo__ayuda {
  font-size: 0.78rem;
  color: var(--texto-suave);
}

@media (max-width: 600px) {
  .campo--doble {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Blog
   ========================================================= */

.entradas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.entrada {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.entrada:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 74, 57, 0.13);
}

.entrada .media {
  aspect-ratio: 16 / 10;
  border-radius: 0;
}

.entrada__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.5rem, 3vw, 2rem);
}

.entrada__fecha {
  margin-bottom: 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verde-claro);
}

.entrada h2 {
  font-size: var(--paso-1);
  margin-bottom: 0.75rem;
}

.entrada p {
  flex: 1;
  font-size: var(--paso--1);
  color: var(--texto-suave);
  margin-bottom: 1.25rem;
}

/* Aviso de sección vacía */
.aviso-vacio {
  padding: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
  background: var(--fondo-alt);
  border: 1px dashed var(--borde);
  border-radius: var(--radio-lg);
}

.aviso-vacio h3 {
  font-size: var(--paso-1);
  margin-bottom: 0.75rem;
}

.aviso-vacio p {
  max-width: 48ch;
  margin-inline: auto;
  color: var(--texto-suave);
}

/* =========================================================
   Contacto
   ========================================================= */

.contacto__grilla {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contacto__datos {
  display: grid;
  gap: 2rem;
}

.dato-contacto strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--paso--1);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verde-claro);
}

.dato-contacto a,
.dato-contacto p {
  font-size: var(--paso-0);
  color: var(--texto);
  line-height: 1.6;
}

.dato-contacto a:hover {
  color: var(--verde-claro);
}

.mapa {
  display: block;
  width: 100%;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  aspect-ratio: 21 / 9;
  border: 0;
  border-radius: var(--radio-lg);
  overflow: hidden;
}

@media (max-width: 860px) {
  .contacto__grilla {
    grid-template-columns: 1fr;
  }

  .mapa {
    aspect-ratio: 4 / 3;
  }
}

/* =========================================================
   Botón flotante de WhatsApp
   ========================================================= */

.wa-flotante {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #25d366;
  color: var(--blanco);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  transition: transform var(--transicion);
}

.wa-flotante:hover {
  transform: scale(1.08);
}

/* =========================================================
   Animación de entrada al hacer scroll
   ========================================================= */

.revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.revelar.es-visible {
  opacity: 1;
  transform: none;
}

/* =========================================================
   Interruptor de Tema (Día / Noche)
   ========================================================= */

/* Botón día/noche: solo el ícono, en un círculo. El texto sigue en el HTML
   para los lectores de pantalla, pero no se dibuja. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid var(--glass-border);
  color: var(--texto-invertido);
  transition: all var(--transicion);
}

.theme-toggle span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}

.theme-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* =========================================================
   Visor de imágenes (Lightbox Modal)
   ========================================================= */

.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 15, 12, 0.92);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  padding: 1.5rem;
}

.lightbox-modal.is-active {
  opacity: 1;
  visibility: visible;
}

.lightbox-modal__img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radio);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  transform: scale(0.95);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.lightbox-modal.is-active .lightbox-modal__img {
  transform: scale(1);
}

.lightbox-modal__cerrar {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  transition: background 0.2s;
}

.lightbox-modal__cerrar:hover {
  background: rgba(255, 255, 255, 0.35);
}

.lightbox-modal__prev,
.lightbox-modal__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background 0.2s;
}

.lightbox-modal__prev { left: 1.5rem; }
.lightbox-modal__next { right: 1.5rem; }

.lightbox-modal__prev:hover,
.lightbox-modal__next:hover {
  background: rgba(255, 255, 255, 0.35);
}

[data-lightbox] {
  cursor: pointer;
}


/* =========================================================
   Banda de inclusiones comunes (planes.html)
   Replica la franja "Todas nuestras experiencias incluyen"
   de las infografías impresas.
   ========================================================= */

.banda-incluye {
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--fondo-oscuro);
  color: var(--texto-invertido);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
}

.banda-incluye__titulo {
  margin-bottom: 1rem;
  font-family: var(--fuente-texto);
  font-size: var(--paso--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
}

.banda-incluye__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  font-size: var(--paso--1);
}

.banda-incluye__lista li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(253, 249, 234, 0.88);
}

.banda-incluye__lista li::before {
  content: "◈";
  color: var(--acento);
}

/* =========================================================
   Aviso de regla (una actividad por día)
   ========================================================= */

.aviso-regla {
  padding: 1.15rem 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 2.5rem);
  background: rgba(251, 176, 52, 0.12);
  border: 1px solid var(--acento);
  border-left-width: 4px;
  border-radius: var(--radio);
  font-size: var(--paso--1);
  line-height: 1.6;
  color: var(--texto);
}

.aviso-regla strong {
  font-weight: 600;
}

/* Aclaración bajo una tarifa (p. ej. lo que no incluye) */
.nota-tarifa {
  margin-top: 1rem;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--texto-suave);
}

/* =========================================================
   Compromisos (planes.html)
   ========================================================= */

.compromisos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
}

.compromisos li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: var(--paso--1);
  line-height: 1.5;
}

.compromisos li::before {
  content: "◈";
  flex-shrink: 0;
  color: var(--verde-claro);
}

/* =========================================================
   Carrusel de actividades de un día (planes.html)

   Se apoya en scroll-snap nativo: el deslizamiento táctil y
   el trackpad funcionan sin JavaScript, y si el JS no carga
   la pista queda como un scroll horizontal usable (los
   controles vienen con [hidden] y solo los muestra el JS).
   ========================================================= */

.carrusel {
  position: relative;
  /* Token local: el punto inactivo necesita contraste propio
     en cada tema, --borde es demasiado tenue para verse. */
  --punto-inactivo: rgba(0, 107, 82, 0.3);
}

[data-theme="dark"] .carrusel {
  --punto-inactivo: rgba(242, 237, 224, 0.35);
}

.carrusel__pista {
  position: relative;
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Sitio para que la sombra de las láminas no se recorte */
  padding-block: 0.5rem;
  /* Barra de scroll oculta, desplazamiento intacto */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carrusel__pista::-webkit-scrollbar {
  display: none;
}

.carrusel__pista:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 4px;
  border-radius: var(--radio-lg);
}

/* flex: 0 0 100% → una lámina por vista.
   Al ser hijas flex se estiran todas a la altura de la más
   alta, así el alto no salta al cambiar de lámina. */
/* El conjunto va deliberadamente más compacto que las fichas de
   experiencia: una lámina de carrusel que no cabe en pantalla
   obliga a hacer scroll vertical dentro de ella, que es justo lo
   que un carrusel debería evitar. */
.carrusel__lamina {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
}

.carrusel__media {
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radio-lg) - 4px);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
}

.carrusel__cuerpo h3 {
  font-size: var(--paso-1);
  margin-bottom: 0.75rem;
}

.carrusel__cuerpo > p {
  font-size: var(--paso--1);
  color: var(--texto-suave);
}

.carrusel__cuerpo .incluye {
  gap: 0.45rem;
  margin-block: 1rem;
}

.carrusel__cuerpo .plan-detalle__pie {
  gap: 1rem;
  padding-top: 1rem;
}

/* --- Controles --- */

.carrusel__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.carrusel__flecha,
.carrusel__pausa {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: 50%;
  color: var(--verde-profundo);
  transition: background-color var(--transicion), color var(--transicion),
    border-color var(--transicion), opacity var(--transicion);
}

.carrusel__flecha:hover:not(:disabled),
.carrusel__pausa:hover {
  background: var(--verde-profundo);
  border-color: var(--verde-profundo);
  color: var(--crema);
}

.carrusel__flecha:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.carrusel__flecha svg,
.carrusel__pausa svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* El botón alterna entre los dos iconos según el estado */
.carrusel__icono-play {
  display: none;
}

.carrusel[data-pausado="true"] .carrusel__icono-pausa {
  display: none;
}

.carrusel[data-pausado="true"] .carrusel__icono-play {
  display: block;
}

.carrusel__puntos {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

/* El botón mide 2.25rem para dar blanco táctil suficiente;
   el punto visible es el ::before, mucho más pequeño. */
.carrusel__punto {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: 50%;
}

.carrusel__punto::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--punto-inactivo);
  transition: background-color var(--transicion), transform var(--transicion);
}

.carrusel__punto:hover::before {
  background: var(--verde-claro);
}

.carrusel__punto[aria-current="true"]::before {
  background: var(--acento);
  transform: scale(1.35);
}

@media (max-width: 860px) {
  .carrusel__lamina {
    grid-template-columns: 1fr;
  }

  .carrusel__media {
    aspect-ratio: 3 / 2;
  }
}

/* Quien pidió menos movimiento no recibe desplazamiento
   animado (el avance automático tampoco arranca, ver main.js) */
@media (prefers-reduced-motion: reduce) {
  .carrusel__pista {
    scroll-behavior: auto;
  }
}

/* =========================================================
   Checklist interactiva "Qué llevar" (reservas.html)
   ========================================================= */

.checklist-seccion {
  background: var(--fondo-alt);
  border-radius: var(--radio-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-md);
  margin-top: 3.5rem;
}

.checklist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--borde);
}

.checklist-header h3 {
  font-size: var(--paso-2);
}

.checklist-progreso {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  background: var(--crema-oscuro);
  color: var(--verde-oscuro);
  font-weight: 600;
  font-size: var(--paso--1);
}

.checklist-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.15rem;
  border-radius: var(--radio);
  background: var(--fondo);
  border: 1px solid var(--borde);
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.checklist-item:hover {
  border-color: var(--verde-claro);
  transform: translateY(-2px);
}

.checklist-item input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--verde-pasto);
  cursor: pointer;
}

.checklist-item.is-completed {
  opacity: 0.65;
  text-decoration: line-through;
  background: rgba(0, 107, 82, 0.05);
}

/* =========================================================
   Pestañas de transporte (contacto.html)
   ========================================================= */

.transporte-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.transporte-tab {
  padding: 0.65rem 1.25rem;
  border-radius: var(--radio);
  background: var(--crema-oscuro);
  border: 1px solid var(--borde);
  font-size: var(--paso--1);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transicion);
}

.transporte-tab.is-active {
  background: var(--verde-pasto);
  color: var(--blanco);
}

.transporte-panel {
  display: none;
  line-height: 1.7;
}

.transporte-panel.is-active {
  display: block;
}


/* =========================================================
   Artículo del blog
   Una sola columna estrecha: en texto largo, la línea corta se
   lee mejor que el ancho completo del contenedor.
   ========================================================= */

.articulo {
  max-width: 68ch;
  margin: 0 auto;
}

.articulo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--borde);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verde-claro);
}

.articulo__entradilla {
  font-size: var(--paso-1);
  line-height: 1.6;
  color: var(--texto);
  margin-bottom: 2.5rem;
}

.articulo h2 {
  font-size: var(--paso-1);
  margin: 2.75rem 0 0.9rem;
}

/* El número de cada dato. Va en el ::before para que no entre en
   el texto que lee un lector de pantalla ni en el que indexa
   Google: ahí el titular debe empezar por la idea, no por "1". */
.articulo h2[data-numero]::before {
  content: attr(data-numero);
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--fuente-script);
  font-size: var(--paso-2);
  line-height: 1;
  color: var(--acento);
}

.articulo h3 {
  font-size: var(--paso-0);
  margin: 2rem 0 0.6rem;
}

.articulo p {
  margin-bottom: 1.15rem;
  color: var(--texto-suave);
  line-height: 1.75;
}

.articulo p strong {
  color: var(--texto);
}

.articulo figure {
  margin: 2.5rem 0;
}

.articulo figcaption {
  margin-top: 0.75rem;
  font-size: var(--paso--1);
  color: var(--texto-suave);
}

.articulo ul {
  margin: 0 0 1.15rem 0;
  padding: 0;
  list-style: none;
}

.articulo ul li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.6rem;
  color: var(--texto-suave);
  line-height: 1.7;
}

.articulo ul li::before {
  content: "◈";
  position: absolute;
  left: 0;
  color: var(--acento);
}

.articulo a:not(.boton) {
  color: var(--verde-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.articulo a:not(.boton):hover {
  color: var(--acento);
}

/* Dato suelto que conviene que se vea aunque el lector solo
   pase los ojos por encima. */
.articulo__dato {
  margin: 2.5rem 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--acento);
  border-radius: var(--radio);
}

.articulo__dato p:last-child {
  margin-bottom: 0;
}

.articulo__cierre {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--borde);
}

/* Ciclo térmico del páramo — el contraste día/noche de un artículo.
   Dos tarjetas enfrentadas en vez de un dibujo: se lee igual en el
   móvil, lo indexa Google y lo entiende un lector de pantalla. */
.ciclo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1rem;
  margin: 2.5rem 0;
}

.ciclo__momento {
  padding: clamp(1.25rem, 3vw, 1.6rem);
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.ciclo__hora {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verde-claro);
}

.ciclo__grados {
  display: block;
  font-size: var(--paso-2);
  font-weight: 700;
  line-height: 1.1;
  color: var(--texto);
}

.ciclo__momento--noche .ciclo__grados {
  color: var(--acento);
}

.ciclo__que {
  margin: 0.5rem 0 0;
  font-size: var(--paso--1);
  color: var(--texto-suave);
  line-height: 1.6;
}

/* Galería de seis fotos.
   La retícula base coloca la primera en 2×2 y la cuarta a lo ancho;
   con seis, además hay que ensanchar la quinta y la sexta para que la
   última fila no quede a medias. Va como modificador para no alterar
   las galerías de cinco que hay en otras páginas. */
.galeria--seis .media:nth-child(5),
.galeria--seis .media:nth-child(6) {
  grid-column: span 2;
}


/* =========================================================
   Saltar al contenido
   Enlace invisible hasta que se le llega con el teclado: el primer
   Tab de la página. Vive aquí y no en efectos.css porque no es un
   efecto — sin él, quien navega con teclado tiene que recorrer todo
   el menú en cada página.
   ========================================================= */

.salto {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--acento);
  color: var(--blanco);
  border-radius: var(--radio);
  font-weight: 600;
  translate: 0 -160%;
  transition: translate var(--transicion);
}

.salto:focus-visible {
  translate: 0 0;
}