/* ===========================================================================
   Estilos base de la Fábrica. Un solo archivo: cambiar «ese azul más oscuro»
   es cambiar una línea (patrones/mantenimiento.md).

   1. Colores: el PATRÓN DE TRES TONOS (patrones/color.md). El de marca, tal
      cual, SOLO para decorar; el oscurecido para todo el texto de color.
      Mide cada uno contra su fondo y apunta el contraste al lado.
   2. Escala tipográfica y de espacios (patrones/diseno.md): 7 tamaños, no 30.
   3. Tres puntos de ruptura para todas las webs: 560 · 900.
   =========================================================================== */
:root {
  /* Su dorado y su versión honda (los dos, de su CSS: #b88a3f y #855b18). */
  --marca: #B88A3F;        /* decoración: 3,11 sobre blanco, NO para texto */
  --marca-texto: #855B18;  /* texto y enlaces: 5,99 sobre blanco; 5,41 sobre --fondo-alt */
  --marca-honda: #5E400F;  /* botones y foco: 9,48 sobre blanco (nuestro: su dorado oscurecido) */
  --fondo: #FFFFFF;
  --fondo-alt: #F6F3EE;    /* cálido, de su tierra */
  --tinta: #2B2A28;        /* 14,3 sobre blanco */
  --tinta-suave: #575049;  /* 7,9 sobre blanco */
  --borde: #DDD5C8;

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

  --barra: 64px;           /* el alto de la barra fija, en UN sitio */
  --radio: 10px;
  --letra: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* cero peticiones de fuera */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 1.4rem); } /* el freno de las anclas */
body { margin: 0; font: var(--p1)/1.65 var(--letra); color: var(--tinta); background: var(--fondo); }
img, svg, video { max-width: 100%; height: auto; }
figure { margin: 1.7em 0; } /* el margin:1em 40px de fábrica descuadra las fotos */
[hidden] { display: none !important; } /* cualquier display tuyo le gana a hidden */
a { color: var(--marca-texto); }
/* --marca-texto da 4,51 sobre BLANCO y 4,16 sobre el gris de las secciones
   alternas (medido con contraste.py en Casa Emilia): un tono cumple sobre los
   fondos con los que se calibro, no sobre todos. Ahi los enlaces van en el hondo. */
.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; }
:where(p, li, td) a:where([href^="tel:"], [href^="mailto:"]) { display: inline-flex; align-items: center; min-height: 44px; } /* se pulsan con el dedo */
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
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); }

.contenedor { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.estrecho { max-width: 44rem; }
.seccion { padding: var(--e4) 0; }
.seccion--alt { background: var(--fondo-alt); }
/* Con la barra delante: .boton (display:inline-flex) va despues y ganaba,
   y el boton de escritorio aparecia en la cabecera del movil (visto en la
   revision visual de Casa Emilia). En el movil llama la barra de abajo. */
.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: 50; background: var(--fondo); border-bottom: 1px solid var(--borde); }
.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(--tinta); font-weight: 700; text-decoration: none; }
.barra__logo { height: 40px; width: auto; }
.nav-escritorio { display: none; gap: .25rem; }
.nav-escritorio a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7rem; color: var(--tinta); text-decoration: none; border-radius: 6px; }
.nav-escritorio a[aria-current="page"] { color: var(--marca-honda); font-weight: 700; }
.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; }
.nav-movil summary::-webkit-details-marker { display: none; }
.nav-movil nav { position: absolute; left: 0; right: 0; top: var(--barra); display: grid; background: var(--fondo); border-bottom: 1px solid var(--borde); padding: var(--e1) 1rem var(--e2); }
.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); }
.nav-movil nav { max-height: calc(100vh - var(--barra)); overflow-y: auto; } /* con un desplegable largo, el menú se recorre */
.nav-movil .nav-sub-movil { padding-left: 1.4rem; color: var(--tinta-suave); }
/* desplegable de escritorio: se abre al pasar o con el tabulador, sin JavaScript */
.nav-grupo { position: relative; display: inline-flex; }
.nav-grupo > a::after { content: ""; margin-left: .35rem; border: 5px solid transparent; border-top-color: currentColor; transform: translateY(3px); }
.nav-sub { display: none; position: absolute; top: 100%; left: 0; min-width: 15rem; padding: var(--e1); background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 14px 30px rgb(16 24 40 / .12); }
.nav-grupo:hover .nav-sub, .nav-grupo:focus-within .nav-sub { display: grid; }
.nav-sub a { width: 100%; }

/* --- el árbol: migas y firma del revisor --- */
.migas { padding: var(--e1) 0; font-size: var(--p0); color: var(--tinta-suave); }
.migas a { display: inline-flex; align-items: center; min-height: 44px; }
.revision { margin: var(--e2) 0; padding: .7rem 1rem; border-left: 4px solid var(--marca); background: var(--fondo); font-size: var(--p0); color: var(--tinta-suave); }
.revision--pendiente { border-left-color: #B45309; background: #FFFBEB; color: #78350F; }

/* --- botones --- */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .5rem 1.2rem; text-align: center; text-wrap: balance; line-height: 1.25; border-radius: var(--radio); background: var(--marca-honda); color: #fff; font-weight: 700; text-decoration: none; border: 2px solid var(--marca-honda); }
.boton--sec { background: transparent; color: var(--marca-honda); }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e1); }

/* --- bloques --- */
.hero { padding: var(--e4) 0 var(--e5); background: var(--fondo-alt); }
.antetitulo { margin: 0 0 var(--e1); color: var(--tinta-suave); font-weight: 700; letter-spacing: .02em; }
.entradilla { font-size: var(--p2); color: var(--tinta-suave); max-width: 40rem; }
.rejilla { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } /* min(100%,…): con 300px fijos desborda el móvil */
.tarjeta { display: block; padding: var(--e3); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); color: var(--tinta); text-decoration: none; }
.tarjeta h3 { margin-top: 0; color: var(--marca-honda); }
.pasos { counter-reset: paso; list-style: none; padding: 0; display: grid; gap: var(--e2); }
.pasos li { counter-increment: paso; padding-left: 3rem; position: relative; }
.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; }
.preguntas details { border-bottom: 1px solid var(--borde); padding: var(--e1) 0; }
.preguntas summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.dato { font-size: var(--p4); font-weight: 800; color: var(--marca-honda); }
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); }
.precio { text-align: right; white-space: nowrap; }
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); }
.oscuro { background: var(--tinta); color: #fff; }
.oscuro a, .oscuro strong { color: inherit; } /* sobre fondo oscuro, la negrita no puede ir en tinta */

/* --- pie --- */
.pie { padding: var(--e4) 0 calc(var(--e4) + 64px); background: var(--tinta); color: #E9ECEF; font-size: var(--p0); }
.pie a { color: #fff; }
.pie__rej { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.pie__enlaces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.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 #3A4048; color: #C9CED4; }

/* --- 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); }
/* Mientras el cartel de cookies (cookies-kit) está abierto, la barra le quedaría debajo. */
.cookies-abierto .barra-movil { display: none; }

/* --- el toque: la web responde al que la usa (patrones/movimiento.md) ---
   Sin JavaScript, con
   «reducir movimiento» o en un robot, todo se ve entero y quieto: lo único que
   esconde algo es .toque, y esa clase la pone (y la quita) toque.js. */
.toque [data-aparece]:not([data-aparece="escalonado"]):not(.visto),
.toque [data-aparece="escalonado"]:not(.visto) > * { opacity: 0; transform: translateY(18px); }
[data-aparece]:not([data-aparece="escalonado"]), [data-aparece="escalonado"] > * {
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.sin-animar, .sin-animar > * { transition: none !important; }
[data-cuenta] { display: inline-block; font-variant-numeric: tabular-nums; } /* las cifras no bailan mientras cuentan */

/* La cabecera se despega del contenido al bajar */
.barra { transition: box-shadow .25s; }
.barra.bajada { box-shadow: 0 6px 20px rgb(16 24 40 / .08); }

/* Botones: responden al ratón y al dedo */
.boton { transition: background-color .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s; }
.boton:hover { background: color-mix(in srgb, var(--marca-honda) 82%, #000); border-color: color-mix(in srgb, var(--marca-honda) 82%, #000); box-shadow: 0 6px 16px rgb(16 24 40 / .16); }
.boton--sec:hover { background: var(--marca-honda); border-color: var(--marca-honda); color: #fff; }
.boton:active { transform: translateY(1px); box-shadow: none; }

/* Tarjetas que se pulsan: se levantan, les sale el filete de color y la
   flecha de «Ver más» avanza. Con el teclado, lo mismo que con el ratón. */
a.tarjeta { position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
a.tarjeta::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--marca); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.22,1,.36,1); }
a.tarjeta img { display: block; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.tarjeta__mas { margin: var(--e2) 0 0; color: var(--marca-honda); font-weight: 700; }
.tarjeta__mas::after { content: "→"; display: inline-block; margin-left: .35em; transition: transform .25s; }
a.tarjeta:focus-visible::before { transform: scaleX(1); }
@media (hover: hover) {
  a.tarjeta:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgb(16 24 40 / .12); border-color: transparent; }
  a.tarjeta:hover::before { transform: scaleX(1); }
  a.tarjeta:hover img { transform: scale(1.04); }
  a.tarjeta:hover .tarjeta__mas::after { transform: translateX(5px); }
}

/* Preguntas que se despliegan con su «+» (y suave donde el navegador sabe) */
.preguntas summary::after { content: "+"; margin-left: auto; padding-left: 1rem; font-size: 1.5em; font-weight: 400; line-height: 1; color: var(--marca-honda); transition: transform .25s; }
.preguntas details[open] > summary::after { transform: rotate(45deg); }
@supports (interpolate-size: allow-keywords) {
  .preguntas details { interpolate-size: allow-keywords; }
  .preguntas details::details-content { block-size: 0; overflow: hidden; transition: block-size .3s, content-visibility .3s allow-discrete; }
  .preguntas details[open]::details-content { block-size: auto; }
}

/* Volver arriba con el anillo de lo leído (lo crea toque.js en páginas largas).
   Solo en escritorio: en el móvil abajo está la barra de llamar y manda ella. */
.arriba { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 55; display: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--fondo); box-shadow: 0 4px 14px rgb(16 24 40 / .14); cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s, transform .25s; }
.arriba:not(.arriba--ver) { visibility: hidden; }
.arriba--ver { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.arriba svg { width: 100%; height: 100%; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.arriba__pista { stroke: var(--borde); }
.arriba__anillo { stroke: var(--marca-honda); transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .1s linear; }
.arriba path { stroke: var(--marca-honda); }
.cookies-abierto .arriba { display: none; }

/* ===========================================================================
   Propio de la Comarca (28/10/2026): una web pública de ~700 páginas.
   =========================================================================== */
/* La franja de arriba: los dos teléfonos, buscar y la sede electrónica */
.utiles { background: var(--tinta); color: #fff; font-size: var(--p0); }
.utiles__in { display: flex; flex-wrap: wrap; gap: 0 1.2rem; align-items: center; }
.utiles a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; text-decoration: none; }
.utiles a:hover { text-decoration: underline; }
.utiles__sede { margin-left: auto; font-weight: 700; }
.utiles a { min-width: 44px; justify-content: center; }
/* En el móvil los dos teléfonos ya van en la barra fija de abajo: aquí, solo buscar y la sede */
@media (max-width: 899px) { .utiles a[href^="tel:"] { display: none; } }
.nav-escritorio a { white-space: nowrap; padding: 0 .55rem; }
.barra .boton { white-space: nowrap; }
.barra .contenedor { width: min(100% - 2rem, 72rem); }
.utiles a:focus-visible { outline-color: #fff; }
.barra__marca span { line-height: 1.15; }
.barra__logo { width: auto; height: 44px; }

/* La portada: la foto del Moncayo (de su web) detrás, oscurecida para leer */
.hero--portada { position: relative; overflow: hidden; color: #fff; background: #2B2A28; padding: var(--e5) 0; }
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 85%; }
.hero--portada::after { content: ""; position: absolute; inset: 0; background: rgb(30 22 8 / .72); }
@media (min-width: 900px) {
  .hero--portada::after { background: linear-gradient(90deg, rgb(30 22 8 / .86) 0, rgb(30 22 8 / .74) 50%, rgb(30 22 8 / .28) 100%); }
}
.hero__in { position: relative; z-index: 1; }
.hero--portada .antetitulo, .hero--portada .entradilla { color: #fff; }
.hero--portada h1 { max-width: 46rem; text-shadow: 0 2px 12px rgb(0 0 0 / .35); }
.hero--portada .boton { background: #fff; color: var(--marca-honda); border-color: #fff; }
.hero--portada .boton--sec { background: transparent; color: #fff; border-color: #fff; }
.hero--portada .boton--sec:hover { background: #fff; color: var(--marca-honda); }
.hero--interior { padding: var(--e4) 0; border-bottom: 4px solid var(--marca); }
.hero--interior h1 { font-size: clamp(var(--p4), 5vw, var(--p5)); }

/* «¿Qué necesitas?»: cuatro perfiles con sus enlaces */
.perfil { padding: var(--e3); border: 1px solid var(--borde); border-top: 4px solid var(--marca); border-radius: var(--radio); background: var(--fondo); }
.perfil h3 { margin-top: 0; color: var(--marca-honda); }
.lista-enlaces { list-style: none; margin: 0; padding: 0; }
.lista-enlaces li { border-bottom: 1px solid var(--fondo-alt); }
.lista-enlaces a { display: flex; align-items: center; min-height: 44px; padding: .25rem 0; font-weight: 500; text-decoration: none; }
.lista-enlaces a::after { content: "›"; margin-left: auto; padding-left: .8rem; font-size: 1.3em; line-height: 1; color: var(--marca); }
.lista-enlaces a:hover, .lista-enlaces a:focus-visible { text-decoration: underline; }

/* Tarjetas con foto, fecha y listas por fecha */
.tarjeta--foto { padding: 0; overflow: hidden; }
.tarjeta--foto > :not(img) { margin-left: var(--e3); margin-right: var(--e3); }
.tarjeta--foto > :last-child { margin-bottom: var(--e3); }
.tarjeta__foto { display: block; width: 100%; height: 11rem; object-fit: cover; background: var(--fondo-alt); margin-bottom: var(--e2); }
.tarjeta--foto h3, .tarjeta--foto .tarjeta__t { margin-top: var(--e2); }
.tarjeta__fecha { margin: 0; font-size: var(--p0); color: var(--tinta-suave); }
.tarjeta__t { font-size: var(--p2); margin: 0 0 var(--e1); color: var(--marca-honda); }
.lista-fechas { list-style: none; padding: 0; margin: 0; }
.lista-fechas li { padding: .55rem 0; border-bottom: 1px solid var(--borde); }
.lista-fechas time { display: block; font-size: var(--p0); color: var(--tinta-suave); }
.lista-fechas a { display: inline-flex; align-items: center; min-height: 44px; }
.filtros ul { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 var(--e3); }
.filtros a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--borde); border-radius: 999px; background: var(--fondo); text-decoration: none; }
.filtros__t { font-size: var(--p1); margin: 0 0 var(--e1); }
.filtros-linea a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .3rem; }
.mas { margin-top: var(--e3); font-weight: 700; }
.mas a { display: inline-flex; align-items: center; min-height: 44px; }
.rejilla--pueblos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.tarjetas-contacto { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); margin: var(--e3) 0; }

/* Lo migrado: textos largos, fotos, tablas y documentos de la web anterior */
.contenido { overflow-wrap: break-word; }
.migas a, .contenido li a, .contenido p > a:only-child, .contenido figure a, .lista-fechas a { min-width: 44px; justify-content: center; }
/* Las tarjetas migradas (enlace > figure > h3) eran de 24 px: 44 táctiles */
.contenido a:has(> figure) { display: flex; align-items: center; min-height: 44px; margin: var(--e1) 0; }
.contenido a:has(> figure) > figure { margin: 0; }
/* «Ir a: 2025 · 2024…», lo que eran pestañas en la web anterior */
.saltos a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
@media (max-width: 899px) { .hero--portada { padding: var(--e4) 0; } .perfil { padding: var(--e2); } }
.contenido :where(img, figure, video, iframe, table, ul, ol, p, h2, h3, h4) { max-width: 100%; }
.contenido img { display: block; height: auto; margin: var(--e2) auto; border-radius: 6px; }
.contenido figure { margin: var(--e3) 0; }
.contenido a { overflow-wrap: anywhere; }
.contenido li a, .contenido p a, .contenido td a, .contenido figcaption a, .contenido :is(h2, h3, h4, h5, dd, blockquote) a { display: inline-flex; align-items: center; min-height: 44px; } /* lo migrado trae muchos enlaces sueltos: todos se pulsan con el dedo */
.contenido .tabla { overflow-x: auto; margin: var(--e2) 0;
  /* la sombra lateral avisa de que hay más columnas (y desaparece al llegar al final) */
  background: linear-gradient(90deg, var(--fondo) 30%, rgb(255 255 255 / 0)), linear-gradient(90deg, rgb(255 255 255 / 0), var(--fondo) 70%) 100% 0,
              radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / .18), transparent), radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .18), transparent) 100% 0;
  background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; }
.contenido .tabla table { margin: 0; }
.tabla__pista { margin: var(--e2) 0 0; font-size: var(--p0); color: var(--tinta-suave); }
.contenido a[href^="tel:"], .num { white-space: nowrap; }
.tipo { margin-left: .3em; font-size: var(--p0); font-weight: 400; color: var(--tinta-suave); }
.contenido h2 { font-size: var(--p3); }
.noticia__meta { color: var(--tinta-suave); }
.noticia__meta a { display: inline-flex; align-items: center; min-height: 44px; }
.noticia__foto { display: block; margin: var(--e3) auto; border-radius: 6px; height: auto; }
.volver { margin-top: var(--e4); font-weight: 700; }
.volver a { display: inline-flex; align-items: center; min-height: 44px; }
.volver a::before { content: "← "; white-space: pre; }
.aviso { padding: .8rem 1rem; border-left: 4px solid var(--marca); background: var(--fondo-alt); }
.ficha-acto { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; padding: var(--e2); background: var(--fondo-alt); border-radius: var(--radio); }
.ficha-acto dt { font-weight: 700; }
.ficha-acto dd { margin: 0; }

/* El buscador */
.buscador label { display: block; font-weight: 700; margin-bottom: .4rem; }
.buscador__fila { display: flex; gap: .5rem; flex-wrap: wrap; }
.buscador input { flex: 1 1 14rem; min-height: 48px; padding: 0 .9rem; font: inherit; border: 2px solid var(--tinta-suave); border-radius: var(--radio); }
.buscador button { cursor: pointer; font: inherit; font-weight: 700; }
.resultados { list-style: none; padding: 0; }
.resultados li { padding: .7rem 0; border-bottom: 1px solid var(--borde); }
.resultados li a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.resultados li p { margin: 0; color: var(--tinta-suave); font-size: var(--p0); }

/* El pie: tres columnas y los logos de la financiación sobre blanco */
.pie__t { font-size: var(--p1); margin: 0 0 var(--e1); color: #fff; }
.pie__t + .pie__enlaces { margin-bottom: var(--e3); }
.pie__logos { margin-top: var(--e3); }
.pie__logos img { display: block; max-width: min(100%, 36rem); height: auto; background: #fff; padding: .6rem; border-radius: 6px; }

/* Siete entradas no caben a 900 px: el menú de escritorio, desde 1180 */
@media (min-width: 900px) {
  .arriba { display: block; }
  .barra-movil { display: none; }
  .seccion { padding: var(--e5) 0; }
  .pie { padding-bottom: var(--e4); }
}
@media (min-width: 1180px) {
  .nav-escritorio { display: flex; }
  .nav-movil { display: none; }
}
/* El botón de llamar de la cabecera, solo cuando cabe (el teléfono ya está en la franja de arriba) */
@media (min-width: 1440px) { .barra .solo-escritorio { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::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; }
}

/* ===========================================================================
   Vuelta 1 de la optimización (28/10/2026)
   =========================================================================== */
/* Servicios Sociales en la página de cada pueblo */
.caja-ss { margin: var(--e3) 0; padding: var(--e3); border-left: 4px solid var(--marca); border-radius: var(--radio); background: var(--fondo-alt); }
.caja-ss h2 { margin-top: 0; font-size: var(--p3); }
.caja-ss a:not(.boton) { color: var(--marca-honda); }
.caja-ss .acciones { align-items: center; }

/* El menú del móvil: un desplegable por sección */
.nav-grupo-movil { border-bottom: 1px solid var(--fondo-alt); }
.nav-grupo-movil summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; list-style: none; font-weight: 600; }
.nav-grupo-movil summary::-webkit-details-marker { display: none; }
.nav-grupo-movil summary::after { content: "+"; margin-left: auto; font-size: 1.4em; line-height: 1; color: var(--marca-honda); }
.nav-grupo-movil[open] summary::after { content: "–"; }
.nav-grupo-movil .nav-sub-movil:last-child { border-bottom: 0; }

@media (max-width: 899px) {
  /* el menú y las anclas no se quedan debajo de la barra de llamar (QA-01, TEC-08) */
  .nav-movil nav { max-height: calc(100dvh - var(--barra)); padding-bottom: calc(56px + var(--e3)); }
  html { scroll-padding-bottom: calc(56px + 1rem); }
  /* subir, también en el móvil, encima de la barra (QA-07) */
  .arriba { display: block; bottom: calc(56px + 1rem); right: 1rem; }
  .barra-movil a { padding: 0 .5rem; text-align: center; line-height: 1.2; }
  .acciones .boton { flex: 1 1 100%; }
}

/* Escritorio: el logo, legible; las páginas interiores, con su tierra al fondo (DIS-02, DIS-04) */
@media (min-width: 900px) {
  :root { --barra: 76px; }
  .barra__logo { height: 56px; }
  .hero--interior { background: linear-gradient(90deg, var(--fondo-alt) 56%, rgb(246 243 238 / .55) 78%, rgb(246 243 238 / .1) 100%),
                                url("assets/portada.webp") right 0 bottom 85% / cover no-repeat, var(--fondo-alt); }
  .hero--interior :is(h1, .entradilla, .antetitulo) { max-width: 34rem; }
}

/* Títulos de noticia que llegaron en MAYÚSCULAS: más pequeños, no gritan (DIS-08) */
.t-mayus { font-size: var(--p1); letter-spacing: .02em; }

/* El buscador: una consulta larga no ensancha la página (QA-05) */
#resultados, .resultados { overflow-wrap: anywhere; }

/* El cierre de la portada: texto y foto del territorio (DIS-06) */
.cierre__foto { display: block; width: 100%; height: 14rem; object-fit: cover; object-position: 50% 85%; border-radius: var(--radio); margin-bottom: var(--e3); }
@media (min-width: 900px) {
  .cierre { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); align-items: center; }
  .cierre__foto { order: 2; height: 100%; min-height: 18rem; margin: 0; }
  .cierre h2 { margin-top: 0; }
}
/* dentro de un botón (flex), el espacio antes del número se perdía: «Llamar al976» */
.boton .num { margin-left: .28em; }
/* el botón de llamar dentro de lo migrado sí parte; solo el número va entero (desborde a 375) */
.contenido a.boton[href^="tel:"] { white-space: normal; }
.caja-ss p a:not(.boton) { display: inline-flex; align-items: center; min-height: 44px; }
/* en el móvil la portada ya enseña la foto arriba: la del cierre, solo en escritorio (portada-larga) */
@media (max-width: 899px) { .cierre__foto { display: none; } }

/* ===========================================================================
   Vuelta 2 de la optimización (28/10/2026)
   =========================================================================== */
/* DIS-11: un enlace dentro de una frase va EN LÍNEA (el párrafo no salta); su
   zona de pulsación crece con relleno vertical, que no mueve las líneas.
   (WCAG 2.5.8 exceptúa los enlaces en frase; aun así, 44 px de alto.) */
p:not(.saltos):not(.acciones) a:not(.boton):not(:has(img)) { display: inline; min-height: 0; padding-block: 14px; }

/* DIS-13: si el botón no cabe en una línea, el número baja entero y centrado */
.boton:has(.num) { flex-wrap: wrap; column-gap: .28em; }
.boton .num { margin-left: 0; }

/* DIS-12: en el móvil, la foto de portada se ve abajo (donde van los botones blancos) */
@media (max-width: 899px) {
  .hero__foto { object-position: 50% 70%; }
  .hero--portada::after { background: linear-gradient(180deg, rgb(30 22 8 / .82) 0, rgb(30 22 8 / .74) 60%, rgb(30 22 8 / .38) 100%); }
}
.tipo { white-space: nowrap; }
.antetitulo + h1.t-mayus, h1.t-mayus { font-size: clamp(var(--p3), 4.5vw, var(--p4)); }

/* CRO-19: en el móvil, una tabla de alojamientos o bares es una ficha por fila,
   con el nombre de cada dato al lado y el teléfono a mano */
@media (max-width: 699px) {
  .contenido table.fichas, .fichas tbody, .fichas tr, .fichas td { display: block; width: 100%; }
  .fichas tr:has(th) { position: absolute; left: -9999px; }
  .fichas tr { padding: var(--e2) 0; border-bottom: 1px solid var(--borde); }
  .fichas td { border: 0; padding: .1rem 0; }
  .fichas td::before { content: attr(data-dato) ": "; font-size: var(--p0); color: var(--tinta-suave); }
  .fichas td:first-child { font-weight: 700; }
  .fichas td:first-child::before { content: none; }
  .contenido .tabla:has(.fichas) { overflow: visible; background: none; }
}
/* QA de la vuelta 2 */
.fichas td:empty { display: none; }
@media (max-width: 899px) { .nav-movil nav { scroll-padding-bottom: calc(56px + 1.5rem); } }
/* DIS-17: «Ir a:» en fila que parte limpia, el separador detrás de cada enlace */
.saltos { display: flex; flex-wrap: wrap; align-items: center; column-gap: .55rem; }
.saltos a:not(:last-child)::after { content: "·" / ""; margin-left: .6rem; color: var(--tinta-suave); }

/* Vuelta 3 */
main a[href^="tel:"]:not(.boton) { white-space: nowrap; }   /* CRO-25: el número, entero, también en lo escrito a mano */
.tarjeta__foto { object-position: top; }                    /* CRO-28: en los carteles, lo de arriba es lo que importa */
.contenido h4 { margin-top: var(--e3); }                    /* DIS-16 */
/* el 112, corto: su zona de pulsación también llega a 44 px de ancho */
a[href="tel:112"] { min-width: 44px; justify-content: center; padding-inline: 8px; }
/* un enlace en fila (flex) con «(PDF)» detrás: si no cabe, «(PDF)» baja de línea */
.contenido a:has(.tipo) { flex-wrap: wrap; }

/* ===========================================================================
   Diseño final de la muestra (29/10/2026): sus fotos, su tierra, letra con carácter
   =========================================================================== */
:root { --letra-titulos: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; } /* del sistema: cero peticiones */
h1, h2, .mosaico__pie { font-family: var(--letra-titulos); font-weight: 700; letter-spacing: -.005em; }
.hero--portada h1 { font-size: clamp(2.1rem, 5.6vw, 3.6rem); line-height: 1.08; }
.antetitulo { text-transform: uppercase; letter-spacing: .12em; font-size: var(--p0); color: var(--marca-texto); }
.hero--portada .antetitulo { color: #F3E3C3; }
.hero--portada .hero__foto { object-position: 50% 12%; }

/* las interiores de escritorio, con el Moncayo de fondo (antes, la foto apagada) */
@media (min-width: 900px) {
  .hero--interior { background: linear-gradient(90deg, var(--fondo-alt) 56%, rgb(246 243 238 / .55) 78%, rgb(246 243 238 / .1) 100%),
                                url("assets/fotos/moncayo-1440.webp") right 0 center / cover no-repeat, var(--fondo-alt); }
  /* cada pueblo, con la foto de su ficha */
  .hero--foto { background: linear-gradient(90deg, var(--fondo-alt) 50%, rgb(246 243 238 / .4) 75%, rgb(246 243 238 / 0) 100%),
                            var(--foto) right 0 center / 55% auto no-repeat, var(--fondo-alt); }
}
@media (max-width: 899px) {
  .hero--foto { background: linear-gradient(180deg, rgb(246 243 238 / .92) 55%, rgb(246 243 238 / .7) 100%), var(--foto) center / cover no-repeat, var(--fondo-alt); }
}

/* «¿Qué necesitas?»: cada perfil con su icono */
.perfil__icono { width: 2.2rem; height: 2.2rem; margin-bottom: var(--e1); fill: none; stroke: var(--marca-texto); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* el territorio: texto y mosaico de sus fotos */
.territorio { background: var(--fondo-alt); }
.territorio__texto { max-width: 44rem; }
.territorio__texto h2 { margin-top: 0; }
.mosaico { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; margin-top: var(--e4); }
.mosaico__pieza { position: relative; display: block; overflow: hidden; border-radius: var(--radio); aspect-ratio: 4 / 3; color: #fff; text-decoration: none; }
.mosaico__pieza img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.mosaico__pieza::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(25 18 6 / .78)); }
.mosaico__pie { position: absolute; left: .9rem; right: .9rem; bottom: .7rem; z-index: 1; font-size: var(--p2); line-height: 1.2; text-shadow: 0 1px 6px rgb(0 0 0 / .4); }
.mosaico__pieza--grande { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  .mosaico { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 13rem); }
  .mosaico__pieza { aspect-ratio: auto; }
  .mosaico__pieza--grande { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; }
  .mosaico__pie { font-size: var(--p3); }
}
@media (hover: hover) { .mosaico__pieza:hover img { transform: scale(1.04); } }
.mosaico__pieza:focus-visible { outline: 3px solid var(--marca-honda); outline-offset: 3px; }
.credito { margin: var(--e2) 0 0; font-size: var(--p0); color: var(--tinta-suave); }
/* en el móvil, las noticias de la portada, compactas: foto baja y sin entradilla (portada-larga) */
@media (max-width: 699px) {
  .portada-noticias .tarjeta__foto { height: 8rem; }
  .portada-noticias .tarjeta--foto > p:not(.tarjeta__fecha):not(.tarjeta__mas) { display: none; }
  .mosaico__pieza:not(.mosaico__pieza--grande) { aspect-ratio: 1; }
}

/* ---- Pulido de la muestra (revisión de diseño del 29/10/2026) ---- */
/* DIS-18: el Moncayo, a la vista; el velo solo detrás del texto */
.hero--portada::after { background: linear-gradient(90deg, rgb(30 22 8 / .78) 0, rgb(30 22 8 / .5) 42%, rgb(30 22 8 / 0) 72%); }
@media (max-width: 899px) {
  .hero--portada { padding-top: 11rem; }
  .hero--portada .hero__foto { object-position: 40% 0; }
  .hero--portada::after { background: linear-gradient(180deg, rgb(30 22 8 / .05) 0, rgb(30 22 8 / .25) 28%, rgb(30 22 8 / .86) 55%, rgb(30 22 8 / .9) 100%); }
}
/* DIS-19: la banda de Servicios Sociales, con su filete (entre el territorio y las noticias, de fondo cálido) */
.banda-ss { border-top: 4px solid var(--marca); border-bottom: 4px solid var(--marca); }
/* DIS-20: cada pueblo, con su foto limpia */
@media (min-width: 900px) {
  .hero--foto { background: linear-gradient(90deg, var(--fondo-alt) 46%, rgb(246 243 238 / .25) 62%, rgb(246 243 238 / 0) 75%),
                            var(--foto) right 0 top 35% / 60% auto no-repeat, var(--fondo-alt); }
}
@media (max-width: 899px) {
  .hero--foto { padding-bottom: 14rem;
    background: linear-gradient(var(--fondo-alt), var(--fondo-alt)) top / 100% calc(100% - 12rem) no-repeat,
                var(--foto) center bottom / cover no-repeat, var(--fondo-alt); }
}
/* DIS-22: el cartel de la noticia, entero, como pegado en un tablón */
.portada-noticias .tarjeta__foto { height: 15rem; object-fit: contain; background: var(--fondo-alt); padding: .6rem; }
@media (max-width: 699px) { .portada-noticias .tarjeta__foto { height: 12rem; } }
.portada-noticias .tarjeta { background: var(--fondo); }
/* DIS-23: «¿Qué necesitas?», con más cuidado */
.perfil h3 { font-family: var(--letra-titulos); font-size: var(--p2); }
.perfil__icono { box-sizing: content-box; width: 1.7rem; height: 1.7rem; padding: .75rem; border-radius: 50%; background: var(--fondo-alt); }
.perfil .lista-enlaces li:first-child a { font-weight: 700; }
/* DIS-24: el logo, más presente; el nombre, en la letra de los titulares */
.barra__marca span { font-family: var(--letra-titulos); font-weight: 600; font-size: 1.12rem; }
@media (max-width: 899px) { .barra__logo { height: 44px; } .barra__marca span { font-size: 1.02rem; } }
/* la franja del pueblo en el móvil enseña el centro de su foto, no el pie */
@media (max-width: 899px) {
  .hero--foto { background: linear-gradient(var(--fondo-alt), var(--fondo-alt)) top / 100% calc(100% - 12rem) no-repeat,
                            var(--foto) center bottom -2.2rem / 100% auto no-repeat, var(--fondo-alt); }
}

/* ---------------------------------------------------------------------------
   Lo que la oficina cambia desde el panel (29/10/2026)
   --------------------------------------------------------------------------- */
/* Avisos de portada (un cierre, un plazo, un corte): se quitan solos al caducar */
.avisos { padding: var(--e2) 0; }
:root { --ok: #1E5631; --ok-fondo: #E6F2EA; --alerta: #9B1C1C; --alerta-fondo: #FDECEC; --espera: #6B4A00; --espera-fondo: #FFF4D6;
        --aviso-fondo: #FFF8E6; --resuelta: #2F3A4A; --resuelta-fondo: #EEF0F4; }
.aviso-oficina { margin: 0 0 var(--e1); padding: .8rem 1rem; border-left: 6px solid var(--marca-honda); background: var(--aviso-fondo); border-radius: 0 var(--radio) var(--radio) 0; }
.aviso-oficina p { margin: 0; }
.aviso-oficina--urgente { border-left-color: var(--alerta); background: var(--alerta-fondo); }
.aviso-oficina__fecha { font-size: var(--p0); color: var(--tinta-suave); }
/* Empleo y ayudas: cada convocatoria con su estado (el vencido se cierra solo) */
.convocatoria { margin: 0 0 var(--e2); padding: var(--e2) var(--e2) var(--e1); background: var(--fondo-alt); border: 1px solid var(--borde); border-radius: var(--radio); }
.convocatoria h3 { margin-top: 0; font-size: var(--p2); }
.convocatoria h4 { margin: var(--e2) 0 var(--e1); font-size: var(--p0); letter-spacing: .08em; color: var(--tinta-suave); text-transform: uppercase; }
.estado { display: inline-block; margin: 0 0 .6rem; padding: .2rem .7rem; border-radius: 999px; font-weight: 700; font-size: var(--p0); border: 2px solid currentColor; }
.estado--abierta { color: var(--ok); background: var(--ok-fondo); }
.estado--proxima, .estado--en-proceso { color: var(--espera); background: var(--espera-fondo); }
.estado--cerrada { color: var(--tinta-suave); background: var(--fondo-alt); }
.estado--resuelta { color: var(--resuelta); background: var(--resuelta-fondo); }
.convocatoria__area { font-size: var(--p0); color: var(--tinta-suave); letter-spacing: .02em; }
.convocatoria__vacia { color: var(--tinta-suave); }
.documentos { padding-left: 1.2rem; }
.documentos li { margin: .1rem 0; }
.documentos a { display: inline-block; padding: .55rem 0; }
/* La ficha de cada servicio: quién, teléfono, horario, dónde, cómo se pide */
.seccion--ficha { padding-top: var(--e3); padding-bottom: 0; }
.ficha-servicio { padding: var(--e2) var(--e3); background: var(--fondo-alt); border-radius: var(--radio); border: 1px solid var(--borde); }
.ficha-servicio__t { font-size: var(--p3); margin-top: .2rem; }
.ficha-servicio__datos { margin: 0; }
.ficha-servicio__datos > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: .2rem 1rem; padding: .45rem 0; border-bottom: 1px solid var(--borde); }
.ficha-servicio__datos dt { font-weight: 700; }
.ficha-servicio__datos dd { margin: 0; }
.ficha-servicio__datos a { display: inline-block; padding-block: .5rem; margin-block: -.5rem; }
@media (max-width: 599px) { .ficha-servicio { padding: var(--e2); } .ficha-servicio__datos > div { grid-template-columns: 1fr; } }

/* El panel de EJEMPLO (panel/index.html): para la oficina, no para el público */
.panel-barra { background: var(--marca-honda); color: #fff; }
.panel-barra__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; min-height: var(--barra); }
.panel-barra__marca { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; }
.panel-barra__marca img { background: #fff; border-radius: 6px; padding: 2px; }
.panel-barra a { color: #fff; display: inline-flex; align-items: center; min-height: 44px; }
.panel-pasos { display: grid; gap: var(--e3); align-items: start; margin-top: var(--e3); }
@media (min-width: 1000px) { .panel-pasos { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .panel-vista { position: sticky; top: 1rem; } }
.panel-form, .panel-vista { min-width: 0; }
.panel-form fieldset { min-width: 0; border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e2); margin: 0 0 var(--e2); }
.panel-form legend, .panel-paso > label { font-weight: 700; font-size: var(--p2); padding: 0 .3rem; }
.panel-num { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; margin-right: .3rem; border-radius: 50%; background: var(--marca-honda); color: #fff; font-size: var(--p0); }
.panel-paso { margin: 0 0 var(--e2); }
div.panel-paso { border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e2); }
.panel-datos { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: var(--e2) 0 0; padding: 0; list-style: none; font-weight: 700; }
.panel-datos li::before { content: "✓ "; color: var(--ok); }
.panel-form input[type="file"]::file-selector-button { min-height: 44px; margin-right: .8rem; padding: .4rem 1rem; font: inherit; font-weight: 700;
  color: var(--marca-honda); background: #fff; border: 2px solid var(--marca-honda); border-radius: 6px; cursor: pointer; }
.panel-docs { border-width: 1px 0 0 !important; border-radius: 0 !important; padding-inline: 0 !important; }
@media (max-width: 699px) { .panel-ayuda { font-size: var(--p1); } .panel-barra__largo { display: none; } .panel-barra__in { flex-wrap: nowrap; } }
.panel-paso > label { display: block; margin-bottom: .4rem; }
.panel-tipos__lista { display: grid; gap: .4rem; }
.panel-tipo { display: flex; align-items: flex-start; gap: .6rem; }
.panel-tipo input { width: 1.4rem; height: 1.4rem; margin: .75rem 0 0; flex: none; accent-color: var(--marca-honda); }
.panel-tipo label { display: block; padding: .55rem 0; cursor: pointer; }
.panel-tipo label span { display: block; color: var(--tinta-suave); font-size: var(--p0); }
.panel-campo { margin: 0 0 var(--e2); }
.panel-campo > label { display: block; font-weight: 700; margin-bottom: .25rem; }
.panel-campo--check { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.panel-campo--check input { width: 1.4rem; height: 1.4rem; accent-color: var(--marca-honda); }
.panel-campo--check label { padding: .55rem 0; }
.panel-form input[type="text"], .panel-form input[type="date"], .panel-form select, .panel-form textarea, .panel-paso select {
  display: block; width: 100%; max-width: 100%; min-height: 44px; padding: .5rem .7rem; font: inherit; color: var(--tinta);
  background: #fff; border: 2px solid var(--tinta-suave); border-radius: 6px; }
.panel-form input[type="file"] { display: block; min-height: 44px; padding: .4rem 0; font: inherit; }
.panel-form textarea { resize: vertical; line-height: 1.5; }
.panel-form [aria-invalid="true"] { border-color: var(--alerta); box-shadow: 0 0 0 2px var(--alerta-fondo); }
.panel-ayuda { margin: .1rem 0 .35rem; font-size: var(--p0); color: var(--tinta-suave); }
.panel-req { font-weight: 400; font-size: var(--p0); color: var(--tinta-suave); }
.panel-error { margin: .3rem 0 0; color: var(--alerta); font-weight: 700; }
.panel-errores { margin: 0 0 var(--e2); padding: var(--e2); border: 2px solid var(--alerta); border-radius: var(--radio); background: var(--alerta-fondo); }
.panel-errores--aviso { border-color: var(--espera); background: var(--espera-fondo); }
.panel-errores h2 { font-size: var(--p2); margin: 0 0 .4rem; }
.panel-errores ul { margin: 0; }
.panel-docs .panel-doc { padding: var(--e1) 0 var(--e2); border-bottom: 1px solid var(--borde); }
.panel-docs .panel-doc label { display: block; font-weight: 700; margin: .4rem 0 .2rem; }
.panel-quitar { margin-top: .5rem; }
.panel-hecho { font-weight: 700; color: var(--ok); }
.panel-vista h2 { font-size: var(--p3); margin-top: 0; }
.panel-vista__marco { border: 2px dashed var(--borde); border-radius: var(--radio); background: #fff; overflow: hidden; min-height: 8rem; }
.panel-vista__marco .seccion { padding-top: var(--e3); padding-bottom: var(--e3); }
.panel-vista__marco .pie { margin: 0; }
.panel-fila td { background: #FFF8E6; }
.panel-nota { margin: var(--e1) var(--e2); font-size: var(--p0); color: var(--tinta-suave); }
.panel-saltar a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 1000px) { .panel-saltar { display: none; } }
.convocatoria__mas { margin: .4rem 0 .8rem; }
.convocatoria__mas summary { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .3rem .8rem; cursor: pointer;
  color: var(--marca-texto); font-weight: 700; border: 2px solid var(--borde); border-radius: var(--radio); background: var(--fondo-alt); list-style: none; }
.convocatoria__mas summary::-webkit-details-marker { display: none; }
.convocatoria__mas summary::before { content: "+"; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--marca-honda); color: #fff; font-weight: 700; }
.convocatoria__mas[open] summary::before { content: "–"; }
.convocatoria__mas[open] summary { margin-bottom: .6rem; }
.panel-form input[type="file"] { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; }
.panel-docs, .panel-doc, .panel-campo { min-width: 0; }
/* Revisión final (QA-01): a 1440 px entra el botón «Llamar» en la barra y el nombre de la
   comarca se partía en tres líneas encima del menú. El nombre no se parte y el botón sale
   solo donde cabe (desde 1700 px, con la barra más ancha); el teléfono sigue en la franja de arriba */
/* (solo con el menú de escritorio: en el móvil el nombre sí se parte, o desborda a 375 px) */
@media (min-width: 900px) {
  .barra__marca { flex: none; }
  .barra__marca span { white-space: nowrap; }
}
@media (min-width: 1440px) and (max-width: 1699px) { .barra .solo-escritorio { display: none; } }
@media (min-width: 1700px) { .barra__in.contenedor { max-width: 96rem; } }
/* Revisión final (QA-02): con todo el menú del móvil desplegado, el último enlace quedaba
   bajo la barra fija: el menú cuenta también la franja de teléfonos de arriba */
@media (max-width: 899px) { .nav-movil nav { max-height: calc(100dvh - var(--barra) - 3rem); } }
.aviso-oficina__urgente { color: var(--alerta); text-transform: uppercase; letter-spacing: .03em; font-size: var(--p0); font-weight: 700; }

/* ===========================================================================
   Lo añadido el 29/10/2026 (extras.py): «Tu pueblo», carteles, avisos y comparativa
   =========================================================================== */
/* Tu pueblo, en la portada */
.tu-pueblo__elige { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); margin: var(--e2) 0 0; }
.tu-pueblo__elige[hidden], .tu-pueblo__lista[hidden] { display: none; }
.tu-pueblo__elige label { font-weight: 700; }
.tu-pueblo__elige select { min-height: 48px; width: min(100%, 20rem); padding: 0 .8rem; font: inherit; color: var(--tinta); background: var(--fondo); border: 2px solid var(--marca-texto); border-radius: var(--radio); }
.tu-pueblo__lista { display: flex; flex-wrap: wrap; gap: .4rem .5rem; list-style: none; padding: 0; margin: var(--e2) 0 0; }
.tu-pueblo__lista a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--borde); border-radius: 999px; background: var(--fondo); }
.tu-pueblo__tarjeta { display: grid; gap: var(--e3); margin-top: var(--e3); padding: var(--e3); background: var(--fondo); border-top: 4px solid var(--marca); border-radius: var(--radio); box-shadow: 0 2px 14px rgb(43 42 40 / .08); }
.tu-pueblo__tarjeta img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: calc(var(--radio) - 4px); }
.tu-pueblo__texto h3 { margin: 0 0 var(--e1); font-size: var(--p4); }
.tu-pueblo__texto h4 { margin: var(--e2) 0 .3rem; font-size: var(--p0); letter-spacing: .08em; text-transform: uppercase; color: var(--marca-texto); }
.tu-pueblo__texto p { margin: 0 0 var(--e1); }
.tu-pueblo__texto .lista-fechas { margin: 0; }
.tu-pueblo__cuando { color: var(--tinta-suave); }
.tu-pueblo__nota { margin-top: var(--e2) !important; font-size: var(--p0); color: var(--tinta-suave); }
.enlace-boton { min-height: 44px; padding: 0 .3rem; font: inherit; color: var(--marca-texto); text-decoration: underline; background: none; border: 0; cursor: pointer; }
@media (min-width: 760px) { .tu-pueblo__tarjeta { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }

/* Avisos en tu móvil */
.suscribete { margin-top: var(--e3); }
.copiar code, .avisos-rss code { overflow-wrap: anywhere; }
.avisos-rss { padding-left: 1.1rem; }
.avisos-rss li { margin-bottom: var(--e1); }
.copiar .boton, .avisos-rss .boton { margin-left: .3rem; vertical-align: middle; }

/* Carteles: en pantalla, uno debajo de otro con forma de A4; al imprimir, uno por hoja */
.carteles-indice { display: flex; flex-wrap: wrap; gap: .4rem .5rem; list-style: none; padding: 0; }
.carteles-indice a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--borde); border-radius: 999px; }
.carteles .contenedor { display: grid; gap: var(--e4); justify-items: center; }
.cartel { width: min(100%, 40rem); min-width: 0; display: flex; flex-direction: column; padding: clamp(1.2rem, 5vw, 3rem); background: #fff; color: var(--tinta); border-top: 12px solid var(--marca); box-shadow: 0 4px 24px rgb(43 42 40 / .12); scroll-margin-top: calc(var(--barra) + 1rem); }
.cartel__cab { display: flex; align-items: center; gap: .6rem; margin: 0 0 auto; font-weight: 700; }
.cartel__ante { margin: var(--e3) 0 .3rem; font-size: var(--p1); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--marca-texto); }
.cartel__t { margin: 0 0 var(--e2); font-size: clamp(1.5rem, 5.4vw, 2.6rem); line-height: 1.1; }
.cartel__cuando { font-size: clamp(1.05rem, 3.2vw, 1.5rem); line-height: 1.35; }
.cartel__tel { margin: var(--e2) 0; font-size: clamp(1.3rem, 4.6vw, 2.2rem); font-weight: 700; }
.cartel__tel a { color: var(--marca-honda); white-space: nowrap; }
.cartel__codigo { display: flex; align-items: center; gap: var(--e3); margin: auto 0 var(--e2); }
.cartel__qr { flex: none; width: clamp(6rem, 24vw, 10rem); height: auto; }
.cartel__codigo p { margin: 0; font-size: clamp(.85rem, 2.4vw, 1.05rem); }
.cartel__url { display: block; margin-top: .3rem; font-weight: 700; overflow-wrap: anywhere; }
.cartel__pie { margin: 0; padding-top: var(--e1); border-top: 1px solid var(--borde); font-size: var(--p0); color: var(--tinta-suave); }
.cartel__accion { margin: var(--e2) 0 0; }
/* la forma de A4, solo donde cabe: en el móvil, en rejilla, el cartel crecía a lo ancho */
@media (min-width: 700px) { .cartel { aspect-ratio: 210 / 297; } }
.carteles .contenedor > * { min-width: 0; }
.cartel__accion[hidden], .carteles-intro .acciones[hidden] { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  body:has(.carteles) .utiles, body:has(.carteles) .pie, body:has(.carteles) .migas,
  body:has(.carteles) main > :not(.carteles), .cartel__accion, .cartel--fuera, .arriba { display: none !important; }
  body:has(.carteles) { background: #fff; }
  .carteles, .carteles .contenedor { padding: 0; margin: 0; width: auto; background: none; display: block; }
  .cartel { width: 210mm; height: 297mm; aspect-ratio: auto; padding: 16mm 18mm 12mm; box-shadow: none; border-top-width: 6mm; break-after: page; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cartel:last-child { break-after: auto; }
  .cartel__cab { font-size: 14pt; }
  .cartel__cab img { width: 34mm; height: auto; }
  .cartel__ante { font-size: 15pt; }
  .cartel__t { font-size: 42pt; }
  .cartel__cuando { font-size: 25pt; }
  .cartel__tel { font-size: 38pt; }
  .cartel__tel a { text-decoration: none; }
  .cartel__qr { width: 58mm; }
  .cartel__codigo p { font-size: 14pt; }
  .cartel__pie { font-size: 10pt; }
  .cartel__pie a { text-decoration: none; color: inherit; }
}

/* La de hoy y la nueva, lado a lado */
.compara__moviles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e3); margin-top: var(--e3); }
.compara__moviles figure { margin: 0; width: min(100%, 17rem); }
.compara__moviles img { width: 100%; height: auto; border: 8px solid var(--tinta); border-radius: 22px; box-shadow: 0 6px 22px rgb(43 42 40 / .18); }
.compara__moviles figcaption { margin-top: var(--e1); font-size: var(--p0); color: var(--tinta-suave); text-align: center; }
.compara { display: grid; gap: var(--e2); }
.compara__fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e1) var(--e2); padding: var(--e2); background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); }
.compara__fila h3 { margin: 0; }
.compara__fila p { margin: 0; overflow-wrap: anywhere; padding: var(--e1) var(--e2); border-radius: calc(var(--radio) - 4px); }
.compara__fila span { display: block; font-size: var(--p0); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.compara__hoy { background: var(--fondo-alt); }
.compara__hoy span { color: var(--tinta-suave); }
.compara__nueva { background: #F3EBDD; }
.compara__nueva span { color: var(--marca-texto); }
@media (min-width: 760px) { .compara__fila { grid-template-columns: 12rem minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.compara__anade { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

/* Los 18 ayuntamientos (ayuntamientos.html y dentro de «Tu pueblo») */
.aytos { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin-top: var(--e3); }
.ayto { min-width: 0; padding: var(--e2) var(--e3); background: var(--fondo); border: 1px solid var(--borde); border-top: 4px solid var(--marca); border-radius: var(--radio); scroll-margin-top: calc(var(--barra) + 1rem); }
.ayto h3 { margin: 0 0 var(--e1); font-size: var(--p2); }
.ayto p { margin: 0 0 var(--e1); overflow-wrap: anywhere; }
.ayto__mas { font-size: var(--p0); }
.aytos__nota { margin-top: var(--e3); font-size: var(--p0); color: var(--tinta-suave); }
.tu-pueblo__correo { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }

/* Buscador: «¿No encuentras lo que buscas?» */
.sin-resultados { padding: var(--e3); background: var(--fondo-alt); border-left: 4px solid var(--marca); border-radius: var(--radio); }
.sin-resultados p { margin: 0 0 var(--e1); }
.sin-resultados__nota { font-size: var(--p0); color: var(--tinta-suave); }

/* La hoja de servicios: dos caras A4, con la misma maqueta que los carteles */
.hoja__t { margin: var(--e2) 0 var(--e1); font-size: clamp(1.4rem, 4.6vw, 2.1rem); line-height: 1.12; }
.hoja__sede { margin: 0 0 var(--e2); }
.hoja__servicios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.hoja__servicios li { padding-bottom: var(--e1); border-bottom: 1px solid var(--borde); }
.hoja__servicios h3 { margin: 0; font-size: var(--p2); }
.hoja__servicios p { margin: .1rem 0 0; overflow-wrap: anywhere; }
.hoja__como { font-size: var(--p0); color: var(--tinta-suave); }
.hoja__112 { margin: var(--e2) 0 0; font-size: var(--p3); }
.hoja__tabla { width: 100%; border-collapse: collapse; }
.hoja__tabla th, .hoja__tabla td { padding: .35rem .5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borde); }
.hoja__tabla thead th { font-size: var(--p0); letter-spacing: .04em; text-transform: uppercase; color: var(--marca-texto); }
@media (min-width: 560px) { .hoja__tabla td:last-child { white-space: nowrap; } }
.hoja__tabla { font-size: var(--p1); }
.hoja__tabla td { overflow-wrap: anywhere; }
.hoja .cartel { aspect-ratio: auto; }
.hoja .tabla { overflow-x: auto; }
@media print {
  .hoja .cartel { padding: 12mm 15mm 10mm; border-top-width: 5mm; }
  .hoja__t { font-size: 22pt; }
  .hoja__sede, .hoja__servicios p, .hoja .cartel > p { font-size: 11.5pt; }
  .hoja__servicios h3 { font-size: 13pt; }
  .hoja__como { font-size: 10pt; }
  .hoja__servicios { gap: 2.2mm; }
  .hoja__servicios li { padding-bottom: 2mm; }
  .hoja__112 { font-size: 15pt; }
  .hoja .cartel__qr { width: 32mm; }
  .hoja__tabla { font-size: 11.5pt; }
  .hoja__tabla th, .hoja__tabla td { padding: 1.6mm 2mm; }
  .hoja a { color: inherit; text-decoration: none; padding: 0 !important; min-height: 0 !important; min-width: 0 !important; display: inline !important; }
  .hoja__tabla { line-height: 1.3; }
  .hoja .tabla { overflow: visible; }
  .hoja .cartel { overflow: hidden; }
}

/* ===========================================================================
   Que se note la diferencia (30/10/2026, docs/auditorias/2026-10-30-comparativa/):
   su foto en cada página, lo institucional a la vista, su logo y su dorado
   =========================================================================== */
/* La portada: su viña de otoño con el Moncayo (la de su web de siempre) */
.hero--portada .hero__foto { object-position: 50% 55%; }
@media (max-width: 699px) { .hero--portada .hero__foto { object-position: 50% 0; } }

/* Cabecera con su foto: una banda ancha y el título debajo, sobre crema (sin texto sobre
   la foto: el contraste no depende de la imagen) */
.hero.hero--interior.hero--banda { padding: 0; background: var(--fondo-alt); }
.hero.hero--banda::before { content: ""; display: block; height: clamp(150px, 44vw, 210px);
  background: var(--foto-movil, var(--foto)) var(--encuadre, 50% 50%) / cover no-repeat, var(--fondo-alt); }
.hero.hero--banda > .contenedor { padding-block: var(--e3); }
@media (min-width: 760px) {
  .hero.hero--banda::before { height: clamp(230px, 27vw, 380px); background-image: var(--foto); }
  .hero.hero--banda > .contenedor { position: relative; margin-top: -4.5rem; padding: var(--e3) var(--e4) var(--e3);
    background: var(--fondo-alt); border-radius: var(--radio) var(--radio) 0 0; }
}

/* Los tres accesos de la institución, justo bajo la portada */
.accesos { background: var(--fondo-alt); border-bottom: 1px solid var(--borde); padding: var(--e2) 0; }
.accesos__in { display: grid; gap: var(--e1) var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.acceso { display: flex; align-items: center; gap: .8rem; min-height: 64px; padding: .6rem .9rem; background: var(--fondo);
  border: 1px solid var(--borde); border-radius: var(--radio); color: var(--tinta); text-decoration: none; }
.acceso:hover { border-color: var(--marca); }
.acceso b { display: block; color: var(--marca-honda); }
.acceso small { display: block; color: var(--tinta-suave); font-size: var(--p0); }
.acceso__icono { flex: none; box-sizing: content-box; width: 1.5rem; height: 1.5rem; padding: .6rem; border-radius: 10px;
  background: var(--marca); fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* «¿Qué necesitas?»: los iconos en su dorado, como los cuadrados de su web; y «N más» plegado */
.perfil__icono { background: var(--marca); stroke: #fff; border-radius: 12px; }
.perfil__mas { margin-top: .2rem; }
.perfil__mas summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--marca-texto);
  font-weight: 700; font-size: var(--p0); }
.perfil__mas summary::marker { color: var(--marca); }

/* El vídeo de la comarca, con su foto y sin YouTube hasta que se pulsa */
.video-comarca { margin-top: var(--e4); }
.video-comarca__poster { position: relative; display: block; overflow: hidden; border-radius: var(--radio); color: #fff; text-decoration: none; }
.video-comarca__poster img { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 590; object-fit: cover; }
.video-comarca__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(30 22 8 / .82) 0, rgb(30 22 8 / .15) 60%); }
.video-comarca__boton { position: absolute; z-index: 1; left: var(--e3); right: var(--e3); bottom: var(--e3); display: flex; align-items: center; gap: .8rem; }
.video-comarca__boton svg { flex: none; width: 1.6rem; height: 1.6rem; padding: .9rem; border-radius: 50%; background: #fff; fill: var(--marca-honda); }
.video-comarca__boton b { display: block; font-family: var(--letra-titulos); font-size: clamp(1.05rem, 2.6vw, 1.5rem); }
.video-comarca__poster:hover .video-comarca__boton svg, .video-comarca__poster:focus-visible .video-comarca__boton svg { background: var(--marca); fill: #fff; }
.video-comarca__marco { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radio); }
.video-comarca__nota { margin-top: var(--e1); font-size: var(--p0); color: var(--tinta-suave); }

/* Su logo, con presencia */
.barra__logo { height: 50px; }
@media (min-width: 900px) { .barra__logo { height: 66px; } }

/* La sede electrónica, botón en la franja de arriba de todas las páginas */
.utiles a.utiles__sede { padding: .25rem .9rem; border-radius: 999px; background: #fff; color: var(--marca-honda); text-decoration: none; }
.utiles a.utiles__sede:hover { background: var(--marca); color: #fff; }

/* Noticias de la portada: el cartel a buen tamaño (recortado por arriba, donde va el título) */
.portada-noticias .tarjeta__foto { height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 0; padding: 0; }

/* Redes del pie, con su icono */
.pie__red { gap: .55rem; }
.pie__red svg { flex: none; width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Portada más corta en el móvil (30/10/2026): era 9,4 pantallas */
.perfil__cab { display: flex; align-items: center; gap: .8rem; list-style: none; cursor: pointer; }
.perfil__cab::-webkit-details-marker { display: none; }
.perfil__cab h3 { margin: 0; }
.perfil__cab .perfil__icono { margin-bottom: 0; }
.perfil[open] > .perfil__cab { margin-bottom: var(--e1); }
@media (max-width: 699px) {
  .perfil__cab { min-height: 44px; }
  .perfil__cab::after { content: ""; margin-left: auto; width: .6rem; height: .6rem; border-right: 2px solid var(--marca-texto);
    border-bottom: 2px solid var(--marca-texto); transform: rotate(45deg); transition: transform .2s; }
  .perfil[open] > .perfil__cab::after { transform: rotate(-135deg); }
  .perfiles { gap: var(--e1); }
  /* los tres accesos, en fila: icono y nombre */
  .accesos__in { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .acceso { flex-direction: column; justify-content: center; gap: .35rem; padding: .6rem .3rem; text-align: center; min-height: 0; }
  .acceso small { display: none; }
  .acceso b { font-size: var(--p0); line-height: 1.2; }
  .acceso__icono { padding: .45rem; }
  /* noticias de la portada: foto pequeña a la izquierda */
  .portada-noticias .tarjeta--foto { display: grid; grid-template-columns: 6.5rem 1fr; column-gap: .9rem; align-items: start; padding: .8rem; }
  .portada-noticias .tarjeta--foto .tarjeta__foto { grid-row: 1 / span 4; width: 100%; aspect-ratio: 3 / 4; margin: 0; border-radius: 6px; }
  .portada-noticias .tarjeta--foto h3 { margin-top: 0; font-size: var(--p1); }
  .portada-noticias .tarjeta--foto p:not(.tarjeta__fecha):not(.tarjeta__mas) { display: none; }
}
@media (min-width: 700px) { .perfil__cab { cursor: default; } }
/* El «play» del vídeo: su caja no cuenta el relleno */
.video-comarca__boton svg { box-sizing: content-box; }
/* Portada en el móvil: la panorámica arriba (se ve el Moncayo) y el texto debajo, sobre oscuro */
@media (max-width: 699px) {
  .hero--portada { padding-top: 15.5rem; }
  .hero--portada .hero__foto { inset: 0 0 auto 0; height: 17rem; object-position: 46% 50%; }
  .hero--portada::after { background: linear-gradient(180deg, rgb(30 22 8 / 0) 0, rgb(30 22 8 / .1) 8rem, rgb(30 22 8 / .9) 15rem, #2B2A28 17rem); }
}
@media (max-width: 699px) {
  /* noticias: toda la tarjeta es el enlace; el «Leer la noticia» sobra y la foto, más pequeña */
  .portada-noticias .tarjeta--foto { grid-template-columns: 5rem 1fr; }
  .portada-noticias .tarjeta--foto .tarjeta__mas { display: none; }
  .portada-noticias .tarjeta--foto h3 { margin-bottom: .2rem; }
  /* el mosaico: la grande y dos (las rutas están en Turismo) */
  .territorio .mosaico__pieza:nth-child(n+4) { display: none; }
  main > .seccion { padding-block: 2rem; }
}
.hero.hero--banda[style*="--alto"]::before { height: var(--alto); }
/* Territorio: los 18 pueblos con su foto */
.pueblos-foto { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); margin-top: var(--e2); }
.pueblo-foto { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--radio); background: var(--marca-honda); color: #fff; text-decoration: none; }
.pueblo-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.pueblo-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(25 18 6 / .82)); }
.pueblo-foto span { position: absolute; z-index: 1; left: .7rem; right: .7rem; bottom: .55rem; font-family: var(--letra-titulos); font-weight: 700; line-height: 1.15; text-shadow: 0 1px 5px rgb(0 0 0 / .5); }
.pueblo-foto:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .pueblo-foto:hover img { transform: none; } }
.seccion--alt a.pueblo-foto, a.pueblo-foto { color: #fff; }

/* ===========================================================================
   Pulido (30/10/2026, docs/auditorias/2026-10-30-pulido/diseno.md)
   =========================================================================== */
/* DET-01 · la píldora de la sede con aire en la franja de arriba */
.utiles { padding-block: 5px; }
/* DET-23 · migas de una línea */
.migas { padding: 0; }
/* DET-21 · la página actual del menú, sin negrita (el menú ya no se mueve entre páginas) */
.nav-escritorio a[aria-current="page"] { font-weight: inherit; color: var(--marca-honda); box-shadow: inset 0 -3px 0 var(--marca); }
/* DET-14 · su logo, algo más vivo mientras llega el vectorial */
.barra__logo { filter: contrast(1.12) saturate(1.2); }

/* DET-02 · la banda con foto: el título debajo, alineado con todo lo demás, sin solape */
.hero.hero--interior.hero--banda > .contenedor { margin-top: 0; padding: var(--e3) 0; background: none; border-radius: 0; }
@media (min-width: 760px) {
  .hero.hero--interior.hero--banda > .contenedor { margin-top: 0; padding: var(--e3) 0; background: none; border-radius: 0; }
}
.hero--banda :is(h1, .entradilla, .antetitulo) { max-width: 46rem; }
/* DET-07 · las cabeceras sin foto, crema liso: nada de velo de plantilla */
.hero.hero--interior:not(.hero--banda):not(.hero--foto) { background: var(--fondo-alt); }

/* DET-03 · retratos y galerías migrados, en rejilla (no uno debajo de otro a todo el ancho) */
.contenido p:has(> img + img) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: .6rem; margin: var(--e3) 0; }
.contenido p:has(> img + img) > img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 25%; margin: 0; border-radius: 6px; }
.contenido img[width="1000"][height="1000"] { max-width: min(100%, 22rem); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .6rem; margin: var(--e3) 0; }
.galeria img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: 0; border-radius: 6px; }

/* DET-04 · los 18 pueblos, de dos en dos también en el móvil */
.pueblos-foto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
@media (max-width: 460px) { .pueblo-foto span { font-size: var(--p0); } }

/* DET-06 · Contacto: los h2 por debajo del h1 */
.estrecho > h2:not(.ficha-servicio__t) { font-size: var(--p3); }

/* DET-09 · ayuntamientos: tres columnas (6 filas justas), el botón siempre a la misma altura */
@media (min-width: 900px) { .aytos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ayto { display: flex; flex-direction: column; align-items: flex-start; }
.ayto > p:first-of-type { min-height: 3.2em; }
.ayto p { overflow-wrap: break-word; }
.ayto .acciones { margin-top: auto; }
.ayto__mas { font-size: var(--p1); }

/* DET-10 · «Ver la ficha / Leer la noticia» siempre al pie de la tarjeta */
.tarjeta--foto { display: flex; flex-direction: column; }
.tarjeta--foto > .tarjeta__foto { flex: none; }
.tarjeta--foto > .tarjeta__mas { margin-top: auto; padding-top: var(--e1); }

/* DET-11 · el desplegable de documentos, en blanco; títulos de tarjeta con la letra de los títulos */
.convocatoria__mas summary { background: #fff; }
.convocatoria h3, .tarjeta h3, .ayto h3, .caja-ss h2 { font-family: var(--letra-titulos); }

/* DET-13 · móvil: el selector de «Tu pueblo» a todo el ancho, como los botones */
@media (max-width: 699px) { .tu-pueblo__elige select { width: 100%; } }

/* DET-16 · pie: las redes en una fila; los logos de financiación, más anchos */
.pie__enlaces:has(.pie__red) { grid-template-columns: repeat(3, max-content); column-gap: 1.2rem; }
.pie__logos img { max-width: min(100%, 44rem); height: auto; }

/* DET-17 · listas largas migradas (18 pueblos…), en columnas */
@media (min-width: 700px) { .contenido :is(ol, ul):has(> li:nth-child(12)) { columns: 3 11rem; column-gap: 2rem; } }
.contenido :is(ol, ul):has(> li:nth-child(12)) > li { break-inside: avoid; }

/* DET-18 · títulos migrados sin cursiva ni negrita de más */
.contenido :is(h2, h3, h4) :is(em, strong, b, i) { font: inherit; }

/* DET-20 · móvil: el póster del vídeo y los pies del mosaico, a su tamaño */
@media (max-width: 699px) {
  .video-comarca__poster img { aspect-ratio: 16 / 9; }
  .mosaico__pie { font-size: var(--p1); }
}

/* DET-22 · el filete dorado de las tarjetas, recto (sin «alas» en las esquinas) */
.perfil, .ayto, .tu-pueblo__tarjeta { border-top-width: 1px; border-top-color: var(--borde); box-shadow: inset 0 4px 0 var(--marca); }
.tu-pueblo__tarjeta { box-shadow: inset 0 4px 0 var(--marca), 0 2px 14px rgb(43 42 40 / .08); }

/* QA-01 · desde 900 px (portátiles) no hay barra de llamar abajo: la franja de arriba, con los
   dos teléfonos y la sede electrónica, se queda fija con la cabecera al bajar */
@media (min-width: 900px) {
  .utiles { position: sticky; top: 0; z-index: 51; }
  .barra { top: 54px; }
  html { scroll-padding-top: calc(var(--barra) + 54px + 1.4rem); }
  .cartel, .ayto { scroll-margin-top: calc(var(--barra) + 54px + 1rem); }
  .nav-movil nav { max-height: calc(100vh - var(--barra) - 54px); }
}
/* QA-06 · el póster del vídeo, en la misma proporción que el reproductor: no salta */
.video-comarca__poster img { aspect-ratio: 16 / 9; }
/* QA-07 · los botones «Copiar» no cambian de ancho al decir «Copiada» */
[data-copiar] { min-width: 7.5rem; }

/* Los logos de la financiación, arriba en todas las páginas (como en su web) */
.financia { background: #fff; border-bottom: 1px solid var(--borde); }
.financia__in { display: flex; justify-content: center; padding-block: .35rem; }
.financia img { display: block; width: auto; height: 30px; max-width: 100%; object-fit: contain; }
@media (min-width: 900px) { .financia__in { justify-content: flex-end; } .financia img { height: 38px; } }
/* el pie: los logos y, al lado, el sello de la Ruta de la Garnacha */
.pie__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); }
.pie__garnacha { display: inline-flex; min-width: 44px; min-height: 44px; }
.pie__garnacha img { display: block; width: 78px; height: auto; border-radius: 4px; }

/* La app (app.html): la comarca en el móvil, también sin internet */
.app-aviso { margin: 0; padding: .7rem 1rem; background: var(--espera-fondo); color: var(--espera); font-weight: 700; text-align: center; }
.app-instala h2 { margin-top: 0; }
.app-pasos { padding-left: 1.1rem; }
.app-pasos li { margin-bottom: var(--e1); }
.app-hecha { padding: .8rem 1rem; border-radius: var(--radio); background: var(--ok-fondo); color: var(--ok); font-weight: 700; }
.app-llamar .boton { min-height: 56px; }
.app-112 { background: var(--alerta); border-color: var(--alerta); }
.app-112:hover { background: #7a1515; border-color: #7a1515; }
.app-mi-pueblo__in { margin-top: var(--e3); padding: var(--e3); background: var(--fondo); border-radius: var(--radio); box-shadow: inset 0 4px 0 var(--marca); border: 1px solid var(--borde); }
.app-mi-pueblo__in h3 { margin: 0 0 var(--e1); font-family: var(--letra-titulos); }
.hoja__tabla tr.es-tuyo { background: var(--aviso-fondo); }
.app-fecha { margin-top: var(--e3); font-size: var(--p0); color: var(--tinta-suave); }
.tu-pueblo__app { margin-top: var(--e3); }
.tabla:has(> .hoja__tabla) { overflow-x: auto; }  /* la tabla de pueblos se desliza en su caja (app, hoja) */