/* ==========================================================
   AUTOCUIDO — REDESIGN V2
   Mantiene lenguaje visual de Pensamientos Automáticos.
========================================================== */

.autocuido-page {
    overflow-x: hidden;
}

.autocuido-main,
.autocuido-main * {
    min-width: 0;
}


/* ==========================================================
   HERO LIMPIO
========================================================== */

.autocuido-page .autocuido-breadcrumb {
    position: relative;

    display: flex;

    min-height:
        clamp(
            350px,
            38vw,
            510px
        );

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(5, 77, 160, .42),
            rgba(7, 34, 92, .25)
        ),
        url("../../img/bg-breadcrumb.webp")
        66% 42% / cover
        no-repeat;
}


.autocuido-page .autocuido-breadcrumb::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 66% 40%,
            rgba(255,255,255,.13),
            transparent 34%
        );

    pointer-events: none;
}


.autocuido-breadcrumb-inner {
    position: relative;
    z-index: 2;

    display: flex;

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

    min-height: inherit;

    text-align: center;
}


.autocuido-breadcrumb h1 {
    margin: 0;

    color: #fff;

    font-size:
        clamp(
            2.7rem,
            7vw,
            5rem
        );

    font-weight: 800;

    line-height: 1;

    text-shadow:
        0 10px 30px
        rgba(0,0,0,.22);
}


/* ==========================================================
   CONTENIDO
========================================================== */

.autocuido-section {
    background:
        radial-gradient(
            circle at 10% 12%,
            rgba(13,110,253,.08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f8fbff,
            #ffffff
        );
}


.autocuido-main-media {
    min-height: 550px;
}


.autocuido-main-media img {
    object-position: center center;
}


/* ==========================================================
   PILARES
========================================================== */

.autocuido-pillars {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 1rem;
}


.autocuido-pillars
.thoughts-card {
    position: relative;

    height: 100%;
}


.autocuido-pillar-number {
    position: absolute;

    top: 1rem;
    right: 1rem;

    color:
        rgba(5,59,135,.13);

    font-size: 2rem;
    font-weight: 900;
}


.autocuido-pillar-icon {
    display: grid;

    width: 52px;
    height: 52px;

    margin-bottom: 1rem;

    place-items: center;

    border-radius: 15px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #0f73d8,
            #21a8e5
        );

    font-size: 1.25rem;

    transition:
        transform .3s ease;
}


.autocuido-pillars
.thoughts-card:hover
.autocuido-pillar-icon {
    transform:
        scale(1.07)
        translateY(-2px);
}


/* ==========================================================
   RESPONSABILIDAD
========================================================== */

.autocuido-responsibility {
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );
}


.autocuido-responsibility
.thoughts-step {
    height: 100%;
}


.autocuido-closing-message {
    display: grid;

    grid-template-columns:
        50px
        minmax(0,1fr);

    gap: .9rem;

    margin-top: 1.25rem;

    padding: 1.15rem 1.25rem;

    border-radius: 17px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #082c6c,
            #087ab8
        );
}


.autocuido-closing-message > i {
    display: grid;

    width: 50px;
    height: 50px;

    place-items: center;

    border-radius: 14px;

    color: #0b5193;

    background: #e2f6ff;

    font-size: 1.25rem;
}


.autocuido-closing-message strong {
    display: block;

    margin-bottom: .3rem;

    font-size: 1.1rem;
}


.autocuido-closing-message p {
    margin: 0;

    line-height: 1.65;
}


/* ==========================================================
   CTA INTERNO
========================================================== */

.autocuido-cta {
    align-items: center;
}


.autocuido-cta-actions {
    display: flex;

    justify-content: flex-end;
}


/* ==========================================================
   FAQ
========================================================== */

.autocuido-faq-section {
    padding:
        clamp(
            3rem,
            5vw,
            4.8rem
        )
        0;

    background: #fff;
}


.autocuido-heading {
    max-width: 820px;

    margin-bottom: 2rem;
}


.autocuido-heading-kicker {
    display: inline-block;

    margin-bottom: .55rem;

    color: #0874ba;

    font-size: .82rem;
    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.autocuido-heading h2,
.autocuido-final-cta h2 {
    color: #0d2b5e;

    font-size:
        clamp(
            1.9rem,
            3.3vw,
            2.85rem
        );

    line-height: 1.17;

    text-wrap: balance;
}


.autocuido-heading p {
    color: #647286;

    line-height: 1.7;
}


.autocuido-accordion {
    max-width: 900px;
}


.autocuido-accordion
.accordion-item {
    overflow: hidden;

    margin-bottom: .8rem;

    border:
        1px solid
        rgba(15,82,145,.12);

    border-radius: 16px;

    box-shadow:
        0 8px 24px
        rgba(15,50,90,.05);
}


.autocuido-accordion
.accordion-button {
    padding: 1.05rem 1.15rem;

    color: #0c315f;

    background: #fff;

    font-weight: 700;

    box-shadow: none;
}


.autocuido-accordion
.accordion-button:not(.collapsed) {
    color: #075b96;

    background: #eaf7ff;
}


.autocuido-accordion
.accordion-body {
    color: #607085;

    line-height: 1.75;
}


/* ==========================================================
   CTA FINAL
========================================================== */

.autocuido-final-cta {
    padding:
        clamp(
            2.8rem,
            5vw,
            4.5rem
        )
        0;

    background:
        linear-gradient(
            135deg,
            #d7f2ff,
            #edf7ff 52%,
            #e8edff
        );
}


.autocuido-final-cta p {
    max-width: 760px;

    margin: 0;

    color: #52677d;

    line-height: 1.7;
}


.autocuido-final-actions {
    display: grid;

    gap: .75rem;
}


.autocuido-final-actions .btn {
    display: flex;

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

    min-height: 52px;
}


.autocuido-whatsapp {
    color: #fff;

    border-color: #188b45;

    background: #1f9f53;
}


.autocuido-whatsapp:hover {
    color: #fff;

    background: #157f42;
}


/* ==========================================================
   RELACIONADOS
========================================================== */

.autocuido-related-section {
    padding:
        clamp(
            3rem,
            5vw,
            4.8rem
        )
        0;

    background:
        linear-gradient(
            180deg,
            #dff4ff,
            #f7fbff
        );
}


.autocuido-related-card {
    height: 100%;

    padding: 0;

    overflow: hidden;

    border-radius: 21px;

    background: #fff;
}


.autocuido-related-image {
    display: block;

    overflow: hidden;

    aspect-ratio: 16 / 9;
}


.autocuido-related-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .4s ease;
}


.autocuido-related-content {
    padding: 1.35rem;
}


.autocuido-related-content h3 {
    font-size: 1.16rem;
}


.autocuido-related-content h3 a {
    color: #0f3672;

    text-decoration: none;
}


.autocuido-related-content p {
    color: #5e6e82;

    line-height: 1.68;
}


.autocuido-related-link {
    display: inline-flex;

    gap: .4rem;

    align-items: center;

    color: #0877ba;

    font-weight: 800;

    text-decoration: none;
}


@media (hover:hover) and (pointer:fine) {

    .autocuido-related-card:hover
    .autocuido-related-image img {
        transform: scale(1.035);
    }

}


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

@media (max-width: 991.98px) {

    .autocuido-page
    .autocuido-breadcrumb {
        min-height: 390px;

        background-position:
            64% 42%;
    }


    .autocuido-main-media {
        min-height: auto;
    }


    .autocuido-cta-actions {
        justify-content: flex-start;
    }


    .autocuido-final-actions {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


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

@media (max-width: 767.98px) {

    .autocuido-pillars,
    .autocuido-responsibility {
        grid-template-columns: 1fr;
    }


    .autocuido-closing-message {
        grid-template-columns: 1fr;
    }


    .autocuido-final-actions {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 575.98px) {

    .autocuido-page
    .autocuido-breadcrumb {
        min-height: 400px;

        background-position:
            63% 40%;
    }


    .autocuido-breadcrumb h1 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.5rem
            );
    }


    .autocuido-related-content {
        padding: 1.1rem;
    }

}


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

    .autocuido-related-image img,
    .autocuido-pillar-icon {
        transition: none !important;
    }

}