/* =========================================================================== Fundación Superarse — hoja de estilos del sitio Kimera AI Tech · 2026 Una sola hoja para todo el sitio. Las reglas propias de una página van agrupadas al final, bajo la clase que el lleva en esa página. =========================================================================== */ /* Montserrat (SIL Open Font License 1.1) — variable 100..900, subconjunto latino. Se sirve desde el propio servidor: no se pide a Google, no viaja ningún dato del visitante a terceros y no hay salto de fuente al cargar. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fuentes/montserrat.woff2) format('woff2-variations'); } /* --------------------------------------------------------------------------- TOKENS — manual de marca Principales #192d51 · #e6a328 · Secundarios #5b79aa #7989cf #916f2b Texto #454545 (regla de marca: nunca negro) --------------------------------------------------------------------------- */ :root { /* Azul más profundo que el del manual, para que el naranja tenga contra qué pegar */ --noche: #101f3c; --noche-deep: #0a1428; /* Acento: el naranja que ya vive en el logo. Reemplaza al dorado apagado, que sobre azul noche envejecía la página. */ --dorado: #fb9b27; --dorado-hi: #ffb04f; --arena: #fb9b27; --pnl: #5b79aa; --cert: #7989cf; --pm: #916f2b; --papel: #f6f7fb; --superficie: #ffffff; --tinta: #454545; --tinta-alta: #1f2a3d; --tenue: #6f7787; --linea: #dfe3ec; --sobre-noche: #eef1f7; --sobre-noche-tenue: #9fb0cb; --linea-noche: rgba(255,255,255,.14); /* Una sola familia geométrica, con contraste de pesos */ --display: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --body: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --col: 1120px; --r: 4px; --curva: cubic-bezier(.22,.72,.24,1); } @media (prefers-color-scheme: dark) { :root { --papel: #0c1526; --superficie: #122038; --tinta: #ccd4e2; --tinta-alta: #f0f3f8; --tenue: #8794aa; --linea: #22314c; --noche: #14243f; --noche-deep: #0a1224; } } :root[data-theme="dark"] { --papel: #0c1526; --superficie: #122038; --tinta: #ccd4e2; --tinta-alta: #f0f3f8; --tenue: #8794aa; --linea: #22314c; --noche: #14243f; --noche-deep: #0a1224; } :root[data-theme="light"] { --papel: #f6f7fb; --superficie: #ffffff; --tinta: #454545; --tinta-alta: #1f2a3d; --tenue: #6f7787; --linea: #dfe3ec; --noche: #101f3c; --noche-deep: #0a1428; } /* --------------------------------------------------------------------------- BASE --------------------------------------------------------------------------- */ * { box-sizing: border-box; } body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--body); font-size: 16.5px; font-weight: 400; line-height: 1.7; letter-spacing: -.003em; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { text-wrap: balance; margin: 0; } p { margin: 0; } img, svg { max-width: 100%; } /* Las imágenes llevan width/height en el HTML para que el navegador reserve el espacio y la página no salte al cargar. Sin este height:auto, esos atributos fijarían el alto real y romperían las proporciones. */ img { height: auto; } a { color: inherit; } :focus-visible { outline: 2px solid var(--dorado); outline-offset: 3px; border-radius: 2px; } .col { width: 100%; max-width: var(--col); margin: 0 auto; padding: 0 24px; } .angosta { max-width: 820px; } /* salto directo al contenido, para lectores de pantalla y teclado */ .saltar { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--dorado); color: #291a05; font-weight: 700; padding: 12px 20px; border-radius: 0 0 var(--r) 0; text-decoration: none; } .saltar:focus { left: 0; } /* --------------------------------------------------------------------------- HEADER El header queda blanco siempre, también en modo oscuro: el logotipo es azul y sobre fondo oscuro desaparecería. Es una decisión, no un olvido. --------------------------------------------------------------------------- */ header.sitio { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid #e2e6ee; transition: box-shadow .3s var(--curva); } header.sitio.compacto { box-shadow: 0 8px 26px rgba(16,31,60,.09); } header.sitio .col { display: flex; align-items: center; gap: 28px; min-height: 78px; transition: min-height .3s var(--curva); } header.sitio.compacto .col { min-height: 62px; } .marca { display: flex; align-items: center; text-decoration: none; } .marca img { height: 52px; width: auto; display: block; transition: height .3s var(--curva); } header.sitio.compacto .marca img { height: 42px; } nav.principal { display: flex; gap: 26px; margin-left: auto; font-size: 14.5px; } nav.principal a { position: relative; color: #1f2a3d; text-decoration: none; padding: 4px 0; } nav.principal a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--dorado); transform: scaleX(0); transform-origin: right; transition: transform .32s var(--curva); } nav.principal a:hover::after, nav.principal a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .acciones { display: flex; gap: 10px; align-items: center; } /* --------------------------------------------------------------------------- BOTONES --------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--body); font-size: 14.5px; font-weight: 600; padding: 10px 18px; border-radius: var(--r); text-decoration: none; border: 1.5px solid transparent; background: none; /* los