@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root {
    --principal: #0021ff; /* color corporativo (primario) */
    --secundario: #1791c8; /* color corporativo (secundario) */

    --fondo: #f4f6f8;       /* fondo claro, neutro, profesional */
    --fondo-secundario: #e1e4e8; /* para bloques o secciones alternas */

    --texto: #2e2e2e;       /* gris oscuro, buena legibilidad */
    --texto-secundario: #5c5c5c; /* para descripciones o elementos secundarios */

    --text-li: #1791cb;
    --text-li-hover: #162530;
    --text-back-li: rgba(188, 212, 229, 0.8);

    --sombra: 20px 20px 15px rgba(0, 0, 0, .5);

    --exito: #4caf50;       /* para mensajes de éxito (verde sobrio) */
    --error: #f44336;       /* para errores */
    --advertencia: #ff9800; /* para advertencias */
}


* {
    margin: 0;
    padding: 0 ;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

.container{
    max-width: 1300px;
    margin: 0 auto;
    /*ajusta el contenido para poder dejar espacio entre los extremos de la pantalla*/
}

body {
    background-color: var(--fondo);
    font-family: "Bebas Neue", sans-serif;
}

main {
    margin-bottom: 100px;
}

.services {
    margin-top: 50px;
}

/*seccion de imagenes*/

.imgs {
    margin-top: 20px;
    height: 400px;
}

.imgs img {
    max-width: 100%;
    height: 80%;
    object-fit: cover;
    display: block;
    align-items: center;
    margin: 0 auto;
}


/*termina seccion de imagenes*/




/*inicia seccion de servicios*/
h1 {
    color: var(--secundario);
    font-size: 4rem;
    line-height: 80px;
}

hr {
    border: 2px solid var(--secundario);
    width: 80%;
    margin-bottom: 20px;
}

span {
    font-size: 2rem;
}

.list-content {
    padding: 0 50px;
}

.clima-s,
.cocina-s,
.cooler-s,
.electricidad-s {
    margin-top: 60px;
}


.clima-d,
.cocina-d,
.coolers-d,
.electricidad-d
{
    display: flex;
    align-items: center;
    padding: 0 30px;
}

.cocina-d, .electricidad-d{
    flex-direction: row-reverse;
}

.list-content {
    text-align:start;
    flex-basis: 50% ;
    padding-right: 35px;
}

/*termina seccion de servicios*/



.img-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.card {
    position: relative;
    width: 220px;
    height: 330px;
    overflow: hidden;
    border-radius: 15px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 15px;
}

/* Efecto animado */
.card::before,
.card::after {
    content: "";
    position: absolute;
    width: 20%;
    height: 20%;
    background-color: rgba(0, 206, 209, 0.5);
    /* mediumturquoise semitransparente */
    transition: all 0.5s ease;
    z-index: 1;
}

.card::before {
    top: 0;
    right: 0;
    border-radius: 0 15px 0 100%;
    z-index: 1;
}

.card::after {
    bottom: 0;
    left: 0;
    border-radius: 0 100% 0 15px;
    z-index: 2;
}

.card:hover::before,
.card:hover::after {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

/* Texto centrado en hover */
.card:hover::after {
    content: attr(data-text);
    color: var(--texto);
    font-size: 2.4rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 206, 209, 0.8);
    text-align:center;
}



/*seccion de imagenes para contenido*/
.image-accordion {
    display: flex;
    flex-basis: 50%;
    height: 500px;
    gap: 5px;
    padding: 0.4em;
    background: #212121;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 20px 20px 15px rgba(8, 166, 229, 0.5);   
}

.img-card {
    flex: 1;
    overflow: hidden;
    border-radius: 4px;
    transition: all 0.5s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #212121;
    border: 2px solid var(--secundario);
}

.img-card:hover {
    flex: 4;
}

.img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    border-radius: 4px;
}


/*termina seccion de imagenes para contenido*/

/*animaciones para texto*/

.anim-text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.visible {
    opacity: 1;
    transform: translateY(0);
}


@media (max-width: 880px) {

    main {
        margin-bottom: 50px;
    }

    h1 {
        font-size: 2rem;
    }

    hr {
        border: 1px solid var(--secundario);
        width: 80%;
        margin-bottom: 10px;
    }

    span {
        font-size: 1rem;
    }

    /* Acomoda acordeón de imágenes verticalmente */
    .image-accordion {
        flex-direction: column;
        height: auto;
        gap: 10px;
        padding: 0.5em;
    }

    .img-card {
        flex: unset;
        width: 100%;
        height: 200px;
    }

    .img-card:hover {
        flex: unset; /* elimina el efecto de expansión en móviles */
    }

    .img-card img {
        height: 100%;
    }

    /* Tarjetas (cards) más pequeñas o en columna */

    .imgs {
        height: auto;
    }
    .img-content {
        position:static;
        flex-direction: column;
        align-items: center;
        margin-bottom: 60px;

    }

    .card {
        width: 90%;
        height: auto;
    }

    .card img {
        height: 250px;
    }

    /* Alinear descripción e imagen en servicios uno debajo del otro */
    .clima-d,
    .cocina-d,
    .coolers-d,
    .electricidad-d {
        flex-direction: column;
        padding: 0 10px;
        gap: 20px;
    }

    .list-content {
        padding: 0;
        flex-basis: 100%;
        text-align: center;
    }

    .container {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {

    h1 {
        font-size: 1.6rem;
    }

    span {
        font-size: 0.9rem;
    }

    .card img {
        height: 200px;
    }

    .img-card {
        height: 150px;
    }
}