/*
Theme Name: ReseñaLibre 2026
Theme URI: https://resenalibre.com
Author: ReseñaLibre
Description: Block theme moderno para reviews de productos en México. PSR-4, WordPress 7.0, FSE.
Version: 1.0.7
Requires at least: 7.0
Requires PHP: 8.3
License: GPL v2 or later
Text Domain: resenalibre-2026
*/

/* ============================================
   0. FONT FALLBACK METRICS (CLS Prevention)
   ============================================ */
@font-face {
	font-family: "PJS Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
	font-weight: 200 800;
	font-style: normal;
	size-adjust: 92%;
	ascent-override: 105%;
	descent-override: 35%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "JBM Fallback";
	src: local("Courier New"), local("Courier");
	font-weight: 400 800;
	font-style: normal;
	size-adjust: 95%;
	ascent-override: 99%;
	descent-override: 27%;
	line-gap-override: 0%;
}

/* ============================================
   0.1 PLUS JAKARTA SANS VARIABLE FONT — self-hosted v12
   ============================================ */

/* latin-ext */
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url(assets/fonts/plus-jakarta-sans-v12-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url(assets/fonts/plus-jakarta-sans-v12-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */
:root {
	color-scheme: light only;

	/* Layout */
	--rl-container-max: 1200px;
	--rl-container-narrow: 880px;
	--rl-sidebar-width: 280px;
	--rl-header-height: 76px;

	/* z-index scale */
	--rl-z-base: 1;
	--rl-z-sticky: 100;
	--rl-z-header: 900;
	--rl-z-dropdown: 800;
	--rl-z-modal: 1000;
	--rl-z-skip-link: 9999;

	/* Semantic design tokens */
	--rl-bg-page: #f9f7f2;
	--rl-bg-white: #fff;
	--rl-nav-glass: rgba(249, 247, 242, 0.88); /* variante LIGHT — NO usada en el nav (texto del nav es blanco); reservada para nav sobre fondos claros */

	/* NAV GLASS GLOBAL — tinte ink translúcido (variante oscura, usada en .rl-header global).
	   A11Y: alpha 0.80/0.88 para que el texto blanco del nav cumpla 4.5:1 sobre secciones cream/white. */
	--rl-nav-glass-dark: rgba(25, 28, 29, 0.8);          /* reposo (sube de 0.55: 0.55 daba 3.69:1 sobre cream, FALLA AA) */
	--rl-nav-glass-dark-scrolled: rgba(25, 28, 29, 0.88); /* is-scrolled */
	--rl-section-dark: #191919;
	--rl-section-dark-2: #242424;
	--rl-blob-green: rgba(0, 182, 122, 0.18);
	--rl-blob-yellow: rgba(245, 158, 11, 0.22);

	--rl-text-headline: #191919;
	--rl-text-body: #3d3d3d;
	--rl-text-muted: #5a6478;
	--rl-text-on-dark: #f5f5f5;

	--rl-border-warm: #e8e5df;
	--rl-brand-coral: #ff6b35;
	--rl-green-trust: #00b67a;
	--rl-border-focus: #00b67a;

	/* Elevation */
	--rl-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
	--rl-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
	--rl-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.18);

	/* Radii */
	--rl-radius-card: 20px;
	--rl-radius-panel: 28px;
	--rl-radius-pill: 999px;
	--rl-radius-sm: 6px;
	--rl-radius-md: 8px;

	/* Transitions */
	--rl-transition-fast: 150ms ease;
	--rl-transition-base: 200ms ease;

	/* ============================================================
	   DESIGN SYSTEM v2 — home redesign (plan 2026-05-24 §1.1–1.5)
	   Aditivo: convive con los tokens legacy de arriba; éstos se
	   migran sección por sección en S1–S7 + barrido final.
	   ============================================================ */

	/* §1.1 Color — roles */
	--rl-ink: #191c1d;            /* marca, títulos, dark sections, footer */
	--rl-cream: #f9f7f2;          /* base global — lienzo de todo el sitio */
	--rl-cream-zebra: #fdfcf8;    /* zebra home: alterna con cream, ligeramente más blanco */
	--rl-white: #fff;          /* cards y superficies sobre cream */
	--rl-coral: #ff6b35;          /* TODA acción/CTA interno */
	--rl-coral-hover: #e85a28;
	--rl-ml-yellow: #ffe600;      /* outbound a MercadoLibre, máx jerarquía, texto ink */
	--rl-ml-yellow-hover: #ffd000;
	--rl-text: #1a2332;           /* texto cuerpo (rol nuevo) */
	--rl-serif: "Instrument Serif", georgia, "Times New Roman", serif; /* S2: acentos editoriales en itálica */
	--rl-border: #e2e5ed;         /* bordes de card */

	/* verde #00B67A (--rl-border-focus) y scores: SOLO puntuación */

	/* §1.2 Color por categoría (solid + soft tint ~10%) */
	--cat-celulares: oklch(47% 0.14 264);
	--cat-celulares-accent: oklch(74% 0.18 264);
	--cat-celulares-soft: #eaeffd;
	--cat-computacion: #0284c7;
	--cat-computacion-soft: #e0f2fe;
	--cat-computacion-accent: oklch(80% 0.18 242);
	--cat-electronica: #4338ca;
	--cat-electronica-soft: #ede9fe;
	--cat-electronica-accent: oklch(80% 0.18 277);
	--cat-audio: #7c3aed;
	--cat-audio-soft: #f5f3ff;
	--cat-audio-accent: oklch(80% 0.18 293);
	--cat-videojuegos: #a21caf;
	--cat-videojuegos-soft: #fdf4ff;
	--cat-videojuegos-accent: oklch(80% 0.18 324);
	--cat-video: #be185d;
	--cat-video-soft: #fde8f1;
	--cat-video-accent: oklch(80% 0.18 4);
	--cat-hogar: #92400e;
	--cat-hogar-soft: #fff7ed;
	--cat-hogar-accent: oklch(80% 0.18 46);
	--cat-salud: #2f6b20;
	--cat-salud-soft: #f0fdf4;
	--cat-salud-accent: oklch(80% 0.18 140);
	--cat-editorial: #a31528;
	--cat-editorial-soft: #fff1f2;
	--cat-hub: #0f766e;
	--cat-hub-soft: #e0f5f3;
	--cat-hub-accent: oklch(60% 0.18 178);
	--cat-hub-dark: oklch(38% 0.12 175); /* CTA sobre fondo teal */
	--cat-hub-dark-hover: oklch(53% 0.12 175);
	--cat-hub-ring: oklch(82% 0.08 175); /* diana decorativa */
}

/* §1.2b Category body-class tokens — --cat-current / --cat-glow / --cat-soft / --cat-tint-strong */
:root {
	--cat-glow-default: rgba(255, 107, 53, 0.25);
	--cat-soft-default: rgba(255, 107, 53, 0.13);
}

.cat-computacion {
	--cat-current: var(--cat-computacion);
	--cat-solid: var(--cat-computacion);
	--cat-glow: rgba(2, 132, 199, 0.25);
	--cat-soft: var(--cat-computacion-soft);
	--cat-tint-strong: rgba(2, 132, 199, 0.2);
	--cat-current-accent: var(--cat-computacion-accent);
}

.cat-celulares {
	--cat-current: var(--cat-celulares);
	--cat-solid: var(--cat-celulares);
	--cat-glow: rgba(29, 82, 208, 0.25);
	--cat-soft: var(--cat-celulares-soft);
	--cat-tint-strong: rgba(29, 82, 208, 0.2);
	--cat-current-accent: var(--cat-celulares-accent);
}

.cat-audio {
	--cat-current: var(--cat-audio);
	--cat-solid: var(--cat-audio);
	--cat-glow: rgba(124, 58, 237, 0.25);
	--cat-soft: var(--cat-audio-soft);
	--cat-tint-strong: rgba(124, 58, 237, 0.2);
	--cat-current-accent: var(--cat-audio-accent);
}

.cat-electronica {
	--cat-current: var(--cat-electronica);
	--cat-solid: var(--cat-electronica);
	--cat-glow: rgba(67, 56, 202, 0.25);
	--cat-soft: var(--cat-electronica-soft);
	--cat-tint-strong: rgba(67, 56, 202, 0.2);
	--cat-current-accent: var(--cat-electronica-accent);
}

.cat-videojuegos {
	--cat-current: var(--cat-videojuegos);
	--cat-solid: var(--cat-videojuegos);
	--cat-glow: rgba(162, 28, 175, 0.25);
	--cat-soft: var(--cat-videojuegos-soft);
	--cat-tint-strong: rgba(162, 28, 175, 0.2);
	--cat-current-accent: var(--cat-videojuegos-accent);
}

.cat-hogar {
	--cat-current: var(--cat-hogar);
	--cat-solid: var(--cat-hogar);
	--cat-glow: rgba(146, 64, 14, 0.25);
	--cat-soft: var(--cat-hogar-soft);
	--cat-tint-strong: rgba(146, 64, 14, 0.2);
	--cat-current-accent: var(--cat-hogar-accent);
}

.cat-salud {
	--cat-current: var(--cat-salud);
	--cat-solid: var(--cat-salud);
	--cat-glow: rgba(47, 107, 32, 0.25);
	--cat-soft: var(--cat-salud-soft);
	--cat-tint-strong: rgba(47, 107, 32, 0.2);
	--cat-current-accent: var(--cat-salud-accent);
}

.cat-video {
	--cat-current: var(--cat-video);
	--cat-solid: var(--cat-video);
	--cat-glow: rgba(190, 24, 93, 0.25);
	--cat-soft: var(--cat-video-soft);
	--cat-tint-strong: rgba(190, 24, 93, 0.2);
	--cat-current-accent: var(--cat-video-accent);
}

.cat-editorial {
	--cat-current: var(--cat-editorial);
	--cat-solid: var(--cat-editorial);
	--cat-glow: rgba(163, 21, 40, 0.25);
	--cat-soft: var(--cat-editorial-soft);
	--cat-tint-strong: rgba(163, 21, 40, 0.2);
}

.cat-hub {
	--cat-current: var(--cat-hub);
	--cat-solid: var(--cat-hub);
	--cat-glow: rgba(15, 118, 110, 0.25);
	--cat-soft: var(--cat-hub-soft);
	--cat-tint-strong: rgba(15, 118, 110, 0.2);
}

:root {

	/* §1.3 Tipografía — escala (móvil → desktop) */
	--fs-hero: clamp(2.25rem, 6vw, 4rem);    /* 36→64px, 800 */
	--fs-h2: clamp(1.75rem, 4vw, 3rem);      /* 28→48px, 800 */
	--fs-h3: clamp(1.25rem, 2.8vw, 1.5rem);  /* títulos de card, 700 — era 2.5vw: 20px en tablet igual que mobile */
	--fs-eyebrow: clamp(0.875rem, 1vw, 0.9375rem); /* 14px fijo en mobile, 15px en ≥1500px */
	--fs-body: 1rem;                         /* 16px */
	--fs-small: 0.875rem;                    /* meta */

	/* §1.4 Espaciado / layout */
	--container: 1200px;
	--section-pad-y: clamp(3.5rem, 9vw, 8rem);   /* 56→128px — 9vw: tablet 768px→69px (era 61px con 8vw) */
	--tax-gap: clamp(3rem, 5vw, 4rem);           /* 48→64px — ritmo vertical entre secciones de taxonomy */
	--rl-ring-delay: 0.6s;                        /* delay de entrada del score ring */
	--gutter: clamp(1rem, 3vw, 1.25rem);         /* 16→20px padding lateral */
	--card-radius: 20px;
	--card-shadow: 0 1px 2px rgba(22, 38, 59, 0.06), 0 8px 24px rgba(22, 38, 59, 0.06);
	--card-gap: clamp(0.75rem, 2vw, 1.25rem);

	/* §1.5 Breakpoints (mobile-first, referencia — usados en @media):
	   base ≤599 móvil · ≥600 tablet · ≥900 desktop.
	   Flechas de carrusel SOLO ≥900px; móvil/tablet = swipe + dots. */

	/* §1.6 Easing curves — naturales, sin bounce ni elastic */
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* A1: topnav mobile — 52px. Variable GLOBAL (sticky offsets en todo el sitio);
   recuperada en F4: vivía dentro del polish hero que se movió a home.css */
@media (max-width: 640px) {

	:root {
		--rl-header-height: 52px;
	}
}

/* ============================================
   2. RESET + BASE
   ============================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--rl-header-height) + 24px);
	overflow-x: clip;
}

body {
	font-family: "Plus Jakarta Sans", "PJS Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 400;
	line-height: 1.65;
	color: var(--rl-text-body);
	background-color: var(--rl-bg-page);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden; /* fallback: Safari < 15.4 no soporta clip */
	overflow-x: clip;   /* modern: no crea scroll container, preserva sticky */
}

h1,
 h2,
 h3 {
	color: var(--rl-text-headline);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

h1 {
	font-weight: 800;
}

h2 {
	font-weight: 800;
}

h3 {
	font-weight: 700;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--wp--preset--color--accent-blue);
	text-decoration: none;
	transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out);
}

a:hover {
	color: var(--wp--preset--color--blue-deep);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-blue);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/* Skip link */
.rl-skip-link {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%) translateY(calc(-100% - 8px));
	padding: 8px 16px;
	background: var(--wp--preset--color--blue-deep);
	color: var(--wp--preset--color--white);
	font-weight: 600;
	border-radius: var(--wp--custom--radius--sm);
	z-index: var(--rl-z-skip-link);
	transition: transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out);
}

.rl-skip-link:focus {
	transform: translateX(-50%) translateY(0);
}

/* ============================================
   ANIMATIONS — Section reveals + interactions
   ============================================ */

/* Base: secciones invisibles hasta que JS activa .is-visible.
   Requiere .js en <html> (inline script en header) para que sin JS las secciones
   sean visibles por defecto (progressive enhancement / FOIC guard). */
.js .rl-section {
	opacity: 0;
	translate: 0 20px;
	transition:
		opacity  500ms var(--ease-out-quart),
		translate 500ms var(--ease-out-quart);
}

.rl-section.is-visible {
	opacity: 1;
	translate: 0 0;
}

/* Stagger para top3 cards */
.rl-top3__grid .rl-top3-card:nth-child(1) {
	transition-delay: 0ms;
}

.rl-top3__grid .rl-top3-card:nth-child(2) {
	transition-delay: 80ms;
}

.rl-top3__grid .rl-top3-card:nth-child(3) {
	transition-delay: 160ms;
}

/* Stagger para scroller items */
.rl-scroller__list li:nth-child(1) {
	transition-delay: 0ms;
}

.rl-scroller__list li:nth-child(2) {
	transition-delay: 40ms;
}

.rl-scroller__list li:nth-child(3) {
	transition-delay: 80ms;
}

.rl-scroller__list li:nth-child(4) {
	transition-delay: 120ms;
}

/* Button press feedback — físico sin translate exagerado */
.rl-btn--coral:active,
.rl-btn--ml:active {
	transform: translateY(1px);
	box-shadow: 0 1px 3px rgba(22, 38, 59, 0.12);
	transition-duration: 80ms;
}


/* ============================================
   3. CONTAINER
   ============================================ */
.rl-container {
	width: 100%;
	max-width: var(--rl-container-max);
	margin: 0 auto;
	padding: 0 var(--wp--custom--spacing--md);
}

@media (min-width: 768px) {

	.rl-container {
		padding: 0 var(--wp--custom--spacing--xl);
	}
}

/* ============================================
   4. HEADER — Nav negro Trustpilot
   ============================================ */

/* WordPress wraps the header template part in <header class="wp-block-template-part">.
   That wrapper is the sticky's containing block, so the wrapper itself must be sticky —
   otherwise the short wrapper scrolls the (inner) sticky header out of view. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: var(--rl-z-header);

	/* Full-bleed: la barra abarca todo el ancho del viewport aunque .wp-site-blocks
	   tenga root-padding. El contenido interno sigue acotado por
	   .rl-header__inner.rl-container (1200px). */
	margin-inline: calc(50% - 50vw);
}

/* Evita scroll horizontal por el 50vw del full-bleed (clip no rompe sticky). */
html {
	overflow-x: clip;
}

.rl-header {
	position: sticky;
	top: 0;
	z-index: var(--rl-z-header);

	/* Fallback sólido para navegadores sin backdrop-filter (la capa glass lo supersede) */
	background: var(--rl-ink);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition:
		background 300ms cubic-bezier(0, 0, 0.2, 1),
		box-shadow 300ms cubic-bezier(0, 0, 0.2, 1),
		border-color 300ms cubic-bezier(0, 0, 0.2, 1);
	width: 100%;
	contain: layout style; /* limita repaint al elemento durante scroll */
}

.rl-header.is-scrolled {
	box-shadow: 0 1px 16px rgba(0, 0, 0, 0.35);
}

/* ============================================
   NAV GLASS GLOBAL (ENG-2026-0529-003/004)
   Glass del nav, antes solo en producto, ahora en TODO el sitio.
   Tinte ink OSCURO: el texto del nav es blanco, así legibilidad
   AA se mantiene sobre fondos claros y oscuros.
   A11Y FIX (1.4.3): alpha reposo 0.80 (no 0.55) → texto blanco
   #f5f5f5 sobre cream compuesto ~7:1 (0.55 daba 3.69:1, FALLA).
   ============================================ */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

	.rl-header {
		background: var(--rl-nav-glass-dark);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		transition:
			background var(--rl-transition-base),
			box-shadow var(--rl-transition-base),
			backdrop-filter var(--rl-transition-base);
	}

	.rl-header.is-scrolled {
		background: var(--rl-nav-glass-dark-scrolled);
		box-shadow: 0 1px 24px rgba(0, 0, 0, 0.45);
	}
}


/* ════════ Top-nav TRANSPARENTE sobre hero (efficient.app) — Iteración 2 #1 ══
   Solo en body.rl-transparent-nav (páginas con hero oscuro full-bleed; ver
   inc/functions.php). El header arranca transparente integrado al hero; al
   scrollear (main.js → .is-scrolled, scrollY>60) recupera el glass sólido.
   El resto del sitio conserva el header glass por defecto (sin cambios). */
body.rl-transparent-nav .rl-header {
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}

body.rl-transparent-nav .rl-header.is-scrolled {
	background: rgba(25, 28, 29, 0.82); /* era 0.55 → 3.69:1 falla AA; 0.82 = ~7:1 con texto blanco */
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom-color: rgba(255, 255, 255, 0.06);
	box-shadow: 0 1px 16px rgba(0, 0, 0, 0.35);
}

/* Heroes oscuros suben bajo el header transparente — padding uniforme 1.25rem. */
body.rl-transparent-nav .rl-hero-dark,
body.rl-transparent-nav .rl-rdr-hero {
	margin-block-start: calc(-1 * var(--rl-header-height, 76px));
	padding-block-start: calc(1.25rem + var(--rl-header-height, 76px));
	padding-block-end: 1.25rem;
	min-height: auto; /* desktop: content-driven — Hero Acer rule */
}

/* comp-archive-hero: el __body ya compensa el header en su padding-top */
body.rl-transparent-nav .rl-comp-archive-hero {
	margin-block-start: calc(-1 * var(--rl-header-height, 76px));
	min-height: auto;
}

/* Mobile: primer pantallazo completo — regla no negociable */
@media (max-width: 767px) {

	body.rl-transparent-nav .rl-hero-dark,
	body.rl-transparent-nav .rl-comp-archive-hero {
		min-height: 100svh;
		min-height: 100dvh;
	}

	/* Breathing room bajo el nav — clamp dvh, aplica a todos los heroes del topnav */
	body.rl-transparent-nav .rl-hero,
	body.rl-transparent-nav .rl-archive-producto-hero,
	body.rl-transparent-nav .rl-marcas-hub__hero,
	body.rl-transparent-nav .rl-comp-archive-hero,
	body.rl-transparent-nav .rl-guia-archive-hero,
	body.rl-transparent-nav .rl-radar-archive {
		padding-block-start: calc(clamp(1rem, 3dvh, 2rem) + var(--rl-header-height, 64px));
		padding-block-end: 0.25rem;
	}
}

/* single-rl_guia: hero claro — header arranca con glass ligero para efecto flotante */
body.single-rl_guia .rl-header:not(.is-scrolled) {
	background: oklch(18% 0.01 250 / 0.45);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom-color: transparent;
	box-shadow: none;
}

@media (max-width: 640px) {

	body.rl-transparent-nav .rl-cat-tax-hero {

		/* flex para las 3 zonas del hero de categoría en mobile */
		display: flex;
		flex-direction: column;
	}

	/* #hero móvil — 3 zonas (top/mid/bottom) distribuidas con space-between, llenan el fold */
	.rl-cat-tax-hero__inner {
		flex: 1 1 auto;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.rl-cat-tax-hero__zone {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.rl-cat-tax-hero__top {
		gap: 0.5rem;
	}

	.rl-cat-tax-hero__mid {
		gap: 1rem;
	}

	.rl-cat-tax-hero__zone > * {
		margin-top: 0;
		margin-bottom: 0;
	}

	.rl-tax-hero-cta {
		align-self: stretch;
	} /* botones full-width */
}

/* comp-hero mobile: .rl-container es el único hijo directo del flex hero.
   Se convierte en flex column que llena la altura del hero para que los
   margin:auto en crumb/headline distribuyan el espacio libre del 100dvh. */
@media (max-width: 639px) {

	body.rl-transparent-nav .rl-comp-hero {
		height: 100dvh;
		align-items: stretch;
	}

	body.rl-transparent-nav .rl-comp-hero > .rl-container {
		display: flex;
		flex-direction: column;
		flex: 1 1 0;   /* ocupa todo el eje principal del hero → da altura a los auto margins */
		width: 100%;
		overflow: hidden;
	}
}

/* Hero tablet 768-899px: padding-top intermedio (mobile 56px → tablet 100px → desktop 108px) */
@media (min-width: 768px) and (max-width: 899px) {

	body.rl-transparent-nav .rl-hero {
		padding-block-start: calc(1.5rem + var(--rl-header-height, 76px));
		padding-block-end: 2rem;
	}
}

/* Desktop: más aire sobre y bajo el hero */
@media (min-width: 768px) {

	body.rl-transparent-nav .rl-hero-dark {
		padding-block-start: calc(2rem + var(--rl-header-height, 76px));
		padding-block-end: 2.5rem;
	}
}

/* ── Fondo uniforme = #16263B (igual que /comparar/) para todos los archive heroes ──
   Exclusiones: home usa foto, single-producto y taxonomías usan color de categoría. */
body.rl-transparent-nav .rl-aph,
body.rl-transparent-nav .rl-guia-archive-hero,
body.rl-transparent-nav .rl-oferta-archive-hero,
body.rl-transparent-nav .rl-search-hero,
body.rl-transparent-nav .rl-404-page {
	background-color: #16263b;
	background-image: none;
}

/* Radar: background en inline CSS de radar.php — ver ahí */

/* ── Centrado universal + tipografía responsive en archive/page heroes ── */
body.rl-transparent-nav .rl-archive-producto-hero,
body.rl-transparent-nav .rl-aph,
body.rl-transparent-nav .rl-guia-archive-hero,
body.rl-transparent-nav .rl-oferta-archive-hero,
body.rl-transparent-nav .rl-comp-archive-hero,
body.rl-transparent-nav .rl-radar-archive,
body.rl-transparent-nav .rl-search-hero,
body.rl-transparent-nav .rl-marcas-hub__hero,
body.rl-transparent-nav .rl-metodo-hero-dark {
	text-align: center;
	align-items: center;
	justify-content: center;
}

body.rl-transparent-nav .rl-archive-producto-hero .rl-container,
body.rl-transparent-nav .rl-aph .rl-container,
body.rl-transparent-nav .rl-guia-archive-hero .rl-container,
body.rl-transparent-nav .rl-oferta-archive-hero .rl-container,
body.rl-transparent-nav .rl-comp-archive-hero .rl-container,
body.rl-transparent-nav .rl-radar-archive .rl-container,
body.rl-transparent-nav .rl-search-hero .rl-container,
body.rl-transparent-nav .rl-marcas-hub__hero .rl-container,
body.rl-transparent-nav .rl-metodo-hero-dark .rl-container {
	max-width: 680px;
	margin-inline: auto;
}

/* Tipografía clamp() en heroes: h1, eyebrow, subtítulo */
body.rl-transparent-nav .rl-archive-producto-hero h1,
body.rl-transparent-nav .rl-guia-archive-hero h1,
body.rl-transparent-nav .rl-oferta-archive-hero h1,
body.rl-transparent-nav .rl-comp-archive-hero h1,
body.rl-transparent-nav .rl-radar-archive h1,
body.rl-transparent-nav .rl-search-hero h1,
body.rl-transparent-nav .rl-marcas-hub__hero h1,
body.rl-transparent-nav .rl-metodo-hero-dark h1 {
	font-size: clamp(1.75rem, 5vw, 3.5rem);
}

body.rl-transparent-nav .rl-archive-producto-hero .rl-eyebrow,
body.rl-transparent-nav .rl-guia-archive-hero .rl-eyebrow,
body.rl-transparent-nav .rl-oferta-archive-hero .rl-eyebrow,
body.rl-transparent-nav .rl-comp-archive-hero .rl-eyebrow,
body.rl-transparent-nav .rl-radar-archive .rl-eyebrow,
body.rl-transparent-nav .rl-search-hero .rl-eyebrow,
body.rl-transparent-nav .rl-marcas-hub__hero .rl-eyebrow,
body.rl-transparent-nav .rl-metodo-hero-dark .rl-eyebrow {
	font-size: clamp(0.75rem, 1.5vw, 0.875rem);
}

/* ── Bloom global: mismo patrón que /comparar/ — coral en esquinas superiores ── */
body .rl-search-hero__bloom,
body .rl-404-hero__bloom,
body .rl-radar-hero__bloom {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 550px 420px at 0% 0%, rgba(255, 107, 53, 0.22) 0%, transparent 65%),
		radial-gradient(ellipse 550px 420px at 100% 0%, rgba(255, 107, 53, 0.22) 0%, transparent 65%),
		radial-gradient(ellipse 300px 200px at 50% 100%, rgba(255, 107, 53, 0.08) 0%, transparent 70%);
	z-index: 0;
}

/* Desactiva pseudo-elementos del bloom de radar (reemplazados por el gradient global) */
body .rl-radar-hero__bloom::before,
body .rl-radar-hero__bloom::after {
	display: none;
}

/* ── Estilo radar: navy BG para heroes que no lo definen individualmente ── */
body.rl-transparent-nav .rl-comp-hero,
body.rl-transparent-nav .rl-marcas-hub__hero {
	background-color: var(--cat-current, #16263b);
}


/* ── Dot grid (::after) ── */
body.rl-transparent-nav .rl-archive-producto-hero::after,
body.rl-transparent-nav .rl-guia-archive-hero::after,
body.rl-transparent-nav .rl-oferta-archive-hero::after,
body.rl-transparent-nav .rl-comp-archive-hero::after,
body.rl-transparent-nav .rl-radar-archive::after,
body.rl-transparent-nav .rl-search-hero::after,
body.rl-transparent-nav .rl-404-page::after,
body.rl-transparent-nav .rl-oferta-hero-dark::after,
body.rl-transparent-nav .rl-marcas-hub__hero::after,
body.rl-transparent-nav .rl-metodo-hero-dark::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 28px 28px;
	pointer-events: none;
	z-index: 0;
}

/* ── Shared hero entrance animation (todas las páginas hub y cat) ────────── */
@keyframes rl-hero-in {

	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* §cat-hub — hero fondo verde navegador */
body.cat-hub .rl-archive-producto-hero,
body.cat-hub .rl-guia-archive-hero,
body.cat-hub .rl-oferta-archive-hero,
body.cat-hub .rl-comp-archive-hero,
body.cat-hub .rl-radar-archive,
body.cat-hub .rl-marcas-hub__hero,
body.cat-hub .rl-search-hero,
body.cat-hub .rl-404-page {
	background: var(--cat-hub, #0f766e);
}

/* §cat-hub — topnav, footer logo, newsletter, footer star → --cat-hub-accent */
body.cat-hub .rl-logo__icon,
body.cat-hub .rl-logo__resena {
	color: oklch(79% 0.17 168) !important;
}

body.cat-hub .rl-header .rl-nav-mia > .wp-block-navigation-item__content {
	background: oklch(60% 0.18 178) !important;
}

body.cat-hub .rl-header .rl-nav-mia > .wp-block-navigation-item__content:hover {
	background: oklch(66% 0.18 178) !important;
}

body.cat-hub .rl-footer a.rl-footer__logo svg {
	stroke: var(--cat-hub-accent);
}

body.cat-hub .rl-footer__trust-score {
	color: var(--cat-hub-accent);
}

body.cat-hub .rl-footer__stars {
	color: var(--cat-hub-accent);
}

body.cat-hub .rl-newsletter .rl-btn--coral {
	background: var(--cat-hub-accent);
	border-color: var(--cat-hub-accent);
}

body.cat-hub .rl-newsletter .rl-btn--coral:hover {
	background: oklch(66% 0.18 178);
	border-color: oklch(66% 0.18 178);
}

/* trust section — replace green con teal-hub */
body.cat-hub .rl-panel--trust,
body.cat-hub .rl-panel--green-tint {
	background: oklch(60% 0.18 178 / 0.06);
	border-color: oklch(60% 0.18 178 / 0.2);
}

body.cat-hub .rl-panel--green-tint .rl-trust__bullet-icon {
	color: var(--cat-hub-accent);
	background: oklch(60% 0.18 178 / 0.1);
}

body.cat-hub .rl-trust__rating-stars svg {
	fill: var(--cat-hub-accent, oklch(60% 0.18 178));
}

body.cat-hub .rl-trust__rating-score {
	color: var(--cat-hub-accent);
}

body.cat-hub .rl-trust .rl-eyebrow {
	color: var(--cat-hub-accent);
}

body.cat-hub .rl-radar-sc-section .rl-eyebrow {
	color: var(--cat-hub-accent);
}

body.cat-hub .rl-trust .rl-btn--coral {
	background: var(--cat-hub);
	border-color: var(--cat-hub);
	color: #fff;
}

body.cat-hub .rl-trust .rl-btn--coral:hover {
	background: var(--cat-hub-accent);
	border-color: var(--cat-hub-accent);
}

/* ── Hero — fondo muteado por categoría (igualar luminosidad/saturación a
   celulares: oklch(47% 0.14 {hue}) en vez del hex de marca, más vivo).
   Aplica a single-producto (.rl-prod-hero) y archivo de categoría (.rl-cat-tax-hero) ── */
body.cat-computacion .rl-prod-hero,
 body.cat-computacion .rl-cat-tax-hero,
 body.cat-computacion .rl-marca-tax-hero {
	background: oklch(47% 0.14 242);
}

body.cat-electronica .rl-prod-hero,
 body.cat-electronica .rl-cat-tax-hero,
 body.cat-electronica .rl-marca-tax-hero {
	background: oklch(47% 0.14 277);
}

body.cat-audio       .rl-prod-hero,
 body.cat-audio       .rl-cat-tax-hero,
 body.cat-audio       .rl-marca-tax-hero {
	background: oklch(47% 0.14 293);
}

body.cat-videojuegos .rl-prod-hero,
 body.cat-videojuegos .rl-cat-tax-hero,
 body.cat-videojuegos .rl-marca-tax-hero {
	background: oklch(47% 0.14 324);
}

body.cat-video       .rl-prod-hero,
 body.cat-video       .rl-cat-tax-hero,
 body.cat-video       .rl-marca-tax-hero {
	background: oklch(47% 0.14 4);
}

body.cat-hogar       .rl-prod-hero,
 body.cat-hogar       .rl-cat-tax-hero,
 body.cat-hogar       .rl-marca-tax-hero {
	background: oklch(47% 0.14 46);
}

body.cat-salud       .rl-prod-hero,
 body.cat-salud       .rl-cat-tax-hero,
 body.cat-salud       .rl-marca-tax-hero {
	background: oklch(47% 0.14 140);
}

/* ── Celulares — single-rl_producto topnav + footer + hero UI ────────── */
body.cat-celulares .rl-logo__icon,
body.cat-celulares .rl-logo__resena {
	color: var(--cat-celulares-accent) !important;
}

body.cat-celulares .rl-header .rl-nav-mia > .wp-block-navigation-item__content {
	background: oklch(62% 0.18 264) !important;
}

body.cat-celulares .rl-header .rl-nav-mia > .wp-block-navigation-item__content:hover {
	background: oklch(67% 0.18 264) !important;
}

body.cat-celulares .rl-footer a.rl-footer__logo svg {
	stroke: var(--cat-celulares-accent);
}

body.cat-celulares .rl-newsletter .rl-btn--coral {
	background: var(--cat-celulares-accent);
	border-color: var(--cat-celulares-accent);
	color: #fff;
}

body.cat-celulares .rl-newsletter .rl-btn--coral:hover {
	background: oklch(80% 0.15 264);
	border-color: oklch(80% 0.15 264);
}

body.cat-celulares .rl-prod-hero__price-dot {
	background: var(--cat-celulares-accent);
	box-shadow: 0 0 0 3px oklch(74% 0.18 264 / 0.25);
	animation: rl-pulse-celulares 2.2s ease-in-out infinite;
}

@keyframes rl-pulse-celulares {

	0%,
 100% {
		box-shadow: 0 0 0 3px oklch(74% 0.18 264 / 0.25);
	}

	50% {
		box-shadow: 0 0 0 6px oklch(74% 0.18 264 / 0.08);
	}
}

body.cat-celulares .rl-prod-hero .rl-ghost-btn {
	background: oklch(68% 0.18 264);
	color: #fff;
}

body.cat-celulares .rl-prod-hero .rl-ghost-btn:hover {
	filter: brightness(0.88);
	transform: translateY(-1px);
}

/* big-cta (Decidido) */
body.cat-celulares .rl-prod-big-cta__inner {
	background: oklch(74% 0.18 264 / 0.09);
	border-color: oklch(74% 0.18 264 / 0.22);
}

body.cat-celulares .rl-prod-big-cta__blob {
	background: radial-gradient(circle, oklch(74% 0.18 264 / 0.25), transparent 60%);
}

body.cat-celulares .rl-prod-big-cta .rl-ghost-btn {
	background: var(--cat-celulares);
	color: #fff;
	border-color: var(--cat-celulares);
}

body.cat-celulares .rl-prod-big-cta .rl-ghost-btn:hover {
	background: oklch(52% 0.16 264);
	border-color: oklch(52% 0.16 264);
	filter: none;
	transform: translateY(-1px);
}

/* Nuestro método strip */
body.cat-celulares .rl-tax-method-strip {
	background: var(--rl-cream, #f9f7f2);
	padding-top: 0;
	padding-bottom: 2rem;
}

body.cat-celulares .rl-tax-method-strip__inner {
	background: oklch(74% 0.18 264 / 0.14);
	border-color: oklch(74% 0.18 264 / 0.28);
}

body.cat-celulares .rl-tax-method-strip__eyebrow {
	color: var(--cat-celulares-accent);
}

body.cat-celulares .rl-tax-method-strip__pills li::before {
	color: var(--cat-celulares-accent);
}

body.cat-celulares .rl-tax-method-strip .rl-btn--coral {
	background: var(--cat-celulares);
	border-color: var(--cat-celulares);
	color: #fff;
}

body.cat-celulares .rl-tax-method-strip .rl-btn--coral:hover {
	background: oklch(52% 0.16 264);
	border-color: oklch(52% 0.16 264);
}

/* ── Computación — single-rl_producto topnav + footer + hero UI ──────── */
body.cat-computacion .rl-logo__icon,
body.cat-computacion .rl-logo__resena {
	color: var(--cat-computacion-accent) !important;
}

body.cat-computacion .rl-header .rl-nav-mia > .wp-block-navigation-item__content {
	background: oklch(62% 0.18 242) !important;
}

body.cat-computacion .rl-header .rl-nav-mia > .wp-block-navigation-item__content:hover {
	background: oklch(67% 0.18 242) !important;
}

body.cat-computacion .rl-footer a.rl-footer__logo svg {
	stroke: var(--cat-computacion-accent);
}

body.cat-computacion .rl-newsletter .rl-btn--coral {
	background: var(--cat-computacion-accent);
	border-color: var(--cat-computacion-accent);
	color: #fff;
}

body.cat-computacion .rl-newsletter .rl-btn--coral:hover {
	background: oklch(80% 0.15 242);
	border-color: oklch(80% 0.15 242);
}

body.cat-computacion .rl-prod-hero__price-dot {
	background: var(--cat-computacion-accent);
	box-shadow: 0 0 0 3px oklch(74% 0.18 242 / 0.25);
	animation: rl-pulse-computacion 2.2s ease-in-out infinite;
}

@keyframes rl-pulse-computacion {

	0%,
 100% {
		box-shadow: 0 0 0 3px oklch(74% 0.18 242 / 0.25);
	}

	50% {
		box-shadow: 0 0 0 6px oklch(74% 0.18 242 / 0.08);
	}
}

body.cat-computacion .rl-prod-hero .rl-ghost-btn {
	background: oklch(68% 0.18 242);
	color: #fff;
}

body.cat-computacion .rl-prod-hero .rl-ghost-btn:hover {
	filter: brightness(0.88);
	transform: translateY(-1px);
}

/* big-cta (Decidido) */
body.cat-computacion .rl-prod-big-cta__inner {
	background: oklch(74% 0.18 242 / 0.09);
	border-color: oklch(74% 0.18 242 / 0.22);
}

body.cat-computacion .rl-prod-big-cta__blob {
	background: radial-gradient(circle, oklch(74% 0.18 242 / 0.25), transparent 60%);
}

body.cat-computacion .rl-prod-big-cta .rl-ghost-btn {
	background: var(--cat-computacion);
	color: #fff;
	border-color: var(--cat-computacion);
}

body.cat-computacion .rl-prod-big-cta .rl-ghost-btn:hover {
	background: oklch(52% 0.16 242);
	border-color: oklch(52% 0.16 242);
	filter: none;
	transform: translateY(-1px);
}

/* Nuestro método strip */
body.cat-computacion .rl-tax-method-strip {
	background: var(--rl-cream, #f9f7f2);
	padding-top: 0;
	padding-bottom: 2rem;
}

body.cat-computacion .rl-tax-method-strip__inner {
	background: oklch(74% 0.18 242 / 0.14);
	border-color: oklch(74% 0.18 242 / 0.28);
}

body.cat-computacion .rl-tax-method-strip__eyebrow {
	color: var(--cat-computacion-accent);
}

body.cat-computacion .rl-tax-method-strip__pills li::before {
	color: var(--cat-computacion-accent);
}

body.cat-computacion .rl-tax-method-strip .rl-btn--coral {
	background: var(--cat-computacion);
	border-color: var(--cat-computacion);
	color: #fff;
}

body.cat-computacion .rl-tax-method-strip .rl-btn--coral:hover {
	background: oklch(52% 0.16 242);
	border-color: oklch(52% 0.16 242);
}

/* ── Electrónica — single-rl_producto topnav + footer + hero UI ──────── */
body.cat-electronica .rl-logo__icon,
body.cat-electronica .rl-logo__resena {
	color: var(--cat-electronica-accent) !important;
}

body.cat-electronica .rl-header .rl-nav-mia > .wp-block-navigation-item__content {
	background: oklch(62% 0.18 277) !important;
}

body.cat-electronica .rl-header .rl-nav-mia > .wp-block-navigation-item__content:hover {
	background: oklch(67% 0.18 277) !important;
}

body.cat-electronica .rl-footer a.rl-footer__logo svg {
	stroke: var(--cat-electronica-accent);
}

body.cat-electronica .rl-newsletter .rl-btn--coral {
	background: var(--cat-electronica-accent);
	border-color: var(--cat-electronica-accent);
	color: #fff;
}

body.cat-electronica .rl-newsletter .rl-btn--coral:hover {
	background: oklch(80% 0.15 277);
	border-color: oklch(80% 0.15 277);
}

body.cat-electronica .rl-prod-hero__price-dot {
	background: var(--cat-electronica-accent);
	box-shadow: 0 0 0 3px oklch(74% 0.18 277 / 0.25);
	animation: rl-pulse-electronica 2.2s ease-in-out infinite;
}

@keyframes rl-pulse-electronica {

	0%,
 100% {
		box-shadow: 0 0 0 3px oklch(74% 0.18 277 / 0.25);
	}

	50% {
		box-shadow: 0 0 0 6px oklch(74% 0.18 277 / 0.08);
	}
}

body.cat-electronica .rl-prod-hero .rl-ghost-btn {
	background: oklch(68% 0.18 277);
	color: #fff;
}

body.cat-electronica .rl-prod-hero .rl-ghost-btn:hover {
	filter: brightness(0.88);
	transform: translateY(-1px);
}

/* big-cta (Decidido) */
body.cat-electronica .rl-prod-big-cta__inner {
	background: oklch(74% 0.18 277 / 0.09);
	border-color: oklch(74% 0.18 277 / 0.22);
}

body.cat-electronica .rl-prod-big-cta__blob {
	background: radial-gradient(circle, oklch(74% 0.18 277 / 0.25), transparent 60%);
}

body.cat-electronica .rl-prod-big-cta .rl-ghost-btn {
	background: var(--cat-electronica);
	color: #fff;
	border-color: var(--cat-electronica);
}

body.cat-electronica .rl-prod-big-cta .rl-ghost-btn:hover {
	background: oklch(52% 0.16 277);
	border-color: oklch(52% 0.16 277);
	filter: none;
	transform: translateY(-1px);
}

/* Nuestro método strip */
body.cat-electronica .rl-tax-method-strip {
	background: var(--rl-cream, #f9f7f2);
	padding-top: 0;
	padding-bottom: 2rem;
}

body.cat-electronica .rl-tax-method-strip__inner {
	background: oklch(74% 0.18 277 / 0.14);
	border-color: oklch(74% 0.18 277 / 0.28);
}

body.cat-electronica .rl-tax-method-strip__eyebrow {
	color: var(--cat-electronica-accent);
}

body.cat-electronica .rl-tax-method-strip__pills li::before {
	color: var(--cat-electronica-accent);
}

body.cat-electronica .rl-tax-method-strip .rl-btn--coral {
	background: var(--cat-electronica);
	border-color: var(--cat-electronica);
	color: #fff;
}

body.cat-electronica .rl-tax-method-strip .rl-btn--coral:hover {
	background: oklch(52% 0.16 277);
	border-color: oklch(52% 0.16 277);
}

/* ── Audio — single-rl_producto topnav + footer + hero UI ────────────── */
body.cat-audio .rl-logo__icon,
body.cat-audio .rl-logo__resena {
	color: var(--cat-audio-accent) !important;
}

body.cat-audio .rl-header .rl-nav-mia > .wp-block-navigation-item__content {
	background: oklch(62% 0.18 293) !important;
}

body.cat-audio .rl-header .rl-nav-mia > .wp-block-navigation-item__content:hover {
	background: oklch(67% 0.18 293) !important;
}

body.cat-audio .rl-footer a.rl-footer__logo svg {
	stroke: var(--cat-audio-accent);
}

body.cat-audio .rl-newsletter .rl-btn--coral {
	background: var(--cat-audio-accent);
	border-color: var(--cat-audio-accent);
	color: #fff;
}

body.cat-audio .rl-newsletter .rl-btn--coral:hover {
	background: oklch(80% 0.15 293);
	border-color: oklch(80% 0.15 293);
}

body.cat-audio .rl-prod-hero__price-dot {
	background: var(--cat-audio-accent);
	box-shadow: 0 0 0 3px oklch(74% 0.18 293 / 0.25);
	animation: rl-pulse-audio 2.2s ease-in-out infinite;
}

@keyframes rl-pulse-audio {

	0%,
 100% {
		box-shadow: 0 0 0 3px oklch(74% 0.18 293 / 0.25);
	}

	50% {
		box-shadow: 0 0 0 6px oklch(74% 0.18 293 / 0.08);
	}
}

body.cat-audio .rl-prod-hero .rl-ghost-btn {
	background: oklch(68% 0.18 293);
	color: #fff;
}

body.cat-audio .rl-prod-hero .rl-ghost-btn:hover {
	filter: brightness(0.88);
	transform: translateY(-1px);
}

/* big-cta (Decidido) */
body.cat-audio .rl-prod-big-cta__inner {
	background: oklch(74% 0.18 293 / 0.09);
	border-color: oklch(74% 0.18 293 / 0.22);
}

body.cat-audio .rl-prod-big-cta__blob {
	background: radial-gradient(circle, oklch(74% 0.18 293 / 0.25), transparent 60%);
}

body.cat-audio .rl-prod-big-cta .rl-ghost-btn {
	background: var(--cat-audio);
	color: #fff;
	border-color: var(--cat-audio);
}

body.cat-audio .rl-prod-big-cta .rl-ghost-btn:hover {
	background: oklch(52% 0.16 293);
	border-color: oklch(52% 0.16 293);
	filter: none;
	transform: translateY(-1px);
}

/* Nuestro método strip */
body.cat-audio .rl-tax-method-strip {
	background: var(--rl-cream, #f9f7f2);
	padding-top: 0;
	padding-bottom: 2rem;
}

body.cat-audio .rl-tax-method-strip__inner {
	background: oklch(74% 0.18 293 / 0.14);
	border-color: oklch(74% 0.18 293 / 0.28);
}

body.cat-audio .rl-tax-method-strip__eyebrow {
	color: var(--cat-audio-accent);
}

body.cat-audio .rl-tax-method-strip__pills li::before {
	color: var(--cat-audio-accent);
}

body.cat-audio .rl-tax-method-strip .rl-btn--coral {
	background: var(--cat-audio);
	border-color: var(--cat-audio);
	color: #fff;
}

body.cat-audio .rl-tax-method-strip .rl-btn--coral:hover {
	background: oklch(52% 0.16 293);
	border-color: oklch(52% 0.16 293);
}

/* ── Videojuegos — single-rl_producto topnav + footer + hero UI ──────── */
body.cat-videojuegos .rl-logo__icon,
body.cat-videojuegos .rl-logo__resena {
	color: var(--cat-videojuegos-accent) !important;
}

body.cat-videojuegos .rl-header .rl-nav-mia > .wp-block-navigation-item__content {
	background: oklch(62% 0.18 324) !important;
}

body.cat-videojuegos .rl-header .rl-nav-mia > .wp-block-navigation-item__content:hover {
	background: oklch(67% 0.18 324) !important;
}

body.cat-videojuegos .rl-footer a.rl-footer__logo svg {
	stroke: var(--cat-videojuegos-accent);
}

body.cat-videojuegos .rl-newsletter .rl-btn--coral {
	background: var(--cat-videojuegos-accent);
	border-color: var(--cat-videojuegos-accent);
	color: #fff;
}

body.cat-videojuegos .rl-newsletter .rl-btn--coral:hover {
	background: oklch(80% 0.15 324);
	border-color: oklch(80% 0.15 324);
}

body.cat-videojuegos .rl-prod-hero__price-dot {
	background: var(--cat-videojuegos-accent);
	box-shadow: 0 0 0 3px oklch(74% 0.18 324 / 0.25);
	animation: rl-pulse-videojuegos 2.2s ease-in-out infinite;
}

@keyframes rl-pulse-videojuegos {

	0%,
 100% {
		box-shadow: 0 0 0 3px oklch(74% 0.18 324 / 0.25);
	}

	50% {
		box-shadow: 0 0 0 6px oklch(74% 0.18 324 / 0.08);
	}
}

body.cat-videojuegos .rl-prod-hero .rl-ghost-btn {
	background: oklch(68% 0.18 324);
	color: #fff;
}

body.cat-videojuegos .rl-prod-hero .rl-ghost-btn:hover {
	filter: brightness(0.88);
	transform: translateY(-1px);
}

/* big-cta (Decidido) */
body.cat-videojuegos .rl-prod-big-cta__inner {
	background: oklch(74% 0.18 324 / 0.09);
	border-color: oklch(74% 0.18 324 / 0.22);
}

body.cat-videojuegos .rl-prod-big-cta__blob {
	background: radial-gradient(circle, oklch(74% 0.18 324 / 0.25), transparent 60%);
}

body.cat-videojuegos .rl-prod-big-cta .rl-ghost-btn {
	background: var(--cat-videojuegos);
	color: #fff;
	border-color: var(--cat-videojuegos);
}

body.cat-videojuegos .rl-prod-big-cta .rl-ghost-btn:hover {
	background: oklch(52% 0.16 324);
	border-color: oklch(52% 0.16 324);
	filter: none;
	transform: translateY(-1px);
}

/* Nuestro método strip */
body.cat-videojuegos .rl-tax-method-strip {
	background: var(--rl-cream, #f9f7f2);
	padding-top: 0;
	padding-bottom: 2rem;
}

body.cat-videojuegos .rl-tax-method-strip__inner {
	background: oklch(74% 0.18 324 / 0.14);
	border-color: oklch(74% 0.18 324 / 0.28);
}

body.cat-videojuegos .rl-tax-method-strip__eyebrow {
	color: var(--cat-videojuegos-accent);
}

body.cat-videojuegos .rl-tax-method-strip__pills li::before {
	color: var(--cat-videojuegos-accent);
}

body.cat-videojuegos .rl-tax-method-strip .rl-btn--coral {
	background: var(--cat-videojuegos);
	border-color: var(--cat-videojuegos);
	color: #fff;
}

body.cat-videojuegos .rl-tax-method-strip .rl-btn--coral:hover {
	background: oklch(52% 0.16 324);
	border-color: oklch(52% 0.16 324);
}

/* ── Video — single-rl_producto topnav + footer + hero UI ────────────── */
body.cat-video .rl-logo__icon,
body.cat-video .rl-logo__resena {
	color: var(--cat-video-accent) !important;
}

body.cat-video .rl-header .rl-nav-mia > .wp-block-navigation-item__content {
	background: oklch(62% 0.18 4) !important;
}

body.cat-video .rl-header .rl-nav-mia > .wp-block-navigation-item__content:hover {
	background: oklch(67% 0.18 4) !important;
}

body.cat-video .rl-footer a.rl-footer__logo svg {
	stroke: var(--cat-video-accent);
}

body.cat-video .rl-newsletter .rl-btn--coral {
	background: var(--cat-video-accent);
	border-color: var(--cat-video-accent);
	color: #fff;
}

body.cat-video .rl-newsletter .rl-btn--coral:hover {
	background: oklch(80% 0.15 4);
	border-color: oklch(80% 0.15 4);
}

body.cat-video .rl-prod-hero__price-dot {
	background: var(--cat-video-accent);
	box-shadow: 0 0 0 3px oklch(74% 0.18 4 / 0.25);
	animation: rl-pulse-video 2.2s ease-in-out infinite;
}

@keyframes rl-pulse-video {

	0%,
 100% {
		box-shadow: 0 0 0 3px oklch(74% 0.18 4 / 0.25);
	}

	50% {
		box-shadow: 0 0 0 6px oklch(74% 0.18 4 / 0.08);
	}
}

body.cat-video .rl-prod-hero .rl-ghost-btn {
	background: oklch(68% 0.18 4);
	color: #fff;
}

body.cat-video .rl-prod-hero .rl-ghost-btn:hover {
	filter: brightness(0.88);
	transform: translateY(-1px);
}

/* big-cta (Decidido) */
body.cat-video .rl-prod-big-cta__inner {
	background: oklch(74% 0.18 4 / 0.09);
	border-color: oklch(74% 0.18 4 / 0.22);
}

body.cat-video .rl-prod-big-cta__blob {
	background: radial-gradient(circle, oklch(74% 0.18 4 / 0.25), transparent 60%);
}

body.cat-video .rl-prod-big-cta .rl-ghost-btn {
	background: var(--cat-video);
	color: #fff;
	border-color: var(--cat-video);
}

body.cat-video .rl-prod-big-cta .rl-ghost-btn:hover {
	background: oklch(52% 0.16 4);
	border-color: oklch(52% 0.16 4);
	filter: none;
	transform: translateY(-1px);
}

/* Nuestro método strip */
body.cat-video .rl-tax-method-strip {
	background: var(--rl-cream, #f9f7f2);
	padding-top: 0;
	padding-bottom: 2rem;
}

body.cat-video .rl-tax-method-strip__inner {
	background: oklch(74% 0.18 4 / 0.14);
	border-color: oklch(74% 0.18 4 / 0.28);
}

body.cat-video .rl-tax-method-strip__eyebrow {
	color: var(--cat-video-accent);
}

body.cat-video .rl-tax-method-strip__pills li::before {
	color: var(--cat-video-accent);
}

body.cat-video .rl-tax-method-strip .rl-btn--coral {
	background: var(--cat-video);
	border-color: var(--cat-video);
	color: #fff;
}

body.cat-video .rl-tax-method-strip .rl-btn--coral:hover {
	background: oklch(52% 0.16 4);
	border-color: oklch(52% 0.16 4);
}

/* ── Hogar — single-rl_producto topnav + footer + hero UI ────────────── */
body.cat-hogar .rl-logo__icon,
body.cat-hogar .rl-logo__resena {
	color: var(--cat-hogar-accent) !important;
}

body.cat-hogar .rl-header .rl-nav-mia > .wp-block-navigation-item__content {
	background: oklch(62% 0.18 46) !important;
}

body.cat-hogar .rl-header .rl-nav-mia > .wp-block-navigation-item__content:hover {
	background: oklch(67% 0.18 46) !important;
}

body.cat-hogar .rl-footer a.rl-footer__logo svg {
	stroke: var(--cat-hogar-accent);
}

body.cat-hogar .rl-newsletter .rl-btn--coral {
	background: var(--cat-hogar-accent);
	border-color: var(--cat-hogar-accent);
	color: #fff;
}

body.cat-hogar .rl-newsletter .rl-btn--coral:hover {
	background: oklch(80% 0.15 46);
	border-color: oklch(80% 0.15 46);
}

body.cat-hogar .rl-prod-hero__price-dot {
	background: var(--cat-hogar-accent);
	box-shadow: 0 0 0 3px oklch(74% 0.18 46 / 0.25);
	animation: rl-pulse-hogar 2.2s ease-in-out infinite;
}

@keyframes rl-pulse-hogar {

	0%,
 100% {
		box-shadow: 0 0 0 3px oklch(74% 0.18 46 / 0.25);
	}

	50% {
		box-shadow: 0 0 0 6px oklch(74% 0.18 46 / 0.08);
	}
}

body.cat-hogar .rl-prod-hero .rl-ghost-btn {
	background: oklch(68% 0.18 46);
	color: #fff;
}

body.cat-hogar .rl-prod-hero .rl-ghost-btn:hover {
	filter: brightness(0.88);
	transform: translateY(-1px);
}

/* big-cta (Decidido) */
body.cat-hogar .rl-prod-big-cta__inner {
	background: oklch(74% 0.18 46 / 0.09);
	border-color: oklch(74% 0.18 46 / 0.22);
}

body.cat-hogar .rl-prod-big-cta__blob {
	background: radial-gradient(circle, oklch(74% 0.18 46 / 0.25), transparent 60%);
}

body.cat-hogar .rl-prod-big-cta .rl-ghost-btn {
	background: var(--cat-hogar);
	color: #fff;
	border-color: var(--cat-hogar);
}

body.cat-hogar .rl-prod-big-cta .rl-ghost-btn:hover {
	background: oklch(52% 0.16 46);
	border-color: oklch(52% 0.16 46);
	filter: none;
	transform: translateY(-1px);
}

/* Nuestro método strip */
body.cat-hogar .rl-tax-method-strip {
	background: var(--rl-cream, #f9f7f2);
	padding-top: 0;
	padding-bottom: 2rem;
}

body.cat-hogar .rl-tax-method-strip__inner {
	background: oklch(74% 0.18 46 / 0.14);
	border-color: oklch(74% 0.18 46 / 0.28);
}

body.cat-hogar .rl-tax-method-strip__eyebrow {
	color: var(--cat-hogar-accent);
}

body.cat-hogar .rl-tax-method-strip__pills li::before {
	color: var(--cat-hogar-accent);
}

body.cat-hogar .rl-tax-method-strip .rl-btn--coral {
	background: var(--cat-hogar);
	border-color: var(--cat-hogar);
	color: #fff;
}

body.cat-hogar .rl-tax-method-strip .rl-btn--coral:hover {
	background: oklch(52% 0.16 46);
	border-color: oklch(52% 0.16 46);
}

/* ── Salud — single-rl_producto topnav + footer + hero UI ────────────── */
body.cat-salud .rl-logo__icon,
body.cat-salud .rl-logo__resena {
	color: var(--cat-salud-accent) !important;
}

body.cat-salud .rl-header .rl-nav-mia > .wp-block-navigation-item__content {
	background: oklch(62% 0.18 140) !important;
}

body.cat-salud .rl-header .rl-nav-mia > .wp-block-navigation-item__content:hover {
	background: oklch(67% 0.18 140) !important;
}

body.cat-salud .rl-footer a.rl-footer__logo svg {
	stroke: var(--cat-salud-accent);
}

body.cat-salud .rl-newsletter .rl-btn--coral {
	background: var(--cat-salud-accent);
	border-color: var(--cat-salud-accent);
	color: #fff;
}

body.cat-salud .rl-newsletter .rl-btn--coral:hover {
	background: oklch(80% 0.15 140);
	border-color: oklch(80% 0.15 140);
}

body.cat-salud .rl-prod-hero__price-dot {
	background: var(--cat-salud-accent);
	box-shadow: 0 0 0 3px oklch(74% 0.18 140 / 0.25);
	animation: rl-pulse-salud 2.2s ease-in-out infinite;
}

@keyframes rl-pulse-salud {

	0%,
 100% {
		box-shadow: 0 0 0 3px oklch(74% 0.18 140 / 0.25);
	}

	50% {
		box-shadow: 0 0 0 6px oklch(74% 0.18 140 / 0.08);
	}
}

body.cat-salud .rl-prod-hero .rl-ghost-btn {
	background: oklch(68% 0.18 140);
	color: #fff;
}

body.cat-salud .rl-prod-hero .rl-ghost-btn:hover {
	filter: brightness(0.88);
	transform: translateY(-1px);
}

/* big-cta (Decidido) */
body.cat-salud .rl-prod-big-cta__inner {
	background: oklch(74% 0.18 140 / 0.09);
	border-color: oklch(74% 0.18 140 / 0.22);
}

body.cat-salud .rl-prod-big-cta__blob {
	background: radial-gradient(circle, oklch(74% 0.18 140 / 0.25), transparent 60%);
}

body.cat-salud .rl-prod-big-cta .rl-ghost-btn {
	background: var(--cat-salud);
	color: #fff;
	border-color: var(--cat-salud);
}

body.cat-salud .rl-prod-big-cta .rl-ghost-btn:hover {
	background: oklch(52% 0.16 140);
	border-color: oklch(52% 0.16 140);
	filter: none;
	transform: translateY(-1px);
}

/* Nuestro método strip */
body.cat-salud .rl-tax-method-strip {
	background: var(--rl-cream, #f9f7f2);
	padding-top: 0;
	padding-bottom: 2rem;
}

body.cat-salud .rl-tax-method-strip__inner {
	background: oklch(74% 0.18 140 / 0.14);
	border-color: oklch(74% 0.18 140 / 0.28);
}

body.cat-salud .rl-tax-method-strip__eyebrow {
	color: var(--cat-salud-accent);
}

body.cat-salud .rl-tax-method-strip__pills li::before {
	color: var(--cat-salud-accent);
}

body.cat-salud .rl-tax-method-strip .rl-btn--coral {
	background: var(--cat-salud);
	border-color: var(--cat-salud);
	color: #fff;
}

body.cat-salud .rl-tax-method-strip .rl-btn--coral:hover {
	background: oklch(52% 0.16 140);
	border-color: oklch(52% 0.16 140);
}

/* ── Home (front-page) — coral-only overrides ───────────────────────── */
body.home .rl-logo__icon,
body.home .rl-logo__resena {
	color: var(--rl-coral) !important;
}

body.home .rl-header .rl-nav-mia > .wp-block-navigation-item__content {
	background: var(--rl-coral) !important;
	border-color: var(--rl-coral) !important;
}

body.home .rl-header .rl-nav-mia > .wp-block-navigation-item__content:hover {
	background: var(--rl-coral-hover) !important;
	border-color: var(--rl-coral-hover) !important;
}

body.home .rl-newsletter .rl-btn--coral {
	background: var(--rl-coral);
	border-color: var(--rl-coral);
}

body.home .rl-newsletter .rl-btn--coral:hover {
	background: var(--rl-coral-hover);
}

body.home .rl-footer a.rl-footer__logo svg {
	stroke: var(--rl-coral);
}

body.home details[open] .rl-faq__question,
body.home .rl-faq__question:hover {
	color: var(--rl-coral);
}

/* CTA al pie de sección — alineación izquierda */
.rl-section__cta {
	text-align: left;
	margin-top: 2rem;
}

/* §cat-editorial — hero fondo carmesí */
body.cat-editorial .rl-metodo-hero-dark {
	background: var(--cat-editorial, #a31528);
}

/* §dot-opacity — hub y editorial: 20% mobile / 30% desktop */
body.cat-hub .rl-guia-archive-hero::after,
body.cat-hub .rl-oferta-archive-hero::after,
body.cat-hub .rl-comp-archive-hero::after,
body.cat-hub .rl-radar-archive::after,
body.cat-hub .rl-marcas-hub__hero::after,
body.cat-hub .rl-search-hero::after,
body.cat-hub .rl-404-page::after,
body.cat-editorial .rl-metodo-hero-dark::after,
body.cat-editorial .rl-page__hero::after {
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
}

@media (min-width: 900px) {

	body.cat-hub .rl-guia-archive-hero::after,
	body.cat-hub .rl-oferta-archive-hero::after,
	body.cat-hub .rl-comp-archive-hero::after,
	body.cat-hub .rl-radar-archive::after,
	body.cat-hub .rl-marcas-hub__hero::after,
	body.cat-hub .rl-search-hero::after,
	body.cat-hub .rl-404-page::after,
	body.cat-editorial .rl-metodo-hero-dark::after,
	body.cat-editorial .rl-page__hero::after {
		background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
	}
}

/* ══════════════════════════════════════════════════════════════════
   §HERO-BASE — Estilo "Hero Acer" unificado
   Referencia canónica: .rl-marca-tax-hero (taxonomy-marca.css)
   Mobile: 100svh, contenido al fondo (flex-end).
   Desktop: min-height auto, contenido centrado verticalmente.
   ══════════════════════════════════════════════════════════════════ */

/* Propiedades base compartidas */
.rl-archive-producto-hero,
.rl-oferta-archive-hero,
.rl-guia-archive-hero,
.rl-radar-archive,
.rl-comp-archive-hero,
.rl-metodo-hero-dark,
.rl-marcas-hub__hero,
.rl-oferta-hero-dark,
.rl-comp-hero,
.rl-cat-tax-hero,
.rl-prod-hero {
	background: var(--cat-current, var(--rl-ink, #191c1d));
	color: var(--rl-cream, #f9f7f2);
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	overflow: hidden;
}

/* Dot pattern base */
.rl-archive-producto-hero::after,
.rl-oferta-archive-hero::after,
.rl-guia-archive-hero::after,
.rl-radar-archive::after,
.rl-comp-archive-hero::after,
.rl-metodo-hero-dark::after,
.rl-marcas-hub__hero::after,
.rl-oferta-hero-dark::after,
.rl-cat-tax-hero::after,
.rl-prod-hero::after,
.rl-comp-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
	background-size: 28px 28px;
	pointer-events: none;
	z-index: 0;
}

/* Desktop: content-driven height */
@media (min-width: 900px) {

	.rl-archive-producto-hero,
	.rl-oferta-archive-hero,
	.rl-guia-archive-hero,
	.rl-radar-archive,
	.rl-comp-archive-hero,
	.rl-metodo-hero-dark,
	.rl-marcas-hub__hero,
	.rl-oferta-hero-dark,
	.rl-comp-hero,
	.rl-cat-tax-hero,
	.rl-prod-hero {
		min-height: auto;
		align-items: center;
	}

	.rl-archive-producto-hero::after,
	.rl-oferta-archive-hero::after,
	.rl-guia-archive-hero::after,
	.rl-radar-archive::after,
	.rl-comp-archive-hero::after,
	.rl-metodo-hero-dark::after,
	.rl-marcas-hub__hero::after,
	.rl-oferta-hero-dark::after,
	.rl-cat-tax-hero::after,
	.rl-prod-hero::after,
	.rl-comp-hero::after {
		background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
	}
}

/* Alineación centro — para heroes con declaración editorial */
.rl-guia-archive-hero,
.rl-radar-archive,
.rl-comp-archive-hero,
.rl-metodo-hero-dark,
.rl-comp-hero {
	text-align: center;
}

/* Inner wrappers — z-index 1 para estar sobre los dots */
.rl-archive-producto-hero .rl-container,
.rl-archive-producto-hero [class*="__inner"],
.rl-oferta-archive-hero .rl-container,
.rl-oferta-archive-hero [class*="__body"],
.rl-guia-archive-hero .rl-container,
.rl-guia-archive-hero [class*="__body"],
.rl-radar-archive [class*="__inner"],
.rl-comp-archive-hero .rl-container,
.rl-comp-archive-hero [class*="__body"],
.rl-metodo-hero-dark .rl-container,
.rl-marcas-hub__hero .rl-container,
.rl-marcas-hub__hero [class*="__inner"],
.rl-oferta-hero-dark [class*="__inner"],
.rl-oferta-hero-dark [class*="__body"],
.rl-comp-hero [class*="__inner"],
.rl-cat-tax-hero [class*="__inner"],
.rl-prod-hero [class*="__inner"],
.rl-prod-hero [class*="__body"] {
	position: relative;
	z-index: 1;
}

/* Eyebrow pill blanco — sistema unificado */
.rl-archive-producto-hero .rl-eyebrow,
.rl-oferta-archive-hero .rl-eyebrow,
.rl-guia-archive-hero .rl-eyebrow,
.rl-radar-archive .rl-eyebrow,
.rl-comp-archive-hero .rl-eyebrow,
.rl-metodo-hero-dark .rl-eyebrow,
.rl-marcas-hub__hero .rl-eyebrow,
.rl-oferta-hero-dark .rl-eyebrow,
.rl-comp-hero .rl-eyebrow,
.rl-cat-tax-hero .rl-eyebrow,
.rl-prod-hero .rl-eyebrow {
	color: rgba(249, 247, 242, 0.9);
	background: rgba(249, 247, 242, 0.12);
	border: 1px solid rgba(249, 247, 242, 0.2);
	border-radius: 999px;
	padding: 6px 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 1.5rem;
}

/* H1 — tipografía unificada en todos los heroes */
.rl-archive-producto-hero h1,
.rl-oferta-archive-hero h1,
.rl-guia-archive-hero h1,
.rl-radar-archive h1,
.rl-comp-archive-hero h1,
.rl-metodo-hero-dark h1,
.rl-marcas-hub__hero h1,
.rl-oferta-hero-dark h1,
.rl-comp-hero h1,
.rl-cat-tax-hero h1,
.rl-prod-hero h1 {
	color: rgba(249, 247, 242, 1);
	font-size: clamp(1.875rem, 6.5vw, 4.5rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

/* S5 producto: nav glass ahora es GLOBAL (ver bloque NAV GLASS GLOBAL arriba).
   ENG-2026-0529-003/004 supersede la divergencia home ink-sólido. */

/* breadcrumb en producto: mismo oscuro ink para fusión visual nav → hero */
body.single-rl_producto .rl-breadcrumb {
	background: var(--rl-ink, #191c1d);
	padding-block: 0.75rem;
	margin-block: 0 !important; /* mata el wp-block-gap entre breadcrumb y hero */
}

/* body bg = ink en producto: cualquier gap de WP block layout muestra oscuro, no blanco */
body.single-rl_producto {
	background: var(--rl-ink, #191c1d);
}

body.single-rl_producto .rl-prod-hero {
	padding-block-end: 4rem;
}

body.single-rl_producto .rl-breadcrumb__text,
body.single-rl_producto .rl-breadcrumb .rl-breadcrumb__text a {
	color: rgba(255, 255, 255, 0.45);
	text-decoration: none;
}

body.single-rl_producto .rl-breadcrumb .rl-breadcrumb__current {
	color: rgba(255, 255, 255, 0.75);
}

.rl-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	column-gap: 1.25rem;
	align-items: center;
	height: var(--rl-header-height);
}

/* Logo */
.rl-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	text-decoration: none;
	flex-shrink: 0;
}

.rl-logo__icon {
	display: inline-flex;
	flex-shrink: 0;
	color: oklch(66% 0.22 13);
}

.rl-logo__word {
	display: inline-flex;
	overflow: hidden;
	max-width: 260px;
	white-space: nowrap;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 800;
	font-size: 1.125rem;
	letter-spacing: -0.03em;
	line-height: 1;
	transition: max-width var(--rl-transition-base), opacity var(--rl-transition-base);
}

.rl-logo__resena {
	color: oklch(66% 0.22 13);
}

.rl-logo__libre {
	color: #fff;
}


/* Móvil scroll: solo el tag icon, wordmark se oculta */
@media (max-width: 767px) {

	.rl-header.is-scrolled .rl-logo__word {
		display: none;
	}
}

/* Nav links */
.rl-header__nav,
.rl-header .wp-block-navigation {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	margin: 0;          /* mata el margin-top:24px que WP aplica y descuadra verticalmente */
	display: none;
}

@media (min-width: 768px) {

	.rl-header__nav,
	.rl-header .wp-block-navigation {
		display: flex;
		min-width: 0;
	}

	.rl-header .wp-block-navigation__container {
		display: flex !important;
		flex-wrap: nowrap;
		width: 100%;
		min-width: 0;
		justify-content: space-between;
		list-style: none;
		margin: 0;
		padding: 0;
	}
}

.rl-header .wp-block-navigation a,
.rl-header .wp-block-navigation a.wp-block-navigation-item__content {
	font-size: clamp(1rem, 1.05vw, 1.125rem);
	font-weight: 500;

	/* !important: WP core / global-styles aplican el color de texto del body (#3d3d3d)
	   con un selector que gana por orden; forzamos el color claro sobre el header negro. */
	color: var(--rl-text-on-dark, #f5f5f5) !important;
	text-decoration: none;
	padding: 6px clamp(2px, 0.2vw, 3px);
	white-space: nowrap;
	border-radius: var(--rl-radius-sm);
	transition: color var(--rl-transition-fast), background var(--rl-transition-fast);
}

.rl-header .wp-block-navigation a:hover,
.rl-header .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: var(--rl-brand-coral, #ff6b35) !important;
	background: rgba(255, 255, 255, 0.06);
}

/* Nav link activo — igualar color al pill de Mia de cada categoría (mismo
   oklch usado en el background del pill .rl-nav-mia, ver bloques §cat-X arriba) */
body.cat-celulares   .rl-header .wp-block-navigation a:hover,
body.cat-celulares   .rl-header .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: oklch(62% 0.18 264) !important;
}

body.cat-computacion .rl-header .wp-block-navigation a:hover,
body.cat-computacion .rl-header .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: oklch(62% 0.18 242) !important;
}

body.cat-electronica .rl-header .wp-block-navigation a:hover,
body.cat-electronica .rl-header .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: oklch(62% 0.18 277) !important;
}

body.cat-audio       .rl-header .wp-block-navigation a:hover,
body.cat-audio       .rl-header .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: oklch(62% 0.18 293) !important;
}

body.cat-videojuegos .rl-header .wp-block-navigation a:hover,
body.cat-videojuegos .rl-header .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: oklch(62% 0.18 324) !important;
}

body.cat-video       .rl-header .wp-block-navigation a:hover,
body.cat-video       .rl-header .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: oklch(62% 0.18 4) !important;
}

body.cat-hogar       .rl-header .wp-block-navigation a:hover,
body.cat-hogar       .rl-header .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: oklch(62% 0.18 46) !important;
}

body.cat-salud       .rl-header .wp-block-navigation a:hover,
body.cat-salud       .rl-header .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: oklch(62% 0.18 140) !important;
}

body.cat-hub         .rl-header .wp-block-navigation a:hover,
body.cat-hub         .rl-header .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: var(--cat-hub-accent, oklch(60% 0.18 178)) !important;
}

body.cat-editorial   .rl-header .wp-block-navigation a:hover,
body.cat-editorial   .rl-header .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: oklch(66% 0.22 13) !important;
}

body.home            .rl-header .wp-block-navigation a:hover,
body.home            .rl-header .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: var(--rl-coral, #ff6b35) !important;
}

/* Nav tablet compacto: 768-899px — links más pequeños para caber en 768px con logo + palette pill */
@media (min-width: 768px) and (max-width: 899px) {

	.rl-header .wp-block-navigation a,
	.rl-header .wp-block-navigation a.wp-block-navigation-item__content {
		font-size: 0.8125rem;
		padding: 4px 2px;
	}

	.rl-header .wp-block-navigation__container {
		gap: 0;
	}
}

/* Nav compacto: 900-1199px — sin override de gap (ya usa grid auto) */
@media (min-width: 900px) and (max-width: 1199px) {

	.rl-header .wp-block-navigation a,
	.rl-header .wp-block-navigation a.wp-block-navigation-item__content {
		padding: 6px clamp(1px, 0.15vw, 3px);
	}
}

/* Actions right */
.rl-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin: 0;   /* mata el margin-top:24px de WP block-gap que bajaba el pill 12px (descuadre) */
}

/* Palette pill — siempre ícono en desktop (≥900px); el texto se reserva para mobile scroll */
@media (min-width: 900px) {

	.rl-palette__pill {
		width: 36px !important;
		min-width: 36px !important;
		max-width: 36px !important;
		height: 36px !important;
		padding: 0 !important;
		justify-content: center !important;
	}

	.rl-palette__pill-text {
		display: none !important;
	}
}

/* Mia IA — pill carmesí destacado en el nav */
.rl-header .rl-nav-mia > .wp-block-navigation-item__content {
	background: oklch(66% 0.22 13) !important;
	color: #fff !important;
	border-radius: var(--rl-radius-pill, 999px) !important;
	padding: 4px 14px !important;
	font-weight: 600 !important;
}

.rl-header .rl-nav-mia > .wp-block-navigation-item__content:hover {
	background: oklch(72% 0.2 13) !important;
	color: #fff !important;
}

/* Search icon in header */
.rl-header__search-icon .wp-block-search__inside-wrapper {
	border: 1px solid var(--rl-border-warm);
	border-radius: var(--rl-radius-pill);
	background: var(--rl-bg-white);
	padding: 6px 14px;
	transition: border-color var(--rl-transition-fast);
}

.rl-header__search-icon .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--green-brand);
}

.rl-header__search-icon .wp-block-search__input {
	font-size: 0.875rem;
	border: none;
	background: transparent;
	width: 140px;
}

/* Mobile toggle */
.rl-header__mobile-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	margin: 0;   /* mismo fix: sin margin-top de WP, nivela la hamburguesa con el logo */
}

@media (min-width: 768px) {

	.rl-header__mobile-toggle {
		display: none;
	}
}

.rl-header__hamburger,
.rl-header__hamburger::before,
.rl-header__hamburger::after {
	display: block;
	width: 22px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform var(--rl-transition-base);
}

.rl-header__hamburger {
	position: relative;
}

.rl-header__hamburger::before,
.rl-header__hamburger::after {
	content: "";
	position: absolute;
	left: 0;
}

.rl-header__hamburger::before {
	top: -6px;
}

.rl-header__hamburger::after {
	top: 6px;
}

/* Hamburguesa → X cuando el menú está abierto */
.rl-header.is-menu-open .rl-header__hamburger {
	background: transparent;
}

.rl-header.is-menu-open .rl-header__hamburger::before {
	top: 0;
	transform: rotate(45deg);
}

.rl-header.is-menu-open .rl-header__hamburger::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Menú móvil: el toggle revela el nav como panel desplegable bajo el header.
   El nav vive en .rl-header__inner pero se posiciona absolute respecto a .rl-header (sticky). */
@media (max-width: 767px) {

	.rl-header.is-menu-open .rl-header__nav {
		display: block;   /* block, no flex: el nav crece a su contenido. Como flex-column dejaba
		                     al <ul> como flex-item encogido a 13px y clippeaba los links. */
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--rl-ink);
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
		padding: 0.25rem 0 0.5rem;
		overflow-y: auto;

		/* GPU-composited open animation — reemplaza max-height (layout thrash) */
		clip-path: inset(0 0 0% 0);
		opacity: 1;
		transition:
			clip-path 250ms cubic-bezier(0, 0, 0.2, 1),
			opacity 250ms cubic-bezier(0, 0, 0.2, 1);
	}

	/* Estado inicial de la animación de entrada — Chrome 117+ / Safari 17.5+ */
	@starting-style {

		.rl-header.is-menu-open .rl-header__nav {
			clip-path: inset(0 0 100% 0);
			opacity: 0;
		}
	}

	.rl-header.is-menu-open .rl-header__nav .wp-block-navigation__container {
		position: static;   /* defensa: por si WP core lo pone absolute en algún contexto */
		display: block;   /* NO flex: el layout-class de WP trae justify-content:center que en
		                     columna centra vertical y manda la mitad de los links fuera de pantalla.
		                     block = stack natural, el <ul> crece a su contenido. */
		height: auto;     /* defeats cualquier altura heredada/WP que lo colapse */
		width: 100%;
	}

	.rl-header.is-menu-open .rl-header__nav .wp-block-navigation-item {
		display: block;
		width: 100%;
	}

	.rl-header.is-menu-open .rl-header__nav a {
		display: block;
		padding: 0.875rem var(--wp--custom--spacing--md, 1rem);
		border-radius: 0;
	}
}

/* Admin bar offset */
.admin-bar .rl-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* ============================================
   BUTTONS — Pill system
   ============================================ */
.rl-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: var(--rl-radius-pill);
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	border: 2px solid transparent;
	min-height: 44px; /* WCAG 2.5.5 touch target — sin esto: 43px en ≤480px */
	transition:
		background-color var(--rl-transition-fast),
		border-color var(--rl-transition-fast),
		transform var(--rl-transition-fast),
		box-shadow var(--rl-transition-fast);
	white-space: nowrap;
}

.rl-btn:active {
	transform: scale(0.97);
}

/* Primary — verde Trustpilot */
.rl-btn--primary,
.rl-cta-button,
.rl-cta-button--primary {
	background: var(--wp--preset--color--green-brand);
	color: #fff;
	padding: 13px 24px;
}

.rl-btn--primary:hover,
.rl-cta-button:hover,
.rl-cta-button--primary:hover {
	background: #00a06b;
	box-shadow: 0 4px 14px rgba(0, 182, 122, 0.35);
}

/* ML (MercadoLibre) — todos los botones hacia ML son siempre amarillo */
.rl-btn--ml,
.rl-cta-button--ml,
.rl-ml-cta {
	background: var(--rl-ml-yellow, #ffe600);
	color: var(--rl-ink, #191c1d);
	padding: 13px 24px;
	font-weight: 700;
	border: none;
	border-radius: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s, transform 0.15s;
}

.rl-btn--ml:hover,
.rl-cta-button--ml:hover,
.rl-ml-cta:hover {
	filter: brightness(0.96);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(255, 214, 0, 0.4);
}

/* Outline */
.rl-btn--outline {
	background: transparent;
	color: var(--rl-text-headline);
	border-color: var(--rl-border-warm);
	padding: 11px 22px;
}

.rl-btn--outline:hover {
	border-color: var(--wp--preset--color--green-brand);
	color: var(--wp--preset--color--green-brand);
}

/* Ghost — texto sin fondo */
.rl-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--green-brand);
	padding: 8px 14px;
	font-size: 0.875rem;
}

.rl-btn--ghost:hover {
	background: var(--wp--preset--color--score-green-bg);
}

/* Mia pill */
.rl-btn--mia {
	background: var(--wp--preset--color--green-brand);
	color: #fff;
	padding: 10px 20px;
	font-size: 0.875rem;
}

.rl-btn--mia::before {
	content: "✦ ";
}

.rl-btn--sm {
	padding: 8px 16px;
	font-size: 0.8125rem;
}

.rl-btn--full {
	width: 100%;
	justify-content: center;
}

@media (max-width: 480px) {

	.rl-btn {
		padding: 12px 18px;
	}
}

/* ============================================
   18. FOOTER
   ============================================ */
.rl-footer {
	background: var(--wp--preset--color--blue-deep);
	color: var(--wp--preset--color--white);
	padding: var(--wp--custom--spacing--3xl) 0 var(--wp--custom--spacing--xl);
}

.rl-footer a {
	color: rgba(255, 255, 255, 0.8);
	transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out);
}

.rl-footer a:hover {
	color: var(--wp--preset--color--white);
}

.rl-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--custom--spacing--xl);
}

@media (min-width: 768px) {

	.rl-footer__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.rl-footer__col h4 {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: var(--wp--custom--spacing--md);
}

.rl-footer__col ul {
	list-style: none;
}

.rl-footer__col ul li {
	margin-bottom: var(--wp--custom--spacing--sm);
}

.rl-footer__col ul li a {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.7);
}

.rl-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	margin-top: var(--wp--custom--spacing--xl);
	padding-top: var(--wp--custom--spacing--lg);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--custom--spacing--sm);
	text-align: center;
}

@media (min-width: 768px) {

	.rl-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
	}
}

.rl-footer__copyright {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   19. ACCESSIBILITY
   ============================================ */

/* Force dark text on yellow-accent backgrounds for WCAG contrast */
.has-yellow-accent-background-color,
.wp-block-group.has-yellow-accent-background-color {
	color: var(--wp--preset--color--text-primary);
}

.has-yellow-accent-background-color h1,
.has-yellow-accent-background-color h2,
.has-yellow-accent-background-color h3,
.has-yellow-accent-background-color p,
.has-yellow-accent-background-color a {
	color: var(--wp--preset--color--text-primary);
}

/* Visually hidden but accessible */
.rl-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Elimina block-gap de WP entre hero y marquee */
.rl-home > .rl-prod-marquee,
.rl-comp-archive-hero + .rl-prod-marquee,
.rl-archive-producto-hero + .rl-prod-marquee {
	margin-block-start: 0 !important;
}

/* Palette category chips (dynamic filter row) */
.rl-palette__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	padding: 0.5rem 1rem;
	border-bottom: 1px solid var(--rl-border);
	list-style: none;
	margin: 0;
}

.rl-palette__cat-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	border: 1.5px solid var(--rl-border);
	border-radius: var(--rl-radius-pill);
	background: var(--rl-white);
	color: var(--rl-ink);
	font-size: 0.8125rem;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--rl-transition-fast), background var(--rl-transition-fast), color var(--rl-transition-fast);
}

.rl-palette__cat-chip:hover {
	border-color: var(--rl-coral);
	color: var(--rl-coral);
}

.rl-palette__cat-chip.is-active {
	border-color: var(--rl-coral);
	background: var(--rl-coral);
	color: var(--rl-white);
}

/* Winner card */
.rl-comp-winner {
	padding: 1.5rem 2rem;
	border-top: 2px solid var(--rl-coral);
	background: linear-gradient(135deg, rgba(255, 107, 53, 0.04) 0%, rgba(255, 107, 53, 0.01) 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.375rem;
}
/* ── Archive Comparar (/comparar/) ──────────────────────────────────── */
.rl-comp-archive-hero {
	color: #fff;

	/* Desktop: hero compacto como las otras páginas de referencia */
}

/* Mobile: full-screen con contenido centrado verticalmente */
@media (max-width: 639px) {

	.rl-comp-archive-hero {
		flex-direction: column;
	}
}

/* Lista header */
.rl-comp-archive-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding-block: 1.5rem;
	border-bottom: 1px solid var(--rl-border, #e2e5ed);
}

.rl-comp-archive-list-header__title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
}

/* Grid de comparativas */
.rl-comp-archive-grid {
	padding-block: 2rem;
}

.rl-comp-archive-grid__items {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 640px) {

	.rl-comp-archive-grid__items {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {

	.rl-comp-archive-grid__items {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ── Archive Guías (/mejores/) ───────────────────────────────────────── */
.rl-guia-archive-hero {
	padding-block: clamp(4rem, 9vw, 6rem);
	color: #fff;
	text-align: center;
}

.rl-guia-archive-hero__title {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 0.875rem;
	color: #fff;
}

.rl-guia-archive-filters {
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--rl-border, #e2e5ed);
}

.rl-guia-archive-grid {
	padding-block: 2rem;
}

.rl-guia-archive-grid__items {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 640px) {

	.rl-guia-archive-grid__items {
		grid-template-columns: repeat(2, 1fr);
	}
}

.rl-guia-card-v2 {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 1rem;
	border: 1px solid var(--rl-border, #e2e5ed);
	border-radius: 0.75rem;
	background: var(--rl-white, #fff);
	overflow: hidden;
	transition: box-shadow 0.15s, transform 0.15s;
}

@media (min-width: 480px) {

	.rl-guia-card-v2 {
		grid-template-columns: 160px 1fr;
	}
}

.rl-guia-card-v2:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
	transform: translateY(-2px);
}

.rl-guia-card-v2__img img {
	width: 100%;
	height: 100%;
	min-height: 120px;
	object-fit: cover;
}

.rl-guia-card-v2__body {
	padding: 1rem 1rem 1rem 0;
	display: flex;
	flex-direction: column;
}

.rl-guia-card-v2__title {
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	line-height: 1.35;
}

.rl-guia-card-v2__title a {
	text-decoration: none;
	color: var(--rl-ink, #191c1d);
}

.rl-guia-card-v2__title a:hover {
	color: var(--rl-coral, #ff6b35);
}

.rl-guia-card-v2__excerpt {
	font-size: 0.875rem;
	color: #6b7280;
	line-height: 1.5;
	flex: 1;
	margin: 0 0 0.75rem;
}

.rl-guia-card-v2__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.rl-guia-card-v2__date {
	font-size: 0.75rem;
	color: #9ca3af;
}

.rl-guia-card-v2__cta {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--rl-coral, #ff6b35);
	text-decoration: none;
}

/* ── Archive Ofertas (/ofertas/) ─────────────────────────────────────── */
.rl-oferta-archive-hero {
	padding-block: clamp(4rem, 9vw, 6rem);
	color: #fff;
	text-align: center;
}

.rl-oferta-archive-hero__title {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 0.875rem;
	color: #fff;
}

.rl-oferta-archive-hero__sub {
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 auto;
	max-width: 480px;
}

.rl-oferta-archive-filters {
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--rl-border, #e2e5ed);
}

.rl-oferta-archive-grid {
	padding-block: 2rem;
}

.rl-oferta-archive-grid__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
}

.rl-oferta-card-v2 {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--rl-border, #e2e5ed);
	border-radius: 0.75rem;
	background: var(--rl-white, #fff);
	overflow: hidden;
	transition: box-shadow 0.15s, transform 0.15s;
}

.rl-oferta-card-v2:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.rl-oferta-card-v2__img img {
	width: 100%;
	height: 180px;
	object-fit: contain;
	background: var(--rl-cream, #f9f7f2);
}

.rl-oferta-card-v2__body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.5rem;
}

.rl-oferta-card-v2__title {
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0;
	line-height: 1.35;
}

.rl-oferta-card-v2__title a {
	text-decoration: none;
	color: var(--rl-ink, #191c1d);
}

.rl-oferta-card-v2__excerpt {
	font-size: 0.8125rem;
	color: #6b7280;
	flex: 1;
	margin: 0;
}

.rl-oferta-card-v2__cta {
	margin-top: auto;
	width: 100%;
	text-align: center;
}

.rl-oferta-newsletter {
	padding-bottom: 3rem;
}

/* ============================================
   24. CATEGORIES SECTION
   ============================================ */


/* ============================================
   26. MARCAS SECTION
   ============================================ */

/* ============================================
   27. TRUST SECTION PATTERN
   ============================================ */
.rl-home-trust .wp-block-heading {
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: var(--wp--custom--spacing--xl);
	color: var(--wp--preset--color--text-primary);
}

.rl-home-trust .wp-block-column {
	padding: var(--wp--custom--spacing--md);
}

.rl-home-trust .wp-block-column strong {
	font-size: 1.0625rem;
	font-weight: 700;
	display: block;
	margin-bottom: var(--wp--custom--spacing--xs);
}

.rl-home-trust .wp-block-column p {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--text-secondary);
	line-height: 1.6;
}

/* ── Mia Page (/mia/) ────────────────────────────────────────────────── */
.rl-mia-page {
	display: grid;
	grid-template-columns: 1fr;
	min-height: calc(100vh - var(--rl-header-height, 64px));
	background: var(--rl-cream, #f9f7f2);
}

@media (min-width: 900px) {

	.rl-mia-page {
		grid-template-columns: 280px 1fr;
	}
}

/* Sidebar */
.rl-mia-page__sidebar {
	display: none;
	border-right: 1px solid var(--rl-border, #e2e5ed);
	background: var(--rl-white, #fff);
	padding: 2rem 1.5rem;
	position: sticky;
	top: var(--rl-header-height, 64px);
	height: calc(100vh - var(--rl-header-height, 64px));
	overflow-y: auto;
}

@media (min-width: 900px) {

	.rl-mia-page__sidebar {
		display: block;
	}
}

.rl-mia-page__sidebar-inner {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.rl-mia-page__brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.rl-mia-page__brand-name {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0;
}

.rl-mia-page__brand-role {
	font-size: 0.8125rem;
	color: #6b7280;
}

.rl-mia-page__cap-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 0.75rem;
}

.rl-mia-page__cap-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.rl-mia-page__cap-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.5;
}

.rl-mia-page__cap-list svg {
	color: #16a34a;
	flex-shrink: 0;
	margin-top: 0.15em;
}

.rl-mia-page__disclaimer {
	font-size: 0.75rem;
	color: #9ca3af;
	line-height: 1.5;
	margin: 0;
	border-top: 1px solid var(--rl-border, #e2e5ed);
	padding-top: 1rem;
}

/* Avatar */
.rl-mia-page__avatar {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--rl-ink, #191c1d), #3b3f41);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-weight: 700;
	font-size: 1.125rem;
	color: #fff;
}

.rl-mia-page__avatar--sm {
	width: 2rem;
	height: 2rem;
	font-size: 0.875rem;
}

.rl-mia-page__avatar--lg {
	width: 4rem;
	height: 4rem;
	font-size: 1.5rem;
}

/* Chat area */
.rl-mia-page__chat {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--rl-header-height, 64px));
	background: var(--rl-white, #fff);
}

.rl-mia-page__chat-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--rl-border, #e2e5ed);
}

@media (min-width: 900px) {

	.rl-mia-page__chat-header {
		display: none;
	}
}

.rl-mia-page__status {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	color: #6b7280;
}

.rl-mia-page__status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #16a34a;
	display: inline-block;
}

/* Messages */
.rl-mia-page__messages-area {
	flex: 1;
	overflow-y: auto;
	padding: 2rem 1.25rem;
	max-width: 720px;
	width: 100%;
	margin-inline: auto;
}

.rl-mia-page__welcome {
	text-align: center;
	padding: 2rem 0 1.5rem;
}

.rl-mia-page__welcome .rl-mia-page__avatar--lg {
	margin-inline: auto;
	margin-bottom: 1rem;
}

.rl-mia-page__welcome-title {
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
}

.rl-mia-page__welcome-sub {
	font-size: 1rem;
	color: #6b7280;
	margin: 0;
}

/* Chips grid (sugerencias) */
.rl-mia-page__chips-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.75rem;
	padding: 1.5rem 0;
}

.rl-mia-page__chip {
	padding: 0.875rem 1rem;
	border: 1px solid var(--rl-border, #e2e5ed);
	border-radius: 0.75rem;
	background: var(--rl-cream, #f9f7f2);
	font-size: 0.875rem;
	color: var(--rl-ink, #191c1d);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	line-height: 1.4;
}

.rl-mia-page__chip:hover {
	border-color: var(--rl-coral, #ff6b35);
	background: #fff8f5;
}

/* Typing */
.rl-mia-page__typing {
	padding: 0.5rem 0;
}

/* Input bar */
.rl-mia-page__input-bar {
	border-top: 1px solid var(--rl-border, #e2e5ed);
	padding: 1rem 1.25rem;
	background: var(--rl-white, #fff);
	max-width: 720px;
	width: 100%;
	margin-inline: auto;
}

.rl-mia-page__form {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	border: 1px solid var(--rl-border, #e2e5ed);
	border-radius: 0.75rem;
	padding: 0.5rem 0.5rem 0.5rem 1rem;
	background: var(--rl-cream, #f9f7f2);
	transition: border-color 0.15s;
}

.rl-mia-page__form:focus-within {
	border-color: var(--rl-ink, #191c1d);
}

.rl-mia-page__input {
	flex: 1;
	border: none;
	background: transparent;
	font-size: 1rem;
	color: var(--rl-ink, #191c1d);
	outline: none;
}

.rl-mia-page__input::placeholder {
	color: #9ca3af;
}

.rl-mia-page__send {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.5rem;
	background: var(--rl-ink, #191c1d);
	color: #fff;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s;
}

.rl-mia-page__send:hover {
	background: #333;
}

.rl-mia-page__footer-note {
	font-size: 0.75rem;
	color: #9ca3af;
	text-align: center;
	margin: 0.5rem 0 0;
}

/* ── Single Comparativa ─────────────────────────────────────────────── */
.rl-comp-content {
	padding-block: 3rem;
}


/* ── Single Oferta hero ──────────────────────────────────────────────── */
.rl-oferta-hero {
	padding-block: 2.5rem;
	background: var(--rl-cream, #f9f7f2);
	border-bottom: 1px solid var(--rl-border, #e2e5ed);
}

.rl-oferta-hero .wp-block-post-title,
.rl-oferta-hero h1 {
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	font-weight: 700;
	margin-bottom: 0.75rem;
}

/* ── Single El Radar ─────────────────────────────────────────────────── */
.rl-radar-hero {
	padding-block: 3rem 2rem;
	background: var(--rl-ink, #191c1d);
	color: #fff;
	position: relative;
	overflow: hidden;
}

.rl-radar-hero::before {
	content: "";
	position: absolute;
	width: 600px;
	height: 500px;
	border-radius: 50%;
	top: -200px;
	right: -200px;
	background: #4f46e5;
	opacity: 0.12;
	filter: blur(140px);
	pointer-events: none;
}

.rl-radar-hero .wp-block-post-title,
.rl-radar-hero h1 {
	color: #fff;
	font-size: clamp(1.75rem, 4.5vw, 3rem);
	font-family: var(--rl-serif);
	font-style: italic;
	font-weight: 700;
	letter-spacing: -0.02em;
	max-width: 680px;
}

.rl-radar-hero .wp-block-post-excerpt,
.rl-radar-hero p {
	color: rgba(255, 255, 255, 0.65);
}

.rl-radar-content {
	padding-block: 3rem;
}

.rl-radar-content .wp-block-post-content {
	max-width: 680px;
	margin-inline: auto;
	font-size: 1.0625rem;
	line-height: 1.75;
}

/* ── Metodología page ────────────────────────────────────────────────── */

.rl-metodo-hero__body {
	padding-block: clamp(5rem, 12vh, 8rem);
	max-width: 640px;
}

@media (max-width: 767px) {

	.rl-metodo-hero__sub {
		font-size: 1rem;
		max-width: none;
	}

	.rl-metodo__section-title {
		font-size: clamp(1.875rem, 6vw, 2.5rem);
	}

	.rl-metodo__paso-num {
		font-size: 2rem;
	}

	.rl-metodo__fuente-num {
		font-size: 3rem;
	}

	.rl-metodo__nunca-list li {
		font-size: clamp(1.625rem, 5vw, 2rem);
	}

	.rl-metodo__mia-title {
		font-size: 1.375rem;
	}
}

.rl-metodo-hero__title {
	font-size: clamp(2.25rem, 6vw, 4rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.04em;
	color: oklch(97% 0.008 22);
	margin: 0 0 1.25rem;
}

.rl-metodo-hero__sub {
	font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
	line-height: 1.65;
	color: rgba(249, 247, 242, 0.88);
	margin: 0 0 2rem;
	max-width: 52ch;
}

.rl-metodo__hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.625rem;
	background: oklch(33% 0.2 13);
	color: oklch(97% 0.008 22);
	border: 1px solid oklch(33% 0.2 13);
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease-out, border-color 0.2s ease-out;
}

.rl-metodo__hero-cta:hover,
.rl-metodo__hero-cta:focus-visible {
	background: oklch(28% 0.18 13);
	border-color: oklch(28% 0.18 13);
}

/* Score ring decoration */
.rl-metodo__ring-deco {
	position: absolute;
	right: clamp(-3rem, -2vw, 0rem);
	top: 50%;
	transform: translateY(-50%);
	width: clamp(260px, 36vw, 440px);
	pointer-events: none;
	z-index: 1;
}

.rl-metodo__ring-deco svg {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 767px) {

	.rl-metodo__ring-deco {
		display: none;
	}
}

/* Hero reveal animation */
.rl-metodo-hero__body .rl-eyebrow,
.rl-metodo-hero__title,
.rl-metodo-hero__sub,
.rl-metodo__hero-cta {
	opacity: 0;
	transform: translateY(1.25rem);
	animation: rl-metodo-reveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.rl-metodo-hero__body .rl-eyebrow {
	animation-delay: 0.05s;
}

.rl-metodo-hero__title {
	animation-delay: 0.15s;
}

.rl-metodo-hero__sub {
	animation-delay: 0.27s;
}

.rl-metodo__hero-cta {
	animation-delay: 0.38s;
}

@keyframes rl-metodo-reveal {

	to {
		opacity: 1;
		transform: none;
	}
}


/* Section headers — reutilizados en el body */
.rl-metodo__section-eyebrow {
	display: block;
	font-size: var(--fs-eyebrow, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rl-text-muted, #5a6478);
	margin: 0 0 0.875rem;
}

.rl-metodo__section-eyebrow--light {
	color: rgba(249, 247, 242, 0.82);
}

.rl-metodo__section-title {
	font-size: var(--fs-h2, clamp(1.75rem, 4vw, 3rem));
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0 0 3rem;
	color: var(--rl-ink, #16263b);
}

/* ── El proceso ───────────────────────────────────────────────────────── */
.rl-metodo__proceso {
	padding-block: var(--section-pad-y, 5rem);
	background: var(--rl-white, #fff);
}

.rl-metodo__pasos {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.rl-metodo__paso {
	display: grid;
	grid-template-columns: clamp(3.5rem, 5.5vw, 4.5rem) 1fr;
	gap: 1.5rem;
	padding-block: 2rem;
	border-top: 1px solid var(--rl-border, #e2e5ed);
	align-items: start;
	opacity: 0;
	transform: translateY(0.875rem);
	transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.rl-metodo__paso:last-child {
	border-bottom: 1px solid var(--rl-border, #e2e5ed);
}

.rl-metodo__paso.is-visible {
	opacity: 1;
	transform: none;
}

.rl-metodo__paso-num {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 800;
	color: oklch(47% 0.23 13);
	line-height: 1;
	letter-spacing: -0.04em;
	padding-top: 0.125rem;
}

.rl-metodo__paso-body h3 {
	font-size: clamp(1.0625rem, 1.8vw, 1.1875rem);
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--rl-ink, #16263b);
}

.rl-metodo__paso-body p {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--rl-text-muted, #5a6478);
	margin: 0;
	max-width: 65ch;
}

@media (max-width: 480px) {

	.rl-metodo__paso {
		grid-template-columns: 1fr;
		gap: 0.375rem;
	}

	.rl-metodo__paso-num {
		font-size: 1.375rem;
	}
}

/* ── Las fuentes ──────────────────────────────────────────────────────── */
.rl-metodo__fuentes {
	padding-block: var(--section-pad-y, 5rem);
	background: var(--rl-cream, #f9f7f2);
}

.rl-metodo__fuentes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
}

.rl-metodo__fuente {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.rl-metodo__fuente-num {
	font-size: clamp(2.5rem, 4.5vw, 3.75rem);
	font-weight: 800;
	color: oklch(47% 0.23 13);
	line-height: 1;
	letter-spacing: -0.04em;
}

.rl-metodo__fuente h3 {
	font-size: clamp(1rem, 1.6vw, 1.0625rem);
	font-weight: 700;
	margin: 0;
	color: var(--rl-ink, #16263b);
	line-height: 1.3;
}

.rl-metodo__fuente p {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--rl-text-muted, #5a6478);
	margin: 0;
}

@media (max-width: 640px) {

	.rl-metodo__fuentes-grid {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}
}

/* ── Lo que nunca verás — manifiesto ink ──────────────────────────────── */
.rl-metodo__nunca {
	background: oklch(47% 0.23 13);
	padding-block: var(--section-pad-y, 5rem);
	text-align: center;
}

.rl-metodo__nunca-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.rl-metodo__nunca-list li {
	font-size: clamp(1.625rem, 3.8vw, 2.625rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: oklch(97% 0.008 22);
	padding-block: 1.375rem;
	border-top: 1px solid rgba(249, 247, 242, 0.09);
	opacity: 0;
	transform: translateY(0.75rem);
	transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.rl-metodo__nunca-list li:last-child {
	border-bottom: 1px solid rgba(249, 247, 242, 0.09);
}

.rl-metodo__nunca-list li.is-visible {
	opacity: 1;
	transform: none;
}


/* ── Mia CTA ──────────────────────────────────────────────────────────── */
.rl-metodo__mia {
	background: oklch(97% 0.015 13);
	padding-block: clamp(3rem, 6vw, 5rem);
	border-top: 2px solid oklch(91% 0.05 13);
}

.rl-metodo__mia-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.25rem;
}

.rl-metodo__mia-avatar {
	border-radius: 999px;
	background: oklch(47% 0.23 13);
	color: oklch(97% 0.008 22);
	font-size: 0.8125rem;
	font-weight: 700;
	padding: 0.5rem 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.rl-metodo__mia-title {
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--rl-ink, #16263b);
	line-height: 1.25;
}

.rl-metodo__mia-desc {
	font-size: clamp(0.9375rem, 1.4vw, 1rem);
	color: var(--rl-text-muted, #5a6478);
	margin: 0 0 1.5rem;
	max-width: 46ch;
	line-height: 1.6;
}

.rl-metodo__mia .rl-btn--coral {
	background: oklch(47% 0.23 13);
	color: #fff;
}

.rl-metodo__mia .rl-btn--coral:hover {
	background: oklch(52% 0.23 13);
}

/* ── /sobre-nosotros/ — origen two-column ─────────────────────────────── */
.rl-sobre__origen-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

@media (min-width: 768px) {

	.rl-sobre__origen-grid {
		grid-template-columns: 1fr 1fr;
		gap: clamp(3rem, 6vw, 5rem);
		align-items: start;
	}
}

.rl-sobre__origen-statement {
	font-size: clamp(1.75rem, 4vw, 2.625rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--rl-ink, #16263b);
	margin: 0;
}

.rl-sobre__origen-statement em {
	font-style: italic;
	font-family: var(--rl-serif, Georgia, serif);
	font-weight: 400;
	color: oklch(47% 0.23 13);
	display: block;
	margin-top: 0.25rem;
}

.rl-sobre__origen-body {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

.rl-sobre__origen-body p {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--rl-text-muted, #5a6478);
	margin: 0;
	max-width: 60ch;
}

.rl-sobre__link {
	display: inline-block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: oklch(47% 0.23 13);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rl-sobre__link:hover {
	color: oklch(66% 0.22 13);
}

.rl-sobre__callout {
	margin-top: clamp(3rem, 6vw, 4.5rem);
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
	border-top: 1px solid var(--rl-border, #e2e5ed);
}

.rl-sobre__callout-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	margin-bottom: 2rem;
}

@media (max-width: 480px) {

	.rl-sobre__callout-stats {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

.rl-sobre__stat {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.rl-sobre__stat-num {
	font-size: clamp(2.75rem, 5vw, 4rem);
	font-weight: 800;
	color: oklch(47% 0.23 13);
	line-height: 1;
	letter-spacing: -0.04em;
}

.rl-sobre__stat-label {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--rl-text-muted, #5a6478);
	letter-spacing: 0.01em;
}

.rl-sobre__callout-cierre {
	font-size: clamp(1.0625rem, 2vw, 1.25rem);
	font-weight: 700;
	color: var(--rl-ink, #16263b);
	line-height: 1.4;
	letter-spacing: -0.01em;
	max-width: 58ch;
	margin: 0;
}

/* ── /preguntas-frecuentes/ — FAQ accordion ───────────────────────────── */
.rl-faq {
	padding-block: var(--section-pad-y, 5rem);
	background: var(--rl-white, #fff);
}

.rl-faq__groups {
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 6vw, 4.5rem);
}

.rl-faq__group-title {
	font-weight: 800;
	color: oklch(47% 0.23 13);
	margin: 0 0 1rem;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
}

.rl-faq__item {
	border-top: 1px solid var(--rl-border, #e2e5ed);
}

.rl-faq__item:last-child {
	border-bottom: 1px solid var(--rl-border, #e2e5ed);
}

.rl-faq__item summary {
	list-style: none;
}

.rl-faq__item summary::-webkit-details-marker {
	display: none;
}

.rl-faq__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	padding-block: 1.25rem;
	cursor: pointer;
	font-size: clamp(1rem, 1.8vw, 1.125rem);
	font-weight: 600;
	color: var(--rl-ink, #16263b);
	line-height: 1.35;
	user-select: none;
}

.rl-faq__question:hover {
	color: oklch(47% 0.23 13);
}

.rl-faq__chevron {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
	color: oklch(47% 0.23 13);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease-out;
}

.rl-faq__chevron::before {
	content: "+";
	display: block;
}

details[open] .rl-faq__question {
	color: oklch(47% 0.23 13);
}

details[open] .rl-faq__chevron {
	transform: rotate(45deg);
	color: oklch(47% 0.23 13);
}

.rl-faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

details[open] .rl-faq__answer {
	grid-template-rows: 1fr;
}

.rl-faq__answer-inner {
	overflow: hidden;
	padding-bottom: 1.5rem;
}

.rl-faq__answer-inner p {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--rl-text-muted, #5a6478);
	margin: 0 0 0.75rem;
	max-width: 68ch;
}

.rl-faq__answer-inner p:last-child {
	margin-bottom: 0;
}

.rl-faq__answer-inner a {
	color: oklch(47% 0.23 13);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rl-faq__answer-inner a:hover {
	color: oklch(66% 0.22 13);
}


/* Pagination */
.wp-block-query-pagination {
	margin-top: var(--wp--custom--spacing--2xl);
	gap: var(--wp--custom--spacing--sm);
}

.wp-block-query-pagination a,
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers {
	padding: 8px 14px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--text-secondary);
	background: var(--wp--preset--color--bg-soft);
	border-radius: var(--wp--custom--radius--sm);
	text-decoration: none;
	transition:
		background var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out),
		color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out);
}

.wp-block-query-pagination a:hover,
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers:hover {
	background: var(--wp--preset--color--accent-blue);
	color: var(--wp--preset--color--white);
}

.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--text-primary);
	color: var(--wp--preset--color--white);
	font-weight: 700;
}

/* ============================================
   ANIMATIONS — Fade-up on scroll
   ============================================ */
.rl-animate {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 400ms ease, transform 400ms ease;
}

.rl-animate.is-visible {
	opacity: 1;
	transform: translateY(0);
}


/* ============================================
   S1 SPRINT — SECTION + CARD BASE (shared visual language)
   Reusable by S2–S7 — no per-section duplication.
   ============================================ */

/* SECTION + CARD BASE */
.rl-section {
	padding-block: var(--section-pad-y);
	background: var(--rl-cream); /* base global; --dark overrides ink */
}

/* B1 — Zebra solo en home: alterna cream / blanco-suave entre secciones.
   Excluye las dark (newsletter) y deja el hero (.rl-hero) intacto. */
.rl-home > .rl-section:not(.rl-section--dark):nth-child(even) {
	background: var(--rl-cream-zebra);
}

/* S3 — Zebra producto: misma alternancia cream / cream-zebra entre las
   secciones de la columna de contenido. nth-child cuenta sobre el DOM
   renderizado, así que auto-ajusta las secciones condicionales. */
.rl-product-layout__main > .rl-section:not(.rl-section--dark):nth-child(even) {
	background: var(--rl-cream-zebra);
}

.rl-section__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.rl-section--dark {
	background: var(--rl-ink);
	color: #fff;
}

.rl-section--dark p,
.rl-section--dark li {
	color: rgba(255, 255, 255, 0.82);
}

.rl-card {
	background: var(--rl-white);
	border: 1px solid var(--rl-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.rl-eyebrow {
	font-size: var(--fs-eyebrow);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--rl-coral);
	margin-bottom: 0.5rem;
}

.rl-title {
	font-size: var(--fs-h2);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--rl-ink);
	margin-bottom: 1rem;
}

.rl-section--dark .rl-title {
	color: #fff;
}

/* CTA button — internal actions only (coral) */
.rl-btn--coral {
	display: inline-flex;
	align-items: center;
	justify-content: center;   /* texto siempre centrado sin importar el ancho */
	background: var(--rl-coral);
	color: #fff;
	font-weight: 700;
	font-size: var(--fs-body);
	padding: 0.75rem 1.5rem;
	border-radius: var(--rl-radius-pill);
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--rl-transition-base);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); /* legibilidad: blanco sobre coral = 2.84:1 (excepción branding — ver DESIGN.md) */
}

.rl-btn--coral:hover {
	background: var(--rl-coral-hover);
}

.rl-btn--coral:focus-visible {
	outline: 3px solid var(--rl-ink);
	outline-offset: 3px;
}

/* Variante categoria: usa --cat-solid como color de fondo (hereda del ancestro) */
.rl-btn--cat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--cat-solid, var(--rl-coral));
	color: #fff;
	font-weight: 700;
	font-size: var(--fs-body);
	padding: 0.75rem 1.5rem;
	border-radius: var(--rl-radius-pill);
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--rl-transition-base);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.rl-btn--cat:hover {
	background: color-mix(in oklch, var(--cat-solid, var(--rl-coral)) 82%, black);
}

.rl-btn--cat:focus-visible {
	outline: 3px solid var(--rl-ink);
	outline-offset: 3px;
}

/* .rl-btn--trust eliminado (Sprint Secciones) — usar .rl-btn--coral */

/* ============================================
   COPY-BAND (Section #6)
   ============================================ */
.rl-copy-band {
	text-align: center;
}

.rl-copy-band .rl-copy-band__number {
	font-size: var(--fs-hero);
	font-weight: 800;
	color: #fff; /* scoped to beat .rl-section--dark p (.82) so the big number stays full white */
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin-bottom: 0.75rem;
}

.rl-copy-band__sub {
	font-size: var(--fs-body);
	max-width: 520px;
	margin-inline: auto;
	line-height: 1.65;
}

/* ============================================
   S2 SPRINT — SCROLLER (shared by #2 Ofertas + #5 Categorías)
   ============================================ */

/* SCROLLER */

/* Wrapper: positions prev/next buttons absolutely on desktop */
.rl-scroller {
	position: relative;
}

/* The scrollable list */
.rl-scroller__list {
	display: flex;
	align-items: stretch;
	gap: var(--card-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	list-style: none;
	padding: 0;
	margin: 0;

	/* Hide scrollbar visually but keep it functional */
	scrollbar-width: none;
}

.rl-scroller__list > li {
	display: flex;
}

.rl-scroller__list::-webkit-scrollbar {
	display: none;
}

/* Prev / Next nav buttons — hidden until JS reveals them ≥900px */
.rl-scroller__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	border-radius: 50%;
	border: 1px solid var(--rl-border);
	background: var(--rl-white);
	color: var(--rl-ink);
	cursor: pointer;
	transition: background var(--rl-transition-base), border-color var(--rl-transition-base);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.rl-scroller__btn--prev {
	left: -22px;
}

.rl-scroller__btn--next {
	right: -22px;
}

.rl-scroller__btn:hover {
	background: var(--rl-cream);
	border-color: var(--rl-ink);
}

.rl-scroller__btn:focus-visible {
	outline: 3px solid var(--rl-ink);
	outline-offset: 3px;
}

.rl-scroller__btn:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* Decorative dots container */
.rl-scroller__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 1rem;
}

.rl-scroller__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rl-border);
	transition: background var(--rl-transition-base);
}

.rl-scroller__dot.is-active {
	background: var(--rl-ink);
}

/* Reduced motion: no smooth scroll animation */
@media (prefers-reduced-motion: no-preference) {

	.rl-scroller__list {
		scroll-behavior: smooth;
	}
}

/* ============================================
   S2 SPRINT — OFERTAS (Section #2)
   ============================================ */

/* Oferta card — compact, white background */
.rl-oferta-card {
	flex: 0 0 auto;
	width: 78vw;          /* mobile-first: next card peeks */
	max-width: 320px;
	scroll-snap-align: start;
	background: var(--rl-white);
	border: 1px solid var(--rl-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Desktop: fixed-width cards (~4–5 visible) */
@media (min-width: 900px) {

	.rl-oferta-card {
		width: 260px;
		max-width: none;
	}
}


/* ML outbound button — amarillo MercadoLibre (ENG-028, max hierarchy) */
.rl-btn--ml {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--rl-ml-yellow);
	color: var(--rl-ink);
	font-weight: 700;
	font-size: var(--fs-small);
	padding: 0.625rem 1rem;
	border-radius: var(--rl-radius-pill);
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--rl-transition-base);
	white-space: nowrap;
	align-self: stretch;   /* mismo ancho que "Ver análisis" en la card */
}

.rl-btn--ml:hover {
	background: var(--rl-ml-yellow-hover);
}

.rl-btn--ml:focus-visible,
.rl-ml-cta:focus-visible,
.rl-cta-button--ml:focus-visible {
	outline: 3px solid var(--rl-ink);
	outline-offset: 3px;
}

/* On dark backgrounds the ink outline is invisible — use white */
.rl-oferta-price-history .rl-ml-cta:focus-visible {
	outline-color: #fff;
}


/* Hover lift — only when motion is OK */
@media (prefers-reduced-motion: no-preference) {

	.rl-oferta-card {
		transition: box-shadow var(--rl-transition-base), transform var(--rl-transition-base);
	}

	.rl-oferta-card:hover {
		box-shadow: var(--card-shadow), 0 8px 24px rgba(22, 38, 59, 0.1);
		transform: translateY(-3px);
	}
}

/* ============================================
   S2 SPRINT — CATEGORIES (Section #5)
   ============================================ */

/* Category card — white background, color enters discreetly */
.rl-cat-card {
	flex: 0 0 auto;
	width: calc(100vw / 1.2 - var(--gutter) * 2);  /* mobile-first: ~1.2 cards visible */
	max-width: 220px;
	height: 100%;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	background: var(--rl-white);
	border: 1px solid var(--rl-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	padding: 1.25rem 1rem 0;
	text-decoration: none;
	color: var(--rl-ink);
	position: relative;
	overflow: hidden;
}

/* Desktop: fixed-width cards (~4 visible) */
@media (min-width: 900px) {

	.rl-cat-card {
		width: 180px;
		max-width: none;
	}
}

/* Foto duotono — mix-blend-mode:color sobre <img srcset> */
.rl-cat-card__photo {
	display: block;
	position: relative;
	width: calc(100% + 2rem);
	height: 88px;
	margin: -1.25rem -1rem 0.75rem;
	border-radius: var(--card-radius) var(--card-radius) 0 0;
	overflow: hidden;
	flex-shrink: 0;
}

.rl-cat-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.rl-cat-card__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--cat-solid);
	mix-blend-mode: color;
	pointer-events: none;
}

/* Icon circle — soft tint background, solid icon stroke */
.rl-cat-card__icon-wrap {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--cat-soft);
	color: var(--cat-solid);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Category name */
.rl-cat-card__name {
	font-size: var(--fs-h3);
	font-weight: 700;
	color: var(--rl-ink);
	text-align: center;
	line-height: 1.2;
}

/* Analysis count */
.rl-cat-card__count {
	font-size: var(--fs-small);
	color: var(--rl-text-muted, #6b7280);
	text-align: center;
	margin-bottom: 1rem;
}

/* Bottom accent line — 3px, grows on hover */
.rl-cat-card__accent {
	display: block;
	height: 3px;
	width: 100%;
	background: var(--cat-solid);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--rl-transition-base);
	margin-top: auto;
}

.rl-cat-card:focus-visible {
	outline: 3px solid var(--rl-ink);
	outline-offset: 3px;
}

/* Hover effects — only when motion is OK */
@media (prefers-reduced-motion: no-preference) {

	.rl-cat-card {
		transition: box-shadow var(--rl-transition-base), transform var(--rl-transition-base);
	}

	.rl-cat-card:hover {
		box-shadow: var(--card-shadow), 0 8px 24px rgba(22, 38, 59, 0.1);
	}

	.rl-cat-card:hover .rl-cat-card__accent {
		transform: scaleX(1);
	}
}


/* ── Marcas Hub page (/marcas/) ──────────────────────────────────────── */
.rl-marcas-hub__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.75rem;
}

@media (min-width: 640px) {

	.rl-marcas-hub__grid {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	}
}

/* .rl-marca-card — estilos en assets/css/blocks/marcas.css */
.rl-marcas-hub__no-results {
	text-align: center;
	color: #6b7280;
	font-size: 1rem;
	padding: 2rem 0;
}

/* ── Taxonomy Marca (/marca/[slug]/) ─────────────────────────────────── */
.rl-marca-tax-hero {
	padding-block: clamp(3rem, 7vw, 5rem);
	background: #16263b;
	color: #fff;
	position: relative;
	overflow: hidden;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.rl-marca-tax-hero__glow {
	position: absolute;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	top: -140px;
	right: -80px;
	background: var(--rl-coral, #ff6b35);
	opacity: 0.14;
	filter: blur(100px);
	pointer-events: none;
}

.rl-marca-tax-hero__inner {
	position: relative;
	z-index: 1;
}

.rl-marca-tax-hero__head {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	margin-top: 1rem;
	flex-wrap: wrap;
}

.rl-marca-tax-hero__title {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 0.5rem;
	color: #fff;
}

.rl-marca-tax-hero__count {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.55);
	margin: 0;
}

.rl-marca-tax-hero__count strong {
	color: #fff;
}

.rl-marca-tax-hero__editorial {
	margin-top: 1.5rem;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--rl-coral, #ff6b35);
	background: rgba(255, 255, 255, 0.05);
	border-radius: 0 0.5rem 0.5rem 0;
	max-width: 560px;
}

.rl-marca-tax-hero__editorial-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.4);
	margin: 0 0 0.5rem;
}

.rl-marca-tax-hero__editorial-text {
	font-family: var(--rl-serif);
	font-style: italic;
	font-size: 1.125rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
}

/* Best badge */
.rl-marca-best-badge {
	padding-block: 1rem;
	border-bottom: 1px solid var(--rl-border, #e2e5ed);
}

.rl-marca-best-badge__inner {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 1.25rem;
	background: var(--rl-cream, #f9f7f2);
	border: 1px solid var(--rl-border, #e2e5ed);
	border-radius: 0.625rem;
	text-decoration: none;
	color: var(--rl-ink, #191c1d);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.rl-marca-best-badge__inner:hover {
	border-color: var(--rl-coral, #ff6b35);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.rl-marca-best-badge__label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--rl-coral, #ff6b35);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rl-marca-best-badge__title {
	font-size: 0.9375rem;
	font-weight: 600;
}

.rl-marca-best-badge__score {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--rl-coral, #ff6b35);
	margin-left: auto;
}

/* Low-contrast override (WCAG 1.4.11):
   Slugs where solid-on-soft fails ≥3:1 get icon in --rl-ink.
   The bottom accent line still uses --cat-solid. (salud: 2.81:1) */
.rl-cat-card--ink-icon .rl-cat-card__icon-wrap {
	color: var(--rl-ink);
}


/* Stats band — editorial dark strip replacing the old WP core stat blocks */
.rl-stats-band {
	background: var(--rl-ink);
	color: #fff;
	padding: 1rem 0;
}

.rl-stats-band__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	text-align: center;
}

.rl-stats-band__copy {
	font-size: var(--fs-body);
	line-height: 1.5;
	margin: 0;
	opacity: 0.9;
}

.rl-stats-band__copy a {
	color: var(--rl-coral);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 2px;
	transition: text-decoration-color 150ms;
}

.rl-stats-band__copy a:hover {
	text-decoration-color: currentcolor;
}

/* ============================================
   METHODOLOGY (Section #10)
   ============================================ */
.rl-methodology__intro {
	font-size: var(--fs-body);
	color: var(--rl-text-muted);
	line-height: 1.65;
	margin-bottom: 1.5rem;
}

.rl-methodology__steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--card-gap);
	margin-bottom: 1.75rem;
}

@media (min-width: 900px) {

	.rl-methodology__steps {
		grid-template-columns: repeat(3, 1fr);
	}
}

.rl-methodology__step {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.rl-methodology__step-header {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.rl-methodology__step-num {
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--rl-coral);
	background: rgba(255, 107, 53, 0.1);
	border-radius: var(--rl-radius-pill);
	padding: 0.2rem 0.55rem;
	line-height: 1.4;
}

.rl-methodology__step-icon {
	color: var(--rl-coral);
	flex-shrink: 0;
}

.rl-methodology__step-title {
	font-size: var(--fs-h3);
	font-weight: 700;
	color: var(--rl-ink);
	line-height: 1.2;
}

.rl-methodology__step-desc {
	font-size: var(--fs-body);
	color: var(--rl-text-muted);
	line-height: 1.65;
	margin: 0;
}

/* ============================================
   28. FAQ SECTION
   ============================================ */

/* Narrow inner — 880px max, used by FAQ and Newsletter */
.rl-section__inner--narrow {
	max-width: var(--rl-container-narrow);
	margin-inline: auto;
	width: 100%;
}

.rl-faq {
	background: var(--rl-white);
}

/* Card contenedora — da volumen y separa del background */
.rl-faq__card {
	margin-top: 2.5rem;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--rl-border);
	box-shadow: 0 2px 20px rgba(22, 38, 59, 0.07);
}

.rl-faq__list {

	/* sin border-top propio: la card lo provee */
}

.rl-faq__item {
	border-bottom: 1px solid var(--rl-border);
	transition: background var(--rl-transition-fast);
}

.rl-faq__item:last-child {
	border-bottom: none;
}

/* Accent sutil en ítem abierto */
details[open].rl-faq__item {
	background: #fafbfc;
}

details[open].rl-faq__item .rl-faq__question {
	color: oklch(47% 0.23 13);
}

.rl-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.375rem 1.5rem;
	cursor: pointer;
	font-size: var(--fs-h3);
	font-weight: 700;
	color: var(--rl-ink);
	list-style: none;
	user-select: none;
	transition: color var(--rl-transition-fast);
}

.rl-faq__question::-webkit-details-marker {
	display: none;
}

.rl-faq__question:focus-visible {
	outline: 3px solid var(--rl-coral);
	outline-offset: -3px;
	border-radius: 12px;
}

.rl-faq__body {
	padding: 0 1.5rem 1.5rem;
}

/* ── /aviso-legal/ — prose legal ─────────────────────────────────────── */
.rl-aviso__prose {
	max-width: 72ch;
	display: flex;
	flex-direction: column;
	gap: clamp(2.5rem, 5vw, 3.5rem);
}

.rl-aviso__bloque h2 {
	font-size: clamp(1.125rem, 2vw, 1.25rem);
	font-weight: 800;
	color: var(--rl-ink, #16263b);
	letter-spacing: -0.02em;
	margin: 0 0 0.875rem;
}

.rl-aviso__bloque p {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--rl-text-muted, #5a6478);
	margin: 0 0 0.875rem;
}

.rl-aviso__bloque p:last-of-type {
	margin-bottom: 0.75rem;
}

.rl-aviso__bloque .rl-sobre__link {
	margin-top: 0.25rem;
}

.rl-aviso__lista {
	padding-left: 1.25rem;
	margin: 0.5rem 0 0.875rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.rl-aviso__lista li {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--rl-text-muted, #5a6478);
}

.rl-aviso__fecha {
	font-size: 0.875rem;
	color: var(--rl-text-muted, #5a6478);
	margin: 0;
	opacity: 0.7;
}

/* ── /contacto/ ───────────────────────────────────────────────────────── */
.rl-contacto__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(3rem, 7vw, 5rem);
}

@media (min-width: 768px) {

	.rl-contacto__grid {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.rl-contacto__lista {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.rl-contacto__lista li {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: 0.75rem;
	align-items: start;
}

.rl-contacto__item-num {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 800;
	color: oklch(47% 0.23 13);
	line-height: 1.1;
	letter-spacing: -0.04em;
}

.rl-contacto__lista strong {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: var(--rl-ink, #16263b);
	margin-bottom: 0.25rem;
}

.rl-contacto__lista p {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--rl-text-muted, #5a6478);
	margin: 0;
}

.rl-contacto__email-wrap {
	margin-bottom: 2rem;
}

.rl-contacto__email-link {
	display: inline-block;
	font-size: clamp(1.125rem, 2.5vw, 1.5rem);
	font-weight: 700;
	color: oklch(47% 0.23 13);
	text-decoration: underline;
	text-underline-offset: 4px;
	letter-spacing: -0.01em;
	word-break: break-all;
}

.rl-contacto__email-link:hover {
	color: oklch(66% 0.22 13);
}

.rl-contacto__tiempo {
	font-size: 0.9375rem;
	color: var(--rl-text-muted, #5a6478);
	margin: 0.5rem 0 0;
}

.rl-contacto__nota {
	padding: 1.25rem;
	background: var(--rl-cream, #f9f7f2);
	border-radius: 0.75rem;
	margin-bottom: 1.75rem;
}

.rl-contacto__nota p {
	font-size: 0.9375rem;
	color: var(--rl-text-muted, #5a6478);
	margin: 0 0 0.5rem;
}

.rl-contacto__no-acepta-label {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rl-text-muted, #5a6478);
	margin: 0 0 0.625rem;
}

.rl-contacto__no-acepta ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.rl-contacto__no-acepta li {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--rl-text-muted, #5a6478);
	padding-left: 1rem;
	position: relative;
}

.rl-contacto__no-acepta li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: oklch(47% 0.23 13);
	font-weight: 700;
}

.rl-faq__body p {
	margin: 0;
	font-size: var(--fs-body);
	color: var(--rl-text-muted);
	line-height: 1.65;
	max-width: 68ch;
}

/* ============================================
   29. NEWSLETTER SECTION
   ============================================ */

.rl-newsletter {
	text-align: center;
}

.rl-newsletter .rl-section__inner--narrow {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.rl-newsletter__subhead {
	font-size: var(--fs-body);
	color: rgba(255, 255, 255, 0.65);
	margin: 0.5rem 0 2rem;
	max-width: 44ch;
	line-height: 1.6;
}

.rl-newsletter__form {
	width: 100%;
	max-width: 480px;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.rl-newsletter__field {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

@media (min-width: 600px) {

	.rl-newsletter__field {
		flex-direction: row;
	}

	.rl-newsletter__input {
		flex: 1;
		min-width: 0;
	}
}

.rl-newsletter__input {
	padding: 0.75rem 1rem;
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--rl-radius-md);
	background: rgba(255, 255, 255, 0.07);
	color: var(--rl-white);
	font-size: var(--fs-body);
	font-family: inherit;
	line-height: 1;
	transition: border-color var(--rl-transition-fast);
}

.rl-newsletter__input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.rl-newsletter__input:focus-visible {
	outline: none;
	border-color: var(--rl-coral);
}

.rl-newsletter__disclaimer {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.45);
	line-height: 1.5;
	margin: 0;
}

.rl-newsletter .rl-btn--coral {
	background: oklch(47% 0.23 13);
	border-color: oklch(47% 0.23 13);
}

.rl-newsletter .rl-btn--coral:hover {
	background: oklch(52% 0.23 13);
}

/* ============================================
   18b. FOOTER v2 (S5 — ink, 3-col, trust badge)
   Overrides §18 via cascade (appended last).
   ============================================ */
.rl-footer {
	background: var(--rl-ink);
	color: rgba(255, 255, 255, 0.7);
	padding: 0;
}

.rl-footer__inner {
	max-width: var(--rl-container-max);
	margin-inline: auto;
	padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 3vw, 1.25rem) 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

@media (min-width: 640px) {

	.rl-footer__inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {

	.rl-footer__inner {
		grid-template-columns: 1.6fr 1fr 1fr;
		gap: 3rem;
	}
}

/* Brand */
.rl-footer a.rl-footer__logo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--rl-white);
	margin-bottom: 0.875rem;
	transition: color var(--rl-transition-fast);
}

.rl-footer a.rl-footer__logo svg {
	stroke: oklch(47% 0.23 13);
}

.rl-footer a.rl-footer__logo:hover {
	color: var(--rl-coral);
}

.rl-footer__tagline {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.65;
	margin: 0 0 1.375rem;
	max-width: 32ch;
}

/* Trust badge */
.rl-footer__trust {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(0, 182, 122, 0.1);
	border: 1px solid rgba(0, 182, 122, 0.25);
	border-radius: var(--rl-radius-pill);
	padding: 0.375rem 0.875rem 0.375rem 0.625rem;
}

.rl-footer__stars {
	display: flex;
	gap: 2px;
	align-items: center;
}

.rl-footer__stars svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.rl-footer__trust-score {
	font-size: 0.9375rem;
	font-weight: 800;
	color: #00b67a;
	line-height: 1;
}

.rl-footer__trust-label {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1;
}

/* Nav columns */
.rl-footer__col-title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--rl-white);
	margin: 0 0 1rem;
}

.rl-footer__nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.rl-footer__nav a {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	transition: color var(--rl-transition-fast);
}

.rl-footer__nav a:hover {
	color: var(--rl-coral);
}

.rl-footer__nav a:focus-visible {
	outline: 2px solid var(--rl-coral);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Bottom bar */
.rl-footer__bottom {
	margin-top: 3rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: block;
	text-align: left;
}

.rl-footer__inner--bottom {
	display: block;
	padding-top: 1.25rem;
	padding-bottom: 1.75rem;
}

.rl-footer__copy {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.3);
	line-height: 1.5;
	margin: 0;
}

/* ============================================
   SCORE RING — firma visual (Sprint FUNDACIÓN)
   Uso: echo rl_score_ring( 8.7 );
   CSS vars: --_c color, --_o offset, --_k circumference
   ============================================ */
.rl-score-ring {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.rl-score-ring svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	overflow: visible;
}

.rl-score-ring__track {
	fill: none;
	stroke: rgba(22, 38, 59, 0.08);
	stroke-width: 6;
}

.rl-score-ring__fill {
	fill: none;
	stroke: var(--_c, #00b67a);
	stroke-width: 6;
	stroke-linecap: round;
	stroke-dasharray: var(--_k, 270.18);
	stroke-dashoffset: var(--_o, 0);
	animation: rl-ring-in var(--wp--custom--motion--duration-score, 1.8s) var(--wp--custom--motion--ease-out, cubic-bezier(0.15, 0.65, 0.25, 1)) var(--rl-ring-delay, 0.6s) both;
}

@keyframes rl-ring-in {

	from {
		stroke-dashoffset: var(--_k, 270.18);
	}

	to {
		stroke-dashoffset: var(--_o, 0);
	}
}

.rl-score-ring__num {
	position: relative;
	font-size: var(--_f, 2.75rem);
	font-weight: 800;
	line-height: 1;
	color: var(--_c, #00b67a);
	letter-spacing: -0.04em;
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-variant-numeric: tabular-nums;
}


.rl-panel--methodology {
	background: rgba(255, 107, 53, 0.04);
	border: 1px solid rgba(255, 107, 53, 0.14);
	border-radius: var(--rl-radius-panel);
}

@media (max-width: 899px) {

	.rl-panel--methodology .rl-btn--coral {
		display: flex;
		width: 100%;
	}
}

/* ── Methodology card: teal variant (used on /comparar/) ─── */
.rl-methodology--teal .rl-panel--methodology {
	background: oklch(45% 0.11 178 / 0.05);
	border-color: oklch(45% 0.11 178 / 0.18);
}

.rl-methodology--teal .rl-methodology__step-num {
	color: var(--cat-hub-dark, oklch(38% 0.12 175));
	background: var(--cat-hub-soft, #e0f5f3);
}

.rl-methodology--teal .rl-methodology__step-icon {
	color: var(--cat-hub-dark, oklch(38% 0.12 175));
}

.rl-methodology--teal .rl-eyebrow {
	color: var(--cat-hub-dark, oklch(38% 0.12 175));
}

.rl-methodology--teal .rl-btn--coral {
	background: var(--cat-hub-dark, oklch(38% 0.12 175));
	border-color: var(--cat-hub-dark, oklch(38% 0.12 175));
}

.rl-methodology--teal .rl-btn--coral:hover {
	background: var(--cat-hub-dark-hover, oklch(53% 0.12 175));
	border-color: var(--cat-hub-dark-hover, oklch(53% 0.12 175));
}

@media (max-width: 899px) {

	.rl-methodology--teal .rl-btn--coral {
		display: flex;
		width: 100%;
	}
}

/* .rl-marca-card scroller — obsoleto; estilos en assets/css/blocks/marcas.css */


/* ============================================
   SPRINT VISUAL POLISH — copy-band glass card
   ============================================ */
.rl-copy-band--glass {
	background: transparent;
}

.rl-copy-band__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0;
	background: oklch(96.5% 0.018 240);  /* blue-tint — paralelo al green-tint del trust */
	border: 1px solid rgba(22, 38, 59, 0.16);
	border-radius: var(--rl-radius-panel);
	overflow: hidden;
}

.rl-copy-band__text {
	text-align: center;
	padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.5rem) clamp(2rem, 4vw, 3rem);
}

.rl-copy-band--glass .rl-copy-band__number {
	font-size: var(--fs-hero);
	font-weight: 800;
	color: var(--rl-ink);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin-bottom: 0.75rem;
}

.rl-copy-band--glass .rl-copy-band__number strong {
	color: var(--rl-coral);
}

.rl-copy-band__img-wrap {
	width: 100%;
	overflow: hidden;
}

.rl-copy-band__img-wrap img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}

/* D4: subtítulo convertido en listado breve de metodología */
.rl-copy-band__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 420px;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.rl-copy-band__list li {
	position: relative;
	padding-left: 1.5rem;
	color: var(--rl-text-muted);
	font-size: var(--fs-body);
	line-height: 1.5;
}

.rl-copy-band__list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #00b67a;
	font-weight: 800;
}

/* FAQ — __question compartida con /preguntas-frecuentes/ (resto del polish FAQ → home.css, split F4) */
@media (max-width: 640px) {

	.rl-faq__question {
		font-size: 0.9375rem;
	}
}

/* ============================================
   SPRINT VISUAL POLISH — marcas auto-scroll ticker
   ============================================ */

.rl-marcas__ticker {
	display: flex;
	width: max-content;
	gap: 3rem;

	/* El auto-scroll lo maneja home.js vía scrollLeft (no animación CSS),
     para que coexista con el swipe manual del usuario. */
}

.rl-marca-link {
	display: inline-block;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--rl-ink);
	text-decoration: none;
	letter-spacing: -0.01em;
	white-space: nowrap;
	flex-shrink: 0;
	transition: color var(--rl-transition-fast);
}

.rl-marca-link:hover,
.rl-marca-link:focus-visible {
	color: var(--rl-coral);
}

.rl-marca-link:focus-visible {
	outline: 2px solid var(--rl-coral);
	outline-offset: 3px;
	border-radius: 2px;
}

/* -----------------------------------------------------------------------
   T7: DELIGHT — category card icon hover
   ----------------------------------------------------------------------- */
.rl-cat-card .rl-cat-card__icon svg {
	transition: transform 150ms var(--ease-out-quart), color 150ms var(--ease-out-quart);
}

.rl-cat-card:hover .rl-cat-card__icon svg,
.rl-cat-card:focus-within .rl-cat-card__icon svg {
	transform: scale(1.15);
	color: var(--rl-coral);
}


/* -----------------------------------------------------------------------
   T8: OVERDRIVE — scroll-driven heading reveals (Dirección B)
   ----------------------------------------------------------------------- */
@supports (animation-timeline: scroll()) {

	@media (prefers-reduced-motion: no-preference) {

		@keyframes rl-reveal-heading {

			from {
				clip-path: inset(0 0 25% 0);
				opacity: 0.4;
			}

			to {
				clip-path: inset(0 0 0% 0);
				opacity: 1;
			}
		}

		.rl-section .rl-title,
		.rl-section .rl-eyebrow {
			display: block; /* clip-path requires block-level box */
			animation-name: rl-reveal-heading;
			animation-duration: 1s;
			animation-fill-mode: both;
			animation-timing-function: var(--ease-out-expo);
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}
	}
}

/* -----------------------------------------------------------------------
   T9: HERO — entrance sequence (staggered fade-up on page load)
   ----------------------------------------------------------------------- */
@keyframes rl-hero-in {

	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* -----------------------------------------------------------------------
   T10: CATEGORIES — stagger entrance (IO adds .is-visible to section)
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

	/* @starting-style: cards are visible without JS (no is-visible class = no animation).
     When IO fires and adds .is-visible, @starting-style provides the from-state for
     the transition. Same progressive-enhancement pattern as the mobile menu. */
	.rl-categories.is-visible .rl-cat-card {
		transition:
			opacity  450ms var(--ease-out-expo) calc(var(--cat-index, 0) * 55ms),
			transform 450ms var(--ease-out-expo) calc(var(--cat-index, 0) * 55ms);

		@starting-style {
			opacity: 0;
			transform: translateY(14px);
		}
	}
}

/* ============================================
   §PRODUCT — Single product page
   ============================================ */

.rl-btn--full {
	width: 100%;
	justify-content: center;
}

/* ── Layout: main + sidebar ───────────────────────────────────────────────── */

/* main.wp-block-group.is-layout-flow > * { display: block } from WP block layout
   overrides our grid, so we raise specificity to win without !important. */


/* Ghost "Ir al análisis" button — white bg, ink text */
.rl-ghost-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.62em 1.35em;
	border-radius: 0.5rem;
	border: none;
	color: var(--rl-ink, #191c1d);
	background: rgba(249, 247, 242, 1);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: filter 0.15s, transform 0.15s;
}

.rl-ghost-btn:hover {
	filter: brightness(0.92);
	transform: translateY(-1px);
}

.rl-score-bar {
	display: grid;
	grid-template-columns: minmax(100px, 0.3fr) 1fr 2.5rem;
	align-items: center;
	gap: var(--space-sm, 0.75rem);
}

.rl-score-bar__label {
	font-size: 0.875rem;
}

.rl-score-bar__track {
	height: 8px;
	border-radius: 4px;
	background: var(--rl-border, #e5e7eb);
	overflow: hidden;
}

.rl-score-bar__fill {
	display: block;
	height: 100%;
	width: var(--bar-pct, 0%);
	background: var(--cat-current, #047a55);
	border-radius: 4px;
	transition: width 0.8s cubic-bezier(0.34, 1.1, 0.64, 1);
}

.rl-score-bar__value {
	font-size: 0.875rem;
	font-weight: 700;
	text-align: right;
}

/* S2: utilidad de acento editorial (Instrument Serif itálica). La usa el acento
   del título hero (S4, coloreado con la categoría) y cualquier pull-quote. */


.rl-verdict__buyif-block--yes {
	background: rgba(5, 150, 105, 0.06);
	border-color: rgba(5, 150, 105, 0.18);
}

.rl-verdict__buyif-block--no {
	background: rgba(220, 38, 38, 0.06);
	border-color: rgba(220, 38, 38, 0.18);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAXONOMY CATEGORÍA — /categorias/{slug}/  ·  Motor de facetas editorial
   Hero · Podio (carrusel móvil) · Filtros (barra + bottom-sheet) · Grilla
   · Veredicto en vivo · Sheets
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Chip base ─────────────────────────────────────────────────────────────── */
.rl-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	border: 1.5px solid var(--rl-border, #e2e5ed);
	background: var(--rl-white, #fff);
	color: var(--rl-ink, #191c1d);
	transition: background 0.14s, border-color 0.14s, color 0.14s, opacity 0.14s;
	white-space: nowrap;
	min-height: 36px;
}

.rl-chip:hover {
	background: var(--cat-soft, rgba(255, 107, 53, 0.1));
	border-color: var(--cat-solid, var(--rl-coral, #ff6b35));
	color: var(--cat-solid, var(--rl-coral, #ff6b35));
}

.rl-chip.is-active {
	background: var(--cat-soft, rgba(255, 107, 53, 0.12));
	border-color: var(--cat-solid, var(--rl-coral, #ff6b35));
	color: var(--cat-solid, var(--rl-coral, #ff6b35));
}

.rl-chip__count {
	font-size: 0.6875rem;
	font-weight: 700;
	opacity: 0.6;
}

.rl-chip__count:empty {
	display: none;
}

.rl-chip[aria-disabled="true"],
 .rl-chip.is-disabled {
	opacity: 0.35;
	pointer-events: none;
	cursor: default;
}

/* ── Botones extra ─────────────────────────────────────────────────────────── */
.rl-btn--ml {
	background: var(--rl-ml-yellow, #ffe600);
	color: var(--rl-ink, #191c1d);
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: filter 0.15s, transform 0.12s;
}

.rl-btn--ml:hover {
	filter: brightness(0.96);
	transform: translateY(-1px);
}

.rl-btn--cat {
	background: var(--cat-solid, var(--rl-coral, #ff6b35));
	color: #fff;
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: filter 0.15s, transform 0.12s;
	white-space: nowrap;
}

.rl-btn--cat:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.rl-btn--ghost-light {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.25);
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	justify-content: center;
	transition: background 0.15s, border-color 0.15s;
}

.rl-btn--ghost-light:hover {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT PAGE — section & component overrides  2026-05-30
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nuestro método: white bg in product-page context (body is dark ink).
   Sibling tras refactor S13 (Mia movida dentro de .rl-product) — ya no es descendiente. */
body.single-rl_producto .rl-tax-method-strip {
	background: #fff;
	padding: 2rem 1.25rem;
	margin-bottom: 0;
}

.rl-product + .rl-tax-method-strip {
	margin-block-start: 0 !important;
}

/* Single-producto: layout fijo "imagen arriba, texto abajo" para las 8 categorías
   (anula el grid 2-col del strip genérico de taxonomía — solo cambia el acento) */
body.single-rl_producto .rl-tax-method-strip__inner {
	display: block;
}

body.single-rl_producto .rl-tax-method-strip__banner {
	height: 240px;
}

body.single-rl_producto .rl-tax-method-strip__body {
	padding: 1.75rem 1.5rem 2rem;
	display: block;
	max-width: 64ch;
	margin: 0 auto;
	text-align: left;
}

body.single-rl_producto .rl-tax-method-strip__heading {
	font-size: var(--fs-h3);
	font-weight: 800;
	color: var(--rl-ink, #191c1d);
	margin: 0 0 0.5rem;
}

body.single-rl_producto .rl-tax-method-strip__lead {
	font-size: var(--fs-body);
	color: var(--rl-text-secondary, #5a6478);
	line-height: 1.6;
	margin: 0 0 1.25rem;
}

@media (min-width: 641px) {

	body.single-rl_producto .rl-tax-method-strip__banner {
		height: 320px;
	}

	body.single-rl_producto .rl-tax-method-strip__body {
		padding: 2.25rem 2.5rem 2.75rem;
	}
}

/* Kill gap/stripe between sections in product page */
.rl-product .rl-prod-section,
.rl-product [data-rl-section] {
	margin-bottom: 0;
}

/* Kill dark-body gap between .rl-product wrapper and mia section outside it */
body.single-rl_producto .rl-product {
	margin-bottom: 0;
}

body.single-rl_producto [data-rl-section="mia"] {
	margin-top: 0;
}

@media (max-width: 640px) {

	.rl-name-full {
		display: none;
	}
}

.rl-name-mobile {
	display: none;
}

@media (max-width: 640px) {

	.rl-name-mobile {
		display: inline;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE OFERTA — estilos movidos a assets/css/blocks/single-oferta.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE MARCAS — hero oscuro  2026-05-31
   ═══════════════════════════════════════════════════════════════════════════ */
.rl-marcas-hub__hero {
	flex-direction: column;
	justify-content: center;
	padding: 6rem 0 3rem;
}

.rl-marcas-hub__title {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 800;
	color: #fff;
	margin: 0 0 0.5rem;
}

.rl-marcas-hub__sub {
	color: rgba(255, 255, 255, 0.65);
	font-size: 1.0625rem;
	margin-bottom: 1.75rem;
}

@media (max-width: 639px) {

	.rl-marcas-hub__hero {
		padding: 5rem 0 2rem;
	}
}

/* ══════════════════════════════════════════════════════════════════
   HERO SYSTEM UNIFIED — subtítulos, accents, gap mobile
   Aplica a todos los heroes de páginas del topnav (excepto Mia).
   Colores permitidos: blanco / coral. Fondo propio de cada hero.
   ══════════════════════════════════════════════════════════════════ */

/* Subtítulos / descripciones — blanco 78%, misma escala que home */
.rl-archive-producto-hero [class*="__sub"],
.rl-marcas-hub__hero [class*="__sub"],
.rl-comp-archive-hero [class*="__sub"],
.rl-guia-archive-hero [class*="__sub"],
.rl-radar-archive [class*="__sub"] {
	color: rgba(249, 247, 242, 0.78);
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.65;
}

/* Accent en títulos (span/em con énfasis) → coral */
.rl-archive-producto-hero [class*="__title"] em,
.rl-archive-producto-hero [class*="__title-accent"],
.rl-marcas-hub__hero [class*="__title"] em,
.rl-marcas-hub__hero [class*="__title-accent"],
.rl-comp-archive-hero [class*="__title"] em,
.rl-comp-archive-hero [class*="__title-accent"],
.rl-guia-archive-hero [class*="__title"] em,
.rl-guia-archive-hero [class*="__title-accent"],
.rl-radar-archive [class*="__title"] em,
.rl-radar-archive [class*="__title-accent"] {
	color: var(--rl-coral);
	font-style: normal;
}

/* strong dentro del subtítulo → blanco puro (cifras/datos) */
.rl-archive-producto-hero [class*="__sub"] strong,
.rl-marcas-hub__hero [class*="__sub"] strong,
.rl-comp-archive-hero [class*="__sub"] strong,
.rl-guia-archive-hero [class*="__sub"] strong,
.rl-radar-archive [class*="__sub"] strong {
	color: rgba(249, 247, 242, 1);
	font-weight: 700;
}

/* Mobile: gap fluido en inner de todos los heroes del topnav */
@media (max-width: 640px) {

	.rl-archive-producto-hero [class*="__inner"],
	.rl-marcas-hub__hero [class*="__inner"],
	.rl-comp-archive-hero [class*="__inner"],
	.rl-guia-archive-hero [class*="__inner"],
	.rl-radar-archive [class*="__inner"] {
		gap: clamp(0.75rem, 3dvh, 1.5rem);
	}
}

@media (prefers-reduced-motion: reduce) {

	.js .rl-section {
		opacity: 1;
		translate: 0 0;
		transition: none;
	}

	.rl-top3__grid .rl-top3-card,
	.rl-scroller__list li {
		transition-delay: 0ms !important;
	}

	.rl-btn--coral:active,
	.rl-btn--ml:active {
		transform: none;
	}

	.rl-header {
		transition: box-shadow var(--rl-transition-base);
	}

	.rl-logo__word {
		transition: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.rl-metodo-hero__body .rl-eyebrow,
	.rl-metodo-hero__title,
	.rl-metodo-hero__sub,
	.rl-metodo__hero-cta {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.rl-metodo__paso,
	.rl-metodo__nunca-list li {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.rl-faq__answer {
		transition: none;
	}

	.rl-faq__chevron {
		transition: none;
	}

	.rl-animate {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.rl-cat-card__accent {
		transform: scaleX(0.2);
		opacity: 0.5;
	}

	.rl-cat-card:hover .rl-cat-card__accent {
		transform: scaleX(0.2);
	}

	.rl-score-ring__fill {
		animation: none;
	}

	.rl-cat-card .rl-cat-card__icon svg {
		transition: none;
	}
}

/* CAT-HUB — componente compartido home + /categorias/.
   Movido desde page-categorias.css: ambas páginas lo usan y solo style.css
   carga en las dos (home.css ≠ page-categorias.css). */
.rl-cat-hub__body {
	padding-block: 5rem;
}

/* ============================================================
   CAT-HUB · Scroller de categorías con flechas en MÓVIL
   (ENG-2026-0529-004 regla 6). Solo <768px; en >=768px el grid
   no hace overflow → flechas ocultas. JS: IIFE en main.js.
   ============================================================ */
.rl-cat-hub__scroll {
	position: relative;
}

.rl-cat-hub__nav {
	position: absolute;
	top: calc(50% - 0.75rem); /* compensa el padding-bottom:1rem del track de snap */
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	display: none; /* JS lo cambia a flex solo en móvil con overflow */
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--rl-border);
	border-radius: 999px;
	background: var(--rl-white);
	color: var(--rl-ink);
	box-shadow: var(--card-shadow);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.rl-cat-hub__nav--prev {
	left: -6px;
}

.rl-cat-hub__nav--next {
	right: -6px;
}

.rl-cat-hub__nav:hover {
	background: var(--rl-cream);
	border-color: var(--rl-ink);
}

.rl-cat-hub__nav:focus-visible {
	outline: 3px solid var(--rl-ink);
	outline-offset: 2px;
}

.rl-cat-hub__nav[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.rl-cat-hub__nav.is-visible {
	display: flex;
}

/* Cinturón de seguridad: en >=768px el grid no hace scroll → nunca mostrar flechas */
@media (min-width: 768px) {

	.rl-cat-hub__nav {
		display: none !important;
	}
}

.rl-cat-hub__grid {

	/* Móvil: scroller horizontal con snap (la .rl-cat-card ya trae width + scroll-snap) */
	list-style: none;
	margin: 0;
	padding: 0.25rem 0 1rem;
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.rl-cat-hub__grid::-webkit-scrollbar {
	display: none;
}

.rl-cat-hub__grid > li {
	flex: 0 0 auto;
	display: flex;
	list-style: none;
}

.rl-cat-hub__grid > li > .rl-cat-card {
	height: 100%;
}

/* Desktop: grid con las 8 categorías visibles (override del width de scroller) */
@media (min-width: 768px) {

	.rl-cat-hub__grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 1.25rem;
		overflow: visible;
		padding-bottom: 0;
	}

	.rl-cat-hub__grid > li {
		display: block;
	}

	.rl-cat-hub__grid > li > .rl-cat-card {
		width: auto;
		max-width: none;
	}
}


.rl-cat-hub__empty,
.rl-cat-hub__no-results {
	text-align: center;
	color: #6b7280;
	font-size: 1rem;
	padding: 2rem 0;
}