/**
 * Design System — Santa Misa Tradicional
 *
 * Inspiración: interior de basílica romana del siglo XIX
 * y misal romano impreso antes del Concilio Vaticano II.
 *
 * PROHIBIDO: blanco puro · negro absoluto · colores saturados · degradados modernos
 * PERMITIDO: pergamino · mármol · madera · bronce · vestiduras litúrgicas apagadas
 */

/* =========================================================
   1. PALETA — materiales sacros, nunca colores de pantalla
   ======================================================== */

:root {
	/* Pergamino y papel de misal */
	--tsm-pergamino:       #e8e0ce;
	--tsm-pergamino-claro: #f0ebe0;
	--tsm-marfil:          #ede6d8;
	--tsm-marmol:          #ded8cc;

	/* Tinta y madera de basílica */
	--tsm-tinta:           #2c2620;
	--tsm-madera:          #3d2e24;
	--tsm-madera-oscura:   #2a211a;

	/* Metales envejecidos */
	--tsm-bronce:          #8b7340;
	--tsm-dorado:          #a8864a;
	--tsm-dorado-apagado:  #c4a876;

	/* Vestiduras litúrgicas — desaturadas */
	--tsm-cardenal:        #5a2832;
	--tsm-cardenal-apagado:#6e3844;

	/* Piedra de basílica */
	--tsm-piedra:          #8c857a;
	--tsm-piedra-claro:    #a39c91;

	/* Funcionales */
	--tsm-fondo:           var(--tsm-pergamino);
	--tsm-texto:           var(--tsm-tinta);
	--tsm-texto-inverso:   var(--tsm-marfil);
	--tsm-enlace:          var(--tsm-cardenal);
	--tsm-enlace-hover:    var(--tsm-bronce);

	/* Bordes — bronce envejecido, no neón */
	--tsm-border-color:    #c4a876;
	--tsm-border-sutil:    1px solid var(--tsm-border-color);
	--tsm-border-marco:    1px solid var(--tsm-dorado-apagado);

	/* =====================================================
	   2. TIPOGRAFÍA — como un misal impreso
	   ===================================================== */

	--tsm-font-titulo:    "Cinzel", Georgia, "Times New Roman", serif;
	--tsm-font-subtitulo: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--tsm-font-texto:     "Source Serif Pro", Georgia, "Times New Roman", serif;

	--tsm-size-titulo-xl: clamp(2.2rem, 5vw, 3.6rem);
	--tsm-size-titulo-lg: clamp(1.7rem, 3.5vw, 2.6rem);
	--tsm-size-titulo-md: clamp(1.25rem, 2vw, 1.55rem);
	--tsm-size-subtitulo: clamp(1.15rem, 2vw, 1.45rem);
	--tsm-size-texto:     1.125rem;
	--tsm-size-texto-sm:  0.9375rem;
	--tsm-size-latin:     0.8125rem;

	--tsm-lh-texto:   1.9;
	--tsm-lh-titulo:  1.3;
	--tsm-ls-titulo:  0.06em;
	--tsm-ls-latin:   0.28em;
	--tsm-ls-nav:     0.14em;

	/* =====================================================
	   3. ESPACIADO — amplitud de nave gótica
	   ===================================================== */

	--tsm-space-2xs: 0.75rem;
	--tsm-space-xs:  1.5rem;
	--tsm-space-sm:  2.5rem;
	--tsm-space-md:  clamp(4rem, 8vw, 6rem);
	--tsm-space-lg:  clamp(6rem, 12vw, 10rem);
	--tsm-space-xl:  clamp(8rem, 15vw, 14rem);
	--tsm-space-2xl: clamp(10rem, 18vw, 18rem);

	--tsm-gap-bloques: 2rem;
	--tsm-ancho-lectura: 680px;
	--tsm-ancho-amplio:  1120px;

	--tsm-radius-minimo: 0;
	--tsm-transicion:      0.85s ease;
	--tsm-transicion-lenta: 1.4s ease;
	--tsm-header-altura:   3.25rem;
}

/* =========================================================
   BASE — página de misal abierta
   ======================================================== */

body {
	font-family: var(--tsm-font-texto);
	font-size: var(--tsm-size-texto);
	line-height: var(--tsm-lh-texto);
	color: var(--tsm-texto);
	background-color: var(--tsm-fondo);
	letter-spacing: 0.012em;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.wp-block-site-title,
.wp-block-post-title {
	font-family: var(--tsm-font-titulo);
	font-weight: 500;
	line-height: var(--tsm-lh-titulo);
	letter-spacing: var(--tsm-ls-titulo);
	color: var(--tsm-cardenal);
}

h1 { font-size: var(--tsm-size-titulo-xl); }
h2 { font-size: var(--tsm-size-titulo-lg); margin-top: 0; }
h3 { font-size: var(--tsm-size-titulo-md); color: var(--tsm-madera); }

.tsm-subtitulo,
.subtitle-sacra,
.hero-subtitle {
	font-family: var(--tsm-font-subtitulo);
	font-size: var(--tsm-size-subtitulo);
	font-style: italic;
	font-weight: 400;
	color: var(--tsm-piedra);
	line-height: 1.65;
}

.tsm-latin,
.texto-latino,
.hero-latin {
	font-family: var(--tsm-font-titulo);
	font-size: var(--tsm-size-latin);
	font-style: normal;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--tsm-ls-latin);
	color: var(--tsm-bronce);
}

/* =========================================================
   MARCOS — filetes de misal, no bordes de app
   ======================================================== */

.tsm-marco,
.marco-clasico {
	border: var(--tsm-border-sutil);
	padding: var(--tsm-space-sm);
	position: relative;
	background-color: var(--tsm-marfil);
}

.tsm-marco::before,
.marco-clasico::before {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1px solid var(--tsm-dorado-apagado);
	pointer-events: none;
	opacity: 0.35;
}

.tsm-marco-dorado {
	border: var(--tsm-border-marco);
}

/* =========================================================
   ICONOGRAFÍA LITÚRGICA
   ======================================================== */

.tsm-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	font-family: var(--tsm-font-titulo);
	font-size: 1.15rem;
	line-height: 1;
	color: var(--tsm-bronce);
	opacity: 0.88;
}

.tsm-icono--grande {
	width: 3rem;
	height: 3rem;
	font-size: 1.45rem;
	margin-bottom: var(--tsm-space-xs);
}

.tsm-icono--cruz::before       { content: "✠"; }
.tsm-icono--custodia::before   { content: "◉"; }
.tsm-icono--caliz::before      { content: "⚶"; }
.tsm-icono--incensario::before { content: "♨"; }
.tsm-icono--rosario::before    { content: "☉"; }
.tsm-icono--biblia::before     { content: "☧"; }
.tsm-icono--llaves::before     { content: "⚿"; }
.tsm-icono--escudo::before     { content: "☨"; }

.card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--tsm-space-xs);
}

/* =========================================================
   BOTONES — placa de madera con filete dorado
   ======================================================== */

.tsm-boton,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	display: inline-block;
	font-family: var(--tsm-font-subtitulo);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--tsm-ls-nav);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tsm-marfil) !important;
	background-color: var(--tsm-madera) !important;
	border: 1px solid var(--tsm-dorado) !important;
	border-radius: var(--tsm-radius-minimo) !important;
	padding: 0.6rem 1.5rem !important;
	box-shadow: none !important;
	transition:
		background-color var(--tsm-transicion),
		border-color var(--tsm-transicion),
		color var(--tsm-transicion);
}

.tsm-boton:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--tsm-madera-oscura) !important;
	border-color: var(--tsm-dorado-apagado) !important;
	color: var(--tsm-pergamino-claro) !important;
	box-shadow: none !important;
	transform: none !important;
}

.tsm-boton--outline,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--tsm-cardenal) !important;
	border: 1px solid var(--tsm-cardenal-apagado) !important;
}

.tsm-boton--outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--tsm-marmol) !important;
	border-color: var(--tsm-dorado-apagado) !important;
	color: var(--tsm-cardenal) !important;
}

/* =========================================================
   HEADER — madera oscura de confesionario, no barra de app
   ======================================================== */

.site-header-wrap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--tsm-header-altura);
	background: transparent;
	border-bottom: 1px solid transparent;
	transition:
		background-color var(--tsm-transicion),
		border-color var(--tsm-transicion);
}

.site-header-wrap .alignwide {
	height: 100%;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	align-items: center;
}

.site-header-wrap .wp-block-site-title {
	font-size: 0.95rem !important;
	margin: 0;
}

.site-header-wrap .wp-block-site-title a {
	color: var(--tsm-marfil);
	text-decoration: none;
	transition: color var(--tsm-transicion);
}

.site-header-wrap.is-scrolled {
	background-color: var(--tsm-madera-oscura);
	border-bottom-color: var(--tsm-dorado-apagado);
	opacity: 0.98;
}

.site-header-wrap.is-solid {
	background-color: var(--tsm-madera-oscura);
	border-bottom-color: var(--tsm-dorado-apagado);
}

.site-header-wrap.is-scrolled .wp-block-site-title a,
.site-header-wrap.is-solid .wp-block-site-title a {
	color: var(--tsm-marfil);
}

/* Navegación — forzar color claro sobre madera (evitar herencia cardenal del theme.json) */
.site-header-wrap .wp-block-navigation .wp-block-navigation-item a,
.site-header-wrap .wp-block-navigation .wp-block-navigation-item__content,
.site-header-wrap .wp-block-navigation a.wp-block-navigation-item__content {
	color: var(--tsm-marfil) !important;
	text-decoration: none;
}

.site-header-wrap .wp-block-navigation .wp-block-navigation-item a:hover,
.site-header-wrap .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-header-wrap .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: var(--tsm-dorado-apagado) !important;
}

.site-header-wrap .wp-block-navigation .wp-block-navigation-item.current-menu-item a,
.site-header-wrap .wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--tsm-dorado-apagado) !important;
}

.site-header-wrap .wp-block-navigation .wp-block-navigation-item a,
.site-header-wrap .wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--tsm-font-subtitulo);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: var(--tsm-ls-nav);
	font-weight: 500;
	transition: color var(--tsm-transicion);
}

.site-header-wrap .donor-button .wp-block-button__link {
	font-size: 0.7rem !important;
	padding: 0.4rem 0.9rem !important;
	background: transparent !important;
	color: var(--tsm-marfil) !important;
	border: 1px solid var(--tsm-dorado-apagado) !important;
}

.site-header-wrap .donor-button .wp-block-button__link:hover {
	color: var(--tsm-dorado-apagado) !important;
	border-color: var(--tsm-dorado-apagado) !important;
	background: transparent !important;
}

/* Botón hamburguesa móvil */
.site-header-wrap .wp-block-navigation__responsive-container-open svg,
.site-header-wrap .wp-block-navigation__responsive-container-close svg {
	fill: var(--tsm-marfil);
}

.site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
.site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--tsm-marfil) !important;
}

body:not(.has-hero-header) {
	padding-top: var(--tsm-header-altura);
}

body:not(.has-hero-header) .site-header-wrap {
	background-color: var(--tsm-madera-oscura);
	border-bottom-color: var(--tsm-dorado-apagado);
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--tsm-madera-oscura) !important;
}

/* =========================================================
   FOOTER — contraportada de misal
   ======================================================== */

.site-footer-misal {
	background-color: var(--tsm-madera-oscura);
	color: var(--tsm-piedra-claro);
	border-top: var(--tsm-border-marco);
	padding-top: var(--tsm-space-lg) !important;
	padding-bottom: var(--tsm-space-md) !important;
	position: relative;
}

.site-footer-misal::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 5%;
	right: 5%;
	height: 1px;
	background-color: var(--tsm-dorado-apagado);
	opacity: 0.25;
}

.site-footer-misal h2,
.site-footer-misal h3,
.site-footer-misal .wp-block-heading {
	font-family: var(--tsm-font-titulo);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tsm-marmol);
	margin-bottom: var(--tsm-space-xs);
}

.site-footer-misal .wp-block-site-title a {
	color: var(--tsm-marfil);
	text-decoration: none;
	font-size: 1rem;
	letter-spacing: var(--tsm-ls-titulo);
}

.site-footer-misal .wp-block-site-tagline {
	font-family: var(--tsm-font-subtitulo);
	font-style: italic;
	font-size: 0.9rem;
	color: var(--tsm-piedra);
}

.site-footer-misal p {
	font-size: var(--tsm-size-texto-sm);
	line-height: 1.75;
	color: var(--tsm-piedra);
}

.site-footer-misal a {
	color: var(--tsm-dorado-apagado);
	text-decoration: none;
	transition: color var(--tsm-transicion);
}

.site-footer-misal a:hover {
	color: var(--tsm-marfil);
}

.footer-latin {
	text-align: center;
	font-family: var(--tsm-font-subtitulo);
	font-style: italic;
	font-size: 0.875rem;
	color: var(--tsm-piedra);
	letter-spacing: 0.06em;
	line-height: 2;
	margin: var(--tsm-space-sm) 0;
}

.footer-latin em {
	font-style: normal;
	font-family: var(--tsm-font-titulo);
	font-size: 0.75rem;
	letter-spacing: var(--tsm-ls-latin);
	text-transform: uppercase;
	color: var(--tsm-bronce);
	display: block;
	margin-bottom: 0.25rem;
}

.footer-amdg {
	text-align: center;
	font-family: var(--tsm-font-subtitulo);
	font-style: italic;
	font-size: 0.8125rem;
	color: var(--tsm-piedra);
	letter-spacing: 0.08em;
	margin-top: var(--tsm-space-sm);
	padding-top: var(--tsm-space-xs);
	border-top: var(--tsm-border-sutil);
}

/* =========================================================
   SECCIONES · ORNAMENTOS
   ======================================================== */

.seccion-contemplativa {
	padding-top: var(--tsm-space-lg);
	padding-bottom: var(--tsm-space-lg);
}

.intro-sacra {
	text-align: center;
	max-width: var(--tsm-ancho-lectura);
	margin: 0 auto;
}

.ornament {
	text-align: center;
	padding: var(--tsm-space-sm) 0;
	color: var(--tsm-bronce);
}

.ornament::before,
.ornament::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: clamp(40px, 8vw, 90px);
	height: 1px;
	background-color: var(--tsm-dorado-apagado);
	opacity: 0.55;
}

.ornament::before { margin-right: 14px; }
.ornament::after  { margin-left: 14px; }

.ornament .glyph {
	font-family: var(--tsm-font-titulo);
	font-size: 0.85rem;
}

.tarjetas-liturgicas .wp-block-column,
.card-liturgica {
	background-color: var(--tsm-marfil);
	border: var(--tsm-border-sutil);
	padding: var(--tsm-space-sm) var(--tsm-space-xs);
	transition: border-color var(--tsm-transicion);
}

.tarjetas-liturgicas .wp-block-column:hover,
.card-liturgica:hover {
	border-color: var(--tsm-dorado);
	transform: none;
	box-shadow: none;
}

.card-liturgica p {
	text-align: center;
	font-size: var(--tsm-size-texto-sm);
	color: var(--tsm-piedra);
	line-height: 1.75;
}

/* =========================================================
   HERO — penumbra de basílica, overlay sólido cálido
   ======================================================== */

.hero-santa-misa,
.hero-inicio {
	color: var(--tsm-marfil);
}

.hero-santa-misa .wp-block-cover__background,
.hero-inicio .wp-block-cover__background {
	background-color: var(--tsm-madera-oscura) !important;
	opacity: 0.58 !important;
}

.hero-title,
.hero-santa-misa h1,
.hero-invocation {
	color: var(--tsm-marfil);
}

.hero-subtitle {
	color: var(--tsm-marmol);
}

.hero-descripcion {
	font-size: var(--tsm-size-texto-sm);
	color: var(--tsm-marmol);
	max-width: 560px;
	margin: 0 auto;
	line-height: var(--tsm-lh-texto);
}

/* =========================================================
   ENLACES · CONTENIDO · ACCESIBILIDAD
   ======================================================== */

a {
	color: var(--tsm-enlace);
	transition: color var(--tsm-transicion);
}

a:hover {
	color: var(--tsm-enlace-hover);
}

.wp-block-post-content blockquote {
	border-left: 2px solid var(--tsm-dorado-apagado);
	padding: 0.5rem 0 0.5rem 1.75rem;
	margin: var(--tsm-space-sm) 0;
	font-family: var(--tsm-font-subtitulo);
	font-size: 1.2rem;
	font-style: italic;
	color: var(--tsm-piedra);
	background-color: transparent;
}

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 1px solid var(--tsm-bronce);
	outline-offset: 4px;
}

/* =========================================================
   ANIMACIONES — solo fade y zoom imperceptible
   ======================================================== */

@keyframes tsmFadeSuave {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes tsmZoomLento {
	from { transform: scale(1); }
	to   { transform: scale(1.02); }
}

.reveal       { opacity: 0; }
.reveal-lento { opacity: 0; }

.reveal.is-visible       { animation: tsmFadeSuave 1.4s ease forwards; }
.reveal-lento.is-visible { animation: tsmFadeSuave 2s ease forwards; }

.hero-santa-misa .wp-block-cover__image-background,
.hero-inicio .wp-block-cover__image-background {
	animation: tsmZoomLento 35s ease-in-out infinite alternate;
	transform-origin: center center;
}

@media (prefers-reduced-motion: reduce) {
	.reveal,
	.reveal-lento,
	.hero-santa-misa .wp-block-cover__image-background,
	.hero-inicio .wp-block-cover__image-background {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	* { transition: none !important; }
}

@media (max-width: 781px) {
	.site-header-wrap .alignwide {
		flex-wrap: wrap;
		justify-content: center !important;
		gap: 0.5rem;
		height: auto;
		min-height: var(--tsm-header-altura);
		padding: 0.5rem 0 !important;
	}
}