/*==================================================
=                 HERO - PISCINAS                 =
==================================================*/

.hero-piscinas{

    width:100%;

    padding:60px 20px 80px;

    background:#ffffff;

    text-align:center;

}


/*==================================================
=                 SUBTÍTULO                       =
==================================================*/

.hero-piscinas .subtitulo{

    display:inline-block;

    margin-bottom:18px;

    color:#c62828;

    font-size:.95rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}


/*==================================================
=                 TÍTULO                          =
==================================================*/

.hero-piscinas h1{

    font-size:3.5rem;

    font-weight:800;

    color:#222222;

    margin-bottom:25px;

}

.hero-piscinas h1::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin:20px auto 0;

    background:#c62828;

    border-radius:50px;

}


/*==================================================
=                 DESCRIPCIÓN                     =
==================================================*/

.hero-piscinas p{

    max-width:760px;

    margin:35px auto;

    font-size:1.05rem;

    line-height:1.9;

    color:#666666;

}


/*==================================================
=          SERVICIOS DESTACADOS                   =
==================================================*/

.hero-piscinas .hero-servicios{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:35px;

    flex-wrap:wrap;

    margin-top:45px;

}

.hero-piscinas .hero-servicios span{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:1rem;

    font-weight:600;

    color:#333333;

}

.hero-piscinas .hero-servicios i{

    color:#c62828;

    font-size:1.2rem;

}


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

@media(max-width:768px){

    .hero-piscinas{

        padding:90px 20px 60px;

    }

    .hero-piscinas h1{

        font-size:2.4rem;

    }

    .hero-piscinas p{

        font-size:1rem;

    }

    .hero-servicios{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

        max-width:230px;

        margin:40px auto 0;

    }

}

/*==================================================
=       PRESENTACIÓN - PISCINAS                   =
==================================================*/

.presentacion-piscinas{

    width:100%;

    padding:70px 20px;

    background:#f8f8f8;

}

/*==================================================
=       CONTENEDOR                               =
==================================================*/

.presentacion-piscinas .contenedor{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}


/*==================================================
=       TÍTULO                                   =
==================================================*/

.presentacion-piscinas .titulo-seccion{

    margin-bottom:0;

    text-align:left;

}

.presentacion-piscinas .titulo-seccion span{

    display:inline-block;

    margin-bottom:18px;

    color:#c62828;

    font-size:.95rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}

.presentacion-piscinas .titulo-seccion h2{

    font-size:2.8rem;

    font-weight:800;

    color:#222222;

    line-height:1.3;

}

.presentacion-piscinas .titulo-seccion h2::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin-top:20px;

    background:#c62828;

    border-radius:50px;

}


/*==================================================
=       TEXTO                                    =
==================================================*/

.presentacion-piscinas .presentacion-texto p{

    margin-bottom:20px;

    color:#666666;

    font-size:1.05rem;

    line-height:1.9;

}

.presentacion-piscinas .presentacion-texto p:last-child{

    margin-bottom:0;

}


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

@media(max-width:992px){

    .presentacion-piscinas .contenedor{

        grid-template-columns:1fr;

        gap:40px;

    }

    .presentacion-piscinas .titulo-seccion{

        text-align:center;

    }

    .presentacion-piscinas .titulo-seccion h2::after{

        margin:20px auto 0;

    }

}

@media(max-width:768px){

    .presentacion-piscinas{

        padding:70px 20px;

    }

    .presentacion-piscinas .titulo-seccion h2{

        font-size:2.2rem;

    }

}


/*==================================================
=       ESPECIALIDADES - PISCINAS                 =
==================================================*/

.especialidades-piscinas{

    width:100%;

    padding:100px 20px;

    background:#ffffff;

}


/*==================================================
=       GRID DE TARJETAS                          =
==================================================*/

.grid-piscinas{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(min(100%, 300px),1fr));

    gap:35px;

    margin-top:60px;

}


/*==================================================
=       TARJETA                                  =
==================================================*/

.card-piscina{

    background:#ffffff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

}


.card-piscina:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}


/*==================================================
=       IMAGEN                                   =
==================================================*/

.card-piscina img{

    width:100%;

    height:250px;

    object-fit:cover;

    display:block;

}


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

.card-piscina .contenido-card{

    padding:30px;

}


.card-piscina .contenido-card h3{

    font-size:1.7rem;

    font-weight:700;

    color:#222222;

    margin-bottom:18px;

}


.card-piscina .contenido-card p{

    color:#666666;

    font-size:1rem;

    line-height:1.8;

}


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

@media(max-width:768px){

    .especialidades-piscinas{

        padding:70px 20px;

    }

    .card-piscina img{

        height:220px;

    }

    .contenido-card{

        padding:25px;

    }

    .contenido-card h3{

        font-size:1.4rem;

    }

}

.especialidades-piscinas .titulo-seccion span{

    color:#444;

    font-weight:500;

    font-size:1.05rem;

}

.especialidades-piscinas .titulo-seccion h2{

    color:#222;

    font-weight:800;

}

.card-piscina .contenido-card{

    padding:25px 30px 30px;

    text-align:center;

}

.card-piscina .contenido-card h3{

    margin-bottom:20px;

    text-align:center;

}

.card-piscina .contenido-card p{

    text-align:center;

    max-width:700px;

    margin:0 auto;

}

/* ==================================================
   AJUSTES DE INTEGRACIÓN - PISCINAS
================================================== */

.card-piscina {
    min-width: 0;
}

.card-piscina img {
    max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .card-piscina {
        transition: none !important;
    }

    .card-piscina:hover {
        transform: none !important;
    }
}