/* EL NÚCLEO DE LA PORTADA (agrupa.co, 2026-10-22).

   El hero de la portada sobre morado oscuro: la mancha de colores se apaga y
   en su lugar late el núcleo (`site-nucleo.js`), centrado detrás del titular,
   con la rejilla de puntos de borde a borde. Todo cuelga de `data-nucleo` en
   el <html>, así que solo pesa en la página que lo pide. */

/* La mancha y la rejilla de CSS se apagan: el lienzo del núcleo cubre todo el
   hero y pinta él mismo la rejilla, ahora de partículas que la onda mueve. */
html[data-nucleo] .hero-art,
html[data-nucleo] .hero::before { display: none; }
html[data-nucleo] .nucleo-lienzo {
    position: absolute; inset: 0; z-index: -1;
    width: 100%; height: 100%; display: block; pointer-events: none;
}
/* Un velo oscuro sobre el lienzo entero (núcleo y rejilla), por debajo de las
   pastillas (z-index 2) y de los textos y botones (z-index 3). */
html[data-nucleo] .hero::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: #00000075;
}

/* El fondo de la entrada: morado oscuro, para que el núcleo contraste. El
   color exacto lo pone la barra «Color del fondo» (variable --nucleo-fondo). */
html[data-nucleo] .hero {
    background:
        radial-gradient(120% 90% at 50% 38%, color-mix(in srgb, var(--nucleo-fondo, #1b1030) 82%, #7c5cf0) 0%, var(--nucleo-fondo, #1b1030) 62%);
    --site-ink: #f4f1ff;
    --site-dim: #c3bcdf;
    --site-faint: #948db5;
    --site-line: rgba(244, 241, 255, .12);
    --site-line-hi: rgba(244, 241, 255, .2);
    color: var(--site-ink);
}
/* El hero (y con él el lienzo y el velo) arranca en el borde de arriba, por
   detrás de la barra: sube lo que ella ocupa y lo devuelve en el relleno, así
   el contenido no se mueve. El JS mide la barra en --nucleo-arriba. */
html[data-nucleo] .hero {
    margin-top: calc(-1 * var(--nucleo-arriba, 80px));
    padding-top: calc(clamp(56px, 9vw, 120px) + var(--nucleo-arriba, 80px));
}
/* Lo que queda arriba del hero (detrás de la barra, o al estirar el scroll
   hacia arriba) va del mismo morado: una franja pintada como imagen encima del
   color de siempre del body, que sigue siendo el suyo. */
html[data-nucleo] body.site {
    background-image: linear-gradient(var(--nucleo-fondo, #1b1030), var(--nucleo-fondo, #1b1030));
    background-size: 100% 240px; background-repeat: no-repeat;
}
/* Todo el titular en la misma tinta, y una sombra negra sutil en el texto
   para que se despegue del núcleo (los botones y las pastillas no la llevan). */
html[data-nucleo] .hero .hero-title em { color: inherit; }
/* El titular sin salto a mano: en ancho «en un solo lugar.» baja a su renglón;
   en el teléfono el navegador equilibra los renglones (con el salto fijo
   quedaba «empresa» sola en el del medio). */
html[data-nucleo] .hero .hero-title { text-wrap: balance; }
@media (min-width: 640px) { html[data-nucleo] .hero .hero-title em { display: block; } }
html[data-nucleo] .hero { text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 18px rgba(0, 0, 0, .35); }
html[data-nucleo] .hero :is(.site-btn, .nucleo-pastilla) { text-shadow: none; }
/* Los títulos, con un halo del morado del fondo en vez de la sombra negra. */
html[data-nucleo] .hero :is(h1, h2, h3) { text-shadow: 0 0 30px #261a47; }
/* Textos y botones van encima de todo: del núcleo, de la rejilla y de las
   pastillas (que están en z-index 2). */
html[data-nucleo] .hero > :not(.nucleo-lienzo, .hero-art, .nucleo-pastillas) { position: relative; z-index: 3; }
/* La capa de las pastillas: cada pastilla trae su z-index (las cercanas encima),
   pero la capa entera es un solo nivel, el 2, y no se sube a los botones. */
html[data-nucleo] .nucleo-pastillas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
html[data-nucleo] .hero .site-btn-primary { background: #f4f1ff; color: #17141f; }
html[data-nucleo] .hero .site-btn-primary .site-btn-note { color: #6b6585; }
/* «Calcula cuánto ahorras», de vidrio sobre el núcleo (Renzo, 2026-10-23). Es
   el único desenfoque encima del lienzo animado: un botón chico y sin el
   filtro SVG (ver la nota de la barra). */
html[data-nucleo] .hero .site-btn-ghost {
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    color: #f4f1ff; background: rgba(244, 241, 255, .1);
    border: 1px solid rgba(244, 241, 255, .32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* Nada desenfoca lo que tiene detrás: con el lienzo animado debajo, cada
   backdrop-filter obliga a volver a filtrar en cada cuadro (con el racimo de
   pastillas, en Chrome con ventana, el núcleo caía de 120 a 8 cuadros por
   segundo). Las pastillas llevan fondo casi opaco; la barra conserva
   el vidrio esmerilado, pero sin el filtro SVG del vidrio líquido. */
html[data-nucleo] .site-nav {
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    backdrop-filter: blur(8px) saturate(180%);
}

/* Las pastillas de los puntos (`.nucleo-pastilla`) viven en `site.css`: las
   usan el núcleo del hero y la rejilla del alta (`site-rejilla.js`). */