/* =====================================================================================================
   Tema «Tierra ancestral» — look-and-feel (2026-10-22). includes/header.php lo carga solo cuando es el diseño
   activo (configuracion.json, «diseno»; se cambia en caliente desde /admin/ → Diseño del sitio).

   Se carga DESPUÉS de base.css, componentes.css y paginas.css y solo cambia la apariencia: mismos HTML,
   mismas clases, misma funcionalidad. Para descartarla alcanza con no cargar este archivo.

   Inspiración: piezas de Instagram del parque (papel crema, pinceladas naranja y verde azulado, carteles de
   madera, pictogramas, guarda de montañas en zigzag — img_nuevo_diseño/guarda2.jpg, elegida por el cliente
   2026-10-22 en lugar de la de rombos) + parques culturales (Silver Dollar City, Puy du Fou, Xcaret).
   Motivos decorativos INSPIRADOS en el arte rupestre de las sierras (arqueros, guanacos, espirales, soles) y
   en las guardas andinas escalonadas — dibujos propios, simples; no reproducen piezas arqueológicas
   concretas ni símbolos sagrados.

   Accesibilidad (WCAG 2.1 AA, CLAUDE.md §22): todos los pares de texto/fondo de esta paleta miden ≥ 4,5:1;
   los adornos son pseudo-elementos (no los leen los lectores de pantalla); foco visible en todo; sin
   animaciones nuevas salvo transiciones cortas, que base.css ya anula con prefers-reduced-motion.
   Performance: una sola fuente nueva (Lilita One, 10 KB, reemplaza a Bricolage de 77 KB en títulos) y SVG
   chicos; sin JavaScript nuevo.
   ===================================================================================================== */

@font-face {
  font-family: "Lilita One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lilita-one.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

:root {
  /* ---- Paleta «Tierra ancestral» ---- */
  --papel: #f6ead4;          /* fondo general (papel de los carteles) */
  --papel-2: #efdcbc;        /* fondo suave, bandas */
  --crema: #fff8ea;          /* tarjetas */
  --tierra: #2e1d12;         /* texto principal (13,6:1 sobre papel) */
  --madera: #4a2b17;         /* carteles de madera, pie */
  --madera-oscura: #3a2213;
  --terracota: #b3441b;      /* acción (4,7:1 sobre papel; crema encima 5,3:1) */
  --terracota-osc: #8f3311;
  --teal: #1d5a56;           /* estructura, títulos de tarjeta (6,7:1) */
  --teal-osc: #14423f;
  --mostaza: #e6a73c;        /* acento sobre oscuro (6:1 sobre madera) */
  --hoja: #4f6b2c;
  --borde-papel: #dcc29a;

  /* Los tokens existentes se reasignan a la nueva paleta: así TODO el sitio cambia de piel sin tocar HTML. */
  --arena-50: var(--papel);
  --blanco: var(--crema);
  --piedra-100: var(--papel-2);
  --piedra-200: #e7d2ad;
  --piedra-300: var(--borde-papel);
  --piedra-700: #5a4030;
  --piedra-800: #3f2b1d;
  --piedra-950: var(--tierra);
  --ladrillo-100: #f7d9c4;
  --ladrillo-600: var(--terracota);
  --ladrillo-700: var(--terracota-osc);
  --monte-100: #d8e6df;
  --monte-200: #cfe3dc;
  --monte-600: #2f7a6f;
  --monte-800: var(--teal);
  --monte-900: var(--teal-osc);
  --paja-100: #fbe8c2;
  --paja-500: var(--mostaza);
  --cielo-700: var(--teal);
  --bordo-700: var(--terracota-osc);

  --fuente-titulo: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --radio-tarjeta: 20px;
  --radio-control: 14px;
  /* Bordes «cortados a mano»: radios apenas desparejos */
  --radio-mano: 22px 18px 24px 16px / 16px 24px 18px 22px;

}

/* ---------------------------------------------------------------- Base */
body {
  background-color: var(--papel);
  background-image: url("../img/diseno/textura-papel.svg");
  color: var(--tierra);
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .texto-display, .hero__titulo, .tarjeta__titulo, .escena__titulo, .acordeon__item summary {
  font-family: var(--fuente-titulo);
  font-weight: 400;              /* Lilita tiene un solo peso: nunca negrita sintética */
  font-synthesis: none;
  letter-spacing: 0.005em;
}
h1, .h1 { color: var(--terracota-osc); }
h2, .h2 { color: var(--tierra); }
:focus-visible { outline-color: var(--teal-osc); }
a { color: var(--teal); }

/* Títulos de sección: pincelada debajo + pictograma de sol arriba (solo decorativo) */
.seccion > h2, .seccion > .contenedor > h2, .seccion .contenedor > h2:first-child, .contenedor.seccion > h2, .acordeon-cabecera > h2 {
  position: relative; padding-bottom: 14px;
}
.seccion > h2::after, .seccion > .contenedor > h2::after, .contenedor.seccion > h2::after, .acordeon-cabecera > h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: min(180px, 60%); height: 12px;
  background: var(--terracota);
  -webkit-mask: url("../img/diseno/trazo.svg") center / 100% 100% no-repeat;
          mask: url("../img/diseno/trazo.svg") center / 100% 100% no-repeat;
}
/* Títulos centrados: el subrayado y el sol también van al centro (selector igual de fuerte que la regla general) */
.seccion .texto-centrado > h2::after, .seccion.texto-centrado > h2::after { left: 50%; transform: translateX(-50%); }
.seccion .texto-centrado > h2::before, .seccion.texto-centrado > h2::before { margin-inline: auto; }
.seccion > h2::before, .seccion > .contenedor > h2::before, .contenedor.seccion > h2::before, .acordeon-cabecera > h2::before {
  content: ""; display: block; width: 34px; height: 34px; margin-bottom: 6px; background: var(--mostaza);
  -webkit-mask: url("../img/diseno/picto-sol.svg") center / contain no-repeat;
          mask: url("../img/diseno/picto-sol.svg") center / contain no-repeat;
}
.cta > h2::before { margin-inline: auto; }

/* Etiqueta (eyebrow): pincelada naranja con texto crema, como «PARQUE TEMÁTICO» en los carteles */
.etiqueta {
  font-family: var(--fuente-titulo); font-weight: 400; letter-spacing: 0.06em; font-size: 15px;
  color: var(--crema) !important; background: var(--terracota); padding: 7px 16px 6px;
  -webkit-mask: url("../img/diseno/pincelada.svg") center / 100% 100% no-repeat;
          mask: url("../img/diseno/pincelada.svg") center / 100% 100% no-repeat;
  margin-bottom: var(--e3);
}
.fondo-oscuro .etiqueta, .banda-oscura .etiqueta, .sitio-footer .etiqueta { background: var(--mostaza); color: var(--tierra) !important; }

/* ---------------------------------------------------------------- Header */
.sitio-header {
  background-color: var(--papel); background-image: url("../img/diseno/textura-papel.svg");
  border-bottom: 0; box-shadow: 0 6px 14px rgba(46,29,18,0.10);
}
.sitio-header::after { /* guarda de montañas bajo el header (estilo guarda2.jpg) */
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background: url("../img/diseno/guarda-montanas.svg") left center / auto 10px repeat-x;
}

/* Pictogramas entre el logo y el botón «Menú» (a pedido del cliente 2026-10-22), solo mientras el menú
   horizontal no entra (< 1360px, el mismo corte del header). Puro adorno: pseudo-elemento, sin foco ni texto.
   Se muestran 3, 4 o 6 según el espacio libre, para no chocar nunca con el botón. */
@media (max-width: 1359px) {
  .sitio-header__interior::after {
    content: ""; order: 1; flex: none; height: 30px; width: 116px; margin-inline: auto;
    background: var(--terracota);
    -webkit-mask-image: url("../img/diseno/picto-arquero.svg"), url("../img/diseno/picto-espiral.svg"), url("../img/diseno/picto-guanaco.svg");
            mask-image: url("../img/diseno/picto-arquero.svg"), url("../img/diseno/picto-espiral.svg"), url("../img/diseno/picto-guanaco.svg");
    -webkit-mask-size: 30px 30px; mask-size: 30px 30px;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 0 0, 43px 0, 86px 0; mask-position: 0 0, 43px 0, 86px 0;
  }
  .sitio-header__interior > .logo { order: 0; }
  .sitio-header__interior > .menu-disclosure { order: 2; margin-inline-start: 0; }
  .sitio-header__interior > .sitio-header__email { order: 3; }
}
@media (min-width: 440px) and (max-width: 1359px) {
  .sitio-header__interior::after {
    width: 159px;
    -webkit-mask-image: url("../img/diseno/picto-arquero.svg"), url("../img/diseno/picto-espiral.svg"), url("../img/diseno/picto-guanaco.svg"), url("../img/diseno/picto-sol.svg");
            mask-image: url("../img/diseno/picto-arquero.svg"), url("../img/diseno/picto-espiral.svg"), url("../img/diseno/picto-guanaco.svg"), url("../img/diseno/picto-sol.svg");
    -webkit-mask-position: 0 0, 43px 0, 86px 0, 129px 0; mask-position: 0 0, 43px 0, 86px 0, 129px 0;
  }
}
@media (min-width: 600px) and (max-width: 1359px) {
  .sitio-header__interior::after {
    width: 245px;
    -webkit-mask-image: url("../img/diseno/picto-arquero.svg"), url("../img/diseno/picto-espiral.svg"), url("../img/diseno/picto-guanaco.svg"), url("../img/diseno/picto-sol.svg"), url("../img/diseno/picto-vasija.svg"), url("../img/diseno/picto-flechas.svg");
            mask-image: url("../img/diseno/picto-arquero.svg"), url("../img/diseno/picto-espiral.svg"), url("../img/diseno/picto-guanaco.svg"), url("../img/diseno/picto-sol.svg"), url("../img/diseno/picto-vasija.svg"), url("../img/diseno/picto-flechas.svg");
    -webkit-mask-position: 0 0, 43px 0, 86px 0, 129px 0, 172px 0, 215px 0; mask-position: 0 0, 43px 0, 86px 0, 129px 0, 172px 0, 215px 0;
  }
}
.logo img { height: 46px; filter: drop-shadow(0 2px 0 rgba(46,29,18,0.25)); }
.nav-principal a, .menu-disclosure__panel a, .barra-movil__panel a {
  font-family: var(--fuente-titulo); font-weight: 400; font-size: 17px; letter-spacing: 0.01em; color: var(--tierra);
}
.nav-principal a[aria-current="page"], .menu-disclosure__panel a[aria-current="page"], .barra-movil__panel a[aria-current="page"] {
  text-decoration-color: var(--terracota); text-decoration-thickness: 4px; text-underline-offset: 7px;
}
.nav-principal a.nav-destacado, .menu-disclosure__panel a.nav-destacado, .barra-movil__panel a.nav-destacado {
  background: var(--terracota); color: var(--crema); border-radius: 0; padding-inline: 16px;
  -webkit-mask: url("../img/diseno/pincelada.svg") center / 100% 100% no-repeat;
          mask: url("../img/diseno/pincelada.svg") center / 100% 100% no-repeat;
}
.menu-disclosure__boton {
  font-family: var(--fuente-titulo); font-weight: 400; border-color: var(--tierra); background: var(--crema);
  /* más chico, en proporción con el logo (a pedido del cliente 2026-10-22); 40 px sigue siendo cómodo al tacto */
  min-height: 40px; padding: 0 14px; gap: 6px; font-size: 15px; border-width: 2px;
}
.menu-disclosure__boton .icono { width: 18px; height: 18px; }
.menu-disclosure__panel, .barra-movil__panel { background: var(--crema); border: 2px solid var(--borde-papel); border-radius: var(--radio-mano); }
.sitio-header__email { color: var(--terracota-osc); }

/* ---------------------------------------------------------------- Franja «Hoy»: cartel de madera */
.franja-hoy {
  margin-top: 10px; /* deja ver la guarda del header */
  background: var(--madera) linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.12));
  border-bottom: 3px solid var(--madera-oscura); color: var(--papel);
}
.franja-hoy__estado { color: var(--papel); font-family: var(--fuente-titulo); font-weight: 400; letter-spacing: 0.02em; }
.franja-hoy__estado--abierto, .franja-hoy__estado--abierto::before { color: #9fdc8f; }
.franja-hoy__estado--cerrado, .franja-hoy__estado--cerrado::before { color: #ffb4a3; }
.franja-hoy__enlaces a, .franja-hoy__ver { color: var(--mostaza); }
.franja-hoy :focus-visible { outline-color: var(--mostaza); }

/* ---------------------------------------------------------------- Hero */
.hero { background: var(--madera-oscura); }
.hero--con-foto .hero__media::after {
  background: linear-gradient(0deg, rgba(46,29,18,0.88) 0%, rgba(46,29,18,0.72) 40%, rgba(46,29,18,0.22) 70%, rgba(46,29,18,0) 100%);
}
.hero::after { /* borde de papel rasgado que da paso al contenido */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; z-index: 3;
  background-color: var(--papel);
  -webkit-mask: url("../img/diseno/borde-rasgado.svg") left bottom / 400px 26px repeat-x;
          mask: url("../img/diseno/borde-rasgado.svg") left bottom / 400px 26px repeat-x;
}
.hero__titulo {
  font-size: clamp(2.75rem, 1.6rem + 5vw, 5.25rem); line-height: 1; color: var(--crema);
  text-shadow: 0 4px 0 var(--terracota-osc), 0 8px 24px rgba(0,0,0,0.45);
}
.hero--con-foto .hero__eyebrow { color: var(--crema) !important; text-shadow: none; }
.hero__bajada { color: #f3e3c8; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.hero--con-foto .hero__interior { padding-bottom: calc(var(--e12) + 20px); }

/* ---------------------------------------------------------------- Botones: «calcomanía» con sombra sólida */
.boton {
  font-family: var(--fuente-titulo); font-weight: 400; font-size: 18px; letter-spacing: 0.02em;
  min-height: 52px; padding: 0 28px; border-radius: var(--radio-mano); border-width: 3px;
  box-shadow: 0 5px 0 var(--sombra-boton, rgba(46,29,18,0.35));
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 150ms ease;
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--sombra-boton, rgba(46,29,18,0.35)); }
.boton:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--sombra-boton, rgba(46,29,18,0.35)); }
.boton--principal { background: var(--terracota); color: var(--crema); --sombra-boton: var(--terracota-osc); }
.boton--principal:hover, .boton--principal:active { background: #c24c1f; }
.boton--secundario { background: var(--crema); border-color: var(--teal); color: var(--teal); --sombra-boton: var(--teal); }
.boton--secundario:hover { background: #e9f2ee; }
.boton--sobre-oscuro { background: var(--mostaza); color: var(--tierra); --sombra-boton: #9a6a1a; }
.boton--sobre-oscuro:hover { background: #efb655; }
.boton--secundario-oscuro { border-color: var(--crema); color: var(--crema); --sombra-boton: rgba(0,0,0,0.45); }

/* ---------------------------------------------------------------- Fondos y bandas */
.fondo-blanco { background: var(--crema); }
.fondo-suave {
  background-color: var(--papel-2); background-image: url("../img/diseno/textura-papel.svg");
  border-top: 2px dashed var(--borde-papel); border-bottom: 2px dashed var(--borde-papel);
}
.banda-oscura, .fondo-oscuro {
  position: relative; background: var(--teal-osc); color: var(--crema);
}
.banda-oscura::before, .banda-oscura::after {
  content: ""; position: absolute; left: 0; right: 0; height: 14px;
  background: url("../img/diseno/guarda-escalonada.svg") left center / 48px 14px repeat-x;
}
.banda-oscura::before { top: -14px; }
.banda-oscura::after { bottom: -14px; transform: scaleY(-1); }
.banda-oscura { margin-block: 14px; }
.banda-oscura h2 { color: var(--crema); }
.banda-oscura p { color: #e2efe9; }

/* ---------------------------------------------------------------- Tarjetas: papel recortado */
.tarjeta {
  background: var(--crema); border: 2px solid var(--borde-papel); border-radius: var(--radio-mano);
  box-shadow: 0 5px 0 var(--borde-papel);
}
.tarjeta:has(a:hover), .tarjeta:has(a:focus-visible), .tarjeta--enlace:hover, .tarjeta--enlace:focus-visible {
  transform: translateY(-3px) rotate(-0.4deg); box-shadow: 0 8px 0 var(--borde-papel), 0 14px 26px rgba(46,29,18,0.14);
}
.tarjeta__media { border-bottom: 3px solid var(--terracota); }
.tarjeta__titulo { color: var(--teal); font-size: 22px; }
.tarjeta__texto { color: #5a4030; }
.tarjeta__enlace { font-family: var(--fuente-titulo); font-weight: 400; color: var(--terracota-osc); }
.tarjeta .icono { color: var(--terracota); }
/* Sin foto: papel con la guarda de montañas abajo (en vez de rayas) */
.tarjeta__media--patron {
  background:
    url("../img/diseno/guarda-montanas.svg") left bottom / auto 18px repeat-x,
    var(--papel-2) url("../img/diseno/textura-papel.svg");
}
.tarjeta__media--patron .icono {
  color: var(--teal); background: var(--crema); border-radius: 50%; padding: 14px; box-sizing: content-box;
  border: 3px solid var(--teal); opacity: 1; width: 40px; height: 40px; min-width: 0; min-height: 0;
  /* centrado en la zona de la imagen (que reserva su alto con padding-top), por encima de la guarda */
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%);
}
/* Recuadros de color de «Elegí cómo venir» con la nueva paleta */
.venir-grilla > .tarjeta:nth-child(1) { border-color: var(--terracota); box-shadow: 0 5px 0 var(--terracota); }
.venir-grilla > .tarjeta:nth-child(2) { border-color: var(--teal); box-shadow: 0 5px 0 var(--teal); }
.venir-grilla > .tarjeta:nth-child(3) { border-color: var(--mostaza); box-shadow: 0 5px 0 var(--mostaza); }

/* ---------------------------------------------------------------- Información práctica: carteles */
.practica-resumen__item {
  background: var(--crema); border: 2px solid var(--borde-papel); border-radius: var(--radio-mano);
  box-shadow: 0 5px 0 var(--borde-papel); position: relative; padding-top: var(--e8);
}
.practica-resumen__encabezado {
  font-family: var(--fuente-titulo); font-weight: 400; font-size: 17px; letter-spacing: 0.04em;
  color: var(--crema); background: var(--teal); align-self: flex-start; padding: 6px 16px 5px 12px;
  -webkit-mask: url("../img/diseno/pincelada.svg") center / 100% 100% no-repeat;
          mask: url("../img/diseno/pincelada.svg") center / 100% 100% no-repeat;
}
.practica-resumen__item:nth-child(2) .practica-resumen__encabezado { background: var(--terracota); }
.practica-resumen__item:nth-child(3) .practica-resumen__encabezado { background: var(--hoja); }
.horario-vigente { color: var(--terracota-osc); }
.tarifas-destacado, .consultar-bloque {
  background: var(--crema); border: 3px solid var(--madera); border-radius: var(--radio-mano);
  box-shadow: 0 6px 0 var(--madera);
}
.precio__importe { font-family: var(--fuente-titulo); font-weight: 400; color: var(--terracota-osc); }

/* ---------------------------------------------------------------- Acordeón / escenas / chips */
.acordeon { border-top: 2px dashed var(--borde-papel); }
.acordeon__item { border-bottom: 2px dashed var(--borde-papel); }
.acordeon__item summary { font-size: 20px; color: var(--tierra); }
.acordeon__item summary::after { background: var(--terracota); color: var(--crema); font-family: var(--fuente-titulo); width: 32px; height: 32px; }
/* El título lleva el sol arriba y la pincelada abajo (14px): el botón se alinea con el renglón del texto, no con la caja. */
.acordeon-cabecera { align-items: flex-end; }
.acordeon-cabecera__todas { margin-inline-end: -6px; margin-bottom: 12px; color: var(--crema); } /* (44 − 32) / 2 */
.acordeon-cabecera__circulo { width: 32px; height: 32px; background: var(--terracota); }
.acordeon-cabecera__todas:hover .acordeon-cabecera__circulo { background: var(--terracota-osc); }
.escena__numero {
  width: 42px; height: 42px; background: var(--mostaza); color: var(--tierra);
  font-family: var(--fuente-titulo); font-weight: 400; font-size: 19px; box-shadow: 0 3px 0 #9a6a1a;
}
.chip { background: var(--crema); border: 2px solid var(--borde-papel); font-family: var(--fuente-titulo); font-weight: 400; font-size: 16px; }
.chip[aria-current="true"], .chip:hover,
#gf-todas:checked ~ .chips label[for="gf-todas"],
#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(--teal); border-color: var(--teal); color: var(--crema); }

/* Dato histórico / recreación: fichas con pictograma */
.dato-historico, .recreacion, .distinciones, .acuerdos { border-radius: var(--radio-mano); border-inline-start-width: 6px; }
.dato-historico { background: #e3eee9; }
.recreacion { background: #f9e2d2; }

/* ---------------------------------------------------------------- Galería: fotos con marco de papel */
.galeria-grilla li { border: 6px solid var(--crema); border-radius: 6px; box-shadow: 0 4px 0 var(--borde-papel), 0 8px 18px rgba(46,29,18,0.12); }
.galeria-grilla li:nth-child(3n+1) { transform: rotate(-0.8deg); }
.galeria-grilla li:nth-child(3n+2) { transform: rotate(0.6deg); }
.foto-detalle__marco { border: 10px solid var(--crema); box-shadow: 0 6px 0 var(--borde-papel); }

/* ---------------------------------------------------------------- Formularios */
.campo input, .campo textarea { background: var(--crema); border-color: #a58a6a; border-radius: var(--radio-control); }
.campo label { font-family: var(--fuente-titulo); font-weight: 400; letter-spacing: 0.01em; }

/* ---------------------------------------------------------------- CTA final: cartel colgante */
.cta {
  position: relative; background: var(--madera); color: var(--crema);
  border-radius: var(--radio-mano); margin-block: 64px var(--e12); /* 64 px: el lugar de las sogas */ max-width: min(980px, calc(100% - 2 * var(--margen)));
  box-shadow: inset 0 0 0 4px var(--madera-oscura), 0 8px 0 var(--madera-oscura);
  padding-inline: var(--e6);
}
.cta h2 { color: var(--crema); display: inline-block; }
/* Subrayado centrado, igual que los títulos .texto-centrado (p. ej. «El circuito incluye» en colegios-y-grupos).
   El selector necesita .contenedor.seccion para ganarle a la regla general, que lo dejaba alineado a la izquierda. */
.contenedor.seccion.cta > h2::after { left: 50%; transform: translateX(-50%); }
.cta.seccion { padding-block: var(--e8); }
@media (min-width: 1024px) { .cta.seccion { padding-block: var(--e12); } }
/* Espacio entre secciones más compacto en todas las páginas (a pedido del cliente 2026-10-22):
   40 / 56 / 72 px según el ancho, en vez de 56 / 80 / 120. Mismo esquema de cortes que base.css. */
.seccion { padding-block: 40px; }
.seccion--angosta { padding-block: 20px; }
@media (min-width: 640px)  { .seccion { padding-block: 56px; } .seccion--angosta { padding-block: 28px; } }
@media (min-width: 1024px) { .seccion { padding-block: 72px; } .seccion--angosta { padding-block: 36px; } }
.seccion--sin-top { padding-top: 0; }
/* Secciones con fondo PROPIO marcadas «sin espacio arriba» (Familias, Colegios, Comechingones, mapa de Recorrido):
   en el diseño original ese fondo coincidía con el de la cabecera; acá es otro color, así que el contenido
   quedaba pegado al borde de arriba. Mismo espacio arriba que abajo: queda centrado en su franja
   (a pedido del cliente 2026-10-22). */
.fondo-blanco.seccion--sin-top, .fondo-suave.seccion--sin-top { padding-top: 40px; }
@media (min-width: 640px)  { .fondo-blanco.seccion--sin-top, .fondo-suave.seccion--sin-top { padding-top: 56px; } }
@media (min-width: 1024px) { .fondo-blanco.seccion--sin-top, .fondo-suave.seccion--sin-top { padding-top: 72px; } }
/* Menos aire entre la portada y la primera sección (el borde rasgado ya separa) */
.hero + .seccion { padding-top: 40px; }

/* Dos secciones seguidas con el MISMO fondo (las dos sin clase de fondo) no suman su aire: la segunda arranca
   sin espacio arriba y la separación queda igual a la de una sección (a pedido del cliente 2026-10-22). Donde
   cambia el fondo se deja el aire completo: ahí el cambio de color ya marca el corte. */
section.seccion:not(.fondo-suave):not(.fondo-blanco):not(.fondo-oscuro):not(.banda-oscura):not(.cta)
  + section.seccion:not(.fondo-suave):not(.fondo-blanco):not(.fondo-oscuro):not(.banda-oscura):not(.cta) { padding-top: 0; }
/* Después de la cabecera de una página (sección angosta con el título), un respiro chico. */
section.seccion--angosta:not(.fondo-suave):not(.fondo-blanco)
  + section.seccion:not(.fondo-suave):not(.fondo-blanco):not(.fondo-oscuro):not(.banda-oscura):not(.cta) { padding-top: var(--e6); }
/* Antes del cartel colgante: la sección anterior no deja aire abajo; queda solo el lugar de las sogas. */
section.seccion:not(.fondo-suave):not(.fondo-blanco):not(.fondo-oscuro):not(.banda-oscura):has(+ .cta) { padding-bottom: 0; }

/* Títulos ocultos para lectores de pantalla (.sr-solo): sin adornos y siempre fuera del flujo. Sin esto, la
   regla de títulos de sección les ponía position:relative y dibujaba una marca roja suelta. */
.sr-solo { position: absolute !important; }
.sr-solo::before, .sr-solo::after { content: none !important; }
.cta__nota, .cta__nota a { color: #f3e3c8; }
.cta::before, .cta::after { /* sogas del cartel */
  content: ""; position: absolute; top: -48px; width: 6px; height: 50px;
  background: repeating-linear-gradient(-45deg, #c9a46a 0 4px, #8a6a3c 4px 8px); border-radius: 3px;
}
.cta::before { left: 18%; } .cta::after { right: 18%; }
.cta .boton--secundario { background: transparent; border-color: var(--crema); color: var(--crema); --sombra-boton: rgba(0,0,0,0.45); }
.cta :focus-visible { outline-color: var(--mostaza); }

/* ---------------------------------------------------------------- Footer: madera + guarda + pictogramas */
.sitio-footer {
  position: relative; background: var(--madera) url("../img/diseno/textura-papel.svg"); color: var(--papel);
  margin-top: 22px; padding-top: calc(var(--e12) + 56px);
}
.sitio-footer::before { /* guarda de montañas */
  content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px;
  background: url("../img/diseno/guarda-montanas.svg") left center / auto 22px repeat-x;
}
.sitio-footer::after { /* fila de pictogramas */
  content: ""; position: absolute; left: 50%; top: 24px; transform: translateX(-50%); width: 320px; height: 40px;
  background: var(--mostaza); opacity: 0.9;
  -webkit-mask-image: url("../img/diseno/picto-arquero.svg"), url("../img/diseno/picto-espiral.svg"), url("../img/diseno/picto-guanaco.svg"), url("../img/diseno/picto-sol.svg"), url("../img/diseno/picto-vasija.svg"), url("../img/diseno/picto-flechas.svg");
          mask-image: url("../img/diseno/picto-arquero.svg"), url("../img/diseno/picto-espiral.svg"), url("../img/diseno/picto-guanaco.svg"), url("../img/diseno/picto-sol.svg"), url("../img/diseno/picto-vasija.svg"), url("../img/diseno/picto-flechas.svg");
  -webkit-mask-size: 40px 40px; mask-size: 40px 40px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0, 56px 0, 112px 0, 168px 0, 224px 0, 280px 0;
          mask-position: 0 0, 56px 0, 112px 0, 168px 0, 224px 0, 280px 0;
}
.sitio-footer address, .sitio-footer__copyright, .sitio-footer__aviso { color: #e7d6b8; }
.sitio-footer__copyright { border-top: 2px dashed rgba(246,234,212,0.35); }
.sitio-footer a { color: var(--papel); }
/* Accesibilidad en el pie (2026-10-22): Símbolo Internacional de Accesibilidad en recuadro mostaza + 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 !important;
}
.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(--mostaza); color: var(--tierra); border-radius: 10px; box-shadow: 0 3px 0 #9a6a1a;
}
.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; } }

/* ---------------------------------------------------------------- Barra inferior móvil */
.barra-movil { background: var(--crema); border-top: 0; box-shadow: 0 -6px 16px rgba(46,29,18,0.14); }
.barra-movil::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
  background: url("../img/diseno/guarda-montanas.svg") left center / auto 10px repeat-x;
}
.barra-movil > a, .barra-movil__menu > summary { font-family: var(--fuente-titulo); font-weight: 400; font-size: 13px; color: var(--tierra); }
.barra-movil .icono { color: var(--terracota); }

/* ---------------------------------------------------------------- Mapa del circuito y otros acentos */
.mapa-circuito { border: 3px solid var(--madera); box-shadow: 0 6px 0 var(--madera); background: var(--crema); }
.modalidad { background: var(--crema); border: 2px solid var(--borde-papel); border-radius: var(--radio-mano); box-shadow: 0 5px 0 var(--borde-papel); }
.lead { color: #5a4030; }

/* Celular: las 10 tarjetas de «¿Qué vas a vivir?» de a dos por fila — la portada queda mucho más corta
   (CLAUDE.md §18: no hacer una Home interminable). Solo cambia la grilla, no el contenido. */
@media (max-width: 639px) {
  .vivir-grilla { gap: var(--e3); }
  .vivir-grilla > li { flex: 1 1 calc(50% - var(--e3)); max-width: calc(50% - var(--e3) / 2); }
  .vivir-grilla .tarjeta__cuerpo { padding: var(--e3); }
  .vivir-grilla .tarjeta__titulo { font-size: 17px; }
  .vivir-grilla .tarjeta__texto { font-size: 14px; line-height: 1.4; }
}

@media (prefers-reduced-motion: reduce) {
  .boton:hover, .boton:active, .tarjeta:has(a:hover), .tarjeta--enlace:hover { transform: none; }
}