/* Revista Caminos. Colores del sitio; se pueden cambiar desde Elementor
   (Configuración del sitio → CSS personalizado) redefiniendo estas variables. */
:root {
	--br-azul: #2F4899;
	--br-azul-osc: #223673;
	--br-rojo: #D0172C;
	--br-amarillo: #E6BE1E;
	--br-tinta: #1d2233;
	--br-gris: #5f6679;
	--br-linea: #e2e5ee;
	--br-fondo: #f4f5f9;
}

/* ---------- Portada y tarjeta ---------- */
.br-portada { position: relative; display: block; text-decoration: none; }
.br-portada__img {
	display: block; aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden;
	background: var(--br-azul); box-shadow: 0 6px 18px rgba(15, 25, 60, .22);
	transition: transform .2s ease, box-shadow .2s ease;
}
.br-portada__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.br-portada:hover .br-portada__img,
.br-portada:focus-visible .br-portada__img { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(15, 25, 60, .3); }

.br-cinta {
	position: absolute; z-index: 2; top: 12px; left: -6px;
	background: var(--br-rojo); color: #fff; font-size: 10.5px; font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase; line-height: 1;
	padding: 5px 10px 5px 12px; border-radius: 0 4px 4px 0; box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
.br-cinta::before {
	content: ""; position: absolute; left: 0; bottom: -6px;
	border-top: 6px solid #8d0f1e; border-left: 6px solid transparent;
}

.br-tarjeta__pie { display: block; margin-top: 10px; font-size: 13px; line-height: 1.3; color: var(--br-gris); }
.br-tarjeta__pie b { display: block; color: var(--br-tinta); font-size: 14px; }
/* Sobre fondo azul (bloque de la home): agregar la clase br-sobre-azul a la sección */
.br-sobre-azul .br-tarjeta__pie { color: #c8d0ec; }
.br-sobre-azul .br-tarjeta__pie b { color: #fff; }

/* ---------- Estado, botón ---------- */
.br-estado {
	display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--br-gris);
}
.br-estado.es-nueva { color: var(--br-rojo); }
.br-estado i { width: 9px; height: 9px; border-radius: 50%; background: var(--br-rojo); animation: br-pulso 1.8s infinite; }
@keyframes br-pulso {
	0% { box-shadow: 0 0 0 0 rgba(208, 23, 44, .6); }
	70% { box-shadow: 0 0 0 9px rgba(208, 23, 44, 0); }
	100% { box-shadow: 0 0 0 0 rgba(208, 23, 44, 0); }
}

.br-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 22px; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--br-azul); color: #fff; font: inherit; font-weight: 700; font-size: 15px;
	text-decoration: none; transition: filter .15s, transform .15s;
}
.br-btn:hover, .br-btn:focus { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.br-btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
/* El tema (Hello) da estilo propio a <button>: se refuerza para que no lo pise. */
.br-visor button.br-btn,
.br-visor button.br-btn:hover,
.br-visor button.br-btn:focus {
	border: 0; border-radius: 999px; background: var(--br-azul); color: #fff;
	font-weight: 700; line-height: 1.2; text-transform: none;
}

/* ---------- Contadores ---------- */
.br-pastillas { display: flex; flex-wrap: wrap; gap: 8px; }
.br-pastilla {
	border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600;
	background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff;
}
.br-pastilla b { color: var(--br-amarillo); }

.br-franja {
	display: grid; grid-template-columns: repeat(4, 1fr); text-align: center;
	font-variant-numeric: tabular-nums;
}
.br-franja > div { padding: 6px 10px; }
.br-franja > div + div { border-left: 1px solid var(--br-linea); }
.br-franja b { display: block; font-size: 40px; font-weight: 800; line-height: 1.1; color: var(--br-azul); }
.br-franja span { font-size: 13px; font-weight: 600; color: var(--br-gris); }

/* ---------- Pila de portadas ---------- */
.br-pila { position: relative; width: 250px; max-width: 70%; aspect-ratio: 9 / 16; margin: 0 auto; }
.br-pila__atras, .br-pila .br-pila__frente { position: absolute; inset: 0; }
.br-pila .br-pila__frente .br-portada__img { height: 100%; box-shadow: 0 22px 50px rgba(15, 25, 60, .4); }
.br-pila__atras { border-radius: 6px; overflow: hidden; filter: brightness(.8); box-shadow: 0 6px 18px rgba(15, 25, 60, .22); }
.br-pila__atras img { width: 100%; height: 100%; object-fit: cover; }
.br-pila__atras--1 { transform: translate(18%, -2%) rotate(7deg) scale(.92); }
.br-pila__atras--2 { transform: translate(-18%, -2%) rotate(-7deg) scale(.92); }

/* ---------- Notas destacadas ---------- */
.br-notas__titulo { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--br-gris); margin: 4px 0 12px; }
.br-notas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.br-nota {
	display: block; overflow: hidden; border-radius: 10px; background: #fff; text-decoration: none; color: var(--br-tinta);
	box-shadow: 0 0 0 1px var(--br-linea); transition: box-shadow .2s, transform .2s;
}
.br-nota:hover { box-shadow: 0 0 0 1px var(--br-linea), 0 10px 24px rgba(15, 25, 60, .12); transform: translateY(-3px); }
.br-nota img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.br-nota__txt { display: block; padding: 10px 12px 12px; }
.br-nota__txt b { display: block; font-size: 14px; line-height: 1.3; margin-bottom: 6px; }
.br-nota__txt span { font-size: 12px; font-weight: 700; color: var(--br-azul); }

/* ---------- Visor ---------- */
.br-visor__marco { position: relative; height: min(78vh, 760px); border-radius: 14px; overflow: hidden; background: #e9ecf4; }
.br-visor__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.br-visor--movil {
	display: grid; justify-items: center; gap: 16px; padding: 26px 18px;
	border-radius: 14px; background: var(--br-fondo); text-align: center;
}
.br-visor__portada { width: 180px; max-width: 60%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 6px; box-shadow: 0 12px 28px rgba(15, 25, 60, .28); }
.br-visor__abrir { width: 100%; max-width: 300px; padding: 15px 20px; }
.br-visor__ayuda { margin: 0; font-size: 13px; color: var(--br-gris); }

/* ---------- Lector a pantalla completa (celular) ---------- */
html.br-lector-abierto, html.br-lector-abierto body { overflow: hidden; }
.br-lector {
	position: fixed; inset: 0; z-index: 999999; display: flex; flex-direction: column;
	background: var(--br-azul-osc); animation: br-entrar .22s ease-out;
}
.br-lector[hidden] { display: none; }
@keyframes br-entrar { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.br-lector__barra {
	display: flex; align-items: center; gap: 10px; color: #fff; background: var(--br-azul-osc);
	padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
}
.br-lector__cerrar {
	display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; cursor: pointer;
	padding: 8px 14px; background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: 14px; font-weight: 700;
}
.br-lector button.br-lector__cerrar { border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; line-height: 1.2; text-transform: none; }
.br-lector button.br-lector__cerrar:hover,
.br-lector button.br-lector__cerrar:focus { background: rgba(255, 255, 255, .24); color: #fff; }
.br-lector__titulo { flex: 1; min-width: 0; line-height: 1.2; }
.br-lector__titulo b { display: block; font-size: 14px; }
.br-lector__titulo span { font-size: 12px; color: #c3cbe8; }
.br-lector__compartir { width: 38px; height: 38px; border-radius: 50%; background: #1fae54; color: #fff; display: grid; place-items: center; }
.br-lector__compartir svg { width: 18px; height: 18px; fill: currentColor; }
.br-lector__cuerpo { position: relative; flex: 1; background: #e9ecf4; padding-bottom: env(safe-area-inset-bottom, 0px); }
.br-lector__cuerpo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 1024px) {
	.br-franja { grid-template-columns: repeat(2, 1fr); }
	.br-franja > div:nth-child(3) { border-left: 0; }
	.br-franja > div:nth-child(n+3) { border-top: 1px solid var(--br-linea); }
	.br-franja b { font-size: 30px; }
}
@media (max-width: 767px) {
	.br-notas { grid-template-columns: 1fr; }
	.br-nota { display: grid; grid-template-columns: 96px 1fr; }
	.br-nota img { height: 100%; aspect-ratio: auto; }
	.br-pila { width: 190px; }
}
@media (prefers-reduced-motion: reduce) {
	.br-estado i, .br-lector { animation: none; }
	.br-portada__img, .br-nota, .br-btn { transition: none; }
}