/* =========================================================
   SANTUARIO CHIQUITO — Hoja de estilos base
   Mobile-first (360–390px). Sin dependencias externas.
   ========================================================= */

:root {
  /* Paleta de marca — tomada directamente del imagotipo/logotipo real de
     Santuario Chiquito (verde oliva del ícono + verde del wordmark +
     dorado de la hojita), complementada con tierra/agua para categorías. */
  --sc-verde-paramo: #235532;   /* verde del wordmark — títulos, nav activo */
  --sc-verde-bosque: #1a4526;   /* variante oscura — hover de botones y enlaces */
  --sc-verde-musgo: #2e6b3d;    /* verde de botón primario (validado AA con blanco) */
  --sc-verde-claro: #7aad2e;    /* verde oliva del ícono — acentos, chips, detalles */
  --sc-verde-oliva-oscuro: #628727; /* verde oscuro del ícono — bordes, detalles */
  --sc-dorado: #b89c5d;         /* dorado de la hojita del logotipo — acentos puntuales */
  --sc-tierra: #6b4f3b;
  --sc-tierra-clara: #a9805f;
  --sc-agua: #2c6e75;
  --sc-crema: #f6f2ea;
  --sc-crema-oscuro: #eee7d8;
  --sc-blanco: #ffffff;
  --sc-negro: #1b1b16;
  --sc-gris: #5b5b52;
  --sc-gris-claro: #e4e0d4;
  --sc-alerta: #a14b2a;

  --sc-radius: 14px;
  --sc-radius-sm: 8px;
  --sc-sombra: 0 4px 18px rgba(27, 27, 22, 0.12);

  /* Paleta "Opción 2 — Modern Minimalist High Impact" (prompt-maestro,
     ronda 4 de agosto de 2026, punto 1): usada en tarjetas, precios y
     badges técnicos. El borde de tarjeta usa --sc-verde-bosque (el verde
     bosque real de la marca) en vez del #059669/#0F291E sugeridos en el
     prompt, para no introducir una segunda familia de verdes que choque
     con el resto del sitio — precio y badges sí usan exactamente los
     tonos pedidos, son nuevos y no chocan con nada existente. */
  --op2-titulo: #0F291E;
  --op2-texto: #1E2923;
  --op2-precio: #059669;
  --op2-badge-bg: #ECFDF5;
  --op2-badge-texto: #047857;

  --sc-fuente-titulo: 'Georgia', 'Iowan Old Style', serif;
  --sc-fuente-texto: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --sc-max-ancho: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sc-fuente-texto);
  color: var(--sc-negro);
  background: var(--sc-crema);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

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

h1, h2, h3, h4 {
  font-family: var(--sc-fuente-titulo);
  color: var(--sc-verde-paramo);
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(1.9rem, 6vw, 3rem); }
h1 .h1-marca { display: block; }
h1 .h1-sub {
  display: block;
  font-family: var(--sc-fuente-texto);
  font-weight: 600;
  font-size: 0.42em;
  color: var(--sc-verde-musgo);
  letter-spacing: 0.01em;
  margin-top: 8px;
}
h2 { font-size: clamp(1.5rem, 5vw, 2.2rem); }
h3 { font-size: clamp(1.15rem, 4vw, 1.5rem); }

p { margin: 0 0 1em; }

.container {
  max-width: var(--sc-max-ancho);
  margin: 0 auto;
  padding: 0 20px;
}

section { padding: 56px 0; }
section.alt { background: var(--sc-crema-oscuro); }
section.oscura { background: var(--sc-verde-paramo); color: var(--sc-crema); }
section.oscura h2, section.oscura h3 { color: var(--sc-crema); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--sc-verde-musgo);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: '';
  width: 14px; height: 2px;
  background: var(--sc-dorado);
  display: inline-block;
  flex-shrink: 0;
}
section.oscura .eyebrow { color: var(--sc-verde-claro); }

.lead {
  font-size: 1.08rem;
  color: var(--sc-gris);
  max-width: 62ch;
}
section.oscura .lead { color: var(--sc-crema-oscuro); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  border: 2px solid transparent;
  cursor: pointer;
  min-height: 48px;
  text-align: center;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: scale(0.98); }

.btn-primario {
  background: var(--sc-verde-musgo);
  color: var(--sc-blanco);
}
.btn-primario:hover { background: var(--sc-verde-bosque); }

.btn-secundario {
  background: transparent;
  border-color: var(--sc-verde-musgo);
  color: var(--sc-verde-paramo);
}
.btn-secundario:hover { background: rgba(63, 107, 78, 0.08); }

.btn-conservar {
  background: var(--sc-tierra);
  color: var(--sc-blanco);
}
.btn-conservar:hover { background: var(--sc-tierra-clara); }

.btn-claro {
  background: var(--sc-crema);
  color: var(--sc-verde-paramo);
}

/* Setiembre 2026: acento dorado (color de la hojita del logotipo,
   hasta ahora solo usado en detalles puntuales — ver --sc-dorado)
   para un CTA que el cliente quiere destacar del resto sin competir
   visualmente con el verde de los botones primarios. */
.btn-dorado {
  background: var(--sc-dorado);
  color: var(--sc-blanco);
}
.btn-dorado:hover { background: #9c8149; }

.btn-bloque { width: 100%; }

.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--sc-crema);
  border-bottom: 1px solid var(--sc-gris-claro);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  max-width: var(--sc-max-ancho);
  margin: 0 auto;
  gap: 12px;
}
.logo {
  font-family: var(--sc-fuente-titulo);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--sc-verde-paramo);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.logo .marca-icono {
  width: 32px;
  height: auto;
  display: inline-block;
}

.header-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-conservar-header {
  padding: 10px 18px;
  font-size: 0.88rem;
  min-height: 40px;
}

.nav-toggle {
  background: none;
  border: 2px solid var(--sc-verde-paramo);
  border-radius: var(--sc-radius-sm);
  width: 44px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--sc-verde-paramo);
  position: relative;
  transition: 0.2s;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

.nav-principal {
  position: fixed;
  inset: 0;
  top: 64px;
  background: var(--sc-crema);
  padding: 20px;
  overflow-y: auto;
  display: none;
  z-index: 99;
}
.nav-principal.abierto { display: block; }

.nav-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-lista > li {
  border-bottom: 1px solid var(--sc-gris-claro);
}
.nav-link-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--sc-verde-paramo);
}
/* Nota (Round 5 / v21): los submenús desplegables (.submenu) se
   eliminaron por completo — cada ítem del menú principal redirige de
   forma directa. Reglas removidas para no dejar CSS muerto. */

/* Setiembre 2026 (feedback directo del cliente: "el menú en computadores
   a veces se ve un poco descuadrado"): reproducido con Playwright — entre
   900px y ~1160px de ancho de ventana, el contenedor del header no
   alcanza a darle a los 5 ítems del menú el espacio que necesitan en una
   sola línea (el contenedor real solo llega a max-width:1180px, ver
   --sc-max-ancho), así que el navegador partía en 2 líneas algunos
   labels más largos ("Caminatas Ecológicas", "Eventos Deportivos",
   "Ayúdanos a Conservar", "Agencias Aliadas") mientras "Corporativos"
   (más corto) se quedaba en 1 sola línea — el resultado se veía
   desalineado/desigual. Antes el menú horizontal aparecía desde 900px;
   ahora aparece desde 1180px (el mismo max-width del contenedor), así
   que ese rango intermedio usa el menú hamburguesa (que no tiene este
   problema, es una lista vertical) en vez de forzar el horizontal en un
   espacio insuficiente. Deliberadamente es un breakpoint propio, NO se
   tocó el "@media (min-width: 900px)" general (se usa en muchas otras
   reglas del sitio, incluidas las utilidades .solo-desktop/.solo-movil,
   que no tienen este problema y no debían cambiar). */
@media (min-width: 1180px) {
  .nav-toggle { display: none; }
  .nav-principal {
    position: static;
    display: block;
    padding: 0;
    background: transparent;
  }
  .nav-lista {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .nav-lista > li {
    border-bottom: none;
    position: relative;
  }
  .nav-link-top {
    padding: 10px 12px;
    font-size: 0.96rem;
    white-space: nowrap;
  }
}

/* ---------- Hero — video de fondo inmersivo a pantalla completa ---------- */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
  background: var(--sc-verde-paramo); /* color de respaldo mientras carga el video / si falla */
}
@media (min-width: 700px) {
  .hero { min-height: 100vh; }
}

.hero-video-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% center; /* prioriza la zona derecha del video (nubes en movimiento) */
  z-index: 0;
  will-change: transform;
}

/* Superposición: oscura a la izquierda (donde va el texto) y se aclara
   hacia la derecha para no tapar el paisaje. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(10, 20, 14, 0.62) 0%,
    rgba(10, 20, 14, 0.46) 38%,
    rgba(10, 20, 14, 0.18) 68%,
    rgba(10, 20, 14, 0) 88%
  );
}

.hero-inner {
  position: relative;
  z-index: 2;
  /* Nota: .hero-inner también lleva la clase .container (que ya pone
     20px de padding horizontal) — se repite aquí explícitamente para
     no depender de la cascada, y para dejar un mínimo de 16px seguro
     en pantallas angostas. */
  padding: 90px 20px;
}
.hero-texto { max-width: 640px; }

/* Texto claro sobre el video/overlay oscuro (mismo patrón que section.oscura) */
.hero-texto .eyebrow { color: var(--sc-verde-claro); }
.hero-texto h1, .hero-texto .h1-marca { color: var(--sc-blanco); }
.hero-texto .h1-sub { color: var(--sc-crema-oscuro); }
.hero-texto .lead { margin: 14px 0 8px; font-size: 1.15rem; color: var(--sc-crema); font-weight: 600; }
.hero-texto p { color: var(--sc-crema-oscuro); }
.hero-texto .btn-secundario { border-color: var(--sc-blanco); color: var(--sc-blanco); }
.hero-texto .btn-secundario:hover { background: rgba(255, 255, 255, 0.14); }

@media (prefers-reduced-motion: reduce) {
  .hero-video-fondo { display: none; }
  .hero { background: center / cover no-repeat url("../assets/img/hero-paramo-poster.jpg"); }
}

/* ---------- Placeholder de imagen (sin material de stock) ---------- */
.placeholder-img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--sc-verde-bosque), var(--sc-verde-paramo));
  color: var(--sc-crema);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.8rem;
  padding: 14px;
  border-radius: inherit;
}
.placeholder-img.tierra { background: linear-gradient(160deg, var(--sc-tierra-clara), var(--sc-tierra)); }
.placeholder-img.agua { background: linear-gradient(160deg, #4a9aa1, var(--sc-agua)); }

/* ---------- Tarjetas ---------- */
.grid-tarjetas {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-top: 28px;
}
@media (min-width: 620px) {
  .grid-tarjetas.cols-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 860px) {
  .grid-tarjetas.cols-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .grid-tarjetas.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-tarjetas.cols-6 { grid-template-columns: repeat(3, 1fr); }
}

/* v21 (Ronda 5, punto 4.B): reemplaza el style="grid-template-columns:
   1.1fr .9fr" en línea que tenían las fichas individuales de eventos
   deportivos (content_eventos_fichas.py). Un estilo inline SIEMPRE
   gana sobre cualquier regla externa por media query, así que el
   layout de 2 columnas nunca podía apilarse en móvil — la imagen se
   achicaba en exceso y el texto quedaba desalineado (bug reportado).
   Con una clase normal, la regla de abajo (móvil, apilado) aplica por
   defecto y la de 2 columnas solo entra desde 900px en adelante. */
.grid-ficha-evento {
  align-items: start;
}
@media (min-width: 900px) {
  .grid-ficha-evento { grid-template-columns: 1.1fr .9fr; }
}

/* =========================================================
   TARJETAS — "Opción 2: Modern Minimalist High Impact"
   (prompt-maestro, ronda 4 de agosto de 2026, punto 1 — reemplaza el
   glassmorphism de la ronda anterior). Fondo blanco puro, borde
   continuo verde bosque, sombra suave que aparece al hover (no antes:
   el reposo queda "plano" a propósito, de alto contraste). Se
   mantiene el mismo --sc-radius y la misma estructura
   (.tarjeta-media / .tarjeta-cuerpo) para no romper ningún layout
   existente — solo cambia la superficie visual.
   ========================================================= */
.tarjeta {
  background: var(--sc-blanco);
  border-radius: var(--sc-radius);
  overflow: hidden;
  box-shadow: none;
  border: 1.5px solid var(--sc-verde-bosque);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.tarjeta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
/* v21 (Ronda 5, punto 3): tarjetas con destino de ficha (data-tarjeta-href,
   ver js/main.js) se ven clicables en toda su superficie — el cursor es
   la única señal visual nueva; los botones/enlaces internos conservan su
   propio estilo y siguen funcionando de forma independiente. */
.tarjeta[data-tarjeta-href] { cursor: pointer; }
.tarjeta-media { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.tarjeta-cuerpo { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.tarjeta-cuerpo h3 { margin-bottom: 8px; color: var(--op2-titulo); font-weight: 700; font-size: 1.15rem; }
.tarjeta-cuerpo p { color: var(--op2-texto); font-size: 0.95rem; flex: 1; }

/* Badges flotantes de datos técnicos (distancia / altimetría /
   dificultad) sobre la esquina superior derecha de la fotografía de
   cada tarjeta de ruta — solo se muestra el dato que de verdad se
   conoce, nunca un valor inventado (ver content_rutas.py). */
.tarjeta-badges {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  z-index: 2;
}
.badge-tecnico {
  background-color: var(--op2-badge-bg);
  color: var(--op2-badge-texto);
  font-weight: 600;
  font-size: 0.72rem;
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Tarjetas más pequeñas y discretas (ej. directorio de Agencias
   Aliadas): sin foto, menos padding, para no competir visualmente
   con el contenido principal de la página. */
.tarjeta-compacta { box-shadow: none; border: 1px solid var(--sc-gris-claro); background: var(--sc-blanco); }
.tarjeta-compacta:hover { transform: none; box-shadow: none; }
.tarjeta-compacta .tarjeta-cuerpo { padding: 14px 16px; gap: 4px; }
.tarjeta-compacta .tarjeta-cuerpo h3 { margin-bottom: 2px; font-size: 1.02rem; }
.tarjeta-compacta .tarjeta-cuerpo .etiqueta-tipo { margin-bottom: 4px; }
.tarjeta-compacta .tarjeta-cuerpo a.campo-ayuda { color: var(--sc-verde-bosque); word-break: break-word; }

/* Contenedor de scroll horizontal para tablas anchas en pantallas
   pequeñas, sin que se desborden ni rompan el layout de la página. */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tarjeta-precio {
  font-weight: 800;
  color: var(--op2-precio);
  margin: 4px 0 14px;
  font-size: 1.3rem;
}
.etiqueta {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--sc-crema-oscuro);
  color: var(--sc-verde-bosque);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  width: fit-content;
}

/* ---------- Destacado próxima caminata ---------- */
/* Ronda 4 de agosto de 2026 (prompt-maestro, punto 1, Opción 2 — Modern
   Minimalist High Impact): se retira el glassmorphism de v19 (blur +
   transparencia) para que este bloque combine con el nuevo sistema de
   tarjetas — fondo blanco sólido, borde verde bosque de 1.5px, sombra
   suave solo al pasar el mouse. */
.destacado-proximo {
  background: var(--sc-blanco);
  border: 1.5px solid var(--sc-verde-bosque);
  border-radius: var(--sc-radius);
  box-shadow: none;
  margin-top: 26px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.destacado-proximo:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
@media (min-width: 700px) {
  .destacado-proximo { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
/* v25 (Ronda 7, punto 4): las tarjetas de Entrenamiento y Cronoescalada
   ahora combinan "tarjeta" + "destacado-proximo" para ser 100% cliqueables
   (ver data-tarjeta-href en js/main.js), igual que Trail Running. .tarjeta
   trae overflow:hidden — justo lo que un comentario más arriba de este
   mismo archivo explica que se quitó deliberadamente de .destacado-proximo
   para que el botón nunca quede recortado cuando el texto es más alto que
   la imagen. Se vuelve a anular aquí para esta combinación específica. */
.destacado-proximo.tarjeta { overflow: visible; }
/* Antes: overflow:hidden en .destacado-proximo cortaba el botón cuando el
   texto era más alto que la imagen (la fila del grid tomaba la altura de
   la columna de imagen, con align-items:stretch por defecto). Se quita el
   overflow:hidden del contenedor y se redondean las esquinas directamente
   en la imagen, para que nunca recorte contenido sin importar cuánto texto
   tenga la tarjeta. */
.destacado-proximo .tarjeta-media {
  aspect-ratio: 16/10;
  border-radius: var(--sc-radius) var(--sc-radius) 0 0;
}
@media (min-width: 700px) {
  .destacado-proximo .tarjeta-media { border-radius: var(--sc-radius) 0 0 var(--sc-radius); }
}
.destacado-cuerpo { padding: 26px; }

.aviso-pendiente {
  background: var(--sc-blanco);
  border: 2px dashed var(--sc-verde-claro);
  border-radius: var(--sc-radius);
  padding: 28px;
  margin-top: 26px;
  text-align: center;
}
.aviso-pendiente p { color: var(--sc-gris); margin-bottom: 18px; }

/* ---------- Ciclo (3 pasos) ---------- */
.ciclo {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  margin: 30px 0;
  counter-reset: paso;
}
@media (min-width: 760px) { .ciclo { grid-template-columns: repeat(3, 1fr); } }
.ciclo-paso {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--sc-radius);
  padding: 22px;
  position: relative;
}
.ciclo-paso::before {
  counter-increment: paso;
  content: counter(paso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--sc-verde-claro);
  color: var(--sc-verde-paramo);
  font-weight: 700;
  margin-bottom: 12px;
}

.lista-recursos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 20px 0 0;
  list-style: none;
}
.lista-recursos li {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
}

/* ---------- Bloques territorio ---------- */
.bloques-territorio {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-top: 28px;
}
@media (min-width: 760px) { .bloques-territorio { grid-template-columns: repeat(3, 1fr); } }
.bloque-territorio { background: var(--sc-blanco); border-radius: var(--sc-radius); overflow: hidden; box-shadow: var(--sc-sombra); }
.bloque-territorio .tarjeta-media { aspect-ratio: 4/3; overflow: hidden; }
.bloque-territorio .tarjeta-cuerpo p { color: var(--sc-gris); }

/* ---------- Cierre ---------- */
.cierre {
  position: relative;
  text-align: center;
  padding: 84px 0;
  background:
    linear-gradient(180deg, rgba(10, 20, 14, 0.72), rgba(10, 20, 14, 0.72)),
    center / cover no-repeat url("../assets/img/cierre-fondo.jpg");
  color: var(--sc-crema);
  overflow: hidden;
}
.cierre h2 { color: var(--sc-blanco); }
.cierre .grupo-botones { justify-content: center; position: relative; z-index: 1; }

/* ---------- Banner de páramo (cabecera de páginas internas) ----------
   Reutiliza la fotografía real del páramo como fondo estilizado con
   overlay oscuro, para reforzar la identidad gráfica del ecosistema en
   Eventos, Ayúdanos a Conservar, Caminatas y Agencias en vez de una
   cabecera plana de texto sobre fondo blanco. */
.banner-paramo {
  position: relative;
  padding: 56px 0 44px;
  background:
    linear-gradient(180deg, rgba(10, 20, 14, 0.68), rgba(10, 20, 14, 0.78)),
    center / cover no-repeat url("../assets/img/banner-paramo.jpg");
  color: var(--sc-crema);
}
.banner-paramo .migas, .banner-paramo .migas a { color: var(--sc-crema-oscuro); }
.banner-paramo .eyebrow { color: var(--sc-verde-claro); }
.banner-paramo h1 { color: var(--sc-blanco); }
.banner-paramo .lead { color: var(--sc-crema); }
.banner-paramo p:not(.lead):not(.migas) { color: var(--sc-crema-oscuro); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--sc-negro);
  color: var(--sc-crema-oscuro);
  padding: 48px 0 24px;
}
.footer-marca { margin-bottom: 30px; }
.footer-marca .logo-footer { font-family: var(--sc-fuente-titulo); font-size: 1.3rem; color: var(--sc-blanco); display: flex; align-items: center; gap: 10px; }
.footer-marca .logo-footer img { width: 34px; height: auto; }
.footer-col a.enlace-contacto { display: flex; align-items: center; gap: 6px; }
.footer-marca p { color: #b9b6a9; margin-top: 6px; max-width: 40ch; }
.footer-columnas {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 700px) {
  .footer-columnas { grid-template-columns: repeat(5, 1fr); }
}
.footer-col h4 {
  color: var(--sc-verde-claro);
  font-family: var(--sc-fuente-texto);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: #cfccc0; font-size: 0.92rem; }
.footer-col a:hover { color: var(--sc-blanco); }
.footer-nota {
  color: #7c7a70;
  font-size: 0.78rem;
}
.footer-bottom {
  border-top: 1px solid #3a3a34;
  margin-top: 40px;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
  color: #8a877c;
  font-size: 0.8rem;
}

/* ---------- Breadcrumb / migas ---------- */
.migas {
  font-size: 0.85rem;
  color: var(--sc-gris);
  padding: 16px 0 0;
}
.migas a { color: var(--sc-verde-bosque); }

/* ---------- Fichas de bono ---------- */
.ficha-bono { padding-top: 30px; }
.ficha-header { margin-bottom: 20px; }
.ficha-precio-caja {
  background: var(--sc-blanco);
  border: 1px solid var(--sc-gris-claro);
  border-radius: var(--sc-radius);
  padding: 22px;
  box-shadow: var(--sc-sombra);
  margin: 22px 0;
}
.ficha-precio {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--sc-verde-bosque);
  font-family: var(--sc-fuente-titulo);
}
.ficha-precio small { display: block; font-size: 0.7rem; font-weight: 400; color: var(--sc-gris); font-family: var(--sc-fuente-texto); text-transform: uppercase; letter-spacing: 0.08em; }

/* Resumen visual arriba de la ficha del bono (setiembre 2026, ronda 3):
   chips de categoría/georreferenciación + botón real al mapa territorial
   — pedido explícito del cliente de que cada dato se vea "más visual" y
   de que el botón al mapa esté también arriba, no solo antes de comprar
   (ver content_bonos._resumen_bono). */
.resumen-bono {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.chip-dato-bono {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sc-crema);
  border: 1px solid var(--sc-crema-oscuro);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sc-verde-bosque);
}
.chip-dato-bono .icono { font-size: 1rem; line-height: 1; }
.btn-territorio { width: auto; padding-left: 20px; padding-right: 20px; }

/* Tarjetas con icono para "Qué recibe" / "Qué ocurre" (ronda 3: más
   visual que dos bloques de solo texto, mismo espíritu que .datos-ruta). */
.grid-explicacion {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 22px 0;
}
@media (min-width: 640px) {
  .grid-explicacion { grid-template-columns: 1fr 1fr; }
}
.tarjeta-explicacion {
  background: var(--sc-crema);
  border-radius: var(--sc-radius);
  padding: 18px 20px;
}
.tarjeta-explicacion .icono { font-size: 1.6rem; display: block; margin-bottom: 8px; }
.tarjeta-explicacion h3 { margin: 0 0 8px; font-size: 1rem; color: var(--sc-verde-bosque); }
.tarjeta-explicacion p { margin: 0; font-size: 0.92rem; color: var(--sc-gris); }

/* Botón compacto hacia el mapa territorial, en la tarjeta del catálogo
   (Tienda) — pareja del botón grande de la ficha (.btn-territorio), pero
   pensado para no competir en peso visual con el CTA de compra. */
.btn-chip-territorio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--sc-crema-oscuro);
  background: var(--sc-crema);
  color: var(--sc-verde-bosque);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}
.btn-chip-territorio:hover { background: var(--sc-crema-oscuro); }

/* Tarjetas de especie (setiembre 2026) — fila horizontal con scroll,
   icono ilustrativo sobre degradado + nombre superpuesto abajo con un
   scrim oscuro (referencia visual que compartió el cliente: una serie
   de tarjetas de fauna con foto + nombre al pie). Sin fotografía real
   todavía de estas especies — el icono + degradado deja claro que es
   ilustrativo, con una nota explícita al pie de cada fila (ver
   content_bonos._fila_especies). */
.fila-especies {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  margin: 16px 0 4px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.tarjeta-especie {
  flex: 0 0 148px;
  height: 188px;
  position: relative;
  border-radius: var(--sc-radius);
  overflow: hidden;
  box-shadow: var(--sc-sombra);
  scroll-snap-align: start;
}
.tarjeta-especie .especie-media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  background: linear-gradient(135deg, var(--sc-verde-musgo), var(--sc-verde-bosque));
}
.tarjeta-especie .especie-media .icono { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); }
.tarjeta-especie .especie-riesgo {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #c0392b;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}
.tarjeta-especie .especie-scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 10px 10px;
  background: linear-gradient(to top, rgba(15,30,20,0.9), rgba(15,30,20,0));
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tarjeta-especie .especie-nombre { color: #fff; font-weight: 700; font-size: 0.82rem; line-height: 1.2; }
.tarjeta-especie .especie-cientifico { color: rgba(255,255,255,0.85); font-style: italic; font-size: 0.66rem; }
.tarjeta-especie .especie-nota { color: rgba(255,255,255,0.75); font-size: 0.62rem; }
.especies-nota-pie { margin-top: 4px; }

/* Formulario de personalización de Bonos de Homenaje (prompt maestro,
   punto 30) — tono "memoria + naturaleza + permanencia", elegante sin
   ser infantil: misma tarjeta crema que ya usa el resto del sitio para
   contenido emotivo (ver .ficha-precio-caja), no un formulario genérico
   gris. */
.formulario-homenaje {
  background: #f6f2ea;
  border: 1px solid #e4e0d4;
  border-radius: var(--sc-radius);
  padding: 22px;
  margin: 22px 0;
}
.formulario-homenaje textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1.5px solid var(--sc-gris-claro);
  border-radius: var(--sc-radius-sm);
  resize: vertical;
}
.campo-grupo-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 560px) {
  .campo-grupo-2 { grid-template-columns: 1fr; }
}

.tabla-simple { width: 100%; border-collapse: collapse; margin: 18px 0; }
.tabla-simple th, .tabla-simple td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--sc-gris-claro); font-size: 0.94rem; }
.tabla-simple th { color: var(--sc-verde-paramo); }

.lista-check { list-style: none; margin: 0 0 20px; padding: 0; }
.lista-check li { padding: 8px 0 8px 28px; position: relative; color: var(--sc-gris); }
.lista-check li::before { content: '✓'; position: absolute; left: 0; color: var(--sc-verde-musgo); font-weight: 700; }

.nota-caja {
  background: var(--sc-crema-oscuro);
  border-left: 4px solid var(--sc-tierra-clara);
  padding: 14px 18px;
  border-radius: var(--sc-radius-sm);
  font-size: 0.9rem;
  color: var(--sc-gris);
  margin: 20px 0;
}

.futuras-funciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}
.chip-futura {
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px dashed var(--sc-gris);
  color: var(--sc-gris);
}

/* ---------- Calculadora ---------- */
.calc-caja {
  background: var(--sc-blanco);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-sombra);
  padding: 26px;
  margin: 26px 0;
}
.calc-pasos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.calc-paso-tag {
  font-size: 0.78rem;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--sc-crema-oscuro);
  color: var(--sc-verde-bosque);
  font-weight: 700;
}
.calc-paso-tag.activo { background: var(--sc-verde-musgo); color: var(--sc-blanco); }

.campo { margin-bottom: 18px; }
.campo label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 0.92rem; color: var(--sc-verde-paramo); }
.campo select, .campo input[type=number], .campo input[type=text], .campo input[type=email], .campo input[type=tel], .campo textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--sc-radius-sm);
  border: 1.5px solid var(--sc-gris-claro);
  font-size: 1rem;
  font-family: inherit;
  background: var(--sc-crema);
}
.campo select:focus, .campo input:focus, .campo textarea:focus { outline: 2px solid var(--sc-verde-musgo); border-color: var(--sc-verde-musgo); }
.campo-ayuda { font-size: 0.82rem; color: var(--sc-gris); margin-top: 6px; }

.resultado-calc {
  background: var(--sc-crema-oscuro);
  border-radius: var(--sc-radius-sm);
  padding: 18px;
  margin-top: 20px;
  display: none;
}
.resultado-calc.visible { display: block; }
.resultado-calc .valor { font-size: 1.4rem; font-weight: 700; color: var(--sc-verde-bosque); }

/* ---------- Checkout ---------- */
.checkout-grid { display: grid; gap: 30px; grid-template-columns: 1fr; margin-top: 20px; }
@media (min-width: 860px) { .checkout-grid { grid-template-columns: 1.4fr 1fr; } }
.resumen-caja {
  background: var(--sc-blanco);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-sombra);
  padding: 22px;
}
.resumen-linea { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--sc-gris-claro); font-size: 0.94rem; }
.resumen-linea.total { font-weight: 700; font-size: 1.1rem; border-bottom: none; color: var(--sc-verde-bosque); }

/* ---------- Sidebar flotante de checkout (resumen + bonos rápidos) ----------
   Ronda de ajustes post-Fase 3 (setiembre 2026): el cliente pidió que el
   resumen y el bloque de "bonos rápidos" fueran flotantes sin tapar el
   botón de pago. Este <aside> agrupa ambos bloques como UNA sola unidad
   que se vuelve sticky en desktop — nunca se superpone al botón de pago
   porque vive en la columna derecha del grid, mientras que el botón está
   dentro del <form> de la columna izquierda (ver .checkout-grid y
   content_checkout.py). En móvil (1 sola columna) sigue el flujo normal,
   sin position:sticky, para no arriesgar que algo fijo tape contenido en
   una pantalla angosta. */
.checkout-sidebar-flotante {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 860px) {
  .checkout-sidebar-flotante {
    position: sticky;
    top: 84px;
    align-self: start;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
  }
}

.campo-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: var(--sc-gris); }
.campo-checkbox input { margin-top: 4px; }

/* ---------- Carrito de compras (header + página de checkout) ---------- */
.carrito-icono-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--sc-verde-paramo);
  text-decoration: none;
  padding: 9px 12px;
  border: 2px solid var(--sc-verde-paramo);
  border-radius: var(--sc-radius-sm);
  min-height: 40px;
}
.carrito-icono-link:hover { background: var(--sc-verde-paramo); color: #fff; }
.carrito-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--sc-verde-musgo);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

.carrito-bloque { margin-bottom: 32px; }

/* Bloque "¿Quieres aportar un poco más a la conservación?" (checkout,
   rediseño setiembre 2026, punto 8 del brief) — jerarquía visual
   reducida a propósito respecto al resto del checkout: sin caja blanca
   con sombra, título h3 en vez de h2, fondo apenas distinguido del
   fondo de la página. */
.bloque-bonos-discreto {
  background: var(--sc-crema);
  border-radius: var(--sc-radius);
  padding: 18px 20px;
}
.bloque-bonos-discreto h3 { font-size: 1.02rem; margin-top: 0; }

/* Módulo "agregar rápido" de bonos (checkout) — cards más discretas
   (rediseño setiembre 2026): menos padding, sin sombra flotante ni
   elevación al pasar el mouse, para que no compitan visualmente con el
   carrito ni con el método de pago. */
.quick-add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.quick-add-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--sc-gris-claro);
  border-radius: var(--sc-radius-sm);
  background: var(--sc-blanco);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  font: inherit;
}
.quick-add-item:hover {
  border-color: var(--sc-verde-bosque);
  background: var(--sc-crema-oscuro);
}
.quick-add-icono { font-size: 1.15rem; flex-shrink: 0; opacity: 0.85; }
.quick-add-texto { display: flex; flex-direction: column; gap: 2px; }
.quick-add-texto strong { font-size: 0.86rem; }
.quick-add-texto span { font-size: 0.78rem; color: var(--sc-gris); }
.carrito-lista { list-style: none; margin: 14px 0 0; padding: 0; }
.carrito-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sc-gris-claro);
  font-size: 0.92rem;
}
.carrito-item-info strong { display: block; color: var(--sc-negro); }
.carrito-item-info span { display: block; font-size: 0.82rem; color: var(--sc-gris); margin-top: 2px; }
.carrito-item-derecha { text-align: right; flex-shrink: 0; }
.carrito-item-monto { display: block; font-weight: 700; color: var(--sc-verde-bosque); }
.carrito-item-quitar {
  background: none;
  border: none;
  color: var(--sc-gris);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0 0;
}
.carrito-item-quitar:hover { color: #b23b3b; }
.carrito-total-linea {
  display: flex;
  justify-content: space-between;
  padding: 14px 0 0;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--sc-verde-bosque);
}
/* Segunda cifra "A pagar el día del recorrido" (prompt maestro set-2026):
   deliberadamente MÁS discreta que el total de arriba (menor tamaño,
   color ámbar en vez de verde) para que nunca se confunda visualmente
   con "lo que se cobra ahora" — es justo la distinción que el cliente
   pidió mantener siempre clara. */
.carrito-total-linea-guia, .resumen-linea-guia {
  font-weight: 600;
  font-size: 0.85rem;
  color: #7a5a12;
  padding-top: 6px;
  border-bottom: none;
}
.resumen-linea-guia { display: flex; justify-content: space-between; }
.carrito-mensaje-error {
  background: #fdecea;
  border: 1px solid #f5c2c0;
  color: #8a1f1f;
  padding: 12px 14px;
  border-radius: var(--sc-radius-sm);
  font-size: 0.9rem;
  margin-top: 14px;
}

/* Badge de modalidad por ítem del carrito (rediseño setiembre 2026,
   punto 5): Grupo Abierto = reserva individual; Recorrido Exclusivo =
   una sola reserva para todo el grupo. Debe mantenerse visible durante
   todo el checkout, por eso va junto al nombre del ítem, no escondido
   en el detalle. */
.badge-modalidad-item {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin: 4px 0 2px;
}
.badge-individual { background: var(--op2-badge-bg); color: var(--op2-badge-texto); }
.badge-exclusivo { background: var(--sc-crema-oscuro); color: var(--sc-verde-bosque); }

/* Tag "Guía: ..." dentro de cada tarjeta/opción de modalidad (prompt
   maestro set-2026): regla de oro del proyecto — el costo del guía
   siempre visible, pero NUNCA mezclado con lo que se cobra ahora.
   Reutiliza el mismo patrón visual de badge-modalidad-item para no
   introducir un componente nuevo. tag-guia-efectivo = Grupo Abierto
   (pago presencial, no incluido en este pago); tag-guia-incluido =
   Privada (sí incluido, por adelantado, en un solo pago). */
.tag-guia-pago {
  display: block;
  width: fit-content;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 6px 0 8px;
  letter-spacing: 0.01em;
}
.tag-guia-efectivo { background: #f2ead2; color: #7a5a12; }
.tag-guia-incluido { background: #e4efe7; color: var(--sc-verde-bosque); }

/* Caja de explicación del guía debajo del carrito (#carrito-nota-guia,
   ver js/carrito.js actualizarNotaGuia()) — mismo componente .nota-caja
   de siempre, solo se agrega una variante para diferenciarla del resto
   de notas del checkout. */
.nota-guia { border-left-color: var(--sc-verde-bosque); }

/* Caja Bre-B en 3 pasos (rediseño setiembre 2026, punto 11). */
.nota-breb { text-align: center; }
.breb-paso-titulo { margin: 0 0 4px; font-weight: 700; font-size: 1.05rem; color: var(--sc-verde-bosque); }
.breb-paso { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; color: var(--sc-verde-paramo); margin: 0 0 10px; }
.breb-paso-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--sc-verde-musgo);
  color: var(--sc-blanco);
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* Resumen de la reserva en la página de confirmación (rediseño
   setiembre 2026, punto 14) — leído desde el snapshot que carrito.js
   guarda en sessionStorage, ver mostrarResumenReserva(). Reutiliza
   .resumen-caja como base visual (misma tarjeta blanca con sombra que
   ya usa el sidebar del checkout) para sentirse parte del mismo
   sistema, no un componente nuevo. */
.resumen-reserva-confirmacion {
  background: var(--sc-blanco);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-sombra);
  padding: 22px;
  margin-top: 26px;
  text-align: left;
}
.resumen-reserva-lista { list-style: none; margin: 10px 0 0; padding: 0; }
.resumen-reserva-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--sc-gris-claro);
  font-size: 0.9rem;
}
.resumen-reserva-item strong { display: block; color: var(--sc-negro); }
.resumen-reserva-item span { display: block; font-size: 0.8rem; color: var(--sc-gris); margin-top: 2px; }
.resumen-reserva-monto { font-weight: 700; color: var(--sc-verde-bosque); white-space: nowrap; }
.resumen-reserva-total {
  display: flex;
  justify-content: space-between;
  padding: 14px 0 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--sc-verde-bosque);
}

/* "IMPORTANTE: COSTO DEL GUÍA" en la confirmación (prompt maestro
   set-2026) — deliberadamente en tono de alerta (ámbar), separado por
   completo de la caja verde de "Tu reserva" de arriba, para que jamás
   se confunda con lo que ya se pagó. Mismo criterio de "nunca sumar" ya
   aplicado en el checkout (.carrito-total-linea-guia). */
.bloque-guia-confirmacion {
  background: #fdf3e2;
  border: 1.5px solid #f0d9a0;
  border-radius: var(--sc-radius);
  padding: 18px 22px;
  margin-top: 18px;
  text-align: left;
}
.bloque-guia-titulo { margin: 0 0 6px; font-weight: 700; color: #7a5a12; font-size: 1rem; }
.bloque-guia-texto { margin: 0 0 10px; color: #5c460e; font-size: 0.9rem; line-height: 1.5; }
.bloque-guia-monto { margin: 0; color: #5c460e; font-size: 0.95rem; }
.bloque-guia-monto strong { color: #7a5a12; font-size: 1.1rem; }

/* Caja de "Registrar asistentes" (ronda de ajustes de septiembre 2026,
   tras revisión del cliente: "se pierde un poco" con el estilo de nota
   secundaria de antes) — mismo componente .nota-caja en espíritu, pero
   con fondo e ícono propios y un botón PRIMARIO (no secundario) para
   que sea la acción más visible de toda la pantalla de confirmación,
   justo después del resumen de la reserva. */
.caja-asistentes-destacada {
  background: var(--op2-badge-bg);
  border: 1px solid var(--sc-verde-claro);
  border-radius: var(--sc-radius);
  padding: 22px;
  margin-top: 22px;
  text-align: center;
}
.caja-asistentes-titulo { margin: 0 0 6px; font-weight: 700; font-size: 1.05rem; color: var(--sc-verde-bosque); }
.caja-asistentes-texto { margin: 0; color: var(--sc-gris); }

/* Bloque de conservación de la confirmación (rediseño setiembre 2026,
   puntos 14-18; recortado en la ronda de ajustes siguiente para dejar
   aquí solo el resumen visual — el detalle de agua/biodiversidad se
   movió a un ítem de acordeón, ver BLOQUE_LOGISTICA_CONFIRMACION en
   content_checkout.py). */
.bloque-conservacion-confirmacion { margin-top: 34px; text-align: left; }
.bloque-conservacion-confirmacion h2 { font-size: 1.3rem; }
.bloque-conservacion-confirmacion h3 { font-size: 1.02rem; color: var(--sc-verde-bosque); margin: 26px 0 8px; }
.stats-conservacion-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 18px 0 26px;
}
.stats-conservacion-chips .stat-chip {
  background: var(--sc-crema);
  border-radius: var(--sc-radius-sm);
  padding: 14px 12px;
  text-align: center;
}
.stats-conservacion-chips .stat-chip strong { display: block; font-size: 1.15rem; color: var(--sc-verde-bosque); font-family: var(--sc-fuente-titulo); }
.stats-conservacion-chips .stat-chip span { display: block; font-size: 0.76rem; color: var(--sc-gris); margin-top: 4px; line-height: 1.3; }

/* Grid de especies — a propósito las 5 tarjetas (incluido el zorro de
   páramo) comparten exactamente el mismo tamaño y estilo, ninguna es
   "protagonista": instrucción explícita del cliente. */
.bio-especies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.bio-especie-card {
  background: var(--sc-blanco);
  border: 1px solid var(--sc-gris-claro);
  border-radius: var(--sc-radius-sm);
  padding: 14px 10px;
  text-align: center;
}
.bio-especie-icono { display: block; font-size: 1.6rem; margin-bottom: 6px; }
.bio-especie-card strong { display: block; font-size: 0.82rem; color: var(--sc-negro); }
.bio-especie-card span { display: block; font-size: 0.72rem; color: var(--sc-gris); margin-top: 2px; font-style: italic; }
.conservacion-cierre { text-align: center; font-style: italic; color: var(--sc-gris); margin-top: 20px; }

/* ---------- Confirmación ---------- */
.confirmacion-caja {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 60px 20px;
}
.confirmacion-icono {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--sc-verde-musgo);
  color: var(--sc-blanco);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  margin: 0 auto 20px;
}

/* ---------- Utilidades ---------- */
.texto-centro { text-align: center; }
.mt-0 { margin-top: 0; }
.solo-desktop { display: none; }
@media (min-width: 900px) { .solo-desktop { display: initial; } .solo-movil { display: none; } }

.franja-info {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 24px;
}
@media (min-width: 700px) { .franja-info { grid-template-columns: repeat(3, 1fr); } }
.franja-info-item {
  background: var(--sc-blanco);
  border-radius: var(--sc-radius-sm);
  padding: 18px;
  border: 1px solid var(--sc-gris-claro);
}
.franja-info-item strong { color: var(--sc-verde-paramo); display: block; margin-bottom: 4px; }

.badge-pendiente {
  display: inline-block;
  background: #f3e6d8;
  color: var(--sc-alerta);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}

/* ---------- Estadísticas rápidas (chips) ---------- */
.stats-rapidas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 6px;
}
.stats-rapidas .stat-chip {
  background: var(--sc-blanco);
  border: 1px solid var(--sc-gris-claro);
  border-radius: var(--sc-radius-sm);
  padding: 12px 18px;
  min-width: 120px;
}
.stats-rapidas .stat-chip .num {
  font-family: var(--sc-fuente-titulo);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sc-verde-bosque);
  display: block;
  line-height: 1;
}
.stats-rapidas .stat-chip .lbl {
  font-size: 0.78rem;
  color: var(--sc-gris);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Filtros de rutas ---------- */
.filtro-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0;
}
.filtro-tab {
  background: var(--sc-blanco);
  border: 1.5px solid var(--sc-gris-claro);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--sc-verde-paramo);
  cursor: pointer;
}
.filtro-tab.activo {
  background: var(--sc-verde-musgo);
  border-color: var(--sc-verde-musgo);
  color: var(--sc-blanco);
}

/* ---------- Grupos de filtro (auditoría UX de agosto de 2026, punto 2):
   Dificultad / Tipo / Otros temas, cada uno con su propio título y su
   propia fila de .filtro-tabs — antes todas las etiquetas vivían en una
   sola fila sin agrupar. La lógica de combinación (AND entre grupos, OR
   dentro de cada grupo) vive en js/main.js, vía data-filtro-grupo. ---------- */
.filtro-grupo { margin-top: 18px; }
.filtro-grupo .filtro-tabs { margin: 8px 0 0; }
.filtro-grupo-titulo {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--sc-verde-bosque);
}
.filtro-tab-limpiar {
  background: transparent;
  border: 1.5px solid var(--sc-verde-bosque);
  color: var(--sc-verde-bosque);
}
.filtro-tab-limpiar.activo {
  background: var(--sc-verde-bosque);
  border-color: var(--sc-verde-bosque);
}

/* ---------- Panel de operación (admin-ordenes.html, setiembre 2026) ---------- */
.badge-estado {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.badge-estado.pendiente { background: #f2ead2; color: var(--sc-dorado); }
.badge-estado.confirmada { background: #e4efe7; color: var(--sc-verde-bosque); }
.badge-estado.rechazada { background: #f3e0e0; color: #a13a3a; }
.badge-estado.cancelada { background: #ececec; color: var(--sc-gris); }
/* pendiente_verificacion (setiembre 2026, punto 4 — pago manual Bre-B):
   distinto de "pendiente" a propósito — un pago Bre-B YA tiene
   comprobante subido y solo espera revisión humana, no espera a que
   alguien pague todavía. */
.badge-estado.pendiente_verificacion { background: #fdf3e2; color: #7a5a12; }
.badge-estado.vencida { background: #f3e0e0; color: #a13a3a; }

.barra-capacidad {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--sc-gris-claro);
  overflow: hidden;
  margin-top: 6px;
}
.barra-capacidad-relleno {
  height: 100%;
  border-radius: 999px;
  background: var(--sc-verde-bosque);
}
.barra-capacidad-relleno.lleno { background: var(--sc-alerta); }

.admin-orden-tarjeta {
  border: 1px solid var(--sc-gris-claro);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 14px;
  background: var(--sc-blanco);
}
.admin-orden-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.admin-orden-item-linea {
  padding: 8px 0;
  border-top: 1px solid var(--sc-gris-claro);
  font-size: 0.92rem;
}
.admin-orden-item-linea:first-child { border-top: none; }
.admin-punto-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e4efe7;
  color: var(--sc-verde-bosque);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.8rem;
  margin: 3px 6px 3px 0;
}
.admin-punto-chip button {
  background: none;
  border: none;
  color: #a13a3a;
  cursor: pointer;
  font-weight: 700;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
}

/* ---------- Drawer de filtros (v25, Ronda 7, punto 2) ----------
   El bloque de filtros de /caminatas pasa de estar embebido arriba del
   catálogo (empujaba las 35 tarjetas hacia abajo) a un panel lateral
   (drawer) que se abre sobre la página sin mover nada del contenido de
   atrás — pedido explícito del cliente ("sin desplazar el catálogo").
   Estilo glassmorphism con la paleta clara del sitio (crema translúcido
   + blur) en vez de un tinte oscuro, para que los .filtro-tab/.filtro-
   grupo-titulo existentes (pensados para fondo claro) sean legibles sin
   tener que reescribirles el color — mismo criterio ya usado en el
   banner de cookies. */
.btn-filtrar-rutas {
  position: sticky;
  top: 72px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sc-verde-bosque);
  color: var(--sc-blanco);
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(10, 20, 14, 0.22);
}
.btn-filtrar-rutas:hover { background: var(--sc-verde-musgo); }
.badge-filtros-activos {
  background: var(--sc-blanco);
  color: var(--sc-verde-bosque);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 1px 8px;
  line-height: 1.5;
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 14, 0.45);
  /* v25: encontrado en la verificación de este mismo punto — con
     z-index más bajo que el banner sticky de reserva (.banner-sticky-
     movil, 9999, ver más abajo), el botón "Ver resultados" del drawer
     quedaba tapado por ese banner cuando el contenido del panel llega
     hasta el fondo de la pantalla. Un panel que la persona abrió a
     propósito debe quedar SIEMPRE por encima de la interfaz fija de la
     página (banners sticky, botones flotantes, cookies) — igual que
     cualquier modal. */
  z-index: 10000;
  display: none;
}
.drawer-overlay.abierto { display: block; }
.drawer-filtros {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 88vw);
  background: rgba(246, 242, 234, 0.9);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-left: 1.5px solid var(--sc-verde-bosque);
  box-shadow: -10px 0 30px rgba(10, 20, 14, 0.3);
  padding: 22px 22px 28px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.28s ease;
}
/* Navegadores sin soporte de backdrop-filter reciben el fondo crema
   igual, un poco más opaco, sin el desenfoque — sigue siendo legible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .drawer-filtros { background: rgba(246, 242, 234, 0.98); }
}
.drawer-overlay.abierto .drawer-filtros { transform: translateX(0); }
.drawer-filtros-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.drawer-filtros .modal-cerrar {
  position: static;
  flex: 0 0 auto;
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--sc-verde-bosque);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

/* ---------- Etiquetas de tipo de sendero ---------- */
.etiqueta-tipo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 9px;
  border-radius: 999px;
  margin-right: 6px;
}
.etiqueta-tipo.autonomo { background: #e4efe7; color: var(--sc-verde-bosque); }
.etiqueta-tipo.guiado { background: #eee7d8; color: var(--sc-tierra); }
.etiqueta-tipo.colegio { background: #dcebee; color: var(--sc-agua); }
.etiqueta-tipo.trail { background: #eaf3d9; color: var(--sc-verde-oliva-oscuro); }
.etiqueta-tipo.crono { background: #f2ead2; color: var(--sc-dorado); }
.etiqueta-tipo.corporativo { background: #dcebee; color: var(--sc-agua); }
.etiqueta-tipo.amenaza { background: #f3e6d8; color: var(--sc-alerta); }
.etiqueta-tipo.restauracion { background: #eaf3d9; color: var(--sc-verde-oliva-oscuro); }
.etiqueta-tipo.bono { background: #f2ead2; color: var(--sc-dorado); }
.etiqueta-tipo.agencia { background: #dcebee; color: var(--sc-agua); }

/* ---------- Bloque de contexto histórico/cultural ---------- */
.bloque-historia {
  background: var(--sc-verde-bosque);
  color: #f3efe4;
  border-radius: var(--sc-radius);
  padding: 28px 26px;
  margin: 22px 0;
}
.bloque-historia h3 { color: #fff; margin-top: 0; }
.bloque-historia p { color: #dfe6dc; }
.bloque-historia p:last-child { margin-bottom: 0; }
.bloque-historia strong { color: #fff; }

/* ---------- Ficha de ruta: datos técnicos ---------- */
.datos-ruta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 24px 0;
}
@media (min-width: 640px) { .datos-ruta { grid-template-columns: repeat(4, 1fr); } }
.dato-ruta {
  background: var(--sc-blanco);
  border: 1px solid var(--sc-gris-claro);
  border-radius: var(--sc-radius-sm);
  padding: 14px;
  text-align: center;
}
.dato-ruta .num { display: block; font-family: var(--sc-fuente-titulo); font-size: 1.15rem; color: var(--sc-verde-bosque); font-weight: 700; }
.dato-ruta .lbl { font-size: 0.72rem; color: var(--sc-gris); text-transform: uppercase; letter-spacing: 0.04em; }

.galeria-ruta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 22px 0;
}
@media (min-width: 640px) { .galeria-ruta { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; } }
.galeria-ruta .placeholder-img { border-radius: var(--sc-radius-sm); min-height: 140px; }
.galeria-ruta > div:first-child { grid-row: span 2; }

/* ---------- Disponibilidad / capacidad de carga ---------- */
.disponibilidad-caja {
  background: var(--sc-blanco);
  border: 1px solid var(--sc-gris-claro);
  border-radius: var(--sc-radius);
  padding: 20px 22px;
  margin: 22px 0;
}
.disponibilidad-barra {
  height: 10px;
  border-radius: 999px;
  background: var(--sc-gris-claro);
  overflow: hidden;
  margin: 10px 0 8px;
}
.disponibilidad-barra .relleno {
  height: 100%;
  background: var(--sc-verde-musgo);
  border-radius: 999px;
}
.disponibilidad-texto { font-size: 0.85rem; color: var(--sc-gris); display: flex; justify-content: space-between; }

/* ---------- Calculadora de reserva (guías) ---------- */
.tipo-visitante-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 18px 0 26px;
}
@media (min-width: 640px) { .tipo-visitante-tabs { grid-template-columns: repeat(3, 1fr); } }
.tipo-visitante-opcion {
  display: block;
  position: relative;
}
.tipo-visitante-opcion input { position: absolute; opacity: 0; }
.tipo-visitante-opcion .caja-opcion {
  display: block;
  border: 1.5px solid var(--sc-gris-claro);
  border-radius: var(--sc-radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  background: var(--sc-blanco);
}
.tipo-visitante-opcion .caja-opcion strong { display: block; color: var(--sc-verde-paramo); font-size: 0.96rem; margin-bottom: 3px; }
.tipo-visitante-opcion .caja-opcion span { font-size: 0.8rem; color: var(--sc-gris); }
.tipo-visitante-opcion input:checked + .caja-opcion {
  border-color: var(--sc-verde-musgo);
  background: var(--sc-crema-oscuro);
  box-shadow: 0 0 0 2px var(--sc-verde-musgo) inset;
}

.desglose-precio { margin-top: 10px; }
.desglose-linea {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--sc-gris-claro);
  font-size: 0.92rem;
  color: var(--sc-gris);
}
.desglose-linea strong { color: var(--sc-negro); font-weight: 600; }
.desglose-linea.total {
  border-bottom: none;
  padding-top: 14px;
  font-size: 1.15rem;
}
.desglose-linea.total strong { color: var(--sc-verde-bosque); font-family: var(--sc-fuente-titulo); font-size: 1.3rem; }

.tabla-guias th, .tabla-guias td { font-size: 0.88rem; }
.tabla-guias .col-precio { text-align: right; font-weight: 700; color: var(--sc-verde-bosque); }

/* ---------- Supuestos de cálculo (details/summary, sin JS) ---------- */
.caja-supuestos {
  margin: 16px 0;
  border: 1px solid var(--sc-gris-claro);
  border-radius: var(--sc-radius-sm);
  background: var(--sc-blanco);
}
.caja-supuestos summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--sc-verde-bosque);
  list-style: none;
}
.caja-supuestos summary::-webkit-details-marker { display: none; }
.caja-supuestos summary::before { content: '+ '; }
.caja-supuestos[open] summary::before { content: '− '; }
.caja-supuestos .contenido-supuestos {
  padding: 0 16px 16px;
  font-size: 0.84rem;
  color: var(--sc-gris);
}
.caja-supuestos ul { margin: 6px 0; padding-left: 18px; }
.caja-supuestos li { margin-bottom: 4px; }

.campos-escenario { display: none; }
.campos-escenario.visible { display: block; }

/* ---------- Botón flotante de WhatsApp ---------- */
.boton-flotante-whatsapp {
  position: fixed;
  left: 20px;
  bottom: 24px;
  z-index: 500;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, background 0.15s ease;
}
.boton-flotante-whatsapp:hover { background: #1fb958; transform: scale(1.06); }

/* ---------- Botón flotante "Reservar ahora" + calendario ---------- */
.boton-flotante-reservar {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 500;
  background: var(--sc-verde-bosque);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 16px 24px;
  font-family: var(--sc-fuente-texto);
  font-weight: 700;
  font-size: 0.98rem;
  box-shadow: 0 10px 28px rgba(26,69,38,0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.boton-flotante-reservar:hover { background: var(--sc-verde-musgo); }
.boton-flotante-reservar .icono-calendario { font-size: 1.1rem; line-height: 1; }

/* ---------- Botón flotante "Registrar asistentes" (confirmación) ----------
   Ronda de ajustes de septiembre 2026, pedido explícito del cliente: el CTA
   de registrar asistentes en confirmacion.html debe ser flotante y con el
   "saltico" (igual que .boton-flotante-reservar). Reutiliza exactamente la
   posición de .boton-flotante-reservar (esquina inferior derecha): esa
   página oculta el botón de "Reservar ahora" genérico (mostrar_flotante_
   reservar=False), así que no hay conflicto de espacio. La caja informativa
   (.caja-asistentes-destacada) se queda en el flujo normal, solo con el
   título y el texto explicativo — el botón en sí se saca de ahí y se
   muestra/oculta por separado desde js/carrito.js. */
.boton-flotante-asistentes {
  display: none; /* JS lo pasa a flex cuando hay una orden con caminata */
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 500;
  background: var(--sc-verde-bosque);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 16px 24px;
  font-family: var(--sc-fuente-texto);
  font-weight: 700;
  font-size: 0.98rem;
  box-shadow: 0 10px 28px rgba(26,69,38,0.4);
  cursor: pointer;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.boton-flotante-asistentes:hover { background: var(--sc-verde-musgo); color: #fff; }

/* ---------- "Salto" de atención en los botones flotantes de reservar/comprar
   (setiembre 2026, pedido explícito del cliente) ----------
   Un doble salto corto cada pocos segundos, con una pausa larga en medio —
   no es un rebote continuo (eso cansa/distrae de más), es una llamada de
   atención puntual y repetida. Se pausa al pasar el mouse/foco (para no
   pelear con el hover) y se desactiva por completo si el visitante tiene
   activado "reducir movimiento" en su sistema (accesibilidad). Aplica a
   .boton-flotante-reservar (el botón genérico de "Reservar ahora") y a
   .banner-flotante-home-btn (el banner de 2 CTAs de Home/Agencias) — el
   botón de WhatsApp (.boton-flotante-whatsapp) queda afuera a propósito,
   no es un CTA de reservar/comprar. */
@keyframes sc-salto-atencion {
  0%, 76%, 100% { transform: translateY(0); }
  80% { transform: translateY(-9px); }
  84% { transform: translateY(0); }
  88% { transform: translateY(-5px); }
  92% { transform: translateY(0); }
}
.boton-flotante-reservar,
.boton-flotante-asistentes,
.banner-flotante-home-btn,
.banner-sticky-movil button,
.banner-sticky-movil a.banner-sticky-cta {
  animation: sc-salto-atencion 4.5s ease-in-out infinite;
}
.banner-flotante-home-btn.secundario {
  /* Delay negativo: arranca el ciclo a mitad de camino, para que los 2
     botones del banner no salten exactamente al mismo tiempo. */
  animation-delay: -2.25s;
}
.boton-flotante-reservar:hover,
.boton-flotante-reservar:focus-visible,
.boton-flotante-asistentes:hover,
.boton-flotante-asistentes:focus-visible,
.banner-flotante-home-btn:hover,
.banner-flotante-home-btn:focus-visible,
.banner-sticky-movil button:hover,
.banner-sticky-movil button:focus-visible,
.banner-sticky-movil a.banner-sticky-cta:hover,
.banner-sticky-movil a.banner-sticky-cta:focus-visible {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .boton-flotante-reservar,
  .boton-flotante-asistentes,
  .banner-flotante-home-btn,
  .banner-sticky-movil button,
  .banner-sticky-movil a.banner-sticky-cta {
    animation: none;
  }
}

.calendario-flotante {
  position: fixed;
  right: 20px;
  bottom: 92px;
  z-index: 500;
  width: 300px;
  max-width: calc(100vw - 40px);
  background: var(--sc-blanco);
  border-radius: var(--sc-radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
  padding: 18px;
  display: none;
}

/* Mobile: botones flotantes más grandes y más arriba, para que no se
   sientan pequeños ni arrinconados en la esquina de la pantalla. */
@media (max-width: 699px) {
  .boton-flotante-whatsapp { width: 58px; height: 58px; bottom: 26px; }
  .boton-flotante-reservar { padding: 17px 22px; font-size: 1rem; bottom: 26px; }
  .boton-flotante-asistentes { padding: 17px 22px; font-size: 1rem; bottom: 26px; }
  .calendario-flotante { bottom: 96px; }
}

/* Desktop: más margen respecto al borde y mayor elevación (sombra) para
   reforzar su jerarquía visual sobre el resto de la página. */
@media (min-width: 900px) {
  .boton-flotante-whatsapp { left: 32px; bottom: 32px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); }
  .boton-flotante-reservar { right: 32px; bottom: 32px; box-shadow: 0 14px 34px rgba(26,69,38,0.45); }
  .boton-flotante-asistentes { right: 32px; bottom: 32px; box-shadow: 0 14px 34px rgba(26,69,38,0.45); }
  .calendario-flotante { right: 32px; bottom: 100px; }
}

/* v21 (Ronda 5, punto 2, "Posicionamiento del botón de WhatsApp"): en
   páginas con banner sticky de ancho completo (.tiene-banner-sticky en
   <body>, ver más abajo .banner-sticky-movil), el botón de WhatsApp
   quedaba tapado y bloqueado por el banner (ambos fijos al fondo de
   pantalla, el banner con z-index más alto). Se sube el bottom lo
   suficiente para que flote POR ENCIMA del banner, sin superponerse ni
   bloquear sus clics. El z-index del botón se mantiene por debajo del
   banner (500 contra 9999): no necesita competir, solo no compartir la
   misma franja vertical. */
body.tiene-banner-sticky .boton-flotante-whatsapp { bottom: 106px; }
@media (min-width: 900px) {
  body.tiene-banner-sticky .boton-flotante-whatsapp { bottom: 118px; }
}
.calendario-flotante.abierto { display: block; }
.calendario-flotante h4 { margin: 0 0 4px; color: var(--sc-verde-bosque); font-size: 1rem; }
.calendario-flotante p.campo-ayuda { margin-bottom: 12px; }
.calendario-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.calendario-cabecera button {
  background: none;
  border: 1px solid var(--sc-gris-claro);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: var(--sc-verde-bosque);
  font-weight: 700;
}
.calendario-mes-actual { font-weight: 700; color: var(--sc-verde-paramo); font-size: 0.9rem; text-transform: capitalize; }
.calendario-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  text-align: center;
}
.calendario-grid .dia-nombre { font-size: 0.66rem; color: var(--sc-gris); text-transform: uppercase; padding-bottom: 4px; }
.calendario-grid button.dia {
  background: none;
  border: none;
  border-radius: 6px;
  padding: 7px 0;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--sc-negro);
}
.calendario-grid button.dia:hover { background: var(--sc-crema); }
.calendario-grid button.dia.seleccionado { background: var(--sc-verde-musgo); color: #fff; font-weight: 700; }
.calendario-grid span.dia-vacio { visibility: hidden; }

/* Visualizador de cupos en tiempo real (setiembre 2026, paquete de
   requerimientos, punto 3): días con cupo diario casi agotado se
   resaltan en el propio calendario, en vez de que la persona se entere
   solo al fallar el pago. ".agotado" ya viene deshabilitado por el
   propio widget (opacity 0.3 inline); el punto rojo lo distingue de un
   día simplemente pasado. ".alta-demanda" sigue siendo elegible. */
/* Setiembre 2026 (tarea #157): "verde" del semáforo — bastante cupo
   disponible (>50% libre, mismo umbral que ".alta-demanda" de abajo).
   Sutil a propósito: es el estado más común del calendario, no debe
   competir visualmente con "seleccionado" ni con los avisos de amarillo/
   rojo, que sí necesitan llamar la atención. */
.calendario-grid button.dia.disponible {
  background: #eaf3e6;
  color: var(--sc-verde-bosque);
  box-shadow: inset 0 0 0 1.5px #9fc98c;
}
.calendario-grid button.dia.disponible:hover { background: #dcedd6; }
.calendario-grid button.dia.alta-demanda {
  background: #fdf3e2;
  color: #7a5a12;
  font-weight: 700;
  box-shadow: inset 0 0 0 1.5px #d9a441;
}
.calendario-grid button.dia.alta-demanda:hover { background: #fbe8c4; }
.calendario-grid button.dia.agotado {
  background: #fdecec;
  color: #b3261e;
  text-decoration: line-through;
}
.calendario-grid button.dia.seleccionado.disponible,
.calendario-grid button.dia.seleccionado.alta-demanda { background: var(--sc-verde-musgo); color: #fff; box-shadow: none; }

.leyenda-calendario {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 0.74rem;
  color: var(--sc-gris);
  margin-top: 8px;
}
.leyenda-calendario span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda-calendario .punto { width: 9px; height: 9px; border-radius: 999px; display: inline-block; flex: 0 0 9px; }
.leyenda-calendario .punto.disponible { background: #9fc98c; }
.leyenda-calendario .punto.alta-demanda { background: #d9a441; }
.leyenda-calendario .punto.agotado { background: #b3261e; }

/* Indicador dual de capacidad (Prompt Maestro Definitivo, setiembre
   2026, PARTE IV, punto 16): al seleccionar una fecha, dos barras —
   capacidad diaria y capacidad mensual — cada una coloreada según el
   mismo semáforo de 3 niveles que backend/api/disponibilidad.js
   calcula (verde >50% disponible, amarillo 1-50%, rojo 0%). max-width
   100% y flex-column: nunca se desborda en móvil. */
/* Nombres deliberadamente distintos de .barra-capacidad/.barra-capacidad-relleno
   (admin-ordenes.html, más arriba en este archivo) — misma idea visual,
   pero esta versión tiene una estructura distinta (etiqueta + pista +
   relleno, con modificador de color de semáforo) y no debe heredar ni
   pisar ninguna propiedad de esa otra barra. */
.indicador-capacidad-dual { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; max-width: 100%; }
.indicador-capacidad-dual .barra-capacidad-dual { max-width: 100%; }
.barra-capacidad-dual-etiqueta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.74rem;
  color: var(--sc-gris);
  margin-bottom: 3px;
}
.barra-capacidad-dual-pista {
  width: 100%;
  max-width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--sc-gris-claro);
  overflow: hidden;
}
.barra-capacidad-dual-relleno {
  height: 100%;
  border-radius: 999px;
  background: var(--sc-verde-bosque); /* verde por defecto */
  transition: width 0.2s ease;
}
.barra-capacidad-dual-relleno.semaforo-amarillo { background: #d9a441; }
.barra-capacidad-dual-relleno.semaforo-rojo { background: #b3261e; }
.calendario-embebido {
  border: 1px solid var(--sc-gris-claro);
  border-radius: var(--sc-radius-sm);
  padding: 16px;
  background: var(--sc-crema);
  max-width: 320px;
}
.campo-flotante-personas { margin-top: 14px; margin-bottom: 0; }
.campo-flotante-personas label { font-size: 0.82rem; margin-bottom: 4px; display: block; }
.campo-flotante-personas input { width: 100%; }
.calendario-flotante-pie { margin-top: 14px; }
.calendario-flotante-pie a.btn { width: 100%; text-align: center; }
a.btn.deshabilitado { opacity: 0.5; pointer-events: none; }
/* v25 (Ronda 7, punto 1 — modal de verificación documental): el botón
   "Continuar a la Reserva" es un <button>, no un <a> como el resto de
   CTAs de modal — la regla de arriba no lo cubría. */
button.btn.deshabilitado { opacity: 0.5; pointer-events: none; }
.calendario-flotante-cerrar {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--sc-gris);
  cursor: pointer;
}

/* =========================================================
   MODAL "COMPRA TU BONO" — Tienda de Conservación. Al hacer
   clic en la tarjeta de un bono se abre este selector de
   cantidad centrado con overlay, en vez de navegar a la ficha
   del producto — luego va directo al checkout con ese bono y
   esa cantidad precargados. Un solo modal compartido por todas
   las tarjetas (ver js/main.js), relleno dinámicamente desde
   window.CATALOGO_BONOS.
   ========================================================= */
/* Ronda de ajustes de septiembre 2026: el cliente reportó que el botón
   "Reserva ahora" quedaba visualmente por encima del CTA del modal
   ("Continuar al checkout" / "Continuar a la Reserva"). Causa real:
   z-index 600 aquí es menor que .banner-sticky-movil (9999, más abajo
   en este archivo) — en cualquier página con ese banner sticky, el
   modal se abría POR DEBAJO de él. Es exactamente el mismo bug que ya
   se había encontrado y corregido para .drawer-overlay en la ronda 25
   (ver el comentario ahí, "un panel que la persona abrió a propósito
   debe quedar SIEMPRE por encima de la interfaz fija de la página")
   pero ese arreglo nunca se replicó aquí. Se sube al mismo z-index
   10000 — cubre los 4 modales que comparten esta clase: reserva de
   caminata/travesía, reserva de evento, bono (cantidad) y verificación
   documental (agencias/corporativos). */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(26, 46, 28, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.abierto { display: flex; }
.modal-bono {
  position: relative;
  width: 420px;
  max-width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--sc-blanco);
  border-radius: var(--sc-radius);
  box-shadow: 0 20px 50px rgba(0,0,0,0.32);
  padding: 26px;
}
.modal-bono h3 { margin: 0 0 6px; color: var(--sc-verde-bosque); padding-right: 24px; }
.modal-bono .modal-cerrar {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--sc-gris);
  cursor: pointer;
}
.enlace-ficha-bono { display: block; text-align: center; margin-top: 10px; }

/* v21 (Ronda 5, punto 4.D): botón sin estilo, visualmente un enlace de
   texto — para acciones tipo [data-scroll-expandir] que semánticamente
   deben ser <button> (no navegan a ninguna URL, solo hacen scroll/abren
   un acordeón) pero necesitan verse como el resto de enlaces en línea
   dentro de un párrafo. */
.enlace-boton {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--sc-verde-bosque);
  text-decoration: underline;
  cursor: pointer;
}
.enlace-boton:hover { color: var(--sc-verde-musgo); }

/* =========================================================
   BANNER-ACORDEÓN — usado en Agencias Aliadas para separar el
   directorio de socios (visible siempre) del contenido comercial
   B2B (tarifario + formulario de alianza), que solo se despliega
   si la persona hace clic en el banner. Reutiliza el JS genérico
   de acordeón (misma clase .acordeon-item / data-acordeon-grupo),
   solo cambia el tamaño/estilo del disparador para que se vea
   como un banner y no como una fila más de FAQ.
   ========================================================= */
.banner-acordeon { border: 2px solid var(--sc-verde-bosque); }
/* Bug de contraste (agosto de 2026, ronda 2 del prompt-maestro, punto 4):
   .acordeon-cabecera (genérica, background:none) aparece MÁS ABAJO en
   este archivo que .banner-acordeon-cabecera — con la misma
   especificidad (0,1,0), CSS resuelve el empate por orden de aparición,
   así que la regla genérica ganaba y anulaba el fondo verde de abajo,
   dejando el texto blanco (línea siguiente) sobre el fondo claro de la
   página. Fix: combinar ambas clases en un solo selector
   (.acordeon-cabecera.banner-acordeon-cabecera, especificidad 0,2,0)
   para que gane siempre, sin depender del orden en el archivo. */
.acordeon-cabecera.banner-acordeon-cabecera {
  padding: 22px 20px;
  background: var(--sc-verde-bosque);
  border-bottom: none;
}
.banner-acordeon-cabecera .banner-acordeon-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.banner-acordeon-cabecera strong { color: #fff; font-size: 1.15rem; font-family: var(--sc-fuente-titulo); }
.banner-acordeon-cabecera span span { color: rgba(255,255,255,0.85); font-size: 0.9rem; }
.banner-acordeon-cabecera .acordeon-chevron { color: #fff; }
.acordeon-cabecera.banner-acordeon-cabecera:hover { background: var(--sc-verde-musgo); }
/* Corrección de auditoría UX (agosto de 2026): el cliente reportó que el
   recuadro "¿Eres una agencia de viajes?" se corta y no muestra todo el
   contenido (tabla de tarifas + calc-caja + formulario B2B completo).
   Medido con Playwright: el max-height real aplicado era 800px, NO los
   4000px de la regla de abajo — mismo bug de especificidad ya diagnosticado
   arriba para el color de fondo (ver el comentario de "Bug de contraste"):
   `.banner-acordeon.abierto .acordeon-cuerpo` y
   `.acordeon-item.abierto .acordeon-cuerpo` (línea ~1497, MÁS ABAJO en este
   archivo) tienen exactamente la misma especificidad (3 clases), así que
   ganaba la que aparece después en el archivo — la genérica de 800px, no
   esta. Fix: agregar la clase base .acordeon-item al selector para subir
   la especificidad a 4 clases, independiente del orden en el archivo
   (mismo patrón de fix que la regla de color de arriba). Contenido real
   medido: ~2750px en móvil — se deja margen amplio (6000px) para que
   crecer el formulario en el futuro no repita este bug. */
.acordeon-item.banner-acordeon.abierto .acordeon-cuerpo { max-height: 6000px; }

/* =========================================================
   ACORDEÓN FUNCIONAL — usado en "Modelo y Transparencia" y en
   la explicación de la Red de Reservas dentro de "La Reserva".
   Exclusivo por grupo (data-acordeon-grupo): abrir uno cierra
   los demás del mismo grupo. Sin librerías, JS en main.js.
   ========================================================= */
.acordeon-item {
  background: var(--sc-blanco);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-sombra);
  overflow: hidden;
  margin-bottom: 16px;
}
.acordeon-cabecera {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--sc-gris-claro);
  cursor: pointer;
  transition: background 0.15s ease;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  font: inherit;
}
.acordeon-cabecera:hover { background: var(--sc-crema-oscuro); }
.acordeon-cabecera:hover .acordeon-titulo { color: var(--sc-verde-bosque); }
.acordeon-icono {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.acordeon-titulo {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--sc-verde-paramo);
  flex: 1;
  transition: color 0.15s ease;
}
.acordeon-chevron { transition: transform 0.2s ease; flex-shrink: 0; }
.acordeon-item.abierto .acordeon-chevron { transform: rotate(180deg); }
.acordeon-cuerpo {
  padding: 0 24px;
  font-size: 0.94rem;
  color: var(--sc-negro);
  line-height: 1.7;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
}
/* 800px alcanzaba para los ítems originales (listas cortas de texto);
   el ítem de conservación agregado en la ronda de ajustes de septiembre
   de 2026 (grid de 5 especies + varios párrafos) puede superarlo en
   móvil, así que se sube el techo para todos — es solo un límite
   máximo para la transición, no una altura fija, así que no afecta a
   los ítems más cortos. */
.acordeon-item.abierto .acordeon-cuerpo { padding: 22px 24px; max-height: 1800px; }

/* ---------- Chip de criterio (Modelo y Transparencia) ---------- */
.criterio-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sc-crema-oscuro);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sc-verde-bosque);
}

/* ---------- Etiquetas de filtro que enlazan a otra página en vez
   de filtrar la grilla (Experiencias Especializadas, Corporativo
   y Educativo) ---------- */
.filtro-tab-enlace {
  background: var(--sc-crema-oscuro);
  border: 1.5px dashed var(--sc-gris-claro);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--sc-tierra);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.filtro-tab-enlace:hover { border-color: var(--sc-tierra-clara); }

/* ---------- Banner de cookies (básico, no invasivo) ----------
   Rediseño de auditoría UX de agosto de 2026, punto 4. Antes era una
   tarjeta flotante angosta (16px de margen, max-width 720px en móvil,
   420px en desktop): con el texto real (~140 caracteres) más el botón,
   esa tarjeta angosta se veía forzada a 3 líneas y llegaba a medir
   ~184px de alto en móvil (medido con Playwright) — suficiente para
   taparse literalmente con el botón flotante de WhatsApp y con los
   botones flotantes de Home (banner-flotante-home) que viven en la
   misma franja inferior de la pantalla.
   Ahora es una barra de ANCHO COMPLETO (100vw, sin bordes redondeados
   ni márgenes laterales) en todas las pantallas — al dejar de forzar
   el texto a una columna angosta, entra en 1-2 líneas y la barra queda
   mucho más baja (~60-70px medido, contra los ~184px de antes). El
   ancho completo en desktop es el pedido explícito del cliente; en
   móvil no era parte del pedido pero es lo que resuelve de raíz la
   superposición con los botones flotantes, en vez de solo ocultarla. */
.banner-cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  /* z-index deliberadamente MENOR que los botones flotantes (.boton-
     flotante-whatsapp / .boton-flotante-reservar / .banner-flotante-home,
     todos a 500 o más) — pedido explícito del cliente para que en móvil
     el aviso de cookies nunca quede por encima ni bloquee esos botones. */
  z-index: 60;
  background: rgba(26, 69, 38, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 0;
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  box-shadow: 0 -4px 20px rgba(10, 20, 14, 0.3);
}
/* Navegadores sin soporte de backdrop-filter (o con reduce-transparency
   activado) reciben el fondo semi-transparente igual, sin el desenfoque:
   sigue siendo legible sin depender de la propiedad. */
.banner-cookies[hidden] { display: none; }
.banner-cookies p { margin: 0; font-size: 0.82rem; line-height: 1.35; flex: 1 1 260px; max-width: 860px; text-align: center; }
.banner-cookies a { color: #fff; text-decoration: underline; }
.banner-cookies .btn { flex: 0 0 auto; white-space: nowrap; padding: 7px 20px; font-size: 0.85rem; }
/* Debajo de ~480px (la mayoría de celulares en vertical) el texto real
   (~140 caracteres) no cabe junto al botón en la misma fila sin forzar 3
   líneas muy angostas — se apilan en 2 filas centradas, cada una usando
   el ancho completo de la barra, para que el texto entre en 1-2 líneas
   en vez de 3 y la barra completa quede más baja. */
@media (max-width: 480px) {
  .banner-cookies p { flex: 1 1 100%; text-align: center; }
  .banner-cookies .btn { flex: 1 1 100%; max-width: 220px; margin: 0 auto; }
}
@media (min-width: 900px) {
  .banner-cookies { padding: 10px 32px; }
  .banner-cookies p { font-size: 0.88rem; text-align: left; }
}

/* v24 (Ronda 6, punto 4 — "no debe bloquear visualmente" los botones
   flotantes): medido con Playwright sobre el sitio real y encontrado en
   la revisión de esta ronda — el z-index más bajo (arriba) solo decide
   QUIÉN se pinta encima cuando dos elementos fijos ocupan el mismo
   espacio; no evita que se solapen. En páginas con banner sticky de
   reserva (.tiene-banner-sticky, z-index 9999) el banner de cookies
   (bottom:0, ~68-81px de alto medido en sticky) quedaba parcial o
   totalmente TAPADO por él (en desktop, completamente ilegible/sin
   poder pulsar "Aceptar"); y el botón flotante de WhatsApp (subido a
   bottom:106px por esa misma regla) terminaba superpuesto sobre el
   propio texto del aviso de cookies, tapándolo. Mismo problema con el
   banner flotante de Home (.tiene-banner-flotante-home). La solución
   real es apilar los tres elementos en vez de superponerlos: el banner
   de cookies sube por encima del banner sticky/Home cuando este existe,
   y los botones flotantes suben aún más cuando el banner de cookies
   está visible (clase body.tiene-banner-cookies, ver main.js). Valores
   calculados a partir de las alturas reales medidas (con margen). */
body.tiene-banner-sticky .banner-cookies { bottom: 84px; }
@media (min-width: 900px) {
  body.tiene-banner-sticky .banner-cookies { bottom: 80px; }
}
body.tiene-banner-flotante-home .banner-cookies { bottom: 88px; }
@media (min-width: 700px) {
  body.tiene-banner-flotante-home .banner-cookies { bottom: 86px; }
}

/* Mientras el banner de cookies está visible (clase temporal en <body>,
   se quita al aceptar o a los 20s), los botones flotantes suben por
   encima de él en las tres combinaciones posibles de la página. */
body.tiene-banner-cookies .boton-flotante-whatsapp,
body.tiene-banner-cookies .boton-flotante-reservar,
body.tiene-banner-cookies .boton-flotante-asistentes { bottom: 145px; }
@media (min-width: 900px) {
  body.tiene-banner-cookies .boton-flotante-whatsapp,
  body.tiene-banner-cookies .boton-flotante-reservar,
  body.tiene-banner-cookies .boton-flotante-asistentes { bottom: 84px; }
}
body.tiene-banner-sticky.tiene-banner-cookies .boton-flotante-whatsapp { bottom: 225px; }
@media (min-width: 900px) {
  body.tiene-banner-sticky.tiene-banner-cookies .boton-flotante-whatsapp { bottom: 156px; }
}
body.tiene-banner-flotante-home.tiene-banner-cookies .boton-flotante-whatsapp { bottom: 229px; }
@media (min-width: 700px) {
  body.tiene-banner-flotante-home.tiene-banner-cookies .boton-flotante-whatsapp { bottom: 160px; }
}

/* ---------- Ficha de agencia aliada agrandada, con espacio para
   el logotipo de cada agencia ---------- */
.tarjeta-agencia-grande {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
}
.tarjeta-agencia-grande .logo-agencia-espacio {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: 14px;
  background: var(--sc-crema-oscuro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  text-align: center;
  color: var(--sc-gris);
  line-height: 1.3;
  padding: 6px;
}
.tarjeta-agencia-grande .logo-agencia-espacio img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.tarjeta-agencia-grande .tarjeta-cuerpo { flex: 1 1 auto; }

/* ---------- Imagen real de banco en tarjetas (bonos, eventos,
   corporativos) — reemplaza los placeholder-img de esas secciones.
   Las páginas de Caminatas/rutas NO usan esta clase a propósito. ---------- */
.tarjeta-media img.img-banco,
.destacado-proximo .tarjeta-media img.img-banco {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* =========================================================
   RONDA 4 DE AGOSTO DE 2026 (prompt-maestro, punto 2): sistema
   de reserva contextual que reemplaza por completo el widget
   flotante genérico de esquina (boton_flotante_reservar). Tres
   piezas nuevas, compartidas por caminatas y eventos deportivos:

   1. .contador-personas — stepper +/- de número de personas.
   2. .modal-reserva — panel modal (reutiliza .modal-overlay) con
      selector de ruta/modalidad opcional, calendario embebido
      (.calendario-embebido ya existente), el stepper, la línea
      informativa de guía y el desglose de total.
   3. .banner-sticky-movil — banner fijo de ancho completo
      (position:fixed; bottom:0; width:100%; z-index:9999).

   RONDA 5 DE AGOSTO DE 2026 (v21, "paridad escritorio/móvil"): el
   cliente confirmó explícitamente que quiere el MISMO banner fijo
   también en desktop (antes solo vivía en móvil y desktop tenía en
   su lugar .btn-reservar-prominente embebido en la página). Se quita
   el gating por media query: .banner-sticky-movil ahora es universal
   en todos los tamaños de pantalla, y .btn-reservar-prominente queda
   oculto siempre (display:none sin condición) para no duplicar el
   CTA. El nombre de la clase se conserva (banner-sticky-movil) para
   no tener que tocar cada content_*.py que ya la referencia — es un
   nombre histórico, ya no describe el alcance real.
   ========================================================= */

/* ---------- Stepper de personas ---------- */
.contador-personas {
  display: flex;
  align-items: center;
  gap: 14px;
}
.contador-personas button {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 999px;
  border: 1.5px solid var(--sc-verde-bosque);
  background: var(--sc-blanco);
  color: var(--sc-verde-bosque);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.contador-personas button:hover:not(:disabled) { background: var(--sc-verde-bosque); color: #fff; }
.contador-personas button:disabled { opacity: 0.4; cursor: not-allowed; }
.contador-personas .contador-valor {
  min-width: 44px;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--op2-titulo);
}
.contador-personas-etiqueta { font-size: 0.82rem; color: var(--sc-gris); margin-bottom: 8px; display: block; font-weight: 700; }

/* ---------- Modal de reserva (caminatas y eventos) ---------- */
/* Reutiliza .modal-overlay (fondo oscuro + centrado) ya definido para
   el modal de bonos; .modal-reserva es el panel en sí, más ancho que
   .modal-bono porque tiene calendario + stepper + desglose. */
.modal-reserva {
  position: relative;
  width: 480px;
  max-width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--sc-blanco);
  border-radius: var(--sc-radius);
  box-shadow: 0 20px 50px rgba(0,0,0,0.32);
  padding: 26px;
}
.modal-reserva h3 { margin: 0 0 4px; color: var(--op2-titulo); padding-right: 24px; }
.modal-reserva p.campo-ayuda { margin-bottom: 18px; }
.modal-reserva .modal-cerrar {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--sc-gris);
  cursor: pointer;
}
.modal-reserva .campo { margin-bottom: 16px; }
.modal-reserva .calendario-embebido { max-width: 100%; margin-bottom: 16px; }

/* Línea informativa de guía — SIEMPRE informativa, nunca una casilla
   editable que cambie el precio (aclaración del cliente, ronda 4:
   "el ideal es que sea informativo para que el usuario sepa que está
   comprando"). Solo cambia el número que muestra, según la ruta/
   modalidad y el número de personas elegidos. */
.linea-guia-informativa {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--op2-badge-bg);
  color: var(--op2-badge-texto);
  border-radius: var(--sc-radius-sm);
  padding: 10px 14px;
  font-size: 0.86rem;
  font-weight: 600;
  margin: 14px 0;
}
.linea-guia-informativa .icono { font-size: 1rem; line-height: 1; }

/* Desglose dinámico: "Valor por persona: $XX.XXX + Guía: $XX.XXX |
   TOTAL A PAGAR: $XXX.XXX COP" — se recalcula en vivo con JS. Solo la
   CAJA (fondo/borde/padding) es nueva: las líneas de adentro
   reutilizan .desglose-precio/.desglose-linea/.desglose-linea.total
   ya existentes (bloque_precio_caminata en build.py y la calculadora
   de reservar.html) para que se vean igual en toda la web — un
   .desglose-precio nuevo y separado aquí habría pisado esas reglas
   ya publicadas (misma clase, más especificidad, cambiaba su estilo
   sin querer en todo el sitio). */
.caja-desglose-modal {
  background: var(--sc-crema);
  border: 1px solid var(--sc-crema-oscuro);
  border-radius: var(--sc-radius-sm);
  padding: 16px;
  margin: 16px 0;
}
.caja-desglose-modal .desglose-precio { margin-top: 0; }
.modal-reserva .btn-modal-cta { width: 100%; text-align: center; margin-top: 4px; }

/* Pie fijo del modal de reserva (septiembre 2026, validaciones de
   checkout, punto 7 del cliente: "el botón Ir al checkout permanezca
   siempre visible y accesible"). El modal ya crece bastante con el
   selector de modalidad + línea informativa + desglose — verificado con
   Playwright que el CTA quedaba muy por debajo del viewport en móvil Y
   desktop, obligando a un scroll largo dentro del propio modal para
   encontrarlo. .modal-reserva ya es el contenedor con scroll (overflow-y:
   auto) — este pie usa position:sticky para quedar pegado al fondo
   visible mientras se hace scroll por el formulario de arriba, sin
   tapar nada del contenido (el usuario sigue viendo todo el formulario,
   el botón solo deja de "perderse" al fondo). Los márgenes negativos
   cancelan el padding de 26px de .modal-reserva para que el pie llegue
   hasta los bordes del panel, y bottom:-26px hace que se pegue al borde
   real del área con scroll (no 26px antes, que dejaría un hueco vacío
   debajo). */
.modal-reserva-pie {
  position: sticky;
  bottom: -26px;
  margin: 16px -26px -26px;
  padding: 14px 26px 26px;
  background: var(--sc-blanco);
  border-top: 1px solid var(--sc-crema-oscuro);
  border-radius: 0 0 var(--sc-radius) var(--sc-radius);
}
.modal-reserva-pie .btn-modal-cta { margin-top: 0; }
.modal-reserva-mensaje-error {
  background: #fdecec;
  color: #b3261e;
  border-radius: var(--sc-radius-sm);
  padding: 10px 12px;
  font-size: 0.86rem;
  margin-top: 10px;
}

/* ---------- Selector de modalidad: Privada vs Grupo Abierto ---------- */
/* Setiembre de 2026 (paquete de requerimientos, punto 3): antes toda
   caminata cobraba el guía automáticamente en el checkout, sin
   importar si la persona quería un recorrido exclusivo o le daba igual
   compartirlo con otros. Ahora se elige la modalidad ANTES de ver el
   desglose: "Privada" cobra el guía completo (igual que siempre);
   "Grupo Abierto" NO cobra guía en el pago web — se paga en efectivo
   el día del recorrido, dividido entre quienes se hayan inscrito para
   esa fecha. Reutiliza tarjeta.tarjeta/--sc-verde-bosque para que se
   sienta parte del mismo sistema visual, en vez de un componente
   nuevo sin relación con el resto del sitio. Se oculta por completo en
   senderos autónomos (no llevan guía) y en travesías de alta montaña/
   nevado (guía profesional obligatorio por seguridad, no negociable) —
   ver js/main.js. */
.selector-modalidad-guia { margin: 16px 0; }
.grupo-modalidad-guia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 560px) {
  .grupo-modalidad-guia { grid-template-columns: 1fr 1fr; }
}
.opcion-modalidad-guia {
  text-align: left;
  background: var(--sc-blanco);
  border: 1.5px solid var(--sc-gris-claro);
  border-radius: var(--sc-radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.opcion-modalidad-guia strong { color: var(--op2-titulo); font-size: 0.92rem; }
.opcion-modalidad-guia span { font-size: 0.8rem; color: var(--sc-gris); line-height: 1.4; }
.opcion-modalidad-guia:hover { border-color: var(--sc-verde-bosque); }
.opcion-modalidad-guia.activo {
  border-color: var(--sc-verde-bosque);
  background: var(--op2-badge-bg);
}
.opcion-modalidad-guia.activo strong { color: var(--sc-verde-bosque); }

/* ---------- Variante acordeón del selector Privada/Grupo Abierto ----------
   Ronda de ajustes post-Fase 3 (setiembre 2026): el cliente pidió que este
   selector se vea como un acordeón (una tarjeta expandida, la otra
   colapsada a solo su título) en vez de 2 tarjetas lado a lado con todo el
   texto siempre visible, con Grupo Abierto expandido por defecto para
   incentivarlo. Todo lo de abajo está SCOPEADO a .acordeon-modalidad-guia
   (agregado solo en el HTML de este selector, ver build.py y
   content_reservar.py) para no afectar el selector de método de pago, que
   reutiliza las mismas clases .opcion-modalidad-guia/.activo sin este
   scope. No se tocó ningún JS: seguir usando la clase "activo" para
   seleccionar es lo que aquí también expande/colapsa. */
.grupo-modalidad-guia.acordeon-modalidad-guia {
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 560px) {
  .grupo-modalidad-guia.acordeon-modalidad-guia { grid-template-columns: 1fr; }
}
.acordeon-modalidad-guia .opcion-modalidad-guia {
  border-radius: 0;
  border-bottom: none;
  padding: 14px 16px;
}
.acordeon-modalidad-guia .opcion-modalidad-guia:first-child {
  border-radius: var(--sc-radius-sm) var(--sc-radius-sm) 0 0;
}
.acordeon-modalidad-guia .opcion-modalidad-guia:last-child {
  border-radius: 0 0 var(--sc-radius-sm) var(--sc-radius-sm);
  border-bottom: 1.5px solid var(--sc-gris-claro);
}
.acordeon-modalidad-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.acordeon-modalidad-chevron {
  flex-shrink: 0;
  color: var(--sc-gris);
  transition: transform 0.2s ease;
}
.opcion-modalidad-guia.activo .acordeon-modalidad-chevron {
  transform: rotate(180deg);
  color: var(--sc-verde-bosque);
}
.acordeon-modalidad-guia .opcion-modalidad-guia > span:not(.acordeon-modalidad-cabecera):not(.tag-guia-pago) {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.22s ease, opacity 0.18s ease, margin-top 0.22s ease;
}
.acordeon-modalidad-guia .opcion-modalidad-guia.activo > span:not(.acordeon-modalidad-cabecera):not(.tag-guia-pago) {
  max-height: 260px;
  opacity: 1;
  margin-top: 8px;
}
/* El tag "Guía: ..." NUNCA se colapsa con el acordeón — es justo el
   dato que la regla de oro del proyecto exige mantener siempre visible,
   incluso con la tarjeta contraída (prompt maestro set-2026). */
.acordeon-modalidad-guia .opcion-modalidad-guia > .tag-guia-pago {
  margin: 6px 0 0;
}

/* ---------- Botón prominente de reserva embebido (LEGACY, oculto) ---------- */
/* v21: por decisión del cliente (paridad escritorio/móvil), el banner
   sticky de ancho completo (.banner-sticky-movil, ver abajo) es ahora
   la ÚNICA acción de reserva visible, en cualquier tamaño de
   pantalla. Este botón embebido queda oculto siempre — se conserva el
   markup/CSS (en vez de eliminarlo del todo) por si una página
   necesitara reactivarlo puntualmente en el futuro. */
.btn-reservar-prominente {
  display: none !important;
}

/* ---------- Banner sticky de ancho completo (desktop + móvil) ---------- */
/* v21 (Ronda 5, "paridad escritorio/móvil"): antes solo se mostraba
   en móvil (<900px) y desktop usaba en su lugar .btn-reservar-prominente
   embebido en la página. El cliente pidió explícitamente el mismo
   banner fijo también en desktop, así que ya no hay media query que
   lo oculte: siempre fijo al fondo de la pantalla, ancho completo,
   altísima jerarquía visual (z-index 9999 — por encima de cualquier
   otro elemento flotante, incluido el botón de WhatsApp). */
.banner-sticky-movil {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 9999;
  background: var(--sc-verde-bosque);
  color: #fff;
  padding: 14px 18px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 20px rgba(0,0,0,0.22);
}
.banner-sticky-movil .banner-sticky-texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  min-width: 0;
}
.banner-sticky-movil .banner-sticky-titulo {
  font-weight: 800;
  font-size: 0.96rem;
  line-height: 1.2;
}
.banner-sticky-movil .banner-sticky-subtitulo {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.banner-sticky-movil button,
.banner-sticky-movil a.banner-sticky-cta {
  flex: 0 0 auto;
  background: #fff;
  color: var(--sc-verde-bosque);
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
@media (min-width: 900px) {
  /* En desktop el banner tiene más espacio: título/subtítulo un poco
     más grandes y el contenido centrado en el ancho de página, para
     que no se sienta como un elemento pensado solo para móvil. */
  .banner-sticky-movil { padding: 16px 32px; padding-bottom: 16px; }
  .banner-sticky-movil .banner-sticky-titulo { font-size: 1.05rem; }
  .banner-sticky-movil .banner-sticky-subtitulo { font-size: 0.85rem; }
  .banner-sticky-movil button,
  .banner-sticky-movil a.banner-sticky-cta { padding: 13px 26px; font-size: 0.96rem; }
}

/* Espacio reservado al fondo de la página, en cualquier tamaño de
   pantalla, para que el banner sticky nunca tape contenido del pie de
   página — el cliente pidió explícitamente un mínimo de 80px. Se
   aplica solo en las páginas que efectivamente muestran un banner
   sticky (clase .tiene-banner-sticky en <body>, puesta por build.py),
   para no dejar un hueco vacío en páginas que no lo tienen. Antes
   estaba detrás de un media query móvil; en v21 el banner es
   universal, así que este padding también lo es. */
body.tiene-banner-sticky { padding-bottom: 88px; }
@media (min-width: 900px) {
  body.tiene-banner-sticky { padding-bottom: 96px; }
}

/* ---------- Botones flotantes de Home (ronda 6 de agosto de 2026, prompt-maestro punto 6) ---------- */
/* 2 botones fijos de ancho completo, EXCLUSIVOS de la página de inicio
   (confirmado por el cliente en la pregunta aclaratoria #4 de esta
   ronda: "solo en Home, además de lo existente") — enlaces DIRECTOS a
   /caminatas y /bonos-de-conservacion (ver banner_flotante_home en
   build.py), sin modal ni formulario flotante, para reducir fricción y
   evitar bloqueos en móvil. Mismo patrón visual y de jerarquía (fijo al
   fondo, ancho completo, z-index 9999) que .banner-sticky-movil de
   arriba, pero con 2 CTAs en vez de 1 y su propia clase de body
   (.tiene-banner-flotante-home) — Home nunca lleva .tiene-banner-sticky
   a la vez, así que no compiten por el mismo espacio. */
.banner-flotante-home {
  display: flex;
  gap: 10px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 9999;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--sc-verde-bosque);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.22);
}
.banner-flotante-home-btn {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  background: #fff;
  color: var(--sc-verde-bosque);
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 13px 10px;
  font-weight: 800;
  font-size: 0.82rem;
  line-height: 1.15;
  text-decoration: none;
  white-space: normal;
  /* Ronda de agosto 2026: esta clase ahora también se usa en <button>
     (banner_flotante_agencias, ver build.py) además de <a> (Home) — se
     agregan estas 2 propiedades para que un <button> se vea y se
     comporte igual que un <a> con esta clase. */
  font-family: inherit;
  cursor: pointer;
}
.banner-flotante-home-btn.secundario {
  background: transparent;
  color: #fff;
}
@media (min-width: 700px) {
  .banner-flotante-home { padding: 16px 32px; justify-content: center; gap: 20px; }
  .banner-flotante-home-btn { flex: 0 0 auto; padding: 14px 30px; font-size: 0.98rem; white-space: nowrap; }
}

/* Espacio reservado al fondo de Home para que el banner nunca tape el
   pie de página, y el botón de WhatsApp se sube por encima del banner —
   mismo mecanismo que ya usa .tiene-banner-sticky más arriba. */
body.tiene-banner-flotante-home { padding-bottom: 92px; }
@media (min-width: 700px) {
  body.tiene-banner-flotante-home { padding-bottom: 100px; }
}
body.tiene-banner-flotante-home .boton-flotante-whatsapp { bottom: 106px; }
@media (min-width: 900px) {
  body.tiene-banner-flotante-home .boton-flotante-whatsapp { bottom: 118px; }
}

/* ---------- Visor de Conservación / "Mi aporte" (tarea #161) ---------- */
.buscador-aporte {
  background: var(--sc-crema);
  border-radius: var(--sc-radius);
  padding: 22px 24px;
  margin: 8px 0 26px;
}
.buscador-aporte label { display: block; font-weight: 700; margin-bottom: 10px; }
.buscador-aporte-fila { display: flex; flex-wrap: wrap; gap: 10px; }
.buscador-aporte-fila input {
  flex: 1 1 220px;
  padding: 12px 14px;
  border-radius: var(--sc-radius-sm);
  border: 1px solid var(--sc-gris-claro);
  font-size: 0.95rem;
}
.buscador-aporte-fila input:focus { outline: 2px solid var(--sc-verde-musgo); border-color: var(--sc-verde-musgo); }
.buscador-aporte-ayuda { font-size: 0.82rem; color: var(--sc-gris); margin: 8px 0 0; }
.resultado-aporte {
  margin-top: 14px;
}
.resultado-aporte-error {
  color: var(--sc-alerta);
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--sc-radius-sm);
  background: var(--sc-blanco);
  border-left: 4px solid var(--sc-alerta);
}
.resultado-aporte > p { margin: 0; padding: 14px 16px; border-radius: var(--sc-radius-sm); background: var(--sc-blanco); border-left: 4px solid var(--sc-verde-bosque); }

/* Rediseño de "Mi aporte" (setiembre 2026, pedido explícito del
   cliente: la ficha del resultado debe ser visualmente atractiva y
   destacar "qué se protege"). Tarjeta con cabecera (bono + código),
   chips de fecha/vigencia, nombre del adoptante cuando aplica, y la
   mini-ficha de la zona real como pieza central. */
.ficha-mi-aporte {
  margin-top: 14px;
  padding: 22px 24px;
  border-radius: var(--sc-radius);
  background: var(--sc-blanco);
  border: 1px solid var(--sc-gris-claro);
  box-shadow: 0 4px 18px rgba(26,69,38,0.06);
}
.ficha-mi-aporte-cabecera {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap;
}
.ficha-mi-aporte-eyebrow {
  margin: 0 0 2px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--sc-verde-musgo); font-weight: 700;
}
.ficha-mi-aporte-nombre { margin: 0; font-family: var(--sc-fuente-titulo); font-size: 1.25rem; color: var(--sc-verde-bosque); }
.ficha-mi-aporte-codigo {
  font-family: monospace; font-size: 0.85rem; font-weight: 700; color: var(--sc-verde-bosque);
  background: var(--sc-crema); border: 1px solid var(--sc-gris-claro); border-radius: 999px; padding: 5px 12px;
  white-space: nowrap;
}
.ficha-mi-aporte-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip-mini {
  font-size: 0.78rem; color: var(--sc-gris); background: var(--sc-crema);
  border-radius: 999px; padding: 4px 11px;
}
.ficha-mi-aporte-adoptante { margin: 14px 0 0; font-size: 0.95rem; }

/* Certificado descargable (setiembre 2026, pedido del cliente) — botón
   dorado (mismo acento reservado para CTAs que el cliente quiere
   destacar, ver .btn-dorado) al pie de la ficha, generado 100% en el
   navegador con jsPDF (ver js/mi_aporte.js). */
.btn-descargar-certificado { margin-top: 18px; }
.btn-descargar-certificado:disabled { opacity: 0.7; cursor: default; }

.ficha-zona-protegida {
  --color-zona: var(--sc-verde-bosque);
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: var(--sc-radius-sm);
  background: color-mix(in srgb, var(--color-zona) 6%, #fff);
  border-left: 4px solid var(--color-zona);
}
.ficha-zona-protegida-cabecera { display: flex; align-items: center; gap: 12px; }
.ficha-zona-protegida-icono {
  font-size: 1.5rem; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-zona) 16%, #fff);
}
.ficha-zona-protegida-categoria {
  margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; color: var(--color-zona);
}
.ficha-zona-protegida-nombre { margin: 2px 0 0; font-weight: 700; color: var(--sc-verde-bosque); }
.ficha-zona-protegida-nombre span { font-weight: 400; color: var(--sc-gris); }
.ficha-zona-protegida-descripcion { margin: 10px 0 0; font-size: 0.9rem; color: var(--sc-gris); }

.mapa-conservacion-wrap { margin-bottom: 30px; }
#mapa-conservacion {
  width: 100%;
  height: 420px;
  border-radius: var(--sc-radius);
  background: var(--sc-crema);
  overflow: hidden;
}
@media (min-width: 700px) { #mapa-conservacion { height: 520px; } }
.mapa-conservacion-cargando { text-align: center; color: var(--sc-gris); font-size: 0.88rem; margin: 10px 0 0; }

/* ---------- Conservación del territorio (setiembre 2026): mapa de capas ---------- */
#mapa-territorio-leaflet {
  width: 100%;
  height: 420px;
  border-radius: var(--sc-radius);
  background: var(--sc-crema);
  overflow: hidden;
}
@media (min-width: 700px) { #mapa-territorio-leaflet { height: 520px; } }
/* Rediseño setiembre 2026 (pedido del cliente: "la forma en como se
   eligen las zonas en el mapa... debe ser más bonito"): las capas antes
   eran una fila de checkboxes planos con un cuadradito de color — ahora
   son pastillas grandes, agrupadas por tipo (Ecosistemas / Acciones de
   conservación), con el color real de la capa como aro/relleno y una
   marca de check visible cuando está activa. La lógica de activar/
   desactivar sigue siendo el <input type="checkbox"> nativo de siempre
   (accesible por teclado y lector de pantalla) — solo cambia cómo se ve;
   js/conservacion_territorial.js sincroniza la clase .activa en cada
   <label> cuando cambia el checkbox (ver ese archivo) porque no todos
   los navegadores del público del cliente soportan de forma confiable
   el selector CSS :has().
*/
.grupo-capas-territorio { margin: 16px 0 6px; }
.grupo-capas-territorio h3 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sc-gris);
  margin: 0 0 10px;
}
.capas-territorio { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.capa-toggle {
  --color-capa: var(--sc-verde-bosque);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--sc-gris-claro);
  background: var(--sc-blanco);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--sc-gris);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease;
  user-select: none;
}
.capa-toggle:hover { border-color: var(--color-capa); box-shadow: 0 3px 10px rgba(26,69,38,0.1); }
.capa-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.capa-toggle:focus-within { outline: 2px solid var(--color-capa); outline-offset: 2px; }
.capa-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-capa);
  flex-shrink: 0;
  transition: transform .15s ease;
}
.capa-swatch svg { opacity: 0; transform: scale(0.5); transition: opacity .15s ease, transform .15s ease; }
.capa-toggle.activa {
  background: color-mix(in srgb, var(--color-capa) 13%, #fff);
  border-color: var(--color-capa);
  color: var(--sc-verde-bosque);
}
.capa-toggle.activa .capa-swatch svg { opacity: 1; transform: scale(1); }
.capa-toggle.activa .capa-swatch { transform: scale(1.08); }
.ficha-zona { border: 1px solid var(--sc-gris-claro); border-radius: var(--sc-radius); padding: 18px 20px; margin-top: 16px; background: #fff; }
.ficha-zona h3 { margin: 0 0 6px; font-size: 1.05rem; }
.ficha-zona .campo-ayuda { margin: 4px 0; }
/* "Explorar por lista" del mapa de capas — rediseño setiembre 2026
   (pedido explícito del cliente: la lista plana de tarjetas de ancho
   completo era "muy ruidosa"). Cada categoría es un acordeón
   compacto, colapsado por defecto; al abrirlo, las zonas se ven como
   chips pequeños en vez de filas de ancho completo. */
.grupo-zona-acordeon {
  --color-grupo: var(--sc-verde-bosque);
  border: 1px solid var(--sc-gris-claro);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}
.grupo-zona-cabecera {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: #fff; border: none; cursor: pointer;
  font: inherit; text-align: left; color: var(--sc-negro);
}
.grupo-zona-cabecera:hover { background: var(--sc-crema); }
.grupo-zona-swatch {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  background: color-mix(in srgb, var(--color-grupo) 16%, #fff);
}
.grupo-zona-titulo { flex: 1; font-weight: 700; font-size: 0.92rem; }
.grupo-zona-conteo {
  font-size: 0.76rem; color: var(--sc-gris); background: var(--sc-crema);
  border-radius: 999px; padding: 2px 9px; flex-shrink: 0;
}
.grupo-zona-chevron { color: var(--color-grupo); transition: transform 0.15s ease; flex-shrink: 0; }
.grupo-zona-acordeon.abierto .grupo-zona-chevron { transform: rotate(180deg); }
.grupo-zona-acordeon.abierto .grupo-zona-cabecera { border-bottom: 1px solid var(--sc-gris-claro); }
.grupo-zona-cuerpo { padding: 12px 14px; background: var(--sc-blanco); }
.chips-zona-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-zona-lista {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 12px; border-radius: 10px; border: 1px solid var(--sc-gris-claro);
  background: #fff; cursor: pointer; font: inherit; text-align: left;
}
.chip-zona-lista:hover, .chip-zona-lista:focus-visible { border-color: var(--color-grupo, var(--sc-verde-bosque)); }
.chip-zona-nombre { font-size: 0.85rem; font-weight: 600; }
.chip-zona-medida { font-size: 0.75rem; color: var(--sc-gris); }
.flujo-modelo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin: 14px 0; }
.flujo-paso {
  background: var(--sc-crema); border: 1px solid var(--sc-gris-claro); border-radius: 20px;
  padding: 6px 14px; font-size: 0.85rem; font-weight: 600; color: var(--sc-verde-bosque);
}
.flujo-flecha { color: var(--sc-gris); font-size: 0.9rem; }
.leyenda-mapa {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--sc-gris);
}
.leyenda-mapa span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-mapa-titulo { margin: 14px 0 2px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--sc-gris); text-transform: uppercase; }
.leyenda-mapa-titulo:first-of-type { margin-top: 12px; }
.punto-leyenda { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.punto-leyenda.punto-zona { background: #3f7d3f; border: 2px solid #1a4526; }
.punto-leyenda.punto-aporte { background: #f2a541; border: 1px solid #e07a1f; }
.punto-leyenda.punto-homenaje { background: #a97fd1; border: 2px solid #6b3fa0; }
.punto-leyenda.punto-caminata { background: #5aa9bd; border: 2px solid #1f7a8c; }
/* Setiembre 2026 (corrección "diferenciar parcelas por categoría en el
   mapa"): mismos 6 colores que DEF_CATEGORIA_ZONA (js/mi_aporte.js) y
   DEF_CAPAS (js/conservacion_territorial.js) — el relleno de cada punto/
   polígono del mapa de "Mi aporte" ahora usa estos mismos colores según
   el ecosistema/acción real de su zona, así que la leyenda debe
   coincidir exactamente con los dos archivos. */
.punto-leyenda.punto-eco-paramo { background: #a67c3d; border: 1px solid #7c5c2c; }
.punto-leyenda.punto-eco-bosque { background: #1a4526; border: 1px solid #0f2b17; }
.punto-leyenda.punto-eco-agua { background: #2f6f9f; border: 1px solid #1f4d70; }
.punto-leyenda.punto-eco-retamo { background: #c0392b; border: 1px solid #8f2a20; }
.punto-leyenda.punto-eco-restauracion { background: #2f9e44; border: 1px solid #217530; }
.punto-leyenda.punto-eco-saneamiento { background: #8d6e63; border: 1px solid #6b524a; }
/* Leyenda fija sobre "tu aporte" en el mapa (setiembre 2026, segunda
   ronda): tooltip permanente de Leaflet, pedido explícito del cliente
   para que el punto se distinga de un vistazo entre todos los demás. */
.tooltip-tu-aporte {
  font-weight: 700; font-size: 0.78rem; color: var(--sc-verde-bosque, #1a4526);
  background: #fff; border: 1px solid var(--sc-dorado, #b89c5d); border-radius: 6px;
  padding: 3px 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.tooltip-tu-aporte::before { border-top-color: var(--sc-dorado, #b89c5d); }

/* ---------- Página fusionada "Turismo y conservación" (tarea #172):
   grilla de ecosistemas, grilla de especies (peso visual IGUAL para
   todas — instrucción explícita del cliente de no destacar ninguna
   especie, ni siquiera el zorro de páramo) y diagrama de flujo de la
   conservación productiva. ---------- */
.grid-ecosistemas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 24px;
}
@media (min-width: 760px) {
  .grid-ecosistemas { grid-template-columns: repeat(3, 1fr); }
}
.tarjeta-ecosistema {
  background: var(--sc-blanco);
  border: 1.5px solid var(--sc-verde-bosque);
  border-radius: var(--sc-radius);
  overflow: hidden;
  padding: 0 0 18px;
}
.tarjeta-ecosistema h3 {
  margin: 16px 18px 8px;
  color: var(--sc-verde-paramo);
  font-size: 1.1rem;
}
.tarjeta-ecosistema p {
  margin: 0 18px;
  color: var(--sc-gris);
  font-size: 0.92rem;
}

.grid-especies {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 22px;
}
@media (min-width: 620px) {
  .grid-especies { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 980px) {
  .grid-especies { grid-template-columns: repeat(4, 1fr); }
}
/* Todas las tarjetas comparten exactamente el mismo tamaño, borde y
   tipografía — ninguna especie (incl. el zorro de páramo) lleva
   badge, tamaño mayor ni posición destacada. */
.tarjeta-especie {
  background: var(--sc-blanco);
  border: 1px solid var(--sc-gris-claro);
  border-radius: var(--sc-radius-sm);
  padding: 16px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tarjeta-especie-icono {
  font-size: 1.9rem;
  line-height: 1;
  margin-bottom: 8px;
}
.tarjeta-especie-nombre {
  font-weight: 700;
  color: var(--sc-verde-bosque);
  font-size: 0.92rem;
  line-height: 1.25;
}
.tarjeta-especie-cientifico {
  font-style: italic;
  color: var(--sc-gris);
  font-size: 0.78rem;
  margin-top: 2px;
}
.tarjeta-especie-eco {
  display: inline-block;
  margin-top: 8px;
  background: var(--sc-crema-oscuro);
  color: var(--sc-verde-bosque);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tarjeta-especie-importancia {
  margin: 8px 0 0;
  color: var(--sc-gris);
  font-size: 0.82rem;
  line-height: 1.4;
  flex: 1;
}

.flujo-conservacion {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
  margin-top: 22px;
}
.flujo-paso {
  background: var(--sc-blanco);
  border: 1px solid var(--sc-gris-claro);
  border-radius: var(--sc-radius-sm);
  padding: 16px 14px;
  flex: 1 1 160px;
  min-width: 140px;
}
.flujo-paso-numero {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sc-verde-bosque);
  color: var(--sc-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.flujo-paso-titulo {
  font-weight: 700;
  color: var(--sc-verde-paramo);
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.flujo-paso-texto {
  margin: 0;
  color: var(--sc-gris);
  font-size: 0.82rem;
  line-height: 1.4;
}
.flujo-flecha {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sc-verde-claro);
  font-size: 1.3rem;
  font-weight: 700;
  flex: 0 0 auto;
}
@media (max-width: 759px) {
  .flujo-conservacion { flex-direction: column; }
  .flujo-flecha { transform: rotate(90deg); margin: -4px 0; }
}

/* ---------- Barra flotante de checkout, SOLO móvil (prompt maestro
   set-2026, punto 12) ----------
   .checkout-sidebar-flotante (arriba, en la sección de checkout) ya es
   sticky en desktop (≥860px) — en móvil (una sola columna) fijar TODO
   el bloque (resumen + bonos rápidos) arriesgaba tapar contenido en una
   pantalla angosta, así que aquí se agrega solo una barra compacta con
   el total, fija abajo, exclusiva de <900px. Mismo patrón de
   z-index/safe-area que .banner-sticky-movil — no hay conflicto porque
   checkout/confirmación nunca muestran ese banner (mostrar_flotante=False
   en build.page()). js/carrito.js la oculta (clase .oculta) en cuanto
   el botón real de pago (#btn-finalizar-compra) entra en la pantalla,
   para que NUNCA quede tapado. */
.checkout-barra-flotante-movil {
  display: none;
}
@media (max-width: 899px) {
  .checkout-barra-flotante-movil {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    background: var(--sc-verde-bosque);
    color: #fff;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 20px rgba(0,0,0,0.22);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .checkout-barra-flotante-movil[hidden] { display: none; }
  .checkout-barra-flotante-movil.oculta {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }
  .checkout-barra-flotante-texto {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
    min-width: 0;
  }
  #checkout-barra-flotante-etiqueta {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(255,255,255,0.8);
  }
  #checkout-barra-flotante-total {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
  }
  .checkout-barra-flotante-movil .btn-secundario {
    flex: 0 0 auto;
    background: #fff;
    color: var(--sc-verde-bosque);
    border: none;
    padding: 10px 18px;
    font-size: 0.85rem;
    white-space: nowrap;
  }
  /* Espacio de respiro al fondo del checkout para que la barra no tape
     el último bloque (bonos rápidos / enlace a la tienda) mientras se
     desplaza hacia el botón de pago. */
  .checkout-grid { margin-bottom: 70px; }
}

/* ---------- "Bono digital" de homenaje en el visor público /mi-aporte-
   conservacion/ (prompt maestro set-2026, punto 24) ----------
   Mismo criterio de tono que la tarjeta de homenaje del correo de
   confirmación (backend/lib/email.js): elegante y sobria, nunca
   infantil — memoria + naturaleza + permanencia. Paleta lila/morada,
   coherente con .punto-leyenda.punto-homenaje de este mismo archivo
   (así el color de "homenaje" es consistente en mapa + tarjeta). */
.tarjeta-homenaje-digital {
  margin-top: 16px;
  padding: 22px 24px;
  border-radius: var(--sc-radius);
  background: linear-gradient(180deg, #faf7fd, #f3edf9);
  border: 1px solid #d8c7ec;
  text-align: center;
}
.tarjeta-homenaje-eyebrow {
  margin: 0 0 4px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b3fa0;
  font-weight: 700;
}
.tarjeta-homenaje-nombre {
  margin: 0 0 4px;
  font-family: var(--sc-fuente-titulo);
  font-size: 1.35rem;
  color: #4a2a72;
}
.tarjeta-homenaje-nombre span {
  font-size: 0.85rem;
  font-weight: 400;
  color: #8a6ab0;
}
.tarjeta-homenaje-fechas {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: #6b3fa0;
}
.tarjeta-homenaje-dedicatoria {
  margin: 0 0 10px;
  font-family: var(--sc-fuente-titulo);
  font-style: italic;
  font-size: 1.05rem;
  color: #3a2258;
  line-height: 1.5;
}
.tarjeta-homenaje-motivo {
  margin: 0 0 14px;
  font-size: 0.88rem;
  color: #5b4478;
}
.tarjeta-homenaje-cierre {
  margin: 0;
  font-size: 0.8rem;
  color: #8a6ab0;
  border-top: 1px solid #e3d5f2;
  padding-top: 12px;
}