/* === NAV & HEADER (igual que styles.css) === */
header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  z-index: 1000;
}
.header-container {
  display: flex;
  align-items: center;
  /* justify-content: flex-end; */
  justify-content: center;
  padding: 0.4rem 1rem;
  background-color: rgba(255, 255, 255, 0);
  position: relative;
  z-index: 1002;
}
.logo { 
	height: 70px; 
	margin : auto;
	border-radius: 18px;
	margin-right:140px;
}
	
.hamburger {
  font-size: 2rem; background: none; border: none;
  color: #8B2500; cursor: pointer; z-index: 1003;
  text-shadow: 1px 1px 2px black, 0px -2px 4px white;
}

/* Mobile nav */
.mobile-nav {
  border-radius: 10px;
  position: fixed; top: 0; right: -65vw;
  width: 60vw; max-width: 400px; max-height: 75vh;
  background-color: rgba(255, 255, 255, 0.75);
  box-shadow: -2px 0 10px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.3);
  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);
}
.mobile-nav.open { right: 10px; margin-top: 20px; }
.mobile-nav ul { list-style: none; padding: 0 1rem; margin: 15px 0; }
.mobile-nav li { margin-bottom: 0.5rem; }
.mobile-nav a {
  color: #8B2500; text-decoration: none; font-size: 1rem;
  font-weight: 600; display: block; transition: color 0.5s;
  text-shadow: 1px 1px 2px black, 3px 1px 2px white; padding-left: 5px;
}
.mobile-nav a:hover { color: #B22222; }

/* Overlay */
.menu-overlay {
  display: none; position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.45);
  z-index: 1001; transition: opacity 0.4s;
  opacity: 0;
}
.menu-overlay.active { display: block; opacity: 0.8; }

/* === MAIN CARTA === */
main { padding-top: 90px; padding-bottom: 40px; }
.carta-section { text-align: center; max-width: 800px; margin: 0 auto; }
.language-switch a, .download-buttons a {
  margin: 0.5rem; display: inline-block; text-decoration: none;
  padding: 0.5rem 1rem; background: #d8a48f; color: white; border-radius: 8px;
}
.download-buttons { margin: 1rem 0; }

/* Flipbook */
.book-container { position: relative; max-width: 500px; margin: 1rem auto; }
.book-container img { width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.5); color: white; border: none; padding: 0.5rem;
  cursor: pointer; border-radius: 50%; z-index: 100;
}
#prevBtn { left: -10px; }
#nextBtn { right: -10px; }

/* === FOOTER (igual que styles.css) === */
footer {
  bottom: 0; left: 0; width: 100%;
  background-color: rgba(0, 0, 0, 1);
  z-index: 1000; padding: 1rem; text-align: center;
}
footer h4 { color: white; font-size: 1.2rem; margin: 8px 0 12px; }
.social-icons a img { width: 35px; margin: 0 5px; }

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

.language-switch a {
  background-color: #8B2500; /* marrón rojizo sólido */
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.language-switch a:hover {
  background-color: #6f1d00; /* más oscuro al pasar el mouse */
  transform: translateY(-2px); /* efecto de subir un poco */
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.download-buttons a {
  background-color: #FF8C42; /* naranja */
  color: white;
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.download-buttons a:hover {
  background-color: #e6762e; /* naranja más oscuro */
  transform: scale(1.05); /* agrandamiento leve */
  box-shadow: 0 4px 10px rgba(255,140,66,0.6);
}

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


/* ====== BOTONES DE IDIOMA ====== */
.language-switch {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.language-switch a {
  background: linear-gradient(135deg, #8B2500, #A63F2D);
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.language-switch a:hover {
  background: linear-gradient(135deg, #6f1d00, #8B2500);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 10px rgba(0,0,0,0.3);
}

/* ====== BOTONES DESCARGA ====== */
.download-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}

.download-buttons a {
  background: linear-gradient(135deg, #FF8C42, #FF6A00);
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  transition: all 0.4s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.download-buttons a:hover {
  background: linear-gradient(135deg, #e6762e, #cc5500);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 10px rgba(255,140,66,0.6);
}

/* En pantallas grandes, ponerlos en línea */
@media (min-width: 768px) {
  .download-buttons {
    flex-direction: row;
    justify-content: center;
  }
}

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

.page-flip {
  animation: flipAnimation 0.6s ease forwards;
}

@keyframes flipAnimation {
  0% { transform: rotateY(0deg); opacity: 1; }
  50% { transform: rotateY(90deg); opacity: 0.5; }
  100% { transform: rotateY(0deg); opacity: 1; }
}

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