/*
|--------------------------------------------------------------------------
| HOME — ACTORES Y PROCESOS
|--------------------------------------------------------------------------
| Frontend únicamente.
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   SECTION
   ========================================================================== */

/* ==========================================================
   HOME — ACTORES Y PROCESOS
   Ajuste de altura y distribución
   ========================================================== */

/* ==========================================================
   HOME — ALINEACIÓN HORIZONTAL
   ACTORES Y PROCESOS
   Solo escritorio — móvil y tablet sin cambios
   ========================================================== */

@media screen and (min-width: 1025px) {

    .amoladero-home
    .amoladero-actores
    .amoladero-actores__content {

        box-sizing: border-box;

        /* Misma separación que Recorrido y Memorias */
        padding-left: clamp(30px, 2.2vw, 90px) !important;

        /* Evitar desbordamiento */
        width: 100%;
        max-width: 680px;

    }

}

@media (min-width: 782px) {

    .amoladero-home .amoladero-actores {
        min-height: 0 !important;
        height: clamp(340px, 29vw, 490px);
        padding: 0 !important;
    }

    .amoladero-home .amoladero-actores__inner,
    .amoladero-home .amoladero-actores__columns {
        height: 100%;
        min-height: 0 !important;
    }

    .amoladero-home .amoladero-actores__content {
        justify-content: center;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .amoladero-home .amoladero-actores__title {
        margin-bottom: clamp(12px, 1.5vw, 22px);
    }

    .amoladero-home .amoladero-actores__description {
        margin-bottom: clamp(18px, 2vw, 30px);
    }

    .amoladero-home .amoladero-actores__media {
        height: 100%;
        min-height: 0 !important;
    }

    .amoladero-home .amoladero-actores__image {
        top: 50%;
        transform: translateY(-50%);
    }

}

/* Mantener el comportamiento vertical en móviles */
@media (max-width: 781px) {

    .amoladero-home .amoladero-actores {
        height: auto !important;
        min-height: 0 !important;
    }

}

.amoladero-actores {
    --actores-rail-width: clamp(34px, 3.2vw, 50px);

    position: relative;

    width: 100%;

    min-height:
        clamp(500px, 45vw, 680px);

    overflow: hidden;

    background:
        var(--amoladero-light);

    color:
        var(--amoladero-primary);

    isolation: isolate;
}


/* ==========================================================================
   DECORACIÓN VERTICAL LATERAL
   ========================================================================== */

.amoladero-actores::before {
    content: "";

    position: absolute;

    z-index: 20;

    top: 0;

    left:
        var(--actores-rail-width);

    width:
        max(100vh, 1600px);

    height:
        var(--actores-rail-width);

    /*
     * Reutilizamos el SVG ya existente del Hero
     * como máscara para poder pintarlo con el
     * color corporativo.
     */
    -webkit-mask-image:
        url("../../svg/linea-decorativa-hero.svg");

    mask-image:
        url("../../svg/linea-decorativa-hero.svg");

    -webkit-mask-repeat:
        repeat-x;

    mask-repeat:
        repeat-x;

    -webkit-mask-position:
        left center;

    mask-position:
        left center;

    -webkit-mask-size:
        auto 100%;

    mask-size:
        auto 100%;

    background:
        var(--amoladero-primary);

    pointer-events: none;

    transform-origin:
        top left;

    transform:
        rotate(90deg);
}


/* ==========================================================================
   INNER
   ========================================================================== */

.amoladero-actores__inner {
    position: relative;

    z-index: 2;

    width:
        min(
            calc(100% - 120px),
            1420px
        );

    min-height:
        inherit;

    margin-inline:
        auto;
}


/* ==========================================================================
   COLUMNS
   ========================================================================== */

.amoladero-actores__columns {
    display: flex;

    align-items: stretch;

    width: 100%;

    min-height:
        inherit;

    margin:
        0 !important;

    gap:
        clamp(40px, 6vw, 100px);
}


/* ==========================================================================
   CONTENT
   ========================================================================== */

.amoladero-actores__content {
    position: relative;

    z-index: 5;

    display: flex;

    flex-direction: column;

    justify-content: center;

    flex-basis:
        46% !important;

    width:
        46%;

    max-width:
        560px;

    margin: 0;

    padding:
        clamp(64px, 7vw, 104px)
        0;
}


/* ==========================================================================
   TITLE
   ========================================================================== */

.amoladero-actores__title {
    width: 100%;

    max-width:
        470px;

    margin:
        0 0
        clamp(18px, 2vw, 28px);

    color:
        var(--amoladero-primary);

    font-family:
        var(--amoladero-font-display);

    font-size:
        clamp(3rem, 4.25vw, 5.1rem);

    font-weight: 400;

    line-height:
        0.88;

    letter-spacing:
        -0.02em;

    text-transform:
        uppercase;
}


/* ==========================================================================
   DESCRIPTION
   ========================================================================== */

.amoladero-actores__description {
    width: 100%;

    max-width:
        500px;

    margin:
        0 0
        clamp(30px, 3.5vw, 46px);

    color:
        var(--amoladero-primary);

    font-family:
        var(--amoladero-font-body);

    font-size:
        clamp(0.95rem, 1vw, 1.08rem);

    font-weight: 400;

    line-height:
        1.42;
}


/* ==========================================================================
   BUTTON
   ========================================================================== */

.amoladero-actores__actions {
    display: flex;

    justify-content: center;

    width: 100%;

    max-width:
        500px;

    margin: 0;
}


.amoladero-actores__button {
    margin: 0;
}


.amoladero-actores__button
.wp-block-button__link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width:
        clamp(160px, 14vw, 210px);

    min-height:
        44px;

    padding:
        12px 30px;

    border: 0;

    border-radius:
        var(--amoladero-radius-pill);

    background:
        var(--amoladero-accent);

    color:
        var(--amoladero-white);

    font-family:
        var(--amoladero-font-heavy);

    font-size:
        0.76rem;

    font-weight: 800;

    line-height: 1;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        background 180ms ease,
        transform 180ms ease;
}


.amoladero-actores__button
.wp-block-button__link:hover {
    background:
        var(--amoladero-primary);

    transform:
        translateY(-2px);
}


/* ==========================================================================
   MEDIA COLUMN
   ========================================================================== */

.amoladero-actores__media {
    position: relative;

    align-self:
        stretch !important;

    flex-basis:
        54% !important;

    width:
        54%;

    min-width: 0;

    min-height:
        inherit;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible;
}


/* ==========================================================================
   IMAGE
   ========================================================================== */

.amoladero-actores__image {
    position: absolute;

    /*
     * Continúa visualmente desde el slider.
     */
    top:
        -2px;

    /*
     * La ilustración sale deliberadamente
     * fuera de su columna hacia la derecha.
     */
    right:
        clamp(-330px, -17vw, -210px);

    width:
        clamp(580px, 55vw, 840px);

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    line-height:
        0;

    z-index:
        4;
}


.amoladero-actores__image img {
    display:
        block;

    width:
        100% !important;

    height:
        auto !important;

    max-width:
        none !important;

    max-height:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    object-fit:
        contain;

    object-position:
        top right;
}


/* ==========================================================================
   SMALL DESKTOP / TABLET LANDSCAPE
   ========================================================================== */

@media (max-width: 1200px) {

    .amoladero-actores__inner {
        width:
            min(
                calc(100% - 104px),
                1180px
            );
    }


    .amoladero-actores__columns {
        gap:
            clamp(28px, 4vw, 56px);
    }


    .amoladero-actores__content {
        flex-basis:
            47% !important;

        width:
            47%;
    }


    .amoladero-actores__media {
        flex-basis:
            53% !important;

        width:
            53%;
    }


    .amoladero-actores__image {
        right:
            clamp(-230px, -15vw, -150px);

        width:
            clamp(520px, 58vw, 720px);
    }

}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1024px) {

    .amoladero-actores {
        min-height:
            clamp(470px, 55vw, 610px);
    }


    .amoladero-actores__inner {
        width:
            calc(100% - 90px);
    }


    .amoladero-actores__title {
        font-size:
            clamp(2.7rem, 5.8vw, 4.4rem);
    }


    .amoladero-actores__image {
        right:
            -130px;

        width:
            clamp(470px, 59vw, 620px);
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 781px) {

    .amoladero-actores {
        --actores-rail-width:
            34px;

        min-height:
            auto;

        /*
         * Separación REAL antes de la siguiente sección.
         */
        padding-bottom:
            32px;

        box-sizing:
            border-box;
    }


    /* ----------------------------------------------------------------------
       Inner
       ---------------------------------------------------------------------- */

    .amoladero-actores__inner {
        width:
            calc(100% - 70px);

        margin-left:
            52px;

        margin-right:
            18px;
    }


    /* ----------------------------------------------------------------------
       Orden móvil
       1. Ave
       2. Contenido
       ---------------------------------------------------------------------- */

    .amoladero-actores__columns {
        display:
            flex;

        flex-direction:
            column;

        gap:
            0;
    }


    /* ----------------------------------------------------------------------
       Ave primero
       ---------------------------------------------------------------------- */

    .amoladero-actores__media {
        position:
            relative;

        order:
            1;

        flex-basis:
            auto !important;

        width:
            100%;

        /*
         * Espacio suficiente para mostrar el final
         * de la ilustración sin generar el enorme hueco
         * que teníamos anteriormente.
         */
        min-height:
            clamp(300px, 78vw, 410px);

        margin:
            0 !important;

        padding:
            0 !important;

        overflow:
            visible;
    }


    .amoladero-actores__image {
        position:
            absolute;

        top:
            -2px;

        right:
            clamp(-72px, -12vw, -42px);

        width:
            clamp(370px, 108vw, 510px);

        max-width:
            none !important;

        margin:
            0 !important;

        padding:
            0 !important;

        line-height:
            0;
    }


    .amoladero-actores__image img {
        display:
            block;

        width:
            100% !important;

        height:
            auto !important;

        max-width:
            none !important;

        margin:
            0 !important;

        object-fit:
            contain;

        object-position:
            top right;
    }


    /* ----------------------------------------------------------------------
       Content después
       ---------------------------------------------------------------------- */

    .amoladero-actores__content {
        position:
            relative;

        z-index:
            5;

        order:
            2;

        flex-basis:
            auto !important;

        width:
            100%;

        max-width:
            none;

        /*
         * El padding inferior de la sección es ahora
         * quien separa Actores de la sección siguiente.
         */
        padding:
            10px 0 24px;
    }


    .amoladero-actores__title {
        width:
            100%;

        max-width:
            100%;

        margin:
            0 0 20px;

        font-size:
            clamp(2.7rem, 12vw, 4rem);

        line-height:
            0.9;
    }


    .amoladero-actores__description {
        width:
            100%;

        max-width:
            none;

        margin:
            0 0 34px;

        line-height:
            1.45;
    }


    .amoladero-actores__actions {
        display:
            flex;

        justify-content:
            center;

        width:
            100%;

        max-width:
            none;

        margin:
            0;
    }


    .amoladero-actores__button
    .wp-block-button__link {
        min-width:
            160px;

        padding:
            12px 28px;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

    .amoladero-actores {
        --actores-rail-width:
            30px;

        /*
         * Aire debajo del botón.
         */
        padding-bottom:
            28px;
    }


    .amoladero-actores__inner {
        width:
            calc(100% - 60px);

        margin-left:
            46px;

        margin-right:
            14px;
    }


    .amoladero-actores__media {
        min-height:
            clamp(280px, 76vw, 350px);
    }


    .amoladero-actores__image {
        right:
            -42px;

        width:
            clamp(340px, 108vw, 460px);
    }


    .amoladero-actores__content {
        padding:
            8px 0 20px;
    }


    .amoladero-actores__title {
        margin-bottom:
            18px;

        font-size:
            clamp(2.45rem, 12vw, 3.6rem);
    }


    .amoladero-actores__description {
        margin-bottom:
            30px;
    }


    .amoladero-actores__actions {
        margin:
            0;
    }

}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 380px) {

    .amoladero-actores {
        padding-bottom:
            24px;
    }


    .amoladero-actores__inner {
        width:
            calc(100% - 54px);

        margin-left:
            42px;

        margin-right:
            12px;
    }


    .amoladero-actores__media {
        min-height:
            270px;
    }


    .amoladero-actores__image {
        right:
            -38px;

        width:
            108vw;
    }


    .amoladero-actores__title {
        font-size:
            clamp(2.3rem, 12vw, 3.15rem);
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .amoladero-actores__button
    .wp-block-button__link {
        transition:
            none;
    }

}