/* PAMAC: el aspecto del WordPress actual (tema Extra), medido en padresdivorciados.es el 09/10/2026.
   Documentacion/04-diseno.md. Móvil primero. */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fuentes/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fuentes/open-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --cielo: #b2e2ff;          /* cabecera y submenús */
  --rojo: #b3242a;           /* texto rojo: el #dd3333 del WordPress no llega a 4,5:1 sobre --cielo */
  --rojo-filete: #dd3333;    /* filetes, sin texto encima */
  --azul: #0003ed;           /* enlace activo y enlaces del texto */
  --azul-oscuro: #0002a8;
  --texto: #404040;          /* rgba(0,0,0,.75) sobre blanco */
  --suave: #595959;
  --linea: #d9d9d9;
  --beige: #eaded0;          /* pliegues */
  --campo: #f9ead8;          /* campos de formulario */
  --boton: #fbc890;
  --boton-texto: #6b3f12;
  --fondo: #fff;
  --fondo-2: #f5f2ee;
  --pie: #232323;
  --pie-final: #181818;
  --ok: #0f6b3a;
  --ancho: 80rem;            /* 1280 px: el contenedor del tema a 1440 */
  --fila: 67.5rem;           /* 1080 px: las filas estrechas */
  font-size: 100%;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 8rem; }
body {
  margin: 0;
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--texto);
  background: var(--fondo);
  overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; }
a { color: var(--azul); text-underline-offset: 2px; }
a:hover { color: var(--azul-oscuro); }
h1, h2, h3 { line-height: 1.3; margin: 0 0 .6em; color: #333; }
h1 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
h2 { font-size: clamp(1.2rem, 2.6vw, 1.45rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

.contenedor { width: 89%; max-width: var(--ancho); margin: 0 auto; }
.fila { max-width: var(--fila); margin-left: auto; margin-right: auto; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 1rem; top: 0; transform: translateY(-200%); background: #fff;
  padding: .5rem 1rem; z-index: 40; }
.saltar:focus { transform: none; }

/* aviso de demo */
.aviso-demo { background: #111; color: #fff; font-size: .8125rem; text-align: center; padding: .3rem 1rem; }

/* cabecera: alta arriba del todo y más baja al bajar (lo hace app.js), como el tema Extra */
.cabecera { background: var(--cielo); position: sticky; top: 0; z-index: 30; }
.cabecera > .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 110px; transition: height .3s ease; }
.logo { flex-shrink: 0; display: block; }
.logo img { display: block; width: 118px; height: auto; transition: width .3s ease; }
.menu-boton { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 0; border-radius: 4px; background: #fff; cursor: pointer; padding: 0; }
.menu-boton .raya, .menu-boton .raya::before, .menu-boton .raya::after {
  display: block; width: 22px; height: 2px; background: #333; position: relative; content: ''; }
.menu-boton .raya::before { position: absolute; top: -7px; }
.menu-boton .raya::after { position: absolute; top: 7px; }
.menu { display: none; }
.menu.abierto { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--cielo);
  border-top: 1px solid rgb(0 0 0 / .08); padding: .5rem 5.5% 1.25rem; max-height: calc(100vh - 110px); overflow-y: auto;
  box-shadow: 0 8px 16px rgb(0 0 0 / .1); }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a { display: block; padding: .7rem 0; text-decoration: none; color: var(--rojo); font-weight: 600;
  text-transform: uppercase; font-size: 1rem; line-height: 1.2; }
.menu a:hover { color: var(--azul); }
.menu a[aria-current] { color: var(--azul); }
.menu .sub { padding-left: 1rem; }
.menu .sub a { font-size: .875rem; }

@media (min-width: 75rem) {
  .cabecera { top: -104px; }
  .cabecera > .contenedor { height: 200px; }
  .logo img { width: min(392px, 27vw); }
  .cabecera.compacta > .contenedor { align-items: flex-end; padding-bottom: 18px; }
  .cabecera.compacta .logo img { width: 142px; }
  .cabecera.compacta .menu { margin-bottom: 4px; }
  .menu-boton { display: none; }
  .menu, .menu.abierto { display: block; position: static; background: none; border: 0; padding: 0;
    max-height: none; overflow: visible; box-shadow: none; }
  .menu > ul { display: flex; gap: 0 clamp(1rem, 2vw, 1.875rem); flex-wrap: nowrap; }
  .menu > ul > li { position: relative; }
  .menu > ul > li > a { padding: .6rem 0; border-bottom: 3px solid transparent; white-space: nowrap;
    font-size: clamp(.875rem, 1.15vw, 1rem); }
  .menu > ul > li > a[aria-current] { border-bottom-color: var(--azul); }
  .menu .con-sub > a::after { content: ''; display: inline-block; width: .38em; height: .38em; margin-left: .55em;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); vertical-align: .3em; }
  .menu .sub { display: none; position: absolute; top: 100%; left: -1.875rem; width: 15rem; background: var(--cielo);
    padding: 1.25rem 0; border-top: 3px solid var(--azul); box-shadow: 0 2px 5px rgb(0 0 0 / .1); z-index: 2; }
  .menu .sub .sub { top: -1.25rem; left: 100%; }
  .menu .sub li { position: relative; padding: 0 1.875rem; }
  .menu .sub a { font-size: .875rem; padding: .95rem 0; border-bottom: 1px solid rgb(179 36 42 / .25); }
  .menu .sub li:last-child > a { border-bottom: 0; }
  .menu .sub .con-sub > a::after { transform: rotate(-45deg); float: right; margin-top: .3em; }
  .menu li:hover > .sub, .menu li:focus-within > .sub { display: block; }
}

/* portada: carrusel de tres fotos que se funden, como el del WordPress */
.carrusel { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  height: clamp(273px, 45.7vw, 720px); background: #3a4a3a; }
.carrusel .diapo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.carrusel .diapo:first-child { opacity: 1; }
.carrusel::after { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / .18); }
.carrusel h1 { position: relative; z-index: 1; margin: 0; padding: 0 1rem; max-width: 63rem; text-align: center;
  color: #fff; font-weight: 700; text-transform: uppercase; line-height: 1.3;
  font-size: clamp(1.5rem, 4.86vw, 4.375rem); text-shadow: 0 1px 4px rgb(0 0 0 / .45); }
@media (prefers-reduced-motion: no-preference) {
  .carrusel .diapo { animation: diapositivas 18s infinite; }
  .carrusel .diapo:nth-child(2) { animation-delay: -12s; }
  .carrusel .diapo:nth-child(3) { animation-delay: -6s; }
}
@keyframes diapositivas { 0%, 28% { opacity: 1; } 33.3%, 94.4% { opacity: 0; } 100% { opacity: 1; } }

.nosotros { text-align: center; padding-top: 1rem; }
.nosotros .rotulo { margin: 0 0 1.4rem; }
.nosotros .rotulo img { width: 283px; }
.centrado { text-align: center; }
.servicios-portada, .iconos-portada { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.servicios-portada { gap: 3.5rem 5.5%; margin: 3.5rem auto 4rem; }
.servicios-portada li { width: 100%; text-align: center; }
.servicios-portada a, .iconos-portada a { display: block; text-decoration: none; }
.servicios-portada .foto { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.servicios-portada .titulo-servicio { display: block; width: min(280px, 90%); margin: 1rem auto 0; }
.servicios-portada a:hover .foto { opacity: .9; }
.iconos-portada { gap: 2rem 4%; margin: 0 auto 2rem; }
.iconos-portada li { width: 13rem; text-align: center; }
.iconos-portada .icono { display: block; width: 64px; margin: 0 auto 1rem; }
.iconos-portada .titulo-icono { display: block; width: 170px; margin: 0 auto; }
@media (min-width: 48rem) {
  .servicios-portada li { width: 29.6%; }
}

/* banda de título de las páginas interiores */
.banda-titulo { background: #fff; border-bottom: 1px solid var(--rojo-filete); }
.banda-titulo .fila { width: 89%; min-height: 135px; padding-top: 29px; display: flex; flex-direction: column; justify-content: flex-end; }
.banda-titulo .rotulo { margin: 0; line-height: 0; }
.banda-titulo .rotulo img { display: block; }
.banda-titulo .rotulo-texto { margin: 0; padding: 1.5rem 0 1.6rem; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600;
  font-style: italic; color: var(--rojo); text-transform: lowercase; letter-spacing: .01em; }
.banda-titulo .lema { margin-top: 1.8rem; }
@media (max-width: 47.99rem) { .banda-titulo .fila { min-height: 0; padding-top: 1.25rem; } .banda-titulo .rotulo img { width: 240px; } }

/* cuerpo y textos del WordPress */
main { min-height: 50vh; }
.cuerpo { padding: 3.6rem 0 4rem; }
.texto-wp { color: var(--texto); }
.texto-wp p { margin: 0 0 1.6em; }
.texto-wp h2, .texto-wp h3, .texto-wp h4, .titulo-wp { font-size: 1.3125rem; font-weight: 700; line-height: 1.3;
  text-transform: uppercase; color: var(--texto); margin: 0; padding-bottom: 10px; }
.texto-wp ul { padding-left: 1.4rem; margin: 0 0 1.6em; }
.texto-wp li { margin-bottom: .5em; }
.lema h4, .lema h2 { text-align: center; font-style: italic; }
.separado { margin-top: 3rem; }
.dos-columnas { display: grid; gap: 2.5rem 5.5%; align-items: center; }
.dos-columnas .logo-grande { display: block; width: min(370px, 70%); margin: 0 auto; }
@media (min-width: 61.25rem) { .dos-columnas { grid-template-columns: 2fr 1fr; } .dos-columnas .logo-grande { width: 100%; } }
.foto-y-texto { display: grid; gap: 2rem 5.5%; margin-bottom: 3.5rem; }
.foto-y-texto .foto-columna { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 61.25rem) {
  .foto-y-texto { grid-template-columns: 1fr 2fr; align-items: stretch; }
  .foto-y-texto .foto-columna { aspect-ratio: auto; height: 100%; min-height: 280px; }
  .foto-y-texto.al-reves { grid-template-columns: 2fr 1fr; }
  .foto-y-texto.al-reves .foto-columna { order: 2; }
  .foto-y-texto.estrecha .foto-columna { height: auto; aspect-ratio: 3 / 2; align-self: start; }
}
.fila-estrecha { max-width: var(--fila); margin: 0 auto; }
.foto-ancha { display: block; width: 100%; aspect-ratio: 1600 / 893; object-fit: cover; margin-bottom: 3.5rem; }
.texto-y-formulario { display: grid; gap: 2rem 5.5%; }
.texto-y-formulario .texto-wp { font-size: 1rem; }
@media (min-width: 61.25rem) { .texto-y-formulario { grid-template-columns: 1fr 2fr; } }
.texto { max-width: 52rem; }
.texto img { border-radius: 2px; }
.texto table { border-collapse: collapse; display: block; overflow-x: auto; }
.texto td, .texto th { border: 1px solid var(--linea); padding: .4rem; }

/* estatutos: los pliegues del WordPress */
.pliegues { max-width: var(--fila); margin: 0 auto; }
.pliegue { background: var(--beige); border: 1px solid var(--linea); margin-bottom: 1.85rem; }
.pliegue summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: 20px; font-size: clamp(1.05rem, 1.6vw, 1.3125rem); font-weight: 700; line-height: 1.3;
  text-transform: uppercase; color: #555; }
.pliegue summary::-webkit-details-marker { display: none; }
.pliegue summary::after { content: '+'; flex-shrink: 0; display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--rojo-filete); color: #fff; font-size: 15px; line-height: 1; font-weight: 700; }
.pliegue[open] summary::after { content: '−'; }
.pliegue .texto-wp { padding: 0 20px 4px; }

.en-seccion { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; margin-top: 1rem; }
.en-seccion a { display: inline-flex; align-items: center; min-height: 44px; color: var(--rojo); font-weight: 600;
  text-transform: uppercase; font-size: .9rem; text-decoration: none; }
.en-seccion a:hover { color: var(--azul); }

/* multimedia */
.multimedia { list-style: none; padding: 2rem 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem 12%; }
.multimedia a { display: flex; flex-direction: column; align-items: center; gap: .8rem; text-decoration: none;
  color: var(--rojo); font-weight: 600; text-transform: uppercase; }

/* contacto y primera capa de protección de datos */
.contacto-formulario { margin-top: 3rem; max-width: 46rem; }
textarea.mensaje { font-family: inherit; font-size: 1rem; min-height: 10rem; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rgpd { margin-top: 2rem; padding: 1.2rem 1.4rem; background: var(--fondo-2); font-size: .875rem; line-height: 1.55; }
.rgpd h3 { font-size: .95rem; text-transform: uppercase; margin: 0 0 .7rem; color: var(--texto); }
.rgpd dl { margin: 0; display: grid; gap: .35rem 1rem; }
.rgpd dt { font-weight: 700; }
.rgpd dd { margin: 0 0 .3rem; }
main .rgpd a:not(.boton) { padding-block: .25rem; }  /* 24 px de zona pulsable sin mover las líneas */
@media (min-width: 48rem) { .rgpd dl { grid-template-columns: 9.5rem 1fr; } .rgpd dd { margin: 0; } }

.error-texto { color: var(--rojo); }

/* contacto */
.contacto { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.caja-wp { background: var(--campo); padding: 1.5rem; }
.caja-wp p { margin: 0; }

/* botones y formularios, con los campos beige y el botón naranja del WordPress */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px;
  padding: .5rem 1.25rem; border: 2px solid var(--boton); background: var(--boton); color: var(--boton-texto);
  font: inherit; font-size: 1.05rem; font-weight: 600; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.boton:hover { background: #f7b46d; border-color: #f7b46d; color: var(--boton-texto); }
.boton.secundario { background: #fff; color: var(--rojo); border-color: var(--linea); text-transform: none; font-size: .95rem; }
.boton.secundario:hover { background: var(--fondo-2); }
.boton.peligro { background: #fff; color: var(--rojo); border-color: var(--rojo); }
.boton.pequeno { min-height: 44px; padding: .3rem .8rem; font-size: .875rem; }
@media (min-width: 61.25rem) { .boton.pequeno { min-height: 36px; } }
form.en-linea { display: inline; }
label { display: block; font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--suave); margin: 0 0 .3rem; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=date],
input[type=file], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: .75rem 1rem; border: 1px solid transparent; border-radius: 0;
  background: var(--campo); min-height: 48px; color: var(--texto);
}
input:focus, select:focus, textarea:focus { border-color: var(--suave); }
textarea { min-height: 18rem; font-family: ui-monospace, Menlo, monospace; font-size: .9rem; }
.campo { margin-bottom: 1rem; }
.casilla { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: .95rem; color: var(--texto); }
.casilla input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--boton-texto); }
.ayuda { color: var(--suave); font-size: .9rem; }
.formulario { max-width: 34rem; }
.formulario-wp { max-width: none; }
.formulario-wp h2 { font-size: 1.6rem; font-weight: 400; text-transform: uppercase; color: #333; margin-bottom: .8rem; }

/* avisos */
.aviso { padding: .9rem 1rem; margin: 0 0 1rem; border: 1px solid var(--linea); background: var(--fondo-2); }
.aviso.error { border-color: var(--rojo); background: #fdf1f1; color: #7a1418; }
.aviso.ok { border-color: var(--ok); background: #eef8f2; color: var(--ok); }

/* estructura común */
.migas { font-size: .9rem; color: var(--suave); margin-bottom: 1rem; }
.migas a { color: var(--suave); display: inline-block; padding: .3rem 0; }
.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.tarjeta { border: 1px solid var(--linea); padding: 1.1rem; background: #fff; }
.tarjeta > img, .tarjeta > a > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--fondo-2); margin-bottom: .6rem; }
/* Enlaces dentro del texto: algo de alto pulsable sin mover las líneas. */
main a:not(.boton) { padding-block: .15rem; }
.tarjeta h3 a { text-decoration: none; color: #333; display: inline-block; padding: .2rem 0; }
.tarjeta h3 a:hover { color: var(--azul); }
.cifra { font-size: 2rem; font-weight: 700; color: var(--rojo); line-height: 1; }

/* biblioteca */
.biblioteca { display: grid; gap: 1.5rem; }
/* En móvil, primero el buscador y los resultados; el árbol de secciones, debajo. */
.biblioteca > aside { order: 2; }
@media (min-width: 56rem) { .biblioteca { grid-template-columns: 18rem 1fr; } .biblioteca > aside { order: 0; } }
.arbol { font-size: .95rem; }
.arbol ul { list-style: none; margin: 0; padding: 0 0 0 .8rem; }
.arbol > ul { padding: 0; }
.arbol a { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem .5rem; border-radius: 6px;
  text-decoration: none; color: var(--texto); }
.arbol a:hover { background: var(--fondo-2); }
.arbol a[aria-current="page"] { background: var(--azul); color: #fff; }
.arbol .n { color: var(--suave); font-size: .85rem; }
.arbol a[aria-current="page"] .n { color: #fff; }
details.arbol-movil summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
@media (min-width: 56rem) { details.arbol-movil > summary { display: none; } }
.buscador { display: flex; gap: .5rem; margin-bottom: 1rem; }
.buscador input { flex: 1; }
/* tabla de documentos con columnas ordenables; en móvil, cada fila es una ficha */
.tabla-docs { width: 100%; border-collapse: collapse; }
.tabla-docs th { text-align: left; padding: 0 .6rem; border-bottom: 2px solid var(--rojo-filete); white-space: nowrap; }
.tabla-docs th a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--suave);
  font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.tabla-docs th a span { margin-left: .3em; }
.tabla-docs th a:hover, .tabla-docs th[aria-sort="ascending"] a, .tabla-docs th[aria-sort="descending"] a { color: var(--rojo); }
.tabla-docs td { padding: .75rem .6rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla-docs .col-fecha, .tabla-docs .col-seccion { color: var(--suave); font-size: .9rem; }
.tabla-docs .col-fecha, .tabla-docs .col-acceso { white-space: nowrap; }
@media (max-width: 47.99rem) {
  .tabla-docs, .tabla-docs tbody, .tabla-docs tr, .tabla-docs td { display: block; }
  .tabla-docs thead tr { display: flex; flex-wrap: wrap; gap: 0 1.2rem; border-bottom: 2px solid var(--rojo-filete); }
  .tabla-docs th { border: 0; padding: 0; }
  .tabla-docs tbody tr { padding: .7rem 0; border-bottom: 1px solid var(--linea); }
  .tabla-docs td { border: 0; padding: .1rem 0; }
  .tabla-docs .col-titulo { font-weight: 600; }
}
.lista-docs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.lista-docs li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .75rem .25rem;
  border-bottom: 1px solid var(--linea); }
.lista-docs .titulo { flex: 1 1 20rem; }
.lista-docs .meta { color: var(--suave); font-size: .875rem; white-space: nowrap; }
.etiqueta { display: inline-block; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .1rem .55rem;
  border: 1px solid currentColor; vertical-align: middle; white-space: nowrap; }
.etiqueta.socios { color: var(--rojo); }
/* El candado de los documentos de socios: el título se ve, el PDF pide entrar. */
.etiqueta.socios::before { content: ''; display: inline-block; width: .7em; height: .8em; margin-right: .3em; vertical-align: -.05em;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M3 7V5a4 4 0 0 1 8 0v2h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm2 0h4V5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M3 7V5a4 4 0 0 1 8 0v2h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm2 0h4V5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
.etiqueta.publico { color: var(--ok); }
.etiqueta.gris { color: var(--suave); }
.paginacion { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: 1.5rem; }

/* galerías y vídeos */
.fotos { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.fotos figure { margin: 0; }
.fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--fondo-2); }
.fotos figcaption { font-size: .85rem; color: var(--suave); }


/* pie: tres columnas sobre gris oscuro y la franja final, como el WordPress */
.pie { background: var(--pie); color: #fff; font-size: .875rem; line-height: 1.6; }
.pie a { color: #fff; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie-columnas { display: grid; gap: 3rem 4%; padding: 3.6rem 0 4rem; }
.pie h2 { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: rgb(255 255 255 / .6); margin: 0 0 .9rem; }
.pie-mapa ul { list-style: none; margin: 0; padding: 0; max-width: 19rem; }
.pie-mapa a { display: block; padding: .7rem 0; font-weight: 600; border-bottom: 1px solid rgb(255 255 255 / .1); }
.pie-centro, .pie-donde { text-align: center; }
.pie-centro img { display: block; width: 204px; margin: 0 auto 3.2rem; }
.pie-centro p { margin: 0 0 2.6rem; }
.pie-correo { display: inline-block; }
.pie-correo img { display: block; width: 140px; }
.pie-donde h2 { font-size: 1.25rem; font-weight: 700; color: #fff; letter-spacing: .02em; margin: 2.4rem 0 2.6rem; }
.pie-donde p { text-transform: uppercase; font-size: .8125rem; line-height: 1.25; }
.pie-final { background: var(--pie-final); padding: .6rem 0; }
.pie-final .contenedor { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem 1.5rem; }
.pie-final p { margin: 0; font-size: .8125rem; color: rgb(255 255 255 / .7); }
.pie-final strong { color: #fff; }
.pie-final ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 .9rem; }
.pie-final a { display: inline-flex; align-items: center; min-height: 44px; color: rgb(255 255 255 / .7); font-size: .95rem; }
@media (min-width: 61.25rem) { .pie-columnas { grid-template-columns: 1fr 2fr 1fr; } }
@media (max-width: 61.24rem) { .pie-final .contenedor { justify-content: center; text-align: center; } .pie-final ul { justify-content: center; } }

/* panel */
.panel { display: grid; gap: 1.5rem; }
@media (min-width: 56rem) { .panel { grid-template-columns: 13rem 1fr; } }
.panel-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
@media (min-width: 56rem) { .panel-menu ul { flex-direction: column; } }
.panel-menu a { display: block; padding: .5rem .7rem; border-radius: 6px; text-decoration: none; color: var(--texto); font-weight: 600; }
.panel-menu a[aria-current="page"] { background: var(--azul); color: #fff; }
.tabla-envoltorio { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th, .tabla td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin-bottom: 1rem; }
.filtros > * { flex: 1 1 12rem; }
.clave { font-family: ui-monospace, Menlo, monospace; font-size: 1.1rem; letter-spacing: .08em; background: var(--fondo-2);
  padding: .6rem .8rem; border-radius: 8px; display: inline-block; }
/* El QR va en negro sobre blanco también en modo oscuro: los lectores no leen el invertido. */
.qr-marco svg { display: block; width: min(265px, 100%); height: auto; background: #fff; margin: .5rem 0 1rem; }
pre.correo { white-space: pre-wrap; background: var(--fondo-2); padding: .8rem; border-radius: 8px; font-size: .9rem; }
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }