/* estilos-terra.css */
body { 
  font-family: montserrat; 
  background: #f9fafb; 
  color: #1f2937; 
  margin: 0; 
  padding: 0; 
}

header { 
  background-color: #999a32; 
  color: white; 
  text-align: center; 
  padding: 2rem 1rem; 
}

header .logo { 
  max-width: 500px; 
  width: 100%; 
  height: auto; 
  display: block; 
  margin: 0 auto; 
}

header h1.text-title { 
  margin: 0; 
  font-size: 1.5rem; 
}

/* Responsive para el logo */
@media (max-width: 768px) {
  header .logo { max-width: 90%; }
  header { padding: 1.5rem 1rem; }
}

@media (max-width: 480px) {
  header .logo { max-width: 95%; }
  header { padding: 1rem 0.5rem; }
}

main { 
  max-width: 720px; 
  margin: auto; 
  padding: 2rem; 
}

h2 { 
  font-family: montserrat; 
  color: #999a32; 
  border-bottom: 1px solid #e5e7eb; 
  padding-bottom: 0.25rem; 
  margin-left: 10px; 
}

/* Tipografía */
@font-face {
  font-family: montserrat;
  src: url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Montserrat");
}

/* Estilos del selector inicial */
.menu-selector { 
  display: block; 
}

.menu-selector.hidden { 
  display: none; 
}

.menu-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  gap: 1.5rem; 
  margin-top: 2rem; 
}

.menu-card { 
  background: #999a32; 
  padding: 1.5rem; 
  border-radius: 0.5rem; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
  text-align: center; 
  cursor: pointer; 
  transition: transform 0.2s ease, box-shadow 0.2s ease; 
  border: 1px solid #7a7b28; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

.menu-card:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 4px 6px rgba(0,0,0,0.15); 
}

.menu-card .button-image { 
  width: 100%; 
  height: auto; 
  display: block; 
}

/* Responsive para botones */
@media (max-width: 768px) {
  .menu-card .button-image { width: 150px; height: 117px; }
  .menu-card { padding: 1rem; }
}

@media (max-width: 480px) {
  .menu-card .button-image { width: 120px; height: 93px; }
  .menu-card { padding: 1rem; }
}

/* Estilos de las cartas individuales */
.menu-content { 
  display: none; 
}

.menu-content.active { 
  display: block; 
}

.back-to-selector, .back-to-home { 
  background: #999a32; 
  color: white; 
  border: 1px solid #999a32; 
  padding: 0.5rem 1rem; 
  font-weight: bold; 
  border-radius: 0.375rem; 
  cursor: pointer; 
  margin-bottom: 1rem; 
  text-decoration: none;
  display: inline-block;
}

.back-to-selector:hover, .back-to-home:hover { 
  background: #7a7b28; 
}

/* Estilos de las cartas */
.item { 
  background: white; 
  padding: 1rem; 
  margin: 0.75rem 0; 
  border-radius: 0.5rem; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
}

.item-header { 
  display: flex; 
  justify-content: space-between; 
  font-weight: bold; 
}

.desc { 
  font-size: 0.9rem; 
  color: #4b5563; 
  margin-top: 0.25rem; 
}

nav { 
  background: #f5f5e8; 
  padding: 1rem; 
  margin-bottom: 2rem; 
  border-radius: 0.5rem; 
}

nav ul { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  display: none; 
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 
  gap: 0.5rem; 
}

nav ul.active { 
  display: grid; 
}

nav a { 
  color: #999a32; 
  text-decoration: none; 
  font-weight: 600; 
  background: white; 
  border: 1px solid #d4d5a0; 
  border-radius: 0.375rem; 
  display: block; 
  padding: 0.5rem; 
  text-align: center; 
  font-size: 0.8rem; 
}

nav a:hover { 
  background: #fafaf0; 
}

.lang-switch { 
  margin: 1rem; 
  text-align: center; 
}

.lang-switch button { 
  background: white; 
  border: 1px solid #999a32; 
  color: #999a32; 
  padding: 0.5rem 1rem; 
  font-weight: bold; 
  border-radius: 0.375rem; 
  cursor: pointer; 
}

.section { 
  display: none; 
}

.section.active { 
  display: block; 
}

.leyenda-footer { 
  margin-top: 3rem; 
  font-size: 0.85rem; 
  text-align: center; 
  color: #6b7280; 
  padding-bottom: 2rem; 
}

/* Estilos para alérgenos */
.allergens { 
  margin-top: 0.5rem; 
  display: flex; 
  flex-wrap: wrap; 
  gap: 0.25rem; 
}

.allergen { 
  background: #f9f9f9; 
  border: 1px solid #e5e7eb; 
  padding: 2px; 
  border-radius: 0.25rem; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  width: 24px; 
  height: 24px; 
}

.allergen img { 
  width: 20px; 
  height: 20px; 
  object-fit: contain; 
  filter: contrast(1.1); 
}

.allergen:hover { 
  background: #f3f4f6; 
  border-color: #d1d5db; 
}

.allergen-legend { 
  margin-top: 2rem; 
  padding: 1rem; 
  background: #f9fafb; 
  border-radius: 0.5rem; 
  font-size: 0.75rem; 
}

.allergen-legend h3 { 
  margin: 0 0 0.5rem 0; 
  color: #999a32; 
  font-size: 0.85rem; 
}

.allergen-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
  gap: 0.5rem; 
}

.allergen-item { 
  display: flex; 
  align-items: center; 
  gap: 0.5rem; 
  padding: 0.25rem; 
}

.allergen-item .allergen { 
  margin: 0; 
}

/* Estilo para precios dobles (normal + suplemento) */
.dual-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.normal-price {
  font-weight: bold;
  color: #1f2937;
}

.supplement-price {
  font-size: 0.8rem;
  color: #999a32;
  font-weight: 600;
}

.supplement-price::before {
  content: "Supl. T.I.: ";
  font-size: 0.7rem;
}

/* Estilo para sección todo incluido */
.todo-incluido {
  background: linear-gradient(135deg, #fafaf0 0%, #f5f5e8 100%);
  border: 2px solid #999a32;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin: 2rem 0;
}

.todo-incluido h2 {
  color: #999a32;
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.todo-incluido h3 {
  color: #999a32;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  border-bottom: 1px solid #999a32;
  padding-bottom: 0.5rem;
}

.hamburger { 
  position: fixed; 
  top: 1rem; 
  right: 1rem; 
  background: #999a32; 
  color: white; 
  border: none; 
  font-size: 1.25rem; 
  padding: 0.5rem 1rem; 
  border-radius: 0.375rem; 
  z-index: 999; 
  cursor: pointer; 
}

.mobile-menu { 
  display: none; 
  position: fixed; 
  top: 3.5rem; 
  right: 1rem; 
  background: white; 
  border: 1px solid #d4d5a0; 
  border-radius: 0.375rem; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
  z-index: 998; 
  max-height: 70vh; 
  overflow-y: auto; 
  width: 200px; 
}

.mobile-menu a { 
  display: block; 
  padding: 0.5rem 1rem; 
  color: #999a32; 
  text-decoration: none; 
  border-bottom: 1px solid #e5e7eb; 
  font-size: 0.85rem; 
}

.mobile-menu a:last-child { 
  border-bottom: none; 
}

.mobile-menu.active { 
  display: block; 
}

/* BOTÓN VOLVER ARRIBA */
.scroll-to-top {
  position: fixed !important;
  bottom: 2rem !important;
  right: 2rem !important;
  background: #999a32 !important;
  color: white !important;
  border: none !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  font-size: 1.5rem !important;
  font-weight: bold !important;
  cursor: pointer !important;
  box-shadow: 0 4px 15px rgba(153, 154, 50, 0.3) !important;
  z-index: 1000 !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.9 !important;
  transform: translateY(0) !important;
}

.scroll-to-top:hover {
  background: #7a7b28 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(153, 154, 50, 0.4) !important;
  opacity: 1 !important;
}

.scroll-to-top:active {
  transform: translateY(-1px) !important;
}

.scroll-to-top.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(10px) !important;
}

/* Responsive */
@media (max-width: 768px) {
  nav ul {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.3rem;
  }
  
  nav a {
    font-size: 0.75rem;
    padding: 0.4rem;
  }
  
  .todo-incluido {
    padding: 1rem;
    margin: 1rem 0;
  }
  
  .todo-incluido h2 {
    font-size: 1.1rem;
  }
  
  .dual-price {
    gap: 0.1rem;
  }
  
  .supplement-price {
    font-size: 0.75rem;
  }
  
  .supplement-price::before {
    content: "Supl. T.I.: ";
    font-size: 0.65rem;
  }
  
  .scroll-to-top {
    bottom: 1.5rem !important;
    right: 1.5rem !important;
    width: 45px !important;
    height: 45px !important;
    font-size: 1.3rem !important;
  }
}

@media (max-width: 480px) {
  nav ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.2rem;
  }
  
  nav a {
    font-size: 0.65rem;
    padding: 0.25rem;
  }
  
  .mobile-menu {
    width: 180px;
    max-height: 60vh;
  }
  
  .mobile-menu a {
    font-size: 0.8rem;
    padding: 0.5rem 0.8rem;
  }
  
  .todo-incluido h2 {
    font-size: 1rem;
  }
  
  .todo-incluido h3 {
    font-size: 1rem;
  }
  
  .supplement-price::before {
    content: "Supl.: ";
  }
  
  .scroll-to-top {
    bottom: 1rem !important;
    right: 1rem !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 1.2rem !important;
  }
  
  main {
    padding: 1rem;
  }
}