:root {
  --color-bg: #fff9f7;
  --color-primary: #d8a48f; /* pastel marrón claro */
  --color-secondary: #f1d4c9; /* pastel rosado claro */
  --color-accent: #8c6a53; /* marrón medio */
  --color-text: #4a3c31; /* marrón oscuro */
  --color-shadow: rgba(140, 106, 83, 0.3);
}

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  /*background-color: #1f1f1f; */
  color: #fff;
  color: #8B2500;

}

/* ========== HEADER FIJO TRANSLÚCIDO ========== */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;  
/*background-color: rgba(123, 63, 0, 0.6); */

background-color: rgba(255, 255, 255, 0.05); /* totalmente transparente */

  backdrop-filter: blur(6px);
  z-index: 1000;
}

/* ========== FOOTER FIJO ========== */
footer {
 /* position: fixed; */
  bottom: 0;
  left: 0;
  width: 100%;
  
  background-color: rgba(0, 0, 0, 1); /* totalmente transparente */

  z-index: 1000;
  padding: 1rem;
  text-align: center;
  
}

footer h4 {
	color: white;              /* Contraste para el texto */
	font-size: 1.2rem;
	margin: 8px;
	margin-bottom: 12px;
	font-family: 'Roboto', sans-serif;
  
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8), -2px 0px 8px rgba(255, 255, 255, 0.6), 5px -4px 10px rgba(139, 37, 0, 0.8);
		
	background-color: #1E90FF; /* Azul brillante */
	border-radius: 6px;        /* Bordes redondeados (opcional) */
	padding: 4px;
}


/* Agregar padding al contenido para evitar solapamiento */
main {
  padding-top: 0px; /* ajuste según la altura real del header */
  padding-bottom: 0px; /* para el footer */
}

/* ===== */

/* Reset básico */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Variables colores pastel inspirados en brasas/carnes */


/* Contenedor del carrusel */
.carousel {
  position: relative;
  height: 100vh; /* pantalla completa vertical */
  
  min-height: 100vh; /* 👍 Permite crecer si el contenido lo necesita */

  background-color: var(--color-bg);
  
  overflow: hidden;
  
 /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
  
  font-family: 'Roboto', sans-serif;
}


/* ========== CARRUSEL ========== */
.carousel {
  position: relative;
  /* overflow: hidden; */
  
  overflow-x: hidden;
  overflow-y: auto;
  
}

.carousel-track-container {
  overflow: hidden;
  width: 100%;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  min-width: 100%;
  position: relative;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-slide img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  transition: transform 1.5s ease, opacity 1s ease;
}

/* Flechas navegación */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8rem;
  
  font-family: 'Roboto', sans-serif;
  
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
  color: white;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  
  transition: background-color 0.3s ease;
}

.carousel-btn:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.carousel-btn.prev {
  left: 10px;
}

.carousel-btn.next {
  right: 10px;
}

/* Indicadores si querés estilizarlos también */
.carousel-indicator {
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  margin: 0 5px;
  border: none;
}

.carousel-indicator.active {
  background-color: #ff7043;
}

/* Posicionamiento del overlay superior izquierdo */
.slide-overlay {
  position: absolute;
  top: 140px;
  left: 30px;
  color: white;
  
  font-family: 'Roboto', sans-serif;
 
  z-index: 3;
}

/* H1 principal */
.titulo-principal {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 0.8rem;
  margin-left: 2.5rem;
  color: #ffffff;
  
  text-shadow:
    -2px 0px 0px rgba(0, 0, 0, 0.6),   /* sombra izquierda negra fuerte */
    0px 4px 0px rgba(0, 0, 0, 0.7),      /* sombra abajo negra fuerte */
    4px 0px 10px rgba(255, 255, 255, 0.6), /* luz difuminada derecha */
    0px -6px 12px rgba(255, 255, 255, 0.4), /* luz arriba */
    -4px 4px 10px rgba(255, 255, 255, 0.3), /* luz inferior izquierda */
    2px 2px 5px rgba(0, 0, 0, 0.8),    /* resalte leve negro */
    0 0 10px rgba(255, 255, 255, 0.9); /* resplandor blanco exterior */
	
}

/* Subtítulo */
.subtitulo {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 2.2rem;
  margin-left: 30px;
  color: #f8f8f8;
  
  text-shadow:
	-2px 0px 0px rgba(0, 0, 0, 0.6),   /* sombra izquierda negra fuerte */
    0px 3px 0px rgba(0, 0, 0, 0.6),      /* sombra abajo negra fuerte */
    4px 0px 10px rgba(255, 255, 255, 0.6), /* luz difuminada derecha */
    -4px 4px 10px rgba(255, 255, 255, 0.3), /* luz inferior izquierda */
    2px 2px 5px rgba(0, 0, 0, 0.8),    /* resalte leve negro */
    0 0 10px rgba(255, 255, 255, 0.9); /* resplandor blanco exterior */
	
}

/* Frase final */
.frase {
  font-size: 1.2rem;
  font-weight: 500;
  text-align: left;
  max-width: 100%;
  margin: 3rem auto 0 auto;
    margin-left: 20px;

  padding-left: 10px;
  color: #f8f8f8;
  opacity: 0.85;
  line-height: 1.6;
  margin-bottom: 2rem;
  
  text-shadow:
    0px 2px 0px rgba(0, 0, 0, 0.6),      /* sombra abajo negra fuerte */
    4px 0px 10px rgba(255, 255, 255, 0.6), /* luz difuminada derecha */
    -4px 4px 10px rgba(255, 255, 255, 0.3), /* luz inferior izquierda */
    2px 2px 5px rgba(0, 0, 0, 0.8),    /* resalte leve negro */
    0 0 10px rgba(255, 255, 255, 0.9); /* resplandor blanco exterior */
  
}

/* Botón de reserva centrado abajo */
.menu-btn {
	/*position: absolute; */
	max-width: 40%;
	
    margin-left: 45px;
	padding: 10px 15px;
	
	background-color: rgba(255,112,67,0.4);
	backdrop-filter: blur(10px);
		
	color: white;
	text-decoration: none;
	border-radius: 15px;
	border: solid white 3px;
	font-weight: 900;
	text-align: center;
	font-family: 'Roboto', sans-serif;
 
	z-index: 8;
	 
	text-transform: uppercase; /* mayúsculas */
	letter-spacing: 1.5px; /* espacio entre letras */
	transition: color 0.7s ease, text-shadow 0.3s ease, border-color 0.3s, box-shadow 0.8s;

	
	/* background-color: rgba(255, 255, 255, 0.2); /* totalmente transparente */
	
	box-shadow:
    -4px 0px 0px 0px rgba(0, 0, 0, 0.7),    /* sombra izquierda negra fuerte */
    0px 4px 0px 0px rgba(0, 0, 0, 0.7),     /* sombra abajo negra fuerte */
    4px 0px 10px 0px rgba(255, 255, 255, 0.4),  /* luz blanca derecha difuminada */
    0px -6px 12px 0px rgba(255, 255, 255, 0.3), /* luz blanca arriba difuminada */
	 -4px 4px 10px 0px rgba(255, 255, 255, 0.2); /* luz blanca vértice abajo izquierda*/
	 
	text-shadow:
	1px 1px 8px rgba(0, 0, 0, 0.7),  /* sombra negra para contraste */
	0 0 15px rgba(255, 255, 255, 0.8), /* resplandor blanco suave */
	-3px 0px 0px rgba(0, 0, 0, 0.7),    /* sombra izquierda negra fuerte */
	0px 3px 0px rgba(0, 0, 0, 0.7),     /* sombra abajo negra fuerte */
	2px 0px 10px rgba(255, 255, 255, 0.4);  /* luz blanca derecha difuminada */	 
}

/* Efectos de pulsado del boton*/
.menu-btn:active,
.menu-btn:focus,
.menu-btn:hover { /* se activa con teclados/lectores de pantalla */
	font-weight: 750; /* negrita */
	letter-spacing: 1.3px; /* espacio entre letras */
	transform: translateX(-50%) scale(0.9); /* <-- ambas transform juntas */
	
	/* transform: scale(0.7); /* <-- ambas transform juntas */

	box-shadow:
	inset 0 2px 5px rgba(0,0,0,0.40),  /* sombra interior – se hunde */
	0 1px 2px rgba(0,0,0,0.50),     /* sombra exterior leve */
	-2px 0 0 rgba(0,0,0,0.50),     /* sombra izquierda reducida */
	0 2px 0 rgba(0,0,0,0.50);      /* sombra inferior reducida */

	background-color: rgba(255,255,255,0.40);  /* un poco más oscuro */
  
	color: #ff7043;
	border-color: #ff7043;
  
	box-shadow:
    0 6px 18px 0 rgba(0,0,0,0.45),
    0 2px 0 0 rgba(255,255,255,0.9),
    0 0 24px 0 rgba(255,255,255,0.4);
  
	text-shadow:
    2px 2px 5px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(255, 255, 255, 0.9);
}


/* Slide container full screen y superposición */
.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90vh;
  opacity: 0;
  transition: opacity 1s ease;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1.5s ease;
}

/* Posicionamiento general */
.carousel {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* Flechas más visibles */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-family: 'Roboto', sans-serif;
  
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
  color: white;
  padding: 0.6rem;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: background-color 0.3s ease;
}

.carousel-btn.prev { left: 15px; }
.carousel-btn.next { right: 15px; }

.carousel-btn:hover {
  background-color: rgba(0, 0, 0, 0.7);
}


/* General resets */
body {
  margin: 0;
  /* font-family: 'Segoe UI', Arial, sans-serif; */
  font-family: 'Roboto', sans-serif;
}

/* Header layout */
.header-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.4rem 1rem;
  
  background-color: rgba(123, 63, 0, 0.01);

	background-color: rgba(255, 255, 255, 0); /* totalmente transparente */
  /* O usa rgba(255, 255, 255, 0.6) si quieres ver un fondo blanco translúcido */
  
  position: relative;
  z-index: 1002;
}

.logo {
  height: 75px;
  margin-right: auto;
  
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); /* Sombra sutil */
  padding: 6px 4px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
  border-radius: 24px;
}

/* Hamburger always visible, right-aligned */
.hamburger {
  font-size: 2rem;
  background: none;
  border: none;
  color: #8B2500;
  cursor: pointer;
  z-index: 1003;
  margin-left: auto;
  font-family: 'Roboto', sans-serif;
  
  text-shadow: 1px 1px 2px black, 0px -2px 4px white;
  
}

/* ========== MENÚ HAMBURGUESA ========== */

.mobile-nav.open {
  display: block;
}

/* Mobile nav (hidden by default) */
.mobile-nav {
	border-radius: 10px;
	position: fixed;
	top: 0;
	right: -65vw;
	width: 60vw;
	max-width: 400px;
	max-height: 75vh;
	/*height: 50vh;*/
  /* background: #F5F5DC; */
    background-color: rgba(255, 255, 255, 0.7); /* totalmente transparente */
  
  box-shadow: -2px 0 10px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.3), 0 6px 15px rgba(218, 165, 32, 0.5);
  transition: right 0.6s cubic-bezier(.77,0,.18,1);
  z-index: 1004;
  display: flex;
  flex-direction: column;
  padding-top: 0.4rem;
  overflow-y: auto;
  
	backdrop-filter: blur(60px); /* opcional: efecto frosted glass */
	
	background-color: rgba(255, 255, 255, 0.75); /* semi-transparente */
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px); /* importante */
	
}

.mobile-nav.open {
  right: 10px;
  margin-top: 20px;
  backdrop-filter: blur(60px); /* opcional: efecto frosted glass */
}

.mobile-nav ul {
  list-style: none;
  padding: 0 1rem;
  margin: 15px 0;
}

.mobile-nav li {
  margin-bottom: 0.5rem;
  margin-left: 0.2rem;
  
}

nav ul li a {
  color: white; /* o el color que prefieras */
  
}

.mobile-nav a {
  color: #8B2500;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  display: block;
  transition: color 0.5s;
  font-family: 'Roboto', sans-serif;
  text-shadow: 1px 1px 2px black, 3px 1px 2px white;
  padding-left: 5px;
  letter-spacing: 1.5px;

}

.mobile-nav a:hover {
  color: #B22222;
}

li.xxx {
  position: absolute;
  top: 3px;
  right: 4px;
  
  /* border: 1px solid black; */
   padding: 9px 9px;
  
  display: inline-block; /* o block, según tu diseño */
  border-radius: 8px;     /* opcional: esquinas redondeadas */
  background-color: rgba(255, 255, 255, 0.9); /* opcional */
  
}

li.xxx a {
  font-size: 22px;
  text-decoration: none;
  color: black;
  text-shadow: rgba(255, 255, 255, 0.5);
  
  text-shadow:
		1px 1px 2px rgba(0, 0, 0, 0.6),  /* sombra negra para contraste */
		0 0 5px rgba(255, 255, 255, 0.8), /* resplandor blanco suave */
		-4px 0px 0px 0px rgba(0, 0, 0, 0.6),    /* sombra izquierda negra fuerte */
		0px 4px 0px 0px rgba(0, 0, 0, 0.6),     /* sombra abajo negra fuerte */
		4px 0px 10px 0px rgba(255, 255, 255, 0.4);  /* luz blanca derecha difuminada */
}


 .siguenos {
  margin-top: 10px;
  font-weight: bold;
  color: #333;
  padding-left: 12px;
}

.social-icons a {
  margin: 2px 5px;
  padding: 0px 0px;
  font-size: 1.2rem;
  color: #003366;
  transition: color 0.5s;
  color: #8B2500;
  border-radius: 10px;
	/* border: 2px solid white;*/

}

.social-icons {
  display: flex;
  justify-content: center;
  background-color: rgba(255, 255, 255, 1); /* translúcido */
  border-radius: 10px;
  padding: 6px 30px;
  
  box-shadow:
		1px 1px 2px rgba(0, 0, 0, 0.6),  /* sombra negra para contraste */
		0 0 5px rgba(255, 255, 255, 0.8), /* resplandor blanco suave */
		-4px 0px 0px 0px rgba(0, 0, 0, 0.6),    /* sombra izquierda negra fuerte */
		0px 4px 0px 0px rgba(0, 0, 0, 0.6),     /* sombra abajo negra fuerte */
		4px 0px 10px 0px rgba(255, 255, 255, 0.4);  /* luz blanca derecha difuminada */
}


/* Overlay */
.menu-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 50vw; height: 70vh;
  background: rgba(0,0,0,0.45);
  z-index: 1001;
  transition: opacity 0.4s;
  opacity: 0;
}

.menu-overlay.active {
  display: block;
  opacity: 0.8;
}

/* Responsive: nothing changes, hamburger always visible */
@media (min-width: 700px) {
  .mobile-nav {
    max-width: 400px;
    width: 70vw;
  }
}


/* ========  boton reservas =============== */
.slide-btn {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  
  /* background-color: transparent;      /* Fondo transparente */
  
  color: white;                       /* Texto blanco */
  padding: 0.7rem 1.5rem;
  
  border: 3px solid white;            /* Borde grueso blanco */
	
  font-weight: 900; /* negrita */
  text-transform: uppercase; /* mayúsculas */
  letter-spacing: 1.5px; /* espacio entre letras */
	
  transition: color 0.7s ease, text-shadow 0.3s ease, border-color 0.3s, box-shadow 0.8s;
  
  width: 60%;
    
  text-decoration: none;
  border-radius: 16px;  
  text-align: center;  
  font-family: 'Roboto', sans-serif;

  z-index: 3;
	
	background-color: rgba(255,112,67,0.4);
	backdrop-filter: blur(10px);
	
	box-shadow:
		-4px 0px 0px 0px rgba(0, 0, 0, 0.7),    /* sombra izquierda negra fuerte */
		0px 4px 0px 0px rgba(0, 0, 0, 0.7),     /* sombra abajo negra fuerte */
		4px 0px 10px 0px rgba(255, 255, 255, 0.4),  /* luz blanca derecha difuminada */
		0px -6px 12px 0px rgba(255, 255, 255, 0.3), /* luz blanca arriba difuminada */
		-4px 4px 10px 0px rgba(255, 255, 255, 0.2); /* luz blanca vértice abajo izquierda*/
	
	text-shadow:
	1px 1px 8px rgba(0, 0, 0, 0.7),  /* sombra negra para contraste */
	0 0 15px rgba(255, 255, 255, 0.8), /* resplandor blanco suave */
	-3px 0px 0px rgba(0, 0, 0, 0.7),    /* sombra izquierda negra fuerte */
	0px 3px 0px rgba(0, 0, 0, 0.7),     /* sombra abajo negra fuerte */
	2px 0px 10px rgba(255, 255, 255, 0.4);  /* luz blanca derecha difuminada */	  
}


/* Efecto hover para destacar el borde */
.slide-btn:hover, .slide-btn:focus, .slide-btn:active {
	font-weight: 800; /* negrita */
	transform: translateX(-50%) scale(0.90); /* <-- ambas transform juntas */

/*transform: scale(0.85);	*/
  color: #ff7043;
  border-color: #ff7043;
  box-shadow:
    0 6px 18px 0 rgba(0,0,0,0.45),
    0 2px 0 0 rgba(255,255,255,0.9),
    0 0 24px 0 rgba(255,255,255,0.4);
  
  text-shadow:
    2px 2px 5px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(255, 255, 255, 0.9);
	
	background-color: rgba(255,112,77,0.6);
	background-color: rgba(255,255,255,0.40);  /* un poco más oscuro */
	
}


/* ============ ========== */

/* Botón de reserva centrado abajo */
inicio.reserva-btn {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ff7043;
  color: white;
  padding: 0.7rem 1.5rem;
  text-decoration: none;
  border-radius: 20px;
  font-weight: bold;
  font-family: 'Roboto', sans-serif;
/* box-shadow: 2px 2px 5px rgba(0,0,0,0.3), 20px 28px -5px rgba(0,0,200,0.3); */

/* box-shadow:
    0 4px 12px 0 rgba(0,0,0,0.35),    /* Sombra negra principal, difusa */
    /*0 1px 0 0 rgba(255,255,255,0.7), */ /* Sombra blanca superior, nítida */
    /*0 0 16px 0 rgba(255,255,255,0.3);*/ /* Resplandor blanco suave */ 

box-shadow:
  0 4px 12px 0 rgba(0,0,0,0.35),
  0 1px 0 0 rgba(255,255,255,0.7),
  0 0 16px 0 rgba(255,255,255,0.3),
  0 0 8px 2px rgba(255,112,67,0.25); /* Resplandor color naranja suave */

  z-index: 5;
}

.inicio {
  text-align: center;  
   max-width: 90%;  /* o 90% si querés más fluido */
  margin: 0 auto;
  padding: 2rem 1rem;
  
}

.reserva2-btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #7b3f00; /* Marrón tipo parrilla */
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  border: none;
  border-radius: 8px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
  transition: background-color 0.3s, transform 0.2s;
  margin-top: 20px;
  background: linear-gradient(to bottom right, #c1440e, #f7c873);
  
}


.reserva2-btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #7b3f00; /* Marrón tipo parrilla */
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  border: none;
  border-radius: 8px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
  transition: background-color 0.3s, transform 0.2s;
  margin-top: 20px;
}

.reserva2-btn:hover,
.reserva2-btn:focus {
  background-color: #5c2f00;
  transform: scale(0.85);
}

.parallax-section {
  background-image: url('../img/fuego4.jpg'); /* Tu imagen de fondo */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  padding: 150px 0;
  color: white;
  text-align: center;
}


.section-ubicacion {
  padding: 2rem 1rem;
  background: #fff;
  margin: 15px;
  padding: 15px;
  text-align: center;  
  max-width: 100%;  /* o 90% si querés más fluido */
}

.section-ubicacion p{
	font-weight: 700;
	text-shadow:
		0 3px 6px rgba(0,0,0,0.5),
		0 5px 8px rgba(218, 165, 32, 0.8),
		2px 2px 4px rgba(0, 0, 0, 0.8),
		0 1px 6px rgba(255, 255, 255, 0.9);
}

.parallax-section h2 {
   
	text-shadow:
		-2px 0 10px rgba(0,0,0,0.3),
		0 4px 10px rgba(0,0,0,0.5),
		0 6px 12px rgba(218, 165, 32, 0.8),
		2px 2px 5px rgba(0, 0, 0, 0.8),
		0 0 10px rgba(255, 255, 255, 0.9),
		0 7px 14px rgba(218, 165, 32, 0.6); /* Luz dorada desde abajo (color oro) */
}


/* efecto Book pdf */
/* ====================*/

.book-container {
  width: 100%;
  max-width: 500px;
  margin: 2rem auto;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

.book {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  perspective: 1000px;
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform-origin: left;
  transition: transform 1s ease;
  /* z-index: 10; */
}

.page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Página volteada */
.page.flipped {
  transform: rotateY(-180deg);
  /* z-index: 0; */
}

/* Botones de navegación */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  font-size: 2rem;
  color: white;
  padding: 10px 14px;
  cursor: pointer;
  z-index: 100;
  border-radius: 50%;
}

#prevBtn {
  left: -10px;
}

#nextBtn {
  right: -10px;
}

/* Para pantallas más grandes */
/* @media (min-width: 768px) {
  .book-container {
    max-width: 700px;
  }
} */


/* ======= HTML - NOSOTROS  =======================*/
/*=======================================================*/

.section-nosotros, .section-menu, .section-ubicacion, .section-formulario {
  padding: 2rem 1rem;
  background: #fff;
}
.section-nosotros .contenedor {
  max-width: 800px;
  margin: 0px auto;
  margin-top: 65px;
  margin-bottom: 20px;
  text-align: center;

}

.section-nosotros {
	background: url('../img/fondo-general3.jpg') no-repeat center center;
	background-size: cover; /* para cubrir toda el área */
	
	text-shadow:
    2px 1px 0px rgba(0, 0, 0, 0.8),      /* sombra abajo negra fuerte */
    4px 0px 10px rgba(255, 255, 255, 0.6), /* luz difuminada derecha */
    -4px 4px 10px rgba(255, 255, 255, 0.3); /* luz inferior izquierda */
	
}

.section-nosotros p{
	color: white;
	
	padding-top: 8px;
	padding-bottom: 5px;
	
	text-shadow:
    0px 2px 0px rgba(0, 0, 0, 0.8),      /* sombra abajo negra fuerte */
	-2px 1px 0px rgba(0, 0, 0, 0.8),      /* sombra abajo negra fuerte */
	2px -1px 0px rgba(0, 0, 0, 0.8),      /* sombra abajo negra fuerte */
    4px 5px 10px rgba(255, 255, 255, 0.3), /* luz inferior derecha */
    2px 2px 5px rgba(0, 0, 0, 0.8);    /* resalte leve negro */
    /*0 0 10px rgba(255, 255, 255, 0.9); /* resplandor blanco exterior */
	
	font-family: 'Roboto', Arial, sans-serif;
	  font-family: 'Roboto', sans-serif;
	  margin-top: 12px;


}

.imagenes-nosotros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 1rem 0;
  
 filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); /* Sombra sutil */ 
}
.imagenes-nosotros img { max-width: 90%; height: auto; border-radius: 12px; }
.carta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.plato { background: #f9f9f9; padding: 1rem; border-radius: 8px; width: 100%; max-width: 300px; }
.mapa { margin: 1rem 0; border-radius: 8px; overflow: hidden; }

.imagenes-nosotros img{
	
	box-shadow:
    2px 2px 0px rgba(0, 0, 0, 0.9),      /* sombra abajo negra fuerte */
	-2px 1px 6px rgba(0, 0, 0, 0.8),      /* sombra abajo negra fuerte */
    4px 5px 12px rgba(255, 255, 255, 0.8), /* luz inferior derecha */
    4px 12px 52px rgba(255, 255, 255, 0.8); /* luz inferior derecha */
}

/* ================= */

.descarga {
	display: flex;
	display: block;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	margin: 20px auto; 
}
.boton-descarga {
  display: flex;
  display: inline-block;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  width: 40%;
  max-width: 350px;
  margin: 15px 20px;
  
  padding: 10px 16px;
  background: linear-gradient(90deg, #7c3f00 0%, #ff7f50 100%);
  
  color: #fff8e1;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: bold;
  
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 4px 18px 0 rgba(139,69,19,0.20), 0 1.5px 6px 0 rgba(0,0,0,0.3);
  border: 1px solid #d35400;
  
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 2px #6b2f13, 0 0 6px #ffbe76;
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s;
  cursor: pointer;
  
  background: linear-gradient(to bottom right, #c1440e, #f7c873);
}


.boton-descarga:active,
.boton-descarga:hover {
  transform: scale(0.97);
  box-shadow: 0 2px 8px 0 rgba(139,69,19,0.25), 0 1px 3px 0 rgba(0,0,0,0.30);
}

/**/
/**/

.book-container {
  position: relative;
  width: 90%;
  max-width: 500px;
  height: 70vh;
  margin: 2rem auto;
  overflow: hidden;
  /* background-color: rgba(0, 0, 0, 0.7); */
  background: linear-gradient(90deg, #7c3f00 0%, #ff7f50 100%);
  
}

.book {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1200px;
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform-origin: left;
  transition: transform 1s ease;
}

.page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  
 /**/
  object-fit: contain;
  object-position: center;
  border-radius: 12px;

}

/* Flip effect */
.page.flipped {
  transform: rotateY(-180deg);
}

/* Z-index fijo para cada página */
.page1 { z-index: 8; }
.page2 { z-index: 7; }
.page3 { z-index: 6; }
.page4 { z-index: 5; }
.page5 { z-index: 4; }
.page6 { z-index: 3; }
.page7 { z-index: 2; }
.page8 { z-index: 1; }

/* Botones */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  font-size: 2rem;
  color: white;
  padding: 10px;
  cursor: pointer;
  z-index: 100;
  border-radius: 50%;
}

#prevBtn { left: 10px; }
#nextBtn { right: 10px; }

/* ====================================== */

/* =======   Efecto transiciones para los scroll =============================== */
.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}
/* ====================================== */


/* ======= HTML - MENU DEL DIA  =======================*/
/*=======================================================*/

.menuDia {
	background: url('../img/menu2.jpg') no-repeat center center;
	background-size: cover; /* para cubrir toda el área */
	
	text-shadow:
    2px 1px 0px rgba(0, 0, 0, 0.8),      /* sombra abajo negra fuerte */
    4px 0px 10px rgba(255, 255, 255, 0.6), /* luz difuminada derecha */
    -4px 4px 10px rgba(255, 255, 255, 0.3); /* luz inferior izquierda */
}

.btn-menu-dia {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  background-color: rgba(255, 111, 0, 0.25); /* naranja translúcido */
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 25px;
  text-decoration: none;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: all 0.3s ease-in-out;
}

.btn-menu-dia:hover {
  background-color: rgba(255, 111, 0, 0.5);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  transform: scale(1.05);
}

/*=======================================================*/


/* CSS para RESERVAS*/

.reserva {
	background: url('../img/reservaMesa.jpg') no-repeat center center;
	background-size: cover; /* para cubrir toda el área */
	
	text-shadow:
    2px 1px 0px rgba(0, 0, 0, 0.8),      /* sombra abajo negra fuerte */
    4px 0px 10px rgba(255, 255, 255, 0.6), /* luz difuminada derecha */
    -4px 4px 10px rgba(255, 255, 255, 0.3); /* luz inferior izquierda */
 
}

.reservaForm {
	background-color: rgba(255, 255, 255, 0.15); /* totalmente transparente */
	backdrop-filter: blur(6px);
	margin: 15px;
	padding: 12px 8px;
	
	border: var(--borde);
	border-radius: 16px;
	font-size: 1.1rem;
	
}	
	
.form-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  
}

.form-group {
  margin-bottom: 16px;
}

.form-group.half {
  flex: 1 1 48%;
}

.form-group.center {
  display: flex;
  justify-content: center;
}

label {
  display: block;
  margin: 6px 8px;
  
  font-weight: 400;
  color: var(--color-acento);
}

label span {
  color: var(--color-principal);
  font-weight: bold;
}

input, select {
  width: 90%;
  padding: 7px 10px;
  margin: 3px 6px;
  border: var(--borde);
  border-radius: 6px;
  font-size: 0.95rem;
  text-align: left;
  
  background: #fffdf8;
  color: var(--color-texto);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,8);
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus, select:focus {
  border-color: var(--color-principal);
  box-shadow: 0 0 0 3px rgba(193, 68, 14, 0.15);
  outline: none;
}

small {
  display: block;
  margin-top: 4px;
  font-size: 0.95rem;
  font-weight: 600;
}

select option[disabled] {
  color: #999;
  font-style: italic;
  font-weight: normal;
}

button[type="submit"] {
  width: 60%;
  max-width: 260px;
  background: var(--color-boton);
  color: #fff;
  padding: 12px 20px;
  border: none;
  border-radius: 14px;
  
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  
  transition: background 0.3s ease, transform 0.15s ease;
  box-shadow: 0 6px 16px rgba(166, 60, 6, 0.2);
  letter-spacing: 1px;
  
  display: inline-block;
  padding: 0.9rem 1.6rem;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  background-color: rgba(255, 111, 0, .65); /* naranja translúcido */
  backdrop-filter: blur(40px);
  
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 25px;
  text-decoration: none;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0,0,0,2);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3), 1px 1px 3px rgba(0,0,0,5);
  transition: all 0.3s ease-in-out;
  
  margin-top: 25px;
  
}

button[type="submit"]:hover {
  background: var(--color-boton-hover);
  /* color: var(--color-acento); */
  transform: translateY(-1px);
  background-color: rgba(255, 111, 0, 0.5);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  transform: scale(1.06);
}

@media (max-width: 500px) {
  .form-row {
    flex-direction: column;
  }

  .form-group.half {
    flex: 1 1 100%;
  }

  button[type="submit"] {
    width: 100%;
  }
}

.mensaje-confirmacion {
	margin: 20px auto;
	padding: 16px 24px;
	max-width: 80%;
	background-color: rgba(255, 111, 0, 0.45);
	border: 2px solid #34c759;
	border-radius: 12px;
	text-align: center;
	font-weight: bold;
	color: white; /* Tu color personalizado */
	box-shadow: 0 4px 12px rgba(0, 128, 0, 0.2);
	font-size: 1.05rem;
	animation: fadeIn 0.6s ease forwards;
	display: block;
	backdrop-filter: blur(6px);
}

.oculto {
  display: none;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =============*/

#botonReset button {
  background-color: #f7c873;
  color: #3b2c1a;
  border: none;
  padding: 10px 15px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.4s ease, transform 0.4s ease;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.4);
  margin-top: 15px;
}

#botonReset button:hover {
  background-color: #ffc55c;
  transform: scale(1.05);
}

/* =======================*/

#btnFlotanteReservas {
  position: fixed;
  top: 65%;
  right: 0;
  transform: translateY(-50%);
  background-color: #c1440e;
  color: white;
  padding: 14px 20px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  font-weight: bold;
  letter-spacing: 1.1px;
  text-decoration: none;
  box-shadow: -3px 3px 14px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease, transform 0.3s ease;
  z-index: 1200;
}

#btnFlotanteReservas:hover {
  background-color: #ffb347;
  color: #3b2c1a;
  transform: translateY(-50%) scale(1.05);
}

.reserva-btn {
	
	right: 0px;
	display: inline-block;

	background: linear-gradient(to bottom right, #c1440e, #f7c873);

	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 0.9rem;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	padding: 7px 7px 7px 12px;
  
	border-radius: 14px 0px 0px 14px;
	border-color: 2px solid #007cf0;
  
	box-shadow:
		0 6px 16px rgba(0, 0, 0, 0.2),     /* sombra suave */
		0 3px 10px rgba(0, 0, 0, 0.7),     /* sombra más marcada */
		0 0 12px rgba(0, 124, 240, 0.6);   /* halo azul vibrante */

	text-shadow:
		0 6px 16px rgba(0, 0, 0, 0.2),     /* sombra suave */
		0 3px 10px rgba(0, 0, 0, 0.7),     /* sombra más marcada */
		0 0 12px rgba(0, 124, 240, 0.6);   /* halo azul vibrante */

	z-index: 1200;
	transition: transform 0.4s ease, background 0.5s ease;
}

.reserva-btn:hover, .reserva-btn:focus   {
	transform: scale(1.02);
	transform: scale(1.08) translateY(4px);
	
	background: linear-gradient(to bottom right,  #007cf0, #fff);
	color: #fff;
	
  transform: scale(1.05) skew(-1deg, 1deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 10px rgba(0, 124, 240, 0.5);

}

/* Defino posición inicial del Boton Reservas "Flotante" */


.flteMenu {
	position: fixed;
	top: 25%;
	
} 

.flteEspecial,
.flteNosotros {
	position: fixed;
	top: 70%;
}

/* =========  HTML Especialidades  ==========================
/* ===============*/ 

.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.especialidades-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-top: 0.9rem;
  
}

.especialidad-descripcion {
	
	text-align: center;
	padding: 8px 12px;

	text-align: center;
	max-width: 600px;
	margin-top: 0.8rem;
	border-radius: 14px;

	box-shadow: 3px 5px 22px 7px rgba(255,255,255,0.7);
	-webkit-box-shadow: 3px 5px 22px 7px rgba(255,255,255,0.7);
	-moz-box-shadow: 3px 5px 22px 7px rgba(255,255,255,0.7);
	
	background-color: rgba(245, 245, 245, 0.05); /* totalmente transparente */
	backdrop-filter: blur(18px);
  
	color: white;
	
	border: rgba(255, 255, 255, 0.7) solid 1px;

	letter-spacing: 0.8px;               /* separación sutil entre letras */
	line-height: 1.2;                    /* buena lectura para párrafos */
	font-size: 1rem;

	text-shadow:
		6px 2px 9px rgba(0,0,0,0.94),
		-5px 3px 5px rgba(0,0,0,0.94),
		-1px -2px 5px rgba(0,0,0,0.94);
}


.tab-btn {
	display: flex;
	display: inline-block;
	align-items: center;
	justify-content: center;
	gap: 0.15em;
	width: 28%;
	max-width: 180px;
	margin: 8px 6px;
	padding: 6px 1px;
  
	color: #fff8e1;
	font-family: 'Roboto', sans-serif;
	font-size: 0.8rem;
	font-weight: bold;
  
	border-radius: 8px;
	text-decoration: none;
	
	box-shadow: 0 4px 18px 0 rgba(139,69,19,0.30), 0 2px 6px 0 rgba(0,0,0,0.4);
	border: 1px solid #d35400;
  
	letter-spacing: 0.25px;
	
	text-shadow: 1px 2px 2px #6b2f13, 0 2px 4px #ffbe76;
	transition: transform 0.12s, box-shadow 0.12s, background 0.2s;
	cursor: pointer;
	background: linear-gradient(to bottom right, #c1440e, #f7c873);
}

.tab-btn:active,
.tab-btn:hover {
  transform: scale(0.93);
  box-shadow: 0 2px 8px 0 rgba(139,69,19,0.4), 0 1px 3px 0 rgba(0,0,0,0.30);
}

.section-especialidades {
  margin-top: 0px;
  margin-bottom: 30px;
  align-items: center;
  text-align: center;
  padding-top: 120px;
  background-image: url('../img/especial/fondoTerraza.jpg');
  background-attachment: fixed;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh; /* ✅ altura estable */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
	 
	 	text-shadow:
		1px 1px 2px rgba(0, 0, 0, 0.8),  /* sombra negra para contraste */
		0 0 7px rgba(255, 255, 255, 0.8), /* resplandor blanco suave */
		-4px 0px 0px 0px rgba(255, 255, 255, 0.6),    /* sombra izquierda negra fuerte */
		1px 4px 0px 0px rgba(0, 0, 0, 0.6),     /* sombra abajo negra fuerte */
		4px 0px 10px 0px rgba(255, 255, 255, 0.4);  /* luz blanca derecha difuminada */
		
	border-top: 2px solid #d52d29;
	border-right: 3px double #675454;
	border-bottom: 3px double #675454;
	border-left: 2px solid #d52d29;
}

#contenido-especialidades {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

.especialidad-media {
  height: 50vh;
  width: 95%;
  object-fit: cover;        /* 🔥 llena el contenedor, aunque recorte */
  object-position: center bottom;  /* ✅ alinea el contenido en el centro horizontal y fondo vertical */
  display: block;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 6px 12px rgba(250, 250, 250, 0.25), -3px 3px 14px rgba(0, 0, 0, 0.8);
  
  box-shadow:
		-4px 0px 0px 0px rgba(0, 0, 0, 0.7),    /* sombra izquierda negra fuerte */
		0px 4px 0px 0px rgba(0, 0, 0, 0.7),     /* sombra abajo negra fuerte */
		4px 0px 10px 0px rgba(255, 255, 255, 0.4),  /* luz blanca derecha difuminada */
		0px -6px 12px 0px rgba(255, 255, 255, 0.3), /* luz blanca arriba difuminada */
		-4px 4px 10px 0px rgba(255, 255, 255, 0.2); /* luz blanca vértice abajo izquierda*/		

box-shadow: 3px 5px 22px 7px rgba(255,255,255,0.7);
-webkit-box-shadow: 3px 5px 22px 7px rgba(255,255,255,0.7);
-moz-box-shadow: 3px 5px 22px 7px rgba(255,255,255,0.7);
		
}

.section-especialidades h2{
		
	text-shadow:
    2px 1px 0px rgba(0, 0, 0, 0.8),      /* sombra abajo negra fuerte */
    4px 0px 10px rgba(255, 255, 255, 0.6), /* luz difuminada derecha */
    -4px 4px 10px rgba(255, 255, 255, 0.3); /* luz inferior izquierda */
	
	margin-bottom: 15px;
	font-weight: bold;
}		

.section-especialidades p{
	color:
}		
/* ===============================================
======================================== */

.transicion {
  opacity: 0;
  transform: scale(1.05) rotateZ(-2deg);
  filter: blur(2px);
  animation: entradaPasional 0.9s ease-out forwards;
}

@keyframes entradaPasional {
  0% {
    opacity: 0;
    transform: scale(1.1) rotateZ(-4deg);
    filter: blur(6px);
  }
  60% {
    opacity: 0.9;
    transform: scale(1) rotateZ(1deg);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateZ(0deg);
    filter: blur(0);
  }
}

/* =========  HTML Galeria  ==========================
/* ===============*/ 

.galeria-section {
	margin-top:90px;
	text-align: center;
	
	/* padding: 2rem 1rem; */
	
/*	background: url('../img/fondoSalon.jpg') no-repeat center center;
	background-size: cover; /* para cubrir toda el área */
	
	text-shadow:
    2px 1px 0px rgba(0, 0, 0, 0.8),      /* sombra abajo negra fuerte */
    3px 0px 8px rgba(255, 255, 255, 0.6), /* luz difuminada derecha */
    -4px 3px 8px rgba(255, 255, 255, 0.4); /* luz inferior izquierda */
	
	text-shadow: 2px 1px 0px rgba(0, 0, 0, 0.8), 4px 0px 10px rgba(255, 255, 255, 0.6), -4px 4px 10px rgba(255, 255, 255, 0.3);
	
}

.galeria-section hr {
  margin: 1rem auto;
  width: 80%;
  border: solid rgba(0,0,0,0.5);
  border-radius: 12px;
 /* border-top: 2px solid rgba(255,255,255,0.5); */
}


.galeria-section h3 {
  padding: 8px;
  font-size: 1.3rem;
  text-align: center;
  /*color: #fff; */
  text-shadow:0 0 1px black, -1px 0 2px rgba(255,255,255,0.8), 1px 0 2px rgba(255,255,255,0.8);
	
	font-weight: bold;
	color: #3b2c1a;
	
}

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

.galeria-img {
  height: 150px;
  width: 100%;
  object-fit: cover;
  object-position: center bottom;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.5s ease;
  box-shadow:
    0 0 5px rgba(255,255,255,0.8),
    2px 2px 6px rgba(0,0,0,0.6),
    -2px -2px 6px rgba(0,0,0,0.6),
    0 0 8px rgba(255,255,255,0.4);
	
	margin-left: 10px;
	
}

.galeria-img:hover {
  transform: scale(1.05);
}

/* Overlay y expansión */
.overlay-galeria {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 999;
  display: none;
}

.img-expandida {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  max-height: 60vh;
  max-width: 90vw;
  z-index: 1000;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.7);
  opacity: 0;
  animation: fadeZoomIn 0.5s forwards;
}

@keyframes fadeZoomIn {
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
/*====================================================  */