/* ==========================================================================
   Tema Humildad Archidona
   ========================================================================== */

/* ===== Letras =====
   Alojadas en la propia web (antes venían de Google, que así recibía los datos de cada visitante).
   Son letras variables: un solo fichero sirve para todos los grosores. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/cormorant.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: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("../fonts/cormorant-cursiva.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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter.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; }

/* ===== Paleta (colores de siempre de la web) ===== */
:root {
  --fondo: #f0eeec;
  --fondo-claro: #faf9f7;
  --rojo: #ce4639;
  --rojo-oscuro: #a8342a;
  --rojo-claro: #f08a7f;
  --tinta: #2a2422;
  --tinta-suave: #6b625d;
  --linea: #e0dbd6;
  --oscuro: #1f1a18;

  --titulos: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  /* Las frases destacadas (saludo, citas, pie) van con la misma letra que los títulos. */
  --serif: var(--titulos);
  --texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radio: 10px;
  --sombra: 0 10px 30px rgba(42, 36, 34, .08);
  --alto-cabecera: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera) + 1rem); }
body {
  margin: 0;
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--titulos); font-weight: 700; line-height: 1.15; margin: 0; }

.contenedor { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
.centrado { text-align: center; margin-top: 2.5rem; }

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.saltar { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--tinta); color: #fff; padding: .7rem 1rem; border-radius: 8px; }
.saltar:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }

.antetitulo {
  font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  margin: 0 0 .6rem;
}
.antetitulo--rojo { color: var(--rojo); }

/* ===== Botones ===== */
.boton,
.wp-block-button__link,
.wp-block-file .wp-block-file__button {
  display: inline-block; padding: .85rem 1.6rem; border-radius: 999px;
  background: var(--rojo); color: #fff; font: 600 .9rem var(--texto);
  border: 2px solid var(--rojo); cursor: pointer; text-decoration: none;
  transition: background .2s, color .2s, transform .2s;
}
.boton:hover,
.wp-block-button__link:hover,
.wp-block-file .wp-block-file__button:hover { background: var(--rojo-oscuro); border-color: var(--rojo-oscuro); color: #fff; transform: translateY(-2px); }
.boton--claro { background: #fff; color: var(--tinta); border-color: #fff; }
.boton--claro:hover { background: var(--fondo); border-color: var(--fondo); color: var(--tinta); }
.boton--borde { background: transparent; border-color: rgba(255,255,255,.7); }
.boton--borde:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.boton--borde-oscuro { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.boton--borde-oscuro:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }
/* Relleno arriba y abajo para que se pueda pulsar bien con el dedo, sin mover lo de alrededor. */
.enlace { display: inline-block; padding-block: .7rem; margin-block: -.7rem; color: var(--rojo); font-weight: 600; font-size: .9rem; }
.enlace:hover { text-decoration: underline; }

/* ===== Cabecera ===== */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 249, 247, .94);
  border-bottom: 1px solid var(--linea);
  transition: box-shadow .2s;
}
/* El desenfoque va en una capa aparte: puesto en la cabecera, encierra dentro de ella el menú
   del móvil (position: fixed) y solo se ve una franja de 48 px. */
.cabecera::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.admin-bar .cabecera { top: 32px; }
@media (max-width: 782px) { .admin-bar .cabecera { top: 46px; } }
@media (max-width: 600px) { .admin-bar .cabecera { top: 0; } }
.cabecera.con-sombra { box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--alto-cabecera); }

.marca { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.marca__escudo { width: 46px; height: auto; flex: none; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.marca__texto strong { font-family: var(--titulos); font-size: 1.1rem; }
.marca__texto small { font-size: .72rem; color: var(--tinta-suave); }

/* Menú (vale para el menú de Apariencia > Menús y para el de respaldo) */
.menu-principal { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.menu-principal li { position: relative; }
.menu-principal > li { display: flex; align-items: center; }
.menu-principal a {
  display: block; padding: .6rem .8rem; border-radius: 8px;
  font: 500 .92rem var(--texto); color: var(--tinta);
}
.menu-principal a:hover,
.menu-principal .current-menu-item > a,
.menu-principal .current-menu-ancestor > a,
.menu-principal .current_page_item > a { color: var(--rojo); }
.submenu-boton {
  background: none; border: 0; cursor: pointer; color: var(--tinta-suave);
  padding: .5rem .3rem; margin-left: -.55rem; font-size: .7rem; line-height: 1;
}
.submenu-boton span { display: inline-block; transition: transform .2s; }
.menu-principal li.abierto > .submenu-boton span { transform: rotate(180deg); }

.menu-principal .sub-menu {
  list-style: none; margin: 0; padding: .5rem;
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 230px; z-index: 5;
  background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); border: 1px solid var(--linea);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s;
}
.menu-principal li:hover > .sub-menu,
.menu-principal li:focus-within > .sub-menu,
.menu-principal li.abierto > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.menu-principal .sub-menu a { padding: .55rem .8rem; }
.menu-principal .sub-menu a:hover { background: var(--fondo); }

.menu-principal > li.menu__destacado > a { background: var(--rojo); color: #fff; border-radius: 999px; padding-inline: 1.2rem; margin-left: .4rem; }
.menu-principal > li.menu__destacado > a:hover { background: var(--rojo-oscuro); color: #fff; }
.menu-principal > li > a { white-space: nowrap; }
/* Pantallas medianas (portátiles pequeños, tabletas en horizontal): menú más compacto para que quepa en una fila. */
@media (min-width: 861px) and (max-width: 1100px) {
  .menu-principal > li > a { padding-inline: .5rem; font-size: .86rem; }
  .menu-principal > li.menu__destacado > a { padding-inline: .9rem; margin-left: .2rem; }
  .marca__texto small { display: none; }
}

.boton-menu { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 10px; flex: none; }
.boton-menu span { display: block; height: 2px; background: var(--tinta); margin: 5px 0; transition: .25s; }
.boton-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.boton-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.boton-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Portada ===== */
/* En el ordenador el texto va arriba, para no tapar las caras (en el móvil va debajo de las fotos). */
.portada { --alto: min(88vh, max(780px, 45vw)); position: relative; min-height: var(--alto); display: flex; align-items: flex-start; color: #fff; overflow: hidden; background: var(--oscuro); }
/* Las fotos ocupan todo el ancho y se recortan para llenarlo. El encuadre va alto
   (28-30 %) para que las caras queden a la vista y no las tape el título. */
.portada__titulares { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.portada__foto { position: relative; overflow: hidden; }
.portada__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portada__img--1 { object-position: 50% 20%; }
.portada__img--2 { object-position: 50% 16%; }
.portada__titulares::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31,26,24,.9) 0%, rgba(31,26,24,.6) 32%, rgba(31,26,24,0) 58%);
}
.portada__contenido { position: relative; padding-block: 2.5rem 3rem; text-align: center; }
/* El nombre completo de la cofradía va todo del mismo tamaño y en la misma letra. */
.portada h1 { font-size: clamp(1.9rem, 4vw, 3.5rem); max-width: 30ch; margin-inline: auto; text-wrap: balance; }
.portada h1 span { display: block; font-size: 1em; margin-top: .15em; }
.portada__lema { opacity: .8; margin: 1.2rem 0 2rem; }
.portada__botones { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
/* En el ordenador: el nombre arriba y la dirección con los botones abajo; las caras quedan despejadas en medio. */
@media (min-width: 861px) {
  .portada__contenido { align-self: stretch; display: flex; flex-direction: column; }
  .portada__lema { margin-top: auto; padding-top: 2rem; }
  /* Las dos fotos con forma fija (0,8 de ancho por 1 de alto), centradas; si sobra ancho, los lados se rellenan con las mismas fotos difuminadas. */
  .portada::before {
    content: ""; position: absolute; inset: -60px;
    background-image: var(--foto-1), var(--foto-2);
    background-size: 50% 100%; background-position: left center, right center; background-repeat: no-repeat;
    filter: blur(40px) brightness(.45);
  }
  .portada__titulares { right: 0; left: 0; margin-inline: auto; width: min(100%, calc(var(--alto) * 1.6 + 3px)); }
  .portada__titulares::after { background: linear-gradient(180deg, rgba(31,26,24,.9) 0%, rgba(31,26,24,.55) 28%, rgba(31,26,24,0) 48%, rgba(31,26,24,0) 68%, rgba(31,26,24,.85) 100%); }
}

/* ===== Aviso ===== */
.aviso { background: var(--rojo); color: #fff; }
.aviso__fila { display: flex; align-items: center; gap: 1rem; padding-block: .9rem; flex-wrap: wrap; }
.aviso__fila p { margin: 0; flex: 1; min-width: 220px; font-weight: 500; }
.aviso__etiqueta { background: rgba(255,255,255,.2); border-radius: 999px; padding: .2rem .8rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.aviso__fila a { font-weight: 600; white-space: nowrap; }
.aviso__fila a:hover { text-decoration: underline; }

/* ===== Bloques ===== */
.bloque { padding-block: clamp(3.5rem, 8vw, 6rem); }
.bloque--claro { background: var(--fondo-claro); }
.bloque__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.bloque h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }

/* Destacado */
.destacado { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.destacado--sin-imagen { grid-template-columns: 1fr; max-width: 760px; }
.destacado__cartel img { border-radius: var(--radio); box-shadow: 0 25px 50px rgba(0,0,0,.18); width: 100%; max-width: 440px; margin-inline: auto; display: block; }
.destacado__texto p:not(.antetitulo) { color: var(--tinta-suave); margin: 1.2rem 0 2rem; font-size: 1.05rem; }

/* Cuenta atrás hasta el Viernes Santo */
.cuenta { background: var(--fondo-claro); border-bottom: 1px solid var(--linea); padding-block: clamp(2.2rem, 5vw, 3.2rem); text-align: center; }
.cuenta__texto { margin: .5rem 0 1.3rem; font-family: var(--titulos); font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 600; line-height: 1.2; }
.cuenta__cajas { display: grid; grid-template-columns: repeat(4, minmax(0, 120px)); justify-content: center; gap: .8rem; }
.cuenta__caja { display: flex; flex-direction: column; align-items: center; padding: .95rem .3rem .75rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); }
/* Cifras de la misma altura y anchura, para que no bailen al cambiar cada segundo. */
.cuenta__num { font-family: var(--titulos); font-size: clamp(2.1rem, 5vw, 3.1rem); font-weight: 700; line-height: 1; color: var(--rojo); font-variant-numeric: lining-nums tabular-nums; }
.cuenta__etq { margin-top: .4rem; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.cuenta__fecha { margin: 1.3rem 0 0; font-size: .9rem; color: var(--tinta-suave); }
.cuenta__hoy { margin: .5rem 0 0; font-family: var(--titulos); font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; color: var(--rojo); }
.cuenta:not(.cuenta--hoy) .cuenta__hoy, .cuenta--hoy .cuenta__reloj { display: none; }

/* Filtros */
.filtros { display: flex; gap: .4rem; flex-wrap: wrap; }
.filtro { font: 500 .85rem var(--texto); padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--linea); background: #fff; cursor: pointer; color: var(--tinta); }
.filtro:hover { border-color: var(--rojo); color: var(--rojo); }
.filtro.activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.noticias__vacio { text-align: center; color: var(--tinta-suave); }

/* Noticias */
.noticias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.noticia { background: #fff; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); transition: transform .25s, box-shadow .25s; }
.noticia:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.noticia[hidden] { display: none; }
.noticia > a { display: block; height: 100%; }
.noticia__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--fondo); }
.noticia__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s; display: block; }
.noticia:hover .noticia__img img { transform: scale(1.04); }
.noticia__img--vacia {
  background: var(--fondo) url("../img/escudo.png") center / 56px auto no-repeat;
  opacity: .9;
}
.noticia__cuerpo { padding: 1.2rem 1.3rem 1.5rem; }
.noticia__meta { font-size: .78rem; color: var(--tinta-suave); margin: 0 0 .5rem; }
.noticia__meta span { color: var(--rojo); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-right: .5rem; }
.noticia h3 { font-size: 1.2rem; }
.noticia__extracto { color: var(--tinta-suave); font-size: .92rem; margin: .6rem 0 0; }

/* Saludo */
.saludo { background: var(--oscuro); color: #fff; text-align: center; }
.saludo .antetitulo { color: var(--rojo-claro); }
.saludo__caja { max-width: 820px; }
.saludo blockquote { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.35; margin: 1rem 0 2rem; }
.saludo .enlace { color: var(--rojo-claro); }

/* Tarjetas */
.tarjetas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 2rem 1.6rem; transition: .25s; position: relative; display: block; }
.tarjeta:hover { border-color: var(--rojo); transform: translateY(-4px); box-shadow: var(--sombra); }
.tarjeta__num { font-family: var(--serif); color: var(--rojo); font-size: 1rem; font-weight: 600; }
.tarjeta h3 { font-size: 1.35rem; margin: .8rem 0 .5rem; }
.tarjeta p { margin: 0; color: var(--tinta-suave); font-size: .92rem; }
/* Tarjetas de subpáginas (Patrimonio tiene 4): centradas, las 4 en fila en el ordenador
   y 2 × 2 en pantallas medianas, en vez de 3 + 1. */
.tarjetas--hijas {
  margin-top: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 280px));
  justify-content: center;
}
@media (max-width: 1040px) { .tarjetas--hijas { grid-template-columns: repeat(2, minmax(0, 320px)); } }
@media (max-width: 560px) { .tarjetas--hijas { grid-template-columns: minmax(0, 360px); } }

/* Tarjetas con foto (subpáginas de Patrimonio) */
.tarjeta--foto { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tarjeta__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fondo); }
.tarjeta__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; transition: transform .5s; }
.tarjeta--foto:hover .tarjeta__img img { transform: scale(1.04); }
.tarjeta__img--vacia { background: var(--fondo) url("../img/escudo.png") center / 72px auto no-repeat; }
.tarjeta__cuerpo { display: block; padding: 1.4rem 1.6rem 1.8rem; }

/* Galería de portada */
.galeria__rejilla { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; gap: .8rem; }
.galeria__rejilla img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radio); display: block; }
/* Cada foto va en un enlace que la abre en grande (visor). */
.galeria__foto { display: block; height: 100%; overflow: hidden; border-radius: var(--radio); cursor: zoom-in; }
.galeria__foto img { transition: transform .4s; }
.galeria__foto:hover img { transform: scale(1.03); }
.galeria__rejilla > :first-child { grid-row: span 2; }
.galeria__rejilla--1, .galeria__rejilla--2, .galeria__rejilla--3, .galeria__rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-rows: 260px; }
.galeria__rejilla--1 > :first-child, .galeria__rejilla--2 > :first-child, .galeria__rejilla--3 > :first-child, .galeria__rejilla--4 > :first-child { grid-row: auto; }

/* ===== Páginas interiores ===== */
.cabecera-pagina { background: var(--oscuro); color: #fff; text-align: center; padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 5vw, 3.5rem); }
.cabecera-pagina .antetitulo { color: var(--rojo-claro); }
.cabecera-pagina h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); max-width: 24ch; margin-inline: auto; }
.cabecera-pagina__meta { opacity: .75; margin: 1rem 0 0; font-size: .92rem; }

.articulo { padding-block: clamp(2.5rem, 6vw, 4rem); background: var(--fondo-claro); }
.articulo__imagen { margin: 0 auto 2.5rem; max-width: 760px; }
.articulo__imagen img { width: 100%; border-radius: var(--radio); display: block; }

.contenido-texto { max-width: 760px; margin-inline: auto; font-size: 1.075rem; line-height: 1.75; overflow-wrap: break-word; }
.contenido-texto::after { content: ""; display: table; clear: both; }
.contenido-texto p, .contenido-texto ul, .contenido-texto ol { margin: 0 0 1.25em; }
.contenido-texto h2, .contenido-texto h3, .contenido-texto h4 { margin: 2em 0 .7em; }
.contenido-texto h2 { font-size: 1.8rem; }
.contenido-texto h3 { font-size: 1.4rem; }
.contenido-texto h4 { font-size: 1.15rem; }
.contenido-texto > :first-child { margin-top: 0; }
.contenido-texto a:not(.wp-block-button__link):not(.wp-block-file__button) { color: var(--rojo); text-decoration: underline; text-underline-offset: 2px; }
.contenido-texto img { border-radius: 6px; }
.contenido-texto figure { margin: 2em 0; }
.contenido-texto .aligncenter { display: block; margin-inline: auto; }
.contenido-texto .alignleft { float: left; margin: .3em 1.6em 1em 0; max-width: 50%; }
.contenido-texto .alignright { float: right; margin: .3em 0 1em 1.6em; max-width: 50%; }
.contenido-texto .alignwide { margin-inline: calc(50% - min(600px, 50vw - 1.25rem)); max-width: none; }
.contenido-texto .alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; }
.contenido-texto .wp-caption { max-width: 100%; }
/* Los pies de foto: a lo ancho de la imagen y centrados. Sin esto, WordPress los deja
   como «table-caption» y salen en una columna estrechísima, con una palabra por línea. */
.contenido-texto .wp-caption-text, .contenido-texto figcaption {
  display: block !important; width: auto !important; max-width: 100%;
  font-size: .85rem; color: var(--tinta-suave); text-align: center; margin: .6em auto 0;
}
.contenido-texto figure { display: block; }

/* Bloque «Multimedia y texto»: foto a un lado y texto al otro, sin salirse del ancho
   de lectura ni dejar el texto perdido al fondo. */
.contenido-texto .wp-block-media-text {
  /* La columna de la foto se ajusta a lo que mide la foto (muchas son pequeñas),
     pero nunca pasa de un tercio del ancho: así el texto aprovecha el resto. */
  grid-template-columns: fit-content(34%) minmax(0, 1fr) !important;
  gap: 1.8rem; align-items: center;
}
/* Con la foto a la derecha las columnas van al revés; si no, la foto se queda en 0 px. */
.contenido-texto .wp-block-media-text.has-media-on-the-right {
  grid-template-columns: minmax(0, 1fr) fit-content(34%) !important;
}
.contenido-texto .wp-block-media-text__media { text-align: center; }
.contenido-texto .wp-block-media-text__media img { margin-inline: auto; width: auto !important; height: auto; max-width: 100%; }
.contenido-texto .wp-block-media-text.alignwide, .contenido-texto .wp-block-media-text.alignfull {
  margin-inline: auto; max-width: 100%; width: auto;
}
.contenido-texto .wp-block-media-text__media { margin: 0; }
.contenido-texto .wp-block-media-text__content { padding: 0 !important; }
.contenido-texto .wp-block-media-text__content > :first-child { margin-top: 0; }
@media (max-width: 700px) {
  /* En el móvil, foto encima y texto debajo, esté la foto a un lado o al otro. */
  .contenido-texto .wp-block-media-text,
  .contenido-texto .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr !important; }
  .contenido-texto .wp-block-media-text > * { grid-column: 1 !important; grid-row: auto !important; }
}
.contenido-texto figure.aligncenter, .contenido-texto figure.size-large { text-align: center; }
.contenido-texto blockquote { margin: 2em 0; padding: .2em 0 .2em 1.4em; border-left: 3px solid var(--rojo); font-family: var(--serif); font-style: italic; font-size: 1.35rem; }
.contenido-texto table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: .95rem; display: block; overflow-x: auto; }
.contenido-texto th, .contenido-texto td { border: 1px solid var(--linea); padding: .6em .8em; text-align: left; }
/* Separador: un sol pequeño con una línea fina a cada lado. */
.contenido-texto hr, .contenido-texto .wp-block-separator {
  position: relative; height: 22px; margin: 2.8em auto; border: 0 !important; opacity: 1;
  background: linear-gradient(var(--linea), var(--linea)) left center / calc(50% - 24px) 1px no-repeat,
              linear-gradient(var(--linea), var(--linea)) right center / calc(50% - 24px) 1px no-repeat;
}
.contenido-texto hr::after, .contenido-texto .wp-block-separator::after {
  content: ""; position: absolute; top: 0; left: 50%; width: 22px; height: 22px; margin-left: -11px;
  background: var(--rojo); -webkit-mask: var(--sol) center / contain no-repeat; mask: var(--sol) center / contain no-repeat;
}
.contenido-texto iframe, .contenido-texto video, .contenido-texto embed { max-width: 100%; }
/* Vídeos de YouTube/Vimeo siempre en 16:9: WordPress no carga aquí su CSS de vídeos y en el móvil
   se quedaban con el alto del ordenador (320 × 428, con franjas negras). */
.contenido-texto .wp-block-embed.is-type-video iframe,
.contenido-texto > p iframe[src*="youtube.com"], .contenido-texto > p iframe[src*="vimeo.com"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.contenido-texto .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin: 2em 0; }
.contenido-texto .gallery-item { margin: 0; }
.contenido-texto .gallery-item img { width: 100%; height: 160px; object-fit: cover; }
.contenido-texto .wp-block-file { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.2rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); }
/* Citas y notas al final de un texto: sin viñetas y en letra más pequeña. */
.contenido-texto ul.citas { list-style: none; padding-left: 0; font-size: .9rem; color: var(--tinta-suave); }
.contenido-texto ul.citas li { margin-bottom: .35em; }
/* Cada apartado empieza debajo de la foto flotante del anterior. */
.contenido-texto h2, .contenido-texto h3 { clear: both; }
/* Fichas (Enseres): foto pequeña en un marco cuadrado igual para todas, porque las fotos
   antiguas miden de 100 a 150 px; título y texto a su derecha. */
.contenido-texto .ficha { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 1.6rem; align-items: start; padding: 1.6rem 0; border-top: 1px solid var(--linea); }
.contenido-texto .ficha:last-of-type { border-bottom: 1px solid var(--linea); }
/* En temas clásicos WordPress mete un contenedor intermedio: que no cuente para la rejilla. */
.contenido-texto .ficha > .wp-block-group__inner-container { display: contents; }
.contenido-texto .ficha h3, .contenido-texto .ficha p { grid-column: 2; margin-top: 0; }
.contenido-texto .ficha .wp-block-image { grid-column: 1; grid-row: 1 / span 8; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; margin: 0; padding: .8rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); }
.contenido-texto .ficha .wp-block-image img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.contenido-texto .ficha h3 { font-size: 1.45rem; margin: 0 0 .5rem; }
.contenido-texto .ficha p { margin-bottom: .8em; }
.contenido-texto .ficha p:last-child { margin-bottom: 0; }
.contenido-texto .ficha + h2 { margin-top: 3rem; }
@media (max-width: 560px) {
  /* En el móvil: foto y título en la misma línea, el texto debajo a todo lo ancho. */
  .contenido-texto .ficha { grid-template-columns: 80px minmax(0, 1fr); column-gap: 1rem; align-items: center; }
  .contenido-texto .ficha .wp-block-image { grid-row: 1; padding: .35rem; }
  .contenido-texto .ficha h3 { margin: 0; font-size: 1.3rem; }
  .contenido-texto .ficha p { grid-column: 1 / -1; }
  .contenido-texto .ficha h3 + p { margin-top: 1rem; }
}
/* Ajuar (Enseres): cada pieza en una tarjeta, dos por fila. */
.contenido-texto ul.ajuar { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.contenido-texto ul.ajuar li { margin: 0; padding: 1rem 1.2rem; background: #fff; border: 1px solid var(--linea); border-left: 3px solid var(--rojo); border-radius: var(--radio); color: var(--tinta-suave); font-size: .93rem; line-height: 1.55; }
.contenido-texto ul.ajuar li strong { display: block; margin-bottom: .3rem; color: var(--tinta); font-family: var(--titulos); font-size: 1.2rem; line-height: 1.2; }
.contenido-texto ul.ajuar li strong + br { display: none; }
/* Portada de un documento para descargar (Estatutos): pequeña y centrada. */
.contenido-texto .portada-documento { max-width: 340px; margin: 1.5em auto; }
.contenido-texto .portada-documento img { box-shadow: var(--sombra); border: 1px solid var(--linea); }
/* Galerías de NextGEN: rejilla ordenada en vez de miniaturas sueltas con marco. */
.contenido-texto .ngg-galleryoverview {
  /* !important porque la hoja de NextGEN se carga después de la del tema. */
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: .7rem !important;
  margin: 2em 0 !important; overflow: visible !important; width: auto !important;
}
.contenido-texto .ngg-galleryoverview .slideshowlink { grid-column: 1 / -1; }
.contenido-texto .ngg-clear { display: none; }
.contenido-texto .ngg-gallery-thumbnail-box,
.contenido-texto .ngg-gallery-thumbnail {
  width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; border: 0 !important;
}
.contenido-texto .ngg-gallery-thumbnail a { display: block; }
.contenido-texto .ngg-galleryoverview img, .contenido-texto .ngg-gallery-thumbnail img {
  width: 100% !important; height: 150px; object-fit: cover; display: block;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 6px;
  transition: transform .4s;
}
.contenido-texto .ngg-gallery-thumbnail a:hover img { transform: scale(1.04); }
.contenido-texto .slideshowlink a { font-weight: 600; font-size: .9rem; }

/* Álbumes de NextGEN (página Galería): con el mismo aire que las tarjetas del tema. */
.contenido-texto .ngg-albumoverview { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 1.2rem !important; margin: 2em 0 !important; }
.contenido-texto .ngg-album-compact, .contenido-texto .ngg-album {
  width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important;
  border: 1px solid var(--linea) !important; border-radius: var(--radio); overflow: hidden; background: #fff;
  transition: border-color .2s, transform .2s, box-shadow .2s; text-align: center;
}
.contenido-texto .ngg-album-compact:hover, .contenido-texto .ngg-album:hover { border-color: var(--rojo) !important; transform: translateY(-3px); box-shadow: var(--sombra); }
.contenido-texto .ngg-album-compact .ngg-album-compactbox, .contenido-texto .ngg-album-compact .ngg-album-link { width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.contenido-texto .ngg-album-compact img, .contenido-texto .ngg-album img {
  width: 100% !important; height: 180px; object-fit: cover; margin: 0 !important; border: 0 !important; border-radius: 0;
}
.contenido-texto .ngg-album-compact h4, .contenido-texto .ngg-album h4 { margin: 1rem .8rem .3rem; font-size: 1.15rem; }
.contenido-texto .ngg-album-compact a, .contenido-texto .ngg-album a { text-decoration: none !important; color: var(--tinta) !important; }
.contenido-texto .ngg-album-compact .ngg-album-gallery-count, .contenido-texto .ngg-album .ngg-album-gallery-count { display: block; padding: 0 .8rem 1.1rem; font-size: .85rem; color: var(--tinta-suave); }
/* Título y contador de cada álbum: NextGEN les pone letra de 14 px espaciada, un alto fijo y 11 px al contador. */
.contenido-texto .ngg-album-compact h4, .contenido-texto .ngg-album h4 { height: auto !important; min-height: 0 !important; margin: 1rem .9rem .25rem !important; line-height: 1.2 !important; }
.contenido-texto .ngg-album-compact .ngg-album-desc, .contenido-texto .ngg-album .ngg-album-desc { display: block; height: auto !important; font-size: 1.3rem !important; font-weight: 700; letter-spacing: normal !important; line-height: 1.2 !important; }
.contenido-texto .ngg-album-gallery-image-counter { margin: 0 .9rem 1.1rem !important; font-size: .85rem !important; color: var(--tinta-suave); }
.contenido-texto .ngg-album-gallery-image-counter strong { font-size: inherit !important; }
/* NextGEN recorta el título con un script (shave) y deja solo «…»: se enseña entero. */
.contenido-texto .ngg-album-desc .js-shave { display: inline !important; }
.contenido-texto .ngg-album-desc .js-shave-char { display: none !important; }
/* Páginas de una galería (1 · 2 · ►): botones redondos del tamaño de un dedo. */
.contenido-texto .ngg-navigation { display: flex !important; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: 1.5rem 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.contenido-texto .ngg-navigation a, .contenido-texto .ngg-navigation span { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; height: 44px; margin: 0 !important; padding: 0 .9rem !important; border: 1px solid var(--linea) !important; border-radius: 999px; background: #fff !important; color: var(--tinta) !important; font: 500 .95rem var(--texto) !important; text-decoration: none !important; }
.contenido-texto .ngg-navigation a:hover { border-color: var(--rojo) !important; color: var(--rojo) !important; }
.contenido-texto .ngg-navigation .current { background: var(--tinta) !important; border-color: var(--tinta) !important; color: #fff !important; }

.articulo__pie { max-width: 760px; margin: 3rem auto 0; }

/* Compartir */
.compartir { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; padding-top: 1.5rem; margin-bottom: 2rem; border-top: 1px solid var(--linea); }
.compartir__etiqueta { font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-suave); }
.compartir__lista { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.compartir__boton {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border-radius: 50%; border: 1px solid var(--linea); background: #fff; color: var(--tinta-suave);
  cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.compartir__boton:hover, .compartir__boton:focus-visible { background: var(--rojo); border-color: var(--rojo); color: #fff; transform: translateY(-2px); }
.compartir__boton svg { display: block; }
.compartir__aviso { font-size: .85rem; color: var(--rojo); font-weight: 600; }
.etiquetas { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.etiquetas a { font-size: .8rem; padding: .35rem .9rem; border-radius: 999px; border: 1px solid var(--linea); background: #fff; }
.etiquetas a:hover { border-color: var(--rojo); color: var(--rojo); }
/* La categoría llega como lista (<ul>): sin punto delante, en fila con las etiquetas. */
.etiquetas ul, .etiquetas li { display: contents; }
/* «Contenido relacionado» de Jetpack con el aspecto de las tarjetas del tema.
   Su CSS se carga después del nuestro, de ahí los !important. */
.contenido-texto .jp-relatedposts { clear: both; margin: 3rem 0 1rem !important; padding-top: 1.5rem !important; border-top: 1px solid var(--linea) !important; }
.contenido-texto .jp-relatedposts .jp-relatedposts-headline { float: none !important; margin: 0 0 1rem !important; font-family: var(--texto) !important; font-size: .75rem !important; font-weight: 600 !important; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo) !important; }
.contenido-texto .jp-relatedposts .jp-relatedposts-headline em { font-style: normal; font-weight: inherit; }
.contenido-texto .jp-relatedposts .jp-relatedposts-items { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.4rem; }
.contenido-texto .jp-relatedposts .jp-relatedposts-post { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; }
.contenido-texto .jp-relatedposts .jp-relatedposts-post a { text-decoration: none !important; }
.contenido-texto .jp-relatedposts .jp-relatedposts-post img { width: 100% !important; max-width: 100% !important; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 0 .7rem !important; border-radius: var(--radio); }
.contenido-texto .jp-relatedposts .jp-relatedposts-post-title { margin: 0 0 .3rem !important; font-family: var(--titulos) !important; font-size: 1.15rem !important; line-height: 1.2 !important; }
.contenido-texto .jp-relatedposts .jp-relatedposts-post-title a { color: var(--tinta) !important; font-weight: 700 !important; }
.contenido-texto .jp-relatedposts .jp-relatedposts-post-title a:hover { color: var(--rojo) !important; }
.contenido-texto .jp-relatedposts .jp-relatedposts-post-date,
.contenido-texto .jp-relatedposts .jp-relatedposts-post-context { display: block; font-size: .8rem !important; color: var(--tinta-suave) !important; opacity: 1 !important; }

.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.post-navigation a { display: block; height: 100%; padding: 1.2rem 1.4rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); transition: .2s; }
.post-navigation a:hover { border-color: var(--rojo); }
.post-navigation .nav-next { text-align: right; grid-column: 2; }
.navegacion__etiqueta { display: block; font-size: .78rem; color: var(--rojo); font-weight: 600; margin-bottom: .3rem; }
.navegacion__titulo { font-family: var(--titulos); font-weight: 700; }

/* Listados */
.listado__buscar, .listado__descripcion { max-width: 640px; margin: 0 auto 2.5rem; text-align: center; color: var(--tinta-suave); }
.pagination { margin-top: 3rem; }
.pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; }
.pagination .page-numbers { min-width: 2.6rem; padding: .55rem .9rem; border-radius: 999px; border: 1px solid var(--linea); background: #fff; text-align: center; font-size: .9rem; }
.pagination a.page-numbers:hover { border-color: var(--rojo); color: var(--rojo); }
.pagination .current { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.pagination .dots { border: 0; background: none; }
.vacio { text-align: center; max-width: 560px; margin-inline: auto; }
.vacio .boton { margin-top: 1rem; }

/* Buscador */
.buscador { display: flex; gap: .5rem; max-width: 520px; margin: 1.5rem auto; }
.buscador__campo { flex: 1; min-width: 0; font: inherit; padding: .8rem 1.1rem; border: 1px solid var(--linea); border-radius: 999px; background: #fff; }
.buscador__campo:focus { outline: none; border-color: var(--rojo); }

/* Formulario de contacto (Jetpack) */
.contenido-texto .jetpack-contact-form-container,
.contenido-texto .contact-form { width: 100% !important; max-width: 100%; }
.contenido-texto .contact-form .grunion-field-wrap { width: 100% !important; margin-bottom: 1.1rem; }
.contenido-texto .contact-form .grunion-field-label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; }
.contenido-texto .contact-form .grunion-label-required { font-weight: 400; color: var(--tinta-suave); font-size: .85em; margin-left: .3rem; }
.contenido-texto .contact-form input[type="text"],
.contenido-texto .contact-form input[type="email"],
.contenido-texto .contact-form input[type="tel"],
.contenido-texto .contact-form input[type="url"],
.contenido-texto .contact-form select,
.contenido-texto .contact-form textarea {
  width: 100% !important; max-width: 100%; box-sizing: border-box;
  font: inherit; font-size: 1rem; padding: .75rem .95rem;
  border: 1px solid var(--linea); border-radius: 8px; background: #fff; color: var(--tinta);
}
.contenido-texto .contact-form textarea { min-height: 170px; resize: vertical; }
.contenido-texto .contact-form input:focus, .contenido-texto .contact-form textarea:focus { outline: none; border-color: var(--rojo); }
.contenido-texto .contact-form .contact-submit { margin-top: .5rem; }
.contenido-texto .contact-form button[type="submit"], .contenido-texto .contact-form .pushbutton-wide {
  width: auto !important; padding: .85rem 2.2rem !important; border-radius: 999px !important;
  background: var(--rojo) !important; color: #fff !important; border: 2px solid var(--rojo) !important;
  font: 600 .95rem var(--texto) !important; cursor: pointer; transition: background .2s, transform .2s;
}
.contenido-texto .contact-form button[type="submit"]:hover, .contenido-texto .contact-form .pushbutton-wide:hover {
  background: var(--rojo-oscuro) !important; border-color: var(--rojo-oscuro) !important; transform: translateY(-2px);
}

/* En pantallas anchas, nombre y correo caben en la misma fila. */
@media (min-width: 620px) {
  .contenido-texto .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .contenido-texto .contact-form .grunion-field-name-wrap { grid-column: 1; }
  .contenido-texto .contact-form .grunion-field-email-wrap { grid-column: 2; }
  .contenido-texto .contact-form .grunion-field-textarea-wrap,
  .contenido-texto .contact-form .contact-submit,
  .contenido-texto .contact-form .akismet-fields-container,
  .contenido-texto .contact-form .contact-form__error { grid-column: 1 / -1; }
}

/* Comentarios */
.comentarios { max-width: 760px; margin: 3rem auto 0; }
.comentarios__titulo, .comment-reply-title { font-size: 1.5rem; margin-bottom: 1.2rem; }
.comentarios__lista { list-style: none; padding: 0; }
.comentarios__lista .comment-body { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.2rem; margin-bottom: 1rem; }
/* Formulario en una tarjeta blanca, como el de Contacto: Nombre y Correo en fila. */
.comment-respond { margin-top: 2.5rem; }
/* Aviso de Akismet bajo el formulario de comentarios: discreto. */
.akismet_comment_form_privacy_notice { margin: .8rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--tinta-suave); }
.akismet_comment_form_privacy_notice a { color: inherit; text-decoration: underline; }
.comment-form { display: grid; gap: 1.1rem 1rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.5rem; }
.comment-form > * { grid-column: 1 / -1; margin: 0; }
.comment-form label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; }
.comment-form .required { color: var(--rojo); }
.comment-form input:not([type=submit]):not([type=checkbox]), .comment-form textarea { width: 100%; font: inherit; padding: .75rem .9rem; border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo-claro); color: var(--tinta); transition: border-color .2s, background .2s; }
/* Unas 2 líneas (WordPress lo trae con 8); se puede estirar desde la esquina. */
.comment-form textarea { height: 4.6rem; min-height: 3rem; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--rojo); background: #fff; }
.comment-form .comment-notes, .comment-form .logged-in-as { font-size: .85rem; color: var(--tinta-suave); }
.comment-form .logged-in-as a { color: var(--rojo); }
/* Casillas (guardar mis datos, avisos de Jetpack): casilla y texto en la misma línea. */
.comment-form .comment-form-cookies-consent, .comment-form .comment-subscription-form { display: flex; align-items: flex-start; gap: .55rem; font-size: .88rem; color: var(--tinta-suave); }
.comment-form .comment-form-cookies-consent label, .comment-form .comment-subscription-form label { display: inline; font-weight: 400; font-size: inherit; margin: 0; }
.comment-form input[type=checkbox] { width: 20px; height: 20px; margin-top: 0; accent-color: var(--rojo); flex-shrink: 0; }
.comment-form .submit { background: var(--rojo); color: #fff; border: 0; border-radius: 999px; padding: .85rem 1.8rem; font: 600 .9rem var(--texto); letter-spacing: .02em; cursor: pointer; transition: background .2s, transform .2s; }
.comment-form .submit:hover { background: var(--rojo-oscuro); transform: translateY(-2px); }
@media (min-width: 620px) {
  .comment-form { grid-template-columns: 1fr 1fr; }
  .comment-form .comment-form-author { grid-column: 1; }
  .comment-form .comment-form-email { grid-column: 2; }
}

/* ===== Pie ===== */
.pie { background: var(--oscuro); color: rgba(255,255,255,.75); font-size: .92rem; }
.pie__rejilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; padding-block: 4rem 3rem; }
.pie__titulo { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pie p { margin: 0 0 .8rem; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie__escudo { width: 60px; height: auto; margin-bottom: 1rem; }
.pie__nombre { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: #fff; max-width: 32ch; }
.pie__base { border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.2rem; font-size: .8rem; }
/* Cofradías de Archidona: escudos con su nombre debajo, centrados y en una fila si caben. */
.pie__cofradias { border-top: 1px solid rgba(255,255,255,.1); padding-block: 2.2rem 2.5rem; text-align: center; }
.pie__cofradias .pie__titulo { margin-bottom: 1.5rem; }
.pie .cofradias { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem 2rem; }
.cofradia { display: flex; flex-direction: column; align-items: center; gap: .6rem; width: 96px; color: rgba(255,255,255,.75); font-size: .8rem; line-height: 1.25; }
/* Cada escudo sobre una losa clara: así los oscuros (Soledad) no se pierden en el fondo negro. */
.cofradia img { height: 76px; width: auto; max-width: 90px; padding: .45rem; background: var(--fondo-claro); border-radius: var(--radio); object-fit: contain; transition: transform .2s; }
.pie a.cofradia:hover { color: #fff; text-decoration: none; }
a.cofradia:hover img { transform: translateY(-3px); }

/* ===== Tablet ===== */
@media (max-width: 1024px) {
  .noticias { grid-template-columns: repeat(2, 1fr); }
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}

/* ===== Móvil ===== */
@media (max-width: 860px) {
  .boton-menu { display: block; }
  .menu {
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--menu-arriba, var(--alto-cabecera));
    background: var(--fondo-claro); padding: 1rem 1.25rem 2rem; overflow-y: auto;
    /* Cerrado: invisible y un poco más arriba. Sin desplazarlo a un lado, que ensancharía la página. */
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .menu.abierto { opacity: 1; visibility: visible; transform: none; }
  .menu-principal { flex-direction: column; align-items: stretch; gap: 0; }
  .menu-principal > li { flex-wrap: wrap; border-bottom: 1px solid var(--linea); }
  .menu-principal > li > a { flex: 1; padding: 1rem .25rem; font-size: 1.1rem; }
  .submenu-boton { margin: 0; padding: 1rem .6rem; font-size: .9rem; }
  .menu-principal .sub-menu {
    position: static; flex-basis: 100%; min-width: 0;
    opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent;
    padding: 0 0 .8rem 1rem; display: none;
  }
  .menu-principal li:hover > .sub-menu,
  .menu-principal li:focus-within > .sub-menu { display: none; }
  .menu-principal li.abierto > .sub-menu { display: block; }
  .menu-principal .sub-menu a { font-size: 1rem; padding: .6rem .25rem; color: var(--tinta-suave); }
  .menu-principal > li.menu__destacado { border: 0; margin-top: 1.5rem; }
  .menu-principal > li.menu__destacado > a { margin: 0; text-align: center; }

  .marca__escudo { width: 40px; }
  .marca__texto strong { font-size: 1rem; }

  .portada { flex-direction: column; align-items: stretch; min-height: 0; }
  .portada__titulares { position: relative; height: 62vh; min-height: 380px; }
  .portada__titulares::after { background: linear-gradient(180deg, rgba(31,26,24,0) 70%, rgba(31,26,24,.95) 100%); }
  .portada__contenido { padding-block: 1.5rem 3rem; }

  .destacado { grid-template-columns: 1fr; }
  .destacado__cartel img { max-width: 320px; }
  .galeria__rejilla { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 140px 140px; }
  .galeria__rejilla > :first-child { grid-column: span 2; grid-row: auto; }

  .contenido-texto .alignleft, .contenido-texto .alignright { float: none; margin: 1.5em auto; max-width: 100%; }
}

@media (max-width: 560px) {
  .noticias, .tarjetas { grid-template-columns: 1fr; }
  .noticia > a { display: grid; grid-template-columns: 110px 1fr; }
  .noticia--pagina > a { display: block; }
  .noticia__img { aspect-ratio: auto; height: 100%; min-height: 130px; }
  .noticia__cuerpo { padding: 1rem; }
  .noticia h3 { font-size: 1.05rem; }
  .pie__rejilla { grid-template-columns: 1fr; gap: 2rem; }
  .marca__texto small { display: none; }
  /* Botones de la portada uno debajo de otro, a todo lo ancho (juntos no caben en una línea). */
  .portada__botones { flex-direction: column; align-items: stretch; }
  .portada__botones .boton { text-align: center; }
  /* Filtros de noticias en una sola fila; si no caben, se deslizan con el dedo. */
  .filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filtros::-webkit-scrollbar { display: none; }
  .filtro { flex: none; padding: .6rem .9rem; }
  /* Tarjetas de «La Cofradía» más bajas: el número a la izquierda y el texto al lado. */
  .tarjetas:not(.tarjetas--hijas) { gap: .8rem; }
  .tarjetas:not(.tarjetas--hijas) .tarjeta { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: baseline; padding: 1.1rem 1.2rem; }
  .tarjetas:not(.tarjetas--hijas) .tarjeta h3 { margin: 0 0 .25rem; font-size: 1.3rem; }
  .tarjetas:not(.tarjetas--hijas) .tarjeta p { grid-column: 2; }
  /* Cuenta atrás: las 4 cajas siguen en una fila, algo más apretadas. */
  .cuenta__cajas { gap: .45rem; }
  .cuenta__caja { padding: .75rem .15rem .6rem; }
  .cuenta__etq { font-size: .64rem; letter-spacing: .06em; }
  /* Escudos del pie algo más pequeños: 3 o 4 por fila. */
  .pie .cofradias { gap: 1.1rem .8rem; }
  .cofradia { width: 72px; font-size: .75rem; }
  .cofradia img { height: 64px; padding: .35rem; }
  /* Paginación de noticias: solo las flechas, para que todo quepa en una fila. */
  .paginacion__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pagination .nav-links { gap: .3rem; }
  .pagination .page-numbers { min-width: 38px; padding: .55rem .5rem; }
  /* «Contenido relacionado» en el móvil: miniatura a la izquierda y título al lado (antes, 3 fotos grandes = 1000 px). */
  .contenido-texto .jp-relatedposts .jp-relatedposts-items { grid-template-columns: 1fr; gap: .9rem; }
  .contenido-texto .jp-relatedposts .jp-relatedposts-post { display: grid !important; grid-template-columns: 96px minmax(0, 1fr); column-gap: .9rem; align-content: start; }
  .contenido-texto .jp-relatedposts .jp-relatedposts-post > * { grid-column: 2; }
  .contenido-texto .jp-relatedposts .jp-relatedposts-post-a:has(img) { grid-column: 1; grid-row: 1 / span 4; }
  .contenido-texto .jp-relatedposts .jp-relatedposts-post img { margin: 0 !important; aspect-ratio: 1; }
  .contenido-texto .jp-relatedposts .jp-relatedposts-post-title { font-size: 1.05rem !important; }
  .post-navigation .nav-links { grid-template-columns: 1fr; }
  .post-navigation .nav-next { grid-column: auto; }
  .contenido-texto { font-size: 1rem; }
}

/* ===== Sol de la Humildad (adorno) ===== */
:root { --sol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='10'/%3E%3Cg stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cline x1='32.0' y1='17.0' x2='32.0' y2='2.0'/%3E%3Cline x1='37.7' y1='18.1' x2='41.2' y2='9.8'/%3E%3Cline x1='42.6' y1='21.4' x2='53.2' y2='10.8'/%3E%3Cline x1='45.9' y1='26.3' x2='54.2' y2='22.8'/%3E%3Cline x1='47.0' y1='32.0' x2='62.0' y2='32.0'/%3E%3Cline x1='45.9' y1='37.7' x2='54.2' y2='41.2'/%3E%3Cline x1='42.6' y1='42.6' x2='53.2' y2='53.2'/%3E%3Cline x1='37.7' y1='45.9' x2='41.2' y2='54.2'/%3E%3Cline x1='32.0' y1='47.0' x2='32.0' y2='62.0'/%3E%3Cline x1='26.3' y1='45.9' x2='22.8' y2='54.2'/%3E%3Cline x1='21.4' y1='42.6' x2='10.8' y2='53.2'/%3E%3Cline x1='18.1' y1='37.7' x2='9.8' y2='41.2'/%3E%3Cline x1='17.0' y1='32.0' x2='2.0' y2='32.0'/%3E%3Cline x1='18.1' y1='26.3' x2='9.8' y2='22.8'/%3E%3Cline x1='21.4' y1='21.4' x2='10.8' y2='10.8'/%3E%3Cline x1='26.3' y1='18.1' x2='22.8' y2='9.8'/%3E%3C/g%3E%3C/svg%3E"); }
.cabecera-pagina h1::after,
.pie__cofradias::before {
  content: ""; display: block; width: 28px; height: 28px; margin: 1.1rem auto 0;
  background: var(--rojo-claro); -webkit-mask: var(--sol) center / contain no-repeat; mask: var(--sol) center / contain no-repeat;
}
.pie__cofradias::before { width: 24px; height: 24px; margin: 0 auto 1rem; opacity: .9; }
.bloque__cabeza .antetitulo::before {
  content: ""; display: inline-block; width: 15px; height: 15px; margin-right: .5rem; vertical-align: -3px;
  background: currentColor; -webkit-mask: var(--sol) center / contain no-repeat; mask: var(--sol) center / contain no-repeat;
}

/* ===== Animaciones suaves ===== */
/* Solo si el script ha puesto html.js-animar: sin JavaScript todo se ve desde el principio. */
.js-animar .revelar { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js-animar .revelar.visible { opacity: 1; transform: none; }
/* Zoom muy lento en las fotos de la portada, centrado en las caras. */
.portada__img { animation: humildad-zoom 26s ease-in-out infinite alternate; will-change: transform; }
.portada__img--1 { transform-origin: 50% 20%; }
.portada__img--2 { transform-origin: 50% 16%; animation-delay: -13s; }
@keyframes humildad-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }

/* ===== Agenda de eventos (plugin «Humildad · Agenda») ===== */
.agenda { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: .8rem; max-width: 820px; }
/* Portada: hasta 3 eventos en fila, siempre centrados (1 en el medio, 2 juntos en el centro, 3 a todo lo ancho). */
.agenda--portada { max-width: none; display: flex; flex-wrap: wrap; justify-content: center; }
.agenda--portada > li { flex: 0 1 calc((100% - 1.6rem) / 3); }
.agenda__filtros { justify-content: center; margin-bottom: 2rem; }
.evento-fila a { display: flex; align-items: center; gap: 1.1rem; height: 100%; padding: 1rem 1.2rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); color: inherit; text-decoration: none; transition: border-color .25s, box-shadow .25s, transform .25s; }
.evento-fila a:hover { border-color: var(--rojo); box-shadow: var(--sombra); transform: translateY(-2px); }
.evento-fecha { flex: none; width: 66px; padding: .5rem 0 .55rem; text-align: center; line-height: 1; background: var(--fondo-claro); border: 1px solid var(--linea); border-radius: 8px; }
.evento-fecha__dia { display: block; font: 700 2rem var(--titulos); color: var(--rojo); }
.evento-fecha__mes { display: block; margin-top: .3rem; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.evento-fila__cuerpo { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.evento-fecha--pendiente .evento-fecha__dia { color: var(--tinta-suave); }
.agenda__subtitulo { max-width: 820px; margin: 2.8rem auto 1rem; font-size: 1.5rem; }
.evento-fila__cuando { font-size: .8rem; font-weight: 600; color: var(--rojo); }
.evento-fila__titulo { font: 600 1.3rem/1.2 var(--titulos); color: var(--tinta); }
.evento-fila__lugar { font-size: .85rem; color: var(--tinta-suave); }
.proximos { padding-block: clamp(2.5rem, 6vw, 3.5rem); }

.evento-ficha { max-width: 760px; margin: 0 auto 2.5rem; padding: 1.5rem 1.6rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); }
.evento-ficha__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem 2rem; margin: 0; }
.evento-ficha__datos dt { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo); margin-bottom: .3rem; }
.evento-ficha__datos dd { margin: 0; line-height: 1.5; }
.evento-ficha__datos .enlace { padding-block: .4rem; margin-block: 0; }
.evento-ficha__calendario { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid var(--linea); }
.evento-ficha__calendario p { flex-basis: 100%; margin: 0 0 .2rem; font-weight: 600; }
.evento-ficha__pasado { margin: 1.3rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--linea); color: var(--tinta-suave); }

@media (max-width: 860px) {
  /* Agenda: uno debajo de otro, la fecha un poco más pequeña y los botones del calendario a todo lo ancho. */
  .agenda--portada > li { flex-basis: 100%; }
  .evento-fila a { gap: .9rem; padding: .85rem 1rem; }
  .evento-fecha { width: 58px; }
  .evento-fecha__dia { font-size: 1.7rem; }
  .evento-fila__titulo { font-size: 1.2rem; }
  .evento-ficha { padding: 1.2rem; }
  .evento-ficha__calendario .boton { flex: 1 1 100%; text-align: center; }
}

/* ===== La web como app ===== */
.boton-app { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.2rem; padding: .45rem 1rem .45rem .45rem; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(255,255,255,.06); color: #fff; font: 600 .85rem var(--texto); cursor: pointer; transition: background .2s, border-color .2s; }
.boton-app:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }
.boton-app[hidden] { display: none; }
.boton-app img { width: 28px; height: 28px; border-radius: 7px; }
.ayuda-app { max-width: min(420px, calc(100% - 2rem)); padding: 1.6rem 1.5rem 1.4rem; border: 0; border-radius: var(--radio); box-shadow: var(--sombra); color: var(--tinta); }
.ayuda-app::backdrop { background: rgba(31,26,24,.6); }
.ayuda-app h2 { font-size: 1.5rem; margin: 0 0 1rem; }
.ayuda-app ol { margin: 0 0 1.4rem; padding-left: 1.3rem; line-height: 1.6; }
.ayuda-app li + li { margin-top: .5rem; }
.ayuda-app svg { vertical-align: -4px; color: #007aff; }
.ayuda-app .boton { width: 100%; }

/* ===== Buscador de la cabecera ===== */
/* El menú se va a la derecha y la lupa queda al final de la fila. */
.cabecera__fila > .menu { margin-left: auto; }
.boton-buscar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--tinta); cursor: pointer; transition: background .2s, color .2s; }
.boton-buscar:hover, .boton-buscar[aria-expanded="true"] { background: var(--fondo); color: var(--rojo); }
.buscar-panel { border-top: 1px solid var(--linea); }
.buscar-panel .buscador { margin: .9rem auto; }

/* ===== Lectura: barra de progreso y «volver arriba» ===== */
.progreso { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--rojo); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.subir {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: grid; place-items: center;
  width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--rojo); color: #fff; box-shadow: var(--sombra); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, transform .25s, visibility .25s, background .2s;
}
.subir.visible { opacity: 1; visibility: visible; transform: none; }
.subir:hover { background: var(--rojo-oscuro); }

/* ===== Índice «En esta página» ===== */
.indice { margin: 0 0 2.2rem; padding: 1rem 1.3rem; background: #fff; border: 1px solid var(--linea); border-left: 3px solid var(--rojo); border-radius: var(--radio); }
.indice summary { cursor: pointer; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo); }
.indice[open] summary { margin-bottom: .6rem; }
.contenido-texto .indice ol { margin: 0; padding-left: 1.3rem; }
.contenido-texto .indice ol ol { margin: .15rem 0 .35rem; }
.contenido-texto .indice li { margin: .25rem 0; }
.contenido-texto .indice a { color: var(--tinta) !important; text-decoration: none !important; }
.contenido-texto .indice a:hover { color: var(--rojo) !important; text-decoration: underline !important; }
/* Al saltar desde el índice, el título queda a la vista bajo la cabecera fija (y bajo la barra negra si has entrado). */
/* Se suma al scroll-padding-top de html, que ya descuenta la cabecera. */
.contenido-texto :is(h2, h3)[id] { scroll-margin-top: .5rem; }
.admin-bar .contenido-texto :is(h2, h3)[id] { scroll-margin-top: calc(32px + .5rem); }

/* ===== Visor de fotos de la galería ===== */
.visor { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20, 16, 15, .95); color: #fff; }
.visor::backdrop { background: rgba(20, 16, 15, .95); }
.visor[open] { display: grid; place-items: center; }
.visor__img { max-width: calc(100vw - 2rem); max-height: calc(100dvh - 7rem); width: auto; height: auto; object-fit: contain; border-radius: 6px; user-select: none; -webkit-user-drag: none; touch-action: pan-y; }
.visor__cuenta { position: absolute; top: 1.1rem; left: 1.1rem; margin: 0; font-size: .85rem; opacity: .8; }
.visor__boton { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font: 400 1.7rem/1 var(--texto); cursor: pointer; transition: background .2s; }
.visor__boton:hover { background: rgba(255, 255, 255, .28); }
.visor__cerrar { top: .8rem; right: .8rem; }
.visor__ant { left: .8rem; top: 50%; transform: translateY(-50%); }
.visor__sig { right: .8rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 560px) {
  /* En el móvil las flechas van abajo, donde llega el pulgar. */
  .visor__ant, .visor__sig { top: auto; bottom: 1.2rem; transform: none; }
  .visor__ant { left: calc(50% - 56px); }
  .visor__sig { right: calc(50% - 56px); }
}

/* ===== Hemeroteca y enlace del Viernes Santo ===== */
.hemeroteca { justify-content: center; margin: 0 auto 2.5rem; }
.hemeroteca .filtro { text-decoration: none; }
.cuenta__enlace { margin: 1rem 0 0; }

@media (max-width: 860px) {
  /* En el móvil, la lupa va justo a la izquierda del botón del menú. */
  .boton-buscar { margin-left: auto; order: 1; }
  .boton-menu { order: 2; }
}
@media (max-width: 560px) {
  .hemeroteca { justify-content: flex-start; }
  .subir { right: .8rem; bottom: .8rem; width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js-animar .revelar { opacity: 1; transform: none; }
}