/* ============================================================
   Sistema de diseño de rentingdecochesbaratos.com
   ------------------------------------------------------------
   Tokens extraídos del CSS computado de driverevel.com (REVEL) el 02/09/2026.
   Se replica el LENGUAJE VISUAL (color, forma, ritmo, la diagonal entre
   secciones), no el contenido ni la marca.

   Este fichero carga SIEMPRE. El CSS de cada componente vive en su carpeta y se
   desencola cuando su shortcode no está en la página (ver shortcode_rcb.php).
   ============================================================ */

/* ------------------------------------------------------------
   Barlow autoalojada (subset latin, pesos 400/500/600/700).

   Servida desde el propio dominio y no desde fonts.gstatic.com por dos motivos:
   evita la petición a un tercero (en la UE, cargar Google Fonts desde su CDN
   comunica la IP del visitante a Google y ya ha habido sentencias por ello) y
   ahorra la conexión extra, que en móvil cuesta más que los 96 KB de las cuatro
   fuentes juntas.

   font-display:swap → el texto se ve desde el primer instante con la fuente de
   reserva y cambia a Barlow al cargar. Nunca hay texto invisible.
   ------------------------------------------------------------ */

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/barlow-400.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/barlow-500.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/barlow-600.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/barlow-700.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* --- Color -------------------------------------------------- */
	--rcb-acento: #00FFDE;        /* turquesa de marca: CTA principal, checks, números de paso.
	                                 El texto encima va SIEMPRE en negro: sobre este turquesa
	                                 el blanco no llega al contraste mínimo de accesibilidad. */
	--rcb-acento-hover: #00AA94;
	--rcb-azul: #0175FF;          /* botón secundario, enlaces, precio destacado */
	--rcb-azul-hover: #0158c4;

	--rcb-negro: #000000;         /* texto principal, footer, banda de CTA */
	--rcb-carbon: #323236;
	--rcb-gris-texto: #666666;    /* color de párrafo dominante en REVEL */
	--rcb-gris-medio: #AAAAAA;    /* texto terciario, precio tachado */
	--rcb-gris-borde: #EEEEEE;
	--rcb-gris-fondo: #F7F8F9;    /* fondo de sección alterna y de galería */
	--rcb-blanco: #FFFFFF;        /* fondo dominante: la web es mayoritariamente blanca */
	--rcb-aviso: #FFF8E1;         /* caja de urgencia */
	--rcb-aviso-borde: #F2E2AE;

	/* --- Tipografía --------------------------------------------- */
	--rcb-font: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--rcb-fs-h1: clamp(36px, 5.5vw, 68px);
	--rcb-fs-h2: clamp(28px, 4vw, 44px);
	--rcb-fs-h3: clamp(19px, 2vw, 22px);
	--rcb-fs-base: 16px;
	--rcb-fs-sm: 15px;
	--rcb-fs-xs: 12px;

	--rcb-lh-titular: 1.08;
	--rcb-lh-texto: 1.6;

	/* --- Forma --------------------------------------------------- */
	--rcb-r-xl: 24px;             /* radio DOMINANTE en REVEL: cards y cajas grandes */
	--rcb-r-l: 16px;
	--rcb-r-m: 8px;
	--rcb-r-pill: 999px;

	--rcb-sh-card: 0 4px 25px rgba(38, 55, 70, .10);   /* sombra azulada, no gris neutra */
	--rcb-sh-soft: 0 4px 24px rgba(47, 70, 38, .08);
	--rcb-sh-modal: 0 32px 68px rgba(0, 0, 0, .30);

	/* --- Layout -------------------------------------------------- */
	--rcb-ancho: 1200px;
	--rcb-pad-lateral: 20px;
	--rcb-pad-seccion: clamp(56px, 8vw, 120px);   /* REVEL respira mucho entre secciones */
	--rcb-gap: clamp(20px, 2.5vw, 32px);
	--rcb-diagonal-alto: 160px;
}

/* ============================================================
   Utilidades
   ============================================================ */

.rcb-wrap {
	width: 100%;
	max-width: var(--rcb-ancho);
	margin-inline: auto;
	padding-inline: var(--rcb-pad-lateral);
	box-sizing: border-box;
}

.rcb-seccion {
	font-family: var(--rcb-font);
	padding-block: var(--rcb-pad-seccion);
	color: var(--rcb-negro);
}

/* Antetítulo en mayúsculas sobre el H2. Presente en casi todas las secciones de REVEL. */
.rcb-eyebrow {
	display: block;
	margin: 0 0 12px;
	font-size: var(--rcb-fs-xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rcb-gris-medio);
}

.rcb-titulo {
	margin: 0 0 16px;
	font-family: var(--rcb-font);
	font-size: var(--rcb-fs-h2);
	font-weight: 600;
	line-height: var(--rcb-lh-titular);
	letter-spacing: -.01em;
	color: var(--rcb-negro);
}

/* El {span} de los títulos se pinta en turquesa: es el recurso de énfasis de la marca. */
.rcb-titulo span {
	color: var(--rcb-acento-hover);
}

.rcb-descripcion {
	margin: 0;
	font-size: var(--rcb-fs-base);
	line-height: var(--rcb-lh-texto);
	color: var(--rcb-gris-texto);
}

.rcb-descripcion p {
	margin: 0 0 12px;
}

.rcb-descripcion p:last-child {
	margin-bottom: 0;
}

.rcb-cabecera--centrada {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

/* --- Botones ------------------------------------------------- */

.rcb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border: 2px solid transparent;
	border-radius: var(--rcb-r-pill);
	font-family: var(--rcb-font);
	font-size: var(--rcb-fs-base);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.rcb-btn:hover,
.rcb-btn:focus-visible {
	transform: translateY(-1px);
	text-decoration: none;
}

.rcb-btn--principal {
	background: var(--rcb-acento);
	color: var(--rcb-negro);
}

.rcb-btn--principal:hover,
.rcb-btn--principal:focus-visible {
	background: var(--rcb-acento-hover);
	color: var(--rcb-negro);
}

.rcb-btn--secundario {
	background: transparent;
	border-color: var(--rcb-negro);
	color: var(--rcb-negro);
}

.rcb-btn--secundario:hover,
.rcb-btn--secundario:focus-visible {
	background: var(--rcb-negro);
	color: var(--rcb-blanco);
}

/* Para usar sobre fondo negro (banda de CTA final). */
.rcb-btn--claro {
	background: var(--rcb-blanco);
	color: var(--rcb-negro);
}

.rcb-btn--claro:hover,
.rcb-btn--claro:focus-visible {
	background: var(--rcb-acento);
	color: var(--rcb-negro);
}

/* Enlace de texto con flecha, el patrón de enlace de REVEL. */
.rcb-enlace {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--rcb-negro);
	text-decoration: none;
	border-bottom: 2px solid var(--rcb-acento);
	padding-bottom: 2px;
	transition: color .18s ease, gap .18s ease;
}

.rcb-enlace:hover,
.rcb-enlace:focus-visible {
	color: var(--rcb-acento-hover);
	gap: 10px;
}

.rcb-enlace::after {
	content: '›';
	font-size: 1.25em;
	line-height: 1;
}

/* --- Iconos --------------------------------------------------- */

.rcb-icono {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
}

/* --- Accesibilidad -------------------------------------------- */

.rcb-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.rcb-seccion :focus-visible {
	outline: 3px solid var(--rcb-azul);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.rcb-btn,
	.rcb-enlace {
		transition: none;
	}

	.rcb-btn:hover,
	.rcb-btn:focus-visible {
		transform: none;
	}
}