:root {
  --bg: #0d0d0d;
  --bg-alt: #171a17;
  --text: #f2f2f2;
  --text-muted: #a8a8a8;
  --accent: #4caf50;
  --border: #2a2e2a;
  --on-accent: #0d0d0d;           /* texto sobre fondo verde */
  --link: #4a9eff;                /* teléfono y correo */
  --header-glass: rgba(23, 26, 23, 0.72);
  --shadow: rgba(0, 0, 0, 0.35);
  --accent-soft: rgba(76, 175, 80, 0.12);
  --accent-line: rgba(76, 175, 80, 0.45);
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* El header es sticky (70px): deja espacio para que los títulos no queden tapados al usar el menú */
  scroll-padding-top: 80px;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  /* En pantallas grandes ocupa el 90 % del ancho (margen proporcional a cada lado); nunca menos de 1400 px */
  max-width: max(1400px, 90vw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Header */
.site-header {
  background-color: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  /* Por encima del mapa: Leaflet usa z-index de hasta 1000 en sus capas y botones */
  z-index: 2000;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding-left: 1.5rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Sello en verde claro y sin fondo sobre la barra oscura (assets/logo-verde.png) */
.logo-icon {
  width: 36px;
  height: 36px;
}

.main-nav {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-list a {
  color: var(--text-muted);
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.nav-list a:hover {
  color: var(--accent);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--text);
}

/* Main */
.hero {
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.hero h1 {
  font-size: 2.25rem;
  margin-bottom: 1rem;
}

.hero p {
  color: var(--text-muted);
  font-size: 1.9rem;
}

/* Aviso "De turno hoy" en el menú de arriba (ver mostrarTurno en js/script.js) */
.turno-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1.25rem;
  margin-right: auto;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background-color: var(--accent-soft);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.turno-horario {
  color: var(--text-muted);
  font-weight: 400;
}

.turno-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--accent);
  animation: map-marker-blink 1s ease-in-out infinite;
}

@media (max-width: 720px) {
  .turno-badge {
    margin-left: 0.75rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
  }

  .turno-horario {
    display: none;
  }

}

.turno-corto {
  display: none;
}

/* Aviso anticipado (aún no es el día de turno): el punto queda fijo, sin parpadear */
.turno-badge--proximo .turno-dot {
  animation: none;
}

@media (max-width: 420px) {
  .turno-largo {
    display: none;
  }

  .turno-corto {
    display: inline;
  }
}

/* Nota de turnos en la tarjeta de horario */
.turno-nota {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Map */
.map-section {
  height: 560px;
}

@media (max-width: 768px) {
  .map-section {
    height: 420px;
  }
}

#mapa-ubicacion {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-color: #f0efe9;
}

/* OpenStreetMap viene a color: en gris queda sobrio, como el mapa anterior (el punto verde sigue a color) */
#mapa-ubicacion .leaflet-tile-pane {
  filter: grayscale(1) contrast(0.9) brightness(1.05);
}

.map-marker {
  width: 22px;
  height: 22px;
  background-color: var(--accent);
  border: 3px solid #ffffff;
  border-radius: 50%;
  animation: map-marker-blink 1s ease-in-out infinite;
}

@keyframes map-marker-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Sections */
.section {
  position: relative;
  padding: 1rem 1.5rem;
}

.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  border-top: 1px solid var(--border);
}

.section h2 {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  display: inline-block;
  padding-bottom: 0.4rem;
  border-bottom: 3px solid var(--accent);
}

.section h3 {
  font-size: 1.1rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.section p {
  color: var(--text-muted);
}

.bio-text {
  font-size: 1.15rem;
  margin-top: 0.75rem;
}

.underlined-title {
  margin-top: 1.5rem;
}

.note {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  font-style: italic;
}

.note-highlight {
  font-size: 1.4rem;
  text-align: center;
}

.complaints-box {
  background-color: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.complaints-box h3 {
  margin-bottom: 0.5rem;
}

.complaints-box p {
  color: var(--text-muted);
}

.email-link {
  color: var(--accent);
  text-decoration: underline;
}

.contact-link {
  color: var(--link);
  text-decoration: underline;
}

/* Botón "Cómo llegar": abre la ruta en Google Maps (en el celular, la app) */
.directions-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.directions-link::after {
  content: "→";
}

.directions-link:hover {
  background-color: var(--accent);
  color: var(--on-accent);
}

/* Info & card grids */
.info-grid,
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.info-card,
.card {
  background-color: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
}

.bio-card {
  margin-top: 1.5rem;
}

.card--compact {
  padding: 0.75rem 1.5rem;
}

/* Function list */
.function-list {
  margin-top: 1.5rem;
  padding-left: 1.25rem;
  color: var(--text-muted);
  display: grid;
  gap: 0.75rem;
}

/* Página de trámites: preguntas desplegables (cerradas por defecto) */
.tramites-intro {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.tramites-page h2 {
  font-size: 1.35rem;
  margin: 2.5rem 0 1rem;
}

.accordion {
  display: grid;
  gap: 0.6rem;
}

.accordion details {
  background-color: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.2s ease;
}

.accordion details[open] {
  border-color: var(--accent);
}

.accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.accordion details[open] summary::after {
  transform: rotate(45deg);
}

.accordion details > :not(summary) {
  margin: 0 1.25rem 1rem;
  color: var(--text-muted);
}

.tramites-links {
  padding-left: 1.25rem;
  display: grid;
  gap: 0.35rem;
}

.tramites-links a {
  color: var(--accent);
}

/* Páginas por trámite (transferencia-de-vehiculos.html, etc.) */
.tramite-texto {
  color: var(--text-muted);
}

.tramite-texto ul,
.tramite-texto ol {
  padding-left: 1.25rem;
  display: grid;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.tramite-contacto {
  margin-top: 3rem;
  padding: 1.5rem;
  background-color: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.tramite-contacto h2 {
  margin-top: 0 !important;
}

.tramite-contacto p {
  color: var(--text-muted);
}

.tramite-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.accordion .ver-mas {
  display: inline-block;
  color: var(--accent);
  font-weight: 600;
}

/* Índices mineros en texto (indice-minero-AAAA.html, generadas por scripts/) */
.indice-anios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 1.25rem;
}

.indice-anio {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.indice-anio:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.indice-anio.actual {
  border-color: var(--accent);
  background-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

/* Materia hace salto de línea para que se vea la fila completa sin desplazarse */
.indice-tabla td:nth-child(5) {
  white-space: normal;
  min-width: 14rem;
}

/* Registros mineros: nombre de la concesión bajo el N° y fojas (scripts/agregar-materia-registros.py) */
.resource-link:has(.doc-materia) {
  flex-direction: column;
  gap: 0.3rem;
}

.doc-materia {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-muted);
  text-align: center;
}

/* Staff list */
.staff-list {
  list-style: none;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem;
}

.staff-list li::before {
  content: "— ";
  color: var(--accent);
}

.staff-list--stacked {
  display: block;
  margin-bottom: 0;
}

.staff-list--stacked li {
  margin-bottom: 0.5rem;
}

.staff-list--stacked li:last-child {
  margin-bottom: 0;
}

/* Equipo: dos columnas juntas (cada una del ancho de su nombre más largo), con la misma
   separación vertical entre nombres que Suplentes */
.staff-list--2col {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  column-gap: 4.5rem;
  justify-content: center;
  row-gap: 0.5rem;
}

.staff-list--2col li {
  margin-bottom: 0;
}

@media (max-width: 420px) {
  .staff-list--2col {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

/* Nosotros: la tarjeta Equipo es más ancha para que los nombres quepan en dos columnas */
@media (min-width: 900px) {
  #nosotros .cards-grid {
    grid-template-columns: 1fr 1.6fr 1fr;
  }
}

.staff-role {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Resource links */
.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.resource-link {
  background-color: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.resource-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.funciones-button {
  display: block;
  width: fit-content;
  margin-top: 2rem;
}

/* Botón centrado de un tercio del ancho (Ver trámites y preguntas frecuentes); en celular, ancho completo */
.funciones-button.boton-ancho {
  width: min(100%, max(33.333%, 22rem));
  margin-inline: auto;
  text-align: center;
  padding-block: 1.1rem;
  font-size: 1.15rem;
  font-weight: 600;
}

/* Botón: fondo normal de tarjeta con letras verdes; al pasar el mouse o tocarlo, letras blancas */
.funciones-button.boton-ancho {
  color: #4caf50;
}

/* Al pasar el mouse o tocarlo, crece un poco y las letras pasan a blanco */
.funciones-button.boton-ancho:hover,
.funciones-button.boton-ancho:focus-visible,
.funciones-button.boton-ancho:active {
  transform: translateY(-2px) scale(1.03);
  color: #ffffff;
}

.section h3 + .links-grid,
.section h3 + .year-links,
.section h3 + .card {
  margin-top: 0.75rem;
}

.links-grid + h3,
.year-links + h3,
.card + h3 {
  margin-top: 2rem;
}

.year-links {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.6rem;
}

.year-links a {
  background-color: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  text-align: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.year-links a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.year-links a.year-active {
  border-color: var(--accent);
  color: var(--accent);
  background-color: var(--bg);
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* Enlace discreto a la cuenta de usuario (ingresar / mi cuenta / administración) */
.footer-acceso {
  margin-top: 0.4rem;
  font-size: 0.8rem;
}

.footer-acceso a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Responsive nav */
@media (max-width: 720px) {
  .nav-toggle {
    display: flex;
  }

  .nav-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    gap: 0;
    display: none;
  }

  .nav-list.open {
    display: flex;
  }

  .nav-list li {
    border-top: 1px solid var(--border);
  }

  .nav-list a {
    display: block;
    padding: 1rem 1.5rem;
  }

  .year-links {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Aparición suave al bajar (solo en la página de inicio, ver js/script.js).
   html.reveal la agrega el <head> de index.html; si el script no corre,
   el mismo <head> la quita y todo se ve normal. */
html.reveal :is(
  .section > h2,
  .section > h3,
  .section > p,
  .section > .card,
  .section > .complaints-box,
  .section > .links-grid,
  .section > .resource-link,
  .section > .registro-grupo,
  .info-grid > *,
  .cards-grid > *,
  .map-section
) {
  /* Conserva las transiciones de hover que ya tenían los links */
  transition: opacity 3.6s cubic-bezier(0.25, 0.1, 0.25, 1), border-color 0.4s ease, color 0.2s ease,
    transform 0.4s ease, box-shadow 0.4s ease;
}

/* Ocultos hasta que js/script.js les pone .is-in al entrar en pantalla */
html.reveal :is(
  .section > h2,
  .section > h3,
  .section > p,
  .section > .card,
  .section > .complaints-box,
  .section > .links-grid,
  .section > .resource-link,
  .section > .registro-grupo,
  .info-grid > *,
  .cards-grid > *,
  .map-section
):not(.is-in) {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Título principal: baja lentamente a su lugar al cargar la página, línea por línea */
html.reveal .hero > * {
  animation: hero-drop 3.6s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

html.reveal .hero > :nth-child(2) {
  animation-delay: 0.7s;
}

@keyframes hero-drop {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Con el aviso de turno el menú completo ya no cabe en pantallas medianas:
   ahí se oculta el horario del aviso y, bajo 1100px, el menú pasa a hamburguesa */
@media (max-width: 1300px) {
  .turno-horario {
    display: none;
  }
}

@media (max-width: 1100px) {
  .header-inner:has(.turno-badge) .nav-toggle {
    display: flex;
  }

  .header-inner:has(.turno-badge) .nav-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    gap: 0;
    display: none;
  }

  .header-inner:has(.turno-badge) .nav-list.open {
    display: flex;
  }

  .header-inner:has(.turno-badge) .nav-list li {
    border-top: 1px solid var(--border);
  }

  .header-inner:has(.turno-badge) .nav-list a {
    display: block;
    padding: 1rem 1.5rem;
  }
}

/* Aviso de turno largo ("Turno notarial 2026: mayo y noviembre"): en pantallas medianas
   se usa el texto corto para que el menú no se parta en dos líneas */
@media (max-width: 1350px) {
  .turno-largo {
    display: none;
  }

  .turno-corto {
    display: inline;
  }
}

/* Celular: el aviso baja a una línea propia bajo el logo, para no tapar el botón del menú */
@media (max-width: 480px) {
  .header-inner:has(.turno-badge) {
    height: auto;
    flex-wrap: wrap;
    padding-block: 0.6rem;
    row-gap: 0.4rem;
  }

  /* Salto de línea forzado: el aviso siempre queda en su propia fila, aunque sea corto */
  .header-inner:has(.turno-badge)::after {
    content: "";
    flex-basis: 100%;
    order: 2;
  }

  .header-inner .turno-badge {
    order: 3;
    margin: 0 auto 0.2rem;
  }
}

/* ── Efectos estilo Apple ─────────────────────────────────────────── */

/* 1. Barra de arriba translúcida: el contenido se ve difuminado detrás al bajar */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header {
    background-color: var(--header-glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

/* 2. Tarjetas: se agrandan y elevan al pasar el mouse */
.info-card,
.card {
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.info-card:hover,
.card:not(.card--compact):hover,
.accordion details:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 14px 34px var(--shadow);
  border-color: var(--accent-line);
}

/* Los desplegables de trámites ocupan todo el ancho: crecen menos para no salirse de los márgenes */
.accordion details:hover {
  transform: translateY(-3px) scale(1.025);
}

/* 3. Botones: crecen y se elevan al pasar el mouse */
.resource-link,
.year-links a,
.directions-link,
.indice-anio {
  transition: transform 0.3s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.resource-link:hover,
.year-links a:hover,
.directions-link:hover,
.indice-anio:hover {
  transform: translateY(-2px) scale(1.07);
  box-shadow: 0 10px 24px var(--shadow);
}

.resource-link,
.year-links a {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* 4. Subrayado verde de los títulos: se dibuja de izquierda a derecha al aparecer */
.section h2 {
  position: relative;
  border-bottom: none;
}

.section h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: var(--accent);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0.3s;
}

/* La raya se dibuja de izquierda a derecha cada vez que el título entra en pantalla, bajando o subiendo,
   y al salir también se recoge de izquierda a derecha; js/script.js pone o quita la clase "linea" */
html.reveal .section > h2::after {
  transform-origin: right;
}

html.reveal .section > h2.linea::after {
  transform-origin: left;
}

html.reveal .section > h2:not(.linea)::after {
  transform: scaleX(0);
}

/* 5. Mapa: aparece con un zoom muy suave */
html.reveal .map-section {
  transition: opacity 3.6s cubic-bezier(0.25, 0.1, 0.25, 1), transform 3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

html.reveal .map-section:not(.is-in) {
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  .info-card:hover,
  .card:hover,
  .accordion details:hover,
  .resource-link:hover,
  .year-links a:hover,
  .directions-link:hover,
  .indice-anio:hover {
    transform: none;
  }
}

/* ── Diseño de franjas alternadas, negras y crema, como apple.com ──
   Se activa con data-tema="alternado" en <html> (todas las páginas). */

/* Base de todas las páginas: verde bosque (#14201a). El inicio usa crema en sus secciones
   (ver html.oscurece); la barra de arriba conserva su propio color. */
html[data-tema="alternado"] {
  --bg: #0f1913;
  --bg-alt: #1d2b23;
  --text: #f5f2ec;
  --text-muted: #a9b8ad;
  --accent: #4caf50;
  --border: #2f4036;
  --on-accent: #14201a;
  --link: #6cb8ff;
  --header-glass: rgba(20, 32, 26, 0.88);
  --shadow: rgba(0, 0, 0, 0.45);
  --accent-soft: rgba(76, 175, 80, 0.12);
  --accent-line: rgba(76, 175, 80, 0.45);
}

/* Franjas negras: las variables se redefinen solo dentro de estas secciones.
   El título principal parte en negro y desde ahí se alterna; la barra de arriba también es negra. */
html[data-tema="alternado"] :is(.site-header, #inicio, #servicios, #nosotros, #contacto) {
  --header-glass: rgba(20, 32, 26, 0.88);
  --bg: #000000;
  --bg-alt: #1d1d1f;
  --text: #f5f5f7;
  --text-muted: #a1a1a6;
  --accent: #4caf50;
  --border: #333336;
  --on-accent: #000000;
  --link: #2997ff;
  --shadow: rgba(0, 0, 0, 0.5);
  --accent-soft: rgba(76, 175, 80, 0.12);
  --accent-line: rgba(76, 175, 80, 0.45);
  color: var(--text);
}

/* Cada franja ocupa todo el ancho de la pantalla, aunque el contenido siga centrado */
html[data-tema="alternado"] :is(.hero, .section, .map-section) {
  color: var(--text);
  background-color: var(--bg);
  box-shadow: 0 0 0 100vmax var(--bg);
  clip-path: inset(0 -100vmax);
}

/* Más aire arriba y abajo de cada franja, y sin la línea divisoria entre secciones */
html[data-tema="alternado"] .section {
  padding-block: 4.5rem;
}

html[data-tema="alternado"] .hero {
  padding-block: 5rem 4.5rem;
}

html[data-tema="alternado"] .section::before {
  display: none;
}

/* El mapa queda dentro de la franja de Ubicación, con margen abajo */
html[data-tema="alternado"] #ubicacion {
  padding-bottom: 2.5rem;
}

html[data-tema="alternado"] .map-section {
  height: auto;
  padding-bottom: 4.5rem;
}

html[data-tema="alternado"] #mapa-ubicacion {
  height: 560px;
}

@media (max-width: 768px) {
  html[data-tema="alternado"] #mapa-ubicacion {
    height: 420px;
  }

  html[data-tema="alternado"] .section {
    padding-block: 3rem;
  }
}

/* Variables de color registradas para poder animarlas (cambio suave crema ↔ verde en el inicio) */
@property --c-borde { syntax: '<color>'; inherits: true; initial-value: #1c2c21; }
@property --c-centro { syntax: '<color>'; inherits: true; initial-value: #1c2c21; }
@property --bg { syntax: '<color>'; inherits: true; initial-value: #0d0d0d; }
@property --bg-alt { syntax: '<color>'; inherits: true; initial-value: #171a17; }
@property --text { syntax: '<color>'; inherits: true; initial-value: #f2f2f2; }
@property --text-muted { syntax: '<color>'; inherits: true; initial-value: #a8a8a8; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #4caf50; }
@property --border { syntax: '<color>'; inherits: true; initial-value: #2a2e2a; }

/* ── Inicio (html.oscurece): el título principal siempre negro; el resto parte crema
   y al bajar cada sección pasa a negro ──
   js/script.js pone o quita la clase "negra" en cada sección según el scroll.
   La barra de arriba no cambia. */

/* Todas las secciones toman la base crema de la página (anula los colores fijos de las franjas) */
html.oscurece :is(#ubicacion, .map-section, #servicios, #funciones, #nosotros, #recursos, #registros, #contacto, .site-footer) {
  /* Tono inicial de las secciones: "casi bosque" (#1c2c21), un verde apenas más claro que el verde bosque */
  --bg: #1c2c21;
  --bg-alt: #2c3b31;
  --text: #f5f2ec;
  --text-muted: #b4b7af;
  --accent: #9fdca5;
  --border: #404e45;
  --on-accent: #14201a;
  --link: #6cb8ff;
  --shadow: rgba(0, 0, 0, 0.4);
  --accent-soft: rgba(159, 220, 165, 0.12);
  --accent-line: rgba(159, 220, 165, 0.45);
  color: var(--text);
  background-color: var(--bg);
  /* Fondo: degradado radial cuyo color de orillas (--c-borde) y de centro (--c-centro) se animan
     por separado: al pasar a verde cambian primero las orillas y luego el centro, y la animación
     siempre termina, así que nunca queda un halo crema. */
  --c-borde: #1c2c21;
  --c-centro: #1c2c21;
  background-image: radial-gradient(ellipse closest-side at 50% 50%, var(--c-centro) 0%, var(--c-borde) 100%);
  box-shadow: 0 0 0 100vmax var(--c-borde);
  /* De vuelta al tono inicial: el centro se aclara primero y las orillas lo siguen */
  transition: --c-centro 1.6s ease-in-out, --c-borde 1.6s ease-in-out 0.4s,
    --bg-alt 1.6s ease-in-out 0.2s, --text 1.6s ease-in-out 0.2s, --text-muted 1.6s ease-in-out 0.2s,
    --accent 1.6s ease-in-out 0.2s, --border 1.6s ease-in-out 0.2s;
}

/* Tono oscuro "verde bosque" (#14201a): título principal (fijo) y secciones ya alcanzadas al bajar.
   La barra de arriba no cambia. */
html.oscurece #inicio,
html.oscurece :is(#ubicacion, .map-section, #servicios, #funciones, #nosotros, #recursos, #registros, #contacto, .site-footer).negra {
  --bg: #14201a;
  --bg-alt: #1d2b23;
  --text: #f5f2ec;
  --text-muted: #a9b8ad;
  --accent: #4caf50;
  --border: #2f4036;
  --on-accent: #000000;
  --link: #2997ff;
  --shadow: rgba(0, 0, 0, 0.5);
  --accent-soft: rgba(76, 175, 80, 0.12);
  --accent-line: rgba(76, 175, 80, 0.45);
  --c-borde: #14201a;
  --c-centro: #14201a;
  /* A verde: las orillas (esquinas y bordes) primero, el centro después */
  transition: --c-borde 1.6s ease-in-out, --c-centro 1.6s ease-in-out 0.4s,
    --bg-alt 1.6s ease-in-out 0.2s, --text 1.6s ease-in-out 0.2s, --text-muted 1.6s ease-in-out 0.2s,
    --accent 1.6s ease-in-out 0.2s, --border 1.6s ease-in-out 0.2s;
}

/* El pie de página ocupa todo el ancho, como las secciones */
html.oscurece .site-footer {
  box-shadow: 0 0 0 100vmax var(--bg);
  clip-path: inset(0 -100vmax);
}

/* Sin línea fina entre Ubicación y el mapa */
html.oscurece .map-section {
  margin-top: -1px;
}

@media (prefers-reduced-motion: reduce) {
  html.oscurece :is(#ubicacion, .map-section, #servicios, #funciones, #nosotros, #recursos, #registros, #contacto, .site-footer) {
    transition: none;
  }
}

/* Menos espacio entre el título principal y Ubicación y Horarios */
html[data-tema="alternado"] .hero {
  padding-block: 4rem 2.5rem;
}

html[data-tema="alternado"] #ubicacion {
  padding-top: 2.5rem;
}

/* ── Inicio: cada sección es un recuadro con bordes redondeados (como "Consultas, Reclamos y
   Sugerencias"), dentro del ancho del contenido; ya no ocupa todo el ancho de la pantalla. ── */
html.oscurece :is(#ubicacion, #servicios, #funciones, #nosotros, #recursos, #registros, #contacto) {
  box-shadow: none;
  clip-path: none;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  margin: 1.5rem auto;
  /* el recuadro no puede ser más ancho que la pantalla menos los márgenes laterales */
  width: calc(100% - 3rem);
  max-width: calc(max(1400px, 90vw) - 3rem);
}

/* Ubicación y su mapa forman un solo recuadro: Ubicación arriba, mapa abajo */
html.oscurece #ubicacion {
  margin-bottom: 0;
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding-bottom: 1.5rem;
}

/* :is(…, #_) solo sube la especificidad al nivel de un id, para ganarle a la regla base */
html.oscurece :is(.map-section, #_) {
  box-shadow: none;
  clip-path: none;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 0 2rem 2rem;
  margin: 0 auto 1.5rem;
  width: calc(100% - 3rem);
  max-width: calc(max(1400px, 90vw) - 3rem);
}

/* El pie de página queda sobre el fondo de la página, sin recuadro */
html.oscurece :is(.site-footer, #_) {
  background: none;
  background-image: none;
  box-shadow: none;
  clip-path: none;
}

@media (max-width: 720px) {
  html.oscurece :is(#ubicacion, #servicios, #funciones, #nosotros, #recursos, #registros, #contacto) {
    width: calc(100% - 1.5rem);
    padding: 1.75rem 1.1rem;
    margin-block: 1rem;
  }

  html.oscurece #ubicacion {
    margin-bottom: 0;
    padding-bottom: 1.1rem;
  }

  /* :is(…, #_) solo sube la especificidad al nivel de un id, para ganarle a la regla base */
html.oscurece :is(.map-section, #_) {
    width: calc(100% - 1.5rem);
    padding: 0 1.1rem 1.1rem;
  }
}

/* Dentro de Registros: Instrumentos Públicos y Registros Mineros en recuadros separados */
.registro-grupo {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem 1.5rem 1.75rem;
  margin-top: 1.5rem;
}

.registro-grupo > h3:first-child {
  margin-top: 0;
}

@media (max-width: 720px) {
  .registro-grupo {
    padding: 1.1rem 0.9rem 1.25rem;
  }
}

/* Otros Registros Mineros: los 5 botones en una sola fila (en pantallas angostas se reparten) */
.links-grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.links-grid--5 .resource-link {
  padding-inline: 0.75rem;
}

@media (max-width: 1000px) {
  .links-grid--5 {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* Nosotros: espacio entre el título de cada tarjeta (Suplentes, Equipo, Personal) y los nombres */
#nosotros .cards-grid .card h3 {
  margin-bottom: 1rem;
}

/* Fondo de la página y título principal un poco más oscuros (#0f1913) que el verde bosque de los
   recuadros, para que estos contrasten un poco más */
html.oscurece #inicio {
  --bg: #0f1913;
}