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

:root {
    --pwb-section-px: max(20px, 5vw);
}

body {
    background-color: var(--wp--preset--color--custom-pwb-main-background);
    overflow-x: clip;
}

/* Lenis drives the page's scroll position itself; the browser's own native
 * scroll anchoring (which re-adjusts scrollTop on its own whenever content
 * anywhere resizes, to keep whatever it picks as "the anchor" visually
 * still) fights it — confirmed directly: async content swaps that grow the
 * page (e.g. the tipologías viewer loading a longer tipología) made the
 * browser silently shift scrollTop out from under an already-correct Lenis
 * scroll, well after Lenis had finished animating to it. Same guidance as
 * Lenis's own docs for this exact conflict. */
html {
    overflow-anchor: none;
}

/* Remove template-level block gap above main content area and footer template part */
main.wp-block-group,
footer.wp-block-template-part {
    margin-block-start: 0;
}

/* =====================================================
   SHARED CONTENT-WIDTH WRAPPER
   Use inside any section that bleeds to 100% width with its own
   background (image or color) — .pwb-fullbg or a plain full-width
   <section> — to keep that section's actual content lined up with the
   header logo and every other content column on the site, at any
   viewport width, on any template (home, single-proyectos, or any
   future page built in the editor).

   Deliberately does NOT hardcode a content width or a padding number:
   max-width reads theme.json's settings.layout.contentSize live via
   WordPress's own --wp--style--global--content-size, so it can never
   drift out of sync the way .pwb-proyecto-hero__inner's old hardcoded
   1728px did after contentSize changed to 1440px and nobody updated it.
   ===================================================== */
.pwb-content-width {
    width: calc(100% - (var(--pwb-section-px) * 2));
    max-width: var(--wp--style--global--content-size, 1440px);
    margin-inline: auto;
}

/* Same technique as .pwb-content-width above, but without its contentSize
   cap — for sections that should track the header logo's alignment
   instead (see .pwb-site-header .pwb-header-inner's own max-width:none,
   further down) rather than the narrower boxed-content column every
   other card/grid section uses. */
.pwb-wide-width {
    width: calc(100% - (var(--pwb-section-px) * 2));
    margin-inline: auto;
}

/* Sidebar index/TOC list — e.g. the "Asistencia" page's left column.
   Own opacity (70%) rather than core/list's sitewide default (75%,
   matching paragraphs), no bullets, no block margin (sits flush at the
   top of its column), and white links instead of the sitewide orange
   link color — full-opacity white on hover instead of a color change. */
.pwb-index-list {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.pwb-index-list li{
    margin-bottom: 10px;
}


.pwb-index-list a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.pwb-index-list a:hover {
    color: #ffffff;
}

/*
 * WordPress has-global-padding accumulation fix
 *
 * With useRootPaddingAwareAlignments:true + styles.spacing.padding in theme.json,
 * WordPress applies padding-inline to MULTIPLE DOM levels simultaneously:
 *   1. .wp-site-blocks          — from styles.spacing.padding (theme.json)
 *   2. main.wp-block-group      — layout:constrained → has-global-padding
 *   3. .wp-block-post-content   — layout:constrained → has-global-padding  ← canonical single source
 *   4. inner section blocks     — layout:constrained → has-global-padding  ← unwanted
 *
 * Visual horizontal padding must come from ONE source only: .wp-block-post-content.
 * All other layers are zeroed here. This fix is fully systemic — no per-section rules.
 *
 * WordPress's own has-global-padding CSS already de-duplicates nested levels (a
 * .has-global-padding nested inside another one gets zeroed automatically) — but
 * that auto-dedup also zeroes .wp-block-post-content itself, leaving NOTHING with
 * real padding between 782px and the content-width breakpoint (~1440px): too
 * narrow for .pwb-content-width's max-width to kick in, too wide for the mobile
 * padding override. Restored explicitly below so post-content keeps the single
 * source of padding this whole fix is named after, at every width.
 */
body .wp-site-blocks {
    padding-inline: 0;
}

.wp-block-post-content.has-global-padding {
    padding-inline: var(--wp--style--root--padding-left, max(20px, 5vw));
}

main.wp-block-group.has-global-padding {
    padding-inline: 0;
}

/* WordPress's own .has-global-padding > .alignfull margin-cancelling rule
   still fires on main (it still carries the has-global-padding class,
   regardless of the padding-inline:0 above) — it blindly reads the
   --wp--style--root--padding-left/right variables rather than main's
   actual (now zero) padding, pushing every alignfull section placed
   directly in main (e.g. archive-proyectos.html's banner and grid, which
   don't go through .wp-block-post-content at all) out past both edges by
   that same amount. Zeroed back here since main genuinely has none to
   cancel. */
main.wp-block-group.has-global-padding > .alignfull {
    margin-left: 0;
    margin-right: 0;
}

/* Any section that is BOTH alignfull and has-global-padding (any full-width
   group using layout:constrained — the header, and full-width patterns like
   .problem/.last-cta) would otherwise keep WordPress's own padding-inline on
   top of its inner content's max-width:1440px centering: two layers of
   spacing stacked, which only happens to match .wp-block-post-content's
   single-layer centering while there's slack space beyond 1440px wide.
   Below that, the section sits visibly further in than the real content
   edge. Zeroed here, site-wide, for the same reason as everything else on
   this page: one source of horizontal padding, on every template. */
.alignfull.has-global-padding {
    padding-inline: 0;
}

.alignfull .has-global-padding:not(.alignfull) {
    padding-inline: 0;
}

/* alignfull breakout fix: WP's generated negative margins are based on .wp-site-blocks
   having the root padding, but we've zeroed that and kept only .wp-block-post-content's
   padding as the single visual source. This rule applies the correct negative margins
   explicitly so editors can use "Full width" + background color without any extra class.
   Scoped to this breakpoint on purpose: below it, sections shouldn't bleed edge-to-edge
   at all (there's no slack width for a "breakout" to mean anything) — keeping the rule
   itself from ever matching there is simpler and safer than fighting its !important with
   another one later. */
@media (min-width: 782px) {
    /* Cancelling exactly .wp-block-post-content's own padding (the previous
       approach here) only reaches the true viewport edge as long as
       post-content is itself unconstrained. Past ~1640px wide, main's
       constrained layout also centers post-content via auto margins (its
       max-width:1440px kicks in) — margin the same amount either side, so
       the section's own horizontal center still lands on the viewport's
       center. Cancelling only the padding left every alignfull section
       (hero, proyectos-grid, tipologías, this rule's own past self) short
       of the edge by exactly that centering margin, above that width.
       width:100vw + margin:calc(50% - 50vw) is immune to this: the 50%
       resolves against post-content's own (possibly narrower, possibly
       off-center-canceling) content width, and algebraically that always
       lands the section at the true viewport edge regardless of whatever
       padding/margin post-content itself has — because post-content is
       itself horizontally centered on the page. */
    .wp-block-post-content > .alignfull {
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        max-width: none !important;
    }
}

/* =====================================================
   FULL-WIDTH BACKGROUND UTILITY
   Add .pwb-fullbg to any wp:group section.
   Background source (pick one):
     A) Editor palette color — CSS class rules map it automatically.
     B) Editor custom color  — wp_footer JS helper reads the inline style
        and sets --pwb-fullbg-color (see functions.php).
     C) CSS modifier class   — .pwb-fullbg--dark / --secondary / --image
     D) Custom CSS field     — set --pwb-fullbg-color or --pwb-fullbg-image

   The ::before extends to 100vw regardless of the element's own width,
   as long as content is horizontally centered (which our layout guarantees).
   Horizontal overflow is handled by body { overflow-x: clip }.
===================================================== */

.pwb-fullbg {
    --pwb-fullbg-color: transparent;
    position: relative;
    isolation: isolate;
}

/* Strip the WP-applied background-color from the element itself;
   the ::before carries it instead, breaking out to full viewport width. */
.pwb-fullbg.has-background {
    background-color: transparent !important;
}

.pwb-fullbg::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    background-color: var(--pwb-fullbg-color);
    background-image: var(--pwb-fullbg-image, none);
    background-size: cover;
    background-position: center;
    z-index: -1;
}

/* Map WP editor palette selections to the custom property */
.pwb-fullbg.has-custom-pwb-main-background-background-color {
    --pwb-fullbg-color: var(--wp--preset--color--custom-pwb-main-background);
}

.pwb-fullbg.has-custom-pwb-secondary-background-background-color {
    --pwb-fullbg-color: var(--wp--preset--color--custom-pwb-secondary-background);
}

.pwb-fullbg.has-custom-pwb-dark-navy-accent-background-color {
    --pwb-fullbg-color: var(--wp--preset--color--custom-pwb-dark-navy-accent);
}

.pwb-fullbg.has-custom-pwb-primary-color-background-color {
    --pwb-fullbg-color: var(--wp--preset--color--custom-pwb-primary-color);
}

/* Modifier class aliases (for patterns / templates) */
.pwb-fullbg--dark {
    --pwb-fullbg-color: var(--wp--preset--color--custom-pwb-main-background);
}

.pwb-fullbg--secondary {
    --pwb-fullbg-color: var(--wp--preset--color--custom-pwb-secondary-background);
}

/* =====================================================
   BUTTONS
   ===================================================== */

.wp-block-button__link {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.wp-block-button__link:hover {
    opacity: 0.8;
}

.wp-block-button__link:active {
    transform: scale(0.98);
}

/* Secondary Button */
.wp-block-button.is-style-pwb-secondary .wp-block-button__link {
    background-color: var(--wp--preset--color--custom-pwb-primary-color);
    color: var(--wp--preset--color--custom-pwb-dark-navy-accent);
    letter-spacing: -0.1719px;
}

/* Outline Button */
.wp-block-button.is-style-pwb-outline .wp-block-button__link {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    font-weight: 500;
    letter-spacing: -0.625px;
}

/* Standalone outline button — use on any element (a, button) */
.pwb-btn-outline {
    display: inline-block;
    padding: 8px 24px;
    background: transparent;
    border: 1px solid #ffffff;
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--wp--preset--font-family--inter);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.625px;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.pwb-btn-outline:hover {
    opacity: 0.8;
}

.pwb-btn-outline:active {
    transform: scale(0.98);
}

/* Icon + label variant — e.g. "Ver vídeo" with a leading play icon */
.pwb-btn-outline--icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--wp--preset--font-family--inter);
}

.pwb-btn-outline--icon svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* =====================================================
   QUOTE BLOCK
   ===================================================== */

.wp-block-quote {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    padding: 0 !important;
    border-left: none !important;
}

.wp-block-quote cite {
    order: 1;
    flex: 0 0 180px;
    font-style: normal;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.45);
    padding-right: 40px;
    margin-block-start: 0;
}

.wp-block-quote cite strong {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    margin-bottom: 6px;
}

.wp-block-quote p {
    order: 2;
    flex: 1;
    margin: 0;
    margin-block-start: 0;
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.65;
    border-left: 2px solid var(--wp--preset--color--custom-pwb-primary-color);
    padding-left: 40px;
}

@media (max-width: 768px) {
    .wp-block-quote {
        flex-direction: column;
        gap: 20px;
    }

    .wp-block-quote p {
        order: 1;
        padding-left: 20px;
        font-size: clamp(15px, 4vw, 18px);
    }

    .wp-block-quote cite {
        order: 2;
        flex: none;
        padding-right: 0;
    }
}

/* =====================================================
   PWB SITE HEADER — MOBILE
===================================================== */

/* Hamburger toggle — hidden on desktop, shown on mobile */
.pwb-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #ffffff;
    padding: 10px;
    margin: -10px;
    line-height: 0;
}

.pwb-nav-toggle svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

@media (max-width: 960px) {

    /* Reduce header height to 90px: (90 - 40px logo) / 2 = 25px */
    .pwb-header-inner {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        /* The 160px actions-column floor above is sized for the desktop
           lang switcher + Acceder button; nav and most of the actions
           group are hidden here, leaving only the 44px hamburger, so that
           floor just overflows the padded header on narrow phones. */
        grid-template-columns: 1fr auto 1fr !important;
    }

    /* Hide desktop-only elements */
    .pwb-header-nav,
    .pwb-lang-switcher-wrap,
    .pwb-site-header .wp-block-buttons {
        display: none !important;
    }

    /* Show hamburger */
    .pwb-nav-toggle {
        display: flex;
    }

    /* Logo: 25px height, aligned left */
    .pwb-logo-link svg {
        height: 30px;
        width: auto;
    }
}

/* =====================================================
   MOBILE NAVIGATION OVERLAY
===================================================== */

.pwb-mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.pwb-mobile-nav-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0s linear 0s;
}

.pwb-mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: min(85vw, 480px);
    height: 100%;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: radial-gradient(100.91% 93.19% at -2.3% 0.81%, #1D2632 0%, #11171F 100%);
    padding-inline: var(--pwb-section-px);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.45s;
}

.pwb-mobile-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}

.pwb-mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90px;
    flex-shrink: 0;
}

.pwb-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #ffffff;
    padding: 10px;
    margin: -10px;
    line-height: 0;
}

.pwb-nav-close svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

.pwb-mobile-nav__links {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    flex: 1;
    min-height: 0;
}

.pwb-mobile-nav__link {
    font-family: var(--wp--preset--font-family--sora);
    font-size: 28px;
    font-weight: 400;
    line-height: 44px;
    color: #B5BDC8;
    text-decoration: none;
    display: block;
}

.pwb-mobile-nav__link.is-active {
    color: #ffffff;
}

/* WP Navigation block rendered inside the mobile overlay */
.pwb-mobile-nav .wp-block-navigation__container {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pwb-mobile-nav .wp-block-navigation .wp-block-navigation-item__content {
    font-family: var(--wp--preset--font-family--sora);
    font-size: 28px;
    font-weight: 400;
    line-height: 44px;
    color: #B5BDC8;
    text-decoration: none;
    display: block;
    padding: 0;
    background: none;
}

.pwb-mobile-nav .current-menu-item .wp-block-navigation-item__content,
.pwb-mobile-nav .current-menu-item .wp-block-navigation-link__content {
    color: #ffffff;
}

.pwb-mobile-nav .wp-block-navigation .wp-block-navigation-item__content:hover,
.pwb-mobile-nav .wp-block-navigation .wp-block-navigation-item__content:focus {
    background: none;
    color: #B5BDC8;
}

.pwb-mobile-nav__lang {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    flex-shrink: 0;
}

.pwb-mobile-nav__lang-option {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: #B5BDC8;
    background: transparent;
    border: none;
    text-align: left;
    padding: 0;
    text-decoration: none;
}

.pwb-mobile-nav__lang-option.is-active {
    color: #ffffff;
}

.pwb-mobile-nav__actions {
    display: flex;
    gap: 12px;
    padding-top: 32px;
    padding-bottom: 40px;
    flex-shrink: 0;
}

.pwb-mobile-nav__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 100px;
    font-family: var(--wp--preset--font-family--inter);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.pwb-mobile-nav__btn:hover {
    opacity: 0.8;
}

.pwb-mobile-nav__btn--outline {
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
}

.pwb-mobile-nav__btn--solid {
    background: var(--wp--preset--color--custom-pwb-primary-color);
    border: 1px solid var(--wp--preset--color--custom-pwb-primary-color);
    color: var(--wp--preset--color--custom-pwb-dark-navy-accent);
}

/* =====================================================
   ALIGNFULL BLOCKS
   Breakout to true edge-to-edge now comes from the single systemic rule
   (.wp-block-post-content > .alignfull, near the top of this file) shared
   by every full-bleed section on the site. A width:100vw + calc(50%-50vw)
   margin trick used to live here for Cover blocks and .hero specifically —
   it conflicted with that !important rule (which still won on margin,
   leaving width:100vw unopposed) and threw the left/right edges out of
   sync by exactly the root padding amount. Removed in favor of the same
   mechanism every other section already uses correctly.
===================================================== */

/* =====================================================
   HERO
   ===================================================== */

.hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    background-color: #0c1117;
}

.hero__columns {
    min-height: 100svh;
    align-items: stretch !important;
}

.hero__text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: var(--wp--style--root--padding-left, max(20px, 5vw));
}

.hero__video-col {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero__video {
    width: 100%;
    height: auto;
    max-height: 100svh;
    display: block;
    margin-left: -8%;
    /* Shifted up to match .hero__content's own -25% shift on the other
       column, so the video moves up together with the title/text instead
       of staying centered on its own while the text moves above it.
       transform doesn't reduce the box's own layout height, so without
       a compensating negative margin, the column (and .hero, stretched to
       it) would still reserve the space the video vacated, leaving an
       empty gap at the bottom of the section.
       margin percentages resolve against the CONTAINER'S WIDTH (even for
       margin-bottom), while translateY's percentage resolves against the
       element's OWN height — so they can't share the same -25% figure.
       This video is 1920×1080 (16:9) and rendered at width:100%, so its
       own height is exactly 0.5625× the container width; 25% of that
       height, expressed as a percentage of the container width, is
       25% × 0.5625 = 14.0625%. Recompute this if the video's aspect
       ratio ever changes. */
    transform: translateY(-25%);
    margin-bottom: -14.0625%;
}

/* "Ver vídeo" modal — fullscreen is native to <video controls>, no custom
   button needed for it. */
.hero__video-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    padding: 20px;
    box-sizing: border-box;
}

.hero__video-modal {
    width: 100%;
    max-width: 960px;
}

.hero__video-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.hero__video-modal-title {
    font-family: var(--wp--preset--font-family--sora);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

.hero__video-modal-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #ffffff;
    padding: 4px;
    line-height: 0;
    transition: opacity 0.15s;
}

.hero__video-modal-close:hover {
    opacity: 0.7;
}

.hero__video-modal-close svg {
    width: 22px;
    height: 22px;
}

.hero__video-modal-player {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.hero__video-modal-player video {
    display: block;
    width: 100%;
    max-height: 80vh;
}

.hero__content {
    /* Bounded so the upward shift can't exceed a safe margin regardless of
       viewport height. When the viewport is too short for .hero__text-col's
       flex centering to have spare room, the column grows to the content's
       natural size instead of clipping it, and the content's top then sits
       at exactly padding-top (120px here) before this shift is applied — so
       the shift's floor must stay under that 120px, with room to spare, or
       it pushes the title above .hero and under the sticky header. The
       mobile breakpoint below re-scales both bounds to its own 80px
       padding-top for the same reason. */
    transform: translateY(clamp(-100px, -25%, -60px));
}

.hero__title {
    color: #ffffff;
    /* Fluid only for this title (not the shared h1 clamp in theme.json,
       which tops out at 48px) — same 1.690vw slope as that clamp, recentered
       to a 36px/54px range so it keeps scaling smoothly instead of jumping
       between a flat size and the smaller global h1 scale. */
    font-size: clamp(2.25rem, 1.854rem + 1.690vw, 3.375rem);
    margin-top: 0;
    margin-bottom: 32px;
}

/* The clamp above tops out at exactly 1440px viewport width — anything
   wider (QHD 2560px and up, marketing's own monitors) renders the exact
   same 54px, unlike the rest of the hero which keeps growing with the
   viewport, so the title reads disproportionately small there. Continues
   the fluid growth from that same 54px past 1440px, reaching a new 72px
   ceiling at 2560px instead of freezing early. */
@media (min-width: 1440px) {
    .hero__title {
        font-size: clamp(3.375rem, 1.929rem + 1.607vw, 4.5rem);
    }
}

.hero__title .highlight {
    color: var(--wp--preset--color--custom-pwb-primary-color);
}

.hero__text {
    color: rgba(255, 255, 255, 0.75);
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 48px;
}

.hero__actions {
    gap: 16px;
}

@media (max-width: 781px) {
    /* .pwb-header-inner tracks .wp-block-post-content's edge exactly (see
       the .alignfull.has-global-padding fix above), which is 0 below the
       content's max-width breakpoint — same as every section here now
       that the breakout rule above doesn't apply at this width either.
       Give it back the same standard margin used everywhere else, so the
       header keeps moving together with the page content instead of
       sitting flush against the screen. */
    .pwb-header-inner {
        padding-inline: var(--wp--style--root--padding-left, max(20px, 5vw));
    }

    .hero__text-col {
        padding-inline: var(--wp--style--root--padding-left);
        padding-top: 80px;
        padding-bottom: 40px;
    }

    .hero__content {
        /* Same safety margin as the desktop rule, rescaled to this
           breakpoint's 80px padding-top. */
        transform: translateY(clamp(-60px, -25%, -40px));
    }

    .hero__video-col {
        padding-inline: var(--wp--style--root--padding-left);
        padding-bottom: 80px;
    }
}

/* =====================================================
   PROBLEM
   ===================================================== */

.problem {
    /* Pulls the section up over part of the empty space .hero leaves below
       its own (intentionally upward-shifted) content, instead of adding
       more empty space on top of it via padding-top. */
    margin-top: -100px;
    padding-top: 100px;
    padding-bottom: 120px;
}

.last-cta {
    padding-top: 120px;
    padding-bottom: 120px;
}

.problem__header {
    margin-inline: auto;
    margin-bottom: 72px;
}


.problem__title {
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 24px;
}

.problem__title strong {
    font-weight: 800;
    font-style: normal;
}

.problem__subtitle {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 0;
    margin-bottom: 0;
}

/* Cards container */
.problem__cards {
    background-color: var(--wp--preset--color--custom-pwb-secondary-background);
    border-radius: 16px;
    /* Same border color as the tipologías fase cards' active state
       (.roi__card.is-active), plus the same depth shadow the base
       .roi__card already carries. */
    border: 1px solid #768291;
    box-shadow: 2px 6px 12px 0 rgba(0, 0, 0, 0.25);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}


.problem__cards .wp-block-columns {
    gap: 0 !important;
    /* override WordPress inline column gap */
    margin-block: 0 !important;
}

.problem__card {
    position: relative;
    padding: 48px 40px;
}

/* Vertical separator between cards */
.problem__card:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12%;
    height: 76%;
    width: 1px;
    background: var(--wp--preset--color--custom-pwb-primary-color);
}

.problem__number {
    font-family: var(--wp--preset--font-family--sora);
    font-size: 48px;
    font-weight: 700;
    line-height: normal;
    color: var(--wp--preset--color--custom-pwb-primary-color);
    margin-top: 0;
    margin-bottom: 24px;
}

.problem__card-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 16px;
}

.problem__card-text {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0;
    margin-bottom: 0;
}

/* Scroll indicator */
.problem__scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 64px;
}

.problem__scroll-text {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

@keyframes scroll-arrow-bounce {
    0% {
        transform: translateY(0);
        opacity: 0.1;
    }

    75% {
        transform: translateY(10px);
        opacity: 1;
    }

    100% {
        transform: translateY(10px);
        opacity: 0.3;
    }
}

.problem__scroll-arrow {
    color: var(--wp--preset--color--custom-pwb-primary-color);
    animation: scroll-arrow-bounce 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .problem__scroll-arrow {
        animation: none;
    }
}

@media (max-width: 781px) {
    /* When cards stack vertically, convert the vertical column separator to a horizontal row separator */
    .problem__card:not(:first-child)::before {
        left: var(--pwb-section-px);
        top: 0;
        width: calc(100% - 2 * var(--pwb-section-px));
        height: 1px;
        background: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 153, 0, 0.80) 25%,
                rgba(255, 42, 84, 0.80) 50%,
                rgba(79, 0, 255, 0.80) 75%,
                transparent 100%);
    }
}

/* =====================================================
   SOLUTION
   ===================================================== */

.solution {
    background-color: var(--wp--preset--color--custom-pwb-main-background);
}

.solution__track {
    position: relative;
    /* Matches the scroll-scrubbed timeline's own designed length (see the
       "5 units over 400vh" comment in main.js) — this had drifted to 500vh,
       adding scroll distance the animation itself never used, which read
       as an unnecessarily long gap before the next section appears. */
    height: 400vh;
}

.solution__sticky {
    position: sticky;
    top: 0;
    box-sizing: border-box;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centers the header+card group as a whole once .solution__body is
       capped below (see there) — on tall viewports, extra room splits
       evenly above the header and below the card instead of collecting
       as one gap wedged between them. */
    justify-content: center;
    padding-top: 56px;
    overflow: clip;
}

.solution__header {
    text-align: center;
    flex-shrink: 0;
    max-width: 760px;
    margin-bottom: 32px;
    padding-inline: var(--wp--style--root--padding-left);
}


.solution__heading {
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 16px;
}

.solution__sub {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* Body wrapper — dots are absolute within it. flex:1 + min-height:0 still
   let it shrink below its cap on short viewports (so the card keeps
   fitting via .solution__stage's own max-height:100%); the cap itself
   (a little taller than the stage's natural max height at 1340px/2.35)
   stops it from ballooning to fill the rest of a tall 100vh sticky
   container, which is what pushed the card far from the header above. */
.solution__body {
    position: relative;
    flex: 1;
    min-height: 0;
    max-height: 600px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card stage — fills body height up to a proportioned cap, clips cards at
   the bottom. Width alone was capped at 1340px, but height still tracked
   100% of the sticky container's 100vh — on tall viewports (large/QHD
   monitors) that grew the card far past its capped width, leaving the
   text/media inside surrounded by empty space instead of scaling. Fixed
   aspect-ratio keeps the card's proportions consistent at every viewport;
   max-height keeps it within its container height on short viewports. */
.solution__stage {
    position: relative;
    width: 85%;
    max-width: 1340px;
    aspect-ratio: 2.35;
    max-height: 100%;
    overflow: hidden;
}

.solution__card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(100% - 64px);
    background-color: #ffffff;
    border-radius: 20px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    overflow: hidden;
    will-change: transform, opacity;
}

.solution__card-text {
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.solution__card-title {
    color: var(--wp--preset--color--custom-pwb-dark-navy-accent);
    margin: 0;
}

.solution__card-body {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(21, 28, 49, 0.6);
    margin: 0;
}

.solution__card-media {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.solution__card-media img {
    width: 85%;
    height: 85%;
    object-fit: contain;
    display: block;
}

/* Progress dots — centered with the card stage, near the right viewport edge.
 * top: calc(50% - 32px) corrects for cards having height: calc(100% - 64px),
 * so the card visual center is 32px above the body/stage midpoint. */
.solution__dots {
    position: absolute;
    right: 16px;
    top: calc(50% - 32px);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 2;
}

.solution__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.solution__dot.is-active {
    background-color: var(--wp--preset--color--custom-pwb-primary-color);
    transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
    .solution__track  { height: auto; }
    .solution__sticky { position: static; height: auto; overflow: visible; }
    .solution__body   { height: auto; }
    .solution__stage  { overflow: visible; height: auto; }
    .solution__card   { position: relative; opacity: 1; transform: none; margin-bottom: 24px; }
    .solution__dots   { display: none; }
}

@media (max-width: 781px) {
    /* Header scrolls naturally; only the card body locks to the viewport.
     * display:block removes the flex context so .solution__body is a plain
     * block child — otherwise flex:1 with height:auto parent collapses to 0,
     * stage.offsetHeight becomes 0 and GSAP sets all card heights to negative. */
    .solution__sticky {
        position: static;
        height: auto;
        display: block;
        overflow: visible;
        padding-top: 0;
    }

    .solution__header {
        padding-top: 56px;
        margin-inline: auto;
    }

    /* Card body fills the full viewport; pinning is handled by GSAP ScrollTrigger.
     * display:block overrides the base flex so that stage's height:100% resolves
     * against a definite block height — height:100% inside flex+align-items:center
     * returns 0 on iOS Safari and Chrome Android. */
    .solution__body {
        position: relative;
        display: block;
        height: 100vh;
        overflow: hidden;
        padding-block: 20px;
        box-sizing: border-box;
    }

    .solution__stage {
        width: 92%;
        height: 100%;
        margin-inline: auto;
    }

    .solution__card {
        display: flex;
        flex-direction: column;
        height: calc(100% - 20px);
    }

    .solution__card-text {
        flex-shrink: 0;
        padding: 20px;
        gap: 12px;
    }

    /* Container fills remaining card space; image scales to fit without any cropping */
    .solution__card-media {
        flex: 1;
        min-height: 0;
        padding: 16px;
    }

    .solution__card-media img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        margin: auto;
    }
}

/* CTA row below the scroll section */
.solution__footer {
    display: flex;
    justify-content: center;
    padding-block: 48px;
    background-color: var(--wp--preset--color--custom-pwb-main-background);
}

/* =====================================================
   ROI
   ===================================================== */

.roi .wp-block-cover__inner-container {
    padding-top: 120px;
    padding-bottom: 120px;
}

.roi__header {
    margin-bottom: 64px;
    text-align: center;
}

.roi__title {
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 24px;
}

.roi__subtitle,
.last-cta__subtitle {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0;
    margin-bottom: 0;
}

.roi__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}

@property --roi-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes roi-border-spin {
    to {
        --roi-angle: 360deg;
    }
}

.roi__card {
    position: relative;
    min-width: 0;
    background-color: var(--wp--preset--color--custom-pwb-secondary-background);
    border-radius: 20px;
    padding: 40px;
    cursor: pointer;
    box-shadow: 2px 6px 12px 0 rgba(0, 0, 0, 0.25);
}

/* Animated gradient border (original — keep for reference)
.roi__card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 2px solid transparent;
    background:
        linear-gradient(var(--wp--preset--color--custom-pwb-secondary-background), var(--wp--preset--color--custom-pwb-secondary-background)) padding-box,
        conic-gradient(from var(--roi-angle), #FF9900, #FF2A54, #4F00FF, #FF9900) border-box;
    pointer-events: none;
    opacity: 0;
    animation: roi-border-spin 3s linear infinite paused;
}
.roi__card:hover::before,
.roi__card.is-active::before {
    opacity: 1;
    animation-play-state: running;
}
*/

.roi__card {
    border: 1px solid #768291;
    transition: background-color 0.2s ease;
}

.roi__card:hover,
.roi__card.is-active {
    background-color: #272D34;
}

/* Lift content above the ::before gradient border layer */
.roi__card-header,
.roi__card-list {
    position: relative;
    z-index: 1;
}

.roi__card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}

.roi__card-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.roi__card-title {
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
    font-size: clamp(1.875rem, 1.831rem + 0.188vw, 2rem);
    color: #ffffff;
    margin: 0;
}

.roi__card-list {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.roi__card-list li {
    font-size: 15px;
    line-height: 1.75;
    /* Same strength as the tipología description text elsewhere in this
       viewer (.tipologias-viewer__tipologia-desc) — was 0.6, noticeably
       dimmer than that 0.75. */
    color: rgba(255, 255, 255, 0.75);
}

/* Sub-buttons */
.roi__sub-buttons {
    grid-column: 1 / -1;
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.roi__sub-buttons.is-visible {
    display: grid;
}

.roi__sub-btn {
    position: relative;
    /* containing block for ::before */
    background-color: var(--wp--preset--color--custom-pwb-secondary-background);
    border-radius: 12px;
    box-shadow: 2px 6px 12px 0 rgba(0, 0, 0, 0.25);
    padding: 20px 24px;
    cursor: pointer;
    text-align: center;
    font-family: var(--wp--preset--font-family--inter);
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.5;
}

/* Animated gradient border (original — keep for reference)
.roi__sub-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 2px;
    background: conic-gradient(from var(--roi-angle), #FF9900, #FF2A54, #4F00FF, #FF9900);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    animation: roi-border-spin 3s linear infinite paused;
}
.roi__sub-btn:hover::before,
.roi__sub-btn.is-active::before {
    opacity: 1;
    animation-play-state: running;
}
*/

.roi__sub-btn {
    border: 1px solid #768291;
    transition: background-color 0.2s ease;
}

.roi__sub-btn:hover,
.roi__sub-btn.is-active {
    background-color: #272D34;
}

.roi__sub-btn>span {
    position: relative;
    z-index: 1;
}

/* Between the mobile breakpoint and ~1300px, three columns leave too little
   room next to the icon for "Construcción"/"Operaciones" at the fluid clamp's
   size — smaller here so it fits on one line as soon as there's room (from
   ~1100px up); below that it still wraps to two lines, just without breaking
   mid-word the way the full size does. */
@media (min-width: 782px) and (max-width: 1299px) {
    .roi__card-title {
        font-size: 20px;
    }
}

@media (max-width: 781px) {
    .roi .wp-block-cover__inner-container {
        padding-top: 80px;
        padding-bottom: 80px;
        padding-inline: var(--pwb-section-px);
    }

    .roi__cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .roi__card {
        padding: 24px;
    }

    .roi__card-header {
        margin-bottom: 0;
    }

    /* Tipología buttons: same single-column stacking as the fase cards above —
     * previously unneeded since this group stayed hidden behind the mobile
     * picker (now removed: fases and tipologías are independent sections,
     * both always visible, normal responsive flow at every width). */
    .roi__sub-buttons {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Content area: single-column flow on mobile */
    .tipologias-viewer .tipologias-viewer__tipologia-row {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding-bottom: 32px;
    }

    .tipologias-viewer .tipologias-viewer__kpis {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .tipologias-viewer .tipologias-viewer__kpi-card {
        padding: 24px 20px;
        margin: 0;
    }

    .tipologias-viewer .tipologias-viewer__caso-body {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* =====================================================
   LAST CTA
   ===================================================== */

.last-cta__header {
    margin-bottom: 64px;
}

.last-cta__lists {
    max-width: 640px;
    margin-inline: auto !important;
    margin-bottom: 56px;
}

.last-cta__col-label {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 16px;
}

.last-cta__list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.last-cta__list li {
    color: rgba(255, 255, 255, 0.7);
    padding-left: 22px;
    position: relative;
}

.last-cta__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 7px;
    height: 7px;
    background-color: var(--wp--preset--color--custom-pwb-primary-color);
    border-radius: 1px;
}

.last-cta__trust {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 24px;
    margin-bottom: 0;
}

/* =====================================================
   PWB SITE HEADER
   ===================================================== */

/* Sticky header: the template-part <header> wraps .pwb-site-header,
   sticky must live on the outer element to scroll with the page */
header.wp-block-template-part:has(.pwb-site-header) {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Solid brand-orange border: bottom on header, top on footer */
.pwb-site-header,
.pwb-site-footer {
    position: relative;
}

/* Same content-width floor as .pwb-header-inner — the native constrained-layout
   centering this column relies on has no side margin between the mobile
   breakpoint and ~1440px. */
.pwb-site-footer .pwb-footer-columns {
    width: calc(100% - (var(--pwb-section-px) * 2));
    max-width: var(--wp--style--global--content-size, 1440px);
}

/* Frosted glass — always on */
.pwb-site-header {
    background-color: rgba(12, 17, 23, 0.7) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Header inner padding — base values; GSAP animates between these and compact state */
.pwb-header-inner {
    padding-top: 41px;
    padding-bottom: 41px;
}

/* Centers .pwb-header-inner within .pwb-site-header directly, instead of
   relying on .pwb-site-header's own "layout":{"type":"constrained"}
   attribute (which normally generates the max-width + margin:auto that
   does this) — the Site Editor has stripped layout attributes from this
   template part before (see the header-inner/nav fixes above), and this
   time it was this outer one, collapsing .pwb-site-header to default
   flow layout and leaving header-inner flush against the left edge with
   the logo glued to it. */
.pwb-site-header .pwb-header-inner {
    margin-left: auto;
    margin-right: auto;
}

/* Gutenberg's native constrained-layout centering (max-width + margin:auto,
   inherited from .pwb-site-header) only produces visible side margin once the
   viewport exceeds contentSize — nothing between the mobile breakpoint and
   ~1440px. Same fix as .pwb-content-width, applied directly since this block
   uses its own flex layout rather than that utility class.

   No max-width cap here on purpose (unlike .pwb-content-width) — the logo is
   meant to track the hero title's flat 5vw margin at any width, by design
   decision, not the 1440px-then-centered column every boxed section (cards,
   grids) uses. That leaves the header intentionally out of sync with those
   sections past ~1440px+padding wide — known, and fine.

   max-width:none is explicit, not just omitted — .pwb-site-header's own
   native constrained-layout still applies max-width:var(--wp--style--
   global--content-size) to this non-alignfull child on its own; leaving
   this unset would silently bring the 1440px cap straight back. */
/* display/justify-content/align-items duplicate what .pwb-header-inner's
   own "layout":{"type":"flex",...} block attribute already produces — but
   that attribute has been silently dropped by the Site Editor more than
   once now (e.g. editing the Navigation menu), which resets this to
   default block stacking (logo, nav, and actions each on their own row).
   Setting it here directly makes the header's row layout survive that,
   independent of whatever the saved block attributes currently say. */
.pwb-site-header .pwb-header-inner {
    width: calc(100% - (var(--pwb-section-px) * 2));
    max-width: none;
    display: grid;
    grid-template-columns: 1fr auto minmax(160px, 1fr);
    column-gap: 24px;
    align-items: center;
}

.pwb-site-header::after,
.pwb-site-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--wp--preset--color--custom-pwb-primary-color);
}

.pwb-site-header::after {
    bottom: 0;
}

.pwb-site-footer::before {
    top: 0;
}

/* Logo */
.pwb-logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-self: start;
    grid-column: 1;
}

/* .pwb-header-inner is a 3-column grid (logo | nav | actions) with the
   two outer columns set to equal-fraction "1fr" tracks — those always
   split remaining space evenly regardless of how wide the logo vs. the
   actions group (lang switcher + Acceder button) actually are, so the
   middle "auto" column sits truly centered on the header rather than
   centered in whatever unequal space is left over between two
   differently-sized siblings (the old flex:1-between-siblings approach's
   mistake). Grid also keeps each outer column no narrower than its own
   content, so nav can't grow into the logo the way an absolute-positioned
   center would at narrower desktop widths. Explicit grid-column on all
   three children (here and below) because nav is display:none below
   960px — without it, grid auto-placement skips the hidden item and
   shifts actions into nav's column, leaving the real actions column
   empty. Targets the <nav> tag itself, not just .pwb-header-nav's
   className — the Site Editor has stripped that className (along with
   .pwb-header-inner's own "layout" attribute, fixed separately above)
   on autosave before. */
.pwb-site-header .pwb-header-inner > nav,
.pwb-site-header .pwb-header-nav {
    justify-self: center;
    grid-column: 2;
}

.pwb-site-header .pwb-header-actions {
    justify-self: end;
    grid-column: 3;
}

/* The responsive-container child defaults to block display and its own
   modal/overlay positioning — reset both, along with the ul's own
   absolute+transform centering trick that core generates for a
   justifyContent:center Navigation layout (calibrated for nav sitting
   normally in flexbox, not as a grid item — it otherwise forces the ul
   width down and wraps "Calculadora ROI" onto two lines). Letting
   everything shrink-wrap around the link list inline is what lets the
   grid column above size to nav's real content width. This nav is only
   ever visible above 960px (hidden by the media query below); the
   custom .pwb-nav-toggle + .pwb-mobile-nav overlay handles mobile, so
   the block's own hamburger/modal mechanics are never needed and are
   hidden outright. Targets stable core classNames (not the per-instance
   hashed layout class) so it survives the block's own className/layout
   attributes being lost again. */
.pwb-site-header .pwb-header-inner > nav .wp-block-navigation__responsive-container-open {
    display: none !important;
}

.pwb-site-header .pwb-header-inner > nav .wp-block-navigation__responsive-container {
    position: static !important;
    inset: auto !important;
    background: transparent !important;
}

.pwb-site-header .pwb-header-inner > nav .wp-block-navigation__container {
    display: flex !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}

/* Nav links — muted base color */
.pwb-site-header .wp-block-navigation .wp-block-navigation-item__content {
    color: #b5bdc8;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Nav link hover and active item — white, no underline */
.pwb-site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.pwb-site-header .wp-block-navigation .current-menu-item>.wp-block-navigation-item__content {
    color: #ffffff;
    text-decoration: none;
}

/* Language switcher */
.pwb-lang-switcher-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.pwb-lang-switcher {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.pwb-lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 16px;
    display: none;
    flex-direction: column;
    min-width: 140px;
    padding: 8px;
    background: #0c1117;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    z-index: 20;
}

.pwb-lang-dropdown.is-open {
    display: flex;
}

.pwb-lang-dropdown__item {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.pwb-lang-dropdown__item:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.06);
}

.pwb-lang-dropdown__item.is-active {
    color: #ffffff;
}


/* =====================================================
   PWB SITE FOOTER
   ===================================================== */

/* Left column: tagline at top, logo mark at bottom */
.pwb-footer-left-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Tagline: first line rendered in ExtraLight weight */
.pwb-footer-tagline .pwb-weight-200 {
    font-weight: 200;
    display: block;
}

/* Logo mark: desktop — absolute at bottom of left column area */
@media (min-width: 782px) {
    .pwb-footer-logo-mark {
        position: absolute;
        bottom: 80px; /* matches outer columns padding-bottom */
        left: max(20px, 5vw);
        margin: 0 !important;
    }
}

/* Social icons */
.pwb-social-icons {
    display: flex;
    gap: 120px;
    margin-top: 40px;
    color: #ffffff;
}


/* Footer links */
.pwb-footer-link {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.pwb-footer-link:hover {
    opacity: 0.7;
}


/* Certification badges */
.pwb-cert-badges {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.pwb-cert-badge {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
}

.pwb-cert-badge__label {
    font-family: var(--wp--preset--font-family--sora);
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    letter-spacing: 0.3px;
}

.pwb-cert-badge__sub {
    font-family: var(--wp--preset--font-family--sora);
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.3;
}

/* =====================================================
   PWB SITE FOOTER — MOBILE
   ===================================================== */

@media (max-width: 781px) {

    /* Outer columns: reduce vertical padding (bottom 80px leaves clearance above absolute logo) */
    .pwb-footer-columns {
        padding-top: 40px !important;
        padding-bottom: 80px !important;
        gap: 40px !important;
    }

    /* Right info column: remove desktop top-alignment offset, add left indent (~25% total) */
    .pwb-footer-right-col {
        padding-top: 0 !important;
        padding-left: 20vw;
    }

    /* Social icons: distribute equitably across available width */
    .pwb-social-icons {
        gap: 0;
        justify-content: space-between;
    }

    /* Links: stack the two column groups vertically */
    .pwb-footer-links {
        flex-direction: column;
        gap: 16px;
    }

    /* CTA buttons: break out of right-column indent, center across full screen width */
    .pwb-site-footer .wp-block-buttons {
        flex-direction: column;
        align-items: center;
        margin-left: -20vw;
        width: calc(100% + 20vw);
    }

    /* ISO badges + copyright: stack vertically on mobile */
    .pwb-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* Logo mark: absolute, anchored to footer bottom-left, partially outside the box */
    .pwb-footer-logo-mark {
        position: absolute;
        bottom: -60px;
        left: 0;
        width: 140px;
        height: auto;
        margin: 0 !important;
    }
}


/* ==========================================================
   Proyecto: Hero
   ========================================================== */

.pwb-proyecto-hero {
    position: relative;
    overflow: hidden;
    padding: 120px 0 80px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-block-start: 0;
}

.pwb-proyecto-hero--placeholder {
    min-height: 420px;
    background: #0c1117;
}

.pwb-proyecto-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 35%;
    background-color: #0c1117;
}

.pwb-proyecto-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 60% at 78% 15%, rgba(124,92,255,0.28), transparent 70%),
        radial-gradient(50% 50% at 95% 55%, rgba(255,90,46,0.20), transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.pwb-proyecto-hero__scrim {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(860px, 58%);
    background: rgba(12, 17, 23, 0.62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 78%, transparent 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 78%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.pwb-proyecto-hero__inner {
    /* Content width/centering/mobile padding come from .pwb-content-width
       (see render.php) — kept in sync with the site's real content edge
       instead of its own hardcoded number. */
    position: relative;
    z-index: 3;
}

.pwb-proyecto-hero__tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.pwb-proyecto-hero__tag {
    font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.04);
}

.pwb-proyecto-hero__title {
    font-family: var(--wp--preset--font-family--sora, Sora, sans-serif);
    font-size: clamp(36px, 5.2vw, 72px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.02em;
    max-width: 820px;
    margin-bottom: 20px;
    color: #fff;
}

.pwb-proyecto-hero__lede {
    font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.75);
    max-width: 600px;
    margin-bottom: 48px;
}

.pwb-proyecto-hero__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    max-width: 880px;
}

.pwb-proyecto-hero__meta-cell {
    padding: 22px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(12, 17, 23, 0.55);
}

.pwb-proyecto-hero__meta-cell:last-child {
    border-right: none;
}

.pwb-proyecto-hero__meta-label {
    font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
    margin-bottom: 6px;
}

.pwb-proyecto-hero__meta-label--gap {
    margin-top: 14px;
}

.pwb-proyecto-hero__meta-value {
    font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}

.pwb-proyecto-hero__meta-value--sm {
    font-size: 12px;
    font-weight: 500;
}

.pwb-proyecto-hero__meta-value--gap {
    margin-top: 10px;
}

.pwb-proyecto-hero__dims {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.pwb-proyecto-hero__dim-badge {
    font-family: var(--wp--preset--font-family--sora, Sora, sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1;
    color: var(--dim-color, #ffffff);
    border: 1px solid var(--dim-color, rgba(255,255,255,0.3));
    border-radius: 4px;
    padding: 4px 7px;
    opacity: 0.85;
}

.pwb-proyecto-hero__bar {
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-top: 6px;
}

.pwb-proyecto-hero__bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #ff9900, rgba(255, 153, 0, 0.65));
    border-radius: 3px;
}

@media (max-width: 768px) {
    .pwb-proyecto-hero__meta {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .pwb-proyecto-hero__meta-cell {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .pwb-proyecto-hero__meta-cell:last-child {
        border-bottom: none;
    }
}

@media (max-width: 600px) {
    .pwb-proyecto-hero {
        padding: 80px 0 60px;
    }

    .pwb-proyecto-hero__scrim {
        width: 100%;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* =====================================================
   PROYECTOS BANNER + GRID (archive-proyectos.html)
   ===================================================== */

.pwb-proyectos-banner {
    background-color: #0c1117;
    padding: 60px 0;
}

.pwb-proyectos-banner__title {
    color: #ffffff;
    margin: 0;
}

.pwb-proyectos-grid {
    padding-block: 32px 0;
}

.pwb-proyectos-grid__filters {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.pwb-proyectos-grid__filter-btn {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 12px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.pwb-proyectos-grid__filter-btn:hover {
    color: #ffffff;
    border-color: #ffffff;
}

.pwb-proyectos-grid__filter-btn.is-active {
    color: #0c1117;
    background: var(--wp--preset--color--custom-pwb-primary-color);
    border-color: var(--wp--preset--color--custom-pwb-primary-color);
}

/* Square filter buttons (fase, tipología, dimensión) — replaces the plain
   white pill above for every individual option (not "Todos", which stays
   a pill in all three groups). White at 60% by default; --dim overrides
   the color per dimension, below. */
.pwb-proyectos-grid__filter-btn--box {
    border-radius: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
    position: relative;
}

.pwb-proyectos-grid__filter-btn--box:hover,
.pwb-proyectos-grid__filter-btn--box.is-active {
    background: var(--wp--preset--color--custom-pwb-primary-color);
    border-color: var(--wp--preset--color--custom-pwb-primary-color);
    color: #0c1117;
}

/* Dimension filter buttons — border and text colored per dimension
   (--dim-color, set inline per button) at rest too, unlike the neutral
   white border every other button gets — this is the one group meant to
   be visually distinguishable by color before any interaction. */
.pwb-proyectos-grid__filter-btn--dim {
    border-color: var(--dim-color, #ffffff);
    color: var(--dim-color, #ffffff);
}

.pwb-proyectos-grid__filter-btn--dim:hover,
.pwb-proyectos-grid__filter-btn--dim.is-active {
    background: var(--dim-color, #ffffff);
    border-color: var(--dim-color, #ffffff);
    color: #0c1117;
}

/* A facet option that no proyecto matches given the other two groups'
   current selection — disabled (see the `disabled()` PHP call and
   view.js's applyAvailability()) instead of a clickable dead end. */
.pwb-proyectos-grid__filter-btn--unavailable {
    opacity: 0.35;
    cursor: default;
}

.pwb-proyectos-grid__filter-btn--unavailable:hover {
    background: none;
    color: rgba(255, 255, 255, 0.55);
}

.pwb-proyectos-grid__filter-btn--box.pwb-proyectos-grid__filter-btn--unavailable:hover {
    background: none;
    border-color: rgba(255, 255, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
}

.pwb-proyectos-grid__filter-btn--dim.pwb-proyectos-grid__filter-btn--unavailable:hover {
    background: none;
    border-color: var(--dim-color, #ffffff);
    color: var(--dim-color, #ffffff);
}

/* Hover tooltip naming the dimension — CSS-only, no JS/library: the first
   tooltip pattern on this site, so kept as simple as possible. */
.pwb-proyectos-grid__filter-btn--dim[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #0c1117;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 5;
}

.pwb-proyectos-grid__filter-btn--dim[data-tooltip]:hover::after,
.pwb-proyectos-grid__filter-btn--dim[data-tooltip]:focus-visible::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .pwb-proyectos-grid__filter-btn--dim[data-tooltip]::after {
        transition: none;
    }
}

.pwb-proyectos-grid__items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

@media (max-width: 900px) {
    .pwb-proyectos-grid__items { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .pwb-proyectos-grid__items { grid-template-columns: 1fr; }
}

.pwb-proyectos-grid__card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #161d27;
    text-decoration: none;
}

.pwb-proyectos-grid__card-media {
    position: relative;
    width: 100%;
    height: 100%;
}

.pwb-proyectos-grid__card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.pwb-proyectos-grid__card:hover .pwb-proyectos-grid__card-media img {
    transform: scale(1.04);
}

.pwb-proyectos-grid__card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #161d27 0%, #1d2530 100%);
}

.pwb-proyectos-grid__card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 16px;
    background: linear-gradient(180deg, transparent 50%, rgba(12, 17, 23, 0.85) 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pwb-proyectos-grid__card:hover .pwb-proyectos-grid__card-overlay,
.pwb-proyectos-grid__card:focus-visible .pwb-proyectos-grid__card-overlay {
    opacity: 1;
}

.pwb-proyectos-grid__card-title {
    font-family: 'Sora', sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #ffffff;
}


/* =====================================================
   404
   ===================================================== */

.pwb-404 {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 120px;
}

.pwb-404__text {
    color: rgba(255, 255, 255, 0.9);
    margin-top: -8px;
    margin-bottom: 40px;
}

.pwb-proyectos-grid__empty {
    text-align: center;
    color: #7B8290;
    padding: 60px 0;
    grid-column: 1 / -1;
}

/* =====================================================
   "HABLA CON UN EXPERTO" — LEAD CAPTURE MODAL
   Same visual language as powerbim-tipologias's .pwb-caso__modal-* (itself
   copied from powerbim-roi's .pwb-roi__modal-*), duplicated under its own
   pwb-experto__ prefix — this theme code can't depend on either plugin's
   stylesheet being loaded.
   ===================================================== */

.pwb-experto__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    border-radius: 12px;
    font-family: var(--wp--preset--font-family--inter);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    border: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    text-decoration: none;
}

.pwb-experto__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.pwb-experto__btn:active:not(:disabled) {
    transform: scale(0.98);
}

.pwb-experto__btn--primary {
    background: var(--wp--preset--color--custom-pwb-primary-color);
    color: #151C31;
}

.pwb-experto__btn--primary:hover:not(:disabled) {
    opacity: 0.8;
}

.pwb-experto__btn--ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}

.pwb-experto__btn--ghost:hover {
    color: #ffffff;
}

.pwb-experto__modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    padding: 20px;
    box-sizing: border-box;
}

.pwb-experto__modal {
    background: #161D27;
    border: 1px solid #2A2F37;
    border-radius: 20px;
    padding: 32px;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.pwb-experto__modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.pwb-experto__modal-title {
    font-family: var(--wp--preset--font-family--sora);
    font-size: 1.125rem;
    font-weight: 700;
    color: #F5F6F8;
}

.pwb-experto__modal-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #7B8290;
    font-size: 1rem;
    padding: 4px;
    line-height: 1;
    transition: color 0.15s;
}

.pwb-experto__modal-close:hover {
    color: #F5F6F8;
}

.pwb-experto__modal-intro {
    font-size: 0.8125rem;
    color: #C8CDD6;
    line-height: 1.5;
    margin: 0 0 20px;
}

.pwb-experto__modal-body {
    margin-bottom: 24px;
}

.pwb-experto__modal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pwb-experto__modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pwb-experto__modal-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #C8CDD6;
}

.pwb-experto__modal-optional {
    font-weight: 400;
    color: #7B8290;
}

.pwb-experto__modal-input {
    background: #0C1117;
    border: 1.5px solid #2A2F37;
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.9375rem;
    color: #F5F6F8;
    outline: none;
    transition: border-color 0.15s;
}

.pwb-experto__modal-textarea {
    resize: vertical;
    font-family: inherit;
    min-height: 96px;
}

.pwb-experto__modal-input::placeholder {
    color: #4A5060;
}

.pwb-experto__modal-input:focus {
    border-color: #FF9900;
}

.pwb-experto__modal-input--error {
    border-color: #FF4D6A;
}

.pwb-experto__modal-input--error:focus {
    border-color: #FF4D6A;
}

.pwb-experto__modal-hint {
    font-size: 0.75rem;
    color: #7B8290;
}

.pwb-experto__modal-hint--error {
    color: #FF4D6A;
}

.pwb-experto__modal-checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.pwb-experto__modal-field + .pwb-experto__modal-checkbox-field {
    margin-top: 4px;
}

.pwb-experto__modal-checkbox {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: #FF9900;
    cursor: pointer;
}

.pwb-experto__modal-checkbox-label {
    font-size: 0.75rem;
    line-height: 1.5;
    color: #C8CDD6;
}

.pwb-experto__modal-checkbox-label a {
    color: #FF9900;
    text-decoration: underline;
}

.pwb-experto__modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.pwb-experto__modal-thanks {
    text-align: center;
    padding: 24px 0;
}

.pwb-experto__modal-thanks-icon {
    font-size: 2.25rem;
    margin-bottom: 12px;
    color: #FF9900;
}

.pwb-experto__modal-thanks-title {
    font-weight: 700;
    font-size: 1rem;
    color: #F5F6F8;
    margin-bottom: 6px;
}

.pwb-experto__modal-thanks-text {
    font-size: 0.8125rem;
    color: #C8CDD6;
    line-height: 1.5;
}

/* Same fix as the other two modals: fields stacked in a single 420px-wide
   column made this taller than needed on desktop. Widening the modal and
   pairing fields two-per-row on non-mobile viewports shortens it. */
@media (min-width: 640px) {
    .pwb-experto__modal {
        max-width: 640px;
    }

    .pwb-experto__modal-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 20px;
    }

    .pwb-experto__modal-field--full,
    .pwb-experto__modal-checkbox-field,
    .pwb-experto__modal-hint--error,
    .pwb-experto__modal-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 420px) {
    .pwb-experto__modal-actions {
        flex-direction: column;
    }

    .pwb-experto__modal-actions .pwb-experto__btn {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================
   Newsletter subscription modal
   Same visual language as .pwb-experto__modal (overlay, card, inputs,
   buttons), duplicated under its own prefix rather than shared classes —
   same convention already used per-CTA (experto, ROI, casos de éxito).
   Single field, no desktop two-column grid needed. */

.pwb-newsletter__modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    padding: 20px;
    box-sizing: border-box;
}

.pwb-newsletter__modal {
    background: #161D27;
    border: 1px solid #2A2F37;
    border-radius: 20px;
    padding: 32px;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.pwb-newsletter__modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.pwb-newsletter__modal-title {
    font-family: var(--wp--preset--font-family--sora);
    font-size: 1.125rem;
    font-weight: 700;
    color: #F5F6F8;
}

.pwb-newsletter__modal-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #7B8290;
    font-size: 1rem;
    padding: 4px;
    line-height: 1;
    transition: color 0.15s;
}

.pwb-newsletter__modal-close:hover {
    color: #F5F6F8;
}

.pwb-newsletter__modal-intro {
    font-size: 0.8125rem;
    color: #C8CDD6;
    line-height: 1.5;
    margin: 0 0 20px;
}

.pwb-newsletter__modal-body {
    margin-bottom: 24px;
}

.pwb-newsletter__modal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pwb-newsletter__modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pwb-newsletter__modal-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #C8CDD6;
}

.pwb-newsletter__modal-input {
    background: #0C1117;
    border: 1.5px solid #2A2F37;
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.9375rem;
    color: #F5F6F8;
    outline: none;
    transition: border-color 0.15s;
}

.pwb-newsletter__modal-input::placeholder {
    color: #4A5060;
}

.pwb-newsletter__modal-input:focus {
    border-color: #FF9900;
}

.pwb-newsletter__modal-input--error {
    border-color: #FF4D6A;
}

.pwb-newsletter__modal-hint {
    font-size: 0.75rem;
    color: #7B8290;
}

.pwb-newsletter__modal-hint--error {
    color: #FF4D6A;
}

.pwb-newsletter__modal-legal {
    font-size: 0.75rem;
    line-height: 1.5;
    color: #C8CDD6;
    margin: 0;
}

.pwb-newsletter__modal-legal a {
    color: #FF9900;
    text-decoration: underline;
}

.pwb-newsletter__modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.pwb-newsletter__modal-thanks {
    text-align: center;
    padding: 24px 0;
}

.pwb-newsletter__modal-thanks-icon {
    font-size: 2.25rem;
    margin-bottom: 12px;
    color: #FF9900;
}

.pwb-newsletter__modal-thanks-title {
    font-weight: 700;
    font-size: 1rem;
    color: #F5F6F8;
    margin-bottom: 6px;
}

.pwb-newsletter__modal-thanks-text {
    font-size: 0.8125rem;
    color: #C8CDD6;
    line-height: 1.5;
}

.pwb-newsletter__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    border-radius: 12px;
    font-family: var(--wp--preset--font-family--inter);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    border: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    text-decoration: none;
}

.pwb-newsletter__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.pwb-newsletter__btn:active:not(:disabled) {
    transform: scale(0.98);
}

.pwb-newsletter__btn--primary {
    background: var(--wp--preset--color--custom-pwb-primary-color);
    color: #151C31;
}

.pwb-newsletter__btn--primary:hover:not(:disabled) {
    opacity: 0.8;
}

.pwb-newsletter__btn--ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}

.pwb-newsletter__btn--ghost:hover {
    color: #ffffff;
}

@media (max-width: 420px) {
    .pwb-newsletter__modal-actions {
        flex-direction: column;
    }

    .pwb-newsletter__modal-actions .pwb-newsletter__btn {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================
   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: #151C31 !important;
    border-radius: 12px !important;
}

.cky-btn-reject,
.cky-btn-preferences,
.cky-btn-customize {
    background-color: transparent !important;
    border-width: 1px !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    border-radius: 12px !important;
}

/* Category toggles — CookieYes sets background-color inline via JS on
   check/uncheck, blue by default when active. #FF9900 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: #FF9900 !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);
    }
}