/* ===========================================================================
   Ayuntamiento de Maleján · estilos. Un solo archivo.
   1. Colores: el verde de su web (#00833F, #005428) con el PATRÓN DE TRES
      TONOS (patrones/color.md). Contraste medido al lado de cada uno.
   2. Escala tipográfica y de espacios: 7 tamaños. Cuerpo a 18 px: muchos
      vecinos son mayores.
   3. Puntos de ruptura: 560 · 900 · 1200 (el menú completo no cabe antes de 1200).
   Letra del sistema (en Android es Roboto, la de su web): cero peticiones de fuera.
   =========================================================================== */
:root {
  --marca: #00833F;        /* su verde: 4,86 sobre blanco. Decoración y titulares grandes */
  --marca-texto: #006B33;  /* texto y enlaces: 6,66 sobre blanco · 6,01 sobre --fondo-alt */
  --marca-honda: #005428;  /* su verde oscuro: botones y foco. 9,14 con blanco · 8,24 sobre --fondo-alt */
  --escudo: #B3261E;       /* rojo del escudo, solo filetes: 6,54 sobre blanco */
  --fondo: #FFFFFF;
  --fondo-alt: #EEF5EF;
  --tinta: #1F2A24;        /* 14,8 sobre blanco · 13,4 sobre --fondo-alt */
  --tinta-suave: #4A5750;  /* 7,58 sobre blanco · 6,84 sobre --fondo-alt */
  --noche: #16241C;        /* pie: blanco encima 16,1 */
  --borde: #CFDCD2;

  --p0: .95rem; --p1: 1.125rem; --p2: 1.25rem; --p3: 1.6rem; --p4: 2rem; --p5: 2.5rem; --p6: 3.2rem;
  --h1: clamp(2.1rem, 6vw, var(--p6));
  --h2: clamp(var(--p3), 4vw, var(--p5));
  --e1: .5rem; --e2: 1rem; --e3: 1.6rem; --e4: 2.5rem; --e5: 4rem;

  --barra: 72px;
  --radio: 10px;
  --letra: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
/* Sin desplazamiento suave: al llegar a un ancla desde otra página se va directo. */
html { scroll-padding-top: calc(var(--barra) + 1.4rem); }
body { margin: 0; font: var(--p1)/1.6 var(--letra); color: var(--tinta); background: var(--fondo); }
img, svg, video { max-width: 100%; height: auto; }
figure { margin: 1.7em 0; }
figcaption { margin-top: var(--e1); font-size: var(--p0); color: var(--tinta-suave); }
[hidden] { display: none !important; }
a { color: var(--marca-texto); text-underline-offset: .15em; }
.seccion--alt a:not(.boton), .hero a:not(.boton) { color: var(--marca-honda); }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--marca-honda); outline-offset: 2px; }
/* Sobre fondo oscuro el foco verde no se ve (1,8:1): blanco. */
.pie :focus-visible, .barra-movil :focus-visible { outline-color: #fff; }
.barra-movil a:focus-visible { outline-offset: -5px; }
:where(p, li, td, dd) a:where([href^="tel:"], [href^="mailto:"]) { display: inline-flex; align-items: center; min-height: 44px; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; color: var(--tinta); }
h1 { font-size: var(--h1); margin: 0 0 var(--e2); }
h2 { font-size: var(--h2); margin: var(--e4) 0 var(--e2); }
h3 { font-size: var(--p2); margin: var(--e3) 0 var(--e1); }
.seccion > .contenedor > h2:first-child { margin-top: 0; }

.contenedor { width: min(100% - 2rem, 72rem); margin-inline: auto; }
/* El bloque estrecho arranca en el mismo borde que el resto (no centrado):
   un solo eje de lectura en toda la página. Líneas de ~65 caracteres. */
.estrecho { max-width: 46rem; }
.contenedor.estrecho { margin-left: max(1rem, (100% - 72rem) / 2); margin-right: auto; }
.estrecho p, .estrecho li, .estrecho dd { max-width: 65ch; }
.seccion { padding: var(--e4) 0; }
.seccion--alt { background: var(--fondo-alt); }
.barra .solo-escritorio { display: none; }

/* --- barra fija --- */
.salto { position: absolute; left: -9999px; top: 0; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; background: var(--fondo); }
.salto:focus { left: 1rem; }
.barra { position: sticky; top: 0; z-index: 70; background: var(--fondo); border-bottom: 3px solid var(--marca); }
.barra__in { display: flex; align-items: center; gap: var(--e2); min-height: var(--barra); }
.barra__marca { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; margin-right: auto; color: var(--marca-honda); font-weight: 800; text-decoration: none; line-height: 1.15; }
.barra__logo { height: 56px; width: 56px; }
.nav-escritorio { display: none; gap: .1rem; }
.nav-escritorio a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .6rem; color: var(--tinta); text-decoration: none; border-radius: 6px; white-space: nowrap; }
.nav-escritorio a:hover { background: var(--fondo-alt); }
.nav-escritorio a[aria-current="page"] { color: var(--marca-honda); font-weight: 700; box-shadow: inset 0 -3px 0 var(--marca); border-radius: 0; }
.nav-movil summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--borde); border-radius: 6px; cursor: pointer; list-style: none; font-weight: 700; color: var(--marca-honda); }
.nav-movil summary::-webkit-details-marker { display: none; }
/* Con la letra ampliada o el móvil apaisado, el menú se desplaza por dentro. */
.nav-movil nav { position: absolute; left: 0; right: 0; top: calc(var(--barra) + 3px); display: grid; background: var(--fondo); border-bottom: 1px solid var(--borde); padding: var(--e1) 1rem var(--e2); box-shadow: 0 8px 18px rgb(0 0 0 / .08); max-height: calc(100vh - var(--barra) - 3px); max-height: calc(100dvh - var(--barra) - 3px); overflow-y: auto; overscroll-behavior: contain; }
.nav-movil nav a { display: flex; align-items: center; min-height: 48px; color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--fondo-alt); }

/* --- botones --- */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.2rem; border-radius: var(--radio); background: var(--marca-honda); color: #fff; font-weight: 700; text-decoration: none; border: 2px solid var(--marca-honda); text-align: center; }
.boton:hover { background: var(--marca-texto); border-color: var(--marca-texto); }
.boton--sec { background: var(--fondo); color: var(--marca-honda); }
.boton--sec:hover { background: var(--fondo-alt); border-color: var(--marca-honda); }
.hero a.boton--sec { color: var(--marca-honda); }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e3); }

/* --- primera pantalla: con el filete rojo del escudo, en todas las páginas --- */
.hero { padding: var(--e3) 0 var(--e4); background: var(--fondo-alt); border-bottom: 4px solid var(--escudo); }
.hero__rej { display: grid; gap: var(--e3); align-items: center; }
.hero__foto { margin: 0; max-width: 34rem; }
.hero__foto img { display: block; width: 100%; border-radius: var(--radio); }
.antetitulo { margin: 0 0 var(--e1); color: var(--marca-texto); font-weight: 700; letter-spacing: .02em; }
.entradilla { font-size: var(--p2); color: var(--tinta-suave); max-width: 40rem; margin: 0; }
.aviso-horario { margin: var(--e3) 0 0; padding: .6rem var(--e2); border-left: 4px solid var(--escudo); background: var(--fondo); border-radius: 0 var(--radio) var(--radio) 0; max-width: 40rem; }

/* --- bloques --- */
.rejilla { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.rejilla--tres { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.tarjeta { display: block; padding: var(--e3); border: 1px solid var(--borde); border-top: 4px solid var(--marca); border-radius: var(--radio); background: var(--fondo); color: var(--tinta); text-decoration: none; }
a.tarjeta { display: flex; flex-direction: column; }
a.tarjeta:hover { border-color: var(--marca); box-shadow: 0 6px 16px rgb(0 84 40 / .12); }
.tarjeta h3 { margin-top: 0; color: var(--marca-honda); }
.tarjeta p { margin: 0; color: var(--tinta-suave); }
.tarjeta p + p { margin-top: var(--e1); }
/* El rótulo de acción, abajo del todo y con flecha: se ve que es pulsable. */
.tarjeta .ir { display: inline-block; margin-top: auto; padding-top: var(--e2); color: var(--marca-texto); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.tarjeta .ir::after { content: " →"; }
.noticia { display: grid; grid-template-columns: 6rem 1fr; gap: var(--e2); align-items: start; padding: var(--e2) 0; border-bottom: 1px solid var(--borde); }
.noticia img { width: 100%; height: auto; object-fit: cover; border-radius: 6px; }
.noticia h3 { margin: 0 0 .25rem; font-size: var(--p1); }
.noticia h3 a { display: inline-flex; align-items: center; min-height: 44px; }
.noticia p { margin: 0; color: var(--tinta-suave); }
.noticia time { display: block; font-size: var(--p0); color: var(--marca-texto); font-weight: 700; }
.fuera { display: block; font-size: var(--p0); }
.banda-placa { background: var(--noche); padding: var(--e4) 0; }
.banda-placa figure { margin-block: 0; }
.banda-placa img { display: block; width: 100%; max-width: 60rem; margin-inline: auto; border-radius: var(--radio); }
.banda-placa figcaption { color: #E6EEE8; font-size: var(--p1); max-width: 60rem; margin-inline: auto; }
/* Noticias: en el móvil, lista sin carteles (ilegibles en pequeño); desde 900, tres tarjetas. */
.noticias { display: grid; gap: 0 var(--e3); }
.foto-lado { display: grid; gap: var(--e3); align-items: start; }
.foto-lado figure { margin: 0; max-width: 22rem; }
.foto-lado img { display: block; width: 100%; border-radius: var(--radio); }
.dos-col--centro { align-items: center; }
.ficha h3 { margin-bottom: var(--e2); }
.pasos { counter-reset: paso; list-style: none; padding: 0; display: grid; gap: var(--e2); }
.pasos li { counter-increment: paso; padding-left: 3rem; position: relative; overflow-wrap: anywhere; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--marca-honda); color: #fff; font-weight: 700; }
/* Lo que hay que copiar tal cual (número, texto de alta): grande y de un toque. */
.copiable { display: block; width: fit-content; max-width: 100%; margin-top: var(--e1); padding: .5rem .8rem; background: var(--fondo); border: 1px dashed var(--marca); border-radius: 6px; font-size: var(--p2); font-weight: 700; letter-spacing: .03em; user-select: all; -webkit-user-select: all; overflow-wrap: break-word; }
.preguntas details { border-bottom: 1px solid var(--borde); padding: var(--e1) 0; }
.preguntas summary, .plegable summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.plegable { margin-top: var(--e3); border-top: 1px solid var(--borde); padding-top: var(--e1); }
.plegable summary { color: var(--marca-honda); }
.lista-limpia { list-style: none; padding: 0; margin: 0; }
.lista-limpia li { padding: .55rem 0; border-bottom: 1px solid var(--borde); }
.lista-limpia li:last-child { border-bottom: 0; }
.docs a { display: inline-flex; align-items: center; min-height: 44px; }
.nota { padding: var(--e2); border-left: 4px solid var(--escudo); background: var(--fondo); border-radius: 0 var(--radio) var(--radio) 0; }
.dos-col { display: grid; gap: var(--e4); }
.fotos { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.fotos figure { margin: 0; }
.fotos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); }
.fotos img[src*="torre"] { object-position: center 25%; }
table { width: 100%; border-collapse: collapse; margin: var(--e2) 0; }
th, td { padding: .7rem .4rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
th { font-size: var(--p0); color: var(--tinta-suave); }
dl.datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .4rem 1.2rem; margin: 0; }
dl.datos dt { font-weight: 700; }
dl.datos dd { margin: 0; overflow-wrap: anywhere; }
dl.datos dd a { display: inline-flex; align-items: center; min-height: 44px; }
blockquote { margin: var(--e3) 0; padding-left: var(--e2); border-left: 4px solid var(--marca); }
blockquote p { margin: 0; font-size: var(--p2); }
.firma { margin-top: var(--e1); color: var(--tinta-suave); }

/* --- pie --- */
.pie { padding: var(--e4) 0 calc(var(--e4) + 64px); background: var(--noche); color: #E6EEE8; border-top: 4px solid var(--marca); }
.pie a { color: #fff; }
.pie__rej { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.pie__nombre { display: flex; align-items: center; gap: .7rem; margin: 0 0 var(--e1); font-size: var(--p2); }
.pie__escudo { width: 48px; height: 48px; }
.pie__datos { font-style: normal; line-height: 1.7; }
.pie__datos a { display: inline-flex; align-items: center; min-height: 44px; }
.pie__enlaces { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.pie__enlaces li { break-inside: avoid; }
.pie__enlaces a { display: flex; align-items: center; min-height: 44px; }
.pie__demo { margin-top: var(--e3); padding-top: var(--e2); border-top: 1px solid #34463A; color: #C9D6CD; font-size: var(--p0); }

/* --- botón fijo de llamada, solo en el móvil --- */
.barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; background: var(--marca-honda); box-shadow: 0 -2px 10px rgb(0 0 0 / .15); }
.barra-movil a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 56px; color: #fff; font-weight: 700; text-decoration: none; }
.barra-movil a + a { border-left: 1px solid rgb(255 255 255 / .3); }
.cookies-abierto .barra-movil { display: none; }

@media (max-width: 899px) {
  /* Que la barra fija de abajo no tape lo que tiene el foco. */
  html { scroll-padding-bottom: 76px; }
  /* Portada: la foto en tira baja, para que el triaje suba. */
  .hero__foto--tira img { aspect-ratio: 16 / 7; object-fit: cover; object-position: center 40%; }
  .hero__foto--alta img { aspect-ratio: 4 / 3; object-fit: cover; }
  .hero__foto { margin-inline: 0; max-width: none; }
  .hero__foto--alta { max-width: 34rem; }
  .aviso-horario { max-width: none; }
  .seccion--triaje { padding-top: var(--e3); }
}
@media (max-width: 559px) {
  .noticia { grid-template-columns: 4.5rem 1fr; }
  .barra__marca span { font-size: 1rem; }
  .barra__logo { height: 48px; width: 48px; }
  /* En el móvil, primero el triaje: la fachada sale en contacto y la placa más abajo. */
  .hero__foto--tira { display: none; }
  .noticia { grid-template-columns: 1fr; }
  .noticia img { display: none; }
}
/* Móvil apaisado o letra muy ampliada: el menú en dos columnas, para que quepan las siete. */
@media (max-width: 1199px) and (max-height: 500px) {
  .nav-movil nav { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .nav-movil nav a { min-height: 44px; }
}
@media (max-width: 379px) {
  dl.datos { grid-template-columns: 1fr; }
  dl.datos dd { margin-bottom: .4rem; }
  .pie__enlaces { columns: 1; }
}
@media (min-width: 900px) {
  /* De 900 a 1199: botón de llamar en la cabecera y menú plegado (los 7
     enlaces no caben). Desde 1200, el menú completo. */
  .barra-movil { display: none; }
  .barra .solo-escritorio { display: inline-flex; white-space: nowrap; }
  .seccion { padding: var(--e5) 0; }
  .hero { padding: var(--e4) 0; }
  .hero__rej { grid-template-columns: 1.15fr 1fr; gap: var(--e4); }
  .hero__foto { margin-inline: 0; max-width: none; }
  .hero__foto--alta { max-width: 34rem; }
  .aviso-horario { max-width: none; }
  .dos-col { grid-template-columns: 1fr 1fr; }
  .pie { padding-bottom: var(--e4); }
  .tarjeta h3 { min-height: 2.4em; }
  .noticias { grid-template-columns: repeat(3, 1fr); }
  .noticias .noticia { grid-template-columns: 1fr; align-content: start; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); padding: 0 0 var(--e2); overflow: hidden; }
  .noticias .noticia img { aspect-ratio: 350 / 234; border-radius: 0; }
  .noticias .noticia > div { padding: 0 var(--e2); }
  .foto-lado { grid-template-columns: 18rem 1fr; }
}
@media (min-width: 1200px) {
  .nav-escritorio { display: flex; }
  .nav-movil { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .barra, .barra-movil, .nav-movil, .salto { display: none !important; }
  * { animation: none !important; opacity: 1 !important; }
}