html{
    scroll-behavior:smooth;
    min-width: 100vh;
    min-height: 100vh;
    padding-left: 5rem;
    padding-right: 5rem;
    box-sizing: border-box;
}


p{
    margin: 1rem;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
}

h1{
    color: blue;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 2em;
    text-align: center;
}

.titulo::after{
    content: "🍽️"
}


h2{
    color: black;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center;
}

h2::after{
    content: "🏜️";
}


a{
    color: white;
}

/* El header en sí no tiene contenido, es como una caja vacía en la que va el nav
El nav es lo que va dentro del header. Es decir, las letras, el color, la disposición... Todo lo que ves aquí abajo.*/

.caja-header{
    background-color: black;
    color: black;
}
nav{
   display: flex;
   justify-content: space-around;
}

.caja-titulo-subtitulo{

    background-color: black;
    text-transform: uppercase;
    width:100%;
    max-width: 100%;

}

.titulo,.subtitulo{
    color: white;
    
}

.letra-encabezado{
    color:white;
    margin: 5px;
    font-size: 14px;
    font-weight:bold;
    font-style: oblique;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.letra-encabezado:hover{
    transition: calc(0.3s);
    transform: scale(1.3);
    color:brown;
}

.quienes-somos{
    color: black;
    text-transform: uppercase;
}

.fotos-desc{
    max-width: 100%;
    height:auto;
}

.fotos-desc:hover{
 transform: scale(2); /* Ejemplo: aumentar ligeramente el tamaño */
  transition: transform 0.3s ease; /* Transición suave */
  filter: blur(0.2px); 
  /* Aplicación de filtros */
}

.caja-sobre-nosotros{
    display: flex;
    text-wrap: balance;
}

h3{
    text-align: center;
    font-weight: bold;
    font-style:normal;
    font-size: 2.5em;
    font-style: oblique;
    color: rgb(51, 39, 179);
}

.parrafo-intro{
    text-align: center;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    margin-bottom: 30px;
}

.seccion-platos{
    background-color: black;
    padding: 3rem 2rem;
    margin: auto;    
}


#especialidades{
    color: white;
    text-transform: uppercase;
}

.presentacion-especialidades{
color: white;
  font-family: sans-serif;
  text-align:center;
  margin: 0px 10px 50px 0px;
  
}

.items {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.comidas{
display: flex;
justify-content: center;
width: 100%;
height: auto;
max-width: 100%;

}

.comidas img{
    border-radius: 50%;
    width: 35%;
    max-width: 100%;
    height: auto;

}

.comidas:hover{
    transform: scale(1.2); /* Ejemplo: aumentar ligeramente el tamaño */
  transition: transform 0.3s ease; /* Transición suave */
  filter: blur(0.2px); 
  /* Aplicación de filtros */
}


.desc-especialidades{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    text-align: center;
}

.parrafo-contacto{
    font-size: 1em;
    color: white;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
}

#contacto{
color: white;

}
.encabezado-contacto{
color: white;
text-align: center;
font-size: 2em;

}
/* Cuando quieras organizar los elementos de cierta forma, primero debes agruparlos todos en un div padre. Después, si son elementos diferentes como en este caso (info de contacto y un mapa), debemos meter cada grupo de elementos en subdivs hijos. Después debes aplicar estilos de disposición al div padre para que los div hijos "obedezcan" esa disposición. Lee el siguiente código: */

.info-contacto {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 5px; /* espaciado entre bloques */
    flex-wrap: wrap; /* para adaptarse en pantallas pequeñas */
    background-color: black;
    padding: 20px 5px 20px 20px;

}
.mapa-bar{
margin: auto;
}

#instagram:hover{
    transform: scale(1.2);
    transition: transform 0.3s ease;
   
}

.items h4{
    color: white;
    text-align:center;
    font-size:2em;
    text-transform: uppercase;
}

.grid-item {

    display: flex;
    align-items: center;
    justify-content: center;
    background-color: lightblue;
    border-radius: 4px;
    transition: transform 0.3s ease-in-out;
    border: solid 1px white;
}

.grid-item:hover{
    filter: opacity(0.9);
    transform: scale(1.04);
}

.grid-item img{
    max-width: 100%;
    height: 100%;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: minmax(150px, auto);
    gap: 20px;
    padding: 20px;

}
/* Podrías manipular cada item individualmente si le das una clase (video Yoelvis Mulen - Galería de imágenes, minuto 10:00) */

.footer{
    background-color: lightcyan;
    height: 100%;
}


.boton-arriba{
    background-color: black;
    display: flex;
    justify-content: right;
    
}

.boton-texto-arriba{
    padding: 15px 30px;
    font-size: 1em;
    background-color: white; /* opcional */
    border: 2px solid black; /* opcional */
    cursor: pointer;
}

.boton-texto-arriba a{
    color: black;
}

.boton-texto-arriba:hover{
    transition:0.2s;
    transform: scale(1.5);
    text-decoration: none;
}

/*MEDIA QUERIES GENERADOS POR CLAUDE*/

/* ============================================
   MEDIA QUERIES PARA RESPONSIVE DESIGN
   ============================================ */

/* Tablets grandes y pantallas medianas (hasta 1024px) */
@media screen and (max-width: 1024px) {
    html {
        padding-left: 3rem;
        padding-right: 3rem;
    }
    
    h1 {
        font-size: 1.8em;
    }
    
    .items {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablets (hasta 768px) */
@media screen and (max-width: 768px) {
    html {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    /* Navegación vertical */
    nav {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 15px 0;
    }
    
    .letra-encabezado {
        font-size: 16px;
        padding: 8px 0;
    }
    
    h1 {
        font-size: 1.5em;
    }
    
    h3 {
        font-size: 2em;
    }
    
    p {
        font-size: 1.2em;
    }
    
    /* Especialidades en una columna */
    .items {
        flex-direction: column;
        gap: 3rem;
    }
    
    .items > div {
        width: 100%;
    }
    
    .comidas img {
        width: 50%;
    }
    
    /* Galería en 2 columnas */
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
    }
    
    /* Mapa más pequeño */
    .mapa-bar iframe {
        width: 100%;
        height: 300px;
    }
    
    /* Contacto en columna */
    .info-contacto {
        flex-direction: column;
        align-items: center;
        padding: 20px 10px;
    }
    
    .encabezado-contacto {
        font-size: 1.5em;
    }
}

/* Móviles (hasta 480px) */
@media screen and (max-width: 480px) {
    html {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    h1 {
        font-size: 1.3em;
    }
    
    h2 {
        font-size: 1em;
    }
    
    h3 {
        font-size: 1.5em;
    }
    
    .letra-encabezado {
        font-size: 14px;
    }
    
    p {
        font-size: 1em;
        margin: 0.5rem;
    }
    
    .parrafo-intro {
        font-size: 0.9em;
    }
    
    /* Sección de platos */
    .seccion-platos {
        padding: 2rem 1rem;
    }
    
    .presentacion-especialidades {
        font-size: 0.9em;
        margin: 0px 5px 30px 0px;
    }
    
    .items h4 {
        font-size: 1.5em;
    }
    
    .desc-especialidades {
        font-size: 0.85em;
    }
    
    .comidas img {
        width: 60%;
    }
    
    /* Galería en 1 columna */
    .grid-container {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
    }
    
    /* Mapa aún más pequeño */
    .mapa-bar iframe {
        width: 100%;
        height: 250px;
    }
    
    /* Tabla de horarios */
    table {
        font-size: 0.7em;
    }
    
    th, td {
        padding: 4px 2px;
    }
    
    .parrafo-contacto {
        font-size: 0.9em;
    }
    
    .encabezado-contacto {
        font-size: 1.3em;
    }
    
    /* Reducir efectos hover en móvil */
    .comidas:hover {
        transform: scale(1.05);
    }
    
    .grid-item:hover {
        transform: scale(1.02);
    }
}

/* Móviles muy pequeños (hasta 320px) */
@media screen and (max-width: 320px) {
    html {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    h1 {
        font-size: 1.1em;
    }
    
    h3 {
        font-size: 1.3em;
    }
    
    .comidas img {
        width: 70%;
    }

    
    .mapa-bar iframe {
        height: 200px;
    }
}


.tabla-horario{
    border: 0.3rem double white;
    color: white;
    padding: 1rem;
    margin: 1rem;
    text-align: center;

}

.tabla-horario:hover{

    background-color: lightcyan;
    color: black;
    border-color: black;
    
}

#cerrado{
    color: red;
    font-weight: bold;
}