/* ==========================================================
   Agreste – Granja Educativa y Eventos · estilos (sobre Bootstrap 5)
   Paleta original conservada. Ajustes de contraste documentados
   en REGISTRO-ACCESIBILIDAD.md
   ========================================================== */

:root {
  --verde: #8fb726;          /* verde de marca: solo decoración o texto sobre fondo oscuro */
  --verde-texto: #4f6e07;    /* texto y botones sobre fondo claro (5,9:1) */
  --verde-hover: #3f5906;
  --verde-noche: #1d2810;    /* fondos oscuros (blanco 15,4:1) */
  --verde-claro: #b9dc4c;    /* texto/enlaces sobre fondo oscuro (≥ 9:1) */
  --oscuro: #262626;
  --gris-texto: #4f4f4f;     /* 8,2:1 sobre blanco · 7,6:1 sobre crema */
  --crema: #f9f7f1;
  --linea: #e7e4dc;
  --estrella: #b36b00;
  --radio: 1.25rem;
  --sombra: 0 24px 48px -28px rgba(29, 40, 16, .45);
  --sombra-suave: 0 8px 24px -14px rgba(29, 40, 16, .25);
  --fuente-titulos: 'Lobster', 'Georgia', cursive;
  --fuente-texto: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --alto-header: 84px;

  --bs-body-font-family: var(--fuente-texto);
  --bs-body-color: var(--gris-texto);
  --bs-link-color: var(--verde-texto);
  --bs-link-hover-color: var(--verde-hover);
  --bs-link-color-rgb: 79, 110, 7;
  --bs-link-hover-color-rgb: 63, 89, 6;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-header) + 1rem); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--gris-texto);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--oscuro); line-height: 1.25; }
h3 { font-size: 1.3rem; font-weight: 700; }
strong { color: var(--oscuro); }

/* Enlaces dentro de texto subrayados: no dependen solo del color (WCAG 1.4.1) */
main p a, main li a:not(.btn), .footer-legal a, .site-footer li a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Foco visible (WCAG 2.4.7): anillo doble, visible sobre fondo claro u oscuro ---------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
.btn:focus-visible, .nav-link:focus-visible, .navbar-toggler:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 0;
  box-shadow: 0 0 0 6px #1b1b1b !important;
  border-radius: 4px;
}
.btn:focus-visible { border-radius: 2rem; }
main:focus { outline: none; }

/* ---------- Saltar al contenido (WCAG 2.4.1) ---------- */
.skip-link {
  position: absolute; left: 1rem; top: -5rem; z-index: 2000;
  background: var(--oscuro); color: #fff;
  padding: .75rem 1.25rem; border-radius: 0 0 .5rem .5rem;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 0; color: #fff; }

/* ---------- Cabecera fija con menú a la derecha ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1030;
  background: #fff;
  border-bottom: 1px solid var(--linea);
  transition: box-shadow .25s;
}
.site-header.con-sombra { box-shadow: 0 6px 24px -12px rgba(0, 0, 0, .25); }
.site-header .navbar { min-height: var(--alto-header); padding: .5rem 0; }
.navbar-brand { padding: 0; margin-right: 2rem; }
.navbar-brand img { height: 62px; width: auto; display: block; }

.navbar .nav-link {
  position: relative;
  color: var(--oscuro);
  font-weight: 600;
  font-size: 1rem;
  padding: .6rem 1rem !important;
}
.navbar .nav-link::after {
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .25rem;
  height: 3px; border-radius: 3px; background: var(--verde);
  transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.navbar .nav-link:hover { color: var(--verde-texto); }
.navbar .nav-link:hover::after { transform: scaleX(1); }
.navbar .nav-link[aria-current="page"] { color: var(--verde-texto); }
.navbar .nav-link[aria-current="page"]::after { transform: scaleX(1); background: var(--verde-texto); }

/* «Contacto» destacado como botón */
.navbar .nav-cta {
  margin-left: .75rem;
  background: var(--verde-texto); color: #fff !important;
  border-radius: 2rem; padding: .55rem 1.4rem !important;
}
.navbar .nav-cta::after { display: none; }
.navbar .nav-cta:hover { background: var(--verde-hover); }
.navbar .nav-cta[aria-current="page"] { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--verde-texto); }

.navbar-toggler {
  border: 2px solid var(--verde-texto); color: var(--verde-texto);
  min-height: 44px; min-width: 44px; padding: .35rem .9rem;
  font-weight: 600; display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 2rem; background: #fff;
}
.navbar-toggler .bi { font-size: 1.35rem; line-height: 1; }

@media (max-width: 991.98px) {
  :root { --alto-header: 72px; }
  .navbar-brand img { height: 52px; }
  .navbar-collapse { padding: .5rem 0 1rem; }
  .navbar .nav-link { border-bottom: 1px solid var(--linea); padding: .85rem .25rem !important; }
  .navbar .nav-link::after { left: .25rem; right: auto; width: 2.5rem; bottom: .4rem; }
  .navbar .nav-cta { margin: 1rem 0 0; text-align: center; border-bottom: 0; }
}

/* ---------- Tipografía de secciones ---------- */
section { padding: 5.5rem 0; }
.bg-crema { background: var(--crema); }

.eyebrow {
  display: inline-block;
  font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--verde-texto); margin-bottom: .75rem;
}
.eyebrow-claro { color: var(--verde-claro); }

.section-title {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--gris-texto);
  text-align: center;
  display: flex; align-items: center; gap: 1.25rem;
  margin: 0 auto 3rem; max-width: 820px;
}
.section-title::before, .section-title::after { content: ""; flex: 1 1 40px; height: 1px; background: #cfcbc0; }
.section-title b, .section-title .acento { font-weight: 400; color: var(--verde-texto); }

.titulo-bloque {
  font-family: var(--fuente-titulos); font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem); color: var(--oscuro); margin-bottom: 1rem;
}
.titulo-bloque b, .titulo-bloque .acento { font-weight: 400; color: var(--verde-texto); }

.lead-agreste { font-size: 1.2rem; line-height: 1.7; }
.texto-centrado { max-width: 820px; margin-inline: auto; text-align: center; }
.nota { font-size: .95rem; color: var(--gris-texto); }

/* ---------- Botones ---------- */
.btn {
  min-height: 48px; font-weight: 600; border-radius: 2rem; padding: .7rem 1.7rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  transition: background-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.btn .bi-arrow-right { transition: transform .2s; }
.btn:hover .bi-arrow-right { transform: translateX(3px); }
.btn-agreste { background: var(--verde-texto); border: 2px solid var(--verde-texto); color: #fff; }
.btn-agreste:hover, .btn-agreste:active { background: var(--verde-hover); border-color: var(--verde-hover); color: #fff; }
.btn-claro { background: #fff; border: 2px solid #fff; color: var(--verde-noche); }
.btn-claro:hover { background: var(--verde-claro); border-color: var(--verde-claro); color: var(--verde-noche); }
.btn-borde-claro { background: transparent; border: 2px solid #fff; color: #fff; }
.btn-borde-claro:hover { background: #fff; color: var(--verde-noche); }
.btn-borde { background: #fff; border: 2px solid var(--verde-texto); color: var(--verde-texto); }
.btn-borde:hover { background: var(--verde-texto); color: #fff; }

/* ---------- Hero de inicio ---------- */
.hero {
  position: relative; padding: 0; overflow: hidden;
  min-height: clamp(560px, 84vh, 860px);
  display: flex; align-items: center;
  background: var(--verde-noche);
}
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 50%;
}
.hero .container { position: relative; z-index: 1; }
.hero-panel {
  background: var(--verde-noche);   /* fondo sólido: contraste verificable */
  color: #fff;
  border-radius: 1.5rem;
  padding: clamp(2rem, 4vw, 3.25rem);
  max-width: 640px;
  margin: 4rem 0 6.5rem;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
  border-top: 5px solid var(--verde);
}
.hero-panel h1 {
  font-family: var(--fuente-titulos); font-weight: 400; color: #fff;
  font-size: clamp(2.6rem, 6.5vw, 4.25rem); line-height: 1.1; margin-bottom: 1rem;
}
.hero-panel p { font-size: 1.2rem; color: #f1f1ec; margin-bottom: 1.75rem; }
.hero-panel .orden { display: grid; gap: .6rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.hero-panel .orden li { display: flex; gap: .75rem; align-items: flex-start; color: #fff; font-size: 1.05rem; }
.hero-panel .orden .bi { color: var(--verde-claro); font-size: 1.25rem; line-height: 1.5; }

/* ---------- Destacados ---------- */
.destacados { padding: 0; position: relative; z-index: 2; }
.destacados .grilla {
  background: #fff; border-radius: var(--radio); box-shadow: var(--sombra);
  margin-top: -3.5rem; padding: 2rem 1.5rem;
  display: grid; gap: 1.5rem; grid-template-columns: repeat(4, 1fr);
  list-style: none;
}
.destacados li { display: flex; gap: 1rem; align-items: flex-start; padding: 0 .5rem; }
.destacados h3 { font-size: 1.05rem; margin: 0 0 .2rem; font-family: var(--fuente-texto); font-weight: 700; }
.destacados p { margin: 0; font-size: .95rem; line-height: 1.55; }
@media (max-width: 991.98px) { .destacados .grilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .destacados .grilla { grid-template-columns: 1fr; margin-top: -2rem; } }

.icono-circulo {
  width: 3rem; height: 3rem; border-radius: 50%;
  background: #eef4dc; color: var(--verde-texto);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.35rem; flex: 0 0 auto;
}
.icono-circulo.solido { background: var(--verde-texto); color: #fff; }

/* ---------- Bloques imagen + texto ---------- */
.foto-bloque {
  width: 100%; height: auto; display: block;
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.foto-bloque.recorte { aspect-ratio: 4 / 3; object-fit: cover; }
.lista-check { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.lista-check li { position: relative; padding-left: 2rem; margin-bottom: .55rem; }
.lista-check li::before {
  content: "\F26A"; font-family: bootstrap-icons;
  position: absolute; left: 0; top: .05rem; color: var(--verde-texto);
}
.lista-check.dos-columnas { columns: 2; column-gap: 2rem; }
.lista-check.dos-columnas li { break-inside: avoid; }
@media (max-width: 575.98px) { .lista-check.dos-columnas { columns: 1; } }

/* ---------- Encabezado de páginas internas ---------- */
.page-header {
  position: relative; overflow: hidden;
  background: var(--verde-noche); color: #fff;
  padding: 4.5rem 0 4rem;
}
.page-header::before {   /* textura decorativa muy sutil */
  content: ""; position: absolute; right: -8rem; top: -8rem;
  width: 28rem; height: 28rem; border-radius: 50%;
  border: 2px solid rgba(143, 183, 38, .25);
  box-shadow: 0 0 0 3rem rgba(143, 183, 38, .06), 0 0 0 6rem rgba(143, 183, 38, .04);
}
.page-header .container { position: relative; }
.page-header h1 {
  font-family: var(--fuente-titulos); font-weight: 400; color: #fff;
  font-size: clamp(2.3rem, 5.5vw, 3.6rem); margin-bottom: .75rem;
}
.page-header .lema { font-size: 1.25rem; color: #f1f1ec; margin: 0; max-width: 720px; }
.page-header .foto-redonda {
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
  border: 4px solid var(--verde); flex: 0 0 auto;
}
.breadcrumb { --bs-breadcrumb-divider-color: #c9d3b4; --bs-breadcrumb-item-active-color: #e8eddc; margin-bottom: 1rem; font-size: .95rem; }
.breadcrumb a { color: var(--verde-claro); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Tarjetas ---------- */
.card-agreste {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  height: 100%; box-shadow: var(--sombra-suave);
  transition: transform .25s, box-shadow .25s;
}
.card-agreste:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.card-agreste .card-body { padding: 1.75rem; }
.card-agreste h3, .card-agreste h4 { margin-bottom: .75rem; }
.bloque-actividad h3 { display: flex; align-items: center; gap: .85rem; }
.bloque-actividad ul { padding-left: 1.2rem; margin: 0; }
.bloque-actividad li { margin-bottom: .6rem; }
.bloque-actividad li::marker { color: var(--verde-texto); }

/* ---------- Cita ---------- */
.cita {
  position: relative; isolation: isolate;
  background-color: #3f5906;   /* blanco sobre este verde ≈ 8:1 */
  color: #fff; text-align: center; padding: 6rem 0;
}
.cita::before {   /* foto decorativa muy tenue */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url('../images/background/qoute-bg.jpg') center / cover no-repeat;
  opacity: .12;
}
.cita blockquote { margin: 0; }
.cita p {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.35;
  margin: 0 auto 1.25rem; max-width: 900px; color: #fff;
}
.cita figcaption { font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; }

/* ---------- Opiniones ---------- */
.opinion {
  position: relative; background: #fff;
  border: 1px solid var(--linea); border-radius: var(--radio);
  height: 100%; padding: 2rem 1.75rem 1.5rem; margin: 0;
  display: flex; flex-direction: column; box-shadow: var(--sombra-suave);
}
.opinion::before {   /* comillas decorativas */
  content: "“"; position: absolute; right: 1.25rem; top: -.5rem;
  font-family: var(--fuente-titulos); font-size: 6rem; line-height: 1; color: #e3ebc8;
}
.estrellas { margin: 0 0 1rem; color: var(--estrella); font-size: 1.1rem; letter-spacing: .12rem; }
.opinion blockquote { margin: 0 0 1.25rem; flex: 1 1 auto; position: relative; }
.opinion blockquote p { margin: 0; }
.opinion figcaption { border-top: 1px solid var(--linea); padding-top: 1rem; font-size: .95rem; display: flex; gap: .85rem; align-items: center; }
.opinion .inicial {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: 0 0 auto;
  background: var(--verde-texto); color: #fff; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.opinion .autor { display: block; font-weight: 700; color: var(--oscuro); font-size: 1rem; }

/* ---------- Galería ---------- */
.galeria { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.galeria button {
  display: block; width: 100%; padding: 0; border: 0; background: #ddd;
  border-radius: 1rem; overflow: hidden; cursor: pointer; position: relative;
}
.galeria img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .4s; }
.galeria button:hover img { transform: scale(1.05); }
.galeria .lupa {
  position: absolute; right: .6rem; bottom: .6rem; width: 2.4rem; height: 2.4rem;
  background: var(--verde-noche); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.modal-galeria .modal-content { background: #111; color: #fff; border-radius: 1rem; }
.modal-galeria .modal-header, .modal-galeria .modal-footer { border-color: #444; }
.modal-galeria .modal-title { color: #fff; }
.modal-galeria img { max-width: 100%; max-height: 70vh; width: auto; height: auto; display: block; margin: 0 auto; border-radius: .5rem; }
.modal-galeria .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: 1; }

/* ---------- Banda de llamada a la acción ---------- */
.cta-banda { background: var(--verde-noche); color: #fff; padding: 4.5rem 0; }
.cta-banda h2 { color: #fff; font-family: var(--fuente-titulos); font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.cta-banda p { color: #f1f1ec; font-size: 1.15rem; }

/* ---------- Contacto ---------- */
.tarjeta-contacto {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 2rem 1.75rem; height: 100%; box-shadow: var(--sombra-suave);
  display: flex; flex-direction: column; gap: 1rem;
  transition: transform .25s, box-shadow .25s;
}
.tarjeta-contacto:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.tarjeta-contacto h3 { font-size: 1.2rem; margin: 0; font-family: var(--fuente-texto); font-weight: 700; }
.tarjeta-contacto p, .tarjeta-contacto ul { margin: 0; }
.tarjeta-contacto .dato { font-size: 1.15rem; font-weight: 600; color: var(--oscuro); }
.tarjeta-contacto .acciones { margin-top: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.tarjeta-contacto .acciones .btn { min-height: 44px; padding: .45rem 1.1rem; font-size: .95rem; }
.telefono + .telefono { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linea); }

.mapa-wrap { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); box-shadow: var(--sombra); }
.mapa-wrap iframe { width: 100%; height: 460px; border: 0; display: block; }

/* ---------- Pie ---------- */
.site-footer { background: var(--oscuro); color: #e6e6e6; font-size: .98rem; }
.site-footer .footer-main { padding-top: 4rem; padding-bottom: 2.5rem; }
.site-footer .footer-logo { width: 200px; max-width: 100%; height: auto; margin-bottom: 1rem; }
.site-footer a { color: var(--verde-claro); }
.site-footer a:hover { color: #fff; }
.footer-title { font-family: var(--fuente-texto); font-size: .85rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer li a { display: inline-block; padding: .1rem 0; }
.footer-bottom { border-top: 1px solid #444; padding: 1.25rem 0; font-size: .92rem; }
.footer-bottom p { margin: 0; }

/* Contenido de la declaración de accesibilidad */
.prosa { max-width: 820px; margin-inline: auto; }
.prosa h2 { font-size: 1.6rem; margin-top: 2.25rem; }

/* Móvil: dejar ver la foto del hero por encima del panel */
@media (max-width: 767.98px) {
  .hero { align-items: flex-end; min-height: 0; }
  .hero-img { height: 340px; bottom: auto; }
  .hero-panel { margin: 260px 0 4.5rem; }
}

/* Palabras largas (p. ej. «vegetarianismo/veganismo») no desbordan en 320 px */
.card-agreste .card-body > div { min-width: 0; }
.card-agreste p, .tarjeta-contacto p { overflow-wrap: anywhere; }