/* Componentes globales y compartidos (D9 A–E; D10 §7, §8, §15). */

/* ---- Motion (D10 §10): muy moderado, solo confirma la acción ---- */
a, .boton, .chip, .tarjeta__media img, .menu-disclosure__boton, .acordeon__item summary::after {
  transition: background-color 150ms cubic-bezier(0.2,0,0,1), border-color 150ms cubic-bezier(0.2,0,0,1), color 150ms cubic-bezier(0.2,0,0,1), transform 200ms cubic-bezier(0.2,0,0,1);
}
.tarjeta { transition: transform 200ms cubic-bezier(0.2,0,0,1), box-shadow 200ms cubic-bezier(0.2,0,0,1); }
.tarjeta:has(a:hover), .tarjeta:has(a:focus-visible) { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31,27,24,0.12); }
.tarjeta:hover .tarjeta__media img, .tarjeta:hover .tarjeta__media .ilustracion { transform: scale(1.03); }
img { transition: opacity 200ms linear; }

/* ================================================================ Aviso global (D9-A; D10 §8.1) */
.aviso-global { background: var(--alerta-fondo); border-bottom: 4px solid var(--alerta-borde); color: var(--piedra-950); padding-block: var(--e4); }
.aviso-global__interior { display: flex; align-items: flex-start; gap: var(--e3); }
.aviso-global__icono { flex: none; width: 20px; height: 20px; color: var(--alerta-borde); }
.aviso-global__texto { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.aviso-global .etiqueta { color: var(--piedra-950); }
@media (min-width: 640px) { .aviso-global__icono { width: 24px; height: 24px; } .aviso-global__texto { font-size: 17px; } }

/* ================================================================ Header y navegación (D9-B; D10 §7.2) */
.sitio-header { position: sticky; top: 0; z-index: 40; background: var(--arena-50); border-bottom: 1px solid var(--piedra-300); }
.sitio-header__interior { display: flex; align-items: center; gap: var(--e4); padding-block: var(--e2); }
.sitio-header__email {
  display: none; color: var(--bordo-700); font-family: var(--fuente-cuerpo); font-size: 14px;
  font-weight: 700; text-decoration: none; white-space: nowrap; flex-shrink: 0;
  /* El header usa .contenedor--amplio (1360) pero el resto del sitio, incluida la franja de abajo
     con «Instagram», usa .contenedor (1200): este margen lleva el final del email al mismo borde que
     Instagram. Se calcula con el ancho de la ventana (no 80px fijos): entre 1360 y 1400px el contenedor
     amplio todavía no llegó a su máximo y los 80px fijos lo corrían de más a la izquierda (2026-10-22). */
  /* «− 1.4em»: unos 5 espacios más a la derecha, para separarlo de «Galería»; ya no termina exactamente donde
     Instagram (a pedido del cliente 2026-10-22). */
  margin-inline-end: max(0px, calc(min(100vw, var(--contenedor-amplio) + 2 * var(--margen)) / 2 - var(--contenedor) / 2 - var(--margen) - 1.4em));
}
.sitio-header__email:hover, .sitio-header__email:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Mismo corte que .nav-principal (el menú horizontal): aparece en la misma línea que ese menú, y
   recién existe a partir de ahí (D10 §7.2, a pedido del cliente 2026-10-15). */
@media (min-width: 1360px) { .sitio-header__email { display: inline-flex; } }
.logo { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.logo img { height: 40px; width: auto; }
@media (min-width: 1360px) { .logo img { height: 48px; } }

.nav-principal { display: none; flex: 1 1 auto; min-width: 0; }
.nav-principal ul { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 0; padding: 0; list-style: none; }
.nav-principal a, .menu-disclosure__panel a, .barra-movil__panel a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--piedra-950); font-family: var(--fuente-cuerpo); font-size: 16px; font-weight: 600;
  letter-spacing: 0.01em; text-decoration: none; border-radius: 999px;
}
.nav-principal a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.nav-principal a[aria-current="page"], .menu-disclosure__panel a[aria-current="page"], .barra-movil__panel a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--ladrillo-600); text-decoration-thickness: 3px; text-underline-offset: 8px;
}
.nav-principal a.nav-destacado, .menu-disclosure__panel a.nav-destacado, .barra-movil__panel a.nav-destacado { background: var(--ladrillo-100); color: var(--ladrillo-700); }

/* Botón «Menú» del header: visible en celular, tablet y notebooks más chicas (hasta 1359px; a pedido del
   cliente 2026-09-27, además de la barra inferior móvil ya existente — ver nota de 8 páginas abajo) */
.menu-disclosure { position: relative; margin-inline-start: auto; flex-shrink: 0; }
.menu-disclosure__boton {
  display: flex; align-items: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e4);
  border: 2px solid var(--piedra-300); border-radius: 999px; list-style: none; cursor: pointer;
  font-family: var(--fuente-cuerpo); font-weight: 700; font-size: 16px; color: var(--piedra-950);
  user-select: none;
}
.menu-disclosure__boton::-webkit-details-marker { display: none; }
.menu-disclosure__boton:hover { border-color: var(--piedra-500); }
.menu-disclosure[open] .menu-disclosure__boton { background: var(--piedra-100); }
.menu-disclosure__panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: min(320px, 90vw);
  background: var(--blanco); border: 1px solid var(--piedra-200); border-radius: var(--radio-tarjeta);
  box-shadow: 0 12px 32px rgba(31,27,24,0.16); padding: var(--e4);
}
.menu-disclosure__panel ul { margin: 0 0 var(--e3); padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.menu-disclosure__panel a { width: 100%; }

.sitio-header__interior > .nav-principal { display: none; }

/* Corte movido de 1200 a 1360px (D9-B original preveía 7 páginas; con las 8 actuales, 1200px no alcanza
   para el logo + el menú completo + el botón sin comprimir el logo — verificado de 1200 a 2560px de ancho).
   Debajo de 1360px sigue disponible el botón «Menú» del header (ahora también en celular). */
@media (min-width: 1360px) {
  .sitio-header__interior > .nav-principal { display: block; }
  .sitio-header__interior > .menu-disclosure { display: none; }
  .nav-principal ul { gap: 0; flex-wrap: nowrap; }
  .nav-principal a { padding: 0 11px; white-space: nowrap; }
}
@media (min-width: 1500px) {
  .nav-principal a { padding: 0 14px; }
}

/* ================================================================ Franja «Hoy» (D9-D; D10 §7.4) */
.franja-hoy { background: var(--monte-100); border-bottom: 1px solid var(--piedra-200); }
.franja-hoy__interior { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e4); padding-block: var(--e2); font-size: 15px; }
.franja-hoy__estado { margin: 0; font-weight: 700; color: var(--monte-800); }
/* Texto en rojo/verde según el estado (a pedido del cliente 2026-09-24); «consultar» (estadoClase vacía) queda
   en el color neutro de arriba, porque no hay abierto/cerrado que afirmar. */
.franja-hoy__estado--abierto { color: var(--exito-700); }
.franja-hoy__estado--cerrado { color: var(--error-700); }
.franja-hoy__estado--abierto::before { content: "● "; color: var(--exito-700); }
.franja-hoy__estado--cerrado::before { content: "● "; color: var(--error-700); }
.franja-hoy__estado--grande { font-size: 20px; }
/* Ícono clicable al lado del mensaje, a pedido del cliente (2026-09-24): lleva a la sección Horarios de
   Información Práctica. */
.franja-hoy__ver { display: inline-flex; vertical-align: middle; margin-inline-start: 4px; color: inherit; }
.franja-hoy__ver .icono { width: 18px; height: 18px; }
.franja-hoy__ver:hover, .franja-hoy__ver:focus-visible { color: var(--ladrillo-600); }
.franja-hoy__enlaces { display: flex; gap: var(--e4); }
.franja-hoy__enlaces a { color: var(--monte-800); font-weight: 600; text-decoration-thickness: 1px; }
@media (max-width: 767px) { .franja-hoy__enlaces { display: none; } } /* la barra inferior ya ofrece estos accesos */

/* ================================================================ Barra inferior móvil (D9-C; D10 §7.3) */
.barra-movil {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--blanco); border-top: 1px solid var(--piedra-300);
  padding: 6px max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  grid-template-columns: repeat(4, 1fr); align-items: stretch;
  box-shadow: 0 -4px 16px rgba(31,27,24,0.08);
}
@media (max-width: 767px) { .barra-movil { display: grid; } body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } }
.barra-movil > a, .barra-movil__menu > summary {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px; padding: 4px; border-radius: var(--radio-control);
  color: var(--piedra-800); text-decoration: none; font-size: 12px; font-weight: 600; cursor: pointer; list-style: none;
}
.barra-movil__menu > summary::-webkit-details-marker { display: none; }
.barra-movil > a:hover, .barra-movil > a:active { background: var(--piedra-100); }
.barra-movil .icono { color: var(--ladrillo-600); }
.barra-movil__menu { position: static; }
.barra-movil__panel {
  position: fixed; left: 12px; right: 12px; bottom: calc(64px + env(safe-area-inset-bottom) + 8px); z-index: 60;
  background: var(--blanco); border: 1px solid var(--piedra-200); border-radius: var(--radio-tarjeta);
  box-shadow: 0 -12px 32px rgba(31,27,24,0.18); padding: var(--e4); max-height: 70vh; overflow-y: auto;
}
.barra-movil__panel ul { margin: 0 0 var(--e3); padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.barra-movil__panel a { width: 100%; }

/* ================================================================ Botones (D10 §7.6) */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 48px; padding: 0 28px; border-radius: var(--radio-control);
  font-family: var(--fuente-cuerpo); font-size: 16px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.1;
  text-align: center; text-decoration: none; border: 2px solid transparent; cursor: pointer;
}
.boton--principal { background: var(--ladrillo-600); color: var(--blanco); }
.boton--principal:hover, .boton--principal:active { background: var(--ladrillo-700); text-decoration: none; }
.boton--secundario { background: transparent; border-color: var(--monte-800); color: var(--monte-800); }
.boton--secundario:hover { background: var(--monte-100); text-decoration: none; }
.boton--sobre-oscuro { background: var(--paja-500); color: var(--piedra-950); }
.boton--sobre-oscuro:hover { background: #c7943a; text-decoration: none; }
.boton--secundario-oscuro { background: transparent; border-color: var(--arena-50); color: var(--arena-50); }
.boton--secundario-oscuro:hover { background: rgba(250,248,243,0.12); text-decoration: none; }
.boton--ancho { width: 100%; }

/* ================================================================ Hero (D9 Inicio; D10 §7.5, §5.5) */
.hero { position: relative; background: var(--monte-900); color: var(--arena-50); overflow: hidden; }
.hero__interior { position: relative; z-index: 2; padding-block: var(--e20); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--e4); }
@media (min-width: 1024px) { .hero__interior { padding-block: 140px; } }
.hero__eyebrow { color: var(--paja-500); }
.hero__titulo { color: var(--blanco); margin: 0; }
.hero__bajada { max-width: 640px; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); color: var(--monte-200); margin: 0; }
.hero__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e3); margin-top: var(--e2); }

/* Patrón decorativo del hero cuando no hay foto (bloque visual sin fotografía, motivos de D10 §1.3/§19: morteros,
   arquería, telar, casas-pozo estilizados en trazo simple, nunca una imagen fotorrealista fabricada). */
.hero--sin-foto { background: radial-gradient(120% 140% at 15% -10%, #2c4d3d 0%, var(--monte-900) 55%), var(--monte-900); }
.hero--sin-foto::before {
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0.5; pointer-events: none;
  background-image:
    radial-gradient(3px 3px at 8% 20%, var(--paja-500) 0, transparent 60%),
    radial-gradient(3px 3px at 22% 72%, var(--paja-500) 0, transparent 60%),
    radial-gradient(3px 3px at 40% 30%, var(--monte-600) 0, transparent 60%),
    radial-gradient(3px 3px at 68% 65%, var(--paja-500) 0, transparent 60%),
    radial-gradient(3px 3px at 85% 22%, var(--monte-600) 0, transparent 60%),
    radial-gradient(3px 3px at 92% 78%, var(--paja-500) 0, transparent 60%);
  background-size: 100% 100%;
}
/* Hero con foto (D10 §5.1/§5.2): proporción propia (16:9 escritorio, 4:5 móvil) en vez de alto por relleno, y
   texto anclado abajo — así el degradado solo necesita ser fuerte donde está el texto y la foto se sigue viendo
   arriba (D10 §5.5: «la foto debe seguir luciendo»). */
/* width:100% explícito: sin él, con aspect-ratio + max-height y ancho «auto» (relleno de bloque), algunos
   navegadores resuelven ambas dimensiones desde el aspect-ratio y ENCOGEN el ancho en pantallas muy anchas
   en vez de solo recortar el alto (reportado: no llenaba el 100% al maximizar la ventana). */
.hero--con-foto { width: 100%; padding: 0; aspect-ratio: 16 / 9; min-height: 460px; max-height: 720px; }
@media (max-width: 639px) { .hero--con-foto { aspect-ratio: unset; min-height: 560px; max-height: none; } }
.hero--con-foto .hero__media { position: absolute; inset: 0; z-index: 0; }
.hero--con-foto .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero--con-foto .hero__media::after { /* scrim ≥0,65 D10 §5.5 en la franja del texto; se desvanece a 0 arriba */
  content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(31,27,24,0.82) 0%, rgba(31,27,24,0.7) 40%, rgba(31,27,24,0.2) 68%, rgba(31,27,24,0) 100%);
}
.hero--con-foto .hero__interior { position: absolute; inset: 0; justify-content: flex-end; padding-bottom: var(--e12); }
/* El eyebrow dorado (--paja-500) pierde contraste sobre una foto clara: cae en la franja del degradado donde
   la opacidad ya bajó (reportado por el cliente 2026-09-23, «se confunde por el color de las letras»). Blanco
   + sombra de texto, igual que el título, en vez de depender solo del scrim. */
.hero--con-foto .hero__eyebrow { color: var(--blanco); text-shadow: 0 1px 6px rgba(0,0,0,0.6); }

/* Rotación de fotos de portada (D8 §18, a pedido del cliente 2026-10-01). Las 3 imágenes quedan apiladas en
   el mismo lugar (position:absolute, ya lo hereda de .hero__media img de arriba) y se cruzan con una
   transición de opacidad; sin JavaScript queda fija la primera (ver :first-child). */
.hero__media--rotativa img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.hero__media--rotativa img:first-child,
.hero__media--rotativa img.hero__media--activa { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__media--rotativa img { transition: none; } }

/* ================================================================ Bandas y secciones (D10 §6.4) */
.banda-oscura { background: var(--monte-800); color: var(--arena-50); }
.banda-oscura .etiqueta { color: var(--paja-500); }
/* Centrado — decisión final del cliente (2026-09-23), tras probar también la alineación a la izquierda. */
.banda-oscura__interior { display: grid; gap: var(--e6); align-items: center; justify-content: center; }
.banda-oscura__texto { max-width: 640px; text-align: center; }

/* ================================================================ Tarjetas (D10 §7.7) */
.tarjeta { background: var(--blanco); border-radius: var(--radio-tarjeta); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(31,27,24,0.06); }
.tarjeta--enlace { text-decoration: none; color: inherit; }
/* Técnica de padding-top en vez de aspect-ratio: dentro de una grilla, con una foto fuente de orientación
   vertical (p. ej. recreacion-telar, 2:3), aspect-ratio + object-fit dejaba que la relación intrínseca del
   <img> (por sus atributos width/height) se filtrara en el cálculo de alto «auto» de la fila del grid,
   agrandando la fila entera (detectado 2026-09-23 al sumar la primera foto retrato a .vivir-grilla). El
   padding-top se resuelve siempre contra el ANCHO de la propia caja, sin esa ambigüedad, y con el <img> en
   position:absolute no participa del cálculo de tamaño intrínseco del contenedor bajo ninguna circunstancia. */
.tarjeta__media { position: relative; width: 100%; padding-top: 66.6667%; background: var(--piedra-200); overflow: hidden; }
.tarjeta__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tarjeta__media .ilustracion { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform 200ms cubic-bezier(0.2,0,0,1); }
.tarjeta__cuerpo { padding: var(--e4); display: flex; flex-direction: column; gap: var(--e2); flex: 1; }
.tarjeta__titulo { margin: 0; font-size: 20px; }
.tarjeta__texto { margin: 0; color: var(--piedra-700); font-size: 16px; }
.tarjeta__enlace { margin-top: auto; font-weight: 700; }

/* Tarjeta / bloque SIN fotografía: patrón geométrico propio en vez de una foto (instrucción explícita del cliente
   para escenas sin imagen aprobada — nunca un gris vacío ni una imagen inventada). */
.tarjeta__media--patron {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--piedra-100) 25%, var(--monte-100) 25% 50%, var(--piedra-100) 50% 75%, var(--monte-100) 75%);
  background-size: 32px 32px;
}
.tarjeta__media--patron .icono { width: 25%; height: 25%; min-width: 48px; min-height: 48px; color: var(--monte-800); opacity: 0.85; }
.tarjeta__aviso {
  display: inline-flex; align-items: center; gap: var(--e1); margin-top: var(--e1);
  font-size: 13px; font-weight: 700; color: var(--paja-700); letter-spacing: 0.02em;
}

/* ================================================================ Chips y etiquetas (D10 §7.16) */
.chips { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--e4);
  border-radius: 999px; background: var(--piedra-200); color: var(--piedra-950);
  font-size: 15px; font-weight: 600; text-decoration: none; border: 2px solid transparent; cursor: pointer;
}
.chip[aria-current="true"], .chip:hover { background: var(--ladrillo-100); color: var(--ladrillo-700); }
.chip:focus-visible { outline: 3px solid var(--cielo-700); outline-offset: 2px; }

/* ================================================================ FAQ / acordeón (nativo <details>, D10 §7.9) */
.acordeon { border-top: 1px solid var(--piedra-300); }
.acordeon__item { border-bottom: 1px solid var(--piedra-300); }
.acordeon__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  padding-block: var(--e4); cursor: pointer; font-family: var(--fuente-titulo); font-weight: 600; font-size: 18px; list-style: none;
}
.acordeon__item summary::-webkit-details-marker { display: none; }
.acordeon__item summary::after {
  content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--piedra-100);
  display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--ladrillo-600);
}
.acordeon__item[open] summary::after { content: "–"; }
.acordeon__item p { padding-bottom: var(--e4); color: var(--piedra-700); }

/* Escenas del Recorrido: mismo patrón visual que la FAQ, con número de estación (D10 §7.5 número de estación) */
.escena summary { align-items: flex-start; }
.escena__numero {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--monte-800); color: var(--arena-50);
  font-family: var(--fuente-cuerpo); font-weight: 700; font-size: 15px;
}
.escena summary { align-items: center; }
.escena__titulo { flex: 1; }
.escena__detalle { display: grid; gap: var(--e6); padding-bottom: var(--e6); }
@media (min-width: 768px) { .escena__detalle { grid-template-columns: 5fr 7fr; align-items: center; } }
.escena__detalle img { border-radius: var(--radio-tarjeta); width: 100%; }
.escena__detalle .tarjeta__media--patron { border-radius: var(--radio-tarjeta); aspect-ratio: 3 / 2; }
.escena__titulo { margin: 0; font-family: var(--fuente-titulo); font-weight: 600; font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem); line-height: 1.25; }
.escena__fuente { font-size: 14px; color: var(--piedra-600); }
/* Botón «expandir / contraer todas» de las escenas (2026-10-22, a pedido del cliente): en la línea del título,
   a la derecha y centrado sobre los «+ / –» de cada escena — mismo círculo, área táctil de 44px (el margen
   negativo compensa la diferencia: (44 − 28) / 2). Muestra el ícono de la acción que hace. */
.acordeon-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); margin-bottom: var(--e4); }
.acordeon-cabecera > h2 { margin: 0; }
.acordeon-cabecera__todas {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin-inline-end: -8px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; color: var(--ladrillo-600);
}
.acordeon-cabecera__todas[hidden] { display: none; }
.acordeon-cabecera__circulo {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--piedra-100); transition: background-color 150ms cubic-bezier(0.2,0,0,1);
}
.acordeon-cabecera__todas:hover .acordeon-cabecera__circulo { background: var(--piedra-200); }
.acordeon-cabecera__circulo .icono:last-child, .acordeon-cabecera__todas[data-abiertas] .acordeon-cabecera__circulo .icono:first-child { display: none; }
.acordeon-cabecera__todas[data-abiertas] .acordeon-cabecera__circulo .icono:last-child { display: block; }

/* ================================================================ Dato histórico / recreación / distinciones / acuerdos (D10 §14; Comechingones) */
.dato-historico, .recreacion, .distinciones, .acuerdos {
  border-radius: var(--radio-tarjeta); padding: var(--e4) var(--e6); margin: var(--e6) 0;
  display: flex; gap: var(--e3);
}
.dato-historico { background: var(--monte-100); border-inline-start: 5px solid var(--monte-800); }
.dato-historico .etiqueta { color: var(--monte-800); }
.recreacion { background: var(--ladrillo-100); border-inline-start: 5px solid var(--ladrillo-600); }
.recreacion .etiqueta { color: var(--ladrillo-700); }
.distinciones { background: var(--paja-100); border-inline-start: 5px solid var(--paja-500); }
.distinciones .etiqueta { color: var(--paja-700); }
.acuerdos { background: var(--cielo-100); border-inline-start: 5px solid var(--cielo-700); }
.acuerdos .etiqueta { color: var(--cielo-700); }
.dato-historico p, .recreacion p, .distinciones p, .acuerdos p { margin: 0; }
.distinciones ul { margin: 0; padding-inline-start: 1.1em; display: grid; gap: var(--e1); }
.dato-historico__icono, .recreacion__icono, .distinciones__icono, .acuerdos__icono { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.dato-historico__icono { color: var(--monte-800); }
.recreacion__icono { color: var(--ladrillo-700); }
.distinciones__icono { color: var(--paja-700); }
.acuerdos__icono { color: var(--cielo-700); }

/* ================================================================ Formularios (D10 §7.10) */
.formulario { display: flex; flex-direction: column; gap: var(--e4); max-width: 560px; }
.campo { display: flex; flex-direction: column; gap: var(--e1); }
.campo label { font-weight: 600; font-size: 16px; }
.campo input, .campo textarea {
  min-height: 48px; padding: 12px 14px; border: 2px solid var(--piedra-500); border-radius: var(--radio-control);
  font-family: var(--fuente-cuerpo); font-size: 17px; background: var(--blanco); color: var(--piedra-950);
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--cielo-700); outline-offset: 1px; border-color: var(--cielo-700); }
.campo-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot */
.formulario__ayuda { font-size: 15px; color: var(--piedra-700); margin: 0; }
/* CAPTCHA del formulario de consulta (2026-09-25), mismo estilo que el de /admin/login.php. */
.captcha__imagen { height: 70px; width: 220px; border-radius: var(--radio-control); border: 1px solid var(--piedra-500); display: block; }
/* Botón con apariencia de enlace (2026-09-26): «Generar otro código» tiene que ser un <button type="submit">
   para mandar el formulario por POST (D8 §10, a pedido del cliente: mantener lo ya escrito al recargar el
   captcha), no un <a>, pero visualmente sigue pareciendo un enlace de texto normal. */
.enlace-boton { background: none; border: none; padding: 0; font: inherit; color: var(--cielo-700); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
/* Resultado del envío del formulario de consulta (contacto/enviar.php redirige acá con un mensaje). */
.formulario__mensaje { border-radius: var(--radio-control); padding: var(--e3) var(--e4); font-size: 15px; margin: 0 0 var(--e4); }
.formulario__mensaje--exito { background: var(--exito-100); color: var(--exito-700); }
.formulario__mensaje--error { background: var(--error-100); color: var(--error-700); }
.formulario__alterno { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e2); color: var(--piedra-700); }
.formulario__alterno::before, .formulario__alterno::after { content: ""; flex: 1; height: 1px; background: var(--piedra-300); }

/* ================================================================ CTA (D10 §7.12) */
.cta { text-align: center; }
.cta__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e4); margin-top: var(--e4); }
.cta__nota { margin-top: var(--e4); font-size: 15px; }

/* ================================================================ Precios (D10 §7.11) */
.precio { display: flex; align-items: baseline; gap: var(--e2); }
.precio__categoria { font-weight: 600; color: var(--piedra-700); font-size: 18px; }
.precio__importe { font-family: var(--fuente-cuerpo); font-weight: 700; font-size: 28px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 640px) { .precio__importe { font-size: 32px; } }
.lista-precios { display: flex; flex-direction: column; gap: var(--e3); margin: 0; padding: 0; list-style: none; }
.lista-precios li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e4); padding-block: var(--e2); border-bottom: 1px solid var(--piedra-200); }
/* Tarjeta que resalta precios y promociones dentro de Tarifas (a pedido del cliente 2026-09-24): es la
   información que más se busca en la página. */
.tarifas-destacado { background: var(--paja-100); border-radius: var(--radio-tarjeta); padding: var(--e6); margin: var(--e4) 0; }
.tarifas-destacado .lista-precios li { border-bottom-color: var(--paja-500); }
.tarifas-destacado h3 { margin-top: var(--e6); }
.tarifas-destacado h3:first-child { margin-top: 0; }
/* Medios de pago (a pedido del cliente 2026-09-24): ícono + texto, sin imágenes de logos de tarjetas de
   terceros (evita depender de marcas registradas de Visa/Mastercard/etc. que no fueron provistas). */
.medios-pago { display: flex; flex-wrap: wrap; gap: var(--e4) var(--e6); margin: var(--e4) 0 var(--e6); padding: 0; list-style: none; }
.medios-pago li { display: flex; flex-direction: column; align-items: center; gap: var(--e2); width: 120px; text-align: center; font-size: 16px; color: var(--piedra-700); }
.medios-pago .icono { color: var(--monte-800); }
.consultar-bloque { display: block; background: var(--paja-100); border-radius: var(--radio-tarjeta); padding: var(--e4) var(--e6); color: var(--paja-700); font-weight: 600; }
/* Horario estándar: el renglón de la época del año, en otro color y en negrita para que se vea primero (2026-10-23,
   a pedido del cliente; includes/horarios.php, horario_estandar_html()). */
.horario-vigente { color: var(--ladrillo-700); font-weight: 800; }
/* Variante clicable: los avisos de contingentes ahora llevan al formulario de consulta (2026-09-24). */
a.consultar-bloque { text-decoration: none; }
a.consultar-bloque:hover { background: var(--paja-100); filter: brightness(0.97); text-decoration: underline; }

/* ================================================================ Mapa / cómo llegar (D10 §13.1) */
.como-llegar { display: grid; gap: var(--e6); align-items: start; }
@media (min-width: 900px) { .como-llegar { grid-template-columns: 1fr 1fr; } }
/* Pasos de la ruta (adaptación al sistema visual del sitio de informacion/como_llegar.jpg, 2026-09-24):
   mismo patrón de círculo numerado que .flujo-visita, en columna angosta en vez de grilla. */
.como-llegar-pasos { list-style: none; margin: var(--e2) 0 var(--e8); padding: 0; display: grid; gap: var(--e3); counter-reset: paso; }
.como-llegar-pasos li { display: flex; align-items: flex-start; gap: var(--e3); }
.como-llegar-pasos li::before {
  counter-increment: paso; content: counter(paso); flex: none; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-top: 2px; border-radius: 50%; background: var(--monte-800); color: var(--arena-50);
  font-weight: 700; font-size: 13px;
}
/* Mapa embebido de Google (D10 §13.1; habilitado 2026-09-24 — ver frame-src en config/parametros.php): el
   embed clásico de «Compartir > Insertar un mapa» no necesita clave de API, a diferencia de la Maps
   Embed API con JavaScript que D10 daba por asumida. aspect-ratio se mantiene para no romper el layout de
   .como-llegar; overflow:hidden para que el iframe respete el border-radius de la tarjeta. */
.mapa-marcador { aspect-ratio: 4 / 3; border-radius: var(--radio-tarjeta); overflow: hidden; background: var(--piedra-100); }
.mapa-marcador iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ================================================================ Galería (D10 §7.13) */
.galeria-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .galeria-grilla { grid-template-columns: repeat(3, 1fr); gap: var(--e4); } }
@media (min-width: 1024px) { .galeria-grilla { grid-template-columns: repeat(4, 1fr); } }
/* padding-top en vez de aspect-ratio, mismo motivo que .tarjeta__media arriba: la galería (ronda 2026-09-23)
   incluye fotos retrato (p. ej. ritual-grupo) dentro de este mismo grid. */
.galeria-grilla li { position: relative; margin: 0; padding-top: 66.6667%; border-radius: var(--radio-control); overflow: hidden; background: var(--piedra-200); }
.galeria-grilla img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Encuadre por foto ('encuadre' en includes/imagenes.php, 2026-10-24): en una foto vertical recortada a 3:2, «arriba»
   deja a la vista la cabeza y una franja del techo en vez del centro. */
.encuadre-arriba { object-position: 50% 0; }
.galeria-grilla a { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }

/* Filtro de galería, sin JavaScript: radios ocultos + chips-etiqueta (D9-7; D10 §7.13). Ampliado a 8 categorías
   reales en la ronda 2026-09-23 (docu/15 §16) — una regla por categoría, mismo patrón que antes. */
#gf-parque:checked ~ .galeria-grilla li:not([data-categoria="parque"]),
#gf-espacios:checked ~ .galeria-grilla li:not([data-categoria="espacios"]),
#gf-actividades:checked ~ .galeria-grilla li:not([data-categoria="actividades"]),
#gf-colegios:checked ~ .galeria-grilla li:not([data-categoria="colegios"]),
#gf-cultura:checked ~ .galeria-grilla li:not([data-categoria="cultura"]),
#gf-naturaleza:checked ~ .galeria-grilla li:not([data-categoria="naturaleza"]) { display: none; }
#gf-todas:checked ~ .chips label[for="gf-todas"],
#gf-parque:checked ~ .chips label[for="gf-parque"],
#gf-espacios:checked ~ .chips label[for="gf-espacios"],
#gf-actividades:checked ~ .chips label[for="gf-actividades"],
#gf-colegios:checked ~ .chips label[for="gf-colegios"],
#gf-cultura:checked ~ .chips label[for="gf-cultura"],
#gf-naturaleza:checked ~ .chips label[for="gf-naturaleza"] { background: var(--ladrillo-100); color: var(--ladrillo-700); }

/* Página de foto individual (galeria/foto/, 2026-09-24): sin JavaScript, navegación anterior/siguiente con
   <a> normales — cada click es una carga de página nueva, así que el «efecto al pasar de foto en foto»
   pedido por el cliente es una animación CSS de aparición en cada carga (prefers-reduced-motion la anula,
   ver base.css). -webkit-user-drag/user-select desalientan arrastrar o seleccionar la imagen para guardarla;
   es un límite razonable de un sitio sin JS, no una protección técnica real (cualquiera puede hacer captura
   de pantalla) — no se ofrece como tal. */
.foto-detalle { max-width: 900px; margin-inline: auto; }
.foto-detalle__marco { border-radius: var(--radio-tarjeta); overflow: hidden; background: var(--piedra-200); }
.foto-detalle__marco img {
  display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none;
  animation: foto-detalle-aparecer 0.4s ease-out;
}
@keyframes foto-detalle-aparecer { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
.foto-detalle__pie { margin-top: var(--e3); color: var(--piedra-700); font-size: 15px; }
.foto-detalle__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); margin-top: var(--e6); }
.foto-detalle__nav a { display: inline-flex; align-items: center; gap: var(--e2); }
.foto-detalle__volver { text-align: center; margin-top: var(--e6); }
.icono--invertido { transform: scaleX(-1); }

/* ================================================================ Contenido provisional (páginas aún no maquetadas) */
.contenido-provisional { max-width: 680px; }

/* ================================================================ Footer (D9-E; D10 §15) */
.sitio-footer { background: var(--monte-900); color: var(--arena-50); padding-block: var(--e12); }
@media (min-width: 1024px) { .sitio-footer { padding-block: var(--e16); } }
.sitio-footer a { color: var(--arena-50); text-decoration-thickness: 1px; }
.sitio-footer a:hover { text-decoration-thickness: 2px; }
.sitio-footer :focus-visible { outline-color: var(--paja-500); }
.sitio-footer .etiqueta { color: var(--paja-500); }
.sitio-footer__columnas { display: grid; gap: var(--e8); }
@media (min-width: 1024px) { .sitio-footer__columnas { grid-template-columns: repeat(3, 1fr); } }
.sitio-footer__marca img { height: 56px; width: auto; margin-bottom: var(--e3); }
.sitio-footer__nombre { margin: 0 0 4px; font-weight: 700; }
.sitio-footer address { font-style: normal; color: var(--monte-200); }
/* Accesibilidad en el pie (2026-10-22): Símbolo Internacional de Accesibilidad en recuadro dorado + texto. */
.sitio-footer__accesible {
  display: flex; align-items: center; gap: var(--e3); margin-top: var(--e6); max-width: 440px;
  font-size: 15px; line-height: 1.35; /* ancho de toda la columna: el texto entra en 2 líneas (2026-10-22) */ text-decoration: none;
}
.sitio-footer__accesible:hover span:last-child, .sitio-footer__accesible:focus-visible span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.sitio-footer__accesible-icono {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  background: var(--paja-500); color: var(--piedra-950); border-radius: var(--radio-control);
}
.sitio-footer__accesible-icono svg { width: 32px; height: 32px; }
/* La columna del logo un poco más ancha que las otras dos, para que el texto de accesibilidad entre en 2 líneas
   también en pantallas medianas; en celular, un punto menos de letra. */
@media (min-width: 1024px) { .sitio-footer__columnas { grid-template-columns: 1.35fr 1fr 1fr; } }
@media (max-width: 639px) { .sitio-footer__accesible { font-size: 14px; } }
.sitio-footer__lista { margin: 0; padding: 0; list-style: none; }
.sitio-footer__lista li { margin: 0; }
.sitio-footer__lista + .etiqueta { margin-top: var(--e6); } /* segundo título en la misma columna (Preguntas frecuentes) */
.sitio-footer__lista a { display: inline-flex; align-items: center; min-height: 44px; }
.sitio-footer__copyright {
  margin: var(--e8) 0 0; padding-top: var(--e6); border-top: 1px solid var(--monte-600); color: var(--monte-200); font-size: 15px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e2) var(--e4);
}
/* Icono circular de estado del sistema (2026-09-25): verde/rojo, junto a la fecha de carga de la página, en
   el pie de TODAS las páginas (público acá, /admin/ en admin.css). <details>/<summary> nativo, sin
   JavaScript — mismo patrón que el menú móvil y las preguntas frecuentes: un clic muestra el mensaje. */
.estado-sistema { display: inline-flex; align-items: center; position: relative; }
.estado-sistema__icono {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%; cursor: pointer; list-style: none;
}
.estado-sistema__icono::-webkit-details-marker { display: none; }
.estado-sistema__icono--ok { background: var(--exito-700); }
.estado-sistema__icono--error { background: var(--error-700); }
.estado-sistema__icono:focus-visible { outline: 2px solid var(--paja-500); outline-offset: 2px; }
/* Centrado con left:50%/transform, no con right:0 (2026-09-25, corregido: con right:0 el mensaje se abría
   hacia la izquierda del icono y, en /admin/ (icono pegado al margen izquierdo de la página, a diferencia
   del pie público donde el icono queda contra el margen derecho), se salía de la pantalla y quedaba
   invisible — «hacía clic y no se veía el motivo»). Centrado, funciona igual sin importar dónde esté el icono. */
.estado-sistema__mensaje {
  position: absolute; bottom: calc(100% + var(--e2)); left: 50%; transform: translateX(-50%);
  z-index: 5; width: max-content; max-width: min(260px, 90vw);
  margin: 0; padding: var(--e2) var(--e3); border-radius: var(--radio-control);
  background: var(--piedra-950); color: var(--arena-50); font-size: 13px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
/* Leyenda de copyright de imágenes (2026-09-25): texto legal secundario, más chico y apagado que la línea de
   copyright principal, debajo de esta. */
.sitio-footer__aviso { margin: var(--e3) 0 0; color: var(--monte-200); font-size: 13px; }
/* Hora de generación de la página (a pedido del cliente 2026-09-24): se recalcula en cada carga porque la
   página es siempre renderizada por PHP en el momento del pedido, nunca cacheada estáticamente. */

/* ================================================================ Imágenes / figuras responsivas */
.figura, .figura-ancha { margin: 0; }
.figura img, .figura-ancha img { display: block; width: 100%; height: auto; background: var(--piedra-200); border-radius: var(--radio-tarjeta); }
/* Cabecera de página interna (D10 §5.1): 16:9, recorte controlado, sin deformar (D10 §5.3). */
.figura--cabecera { aspect-ratio: 16 / 9; border-radius: var(--radio-tarjeta); overflow: hidden; }
.figura--cabecera img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.figura figcaption { margin-top: var(--e2); font-size: 15px; color: var(--piedra-700); }
.grilla-figuras { display: grid; gap: var(--e6); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grilla-figuras li { margin: 0; }