/* ═══════════════════════════════════════════════════════════════
 * VARIANTE C · BRUTALISTA / Y2K
 *
 * Tipografía a sangre, bordes negros gruesos, sombras duras sin
 * difuminar y color plano. Estética de cartel y de merch, que es el
 * lenguaje visual con el que este público ha crecido.
 *
 * El logo es lettering de pincel: aquí es donde mejor encaja.
 *
 * Carga DESPUÉS de main.css.
 * ═══════════════════════════════════════════════════════════════ */

body.v-brutal {
	background: var(--ri-yellow);
	color: #000;
	--bd: 3px solid #000;
	--sh: 6px 6px 0 #000;
	--sh-lg: 10px 10px 0 #000;
}

body.v-brutal ::selection { background: #000; color: var(--ri-yellow); }

/* --- Marquesina superior --- */
.br-marquee {
	background: #000;
	color: var(--ri-yellow);
	border-bottom: var(--bd);
	overflow: hidden;
	padding: 9px 0;
}

.br-marquee__track {
	display: flex;
	gap: 26px;
	white-space: nowrap;
	width: max-content;
	animation: br-slide 26s linear infinite;
}

.br-marquee--rev .br-marquee__track { animation-direction: reverse; }

.br-marquee span {
	font-family: var(--ri-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

@keyframes br-slide {
	to { transform: translateX(-50%); }
}

/* Marquesina de colores, entre secciones */
.br-band {
	background: var(--ri-coral);
	color: #000;
	border-top: var(--bd);
	border-bottom: var(--bd);
	padding: 14px 0;
	overflow: hidden;
}

.br-band .br-marquee__track { animation-duration: 20s; }

.br-band span {
	font-family: var(--ri-font-display);
	font-size: 42px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* --- Cabecera --- */
.br-head {
	background: #fff;
	border-bottom: var(--bd);
	position: sticky;
	top: 0;
	z-index: 60;
}

.br-head__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 70px;
}

.br-head__logo img {
	width: 220px;
	height: auto;
	display: block;
}

.br-nav {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0 0 0 auto;
	padding: 0;
	flex-wrap: wrap;
}

.br-nav a {
	display: block;
	padding: 7px 13px;
	border: 2px solid transparent;
	font-family: var(--ri-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #000;
	text-decoration: none;
	transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

.br-nav a:hover {
	background: var(--ri-yellow);
	border-color: #000;
	transform: translate(-2px, -2px);
	box-shadow: 3px 3px 0 #000;
}

/* --- Botón --- */
.br-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 26px;
	background: #000;
	color: var(--ri-yellow);
	border: var(--bd);
	font-family: var(--ri-font-ui);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--sh);
	transition: transform .13s ease, box-shadow .13s ease;
}

.br-btn:hover {
	transform: translate(-3px, -3px);
	box-shadow: 9px 9px 0 #000;
	text-decoration: none;
}

.br-btn:active {
	transform: translate(3px, 3px);
	box-shadow: 1px 1px 0 #000;
}

.br-btn--white { background: #fff; color: #000; }
.br-btn--coral { background: var(--ri-coral); color: #fff; }

/* --- Portada --- */
.br-hero {
	padding: 46px 0 40px;
	position: relative;
}

.br-hero__kick {
	display: inline-block;
	padding: 6px 14px;
	background: #000;
	color: var(--ri-yellow);
	font-family: var(--ri-font-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	transform: rotate(-2deg);
	margin-bottom: 18px;
}

.br-hero__title {
	font-family: var(--ri-font-display);
	font-size: clamp(64px, 13vw, 190px);
	line-height: .74;
	text-transform: uppercase;
	margin: 0 0 22px;
	letter-spacing: -.02em;
}

/* Cada palabra entra por separado */
.br-word {
	display: inline-block;
	opacity: 0;
	transform: translateY(40px) rotate(4deg);
	animation: br-word .62s cubic-bezier(.22, .61, .36, 1) forwards;
}

@keyframes br-word {
	to { opacity: 1; transform: none; }
}

.br-word--out {
	-webkit-text-stroke: 3px #000;
	color: transparent;
}

.br-word--fill { color: var(--ri-coral); }

.br-hero__grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 30px;
	align-items: end;
}

.br-hero__lead {
	font-size: 19px;
	font-weight: 500;
	max-width: 46ch;
	margin-bottom: 22px;
}

.br-hero__media {
	border: var(--bd);
	box-shadow: var(--sh-lg);
	background: #fff;
	transform: rotate(1.4deg);
	transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

.br-hero__media:hover { transform: rotate(0deg) scale(1.02); }

.br-hero__media .ph {
	border: 0;
	border-radius: 0;
	min-height: 340px;
	color: #000;
	background: repeating-linear-gradient(45deg, rgba(0,0,0,.07) 0 10px, transparent 10px 20px);
}

/* Pegatina giratoria */
.br-sticker {
	position: absolute;
	top: 24px;
	right: 4%;
	width: 118px;
	height: 118px;
	border-radius: 50%;
	background: var(--ri-teal);
	border: var(--bd);
	display: grid;
	place-items: center;
	text-align: center;
	font-family: var(--ri-font-ui);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #000;
	animation: br-spin 14s linear infinite;
	z-index: 3;
}

@keyframes br-spin {
	to { transform: rotate(360deg); }
}

/* --- Tarjetas --- */
.br-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.br-card {
	background: #fff;
	border: var(--bd);
	box-shadow: var(--sh);
	padding: 0 0 20px;
	text-decoration: none;
	color: #000;
	display: flex;
	flex-direction: column;
	transition: transform .16s ease, box-shadow .16s ease;
}

.br-card:hover {
	transform: translate(-4px, -4px);
	box-shadow: var(--sh-lg);
	text-decoration: none;
}

.br-card .ph {
	border: 0;
	border-bottom: var(--bd);
	border-radius: 0;
	min-height: 190px;
	color: #000;
}

.br-card__tag {
	align-self: flex-start;
	margin: -15px 0 0 16px;
	padding: 5px 12px;
	border: var(--bd);
	background: var(--ri-yellow);
	font-family: var(--ri-font-ui);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	position: relative;
}

.br-card__tag--teal   { background: var(--ri-teal); }
.br-card__tag--coral  { background: var(--ri-coral); color: #fff; }
.br-card__tag--orange { background: var(--ri-orange); }

.br-card__title {
	font-family: var(--ri-font-display);
	font-size: 34px;
	line-height: .9;
	margin: 14px 16px 8px;
	text-transform: uppercase;
}

.br-card__meta {
	margin: auto 16px 0;
	font-family: var(--ri-font-ui);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .6;
}

/* --- Sección --- */
.br-sec {
	padding: 56px 0;
	border-bottom: var(--bd);
}

.br-sec--white { background: #fff; }
.br-sec--teal { background: var(--ri-teal); }
.br-sec--black { background: #000; color: #fff; }

.br-sec__title {
	font-family: var(--ri-font-display);
	font-size: clamp(46px, 7vw, 96px);
	line-height: .82;
	text-transform: uppercase;
	margin: 0 0 30px;
}

.br-sec__title mark {
	background: var(--ri-coral);
	color: #fff;
	padding: 0 .12em;
}

/* --- Ranking --- */
.br-rank {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--bd);
}

.br-rank li {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 20px;
	padding: 14px 6px;
	border-bottom: var(--bd);
	transition: background .14s ease, padding .18s ease;
}

.br-rank li:hover {
	background: var(--ri-coral);
	color: #fff;
	padding-left: 20px;
}

.br-rank__pos {
	font-family: var(--ri-font-display);
	font-size: clamp(42px, 6vw, 78px);
	line-height: .8;
	min-width: 1.6ch;
}

.br-rank__name {
	font-family: var(--ri-font-display);
	font-size: clamp(28px, 3.4vw, 46px);
	line-height: .9;
	text-transform: uppercase;
}

.br-rank__sub {
	display: block;
	font-family: var(--ri-font-ui);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .6;
}

.br-rank__val {
	font-family: var(--ri-font-display);
	font-size: clamp(24px, 3vw, 40px);
	line-height: 1;
	white-space: nowrap;
}

.br-rank__go {
	font-size: 22px;
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity .16s ease, transform .16s ease;
}

.br-rank li:hover .br-rank__go { opacity: 1; transform: none; }

/* --- Cita --- */
.br-quote {
	font-family: var(--ri-font-display);
	font-size: clamp(48px, 8vw, 116px);
	line-height: .84;
	text-transform: uppercase;
	margin: 0 0 22px;
}

.br-quote em {
	font-style: normal;
	color: var(--ri-yellow);
}

/* --- Newsletter --- */
.br-nl {
	display: flex;
	gap: 0;
	max-width: 560px;
	border: var(--bd);
	box-shadow: var(--sh);
	background: #fff;
}

.br-nl input {
	flex: 1;
	min-width: 0;
	padding: 17px 20px;
	border: 0;
	background: none;
	font-family: var(--ri-font-body);
	font-size: 16px;
	color: #000;
}

.br-nl input:focus { outline: none; background: var(--ri-yellow); }

.br-nl button {
	padding: 17px 26px;
	border: 0;
	border-left: var(--bd);
	background: #000;
	color: var(--ri-yellow);
	font-family: var(--ri-font-ui);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .14s ease, color .14s ease;
}

.br-nl button:hover { background: var(--ri-coral); color: #fff; }

/* --- Publicidad --- */
.br-ad {
	border: var(--bd);
	box-shadow: var(--sh);
	background: #fff;
	padding: 14px;
	text-align: center;
	margin: 0 auto;
	max-width: 100%;
}

.br-ad .ad__label {
	color: #000;
	opacity: .55;
}

.br-ad .ad__slot {
	background: repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 8px, transparent 8px 16px);
	border: 2px dashed #000;
	border-radius: 0;
	color: #000;
	max-width: 100%;
}

/* --- Pie --- */
.br-foot {
	background: #000;
	color: var(--ri-yellow);
	padding: 44px 0 26px;
}

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

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

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

.br-foot a {
	color: var(--ri-yellow);
	text-decoration: none;
	font-family: var(--ri-font-ui);
	font-size: 13px;
}

.br-foot a:hover { text-decoration: underline; }

.br-foot__logo { width: 220px; height: auto; }

/* --- Responsive --- */
@media (max-width: 1024px) {
	.br-hero__grid { grid-template-columns: 1fr; }
	.br-grid { grid-template-columns: repeat(2, 1fr); }
	.br-foot__cols { grid-template-columns: repeat(2, 1fr); }
	.br-sticker { width: 92px; height: 92px; font-size: 9px; }
}

@media (max-width: 782px) {
	body.v-brutal { --bd: 2px solid #000; --sh: 4px 4px 0 #000; --sh-lg: 6px 6px 0 #000; }

	.br-grid { grid-template-columns: 1fr; }
	.br-foot__cols { grid-template-columns: 1fr; }
	.br-nav { display: none; }
	.br-sticker { display: none; }
	.br-nl { flex-direction: column; }
	.br-nl button { border-left: 0; border-top: var(--bd); }

	.br-rank li { grid-template-columns: auto 1fr; row-gap: 6px; }
	.br-rank__val { grid-column: 2; }
	.br-rank__go { display: none; }
}

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

/* --- Cajas de dato --- */
.br-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.br-stat {
	border: var(--bd);
	box-shadow: var(--sh);
	background: #fff;
	padding: 26px 22px;
	transition: transform .16s ease, box-shadow .16s ease;
}

.br-stat:nth-child(1) { background: var(--ri-coral); color: #fff; }
.br-stat:nth-child(2) { background: var(--ri-teal); }
.br-stat:nth-child(3) { background: var(--ri-yellow); }

.br-stat:hover {
	transform: translate(-4px, -4px);
	box-shadow: var(--sh-lg);
}

.br-stat__n {
	font-family: var(--ri-font-display);
	font-size: clamp(58px, 8vw, 104px);
	line-height: .78;
	margin: 0;
}

.br-stat__l {
	font-family: var(--ri-font-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 12px 0 0;
	line-height: 1.5;
}

/* --- Firmas de opinión --- */
.br-ops {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.br-op {
	border: var(--bd);
	background: #fff;
	box-shadow: var(--sh);
	padding: 22px;
	text-decoration: none;
	color: #000;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.br-op:nth-child(2) { transform: rotate(-1deg); }
.br-op:nth-child(3) { transform: rotate(.8deg); }

.br-op:hover {
	transform: rotate(0deg) translate(-4px, -4px);
	box-shadow: var(--sh-lg);
	background: var(--ri-yellow);
	text-decoration: none;
}

.br-op__who {
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--ri-font-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.br-op__av {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: var(--bd);
	background: var(--ri-teal);
	flex: 0 0 auto;
}

.br-op__t {
	font-family: var(--ri-font-display);
	font-size: 30px;
	line-height: .92;
	margin: 0;
	text-transform: uppercase;
}

/* --- Categorías --- */
.br-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.br-cat {
	padding: 11px 20px;
	border: var(--bd);
	background: #fff;
	box-shadow: 4px 4px 0 #000;
	font-family: var(--ri-font-ui);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #000;
	text-decoration: none;
	transition: transform .13s ease, box-shadow .13s ease, background .13s ease;
}

.br-cat:hover {
	background: var(--ri-coral);
	color: #fff;
	transform: translate(-3px, -3px);
	box-shadow: 7px 7px 0 #000;
	text-decoration: none;
}

.br-cat:nth-child(3n+2):hover { background: var(--ri-teal); color: #000; }
.br-cat:nth-child(3n+3):hover { background: var(--ri-brand); color: #fff; }

/* --- Lo más leído --- */
.br-mr {
	list-style: none;
	counter-reset: r;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 34px;
}

.br-mr li {
	counter-increment: r;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	align-items: baseline;
	padding: 16px 0;
	border-bottom: var(--bd);
}

.br-mr li::before {
	content: counter(r, decimal-leading-zero);
	font-family: var(--ri-font-display);
	font-size: 44px;
	line-height: .8;
	color: var(--ri-coral);
}

.br-mr a {
	font-family: var(--ri-font-display);
	font-size: 26px;
	line-height: .95;
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
}

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

.br-sec--black .br-mr a { color: #fff; }
.br-sec--black .br-mr li { border-bottom-color: rgba(255, 255, 255, .25); }
.br-sec--black .br-mr li::before { color: var(--ri-yellow); }

/* --- Reportaje ancho --- */
.br-wide {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: var(--bd);
	box-shadow: var(--sh-lg);
	background: #fff;
	text-decoration: none;
	color: #000;
	transition: transform .16s ease;
}

.br-wide:hover { transform: translate(-4px, -4px); text-decoration: none; }

.br-wide .ph {
	border: 0;
	border-right: var(--bd);
	border-radius: 0;
	min-height: 300px;
	color: #000;
}

.br-wide__body { padding: 30px; display: flex; flex-direction: column; justify-content: center; }

.br-wide__t {
	font-family: var(--ri-font-display);
	font-size: clamp(34px, 4vw, 54px);
	line-height: .88;
	margin: 12px 0;
	text-transform: uppercase;
}

/* --- Sociales del pie --- */
.br-foot .social a {
	width: 40px;
	height: 40px;
	border: 2px solid var(--ri-yellow);
	color: var(--ri-yellow);
	border-radius: 0;
}

.br-foot .social a:hover {
	background: var(--ri-yellow);
	color: #000;
	transform: translate(-2px, -2px);
	box-shadow: 3px 3px 0 var(--ri-yellow);
}

@media (max-width: 1024px) {
	.br-stats { grid-template-columns: 1fr; }
	.br-ops { grid-template-columns: 1fr; }
	.br-mr { grid-template-columns: 1fr; }
	.br-wide { grid-template-columns: 1fr; }
	.br-wide .ph { border-right: 0; border-bottom: var(--bd); min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
	.br-marquee__track,
	.br-sticker { animation: none; }

	.br-word { opacity: 1; transform: none; animation: none; }
	.br-hero__media { transform: none; }
	.br-op { transform: none; }
}