/* =========================================================
   FRAMEUP
   ICONOS + MICROINTERACCIONES
========================================================= */


/* =========================================================
   ICONOS GENERALES
========================================================= */

.frameup-icono-svg {
    width: 25px;
    height: 25px;

    display: block;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   TARJETAS DE PRODUCCIÓN
========================================================= */

.frameup-producciones-grid a {
    position: relative;

    min-height: 145px;

    padding:
        24px 22px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: space-between;

    gap: 18px;

    border:
        1px solid
        rgba(29, 30, 29, 0.10);

    border-radius: 16px;

    background:
        #FFFFFF;

    color:
        #1D1E1D;

    text-decoration: none;

    box-shadow:
        0 7px 18px
        rgba(29, 30, 29, 0.025);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}


.frameup-producciones-grid a::after {
    content: "";

    width: 80px;
    height: 80px;

    position: absolute;

    right: -35px;
    top: -35px;

    border-radius: 50%;

    background:
        rgba(237, 107, 39, 0.07);

    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}


.frameup-producciones-grid a:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(237, 107, 39, 0.45);

    box-shadow:
        0 15px 34px
        rgba(29, 30, 29, 0.09);
}


.frameup-producciones-grid a:hover::after {
    transform:
        scale(1.8);

    background:
        rgba(237, 107, 39, 0.09);
}


/* =========================================================
   ICONO PRODUCCIÓN
========================================================= */

.frameup-production-icon {
    width: 48px;
    height: 48px;

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        13px;

    background:
        #FFF1E9;

    color:
        #ED6B27;

    transition:
        background-color 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease;
}


.frameup-producciones-grid a:hover
.frameup-production-icon {
    background:
        #ED6B27;

    color:
        #FFFFFF;

    transform:
        rotate(-4deg)
        scale(1.05);
}


/* =========================================================
   TEXTO PRODUCCIÓN
========================================================= */

.frameup-production-name {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.frameup-production-name strong {
    color:
        #1D1E1D;

    font-size: 13px;

    font-weight: 600;
}


.frameup-production-name small {
    color:
        #818181;

    font-size: 10px;

    line-height: 1.35;
}


/* =========================================================
   FLECHA TARJETAS
========================================================= */

.frameup-production-arrow {
    position: absolute;

    right: 17px;
    bottom: 17px;

    z-index: 2;

    color:
        #B1B1B1;

    font-size: 16px;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.frameup-producciones-grid a:hover
.frameup-production-arrow {
    color:
        #ED6B27;

    transform:
        translateX(4px);
}


/* =========================================================
   GRID CÓMO FUNCIONA
   LÍNEA QUE CONECTA EL PROCESO
========================================================= */

.frameup-pasos-grid {
    position: relative;
}


/*
   La línea queda detrás de las tarjetas
   y solo se observa en el espacio entre ellas.
*/

.frameup-pasos-grid::before {
    content: "";

    position: absolute;

    left: 7%;
    right: 7%;

    top: 50px;

    height: 2px;

    z-index: 0;

    background:
        linear-gradient(
            90deg,
            rgba(237, 107, 39, 0.15),
            rgba(237, 107, 39, 0.80),
            rgba(237, 107, 39, 0.15)
        );
}


/* =========================================================
   TARJETAS PASOS
========================================================= */

.frameup-paso {
    position: relative;

    z-index: 1;

    transition:
        transform 0.23s ease,
        border-color 0.23s ease,
        box-shadow 0.23s ease;
}


.frameup-paso:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(237, 107, 39, 0.38) !important;

    box-shadow:
        0 16px 35px
        rgba(29, 30, 29, 0.08);
}


/* =========================================================
   ICONOS PASOS
========================================================= */

.frameup-paso-icono {
    width: 52px !important;
    height: 52px !important;

    margin-bottom:
        18px;

    position: relative;

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    background:
        #FFF1E9;

    color:
        #ED6B27;

    font-size:
        0 !important;

    transition:
        transform 0.22s ease,
        background-color 0.22s ease,
        color 0.22s ease;
}


.frameup-paso:hover
.frameup-paso-icono {
    transform:
        translateY(-3px)
        rotate(-3deg);

    background:
        #ED6B27;

    color:
        #FFFFFF;
}


.frameup-paso-icono
.frameup-icono-svg {
    width:
        25px;

    height:
        25px;
}


/* =========================================================
   INDICACIÓN DE SECUENCIA
========================================================= */

.frameup-paso:not(:last-child)
.frameup-paso-icono::after {
    content: "→";

    position: absolute;

    left:
        calc(100% + 12px);

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        rgba(237, 107, 39, 0.70);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        14px;

    font-weight:
        600;

    pointer-events:
        none;
}


/* =========================================================
   NÚMEROS
========================================================= */

.frameup-numero {
    background:
        #ED6B27 !important;

    color:
        #FFFFFF !important;

    box-shadow:
        0 5px 14px
        rgba(237, 107, 39, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.frameup-paso:hover
.frameup-numero {
    transform:
        scale(1.08);

    box-shadow:
        0 8px 18px
        rgba(237, 107, 39, 0.25);
}


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

@media (max-width: 1100px) {

    /*
       Cuando pasa a dos columnas,
       quitamos la línea horizontal continua.
    */

    .frameup-pasos-grid::before {
        display: none;
    }


    .frameup-paso:not(:last-child)
    .frameup-paso-icono::after {
        display: none;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 700px) {

    .frameup-producciones-grid a {
        min-height:
            125px;

        padding:
            20px;
    }


    .frameup-production-icon {
        width:
            44px;

        height:
            44px;
    }


    .frameup-icono-svg {
        width:
            23px;

        height:
            23px;
    }


    .frameup-paso:hover {
        transform:
            translateY(-3px);
    }

}