/* Global */
.nowrap {
  white-space: nowrap;
}
a.tel,
a.email {
  font-weight: bold !important;
}

/* Quitar subrayado de los enlaces tel y email */
a.tel,
a.email {
  text-decoration: none !important;
}

/* **Reglas de enlace** */
**a.email** {
  color: inherit;
  text-decoration: underline;
}

**a.tel** {
  color: inherit;
  text-decoration: none !important;
}
**a.tel:hover** {
  text-decoration: underline !important;
}

/* Descuentos/Contacto */
#visual-seis {
  background-color: #fff !important;
  padding-bottom: 2rem;
  clear: both;
}

/* Separador antes del footer */
.espacio-libre-pie {
  display: block;
  height: 2rem;
  background: transparent;
}

/* Footer */
footer {
  clear: both;
  padding: 1rem 0;
  background: #000;
  text-align: center;
}
footer p {
  margin: 0;
  font-size: 0.85rem;
  color: #fff;
}

/* Teléfonos en CONTACTO en negro */
#visual-seis a.tel,
#visual-seis a.tel:visited {
  color: #000 !important;        /* fuerza negro */
  text-decoration: none !important;
}

/* Hover dorado y subrayado */
#visual-seis a.tel:hover {
  color: #dbc179 !important;
  text-decoration: underline !important;
}




/* ====== Ordenador ====== */
/* Aquí va tu CSS original, sin tocar nada */

body {
  margin: 0;
  font-family: 'Lora', serif;
}
*, *::before, *::after {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  display: block;
}
p {
  font-size: 15px;
  text-align: center;
  margin: 0 2%;
}
.clear {
  clear: both;
}

.centrado {
  margin: auto;
  width: 80%;
  max-width: 960px;
}
.espacio-libre {
  margin-bottom: 5%;
}
.espacio-libre-pie {
  margin-bottom: 1%;
}

header {
  width: 100vw;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: white;
  border-bottom: 2px solid #dbc179;
  display: flex;
  align-items: center;
  padding: 10px 20px;
}
#logo {
  margin-right: 30px;
}
#logo img {
  width: 60px;
  height: auto;
}
nav {
  flex-grow: 1;
}
nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 24px;
}
nav ul li {
  flex: 1;
  text-align: center;
}
nav ul li a {
  display: block;
  width: 80%;
  padding: 6px 0;
  text-decoration: none;
  color: #dbc179;
  font-weight: bold;
  font-size: 18px;
  font-family: "Akaya Kanadaka", system-ui;
}
nav ul li a:hover {
  color: #a0c5a5;
}

#visual-uno {
  margin: auto;
}
.imagen, .imagen-azul {
  width: 26%;
  height: 200px;
  text-align: center;
  padding: 2%;
}
.imagen {
  float: left;
  margin-top: 3%;
  margin-right: 4%;
}
.imagen-azul {
  float: right;
  margin-bottom: 4%;
  margin-left: 4%;
}
.imagen iframe,
.imagen-azul iframe {
  width: 100%;
}
.visual-principal p {
  text-align: center;
  font-size: 35px;
  color: #dbc179;
  font-family: "Akaya Kanadaka", system-ui;
  margin: 3%;
}
.visual-blanco {
  width: 70%;
  margin-top: 5px;
  float: left;
}
.visual-azul {
  width: 65%;
  float: right;
  text-align: center;
  margin-right: 5%;
  color: white;
}
.visual-azul-blanco {
  width: 65%;
  float: right;
  text-align: center;
  margin-right: 1%;
  color: black;
}
.visual-blanco h1,
.visual-azul-blanco h1,
.visual-azul h1 {
  margin: 30px 0 40px;
  font-size: 25px;
  font-family: "Akaya Kanadaka", system-ui;
}
.visual-blanco h1 {
  color: #dbc179;
  margin-left: 40%;
}
.visual-azul-blanco h1 {
  color: #dbc179;
  margin-right: 5%;
}
.visual-azul h1 {
  color: white;
}

#visual-dos,
#visual-tres,
#visual-cuatro {
  background-color: white;
}
#visual-cinco {
  background-color: #a0c5a5;
}
#visual-cinco h1 {
  color: white;
  text-align: center;
  margin-bottom: 20px;
  padding-top: 25px;
  font-size: 20px;
}
#visual-cinco p {
  color: white;
}
#visual-cinco p a {
  color: white;
  text-decoration: none;
}
#visual-cinco p a:hover {
  color: #dbc179;
}

.bloque-azul {
  width: 18%;
  background-color: white;
  color: black;
  text-align: center;
  margin: 6px 7%;
  padding: 2%;
  float: left;
  border-radius: 10px;
  margin-bottom: 3%;
}
#visual-cinco .bloque-azul a {
  display: block;
  text-decoration: none;
  color: black;
}
#visual-cinco .bloque-azul a:hover {
  color: #dbc179;
}
#visual-cinco .bloque-azul img {
  width: 50%;
  margin: auto;
}

#visual-seis h1 {
  color: #dbc179;
  font-family: "Akaya Kanadaka", system-ui;
  text-align: center;
  margin: 30px 0 20px;
  font-size: 20px;
}
#visual-seis p {
  text-align: center;
}
#visual-seis #descuento,
#visual-seis #contacto {
  width: 45%;
  float: left;
}
#visual-seis #descuento {
  margin-right: 5%;
}
#visual-seis #contacto {
  margin-left: 5%;
}
#visual-seis #descuento a {
  color: black;
}
#visual-seis #descuento a:hover {
  color: #dbc179;
}

footer {
  background-color: black;
  padding: 3px;
}
footer p {
  color: white;
  text-align: center;
  font-size: 12px;
}

@media (min-width: 541px) {
  .sidebar-menu,
  .hamburger {
    display: none;
  }
  .desktop-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    gap: 24px;
    margin: 0;
    padding: 0;
  }
  .desktop-menu li a {
    display: block;
    padding: 6px 10px;
    text-decoration: none;
    color: #dbc179;
    font-weight: bold;
    font-size: 18px;
    font-family: "Akaya Kanadaka", system-ui;
  }
  .desktop-menu li a:hover {
    color: #a0c5a5;
  }
}

/* ====== Móvil (≤768px) ====== */
@media (max-width: 768px) {
  /* 1) Header estático bajo la cabecera, transparente, logo izq, hamburguesa der */
  header {
    position: sticky !important;
    top: 0;
    background: #fff !important;        /* blanco sólido */
    border-bottom: none !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    z-index: 1000;
  
  }
  /* Mostrar la cabecera 2000×500 en móvil */
  #visual-uno {
    display: block !important;
    width: 100%;
    margin: 0 auto 1rem;
    padding: 0;
  }
  #visual-uno img {
    width: 100%;
    height: auto;
    display: block;
  }
  /* Logo pequeño */
  #logo img {
    width: 40px !important;
    height: auto;
  }
  /* Ocultar sólo el menú desktop, y dejar el UL del sidebar intacto */
.desktop-menu {
  display: none !important;
}

/* Asegurar que el UL del sidebar siga visible */
#mobile-menu ul {
  display: block !important;
}

  .hamburger {
    display: block !important;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #dbc179;
    margin: 0;
  }

  /* 2) Sidebar (menú lateral) */
  .sidebar-menu {
    position: fixed;
    top: 0;
    right: -100% !important;
    width: 70%;
    height: 100vh;
    background: #dbc179;
    transition: right 0.3s ease;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding-top: 3rem;
  }
  .sidebar-menu.show {
    right: 0 !important;
  }
  .sidebar-menu .menu-logo {
    margin-bottom: 1rem;
  }
  .sidebar-menu li {
    width: 100%;
    margin: 0.5rem 0;
  }
  .sidebar-menu li a {
    display: block;
    width: 100%;
    padding: 1rem 0;
    color: white;
    font-weight: bold;
  }

  /* 3) Secciones apiladas salvo visual-seis */
  .centrado {
    width: 100%;
    padding: 0 1rem;
    margin: auto;
  }
  .imagen,
  .imagen-azul,
  .visual-blanco,
  .visual-azul,
  .visual-azul-blanco,
  .bloque-azul {
    width: 100% !important;
    float: none !important;
    margin: 1rem auto !important;
    padding: 0.5rem !important;
  }

  
   #visual-dos .visual-principal {
    margin-bottom: 5rem;
  }
  #visual-tres .visual-blanco h1 {
    margin-top: 5rem !important;
  }


/* 4) Visual-seis en móvil: apilar en vertical */
#visual-seis .centrado {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.5rem;       /* menos separación */
  padding: 0 1rem;
  box-sizing: border-box;
}
/* Cada bloque ocupa el 100% */
#visual-seis #descuento,
#visual-seis #contacto {
  width: 100% !important;
  margin: 0 !important;
  padding: 0.5rem !important;
}
/* Ajustes tipográficos (igual que antes) */
#visual-seis #descuento h1,
#visual-seis #contacto h1 {
  font-size: 1rem !important;
  margin-bottom: 0.5rem;
}
#visual-seis #descuento p,
#visual-seis #contacto p {
  font-size: 0.85rem !important;
  line-height: 1.3;
}

}



  /* 5) Imágenes y vídeos responsivos */
  img,
  iframe {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0.5rem auto;
  }

  /* 6) Tipografía */
  p {
    margin: 0.5rem 0;
    font-size: 1rem;
    line-height: 1.4;
  }
  .visual-principal p {
    font-size: 1.5rem;
    margin: 1rem 0;
  }


/* ====== Extras para muy pequeños (≤540px) ====== */
@media (max-width: 540px) {
  .visual-seis #descuento,
  .visual-seis #contacto {
    width: 100% !important; /* apilar en pantallas muy pequeñas */
  }
  .visual-principal p {
    font-size: 1.2rem;
  }
  .bloque-azul {
    font-size: 0.8rem;
  }
  /* 1) Centrar “¡CEREMONIA!” */
  #visual-tres .visual-blanco h1 {
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* 2) Botones de menú (Cocktail, Menú infantil, Menú adultos) más pequeños */
  #visual-cinco .bloque-azul {
    max-width: 180px !important;    /* ancho más reducido */
    margin: 1rem auto !important;   /* centrado y separación */
    padding: 0.4rem !important;     /* menos padding */
  }
  #visual-cinco .bloque-azul h3 a {
    font-size: 0.85rem !important;  /* texto aún más pequeño */
  }
/* ====== Espaciado uniforme entre título y texto ====== */
#visual-tres .visual-blanco h1,
#visual-cuatro .visual-azul-blanco h1 {
  margin-bottom: 0.5rem !important;   /* espacio bajo el h1 */
}

#visual-tres .visual-blanco p,
#visual-cuatro .visual-azul-blanco p {
  margin-top: 0 !important;           /* eliminar margen superior */
  margin-bottom: 1rem !important;     /* espacio bajo el párrafo */
  line-height: 1.5;                   /* asegurar buena legibilidad */
}

 #visual-cinco {
    padding-bottom: 2rem; /* más espacio al final en móvil */
  }
.hamburger {
    position: absolute !important;
    top: 50% !important;
    right: 1rem !important;
    transform: translateY(-50%) !important;
    /* deja el tamaño y estilo que ya tienes */
  }
/* ====== Enlaces del sidebar en blanco ====== */
.sidebar-menu li a {
  color: #fff !important;
}


}