/* ═══════════════════════════════════════════════════════════════
 * VARIANTE A · FEED
 *
 * La home se navega como una app social. Nada de masthead de diario:
 * barra superior fina, stories, y una columna de posts que se consume
 * con el pulgar. Es el gesto que un chaval de 18 años ya tiene aprendido.
 *
 * Carga DESPUÉS de main.css: reutiliza tokens, fuentes e iconos.
 * ═══════════════════════════════════════════════════════════════ */

body.v-feed {
	background: var(--ri-bg-alt);
}

/* --- Barra superior --- */
.app-bar {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .86);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--ri-line);
}

.app-bar__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 58px;
}

.app-bar__logo img {
	width: 190px;
	height: auto;
	display: block;
}

.app-bar__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.icon-btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ri-text);
	font-size: 20px;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}

.icon-btn:hover {
	background: var(--ri-bg-tint);
	transform: scale(1.08);
}

.icon-btn__dot {
	position: absolute;
	transform: translate(12px, -12px);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ri-coral);
	border: 2px solid #fff;
}

/* --- Stories ---
 * Van dentro de la columna central: en escritorio, una tira a todo
 * el ancho de la pantalla con siete círculos se ve desangelada.
 */
.stories {
	/* Poco relleno propio: el aire lo pone la tira, que es quien recorta */
	padding: 8px 14px 4px;
	background: #fff;
	border: 1px solid var(--ri-line);
	border-radius: 18px;
}

.stories__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;

	/* El círculo crece al pasar por encima y se salía de la tira.
	   `overflow-y: visible` NO arregla esto: si un eje deja de ser
	   visible, el otro se convierte en auto y recorta igual. La única
	   salida es reservar el espacio DENTRO del contenedor. */
	padding: 9px 5px 11px;
	scroll-padding-inline: 5px;
}

.stories__track::-webkit-scrollbar { display: none; }

/* El padding derecho lo ignoran algunos navegadores al final de un
   contenedor con scroll: este tope lo garantiza. */
.stories__track::after {
	content: "";
	flex: 0 0 1px;
}

.bubble {
	flex: 0 0 auto;
	width: 76px;
	scroll-snap-align: start;
	text-align: center;
	text-decoration: none;
}

.bubble__ring {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	padding: 3px;
	background: conic-gradient(
		from var(--a, 0deg),
		var(--ri-coral),
		var(--ri-orange),
		var(--ri-yellow),
		var(--ri-teal),
		var(--ri-brand),
		var(--ri-coral)
	);
	display: grid;
	place-items: center;
	transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

/* El anillo gira despacio: da sensación de "en directo" sin distraer */
@property --a {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

.bubble__ring {
	animation: ri-ring 6s linear infinite;
}

@keyframes ri-ring {
	to { --a: 360deg; }
}

.bubble:hover .bubble__ring {
	transform: translateY(-3px) scale(1.07);
}

.bubble__label {
	transition: color .2s ease;
}

.bubble:hover .bubble__label {
	color: var(--ri-brand);
}

.bubble__inner {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 3px solid #fff;
	background: var(--ri-bg-tint);
	display: grid;
	place-items: center;
	color: var(--ri-brand);
	font-size: 22px;
}

.bubble--seen .bubble__ring {
	background: var(--ri-line);
	animation: none;
}

.bubble__label {
	display: block;
	margin-top: 7px;
	font-family: var(--ri-font-ui);
	font-size: 10px;
	letter-spacing: .03em;
	color: var(--ri-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════
 * ARMAZÓN DE TRES COLUMNAS
 *
 * En escritorio un feed a una sola columna deja media pantalla vacía
 * y parece un móvil estirado. La solución no es ensanchar la columna
 * (una línea de 900 px no se lee), sino ocupar los lados: navegación
 * fija a la izquierda y contexto a la derecha.
 * ═══════════════════════════════════════════════════════════════ */
body.v-feed .container {
	max-width: 1340px;
}

.feed-shell {
	display: grid;
	grid-template-columns: 236px minmax(0, 640px) 340px;
	gap: 30px;
	justify-content: center;
	align-items: start;
	padding: 24px 0 60px;
}

.feed {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* --- Navegación lateral (solo escritorio) --- */
.side-nav {
	position: sticky;
	top: 20px;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.side-nav__logo {
	display: block;
	padding: 6px 12px 18px;
}

.side-nav__logo img {
	width: 100%;
	height: auto;
	display: block;
}

.snav {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 11px 14px;
	border-radius: 999px;
	font-family: var(--ri-font-ui);
	font-size: 14px;
	font-weight: 700;
	color: var(--ri-text);
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}

.snav .icon { font-size: 21px; color: var(--ri-muted); transition: color .18s ease; }

.snav:hover {
	background: var(--ri-bg-tint);
	text-decoration: none;
}

.snav.is-on {
	background: var(--ri-brand);
	color: #fff;
}

.snav.is-on .icon { color: #fff; }

.snav__badge {
	margin-left: auto;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--ri-coral);
	color: #fff;
	font-size: 10px;
	line-height: 20px;
	text-align: center;
}

.side-nav__cta {
	margin: 14px 12px 0;
	display: block;
	padding: 14px 0;
	border-radius: 999px;
	background: var(--ri-brand);
	color: #fff;
	font-family: var(--ri-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}

.side-nav__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(55, 40, 121, .3);
	text-decoration: none;
}

.side-nav__legal {
	margin: 22px 14px 0;
	padding-top: 16px;
	border-top: 1px solid var(--ri-line);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-family: var(--ri-font-ui);
	font-size: 10px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.side-nav__legal a { color: var(--ri-muted); text-decoration: none; }
.side-nav__legal a:hover { color: var(--ri-brand); }

/* --- Post --- */
.post {
	background: #fff;
	border: 1px solid var(--ri-line);
	border-radius: 18px;
	overflow: hidden;
}

/* Solo se esconde si hay JS que pueda volver a mostrarlo */
.js .post {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}

.post.is-in {
	opacity: 1;
	transform: none;
}

.post__head {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 16px;
}

.post__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ri-bg-tint);
	border: 2px solid var(--ri-brand);
	display: grid;
	place-items: center;
	color: var(--ri-brand);
	font-family: var(--ri-font-ui);
	font-size: 13px;
	font-weight: 700;
	flex: 0 0 auto;
}

.post__who {
	line-height: 1.25;
	min-width: 0;
}

.post__author {
	display: block;
	font-family: var(--ri-font-ui);
	font-size: 13px;
	font-weight: 700;
}

.post__when {
	display: block;
	font-family: var(--ri-font-ui);
	font-size: 11px;
	color: var(--ri-muted);
}

.post__tag {
	margin-left: auto;
	flex: 0 0 auto;
	padding: 4px 10px;
	border-radius: 999px;
	font-family: var(--ri-font-ui);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
}

.post__tag--notas       { background: var(--ri-coral); }
.post__tag--mediciones  { background: var(--ri-teal); }
.post__tag--reportajes  { background: var(--ri-orange); }
.post__tag--entrevistas { background: var(--ri-yellow); color: var(--ri-text); }
.post__tag--opinion     { background: var(--ri-brand-violet); }

.post__media {
	display: block;
	overflow: hidden;
	background: var(--ri-bg-tint);
}

.post__media .ph {
	min-height: 330px;
	border: 0;
	border-radius: 0;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.post:hover .post__media .ph {
	transform: scale(1.04);
}

.post__body {
	padding: 16px 18px 6px;
}

.post__title {
	font-family: var(--ri-font-display);
	font-size: 34px;
	line-height: .92;
	margin: 0 0 8px;
}

.post__title a {
	color: var(--ri-text);
	text-decoration: none;
}

.post__title a:hover { color: var(--ri-brand); }

.post__text {
	font-size: 15px;
	color: var(--ri-muted);
	margin: 0;
}

/* --- Acciones del post --- */
.post__actions {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px 12px 12px;
}

.act {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--ri-muted);
	font-family: var(--ri-font-ui);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.act:hover {
	background: var(--ri-bg-alt);
	color: var(--ri-text);
}

.act .icon {
	font-size: 17px;
	transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
}

.act--like.is-on { color: var(--ri-coral); }
.act--like.is-on .icon { fill: var(--ri-coral); stroke: var(--ri-coral); }
.act--save.is-on { color: var(--ri-brand); }
.act--save.is-on .icon { fill: var(--ri-brand); stroke: var(--ri-brand); }

/* Golpe al pulsar */
.act.is-pop .icon { animation: ri-pop .42s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes ri-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.45); }
	100% { transform: scale(1); }
}

.act__spacer { margin-left: auto; }

/* --- Post horizontal ---
 * Aprovecha el ancho de la columna en escritorio y rompe la monotonía
 * de la pila de tarjetas. En móvil vuelve a apilarse.
 */
.post--wide .post__main {
	display: grid;
	grid-template-columns: 46% 1fr;
	align-items: stretch;
}

.post--wide .post__media { height: 100%; }

.post--wide .post__media .ph {
	height: 100%;
	min-height: 250px;
}

.post--wide .post__body {
	padding: 20px 20px 4px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* --- Post destacado: dos columnas de texto --- */
.post--lead .post__title { font-size: 44px; }

.post--lead .post__text { font-size: 16px; }

/* --- Post de datos --- */
.post--data {
	background: linear-gradient(145deg, var(--ri-brand), var(--ri-brand-violet));
	border-color: transparent;
	color: #fff;
}

.post--data .post__author,
.post--data .post__title a { color: #fff; }

.post--data .post__when,
.post--data .post__text { color: rgba(255, 255, 255, .75); }

.post--data .post__avatar {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}

.data-rows {
	padding: 4px 18px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.data-row {
	display: grid;
	grid-template-columns: 26px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: rgba(255, 255, 255, .1);
	border-radius: 12px;
}

.data-row__pos {
	font-family: var(--ri-font-display);
	font-size: 26px;
	line-height: 1;
	color: var(--ri-yellow);
}

.data-row__name {
	font-family: var(--ri-font-ui);
	font-size: 13px;
	font-weight: 700;
}

.data-row__sub {
	display: block;
	font-size: 11px;
	opacity: .7;
	font-weight: 400;
}

.data-row__val {
	font-family: var(--ri-font-display);
	font-size: 24px;
	line-height: 1;
	color: var(--ri-yellow);
}

/* Barra de progreso que se llena al entrar en pantalla */
.data-bar {
	grid-column: 1 / -1;
	height: 4px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .18);
	overflow: hidden;
}

.data-bar span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--ri-yellow);
	transition: width 1.1s cubic-bezier(.22, .61, .36, 1);
}

/* --- Reels --- */
.reels {
	background: #fff;
	border: 1px solid var(--ri-line);
	border-radius: 18px;
	padding: 18px 0 18px 18px;
	overflow: hidden;
}

.reels__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-right: 18px;
	margin-bottom: 14px;
}

.reels__title {
	font-family: var(--ri-font-display);
	font-size: 30px;
	line-height: 1;
	margin: 0;
}

.reels__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.reels__track::-webkit-scrollbar { display: none; }

.reel {
	flex: 0 0 auto;
	width: 158px;
	scroll-snap-align: start;
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
}

.reel .ph {
	min-height: 280px;
	border: 0;
	border-radius: 0;
	background: linear-gradient(160deg, var(--ri-brand-violet), var(--ri-brand-ink));
	color: rgba(255, 255, 255, .5);
	transition: transform .5s ease;
}

.reel:hover .ph { transform: scale(1.06); }

.reel__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 34px;
	color: #fff;
	opacity: .9;
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.reel:hover .reel__play { transform: scale(1.18); }

.reel__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 26px 12px 12px;
	background: linear-gradient(transparent, rgba(0, 0, 0, .78));
	font-family: var(--ri-font-ui);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
}

/* --- Columna derecha ---
 *
 * La columna entera NO va pegada: con dos anuncios y tres tarjetas
 * supera la altura de la ventana y tendría que llevar scroll interno,
 * que es incómodo. Acompaña al feed y solo se pega el último bloque
 * (.rail__sticky), que es el patrón habitual en medios.
 */
.rail {
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.rail__sticky {
	position: sticky;
	top: 20px;
}

/* ═══════════════════════════════════════════════════════════════
 * PUBLICIDAD
 *
 * Dos capas distintas y conviene no confundirlas:
 *   - el CONTENEDOR se cuida, porque se ve siempre;
 *   - el hueco vacío solo se ve mientras no hay creatividad, así que
 *     en cuanto entra el código del anunciante desaparece entero
 *     (.ad__slot:not(:empty) en main.css).
 * ═══════════════════════════════════════════════════════════════ */
/* Una sola clase a propósito: si aquí se pone `.feed .rail__ad` (dos clases)
   le gana en especificidad al modificador `.rail__ad--halfpage`, y sus
   ajustes dejan de aplicarse sin que nada avise. */
.rail__ad {
	position: relative;
	background: #fff;
	border: 1px solid var(--ri-line);
	border-radius: 18px;
	padding: 12px 12px 14px;
	text-align: center;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.rail__ad:hover {
	border-color: var(--ri-line-strong);
	box-shadow: 0 10px 26px rgba(29, 24, 48, .09);
}

/* Etiqueta legal, en pastilla */
.rail__ad .ad__label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 0 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--ri-bg-tint);
	color: var(--ri-muted);
	font-size: 9px;
	letter-spacing: .16em;
	opacity: 1;
}

.rail__ad .ad__label::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ri-brand);
	opacity: .55;
}

/* Hueco reservado */
.rail__ad .ad__slot {
	position: relative;
	max-width: 100%;
	margin: 0 auto;
	overflow: hidden;
	border: 1px dashed var(--ri-line-strong);
	border-radius: 12px;
	background:
		radial-gradient(rgba(55, 40, 121, .11) 1px, transparent 1px) 0 0 / 14px 14px,
		linear-gradient(150deg, #faf9fd, #efedf7);
}

.rail__ad--halfpage .ad__slot {
	width: 300px;
	height: 600px;
}

/* Publicidad DENTRO del feed.
 *
 * Tiene que pesar lo mismo que un post: el hueco va de borde a borde
 * (como la foto de las notas, que no lleva margen lateral) y a la misma
 * altura que .post__media .ph, 330 px. Con 250 px y 12 px de margen a
 * los lados se quedaba en una franja escuchimizada entre dos tarjetas.
 */
/* ═══════════════════════════════════════════════════════════════
 * PUBLICIDAD DENTRO DEL FEED · bloque .fad
 *
 * Namespace propio y CERO clases compartidas con .ad / .ad__slot.
 * Aquellas arrastran de main.css anchos fijos por formato
 * (.ad--mpu, .ad--billboard…), un `display:flex` de centrado y la
 * regla `.ad__slot:not(:empty)`, y entre unas y otras el bloque no
 * había manera de que cuadrara con el resto de tarjetas del feed.
 *
 * Aquí la caja se construye igual que .reels: mismo borde, mismo
 * radio, cabecera propia y contenido a sangre.
 * ═══════════════════════════════════════════════════════════════ */
.fad {
	display: flex;
	flex-direction: column;
	min-height: 362px;              /* la altura del bloque de videos */
	background: #fff;
	border: 1px solid var(--ri-line);
	border-radius: 18px;
	overflow: hidden;
	transition: border-color .25s ease, box-shadow .25s ease;
}

.fad:hover {
	border-color: var(--ri-line-strong);
	box-shadow: 0 10px 26px rgba(29, 24, 48, .09);
}

/* --- Cabecera, con el mismo aire que .reels__head --- */
.fad__head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 15px 18px;
	border-bottom: 1px solid var(--ri-line);
}

.fad__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--ri-bg-tint);
	color: var(--ri-muted);
	font-family: var(--ri-font-ui);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.fad__tag::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ri-brand);
	opacity: .6;
}

.fad__note {
	margin-left: auto;
	font-family: var(--ri-font-ui);
	font-size: 11px;
	color: var(--ri-muted);
	text-decoration: none;
	white-space: nowrap;
}

.fad__note:hover { color: var(--ri-brand); text-decoration: none; }

/* --- Hueco de la creatividad --- */
.fad__slot {
	flex: 1;
	display: grid;
	place-items: center;
	padding: 14px;
	background:
		radial-gradient(rgba(55, 40, 121, .1) 1px, transparent 1px) 0 0 / 14px 14px,
		linear-gradient(150deg, #faf9fd, #efedf7);
}

/* Con creatividad real dentro, fuera el fondo y el relleno */
.fad--live .fad__slot {
	padding: 0;
	background: none;
}

.fad__ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	text-align: center;
}

.fad__ph .icon {
	width: 34px;
	height: 34px;
	padding: 9px;
	box-sizing: content-box;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--ri-brand), var(--ri-brand-violet));
	color: #fff;
	stroke-width: 1.7;
}

.fad__ph b {
	font-family: var(--ri-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ri-text);
}

.fad__ph em {
	font-style: normal;
	padding: 3px 11px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--ri-line);
	font-family: var(--ri-font-ui);
	font-size: 10px;
	letter-spacing: .08em;
	color: var(--ri-muted);
}

@media (max-width: 782px) {
	.fad { min-height: 296px; }
	.fad__head { padding: 13px 15px; }
	.fad__note { display: none; }
}



/* Con creatividad real dentro, fuera toda la decoración.
 *
 * En main.css esto lo hacía `.ad__slot:not(:empty)`, pero ahora el hueco
 * vacío lleva su propio marcado (.ad__ph) y nunca está vacío. La señal
 * fiable es la clase .ad--live, que ri_ad() añade cuando el área de
 * widgets tiene contenido.
 */
.rail__ad.ad--live .ad__slot {
	background: none;
	border: 0;
	width: auto;
	height: auto;
}

/* Buscador de la columna: en escritorio sustituye al de la barra superior */
.rail__search {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	background: #fff;
	border: 1px solid var(--ri-line);
	border-radius: 999px;
	transition: border-color .2s ease;
}

.rail__search:focus-within { border-color: var(--ri-brand); }

.rail__search .icon { color: var(--ri-muted); font-size: 18px; }

.rail__search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font-family: var(--ri-font-body);
	font-size: 14px;
	color: var(--ri-text);
}

.rail__search input:focus { outline: none; }

.rail__card {
	background: #fff;
	border: 1px solid var(--ri-line);
	border-radius: 16px;
	padding: 18px;
}

.rail__title {
	font-family: var(--ri-font-ui);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ri-muted);
	margin-bottom: 12px;
}

.trend {
	display: block;
	padding: 10px 0;
	border-bottom: 1px solid var(--ri-line);
	text-decoration: none;
}

.trend:last-child { border-bottom: 0; padding-bottom: 0; }

.trend__tag {
	font-family: var(--ri-font-ui);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ri-coral);
}

.trend__title {
	display: block;
	font-family: var(--ri-font-display);
	font-size: 21px;
	line-height: .98;
	color: var(--ri-text);
	margin-top: 2px;
}

.trend:hover .trend__title { color: var(--ri-brand); }

/* --- Newsletter ---
 * Tiene sus propias clases a propósito: antes reutilizaba .b-nl, que
 * vive en bento.css y no se carga en esta variante, así que el campo
 * salía sin estilo ninguno.
 */
.rail__card--nl {
	background: var(--ri-yellow);
	border-color: transparent;
}

.rail__card--nl .rail__title { color: var(--ri-brand); }

.nl-card__t {
	font-family: var(--ri-font-display);
	font-size: 34px;
	line-height: .9;
	margin: 0 0 8px;
	color: var(--ri-brand);
}

.nl-card__d {
	font-size: 14px;
	line-height: 1.45;
	color: rgba(29, 24, 48, .78);
	margin: 0 0 16px;
}

.nl-form {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.nl-form input[type="email"] {
	width: 100%;
	padding: 13px 18px;
	border: 2px solid transparent;
	border-radius: 999px;
	background: #fff;
	font-family: var(--ri-font-body);
	font-size: 14px;
	color: var(--ri-text);
	transition: border-color .18s ease;
}

.nl-form input[type="email"]::placeholder { color: var(--ri-muted); }

.nl-form input[type="email"]:focus {
	outline: none;
	border-color: var(--ri-brand);
}

.nl-form button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 13px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--ri-brand);
	color: #fff;
	font-family: var(--ri-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}

.nl-form button:hover {
	background: var(--ri-accent-dark);
	transform: translateY(-2px);
}

.nl-form__legal {
	margin: 2px 0 0;
	font-family: var(--ri-font-ui);
	font-size: 10px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(29, 24, 48, .55);
}

/* Bloques que solo aparecen cuando la columna derecha se ha caído */
.only-narrow { display: none; }

/* --- Barra inferior tipo app (solo móvil) --- */
.tabbar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--ri-line);
	padding-bottom: env(safe-area-inset-bottom);
}

.tabbar__inner {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}

.tab {
	display: grid;
	justify-items: center;
	gap: 3px;
	padding: 9px 0;
	font-family: var(--ri-font-ui);
	font-size: 9px;
	letter-spacing: .04em;
	color: var(--ri-muted);
	text-decoration: none;
	transition: color .18s ease;
}

.tab .icon { font-size: 21px; }

.tab.is-on { color: var(--ri-brand); }

.tab.is-on .icon { transform: translateY(-1px); }

/* --- Indicador de progreso de lectura --- */
.readbar {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	z-index: 80;
	background: linear-gradient(90deg, var(--ri-coral), var(--ri-orange), var(--ri-yellow), var(--ri-teal));
	transition: width .1s linear;
}

/* ═══════════════════════════════════════════════════════════════
 * Responsive del armazón
 *
 * Tres estados, no dos:
 *   ≥1180  navegación lateral + feed + contexto
 *   900-1180  se cae la lateral, vuelve la barra superior
 *   <900   una sola columna y barra inferior tipo app
 * ═══════════════════════════════════════════════════════════════ */

/* La barra superior solo existe cuando no hay navegación lateral */
@media (min-width: 1181px) {
	.app-bar { display: none; }
}

@media (max-width: 1180px) {
	.side-nav { display: none; }

	.feed-shell {
		grid-template-columns: minmax(0, 620px) 320px;
		padding-top: 20px;
	}
}

@media (max-width: 1024px) {
	.feed-shell {
		grid-template-columns: minmax(0, 640px);
	}

	.rail { display: none; }

	/* Al perder la columna, su newsletter y su publicidad pasan al feed */
	.only-narrow { display: block; }

	.post--wide .post__main { grid-template-columns: 1fr; }
	.post--wide .post__media .ph { min-height: 240px; }
}

@media (max-width: 782px) {
	.feed-shell { padding: 14px 0 84px; gap: 0; }
	.feed { gap: 14px; }

	.post { border-radius: 14px; }
	.post__title { font-size: 29px; }
	.post--lead .post__title { font-size: 32px; }
	.post__media .ph { min-height: 240px; }

	.stories { border-radius: 14px; padding: 14px 14px 10px; }
	.ftabs { border-radius: 14px; top: 8px; }

	.tabbar { display: block; }

	.app-bar__logo img { width: 150px; }
}

/* ═══════════════════════════════════════════════════════════════
 * Bloques añadidos
 * ═══════════════════════════════════════════════════════════════ */

/* --- Pestañas del feed --- */
.ftabs {
	display: flex;
	gap: 6px;
	padding: 12px 14px;
	background: rgba(255, 255, 255, .9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--ri-line);
	border-radius: 999px;
	position: sticky;
	top: 14px;
	z-index: 55;
	overflow-x: auto;
	scrollbar-width: none;
}

.ftabs::-webkit-scrollbar { display: none; }

.ftab {
	flex: 0 0 auto;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--ri-line);
	background: #fff;
	font-family: var(--ri-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--ri-muted);
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.ftab:hover { border-color: var(--ri-brand); color: var(--ri-brand); }

.ftab.is-on {
	background: var(--ri-brand);
	border-color: var(--ri-brand);
	color: #fff;
}

/* --- Separador de sección dentro del feed --- */
.fsep {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 2px -4px;
	font-family: var(--ri-font-ui);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ri-muted);
}

.fsep::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ri-line);
}

/* --- Post de cita / opinión --- */
.post--quote {
	background: var(--ri-yellow);
	border-color: transparent;
}

.post--quote .post__avatar {
	background: rgba(0, 0, 0, .1);
	border-color: var(--ri-brand);
}

.post__quote {
	font-family: var(--ri-font-display);
	font-size: 42px;
	line-height: .92;
	margin: 0 0 12px;
	padding: 0 18px;
	color: var(--ri-brand);
}

.post--quote .post__text { color: rgba(29, 24, 48, .72); }

/* --- Encuesta --- */
.poll {
	padding: 4px 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.poll__opt {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid var(--ri-line);
	border-radius: 12px;
	background: #fff;
	font-family: var(--ri-font-ui);
	font-size: 13px;
	font-weight: 700;
	color: var(--ri-text);
	cursor: pointer;
	overflow: hidden;
	text-align: left;
	width: 100%;
	transition: border-color .18s ease;
}

.poll__opt:hover { border-color: var(--ri-brand); }

.poll__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: var(--ri-bg-tint);
	transition: width .8s cubic-bezier(.22, .61, .36, 1);
	z-index: 0;
}

.poll__opt.is-win .poll__fill { background: #ddf2ee; }

.poll__opt span { position: relative; z-index: 1; }

.poll__pc { opacity: 0; transition: opacity .3s ease .2s; }

.poll.is-done .poll__pc { opacity: 1; }

.poll__foot {
	font-family: var(--ri-font-ui);
	font-size: 11px;
	color: var(--ri-muted);
	margin: 2px 0 0;
}

/* --- Carrusel de perfiles --- */
.who {
	background: #fff;
	border: 1px solid var(--ri-line);
	border-radius: 18px;
	padding: 18px 0 18px 18px;
	overflow: hidden;
}

.who__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.who__track::-webkit-scrollbar { display: none; }

.who__card {
	flex: 0 0 auto;
	width: 148px;
	scroll-snap-align: start;
	padding: 18px 14px;
	border: 1px solid var(--ri-line);
	border-radius: 14px;
	text-align: center;
	text-decoration: none;
	color: var(--ri-text);
	transition: border-color .2s ease, transform .2s ease;
}

.who__card:hover {
	border-color: var(--ri-brand);
	transform: translateY(-3px);
}

.who__av {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	margin: 0 auto 10px;
	background: var(--ri-bg-tint);
	border: 2px dashed var(--ri-line-strong);
}

.who__name {
	display: block;
	font-family: var(--ri-font-ui);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.who__sub {
	display: block;
	font-family: var(--ri-font-ui);
	font-size: 10px;
	color: var(--ri-muted);
	margin-bottom: 10px;
}

.who__btn {
	display: block;
	padding: 7px 0;
	border-radius: 999px;
	background: var(--ri-brand);
	color: #fff;
	font-family: var(--ri-font-ui);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* --- Lo más leído en la columna --- */
.mr {
	list-style: none;
	counter-reset: m;
	margin: 0;
	padding: 0;
}

.mr li {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ri-line);
}

.mr li:last-child { border-bottom: 0; padding-bottom: 0; }

.mr li::before {
	counter-increment: m;
	content: counter(m);
	font-family: var(--ri-font-display);
	font-size: 26px;
	line-height: .9;
	color: var(--ri-line-strong);
}

.mr li:nth-child(1)::before { color: var(--ri-coral); }
.mr li:nth-child(2)::before { color: var(--ri-orange); }
.mr li:nth-child(3)::before { color: var(--ri-yellow); }

.mr a {
	font-family: var(--ri-font-display);
	font-size: 19px;
	line-height: .98;
	color: var(--ri-text);
	text-decoration: none;
}

.mr a:hover { color: var(--ri-brand); }

/* --- Cargar más --- */
.more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	padding: 16px;
	border: 1px solid var(--ri-line);
	border-radius: 999px;
	background: #fff;
	font-family: var(--ri-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ri-brand);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.more:hover { background: var(--ri-bg-tint); transform: translateY(-2px); }

.more.is-loading .icon { animation: ri-spin2 .9s linear infinite; }

@keyframes ri-spin2 { to { transform: rotate(360deg); } }

/* --- Esqueleto de carga --- */
.skel {
	background: #fff;
	border: 1px solid var(--ri-line);
	border-radius: 18px;
	padding: 16px;
	display: none;
}

.skel.is-on { display: block; }

.skel__l {
	height: 13px;
	border-radius: 6px;
	margin-bottom: 10px;
	background: linear-gradient(90deg, #eceaf3 25%, #f6f5fa 37%, #eceaf3 63%);
	background-size: 400% 100%;
	animation: ri-shimmer 1.3s ease infinite;
}

.skel__l--big { height: 180px; margin-bottom: 14px; }
.skel__l--short { width: 55%; }

@keyframes ri-shimmer {
	from { background-position: 100% 50%; }
	to   { background-position: 0 50%; }
}

/* --- Pie completo --- */
.f-foot {
	background: var(--ri-brand-ink);
	color: rgba(255, 255, 255, .72);
	padding: 46px 0 24px;
	margin-top: 20px;
}

.f-foot__cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 26px;
}

.f-foot__logo { width: 190px; height: auto; margin-bottom: 12px; }

.f-foot h3 {
	font-family: var(--ri-font-ui);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ri-yellow);
	margin-bottom: 12px;
}

.f-foot ul { list-style: none; margin: 0; padding: 0; }
.f-foot li { padding: 4px 0; }

.f-foot a {
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
	font-size: 14px;
}

.f-foot a:hover { color: var(--ri-yellow); }

.f-foot__bottom {
	margin-top: 32px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	font-family: var(--ri-font-ui);
	font-size: 11px;
	letter-spacing: .05em;
	text-transform: uppercase;
}

@media (max-width: 1024px) {
	.f-foot__cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
	.f-foot__cols { grid-template-columns: 1fr; }
	.f-foot { margin-bottom: 62px; }
	.post__quote { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
	.bubble__ring { animation: none; }
	.post { opacity: 1; transform: none; }
	.act.is-pop .icon { animation: none; }
	.data-bar span,
	.poll__fill { transition: none; }
	.skel__l { animation: none; }
	.more.is-loading .icon { animation: none; }
}