/* Estilos específicos de cada página pública (D9 1–7; D10 §12). Los componentes compartidos viven en componentes.css. */

/* Utilidades de espaciado: cargan últimas a propósito, para poder ajustar el margen de un componente puntual
   sin escribir CSS en línea (p. ej. una .figura dentro de una tarjeta que necesita menos separación). */
.lista-limpia { list-style: none; margin: 0; padding: 0; }
.mt-6 { margin-top: var(--e6) !important; }
.mb-4 { margin-bottom: var(--e4) !important; }

/* ---- Inicio ---- */
/* .vivir-grilla: flex en vez de grid (mismo motivo que .venir-grilla abajo) — con 10 tarjetas, cualquier ancho
   de pantalla puede dejar una última fila incompleta (2, 1 o 3 sueltas según cuántas entren por fila); con
   justify-content:center quedan centradas en vez de pegadas a la izquierda, sea cual sea esa cantidad
   (reportado por el cliente 2026-09-23). */
.vivir-grilla { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e6); }
.vivir-grilla > li { flex: 1 1 240px; max-width: 320px; }
.vivir-grilla .tarjeta { height: 100%; }
/* .venir-grilla: flex en vez de grid para que, cuando el ancho deja 2 tarjetas por fila y una tercera sola
   (p. ej. familias/), la suelta quede centrada en vez de pegada a la izquierda (reportado 2026-09-23). */
.venir-grilla { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e6); }
.venir-grilla > .tarjeta { flex: 1 1 260px; max-width: 360px; }
/* Recuadro de color por tarjeta (a pedido del cliente 2026-09-25) para que los 3 públicos de familias/ resalten
   más: un tono de la paleta por tarjeta, en el mismo orden en que aparecen (ladrillo, monte, paja). Solo en
   .venir-grilla (no en .vivir-grilla ni .merlo-grilla, que comparten la misma clase .tarjeta base). */
.venir-grilla > .tarjeta:nth-child(1) { border: 2px solid var(--ladrillo-600); }
.venir-grilla > .tarjeta:nth-child(2) { border: 2px solid var(--monte-600); }
.venir-grilla > .tarjeta:nth-child(3) { border: 2px solid var(--paja-500); }
/* Rediseño en tarjetas (2026-09-24): antes era ícono+texto centrado sin fondo — con el horario estándar de
   varias líneas (largo) al lado de textos cortos como la dirección, quedaba muy desparejo y el texto centrado
   se leía mal en varias líneas. Ahora cada dato es su propia tarjeta, alineada a la izquierda, con la misma
   altura entre sí. flex (no grid) + justify-content:center (2026-09-25, corregido: con grid y 3 tarjetas, la
   tercera quedaba sola en su fila pegada a la izquierda — mismo criterio ya usado en .venir-grilla/.vivir-grilla/
   .merlo-grilla/.flujo-visita/.accesibilidad-lista). */
.practica-resumen { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e4); }
.practica-resumen__item {
  display: flex; flex-direction: column; gap: var(--e3); text-align: left; flex: 1 1 240px; max-width: 360px;
  background: var(--arena-50); border-radius: var(--radio-tarjeta); padding: var(--e6);
}
.practica-resumen__item p { margin: 0; }
/* Detalle de promociones (nombre + descripción, no solo el nombre — a pedido del cliente 2026-09-25) dentro
   de la tarjeta de Promociones: lista compacta, sin viñeta ni el espaciado más suelto de .pila normal. */
.practica-resumen__promos-lista { margin: 0; padding: 0; list-style: none; gap: var(--e2); }
.practica-resumen__promos-lista li { font-size: 15px; }
/* Dibujo de cómo llegar (a pedido del cliente 2026-09-24; includes/mapa_ubicacion.php): en la tarjeta de
   Ubicación de Inicio/Familias y en «Cómo llegar» de Información Práctica (assets/css/componentes.css). */
.mapa-ubicacion { display: block; width: 100%; max-width: 400px; height: auto; border-radius: var(--radio-control); margin: var(--e1) 0 var(--e6); }
.practica-resumen__encabezado { display: flex; align-items: center; gap: var(--e2); font-weight: 700; color: var(--ladrillo-600); text-transform: uppercase; font-size: 13px; letter-spacing: 0.02em; }
.practica-resumen__encabezado .icono { width: 22px; height: 22px; }
/* ---- Recorrido ---- */
/* flex (no grid) + justify-content:center (2026-09-25, corregido: con grid y 3 tarjetas —o 2 cuando la luna
   está deshabilitada—, la última quedaba sola en su fila pegada a la izquierda; mismo criterio que
   .practica-resumen y el resto de las grillas de 3 del sitio). */
.modalidades-grilla { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e6); }
.modalidad { background: var(--blanco); border-radius: var(--radio-tarjeta); padding: var(--e6); flex: 1 1 260px; max-width: 360px; }
.modalidad .icono { width: 32px; height: 32px; color: var(--ladrillo-600); margin-bottom: var(--e2); }

/* Mapa del circuito: boceto ilustrado, a pedido del cliente (2026-09-23), para ver cómo podría lucir un mapa
   del recorrido. El fondo (sierras, sol, sendero, arbolitos) es un SVG decorativo (aria-hidden); las 6
   estaciones son texto real (enlace a la escena correspondiente en el acordeón de abajo), nunca solo imagen. */
.mapa-circuito { position: relative; width: 100%; aspect-ratio: 2 / 1; border-radius: var(--radio-tarjeta); overflow: hidden; background: linear-gradient(180deg, var(--arena-50) 0%, var(--piedra-100) 100%); }
.mapa-circuito__fondo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mapa-circuito__estaciones { position: absolute; inset: 0; }
.mapa-circuito__estacion { position: absolute; transform: translate(-50%, -50%); }
/* 8 estaciones (2026-09-24, a pedido del cliente: pintura, casas-pozo, telar, molienda, danza ritual,
   pictografías, fuerte español, tiro con arco, en ese orden) — antes eran 6; posiciones recalculadas en zigzag
   a lo largo del sendero punteado del fondo (ver el path en recorrido/index.php). */
.mapa-circuito__estacion--1 { left: 8%; top: 78%; }
.mapa-circuito__estacion--2 { left: 20%; top: 32%; }
.mapa-circuito__estacion--3 { left: 33%; top: 68%; }
.mapa-circuito__estacion--4 { left: 46%; top: 30%; }
.mapa-circuito__estacion--5 { left: 59%; top: 68%; }
.mapa-circuito__estacion--6 { left: 72%; top: 30%; }
.mapa-circuito__estacion--7 { left: 85%; top: 68%; }
.mapa-circuito__estacion--8 { left: 95%; top: 25%; }
.mapa-circuito__estacion a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; }
.mapa-circuito__estacion .escena__numero { box-shadow: 0 2px 6px rgba(31,27,24,0.25); transition: transform 150ms cubic-bezier(0.2,0,0,1); }
.mapa-circuito__estacion a:hover .escena__numero, .mapa-circuito__estacion a:focus-visible .escena__numero { transform: scale(1.12); background: var(--ladrillo-600); }
.mapa-circuito__estacion a:focus-visible { outline: 3px solid var(--cielo-700); outline-offset: 3px; border-radius: 999px; }
.mapa-circuito__nombre { font-size: 12px; font-weight: 700; color: var(--piedra-950); background: var(--arena-50); padding: 1px 7px; border-radius: 999px; white-space: nowrap; box-shadow: 0 1px 3px rgba(31,27,24,0.15); }
@media (max-width: 639px) { .mapa-circuito { aspect-ratio: 1 / 1; } .mapa-circuito__nombre { font-size: 10px; padding: 1px 5px; } .mapa-circuito__estacion .escena__numero { width: 28px; height: 28px; font-size: 12px; } }

/* ---- Comechingones ---- */
.comechingones-indice { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); margin: 0; padding: 0; list-style: none; }
.comechingones-indice a { font-weight: 600; }
.comechingones-articulo section { padding-block: var(--e6); border-top: 1px solid var(--piedra-200); scroll-margin-top: 96px; }
.comechingones-articulo section:first-child { border-top: none; padding-top: 0; }
.quienes-somos { background: var(--piedra-100); border-radius: var(--radio-tarjeta); padding: var(--e6); }
/* Ilustraciones de línea por sección (a pedido del cliente 2026-09-22; ver includes/ilustraciones.php: son
   dibujos simples hechos a mano en SVG, no ilustraciones artísticas ni generadas por IA). */
.comechingones-titulo { display: flex; align-items: center; gap: var(--e4); margin-bottom: var(--e3); }
.comechingones-titulo h2 { margin: 0; }
.comechingones-titulo .ilustracion {
  flex: none; padding: var(--e2); background: var(--monte-100); border-radius: 50%; color: var(--monte-800);
}
/* Foto de la escultura correspondiente del recorrido (docu/15 §16): distinta de la ilustración de línea del
   título, que representa el dato histórico; esta muestra cómo Yucat lo recrea hoy (ver figcaption). */
.comechingones-foto { margin-top: var(--e6); }
.comechingones-foto figcaption { margin-top: var(--e2); font-size: 14px; font-weight: 600; color: var(--piedra-600); }

/* ---- Colegios y Grupos ---- */
.publicos-tabs { display: grid; gap: var(--e6); }
@media (min-width: 900px) { .publicos-tabs { grid-template-columns: 1fr 1fr; } }
.publico-panel { background: var(--blanco); border-radius: var(--radio-tarjeta); padding: var(--e6); }
.publico-panel ul { margin: 0 0 var(--e4); padding-inline-start: 22px; }
.publico-panel li { margin-bottom: var(--e2); }
/* flex + justify-content:center (mismo criterio que .accesibilidad-lista y el resto de las grillas de esta
   ronda, 2026-09-24): con grid, una última fila incompleta de pasos quedaba pegada a la izquierda. */
.flujo-visita { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e4); counter-reset: paso; margin: var(--e6) 0; padding: 0; }
.flujo-visita li { list-style: none; text-align: center; flex: 1 1 150px; max-width: 200px; }
.flujo-visita li::before {
  counter-increment: paso; content: counter(paso); display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin: 0 auto var(--e2); border-radius: 50%; background: var(--monte-800); color: var(--arena-50);
  font-weight: 700; font-size: 14px;
}

/* ---- Información Práctica ---- */
.info-indice { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); margin: 0 0 var(--e6); padding: 0; list-style: none; }
.info-indice a { font-weight: 600; }
.info-practica section { scroll-margin-top: 96px; }
/* flex + justify-content:center (mismo criterio que .venir-grilla/.vivir-grilla/.merlo-grilla, 2026-09-24): con
   grid, la última fila incompleta quedaba pegada a la izquierda en vez de centrada. base 320px → caben 3 por
   fila en el ancho del .contenedor por defecto (1200px), menos si la pantalla es más angosta. */
.accesibilidad-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e4); margin: var(--e6) 0; padding: 0; list-style: none; }
.accesibilidad-lista li { display: flex; gap: var(--e3); align-items: flex-start; flex: 1 1 320px; max-width: 360px; }
.accesibilidad-lista .icono { flex: none; width: 28px; height: 28px; color: var(--monte-800); }

/* ---- Qué hacer en Merlo ---- */
/* flex + justify-content:center desde el vamos (mismo criterio que .vivir-grilla/.venir-grilla, 2026-09-23):
   con 7 lugares, la última fila casi siempre queda incompleta según el ancho de pantalla. */
.merlo-grilla { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e6); }
.merlo-grilla > li { flex: 1 1 280px; max-width: 360px; }
.merlo-grilla .tarjeta { height: 100%; }

/* ---- Galería ---- */