/* ==========================================================
   SOBREVIVÍ A LA VIOLENCIA DE MI PAREJA — V2
========================================================== */

.violencia-pareja-page {
    overflow-x: hidden;
}

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


/* HERO */

.violencia-hero {
    min-height:
        clamp(370px, 40vw, 530px);

    display: flex;
    align-items: center;

    padding:
        clamp(3rem, 6vw, 5rem)
        0;

    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(6, 24, 61, .84),
            rgba(8, 52, 91, .57),
            rgba(14, 74, 111, .25)
        ),
        url("../../img/violencia-pareja.webp")
        center 42% / cover
        no-repeat;
}


.violencia-hero-copy {
    max-width: 800px;
}


.violencia-hero-kicker {
    display: inline-block;

    margin-bottom: .8rem;

    color: #d8f4ff;

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

    letter-spacing: .12em;

    text-transform: uppercase;
}


.violencia-hero h1 {
    margin-bottom: 1rem;

    color: #fff;

    font-size:
        clamp(2.35rem, 5.5vw, 4.6rem);

    line-height: 1.04;

    text-wrap: balance;
}


.violencia-hero-lead {
    max-width: 720px;

    margin: 0;

    color: rgba(255,255,255,.92);

    font-size:
        clamp(1.05rem, 1.5vw, 1.25rem);

    line-height: 1.7;
}


/* FONDO GENERAL */

.violencia-section {
    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(14,110,200,.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f8fbff,
            #fff
        );
}


.violencia-main-image {
    min-height: 550px;
}


/* VERDADES */

.violencia-truths {
    display: grid;

    gap: .7rem;

    margin-top: 1.25rem;
}


.violencia-truths > div {
    display: grid;

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

    gap: .7rem;

    align-items: center;

    padding: .85rem 1rem;

    border-radius: 14px;

    background: #edf8ff;
}


.violencia-truths i {
    color: #1478b9;
}


/* CONSECUENCIAS */

.violencia-consequences {
    display: grid;

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

    gap: 1rem;
}


.violencia-consequences
.thoughts-card {
    height: 100%;
}


.violencia-card-icon {
    display: grid;

    width: 52px;
    height: 52px;

    margin-bottom: 1rem;

    place-items: center;

    border-radius: 15px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #116db4,
            #269fc5
        );

    font-size: 1.25rem;
}


/* RECONOCER */

.violencia-recognize {
    display: grid;

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

    gap: 1rem;

    padding:
        clamp(1.3rem,2.5vw,2rem);

    border:
        1px solid
        rgba(15,100,170,.14);

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #e0f4ff,
            #f5fbff
        );
}


.violencia-recognize-icon {
    display: grid;

    width: 58px;
    height: 58px;

    place-items: center;

    border-radius: 16px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #0a4e91,
            #1485bb
        );

    font-size: 1.35rem;
}


.violencia-recognize p {
    line-height: 1.75;
}


/* PASOS */

.violencia-steps {
    display: grid;

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

    gap: 1rem;
}


.violencia-steps
.thoughts-card {
    position: relative;

    height: 100%;
}


.violencia-number {
    position: absolute;

    top: 1rem;
    right: 1rem;

    color:
        rgba(8,65,120,.13);

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


/* RECORDATORIO */

.violencia-reminder {
    display: grid;

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

    gap: 1rem;

    margin-top:
        clamp(2rem,4vw,3rem);

    padding:
        clamp(1.4rem,3vw,2.2rem);

    border-radius: 22px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #082f66,
            #08769f
        );
}


.violencia-reminder-icon {
    display: grid;

    width: 58px;
    height: 58px;

    place-items: center;

    border-radius: 17px;

    color: #07517b;

    background: #e3f8ff;

    font-size: 1.35rem;
}


.violencia-reminder h2 {
    color: #fff;
}


/* FAQ + RELATED */

.violencia-faq,
.violencia-related {
    margin-top:
        clamp(2rem,4vw,3rem);

    padding:
        clamp(1.4rem,3vw,2.5rem);

    border-radius: 24px;
}


.violencia-faq {
    background:
        linear-gradient(
            180deg,
            #f3faff,
            #e8f6ff
        );
}


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

    margin-bottom: 2rem;
}


.violencia-kicker {
    display: inline-block;

    margin-bottom: .55rem;

    color: #0874b5;

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

    letter-spacing: .11em;

    text-transform: uppercase;
}


.violencia-heading h2 {
    color: #0d3266;

    font-size:
        clamp(1.9rem,3.2vw,2.8rem);

    line-height: 1.17;
}


/* ACCORDION */

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


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

    margin-bottom: .8rem;

    border:
        1px solid
        rgba(15,95,160,.12);

    border-radius: 16px;

    background: #fff;
}


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

    color: #0c3569;

    background: #fff;

    font-weight: 700;

    box-shadow: none;
}


.violencia-accordion
.accordion-button:not(.collapsed) {
    color: #075f99;

    background: #e8f6ff;
}


.violencia-accordion
.accordion-body {
    color: #5e6f82;

    line-height: 1.75;
}


/* RELACIONADOS */

.violencia-related {
    background:
        linear-gradient(
            180deg,
            #def4ff,
            #f5fbff
        );
}


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

    padding: 0 !important;

    overflow: hidden;

    border-radius: 20px !important;

    background: #fff !important;
}


.violencia-related-image {
    display: block;

    overflow: hidden;

    aspect-ratio: 16 / 9;
}


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

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;
}


.violencia-related-content {
    padding: 1.3rem;
}


.violencia-related-content h3 a {
    color: #0d3a73;

    text-decoration: none;
}


.violencia-related-content p {
    color: #5e7083;

    line-height: 1.65;
}


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

    gap: .4rem;

    align-items: center;

    color: #0873b2;

    font-weight: 800;

    text-decoration: none;
}


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

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

}


/* CTA */

.violencia-cta-actions {
    display: flex;

    flex-wrap: wrap;

    gap: .7rem;
}


/* TABLET */

@media (max-width: 991.98px) {

    .violencia-hero {
        background-position:
            60% 42%;
    }


    .violencia-main-image {
        min-height: auto;
    }


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

}


/* MOBILE */

@media (max-width: 767.98px) {

    .violencia-consequences,
    .violencia-steps {
        grid-template-columns: 1fr;
    }


    .violencia-recognize,
    .violencia-reminder {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 575.98px) {

    .violencia-hero {
        min-height: 400px;

        background-position:
            62% 42%;
    }


    .violencia-faq,
    .violencia-related {
        padding: 1.15rem;

        border-radius: 17px;
    }

}