/* ========================================================================== Design tokens — plantilla de landing de valoración Pegar al principio de style.css del tema. CSS nativo, sin dependencias. Dos capas, a propósito: CAPA 1 · MARCA → se sustituye por cliente. Es el único bloque a tocar. CAPA 2 · ESTRUCTURA → común al sistema. No se toca al cambiar de marca. Para un cliente nuevo: crear brands/.css con la CAPA 1 y encolarlo antes de este archivo. No entrar en la CAPA 2 ni en on.css. ========================================================================== */ /* La CAPA 1 (marca) vive ahora en brands/.css y se encola ANTES de este archivo. */ /* ========================================================================== CAPA 2 · ESTRUCTURA — común al sistema Consume la capa de marca. No editar al cambiar de cliente. ========================================================================== */ :root { /* --- Alias semánticos ------------------------------------------------- */ /* components.css solo usa estos, nunca --brand-* directamente. */ --on-bg-dark: var(--brand-primary-800); --on-bg-hero: var(--brand-primary-900); --on-interactive: var(--brand-primary-700); --on-cta: var(--brand-accent); --on-cta-hover: var(--brand-accent-hover); --on-cta-ink: var(--brand-accent-ink); --on-highlight: var(--brand-secondary); --on-ink: var(--brand-ink); --on-ink-60: var(--brand-ink-60); --on-ink-40: var(--brand-ink-40); --on-ink-50: #6B7182; /* ayudas de formulario: cumple AA sobre blanco */ --on-line: var(--brand-line); --on-line-strong: var(--brand-line-strong); --on-surface: var(--brand-surface); --on-surface-alt: var(--brand-surface-alt); --on-surface-img: var(--brand-surface-img); --on-font-display: var(--brand-font-display); --on-font-body: var(--brand-font-body); --on-font-accent: var(--brand-font-accent); /* --- Sobre fondo oscuro ----------------------------------------------- */ --on-on-dark: rgba(255,255,255,.90); --on-on-dark-muted: rgba(255,255,255,.72); --on-on-dark-line: rgba(255,255,255,.14); --on-on-dark-fill: rgba(255,255,255,.16); /* --- Estado ----------------------------------------------------------- */ --on-error: #C0392B; --on-error-bg: #FDF4F3; --on-error-line: #E8C4BE; --on-error-ink: #8A2A20; --on-success: #1E7D5A; --on-warn-bg: #FFFBD6; /* fila de «siguiente paso», aviso catastro */ --on-warn-ink: #5A4B00; --on-cta-soft: #F7EC8A; /* botón mientras envía */ --on-cta-pale: #FFFDE8; /* celda destacada de la tabla comparativa */ --on-star: #F5B400; /* --- Escala tipográfica fluida ---------------------------------------- */ /* Calibrada en 4 escalones: móvil ~390 · tablet ~834 · 14" ~1440 · 24" ~1920 */ --on-fs-h1: clamp(38px, 6vw, 96px); --on-fs-h1-thanks:clamp(34px, 4.9vw, 92px); /* H1 de la página de gracias */ --on-fs-h1-split: clamp(38px, 4.6vw, 78px); /* hero a dos columnas */ --on-fs-h2: clamp(30px, 3.6vw, 64px); --on-fs-h3: clamp(20px, 1.7vw, 30px); /* título de paso y de tarjeta */ --on-fs-h4: clamp(18px, 1.35vw, 23px); /* pregunta FAQ, datos de oficina */ --on-fs-lead: clamp(17px, 1.4vw, 25px); /* subtitular del hero */ --on-fs-sub: clamp(17px, 1.25vw, 22px); /* subtitular y copy de sección */ --on-fs-body: clamp(16px, 1.1vw, 19px); --on-fs-small: clamp(14px, .95vw, 16px); --on-fs-caption: clamp(13px, .9vw, 15px); /* avisos legales, pie */ --on-fs-eyebrow: clamp(12px, .9vw, 16px); --on-fs-stat: clamp(26px, 2.6vw, 46px); /* cifras de la banda de datos */ --on-fs-watermark:clamp(67px, 6vw, 102px); /* número de fondo de cada paso */ --on-fs-quote: clamp(32px, 3.4vw, 58px); /* cita destacada del testimonio */ --on-fs-kpi: clamp(22px, 2vw, 34px); /* datos de la banda de valoración */ --on-fs-body-lg: var(--on-fs-body); /* alias: texto de tarjetas y listas */ --on-fs-xs: var(--on-fs-caption); /* alias: notas legales, pies */ --on-fs-ui: 14px; /* etiquetas, ayudas y errores del formulario */ --on-fs-field: 16px; /* FIJO: evita el zoom iOS */ /* --- Métricas de texto ------------------------------------------------ */ --on-lh-tight: 1.02; /* H1 */ --on-lh-title: 1.06; /* H2 */ --on-lh-lead: 1.5; --on-lh-body: 1.6; --on-ls-h1: var(--brand-title-tracking); --on-ls-h2: -.025em; --on-ls-eyebrow: .16em; --on-w-regular: 400; --on-w-medium: 500; --on-w-semi: var(--brand-title-weight); /* --- Medida de línea -------------------------------------------------- */ --on-measure-half: 50%; /* H2 y subtitular en escritorio */ --on-measure-lead: 700px; /* subtitular centrado del hero */ --on-measure-form: 780px; /* módulo de valoración */ /* --- Espaciado -------------------------------------------------------- */ --on-space-1: 4px; --on-space-2: 8px; --on-space-3: 12px; --on-space-4: 16px; --on-space-5: 20px; --on-space-6: 24px; --on-space-8: 32px; --on-space-10: 40px; --on-space-12: 48px; --on-space-16: 64px; /* Márgenes laterales: la página va casi a ancho completo */ --on-gutter: max(18px, 5vw); /* Aire vertical de sección; -20% cuando dos seguidas comparten fondo */ --on-section-y: clamp(64px, 7vw, 120px); --on-section-y-tight: clamp(51px, 5.6vw, 96px); --on-header-h: 68px; /* 48px de logo + 10px arriba y abajo */ --on-hero-min: 100svh; --on-field-h: 56px; /* FIJO por usabilidad */ --on-tap-min: 44px; /* mínimo de área táctil */ /* --- Radios ----------------------------------------------------------- */ --on-radius-xs: calc(8px * var(--brand-radius-scale)); --on-radius-sm: calc(10px * var(--brand-radius-scale)); --on-radius-md: calc(12px * var(--brand-radius-scale)); --on-radius-lg: calc(16px * var(--brand-radius-scale)); --on-radius-xl: calc(20px * var(--brand-radius-scale)); --on-radius-card: calc(18px * var(--brand-radius-scale)); /* tarjetas grandes: detalle, oficina, gracias */ --on-radius-2xl: calc(24px * var(--brand-radius-scale)); /* banda de valoración */ --on-radius-step: calc(14px * var(--brand-radius-scale)); /* fila de paso, categoría de cookies */ --on-radius-btn: calc(11px * var(--brand-radius-scale)); /* barra fija móvil */ --on-radius-xs2: calc(9px * var(--brand-radius-scale)); /* pestañas, botones de contador */ --on-radius-pill: 999px; /* --- Sombras ---------------------------------------------------------- */ --on-shadow-card: 0 2px 8px rgba(20,22,28,.06); --on-shadow-raise: 0 8px 24px rgba(11,15,46,.10); --on-shadow-form: 0 18px 50px rgba(11,15,46,.18); /* --- Movimiento ------------------------------------------------------- */ --on-ease: cubic-bezier(.4, 0, .2, 1); --on-dur-fast: .2s; --on-dur-base: .28s; --on-dur-slow: .3s; /* --- Capas ------------------------------------------------------------ */ --on-z-header: 50; --on-z-bar: 60; --on-z-sugg: 20; --on-z-cookie: 200; --on-z-modal: 210; } /* --- Puntos de ruptura (referencia; @media no admite variables) ---------- ≤ 620px móvil ≤ 760px se oculta el menú y entra la barra fija inferior ≤ 1100px tablet: columnas apiladas, titulares a ancho completo, grid 2 col. > 1100px escritorio ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --on-dur-fast: 0s; --on-dur-base: 0s; --on-dur-slow: 0s; } } /* ========================================================================== DIFF para tokens.css · añadir al final de la CAPA 2 (:root). Es lo único nuevo en tokens. Escala de impresión fija en puntos: el informe no usa clamp() ni vw. ========================================================================== */ :root { --on-print-body: 10.5pt; /* cuerpo */ --on-print-lh: 1.45; /* interlineado del cuerpo */ --on-print-label: 9pt; /* etiquetas, filas de ficha, tablas */ --on-print-h2: 22pt; /* título de página */ --on-print-hero: 44pt; /* cifra principal (pág. 2) */ --on-print-kpi: 20pt; /* cifras KPI */ --on-print-legal: 7.5pt; /* nota legal del pie */ --on-print-tag: 7pt; /* distintivo de origen del dato */ }