/*
Theme Name:  Santa Biblia
Theme URI:   https://lasantabiblia.info/
Description: Tema hijo de White Hat Canvas para lasantabiblia.info — la identidad de la app Santa Biblia (crema, oro y serifa Literata) llevada a la web. El aspecto fino se trabaja con el Kit de Elementor; aquí viven solo los cimientos: paleta, tipografías y los ajustes de seguridad y rendimiento.
Author:      White Hat Mgmt LLC
Template:    white-hat-canvas
Version:     1.7.5
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: santa-biblia
*/

/* ============================================================================
   LOS TOKENS DE LA MARCA
   ============================================================================
   Variables CSS disponibles en TODO el sitio (Elementor incluido: en cualquier
   campo de color se puede escribir var(--sb-crema)). Son los mismos colores
   de la app, para que web y app se sientan la misma casa.
   ========================================================================== */
:root {
	/* PALETA DE LA MARCA, tomada del LOGOTIPO: vino, oro y crema.
	   Los cuatro colores PRINCIPALES (vino, oro, crema, tinta) se pueden cambiar
	   sin tocar código desde «Apariencia → Personalizar → Colores de la marca».
	   functions.php reimprime allí los valores elegidos y recalcula solo los
	   tonos derivados (-claro/-honda/-suave). Lo de aquí es el valor de fábrica. */
	--sb-crema: #faf6ec;       /* FONDO: el papel, fondos grandes */
	--sb-crema-honda: #f0e9d9; /* franjas alternas (derivado de crema) */
	--sb-tinta: #2a2216;       /* TEXTO principal */
	--sb-tinta-suave: #75684f; /* texto secundario (derivado de tinta) */
	--sb-oro: #9a7b3f;         /* ACENTO: títulos, iconos, enlaces */
	--sb-oro-claro: #c9a55e;   /* oro sobre fondos oscuros (derivado de oro) */
	--sb-vino: #5a1220;        /* PRINCIPAL: el vino del logotipo — pie de página, marca, contraste */
	--sb-vino-claro: #871b30;  /* vino más claro (derivado de vino) */
	--sb-blanco: #ffffff;      /* tarjetas */
}

/* Base tipográfica serena: la serifa para lo que se lee despacio (títulos,
   citas de Escritura), la sans para la interfaz. */
body {
	background: var(--sb-crema);
	color: var(--sb-tinta);
	font-family: 'Inter', system-ui, sans-serif;
}

h1, h2, h3, blockquote {
	font-family: 'Literata', Georgia, serif;
}

/* Las citas bíblicas dentro del contenido: papel cálido y filete dorado,
   como un marcador de tela en una Biblia de verdad. */
blockquote {
	border-inline-start: 3px solid var(--sb-oro);
	background: var(--sb-crema-honda);
	padding: 18px 24px;
	border-radius: 0 12px 12px 0;
	font-style: normal;
}

/* Enlaces en oro, discretos hasta que los tocas. */
a { color: var(--sb-oro); }
a:hover { color: var(--sb-tinta); }

/* ============================================================================
   CABECERA CON MENÚ
   ============================================================================
   Barra superior serena en crema, con la marca a la izquierda y el menú a la
   derecha. En móvil el menú se pliega tras un botón "hamburguesa".
   ========================================================================== */
.sb-header {
	position: sticky;            /* la cabecera acompaña al hacer scroll */
	top: 0;
	z-index: 1000;
	background: rgba(250, 246, 236, .92);
	backdrop-filter: saturate(120%) blur(8px);   /* efecto "vidrio esmerilado" */
	border-bottom: 1px solid #ece1c8;
}
.sb-header-inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
/* --- La marca --- */
.sb-brand-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}
.sb-brand-cruz { color: var(--sb-oro); font-size: 1.35rem; line-height: 1; }
.sb-brand-mark { display: block; flex: none; }
/* En móvil, un punto menos de logo para que quepa el nombre. */
@media (max-width: 420px) { .sb-brand-nombre { font-size: 1.2rem; } }
.sb-brand-nombre {
	font-family: 'Literata', Georgia, serif;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--sb-vino);
	letter-spacing: .2px;
}
.sb-brand-link:hover .sb-brand-nombre { color: var(--sb-oro); }
/* Si se sube un logotipo, lo dejamos a una altura cómoda. */
.sb-header .custom-logo { max-height: 60px; width: auto; display: block; }

/* --- El menú --- */
.sb-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}
.sb-menu li { margin: 0; }
.sb-menu a {
	display: block;
	padding: 9px 15px;
	border-radius: 999px;
	color: var(--sb-tinta);
	text-decoration: none;
	font-weight: 500;
	font-size: .98rem;
	transition: background .16s ease, color .16s ease;
}
.sb-menu a:hover { background: var(--sb-crema-honda); color: var(--sb-oro); }
/* El enlace de la página actual queda resaltado en oro suave. */
.sb-menu .activo > a,
.sb-menu .current-menu-item > a {
	background: var(--sb-oro);
	color: #fff;
}

/* --- El botón hamburguesa y la casilla oculta (menú móvil sin JS) --- */
.sb-nav-toggle { display: none; }              /* la casilla nunca se ve */
.sb-burger {
	display: none;                             /* oculto en escritorio */
	flex-direction: column;
	gap: 5px;
	width: 44px; height: 44px;
	padding: 11px;
	border-radius: 12px;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.sb-burger span {
	display: block;
	width: 22px; height: 2px;
	background: var(--sb-vino);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

@media (max-width: 820px) {
	.sb-burger { display: flex; }
	.sb-nav {
		position: absolute;
		left: 0; right: 0;
		top: 100%;
		background: var(--sb-crema);
		border-bottom: 1px solid #ece1c8;
		box-shadow: 0 14px 24px rgba(24, 24, 48, .08);
		max-height: 0;                         /* plegado por defecto */
		overflow: hidden;
		transition: max-height .28s ease;
	}
	/* Al marcar la casilla (tocar el botón), el menú se despliega. */
	.sb-nav-toggle:checked ~ .sb-nav { max-height: 70vh; }
	.sb-menu { flex-direction: column; align-items: stretch; padding: 8px 14px; gap: 2px; }
	.sb-menu a { padding: 12px 14px; border-radius: 12px; }
	/* La hamburguesa se transforma en una "X" cuando el menú está abierto. */
	.sb-nav-toggle:checked ~ .sb-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.sb-nav-toggle:checked ~ .sb-burger span:nth-child(2) { opacity: 0; }
	.sb-nav-toggle:checked ~ .sb-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.sb-header-inner { position: relative; }
}

/* ============================================================================
   PIE DE PÁGINA
   ============================================================================
   Fondo navy profundo (el contraste de la marca), con columnas de enlaces y la
   línea de autoría de White Hat Mgmt LLC.
   ========================================================================== */
.sb-footer {
	margin-top: 64px;
	background: var(--sb-vino);
	color: #e9dece;
}
.sb-footer-inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 56px 20px 32px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 32px;
}
.sb-footer-brand { max-width: 320px; }
.sb-footer-cruz { color: var(--sb-oro-claro); font-size: 1.3rem; }
.sb-footer-nombre {
	font-family: 'Literata', Georgia, serif;
	font-size: 1.35rem;
	color: #fff;
	margin-inline-start: 8px;
}
.sb-footer-lema { color: #cdb8a2; margin: 12px 0 0; line-height: 1.6; }
.sb-footer-tit {
	font-family: 'Inter', sans-serif;
	font-size: .78rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--sb-oro-claro);
	margin: 0 0 14px;
}
.sb-footer-col ul { list-style: none; margin: 0; padding: 0; }
.sb-footer-col li { margin: 0 0 10px; }
.sb-footer-col a {
	color: #e9dece;
	text-decoration: none;
	transition: color .16s ease;
}
.sb-footer-col a:hover { color: var(--sb-oro-claro); }
/* --- Línea legal --- */
.sb-footer-legal {
	border-top: 1px solid rgba(255, 255, 255, .1);
	text-align: center;
	padding: 22px 20px 34px;
	color: #c6b09a;
	font-size: .88rem;
}
.sb-footer-legal strong { color: #fff; font-weight: 600; }
.sb-footer-nota { margin: 6px 0 0; font-size: .82rem; color: #b19a85; }
.sb-footer-legal a { color: var(--sb-oro-claro); text-decoration: underline; }
.sb-footer-legal a:hover { color: #fff; }

@media (max-width: 720px) {
	.sb-footer-inner { grid-template-columns: 1fr 1fr; }
	.sb-footer-brand { grid-column: 1 / -1; }
}

/* ============================================================================
   BLOG Y NOTICIAS RELIGIOSAS
   ============================================================================
   Las entradas usan WordPress nativo; estas reglas solo les dan la identidad
   visual del sitio. La rejilla decide por ancho disponible, no por dispositivo,
   por lo que también funciona en un iPad con la ventana dividida.
   ========================================================================== */
.sb-blog-main,
.sb-single-main {
	width: min(100% - 32px, 1140px);
	margin-inline: auto;
	padding-block: clamp(28px, 5vw, 64px);
}
.sb-blog-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(30px, 6vw, 72px);
	border: 1px solid color-mix(in srgb, var(--sb-oro) 28%, transparent);
	border-radius: 28px;
	background:
		radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--sb-oro) 20%, transparent), transparent 32%),
		linear-gradient(145deg, var(--sb-blanco), var(--sb-crema-honda));
	box-shadow: 0 22px 60px rgba(42, 34, 22, .08);
}
.sb-blog-hero::after {
	/* La cruz decorativa se dibuja con bordes CSS para que no dependa de una
	   fuente de emoji y conserve la misma forma en Windows, Android e iOS. */
	content: '';
	position: absolute;
	inset-inline-end: clamp(18px, 5vw, 72px);
	top: 16%;
	width: clamp(30px, 6vw, 72px);
	height: clamp(30px, 6vw, 72px);
	border-block: clamp(3px, .45vw, 6px) solid var(--sb-oro);
	border-inline: clamp(3px, .45vw, 6px) solid var(--sb-oro);
	border-radius: 48% 52% 48% 52%;
	transform: rotate(45deg);
	opacity: .22;
}
.sb-blog-hero-compact { padding-block: clamp(26px, 4vw, 48px); }
.sb-blog-eyebrow {
	margin: 0 0 10px;
	color: var(--sb-vino);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.sb-blog-eyebrow a { color: inherit; }
.sb-blog-hero h1 {
	max-width: 780px;
	margin: 0;
	color: var(--sb-vino);
	font-size: clamp(2rem, 5vw, 4rem);
	line-height: 1.08;
}
.sb-blog-hero > p:last-child,
.sb-blog-archive-description {
	max-width: 720px;
	margin: 18px 0 0;
	color: var(--sb-tinta-suave);
	font-size: clamp(1rem, 2vw, 1.18rem);
	line-height: 1.7;
}
.sb-blog-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block: 28px 34px;
}
.sb-blog-filter {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid color-mix(in srgb, var(--sb-oro) 35%, transparent);
	border-radius: 999px;
	background: var(--sb-blanco);
	color: var(--sb-tinta);
	font-weight: 600;
	text-decoration: none;
}
.sb-blog-filter:hover,
.sb-blog-filter:focus-visible,
.sb-blog-filter.is-current {
	border-color: var(--sb-vino);
	background: var(--sb-vino);
	color: #fff;
}
.sb-blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
	gap: clamp(18px, 3vw, 30px);
	margin-top: 34px;
}
.sb-post-card {
	display: flex;
	min-width: 0;
	overflow: hidden;
	flex-direction: column;
	border: 1px solid color-mix(in srgb, var(--sb-tinta) 10%, transparent);
	border-radius: 20px;
	background: var(--sb-blanco);
	box-shadow: 0 12px 36px rgba(42, 34, 22, .07);
	transition: transform .18s ease, box-shadow .18s ease;
}
.sb-post-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 44px rgba(42, 34, 22, .12);
}
.sb-post-card-media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--sb-crema-honda);
}
.sb-post-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .28s ease;
}
.sb-post-card:hover .sb-post-card-media img { transform: scale(1.025); }
.sb-post-card-fallback {
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	background:
		radial-gradient(circle, rgba(154, 123, 63, .16), transparent 52%),
		linear-gradient(145deg, var(--sb-crema), var(--sb-crema-honda));
}
.sb-post-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 22px;
}
.sb-post-card-categories,
.sb-single-categories {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.sb-post-card-categories a,
.sb-single-categories a { color: var(--sb-vino); text-decoration: none; }
.sb-post-card-title {
	margin: 10px 0 8px;
	font-size: clamp(1.32rem, 3vw, 1.65rem);
	line-height: 1.25;
}
.sb-post-card-title a { color: var(--sb-tinta); text-decoration: none; }
.sb-post-card-title a:hover { color: var(--sb-vino); }
.sb-post-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	color: var(--sb-tinta-suave);
	font-size: .84rem;
}
.sb-post-card-excerpt { color: var(--sb-tinta-suave); line-height: 1.65; }
.sb-post-card-excerpt p { margin-block: 14px; }
.sb-post-card-link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	margin-top: auto;
	padding-top: 8px;
	font-weight: 700;
	text-decoration: none;
}
.sb-blog-empty {
	max-width: 680px;
	margin: 42px auto 0;
	padding: clamp(30px, 7vw, 64px);
	border: 1px dashed var(--sb-oro);
	border-radius: 22px;
	text-align: center;
}
.sb-blog-empty h2 { margin: 18px 0 8px; color: var(--sb-vino); }
.sb-blog-empty p { margin: 0; color: var(--sb-tinta-suave); line-height: 1.7; }
.sb-blog-pagination { margin-top: 42px; }
.sb-blog-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sb-blog-pagination .page-numbers {
	display: grid;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 12px;
	place-items: center;
	border-radius: 10px;
	background: var(--sb-blanco);
	text-decoration: none;
}
.sb-blog-pagination .current { background: var(--sb-vino); color: #fff; }

/* La entrada completa limita las líneas a un ancho cómodo. Los bloques anchos
   de Gutenberg pueden crecer, pero nunca fuerzan desplazamiento horizontal. */
.sb-single-main { width: min(100% - 32px, 920px); }
.sb-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 30px;
	color: var(--sb-tinta-suave);
	font-size: .9rem;
}
.sb-single-header { max-width: 780px; margin-inline: auto; text-align: center; }
.sb-single-header h1 {
	margin: 12px 0;
	color: var(--sb-vino);
	font-size: clamp(2rem, 6vw, 4.2rem);
	line-height: 1.08;
}
.sb-single-meta { color: var(--sb-tinta-suave); }
.sb-single-featured { margin: 34px 0; }
.sb-single-featured img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 22px;
}
.sb-single-featured figcaption {
	margin-top: 9px;
	color: var(--sb-tinta-suave);
	font-size: .85rem;
	text-align: center;
}
.sb-single-content {
	max-width: 760px;
	margin-inline: auto;
	font-family: 'Literata', Georgia, serif;
	font-size: clamp(1.05rem, 2vw, 1.18rem);
	line-height: 1.85;
}
.sb-single-content > * { max-width: 100%; }
.sb-single-content h2,
.sb-single-content h3 { margin-top: 1.8em; color: var(--sb-vino); line-height: 1.25; }
.sb-single-content img { max-width: 100%; height: auto; }
.sb-single-content a { text-decoration-thickness: .08em; text-underline-offset: .15em; }
.sb-single-tags { max-width: 760px; margin: 34px auto 0; }
.sb-single-tags a {
	display: inline-flex;
	margin: 4px;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--sb-crema-honda);
	text-decoration: none;
}
.sb-post-navigation {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 52px;
	padding-top: 28px;
	border-top: 1px solid color-mix(in srgb, var(--sb-tinta) 16%, transparent);
}
.sb-post-navigation > div:last-child { text-align: end; }
.sb-post-navigation a { font-weight: 700; text-decoration: none; }

@media (max-width: 560px) {
	.sb-blog-main,
	.sb-single-main { width: min(100% - 24px, 1140px); }
	.sb-blog-hero { border-radius: 20px; }
	.sb-blog-hero::after { display: none; }
	.sb-post-navigation { grid-template-columns: 1fr; }
	.sb-post-navigation > div:last-child { text-align: start; }
}

@media (prefers-reduced-motion: reduce) {
	.sb-post-card,
	.sb-post-card-media img { transition: none; }
}

/* ============================================================================
   ENTRADAS: LEGIBILIDAD DEL TEXTO LARGO
   ----------------------------------------------------------------------------
   Añadido en la v1.7.0. El artículo tenía estilos mínimos: títulos e imágenes.
   Faltaba todo lo que aparece de verdad en un texto largo — citas, listas,
   tablas, código, separadores — y sin estilo propio esos elementos salen con
   la letra por defecto del navegador en mitad de una página compuesta con
   serifa y crema.
   ========================================================================== */

/* La MEDIDA: 68 caracteres por línea. Es el ancho con el que el ojo vuelve al
   principio de la línea siguiente sin perderse. Más ancho cansa la vista; más
   estrecho corta el ritmo de lectura. */
.sb-single-content { max-width: 68ch; }

.sb-single-content p { margin: 0 0 1.15em; }
.sb-single-content h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.85rem); }
.sb-single-content h3 { font-size: clamp(1.18rem, 1rem + .7vw, 1.4rem); }
.sb-single-content h4 { margin-top: 1.6em; color: var(--sb-vino); font-size: 1.06rem; }

/* Listas: la sangría de fábrica del navegador las pega al margen. */
.sb-single-content ul,
.sb-single-content ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.sb-single-content li { margin-bottom: .45em; }
.sb-single-content li > ul,
.sb-single-content li > ol { margin-top: .45em; }

/* Cita: barra de color a la izquierda en vez de comillas gigantes, que en un
   sitio de textos bíblicos se confundirían con la cita de un versículo. */
.sb-single-content blockquote {
	margin: 1.6em 0;
	padding: .2em 0 .2em 1.2em;
	border-left: 3px solid var(--sb-oro);
	color: var(--sb-tinta-suave);
	font-style: italic;
}
.sb-single-content blockquote p:last-child { margin-bottom: 0; }

/* Código: se desborda en horizontal DENTRO de su caja. Sin esto, una línea
   larga ensancha la página entera y aparece barra horizontal en el móvil. */
.sb-single-content pre {
	overflow-x: auto;
	padding: 14px 16px;
	border-radius: 10px;
	background: rgba(0, 0, 0, .05);
	font-size: .88em;
	line-height: 1.5;
}
.sb-single-content code { font-size: .9em; }
.sb-single-content :not(pre) > code {
	padding: .12em .38em;
	border-radius: 5px;
	background: rgba(0, 0, 0, .06);
}

/* Tablas: mismo problema que el código, misma solución. */
.sb-single-content .wp-block-table,
.sb-single-content table { display: block; overflow-x: auto; max-width: 100%; }
.sb-single-content table { border-collapse: collapse; font-size: .94em; }
.sb-single-content th,
.sb-single-content td { padding: 8px 12px; border: 1px solid rgba(0, 0, 0, .12); text-align: left; }
.sb-single-content th { background: rgba(0, 0, 0, .04); }

.sb-single-content hr {
	margin: 2.4em auto;
	width: 90px;
	border: 0;
	border-top: 2px solid var(--sb-oro);
}

/* Las figuras SÍ pueden sobresalir de la medida del texto: una imagen encajada
   a 68 caracteres se ve diminuta. */
.sb-single-content figure { margin: 1.8em 0; }
.sb-single-content figcaption {
	margin-top: .5em;
	color: var(--sb-tinta-suave);
	font-size: .86rem;
	text-align: center;
}

/* ============================================================================
   COMPARTIR, RELACIONADAS Y COMENTARIOS
   ========================================================================== */

.sb-compartir {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	max-width: 68ch; margin: 34px auto 0; padding-top: 20px;
	border-top: 1px solid rgba(0, 0, 0, .12);
}
.sb-compartir-rotulo { color: var(--sb-tinta-suave); font-size: .9rem; }
.sb-compartir-enlace {
	padding: 7px 14px; border-radius: 999px;
	border: 1px solid var(--sb-oro); background: transparent;
	color: var(--sb-vino); font: inherit; font-size: .88rem;
	text-decoration: none; cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}
.sb-compartir-enlace:hover,
.sb-compartir-enlace:focus-visible { background: var(--sb-oro); color: #fff; }

.sb-relacionadas { max-width: 920px; margin: 48px auto 0; }
.sb-relacionadas h2 { color: var(--sb-vino); font-size: 1.3rem; margin: 0 0 18px; }
.sb-relacionadas-lista {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.sb-relacionadas-lista a { display: block; text-decoration: none; color: inherit; }
.sb-relacionada-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.sb-relacionada-tit { display: block; margin-top: 10px; color: var(--sb-vino); line-height: 1.35; }
.sb-relacionadas-lista a:hover .sb-relacionada-tit { text-decoration: underline; }

.sb-comentarios {
	max-width: 68ch; margin: 52px auto 0; padding-top: 28px;
	border-top: 1px solid rgba(0, 0, 0, .12);
}
.sb-comentarios-titulo { color: var(--sb-vino); font-size: 1.3rem; margin: 0 0 22px; }
.sb-comentarios-lista { list-style: none; margin: 0 0 32px; padding: 0; }

/* Las respuestas anidadas se sangran; a partir del tercer nivel esa sangría se
   comería el ancho útil en un móvil, así que ahí deja de crecer. */
.sb-comentarios-lista .children { list-style: none; margin: 14px 0 0; padding-left: clamp(12px, 4vw, 34px); }
.sb-comentarios-lista .children .children { padding-left: 12px; }

.sb-comentario-cuerpo { padding: 16px 18px; border-radius: 12px; background: rgba(0, 0, 0, .03); margin-bottom: 14px; }
.sb-comentario-cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sb-comentario-avatar { border-radius: 50%; flex-shrink: 0; }
.sb-comentario-quien { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sb-comentario-autor { color: var(--sb-vino); font-weight: 600; }
.sb-comentario-fecha { color: var(--sb-tinta-suave); font-size: .84rem; }
.sb-comentario-texto p:last-child { margin-bottom: 0; }
.sb-comentario-pendiente { color: var(--sb-tinta-suave); font-size: .88rem; font-style: italic; }
.sb-comentario-responder { margin-top: 10px; }
.sb-comentario-responder a { color: var(--sb-vino); font-size: .88rem; }
.sb-comentarios-cerrados { color: var(--sb-tinta-suave); font-style: italic; }

.sb-comentarios-aviso { color: var(--sb-tinta-suave); font-size: .9rem; line-height: 1.55; }
.sb-campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sb-campo label { color: var(--sb-tinta); font-size: .92rem; }
.sb-campo input[type="text"],
.sb-campo input[type="email"],
.sb-campo textarea {
	padding: 10px 12px; border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 8px; background: #fff; color: var(--sb-tinta);
	font: inherit; font-size: .96rem;
}
.sb-campo textarea { resize: vertical; min-height: 130px; }
.sb-campo input:focus-visible,
.sb-campo textarea:focus-visible { outline: 2px solid var(--sb-oro); outline-offset: 1px; border-color: var(--sb-oro); }

/* La casilla y su etiqueta van en fila, no en columna como el resto. */
.sb-campo-casilla { flex-direction: row; align-items: flex-start; gap: 10px; }
.sb-campo-casilla label { font-size: .88rem; color: var(--sb-tinta-suave); line-height: 1.5; }
.sb-obligatorio { color: var(--sb-vino); }

.sb-comentarios-paginacion { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 28px; }

/* En pantalla ancha el nombre y el correo caben al lado; en móvil, no. */
@media (min-width: 640px) {
	.comment-form-author,
	.comment-form-email { display: inline-flex; width: calc(50% - 8px); }
	.comment-form-author { margin-right: 12px; }
}

/* ==========================================================================
   UN BOTÓN NO SE SUBRAYA
   ==========================================================================

   El subrayado sirve para avisar de que una palabra dentro de un texto es un
   enlace. Un botón ya se ve que es pulsable —tiene fondo, borde y relleno—, así
   que subrayarlo solo ensucia.

   Por qué hacía falta escribir esto aquí, que es lo interesante: el botón de la
   portada YA pedía «sin subrayado», y aun así salía subrayado. La causa es una
   regla del tema padre:

       .comments-area a, .page-content a { text-decoration: underline }

   Esa regla está bien pensada para el texto corrido —un enlace dentro de un
   párrafo debe verse—, pero alcanza también a los botones que viven dentro del
   contenido. Y gana, porque `.page-content a` (una clase y un elemento) es más
   específica que `.lsb-btn` (una clase a secas). No es que el estilo del botón
   estuviera mal: es que nunca llegaba a aplicarse.

   La corrección va en el tema HIJO y no en el padre a propósito. El padre lo
   comparten varios sitios y la copia que hay en este disco es de una versión
   MUY posterior a la que corre aquí, así que tocarla sería arreglar un archivo
   que no es el que se sirve.

   Se escribe con el atributo `[class*=...]` para que valga también para los
   botones que vengan después con otro nombre, no solo para los de hoy. */
.page-content a[class*="btn"],
.page-content a[class*="button"],
.comments-area a[class*="btn"],
.comments-area a[class*="button"] {
	text-decoration: none;
}

/* ============================================================================
   EL ANCHO DEL CONTENIDO NO DEPENDE DEL TEMA PADRE
   ============================================================================
   ⚠ NO BORRAR ESTO POR «REDUNDANTE». Hoy no cambia nada a propósito: el tema
   padre que corre en producción (White Hat Canvas 1.6.0) ya pone exactamente
   estos mismos valores, así que la página se ve igual con esto y sin esto.
   Está aquí como red de seguridad, y la red solo sirve si sigue puesta.

   QUÉ ES ESTO, PARA QUIEN NO LO TENGA FRESCO
   ------------------------------------------
   Todo el texto del sitio vive dentro de un contenedor con un ancho máximo. Sin
   él, una línea cruzaría la pantalla entera de lado a lado y se volvería
   incómoda de leer: al terminar el renglón el ojo tiene que recorrer tanto para
   volver que se pierde de línea.

   DE QUÉ NOS PROTEGE
   ------------------
   Ese ancho máximo lo ponía el tema PADRE, no este. Y el padre se reescribió
   entero en su versión 2.0.0: al recortarlo para la web para la que se rehizo
   —que se maqueta toda con Elementor y por eso no necesitaba el contenedor—,
   esta regla DESAPARECIÓ. La copia que hay hoy en disco (3.0.0) no tiene ni un
   solo `max-width` en toda su hoja de estilos.

   Medido el 13-sep-2026 en /quienes-somos/, con una pantalla de 1440 px,
   apagando en el navegador la hoja del padre para simular esa versión:

       con el padre 1.6.0 (el que corre hoy) ....... 1140 px de ancho
       con el padre 3.0.0 (el que hay en disco) .... 1425 px, sin ningún tope

   Y alcanzaría a TODO el sitio: de seis páginas medidas, ninguna es de
   Elementor y cinco usan este contenedor. En el teléfono, además, el texto
   pasaría a tocar el borde. Nada de eso da un error: la página carga perfecta,
   solo que mal maquetada, que es como estas cosas pasan meses sin verse.

   POR QUÉ LLEVA `html` DELANTE
   ----------------------------
   Porque las hojas del padre se cargan DESPUÉS que la de este tema hijo
   (comprobado en el HTML servido: `santa-biblia-css` va en 2.º lugar y
   `white-hat-canvas-theme-style-css` en 4.º). Cuando dos reglas son igual de
   específicas gana la última, así que sin ese `html` el padre seguiría
   mandando y esto no sería ninguna red. `html` no cambia a qué elementos
   alcanza la regla —son exactamente los mismos—, solo desempata a nuestro
   favor.

   Los números son los del padre 1.6.0, copiados tal cual a propósito: esto es
   una red de seguridad, no un rediseño. Si algún día se quiere otro ancho, se
   cambia aquí y con intención.
   ========================================================================== */

/* `body:not([class*="elementor-page-"])` = «solo en las páginas que NO monta
   Elementor»; las que sí monta traen su propio ancho. Es la misma condición
   que usaba el padre, conservada para no cambiar el comportamiento. */
html body:not([class*="elementor-page-"]) .site-main,
html .page-header .entry-title {
	width: 100%;
	margin-inline-start: auto;   /* centrado: el sobrante se reparte a los lados */
	margin-inline-end: auto;
}

/* En pantallas pequeñas no hay tope de ancho: lo que hace falta es un respiro
   a los lados para que el texto no toque el borde. */
@media (max-width: 575px) {
	html body:not([class*="elementor-page-"]) .site-main,
	html .page-header .entry-title {
		padding-inline-start: 10px;
		padding-inline-end: 10px;
	}
}

/* Y de ahí hacia arriba, el ancho máximo crece por tramos, como en el padre. */
@media (min-width: 576px) {
	html body:not([class*="elementor-page-"]) .site-main,
	html .page-header .entry-title { max-width: 500px; }
}
@media (min-width: 768px) {
	html body:not([class*="elementor-page-"]) .site-main,
	html .page-header .entry-title { max-width: 600px; }
}
@media (min-width: 992px) {
	html body:not([class*="elementor-page-"]) .site-main,
	html .page-header .entry-title { max-width: 800px; }
}
@media (min-width: 1200px) {
	html body:not([class*="elementor-page-"]) .site-main,
	html .page-header .entry-title { max-width: 1140px; }
}