/* ==========================================================================
   PROFESSIONAL WEB — Punto de entrada de estilos.
   Orden de cascada: tokens → base → layout → componentes.
   Cada página solo necesita enlazar este archivo.
   ========================================================================== */

@layer tokens, base, layout, components;

@import url("css/tokens.css") layer(tokens);
@import url("css/base.css") layer(base);
@import url("css/layout.css") layer(layout);

@import url("css/components/button.css") layer(components);
@import url("css/components/navbar.css") layer(components);
@import url("css/components/page-menu.css") layer(components);
@import url("css/components/hero.css") layer(components);
@import url("css/components/marquee.css") layer(components);
@import url("css/components/feature.css") layer(components);
@import url("css/components/page-header.css") layer(components);
@import url("css/components/gallery.css") layer(components);
@import url("css/components/anatomy.css") layer(components);
@import url("css/components/step.css") layer(components);
@import url("css/components/plan.css") layer(components);
@import url("css/components/table.css") layer(components);
@import url("css/components/faq.css") layer(components);
@import url("css/components/cta.css") layer(components);
@import url("css/components/tools.css") layer(components);
@import url("css/components/legal.css") layer(components);
@import url("css/components/footer.css") layer(components);
@import url("css/components/glow.css") layer(components);

/* Fondo negro fuera de las capas y con más especificidad: al ser <main>
   transparente (líneas de fondo), garantiza el negro (en <html>) aunque un visor
   externo intente anular el fondo de html/body. */
:root:root {
    background-color: #000000;
}

/* El body NO debe pintar fondo propio: taparía la portada y las líneas,
   que están en capas negativas (z-index < 0). */
:root:root body {
    background-color: transparent;
}