/*
 * Macarena — Horarios
 * Bloque resumen de la home y página completa "Horarios y misas", con la
 * misma paleta clásica que el resto de plugins de la Hermandad. Todo bajo
 * `.mh-scope` para no chocar con estilos globales de Divi.
 */

.mh-scope {
	--mh-ink: #1b1a17;
	--mh-ink-72: rgba(27, 26, 23, .72);
	--mh-ink-55: rgba(27, 26, 23, .55);
	--mh-ink-45: rgba(27, 26, 23, .45);
	--mh-ink-12: rgba(27, 26, 23, .12);
	--mh-ivory: #f4f0e7;
	--mh-green-deep: #0e2a20;
	--mh-ivory-16: rgba(244, 240, 231, .16);
	--mh-ivory-45: rgba(244, 240, 231, .45);
	--mh-ivory-55: rgba(244, 240, 231, .55);
	--mh-ivory-72: rgba(244, 240, 231, .72);
	--mh-ivory-82: rgba(244, 240, 231, .82);
	--mh-gold: #b68235;
	--mh-gold-dark: #7d5411;
	--mh-gold-light: #d8b26a;
	--mh-font-heading: "Cormorant Garamond", Georgia, serif;
	--mh-font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;

	font-family: var(--mh-font-body);
	color: var(--mh-ink);
}

.mh-scope *, .mh-scope *::before, .mh-scope *::after { box-sizing: border-box; }
.mh-scope a { text-decoration: none; }
.mh-scope :focus-visible { outline: 2px solid var(--mh-gold); outline-offset: 2px; }

/* ————————————————————————— Bloque "hoy" (home) ————————————————————————— */

/*
 * El bloque de la home va sobre la sección "Hoy en la Macarena" del
 * diseño, que tiene fondo verde oscuro (#0e2a20) — por eso este bloque,
 * a diferencia de la página de horarios (fondo claro), usa texto marfil y
 * dorado claro en vez de tinta oscura y dorado oscuro. Si algún día se
 * coloca sobre un fondo claro habrá que revisar esta paleta.
 */
.mh-hoy { color: var(--mh-ivory); }

.mh-hoy__fecha {
	margin: 0 0 14px;
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mh-ivory-55);
}

.mh-hoy__punto { margin: 0 6px; }

/* Selector compuesto (las dos clases van juntas en el span, ver
   MH_Render::bloque_hoy()) para que gane a la regla de más abajo pensada
   para la píldora de la página de horarios, con fondo claro. */
.mh-hoy__estado.mh-estado--abierta { color: var(--mh-gold-light); }
.mh-hoy__estado.mh-estado--cerrada { color: var(--mh-ivory-45); }

.mh-hoy__card {
	border: 1px solid rgba(244, 240, 231, .18);
	padding: clamp(20px, 3vw, 32px);
	display: grid;
	gap: 4px;
}

.mh-hoy__eyebrow {
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: rgba(216, 178, 106, .85);
	margin: 0 0 4px;
}

.mh-hoy__temporada {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mh-ivory-45);
	margin: 0 0 14px;
}

.mh-hoy__filas { display: grid; }

.mh-hoy__fila {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 16px;
	margin: 0;
	padding: 10px 0;
	border-top: 1px solid var(--mh-ivory-16);
	font-size: 13px;
	color: var(--mh-ivory-82);
}

.mh-hoy__fila span:first-child { letter-spacing: .02em; }
.mh-hoy__fila span:last-child { font-variant-numeric: tabular-nums; color: var(--mh-ivory); text-align: right; }

.mh-hoy__btn {
	display: inline-block;
	margin-top: 18px;
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mh-gold-light);
	border-bottom: 1px solid rgba(216, 178, 106, .4);
	padding-bottom: 3px;
	justify-self: start;
	transition: color .2s ease, border-color .2s ease;
}

.mh-hoy__btn:hover, .mh-hoy__btn:focus-visible {
	color: var(--mh-ivory);
	border-color: var(--mh-ivory);
}

/* ————————————————————————— Página de horarios ————————————————————————— */

.mh-hero { padding: clamp(24px, 4vw, 48px) 0; }

.mh-eyebrow {
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--mh-gold-dark);
	margin: 0 0 22px;
}

.mh-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: end;
}

@media ( max-width: 780px ) {
	.mh-hero__grid { grid-template-columns: 1fr; }
}

.mh-hero__titulo {
	font-family: var(--mh-font-heading);
	font-weight: 400;
	font-size: clamp(40px, 7.5vw, 120px);
	line-height: .9;
	margin: 0;
	letter-spacing: -.02em;
}

.mh-estado-box {
	border: 1px solid var(--mh-ink-12);
	padding: clamp(18px, 2.4vw, 28px);
	display: grid;
	gap: 14px;
	align-content: start;
}

.mh-estado-pill {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.mh-estado-punto { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.mh-estado--abierta { color: var(--mh-gold-dark); }
.mh-estado--abierta .mh-estado-punto { background: var(--mh-gold-dark); }
.mh-estado--cerrada { color: var(--mh-ink-45); }
.mh-estado--cerrada .mh-estado-punto { background: var(--mh-ink-45); }

.mh-estado-temporada {
	margin: 0;
	font-family: var(--mh-font-heading);
	font-size: clamp(20px, 2.2vw, 28px);
	line-height: 1.15;
}

.mh-estado-vigencia {
	margin: 0;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mh-ink-55);
}

.mh-estado-hoy {
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--mh-ink-12);
	font-size: 13px;
	line-height: 1.8;
	color: var(--mh-ink-72);
}

.mh-intro {
	margin: clamp(28px, 4vw, 48px) 0 0;
	max-width: 70ch;
	font-size: 15px;
	line-height: 1.9;
	color: var(--mh-ink-72);
}

.mh-section { padding: clamp(40px, 6vw, 90px) 0; }

.mh-section__head {
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding-bottom: 16px;
	margin-bottom: clamp(8px, 1.4vw, 14px);
	border-bottom: 1px solid var(--mh-ink-12);
}

.mh-section__head h2 {
	font-family: var(--mh-font-heading);
	font-weight: 400;
	font-size: clamp(24px, 3.2vw, 42px);
	margin: 0;
	line-height: 1.05;
}

.mh-section__num {
	font-family: var(--mh-font-heading);
	font-size: 13px;
	letter-spacing: .2em;
	color: var(--mh-gold);
}

/* Sección "Horarios de misa": fondo oscuro, igual que el resto de bloques
   destacados de la Hermandad. */
.mh-section--dark {
	background: var(--mh-green-deep);
	color: var(--mh-ivory);
	padding-left: clamp(20px, 5vw, 80px);
	padding-right: clamp(20px, 5vw, 80px);
	margin: clamp(40px, 6vw, 90px) calc(clamp(20px, 5vw, 80px) * -1);
}

.mh-section--dark .mh-section__head { border-bottom-color: var(--mh-ivory-16); }
.mh-section--dark .mh-section__num { color: var(--mh-gold-light); }
/* El título ("Horarios de misa") necesita su propio color explícito en
   vez de heredar el marfil de ".mh-section--dark": un h2 sin color propio
   pierde frente a cualquier regla que sí lo tenga puesto directamente
   sobre él (como el color oscuro que Divi aplica por defecto a los
   títulos), por muy poco "peso" que tenga esa regla. */
.mh-section--dark .mh-section__head h2 { color: var(--mh-ivory); }

/* — Tablas Basílica / Museo — */

.mh-tabla__fila {
	display: grid;
	grid-template-columns: minmax(140px, .9fr) 1fr 1fr;
	gap: 8px clamp(20px, 3vw, 48px);
	padding: clamp(16px, 2vw, 24px) 0;
	border-bottom: 1px solid var(--mh-ink-12);
	align-items: baseline;
}

@media ( max-width: 700px ) {
	.mh-tabla__fila { grid-template-columns: 1fr; }
}

.mh-tabla__grupo {
	margin: 0;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mh-ink-55);
}

.mh-tabla__rango { margin: 0; display: flex; align-items: baseline; gap: 12px; }

.mh-tabla__rango-label {
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mh-ink-45);
	min-width: 66px;
}

.mh-tabla__rango-valor {
	font-family: var(--mh-font-heading);
	font-size: clamp(20px, 2.2vw, 30px);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.mh-nota { margin: clamp(20px, 3vw, 32px) 0 0; max-width: 60ch; font-size: 13px; line-height: 1.85; color: var(--mh-ivory-72); }
.mh-nota--clara { color: var(--mh-ink-55); }

/* — Horarios de misa — */

.mh-fila-misa {
	display: grid;
	grid-template-columns: minmax(150px, .7fr) 1fr;
	gap: 14px clamp(20px, 3vw, 48px);
	padding: clamp(18px, 2.4vw, 30px) 0;
	border-bottom: 1px solid var(--mh-ivory-16);
	align-items: baseline;
}

@media ( max-width: 700px ) {
	.mh-fila-misa { grid-template-columns: 1fr; }
}

.mh-fila-misa__grupo {
	margin: 0;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mh-ivory-72);
}

.mh-fila-misa__horas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px clamp(20px, 3vw, 44px);
	align-items: baseline;
}

.mh-hora-misa { margin: 0; display: grid; gap: 5px; justify-items: start; }

.mh-hora-misa__num {
	font-family: var(--mh-font-heading);
	font-size: clamp(26px, 3.2vw, 42px);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--mh-ivory);
}

/* Misa suspendida temporalmente: no se quita, se atenúa y se tacha (más
   accesible que borrarla del todo, y dice cuándo vuelve). */
.mh-hora-misa__num--off {
	color: rgba(244, 240, 231, .35);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.mh-hora-misa__nota {
	font-size: 9.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mh-gold-light);
}

/* — Cultos y atención — */

.mh-servicios {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0 clamp(24px, 3vw, 56px);
}

.mh-servicio {
	padding: clamp(18px, 2.4vw, 28px) 0;
	border-bottom: 1px solid var(--mh-ink-12);
	display: grid;
	gap: 9px;
	align-content: start;
}

.mh-servicio__etiqueta { margin: 0; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mh-gold-dark); }
.mh-servicio__titulo { margin: 0; font-family: var(--mh-font-heading); font-size: clamp(19px, 2vw, 26px); line-height: 1.15; }
.mh-servicio__valor { margin: 0; font-family: var(--mh-font-heading); font-size: clamp(22px, 2.4vw, 32px); line-height: 1; font-variant-numeric: tabular-nums; color: var(--mh-ink); }
.mh-servicio__valor--off { color: var(--mh-ink-45); text-decoration: line-through; text-decoration-thickness: 1px; }
.mh-servicio__detalle { margin: 0; font-size: 13px; line-height: 1.8; color: var(--mh-ink-72); }

.mh-botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 4vw, 48px); }

.mh-btn {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 14px 22px;
	transition: background-color .2s ease, opacity .2s ease;
}

.mh-btn--primario { background: var(--mh-ink); color: var(--mh-ivory); }
.mh-btn--primario:hover, .mh-btn--primario:focus-visible { opacity: .85; }

.mh-btn--secundario { color: var(--mh-gold-dark); border: 1px solid rgba(125, 84, 17, .4); }
.mh-btn--secundario:hover, .mh-btn--secundario:focus-visible { background: rgba(182, 130, 53, .12); }

@media ( prefers-reduced-motion: reduce ) {
	.mh-hoy__btn, .mh-btn { transition: none !important; }
}