/* ============================================================================ IA² WEEK — paleta, reset y tipografia de la landing. ESTA ES LA ÚNICA FUENTE DE LA PALETA DE ESTA PÁGINA. Si un color cambia, cambia aqui y en ningun otro archivo: ia2week.css no escribe hexadecimales, solo usa estas variables. De donde salen los valores -------------------------- Estan copiados uno a uno de la maqueta (IA2 Week Landing), que los llevaba escritos a mano en cada atributo style. No se han "corregido" ni redondeado: la maqueta es la que aprobo el diseño y cualquier ajuste de tono es una decision de marca, no de conversion. Ojo con esto si algun dia se comparan las dos landings: el violeta de aqui (#8520D6) NO es el de gerpro-landing-child (#8018D8), y el violeta claro (#C34EFC) no es su #C048F8. Son paletas hermanas pero distintas, cada una muestreada de su propio arte. No las unifique sin que lo pida marca. Y no es la paleta del sitio principal: el resto de gerpro.co es indigo #292E59 con acento ambar #EC8E39. Esta pieza es morada de punta a punta. ============================================================================ */ :root{ /* ── Morados de fondo ────────────────────────────────────────────────────── De mas oscuro a mas claro. El hero es un degradado grape → field → grape; las secciones oscuras usan grape o ink. */ --iaw-ink:#1E0E29; /* el mas profundo — cierre y pie */ --iaw-grape:#240843; /* morado dominante — hero y seccion 2 */ --iaw-field:#4B1B7B; /* morado claro — centro del degradado */ /* ── Violetas de marca ──────────────────────────────────────────────────── --iaw-vio es el de los botones; --iaw-vio-hi el del texto destacado, los numeros y el hover. El lila es el tono de apoyo de los textos secundarios sobre morado. */ --iaw-vio:#8520D6; --iaw-vio-hi:#C34EFC; --iaw-lila:#9C4BC4; /* ── Cian de apoyo ──────────────────────────────────────────────────────── Aparece solo en dos halos del hero, al 6-10 % de opacidad. No se usa en texto: sobre morado no llega al contraste minimo. */ --iaw-cian:#59F2ED; /* ── Texto ──────────────────────────────────────────────────────────────── Sobre morado: blanco puro para titulares y --iaw-crema (un blanco roto, calido) para el cuerpo, que a 18 px cansa menos que el blanco puro. Sobre claro: --iaw-ink para titulares y --iaw-tinta para el cuerpo. */ --iaw-blanco:#FFFFFF; --iaw-crema:#F6EDE8; --iaw-tinta:#3A3348; /* ── Superficies claras ─────────────────────────────────────────────────── El fondo de la pagina no es blanco puro: #FBFAFC tiene una gota de violeta y las tarjetas blancas se separan de el sin necesidad de sombra fuerte. */ --iaw-papel:#FBFAFC; --iaw-borde:#E6E0EE; /* ── Vidrio sobre morado ────────────────────────────────────────────────── Las tarjetas de las secciones oscuras son blanco a muy baja opacidad con borde violeta. El borde NO es blanco a proposito: sobre este morado un borde blanco se ve gris y apaga la pieza. */ --iaw-vidrio:rgba(255,255,255,.04); --iaw-vidrio-hi:rgba(255,255,255,.05); --iaw-canto:rgba(195,78,252,.25); --iaw-canto-hi:rgba(195,78,252,.4); /* ── Radios ─────────────────────────────────────────────────────────────── 20px para contenedores y tarjetas grandes, 16 para las del acordeon y 12 para botones. Es la escala de la maqueta. */ --iaw-r:20px; --iaw-r-md:16px; --iaw-r-sm:12px; /* ── Tipografia ─────────────────────────────────────────────────────────── Poppins y nada mas. Los pesos que existen estan en fonts.css: si usa 300 o 200 aqui, el navegador lo simula y el titular se ve mal. */ --iaw-fuente:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Monoespaciada, y solo para UNA cosa: el rotulo tecnico de la 404 ("Error 404 · ruta no encontrada"). Es la del sistema y no un archivo mas — el paquete no descarga ninguna fuente extra por esto. El tema hermano si lleva IBM Plex Mono para sus etiquetas de consola; aqui, con un rotulo de cuatro palabras, no se justifica pedirle 14 KB al visitante. */ --iaw-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /* ── Medidas de composicion ─────────────────────────────────────────────── Tres anchos de caja: el hero es el mas ancho, el cuerpo de secciones usa 1080 y el acordeon 820, que es lo que se lee comodo en una linea. */ --iaw-caja:1080px; --iaw-caja-ancha:1240px; --iaw-caja-barra:1160px; --iaw-caja-estrecha:820px; /* Alto del formulario de Zoho. Va en variable porque es el numero que hay mas probabilidad de tener que tocar: un iframe de otro dominio no puede decirle a la pagina cuanto mide, asi que si se añade o se quita un campo en Zoho hay que corregirlo a mano. No hace falta editar este archivo — se cambia con el filtro gerpro_ia2week_form_alto (ver inc/ia2week-landing.php) y la plantilla lo escribe encima. */ --iaw-form-alto:780px; /* Alto de la barra fija. Lo usa scroll-padding-top para que un ancla no quede tapada por la barra al saltar. Si cambia el alto del logotipo o el relleno de la barra, cambie este numero. */ --iaw-barra:84px; } /* ============================================================================ RESET Acotado a la landing: TODO cuelga de .ia2week-landing, que es la clase que page-ia2-week.php pone en el . Asi este archivo no puede afectar al escritorio de WordPress ni a otra pagina del sitio aunque se encole por error. La excepcion es , que no lleva la clase porque no la pone la plantilla. Por eso el scroll-behavior se acota con :has(): asi el desplazamiento suave y el scroll-padding solo se aplican cuando el body es el de la landing, y no en el resto del sitio. En un navegador sin :has() (Firefox anterior al 121) el salto de ancla sale instantaneo en vez de suave y la barra fija puede tapar el titulo de la seccion un instante. Es una degradacion aceptable: la alternativa —ponerlo en a secas— cambiaria el comportamiento de todas las paginas del sitio. ============================================================================ */ html:has(body.ia2week-landing){ scroll-behavior:smooth; scroll-padding-top:var(--iaw-barra); } body.ia2week-landing{ margin:0; padding:0; background:var(--iaw-papel); font-family:var(--iaw-fuente); font-size:16px; line-height:1.6; color:var(--iaw-tinta); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; /* los halos del hero se salen del ancho a proposito */ } .ia2week-landing *, .ia2week-landing *::before, .ia2week-landing *::after{ box-sizing:border-box; } .ia2week-landing h1, .ia2week-landing h2, .ia2week-landing h3, .ia2week-landing h4, .ia2week-landing p, .ia2week-landing ul, .ia2week-landing ol, .ia2week-landing figure{ margin:0; padding:0; } /* Las listas van sin viñeta ni numero del navegador. Las tres listas de la pagina —las tres preguntas, los cuatro pasos y "para quien es"— son
    /