/* ============================================================================ RENÄSER — TOKENS DE DISEÑO · EL LUGAR CENTRALIZADO ---------------------------------------------------------------------------- Este archivo es la ÚNICA fuente de verdad del sistema visual. Cambia un valor aquí y cambia en todo el sitio (las 14 páginas + funnels). Nada de hexadecimales sueltos en otros archivos: todo pasa por estos tokens. Fuente: Propuesta de Identidad Visual de Johan (2026-07-29). Se importa PRIMERO en BaseLayout.astro y FunnelLayout.astro. ============================================================================ */ :root { /* ========================================================================== 1 · COLOR — paleta oficial de Johan ========================================================================== */ /* --- Colores de marca (principales) --- */ --rns-blue: #6885ba; /* Renäser Blue · azul principal de marca */ --rns-gold: #c7a96b; /* Renäser Gold · color de marca (iconografía, detalles) */ /* --- Colores de apoyo (solo si es necesario) --- */ --rns-sand: #e8e0c5; /* Soft Sand · superficie cálida, titulares sobre oscuro */ --rns-brown: #604234; /* Earth Brown */ --rns-olive: #394f3a; /* Forest Olive */ /* --- Sistema neutral --- */ --rns-white: #ffffff; /* Flat White */ --rns-charcoal: #2c2d2d; /* Deep Charcoal (la lámina dice #ffffff por error; el valor real muestreado del swatch es #2c2d2d) */ /* --- Derivados (calculados de la paleta, no colores nuevos) --- */ --rns-blue-deep: #4d6796; /* azul profundo · fondo de sección (texto blanco AA 5.8:1) */ --rns-blue-soft: #a8bcd9; /* azul claro para detalles sobre oscuro */ --rns-sand-deep: #d6cba6; /* arena para bordes y divisores */ --rns-cream: #efe9d8; /* banda cálida — separada del blanco a la vista */ /* ========================================================================== 1b · SUPERFICIES DE SECCIÓN — el ritmo de contraste -------------------------------------------------------------------------- El sitio alterna estas superficies; nunca dos iguales seguidas y nunca crema sobre crema. El azul es fondo de pleno derecho, no solo acento. ========================================================================== */ --rns-surface: var(--rns-white); /* base */ --rns-surface-warm: var(--rns-cream); /* banda cálida */ --rns-surface-sand: var(--rns-sand); /* arena plena (más presencia) */ --rns-surface-brand: var(--rns-blue-deep); /* AZUL de fondo · texto blanco */ --rns-surface-panel: var(--rns-blue); /* azul de marca · paneles y titulares grandes */ --rns-surface-deep: var(--rns-olive); /* Forest Olive */ --rns-surface-earth: var(--rns-brown); /* Earth Brown */ --rns-surface-dark: var(--rns-charcoal); /* Deep Charcoal */ /* Texto sobre superficies oscuras */ --rns-on-dark: #ffffff; --rns-on-dark-2: rgba(255, 255, 255, .82); --rns-on-dark-3: rgba(255, 255, 255, .62); /* Acento sobre fondo oscuro. NO es la arena pura: #e8e0c5 sobre el azul de sección da 4.30:1 y los eyebrows van a 13px, así que se queda corto del 4.5 de AA. Este es el mismo tono un punto más claro → 4.64:1. La arena pura sigue usándose para superficies (--rns-surface-sand). */ --rns-on-dark-accent: #eee8d6; /* REGLA: la arena es color de texto SOLO sobre fondo oscuro o fotografía. Sobre blanco da 1.32:1 y sobre crema 1.09:1 — invisible. En superficies claras el acento es --rns-blue-deep (5.68:1 sobre blanco, 4.69 sobre crema). */ --rns-on-light-accent: var(--rns-blue-deep); /* --- Texto --- */ --rns-text: #3f4442; /* cuerpo (charcoal aclarado, cálido) */ --rns-text-2: #6b7069; /* secundario */ --rns-text-muted: #9a9c95; --rns-border: rgba(44, 45, 45, .14); /* ========================================================================== 2 · CTA — COLOR DE ACCIÓN, ÚNICO Y EXCLUSIVO -------------------------------------------------------------------------- REGLA DURA: --rns-cta es el color de los botones de acción y NADA MÁS. Ningún titular, ícono, borde, texto o fondo usa este token. Un solo botón CTA por pantalla. Está separado de --rns-gold a propósito: hoy comparten valor, pero puedes darle al CTA un color propio cambiando ESTA línea y nada más. ========================================================================== */ --rns-cta: var(--rns-gold); --rns-cta-hover: #b3945a; /* Decisión del diseñador (jul 2026): el texto del botón dorado va SIEMPRE en blanco. Medido: blanco sobre #c7a96b da 2.25:1 — por debajo del 4.5:1 de WCAG AA para texto normal. Si algún día se quiere blanco Y contraste, el dorado del botón tendría que bajar a ~#96793f (4.11:1). */ --rns-cta-text: #ffffff; --rns-cta-shadow: 0 8px 21px rgba(199, 169, 107, .38); /* ========================================================================== 3 · TIPOGRAFÍA -------------------------------------------------------------------------- Principal: Cormorant (serif) — titulares, contrastes y resaltados. Secundaria: Montserrat (sans) — textos, párrafos; pesos según jerarquía. ⚠️ CAMPTON ESTÁ FUERA. NO LO VUELVAS A PONER SIN VERIFICAR LOS CONTORNOS. La versión DEMO que teníamos NO PUEDE ESCRIBIR EN ESPAÑOL: á é í ó ú ñ están en el mapa de caracteres —por eso el conteo de 478 glifos parecía correcto— pero su contorno mide 2 bytes, idéntico al de la caja vacía que este mismo archivo ya documentaba para ¿ ¡ ™. En iPhone salían cajas en cada palabra acentuada. Medido el 25-ago-2026 leyendo los charstrings del CFF, no el cmap: el cmap miente en las versiones DEMO. Campton ya no se vende en Fontfabric; sigue en MyFonts (René Bieder), familia completa 250 USD de escritorio + licencia webfont aparte. Si algún día llegan los .woff2 con licencia, se antepone en --rns-sans y se agregan sus @font-face en §3b — pero antes hay que comprobar que los acentos tengan contorno real. ========================================================================== */ --rns-serif: "Cormorant", "Cormorant Garamond", Georgia, serif; --rns-sans: "Montserrat", system-ui, -apple-system, sans-serif; /* Pesos de Campton por jerarquía */ --rns-w-light: 300; --rns-w-book: 400; --rns-w-medium: 500; --rns-w-semi: 600; --rns-w-bold: 700; /* Peso de titulares (Cormorant variable, rango 300–700 en §3b). A 450 Cormorant es un hilo a 80px: los titulares necesitan 600 para tener presencia. Este token es la palanca central del "más fuerte". */ --rns-w-display: 600; /* --- Escala tipográfica ÁUREA · serie de Fibonacci --------------------- Mínimo 13 y solo valores de la serie: 13 · 21 · 34 · 55 · 89 · 144. La razón entre consecutivos tiende a φ (1.618). Los clamp() interpolan ENTRE valores Fibonacci, nunca fuera de ellos. */ --rns-fs-13: 0.8125rem; /* 13px — MÍNIMO ABSOLUTO. Nada por debajo, nunca. */ /* 15px — estándar del diseñador para subtítulos y etiquetas de interfaz. Fuera de la serie Fibonacci a propósito: es un piso de legibilidad, no un peldaño de la escala de titulares. */ --rns-fs-15: 0.9375rem; --rns-fs-21: 1.3125rem; /* 21px — cuerpo de texto (medida editorial) */ --rns-fs-34: 2.125rem; /* 34px — h3 / destacados */ --rns-fs-55: 3.4375rem; /* 55px — h2 */ --rns-fs-89: 5.5625rem; /* 89px — h1 */ --rns-fs-144: 9rem; /* 144px — display excepcional */ /* Responsivos: los TOPES son valores Fibonacci; solo la pendiente interpola. La forma `Nvw + Mrem` (y no `Nvw` sola) evita que en móvil h1 y h2 se aplasten los dos contra el mismo piso de 34px y desaparezca la jerarquía: 375px → h1 47 · h2 34 · display 55 1280px → h1 83 · h2 50 · display 82 1600px+ → h1 89 · h2 55 · display 89 (topes) */ --rns-fs-h1: clamp(var(--rns-fs-34), 4vw + 2rem, var(--rns-fs-89)); --rns-fs-h2: clamp(var(--rns-fs-34), 2.4vw + 1.2rem, var(--rns-fs-55)); --rns-fs-h3: clamp(var(--rns-fs-21), 1.4vw + 0.7rem, var(--rns-fs-34)); --rns-fs-body: var(--rns-fs-21); --rns-fs-caption: var(--rns-fs-13); --rns-fs-eyebrow: var(--rns-fs-13); /* Subtítulos y etiquetas bajo una cifra o un titular */ --rns-fs-sub: var(--rns-fs-15); /* Cifras de impacto (40+ · 100,000+ · 100+): registro propio, más grande */ --rns-fs-stat: clamp(var(--rns-fs-34), 2.4vw + 1.6rem, var(--rns-fs-55)); /* Entradas y bajadas: la medida editorial de 21px, no un tamaño ad-hoc */ --rns-fs-lead: var(--rns-fs-21); /* Registro display: una declaración por página, nada más (ver .manifesto). Tope en 89 (no en 144): a 144px una frase de dos líneas desborda los contenedores de 820px del sitio. Llega a su tope antes que el h1 (8vw contra 7vw), así que sigue leyéndose como un registro aparte frente a los h2 de 55. --rns-fs-144 queda disponible para una sola palabra. */ --rns-fs-display: clamp(var(--rns-fs-55), 3vw + 2.7rem, var(--rns-fs-89)); /* Interlineado áureo */ --rns-lh-tight: 1.09; /* titulares grandes (1/φ² aprox.) */ --rns-lh-head: 1.236; /* titulares medios */ --rns-lh-body: 1.618; /* φ — cuerpo de texto */ --rns-ls-eyebrow: 0.21em; /* tracking de eyebrows */ --rns-ls-head: -0.01em; /* ========================================================================== 4 · RETÍCULA Y ESPACIO — Fibonacci ========================================================================== */ --rns-sp-8: 0.5rem; /* 8px */ --rns-sp-13: 0.8125rem; /* 13px */ --rns-sp-21: 1.3125rem; /* 21px */ --rns-sp-34: 2.125rem; /* 34px */ --rns-sp-55: 3.4375rem; /* 55px */ --rns-sp-89: 5.5625rem; /* 89px — padding vertical de sección */ --rns-sp-144: 9rem; /* 144px — sección mayor */ /* --- RETÍCULA ÁUREA ----------------------------------------------------- φ = 1.618. La página deja de estar centrada por defecto: se reparte en una columna menor (38.2%) y una mayor (61.8%). El encabezado vive en la menor y el contenido en la mayor, o al revés — pero nunca todo al centro. Las filas siguen la escala Fibonacci de espacio (§4). */ --rns-phi: 1.618; --rns-col-minor: 38.2%; --rns-col-major: 61.8%; --rns-grid-aurea: minmax(0,38.2fr) minmax(0,61.8fr); --rns-grid-aurea-inv: minmax(0,61.8fr) minmax(0,38.2fr); /* El encabezado de sección ocupa DOS TERCIOS del ancho; la bajada va debajo, alineada a la izquierda, en medida de lectura. */ --rns-col-2-3: 66.666%; --rns-measure-head: var(--rns-col-2-3); --rns-measure-sub: 55ch; --rns-wrap-text: 610px; /* medida de lectura (Fibonacci) */ --rns-wrap: 987px; /* contenido estándar (Fibonacci) */ --rns-wrap-wide: 1220px; /* rejillas anchas — 987 × φ = 1597 resulta excesivo en pantalla; 1220 mantiene la proporción útil */ --rns-gutter: var(--rns-sp-21); /* Proporción áurea para splits de 2 columnas */ --rns-golden: 1.618; /* ========================================================================== 5 · FORMA — esquinas redondeadas -------------------------------------------------------------------------- Johan: TODAS las fotos en módulos, recuadros y elementos explicativos llevan esquinas redondeadas. Excepción: fondos a sangre de encabezado. ========================================================================== */ --rns-r-img: 13px; /* fotos dentro de módulos/recuadros (Fibonacci) */ --rns-r-card: 21px; /* tarjetas y contenedores */ --rns-r-pill: 89px; /* botones y chips */ --rns-shadow-sm: 0 2px 13px rgba(44, 45, 45, .06); --rns-shadow-md: 0 13px 34px rgba(44, 45, 45, .13); --rns-shadow-lg: 0 21px 55px rgba(44, 45, 45, .18); /* ========================================================================== 6 · TRATAMIENTO DE IMAGEN Y GRADIENTES -------------------------------------------------------------------------- El gradiente del amanecer (azul → dorado) es el recurso de mayor impacto visual. Los velos mantienen legible el texto sobre fotografía. ========================================================================== */ /* EL AMANECER. No es una rampa lineal sino luz difusa: azul profundo en la esquina alta, el dorado floreciendo abajo a la derecha y la crema como último resplandor. Se construye por capas radiales sobre una base azul para que se parezca a la lámina de Johan y no a un degradado de software. El oro se mantiene por debajo de .45 de alfa y lejos de la zona alta: ahí es donde vive el texto y hay que sostener el contraste con blanco. */ --rns-grad-amanecer: radial-gradient(135% 96% at 8% -6%, rgba(52, 73,112,.97) 0%, rgba(52,73,112,0) 62%), radial-gradient( 92% 66% at 94% 100%, rgba(199,169,107,.40) 0%, rgba(199,169,107,0) 66%), radial-gradient( 76% 54% at 60% 118%, rgba(232,224,197,.32) 0%, rgba(232,224,197,0) 72%), linear-gradient(158deg, #46608d 0%, #4f6b9c 54%, #5d7aac 100%); /* Variante corta, para tarjetas y bandas donde el amanecer completo satura */ --rns-grad-amanecer-soft: radial-gradient(110% 90% at 88% 96%, rgba(199,169,107,.34) 0%, rgba(199,169,107,0) 66%), linear-gradient(158deg, #4d6796 0%, #617cab 100%); /* Sobre fotografía: el amanecer como velo, sin tapar la imagen */ --rns-grad-amanecer-veil: radial-gradient(100% 80% at 8% 0%, rgba(61,84,126,.78) 0%, rgba(61,84,126,0) 62%), radial-gradient( 90% 70% at 92% 92%, rgba(199,169,107,.30) 0%, rgba(199,169,107,0) 66%); /* --- VELADURA DEL AMANECER ---------------------------------------------- TODA foto que se atenúe usa esta veladura: diagonal a 135° (arriba izquierda → abajo derecha), del azul profundo al cálido. Sustituye a los velos de charcoal, que dejaban las fotos grises. El extremo cálido es Earth Brown (#604234, de la paleta de Johan) y NO el dorado: medido sobre el punto más claro de una foto, el dorado con blanco encima da 1.88:1 — el texto desaparece. El Earth Brown al 80% da 5.19:1, exactamente lo mismo que el extremo azul, así que la veladura sostiene texto blanco por igual en las dos puntas. Dos intensidades, según si encima va texto o no. */ /* CON texto encima. Bajada un 15% a petición del diseñador para que la foto luzca: el peor caso (una zona blanca de la imagen) queda en 4.2:1 en vez de 5.2:1 — por debajo del 4.5 de AA solo en ese extremo. Sobre foto de tono medio, que es lo normal, sigue por encima de 6:1. */ --rns-veil-amanecer: linear-gradient(135deg, rgba(52, 73,112,.75) 0%, rgba(61, 84,126,.70) 32%, rgba(83, 72, 78,.68) 62%, rgba(96, 66, 52,.70) 100%); /* SIN texto encima: deja ver la foto, solo la entona hacia el amanecer */ --rns-veil-amanecer-soft: linear-gradient(135deg, rgba(52, 73,112,.49) 0%, rgba(61, 84,126,.39) 34%, rgba(96, 66, 52,.34) 74%, rgba(199,169,107,.29) 100%); --rns-veil-hero: linear-gradient(78deg, rgba(30,36,48,.86) 0%, rgba(30,36,48,.58) 42%, rgba(30,36,48,.10) 100%); --rns-veil-card: linear-gradient(180deg, rgba(44,45,45,.04) 34%, rgba(44,45,45,.62) 100%); --rns-veil-band: linear-gradient(180deg, rgba(44,45,45,.88) 0%, rgba(57,79,58,.82) 100%); --rns-veil-interlude: linear-gradient(180deg, rgba(44,45,45,.26) 0%, rgba(44,45,45,.04) 34%, rgba(44,45,45,.22) 100%); --rns-glow: radial-gradient(70% 89% at 50% -20%, rgba(104,133,186,.30), transparent 62%); } /* ========================================================================== 3b · FUENTES AUTOALOJADAS (sin Google Fonts: cero peticiones a terceros) -------------------------------------------------------------------------- Archivos en /public/fonts/. Cormorant y Montserrat son variables: un solo archivo por subset cubre todo el rango 300–700. Montserrat va partida por unicode-range, tal como la sirve Google. Eso no es un detalle de peso: es la garantía de que NO PUEDE HABER CAJAS VACÍAS. Cada cara declara exactamente los caracteres que sabe dibujar, así que cualquier signo fuera de esos rangos cae solo en la fuente del sistema. Campton hacía lo contrario —declaraba cubrirlo todo— y por eso los acentos salían en blanco sin que el navegador pudiera rescatarlos. Licencia: Montserrat es SIL Open Font License 1.1 (Julieta Ulanovsky). Permite autoalojarla y servirla públicamente sin límite de pageviews. ========================================================================== */ /* --- Montserrat (secundaria: textos, párrafos, labels, botones) --- */ @font-face { font-family: "Montserrat"; src: url("/fonts/montserrat/montserrat-italic-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Montserrat"; src: url("/fonts/montserrat/montserrat-italic-latin.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; 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: "Montserrat"; src: url("/fonts/montserrat/montserrat-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Montserrat"; src: url("/fonts/montserrat/montserrat-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; 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; } /* --- Cormorant (principal: titulares, contrastes, resaltados) --- Variable font: un solo archivo cubre 300–700. */ @font-face { font-family: "Cormorant"; src: url("/fonts/Cormorant/Cormorant-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant"; src: url("/fonts/Cormorant/Cormorant-Italic-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 300 700; font-style: italic; font-display: swap; }