/* iPhone 16 y móviles */
@media screen and (max-width: 430px){

    header{
        padding: 10px;
    }

    .logo img{
        width: 90px;
    }

    nav ul{
        gap: 10px;
        flex-wrap: wrap;
    }

    nav ul li a{
        font-size: 14px;
    }

    .hero{
        min-height: 100vh;
        padding: 20px;
    }

    .hero-content h1{
        font-size: 2.2rem;
        line-height: 1.1;
    }

    .hero-content h2{
        font-size: 1.1rem;
        padding: 10px;
    }

    .hero-content p{
        font-size: 0.95rem;
    }

    .btn{
        width: 100%;
        max-width: 280px;
        padding: 12px;
        margin: 5px auto;
    }

    .titulo{
        font-size: 1.8rem;
    }

    .grid-servicios,
    .menu-grid,
    .grid-galeria{
        grid-template-columns: 1fr;
    }

    .card img,
    .platillo img,
    .grid-galeria img{
        height: 220px;
    }

    form{
        grid-template-columns: 1fr;
        padding: 20px;
    }

    form textarea,
    form button{
        grid-column: span 1;
    }

    .contacto-grid{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .info{
        padding: 20px;
    }

    .info p{
        font-size: 16px;
    }

    iframe{
        width: 100% !important;
        height: 250px !important;
        border-radius: 15px;
    }

    footer{
        padding: 25px 15px;
    }

    .redes i{
        font-size: 22px;
    }
} 
/* Celulares */
@media screen and (max-width: 430px){

    *{
        max-width: 100%;
    }

    header{
        flex-direction: column;
        padding: 10px;
    }

    nav ul{
        justify-content: center;
        gap: 10px;
    }

    nav ul li a{
        font-size: 14px;
    }

    .hero-content h1{
        font-size: 2rem;
    }

    .hero-content h2{
        font-size: 1rem;
    }

    .hero-content p{
        font-size: .9rem;
    }

    form,
    .contacto-grid{
        grid-template-columns: 1fr;
    }

    .menu-grid,
    .grid-servicios,
    .grid-galeria{
        grid-template-columns: 1fr;
    }

    iframe{
        width: 100% !important;
        height: 250px !important;
    }
}
 :root {

        --verde-oscuro: #2E7D32;

        --verde-claro: #66BB6A;

        --naranja: #F57C00;

        --amarillo: #FFC107;

        --blanco: #FFFFFF;

        }



* {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

            font-family: Arial, sans-serif;

        }


        html {

            scroll-behavior: smooth;

        }


        body {

            background: #f5f5f5;

            color: #333;

        }


        /* =========================================
           HEADER
        ========================================= */

        header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 10px 5%;

            background: var(--blanco);

            position: sticky;

            top: 0;

            z-index: 1000;

            box-shadow: 0 3px 12px rgba(0,0,0,.15);

        }


        .logo img {

            width: 180px;

            height: auto;

            display: block;

        }


        nav ul {

            display: flex;

            list-style: none;

            gap: 25px;

            align-items: center;

        }


        nav ul li a {

            text-decoration: none;

            color: var(--verde-oscuro);

            font-weight: bold;

            transition: .3s;

        }


        nav ul li a:hover {

            color: var(--naranja);

        }


        .btn-header {

            background: var(--naranja);

            color: var(--blanco);

            padding: 13px 22px;

            border-radius: 10px;

            text-decoration: none;

            font-weight: bold;

            transition: .3s;

        }


        .btn-header:hover {

            background: var(--amarillo);

            color: var(--verde-oscuro);

        }


        /* =========================================
           BANNER PRINCIPAL
        ========================================= */

        .hero {

            min-height: 90vh;

            background:

                linear-gradient(
                    rgba(46,125,50,.45),
                    rgba(0,0,0,.45)
                ),

                url("img/banner.jpg");

            background-size: cover;

            background-position: center;

            display: flex;

            justify-content: center;

            align-items: center;

            text-align: center;

            color: var(--blanco);

        }


        .hero-content {

            max-width: 900px;

            padding: 20px;

        }


        .hero-content h1 {

            font-size: 5rem;

            margin-bottom: 15px;

            text-shadow: 3px 3px 8px rgba(0,0,0,.5);

        }


        .hero-content h2 {

            font-size: 2rem;

            background: var(--verde-oscuro);

            display: inline-block;

            padding: 12px 25px;

            border-radius: 10px;

            margin-bottom: 20px;

        }


        .hero-content p {

            font-size: 1.3rem;

            margin-bottom: 30px;

        }


        .btn {

            display: inline-block;

            padding: 15px 30px;

            border-radius: 10px;

            text-decoration: none;

            margin: 8px;

            font-weight: bold;

            transition: .3s;

        }


        .btn-orange {

            background: var(--naranja);

            color: var(--blanco);

        }


        .btn-orange:hover {

            background: var(--amarillo);

            color: var(--verde-oscuro);

        }


        .btn-green {

            background: var(--verde-oscuro);

            color: var(--blanco);

        }


        .btn-green:hover {

            background: var(--verde-claro);

        }


        /* =========================================
           TÍTULOS
        ========================================= */

        .titulo {

            text-align: center;

            color: var(--verde-oscuro);

            margin-bottom: 45px;

            font-size: 2.5rem;

        }


        .titulo::after {

            content: "";

            display: block;

            width: 70px;

            height: 4px;

            background: var(--amarillo);

            margin: 12px auto;

            border-radius: 5px;

        }


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

        .servicios {

            padding: 80px 5%;

            background: var(--blanco);

        }


        .grid-servicios {

            display: grid;

            grid-template-columns:
                repeat(auto-fit, minmax(250px, 1fr));

            gap: 25px;

        }


        .card {

            background: var(--blanco);

            border-radius: 20px;

            overflow: hidden;

            box-shadow: 0 5px 15px rgba(0,0,0,.12);

            transition: .3s;

            border-top: 5px solid var(--verde-claro);

        }


        .card:hover {

            transform: translateY(-8px);

            box-shadow: 0 10px 25px rgba(0,0,0,.18);

        }


        .card img {

            width: 100%;

            height: 220px;

            object-fit: cover;

        }


        .card-body {

            padding: 20px;

            text-align: center;

        }


        .card-body h3 {

            color: var(--verde-oscuro);

            margin-bottom: 10px;

        }


        .card-body p {

            color: #555;

        }


        .card-btn {

            background: var(--verde-oscuro);

            color: var(--blanco);

            padding: 11px;

            display: block;

            text-decoration: none;

            border-radius: 8px;

            margin-top: 15px;

            transition: .3s;

        }


        .card-btn:hover {

            background: var(--verde-claro);

        }


        /* =========================================
           RESTAURANTE HACIENDA
        ========================================= */

        .restaurante {

            padding: 80px 5%;

            background: #f1f8f1;

        }


        .restaurante-intro {

            text-align: center;

            max-width: 800px;

            margin: -20px auto 40px;

            font-size: 18px;

            line-height: 1.6;

        }


        .menu-grid {

            display: grid;

            grid-template-columns:
                repeat(auto-fit, minmax(250px, 1fr));

            gap: 25px;

        }


        .platillo {

            background: var(--blanco);

            border-radius: 20px;

            overflow: hidden;

            box-shadow: 0 5px 15px rgba(0,0,0,.12);

            transition: .3s;

        }


        .platillo:hover {

            transform: translateY(-7px);

        }


        .platillo img {

            width: 100%;

            height: 220px;

            object-fit: cover;

        }


        .platillo-content {

            padding: 20px;

            text-align: center;

        }


        .platillo-content h3 {

            color: var(--verde-oscuro);

            margin-bottom: 10px;

        }


        .platillo-content p {

            line-height: 1.5;

        }


        .precio {

            color: var(--naranja);

            font-size: 25px;

            font-weight: bold;

            margin-top: 10px;

        }


        .btn-menu {

            display: inline-block;

            background: var(--naranja);

            color: var(--blanco);

            text-decoration: none;

            padding: 10px 20px;

            border-radius: 8px;

            margin-top: 15px;

            font-weight: bold;

        }


        .btn-menu:hover {

            background: var(--amarillo);

            color: var(--verde-oscuro);

        }


        /* =========================================
           GALERÍA
        ========================================= */

        .galeria {

            padding: 80px 5%;

            background: var(--blanco);

        }


        .grid-galeria {

            display: grid;

            grid-template-columns:
                repeat(auto-fit, minmax(220px, 1fr));

            gap: 18px;

        }


        .grid-galeria img {

            width: 100%;

            height: 230px;

            object-fit: cover;

            border-radius: 15px;

            transition: .3s;

        }


        .grid-galeria img:hover {

            transform: scale(1.04);

        }


        /* =========================================
           RESERVACIONES
        ========================================= */

        .reservaciones {

            padding: 80px 5%;

            background: #e8f5e9;

        }


        form {

            max-width: 850px;

            margin: auto;

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 15px;

            background: var(--blanco);

            padding: 30px;

            border-radius: 20px;

            box-shadow: 0 5px 20px rgba(0,0,0,.10);

        }


        form input,

        form select,

        form textarea {

            padding: 15px;

            border: 2px solid #ddd;

            border-radius: 10px;

            font-size: 16px;

            outline: none;

        }


        form input:focus,

        form select:focus,

        form textarea:focus {

            border-color: var(--verde-claro);

        }


        form textarea {

            grid-column: span 2;

            height: 130px;

            resize: vertical;

        }


        form button {

            grid-column: span 2;

            padding: 15px;

            background: var(--naranja);

            color: var(--blanco);

            border: none;

            border-radius: 10px;

            font-size: 18px;

            font-weight: bold;

            cursor: pointer;

            transition: .3s;

        }


        form button:hover {

            background: var(--amarillo);

            color: var(--verde-oscuro);

        }


        /* =========================================
           CONTACTO
        ========================================= */

        .contacto {

            padding: 80px 5%;

            background: var(--blanco);

        }


        .contacto-grid {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 40px;

        }


        .info {

            background: #f5f5f5;

            padding: 30px;

            border-radius: 20px;

            border-left: 6px solid var(--verde-oscuro);

        }


        .info p {

            margin-bottom: 20px;

            font-size: 18px;

        }


        .info i {

            color: var(--naranja);

            margin-right: 10px;

        }


        .mapa {

            background: var(--verde-claro);

            height: 300px;

            border-radius: 20px;

            display: flex;

            justify-content: center;

            align-items: center;

            color: var(--blanco);

            font-size: 20px;

            font-weight: bold;

        }


        /* =========================================
           FOOTER
        ========================================= */

        footer {

            background: var(--verde-oscuro);

            color: var(--blanco);

            padding: 45px;

            text-align: center;

        }


        footer h2 {

            margin-bottom: 10px;

        }


        footer p {

            margin-bottom: 15px;

        }


        .redes {

            margin-top: 15px;

        }


        .redes i {

            font-size: 25px;

            margin: 0 10px;

            cursor: pointer;

            transition: .3s;

        }


        .redes i:hover {

            color: var(--amarillo);

        }


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

        @media(max-width: 900px) {

            header {

                flex-direction: column;

                gap: 15px;

            }


            nav ul {

                flex-wrap: wrap;

                justify-content: center;

            }


            .hero-content h1 {

                font-size: 3.5rem;

            }

        }


        @media(max-width: 768px) {

            .hero {

                min-height: 70vh;

            }


            .hero-content h1 {

                font-size: 2.5rem;

            }


            .hero-content h2 {

                font-size: 1.3rem;

            }


            .hero-content p {

                font-size: 1rem;

            }


            form,

            .contacto-grid {

                grid-template-columns: 1fr;

            }


            form textarea,

            form button {

                grid-column: span 1;

            }


            .logo img {

                width: 150px;

            }

        }