@import url(fonts.css);

body{
    margin: 0;
    background-color: #282828;
    justify-items: anchor-center;
}

@keyframes revelarTexto {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#inicio{
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    width: 100%;
    height: 100vh;
    text-align: center;
    row-gap: 1rem;

    
    background-image: linear-gradient(rgba(40, 40, 40, 0.6), rgba(40, 40, 40, 0.6)), url("/img/inicio.jpeg");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}


@media (max-height: 700px) {
    #inicio {
        height: auto;
        padding-bottom: 2em;
    }
}

@media (max-width: 600px) {
    #inicio {
        height: 80vh;
        padding-bottom: 5rem;
    }
}

#inicio{
    color:white;
}

#inicio span{
    color:white;
}

#inicio .titulo{
    grid-row: 2;
    align-self: center;
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-weight: 400;
    font-size: clamp(2rem, 6.5vw, 6rem);
    animation: revelarTexto 2s ease forwards;
}

#inicio .contenido{
    display: flex;
    flex-direction: column;
    grid-row: 3;
    align-self: start;
    row-gap: 2rem;
    opacity: 0;
    animation: revelarTexto 2s ease 0.8s forwards;;
}

#inicio .contenido >:first-child{
    font-family: 'sourcesanspro', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1rem, 4vw, 2rem);
}

#inicio .contenido >:nth-child(2){
    font-family: 'sourcesanspro', system-ui;
    font-style: normal;
    font-size: clamp(1.2rem, 4vw, 2.5rem);
    padding-top: 2rem;
    font-weight: 400;
}

#botones{
    display: grid;
    align-items: center;
    grid-template-columns: repeat(2, auto); 
    justify-content: center;
    justify-items: center;
    gap: 2rem;
}

#botones button{
    width: 260px;
}

#botones > :first-child{
    color: #023131;
}

@media (max-width: 600px) {
    #botones {
        grid-template-columns: 1fr;
    }
}

#botones > :first-child{
    background-color: #12bdbd;
}

#botones > :last-child{
    color: black;
}

button{
    font-size: clamp(2rem, 3vw, 2rem);
    font-family: 'Source Sans 3', sans-serif;
    font-style: normal;
    font-weight: 700;
    width: auto;
    height: auto;
    padding: 0.5rem 1.5rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

#servicios{
    display: grid;
    text-align: center;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    background-color: #cac6bdFF;;
    width: 100%;
    height: 87vh;
}

@media(max-height: 700px){
    #servicios{
        height: auto;
        padding-bottom: 2em;
    }
}


@media (max-width: 500px){
    #servicios .informacion{
            grid-template-columns: repeat(auto-fit, minmax(200px, 40%));
    }
}

@media (max-width: 600px) {
    #servicios {
        height: 115vh;
    }
}

@media (max-width: 1024px) {
    #servicios
    {
        height: auto;
        grid-template-rows: auto;
        padding-top: 2rem;
        padding-bottom: 6rem;
        gap: 2rem;
    }
    #servicios .informacion{
        gap: 4em;
    }
    #servicios .calidad{
        justify-self: center;
        max-width: 50ch;
    }
}



#servicios span{
    font-size: clamp(2rem, 4vw, 2.5rem);
}

.calidad,
.texto{
    font-family: "sourcesanspro",'Source Sans 3';
    font-style: normal;
    font-weight: 700;
}

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

#flecha{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 30px;
    width: 70px;
    cursor: pointer;
}

#servicios .informacion{
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 512px), 40%));
}

#servicios .informacion > :first-child,
#servicios .informacion > :last-child
{
    display: flex;
    flex-direction: column;
    gap: 65px;
    align-items: center;
}

.informacion .iconos{
    display: flex;
    justify-content: center;
    gap: 40px;
}

.informacion .iconos img{
    width: clamp(160px, 15vw, 168px);
    height: clamp(160px, 15vw, 168px);
}

@media(max-width: 350px){
    .informacion .iconos img{   
        width: 135px;
        height: 135px;
    }
}

#nosotros{
    display: grid;
    grid-template-columns: auto 1fr;
    width: 100%;
    height: 120vh;

    background-image: linear-gradient(rgba(40, 40, 40, 0.6), rgba(40, 40, 40, 0.6)), url("/img/nosotros.jpeg");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

@media(max-height: 780px){
    #nosotros{
        height: auto;
        padding-bottom: 10em;
    }
}

@media (max-width: 1200px) {
    #nosotros {
        height: auto;
        padding-bottom: 10em;
    }
}

@media (max-width: 780px) {
    #nosotros {
        background-size: auto 40vh;
        padding-bottom: 0;
    }
}

@media (max-width: 780px) and (max-height: 900px) {
    #nosotros {
        background-size: auto calc(50vh + (900px - 100vh) * 0.4);
        height: auto;
    }
}

@media (max-width: 780px) and (max-height: 400px) {
    #nosotros {
        background-size: auto 110vh; 
        height: auto;
    }
}

#nosotros > :nth-child(2){
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    padding-top: 8em;
    padding-left: 20rem;
}

#nosotrosT{
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-weight: 400;
    font-size: clamp(3rem, 10vw, 5rem);
    padding-left: 8.5rem;
}

@media (max-width: 1500px){
    #nosotrosT{
        padding-left: 7.5rem;
    }
    #nosotros > :nth-child(2){
        padding-left: 15rem;
    }
}

@media (max-width: 1200px){
    #nosotrosT{
        padding-left: 0;
        align-items: center;
    }
    #nosotros > :nth-child(2){
        padding-left: 5rem;
        /*align-items: center;*/
        padding-top: 18em;
    }
}

@media (max-width: 780px){
    #nosotros > :nth-child(2){
        padding-left: 0rem;
    }
}

#nosotros > :nth-child(2){
    color: white;
}

.ordenNosotros {
    display: grid;
    grid-template-columns: auto auto 1fr; 
    grid-template-rows: auto auto; 
    gap: 10px 40px; 
    align-items: center;
}

@media (max-width: 1200px) {
    .odn{
        align-self: flex-start;
    }
}

.num {
    grid-row: 1 / span 2; 
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 136px;
    height: 136px;
    border: 2px solid #14b4b4;
    border-radius: 50%;
    align-self: center;
    font-family: 'sourcesanspro', 'Source Sans 3';
    font-style: normal;
    font-weight: bold;
    font-size: clamp(1.2rem, 15vw, 4rem);
    color: #14b4b4;
}

.mvv {
    grid-row: 1;
    grid-column: 2; 
    font-family: "sourcesanspro" , system-ui;
    font-style: normal;
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 2.5rem);
    color: #14b4b4;
}

.mvvTexto {
    grid-row: 2;
    grid-column: 2; 
    align-self: start; 
    font-family: "sourcesanspro",system-ui;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(1.3rem, 2vw, 1.3rem);
    color: white;
    max-width: 67ch;
    text-wrap: balance;
}

.lista{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 780px){
    .mvvTexto{
        grid-column: 1 / span 2;
        text-align: start;
        padding: 0 8rem;
        max-width: 62ch;
        text-wrap: unset;
    }
    .mvvTexto > span{
        display: block;
        text-wrap: balance;
    }
}

@media (max-width: 540px){
    .mvvTexto{
        grid-column: 1 / span 2;
        text-align: start;
        padding: 0 1.5em;
        max-width: 62ch;
    }
}

@media (max-width: 780px) {
    .ordenNosotros {
        grid-template-columns: auto auto;
        row-gap: 1rem;
        column-gap: 1rem;
        justify-items: start;
    }

    .num {
        width: 130px;
        height: 130px;
        margin-right: 0;
        grid-column: 1;
        grid-row: 1;
        justify-self: flex-end;
    }

    .mvv {
        display: contents; 
        justify-self: flex-start;
    }

    .mvv > :first-child {
        grid-column: 2; 
        grid-row: 1;
        align-self: center; 
    }

    .mvv > :nth-child(2) {
        grid-column: 1 / span 2; 
        grid-row: 2;
        text-align: left;
        max-width: 100%;
    }

    #nosotros > div:nth-child(2) > div:nth-child(1){
        padding-bottom: 3rem;
    }
}

#galeria{
    display: flex;
    flex-direction: column;
    gap: 5rem;
    background-color: #282828;
    width: 100%;
    height: auto;
    padding-bottom: 20rem;
}

@media (max-width: 1024px) {
    #galeria{
        padding-bottom: 10rem;
    }
}

#galeria > :first-child{
    font-family: "Special Gothic Expanded One", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(4rem, 6vw, 5rem);
    color: #14b4b4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 175px;
}

#galeria > :nth-child(2){
    display: flex;
    align-items: center;
    justify-content: center;
}

#imagenG {
    width: 100%; 
}

#imagenG img {
    max-width: 100%; 
    height: auto;   
    display: block;
}

#clientes{
    background-color: white;
    width: 100%;
    height: auto;
    padding-bottom: 15em;
}

@media(max-height: 1500px){
    #clientes{
        height: auto;
        padding-bottom: 15em;
    }
}

@media(max-height: 1600px) and (orientation: portrait) {
    #clientes{
        height: auto;
        padding-bottom: 15em;
    }
}

@media(max-height: 700px){
    #clientes{
        height: auto;
        padding-bottom: 5em;
    }
}

#clientes > :first-child{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Special Gothic Expanded One", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(4rem, 6vw, 5rem);
    color: #12bdbd;
    padding-top: 170px;
    text-align: center;
}

#clientes > :nth-child(2){
    padding-top: 95px;
}

.slider-wrapper {
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
}

.slider-container {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    align-items: center;
}

.slider-container::-webkit-scrollbar { display: none; }

.slider-item {
    display: flex;
    justify-content: center;
    flex: 0 0 calc(25% - 12px); 
    scroll-snap-align: start;
    transition: all 0.3s ease;
}



@media (max-width: 1024px) {
    .slider-item {
        flex: 0 0 calc(33.33% - 10px);
    }
}

@media (max-width: 750px) {
    .slider-item {
        flex: 0 0 calc(50% - 10px);
    }
}

.slider-item img {
    width: 100%;
    height: auto;
    object-fit: scale-down;
    border-radius: 8px;
}

.maximoimg{
    width: 145px !important;
}

.nav-btn {
    background-color: white;
}

@media (max-width:750px){
    .nav-btn{
        display: flex;
        width: 50px;
        height: 50px;
        justify-content: center;
    }
}

.slider-wrapper > :first-child{  
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.slider-wrapper > :last-child {  
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.nav-btn:hover { 
    cursor: pointer;
}

#formulario{
    display: flex;
    flex-direction: column;
    background-color: #282828;
    width: 100%;
    height: auto;
    padding-top: 170px;
    gap: 5rem;
}

@media(max-height: 1500px){
    #formulario{
        height: auto;
    }
}

@media(max-height: 1600px) and (orientation: portrait) {
    #formulario{
        height: auto;
    }
}

#formulario > :first-child{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2rem;
}

#formulario > :first-child > :first-child{
    font-family: "Special Gothic Expanded One", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(3rem, 6vw, 4.5rem);
    color: #12bdbd;
    max-width: 15ch;
}

#formulario > :first-child > :nth-child(2){
    font-family: "sourcesanspro", system-ui;
    font-style: normal;
    font-weight: 700;
    font-size: clamp(2rem, 3vw, 2rem);
    color: white;
}

.contacto{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10rem;
}

@media (max-width: 1024px){
    .contacto{
        flex-direction: column;
        gap: 5rem;
    }
}

.contacto > div{
    display: flex;
    font-family: 'sourcesanspro', sans-serif;
    font-style: italic;
    font-weight: 400;
    color: white;
    font-size: clamp(1rem, 3vw, 2rem);
    flex-direction: column;
    gap: 2rem;
    text-align: center;
}

.contacto button{
    display: flex;
    align-items: center;
    justify-content: center; 
    gap: 0.5rem;

    background-color: #0a9a16;
    color: white;
    width: fit-content;
    align-self: center;
    font-size: clamp(1.7rem, 3vw, 1.7rem);
}

.negrita{
    font-weight: bold;
}

.wapp{
    width: 43px;
    height: auto;
}

#formulario > :last-child{
    font-family: 'sourcesanspro', sans-serif;
    font-style: normal;
    font-weight: 400;
    display: flex;
    align-self: center;
    color: white;
    padding-top: 10rem;
    font-size: clamp(1rem, 1vw, 1rem);
}

.revelar {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out; 
}

.revelar.activo {
    opacity: 1;
    animation: revelarTexto 0.8s ease-out forwards;
}

.revelar-img {
    opacity: 0;
    transform: scale(1.1); 
    transition: opacity 1.2s ease-out, transform 1.2s ease-out; 
    will-change: opacity, transform; 
}

.revelar-img.activo {
    opacity: 1;
    transform: scale(1); 
}

.revelar-arriba,
.revelar-izquierda,
.revelar-derecha {
    opacity: 0;
    transition: opacity 1s ease-out, transform 1.5s ease-out;
    will-change: opacity, transform;
}

.revelar-arriba {
    transform: translateY(-40px);
}

.revelar-izquierda {
    transform: translateX(-50px);
}

.revelar-derecha {
    transform: translateX(50px);
}

.revelar-arriba {
    transform: translateY(-40px);
}

.revelar-izquierda {
    transform: translateX(-50px);
}

.revelar-derecha {
    transform: translateX(50px);
}

.revelar-arriba.activo,
.revelar-izquierda.activo,
.revelar-derecha.activo {
    opacity: 1;
    transform: translate(0, 0);
}