/* ==========================================================================
ril.css · GENERADO por laravel-simple/_generador/build.mjs
Une en este orden: tokens → base → marca → componentes → secciones → páginas.
Cada bloque lleva su cabecera «───── ruta ─────» con el archivo de origen.
Editable a mano (sigue las mismas reglas: colores solo en la zona de tokens).
Clases renombradas con «ril-» para no chocar con el CSS actual de ril:
.alert .btn .container .hero .marquee .media .menu-servicios .section → .ril-alert .ril-btn .ril-container .ril-hero .ril-marquee .ril-media .ril-menu-servicios .ril-section
========================================================================== */
/* ==========================================================================
app.css — entrada única del CSS (Vite; en Laravel, @vite('resources/css/app.css'))
El orden de capas lo fija tokens-ril.css con su primera línea:
@layer tokens, reset, base, layout, components, utilities;
El orden de los @import solo importa dentro de cada capa.
Para añadir una pieza: crear su archivo y sumar UNA línea en el _index.css
de su carpeta. Este archivo no se toca.
========================================================================== */
/* base de marca compartida (D3: algún día, submódulo o paquete) */
/* ───── ril/tokens-ril.css ───── */
/* ==========================================================================
tokens-ril.css — marca rIL · v1.6 (borrador) · 11/10/2026
v1.6 «360°» en móvil, la capa visible de Figma (198,5, a todo el ancho);
--fs-subp (subpárrafo, 11/16); párrafo de 12 en móvil; pie de móvil más ligero (--fs-closing,
body-lg 14, small 12, btn-closing 22); paleta «brasa» --ril-glow-* (degradados
de luz del Presupuestador); cabecera de 56/60 (antes 71/77);
las animaciones ligadas al scroll (hero, servicios, proyectos, pie)
no necesitan tokens nuevos.
v1.5 fidelidad exacta a Figma: la escala fluida va de 402 a 1728 (los dos
frames); tamaños por rol medidos en Figma (display-2xl/xl/lg, menu,
cta, h1-lg, eyebrow-*, label, nav, btn-*); cuerpo 18; legales 16/18;
«360°» decrece (160 → 84); anchos 75/84/87 además del 77; interlineados
0,88 y 0,95; margen 14/40; cabecera 71/77. Los «a confirmar» de la
v1.4 se cierran con el valor de Figma.
v1.4 los tokens son la fuente única de verdad (SSOT): Figma los recibe
como variables, no al revés. Los PENDIENTE DE DECISIÓN pasan a
SET · rIL · a confirmar con la propuesta aplicada: --fs-stat 44/74,
--header-height 56/80, --ls-wider 0,02em, sol del 100 % y del 10 %.
v1.3 cierre de los SET · FIGMA contra Figma (lienzo «Home»), validado por
el equipo el 09/10/2026: amarillo y crema de Figma; rango fluido
390-1920; escala tipográfica nueva (+ display-xl y tamaños de
botón --fs-btn-*); contenedor de 1920 con márgenes 16-40; radios
--radius-small y --radius-large; botón con radio de 8 px; degradado
crema → amarillo; interlineado normal 1,4 → 1,5. Nueva marca
PENDIENTE DE DECISIÓN.
v1.2 todo el archivo va en @layer tokens (base.css v3.3); tokens de API
de .eyebrow; rellenos de feedback --color-*-fill (PENDIENTE DE
REVISIÓN); fuera --alert-radius (era igual a su fallback).
v1.1 .theme-dark pasa a .theme-space; el tema sol admite data-theme="sun";
propuesta de estados de feedback (PENDIENTE DE REVISIÓN).
Copia de la plantilla tokens.css (v3.3). La NORMA (nombrado, unidades,
breakpoints, capas, guía de marcas) vive en tokens.css y NO se repite aquí.
ORIGEN DE LOS VALORES
Guía de estilo y comunicación de rIL (beta, julio 2026), Presupuestador
rIL 1.0 (kit_web.py 6.3), que es la aplicación web de la marca ya cerrada,
y Figma «rIL - Web Design 2026», lienzo «Home» (nodo 3736:2808; frames
de 1728 y 402 px), leído con Figma MCP desde el terminal. El archivo de
Figma no tiene variables ni estilos: los valores se midieron en las
capas y los validó el equipo (09/10/2026).
MARCAS DE ESTADO (sustituyen a los "TODO" de la plantilla)
SET · rIL valor de marca, definitivo.
SET · FIGMA valor provisional pendiente de contrastar con Figma.
Quedan 0 desde la v1.3. Buscar: grep -n "FIGMA" tokens-ril.css
DEF valor por defecto de la plantilla, sin tocar.
DEF · rIL valor por defecto cambiado con motivo (se indica el motivo).
SET · rIL · a confirmar valor aceptado por el equipo y en uso, con
confirmación pendiente (se indica qué falta confirmar).
Buscar: grep -n "a confirmar" tokens-ril.css
PENDIENTE DE REVISIÓN propuesta de diseño aún no aprobada por el equipo
(estados de feedback y componente .alert de marca-ril.css).
Buscar: grep -n "PENDIENTE" *.css
Carga: tokens-ril.css → fuentes-ril.css → base.css → marca-ril.css
→ components/ → sections/ → pages/
========================================================================== */
/* Orden de capas: la misma línea que base.css. Tiene que ir aquí porque este
archivo se carga primero y el orden lo fija la primera declaración. */
@layer tokens, reset, base, layout, components, utilities;
/* Todo el archivo va en la capa "tokens" (se cierra al final): las reglas de
tema (background-color, color) pierden frente a cualquier otra capa. Sin
sangría extra para no mover el archivo entero. */
@layer tokens {
/* ==========================================================================
2. TOKENS · COLOR
========================================================================== */
/* ---- 2.1 PRIMITIVOS ----------------------------------------------------
QUÉ paleta de la marca.
NOMBRE --color-{palabra}
VALOR hex exacto de la guía de marca (#rrggbb). Nunca muestreado de captura.
REGLA el nombre comercial ("azul noche") va en el comentario, no en la variable.
----------------------------------------------------------------------- */
:root {
--color-dark: #000000; /* SET · rIL · Negro Eclipse: texto base y fondos oscuros */
--color-brand: #F6A700; /* SET · rIL · Amarillo Solar: color principal. Valor de Figma; la
guía beta dice #F7A808 (RGB 247, 168, 8): actualizarla */
--ril-color-white: #FFFFFF; /* SET · rIL · blanco puro: superficies (tarjetas, campos) */
--color-light: #FBF9F4; /* SET · rIL · crema: fondo de página de rIL (ver OVERRIDES). Valor
de Figma; la guía beta dice #F9F8F3 */
--color-accent: #EB5C16; /* SET · rIL · Naranja Impulso. Uso restringido: avisos y destacados
puntuales, nunca como color de acción */
}
/* ---- 2.2 SEMÁNTICOS · asignación base (tema claro) ---------------------
QUÉ rol de cada color. Es lo que leen los componentes.
TABLA DE ROLES
background fondo de página
background-alt fondo de secciones alternas
surface contenedores elevados (tarjeta, panel, input)
text texto de cuerpo
heading titulares (por defecto = text)
link enlaces en texto
primary acción principal (botón, foco, acento)
secondary segunda acción / segunda parada de degradado
on-primary texto/icono sobre fondo primary
focus anillo de foco
overlay velo de modales y menús
success error warning info estados de feedback
rIL: las reasignaciones de marca (fondo crema, enlaces y foco en negro,
texto negro sobre amarillo) están en OVERRIDES, al final.
----------------------------------------------------------------------- */
:root,
.theme-light {
--color-background: var(--ril-color-white); /* DEF · rIL lo cambia a crema en OVERRIDES */
--color-background-alt: var(--color-light); /* DEF · rIL lo cambia en OVERRIDES */
--color-surface: var(--ril-color-white); /* DEF */
--color-text: var(--color-dark); /* DEF */
--color-heading: var(--color-text); /* DEF */
--color-primary: var(--color-brand); /* DEF */
--color-secondary: var(--color-accent); /* DEF · ver aviso en 5.1 (degradados) */
--color-on-primary: var(--ril-color-white); /* DEF · rIL lo cambia a negro en OVERRIDES (blanco sobre amarillo: 2,0:1) */
--color-link: var(--color-primary); /* DEF · rIL lo cambia a texto en OVERRIDES (amarillo sobre crema: 1,9:1) */
--color-focus: var(--color-primary); /* DEF · rIL lo cambia a texto en OVERRIDES */
--color-overlay: color-mix(in srgb, var(--color-dark) 60%, transparent); /* DEF */
/* Feedback: valores con contraste AA sobre blanco y sobre crema.
PENDIENTE DE REVISIÓN. Propuesta: estos valores son los de TEXTO (AA);
el relleno de los iconos de .alert se explica en marca-ril.css.
success verde algo cálido, para convivir con el amarillo
error rojo carmín (tono 353°), lejos del naranja (20°) para no confundirlos
warning Naranja Impulso oscurecido: el puro da 3,3:1 sobre crema
info neutra: color del texto. La marca la pone el icono amarillo */
--color-success: #2F7A3B; /* PENDIENTE DE REVISIÓN · 5,0:1 sobre crema */
--color-error: #B42333; /* PENDIENTE DE REVISIÓN · 6,1:1 sobre crema */
--color-warning: #BC4A12; /* PENDIENTE DE REVISIÓN · 4,8:1 sobre crema */
--color-info: var(--color-text); /* PENDIENTE DE REVISIÓN · sin azul fuera de marca */
/* Cristal (ver 5.2): receta para fondo CLARO. Se reasigna en .theme-space. */
--glass-bg: color-mix(in srgb, var(--color-background) 60%, transparent); /* DEF */
--glass-bg-strong: color-mix(in srgb, var(--color-background) 82%, transparent); /* DEF */
--glass-border: color-mix(in srgb, var(--color-text) 12%, transparent); /* DEF */
color-scheme: light;
}
/* ---- 2.3 SEMÁNTICOS · derivados (se recalculan en cada tema) ----------
QUÉ tokens calculados a partir de los de 2.2. Se declaran en TODOS los
selectores de tema para que se evalúen con los valores de su ámbito.
REGLA se tocan solo reasignando el porcentaje o la fórmula; nunca con hex.
rIL se añade el tema sol a la lista de selectores (tema propio, ver 2.5).
----------------------------------------------------------------------- */
:root,
.theme-light,
.theme-space,
.theme-sun,
[data-theme="sun"] {
/* texto */
--color-text-muted: color-mix(in srgb, var(--color-text) 68%, var(--color-background)); /* DEF · sobre crema ≈ #50504E, 7,7:1 */
/* bordes */
--color-border: color-mix(in srgb, var(--color-text) 16%, var(--color-background)); /* DEF */
--color-border-strong: color-mix(in srgb, var(--color-text) 40%, var(--color-background)); /* DEF */
/* primary */
--color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, black); /* DEF */
--color-primary-soft: color-mix(in srgb, var(--color-primary) 12%, var(--color-background)); /* DEF · tinte: hover suave, píldoras, fondos de icono */
/* enlaces */
--color-link-hover: color-mix(in srgb, var(--color-link) 80%, var(--color-text)); /* DEF */
/* feedback: fondo suave de avisos */
--color-success-soft: color-mix(in srgb, var(--color-success) 12%, var(--color-background)); /* DEF */
--color-error-soft: color-mix(in srgb, var(--color-error) 12%, var(--color-background)); /* DEF */
--color-warning-soft: color-mix(in srgb, var(--color-warning) 12%, var(--color-background)); /* DEF */
--color-info-soft: color-mix(in srgb, var(--color-info) 12%, var(--color-background)); /* DEF */
/* feedback: relleno de iconos (círculo de .alert). Puede diferir del de
texto: el naranja y el amarillo puros no llegan a AA como texto, pero
sí sostienen un glifo negro encima. */
--color-success-fill: var(--color-success); /* PENDIENTE DE REVISIÓN */
--color-error-fill: var(--color-error); /* PENDIENTE DE REVISIÓN */
--color-warning-fill: var(--color-accent); /* PENDIENTE DE REVISIÓN · Naranja Impulso puro */
--color-info-fill: var(--color-brand); /* PENDIENTE DE REVISIÓN · Amarillo Solar */
/* deshabilitado */
--color-disabled-bg: color-mix(in srgb, var(--color-text) 8%, var(--color-background)); /* DEF */
--color-disabled-text: color-mix(in srgb, var(--color-text) 40%, var(--color-background)); /* DEF */
/* sombras: se declaran aquí (y no en 4.5) para que usen el --shadow-color de cada tema */
--shadow-color: color-mix(in srgb, var(--color-text) 18%, transparent); /* DEF */
--shadow-sm: 0 1px 2px var(--shadow-color); /* DEF */
--shadow-md: 0 6px 16px -4px var(--shadow-color); /* DEF */
--shadow-lg: 0 20px 40px -12px var(--shadow-color); /* DEF */
/* cristal: sombra según tema (el cristal sobre claro necesita una para despegar) */
--glass-shadow: var(--shadow-sm); /* DEF */
}
/* ---- 2.4 TEMA OSCURO · .theme-space -----------------------------------
Uso: ...
rIL fondo Negro Eclipse.
Reasigna SOLO los semánticos que cambian. Todo lo derivado (2.3) se
recalcula solo. Para volver a claro dentro de un bloque oscuro: .theme-light.
----------------------------------------------------------------------- */
.theme-space {
--color-background: var(--color-dark); /* DEF */
--color-background-alt: color-mix(in srgb, var(--color-dark) 88%, var(--ril-color-white)); /* DEF */
--color-surface: color-mix(in srgb, var(--color-dark) 92%, var(--ril-color-white)); /* DEF */
--color-text: var(--ril-color-white); /* DEF · rIL lo cambia a crema en OVERRIDES */
--color-heading: var(--color-text); /* DEF */
--color-link: var(--color-text); /* DEF */
--color-focus: var(--color-text); /* DEF */
--color-success: #7BD389; /* PENDIENTE DE REVISIÓN · 11,5:1 sobre negro */
--color-error: #FF7A85; /* PENDIENTE DE REVISIÓN · 8,4:1 sobre negro */
--color-warning: var(--color-accent); /* PENDIENTE DE REVISIÓN · Naranja Impulso puro, 6,1:1 sobre negro */
--color-info: var(--color-text); /* PENDIENTE DE REVISIÓN */
/* Cristal: receta para fondo OSCURO */
--glass-bg: color-mix(in srgb, var(--ril-color-white) 10%, transparent); /* DEF */
--glass-bg-strong: color-mix(in srgb, var(--ril-color-white) 22%, transparent); /* DEF */
--glass-border: color-mix(in srgb, var(--ril-color-white) 28%, transparent); /* DEF */
--glass-shadow: none; /* DEF */
--shadow-color: color-mix(in srgb, black 45%, transparent); /* DEF */
color-scheme: dark;
background-color: var(--color-background);
color: var(--color-text);
}
.theme-light {
background-color: var(--color-background);
color: var(--color-text);
}
/* ---- 2.5 TEMA SOL (propio de rIL) --------------------------------------
Uso: ...
o ... (como en el Presupuestador)
Fondo Amarillo Solar y texto negro. Misma mecánica que 2.4. Clase y
atributo tienen la misma especificidad: se pueden usar indistintamente.
Sobre amarillo, "primary" pasa a crema (el amarillo no se ve sobre sí
mismo) y los avisos se oscurecen hasta AA.
----------------------------------------------------------------------- */
.theme-sun,
[data-theme="sun"] {
--color-background: var(--color-brand); /* SET · rIL */
--color-background-alt: color-mix(in srgb, var(--color-brand) 80%, var(--ril-color-white)); /* SET · rIL · sin referencia en Figma (la Home no tiene bloques sol alternos) */
--color-surface: var(--color-light); /* SET · rIL */
--color-text: var(--color-dark); /* SET · rIL · 10,4:1 */
--color-heading: var(--color-text); /* SET · rIL */
--color-primary: var(--color-light); /* SET · rIL */
--color-on-primary: var(--color-dark); /* SET · rIL */
--color-link: var(--color-text); /* SET · rIL */
--color-focus: var(--color-text); /* SET · rIL */
--color-success: #104C21; /* PENDIENTE DE REVISIÓN · 5,1:1 sobre amarillo */
--color-error: #871A26; /* PENDIENTE DE REVISIÓN · 4,8:1 sobre amarillo */
--color-warning: #762E0B; /* PENDIENTE DE REVISIÓN · 4,9:1 sobre amarillo */
--color-info: var(--color-text); /* PENDIENTE DE REVISIÓN */
/* Cristal: misma receta que el tema claro, recalculada con el fondo amarillo */
--glass-bg: color-mix(in srgb, var(--color-background) 60%, transparent);
--glass-bg-strong: color-mix(in srgb, var(--color-background) 82%, transparent);
--glass-border: color-mix(in srgb, var(--color-text) 12%, transparent);
--glass-shadow: var(--shadow-sm);
color-scheme: light;
background-color: var(--color-background);
color: var(--color-text);
}
/* ==========================================================================
3. TOKENS · TIPOGRAFÍA
========================================================================== */
:root {
/* ---- 3.1 FAMILIAS -----------------------------------------------------
NOMBRE --font-{rol} roles: heading, body, mono
VALOR "Nombre real", fallback de sistema. Siempre con fallback.
CARGA fuentes-ril.css (Mona Sans 2.000 variable: ejes wdth 75-125 y wght 200-900; sin opsz).
rIL Mona Sans para todo. El ancho (Condensed / Expanded) no es otra
familia: es el eje wdth, que se controla con font-stretch
(ver --ril-stretch-* en VARIABLES PROPIAS).
Onest Bold solo se usa en el descriptor del logotipo, que va como
imagen (SVG): no se carga en la web.
------------------------------------------------------------------- */
--font-heading: "Mona Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; /* SET · rIL */
--font-body: "Mona Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; /* SET · rIL */
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* DEF */
/* ---- 3.2 PESOS --------------------------------------------------------
NOMBRE --fw-{nombre} escala estándar: light regular medium semibold bold
VALOR numérico CSS (100-900).
REGLA solo se USAN los pesos que existen en el archivo de fuente cargado.
rIL fuente variable (200-900): todos disponibles. Los titulares usan
850, que no está en la escala: --ril-fw-black (VARIABLES PROPIAS).
------------------------------------------------------------------- */
--fw-light: 300; /* DEF */
--fw-regular: 400; /* DEF */
--fw-medium: 500; /* DEF */
--fw-semibold: 600; /* DEF · botones */
--fw-bold: 700; /* DEF · negritas en texto, precios y cifras pequeñas */
/* ---- 3.3 INTERLINEADO -------------------------------------------------
NOMBRE --lh-{nombre} escala: tight snug normal relaxed
VALOR sin unidad.
El nombre NO dice para qué elemento sirve; la asignación se hace por
las normas de 3.7.
------------------------------------------------------------------- */
--lh-display: 0.88; /* SET · rIL · titulares gigantes (Figma: hero 0,88; «360°» 0,88) */
--lh-tight: 0.9; /* DEF · rIL · titulares en mayúsculas condensadas (0,86-0,95 en el Presupuestador) */
--lh-heading: 0.95; /* SET · rIL · titulares de sección (Figma: 0,95 en h1 y «El 95 %») */
--lh-label: 1.2; /* SET · rIL · antetítulos, navegación y «VER MÁS» (Figma: 1,2) */
--lh-snug: 1.25; /* DEF */
--lh-normal: 1.4; /* SET · rIL · 1,4 en móvil; 1,5 desde 64em (ver al final de 3.5) */
--lh-relaxed: 1.7; /* DEF */
/* ---- 3.4 TRACKING (espaciado entre letras) ----------------------------
NOMBRE --ls-{nombre} escala: tight normal wide wider
VALOR en em (se escala con el tamaño de letra; nunca px ni rem).
rIL los titulares van condensados al 77 %: apretarlos más pega las
letras. Las etiquetas en mayúsculas llevan muy poco tracking.
------------------------------------------------------------------- */
--ls-tight: 0em; /* DEF · rIL · titulares sin tracking negativo */
--ls-normal: 0em; /* DEF */
--ls-wide: 0.02em; /* DEF · rIL · botones (Presupuestador: 0,02em) */
--ls-wider: 0.02em; /* SET · rIL · a confirmar · eyebrow y etiquetas en
mayúsculas. Igual que --ls-wide, como en Figma
(0,02em en todos los textos en mayúsculas); antes
0,04em. Se mantiene el token por si se separan */
/* ---- 3.5 TAMAÑOS (fluidos) --------------------------------------------
NOMBRE --fs-{nombre} nombres: display h1 h2 h3 h4 lead body small
ENTRADA --fs-{nombre}-min px sin unidad, modo Móvil (ancho --vp-min)
--fs-{nombre}-max px sin unidad, modo Escritorio (ancho --vp-max)
SALIDA --fs-{nombre} clamp() en rem (respeta el zoom de texto).
Se edita solo -min / -max. El resto es mecánico.
rIL estilos fijos, como en el Presupuestador: los ocho de la norma
más tamaños propios (plantilla de abajo):
display-xl titulares gigantes: «el equipo», «Así trabajamos»,
lista de servicios (DISEÑO, AUDIOVISUAL…)
h5 etiquetas pequeñas
stat cifras grandes: «360°», «+10 años», «50 %»
btn-* texto de botones y enlaces (ver más abajo)
Valores cerrados con Figma (lienzo «Home») el 09/10/2026. Figma
dibuja a 402 y 1728 px; la escala fluye de 390 a 1920.
Roles: display portada · h1 título de sección · h2 título de
bloque · h3 título de punto o tarjeta · h4 etiqueta de grupo
y subtotal · h5 etiqueta pequeña · small textos legales.
PLANTILLA para un tamaño nuevo (copiar y cambiar "x"):
--fs-x-min: 18; --fs-x-max: 22;
--fs-x: clamp(calc(var(--fs-x-min) * 1rem / 16), calc(var(--fs-x-min) * 1rem / 16 + (var(--fs-x-max) - var(--fs-x-min)) * var(--fluid)), calc(var(--fs-x-max) * 1rem / 16));
------------------------------------------------------------------- */
--vp-min: 402; /* SET · rIL · ancho (px) del frame móvil de Figma: la escala parte de aquí */
--vp-max: 1728; /* SET · rIL · ancho (px) del frame de escritorio de Figma: la escala llega aquí
a su máximo (v1.5; antes 390 / 1920). Así los dos frames
salen exactos y los extremos se quedan en su valor */
--fluid: calc((100vw - var(--vp-min) * 1px) / (var(--vp-max) - var(--vp-min))); /* DEF · mecánico, no usar suelto */
/* Fluido acotado: 0 px en el frame móvil, 1 px en el de escritorio, y quieto
fuera. Para una medida de composición de Figma (m en móvil, d en escritorio)
que no es un token de escala: calc(m * 1rem / 16 + (d - m) * var(--fluid-c))
Se usa en sections/ para huecos y posiciones; nunca para tipografía. */
--fluid-c: clamp(0px, var(--fluid), 1px); /* SET · rIL · mecánico */
/* Valores = Figma «📱 Home» (402) / «Propuesta home» (1728), medidos el 11/10/2026.
Un -min mayor que el -max es válido: el tamaño DECRECE con el ancho («360°»). */
--fs-display-2xl-min: 200; --fs-display-2xl-max: 296; /* SET · rIL · cinta «PROYECTOS» */
--fs-display-xl-min: 68; --fs-display-xl-max: 207; /* SET · rIL · «EL EQUIPO» */
--fs-display-lg-min: 77; --fs-display-lg-max: 200; /* SET · rIL · «ASÍ TRABAJAMOS EN rIL» */
--fs-display-min: 68; --fs-display-max: 200; /* SET · rIL · titular del hero */
--fs-menu-min: 74; --fs-menu-max: 189; /* SET · rIL · palabras del menú de servicios */
--fs-cta-min: 54; --fs-cta-max: 108; /* SET · rIL · cierre «IMPULSAREMOS…» */
--fs-closing-min: 40; --fs-closing-max: 108; /* SET · rIL · cierre del pie en móvil, más ligero (12/10/2026; antes 54 = --fs-cta) */
--fs-h1-lg-min: 44; --fs-h1-lg-max: 86; /* SET · rIL · «EL 95 % DE NUESTROS CLIENTES…» */
--fs-h1-min: 44; --fs-h1-max: 74; /* SET · rIL */
--fs-title-min: 60; --fs-title-max: 74; /* SET · rIL · títulos de servicio (Servicios, 13/10/2026) */
--fs-list-min: 28; --fs-list-max: 32; /* SET · rIL · listas de subservicios y títulos de paso (Servicios) */
--fs-lead-lg-min: 20; --fs-lead-lg-max: 22; /* SET · rIL · texto de servicio (Servicios) */
--fs-h2-min: 34; --fs-h2-max: 48; /* SET · rIL */
--fs-h3-min: 20; --fs-h3-max: 24; /* SET · rIL */
--fs-h4-min: 16; --fs-h4-max: 18; /* SET · rIL */
--fs-h5-min: 12; --fs-h5-max: 14; /* SET · rIL · tamaño nuevo rIL */
--fs-lead-min: 18; --fs-lead-max: 22; /* SET · rIL */
--fs-body-min: 12; --fs-body-max: 18; /* SET · rIL · párrafo: 12 en móvil (petición del 12/10/2026; Figma: 18) y 18 en escritorio */
--fs-body-lg-min: 14; --fs-body-lg-max: 19; /* SET · rIL · enlaces y datos del pie (móvil 14: pie en una pantalla) */
--fs-small-min: 12; --fs-small-max: 18; /* SET · rIL · textos legales (móvil 12: pie en una pantalla) */
--fs-subp-min: 11; --fs-subp-max: 16; /* SET · rIL · subpárrafo (.u-subp): amplía un párrafo anterior,
un paso por debajo del cuerpo (texto del desplegable de herramientas) */
--fs-stat-min: 198.5; --fs-stat-max: 84; /* SET · rIL · «360°»: protagonista en móvil, a todo el ancho
(Figma: 198,5 en la caja de 373; la capa de 160 estaba oculta
debajo), cifra junto al antetítulo en escritorio (84). Decrece.
En móvil la sección la ajusta al ancho real (split-media.css) */
/* Etiquetas en mayúsculas (Mona Sans semibold, ancho 84 %) */
--fs-eyebrow-min: 20; --fs-eyebrow-max: 24; /* SET · rIL · antetítulo (bloque «360°») */
--fs-eyebrow-sm-min: 20; --fs-eyebrow-sm-max: 18; /* SET · rIL · antetítulo del hero */
--fs-eyebrow-lg-min: 20; --fs-eyebrow-lg-max: 32; /* SET · rIL · «EL ORIGEN DE NUESTRA LUZ» */
--fs-label-min: 20; --fs-label-max: 20; /* SET · rIL · títulos de columna del pie */
--fs-nav-min: 15; --fs-nav-max: 15; /* SET · rIL · navegación de la cabecera */
/* Botones y enlaces (los lee --btn-fs y los componentes de navegación)
btn-small CTA en texto: «Ver más», «Conócenos»
btn-cta «CONTACTA» de la cabecera
btn-menu entradas del menú móvil (y su «CONTACTA»)
btn-large enlace con forma de titular: «OPAL DENTAL STUDIO»
btn-closing «TARIFAS», «CONTÁCTANOS» del pie
btn-tag botón con forma de etiqueta amarilla («VER MÁS» del menú de servicios) */
--fs-btn-small-min: 20; --fs-btn-small-max: 20; /* SET · rIL */
--fs-btn-cta-min: 28; --fs-btn-cta-max: 28; /* SET · rIL */
--fs-btn-menu-min: 46; --fs-btn-menu-max: 46; /* SET · rIL · menú móvil (Figma: 68; más sutil por petición del 12/10/2026) */
--fs-btn-large-min: 34; --fs-btn-large-max: 48; /* SET · rIL */
--fs-btn-closing-min: 22; --fs-btn-closing-max: 48; /* SET · rIL · móvil 22 (antes 29) */
--fs-btn-tag-min: 24; --fs-btn-tag-max: 24; /* SET · rIL · botón amarillo «VER MÁS» del menú de servicios (móvil) */
/* SALIDA (mecánica). min()/max() en los extremos: admite escalas que decrecen. */
--fs-display-2xl: clamp(calc(min(var(--fs-display-2xl-min), var(--fs-display-2xl-max)) * 1rem / 16), calc(var(--fs-display-2xl-min) * 1rem / 16 + (var(--fs-display-2xl-max) - var(--fs-display-2xl-min)) * var(--fluid)), calc(max(var(--fs-display-2xl-min), var(--fs-display-2xl-max)) * 1rem / 16));
--fs-display-xl: clamp(calc(min(var(--fs-display-xl-min), var(--fs-display-xl-max)) * 1rem / 16), calc(var(--fs-display-xl-min) * 1rem / 16 + (var(--fs-display-xl-max) - var(--fs-display-xl-min)) * var(--fluid)), calc(max(var(--fs-display-xl-min), var(--fs-display-xl-max)) * 1rem / 16));
--fs-display-lg: clamp(calc(min(var(--fs-display-lg-min), var(--fs-display-lg-max)) * 1rem / 16), calc(var(--fs-display-lg-min) * 1rem / 16 + (var(--fs-display-lg-max) - var(--fs-display-lg-min)) * var(--fluid)), calc(max(var(--fs-display-lg-min), var(--fs-display-lg-max)) * 1rem / 16));
--fs-display: clamp(calc(min(var(--fs-display-min), var(--fs-display-max)) * 1rem / 16), calc(var(--fs-display-min) * 1rem / 16 + (var(--fs-display-max) - var(--fs-display-min)) * var(--fluid)), calc(max(var(--fs-display-min), var(--fs-display-max)) * 1rem / 16));
--fs-menu: clamp(calc(min(var(--fs-menu-min), var(--fs-menu-max)) * 1rem / 16), calc(var(--fs-menu-min) * 1rem / 16 + (var(--fs-menu-max) - var(--fs-menu-min)) * var(--fluid)), calc(max(var(--fs-menu-min), var(--fs-menu-max)) * 1rem / 16));
--fs-cta: clamp(calc(min(var(--fs-cta-min), var(--fs-cta-max)) * 1rem / 16), calc(var(--fs-cta-min) * 1rem / 16 + (var(--fs-cta-max) - var(--fs-cta-min)) * var(--fluid)), calc(max(var(--fs-cta-min), var(--fs-cta-max)) * 1rem / 16));
--fs-closing: clamp(calc(min(var(--fs-closing-min), var(--fs-closing-max)) * 1rem / 16), calc(var(--fs-closing-min) * 1rem / 16 + (var(--fs-closing-max) - var(--fs-closing-min)) * var(--fluid)), calc(max(var(--fs-closing-min), var(--fs-closing-max)) * 1rem / 16));
--fs-h1-lg: clamp(calc(min(var(--fs-h1-lg-min), var(--fs-h1-lg-max)) * 1rem / 16), calc(var(--fs-h1-lg-min) * 1rem / 16 + (var(--fs-h1-lg-max) - var(--fs-h1-lg-min)) * var(--fluid)), calc(max(var(--fs-h1-lg-min), var(--fs-h1-lg-max)) * 1rem / 16));
--fs-h1: clamp(calc(min(var(--fs-h1-min), var(--fs-h1-max)) * 1rem / 16), calc(var(--fs-h1-min) * 1rem / 16 + (var(--fs-h1-max) - var(--fs-h1-min)) * var(--fluid)), calc(max(var(--fs-h1-min), var(--fs-h1-max)) * 1rem / 16));
--fs-title: clamp(calc(min(var(--fs-title-min), var(--fs-title-max)) * 1rem / 16), calc(var(--fs-title-min) * 1rem / 16 + (var(--fs-title-max) - var(--fs-title-min)) * var(--fluid)), calc(max(var(--fs-title-min), var(--fs-title-max)) * 1rem / 16));
--fs-list: clamp(calc(min(var(--fs-list-min), var(--fs-list-max)) * 1rem / 16), calc(var(--fs-list-min) * 1rem / 16 + (var(--fs-list-max) - var(--fs-list-min)) * var(--fluid)), calc(max(var(--fs-list-min), var(--fs-list-max)) * 1rem / 16));
--fs-lead-lg: clamp(calc(min(var(--fs-lead-lg-min), var(--fs-lead-lg-max)) * 1rem / 16), calc(var(--fs-lead-lg-min) * 1rem / 16 + (var(--fs-lead-lg-max) - var(--fs-lead-lg-min)) * var(--fluid)), calc(max(var(--fs-lead-lg-min), var(--fs-lead-lg-max)) * 1rem / 16));
--fs-h2: clamp(calc(min(var(--fs-h2-min), var(--fs-h2-max)) * 1rem / 16), calc(var(--fs-h2-min) * 1rem / 16 + (var(--fs-h2-max) - var(--fs-h2-min)) * var(--fluid)), calc(max(var(--fs-h2-min), var(--fs-h2-max)) * 1rem / 16));
--fs-h3: clamp(calc(min(var(--fs-h3-min), var(--fs-h3-max)) * 1rem / 16), calc(var(--fs-h3-min) * 1rem / 16 + (var(--fs-h3-max) - var(--fs-h3-min)) * var(--fluid)), calc(max(var(--fs-h3-min), var(--fs-h3-max)) * 1rem / 16));
--fs-h4: clamp(calc(min(var(--fs-h4-min), var(--fs-h4-max)) * 1rem / 16), calc(var(--fs-h4-min) * 1rem / 16 + (var(--fs-h4-max) - var(--fs-h4-min)) * var(--fluid)), calc(max(var(--fs-h4-min), var(--fs-h4-max)) * 1rem / 16));
--fs-h5: clamp(calc(min(var(--fs-h5-min), var(--fs-h5-max)) * 1rem / 16), calc(var(--fs-h5-min) * 1rem / 16 + (var(--fs-h5-max) - var(--fs-h5-min)) * var(--fluid)), calc(max(var(--fs-h5-min), var(--fs-h5-max)) * 1rem / 16));
--fs-lead: clamp(calc(min(var(--fs-lead-min), var(--fs-lead-max)) * 1rem / 16), calc(var(--fs-lead-min) * 1rem / 16 + (var(--fs-lead-max) - var(--fs-lead-min)) * var(--fluid)), calc(max(var(--fs-lead-min), var(--fs-lead-max)) * 1rem / 16));
--fs-body: clamp(calc(min(var(--fs-body-min), var(--fs-body-max)) * 1rem / 16), calc(var(--fs-body-min) * 1rem / 16 + (var(--fs-body-max) - var(--fs-body-min)) * var(--fluid)), calc(max(var(--fs-body-min), var(--fs-body-max)) * 1rem / 16));
--fs-body-lg: clamp(calc(min(var(--fs-body-lg-min), var(--fs-body-lg-max)) * 1rem / 16), calc(var(--fs-body-lg-min) * 1rem / 16 + (var(--fs-body-lg-max) - var(--fs-body-lg-min)) * var(--fluid)), calc(max(var(--fs-body-lg-min), var(--fs-body-lg-max)) * 1rem / 16));
--fs-small: clamp(calc(min(var(--fs-small-min), var(--fs-small-max)) * 1rem / 16), calc(var(--fs-small-min) * 1rem / 16 + (var(--fs-small-max) - var(--fs-small-min)) * var(--fluid)), calc(max(var(--fs-small-min), var(--fs-small-max)) * 1rem / 16));
--fs-subp: clamp(calc(min(var(--fs-subp-min), var(--fs-subp-max)) * 1rem / 16), calc(var(--fs-subp-min) * 1rem / 16 + (var(--fs-subp-max) - var(--fs-subp-min)) * var(--fluid)), calc(max(var(--fs-subp-min), var(--fs-subp-max)) * 1rem / 16));
--fs-stat: clamp(calc(min(var(--fs-stat-min), var(--fs-stat-max)) * 1rem / 16), calc(var(--fs-stat-min) * 1rem / 16 + (var(--fs-stat-max) - var(--fs-stat-min)) * var(--fluid)), calc(max(var(--fs-stat-min), var(--fs-stat-max)) * 1rem / 16));
--fs-eyebrow: clamp(calc(min(var(--fs-eyebrow-min), var(--fs-eyebrow-max)) * 1rem / 16), calc(var(--fs-eyebrow-min) * 1rem / 16 + (var(--fs-eyebrow-max) - var(--fs-eyebrow-min)) * var(--fluid)), calc(max(var(--fs-eyebrow-min), var(--fs-eyebrow-max)) * 1rem / 16));
--fs-eyebrow-sm: clamp(calc(min(var(--fs-eyebrow-sm-min), var(--fs-eyebrow-sm-max)) * 1rem / 16), calc(var(--fs-eyebrow-sm-min) * 1rem / 16 + (var(--fs-eyebrow-sm-max) - var(--fs-eyebrow-sm-min)) * var(--fluid)), calc(max(var(--fs-eyebrow-sm-min), var(--fs-eyebrow-sm-max)) * 1rem / 16));
--fs-eyebrow-lg: clamp(calc(min(var(--fs-eyebrow-lg-min), var(--fs-eyebrow-lg-max)) * 1rem / 16), calc(var(--fs-eyebrow-lg-min) * 1rem / 16 + (var(--fs-eyebrow-lg-max) - var(--fs-eyebrow-lg-min)) * var(--fluid)), calc(max(var(--fs-eyebrow-lg-min), var(--fs-eyebrow-lg-max)) * 1rem / 16));
--fs-label: clamp(calc(min(var(--fs-label-min), var(--fs-label-max)) * 1rem / 16), calc(var(--fs-label-min) * 1rem / 16 + (var(--fs-label-max) - var(--fs-label-min)) * var(--fluid)), calc(max(var(--fs-label-min), var(--fs-label-max)) * 1rem / 16));
--fs-nav: clamp(calc(min(var(--fs-nav-min), var(--fs-nav-max)) * 1rem / 16), calc(var(--fs-nav-min) * 1rem / 16 + (var(--fs-nav-max) - var(--fs-nav-min)) * var(--fluid)), calc(max(var(--fs-nav-min), var(--fs-nav-max)) * 1rem / 16));
--fs-btn-small: clamp(calc(min(var(--fs-btn-small-min), var(--fs-btn-small-max)) * 1rem / 16), calc(var(--fs-btn-small-min) * 1rem / 16 + (var(--fs-btn-small-max) - var(--fs-btn-small-min)) * var(--fluid)), calc(max(var(--fs-btn-small-min), var(--fs-btn-small-max)) * 1rem / 16));
--fs-btn-cta: clamp(calc(min(var(--fs-btn-cta-min), var(--fs-btn-cta-max)) * 1rem / 16), calc(var(--fs-btn-cta-min) * 1rem / 16 + (var(--fs-btn-cta-max) - var(--fs-btn-cta-min)) * var(--fluid)), calc(max(var(--fs-btn-cta-min), var(--fs-btn-cta-max)) * 1rem / 16));
--fs-btn-menu: clamp(calc(min(var(--fs-btn-menu-min), var(--fs-btn-menu-max)) * 1rem / 16), calc(var(--fs-btn-menu-min) * 1rem / 16 + (var(--fs-btn-menu-max) - var(--fs-btn-menu-min)) * var(--fluid)), calc(max(var(--fs-btn-menu-min), var(--fs-btn-menu-max)) * 1rem / 16));
--fs-btn-large: clamp(calc(min(var(--fs-btn-large-min), var(--fs-btn-large-max)) * 1rem / 16), calc(var(--fs-btn-large-min) * 1rem / 16 + (var(--fs-btn-large-max) - var(--fs-btn-large-min)) * var(--fluid)), calc(max(var(--fs-btn-large-min), var(--fs-btn-large-max)) * 1rem / 16));
--fs-btn-closing: clamp(calc(min(var(--fs-btn-closing-min), var(--fs-btn-closing-max)) * 1rem / 16), calc(var(--fs-btn-closing-min) * 1rem / 16 + (var(--fs-btn-closing-max) - var(--fs-btn-closing-min)) * var(--fluid)), calc(max(var(--fs-btn-closing-min), var(--fs-btn-closing-max)) * 1rem / 16));
--fs-btn-tag: clamp(calc(min(var(--fs-btn-tag-min), var(--fs-btn-tag-max)) * 1rem / 16), calc(var(--fs-btn-tag-min) * 1rem / 16 + (var(--fs-btn-tag-max) - var(--fs-btn-tag-min)) * var(--fluid)), calc(max(var(--fs-btn-tag-min), var(--fs-btn-tag-max)) * 1rem / 16));
}
/* Interlineado normal: 1,4 en móvil y 1,5 desde 64em (breakpoint lg de
base.css). Escalón, no fluido: un interlineado sin unidad no se puede
interpolar con el ancho de pantalla. */
@media (width >= 64em) {
:root { --lh-normal: 1.5; } /* SET · rIL */
}
/* ---- 3.7 NORMAS DE ASIGNACIÓN (qué token usa cada tipo de texto) ---------
Las variables no llevan el nombre del elemento; esta tabla es la que
asocia. base.css (sección 7) implementa la tabla de la norma y
marca-ril.css aplica las diferencias de rIL (marcadas con *).
texto tamaño interlineado tracking peso ancho / caja
------------------ ----------- ------------ ---------- --------- -------------------
display-xl* --fs-display-xl* --lh-tight --ls-tight black* condensed*, MAYÚSC.*
display --fs-display --lh-tight --ls-tight black* condensed*, MAYÚSC.*
h1 --fs-h1 --lh-tight --ls-tight black* condensed*, MAYÚSC.*
h2 --fs-h2 --lh-tight* --ls-tight black* condensed*, MAYÚSC.*
h3 --fs-h3 --lh-tight* --ls-normal black* condensed*, MAYÚSC.*
h4 --fs-h4 --lh-snug --ls-normal black* condensed*, MAYÚSC.*
h5 / etiqueta* --fs-h5* --lh-tight --ls-wider regular* condensed*, MAYÚSC.*
cifra (stat)* --fs-stat* --lh-tight --ls-tight black* condensed*
lead --fs-lead --lh-normal* --ls-normal regular
cuerpo --fs-body --lh-normal --ls-normal regular
lectura larga --fs-body --lh-relaxed --ls-normal regular
small / legales --fs-small --lh-normal --ls-normal regular
eyebrow (mayúsc.) --fs-eyebrow* --lh-label* --ls-wider regular* ancho 84 %*
botón / CTA texto* --fs-btn-small* --lh-label* --ls-wide* regular* ancho 87 %*, MAYÚSC.*
navegación* --fs-nav* --lh-label* --ls-wide* medium* ancho 84 %*, MAYÚSC.*
CONTACTA / menú* --fs-btn-cta* / --fs-btn-menu* --lh-snug black* condensed*, MAYÚSC.*
enlace-titular* --fs-btn-large* --lh-tight --ls-tight black* condensed*, MAYÚSC.*
------------------------------------------------------------------------ */
/* ==========================================================================
4. TOKENS · MEDIDAS
========================================================================== */
:root {
/* ---- 4.1 ESPACIADO ----------------------------------------------------
NOMBRE --space-{talla} escala: 3xs 2xs xs sm md lg xl 2xl 3xl
REGLA de 3xs a lg: fijos, para el interior de componentes.
de xl a 3xl: fluidos (mismo mecanismo que 3.5), para huecos
entre bloques y secciones.
rIL --space-md (24 px) es la separación del contenido respecto a las
líneas de la retícula en escritorio.
------------------------------------------------------------------- */
--space-3xs: 0.25rem; /* DEF · 4 */
--space-2xs: 0.5rem; /* DEF · 8 */
--space-xs: 0.75rem; /* DEF · 12 */
--space-sm: 1rem; /* DEF · 16 */
--space-md: 1.5rem; /* DEF · 24 */
--space-lg: 2rem; /* DEF · 32 */
--space-xl-min: 40; --space-xl-max: 56; /* SET · rIL · hueco bajo entradillas y cabeceras de bloque */
--space-2xl-min: 56; --space-2xl-max: 88; /* SET · rIL · hueco entre bloques */
--space-3xl-min: 88; --space-3xl-max: 144; /* SET · rIL · padding vertical de sección */
--space-xl: clamp(calc(var(--space-xl-min) * 1rem / 16), calc(var(--space-xl-min) * 1rem / 16 + (var(--space-xl-max) - var(--space-xl-min)) * var(--fluid)), calc(var(--space-xl-max) * 1rem / 16));
--space-2xl: clamp(calc(var(--space-2xl-min) * 1rem / 16), calc(var(--space-2xl-min) * 1rem / 16 + (var(--space-2xl-max) - var(--space-2xl-min)) * var(--fluid)), calc(var(--space-2xl-max) * 1rem / 16));
--space-3xl: clamp(calc(var(--space-3xl-min) * 1rem / 16), calc(var(--space-3xl-min) * 1rem / 16 + (var(--space-3xl-max) - var(--space-3xl-min)) * var(--fluid)), calc(var(--space-3xl-max) * 1rem / 16));
/* ---- 4.2 LAYOUT -------------------------------------------------------
NOMBRE --container-{variante}, --section-y, --header-height
rIL la retícula de 12 columnas y sus líneas usan --ril-grid-*
(VARIABLES PROPIAS).
------------------------------------------------------------------- */
--container-max: 120rem; /* SET · rIL · 1920 px */
--container-narrow: 48rem; /* DEF */
--container-pad-min: 14; --container-pad-max: 40; /* SET · rIL · margen exterior de la retícula (Figma: 14 y 40) */
--container-pad: clamp(calc(var(--container-pad-min) * 1rem / 16), calc(var(--container-pad-min) * 1rem / 16 + (var(--container-pad-max) - var(--container-pad-min)) * var(--fluid)), calc(var(--container-pad-max) * 1rem / 16));
--section-y: var(--space-2xl); /* DEF · rIL lo cambia a 3xl en OVERRIDES */
--header-height-min: 56; --header-height-max: 60; /* SET · rIL · barra fija, más baja que Figma (77 / 71) por petición del 12/10/2026; el logo escala con ella (41,5 %) */
--header-height: clamp(calc(var(--header-height-min) * 1rem / 16), calc(var(--header-height-min) * 1rem / 16 + (var(--header-height-max) - var(--header-height-min)) * var(--fluid)), calc(var(--header-height-max) * 1rem / 16));
--control-height: 3rem; /* DEF · campos de formulario */
/* ---- 4.3 RADIOS -------------------------------------------------------
NOMBRE --radius-{talla} escala: none xs sm md lg xl full
VALOR rem; full = 9999px (píldora y círculo).
REGLA qué radio usa cada componente se decide por el token de
componente (--btn-radius, --card-radius...), no por la escala.
rIL radios pequeños: 8 px en imágenes, fichas, etiquetas y botones;
14 px en el hover de imágenes. Los nombres de rIL son
--radius-small y --radius-large; --radius-sm y --radius-lg se
mantienen como alias porque base.css los lee (.u-skip-link,
fallbacks de .card y .glass).
------------------------------------------------------------------- */
--radius-small: 0.5rem; /* SET · rIL · 8 · imágenes, fichas, etiquetas, botones */
--radius-large: 0.875rem; /* SET · rIL · 14 · imágenes al pasar por encima */
--radius-none: 0; /* DEF */
--radius-xs: 0.125rem; /* DEF · 2 */
--radius-sm: var(--radius-small); /* SET · rIL · alias para base.css (antes 6 px) */
--radius-md: 0.5rem; /* DEF · 8 · campos */
--radius-lg: var(--radius-large); /* SET · rIL · alias para base.css */
--radius-xl: 1.5rem; /* DEF · 24 */
--radius-full: 9999px; /* DEF · botones, círculos */
/* ---- 4.4 BORDES Y FOCO ------------------------------------------------ */
--border-width: 1px; /* DEF · también el grosor de las líneas de la retícula */
--focus-width: 2px; /* DEF */
--focus-offset: 2px; /* DEF */
/* ---- 4.5 SOMBRAS ------------------------------------------------------
(los valores están en 2.3: allí se evalúan con el --shadow-color de cada tema)
rIL la marca casi no usa sombras: solo las fichas flotantes.
------------------------------------------------------------------- */
/* ---- 4.6 MOVIMIENTO ---------------------------------------------------
NOMBRE --dur-{nombre} fast base slow --ease-{nombre} standard in-out
USO transition: {propiedad} var(--dur-base) var(--ease-standard);
Animaciones decorativas largas se declaran en su componente.
rIL movimiento suave y algo más lento que la plantilla. Nada rebota
y ningún hover desplaza textos. Precios y porcentajes nunca se
animan. Curvas del Presupuestador: standard = hover, in-out =
entradas y salidas (idéntica a la plantilla).
------------------------------------------------------------------- */
--dur-fast: 250ms; /* DEF · rIL · cambios de color en hover */
--dur-base: 400ms; /* DEF · rIL · iconos, flechas, desplegables */
--dur-slow: 800ms; /* DEF · rIL · cambios de tema, imágenes */
--ease-standard: cubic-bezier(0.22, 1, 0.36, 1); /* DEF · rIL · salida suave sin rebote */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* DEF */
/* ---- 4.7 CAPAS Z -------------------------------------------------------
NOMBRE --z-{nombre} Nunca z-index numérico suelto.
------------------------------------------------------------------- */
--z-base: 0; --z-dropdown: 100; --z-sticky: 200; /* DEF */
--z-overlay: 300; --z-modal: 400; --z-toast: 500; /* DEF */
}
/* ==========================================================================
5. TOKENS · EFECTOS
========================================================================== */
:root {
/* ---- 5.1 DEGRADADOS ---------------------------------------------------
NOMBRE --gradient-{nombre}
COMPOSICIÓN siempre desde dos paradas + ángulo.
rIL Figma define un degradado de texto: crema → Amarillo Solar, de
arriba abajo, que llega al amarillo al 32 % de la altura
(«95%» en «El 95 % de nuestros clientes…», sobre negro). Se
usa con .text-gradient. Los otros degradados de la marca son
"soles" (ver --ril-sun-*). .btn--gradient no se usa: Figma no
tiene botones con degradado.
Crema y amarillo se leen como primitivos (no como text/primary)
porque se resuelven en :root, fuera de cualquier tema.
------------------------------------------------------------------- */
--gradient-from: var(--color-light); /* SET · rIL */
--gradient-to: var(--color-brand); /* SET · rIL */
--gradient-angle: 180deg; /* SET · rIL · de arriba abajo */
--gradient-primary: linear-gradient(var(--gradient-angle), var(--gradient-from), var(--gradient-to) 32%); /* DEF · rIL · parada final al 32 %, como en Figma */
/* ---- 5.2 CRISTAL ------------------------------------------------------
rIL solo en la barra fija sobre contenido (desenfoque de 12 px en el
Presupuestador).
------------------------------------------------------------------- */
--glass-blur: 12px; /* DEF · rIL */
/* ---- 5.3 CHAFLÁN ------------------------------------------------------- */
--chamfer-size: 0px; /* SET · rIL · la marca no usa chaflán: .chamfer no hace nada */
--chamfer-line: 1px; /* DEF */
}
/* ==========================================================================
OVERRIDES DE MARCA (rIL)
Solo reasignar tokens de componente o de tema. Nunca editar base.css.
OJO CON EL ALCANCE. Un token que se reasigna con var() en :root se
resuelve en :root y los hijos heredan el valor ya calculado: un
"--btn-bg: var(--color-text)" en :root daría negro también dentro de
.theme-space. Por eso:
A. tokens que NO dependen del tema → :root
B. tokens que SÍ dependen del tema → en todos los selectores de tema
(misma solución que 2.3), o con currentColor, que se resuelve donde
se usa.
========================================================================== */
/* ---- A. Independientes del tema ------------------------------------------ */
:root {
/* layout */
--section-y: var(--space-3xl); /* secciones amplias, como el Presupuestador */
/* botón: radio de 8 px, mayúsculas, sin sombra (marca-ril.css pone las mayúsculas) */
--btn-radius: var(--radius-small);
--btn-fs: var(--fs-btn-small);
--btn-fw: var(--fw-semibold);
--btn-ls: var(--ls-wide);
--btn-min-h: 2.5rem; /* 40 px de alto, como en el Presupuestador y en Figma */
--btn-shadow-hover: none;
/* etiquetas: toman el color del texto que las rodea */
--eyebrow-fg: currentColor;
--pill-fg: currentColor;
/* eyebrow: antetítulo en mayúsculas, peso normal y ancho 84 % (Figma) */
--eyebrow-fs: var(--fs-eyebrow);
--eyebrow-fw: var(--fw-regular);
--eyebrow-stretch: var(--ril-stretch-label);
/* tarjeta: radio de las fichas */
--card-radius: var(--radius-md);
}
/* ---- B. Dependientes del tema: semánticos ---------------------------------- */
:root,
.theme-light {
--color-background: var(--color-light); /* crema */
--color-background-alt: color-mix(in srgb, var(--color-dark) 6%, var(--color-light)); /* SET · rIL · ≈ #ECEAE5; Figma no tiene fondo alterno */
--color-on-primary: var(--color-dark); /* negro sobre amarillo: 10,4:1 */
--color-link: var(--color-text); /* los enlaces se marcan con flecha o subrayado, no con color */
--color-focus: var(--color-text);
}
.theme-space {
--color-text: var(--color-light); /* crema sobre negro: 20,0:1 */
--color-primary: var(--color-brand); /* por si el bloque oscuro va dentro de .theme-sun */
}
/* ---- B. Dependientes del tema: componentes -------------------------------
Botón de rIL: relleno del color del texto (negro sobre crema, crema sobre
negro) y, al pasar por encima, Amarillo Solar con texto negro. En .theme-sun
el hover pasa a crema. Las variantes (.btn--secondary...) siguen ganando
porque se declaran en el propio elemento.
------------------------------------------------------------------------ */
:root,
.theme-light,
.theme-space,
.theme-sun,
[data-theme="sun"] {
--btn-bg: var(--color-text);
--btn-fg: var(--color-background);
--btn-bg-hover: var(--color-primary);
--btn-fg-hover: var(--color-on-primary);
/* líneas de la retícula: negras en claro y en sol, crema al 30 % en oscuro */
--ril-grid-line-color: var(--color-text);
}
.theme-space {
--ril-grid-line-color: color-mix(in srgb, var(--color-text) 30%, transparent);
}
/* ==========================================================================
LEGACY · alias de transición (nombre antiguo → token estándar)
Solo para CSS de rIL aún sin migrar. Retirar el bloque cuando no quede
ningún consumidor. Retirada prevista: no aplica (web nueva, sin consumidores)
Si se porta un componente del Presupuestador, se traduce con esta tabla
en lugar de activar alias:
--k → --color-dark --cr → --color-light --sun → --color-brand
--or → --color-accent --t2 → --color-text-muted --g2 → --color-background-alt
--bg / --fg → --color-background / --color-text
--gut → --container-pad --maxw → --container-max
--io → --ease-in-out --hv → --ease-standard
--out → --ril-ease-out
--fs-cifra → --fs-stat (el resto de --fs-* se llaman igual)
data-theme=dark → .theme-space data-theme=sun → se mantiene (o .theme-sun)
========================================================================== */
:root {
/* sin alias activos */
}
/* ==========================================================================
VARIABLES PROPIAS DE rIL (sin equivalente en la norma)
Prefijo --ril-*. Si otra marca repite una, se promueve a la plantilla.
========================================================================== */
:root {
/* ---- Tipografía -------------------------------------------------------
Mona Sans con los juegos estilísticos ss03, ss05 y ss06 y el eje de
tamaño óptico fijo en 28, como en el Presupuestador. */
--ril-font-features: "ss03" 1, "ss05" 1, "ss06" 1; /* SET · rIL */
--ril-font-variations: "opsz" 28; /* SET · rIL · sin efecto con Mona Sans 2.000 (no tiene eje opsz); se mantiene por el Presupuestador */
--ril-fw-black: 850; /* SET · rIL · titulares y cifras */
/* Ancho (eje wdth, vía font-stretch). Titulares condensados al 77 %.
Letras anchas (Expanded): una por palabra y dos como máximo por
titular, preferiblemente E, R, D, F o N, nunca la primera ni la
última. Su animación solo estira de 75 % a 110 %, en dos fotogramas,
sin gris ni transparencia. */
--ril-stretch-display: 75%; /* SET · rIL · titulares gigantes (Figma: wdth 75) */
--ril-stretch-hero: 81%; /* SET · rIL · titular del hero en escritorio. La capa de Figma
dice wdth 75, pero se ve a ≈81 (medido: «QUE BUSCAN
CRECER» 1628 px a 200 px; el resto de textos de 75 sí
miden 75). Manda lo que se ve */
--ril-stretch-hero-sm: 79%; /* SET · rIL · ídem en móvil («PARA MARCAS» 374 px a 68 px) */
--ril-stretch-condensed: 77%; /* SET · rIL */
--ril-stretch-label: 84%; /* SET · rIL · antetítulos y navegación (Figma: wdth 84) */
--ril-stretch-cta: 87%; /* SET · rIL · «VER MÁS», «CONÓCENOS», títulos del pie (Figma: wdth 87) */
--ril-stretch-expanded: 110%; /* SET · rIL · estado final de la letra ancha */
--ril-stretch-expanded-from: 75%; /* SET · rIL · estado inicial de su animación */
/* ---- Retícula ---------------------------------------------------------
12 columnas sin hueco entre ellas; las líneas verticales marcan sus
bordes y el contenido se separa de ellas con --ril-grid-inset.
Los bloques solo se parten en las columnas 4 y 8; el contenido empieza
en la 1, la 5 o la 9. Las líneas no cruzan ningún texto ni filete.
Un grupo de exactamente tres elementos va en tercios. */
--ril-grid-columns: 12; /* SET · rIL */
--ril-grid-line-width: var(--border-width); /* SET · rIL */
/* --ril-grid-line-color: por tema, en OVERRIDES (B) */
--ril-grid-inset-min: 10; --ril-grid-inset-max: 24; /* SET · rIL · 10 px en móvil, 24 px en escritorio.
Figma dibuja canales entre columnas (10 y 24, y 6
columnas en móvil); el código mantiene 12 columnas
sin canal y con inset (decisión del 09/10/2026) */
--ril-grid-inset: clamp(calc(var(--ril-grid-inset-min) * 1rem / 16), calc(var(--ril-grid-inset-min) * 1rem / 16 + (var(--ril-grid-inset-max) - var(--ril-grid-inset-min)) * var(--fluid)), calc(var(--ril-grid-inset-max) * 1rem / 16));
/* ---- Sol (degradados de marca) ----------------------------------------
Manchas de Amarillo Solar muy desenfocadas, con formas orgánicas, que
se funden con el fondo y se mueven con el scroll. Las dibuja cada
componente; aquí solo el color y el desenfoque. */
--ril-sun-color: var(--color-brand); /* SET · rIL · a confirmar · centro del sol (Figma: amarillo al 100 %; antes 90 %) */
--ril-sun-color-soft: color-mix(in srgb, var(--color-brand) 10%, transparent); /* SET · rIL · a confirmar · borde del sol (Figma: amarillo al 10 %; antes 55 %) */
/* desenfoque fluido en px (no en rem: no debe crecer con el zoom de texto) */
--ril-sun-blur-min: 90; --ril-sun-blur-max: 180; /* SET · rIL · Figma: 90-190 en móvil, 200 en escritorio */
--ril-sun-blur: clamp(calc(var(--ril-sun-blur-min) * 1px), calc(var(--ril-sun-blur-min) * 1px + (var(--ril-sun-blur-max) - var(--ril-sun-blur-min)) * var(--fluid)), calc(var(--ril-sun-blur-max) * 1px));
/* Brasa: paleta de los degradados de luz del Presupuestador (rIL 1.0):
pie que se destapa, tarjeta oscura con arco de luz y sol que sigue el
scroll. Del oro al negro pasando por naranja, rojo vino y noche. */
--ril-glow-gold: #FFC21A; /* SET · rIL · Presupuestador */
--ril-glow-amber: #FFAE00; /* SET · rIL · Presupuestador */
--ril-glow-orange: #FF8A00; /* SET · rIL · Presupuestador */
--ril-glow-ember: #E8610F; /* SET · rIL · Presupuestador */
--ril-glow-wine: #782D28; /* SET · rIL · Presupuestador */
--ril-glow-night: #301626; /* SET · rIL · Presupuestador */
--ril-glow-shadow: #1E0E1A; /* SET · rIL · Presupuestador */
--ril-glow-cream: #FFD678; /* SET · rIL · Presupuestador (rgba 255 214 120) */
/* ---- Movimiento -------------------------------------------------------- */
--ril-ease-out: cubic-bezier(0.22, 0.8, 0.3, 1); /* SET · rIL · salidas largas (fondos, soles) */
--ril-reveal-dur: 1.2s; /* SET · rIL · aparición de bloques al hacer scroll */
--ril-reveal-dist: 2.25rem; /* SET · rIL · 36 px de desplazamiento al aparecer */
--ril-reveal-stagger: 70ms; /* SET · rIL · retraso entre elementos de una lista */
/* Muelle «Quick» de Figma (Smart Animate del menú de servicios): masa 1,
rigidez 300, amortiguación 20 (ζ ≈ 0,58, rebote del 11 %), 0,744 s.
Muestreado en 40 pasos con linear(). */
--ril-dur-quick: 744ms; /* SET · rIL */
--ril-ease-quick: linear(0, 0.046, 0.159, 0.31, 0.473, 0.63, 0.771, 0.887, 0.977, 1.041, 1.082, 1.103, 1.108, 1.103, 1.09, 1.074, 1.056, 1.039, 1.024, 1.012, 1.002, 0.995, 0.991, 0.989, 0.988, 0.989, 0.99, 0.992, 0.994, 0.996, 0.997, 0.999, 1, 1.001, 1.001, 1.001, 1.001, 1.001, 1.001, 1.001, 1); /* SET · rIL */
}
} /* fin de @layer tokens */
/* ───── ril/fuentes-ril.css ───── */
/* ==========================================================================
fuentes-ril.css — carga de Mona Sans · v1.0 · 09/10/2026
Solo @font-face. Tamaños y pesos de uso: tokens-ril.css (3.1-3.5).
ARCHIVOS Mona Sans 2.000 variable (licencia OFL, ver OFL.txt):
ejes wdth 75-125 (font-stretch) y wght 200-900.
Sin eje opsz: --ril-font-variations ("opsz" 28) no tiene efecto.
Servidos: public/fonts/mona-sans/*.woff2 (subconjunto latino)
Fuente: resources/fonts/mona-sans/*.ttf (originales, no se sirven)
SUBCONJUNTO latín básico y Latin-1 (español completo), puntuación
tipográfica (« » — ’ “ ”), €, ™, flechas ← ↑ → ↓ y todas las
funciones OpenType (ss03, ss05, ss06…). Para regenerarlo:
pyftsubset "MonaSans-VariableFont_wdth,wght.ttf"
--unicodes="U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD"
--layout-features='*' --flavor=woff2
--output-file=mona-sans-variable.woff2
(pyftsubset es de fonttools: pip install fonttools brotli)
CARGA la redonda se precarga en el layout; la cursiva solo se
descarga si algún texto la usa.
========================================================================== */
@font-face {
font-family: "Mona Sans";
src: url("/home-nueva/fonts/mona-sans/mona-sans-variable.woff2") format("woff2");
font-weight: 200 900;
font-stretch: 75% 125%;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Mona Sans";
src: url("/home-nueva/fonts/mona-sans/mona-sans-variable-italic.woff2") format("woff2");
font-weight: 200 900;
font-stretch: 75% 125%;
font-style: italic;
font-display: swap;
}
/* ───── ril/base.css ───── */
/* ==========================================================================
rIL · BASE — v3.3 · 09/10/2026
v3.3 capa "tokens" (la primera): los temas pierden frente a cualquier capa;
el tema oscuro se llama .theme-space; .eyebrow amplía su API
(--eyebrow-fs -fw -ls -stretch).
BASE FIJA: capas, reset, tipografía base, layout, componentes y utilidades.
Es IGUAL para todas las marcas y para rIL. No se edita por proyecto: se
personaliza reasignando tokens (ver 1.7) en el CSS de la marca o del proyecto.
Solo lee tokens definidos en tokens.css; no contiene hex, rgb() ni valores
de marca. Si falta un token, el componente cae a su valor por defecto.
Requiere: tokens.css cargado ANTES, abierto con la misma sentencia @layer
que este archivo (ver más abajo) y con todo su contenido dentro
de @layer tokens.
La norma general (idioma, unidades, breakpoints, capas, prohibiciones) está
en tokens.css, secciones 0 y 1.
ÍNDICE
1. NORMA DE COMPONENTES nombrado, estados, tokens de componente, variantes
7. @layer reset + base
8. @layer layout + components
9. @layer utilities + accesibilidad
A. APÉNDICE mapa de nombres antiguos → nuevos
========================================================================== */
/* ==========================================================================
1. NORMA DE COMPONENTES
==========================================================================
1.6 COMPONENTES
Bloque .btn
Elemento .btn__icon
Variante .btn--secondary (modificador: cambia aspecto)
Talla .btn--sm .btn--lg (modificador: cambia medidas)
Estado pseudo-clase nativa o ARIA: :hover :focus-visible
:disabled [aria-disabled="true"] [aria-invalid="true"]
[aria-expanded="true"] [data-state="..."] si lo cambia JS.
Nunca clases .is-active / .active.
Utilidad .u-{nombre} (una sola cosa, sin lógica)
Tema .theme-{nombre}
1.7 TOKENS DE COMPONENTE (la forma de declarar variantes)
Nombre: --{bloque}-{propiedad}[-{estado}] ej. --btn-bg, --btn-bg-hover
Lectura: el componente lee su token con fallback a un token global:
background-color: var(--btn-bg, var(--color-primary));
El fallback ES el valor por defecto.
Variante: una variante SOLO reasigna tokens de componente; no
declara propiedades CSS. Una variante nueva son 3-5 líneas:
.btn--danger { --btn-bg: var(--color-error); --btn-bg-hover: ... }
Marca: para cambiar un componente en todo el proyecto basta
reasignar su token en :root (ej. :root { --btn-radius: var(--radius-full); }).
Alcance: un token de componente se asigna en el propio elemento o en
:root, nunca en un contenedor intermedio (se heredaría).
API: cada componente documenta en su cabecera la lista de sus tokens
y el valor de fallback de cada uno.
Excepción: una variante estructural (ej. .btn--block, .chamfer) puede
declarar propiedades; se documenta como "estructural".
========================================================================== */
/* Orden de capas. Manda la PRIMERA vez que se declara, por eso tokens.css
(que se carga antes) repite esta misma línea: si no, "tokens" quedaría
delante y el resto en el orden en que aparecieran.
tokens variables y temas: lo más débil, cualquier capa los pisa
(un .section--alt gana al fondo de un .theme-*)
reset · base · layout · components · utilities
El CSS sin capa (si lo hubiera) gana a todas: evitarlo. */
@layer tokens, reset, base, layout, components, utilities;
/* ==========================================================================
7. @layer reset + base
========================================================================== */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
tab-size: 4;
scroll-padding-top: calc(var(--header-height) + var(--space-sm));
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body { margin: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
hr { border: 0; border-top: var(--border-width) solid var(--color-border); margin-block: var(--space-lg); }
img, picture, video, canvas, svg { max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button, [role="button"], summary { cursor: pointer; }
}
@layer base {
:root { accent-color: var(--color-primary); }
body {
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: var(--fw-regular);
line-height: var(--lh-normal);
letter-spacing: var(--ls-normal);
color: var(--color-text);
background-color: var(--color-background);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-wrap: break-word;
}
/* Titulares: ver tokens.css, tabla 3.7 */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: var(--fw-bold);
color: var(--color-heading);
line-height: var(--lh-snug);
text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5, h6 { font-size: var(--fs-body); }
p, li, figcaption { text-wrap: pretty; }
small { font-size: var(--fs-small); }
strong, b { font-weight: var(--fw-bold); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.95em; }
a {
color: var(--color-link);
text-decoration-thickness: from-font;
text-underline-offset: 0.2em;
transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--color-link-hover); }
/* Foco: único estilo de foco de todo el sitio */
:focus-visible {
outline: var(--focus-width) solid var(--color-focus);
outline-offset: var(--focus-offset);
}
::selection { background: color-mix(in srgb, var(--color-primary) 25%, transparent); }
}
/* ==========================================================================
8. @layer layout + components
========================================================================== */
@layer layout {
/* .container ancho máximo y gutter. Variante: --narrow */
.ril-container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }
/* .section bloque vertical de página.
Tokens: --section-y (global). Variantes: --sm --lg --alt
Tema oscuro: */
.ril-section { padding-block: var(--section-y); }
.section--sm { --section-y: var(--space-xl); }
.section--lg { --section-y: var(--space-3xl); }
.section--alt { background-color: var(--color-background-alt); }
/* .flow separa verticalmente los hijos directos. Token: --flow-space */
.flow > * + * { margin-top: var(--flow-space, var(--space-sm)); }
.flow > :is(h2, h3, h4) { margin-top: var(--space-lg); }
/* .cluster fila que salta de línea. Token: --cluster-gap */
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cluster-gap, var(--space-sm));
}
}
@layer components {
/* ------------------------------------------------------------------------
COMPONENTE: .btn (ejemplo de referencia)
Elementos: .btn__icon
Variantes: --secondary --ghost --inverse --glass --gradient
Tallas: --sm --lg Estructurales: --block --caps
API (token · fallback):
--btn-bg · var(--color-primary) --btn-bg-hover · var(--color-primary-hover)
--btn-fg · var(--color-on-primary) --btn-fg-hover · = --btn-fg
--btn-border · transparent --btn-border-hover · = --btn-border
--btn-radius · var(--radius-md) --btn-shadow-hover · var(--shadow-md)
--btn-pad-y · var(--space-xs) --btn-pad-x · var(--space-md)
--btn-fs · var(--fs-body) --btn-fw · var(--fw-medium)
--btn-ls · var(--ls-normal) --btn-min-h · var(--control-height)
------------------------------------------------------------------------ */
.ril-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2xs);
min-height: var(--btn-min-h, var(--control-height));
padding: var(--btn-pad-y, var(--space-xs)) var(--btn-pad-x, var(--space-md));
font-family: var(--font-body);
font-size: var(--btn-fs, var(--fs-body));
font-weight: var(--btn-fw, var(--fw-medium));
line-height: var(--lh-tight);
letter-spacing: var(--btn-ls, var(--ls-normal));
text-decoration: none;
white-space: nowrap;
color: var(--btn-fg, var(--color-on-primary));
background-color: var(--btn-bg, var(--color-primary));
border: var(--border-width) solid var(--btn-border, transparent);
border-radius: var(--btn-radius, var(--radius-md));
transition:
color var(--dur-base) var(--ease-standard),
background-color var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard),
box-shadow var(--dur-base) var(--ease-standard),
transform var(--dur-base) var(--ease-standard);
}
.ril-btn:hover {
color: var(--btn-fg-hover, var(--btn-fg, var(--color-on-primary)));
background-color: var(--btn-bg-hover, var(--color-primary-hover));
border-color: var(--btn-border-hover, var(--btn-border, transparent));
box-shadow: var(--btn-shadow-hover, var(--shadow-md));
}
.ril-btn:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }
.btn--secondary {
--btn-bg: transparent; --btn-bg-hover: var(--color-primary-soft);
--btn-fg: var(--color-primary);
--btn-border: var(--color-primary);
--btn-shadow-hover: none;
}
.btn--ghost {
--btn-bg: transparent; --btn-bg-hover: var(--color-primary-soft);
--btn-fg: var(--color-link);
--btn-shadow-hover: none;
}
/* inverso del contexto: fondo claro sobre tema oscuro y viceversa */
.btn--inverse {
--btn-bg: var(--color-text); --btn-bg-hover: color-mix(in srgb, var(--color-text) 88%, transparent);
--btn-fg: var(--color-background);
}
.btn--glass {
--btn-bg: var(--glass-bg); --btn-bg-hover: var(--glass-bg-strong);
--btn-fg: var(--color-text);
--btn-border: var(--glass-border);
--btn-shadow-hover: none;
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur)); /* estructural */
}
/* estructural: degradado animado con las mismas dos paradas */
.btn--gradient {
--btn-bg: transparent; --btn-bg-hover: transparent;
background-image: linear-gradient(var(--gradient-angle), var(--gradient-from), var(--gradient-to), var(--gradient-from));
background-size: 200% 100%;
background-position: 0 0;
transition-property: background-position, box-shadow, transform;
}
.btn--gradient:hover { background-position: 100% 0; }
.btn--sm { --btn-min-h: 2.25rem; --btn-pad-y: var(--space-2xs); --btn-pad-x: var(--space-sm); --btn-fs: var(--fs-small); }
.btn--lg { --btn-min-h: 3.5rem; --btn-pad-y: var(--space-sm); --btn-pad-x: var(--space-lg); --btn-fs: var(--fs-lead); }
.btn--block { display: flex; width: 100%; } /* estructural */
.btn--caps { --btn-fs: var(--fs-small); --btn-ls: var(--ls-wide); text-transform: uppercase; } /* estructural; tokens.css 3.7 */
.ril-btn:disabled,
.ril-btn[aria-disabled="true"] {
color: var(--color-disabled-text);
background-color: var(--color-disabled-bg);
background-image: none;
border-color: transparent;
box-shadow: none;
cursor: not-allowed;
pointer-events: none;
}
/* ------------------------------------------------------------------------
.link-arrow enlace con flecha. Tokens: --link-arrow-gap · var(--space-2xs)
------------------------------------------------------------------------ */
.link-arrow {
display: inline-flex;
align-items: center;
gap: var(--link-arrow-gap, var(--space-2xs));
font-weight: var(--fw-medium);
text-decoration: none;
}
.link-arrow::after {
content: "\2192";
content: "\2192" / ""; /* texto alternativo vacío: no se lee la flecha */
transition: transform var(--dur-base) var(--ease-standard);
}
.link-arrow:hover::after { transform: translateX(0.25em); }
/* ------------------------------------------------------------------------
.pill etiqueta redondeada. Variantes: --outline
Tokens: --pill-bg · var(--color-primary-soft) --pill-fg · var(--color-primary)
--pill-border · transparent
------------------------------------------------------------------------ */
.pill {
display: inline-flex;
align-items: center;
gap: var(--space-3xs);
padding: var(--space-3xs) var(--space-xs);
font-size: var(--fs-small);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
color: var(--pill-fg, var(--color-primary));
background-color: var(--pill-bg, var(--color-primary-soft));
border: var(--border-width) solid var(--pill-border, transparent);
border-radius: var(--radius-full);
}
.pill--outline { --pill-bg: transparent; --pill-fg: var(--color-text-muted); --pill-border: var(--color-border); }
/* ------------------------------------------------------------------------
.eyebrow antetítulo en mayúsculas (tokens.css, tabla 3.7).
API (token · fallback):
--eyebrow-fg · var(--color-primary) --eyebrow-fs · var(--fs-small)
--eyebrow-fw · var(--fw-medium) --eyebrow-ls · var(--ls-wider)
--eyebrow-stretch · normal (ancho de la fuente variable)
------------------------------------------------------------------------ */
.eyebrow {
display: block;
font-size: var(--eyebrow-fs, var(--fs-small));
font-weight: var(--eyebrow-fw, var(--fw-medium));
font-stretch: var(--eyebrow-stretch, normal);
line-height: var(--lh-tight);
letter-spacing: var(--eyebrow-ls, var(--ls-wider));
text-transform: uppercase;
color: var(--eyebrow-fg, var(--color-primary));
}
/* ------------------------------------------------------------------------
.text-gradient texto con degradado de marca (estructural).
------------------------------------------------------------------------ */
.text-gradient {
color: var(--color-primary); /* fallback si no hay background-clip */
background-image: var(--gradient-primary);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ------------------------------------------------------------------------
.card contenedor elevado. Variantes: --interactive
Tokens: --card-bg · var(--color-surface) --card-radius · var(--radius-lg)
--card-pad · var(--space-md) --card-shadow · var(--shadow-sm)
--card-shadow-hover · var(--shadow-md)
------------------------------------------------------------------------ */
.card {
padding: var(--card-pad, var(--space-md));
color: var(--color-text);
background-color: var(--card-bg, var(--color-surface));
border: var(--border-width) solid var(--color-border);
border-radius: var(--card-radius, var(--radius-lg));
box-shadow: var(--card-shadow, var(--shadow-sm));
}
.card--interactive {
transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.card--interactive:hover { box-shadow: var(--card-shadow-hover, var(--shadow-md)); transform: translateY(-2px); }
/* ------------------------------------------------------------------------
.glass superficie de cristal. Variantes: --strong
Tokens: --glass-radius · var(--radius-lg)
Funciona en tema claro y oscuro (los tokens --glass-* cambian por tema, ver 5.2).
------------------------------------------------------------------------ */
.glass {
background-color: var(--glass-bg);
border: var(--border-width) solid var(--glass-border);
border-radius: var(--glass-radius, var(--radius-lg));
box-shadow: var(--glass-shadow);
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur));
}
.glass--strong { background-color: var(--glass-bg-strong); }
/* ------------------------------------------------------------------------
.chamfer esquina cortada (estructural; superior-derecha e inferior-izquierda).
Variantes (solo reasignan --chamfer-size): --sm --lg
No dibuja línea: border no sigue a clip-path. Un componente concreto que
necesite contorno lo resuelve en su propia clase con --chamfer-line.
Con --chamfer-size: 0px no tiene efecto.
------------------------------------------------------------------------ */
.chamfer {
clip-path: polygon(
0 0,
calc(100% - var(--chamfer-size)) 0,
100% var(--chamfer-size),
100% 100%,
var(--chamfer-size) 100%,
0 calc(100% - var(--chamfer-size))
);
}
.chamfer--sm { --chamfer-size: var(--space-sm); }
.chamfer--lg { --chamfer-size: var(--space-lg); }
/* ------------------------------------------------------------------------
Formularios. .field (bloque) · .field__label .field__help .field__error
.input (control: input, select, textarea)
Tokens: --input-radius · var(--radius-md) --input-bg · var(--color-surface)
Estados: :hover :focus-visible :disabled [aria-invalid="true"]
------------------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.field__label { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--color-text); }
.field__help { font-size: var(--fs-small); color: var(--color-text-muted); }
.field__error { font-size: var(--fs-small); color: var(--color-error); }
.input {
width: 100%;
min-height: var(--control-height);
padding: var(--space-2xs) var(--space-sm);
color: var(--color-text);
background-color: var(--input-bg, var(--color-surface));
border: var(--border-width) solid var(--color-border);
border-radius: var(--input-radius, var(--radius-md));
transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
textarea.input { min-height: 8rem; resize: vertical; }
.input::placeholder { color: var(--color-text-muted); opacity: 1; }
.input:hover { border-color: var(--color-border-strong); }
.input:focus-visible {
outline: none;
border-color: var(--color-focus);
box-shadow: 0 0 0 var(--focus-width) color-mix(in srgb, var(--color-focus) 35%, transparent);
}
.input[aria-invalid="true"] { border-color: var(--color-error); }
.input[aria-invalid="true"]:focus-visible {
box-shadow: 0 0 0 var(--focus-width) color-mix(in srgb, var(--color-error) 35%, transparent);
}
.input:disabled {
color: var(--color-disabled-text);
background-color: var(--color-disabled-bg);
cursor: not-allowed;
}
/* ------------------------------------------------------------------------
PLANTILLA PARA UN COMPONENTE NUEVO (copiar, renombrar, borrar lo que sobre)
.alert {
padding: var(--alert-pad, var(--space-sm));
color: var(--alert-fg, var(--color-text));
background-color: var(--alert-bg, var(--color-info-soft));
border: var(--border-width) solid var(--alert-border, var(--color-info));
border-radius: var(--alert-radius, var(--radius-md));
}
.alert--error { --alert-bg: var(--color-error-soft); --alert-border: var(--color-error); }
------------------------------------------------------------------------ */
}
/* ==========================================================================
9. @layer utilities + accesibilidad
========================================================================== */
@layer utilities {
.u-visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.u-skip-link {
position: absolute; left: var(--space-sm); top: -4rem; z-index: var(--z-toast);
padding: var(--space-2xs) var(--space-sm);
color: var(--color-on-primary); background: var(--color-primary);
border-radius: var(--radius-sm);
}
.u-skip-link:focus { top: var(--space-sm); }
.u-text-center { text-align: center; }
.u-text-muted { color: var(--color-text-muted); }
.u-small { font-size: var(--fs-small); }
.u-lead { font-size: var(--fs-lead); line-height: var(--lh-snug); }
.u-display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.u-prose { line-height: var(--lh-relaxed); }
.u-caps { text-transform: uppercase; letter-spacing: var(--ls-wider); }
/* Visibilidad por breakpoint (0.4) */
@media (width < 48em) { .u-hide-below-md { display: none; } }
@media (width >= 48em) { .u-hide-from-md { display: none; } }
@media (width < 64em) { .u-hide-below-lg { display: none; } }
@media (width >= 64em) { .u-hide-from-lg { display: none; } }
}
/* ---- 9.2 MOVIMIENTO REDUCIDO -------------------------------------------
SIEMPRE activo: forma parte de la base y no se puede quitar del import.
Va en la primera capa y con !important para ganar a cualquier CSS del
proyecto (es la única excepción permitida de !important, ver 0.5).
Los carruseles o rotadores controlados por JS deben comprobar además
window.matchMedia("(prefers-reduced-motion: reduce)").matches.
----------------------------------------------------------------------- */
@layer reset {
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
}
/* ==========================================================================
A. APÉNDICE · MAPA DE NOMBRES ANTIGUOS → NUEVOS (migración)
==========================================================================
--color-oscuro / -marca / -blanco / -claro / -acento
→ --color-dark / -brand / -white / -light / -accent
--color-marca-suave → --color-primary-soft (derivado)
--color-oscuro-transparente,
--color-marca-rgb → color-mix(in srgb, var(--color-X) N%, transparent)
--color-fondo / -fondo-alt → --color-background / --color-background-alt
--color-texto / -titulo → --color-text / --color-heading
--color-enlace / -borde → --color-link / --color-border
--color-text-on-dark → (eliminado) --color-text dentro de .theme-space
--color-text-muted-on-dark → (eliminado) --color-text-muted dentro de .theme-space
--font-weight-* / --peso-* → --fw-*
--lh-heading / --lh-body → --lh-snug / --lh-normal
--ls-caps / --ls-heading → --ls-wider / --ls-tight
--radius-pill → --radius-full
--gradient-text → (eliminado) --gradient-primary
--ease → --ease-standard
--chaflan / --btn-chaflan → --chamfer-size
--chaflan-grosor / --btn-linea-grosor → --chamfer-line
.txt-blanco / .theme-dark → .theme-space (v3.3)
========================================================================== */
/* ───── ril/marca-ril.css ───── */
/* ==========================================================================
marca-ril.css — capa de marca rIL · v1.6 · 11/10/2026
v1.6 .u-subp (subpárrafo); tapa el pie (que se destapa al final);
sin línea clara entre dos bloques oscuros seguidos.
v1.5 .eyebrow con interlineado 1,2; saltos y contenido de un solo frame
(.u-br-mobile/-desktop, .u-only-mobile/-desktop); .u-expanded lee
--u-expanded-stretch (la sección decide su ancho en reposo).
v1.4 .text-gradient--x (degradado horizontal de «360°» y «BRILLAR»).
v1.3 botón con radio de 8 px y tallas con --fs-btn-* (tokens-ril.css
v1.3); .alert lee --radius-small. Los colores de marca (Figma:
#F6A700, #FBF9F4) solo viven en tokens-ril.css: aquí no hay hex.
v1.2 tallas del botón con la escala de rIL; .eyebrow pasa a tokens
(tokens-ril.css, OVERRIDES A); .alert lee --color-*-fill y
--alert-glyph-size.
v1.1 propuesta de .alert (PENDIENTE DE REVISIÓN).
Base de marca: común a todos los proyectos de rIL (web, Presupuestador).
Va justo DESPUÉS de base.css y ANTES de components/.
PARA QUÉ lo que la marca necesita y no se puede expresar solo con tokens:
mayúsculas y ancho condensado de los titulares, juegos
estilísticos de Mona Sans. Solo ajusta elementos y componentes
que ya existen en base.css; los componentes nuevos van en
components/ (.alert se mueve allí cuando se apruebe).
CÓMO sin capas nuevas: añade reglas a las capas que declara base.css
(base, components, utilities). Como se carga después, a igual
especificidad gana a base.css, y el CSS de componentes y de
página sigue pudiendo sobrescribirlo todo.
REGLA no lleva valores sueltos: solo lee tokens de tokens-ril.css
(salvo los glifos SVG y los fallbacks de tamaño de .alert).
PENDIENTE el bloque final (.alert) es una propuesta sin aprobar.
========================================================================== */
/* ---- base: tipografía de rIL (tokens-ril.css, tabla 3.7) ---------------- */
@layer base {
body {
font-feature-settings: var(--ril-font-features);
font-variation-settings: var(--ril-font-variations);
font-synthesis: none; /* fuente variable: nunca negritas ni cursivas falsas */
}
/* los controles no siempre heredan los ajustes de la fuente */
button, input, select, textarea {
font-feature-settings: inherit;
font-variation-settings: inherit;
}
/* titulares: 850, condensados al 77 % y en mayúsculas */
h1, h2, h3, h4 {
font-weight: var(--ril-fw-black);
font-stretch: var(--ril-stretch-condensed);
text-transform: uppercase;
}
h2, h3 { line-height: var(--lh-tight); }
/* anclas sin JS: el destino no queda bajo la cabecera fija (con JS lo
resuelve smooth-scroll.js) */
[id] { scroll-margin-top: var(--header-height); }
/* dos bloques oscuros seguidos: el borde entre ambos cae en medio píxel
(alturas fluidas) y el navegador deja ver una línea del fondo claro de
la página. El segundo extiende su fondo 1 px hacia arriba, por debajo
del primero, y la tapa. */
.theme-space + .theme-space { box-shadow: 0 -1px 0 0 var(--color-background); }
/* el contenido tapa el pie: el pie está siempre detrás (site-footer.css)
y el último bloque lo destapa al subir. main lleva fondo propio y
recorta lo que sobresale por abajo (soles), que si no flotaría sobre el pie */
#contenido {
position: relative;
z-index: 1;
/* fondo claro salvo los 2 últimos px, que pone el último bloque con su
propio fondo: el borde inferior cae en medio píxel y, si no, se
vería una línea clara sobre el pie */
background: linear-gradient(var(--color-background), var(--color-background)) top / 100% calc(100% - 2px) no-repeat;
overflow-y: clip;
/* también por debajo de la cabecera (que no tiene fondo): si no, en lo
alto de la página se vería el pie a través de ella */
margin-top: calc(-1 * var(--header-height));
padding-top: var(--header-height);
}
#contenido > :last-child { background-color: var(--color-background); }
/* los bloques se pintan sobre el sol de fondo (.aura, fijo): los claros lo
dejan ver (sin fondo); los oscuros lo tapan con el suyo */
#contenido > :not(.aura) { position: relative; }
/* h5 y h6: etiqueta pequeña en mayúsculas (rol h5 del Presupuestador) */
h5, h6 {
font-size: var(--fs-h5);
font-weight: var(--fw-regular);
font-stretch: var(--ril-stretch-condensed);
line-height: var(--lh-tight);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
}
}
/* ---- components: ajustes de marca de los componentes de base.css ------- */
@layer components {
/* .btn radio de 8 px y mayúsculas (tokens en tokens-ril.css, OVERRIDES).
El círculo amarillo con flecha del Presupuestador será .btn__icon,
cuando se defina el componente con Figma. */
.ril-btn { text-transform: uppercase; }
/* .eyebrow interlineado de Figma (1,2) y color del texto */
.eyebrow { line-height: var(--lh-label); }
/* .btn--secondary contorno del color del texto; al pasar por encima se
rellena de amarillo, como el botón principal. */
.btn--secondary {
--btn-bg: transparent;
--btn-fg: var(--color-text);
--btn-border: var(--color-text);
--btn-bg-hover: var(--color-primary);
--btn-fg-hover: var(--color-on-primary);
--btn-border-hover: var(--color-primary);
}
/* tallas: base.css las calcula con su propia escala (--fs-small,
--fs-lead); rIL usa los tamaños de botón de tokens-ril.css (3.5):
normal --fs-btn-small (= h4): «Ver más», «Conócenos»
sm misma letra, menos alto (36 px) y menos aire
lg un paso más: --fs-btn-cta (= h3), 56 px de alto · revisar con Figma
El enlace con forma de titular («OPAL DENTAL STUDIO», --fs-btn-large)
no es un .btn: lo resuelve su componente.
.btn--caps no hace falta en rIL (todos los botones van en mayúsculas):
se neutraliza para que no cambie el tamaño. */
.btn--sm { --btn-fs: var(--fs-btn-small); }
.btn--lg { --btn-fs: var(--fs-btn-cta); }
.btn--caps { --btn-fs: var(--fs-btn-small); }
}
/* ---- utilities: estilos de texto de rIL sin elemento propio ------------ */
@layer utilities {
/* .u-display titular de portada (completa la utilidad de base.css) */
.u-display {
font-weight: var(--ril-fw-black);
font-stretch: var(--ril-stretch-condensed);
text-transform: uppercase;
}
/* .u-stat cifra grande: «+10 años», «50 %». Nunca se anima si es un
precio o un porcentaje. */
.u-stat {
font-size: var(--fs-stat);
font-weight: var(--ril-fw-black);
font-stretch: var(--ril-stretch-condensed);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
font-variant-numeric: lining-nums;
}
/* .u-lead entradilla: en rIL respira más que en la plantilla */
.u-lead { line-height: var(--lh-normal); }
/* .u-brand el nombre «rIL» tal cual (r minúscula, IL mayúsculas), también
dentro de titulares en mayúsculas. Lo pone el filtro marks */
.u-brand { text-transform: none; }
/* .u-subp subpárrafo: texto secundario que amplía un párrafo anterior
(p. ej. el desplegable de herramientas bajo su intro). Un paso menor
que el cuerpo (--fs-subp: 15 en móvil, 16 en escritorio) y en el color
del texto al 72 % (pesa menos). */
.u-subp { font-size: var(--fs-subp); line-height: var(--lh-normal); color: color-mix(in srgb, currentColor 72%, transparent); }
/* .u-expanded letra ancha dentro de un titular (una por palabra, dos
como máximo). Como en el Presupuestador: en reposo está ancha (110 %);
donde se anima, parte estrecha (75 %) y se ensancha en 1,8 s cuando su
bloque entra en pantalla, desplazando el resto de la línea. La dispara
un ancestro: .u-expanded--play (al cargar) o [data-reveal="in"]
(reveal.js, al entrar en pantalla). */
.u-expanded { font-stretch: var(--u-expanded-stretch, var(--ril-stretch-expanded)); }
:is(.u-expanded--play, [data-reveal]) .u-expanded { font-stretch: var(--u-expanded-from, var(--ril-stretch-expanded-from)); }
:is(.u-expanded--play, [data-reveal="in"]) .u-expanded {
animation: u-expanded-stretch var(--u-expanded-dur, 1.8s) var(--ease-in-out) var(--u-expanded-delay, 0.25s) forwards;
}
@keyframes u-expanded-stretch {
from { font-stretch: var(--u-expanded-from, var(--ril-stretch-expanded-from)); }
to { font-stretch: var(--u-expanded-stretch, var(--ril-stretch-expanded)); }
}
@media (prefers-reduced-motion: reduce) {
:is(.u-expanded--play, [data-reveal]) .u-expanded { animation: none; font-stretch: var(--u-expanded-stretch, var(--ril-stretch-expanded)); }
}
/* saltos de línea de un solo frame (marcas | y ^ en los datos) */
@media (width >= 48em) { .u-br-mobile { display: none; } }
@media (width < 48em) { .u-br-desktop { display: none; } }
/* contenido de un solo frame (Figma cambia textos entre móvil y escritorio) */
@media (width >= 48em) { .u-only-mobile { display: none; } }
@media (width < 48em) { .u-only-desktop { display: none; } }
}
/* ---- components: variantes de marca de componentes de base.css --------- */
@layer components {
/* .text-gradient--x degradado de marca en horizontal (Figma: «360°» y
«BRILLAR», de un amarillo muy claro a Amarillo Solar). Reasigna el token
en el propio elemento. La primera parada mezcla un 25 % de amarillo en
la crema para que se lea también sobre fondo crema. */
.text-gradient--x {
--gradient-primary: linear-gradient(90deg, color-mix(in srgb, var(--gradient-to) 25%, var(--gradient-from)), var(--gradient-to));
}
}
/* ==========================================================================
PENDIENTE DE REVISIÓN · propuesta del 09/10/2026
Estados de feedback: correcto, aviso, error e información.
No está aprobado: no usar en producción hasta que el equipo lo valide.
========================================================================== */
@layer components {
/* ------------------------------------------------------------------------
COMPONENTE: .alert PENDIENTE DE REVISIÓN
Mensaje de estado. Sigue la marca aprobada:
- caja sobria: superficie del tema, filete de 1 px y radio de 8 px,
sin fondos tintados ni sombras;
- el estado lo marca un círculo de 30 px con su glifo, el mismo
recurso que el círculo amarillo de los botones;
- título como los de la marca (850, condensado, mayúsculas) en el
color de texto del estado; el texto sigue en el color del texto;
- el color nunca es la única pista: cada estado tiene su glifo
(✓ correcto, ! aviso, × error, i información) y su título.
- el naranja solo aparece en los avisos y el amarillo, en la
información.
Elementos: .alert__icon .alert__body .alert__title .alert__text
Variantes: --success --warning --error --info
Estructural: --inline (sin caja, icono pequeño; mensajes bajo un campo)
API (token · fallback):
--alert-bg · var(--color-surface) --alert-border · var(--color-border)
--alert-radius · var(--radius-small) --alert-pad · var(--space-md)
--alert-icon-size · 1.875rem --alert-title · var(--color-text)
--alert-glyph-size · 55% glifo dentro del círculo
--alert-accent · var(--color-text) relleno del círculo
--alert-on-accent · var(--color-background) color del glifo
--alert-glyph · glifo «i» máscara SVG del glifo
Contraste: títulos ≥ 4,5:1 sobre la superficie de los tres temas;
glifos ≥ 4,7:1 sobre su círculo. El círculo amarillo de información
no llega a 3:1 sobre blanco: lo sostiene el glifo negro (10,4:1).
Accesibilidad: role="status" para correcto e información; role="alert"
solo para errores o avisos que interrumpen. Icono con aria-hidden="true".
HTML:
Falta un dato
Indicad la fecha del evento para cerrar el presupuesto.
------------------------------------------------------------------------ */
.ril-alert {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--space-sm);
align-items: start;
padding: var(--alert-pad, var(--space-md));
color: var(--color-text);
background-color: var(--alert-bg, var(--color-surface));
border: var(--border-width) solid var(--alert-border, var(--color-border));
border-radius: var(--alert-radius, var(--radius-small));
}
.alert__icon {
display: grid;
place-items: center;
width: var(--alert-icon-size, 1.875rem);
aspect-ratio: 1;
border-radius: var(--radius-full);
background-color: var(--alert-accent, var(--color-text));
}
.alert__icon::before {
content: "";
width: var(--alert-glyph-size, 55%);
aspect-ratio: 1;
background-color: var(--alert-on-accent, var(--color-background));
-webkit-mask: var(--alert-glyph, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='3.6' r='1.1' fill='black' stroke='none'/%3E%3Cpath d='M8 6.8v6'/%3E%3C/svg%3E")) center / contain no-repeat;
mask: var(--alert-glyph, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='3.6' r='1.1' fill='black' stroke='none'/%3E%3Cpath d='M8 6.8v6'/%3E%3C/svg%3E")) center / contain no-repeat;
}
/* el título se centra con el círculo */
.alert__body { padding-top: calc((var(--alert-icon-size, 1.875rem) - var(--fs-h4) * var(--lh-tight)) / 2); }
.alert__title {
font-size: var(--fs-h4);
font-weight: var(--ril-fw-black);
font-stretch: var(--ril-stretch-condensed);
line-height: var(--lh-tight);
text-transform: uppercase;
color: var(--alert-title, var(--color-text));
}
.alert__text { font-size: var(--fs-small); line-height: var(--lh-normal); }
.alert__title + .alert__text { margin-top: var(--space-2xs); }
.alert--success {
--alert-accent: var(--color-success-fill); --alert-on-accent: var(--color-surface);
--alert-title: var(--color-success);
--alert-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
.alert--warning {
--alert-accent: var(--color-warning-fill); --alert-on-accent: var(--color-dark);
--alert-title: var(--color-warning);
--alert-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3.2v6'/%3E%3Ccircle cx='8' cy='12.4' r='1.1' fill='black' stroke='none'/%3E%3C/svg%3E");
}
.alert--error {
--alert-accent: var(--color-error-fill); --alert-on-accent: var(--color-surface);
--alert-title: var(--color-error);
--alert-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E");
}
.alert--info {
--alert-accent: var(--color-info-fill); --alert-on-accent: var(--color-dark);
--alert-title: var(--color-text);
--alert-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='3.6' r='1.1' fill='black' stroke='none'/%3E%3Cpath d='M8 6.8v6'/%3E%3C/svg%3E");
}
/* estructural: sin caja, icono de 20 px y texto alineado con él */
.alert--inline {
--alert-bg: transparent; --alert-border: transparent; --alert-pad: 0;
--alert-icon-size: 1.25rem;
column-gap: var(--space-2xs);
align-items: center;
}
.alert--inline .alert__body { padding-top: 0; }
}
/* proyecto */
/* ───── components/_index.css ───── */
/* ==========================================================================
components/ — un archivo por componente nuevo · @layer components
Qué es un componente: un bloque BEM que se pinta igual esté donde esté.
No lleva márgenes externos ni posición en la retícula (eso es de sections/).
Plantilla: _plantilla.css (copiar, renombrar, sumar aquí una línea).
Los componentes que ya da base.css (.btn, .card, .pill, .eyebrow…) NO
se repiten aquí: se ajustan con tokens o en marca-ril.css.
========================================================================== */
/* ───── components/icon.css ───── */
/* ==========================================================================
COMPONENTES: .icon · .logo v1.0 · 09/10/2026
.icon icono de 1em; los de línea (flechas) usan trazo en currentColor.
API: --icon-size · 1em --icon-stroke · 2.5 (unidades del viewBox de 24)
.logo logotipo de rIL; letras en currentColor, punto en --color-brand.
API: --logo-h · 1em (alto; el ancho sale de la proporción 2:1)
Vistas: components/ril/icon.njk · components/ril/logo.njk
========================================================================== */
@layer components {
.icon {
display: inline-block;
flex: none;
width: var(--icon-size, 1em);
height: var(--icon-size, 1em);
fill: currentColor;
vertical-align: middle;
}
.icon--line {
fill: none;
stroke: currentColor;
stroke-width: var(--icon-stroke, 2.5);
stroke-linejoin: round;
}
.logo {
display: block;
height: var(--logo-h, 1em);
width: auto;
aspect-ratio: 2 / 1;
}
.logo__dot { fill: var(--color-brand); }
}
/* ───── components/tag.css ───── */
/* ==========================================================================
COMPONENTE: .tag v1.0 · 09/10/2026
Figma: «Frame 274…299» dentro de menu-servicios (6281:2145); también
en el hero (FOTOGRAFÍA, VÍDEO…) y en los proyectos.
Qué hace: etiqueta amarilla con texto de titular (850, condensado,
mayúsculas). Distinta de .pill (base.css), que es texto normal
sobre tinte suave.
API (token · fallback):
--tag-bg · var(--color-primary) --tag-fg · var(--color-on-primary)
--tag-fs · var(--fs-h3) --tag-radius · var(--radius-small)
--tag-pad-y · var(--space-3xs) --tag-pad-x · var(--space-sm)
Vista: resources/views/components/ril/tag.njk (o la clase en un
)
========================================================================== */
@layer components {
.tag {
display: inline-block;
padding: var(--tag-pad-y, var(--space-3xs)) var(--tag-pad-x, var(--space-sm));
font-size: var(--tag-fs, var(--fs-h3));
font-weight: var(--ril-fw-black);
font-stretch: var(--ril-stretch-condensed);
line-height: var(--lh-tight);
text-transform: uppercase;
white-space: nowrap;
color: var(--tag-fg, var(--color-on-primary));
background-color: var(--tag-bg, var(--color-primary));
border-radius: var(--tag-radius, var(--radius-small));
}
}
/* ───── components/link-more.css ───── */
/* ==========================================================================
COMPONENTE: .link-more v1.1 · 11/10/2026
Figma: «Frame 205» (VER MÁS) y «Frame 305» (CONÓCENOS).
Qué hace: enlace de llamada en mayúsculas con flecha y filete inferior.
Al pasar el puntero, la flecha avanza, el filete se alarga y
aparece una etiqueta amarilla ladeada (opcional) encima.
Elementos: __label __icon __tag (usa .tag)
API (token · fallback):
--link-more-fs · var(--fs-btn-small) --link-more-gap · 0.92em (Figma: 18,4 a 20 px)
--link-more-line · 1.5px (Figma: trazo de 1,5 bajo texto y flecha, 8 px por debajo)
--link-more-tag-gap · var(--space-2xs) (separación de la etiqueta amarilla sobre el enlace)
Estados: :hover :focus-visible
Vista: components/ril/link-more.njk
========================================================================== */
@layer components {
.link-more {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--link-more-gap, 0.92em);
padding-bottom: 0.4em;
font-size: var(--link-more-fs, var(--fs-btn-small));
font-weight: var(--fw-regular);
font-stretch: var(--ril-stretch-cta);
line-height: var(--lh-label);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
text-decoration: none;
color: inherit;
background: linear-gradient(currentColor, currentColor) left bottom / 100% var(--link-more-line, 1.5px) no-repeat;
transition: background-size var(--dur-base) var(--ease-standard);
}
.link-more__icon {
--icon-size: 0.875em;
transition: transform var(--dur-base) var(--ease-standard);
}
.link-more__tag {
position: absolute;
left: -2.5em;
bottom: 100%;
margin-bottom: var(--link-more-tag-gap, var(--space-2xs));
opacity: 0;
transform: rotate(-8deg) scale(0.6);
transform-origin: bottom left;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.link-more:is(:hover, :focus-visible) { background-size: 100% var(--link-more-line, 1.5px); }
.link-more:is(:hover, :focus-visible) .link-more__icon { transform: translateX(0.4em); }
.link-more:is(:hover, :focus-visible) .link-more__tag { opacity: 1; transform: rotate(-8deg) scale(1); }
@media (prefers-reduced-motion: reduce) {
.link-more, .link-more__icon, .link-more__tag { transition-property: opacity; }
.link-more:is(:hover, :focus-visible) .link-more__icon { transform: none; }
}
}
/* ───── components/media.css ───── */
/* ==========================================================================
COMPONENTE: .media v1.0 · 09/10/2026
Figma: «rIL web [desktop] 1» (hero) y «[desktop] 2» (Así trabajamos):
vídeos. Hasta recibirlos, se muestra su fotograma de Figma.
Qué hace: imagen o vídeo (autoplay, muted, loop, playsinline) con
proporción fija (sin saltos de maquetación) y radio.
Variantes: --bleed sin radio (a sangre)
API (token · fallback):
--media-ratio · proporción de los datos (width/height → --media-ratio-data) · 16 / 9
(una sección la cambia por frame: Figma usa otra proporción en móvil)
--media-radius · var(--radius-small)
Vista: components/ril/media.njk
========================================================================== */
@layer components {
.ril-media {
position: relative;
margin: 0;
aspect-ratio: var(--media-ratio, var(--media-ratio-data, 16 / 9));
overflow: hidden;
border-radius: var(--media-radius, var(--radius-small));
background-color: var(--color-background-alt);
}
.media__el {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.media--bleed { --media-radius: 0; }
}
/* ───── components/carousel-fade.css ───── */
/* ==========================================================================
COMPONENTE: .carousel-fade v1.0 · 09/10/2026
Figma: «Frame 315» y «Frame 316» del hero: tres imágenes que se
suceden solas con fundido (2 s visibles + 0,83 s de fundido).
Qué hace: pila de imágenes del mismo tamaño; el módulo JS
(data-module="carousel-fade") marca la visible con
data-state="active". Sin JS o con reduced motion: solo la primera.
API (token · fallback):
--carousel-w · 16rem ancho (el alto sale de --carousel-ratio)
--carousel-ratio · 253 / 156 proporción de Figma
--carousel-radius · var(--radius-small)
Vista: components/ril/carousel-fade.njk · JS: modules/carousel-fade.js
========================================================================== */
@layer components {
.carousel-fade {
position: relative;
display: inline-block;
width: var(--carousel-w, 16rem);
aspect-ratio: var(--carousel-ratio, 253 / 156);
overflow: hidden;
border-radius: var(--carousel-radius, var(--radius-small));
vertical-align: middle;
}
.carousel-fade__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity var(--dur-slow) var(--ease-in-out);
}
.carousel-fade__img:first-child,
.carousel-fade[data-state="ready"] .carousel-fade__img[data-state="active"] { opacity: 1; }
.carousel-fade[data-state="ready"] .carousel-fade__img:not([data-state="active"]) { opacity: 0; }
}
/* ───── components/sun.css ───── */
/* ==========================================================================
COMPONENTE: .sun v1.0 · 09/10/2026
Figma: «Ellipse 1-4, 95, 96»: elipses con degradado de Amarillo Solar
(100 % → 10 %) y desenfoque de capa de 200.
Qué hace: mancha de sol decorativa. Se coloca respecto a su sección
(que debe ser position: relative y recortar con overflow: clip).
Posición, tamaño y giro llegan como datos: --x --y --w --h
(en % del ancho de la sección) y --r (grados de Figma).
API (token · fallback):
--sun-from · var(--ril-sun-color) --sun-to · var(--ril-sun-color-soft)
--sun-blur · var(--ril-sun-blur) --sun-z · var(--z-base) (capa)
Rendimiento: desenfoque costoso (ver memoria de accesibilidad/rendimiento):
will-change y aislamiento; pendiente pasar a imagen pre-desenfocada.
Vista: components/ril/sun.njk
========================================================================== */
/* anfitrión: la sección que lleva soles (estructural). Los soles van
primero en el HTML; el contenido, después y en position: relative,
se pinta encima sin z-index. En la capa base y sin especificidad
(:where) para que la sección pueda posicionar sus hijos a su manera. */
@layer base {
:where(.sun-host) {
position: relative;
isolation: isolate;
overflow-x: clip;
container-type: inline-size;
}
:where(.sun-host) > :where(:not(.sun)) { position: relative; }
}
@layer components {
.sun {
position: absolute;
left: calc(var(--x) * 1cqi);
top: calc(var(--y) * 1cqi);
width: calc(var(--w) * 1cqi);
height: calc(var(--h) * 1cqi);
z-index: var(--sun-z, var(--z-base));
border-radius: 50%;
background: linear-gradient(90deg, var(--sun-from, var(--ril-sun-color)), var(--sun-to, var(--ril-sun-color-soft)));
filter: blur(var(--sun-blur, var(--ril-sun-blur)));
transform: rotate(calc(var(--r, 0) * -1deg));
pointer-events: none;
will-change: transform;
}
/* soles propios de un frame (Figma dibuja soles distintos en móvil) */
@media (width < 48em) { .sun--desktop { display: none; } }
@media (width >= 48em) { .sun--mobile { display: none; } }
}
/* ───── components/aura.css ───── */
/* ==========================================================================
COMPONENTE: .aura v1.0 · 12/10/2026
Origen: el sol de fondo del Presupuestador (rIL 1.0): «sigue la
sección, el scroll y el cursor, y cambia de forma».
Qué hace: tres manchas de luz amarilla, fijas a la pantalla, detrás del
contenido. Recorren las secciones claras (cada una marca dos
puntos de paso con data-aura="x y escala") y, con el scroll,
giran y se deforman; siguen un poco al cursor. Los bloques
oscuros las tapan (tienen fondo propio) y el pie no las ve
(se recortan donde acaba ).
Elementos: .aura > b × 3 (grande, media, núcleo)
API (token · fallback):
--aura-color · var(--ril-sun-color) --aura-light · var(--ril-glow-cream)
Sin JS / reduced motion: quietas en el primer punto de paso.
Vista: layouts/app.njk (primer hijo de ) · JS: modules/aura.js
========================================================================== */
@layer components {
.aura {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.aura b {
position: absolute;
left: 0;
top: 0;
border-radius: 50%;
will-change: transform;
transform: translate3d(90vw, 30vh, 0);
}
.aura b:nth-child(1) {
width: 76vmax; height: 76vmax; margin: -38vmax;
background: radial-gradient(closest-side,
color-mix(in srgb, var(--aura-color, var(--ril-sun-color)) 72%, transparent),
color-mix(in srgb, var(--aura-color, var(--ril-sun-color)) 34%, transparent) 40%,
color-mix(in srgb, var(--aura-color, var(--ril-sun-color)) 8%, transparent) 70%,
transparent);
}
.aura b:nth-child(2) {
width: 48vmax; height: 48vmax; margin: -24vmax;
background: radial-gradient(closest-side, color-mix(in srgb, var(--aura-light, var(--ril-glow-cream)) 62%, transparent), transparent);
}
.aura b:nth-child(3) {
width: 26vmax; height: 26vmax; margin: -13vmax;
background: radial-gradient(closest-side, color-mix(in srgb, var(--aura-color, var(--ril-sun-color)) 45%, transparent), transparent);
}
}
/* ───── components/marquee.css ───── */
/* ==========================================================================
COMPONENTE: .marquee v1.0 · 09/10/2026
Figma: «PROYECTOS PROYECTOS» y las dos filas de logos de clientes.
Figma los dibuja quietos; el desplazamiento continuo es la
propuesta aceptada.
Qué hace: cinta que se desplaza sin fin. La vista repite el contenido
dos veces (la copia lleva aria-hidden) y la cinta se mueve la
mitad de su ancho.
Variantes: --reverse hacia la derecha
--pausable se detiene al pasar el puntero (logos de clientes);
sin ella, no se para nunca (cinta PROYECTOS)
API (token · fallback):
--marquee-dur · 40s --marquee-gap · var(--space-lg)
Movimiento: con reduced motion, quieta.
Vista: components/ril/marquee.njk
========================================================================== */
@layer components {
.ril-marquee {
overflow: hidden;
/* sin máscara de color: los bordes los da la propia sección */
}
.marquee__track {
display: flex;
width: max-content;
gap: var(--marquee-gap, var(--space-lg));
animation: marquee var(--marquee-dur, 40s) linear infinite;
}
.marquee__group {
display: flex;
flex: none;
align-items: center;
gap: var(--marquee-gap, var(--space-lg));
margin: 0;
padding: 0;
list-style: none;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee--pausable:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
to { transform: translateX(calc(-50% - var(--marquee-gap, var(--space-lg)) / 2)); }
}
@media (prefers-reduced-motion: reduce) {
.marquee__track { animation: none; }
}
}
/* ───── components/menu-servicios.css ───── */
/* ==========================================================================
COMPONENTE: .menu-servicios v1.3 · 11/10/2026
Figma: «servicios-component» (6281:2145, página FINAL): variante por
defecto + una por palabra al pasar el ratón, con Smart Animate
«Quick» (muelle, 0,744 s → --ril-dur-quick / --ril-ease-quick).
Qué hace: lista de servicios en palabras gigantes. Al activar una palabra
aparecen, como en Figma:
· su rótulo (GRÁFICO, PRODUCCIÓN…): el texto sube desde abajo
dentro de su caja (GRÁFICO, además, sube 8 px);
· tres etiquetas: pasan de su posición de reposo a la final
girando, se despliegan de arriba abajo (11 → 47 px) y se
funden de 0 a 1;
· una imagen que se abre desde su línea central, a un lado
de la palabra y a una distancia propia de su letra más
próxima (datos: side, gap), para no pisarla nunca.
El rótulo va junto a la palabra (a su izquierda o derecha) con
la misma separación en los cuatro casos (0,5 em del rótulo).
Escritorio: se activa al pasar el ratón o con el foco.
Móvil: se activa con el scroll (modules/menu-servicios.js), con una
línea en la mitad de la pantalla:
la palabra que la contiene está activa. Palabras inactivas al
20 %; PRODUCCIÓN encima de AUDIOVISUAL y DIGITAL debajo de
MARKETING, a su izquierda. Bajo las palabras, una imagen
(__preview) que cambia con la palabra activa (se abre desde el
centro sobre la anterior); antes de la primera, vacía; tras la
última, la de reserva.
«VER MÁS» (botón amarillo ladeado) al final del bloque.
Elementos: __stage __item __head __word __label __label-text __layer
__tags __tag __media __preview __preview-img __more-wrap __more
Variantes: __label--left / --right · __label--m-above / --m-below (móvil)
__media--left / --right · __preview-img--fallback
API (token · fallback):
--menu-servicios-fs · var(--fs-menu) tamaño de las palabras
ESCALA Todo se mide respecto a las palabras: el escenario mide lo que
el frame de Figma (910 px) en proporción a la letra de 189 px,
y etiquetas e imágenes se colocan en unidades del escenario
(cqi). Así, al escalar el token, escala el conjunto.
Coordenadas: resources/data/home.json (datos, no estilo).
Constantes de Figma (estructurales, no son de marca):
--ms-frame 910 · --ms-word 189 · --ms-pad 70 · --ms-row 150 · --ms-gap 16
rótulo 18 px · etiqueta 28 px (en móvil 18,81 a 73,7), 47 px de alto,
plegada a 11 en reposo
Estados: escritorio :hover / :focus-within · móvil [data-active]
Movimiento: con reduced motion solo cambia la opacidad.
Vista: resources/views/components/ril/menu-servicios.njk
========================================================================== */
@layer components {
.ril-menu-servicios {
--ms-frame: 1440;
--ms-word: 189;
--ms-pad: 70;
--ms-row: 150;
--ms-gap: 16;
--ms-dur: var(--ril-dur-quick);
--ms-ease: var(--ril-ease-quick);
overflow-x: clip; /* las imágenes salen del escenario */
font-size: var(--menu-servicios-fs, var(--fs-menu));
}
.menu-servicios__stage {
container-type: inline-size;
position: relative;
isolation: isolate;
display: grid;
gap: calc(var(--ms-gap) / var(--ms-word) * 1em);
width: calc(var(--ms-frame) / var(--ms-word) * 1em);
max-width: 100%;
margin: 0 auto;
padding: calc(var(--ms-pad) / var(--ms-word) * 1em) 0 0;
list-style: none;
text-align: center;
line-height: calc(var(--ms-row) / var(--ms-word));
}
.menu-servicios__item { position: relative; }
.menu-servicios__head { position: relative; display: inline-block; }
.menu-servicios__word {
display: inline-block;
font-weight: var(--ril-fw-black);
font-stretch: var(--ril-stretch-condensed);
text-transform: uppercase;
color: inherit;
text-decoration: none;
transition: color var(--ms-dur) var(--ms-ease);
}
/* rótulo: caja que recorta el texto; el texto sube desde abajo */
.menu-servicios__label {
position: absolute;
top: calc(var(--y) * 100cqi / var(--ms-frame));
overflow: hidden;
font-size: calc(18 / var(--ms-word) * 1em);
font-weight: var(--fw-regular);
font-stretch: var(--ril-stretch-label);
line-height: var(--lh-label);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
translate: 0 calc(var(--from, 0) * 100cqi / var(--ms-frame));
transition: translate var(--ms-dur) var(--ms-ease);
}
.menu-servicios__label--right { left: calc(100% + 0.5em); }
.menu-servicios__label--left { right: calc(100% + 0.5em); }
.menu-servicios__label-text {
display: block;
translate: 0 105%;
transition: translate var(--ms-dur) var(--ms-ease);
}
.menu-servicios__layer {
position: absolute;
inset-inline: 0;
top: 0;
text-align: start;
line-height: var(--lh-normal);
}
.menu-servicios__tags { margin: 0; padding: 0; list-style: none; }
.menu-servicios__tag { left: calc(var(--x) * 100cqi / var(--ms-frame)); }
.menu-servicios__media--right { left: calc(100% + var(--gap) * 100cqi / var(--ms-frame)); }
.menu-servicios__media--left { right: calc(100% + var(--gap) * 100cqi / var(--ms-frame)); }
.menu-servicios__tag,
.menu-servicios__media {
position: absolute;
top: calc(var(--y) * 100cqi / var(--ms-frame));
opacity: 0;
pointer-events: none;
transition:
opacity var(--ms-dur) var(--ms-ease),
transform var(--ms-dur) var(--ms-ease),
clip-path var(--ms-dur) var(--ms-ease);
}
/* etiqueta en reposo: posición y giro de la variante Default de Figma,
plegada a 11 de sus 47 px (se despliega de arriba abajo) */
.menu-servicios__tag {
--tag-fs: calc(28 / var(--ms-word) * 1em);
--tag-pad-y: 0.24em;
--tag-pad-x: 0.643em;
font-size: var(--tag-fs);
line-height: var(--lh-label);
transform-origin: top left;
transform:
translate(calc(var(--fx) * 100cqi / var(--ms-frame)), calc(var(--fy) * 100cqi / var(--ms-frame)))
rotate(calc(var(--fr) * -1deg)); /* Figma gira al revés que CSS */
clip-path: inset(0 0 76.6% 0);
}
.menu-servicios__media {
width: calc(324 * 100cqi / var(--ms-frame));
height: auto;
aspect-ratio: 324 / 210;
object-fit: cover;
border-radius: var(--radius-small);
clip-path: inset(50% 0 round var(--radius-small)); /* se abre desde la línea central */
}
.menu-servicios__preview,
.menu-servicios__more-wrap { display: none; }
/* ---- escritorio: activo al pasar el ratón o con el foco -------------- */
@media (width >= 48em) {
.menu-servicios__item:is([data-active], :focus-within, :has(.menu-servicios__word:hover, .menu-servicios__tag:hover, .menu-servicios__media:hover)) {
z-index: var(--z-dropdown);
}
.menu-servicios__item:is([data-active], :focus-within, :has(.menu-servicios__word:hover, .menu-servicios__tag:hover, .menu-servicios__media:hover)) :is(.menu-servicios__tag, .menu-servicios__media) {
opacity: 1;
pointer-events: auto;
}
.menu-servicios__item:is([data-active], :focus-within, :has(.menu-servicios__word:hover, .menu-servicios__tag:hover, .menu-servicios__media:hover)) .menu-servicios__tag {
transform: translate(0, 0) rotate(calc(var(--r) * -1deg));
clip-path: inset(0);
}
.menu-servicios__item:is([data-active], :focus-within, :has(.menu-servicios__word:hover, .menu-servicios__tag:hover, .menu-servicios__media:hover)) .menu-servicios__media {
clip-path: inset(0 round var(--radius-small));
}
.menu-servicios__item:is([data-active], :focus-within, :has(.menu-servicios__word:hover, .menu-servicios__tag:hover, .menu-servicios__media:hover)) :is(.menu-servicios__label, .menu-servicios__label-text) {
translate: 0 0;
}
}
/* ---- móvil: activo con el scroll ([data-active], JS) ----------------- */
@media (width < 48em) {
.menu-servicios__word { color: color-mix(in srgb, currentColor 20%, transparent); }
.menu-servicios__media { display: none; }
/* rótulos legibles (14 px a 74) y, si no caben al lado, encima o debajo */
.menu-servicios__label { font-size: calc(14 / 73.7 * 1em); }
.menu-servicios__label--m-above { top: auto; bottom: 100%; left: 0; right: auto; }
.menu-servicios__label--m-below { top: 100%; left: 0; right: auto; }
.menu-servicios__tag {
--tag-fs: calc(18.81 / 73.7 * 1em);
left: calc(var(--mx, var(--x)) * 100cqi / var(--ms-frame));
top: calc(var(--my, var(--y)) * 100cqi / var(--ms-frame));
}
.menu-servicios__item[data-active] { z-index: var(--z-dropdown); }
.menu-servicios__item[data-active] .menu-servicios__word { color: inherit; }
.menu-servicios__item[data-active] .menu-servicios__tag {
opacity: 1;
transform: translate(0, 0) rotate(calc(var(--mr, var(--r)) * -1deg));
clip-path: inset(0);
}
.menu-servicios__item[data-active] :is(.menu-servicios__label, .menu-servicios__label-text) { translate: 0 0; }
/* imagen del servicio activo: la nueva se abre desde su línea central
sobre la anterior, que se queda debajo hasta que la tapa */
.menu-servicios__preview {
display: grid;
margin-top: var(--space-xl);
font-size: 1rem;
aspect-ratio: 648 / 420;
overflow: hidden;
border-radius: var(--radius-small);
}
.menu-servicios__preview-img {
grid-area: 1 / 1;
width: 100%;
height: 100%;
object-fit: cover;
clip-path: inset(50% 0);
transition: clip-path var(--ms-dur) var(--ms-ease);
}
.menu-servicios__preview-img[data-on] { z-index: 2; clip-path: inset(0); }
.menu-servicios__preview-img[data-was] { z-index: 1; clip-path: inset(0); transition: none; }
/* botón amarillo ladeado (-2°) al final del bloque */
.menu-servicios__more-wrap {
display: block;
margin-top: var(--space-xl);
font-size: 1rem;
text-align: center;
}
.menu-servicios__more {
--tag-fs: var(--fs-btn-tag);
--tag-pad-y: 0.41em; /* Figma: 41,5 px de alto con letra de 24 */
--tag-pad-x: 1.17em;
display: inline-flex;
align-items: center;
gap: 0.5em;
rotate: -2deg;
text-decoration: none;
}
.menu-servicios__more .icon { --icon-size: 0.8em; --icon-stroke: 3; }
}
@media (prefers-reduced-motion: reduce) {
.menu-servicios__label,
.menu-servicios__label-text,
.menu-servicios__tag,
.menu-servicios__media { transition: opacity var(--dur-fast) linear; }
.menu-servicios__label, .menu-servicios__label-text { translate: none; }
.menu-servicios__label-text { opacity: 0; }
.menu-servicios__item:is([data-active], :focus-within, :hover) .menu-servicios__label-text { opacity: 1; }
.menu-servicios__tag { transform: rotate(calc(var(--r) * -1deg)); clip-path: none; }
.menu-servicios__media { clip-path: inset(0 round var(--radius-small)); }
.menu-servicios__preview-img { transition: none; }
}
}
/* ───── components/project-card.css ───── */
/* ==========================================================================
COMPONENTE: .project-card v1.1 · 11/10/2026
Figma: «Component 13/14/15» (Opal, FLM, Hawaya), sobre fondo oscuro.
Qué hace: imagen + título-enlace con flecha + texto. Toda la tarjeta es
clicable (el enlace del título se extiende con ::after).
Al pasar el puntero: la imagen cambia (si hay imagen de hover)
o se acerca y las etiquetas de
servicio suben sobre la imagen; la flecha gira 45° (horaria) hasta
quedar horizontal.
Elementos: __media __img __img--hover __tags __body __title __link __icon __text
API (token · fallback):
--project-ratio · proporción de los datos (--project-ratio-data) · 812 / 513
(la sección la cambia por frame: en móvil, todas 812 / 513)
--project-radius · var(--radius-small)
--project-title-fs · var(--fs-btn-large)
--project-text-w · 67.6% (Figma: 549 de 812)
Figma: texto a 12 px de la imagen y 8 px a la derecha de su borde
(0,99 %); título y flecha de 50 px con 22 de hueco (móvil:
38 px y 10); texto de 18 px, en móvil crema al 80 %.
Estados: :hover :focus-within
Vista: components/ril/project-card.njk
========================================================================== */
@layer components {
.project-card { position: relative; }
.project-card__media {
position: relative;
aspect-ratio: var(--project-ratio, var(--project-ratio-data, 812 / 513));
overflow: hidden;
border-radius: var(--project-radius, var(--radius-small));
}
.project-card__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard);
}
.project-card__img--hover { opacity: 0; }
.project-card__tags {
position: absolute;
left: var(--space-md);
bottom: var(--space-md);
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs);
max-width: 60%;
margin: 0;
padding: 0;
list-style: none;
transform: translateY(calc(100% + var(--space-md) + var(--space-2xs)));
transition: transform var(--dur-slow) var(--ease-standard);
--tag-bg: var(--color-text);
--tag-fg: var(--color-background);
}
.project-card__tag--off { opacity: 0.4; }
.project-card__body { margin-top: calc(14 * 1rem / 16 - 2 * var(--fluid-c)); } /* Figma: 14 en móvil, 12 en escritorio */
.project-card__title {
font-size: var(--project-title-fs, var(--fs-btn-large));
line-height: var(--lh-label);
}
.project-card__link {
display: inline-flex;
align-items: center;
gap: 0.29em;
color: inherit;
text-decoration: none;
}
.project-card__link::after { content: ""; position: absolute; inset: 0; } /* tarjeta entera clicable */
.project-card__icon {
--icon-size: 1.12em;
--icon-stroke: 3;
transition: transform var(--dur-base) var(--ease-standard);
}
.project-card__text {
margin-top: 0;
color: color-mix(in srgb, currentColor 80%, transparent);
}
@media (width >= 48em) {
.project-card__body { padding-inline-start: 0.99%; }
.project-card__link { gap: 0.46em; }
.project-card__icon { --icon-size: 1.04em; }
.project-card__text { max-width: var(--project-text-w, 67.6%); margin-top: var(--space-3xs); color: inherit; }
}
.project-card:is(:hover, :focus-within) .project-card__img--hover { opacity: 1; }
.project-card:is(:hover, :focus-within) .project-card__img:only-of-type { transform: scale(1.04); }
.project-card:is(:hover, :focus-within) .project-card__tags { transform: none; }
/* la flecha ↗ gira en sentido horario hasta quedar horizontal → */
.project-card:is(:hover, :focus-within) .project-card__icon { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
/* sin desplazamientos animados: la flecha cambia de golpe, la imagen no se acerca */
.project-card__img, .project-card__tags { transition-property: opacity; }
.project-card__icon { transition: none; }
.project-card:is(:hover, :focus-within) .project-card__img:only-of-type { transform: none; }
}
}
/* ───── components/client-logo.css ───── */
/* ==========================================================================
COMPONENTE: .client-logo v1.1 · 11/10/2026
Figma: «Group 269-274» (filas de clientes): logo centrado en una caja
con cuatro esquinas en ángulo (14 px, trazo de 1,5 px).
Qué hace: caja de logo con esquinas dibujadas con degradados (sin
elementos extra); las esquinas usan currentColor.
API (token · fallback):
--client-w · 253px × --client-ratio · 253 / 149
--client-corner · 14px --client-stroke · 1.5px
--client-logo-scale · 1 escala del logo respecto a su ancho de Figma (--w en el img)
Vista: se pinta desde ril.proof (components/ril/proof.njk)
========================================================================== */
@layer components {
.client-logo {
--c: var(--client-corner, 14px);
--s: var(--client-stroke, 1.5px);
display: grid;
place-items: center;
width: var(--client-w, 253px);
aspect-ratio: var(--client-ratio, 253 / 149);
background:
linear-gradient(currentColor, currentColor) top left / var(--c) var(--s),
linear-gradient(currentColor, currentColor) top left / var(--s) var(--c),
linear-gradient(currentColor, currentColor) top right / var(--c) var(--s),
linear-gradient(currentColor, currentColor) top right / var(--s) var(--c),
linear-gradient(currentColor, currentColor) bottom left / var(--c) var(--s),
linear-gradient(currentColor, currentColor) bottom left / var(--s) var(--c),
linear-gradient(currentColor, currentColor) bottom right / var(--c) var(--s),
linear-gradient(currentColor, currentColor) bottom right / var(--s) var(--c);
background-repeat: no-repeat;
}
/* logo a su ancho de Figma (--w, px, lo pone la vista), escalable */
.client-logo__img {
width: calc(var(--w, 160) * 1rem / 16 * var(--client-logo-scale, 1));
max-width: 100%;
height: auto;
}
}
/* ───── components/site-header.css ───── */
/* ==========================================================================
COMPONENTE: .site-header v1.2 · 11/10/2026
Figma: escritorio «Component 16» (barra de 77 px, sin filete): logo
64 × 32 · navegación centrada (15 px, cajas de 72 px con 32 de
separación) · CONTACTA (28 px) con flecha.
Móvil «Frame 364»: logo 58 × 29 y dos barras; menú a pantalla
completa «📱 Menu» (6766:7563): fondo negro, entradas de 68 px,
redes, CONTACTA de 68 px, foto y sol abajo.
Qué hace: cabecera fija arriba, sin color de fondo: solo desenfoca lo que
pasa por debajo. El módulo header mira qué sección hay detrás y
pone data-tone="dark" sobre fondos oscuros (.theme-space o
data-header-tone="dark"): entonces todo (textos, filetes,
barras, flecha y letras del logo) pasa a crema. En móvil, el
botón abre el menú (data-menu="open" en la cabecera).
Elementos: __bar __logo __nav __list __link __cta __toggle __panel
__panel-img __panel-nav __menu __menu-link __social
Variantes: __cta--menu (CONTACTA grande del menú móvil)
API (token · fallback):
--header-bg · transparent --header-fg-dark · var(--color-light)
Estados: [data-tone="dark"] [data-menu="open"] [aria-expanded] en el botón
Vista: components/ril/site-header.njk · JS: modules/header.js
========================================================================== */
@layer components {
.site-header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
color: var(--color-text);
background-color: var(--header-bg, transparent);
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur));
transition: color var(--dur-base) var(--ease-standard);
}
/* sobre una sección oscura, todo en crema (el punto del logo sigue amarillo) */
.site-header[data-tone="dark"] { color: var(--header-fg-dark, var(--color-light)); }
/* barra: logo · navegación centrada · CONTACTA */
.site-header__bar {
position: relative;
z-index: var(--z-overlay);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--space-md);
min-height: var(--header-height);
}
/* logo: 41,5 % del alto de la barra (Figma: 32 px en 77); con 60, 25 px */
.site-header__logo { --logo-h: calc(var(--header-height) * 0.415); justify-self: start; color: inherit; }
/* zonas pulsables de al menos 44 × 44 sin cambiar el dibujo: un ::after
invisible amplía el área de toque del logo y del botón de menú */
.site-header__logo, .site-header__toggle { position: relative; }
.site-header__logo::after, .site-header__toggle::after { content: ""; position: absolute; inset: -10px -12px; }
.site-header__list {
display: flex;
gap: var(--space-lg);
margin: 0;
padding: 0;
list-style: none;
}
.site-header__link {
display: block;
min-width: 4.8em; /* cajas de 72 px a 15 px (Figma) */
font-size: var(--fs-nav);
font-weight: var(--fw-medium);
font-stretch: var(--ril-stretch-label);
line-height: var(--lh-label);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
text-decoration: none;
color: inherit;
background: linear-gradient(currentColor, currentColor) left bottom / 0 var(--border-width) no-repeat;
transition: background-size var(--dur-base) var(--ease-standard);
}
.site-header__link:is(:hover, :focus-visible) { background-size: 100% var(--border-width); }
.site-header__cta {
justify-self: end;
display: inline-flex;
align-items: center;
gap: 0.07em;
font-size: var(--fs-btn-cta);
font-weight: var(--ril-fw-black);
font-stretch: var(--ril-stretch-condensed);
line-height: var(--lh-snug);
text-transform: uppercase;
text-decoration: none;
color: inherit;
background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat;
transition: background-size var(--dur-base) var(--ease-standard);
}
.site-header__cta:is(:hover, :focus-visible) { background-size: 100% 2px; }
.site-header__cta .icon { --icon-size: 0.8em; --icon-stroke: 3; }
/* la flecha ↗ gira hasta quedar horizontal → (como en las tarjetas de proyecto) */
.site-header__cta .icon { transition: transform var(--dur-base) var(--ease-standard); }
.site-header__cta:is(:hover, :focus-visible) .icon { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .site-header__cta .icon { transition: none; } }
/* botón de menú (móvil): dos barras de 3,85 px; con el menú abierto, una X */
.site-header__toggle {
display: none;
justify-self: end;
flex-direction: column;
justify-content: center;
gap: 0.33rem;
width: 1.8125rem;
height: 1.5625rem;
padding: 0;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
.site-header__toggle-bar {
display: block;
height: 0.24rem;
background-color: currentColor;
transition: transform var(--dur-base) var(--ease-standard);
}
/* menú móvil a pantalla completa
Animación (con JS, [data-menu]): la cortina negra baja desde la barra
(clip-path), el sol sube desde abajo y las entradas aparecen una a una
subiendo y ensanchándose (de 62 % al condensado de marca, como la letra
ancha); redes y CONTACTA, al final. Al cerrar, todo a la inversa y más
rápido. Sin JS: [hidden]. */
.site-header__panel[hidden] { display: none; }
.site-header[data-menu] .site-header__panel {
visibility: hidden;
clip-path: inset(0 0 100% 0);
transition: clip-path 0.55s var(--ease-in-out), visibility 0s linear 0.55s;
}
.site-header[data-menu="open"] .site-header__panel {
visibility: visible;
clip-path: inset(0);
transition: clip-path 0.7s var(--ease-in-out), visibility 0s;
}
.site-header[data-menu] .site-header__panel :is(.sun, .site-header__panel-img) {
translate: 0 25%;
opacity: 0;
transition: translate 0.5s var(--ease-in-out), opacity 0.4s var(--ease-in-out);
}
.site-header[data-menu="open"] .site-header__panel :is(.sun, .site-header__panel-img) {
translate: 0 0;
opacity: 1;
transition: translate 1.2s var(--ease-standard) 0.25s, opacity 1s var(--ease-standard) 0.25s;
}
.site-header[data-menu] .site-header__menu li {
opacity: 0;
translate: 0 0.3em;
font-stretch: 70%;
transition: opacity 0.25s var(--ease-in-out), translate 0.3s var(--ease-in-out), font-stretch 0.3s var(--ease-in-out);
}
.site-header[data-menu="open"] .site-header__menu li {
opacity: 1;
translate: 0 0;
font-stretch: var(--ril-stretch-condensed);
transition:
opacity 0.6s var(--ease-standard) calc(0.3s + var(--i, 0) * 70ms),
translate 0.8s var(--ease-standard) calc(0.3s + var(--i, 0) * 70ms),
font-stretch 0.9s var(--ease-in-out) calc(0.35s + var(--i, 0) * 70ms);
}
.site-header[data-menu] .site-header__panel :is(.site-header__social, .site-header__cta--menu) {
opacity: 0;
translate: 0 0.75rem;
transition: opacity 0.2s var(--ease-in-out), translate 0.2s var(--ease-in-out);
}
.site-header[data-menu="open"] .site-header__panel :is(.site-header__social, .site-header__cta--menu) {
opacity: 1;
translate: 0 0;
transition: opacity 0.6s var(--ease-standard) 0.7s, translate 0.7s var(--ease-standard) 0.7s;
}
.site-header__menu li { font-stretch: var(--ril-stretch-condensed); } /* el enlace lo hereda (se anima en el