/* ----- VARIABLES Y CONFIGURACIÓN ----- */
:root {
  --negro-puro: #000000;
  --negro-mate: #111111;
  --dorado: #c5a059; /* Un dorado más elegante, tipo Sonora Grill */
  --naranja-accent: #ff8000;
  --blanco-suave: #fff;
  --gris-oscuro: #222222;
  --fuente-titulos: 'Crimson Text', serif;
  --fuente-cuerpo: 'Poppins', sans-serif;
  --transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fuente-cuerpo);
  background-color: var(--negro-puro);
  color: #c5a059;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ----- TIPOGRAFÍA ESPECIAL ----- */
.letra-especial {
  font-family: 'Kaushan Script', cursive;
  color: var(--naranja-accent);
  font-weight: 400;
}

h2 {
  font-family: var(--fuente-titulos);
  font-size: 3rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

/* ----- HEADER Y NAVEGACIÓN ----- */
.header-main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 5%; /* Un poco menos de relleno para que no sea tan gorda */
  z-index: 1000;
  background-color: #000; /* ESTE ES EL GRIS OSCURO SOLIDO */
  border-bottom: 1px solid #2a2a2a; /* Línea fina de división */
  transition: var(--transition);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-icon {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1001;
}

.menu-icon span {
  width: 30px;
  height: 2px;
  background-color: #fff; /* Asegúrate de que sea #fff para que resalte */
  transition: var(--transition);
}

.logo {
  height: 60px;
  filter: brightness(1.2);
}

.btn-reserva-header {
  background: transparent;
  border: 1px solid var(--dorado);
  color: var(--dorado);
  padding: 10px 25px;
  font-size: 0.8rem;
  letter-spacing: 2px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-reserva-header:hover {
  background: var(--dorado);
  color: #000;
}

/* ----- MENÚ LATERAL (OVERLAY) ----- */
.side-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100vh;
  background: var(--negro-puro);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: var(--transition);
}

.side-menu.active {
  left: 0;
}

.nav-links {
  list-style: none;
  text-align: center;
}

.nav-links li {
  margin: 20px 0;
}

.nav-links a {
  font-family: var(--fuente-titulos);
  font-size: 2.5rem;
  color: #fff;
  text-decoration: none;
  transition: var(--transition);
}

.nav-links a:hover {
  color: var(--dorado);
  padding-left: 20px;
}

.close-menu {
  position: absolute;
  top: 30px;
  left: 5%;
  font-size: 3rem;
  cursor: pointer;
  color: var(--dorado);
}

/* ----- SECCIÓN HERO PREMIUM ----- */
.hero-section.premium-bg {
    position: relative;
    height: 100vh; /* Altura completa de la pantalla */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    /* AQUÍ PONES TU MEJOR FOTO DE FONDO (ej. fondo1.jpg o un corte en la parrilla) */
    background-image: url('imagenes/fondo1.webp'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto Parallax elegante (opcional) */
}

/* Capa oscura para garantizar legibilidad del texto */
.overlay-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Negro al 60% de opacidad */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 10; /* Por encima de la capa oscura */
    max-width: 800px;
    padding: 0 20px;
}

.sub-gold {
    color: var(--dorado) !important; /* El color que definiste al principio */
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
}

.sub-gold-hero {
    color: var(--dorado);
    font-family: var(--fuente-cuerpo);
    text-transform: uppercase;
    letter-spacing: 7px;
    font-size: 1.2rem;
    display: block;
    margin-bottom: 15px;
    font-weight: 600;
}

.titulo-principal {
    font-size: 6rem; /* Letra Kaushan Script gigante */
    color: #fff;
    line-height: 1.1;
    margin-bottom: 30px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5); /* Sombra para más profundidad */
}

.hero-subtitle {
    font-family: var(--fuente-cuerpo);
    font-weight: 300;
    font-size: 1.4rem;
    color: #e0e0e0;
    margin-bottom: 40px;
    letter-spacing: 1px;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto 50px auto;
}

/* 2. Mantén el tamaño actual para Celulares */
@media (max-width: 768px) {
    .titulo-principal {
        font-size: 3.2rem; /* Regresa al tamaño que ya te gustaba en cel */
    }

    .hero-subtitle {
        font-size: 1rem;
        padding: 0 10px;
    }

    .sub-gold-hero {
        font-size: 0.9rem;
        letter-spacing: 4px;
    }
}

/* ----- BOTONES HERO ----- */
.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-primary-hero, .btn-secondary-hero {
    padding: 15px 35px;
    text-decoration: none;
    font-family: var(--fuente-cuerpo);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: var(--transition);
    cursor: pointer;
}

.btn-primary-hero {
    background-color: var(--dorado);
    color: #000;
    border: 1px solid var(--dorado);
}

.btn-primary-hero:hover {
    background-color: #fff;
    border-color: #fff;
    transform: translateY(-3px);
}

.btn-secondary-hero {
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
}

.btn-secondary-hero:hover {
    background-color: rgba(255,255,255,0.1);
    border-color: var(--dorado);
    color: var(--dorado);
    transform: translateY(-3px);
}

/* Ajuste Responsivo para Móviles */
@media (max-width: 768px) {
    .titulo-principal {
        font-size: 3.5rem;
    }
    .hero-subtitle {
        font-size: 1rem;
    }
    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }
}

/* ----- SECCIONES GENERALES ----- */
.section-padding {
  padding: 100px 10%;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

/* ----- EFECTO PREMIUM FLOTANTE (HOVER) ----- */
.img-fancy {
  width: 100%;
  border-radius: 5px;
  /* Sombra inicial: dura, pegada y gris oscura (Gris oscuro de tus variables) */
  box-shadow: 10px 10px 0px var(--gris-oscuro);
  /* Transición suave y fluida para el movimiento y la sombra */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s ease;
  display: block; /* Asegura el comportamiento correcto del hover */
}

.img-fancy:hover {
  /* 1. MOVIMIENTO: Flota hacia arriba (-15px) */
  transform: translateY(-15px);
  
  /* 2. SOMBRA: Se vuelve dorada, se aleja y se difumina (Efecto altura premium) */
  /* Usamos un dorado suave (rgba) para que el brillo sea elegante */
  box-shadow: 15px 25px 40px rgba(197, 160, 89, 0.4); 
}

/* ----- FOOTER ----- */
.footer-elegant {
  padding: 60px 10%;
  border-top: 1px solid var(--gris-oscuro);
  text-align: center;
}

.footer-logo {
  height: 80px;
  margin-bottom: 30px;
}

/* ----- RESPONSIVO ----- */
@media (max-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
  
  h2 {
    font-size: 2rem;
  }
  
  .nav-links a {
    font-size: 1.8rem;
  }

  @media (max-width: 768px) {
    .relative-content {
        grid-template-columns: 1fr; /* Cambia a una sola columna (apilado) */
        text-align: center; /* Centra el texto para que se vea mejor en móvil */
    }

    .map-info {
        order: 1; /* El texto va primero */
        margin-bottom: 30px;
    }

    .map-container {
        order: 2; /* El mapa baja automáticamente */
        width: 100%;
    }

    .map-container iframe {
        height: 350px; /* Le damos una altura fija para que no se vea delgado */
        border-radius: 10px;
    }

    .map-info .btn-primary {
        margin: 0 auto; /* Centra el botón de Google Maps */
    }
  }
}
.animar-arriba, .animar-derecha, .reveal-text {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animar-arriba.visible, .reveal-text.visible {
  opacity: 1;
  transform: translateY(0);
}

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

.animar-derecha.visible {
  opacity: 1;
  transform: translateX(0);
}

.side-menu-footer {
    width: 100%;
    text-align: center;
    padding-bottom: 40px;
}

.social-icons {
    margin: 15px 0;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.social-link {
    color: var(--dorado);
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 3px;
    font-weight: 600;
    transition: var(--transition);
}

.social-link:hover {
    color: #fff;
    letter-spacing: 5px; /* Efecto elegante al pasar el mouse */
}

.brand-name {
    font-size: 0.7rem;
    color: #555;
    letter-spacing: 4px;
    margin-top: 20px;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.menu-category-card {
    position: relative;
    height: 450px;
    overflow: hidden;
    border-radius: 5px;
    background-color: var(--negro-mate);
}

.category-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.menu-category-card:hover .category-img {
    transform: scale(1.1); /* Efecto de zoom elegante */
}

.category-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 20%, transparent 100%);
    text-align: left;
}

.category-info h3 {
    font-family: var(--fuente-titulos);
    font-size: 1.8rem;
    color: var(--dorado);
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.category-info p {
    font-size: 0.9rem;
    color: #ccc;
    margin-bottom: 20px;
    font-weight: 300;
}

.btn-menu-link {
    color: #fff;
    text-decoration: none;
    font-size: 0.7rem;
    letter-spacing: 3px;
    border-bottom: 1px solid var(--dorado);
    padding-bottom: 5px;
    transition: var(--transition);
}

.btn-menu-link:hover {
    color: var(--dorado);
    padding-left: 10px;
}

.text-center { text-align: center; }

.map-container {
    position: relative;
    border: 1px solid var(--gris-oscuro);
    overflow: hidden;
}

.mapa-negro {
    filter: grayscale(1) invert(1) contrast(1.2); /* Esto hace el mapa oscuro */
    opacity: 0.8;
    transition: var(--transition);
}

.mapa-negro:hover {
    filter: grayscale(0) invert(0) contrast(1); /* Se vuelve a color al pasar el mouse */
    opacity: 1;
}

.direccion-texto {
    font-family: var(--fuente-titulos);
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: #fff;
}

.contacto-items {
    margin-bottom: 40px;
}

.item {
    margin-bottom: 20px;
}

.dorado-label {
    display: block;
    color: var(--dorado);
    font-size: 0.7rem;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.contacto-items p {
    font-weight: 300;
    letter-spacing: 1px;
}

.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: var(--negro-mate);
    margin: 5% auto;
    padding: 40px;
    border: 1px solid var(--dorado);
    width: 90%;
    max-width: 500px;
    text-align: center;
    border-radius: 5px;
}

#form-reserva {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
}

#form-reserva input, #form-reserva select, #form-reserva textarea {
    background: #000;
    border: 1px solid #333;
    padding: 12px;
    color: #fff;
    font-family: var(--fuente-cuerpo);
    font-size: 0.9rem;
}

#form-reserva input:focus {
    border-color: var(--dorado);
    outline: none;
}

.form-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.close-modal {
    float: right;
    font-size: 2rem;
    color: var(--dorado);
    cursor: pointer;
}

/* ----- ESTILO DE LOS INPUTS CON ETIQUETAS ----- */
.input-wrapper {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-bottom: 10px;
}

.input-wrapper label {
    color: var(--dorado); /* El color dorado que definimos al inicio */
    font-size: 0.75rem;
    letter-spacing: 2px;
    margin-bottom: 5px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Ajuste para que los cuadros de fecha y hora no se vean toscos */
input[type="date"], 
input[type="time"] {
    width: 100%;
    padding: 12px;
    background: #000;
    border: 1px solid #333;
    color: #fff;
    font-family: var(--fuente-cuerpo);
    border-radius: 4px;
    transition: var(--transition);
}

input[type="date"]:focus, 
input[type="time"]:focus {
    border-color: var(--dorado);
    outline: none;
    box-shadow: 0 0 5px rgba(197, 160, 89, 0.3);
}

/* Para que el calendario y el reloj del navegador se vean un poco más oscuros */
input::-webkit-calendar-picker-indicator {
    filter: invert(1); /* Esto hace que el icono del calendario sea blanco */
    cursor: pointer;
}

.titulo-reserva-premium {
    font-family: 'Crimson Text', serif; /* La que ya estábamos usando */
    font-size: 3.2rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 3px; /* El secreto de la elegancia */
    margin-bottom: 10px;
    text-align: center;
    line-height: 1.1;
}

/* ----- CONTENEDOR DE LA GALERÍA ----- */
.contenedor-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    padding: 20px 2%;
    background-color: #000;
}

/* ----- CADA FOTO INDIVIDUAL (CON ANIMACIÓN) ----- */
.foto-item {
    position: relative;
    overflow: hidden;
    height: 350px; /* Altura fija que ya tenías */
    border: 1px solid #1a1a1a;
    background-color: #111;

    /* ESTADO INICIAL PARA LA ANIMACIÓN */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* CLASE QUE ACTIVA LA ANIMACIÓN (LA PONE EL JS) */
.foto-item.entrada-suave {
    opacity: 1;
    transform: translateY(0);
}

.foto-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    filter: grayscale(20%);
}

/* EFECTO HOVER */
.foto-item:hover img {
    transform: scale(1.1);
    filter: grayscale(0%);
}

.overlay-galeria {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.foto-item:hover .overlay-galeria {
    opacity: 1;
}

.overlay-galeria span {
    color: var(--dorado);
    font-family: 'Crimson Text', serif;
    font-size: 1.2rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--dorado);
    padding-bottom: 5px;
}

.logo-img {
    height: 90px; /* Si se ve muy chico, súbelo a 80px */
    width: auto;
    display: block;
    object-fit: contain;
}

/* Para que en el celular no use tanto espacio */
@media (max-width: 768px) {
    .logo-img {
        height: 45px;
    }
}

/* ----- ESTILO DEL FOOTER ----- */
.footer-elegant {
    background-color: #050505; /* Un negro un poco más profundo */
    padding: 60px 0 30px 0;
    text-align: center;
    border-top: 1px solid #1a1a1a;
}

.footer-logo {
    height: 80px; /* En el footer el logo puede ser un poco más grande */
    width: auto;
    margin-bottom: 25px;
    filter: brightness(0.9); /* Un toque sutil para que no brille tanto como el de arriba */
    object-fit: contain;
}

.footer-info p {
    color: #999;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.footer-bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #111;
}

.footer-bottom p {
    font-size: 0.7rem;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Forzar estilo de botón en enlaces de mapas */
.btn-primary, a.btn-primary {
    display: inline-block;
    background-color: var(--dorado) !important;
    color: #000 !important;
    padding: 15px 35px;
    text-decoration: none !important;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: 0.3s;
    border: none;
    margin-top: 20px;
}

.btn-primary:hover {
    background-color: #fff !important;
    transform: translateY(-3px);
}

/* FONDO ESPECIAL UBICACIÓN */
.bg-foto-ubicacion {
    position: relative;
    background-image: url('restaurante/fondorest.webp'); /* USA AQUÍ TU FOTO */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto elegante al hacer scroll */
    overflow: hidden;
}

.overlay-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Oscurece la foto para que se lea el texto */
    z-index: 1;
}

.relative-content {
    position: relative;
    z-index: 2; /* Sube el contenido por encima de la foto oscura */
    /* Busca .relative-content o agrégalo si no lo tienes */
    max-width: 1200px; /* Limita el ancho para que no se pegue a las orillas */
    margin: 0 auto;    /* Centra todo el bloque en la pantalla */
    display: grid;
    grid-template-columns: 1fr 1fr; /* Mantiene el texto y mapa lado a lado */
    gap: 50px;         /* Espacio de separación entre texto y mapa */
    align-items: center;
    padding: 0 20px;   /* Margen de seguridad para que no toque los bordes en tablets */
}

/* Opcional: Dale un borde dorado al mapa para que combine */
.map-container {
    border: 2px solid var(--dorado);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* --- NUEVA LÓGICA DE GALERÍA COLAPSABLE --- */
.galeria-wrapper {
    position: relative;
    max-height: 500px; /* Solo muestra la primera fila de fotos */
    overflow: hidden;
    transition: max-height 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.galeria-wrapper.expandido {
    max-height: none !important; /* PERMITE QUE CREZCA TODO LO NECESARIO SIN TOPE :D*/
}

.fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, transparent, #000);
    z-index: 5;
    pointer-events: none;
    transition: opacity 0.5s;
}

.galeria-wrapper.expandido .fade-overlay {
    opacity: 0;
}

.ver-mas-container {
    padding: 40px 0;
    background: #000;
}

.btn-ver-mas {
    background: transparent;
    border: none;
    color: var(--dorado);
    font-family: var(--fuente-cuerpo);
    letter-spacing: 3px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

.flecha-animada {
    width: 20px;
    height: 20px;
    border-right: 3px solid var(--dorado);
    border-bottom: 3px solid var(--dorado);
    transform: rotate(45deg);
    margin-top: 15px;
    animation: bounce 2s infinite;
    transition: transform 0.5s;
}

.btn-ver-mas.abierto .flecha-animada {
    transform: rotate(-135deg);
    animation: none;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(45deg); }
    40% { transform: translateY(-10px) rotate(45deg); }
    60% { transform: translateY(-5px) rotate(45deg); }
}

/* Rotar flecha al abrir */
.btn-ver-mas.abierto .flecha-animada {
    transform: rotate(-135deg);
    animation: none;
}

/* AJUSTES PARA MÓVILES (PANTALLAS PEQUEÑAS) */
@media (max-width: 768px) {
    /* Ajuste de la sección eventos para que la imagen y el texto no choquen */
    #eventos .grid-2 {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Evitar que el título del modal sea demasiado grande y se corte */
    .titulo-reserva-premium {
        font-size: 2.2rem !important;
    }

    /* Hacer que los campos de Fecha y Hora ocupen todo el ancho en celulares */
    .form-group {
        grid-template-columns: 1fr;
    }

    /* Reducir el padding de los contenedores para ganar espacio */
    .modal-content {
        padding: 25px 15px;
        margin: 10% auto;
        width: 95%;
    }

    /* Ajustar el tamaño de la lista de eventos */
    .lista-dorada li {
        font-size: 0.9rem;
        text-align: left;
    }
}

/* Agrega esto a tu style.css para mejorar el área de escritura */
#res-notas {
    min-height: 100px;
    resize: none; /* Evita que el usuario deforme el diseño en móviles */
}

/* --- ESTILOS PARA TODOS LOS MODALES (RESERVA Y EVENTOS) --- */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* Fondo más oscuro y premium */
    backdrop-filter: blur(5px);
    overflow-y: auto;
}

.modal-content {
    background-color: #0a0a0a;
    margin: 5% auto;
    padding: 40px;
    border: 1px solid #222;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    text-align: center;
}

/* Diseño de las casillas para ambos formularios */
#form-reserva input, 
#form-reserva select, 
#form-reserva textarea,
#form-eventos input, 
#form-eventos select, 
#form-eventos textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    background: #111;
    border: 1px solid #333;
    color: #fff;
    font-family: var(--fuente-cuerpo);
    letter-spacing: 1px;
    transition: 0.3s;
    text-transform: uppercase;
    font-size: 0.8rem;
}

/* Efecto dorado al hacer clic en cualquier casilla */
#form-reserva input:focus, 
#form-reserva select:focus, 
#form-reserva textarea:focus,
#form-eventos input:focus, 
#form-eventos select:focus, 
#form-eventos textarea:focus {
    outline: none;
    border-color: var(--dorado);
    background: #151515;
}

/* Estilo para las etiquetas de Fecha/Hora */
.input-wrapper label {
    display: block;
    color: var(--dorado);
    font-size: 0.7rem;
    margin-bottom: 5px;
    letter-spacing: 2px;
    text-align: left;
}

.close-modal {
    position: absolute;
    right: 20px;
    top: 10px;
    color: #555;
    font-size: 30px;
    cursor: pointer;
    transition: 0.3s;
}

.close-modal:hover {
    color: var(--dorado);
}

/* AJUSTE PARA QUE LAS IMÁGENES DE FONDO SE VEAN COMPLETAS */

/* AJUSTE PARA IPAD Y MÓVILES - ELIMINA EL ZOOM GIGANTE */

.premium-bg {
    background-image: url('imagenes/fondo1.webp');
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    /* Quitamos 'fixed' aquí porque en iPad causa el error de zoom */
    background-attachment: scroll !important; 
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-foto-ubicacion {
    position: relative;
    background-image: url('restaurante/fondorest.jpg');
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    padding: 100px 0;
}

/* --- CORRECCIÓN FINAL UBICACIÓN MÓVIL --- */
@media (max-width: 768px) {
    /* Forzamos a que el contenedor sea una sola columna */
    .relative-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 15px !important;
    }

    /* El texto arriba con espacio */
    .map-info {
        width: 100% !important;
        margin-bottom: 30px !important;
        padding: 0 !important;
    }

    /* El mapa abajo ocupando todo el ancho */
    .map-container {
        width: 100% !important;
        height: 350px !important; /* Altura fija para que no se vea delgado */
    }

    .map-container iframe {
        width: 100% !important;
        height: 100% !important;
        border-radius: 15px; /* Bordes redondeados para que se vea premium */
    }

    /* Centramos el botón de "Abrir en Maps" */
    .map-info .btn-primary {
        margin: 0 auto !important;
        display: inline-block;
    }
}

/* --- SECCIÓN MENÚ GENERAL --- */
.seccion-menu {
    padding: 80px 20px;
    background: var(--negro-puro);
    text-align: center;
    color: var(--dorado) !important;
}

.libro-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 1100px;
    margin: 40px auto;
}

.libro {
    display: flex;
    flex-direction: row; /* Fuerza línea horizontal en PC */
    flex-wrap: nowrap;   /* Evita que una hoja se baje */
    width: 100%;
    border: 2px solid var(--dorado);
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    background: #000;
    overflow: hidden;
}

/* --- HOJAS MODO PC --- */
.hoja {
    display: none; /* JS las activa */
    flex: 0 0 50%;  /* En PC cada una ocupa exactamente la mitad */
    max-width: 50%;
}

.hoja img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- BOTONES ABAJO --- */
.controles-libro {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.nav-libro {
    background: var(--negro-mate);
    border: 1px solid var(--dorado);
    color: var(--dorado);
    padding: 10px 25px;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    font-size: 0.9rem;
    border-radius: 4px;
}

.nav-libro:hover {
    background: var(--dorado);
    color: #000;
}

/* --- AJUSTES EXCLUSIVOS PARA CELULAR --- */
@media (max-width: 768px) {
    .libro {
        border: 1px solid var(--dorado);
    }

    .hoja {
        flex: 0 0 100% !important; /* En cel una hoja ocupa todo el ancho */
        max-width: 100% !important;
    }
    
    .controles-libro {
        width: 100%;
        padding: 0 20px;
    }

    .nav-libro {
        flex: 1; /* Botones del mismo tamaño en el ancho del cel */
        font-size: 0.8rem;
    }
}

/* --- ANIMACIÓN --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateX(15px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 768px) {
    .foto-item {
        height: 300px; /* Un poco más bajas para que quepan mejor en pantalla de cel */
    }
}

/* ----- AGRANDAR SECCIÓN EXPERIENCIA ÚNICA (PC) ----- */
@media (min-width: 992px) {
    /* El título principal de la sección (H2) */
    #experiencia h2 {
        font-size: 4.5rem; /* Antes era 3rem */
        line-height: 1;
        margin-bottom: 2rem;
    }

    /* El subtítulo dorado (Calidad en cada corte) */
    #experiencia .letra-especial {
        font-size: 2.5rem; /* Lo hace resaltar mucho más */
        display: block;
        margin-bottom: 1rem;
    }

    /* El texto descriptivo (En Brasas Chell, seleccionamos...) */
    #experiencia p {
        font-size: 1.25rem; /* Un poco más grande para lectura premium */
        max-width: 85%; /* Para que no se estiren demasiado las líneas */
        line-height: 1.8;
    }
}

/* Ajuste para que el texto no se pegue en pantallas medianas */
@media (max-width: 768px) {
    #experiencia h2 {
        font-size: 2.5rem;
    }
    #experiencia .letra-especial {
        font-size: 1.8rem;
    }
}

/* ----- AGRANDAR SECCIÓN EVENTOS (PC) ----- */
@media (min-width: 992px) {
    /* Título principal (CELEBRA CON NOSOTROS) */
    #eventos h2 {
        margin-bottom: 0.5rem !important; /* Lo pegamos al texto de abajo */
        line-height: 1.1;
    }

    /* Subtítulo dorado (Eventos Especiales / Momentos que Encienden) */
    #eventos .sub-gold, 
    #eventos .letra-especial {
        font-size: 2.5rem; 
        margin-bottom: 1.5rem;
        display: block;
    }

    /* Párrafo descriptivo (En Brasas Chell, transformamos...) */
    #eventos p {
        font-size: 1.25rem;
        line-height: 1.8;
        max-width: 90%;
        margin-bottom: 25px;
    }

    /* Lista de beneficios (Decoraciones, Menús, etc.) */
    #eventos .lista-dorada li {
        font-size: 1.2rem;
        margin-bottom: 15px;
        letter-spacing: 1px;
    }
}

/* Ajuste preventivo para que en tablets no se amontone */
@media (max-width: 1024px) and (min-width: 769px) {
    #eventos h2 {
        font-size: 3.5rem;
    }
    #eventos p {
        font-size: 1.1rem;
    }
}

.titulo-principal {
    background: linear-gradient(to bottom, #cfc5b6 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.8));
}

/* --- BOTÓN FLOTANTE WHATSAPP --- */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    text-decoration: none;
    transition: 0.3s ease;
}

.whatsapp-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25d366; /* Verde original o usa var(--dorado) si quieres que combine al 100% */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: 0.4s;
}

.whatsapp-content img {
    width: 35px;
    height: 35px;
}

/* El texto de "¿DUDAS?" que aparece al lado */
.tooltip-whatsapp {
    position: absolute;
    right: 75px;
    background: #1a1a1a;
    color: var(--dorado);
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    border: 1px solid var(--dorado);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    white-space: nowrap;
}

/* Efectos al pasar el mouse */
.whatsapp-float:hover .whatsapp-content {
    transform: scale(1.1);
    background: #128c7e; /* Un verde más oscuro al hover */
}

.whatsapp-float:hover .tooltip-whatsapp {
    opacity: 1;
    visibility: visible;
    right: 70px;
}

/* Ajuste para móviles para que no tape mucho espacio */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
    }
    .whatsapp-content {
        width: 50px;
        height: 50px;
    }
    .tooltip-whatsapp {
        display: none; /* En celular mejor ocultar el texto para no estorbar */
    }
}