/*
 * base.css - brand backdrop, GeneratePress container resets and global
 * typography. Everything here is unscoped: it applies to every page.
 */

/* ==========================================================================
   BRAND BACKDROP

   The gradient is painted once, fixed to the viewport, behind everything.

   It lives here rather than in the app shell because the funnel landings
   build their own document and never load the shell, but still need the
   backdrop - every tinted area on the site is glass, and glass over nothing
   is just a flat colour.

   position:fixed rather than a plain background image: those funnel pages
   scroll the document normally, and a scrolling gradient would stretch over
   the full page height instead of staying put behind the content.

   No !important anywhere below. GeneratePress prints its Customizer colours
   as inline CSS attached to the generate-style handle, and de-base is
   enqueued after it, so equal-specificity rules here win on cascade order
   alone.
   ========================================================================== */

html {
    background-color: var(--de-background-color);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: var(--de-gradient-hero);
    pointer-events: none;
}

/* The canvas has to be see-through all the way down or the backdrop is
   covered by the first opaque wrapper GeneratePress prints. */
body,
#page,
#page.site,
.site-main,
#primary .site-main,
main#primary {
    background: transparent;
}


/* ==========================================================================
   LINKS

   Nothing in this theme has ever set a link colour, so every link that a
   component does not colour itself has been painted by GeneratePress's own
   Customizer settings - the leftover teal and green. That is also why the
   header lockup came out green: the mark is drawn in currentColor and
   inherited it from the anchor around it.

   One rule takes every uncoloured link onto the palette. Components that
   colour their own links (.de-boton, .de-nav-item, .de-menu-lista,
   .de-tarjeta-titulo) all win on specificity, so none of them change.
   ========================================================================== */

a {
    color: var(--de-primary-color);
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--de-cta-color);
}


/* ==========================================================================
   GENERATEPRESS CONTAINER RESET (full 100% width)
   ========================================================================== */

#page,
#page.site,
#page.grid-container,
#page.site.grid-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.site-main,
#primary .site-main,
main#primary {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
}

.site-footer {
    display: none !important;
}


/* ==========================================================================
   GLOBAL TYPOGRAPHY
   ========================================================================== */

body, p, .entry-content, .entry-content p, .wp-block-paragraph, .wp-block-group {
    font-family: var(--fuente-principal);
    font-size: 20px;
    color: var(--color-texto);
    line-height: 1.6em;
    font-weight: normal;
}

h1, .entry-content h1 {
    font-family: var(--fuente-principal);
    font-size: 32px;
    color: var(--color-texto);
    line-height: 1.6em;
    font-weight: bold;
}

h2, .entry-content h2 {
    font-family: var(--fuente-principal);
    font-size: 28px;
    color: var(--color-texto);
    line-height: 1.6em;
    font-weight: bold;
}

h3, .entry-content h3 {
    font-family: var(--fuente-principal);
    font-size: 20px;
    color: var(--color-texto);
    line-height: 1.6em;
    font-weight: bold;
}

/* --- Tablet (up to 1024px) --- */
@media (max-width: 1024px) {
    body, p, .entry-content, .entry-content p, .wp-block-paragraph, .wp-block-group { font-size: 18px; }
    h1, .entry-content h1 { font-size: 30px; }
    h2, .entry-content h2 { font-size: 25px; }
    h3, .entry-content h3 { font-size: 18px; }
}

/* --- Mobile (up to 768px) --- */
@media (max-width: 768px) {
    body, p, .entry-content, .entry-content p, .wp-block-paragraph, .wp-block-group { font-size: 16px; }
    h1, .entry-content h1 { font-size: 22px; }
    h2, .entry-content h2 { font-size: 20px; }
    h3, .entry-content h3 { font-size: 16px; }
}