/* ==========================================================
   CODEPENDENCIA EMOCIONAL — RETOQUE VISUAL V1
   Alcance: solo contenido principal, beneficios, video e imagen
   + nota final de metodología. No toca header/footer/FAQ/CTA.
========================================================== */

body.ap-safe-codep{
    --codep-navy:#073b7a;
    --codep-blue:#0d6efd;
    --codep-cyan:#19a9ee;
    --codep-soft:#eef8ff;
    --codep-soft-2:#dff2ff;
    --codep-text:#2d4358;
}

/* ---------- sección principal ---------- */
body.ap-safe-codep .codep-main-polish{
    padding-top:clamp(1.45rem,3vw,2.6rem) !important;
    padding-bottom:clamp(1.6rem,3vw,2.7rem) !important;
    background:
        radial-gradient(circle at 8% 12%,rgba(25,169,238,.09),transparent 24rem),
        linear-gradient(180deg,#f7fcff 0%,#ffffff 100%);
}

body.ap-safe-codep .codep-main-polish > .container{
    padding-top:0 !important;
    padding-bottom:0 !important;
}

body.ap-safe-codep .codep-main-polish .row.g-5{
    --bs-gutter-x:1.25rem;
    --bs-gutter-y:1.25rem;
    align-items:stretch;
}

/* Tarjeta del texto: elimina el aspecto plano/blanco. */
body.ap-safe-codep .codep-main-copy-card{
    position:relative;
    overflow:hidden;
    padding:clamp(1.25rem,2.5vw,2rem) !important;
    border:1px solid rgba(13,110,253,.18);
    border-radius:22px;
    background:linear-gradient(135deg,#dff2ff 0%,#edf8ff 56%,#f8fcff 100%);
    box-shadow:0 12px 32px rgba(1,58,112,.09);
}

body.ap-safe-codep .codep-main-copy-card::before{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:5px;
    background:linear-gradient(90deg,var(--codep-cyan),var(--codep-blue));
}

body.ap-safe-codep .codep-main-copy-card > h4{
    display:inline-flex;
    align-items:center;
    margin-bottom:.8rem !important;
    padding:.42rem .7rem;
    border:1px solid rgba(13,110,253,.14);
    border-radius:999px;
    background:rgba(255,255,255,.72);
    color:#0b5fa6 !important;
    font-size:.78rem;
    letter-spacing:.035em;
}

body.ap-safe-codep .codep-main-copy-card > h2{
    color:var(--codep-navy) !important;
    font-weight:800;
    line-height:1.18;
}

body.ap-safe-codep .codep-main-copy-card > p{
    color:var(--codep-text);
    line-height:1.72;
}

/* ---------- video: deja de flotar entre los párrafos ---------- */
body.ap-safe-codep .codep-main-copy-card .ap-safe-codep-video{
    float:none !important;
    clear:both;
    width:min(100%,230px) !important;
    margin:1.25rem auto 1.35rem !important;
}

body.ap-safe-codep .codep-main-copy-card .ap-safe-codep-video .ap-video-short{
    width:100% !important;
    margin:0 !important;
}

body.ap-safe-codep .codep-main-copy-card .ap-safe-codep-video .ap-video-card{
    width:100% !important;
    max-width:none !important;
    overflow:hidden;
    border:1px solid rgba(13,110,253,.20) !important;
    border-radius:20px !important;
    background:#fff !important;
    box-shadow:0 12px 28px rgba(1,55,110,.13) !important;
}

body.ap-safe-codep .codep-main-copy-card .ap-safe-codep-video .ap-video-media{
    width:100% !important;
    aspect-ratio:9 / 16 !important;
}

body.ap-safe-codep .codep-main-copy-card .ap-safe-codep-video .ap-video-info{
    padding:.78rem .82rem .9rem !important;
    background:linear-gradient(180deg,#fff,#f4fbff) !important;
}

body.ap-safe-codep .codep-main-copy-card .ap-safe-codep-video .ap-video-info > span{
    color:#0d6efd !important;
    font-weight:800;
}

body.ap-safe-codep .codep-main-copy-card .ap-safe-codep-video .ap-video-info h4{
    color:#173b5d !important;
    font-size:.84rem !important;
    line-height:1.35 !important;
}

/* ---------- 6 puntos = tarjetas ---------- */
body.ap-safe-codep .codep-benefits-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.72rem;
    margin:.75rem 0 1.05rem !important;
    padding:0 !important;
    list-style:none !important;
}

body.ap-safe-codep .codep-benefits-grid > li{
    position:relative;
    min-width:0;
    margin:0 !important;
    padding:.88rem .9rem .88rem 1.08rem;
    overflow:hidden;
    border:1px solid rgba(13,110,253,.16);
    border-radius:14px;
    background:rgba(255,255,255,.82);
    color:#254059;
    line-height:1.52;
    box-shadow:0 5px 14px rgba(20,95,160,.055);
}

body.ap-safe-codep .codep-benefits-grid > li:nth-child(even){
    background:linear-gradient(135deg,#f8fdff,#eaf7ff);
}

body.ap-safe-codep .codep-benefits-grid > li::before{
    content:"";
    position:absolute;
    left:0;
    top:.55rem;
    bottom:.55rem;
    width:4px;
    border-radius:0 8px 8px 0;
    background:linear-gradient(180deg,var(--codep-cyan),var(--codep-blue));
}

body.ap-safe-codep .codep-benefits-grid > li strong{
    color:#084f91;
    font-weight:800;
}

/* ---------- imagen como tarjeta ---------- */
body.ap-safe-codep .codep-main-image-card{
    display:flex;
}

body.ap-safe-codep .codep-main-image-card > .position-relative{
    width:100%;
    overflow:hidden;
    border:1px solid rgba(13,110,253,.15);
    border-radius:22px;
    background:#edf8ff;
    box-shadow:0 12px 32px rgba(1,58,112,.08);
}

body.ap-safe-codep .codep-main-image-card img{
    display:block;
    width:100%;
    height:auto;
    min-height:430px;
    margin:0 !important;
    border-radius:0 !important;
    object-fit:cover;
    object-position:center;
}

body.ap-safe-codep .codep-main-image-card p{
    margin:0 !important;
    padding:.9rem 1rem 1rem;
    background:linear-gradient(135deg,#e7f6ff,#f8fcff);
    color:#567087 !important;
}

/* ---------- texto final de metodología también deja de quedar suelto ---------- */
body.ap-safe-codep .codep-method-polish .codep-method-note{
    position:relative;
    margin:0 !important;
    padding:1rem 1.05rem 1rem 1.2rem;
    overflow:hidden;
    border:1px solid rgba(13,110,253,.16);
    border-left:5px solid var(--codep-blue);
    border-radius:14px;
    background:linear-gradient(135deg,#e9f7ff,#ffffff);
    color:#334d64 !important;
    line-height:1.7;
    box-shadow:0 7px 20px rgba(1,58,112,.06);
}

/* ---------- efecto PC ---------- */
@media (hover:hover) and (pointer:fine){
    body.ap-safe-codep .codep-benefits-grid > li,
    body.ap-safe-codep .codep-main-copy-card .ap-video-card{
        transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
    }
    body.ap-safe-codep .codep-benefits-grid > li:hover,
    body.ap-safe-codep .codep-main-copy-card .ap-video-card:hover{
        transform:translateY(-2px);
        border-color:rgba(13,110,253,.34) !important;
        box-shadow:0 10px 22px rgba(1,58,112,.11) !important;
    }
}

/* ---------- tablet ---------- */
@media (max-width:991.98px){
    body.ap-safe-codep .codep-main-image-card img{
        min-height:0;
        aspect-ratio:16 / 10;
    }
}

/* ---------- móvil ---------- */
@media (max-width:767.98px){
    body.ap-safe-codep .codep-main-polish{
        padding-top:1.05rem !important;
        padding-bottom:1.35rem !important;
    }
    body.ap-safe-codep .codep-main-copy-card{
        padding:1.05rem !important;
        border-radius:18px;
    }
    body.ap-safe-codep .codep-benefits-grid{
        grid-template-columns:1fr;
        gap:.62rem;
    }
    body.ap-safe-codep .codep-main-copy-card .ap-safe-codep-video{
        width:min(72vw,218px) !important;
        margin:1.05rem auto 1.2rem !important;
    }
    body.ap-safe-codep .codep-main-image-card > .position-relative{
        border-radius:18px;
    }
}

@media (max-width:420px){
    body.ap-safe-codep .codep-benefits-grid > li{
        padding:.8rem .82rem .8rem 1rem;
        border-radius:12px;
    }
    body.ap-safe-codep .codep-main-copy-card .ap-safe-codep-video{
        width:min(76vw,210px) !important;
    }
}

@media (prefers-reduced-motion:reduce){
    body.ap-safe-codep .codep-benefits-grid > li,
    body.ap-safe-codep .codep-main-copy-card .ap-video-card{
        transition:none !important;
        transform:none !important;
    }
}

/* CODEP-PC-FILL-CARD-V2:START */

/* ==========================================================
   TARJETA COMPLEMENTARIA DERECHA

   Oculta por defecto.
   Solo aparece en escritorio >= 992 px.
========================================================== */

body.ap-safe-codep
.codep-main-image-fill-card{

    display:none;

}


/* ==========================================================
   SOLO PC
========================================================== */

@media (min-width:992px){

    /*
       La columna sigue teniendo el mismo alto
       que la tarjeta izquierda.
    */

    body.ap-safe-codep
    .codep-main-image-card{

        align-self:
            stretch;

    }


    /*
       Convertimos el interior en columna,
       PERO la imagen NO recibe flex-grow.
    */

    body.ap-safe-codep
    .codep-main-image-card
    > .position-relative{

        display:
            flex;

        flex-direction:
            column;

        width:
            100%;

        height:
            100%;

    }


    /*
       MUY IMPORTANTE:
       recuperar comportamiento natural de imagen.

       NO height:0
       NO flex-grow
       NO estiramiento.
    */

    body.ap-safe-codep
    .codep-main-image-card
    img{

        flex:
            0 0 auto;

        width:
            100%;

        height:
            auto !important;

        min-height:
            430px;

        max-height:
            none;

        object-fit:
            cover;

        object-position:
            center;

    }


    body.ap-safe-codep
    .codep-main-image-card
    p{

        flex:
            0 0 auto;

    }


    /* ======================================================
       NUEVA TARJETA QUE ABSORBE EL ESPACIO RESTANTE
    ====================================================== */

    body.ap-safe-codep
    .codep-main-image-fill-card{

        position:
            relative;

        display:
            flex;

        flex:
            1 1 auto;

        flex-direction:
            column;

        justify-content:
            center;

        gap:
            1rem;


        min-height:
            150px;


        margin:
            .85rem;


        padding:
            1.15rem;


        overflow:
            hidden;


        border:
            1px solid
            rgba(
                13,
                110,
                253,
                .16
            );


        border-radius:
            17px;


        background:

            radial-gradient(
                circle at 90% 8%,
                rgba(
                    255,
                    255,
                    255,
                    .88
                ),
                transparent 8rem
            ),

            linear-gradient(
                135deg,
                #ccecff 0%,
                #e3f5ff 55%,
                #f3fbff 100%
            );


        box-shadow:
            0 8px 22px
            rgba(
                1,
                58,
                112,
                .075
            );

    }


    /*
       Línea superior tipo tarjetas
    */

    body.ap-safe-codep
    .codep-main-image-fill-card::before{

        content:
            "";


        position:
            absolute;


        top:
            0;

        left:
            0;

        right:
            0;


        height:
            5px;


        background:
            linear-gradient(
                90deg,
                #19a9ee,
                #0d6efd
            );

    }


    /*
       Decoración suave.
       No invade la imagen.
    */

    body.ap-safe-codep
    .codep-main-image-fill-card::after{

        content:
            "";


        position:
            absolute;


        right:
            -52px;

        bottom:
            -58px;


        width:
            145px;

        height:
            145px;


        border:
            22px solid
            rgba(
                255,
                255,
                255,
                .37
            );


        border-radius:
            50%;


        pointer-events:
            none;

    }


    /* ======================================================
       CABECERA
    ====================================================== */

    body.ap-safe-codep
    .codep-fill-card-head{

        position:
            relative;

        z-index:
            1;


        display:
            flex;

        align-items:
            center;


        gap:
            .8rem;

    }


    body.ap-safe-codep
    .codep-fill-card-symbol{

        width:
            42px;

        height:
            42px;


        flex:
            0 0 42px;


        display:
            grid;

        place-items:
            center;


        border-radius:
            13px;


        background:
            linear-gradient(
                145deg,
                #19a9ee,
                #0d6efd
            );


        color:
            #ffffff;


        font-size:
            1.05rem;


        box-shadow:
            0 6px 15px
            rgba(
                13,
                110,
                253,
                .20
            );

    }


    body.ap-safe-codep
    .codep-fill-card-head
    small{

        display:
            block;


        margin-bottom:
            .15rem;


        color:
            #0d6efd;


        font-size:
            .67rem;


        font-weight:
            800;


        letter-spacing:
            .08em;

    }


    body.ap-safe-codep
    .codep-fill-card-head
    strong{

        display:
            block;


        color:
            #073b7a;


        font-size:
            .95rem;


        font-weight:
            800;


        line-height:
            1.3;

    }


    /* ======================================================
       MINI TARJETAS
    ====================================================== */

    body.ap-safe-codep
    .codep-fill-card-items{

        position:
            relative;

        z-index:
            1;


        display:
            grid;


        grid-template-columns:
            1fr;


        gap:
            .55rem;

    }


    body.ap-safe-codep
    .codep-fill-mini{

        display:
            flex;

        align-items:
            center;


        gap:
            .65rem;


        padding:
            .68rem
            .75rem;


        border:
            1px solid
            rgba(
                13,
                110,
                253,
                .12
            );


        border-radius:
            12px;


        background:
            rgba(
                255,
                255,
                255,
                .72
            );

    }


    body.ap-safe-codep
    .codep-fill-mini
    > span{

        width:
            28px;

        height:
            28px;


        flex:
            0 0 28px;


        display:
            grid;

        place-items:
            center;


        border-radius:
            9px;


        background:
            #e4f4ff;


        color:
            #0877d7;


        font-size:
            .88rem;

    }


    body.ap-safe-codep
    .codep-fill-mini
    strong{

        color:
            #24435f;


        font-size:
            .82rem;


        font-weight:
            750;


        line-height:
            1.3;

    }

}


/* ==========================================================
   TABLET / MÓVIL

   Se asegura que este añadido no exista visualmente
   por debajo de 992 px.
========================================================== */

@media (max-width:991.98px){

    body.ap-safe-codep
    .codep-main-image-fill-card{

        display:
            none !important;

    }


    body.ap-safe-codep
    .codep-main-image-card
    > .position-relative{

        display:
            block;

        height:
            auto;

    }


    body.ap-safe-codep
    .codep-main-image-card
    img{

        height:
            auto !important;

        flex:
            none;

    }

}

/* CODEP-PC-FILL-CARD-V2:END */