/* ============================================================ _xgaleria_2026-08-11.css FUTURÍSTICA® · The.Archi.Designers ------------------------------------------------------------ CAPA EDITORIAL · MODO GALERÍA Superficie pública: futuristica.llc, lanzamientos de proyectos y material de marketing. Aprobado por: Robin Cuervo · CCO · [PENDIENTE FIRMA] Fecha: 2026-08-01 Base: _xtoken_2026-05-21.css (canónico, inmutable) ------------------------------------------------------------ LEY DE CAPAS Este archivo NO define un solo color. Todo color proviene del canónico. GALERÍA aporta únicamente escalas: espacio, tracking, tamaños de texto y curvas de movimiento. Orden de carga obligatorio: 1. _xtoken_2026-05-21.css 2. _xgaleria_2026-08-11.css Si un hex aparece en este archivo, es un error. ============================================================ */ :root { /* --------------------------------------------------------- 01 · TIPOGRAFÍAS — kit editorial FUTURÍSTICA --------------------------------------------------------- */ --g-display: 'Cormorant Garamond', Georgia, serif; --g-body: 'Tenor Sans', sans-serif; --g-mono: 'IBM Plex Mono', 'Courier New', monospace; /* --------------------------------------------------------- 02 · ESCALA DE TEXTO — ley de clamp(), mínimo 13px --------------------------------------------------------- */ --g-t-hero: clamp(38px, 7vw, 92px); --g-t-display: clamp(56px, 9vw, 140px); /* PROVISIONAL · techo a validar servido */ --g-t-title: clamp(28px, 4.2vw, 56px); --g-t-section: clamp(21px, 2.4vw, 32px); --g-t-lead: clamp(18px, 1.8vw, 26px); --g-t-body: clamp(14px, 0.95vw, 17px); --g-t-mono: clamp(13px, 1.3vw, 16px); --g-t-mono-xs: clamp(13px, 1.2vw, 15px); /* --------------------------------------------------------- 03 · TRACKING — apretado en display, abierto en mono --------------------------------------------------------- */ --g-tk-very-tight: -0.045em; /* hero */ --g-tk-tight: -0.035em; /* títulos */ --g-tk-normal: 0; /* cuerpo */ --g-tk-wide: 0.06em; /* eyebrows */ --g-tk-mono: 0.16em; /* etiquetas y datos */ /* --------------------------------------------------------- 04 · INTERLINEADO --------------------------------------------------------- */ --g-lh-hero: 1.02; --g-lh-title: 1.14; --g-lh-lead: 1.45; --g-lh-body: 1.65; /* --------------------------------------------------------- 05 · ESPACIO — base 4px --------------------------------------------------------- */ --g-s-1: 4px; --g-s-2: 8px; --g-s-3: 12px; --g-s-4: 16px; --g-s-5: 24px; --g-s-6: 32px; --g-s-7: 48px; --g-s-8: 64px; --g-s-9: 96px; --g-s-10:128px; /* --------------------------------------------------------- 06 · MEDIDA Y RETÍCULA --------------------------------------------------------- */ --g-medida: 68ch; /* ancho óptimo de lectura */ --g-ancho-max: 1440px; --g-margen: var(--g-s-5); --g-h-head: 64px; /* --------------------------------------------------------- 07 · MOVIMIENTO --------------------------------------------------------- */ --g-ease: cubic-bezier(0.25, 0.10, 0.25, 1); --g-ease-slow: cubic-bezier(0.16, 0.84, 0.30, 1); --g-dur: 240ms; --g-dur-slow: 680ms; /* --------------------------------------------------------- 08 · SEMÁNTICOS — referencias al canónico, cero hex --------------------------------------------------------- Regla de acción: --tad-vida es el verde de acción sobre void. Se reserva para botones de verbo (abrir, cerrar, entender, crear). No se usa como color decorativo. --c-brand es la marca; no se sustituye ni se altera. --------------------------------------------------------- */ --g-fondo: var(--void); --g-tinta: var(--warm); --g-fondo-claro: var(--warm); --g-tinta-oscura: var(--void); --g-marca: var(--c-brand); --g-accion: var(--tad-vida); --g-accion-texto: var(--void); } /* ============================================================ RESET · leyes CSS de la firma cero radius · cero shadow · cero blur · cero !important ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0; } body { background: var(--g-fondo); color: var(--g-tinta); font-family: var(--g-body); font-size: var(--g-t-body); line-height: var(--g-lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- Roles de texto ---- */ .g-hero { font-family: var(--g-display); font-size: var(--g-t-hero); line-height: var(--g-lh-hero); letter-spacing: var(--g-tk-very-tight); font-weight: 300; } .g-title { font-family: var(--g-display); font-size: var(--g-t-title); line-height: var(--g-lh-title); letter-spacing: var(--g-tk-tight); font-weight: 300; } .g-section { font-family: var(--g-display); font-size: var(--g-t-section); line-height: var(--g-lh-title); letter-spacing: var(--g-tk-tight); font-weight: 400; } .g-lead { font-size: var(--g-t-lead); line-height: var(--g-lh-lead); } .g-eyebrow { font-family: var(--g-mono); font-size: var(--g-t-mono-xs); letter-spacing: var(--g-tk-mono); text-transform: uppercase; } .g-dato { font-family: var(--g-mono); font-size: var(--g-t-mono); letter-spacing: var(--g-tk-mono); } /* La cursiva editorial del segundo término */ .g-enfasis { font-style: italic; } /* ---- Acción ---- */ .g-btn { display: inline-block; padding: var(--g-s-3) var(--g-s-6); border: 1px solid var(--g-accion); background: transparent; color: var(--g-accion); font-family: var(--g-mono); font-size: var(--g-t-mono); letter-spacing: var(--g-tk-mono); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background var(--g-dur) var(--g-ease), color var(--g-dur) var(--g-ease); } .g-btn:hover, .g-btn:focus-visible { background: var(--g-accion); color: var(--g-accion-texto); } .g-btn:focus-visible { outline: 1px solid var(--g-accion); outline-offset: 3px; } /* ---- Superficie clara ---- */ .g-warm { background: var(--g-fondo-claro); color: var(--g-tinta-oscura); } /* ---- Contenedores ---- */ .g-wrap { max-width: var(--g-ancho-max); margin-inline: auto; padding-inline: var(--g-margen); } .g-medida { max-width: var(--g-medida); } /* ---- Líneas: máximo 1px, siempre ---- */ .g-line { border-top: 1px solid currentColor; opacity: .18; } @media (min-width: 768px) { :root { --g-margen: var(--g-s-7); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; scroll-behavior: auto; } } /* ══════════════════════════════════════════════════════════════ AÑADIDO 2026-08-11 · aprobado por N9 sobre el standalone del home (std-home-futuristica-2026-08-10-R10). Nada de lo anterior fue modificado: esta hoja es un SUPERCONJUNTO de _xgaleria_2026-08-11.css. ══════════════════════════════════════════════════════════════ */ :root{ /* ── LOGO · canon 2026-08-11 · aprobado en std-navegacion ── alto: header y menu · firma: colofon, cierre del pliego */ --g-logo-alto: clamp(54px,15vw,62px); --g-logo-firma: clamp(64px,15vw,130px); /* ── ESCALA TIPOGRÁFICA · del aprobado 2026-08-07 ── */ --t-hero: clamp(34px,8.5vw,80px); --t-display: clamp(28px,6.4vw,58px); --t-title: clamp(25px,5.4vw,48px); --t-sub: clamp(20px,4.2vw,30px); --t-lead: clamp(17px,3.4vw,25px); --t-body: clamp(15px,2.2vw,18px); --u-nav: clamp(13px,1.8vw,15px); --u-link: clamp(14px,2.1vw,16px); --u-label: clamp(13px,1.6vw,13.5px); --u-micro: clamp(13px,1.8vw,13.5px); /* ── NUEVOS · nacidos del home · piso táctil 44px, piso tipo 13px ── */ --g-marco-lg: 72px; /* ≥1200 · el marco dejó de congelarse */ --g-marco-xl: 104px; /* ≥1600 */ --g-marco-xxl: 140px; /* ≥2000 */ --g-aire-regla: var(--space-5); /* ley de aire: línea nunca pegada */ --g-campo-alto: 48px; /* > 44px táctil obligatorio */ --g-campo-borde: var(--line2); --g-campo-foco: var(--tad-vida); --g-sec-lg: 128px; /* ≥1200 · era 175 */ --g-sec-xxl: 148px; /* ≥2000 · era 190 */ }