/* ============================================================ TOKENS — Plantilla Maestra CRO · edición V3 «Registro» Hormozi (copy) + Zite (acabado) + Anti-Vibe Coding (alma) ÚNICO archivo que se personaliza por cliente. Aquí solo cambian VALORES. Nunca la estructura de los bloques. Las tres decisiones que definen esta edición: 1 · TIPOGRAFÍA DE AUTOR. Fuera todas las fuentes de catálogo (Inter, Roboto, Poppins, Montserrat, Open Sans, Lato, Manrope, DM Sans, Plus Jakarta Sans, Outfit, Playfair Display, Cormorant, Merriweather, Libre Baskerville, DM Serif, Lora). Entran FRAUNCES e INSTRUMENT SANS. 2 · COLOR GENÉRICO. La página entera es tinta sobre papel. El ÚNICO color saturado de toda la web es el cobalto del botón de conversión: donde hay color, hay que pulsar. 3 · GEOMETRÍA RECTA. Radios de 3 a 6 px y ni un solo círculo. En su lugar, MARCAS DE REGISTRO en las esquinas: el guiño de imprenta que ninguna plantilla generada trae de serie. ============================================================ */ /* ============================================================ 1 · TIPOGRAFÍA AUTOALOJADA · maridaje de autor Sin Google Fonts por CDN: 0 peticiones a terceros (LCP + RGPD). ============================================================ */ /* --- TITULARES: FRAUNCES variable --- Serif de contraste alto con dos ejes que no tiene casi ninguna otra familia: SOFT (redondeo del remate) y WONK (formas "torcidas", con la g y la y de trazo caligráfico). Son EXACTAMENTE lo contrario del trazado matemáticamente perfecto que delata una web generada. Se cargan los 4 ejes a propósito: es el único sitio donde el peso extra compra personalidad de verdad. Va con `display: swap`, así que nunca bloquea el pintado. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../fonts/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --- CUERPO Y ACCIONES: INSTRUMENT SANS variable --- Grotesca de rejilla estrecha dibujada por el estudio Instrument. Aperturas amplias y altura de x generosa: aguanta 14 px sin emborronarse. Tiene carácter (la R de pierna recta, la a de doble piso) sin llamar la atención por encima del contenido. 30 KB. */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/instrument-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/instrument-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ============================================================ 2 · 60 % · DOMINANTE — papel neutro Ni blanco clínico ni crema "eco": un papel gris cálido que no empuja a la web hacia ningún sector concreto. ============================================================ */ --bg-1: #fbfaf8; /* papel · bloque impar */ --bg-2: #f2f1ec; /* papel gris · bloque par */ --bg-3: #e8e6df; /* superficies hundidas */ --bg-card: #fdfdfb; /* tarjetas: un punto por encima del fondo */ --bg-dark: #16161a; /* tinta · SOLO bloque 8 (Garantía) y footer */ --bg-dark-2: #1f1f25; /* superficies dentro del bloque oscuro */ /* ============================================================ 3 · 30 % · SECUNDARIO — tinta ============================================================ */ --text-heading: #17171a; /* tinta de imprenta, no negro puro */ --text-body: #55555c; --text-muted: #6b6b73; /* corregido: 5,06:1 sobre --bg-1 */ --text-faint: #6b6b73; /* corregido: 5,06:1 sobre --bg-1 */ --text-on-dark: #f5f4f1; --text-on-dark-muted: #a0a0a8; /* Filetes milimétricos (regla Zite), en tinta translúcida */ --border: rgba(23, 23, 26, 0.11); --border-solid: #e5e3dc; --border-strong: #cfccc3; --border-dark: rgba(245, 244, 241, 0.14); --ghost-number: #e9e7df; /* números gigantes 01/02/03 */ /* ============================================================ 4 · ACENTO ESTRUCTURAL — tinta, no color Filetes, iconos, nodos y marcas de esquina van en TINTA. Así la página no se lee como "empresa de X sector": se lee como un documento bien impreso, que es lo genérico de verdad. ============================================================ */ --accent: #17171a; --accent-600: #2c2c31; --accent-soft: rgba(23, 23, 26, 0.055); --accent-softer: rgba(23, 23, 26, 0.028); --accent-ring: rgba(23, 23, 26, 0.16); --accent-fade: rgba(30, 88, 230, 0); --accent-halo: rgba(23, 23, 26, 0.07); /* sombra difusa tras la foto */ --accent-halo-strong: rgba(201, 169, 97, 0.22); /* ============================================================ 5 · ACENTO DE CONVERSIÓN — el único color saturado de la web Cobalto, extraído de las referencias del brief. Blanco encima a 5,84:1 → AA holgado. Si algo lleva este cobalto, es que hay que pulsarlo. Cambiar SOLO estas variables para revestir toda la web. ============================================================ */ --cta: #1e58e6; --cta-hover: #1743be; --cta-contrast: #ffffff; --cta-soft: rgba(30, 88, 230, 0.09); --cta-ring: rgba(30, 88, 230, 0.30); --cta-fade: rgba(30, 88, 230, 0); --cta-glow: rgba(23, 67, 190, 0.26); --cta-glow-strong: rgba(23, 67, 190, 0.36); /* Compatibilidad: el resto del CSS sigue nombrando `--accent-cta*`. */ --accent-cta: var(--cta); --accent-cta-hover: var(--cta-hover); --accent-contrast: var(--cta-contrast); /* Oro apagado: sello de garantía y estrellas de valoración. Es un matiz, no un color de marca: nunca toca una superficie grande. */ --gold: #a87e2c; --gold-bright: #d3b678; /* sobre el bloque oscuro */ --gold-soft: rgba(168, 126, 44, 0.10); --gold-ring: rgba(168, 126, 44, 0.26); --gold-ink: #7a5a1c; /* texto sobre --gold-soft · 6,6:1 */ --star: #a87e2c; /* ============================================================ 6 · SISTEMA DE ÍNDICE Y FILETES — la firma visual Las marcas de corte en las esquinas se retiraron: con la esquina ya redondeada quedaban forzadas, mitad escuadra y mitad arco. Su papel lo asume ahora algo que aguanta mejor la curva: un ÍNDICE corrido (01 → 08) bajando por el margen izquierdo de la página y un sistema de FILETES de 1 px que estructura en lugar de encajonar. ============================================================ */ --rule: rgba(23, 23, 26, 0.12); /* filete estructural */ --rule-strong: rgba(23, 23, 26, 0.24); /* filete de índice */ --rule-dark: rgba(245, 244, 241, 0.16); --indice-rule: 30px; /* largo del guion del índice */ /* ============================================================ 7 · TEXTURA — la capa que mata el "vibe coding" ============================================================ */ --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --noise-opacity: 0.034; /* ~3 % · se intuye, no se ve */ --noise-opacity-dark: 0.055; /* Retícula técnica finísima (papel milimetrado) */ --grid-line: rgba(23, 23, 26, 0.04); --grid-size: 56px; --grid-line-fine: rgba(23, 23, 26, 0.05); --grid-size-fine: 22px; /* ============================================================ 8 · DEGRADADOS — casi imperceptibles, en gris cálido Ni un tinte de color: el color está reservado al botón. ============================================================ */ --grad-hero: radial-gradient(1100px 620px at 8% -12%, rgba(23, 23, 26, 0.05), transparent 62%), radial-gradient(900px 540px at 94% 4%, rgba(168, 126, 44, 0.06), transparent 60%), linear-gradient(180deg, #f4f2ec 0%, #fbfaf8 68%); --grad-cta: radial-gradient(860px 470px at 14% 0%, rgba(23, 23, 26, 0.05), transparent 60%), radial-gradient(760px 470px at 88% 18%, rgba(168, 126, 44, 0.06), transparent 62%), linear-gradient(180deg, #fbfaf8 0%, #f2f1ec 100%); --grad-dark: radial-gradient(800px 470px at 12% 4%, rgba(201, 169, 97, 0.10), transparent 62%), radial-gradient(700px 480px at 94% 96%, rgba(30, 88, 230, 0.12), transparent 62%), linear-gradient(180deg, #16161a 0%, #1c1c21 100%); --grad-magnet: radial-gradient(760px 400px at 88% 2%, rgba(23, 23, 26, 0.05), transparent 62%), radial-gradient(600px 360px at 0% 100%, var(--gold-soft), transparent 60%), linear-gradient(180deg, #fdfdfb 0%, #efeee8 100%); /* ============================================================ 9 · CRISTAL (Glassmorphism inteligente) ============================================================ */ --glass-bg: rgba(251, 250, 248, 0.68); --glass-bg-stuck: rgba(251, 250, 248, 0.82); --glass-bg-strong: rgba(251, 250, 248, 0.92); --glass-border: rgba(255, 255, 255, 0.70); --glass-blur: saturate(150%) blur(12px); --glass-blur-deep: saturate(150%) blur(18px); /* ============================================================ 10 · ESCALA TIPOGRÁFICA ============================================================ */ --font-serif: 'Fraunces', 'Iowan Old Style', 'Hoefler Text', Georgia, 'Times New Roman', serif; --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* Ejes variables de Fraunces. SOFT baja el filo del remate; WONK activa las formas caligráficas. En titulares grandes se nota; en textos de 20 px se apaga. */ --wonk-display: 'SOFT' 28, 'WONK' 1; --wonk-sub: 'SOFT' 14, 'WONK' 0; --fs-h1: clamp(2.5rem, 1.4rem + 4.5vw, 4.5rem); /* 40 → 72 px */ --fs-h2: clamp(1.875rem, 1.3rem + 2.4vw, 3rem); /* 30 → 48 px */ --fs-h3: clamp(1.1875rem, 1.11rem + 0.38vw, 1.375rem); /* 19 → 22 px */ --fs-lead: clamp(1.125rem, 1.05rem + 0.34vw, 1.3125rem); /* 18 → 21 px */ --fs-body: clamp(1rem, 0.98rem + 0.12vw, 1.0625rem); /* 16 → 17 px · NUNCA < 16px */ --fs-small: clamp(0.875rem, 0.86rem + 0.09vw, 0.9375rem);/* 14 → 15 px */ --fs-micro: 0.75rem; /* 12 px · rótulos */ --lh-tight: 1.04; --lh-heading: 1.14; --lh-body: 1.68; --ls-tight: -0.02em; --ls-serif: -0.016em; --ls-wide: 0.14em; --fw-body: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ============================================================ 11 · ESPACIADO + reglas de composición física ============================================================ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 96px; /* EL MARGEN DE SEGURIDAD: radio intocable alrededor de todo titular y cuerpo de copia. Es el suelo del padding de cualquier tarjeta. */ --safe-margin: 24px; /* LA REGLA DEL 2x: el CTA se separa del bloque de texto al menos el DOBLE de lo que el H1 se separa de su subtítulo (24 px). */ --gap-titular-sub: var(--sp-6); --gap-cta: clamp(48px, 4.5vw, 64px); --section-pad: clamp(72px, 9vw, 112px); --container: 1200px; --container-pad: clamp(20px, 5vw, 40px); --measure: 66ch; --measure-h1: 15ch; /* ============================================================ 12 · FORMA · esquina blanda, nunca cápsula Los 3-6px de la edición anterior dejaban la interfaz acartonada. Los 24px de la anterior a esa la volvían un catálogo de plantilla. El punto medio: 10-16px. Se nota que alguien decidió el radio, y ninguna esquina se convierte en semicírculo. Sigue sin haber CÍRCULOS ni PÍLDORAS en toda la interfaz. ============================================================ */ --radius-xl: 16px; /* contenedores grandes */ --radius-card: 12px; /* tarjetas */ --radius-md: 10px; /* sub-elementos dentro de tarjeta */ --radius-sm: 8px; --radius-btn: 10px; --radius-pill: 8px; /* chips; el token sobrevive, la píldora no */ /* ============================================================ 13 · SOMBRAS DE GRAVEDAD CERO Gran radio de difusión, opacidad por debajo del 5 %. ============================================================ */ --shadow-xs: 0 1px 2px rgba(23, 23, 26, 0.04); --shadow-sm: 0 10px 24px -12px rgba(23, 23, 26, 0.10), 0 1px 2px rgba(23, 23, 26, 0.03); --shadow-card: 0 18px 40px -20px rgba(23, 23, 26, 0.07); --shadow-hover: 0 34px 62px -14px rgba(23, 23, 26, 0.09), 0 3px 8px -4px rgba(23, 23, 26, 0.05); --shadow-float: 0 45px 85px -24px rgba(23, 23, 26, 0.12), 0 12px 28px -18px rgba(23, 23, 26, 0.07); --shadow-glass: 0 25px 50px -18px rgba(23, 23, 26, 0.09); --shadow-cta: 0 12px 28px -10px var(--cta-glow), 0 1px 2px rgba(23, 67, 190, 0.16); --shadow-cta-hover: 0 18px 34px -10px var(--cta-glow-strong), 0 1px 2px rgba(23, 67, 190, 0.20); --shadow-cta-compact:0 8px 18px -8px var(--cta-glow), 0 1px 2px rgba(23, 67, 190, 0.14); /* ============================================================ 14 · OTROS ============================================================ */ --tap-min: 56px; --header-h: 76px; --sticky-h: 64px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* REGLAS DE ESTA EDICIÓN: · Titulares SIEMPRE en Fraunces; cuerpo, botones y rótulos en Instrument Sans. · El COBALTO aparece únicamente en superficies de conversión y en el punto de estado en vivo. Todo lo demás —filetes, iconos, nodos, marcas— es tinta. · Cero círculos y cero píldoras. Radios entre 3 y 6 px. · Las marcas de registro se ponen con `--esquinas` sobre `background-image`. Quien las use debe declarar `background-color` aparte, nunca `background`. · El grano vive en `body::after` a ~3 %. Si se ve, está mal calibrado. · Sin modo oscuro automático: el único bloque oscuro es el 8 (Garantía). */