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

.solution {
    background-color: var(--wp--preset--color--custom-pwb-main-background);
    padding-block: var(--wp--preset--spacing--px-80);
}

.solution__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--wp--custom--lede-gap);
    padding-inline: var(--wp--style--root--padding-left);
}

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

.solution__sub {
    font-size: var(--wp--preset--font-size--sm-plus);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* Banner horizontal — un carrusel con auto-rotación (ver main.js), que se
   pausa automáticamente al pasar el ratón o hacer foco dentro de la sección.
   El grupo (flecha, tarjeta, flecha) se alinea con el contenedor del header
   (.pwb-site-header .pwb-header-inner) en vez de con el ancho de contenido
   boxed (1440px) que usan las secciones de tarjetas/grids — misma técnica
   (.pwb-wide-width más arriba): solo el gutter --wp--custom--section-px, sin tope de
   max-width, para que crezca junto al logo/nav en vez de quedarse corto. Las
   flechas tienen flex-basis fijo (44px) y la tarjeta crece para llenar el
   resto, quedando pegadas al borde del contenedor. */
.solution__body {
    position: relative;
    width: calc(100% - (var(--wp--custom--section-px) * 2));
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--px-20);
}

/* El fondo blanco y las esquinas redondeadas viven en el contenedor (stage),
   no en cada tarjeta — así el marco nunca se mueve ni se ve sin redondear a
   mitad de la transición; solo el contenido de dentro (texto + ilustración)
   se desliza/desvanece entre tarjetas. Sin ancho máximo propio: crece para
   llenar el resto del grupo tras restar las flechas (ver .solution__body). */
/* aspect-ratio derivado del vídeo (formato objetivo para los 3 slides):
   vídeo 16:9 en una columna de media que ocupa 1.2 de las 2.2 fr del grid
   (ver .solution__card) → 16/9 * 2.2/1.2 = 88/27. Con esto el vídeo llena
   su columna al 100% en ancho y alto, sin recortar (object-fit: contain)
   ni dejar margen. */
.solution__stage {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    aspect-ratio: 88 / 27;
    background-color: var(--wp--custom--color--white);
    border-radius: var(--wp--custom--radius--2-xl);
    overflow: hidden;
}

.solution__card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    /* Fila de alto fijo: sin esto crece con el contenido y el vídeo se descentra. */
    grid-template-rows: minmax(0, 1fr);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

/* Las tarjetas son hijos de un Grupo: sin esto el flujo de WordPress da 24px de
   margen superior a la 2.ª y la 3.ª y se descuadran respecto al marco. */
.solution__stage > .solution__card {
    margin-block-start: 0;
}

.solution__card.is-active {
    opacity: 1;
    pointer-events: auto;
}

.solution__card-text {
    padding: var(--wp--preset--spacing--px-48);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--wp--preset--spacing--px-20);
}

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

.solution__card-body {
    font-size: var(--wp--preset--font-size--sm-plus);
    line-height: 1.75;
    color: rgba(21, 28, 49, 0.65);
    margin: 0;
}

/* Bloque Vídeo nativo (figure.wp-block-video): se anula el margen que el diseño
   de flujo de WordPress da a los hijos de un Grupo (el selector con el padre es
   para ganar a ese margen) y el vídeo llena su columna. object-fit: contain: se ve completo, sin
   recortar, a costa de margen blanco donde la proporción no llena el panel. */
.solution__card > .solution__card-media {
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

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

/* Flechas prev/next — solo el icono, sin círculo/borde. width/height se
   mantienen como área de toque (accesibilidad táctil) aunque el icono en sí
   sea más pequeño y quede centrado dentro. */
.solution__arrow {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--wp--custom--color--white);
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s ease;
}

.solution__arrow:hover {
    opacity: 0.8;
}

.solution__arrow:focus-visible {
    outline: 2px solid var(--wp--preset--color--custom-pwb-primary-color);
    outline-offset: 4px;
}

.solution__dots {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--wp--preset--spacing--px-10);
    margin-top: var(--wp--preset--spacing--px-24);
}

.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__body   { flex-direction: column; }
    .solution__stage  { flex-basis: auto; aspect-ratio: auto; overflow: visible; }
    .solution__card   {
        position: relative;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        margin-bottom: var(--wp--preset--spacing--px-24);
        height: auto;
    }
    .solution__arrow,
    .solution__dots { display: none; }
}

@media (max-width: 781px) {
    .solution__body {
        width: calc(100% - 24px);
        gap: var(--wp--preset--spacing--px-8);
    }

    .solution__arrow {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .solution__stage {
        aspect-ratio: auto;
    }

    /* Layout only — applies with or without reduced motion. Which cards are
       visible is decided separately below, so a reduced-motion visitor on
       mobile still gets all 3 cards stacked (not just the active one). */
    .solution__card {
        position: relative;
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .solution__card-text {
        padding: var(--wp--preset--spacing--px-20);
        gap: var(--wp--preset--spacing--px-12);
    }

    .solution__card-media {
        padding: var(--wp--preset--spacing--px-16);
    }

    .solution__card-media video {
        height: auto;
    }
}

/* JS-driven single-card view — only when motion is allowed. Combined with
   prefers-reduced-motion: reduce, mobile falls back to the same static
   stacked list as desktop (see above), since there's no scroll-pin animation
   left to gate the fallback on. */
@media (max-width: 781px) and (prefers-reduced-motion: no-preference) {
    .solution__card {
        display: none;
    }

    .solution__card.is-active {
        display: flex;
    }
}

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

.roi .wp-block-cover__inner-container {
    padding-top: var(--wp--preset--spacing--px-120);
    padding-bottom: var(--wp--preset--spacing--px-120);
}

.roi__header {
    margin-bottom: var(--wp--preset--spacing--px-64);
    text-align: center;
}

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

.roi__subtitle,
.last-cta__subtitle {
    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;
}

/* Última sección de la home: el título (sin margen inferior propio) quedaba
   pegado a su entradilla; mismo espacio que en el resto de secciones. */
.last-cta__subtitle {
    margin-top: var(--wp--custom--heading-gap);
}

/* Home: las entradillas que van justo después de un título pasan de 15 a 18 px y
   toman el color de la entradilla del hero (problema, solución, tipologías y
   última sección). Acotado a la home porque .roi__subtitle también se usa en
   las páginas de fase. */
.home .problem__subtitle,
.home .solution__sub,
.home .roi__subtitle,
.home .last-cta__subtitle {
    font-size: var(--wp--custom--font-size--md);
    color: var(--pwb-lede-color);
}

/* Home, «Una solución para cada sector»: mismo espacio entre la entradilla y las
   tarjetas que en las secciones del problema y la solución. Acotado a la home
   porque este bloque (plugin de tipologías) también está en las páginas de fase. */
.home .tipologias-viewer__sector-intro {
    padding-bottom: var(--wp--custom--lede-gap);
}

.roi__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--px-24);
    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: var(--wp--custom--radius--2-xl);
    padding: var(--wp--preset--spacing--px-40);
    cursor: pointer;
    box-shadow: var(--wp--preset--shadow--pwb-card);
    border: 1px solid #768291;
    transition: background-color 0.2s ease;
}

/* Animated gradient border (original — keep for reference)
.roi__card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--wp--custom--radius--2-xl);
    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), var(--wp--preset--color--custom-pwb-primary-color), #FF2A54, #4F00FF, var(--wp--preset--color--custom-pwb-primary-color)) 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: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: var(--wp--preset--spacing--px-20);
    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: var(--wp--custom--color--white);
    margin: 0;
}

.roi__card-list {
    list-style: disc;
    padding-left: var(--wp--preset--spacing--px-20);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--px-12);
}

.roi__card-list li {
    font-size: var(--wp--preset--font-size--sm-plus);
    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: var(--wp--preset--spacing--px-24);
}

.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: var(--wp--custom--radius--sm);
    box-shadow: var(--wp--preset--shadow--pwb-card);
    padding: var(--wp--preset--spacing--px-20) var(--wp--preset--spacing--px-24);
    cursor: pointer;
    text-align: center;
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--sm-plus);
    font-weight: 500;
    color: var(--wp--custom--color--white);
    line-height: 1.5;
    border: 1px solid #768291;
    transition: background-color 0.2s ease;
}

/* Animated gradient border (original — keep for reference)
.roi__sub-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--wp--custom--radius--lg);
    padding: var(--wp--preset--spacing--px-2);
    background: conic-gradient(from var(--roi-angle), var(--wp--preset--color--custom-pwb-primary-color), #FF2A54, #4F00FF, var(--wp--preset--color--custom-pwb-primary-color));
    -webkit-mask: linear-gradient(var(--wp--custom--color--white) 0 0) content-box, linear-gradient(var(--wp--custom--color--white) 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(var(--wp--custom--color--white) 0 0) content-box, linear-gradient(var(--wp--custom--color--white) 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:hover,
.roi__sub-btn.is-active {
    background-color: #272D34;
}

.roi__sub-btn>span {
    position: relative;
    z-index: 1;
    font-size: var(--wp--custom--font-size--xl);
    font-weight: 700;
}

/* 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: var(--wp--custom--font-size--lg);
    }
}

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

    .roi__cards {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--px-16);
    }

    .roi__card {
        padding: var(--wp--preset--spacing--px-24);
    }

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

    /* Content area: single-column flow on mobile. Not scoped under
     * .tipologias-viewer: this content now lives in a modal moved to <body>
     * (same isolation:isolate/z-index reason as the "Descargar caso de
     * éxito" modal), so it's no longer a descendant of that section. */
    .tipologias-viewer__tipologia-row {
        display: flex;
        flex-direction: column;
        gap: var(--wp--preset--spacing--px-24);
        padding-bottom: var(--wp--preset--spacing--px-32);
    }

    .tipologias-viewer__kpis {
        grid-template-columns: 1fr 1fr;
        gap: var(--wp--preset--spacing--px-16);
    }

    .tipologias-viewer__kpi-card {
        padding: var(--wp--preset--spacing--px-24) var(--wp--preset--spacing--px-20);
        margin: 0;
    }

    .tipologias-viewer__caso-body {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--px-24);
    }
}

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

.last-cta__header {
    margin-bottom: var(--wp--preset--spacing--px-64);
}

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

.last-cta__col-label {
    font-size: var(--wp--preset--font-size--sm-plus);
    font-weight: 700;
    color: var(--wp--custom--color--white);
    margin-top: 0;
    margin-bottom: var(--wp--preset--spacing--px-16);
}

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

.last-cta__list li {
    font-size: var(--wp--preset--font-size--sm-plus);
    color: rgba(255, 255, 255, 0.7);
    padding-left: var(--wp--preset--spacing--px-22);
    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: var(--wp--preset--font-size--xs-plus);
    color: rgba(255, 255, 255, 0.5);
    margin-top: var(--wp--preset--spacing--px-24);
    margin-bottom: 0;
}