/* estilo.css - Bee Fury (mejorado) */

/* ---------------------------
   VARIABLES
   --------------------------- */
:root{
  --bg: #ffffff;
  --muted: #f5f5f5;
  --accent: #e67e22;
  --accent-dark: #c25e12;
  --text: #222;
  --subtext: #555;
  --radius: 12px;
  --shadow-1: 0 4px 15px rgba(0,0,0,.08);
  --shadow-2: 0 8px 30px rgba(0,0,0,.12);
  --max-width: 1400px;
  --gap: 1.25rem;
  --container-pad: 1rem;
  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial;
  --font-display: "Bungee", cursive;
}

/* ---------------------------
   RESET / GLOBAL
   --------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,body{
  margin:0;
  padding:0;
  height:100%;
  font-family: var(--font-sans);
  color:var(--text);
  background: #fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x: hidden;
}

img{ display:block; max-width:100%; height:auto; }

/* container central */
.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding: 0 var(--container-pad);
}

/* ---------------------------
   TIPOGRAFÍA
   --------------------------- */
h1,h2,h3,h4{ margin:0 0 .6rem 0; line-height:1.15; font-weight:700; color:var(--text); }
h1{ font-family:var(--font-display); font-size:clamp(1.8rem,5vw,3rem); }
h2{ font-size:1.6rem; }
h3{ font-size:1.15rem; }
h4{ font-size:1rem; }

p{ color:var(--subtext); margin:0 0 .8rem 0; }

/* ---------------------------
   HEADER / NAV
   --------------------------- */
.header{
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  position:sticky;
  top:0;
  z-index: 60;
}

.nav-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding: .8rem var(--container-pad);
}

/* logo */
.logo-link{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text); }
.logo{ width:48px; height:48px; object-fit:cover; border-radius:8px; box-shadow: var(--shadow-1); }
.logo-text{ font-weight:800; letter-spacing:1px; font-family:var(--font-display); font-size:1.05rem; }

/* navegación */
.nav{ }
.nav-list{ list-style:none; display:flex; gap: .4rem; margin:0; padding:0; align-items:center; }
.nav-link{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.5rem .75rem;
  border-radius:8px;
  text-decoration:none;
  color:var(--subtext);
  transition: background .18s, color .18s, transform .12s;
  font-weight:600;
}
.nav-link:hover,
.nav-link:focus{ background:var(--muted); color:var(--text); transform:translateY(-1px); outline:none; }
.nav-link.active{ color:var(--accent); }

/* CTA */
.cta-btn{
  background: linear-gradient(180deg,var(--accent),var(--accent-dark));
  color:#fff !important;
  padding:.5rem .8rem;
  border-radius:9px;
  box-shadow: 0 6px 18px rgba(230,126,34,.15);
}
.cta-btn:hover{ transform:translateY(-2px); }

/* mobile menu button */
.mobile-menu-btn{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  cursor:pointer;
  border-radius:8px;
}
.hamburger{
  width:22px; height:2px; background:var(--text); border-radius:2px; position:relative;
}
.hamburger::before, .hamburger::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:var(--text); border-radius:2px;
}
.hamburger::before{ top:-7px; }
.hamburger::after{ top:7px; }

/* ---------------------------
   HERO
   --------------------------- */
.hero{
  background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.35)), url("./img/bakground.webp") center/cover no-repeat;
  color:#fff;
  text-align:center;
  padding:6.5rem 0;
}
.hero .tagline{ font-size:1.05rem; color:rgba(255,255,255,.92); margin-bottom:1rem; }
.btn{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:9px;
  text-decoration:none;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  border:none;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translateY(-3px); box-shadow: var(--shadow-2); }

/* ---------------------------
   MENU GRID & ITEMS
   --------------------------- */
.menu-section-title{ text-align:center; font-size:1.4rem; margin:2rem 0; color:var(--text); position:relative; }
.menu-section-title::after{ content:""; display:block; width:90px; height:3px; background:var(--accent); margin:.6rem auto 0; border-radius:3px; }

.menu-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(.8rem, 1.5vw, 2rem);
  padding: 0 var(--container-pad);
  max-width: var(--max-width);
  margin: 0 auto 2.5rem;
}

/* tarjeta */
.menu-item{
  background:var(--bg);
  border-radius: var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 260px;
  box-shadow: var(--shadow-1);
  transition: transform .22s ease, box-shadow .22s ease;
}
.menu-item:hover{ transform: translateY(-6px); box-shadow: var(--shadow-2); }

/* contenedor imagen con aspect-ratio para consistencia */
.menu-img{
  width:100%;
  aspect-ratio: 4/3; /* uniforme y evita variaciones raras */
  overflow:hidden;
  background: linear-gradient(180deg, #fafafa, #f6f6f6);
  display:block;
  position:relative;
}

/* imagen: cover por defecto, centro. */
.menu-img img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  object-position: center center;
  transition: transform .45s ease, filter .3s ease;
}

/* efecto zoom al hover */
.menu-item:hover .menu-img img{ transform: scale(1.05); }

/* clases para imágenes problemáticas: ajusta el foco */
.menu-img img.no-crop-top{ object-position: center top; }
.menu-img img.no-crop-center{ object-position: 50% 35%; }
.menu-img img.no-crop-bottom{ object-position: center bottom; }

/* contenido */
.menu-content{
  padding: 1.25rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  flex-grow:1;
}
.menu-content h4{
  display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem;
  font-size:1.02rem;
}
.price{ color:var(--accent); font-weight:800; font-size:1rem; }

/* descripción */
.menu-content p{ color:var(--subtext); font-size:.95rem; line-height:1.45; margin:0; }

/* alérgenos */
.alergenos{ display:flex; gap:.45rem; flex-wrap:wrap; margin-top:auto; padding-top: .8rem; border-top:1px solid #f0f0f0; }
.alergenos img{
  width:28px; height:28px; object-fit:contain; border-radius:50%; padding:3px; background:var(--muted);
  transition: transform .12s ease;
}
.alergenos img:hover{ transform:scale(1.1); }

/* ---------------------------
   APARTADOS PEQUEÑOS (RACIONES / BEBIDAS / POSTRES)
   --------------------------- */
.menu-item > h4, .menu-item > p{ padding: 1rem 1.25rem; }

/* ---------------------------
   MAP / LOCATION
   --------------------------- */
.map-container{ width:100%; display:flex; justify-content:center; }
.map-container iframe{ width:100%; max-width:900px; height:420px; border:0; border-radius:10px; }

/* ---------------------------
   CONTACT / FORM
   --------------------------- */
.contact-section .contact-form{ display:grid; gap:.6rem; grid-template-columns:1fr; margin-top:1rem; }
.contact-form input, .contact-form textarea{
  width:100%; padding:.75rem; border-radius:8px; border:1px solid #eee; font-size:.95rem;
}
.contact-form button{ width:fit-content; margin-top:.4rem; }

/* ---------------------------
   COOKIE BANNER
   --------------------------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:1rem; margin:0 auto; max-width:calc(var(--max-width) - 2rem);
  background: rgba(0,0,0,.92); color:#fff; padding:.9rem 1rem; border-radius:10px; display:flex; gap:1rem; align-items:center; justify-content:space-between; z-index:9999;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.cookie-banner p{ margin:0; font-size:.95rem; color:rgba(255,255,255,.95); }
.cookie-banner .btn-primary{ background:var(--accent); color:#fff; padding:.5rem .85rem; border-radius:8px; border:none; font-weight:700; cursor:pointer; }

/* ocultar con clase */
.cookie-banner.hidden{ display:none !important; }

/* ---------------------------
   FOOTER
   --------------------------- */
.footer{ padding:1.5rem 0; text-align:center; color:var(--subtext); border-top:1px solid #f3f3f3; margin-top:2rem; }
.footer .credits i{ color:var(--accent); }

/* ---------------------------
   ACCESSIBILITY / FOCUS
   --------------------------- */
a:focus, button:focus, .nav-link:focus{ outline: 3px solid rgba(230,126,34,.12); outline-offset:3px; }

/* ---------------------------
   RESPONSIVE
   --------------------------- */
@media (max-width: 992px){
  .nav-list{ gap:.25rem; }
  .mobile-menu-btn{ display:flex; }
  /* hide nav on mobile by default (you must toggle .active via JS) */
  .nav{ position:fixed; inset:0 0 auto 0; top:64px; background:#fff; transform:translateY(-200%); transition: transform .28s ease; padding:1rem; box-shadow:0 10px 30px rgba(0,0,0,.08); border-radius: 0 0 12px 12px; }
  .nav.active{ transform:translateY(0); }
  .nav-list{ flex-direction:column; gap:.5rem; }
  .hero{ padding:4.5rem 0; }
  .menu-img{ aspect-ratio: 16/10; }
  .map-container iframe{ height:320px; }
}

@media (max-width: 480px){
  .hero{ padding:3.5rem 0; }
  .logo-text{ display:none; }
  .menu-grid{ grid-template-columns: 1fr; }
  .cookie-banner{ bottom:.6rem; left:.6rem; right:.6rem; }
}

/* ---------------------------
   UTILS (small helpers)
   --------------------------- */
.text-center{ text-align:center; }
.muted{ color:var(--subtext); font-size:.95rem; }


.menu-img img.no-crop-center {
  object-position: 50% 35%;
}

.no-crop-cleopatra {
  object-position: 50% 45%;
}
/* Coloca el foco más arriba para la imagen Cleopatra */
.menu-img img.no-crop-cleopatra {
  object-position: 50% 25%; /* x% y% -> mueve la imagen hacia arriba bajando el valor Y */
}