/* =====================================================
   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: var(--wp--preset--color--custom-pwb-main-background);
}

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

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

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

/* El bloque Vídeo nativo (figure.hero__video) lleva el desplazamiento y los márgenes;
   el <video> de dentro solo se ajusta a su ancho. */
.hero__video video {
    width: 100%;
    height: auto;
    max-height: 100svh;
    display: block;
}

.hero__video {
    width: 100%;
    margin: 0 0 0 -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: var(--wp--custom--z-index--modal, 9999);
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    padding: var(--wp--preset--spacing--px-20);
    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: var(--wp--preset--spacing--px-12);
}

.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: var(--wp--custom--color--white);
    padding: var(--wp--preset--spacing--px-4);
    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: var(--wp--custom--radius--lg);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

/* El reproductor (iframe de YouTube/Vimeo o <video>) lo inserta main.js al abrir. */
.hero__video-modal-player iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

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

.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: var(--wp--custom--color--white);
    /* 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: var(--wp--preset--spacing--px-32);
}

/* 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: var(--pwb-lede-color);
    font-size: var(--wp--custom--font-size--lg-plus);
    margin-top: 0;
    margin-bottom: var(--wp--preset--spacing--px-48);
}

.hero__actions {
    gap: var(--wp--preset--spacing--px-16);
}

/* Botón «Ver vídeo»: icono de «play» delante del texto (el mismo trazo de 2px y 18px que
   tenía como botón HTML), dibujado como máscara para que tome el color del texto. */
.hero__video-btn .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    /* Tamaño fijo, como el botón HTML anterior: el del botón nativo es fluido y en móvil bajaba a 14px. */
    font-size: 1rem;
    line-height: 1.5;
    gap: var(--wp--preset--spacing--px-8);
}

.hero__video-btn .wp-block-button__link::before {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='6 3 20 12 6 21 6 3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='6 3 20 12 6 21 6 3'/%3E%3C/svg%3E") center / contain no-repeat;
}

@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: var(--wp--preset--spacing--px-80);
        padding-bottom: var(--wp--preset--spacing--px-40);
    }

    .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: var(--wp--preset--spacing--px-80);
    }

    /* Stacked layout: the desktop rule lifts the video 25% of its own height
       to follow .hero__content, which only works with two columns, where the
       column is taller than the video. Here the column is as tall as the
       video and clips overflow, so the lift cut off the top 25% of the frame
       (44px at 390px wide, 77px at 700px). Reset it; the column keeps its
       height, so nothing below the hero moves. */
    .hero__video {
        transform: none;
        margin-bottom: 0;
    }
}

/* =====================================================
   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: var(--wp--preset--spacing--px-120);
}

.last-cta {
    padding-top: var(--wp--preset--spacing--px-120);
    padding-bottom: var(--wp--preset--spacing--px-120);
}

/* Home: mismo espacio entre secciones que entre el problema y la solución.
   - solución -> cabecera de tipologías: se mide desde la tarjeta del slider (no
     desde sus puntos de paginación, que quedan dentro del espacio). El espacio es
     fila de puntos bajo la tarjeta (34) + padding inferior de la solución (este
     cálculo) + margen del bloque (24) + padding superior de la cabecera (80) +
     relleno del panel de texto (24; 16 en móvil);
   - tipologías -> última sección: el bloque termina pegado a la última sección,
     que aporta todo el espacio con su propio padding superior. */
.home .solution {
    padding-bottom: calc(var(--wp--custom--section-gap) - 34px - 24px - 80px - 24px);
}

.home .roi .wp-block-cover__inner-container {
    padding-top: 0;
}

@media (max-width: 640px) {
    .home .solution {
        padding-bottom: calc(var(--wp--custom--section-gap) - 34px - 24px - 80px - 16px);
    }
}

.home .last-cta {
    padding-top: var(--wp--custom--section-gap);
}

.problem__header {
    margin-inline: auto;
    margin-bottom: var(--wp--custom--lede-gap);
}


.problem__title {
    color: var(--wp--custom--color--white);
    margin-top: 0;
    margin-bottom: var(--wp--custom--heading-gap);
}

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

.problem__subtitle {
    font-size: var(--wp--preset--font-size--sm-plus);
    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: var(--wp--custom--radius--xl);
    /* 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: var(--wp--preset--shadow--pwb-card);
    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: var(--wp--preset--spacing--px-48) var(--wp--preset--spacing--px-40);
}

/* 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: var(--wp--custom--font-size--4-xl);
    font-weight: 700;
    line-height: normal;
    color: var(--wp--preset--color--custom-pwb-primary-color);
    margin-top: 0;
    margin-bottom: var(--wp--preset--spacing--px-24);
}

.problem__card-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wp--custom--color--white);
    margin-top: 0;
    margin-bottom: var(--wp--preset--spacing--px-16);
}

.problem__card-text {
    font-size: var(--wp--preset--font-size--sm-plus);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0;
    margin-bottom: 0;
}

@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(--wp--custom--section-px);
        top: 0;
        width: calc(100% - 2 * var(--wp--custom--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%);
    }
}