/* =========================================================
   DCEA WEB
   SERVICIOS PÚBLICOS
========================================================= */


/* =========================================================
   LISTADO DE SERVICIOS
========================================================= */

.services-section {

    padding:
        100px 0;

    background:
        var(--color-white);

}


.services-list {

    display:
        grid;

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

    gap:
        24px;

}



/* =========================================================
   TARJETA DE SERVICIO
========================================================= */

.service-card {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    overflow:
        hidden;

    background:
        var(--color-white);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-medium);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);

    cursor:
        pointer;

}


.service-card:hover {

    transform:
        translateY(-5px);

    border-color:
        #cbd0d2;

    box-shadow:
        0 14px 30px
        rgba(
            6,
            17,
            36,
            0.08
        );

}



/* =========================================================
   CABECERA DEL SERVICIO
========================================================= */

.service-card-header {

    padding:
        20px 24px;

    background:
        var(--color-primary);

    color:
        var(--color-white);

}


.service-card-number {

    display:
        block;

    margin-bottom:
        8px;

    color:
        rgba(
            255,
            255,
            255,
            0.70
        );

    font-size:
        18px;

    font-weight:
        500;

    letter-spacing:
        0.12em;

    text-transform:
        lowercase;

}


.service-card-title {

    margin:
        0;

    color:
        var(--color-white);

    font-size:
        32px;

    font-weight:
        600;

    line-height:
        1.2;

}

.service-card-blocks {

    color:
        var(--color-text-light);

    font-size:
        20px;

    line-height:
        1.7;

}

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

.service-card-content {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    padding:
        24px;

}


.service-card-description {

    margin:
        0;

    color:
        var(--color-text-light);

    font-size:
        14px;

    line-height:
        1.7;

}



/* =========================================================
   ENLACE VER PLAN
========================================================= */

.service-card-link {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    width:
        100%;

    margin-top:
        auto;

    padding-top:
        24px;

    color:
        var(--color-primary);

    text-decoration:
        none;

    font-size:
        20px;

    font-weight:
        600;

    text-align:
        center;

}


.service-card-link span:last-child {

    display:
        inline-block;

    transition:
        transform 0.2s ease;

}


.service-card-link:hover
span:last-child {

    transform:
        translateX(4px);

}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .services-list {

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

    }

}


@media (max-width: 600px) {

    .services-section {

        padding:
            70px 0;

    }


    .services-list {

        grid-template-columns:
            1fr;

    }


    .service-card-header {

        padding:
            18px 20px;

    }


    .service-card-title {

        font-size:
            21px;

    }


    .service-card-content {

        padding:
            20px;

    }

}



/* =========================================================
   SERVICIOS — RESPONSIVE MÓVIL
   MISMA COMPOSICIÓN QUE ESCRITORIO
========================================================= */

@media (max-width:700px) {

    /* OCULTAR DESBORDE HORIZONTAL */
    body:has(#servicios-lista) {
        overflow-x:hidden;
    }

    /* CONTENIDO PRINCIPAL */
    body:has(#servicios-lista) main {
        width:1200px;
        max-width:none;
        margin:0;
        zoom:calc(100vw / 1200px);
    }

    /* CONTENEDORES */
    body:has(#servicios-lista) main .container {
        width:1200px;
        max-width:none;
        box-sizing:border-box;
    }

    /* SERVICIOS */
    body:has(#servicios-lista) .services-list {
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }

    /* HEADER */
    body:has(#servicios-lista) .site-header {
        position:relative;
        top:auto;
        width:100%;
        max-width:none;
        overflow:hidden;
    }

    body:has(#servicios-lista) .site-header .header-container {
        width:100%;
        max-width:none;
        box-sizing:border-box;
        padding-left:20px;
        padding-right:20px;
        align-items:flex-start;
    }

    body:has(#servicios-lista) .site-header .site-logo {
        width:auto;
        max-width:100%;
        flex-shrink:0;
    }

    body:has(#servicios-lista) .site-header .main-nav {
        width:100%;
        max-width:100%;
        flex-shrink:0;
        overflow-x:auto;
        box-sizing:border-box;
    }

    /* FOOTER */
    body:has(#servicios-lista) .site-footer {
        width:1200px;
        max-width:none;
        margin:0;
        zoom:calc(100vw / 1200px);
        flex-shrink:0;
    }

    body:has(#servicios-lista) .site-footer .footer-container {
        width:1200px;
        max-width:none;
        box-sizing:border-box;
        display:grid;
        grid-template-columns:1fr auto 1fr;
        align-items:center;
    }

    body:has(#servicios-lista) .site-footer .footer-brand {
        text-align:left;
    }

    body:has(#servicios-lista) .site-footer .footer-dcea {
        text-align:center;
    }

    body:has(#servicios-lista) .site-footer .footer-copy {
        text-align:right;
    }
}



/* =========================================================
   SERVICIOS — FOOTER MÓVIL
   REDUCIR ALTURA SIN OCULTAR CONTENIDO
========================================================= */

@media (max-width:700px) {

    body:has(#servicios-lista) .site-footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 1200px;
        max-width: none;
        margin: 0;
        zoom: calc(100vw / 1200px);
        z-index: 1001;
    }

    body:has(#servicios-lista) .site-footer .footer-container {
        padding-top: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

}


/* =========================================================
   SERVICIOS — CONTACTO MÓVIL
   SEPARADO DEL FOOTER
========================================================= */

@media (max-width:700px) {

    body:has(#servicios-lista) .section-cta {
        position: fixed;
        left: 0;
        bottom: 150px;
        width: 100%;
        z-index: 1000;
        padding: 28px 0;
        box-sizing: border-box;
    }

    body:has(#servicios-lista) .section-cta .cta-content {
        display: grid;
        grid-template-columns: 2fr 1fr;
        align-items: center;
        column-gap: 40px;
    }

    body:has(#servicios-lista) .section-cta .cta-text {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    body:has(#servicios-lista) .section-cta .button-large {
        width: 100%;
        min-height: 60px;
        box-sizing: border-box;
        white-space: nowrap;
    }

}


/* =========================================================
   SERVICIOS — TAMAÑOS DE TEXTO EN MÓVIL
   SOLO SERVICIOS
========================================================= */

@media (max-width:700px) {

    /* -----------------------------------------
       DESCRIPCIÓN DEL HERO
       2x y ocupa todo el ancho
    ----------------------------------------- */

    body:has(#servicios-lista) .page-hero-description {
        width: 100%;
        max-width: none;
        font-size: 32px;
        line-height: 1.6;
    }


    /* -----------------------------------------
       TÍTULO DE CADA SERVICIO
       2x
    ----------------------------------------- */

    body:has(#servicios-lista) .service-card-title {
        font-size: 48px;
    }


    /* -----------------------------------------
       DESCRIPCIÓN DE CADA SERVICIO
       2x
    ----------------------------------------- */

    body:has(#servicios-lista) .service-card-description {
        font-size: 28px;
        line-height: 1.7;
    }


    /* -----------------------------------------
       CTA — ¿NO SABES QUÉ PLAN NECESITAS?
       1.5x
    ----------------------------------------- */

    body:has(#servicios-lista) .section-cta .cta-text h2 {
        font-size: 42px;
    }


    /* -----------------------------------------
       CTA — TEXTO DESCRIPTIVO
       2x
    ----------------------------------------- */

    body:has(#servicios-lista) .section-cta .cta-text p:not(.section-label) {
        font-size: 30px;
        line-height: 1.6;
    }


    /* -----------------------------------------
       BOTÓN WHATSAPP
       TEXTO 2x
    ----------------------------------------- */

    body:has(#servicios-lista) .section-cta .button-large {
        font-size: 30px;
    }

}



/* =========================================================
   SERVICIOS — AJUSTE DE TARJETAS Y CTA EN MÓVIL
========================================================= */

@media (max-width:700px) {

    /* -----------------------------------------
       DESCRIPCIÓN DE LAS TARJETAS
       ALTURA FIJA — MÁXIMO 7 LÍNEAS
    ----------------------------------------- */

    

    /* -----------------------------------------
       TÍTULO DEL SERVICIO
       REDUCIDO APROX. A LA MITAD
    ----------------------------------------- */

    body:has(#servicios-lista) .service-card-title {
    font-size: 30px;
}


    /* -----------------------------------------
       CTA — TEXTO DESCRIPTIVO
       80 % DEL TAMAÑO ACTUAL
    ----------------------------------------- */

    body:has(#servicios-lista) .section-cta .cta-text p:not(.section-label) {
        font-size: 24px;
    }

}


/* =========================================================
   SERVICIOS — ENCABEZADO MÓVIL
   ESPACIADO UNIFORME
========================================================= */

@media (max-width:700px) {

    body:has(#servicios-lista) .site-header {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    body:has(#servicios-lista) .site-header .header-container {
        gap: 0px;
    }

    body:has(#servicios-lista) .site-header .site-logo {
        margin-bottom: 0;
    }

    body:has(#servicios-lista) .site-header .main-nav {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

}