@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI';
}

/* Variables de css*/
:root {
    --color-primary: #a68160;
    --color-secondary: #f2f2f2;
    --color-white: white;
    --color-black: black;
}

main {
    display: grid;
    gap: 5vh;

    & .seccion-bienvenida {
        height: 100vh;
        background-color: var(--color-primary);
        display: grid;
        grid-template-columns: 1fr 1fr;

        & .bienvenida-izquierda {
            color: var(--color-white);
            display: grid;
            max-width: 100%;
            overflow: hidden;
            position: relative;
            z-index: 1;
            padding: 1em 3em;
            cursor: pointer;

            & .logo {
                & .bombilla {
                    color: var(--color-white);
                    font-size: clamp(2.5em, 5vw, 15em);
                }
            }

            & .texto-bienvenida {
                display: grid;
                gap: 2vh;

                & h3 {
                    font-size: clamp(1em, 3vw, 15em);

                }

                & h1 {
                    font-size: clamp(1em, 6vw, 15em);
                }

                & p {
                    font-size: clamp(1em, 2vw, 15em);
                    max-width: 80%;
                }

                & a {
                    & button {
                        padding: .4em .6em;
                        border: 2px solid var(--color-primary);
                        background-color: var(--color-secondary);
                        color: var(--color-primary);
                        font-weight: bold;
                        cursor: pointer;
                        transition: all 0.3s ease;
                        border-radius: 0.5em;
                        font-size: clamp(1em, 2vw, 15em);
                        width: 50%;
                    }

                    & button:hover {
                        /* Efecto al pasar el mouse */
                        border: 2px solid var(--color-secondary);
                        background-color: var(--color-primary);
                        color: var(--color-secondary);
                    }
                }
            }

            /* contenedor de redes sociales apiladas verticalmente por grid*/
            & .redes-sociales {
                display: grid;
                align-items: center;
                justify-content: right;
                grid-template-rows: 1fr 1fr 1fr;
                gap: 1em;

                & a {
                    color: var(--color-white);

                    & i {
                        font-size: clamp(2em, 3vw, 15em);
                    }
                }
            }
        }

        /* contenedor derecho cambian las imagenes*/
        & .bienvenida-derecha {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            transition: background-image 1s ease-in-out;
        }
    }

    & .servicios {
        text-align: center;
        display: grid;
        gap: 1vh;
        padding: 0 3em;
        justify-content: center;
        align-items: center;

        & h2 {
            font-size: clamp(1em, 3vw, 15em);
            text-align: center;
        }

        & p {
            font-size: clamp(1em, 1.9vw, 15em);
        }

        & .contenedor-seccion-servicios {
            display: grid;
            gap: 2vh;
            padding: 4em 0;


            & .subtitulo {
                font-size: clamp(1em, 2vw, 15em);
            }

            & .contenedor-servicios-imgs {
                /* Contenedor de tarjetas */
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                justify-content: center;
                gap: clamp(10px, 2.5vw, 3em);
                width: 100%;

                & .carta-servicio {
                    width: 100%;
                    height: 35vh;
                    overflow: hidden;
                    border-radius: 10px;
                    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
                    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
                    position: relative;

                    & img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        display: block;
                        transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
                        border-radius: 10px;
                    }

                    & h4 {
                        position: absolute;
                        bottom: 0;
                        width: 100%;
                        text-align: center;
                        background: var(--color-primary);
                        color: var(--color-white);
                        padding: 8px;
                        margin: 0;
                        font-size: clamp(1em, 1.5vw, 15em);
                        font-weight: bold;
                    }


                }

                & .carta-servicio:hover {
                    transform: scale(1.1) translateY(-10px);
                    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
                }

                & .carta-servicio::after {
                    content: "";
                    position: absolute;
                    inset: 0;
                    border-radius: 10px;
                    border: 2px solid transparent;
                    transition: border-color 0.3s ease-in-out;
                }


                & .carta-servicio:hover::after {
                    border-color: var(--color-primary);
                }
            }

        }

        /* Blur a las otras tarjetas cuando una está en hover */
        & .contenedor-servicios-imgs:hover .carta-servicio:not(:hover) {
            /* Aplica desenfoque a las demás */
            transform: scale(0.9);
            opacity: 0.2;
        }

    }

    & .establecimientos-recomendados {
        padding: 0 3em;
        display: grid;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 2.5vh;

        & .subtitulo {
            font-size: clamp(1em, 2vw, 15em);
        }

        & .contenedor-imagenes-destacado {
            padding-top: 9vh;
            width: 75vw;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 1fr;
            display: grid;
            gap: clamp(.5em, 2.5vw, 3em);
            justify-content: center;
            align-items: unset;

            & .carta-destacado {
                width: 100%;
                height: 40vh;
                border-radius: .7em;
                transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
                position: relative;
                background: var(--color-secondary);
                overflow: hidden;
                display: grid;
                border: 2px solid var(--color-primary);

                & img {
                    /* Imagen dentro de la tarjeta */
                    width: 100%;
                    height: 33vh;
                    object-fit: cover;
                    display: block;
                }

                & .nombre-posicion {
                    height: 7vh;
                    background: var(--color-primary);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 1em 0;
                    gap: 0.5em;
                    border-radius: 0 0 .7em .7em;

                    & h4 {
                        margin: 0;
                        font-size: clamp(1em, 1.5vw, 15em);
                        font-weight: bold;
                        color: var(--color-secondary);
                    }

                    & img {
                        width: 5vh;
                        height: 5vh;
                    }

                }
            }

            /* Visualmente simular el podio */
            .primer-puesto {
                grid-column: 2;
                margin-top: -2.5em;
                grid-row: 1;
                /* se ubica al centro visualmente */
                z-index: 3;
            }

            .segundo-puesto {
                grid-column: 1;
                z-index: 2;
                grid-row: 1;

            }

            .tercer-puesto {
                grid-column: 3;
                /* a la derecha */
                z-index: 1;
                grid-row: 1;

            }

            & .carta-destacado:hover {
                transform: scale(1.05) translateY(-5px);
                box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
            }

        }
    }
}



/* Ajustes para pantallas medianas */
@media (max-width: 1100px) {
    main {
        & .seccion-bienvenida {
            grid-template-columns: 1fr;


            & .bienvenida-izquierda {
                padding: 1em;

                & .logo {
                    & .bombilla {
                        font-size: clamp(2.5em, 8.5vw, 15em);
                    }
                }

                & .texto-bienvenida {
                    & h3 {
                        font-size: clamp(1em, 5vw, 15em);
                    }

                    & h1 {
                        font-size: clamp(1em, 10vw, 15em);
                    }

                    & p {
                        font-size: clamp(1em, 3.5vw, 15em);
                        max-width: 80%;
                    }

                    & a {
                        & button {
                            font-size: clamp(1em, 3.5vw, 15em);
                        }
                    }
                }
            }

            & .bienvenida-derecha {
                /*ocultaremos el contenedor derecha, por lo tanto a partir de pantallas medianas ya no se mostraran las imagenes */
                display: none;
            }
        }

        & .servicios {
            & h2 {
                font-size: clamp(1em, 7vw, 15em);
                text-align: center;
            }

            & p {
                font-size: clamp(1em, 3vw, 15em);
            }

            & .contenedor-seccion-servicios {
                padding: 2em 0;

                & .subtitulo {
                    font-size: clamp(1em, 4vw, 15em);
                }

                & .contenedor-servicios-imgs {
                    grid-template-columns: 1fr 1fr;
                    gap: 2.5em;
                }

            }
        }

        & .establecimientos-recomendados {
            gap: 1.8vh;
            width: 100%;

            & .subtitulo {
                font-size: clamp(1em, 4vw, 15em);
            }

            & .contenedor-imagenes-destacado {
                width: 85vw;
                grid-template-columns: 1fr 1fr 1fr;

            }
        }
    }
}

/* resoluciones de pantalla muy pequeñas */
@media (max-width: 810px) {
    main {
        & .seccion-bienvenida {
            & .bienvenida-izquierda {
                & .logo {
                    & .bombilla {
                        font-size: clamp(2.5em, 8.5vw, 15em);
                    }
                }

                & .texto-bienvenida {
                    & h3 {
                        font-size: clamp(1em, 5vw, 15em);
                    }

                    & h1 {
                        font-size: clamp(1em, 10vw, 15em);
                    }

                    & p {
                        font-size: clamp(1em, 3.5vw, 15em);
                        max-width: 80%;
                    }

                    & a {
                        & button {
                            font-size: clamp(1em, 3.5vw, 15em);
                        }
                    }
                }
            }
        }

        & .servicios {
            & h2 {
                font-size: clamp(1em, 8vw, 15em);
                text-align: center;
            }

            & p {
                font-size: clamp(1em, 4vw, 15em);
            }

            & .contenedor-seccion-servicios {
                & .subtitulo {
                    font-size: clamp(1em, 5.5vw, 15em);
                }

                & .contenedor-servicios-imgs {
                    gap: .8vh;

                    & .carta-servicio {
                        & h4 {
                            font-size: clamp(1em, 1.5vw, 15em);
                        }
                    }
                }
            }
        }

        & .establecimientos-recomendados {
            gap: 3vh;

            & .subtitulo {
                font-size: clamp(1em, 5.5vw, 15em);
            }

            & .contenedor-imagenes-destacado {
                display: flex;
                flex-direction: column;
                grid-template-rows: auto;
                gap: 1.2vh;
                padding: 0;
                width: 100%;

                & .carta-destacado {
                    height: 50vh !important;

                    & img {
                        height: 43vh !important;
                    }

                    & .nombre-posicion {
                        height: 7vh !important;

                        & img {
                            height: 5vh !important;
                            width: 5vh !important;
                        }
                    }
                }

                            /* Visualmente simular el podio */
            .primer-puesto {
                grid-column: 1;
                margin-top: 0;
                grid-row: 1;
                /* se ubica al centro visualmente */
                z-index: 3;
            }

            .segundo-puesto {
                grid-column: 1;
                z-index: 2;
                grid-row: 2;

            }

            .tercer-puesto {
                grid-column: 1;
                /* a la derecha */
                z-index: 1;
                grid-row: 3;

            }

            }
        }
    }
}

/* ajuste más específico entre 700px y 810px */
@media screen and (min-width: 700px) and (max-width: 810px) {

    main {
        & .establecimientos-recomendados {
            & .contenedor-imagenes-destacado {

                & .carta-destacado {
                    height: 70vh !important;

                    & img {
                        height: 63vh !important;
                    }

                    & .nombre-posicion {
                        height: 7vh !important;

                        & img {
                            height: 5vh !important;
                            width: 5vh !important;
                        }
                    }
                }
            }
        }
    }

}

/* Ajustes para pantallas pequeñas */
@media (max-width: 600px) {
    main {
        & .seccion-bienvenida {
            & .bienvenida-izquierda {
                & .logo {
                    & .bombilla {
                        font-size: clamp(2.5em, 10.5vw, 15em);
                    }
                }

                .texto-bienvenida {
                    & h3 {
                        font-size: clamp(1em, 7vw, 15em);
                    }

                    & h1 {
                        font-size: clamp(1em, 13vw, 15em);
                    }

                    & p {
                        font-size: clamp(1em, 5.5vw, 15em);
                        max-width: 80%;
                    }

                    & a {
                        button {
                            font-size: clamp(1em, 5.5vw, 15em);
                            width: 80%;
                        }
                    }
                }
            }
        }

        & .servicios {
            padding: 0 1em;
        }

        .establecimientos-recomendados {
            & .contenedor-imagenes-destacado {

                & .carta-destacado {
                    height: 35vh !important;

                    & img {
                        height: 28vh !important;
                    }

                    & .nombre-posicion {
                        height: 7vh !important;

                        & img {
                            height: 5vh !important;
                            width: 5vh !important;
                        }
                    }
                }
            }
        }
    }

}

/* Ajustes para pantallas muy pequeñas */
@media (max-width: 400px) {
    main {
        & .seccion-bienvenida {
            & .bienvenida-izquierda {
                & .logo {
                    .bombilla {
                        font-size: clamp(2.5em, 12.5vw, 15em);
                    }
                }

                & .texto-bienvenida {
                    & h3 {
                        font-size: clamp(1em, 10vw, 15em);
                    }

                    & h1 {
                        font-size: clamp(1em, 15vw, 15em);
                    }

                    & p {
                        font-size: clamp(1em, 6.5vw, 15em);
                        max-width: 80%;
                    }

                    & a {
                        & button {
                            width: 80%;
                            font-size: clamp(1em, 5.5vw, 15em);
                        }
                    }
                }
            }
        }
    }
}