/* ==========================================================
   ARTÍCULOS — ESTRUCTURA SEGURA V2
   Referencia de color: Pensamientos Automáticos
   No crea grids artificiales para las secciones principales.
========================================================== */

/* Flujo principal: una tarjeta debajo de otra. */
.ap-safe-article .ap-safe-section{
    position:relative;
    display:flow-root;
    width:100%;
    margin:0 0 1rem;
    padding:clamp(1.15rem,2.2vw,1.55rem);
    border:1px solid rgba(13,110,253,.22);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 9px 25px rgba(16,99,180,.08);
}
.ap-safe-article .ap-safe-tone-a{
    background:linear-gradient(135deg,#ccecff 0%,#e5f5ff 55%,#f1faff 100%) !important;
    border-color:rgba(20,130,220,.35) !important;
}
.ap-safe-article .ap-safe-tone-b{
    background:linear-gradient(135deg,#b9ddff 0%,#d8edff 55%,#eef8ff 100%) !important;
    border-color:rgba(30,105,200,.32) !important;
}
.ap-safe-article .ap-safe-section::before,
.ap-safe-abuse .ap-safe-impact-panel::before,
.ap-safe-codep .service-item::before,
.ap-safe-codep .accordion-item::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:5px;
    background:linear-gradient(90deg,#00a8ff,#006de5);
    pointer-events:none;
}
.ap-safe-article .ap-safe-section:nth-of-type(even)::before,
.ap-safe-codep .accordion-item:nth-child(even)::before{
    background:linear-gradient(90deg,#006de5,#48c6ff);
}
.ap-safe-article .ap-safe-section > h2:first-child,
.ap-safe-article .ap-safe-section > h3:first-child{
    margin-top:0 !important;
}
.ap-safe-article .ap-safe-section h2,
.ap-safe-article .ap-safe-section h3,
.ap-safe-abuse .ap-safe-impact-panel h2,
.ap-safe-abuse .ap-safe-impact-panel h3{
    color:#073b7a !important;
    font-weight:750;
    line-height:1.26;
}
.ap-safe-article .ap-safe-section h4{
    color:#0d4ea6 !important;
    font-weight:700;
}
.ap-safe-article .ap-safe-section p,
.ap-safe-article .ap-safe-section li,
.ap-safe-abuse .ap-safe-impact-panel p,
.ap-safe-abuse .ap-safe-impact-panel li{
    color:#203247;
    line-height:1.72;
}

/* Callouts originales: se conservan, solo armonizan visualmente. */
.ap-safe-article .ap-safe-section .rounded-3{
    border-color:rgba(13,110,253,.15) !important;
    box-shadow:none !important;
}

/* Video integrado en la MISMA tarjeta: el texto fluye alrededor y luego debajo. */
.ap-safe-video-float{
    float:right;
    width:min(31%,210px);
    margin:.1rem 0 .85rem 1.2rem;
}
.ap-safe-video-float .ap-video-short{
    width:100% !important;
    margin:0 !important;
    display:block !important;
}
.ap-safe-video-float .ap-video-card{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    border-radius:17px !important;
    box-shadow:0 10px 25px rgba(1,21,71,.11) !important;
}
.ap-safe-video-float .ap-video-info{
    padding:12px 12px 14px !important;
}
.ap-safe-video-float .ap-video-info h4{
    font-size:.88rem !important;
    line-height:1.35 !important;
    margin:0 !important;
}

/* ==========================================================
   ABUSO — RESTAURA SUS CUADRÍCULAS ORIGINALES
========================================================== */
.ap-safe-abuse .ap-abuse-grid-six,
.ap-safe-abuse .ap-abuse-grid-three{
    margin-top:.25rem;
    margin-bottom:1.25rem !important;
}
.ap-safe-abuse .ap-abuse-grid-six > .col > div,
.ap-safe-abuse .ap-abuse-grid-three > [class*="col-"] > div{
    position:relative;
    height:100% !important;
    overflow:hidden;
    border:1px solid rgba(13,110,253,.22) !important;
    border-radius:16px !important;
    box-shadow:0 8px 22px rgba(16,99,180,.09) !important;
}
.ap-safe-abuse .ap-abuse-grid-six > .col:nth-child(odd) > div,
.ap-safe-abuse .ap-abuse-grid-three > [class*="col-"]:nth-child(odd) > div{
    background:linear-gradient(135deg,#ccecff 0%,#e5f5ff 55%,#f1faff 100%) !important;
}
.ap-safe-abuse .ap-abuse-grid-six > .col:nth-child(even) > div,
.ap-safe-abuse .ap-abuse-grid-three > [class*="col-"]:nth-child(even) > div{
    background:linear-gradient(135deg,#b9ddff 0%,#d8edff 55%,#eef8ff 100%) !important;
}
.ap-safe-abuse .ap-abuse-grid-six > .col > div::before,
.ap-safe-abuse .ap-abuse-grid-three > [class*="col-"] > div::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;height:5px;
    background:linear-gradient(90deg,#00a8ff,#006de5);
}
.ap-safe-abuse .ap-safe-impact-panel{
    position:relative;
    display:flow-root;
    overflow:hidden;
    border:1px solid rgba(20,130,220,.30) !important;
    background:linear-gradient(135deg,#ccecff 0%,#e5f5ff 55%,#f1faff 100%) !important;
    box-shadow:0 9px 25px rgba(16,99,180,.09) !important;
}

/* ==========================================================
   CODEPENDENCIA — conserva columnas, servicios y acordeón
========================================================== */
.ap-safe-codep .service-item,
.ap-safe-codep .accordion-item{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(13,110,253,.20) !important;
    box-shadow:0 8px 24px rgba(16,99,180,.08) !important;
}
.ap-safe-codep .service-item{
    background:linear-gradient(135deg,#ccecff 0%,#e5f5ff 55%,#f1faff 100%) !important;
}
.ap-safe-codep .col-lg-4:nth-child(even) .service-item{
    background:linear-gradient(135deg,#b9ddff 0%,#d8edff 55%,#eef8ff 100%) !important;
}
.ap-safe-codep .accordion-item:nth-child(odd){
    background:linear-gradient(135deg,#f1faff 0%,#ffffff 100%) !important;
}
.ap-safe-codep .accordion-item:nth-child(even){
    background:linear-gradient(135deg,#e5f5ff 0%,#ffffff 100%) !important;
}
.ap-safe-codep .accordion-button,
.ap-safe-codep .accordion-body{
    background:transparent !important;
}
.ap-safe-codep .ap-safe-codep-video{
    width:min(38%,190px);
}

/* PC: efecto discreto, jamás cambia estructura. */
@media (hover:hover) and (pointer:fine){
    .ap-safe-article .ap-safe-section,
    .ap-safe-abuse .ap-abuse-grid-six > .col > div,
    .ap-safe-abuse .ap-abuse-grid-three > [class*="col-"] > div,
    .ap-safe-codep .service-item,
    .ap-safe-codep .accordion-item{
        transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
    }
    .ap-safe-article .ap-safe-section:hover,
    .ap-safe-abuse .ap-abuse-grid-six > .col > div:hover,
    .ap-safe-abuse .ap-abuse-grid-three > [class*="col-"] > div:hover,
    .ap-safe-codep .service-item:hover,
    .ap-safe-codep .accordion-item:hover{
        transform:translateY(-2px);
        border-color:rgba(0,105,220,.42) !important;
        box-shadow:0 13px 30px rgba(16,99,180,.14) !important;
    }
}

/* Tablet y móvil: video arriba, tarjeta usa todo el ancho. */
@media (max-width:767.98px){
    .ap-safe-article .ap-safe-section{
        margin-bottom:.85rem;
        padding:1rem;
        border-radius:15px;
    }
    .ap-safe-video-float,
    .ap-safe-codep .ap-safe-codep-video{
        float:none;
        width:min(74vw,230px);
        margin:0 auto 1.1rem;
    }
    .ap-safe-abuse .ap-abuse-grid-six,
    .ap-safe-abuse .ap-abuse-grid-three{
        --bs-gutter-y:.85rem;
    }
}
@media (max-width:575.98px){
    .ap-safe-video-float,
    .ap-safe-codep .ap-safe-codep-video{
        width:min(72vw,215px);
    }
    .ap-safe-article .ap-safe-section::before,
    .ap-safe-abuse .ap-safe-impact-panel::before,
    .ap-safe-abuse .ap-abuse-grid-six > .col > div::before,
    .ap-safe-abuse .ap-abuse-grid-three > [class*="col-"] > div::before,
    .ap-safe-codep .service-item::before,
    .ap-safe-codep .accordion-item::before{
        height:4px;
    }
}
@media (prefers-reduced-motion:reduce){
    .ap-safe-article .ap-safe-section,
    .ap-safe-abuse .ap-abuse-grid-six > .col > div,
    .ap-safe-abuse .ap-abuse-grid-three > [class*="col-"] > div,
    .ap-safe-codep .service-item,
    .ap-safe-codep .accordion-item{
        transition:none !important;
        transform:none !important;
    }
}