/**
 * Design tokens — Renault Renting.
 *
 * Única fuente de verdad para color, tipografía, espaciado, formas y movimiento.
 * Ningún componente declara valores literales: siempre var(--token).
 *
 * Todos los valores están extraídos píxel a píxel de los diseños aprobados
 * (references/home-desktop.png @2x de 1280 · references/home-mobile.png @2x de 390),
 * no estimados a ojo.
 *
 * BREAKPOINT ÚNICO DEL PROYECTO: 1025px.
 * Desktop y mobile son dos composiciones distintas, no una escalada de la otra,
 * así que la tipografía y el ritmo vertical se declaran dos veces (base = mobile,
 * override = desktop) en lugar de interpolarse con clamp(). Cada versión conserva
 * exactamente las proporciones de su diseño.
 */

/**
 * NouvelR — tipografía corporativa de Renault, servida desde el propio dominio.
 *
 * Es la familia POR DEFECTO del sitio. Los seis cortes que entregó el cliente
 * (carpeta nouvel-r/ en la raíz del proyecto) viven en assets/fonts/nouvel-r/
 * y se declaran uno a uno porque no es una fuente variable: cada peso es un
 * fichero distinto.
 *
 * Correspondencia peso CSS ↔ fichero:
 *   300 Light · 350 Book · 400 Regular · 600 Semibold · 700 Bold · 800 Extrabold
 *
 * No hay corte de 500: cuando un componente pida --fw-medium el navegador
 * resuelve al más cercano por debajo (Regular 400), que es el comportamiento
 * estándar de font-matching y no requiere trucos.
 *
 * Elementor conoce esta familia gracias al filtro `elementor/fonts/additional_fonts`
 * de functions.php, así que aparece en «Elementor → Ajustes del sitio →
 * Tipografías globales» bajo el grupo «Fuentes del sitio» y puede cambiarse
 * en cualquier momento desde el panel sin tocar CSS.
 *
 * `font-display: swap` pinta el texto de inmediato con la pila del sistema y
 * lo cambia a NouvelR cuando llega: nunca hay un intervalo de texto invisible.
 *
 * Las rutas son relativas a esta hoja. Ninguna ruta absoluta en el tema.
 */
@font-face {
	font-family: 'NouvelR';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/nouvel-r/NouvelRLight.ttf') format('truetype');
}

@font-face {
	font-family: 'NouvelR';
	font-style: normal;
	font-weight: 350;
	font-display: swap;
	src: url('../fonts/nouvel-r/NouvelRBook.ttf') format('truetype');
}

@font-face {
	font-family: 'NouvelR';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/nouvel-r/NouvelRRegular.ttf') format('truetype');
}

@font-face {
	font-family: 'NouvelR';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/nouvel-r/NouvelRSemibold.ttf') format('truetype');
}

@font-face {
	font-family: 'NouvelR';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/nouvel-r/NouvelRBold.ttf') format('truetype');
}

@font-face {
	font-family: 'NouvelR';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/nouvel-r/NouvelRExtrabold.ttf') format('truetype');
}

/**
 * Inter, servida desde el propio dominio.
 *
 * Se conserva como ALTERNATIVA seleccionable desde Elementor (grupo «Fuentes
 * del sitio») y como respaldo histórico del diseño; la familia por defecto
 * ahora es NouvelR.
 * * Google Fonts queda descartado por RGPD: pedir la fuente a un tercero envía
 * la IP del visitante a Google sin consentimiento, y la composición móvil se
 * dirige al mercado español. El filtro `print_google_fonts` de functions.php
 * impide que Elementor imprima los enlaces; estos @font-face son la otra
 * mitad del asunto —sin ellos no habría Inter en ninguna parte—.
 *
 * Es la versión VARIABLE: un único fichero cubre de 400 a 700, así que los
 * cuatro pesos del diseño (--fw-regular … --fw-bold) salen de una sola
 * descarga en lugar de cuatro.
 *
 * Dos cortes por unicode-range. `latin` cubre el castellano completo —tildes,
 * ñ, ¿, ¡— y es lo único que descarga la práctica totalidad de los visitantes;
 * `latin-ext` solo se pide si la página llega a mostrar un carácter que lo
 * necesite, así que no cuesta nada tenerlo.
 *
 * `font-display: swap` pinta el texto de inmediato con la pila del sistema y
 * lo cambia a Inter cuando llega: nunca hay un intervalo de texto invisible.
 *
 * Las rutas son relativas a esta hoja. Ninguna ruta absoluta en el tema.
 *
 * Inter es SIL Open Font License 1.1, que permite el auto-alojamiento.
 */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-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;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-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;
}

/**
 * Los tokens se declaran en `:root` Y en `body`, no solo en `:root`.
 *
 * Elementor publica sus estilos globales en `.elementor-kit-N`, una clase del
 * <body>. Una variable declarada en `:root` no puede leerlas: `:root` es el
 * <html>, que está por encima y no hereda de su hijo. Declarando también en
 * `body` la misma regla se resuelve allí con las globales ya disponibles, y
 * los componentes —todos descendientes de body— reciben ese valor.
 *
 * `:root` se mantiene para que los tokens existan aunque Elementor no esté.
 */
:root,
body {
	/* =======================================================================
	 *  COLOR
	 *
	 *  Cada token lee la variable equivalente de los ESTILOS GLOBALES de
	 *  Elementor y usa el valor del diseño como respaldo.
	 *
	 *  Consecuencia práctica: cambiar la paleta desde «Elementor → Estilos
	 *  globales» se propaga a todos los componentes a la vez, sin tocar CSS.
	 *  Y si Elementor no está activo —o el tema se reutiliza en otro sitio—,
	 *  el respaldo mantiene el diseño correcto. Nunca queda un color vacío.
	 * ===================================================================== */

	/* Superficies */
	--c-black: var(--e-global-color-ccblack, #000000);
	--c-cream: var(--e-global-color-cccream, #FCF9F8);
	--c-cream-alt: var(--e-global-color-ccalt, #F0EDEC);
	--c-panel: var(--e-global-color-ccpanel, #F6F3F2);
	--c-paper: #FAFAFA;          /* Banda blanca fria de la comparativa de Persona Natural */
	--c-white: #FFFFFF;          /* El blanco puro no se parametriza */

	/* Texto */
	--c-ink: var(--e-global-color-ccink, #1C1B1B);
	--c-body: var(--e-global-color-text, #584239);
	--c-inverse: #FFFFFF;
	--c-inverse-soft: var(--e-global-color-ccsoft, #DFC0B4);
	--c-muted-inv: var(--e-global-color-ccmuted, #86736C);

	/* Marca */
	--c-accent-start: var(--e-global-color-primary, #FF7E3C);
	--c-accent-end: var(--e-global-color-secondary, #FF6169);
	--c-accent-deep: var(--e-global-color-accent, #A14000);
	--c-bronze: var(--e-global-color-ccbronze, #7F3F1D);
	/* Opción activa o bajo el cursor en el menú de cabecera: naranja más vivo
	 * que el de marca, pedido por el cliente (15-09-2026). Editable en
	 * «Elementor → Ajustes del sitio → Colores globales → Menú activo». */
	--c-accent-vivid: var(--e-global-color-ccmenu, #EC6469);
	--c-menu-active: var(--c-accent-vivid);

	/* Líneas */
	--c-border: var(--e-global-color-ccborder, #DFC0B4);
	--c-border-inv: rgb(255 255 255 / 0.12); /* Separadores sobre negro */
	--c-border-soft: #D9D6D3; /* Borde gris neutro de las tarjetas de Persona Natural */

	/* Estado (no aparecen en el diseño; necesarios para validación de formularios) */
	--c-success: #1E7A45;
	--c-error: #B3261E;

	/* Marca de terceros: botón flotante de WhatsApp (Persona Natural). */
	--c-whatsapp: #25D366;

	/* Gradiente de marca. Aparece en 5 puntos de la página: botón del header,
	 * CTA del hero, tiles de icono, botones de simulador y formulario, y la
	 * barra de 6px que separa el formulario del CTA final. */
	--grad-brand: linear-gradient(90deg, var(--c-accent-start) 0%, var(--c-accent-end) 100%);

	/* =======================================================================
	 *  TIPOGRAFÍA
	 * ===================================================================== */

	/* La familia sale de los estilos globales de Elementor, con NouvelR como
	 * respaldo: cambiar la tipografía del sitio es cambiar «Cuerpo» y
	 * «Titulares» en «Elementor → Ajustes del sitio → Tipografías globales».
	 * Allí aparecen NouvelR e Inter bajo el grupo «Fuentes del sitio», ambas
	 * auto-alojadas (ver los @font-face al principio de esta hoja).
	 *
	 * La pila del sistema se mantiene detrás como respaldo por dos motivos:
	 * cubre el instante previo a que la fuente cargue (font-display: swap) y
	 * sigue valiendo si las globales de Elementor pasan a declarar otra
	 * familia. */
	--font-body: var(--e-global-typography-text-font-family, "NouvelR"), "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: var(--e-global-typography-primary-font-family, "NouvelR"), "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Escala — valores del diseño MOBILE (390px) */
	--fs-display: 2.5rem;        /* 40px — H1 del hero */
	--fs-h2: 2rem;               /* 32px — títulos de sección */
	--fs-h3: 1.625rem;           /* 26px — títulos de tarjeta */
	--fs-lead: 1.125rem;         /* 18px — párrafo de entrada */
	--fs-body: 1.0625rem;        /* 17px — cuerpo */
	--fs-small: 0.875rem;        /* 14px — pie, copyright */
	--fs-eyebrow: 0.875rem;      /* 14px — antetítulo en mayúsculas */
	--fs-number: 1.125rem;       /* 18px — número dentro del círculo del timeline */

	--lh-display: 1.1;
	--lh-heading: 1.15;
	--lh-title: 1.3;
	--lh-body: 1.55;

	--ls-tight: -0.02em;         /* Titulares grandes */
	--ls-eyebrow: 0.12em;        /* Antetítulos en mayúsculas */

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* =======================================================================
	 *  ESPACIADO — escala de 4px
	 * ===================================================================== */

	--sp-1: 0.25rem;   /*  4px */
	--sp-2: 0.5rem;    /*  8px */
	--sp-3: 0.75rem;   /* 12px */
	--sp-4: 1rem;      /* 16px */
	--sp-5: 1.25rem;   /* 20px */
	--sp-6: 1.5rem;    /* 24px */
	--sp-7: 2rem;      /* 32px */
	--sp-8: 2.5rem;    /* 40px */
	--sp-9: 3rem;      /* 48px */
	--sp-10: 4rem;     /* 64px */
	--sp-11: 5rem;     /* 80px */
	--sp-12: 6rem;     /* 96px */

	/* Ritmo vertical de sección — valor mobile */
	--section-y: var(--sp-11);   /* 80px */

	/* =======================================================================
	 *  LAYOUT
	 * ===================================================================== */

	--container-max: 1152px;     /* Ancho de contenido medido en el diseño */
	--container-pad: 20px;       /* Padding lateral del diseño mobile */
	--grid-gap: 24px;            /* Gap del grid de 12 columnas */

	/* =======================================================================
	 *  FORMAS
	 * ===================================================================== */

	--radius-sm: 8px;            /* Botones, tiles de icono */
	--radius-md: 12px;
	--radius-lg: 16px;           /* Tarjetas, imágenes */
	--radius-xl: 24px;
	--radius-pill: 999px;

	--border-w: 1px;

	/* =======================================================================
	 *  SOMBRAS
	 * ===================================================================== */

	--shadow-sm: 0 1px 2px rgb(28 27 27 / 0.05);
	--shadow-md: 0 4px 16px rgb(28 27 27 / 0.07);
	--shadow-lg: 0 16px 48px rgb(28 27 27 / 0.12);
	--shadow-glow: 0 0 20px rgb(255 126 60 / 0.45); /* Resplandor del CTA del pie */

	/* =======================================================================
	 *  MOVIMIENTO
	 * ===================================================================== */

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 150ms;
	--dur-base: 250ms;
	--dur-slow: 400ms;

	/* =======================================================================
	 *  CAPAS
	 * ===================================================================== */

	--z-base: 1;
	--z-sticky: 100;
	--z-header: 200;
	--z-overlay: 900;
	--z-modal: 1000;
}

/**
 * Escala del diseño DESKTOP (≥1025px).
 *
 * No es la escala mobile ampliada: son las medidas propias de su composición,
 * tomadas del PNG de 1280.
 */
@media (min-width: 1025px) {
	:root,
	body {
		--fs-display: 4.25rem;   /* 68px */
		/* 48px medidos sobre las referencias, no estimados: el ancho de tres cadenas
	 * distintas del diseño («Soluciones por tipo de operación», «Inicia tu
	 * propuesta», «corporativa») da 48,75 / 48,25 / 48,00 al despejar el tamaño
	 * con las métricas de Inter. Estuvo en 3.5rem y los títulos salían un 17%
	 * más grandes que la maqueta, lo que además impedía que el del formulario
	 * partiera en dos líneas. */
	--fs-h2: 3rem;           /* 48px */
		--fs-h3: 1.25rem;        /* 20px */
		--fs-lead: 1.125rem;     /* 18px */
		--fs-body: 1rem;         /* 16px */
		--fs-number: 3rem;       /* 48px — números 01–05 del proceso */

		--lh-display: 1.04; /* 70.7px medidos entre líneas base, sobre 68px */
		--lh-heading: 1.2;
		--lh-title: 1.35;
		--lh-body: 1.5;

		--section-y: var(--sp-12); /* 96px */
	}
}