@import 'colors.css';


@keyframes scaleUp {
    0% {
        transform: scale(1);
        /* Tamaño original */
    }

    100% {
        transform: scale(1.15);
        /* Aumento del 15% */
    }
}

@keyframes scaleUp2 {
    0% {
        transform: scale(0.95);
        /* Tamaño original */
    }

    100% {
        transform: scale(1.15);
        /* Aumento del 15% */
    }
}

@media (min-width: 1080px) {
    .container-but {
        margin: 10px auto;
        overflow-x: hidden;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-direction: column;
        background-image: url("../media/fondo mujer servicios.png");
        background-size: cover;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
    }

    .linea-esta-but {
        background: var(--azul);
        width: 35%;
        text-align: center;
        padding: 10px;
        font-family: "MiFuente", sans-serif;
        font-size: 20px;
        font-style: italic;
        font-weight: 900;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        margin-right: 50px;
        color: #fff;
    }

    .container-sections {
        display: flex;
        justify-content: right;
        align-items: center;
        overflow-x: hidden;
        width: 50%;
        margin-top: 40px;
        padding: 30px;
        margin-right: 60px;
    }

    .img-sect {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .img-sect img {
        width: 55%;
    }

    .but-sect {
        display: grid;
        grid-template-columns: repeat(3, auto);
        /* espacio entre columnas */
        justify-content: center;
        /* centra el grid completo */
        align-items: center;
        /* alinea arriba los items dentro de cada columna */
        margin: 0 auto;
        /* asegura que esté centrado dentro del contenedor */
    }

    .but-sect-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* centra horizontalmente cada item */
        text-align: center;
    }

    .but-sect-col-img-text {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 10px;
        border: none;
        outline: none;
        background: none;
        box-shadow: none;
        cursor: pointer;
    }

    .but-sect-col-img-text img {
        width: 200px;        
    }

    #row-1 {
        display: flex;
        justify-items: left;
        align-items: center;
        width: 100%;
    }

    #row-2 {
        display: flex;
        justify-items: right;
        align-items: center;
        width: 100%;
    }
    #at-cliente img{      
    animation: scaleUp 1s infinite alternate;
    /* Animación de aumento */
    transition: transform 2s ease-in-out;
}
.but-sect-col-img-text:hover {
    transform: scale(1.1);  
    transition: all 0.3s ease;  
}
}

@media (min-width: 600px) and (max-width:1079px) {

    .container-but {
        margin-top: 10px;
        overflow-x: hidden;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-direction: column;
        background-image: url("../media/fondo mujer servicios.png");
        background-size: cover;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
    }

    .linea-esta-but {
        background: var(--azul);
        width: 35%;
        text-align: center;
        padding: 10px;
        font-family: "MiFuente", sans-serif;
        font-size: 20px;
        font-style: italic;
        font-weight: 900;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        margin-right: 50px;
        color: #fff;
    }

    .container-sections {
        display: flex;
        justify-content: right;
        align-items: center;
        overflow-x: hidden;
        width: 65%;
        margin-top: 40px;
        padding: 30px;
    }

    .img-sect {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .img-sect img {
        width: 55%;
    }

    .but-sect {
        display: grid;
        grid-template-columns: repeat(3, auto);
        /* espacio entre columnas */
        justify-content: center;
        /* centra el grid completo */
        align-items: center;
        /* alinea arriba los items dentro de cada columna */
        margin: 0 auto;
        /* asegura que esté centrado dentro del contenedor */
    }

    .but-sect-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* centra horizontalmente cada item */
        text-align: center;
    }

    .but-sect-col-img-text {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 10px 0;
        border: none;
        outline: none;
        background: none;
        box-shadow: none;
        cursor: pointer;
    }

    .but-sect-col-img-text img {
        width: 180px;
    }

    #row-1 {
        display: flex;
        justify-items: left;
        align-items: center;
        width: 100%;
    }

    #row-2 {
        display: flex;
        justify-items: right;
        align-items: center;
        width: 100%;
    }
    #at-cliente img{      
    animation: scaleUp 1s infinite alternate;
    /* Animación de aumento */
    transition: transform 2s ease-in-out;
}

}

@media (max-width: 599px) {

    .container-but {
        margin-top: 60px;
        overflow-x: hidden;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-direction: column;
        background-image: url("../media/fondo mujer servicios.png");
        background-size: cover;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
    }

    .linea-esta-but {
        background: var(--azul);
        width: 35%;
        text-align: center;
        padding: 10px;
        font-family: "MiFuente", sans-serif;
        font-size: 20px;
        font-style: italic;
        font-weight: 900;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        margin-right: 50px;
        color: #fff;
    }

    .container-sections {
        display: flex;
        justify-content: right;
        align-items: center;
        overflow-x: hidden;
        width: 65%;
        margin-top: 40px;
        padding: 30px;
    }

    .img-sect {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .img-sect img {
        width: 55%;
    }

    .but-sect {
        display: grid;
        grid-template-columns: repeat(3, auto);
        /* espacio entre columnas */
        justify-content: center;
        /* centra el grid completo */
        align-items: center;
        /* alinea arriba los items dentro de cada columna */
        margin: 0 auto;
        /* asegura que esté centrado dentro del contenedor */
    }

    .but-sect-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* centra horizontalmente cada item */
        text-align: center;
    }

    .but-sect-col-img-text {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 10px 0;
        border: none;
        outline: none;
        background: none;
        box-shadow: none;
        cursor: pointer;
    }

    .but-sect-col-img-text img {
        width: 180px;
    }

    #row-1 {
        display: flex;
        justify-items: left;
        align-items: center;
        width: 100%;
    }

    #row-2 {
        display: flex;
        justify-items: right;
        align-items: center;
        width: 100%;
    }
    #at-cliente img{      
    animation: scaleUp 1s infinite alternate;
    /* Animación de aumento */
    transition: transform 2s ease-in-out;
}
}

/* Ajustes para cuando el dispositivo esté en modo horizontal */
@media (min-width: 600px) and (max-width:1079px) and (orientation: landscape) {

    .container-but {
        margin-top: 0;
        overflow-x: hidden;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-direction: column;
        background-image: url("../media/fondo mujer servicios.png");
        background-size: cover;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
    }

    .linea-esta-but {
        background: var(--azul);
        width: 35%;
        text-align: center;
        padding: 10px;
        font-family: "MiFuente", sans-serif;
        font-size: 20px;
        font-style: italic;
        font-weight: 900;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        margin-right: 50px;
        color: #fff;
    }

    .container-sections {
        display: flex;
        justify-content: right;
        align-items: center;
        overflow-x: hidden;
        width: 65%;
        margin-top: 40px;
        padding: 30px;
    }

    .img-sect {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .img-sect img {
        width: 55%;
    }

    .but-sect {
        display: grid;
        grid-template-columns: repeat(3, auto);
        /* espacio entre columnas */
        justify-content: center;
        /* centra el grid completo */
        align-items: center;
        /* alinea arriba los items dentro de cada columna */
        margin: 0 auto;
        /* asegura que esté centrado dentro del contenedor */
    }

    .but-sect-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* centra horizontalmente cada item */
        text-align: center;
    }

    .but-sect-col-img-text {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 10px 0;
        border: none;
        outline: none;
        background: none;
        box-shadow: none;
        cursor: pointer;
    }

    .but-sect-col-img-text img {
        width: 180px;
    }

    #row-1 {
        display: flex;
        justify-items: left;
        align-items: center;
        width: 100%;
    }

    #row-2 {
        display: flex;
        justify-items: right;
        align-items: center;
        width: 100%;
    }
    #at-cliente img{      
    animation: scaleUp 1s infinite alternate;
    /* Animación de aumento */
    transition: transform 2s ease-in-out;
}
}