/* =====================================================
   COOKIEYES — overrides
   Plan gratuito, sin editor visual de diseño en su panel.
   El banner se pinta en el DOM de la propia página (no un
   iframe), así que sí se puede reestilar por CSS normal desde
   aquí. Los selectores (prefijo cky-) son suyos, no nuestros —
   pueden cambiar si CookieYes actualiza su marcado.

   !important es necesario en esta sección concreta, pese a la
   regla general del proyecto de evitarlo: CookieYes fija sus
   colores por defecto con estilos inline (p.ej.
   style="background-color: #0056a7"), que solo un !important
   puede ganar en especificidad. No usar fuera de este bloque.
   ===================================================== */

.cky-btn-revisit-wrapper {
    background-color: #1d2226 !important;
}

/* Preference-center buttons ("Rechazar todas", "Guardar mis preferencias",
   "Aceptar todas") — same two-tier button system already used across the
   site: "Aceptar" as the primary action (orange pill, dark navy text —
   theme.json's own default button colors), "Rechazar"/"Guardar" as the
   secondary/outline action (transparent, white border — same values as
   .pwb-btn-outline). border-radius isn't set inline by CookieYes, but its
   own stylesheet sets it with higher specificity than a bare class
   selector, so it needs !important here too to actually win. */
.cky-btn-accept {
    background-color: var(--wp--preset--color--custom-pwb-primary-color) !important;
    border-color: var(--wp--preset--color--custom-pwb-primary-color) !important;
    color: var(--wp--preset--color--custom-pwb-dark-navy-accent) !important;
    border-radius: 4px !important;
}

.cky-btn-reject,
.cky-btn-preferences,
.cky-btn-customize {
    background-color: transparent !important;
    border-width: 1px !important;
    border-color: var(--wp--custom--color--white) !important;
    color: var(--wp--custom--color--white) !important;
    border-radius: 4px !important;
}

/* Category toggles — CookieYes sets background-color inline via JS on
   check/uncheck, blue by default when active. var(--wp--preset--color--custom-pwb-primary-color) is the site's own
   accent color for interactive/checked states elsewhere (e.g.
   .pwb-experto__modal-checkbox's accent-color). Only the active/checked
   state is addressed here, per what was asked — the neutral grey shown
   when unchecked is left as CookieYes's own default. */
.cky-switch input[type="checkbox"]:checked {
    background-color: var(--wp--preset--color--custom-pwb-primary-color) !important;
}

/* =====================================================
   Large-screen typography extension
   Same root cause as the hero title and .solution__stage fixes: every
   fluid clamp() in the type scale (theme.json's h1/h2/h3, and these two
   component titles) was tuned to reach its max at ~1440px viewport width
   and sits flat from there on — on QHD (2560px) and other large monitors,
   text stops scaling while the surrounding layout keeps growing, reading
   as disproportionately small. Each rule below continues growth from the
   exact same value already reached at 1440px (zero change below that) up
   to a new, proportionally larger cap at 2560px — same +33% ratio applied
   uniformly, same method already used for .hero__title.
   ===================================================== */
@media (min-width: 1440px) {
    h1 {
        font-size: clamp(3rem, 1.714rem + 1.429vw, 4rem);
    }

    h2 {
        font-size: clamp(3rem, 1.714rem + 1.429vw, 4rem);
    }

    h3 {
        font-size: clamp(2.25rem, 1.286rem + 1.071vw, 3rem);
    }

    .roi__card-title {
        font-size: clamp(2rem, 1.196rem + 0.893vw, 2.625rem);
    }

    .pwb-proyecto-hero__title {
        font-size: clamp(4.5rem, 2.571rem + 2.143vw, 6rem);
        max-width: clamp(820px, 469px + 24.375vw, 1093px);
    }

    /* These title blocks' own containers didn't grow to match — same text,
       now bigger, was wrapping into noticeably more lines than before
       inside an unchanged box. Widened by the same +33% ratio as the text
       itself, so the line-wrapping behaves about the same as it did pre-fix. */
    .solution__header {
        max-width: clamp(760px, 434.71px + 22.589vw, 1013px);
    }

    .problem__header,
    .last-cta__header {
        max-width: clamp(1440px, 822.86px + 42.857vw, 1920px);
    }
}