/* Hosanna · Contenido — listados con el sistema gráfico del sitio. */

.hsc-filtrable, .hsc-rows, .hsc-meses, .hsc-destacado, .hsc-ultima, .hsc-hoy, .hsc-single {
	font-family: var(--hs-font, 'Inter Tight', sans-serif);
	text-align: left;
}
.hsc-label {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #5C5C5C;
	transition: color 0.3s;
}
.hsc-muted { font-size: 14px; color: #5C5C5C; transition: color 0.3s; }
.hsc-flecha { display: inline-block; transition: transform 0.3s; }
.hsc-vacio-fijo, .hsc-vacio { margin: 0; padding: 32px 0; font-size: 17px; line-height: 1.55; color: #3A3A3A; border-top: 1px solid #111111; }

/* Imágenes: en gris, a color al pasar el mouse (como en el resto del sitio). */
.hsc-media, .hsc-video { position: relative; display: block; overflow: hidden; background: #262626; aspect-ratio: 16 / 9; }
.hsc-media img, .hsc-video img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	transition: filter 0.5s ease, transform 0.6s ease;
}
a:hover .hsc-media img, .hsc-media:hover img, .hsc-video:hover img, .hsc-tile:hover img {
	filter: none;
	transform: scale(1.03);
}

/* Botones */
.hsc-btn {
	display: inline-flex; align-items: center; align-self: flex-start; min-height: 52px; padding: 0 26px;
	border: 1px solid #F1F1F1; color: #F1F1F1; text-decoration: none;
	font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.hsc-btn:hover, .hsc-btn:focus-visible { background: var(--hs-accent, #3964AF); border-color: var(--hs-accent, #3964AF); color: #FFFFFF; }
.hsc-single .hsc-btn { border-color: #111111; background: #111111; color: #FFFFFF; }
.hsc-link {
	display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 44px;
	border-bottom: 1px solid currentColor; color: #111111; text-decoration: none;
	font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.hsc-link--claro { color: #F1F1F1; }
.hsc-link:hover .hsc-flecha, .hsc-row:hover .hsc-flecha { transform: translateX(4px); }

/* Filtros */
.hsc-filtrable { display: flex; flex-direction: column; gap: 28px; }
.hsc-filtros { display: flex; flex-direction: column; gap: 16px; }
.hsc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hsc-chips__label { width: 80px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #4A4A4A; }
.hsc-chip {
	min-height: 44px; padding: 0 18px; border: 1px solid #C4C4C4; border-radius: 0;
	background: transparent; color: #111111; font: inherit; font-size: 14px; cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.hsc-chip:hover { border-color: #111111; }
.hsc-chip[aria-pressed="true"] { border-color: #111111; background: #111111; color: #F1F1F1; }
.hsc-count { margin: 0; font-size: 15px; color: #4A4A4A; }

/* Rejillas */
.hsc-grid { display: grid; }
.hsc-grid--grupos, .hsc-grid--dev {
	grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
	border-top: 1px solid #111111; border-left: 1px solid #DADADA;
}
.hsc-grid--predicas { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 48px 32px; }
.hsc-grid [hidden] { display: none !important; }

/* Tarjetas: se invierten a negro al pasar el mouse */
.hsc-card {
	display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
	padding: 28px; border-right: 1px solid #DADADA; border-bottom: 1px solid #DADADA;
	background: transparent; color: #111111; text-decoration: none;
	transition: background-color 0.35s ease, color 0.35s ease;
}
.hsc-card:hover, .hsc-card:focus-within, a.hsc-card:focus-visible { background: #111111; color: #F1F1F1; }
.hsc-card:hover .hsc-label, .hsc-card:hover .hsc-muted, .hsc-card:hover dt { color: #A0A0A0; }
.hsc-card:hover .hsc-link { color: #F1F1F1; }
.hsc-card__title { margin: 0; font-family: inherit; font-size: clamp(24px, 2.2vw, 30px); font-weight: 900; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; color: inherit; }
.hsc-grupo__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.hsc-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; font-size: 15px; }
.hsc-datos div { display: flex; flex-direction: column; gap: 4px; }
.hsc-datos dt { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #5C5C5C; transition: color 0.3s; }
.hsc-datos dd { margin: 0; }
.hsc-dev { min-height: 260px; }
.hsc-dev__body { display: flex; flex-direction: column; gap: 14px; }

/* Filas (eventos): también se invierten */
.hsc-rows { display: flex; flex-direction: column; border-top: 1px solid #111111; }
.hsc-row {
	display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 24px;
	padding: 28px 16px 28px 0; border-bottom: 1px solid #CFCFCF; color: #111111; text-decoration: none;
	transition: background-color 0.35s ease, color 0.35s ease, padding 0.35s ease;
}
.hsc-row:hover, .hsc-row:focus-visible { background: #111111; color: #F1F1F1; padding-left: 20px; }
.hsc-row:hover .hsc-label, .hsc-row:hover .hsc-row__meta { color: #A0A0A0; }
.hsc-fecha { display: flex; flex-direction: column; gap: 4px; }
.hsc-fecha__dd { font-size: 48px; font-weight: 900; line-height: 0.9; letter-spacing: -0.03em; }
.hsc-row__main { display: flex; flex-direction: column; gap: 6px; }
.hsc-row__title { font-size: clamp(20px, 2.2vw, 30px); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; }
.hsc-row__meta { font-size: 15px; color: #5C5C5C; transition: color 0.3s; }
.hsc-row__cta { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.hsc-meses { display: flex; flex-direction: column; gap: 72px; }
.hsc-mes { display: flex; flex-direction: column; gap: 24px; }
.hsc-mes__title { margin: 0; font-family: inherit; font-size: clamp(36px, 4.6vw, 64px); font-weight: 900; line-height: 0.92; letter-spacing: -0.03em; text-transform: uppercase; color: #111111; }

/* Bloque destacado (fondo oscuro) */
.hsc-destacado { display: flex; flex-wrap: wrap; gap: 40px 48px; color: #F1F1F1; width: 100%; }
.hsc-destacado > .hsc-media, .hsc-destacado > .hsc-video { flex: 999 1 600px; min-width: 0; }
.hsc-destacado__info { flex: 1 1 320px; display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; }
.hsc-destacado .hsc-label { color: #A0A0A0; display: inline-flex; align-items: center; gap: 10px; }
.hsc-fecha__xl { font-size: clamp(64px, 7vw, 104px); font-weight: 900; line-height: 0.8; letter-spacing: -0.04em; }
.hsc-destacado__title { margin: 0; font-family: inherit; font-size: clamp(32px, 3.4vw, 48px); font-weight: 900; line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; color: #F1F1F1; }
.hsc-destacado__by { margin: 0; font-size: 16px; color: #B8B8B8; }
.hsc-destacado__text { margin: 0; font-size: 17px; line-height: 1.55; color: #D8D8D8; }
.hsc-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--hs-accent, #3964AF); }

/* Video con botón de reproducir */
.hsc-video__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 88px; height: 88px; border-radius: 50%; border: 1px solid #F1F1F1;
	background: rgba(17, 17, 17, 0.45); color: #F1F1F1; font-size: 26px; cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
}
.hsc-video__play:hover, .hsc-video__play:focus-visible { background: var(--hs-accent, #3964AF); border-color: var(--hs-accent, #3964AF); }
.hsc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Última prédica (inicio) */
.hsc-ultima { display: flex; flex-wrap: wrap; gap: 40px 48px; color: #F1F1F1; width: 100%; }
.hsc-ultima__main { flex: 999 1 560px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.hsc-ultima__info { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.hsc-ultima__title { margin: 0; font-family: inherit; font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: #F1F1F1; }
.hsc-ultima .hsc-muted, .hsc-ultima .hsc-label { color: #A8A8A8; }
.hsc-drows { flex: 1 1 320px; display: flex; flex-direction: column; border-top: 1px solid #333333; }
.hsc-drow {
	display: flex; flex-direction: column; gap: 6px; padding: 22px 12px 22px 0; border-bottom: 1px solid #333333;
	color: #F1F1F1; text-decoration: none; transition: background-color 0.35s, color 0.35s, padding 0.35s;
}
.hsc-drow:hover, .hsc-drow:focus-visible { background: #F1F1F1; color: #111111; padding-left: 16px; }
.hsc-drow:hover .hsc-muted, .hsc-drow:hover .hsc-label { color: #5C5C5C; }
.hsc-drow__title { font-size: 20px; font-weight: 700; line-height: 1.2; }

/* Miniaturas de prédicas */
.hsc-tile { display: flex; flex-direction: column; gap: 16px; color: #111111; text-decoration: none; }
.hsc-tile__title { font-size: 24px; font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; transition: color 0.2s; }
.hsc-tile:hover .hsc-tile__title { color: var(--hs-accent, #3964AF); }
.hsc-tag { position: absolute; left: 12px; bottom: 12px; padding: 4px 8px; background: #111111; color: #F1F1F1; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

/* Devocional de hoy (fondo oscuro) */
.hsc-hoy { display: flex; flex-wrap: wrap; gap: 48px 80px; color: #F1F1F1; width: 100%; }
.hsc-hoy__head { flex: 1 1 340px; display: flex; flex-direction: column; gap: 24px; }
.hsc-hoy .hsc-label, .hsc-hoy .hsc-muted { color: #A0A0A0; }
.hsc-hoy__title { margin: 0; font-family: inherit; font-size: clamp(40px, 5vw, 76px); font-weight: 900; line-height: 0.9; letter-spacing: -0.035em; text-transform: uppercase; color: #F1F1F1; }
.hsc-hoy__body { flex: 999 1 560px; display: flex; flex-direction: column; gap: 28px; }
.hsc-hoy__texto { font-size: 18px; line-height: 1.65; color: #D8D8D8; }
.hsc-hoy__texto p { margin: 0 0 1em; }
.hsc-cita { margin: 0; padding: 0 0 28px; border: 0; border-bottom: 1px solid #333333; font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; line-height: 1.3; font-style: normal; color: inherit; }
.hsc-cita cite { display: block; margin-top: 14px; font-style: normal; font-size: 13px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: #A0A0A0; }
.hsc-cita--claro { border-bottom-color: #CFCFCF; color: #111111; }
.hsc-orar { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: #1E1E1E; font-size: 17px; line-height: 1.55; }
.hsc-orar--claro { background: #FFFFFF; border: 1px solid #111111; margin-top: 32px; }
.hsc-acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* Vistas individuales */
.hsc-single { font-size: 18px; line-height: 1.7; color: #3A3A3A; }
.hsc-embed { position: relative; aspect-ratio: 16 / 9; margin: 0 0 24px; background: #111111; }
.hsc-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hsc-single-meta { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #5C5C5C; }
.hsc-datos--single { margin: 0 0 32px; padding: 24px 0; border-top: 1px solid #111111; border-bottom: 1px solid #CFCFCF; }

@media (max-width: 760px) {
	.hsc-row { grid-template-columns: 72px minmax(0, 1fr); }
	.hsc-row__cta { grid-column: 2; }
	.hsc-fecha__dd { font-size: 40px; }
	.hsc-chips__label { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.hsc-media img, .hsc-video img, .hsc-row, .hsc-card, .hsc-drow, .hsc-flecha { transition: none; }
}

/* Contenedor que reemplaza al párrafo de Elementor alrededor de cada listado. */
.hsc-slot { display: block; width: 100%; flex: 1 1 100%; min-width: 0; }