:root{ /* Tema CLARO: fondo blanco/azulado + acentos azul oscuro */ --navy-900:#f3f7fd;--navy-800:#e9f1fb;--navy-700:#e0ebf8;--navy-600:#d4e3f5; --blue-royal:#1452d6;--blue-bright:#2e7bff;--blue-sky:#1f6fe0; /* (los nombres --red* se conservan, pero ahora son AZULES) */ --red:#1452d6;--red-bright:#2e7bff;--red-deep:#1140b0;--gold:#2e7bff; --ink:#0b1a3a;--muted:#4a5b7a;--line:rgba(20,60,140,.16); --card:rgba(255,255,255,.72);--glass:rgba(255,255,255,.82); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Sora',sans-serif;background:var(--navy-900);color:var(--ink);overflow-x:hidden;line-height:1.5} .bg-field{position:fixed;inset:0;z-index:-2;background: radial-gradient(1100px 700px at 78% -8%, rgba(46,123,255,.05), transparent 60%), radial-gradient(900px 600px at 8% 12%, rgba(20,82,214,.035), transparent 55%), radial-gradient(800px 500px at 50% 108%, rgba(20,82,214,.02), transparent 60%), linear-gradient(180deg,#fcfdff 0%,#f5f7fb 50%,#fcfdff 100%);} .bg-grid{position:fixed;inset:0;z-index:-1;opacity:.5; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px;mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%);} .grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} .wrap{max-width:1240px;margin:0 auto;padding:0 28px;position:relative;z-index:1} /* Cabecera CLARA (blanca), a juego con el cuerpo y el pie. `:not(.adm-nav)` porque el panel /admin reutiliza esta hoja y su barra lateral también es un