/* ==========================================================================
   Archicofradía del Socorro — estilos del tema
   Los colores, tipografías y tamaños base están en theme.json.
   Aquí solo va lo que el editor no puede expresar por sí mismo.
   ========================================================================== */

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

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: lining-nums; }
h1, h2, h3, h4, h5, h6, .has-serif-font-family { font-variant-numeric: lining-nums; }

img { height: auto; }

/* Los párrafos vacíos no ocupan espacio. */
.wp-block-post-content > p:empty { display: none; }

.screen-reader-text:focus { background: #fff; color: #6D191D; padding: .5rem 1rem; z-index: 100000; }

/* --- Antetítulo (estilo de párrafo "Antetítulo") ----------------------- */
.is-style-antetitulo {
	font-family: var(--wp--preset--font-family--sans);
	font-size: .8125rem !important;
	font-weight: 600;
	letter-spacing: .28em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--wp--preset--color--granate);
}
.has-granate-oscuro-background-color .is-style-antetitulo,
.socorro-oscuro .is-style-antetitulo,
.wp-block-cover .is-style-antetitulo,
.socorro-hero .is-style-antetitulo { color: var(--wp--preset--color--crema); }
.is-style-antetitulo.socorro-con-linea { display: flex; align-items: center; gap: 14px; }
.is-style-antetitulo.socorro-con-linea::before {
	content: ""; display: block; width: 48px; height: 1px; flex: none;
	background: var(--wp--preset--color--oro);
}

/* --- Botones ------------------------------------------------------------ */
.wp-block-button__link { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.wp-block-button.is-style-contorno-claro .wp-block-button__link {
	background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6);
}
.wp-block-button.is-style-contorno-claro .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--granate); }
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--granate); border: 1px solid var(--wp--preset--color--granate);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--granate); color: #fff; }
.wp-block-button.is-style-enlace .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--granate); padding: 0 0 4px;
	border-bottom: 1px solid currentColor;
}
.wp-block-button.is-style-enlace .wp-block-button__link:hover { background: transparent; color: var(--wp--preset--color--granate-oscuro); }

/* --- Barra superior y cabecera ---------------------------------------- */
.socorro-barra { font-size: .8125rem; letter-spacing: .04em; }
.socorro-barra a { color: var(--wp--preset--color--arena); }
.socorro-barra a:hover { color: #fff; }
.socorro-barra p { margin: 0; }

.socorro-cabecera { border-bottom: 1px solid #EDE6E0; }
.socorro-marca { display: flex; align-items: center; gap: 16px; text-decoration: none !important; }
.socorro-marca img { width: 68px; height: 64px; object-fit: contain; }
.socorro-marca__nombre {
	--marca: 40px;
	display: inline-flex; flex-direction: column; align-items: stretch; width: max-content;
	font-family: var(--wp--preset--font-family--poppins); text-transform: uppercase;
	color: var(--wp--preset--color--granate); line-height: 1;
}
.socorro-marca__l1 { font-size: calc(var(--marca) * .452); font-weight: 400; letter-spacing: .005em; white-space: nowrap; }
.socorro-marca__l2 { font-size: var(--marca); font-weight: 600; letter-spacing: -.01em; line-height: .86; margin-top: .02em; }
.socorro-marca__l3 { font-size: calc(var(--marca) * .29); font-weight: 400; letter-spacing: .04em; text-align: right; margin-top: .25em; padding-right: 8%; }

.socorro-cabecera .wp-block-navigation a { color: var(--wp--preset--color--negro); }
.socorro-cabecera .wp-block-navigation a:hover { color: var(--wp--preset--color--granate); text-decoration: none; }
.socorro-cabecera .wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid #EDE6E0 !important; padding: .5rem 0; min-width: 240px;
	box-shadow: 0 12px 30px rgba(44,12,15,.08);
}
.socorro-cabecera .wp-block-navigation .wp-block-navigation__submenu-container a { padding: .6rem 1.1rem; text-transform: none; letter-spacing: 0; font-weight: 500; }
.socorro-cabecera .wp-block-navigation-item.socorro-nav-destacado > a,
.socorro-cabecera .wp-block-navigation-item.socorro-nav-destacado > a:hover {
	background: var(--wp--preset--color--granate); color: #fff; padding: 12px 20px;
}
.wp-block-navigation__responsive-container.is-menu-open { padding: 2rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.25rem; font-size: 1.125rem; }

/* --- Portada: carrusel a pantalla completa ---------------------------- */
.socorro-hero {
	position: relative;
	min-height: min(780px, 92vh);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: #1a0709;
	color: #fff;
}
.socorro-hero > .socorro-hero__slides {
	position: absolute !important; inset: 0; margin: 0 !important; padding: 0 !important;
	display: block !important; gap: 0 !important; max-width: none !important; width: 100% !important;
}
.socorro-hero .socorro-hero__slides figure.wp-block-image {
	position: absolute !important; inset: 0; margin: 0 !important; width: 100% !important; height: 100%;
	opacity: 0; transition: opacity 1.2s ease;
}
.socorro-hero .socorro-hero__slides figure.wp-block-image:first-child,
.socorro-hero .socorro-hero__slides figure.wp-block-image.is-active { opacity: 1; }
.socorro-hero.is-ready .socorro-hero__slides figure.wp-block-image:not(.is-active) { opacity: 0; }
.socorro-hero .socorro-hero__slides img {
	width: 100% !important; height: 100% !important; object-fit: cover; object-position: 70% center;
	transform: scale(1); transition: transform 7s ease;
}
.socorro-hero .socorro-hero__slides figure.is-active img { transform: scale(1.04); }
.socorro-hero .socorro-hero__slides figcaption { display: none; }
.socorro-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(20,6,8,.9) 0%, rgba(20,6,8,.6) 40%, rgba(20,6,8,.1) 75%),
		linear-gradient(0deg, rgba(20,6,8,.6) 0%, rgba(20,6,8,0) 45%);
}
.socorro-hero > .socorro-hero__contenido { position: relative; z-index: 2; width: 100%; }
.socorro-hero h1 { color: #fff; margin: 0; }
.socorro-hero .is-style-antetitulo { margin-bottom: .25rem; }
.socorro-hero h1 em {
	display: block; margin-top: 14px; font-style: italic; font-weight: 500;
	font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.2; color: var(--wp--preset--color--crema);
}
.socorro-hero__dots { display: flex; gap: 6px; padding-top: 8px; }
.socorro-hero__dots button {
	width: 18px; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
	color: rgba(255,255,255,.4); transition: width .4s ease, color .4s ease;
}
.socorro-hero__dots button::before { content: ""; display: block; height: 2px; background: currentColor; }
.socorro-hero__dots button[aria-current="true"] { width: 40px; color: #fff; }
.socorro-hero__dots button:focus-visible { outline: 2px solid var(--wp--preset--color--oro); outline-offset: 2px; }
@media (max-width: 781px) {
	.socorro-hero { min-height: 640px; }
	.socorro-hero h1 { font-size: 2.75rem !important; }
	.socorro-hero .is-style-antetitulo { letter-spacing: .18em; }
	.socorro-hero::after { background: linear-gradient(0deg, rgba(20,6,8,.92) 0%, rgba(20,6,8,.55) 55%, rgba(20,6,8,.15) 100%); }
}
@media (prefers-reduced-motion: reduce) {
	.socorro-hero .socorro-hero__slides img, .socorro-hero .socorro-hero__slides figure.is-active img { transform: none; transition: none; }
}

/* En el editor, el carrusel se muestra como una tira de miniaturas para poder cambiar las fotos. */
.editor-styles-wrapper .socorro-hero { display: block; min-height: 0; padding-bottom: 2rem; }
.editor-styles-wrapper .socorro-hero::after { display: none; }
.editor-styles-wrapper .socorro-hero > .socorro-hero__slides { position: relative !important; display: flex !important; flex-wrap: wrap; gap: 8px !important; padding: 1rem !important; }
.editor-styles-wrapper .socorro-hero .socorro-hero__slides figure.wp-block-image { position: relative !important; opacity: 1 !important; width: calc(25% - 8px) !important; height: 120px; }

/* --- Cuenta atrás ------------------------------------------------------ */
.socorro-cuenta { display: flex; gap: clamp(1.25rem, 4vw, 2.5rem); align-items: flex-end; }
.socorro-cuenta__item { display: flex; flex-direction: column; align-items: center; }
.socorro-cuenta__num { font-family: var(--wp--preset--font-family--serif); font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 600; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.socorro-cuenta__txt { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--crema); }

/* --- Tarjetas de Sagrados Titulares ----------------------------------- */
.socorro-titular .wp-block-image { margin-bottom: 0; overflow: hidden; }
.socorro-titular .wp-block-image img { width: 100%; aspect-ratio: 3/4; object-fit: cover; transition: transform .8s ease; }
.socorro-encuadre-arriba img { object-position: center 20%; }
.socorro-titular:hover .wp-block-image img { transform: scale(1.03); }
.socorro-titular__pie { border-bottom: 1px solid var(--wp--preset--color--linea); padding-bottom: 16px; }
.socorro-conocer { font-size: .8125rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.socorro-conocer a { color: var(--wp--preset--color--granate); }

/* --- Noticias ----------------------------------------------------------- */
.socorro-noticias .wp-block-post-template { gap: 2rem; }
.socorro-noticias .wp-block-post { background: #fff; display: flex; flex-direction: column; transition: box-shadow .3s ease, transform .3s ease; }
.socorro-noticias .wp-block-post:hover { box-shadow: 0 18px 40px rgba(44,12,15,.08); transform: translateY(-2px); }
.socorro-noticias .wp-block-post-featured-image { margin: 0; overflow: hidden; }
.socorro-noticias .wp-block-post-featured-image img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.socorro-noticias .socorro-tarjeta__cuerpo { padding: 28px; align-items: stretch !important; min-width: 0; }
.socorro-noticias .socorro-tarjeta__cuerpo > * { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.socorro-noticias .wp-block-post-title a,
.socorro-contenido .socorro-noticias a { text-decoration: none; }
.socorro-noticias .wp-block-post-title { font-size: 1.75rem; line-height: 1.15; margin: 0; }
.socorro-noticias .wp-block-post-title a:hover { color: var(--wp--preset--color--granate); text-decoration: none; }
.socorro-noticias .wp-block-post-excerpt { color: var(--wp--preset--color--texto-suave); font-size: .9375rem; line-height: 1.6; }
.socorro-noticias .wp-block-post-excerpt__more-text { display: none; }
.socorro-fecha { font-size: .75rem !important; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--wp--preset--color--granate); }
.socorro-sin-imagen { display: flex; align-items: center; justify-content: center; width: 100%; background: var(--wp--preset--color--granate-oscuro); }
.socorro-sin-imagen img { width: 72px !important; height: auto !important; aspect-ratio: auto !important; opacity: .8; }

/* --- Banda con foto (Viernes Santo) ------------------------------- */
.wp-block-cover.socorro-banda { align-items: flex-end; }
.wp-block-cover.socorro-banda .wp-block-cover__inner-container { width: 100%; }

/* --- Patrimonio -------------------------------------------------------- */
.socorro-patrimonio .wp-block-image img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.socorro-patrimonio .wp-block-image figcaption {
	font-family: var(--wp--preset--font-family--serif); font-size: 1.375rem; font-weight: 600;
	color: var(--wp--preset--color--negro); text-align: left; margin-top: 14px;
}

/* --- Fines (lista con números romanos) -------------------------------- */
.is-style-numeros-romanos {
	list-style: none; padding: 0 !important; margin: 0;
	counter-reset: fin; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 40px;
}
.is-style-numeros-romanos > li {
	counter-increment: fin; display: flex; gap: 18px; padding: 18px 0; margin: 0;
	border-top: 1px solid var(--wp--preset--color--linea); font-size: .9375rem; line-height: 1.55;
}
.is-style-numeros-romanos > li::before {
	content: counter(fin, upper-roman); min-width: 34px; flex: none;
	font-family: var(--wp--preset--font-family--serif); font-size: 1.375rem; font-weight: 700;
	line-height: 1.1; color: var(--wp--preset--color--granate);
}

/* --- Bandas oscuras ---------------------------------------------------- */
.socorro-oscuro a:not(.wp-block-button__link) { color: var(--wp--preset--color--arena); }
.socorro-oscuro a:not(.wp-block-button__link):hover { color: #fff; }

/* --- Pie de página ----------------------------------------------------- */
.socorro-pie { font-size: .875rem; }
.socorro-pie p { margin: 0; }
.socorro-pie .socorro-pie__titulo { font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--wp--preset--color--oro); margin-bottom: .25rem; }
.socorro-pie a { color: var(--wp--preset--color--arena); }
.socorro-pie a:hover { color: #fff; }
.socorro-pie .socorro-pie__logo { margin: 0; }
.socorro-pie .socorro-pie__logo img { display: block; width: 300px; max-width: none; height: auto; }
@media (min-width: 600px) {
	.socorro-pie .socorro-pie__logo {
		margin-left: calc(-1 * max(var(--wp--style--root--padding-left, 2rem), (100vw - 1240px) / 2));
	}
}
@media (max-width: 599px) {
	.socorro-pie .socorro-pie__logo { margin-left: calc(-1 * var(--wp--style--root--padding-left, 1.25rem)); }
	.socorro-pie .socorro-pie__logo img { width: 240px; }
}
.socorro-pie__legal { border-top: 1px solid rgba(233,220,203,.2); font-size: .8125rem; }

/* --- Cabecera de páginas interiores ----------------------------------- */
.socorro-cabecera-pagina h1 { font-size: clamp(2.5rem, 6vw, 4rem); color: #fff; }
.socorro-cabecera-pagina .wp-block-post-date,
.socorro-cabecera-pagina .wp-block-post-terms { color: var(--wp--preset--color--crema); font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; }
.socorro-cabecera-pagina .wp-block-post-terms a { color: var(--wp--preset--color--crema); }

/* --- Contenido de páginas y noticias ---------------------------------- */
.socorro-contenido > * + * { margin-block-start: 1.25rem; }
.socorro-contenido .wp-block-image img,
.socorro-contenido .wp-block-gallery img { border-radius: 0; }
.socorro-contenido h2 { font-size: clamp(2rem, 4vw, 2.75rem); margin-block-start: 3rem; }
.socorro-contenido h3 { margin-block-start: 2.25rem; }
.socorro-contenido > p { color: #2a2222; }
.socorro-contenido p a, .socorro-contenido li a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Paginación -------------------------------------------------------- */
.wp-block-query-pagination { font-weight: 600; }
.wp-block-query-pagination .page-numbers.current { color: var(--wp--preset--color--granate); border-bottom: 1px solid currentColor; }

/* --- Contenido antiguo de Divi (compatibilidad temporal) ------------ */
.socorro-divi > * + * { margin-block-start: 1.25rem; }
.socorro-divi img { max-width: 100%; height: auto; }
.socorro-divi .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.socorro-divi .gallery-item { margin: 0; width: auto !important; }
.socorro-divi .gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 0 !important; }

/* --- Ajustes para móvil ------------------------------------------------ */
@media (max-width: 781px) {
	/* Barra superior: solo las redes, en una línea. */
	.socorro-barra > .wp-block-group { justify-content: center !important; }
	.socorro-barra > .wp-block-group > p:first-child { display: none; }
	/* Escudo, nombre y botón de menú en la misma fila. */
	.socorro-cabecera > .wp-block-group { flex-wrap: nowrap !important; }
	.socorro-marca { gap: 12px; min-width: 0; }
	.socorro-marca img { width: 52px; height: 49px; }
	.socorro-marca__nombre { --marca: 30px; }
	.socorro-cabecera .wp-block-navigation { flex: none; }
	/* Banda de Viernes Santo: fondo más oscuro para que el texto se lea bien. */
	.wp-block-cover.socorro-banda .wp-block-cover__background { background: linear-gradient(0deg, rgba(20,6,8,.92) 0%, rgba(20,6,8,.6) 70%, rgba(20,6,8,.35) 100%) !important; }
}

/* --- Redes sociales con logotipos ------------------------------------- */
.socorro-redes-barra { margin: 0; }
.socorro-redes-barra .wp-social-link a { padding: 2px; }
.socorro-redes-barra .wp-social-link:hover { transform: none; }
.socorro-redes-barra .wp-social-link a:hover svg { color: #fff; fill: #fff; }
.socorro-redes-circulos .wp-social-link { border-radius: 50%; }
.socorro-redes-circulos .wp-social-link a {
	display: flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; padding: 0 !important; border-radius: 50%;
	border: 1px solid var(--wp--preset--color--granate);
	transition: background-color .2s ease;
}
.socorro-redes-circulos .wp-social-link svg { width: 22px; height: 22px; }
.socorro-redes-circulos .wp-social-link:hover { transform: none; }
.socorro-redes-circulos .wp-social-link a:hover { background: var(--wp--preset--color--granate); }
.socorro-redes-circulos .wp-social-link a:hover svg { color: #fff; fill: #fff; }

/* --- Página de Sagrados Titulares ------------------------------------- */
[id] { scroll-margin-top: 24px; }
.socorro-entradilla { font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.45; color: var(--wp--preset--color--texto-suave); }
.socorro-saltos { gap: 12px !important; margin-top: 2rem; }
.socorro-saltos p { margin: 0; }
.socorro-saltos a {
	display: inline-block; padding: 12px 22px; border: 1px solid var(--wp--preset--color--granate);
	font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important;
	color: var(--wp--preset--color--granate);
}
.socorro-saltos a:hover { background: var(--wp--preset--color--granate); color: #fff; }

.socorro-ficha .socorro-ficha__foto .wp-block-image { position: relative; margin: 0; }
.socorro-ficha .socorro-ficha__foto .wp-block-image::after {
	content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: 0;
	border: 1px solid var(--wp--preset--color--oro); pointer-events: none;
}
.socorro-ficha--derecha .socorro-ficha__foto .wp-block-image::after { inset: 18px 18px -18px -18px; }
.socorro-ficha .socorro-ficha__foto img { position: relative; z-index: 1; width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center 20%; }
.socorro-ficha h2 { font-size: clamp(2.25rem, 4.2vw, 3.5rem); }
.socorro-ficha.socorro-oscuro h2 { color: #fff; }
.socorro-ficha.socorro-oscuro .is-style-antetitulo { color: var(--wp--preset--color--crema); }
.socorro-ficha .wp-block-column > p:not([class]) { color: var(--wp--preset--color--texto-suave); }
.socorro-ficha.socorro-oscuro .wp-block-column > p:not([class]) { color: var(--wp--preset--color--arena); }
.socorro-destacado {
	font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: clamp(1.375rem, 2.2vw, 1.625rem);
	line-height: 1.4; color: var(--wp--preset--color--granate); padding-left: 20px; border-left: 2px solid var(--wp--preset--color--oro);
}
.socorro-oscuro .socorro-destacado { color: var(--wp--preset--color--crema); }
.socorro-ficha__datos { list-style: none; padding: 0 !important; margin-top: 2rem !important; border-top: 1px solid var(--wp--preset--color--linea); }
.socorro-oscuro .socorro-ficha__datos, .socorro-oscuro .socorro-ficha__datos li { border-color: rgba(233,220,203,.25) !important; }
.socorro-ficha__datos li { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--wp--preset--color--linea); font-size: .9375rem; }
.socorro-ficha__datos li strong {
	min-width: 120px; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
	color: var(--wp--preset--color--granate); padding-top: 2px;
}
.socorro-oscuro .socorro-ficha__datos li strong { color: var(--wp--preset--color--oro); }
@media (max-width: 781px) {
	.socorro-ficha--derecha .wp-block-columns { flex-direction: column-reverse; }
	.socorro-ficha .socorro-ficha__foto .wp-block-image::after { inset: 12px -12px -12px 12px; }
}