/* =====================================================================
   HOME — secciones a pantalla completa (octubre 2026)
   Archivo SOLO para la Home: se carga únicamente desde /index.html y
   todas las reglas cuelgan de html.pagina-home / body.home, así que no
   puede afectar a las otras ~70 páginas del sitio.

   Idea: cada <section> del Home mide como mínimo "una pantalla útil"
   (100dvh menos el encabezado fijo) y centra su contenido; las tarjetas
   son compactas y en móvil/tablet se vuelven carruseles horizontales
   para que cada sección quepa en una sola pantalla. Si en una pantalla
   muy baja el contenido no cabe, la sección simplemente crece (min-height,
   nunca height): nada se recorta ni queda inaccesible.
   Medidas del encabezado y del banner flotante: ver variables abajo.
   ===================================================================== */
html.pagina-home {
  --hh: 68px;            /* alto del encabezado pegajoso */
  --hb: 84px;            /* alto del banner flotante inferior (Reserva / Bono) */
  scroll-snap-type: y proximity;
  scroll-padding-top: var(--hh);
}
@media (min-width: 700px) {
  html.pagina-home { --hh: 69px; --hb: 82px; }
}

body.home main > section {
  box-sizing: border-box;
  min-height: calc(100vh - var(--hh));        /* respaldo navegadores sin dvh */
  min-height: calc(100dvh - var(--hh));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 0 calc(var(--hb) + 14px);     /* el banner flotante tapa el borde inferior */
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}
body.home main > section > .container { width: 100%; }

/* ---------- Hero ---------- */
body.home .hero {
  min-height: calc(100vh - var(--hh));
  min-height: calc(100dvh - var(--hh));
  padding: 0;
  justify-content: center;
}
body.home .hero-inner { padding: 24px 20px calc(var(--hb) + 10px); }
body.home .hero-texto h1 { font-size: clamp(2rem, 7.2vw, 3.4rem); line-height: 1.12; }
body.home .hero-texto h1 .h1-sub {
  font-size: clamp(0.95rem, 3.4vw, 1.25rem);
  line-height: 1.35;
  margin-top: 12px;
}

/* ---------- Tipografía y espacios compactos ---------- */
body.home main > section h2 { margin-bottom: 0.3em; font-size: clamp(1.3rem, 4.8vw, 2rem); line-height: 1.18; }
body.home main > section .lead {
  margin-bottom: 0.4em;
  font-size: 0.95rem;
  line-height: 1.42;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.home .hero .lead { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 1.15rem; }
@media (min-width: 860px) { body.home main > section .lead { font-size: 1.02rem; } }
body.home main > section .texto-centro { margin-top: 16px !important; }
body.home main > section .btn { margin-top: 12px; }

/* ---------- Chips de estadísticas ---------- */
body.home .stats-rapidas { gap: 8px; margin: 8px 0 2px; flex-wrap: nowrap; }
@media (max-width: 859px) { body.home .stats-rapidas { display: none; } }   /* las mismas cifras están en el botón "Ver las 31 rutas" */
body.home .stats-rapidas .stat-chip { min-width: 0; flex: 1 1 0; padding: 8px 10px; }
body.home .stats-rapidas .stat-chip .num { font-size: 1.25rem; }
body.home .stats-rapidas .stat-chip .lbl { font-size: 0.66rem; }

/* ---------- Tarjetas compactas (todas las del Home) ---------- */
body.home .grid-tarjetas { margin-top: 14px; gap: 14px; }
body.home .tarjeta-media { aspect-ratio: 16 / 7.5; }
body.home .tarjeta-media .placeholder-img { font-size: 0.78rem; padding: 8px; }
body.home .tarjeta-cuerpo { padding: 12px 14px 14px; }
body.home .tarjeta-cuerpo h3 {
  font-size: 1.02rem;
  margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.home .tarjeta-cuerpo p {
  font-size: 0.88rem;
  line-height: 1.4;
  margin: 0 0 8px;
  flex: 0 1 auto;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
body.home .tarjeta-cuerpo .btn { padding: 8px 14px; font-size: 0.88rem; min-height: 0; }
body.home .tarjeta-cuerpo .campo-ayuda { display: none; }      /* enlace a agencias: ya está en el menú y en "Únete" */
body.home .tarjeta-cuerpo .tarjeta-precio {
  font-size: 0.8rem; padding: 2px 0; margin: 0 0 8px; flex: 0 0 auto;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
body.home .tarjeta-cuerpo .etiqueta-tipo { margin-bottom: 4px; }
body.home .tarjeta-cuerpo .grupo-botones { margin-top: auto; gap: 8px; }
body.home .tarjeta-cuerpo .grupo-botones .btn { margin-top: 0; }

/* ---------- Móvil y tablet vertical: carruseles horizontales ---------- */
@media (max-width: 859px) {
  body.home #caminatas .grid-tarjetas,
  body.home #eventos .grid-tarjetas,
  body.home #conserva .grid-tarjetas,
  body.home .bloques-territorio {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 78%;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin: 12px -20px 0;
    padding: 4px 20px 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.home #caminatas .grid-tarjetas::-webkit-scrollbar,
  body.home #eventos .grid-tarjetas::-webkit-scrollbar,
  body.home #conserva .grid-tarjetas::-webkit-scrollbar,
  body.home .bloques-territorio::-webkit-scrollbar { display: none; }
  body.home #caminatas .grid-tarjetas > *,
  body.home #eventos .grid-tarjetas > *,
  body.home #conserva .grid-tarjetas > *,
  body.home .bloques-territorio > * { scroll-snap-align: start; }
}
@media (min-width: 560px) and (max-width: 859px) {
  body.home #caminatas .grid-tarjetas,
  body.home #eventos .grid-tarjetas,
  body.home #conserva .grid-tarjetas,
  body.home .bloques-territorio { grid-auto-columns: 46%; }
}

/* ---------- Escritorio: rejillas de 3, compactas ---------- */
@media (min-width: 860px) {
  body.home .tarjeta-media { aspect-ratio: 16 / 8; }
  body.home #conserva .tarjeta-media { aspect-ratio: 21 / 6; }
  body.home .tarjeta-cuerpo p { -webkit-line-clamp: 3; }
  body.home #conserva .tarjeta-cuerpo p { -webkit-line-clamp: 2; }
}
/* portátiles de poca altura (p. ej. 1366×768): la foto de los bonos se oculta
   para que las 6 tarjetas quepan en la pantalla */
@media (min-width: 860px) and (max-height: 860px) {
  body.home #conserva .tarjeta-media { display: none; }
  body.home .tarjeta-media { aspect-ratio: 16 / 6.5; }
  body.home .bloque-territorio .tarjeta-media { aspect-ratio: 16 / 6; }
  body.home main > section { padding-top: 14px; }
}

/* ---------- Territorio ---------- */
body.home #territorio .lead,
body.home #territorio > .container > p {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 0.4em;
}
@media (min-width: 860px) {
  body.home #territorio .lead,
  body.home #territorio > .container > p { -webkit-line-clamp: 2; max-width: none; }
}
body.home .bloques-territorio { margin-top: 14px; gap: 14px; }
body.home .bloque-territorio .tarjeta-cuerpo p { -webkit-line-clamp: 4; }

/* ---------- Cómo una visita conserva ---------- */
body.home .ciclo { gap: 10px; margin: 14px 0; }
body.home .ciclo-paso {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 12px;
  align-items: center;
}
body.home .ciclo-paso::before { grid-row: 1 / span 2; margin: 0; }
body.home .ciclo-paso h3 { margin: 0; font-size: 1rem; }
body.home .ciclo-paso p { margin: 0; font-size: 0.86rem; grid-column: 2; }
@media (min-width: 760px) {
  body.home .ciclo-paso { grid-template-columns: 1fr; text-align: left; }
  body.home .ciclo-paso::before { grid-row: auto; margin-bottom: 8px; }
  body.home .ciclo-paso p { grid-column: auto; }
}
body.home #como-conserva .container > p {
  margin-bottom: 0.5em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.home .lista-recursos { margin: 10px 0 0; gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
body.home .lista-recursos::-webkit-scrollbar { display: none; }
body.home .lista-recursos li { flex: 0 0 auto; padding: 6px 12px; font-size: 0.82rem; }
@media (min-width: 900px) {
  body.home .lista-recursos { flex-wrap: wrap; overflow: visible; }
}

/* ---------- Otras experiencias (acordeón) ---------- */
body.home #experiencias .acordeon-lista { margin-top: 10px !important; display: grid; gap: 8px; }
body.home #experiencias .acordeon-item { margin: 0 !important; }
body.home #experiencias .acordeon-cabecera { padding: 10px 14px !important; }
body.home #experiencias .acordeon-titulo { font-size: 0.98rem; line-height: 1.25; }
@media (min-width: 860px) {
  body.home #experiencias .acordeon-lista { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ---------- Únete y cierre ---------- */
body.home #alianzas .grid-tarjetas { margin-top: 14px; }
body.home #alianzas .tarjeta-cuerpo p { -webkit-line-clamp: 4; }
body.home .cierre { padding: 22px 0 calc(var(--hb) + 14px); text-align: center; }
body.home .cierre .grupo-botones .btn { margin-top: 12px; }

body.home #otras-rutas { margin: 12px 0 0 !important; font-size: 1.05rem; }
@media (max-width: 859px) { body.home .bloque-territorio .tarjeta-cuerpo p { -webkit-line-clamp: 3; } }

/* ---------- Pantallas de poca altura ---------- */
/* móvil pequeño (iPhone SE, Android compactos): foto y entradillas se omiten
   en las tarjetas para que cada sección siga cabiendo en una pantalla */
@media (max-width: 859px) and (max-height: 760px) {
  body.home #caminatas .tarjeta-media,
  body.home #eventos .tarjeta-media,
  body.home #conserva .tarjeta-media { display: none; }
  body.home #territorio .bloque-territorio .tarjeta-media { aspect-ratio: 16 / 5; }
  body.home main > section:not(.hero) .lead { display: none; }
  body.home #territorio > .container > p:nth-of-type(n+2) { display: none; }
  body.home #como-conserva .container > p { display: none; }
}
@media (min-width: 860px) and (max-height: 940px) {
  body.home .stats-rapidas { display: none; }
  body.home #conserva .tarjeta-media { display: none; }
}
@media (min-width: 860px) and (max-height: 800px) {
  body.home main > section:not(.hero) .lead { display: none; }
  body.home .tarjeta-media { aspect-ratio: 16 / 5; }
  body.home #conserva .tarjeta-cuerpo p { -webkit-line-clamp: 1; }
}
@media (min-width: 860px) and (max-height: 860px) {
  body.home main > section:not(.hero) .lead { -webkit-line-clamp: 1; }
  body.home #conserva .tarjeta-cuerpo h3 { -webkit-line-clamp: 1; }
  body.home #conserva .tarjeta-cuerpo { padding: 10px 14px 12px; }
  body.home #conserva .grid-tarjetas { margin-top: 10px; gap: 12px; }
  body.home #territorio > .container > p:nth-of-type(n+2) { display: none; }
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  html.pagina-home { scroll-snap-type: none; }
}