/* ===========================
   Responsive Design – Verde Fresco
   (mantiene look & feel actual)
=========================== */

/* --- Helpers globales que dependen del header fijo --- */
@media (max-width: 992px){
  :root{ --nav-h: 96px; }
  body{ padding-top: var(--nav-h); }
}
@media (max-width: 700px){
  :root{ --nav-h: 84px; }
  body{ padding-top: var(--nav-h); }
}

/* ----------------------------------
   HEADER / NAV
---------------------------------- */
/* No cambiamos la dirección del header; solo aflojar espacios en chicos */
@media (max-width: 1200px){
  .header .container{ gap: clamp(10px, 2vw, 20px); }
}

/* El bloque del logo puede encogerse un poco en pantallas medianas */
@media (max-width: 992px){
  .brand-block{ flex: 0 1 clamp(200px, 36vw, var(--brand-w)); }
}

/* Menú: en medianas reducimos tipografía apenas */
@media (max-width: 1120px){
  .nav a{ font-size: .95rem; }
}
@media (max-width: 980px){
  .nav a{ font-size: .9rem; }
}

/* En anchos chicos, el menú se alinea a la izquierda y permite scroll horizontal */
@media (max-width: 900px){
  .nav{ min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar{ display:none; }
  .nav ul{ justify-content: flex-start; gap: clamp(12px, 3.2vw, 20px); }
}

/* Acciones del header: mantener legibilidad y clics cómodos */
@media (max-width: 520px){
  .header-actions{ gap: .6rem; }
  .btn-login, .btn-cart{ padding: .45rem .8rem; font-size: .92rem; }
}

/* ----------------------------------
   HERO (con imagen real)
---------------------------------- */
.inline-hero-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Desktop/tablet: hero en 2 columnas; imagen sin romper proporción */
@media (min-width: 769px){
  .hero{ flex-direction: row; gap: 20px; }
  .inline-hero-img{
    /* altura “visual” agradable sin recortar demasiado */
    height: clamp(280px, 48vh, 420px);
    object-fit: cover;                /* si tu imagen es grande, la recorta suavemente */
  }
}

/* Tablets y móviles: hero en columna y centrado */
@media (max-width: 768px){
  .hero{
    flex-direction: column;
    text-align: center;
    padding: 140px 0 60px; /* espacio extra para header fijo */
    min-height: auto;
  }
  .hero-content{ padding: 0 16px; }
  .hero-content h2{ font-size: 2.2rem; }
  .hero-content p{ font-size: 1.08rem; }
  .inline-hero-img{
    max-width: min(600px, 100%);
    height: clamp(220px, 36vh, 360px);
    object-fit: cover;
    margin: 0 auto;
  }
}

/* Móviles pequeños */
@media (max-width: 480px){
  .hero{ padding: 120px 0 44px; }
  .hero-content h2{ font-size: 1.9rem; line-height: 1.25; }
  .hero-content p{ font-size: 1rem; margin-bottom: 1.25rem; }
}

/* ----------------------------------
   ABOUT (“Nuestra historia”) – imagen real
---------------------------------- */
.inline-about-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 20px 36px rgba(0,0,0,.12);
}

@media (max-width: 900px){
  .about{ padding: 56px 0; }
  .about-content{ flex-direction: column; gap: 1.6rem; text-align: center; }
  .about-image{ order: -1; }
  .about-text h2{ font-size: 2rem; }
  .about-text p{ font-size: 1rem; }
}

/* ----------------------------------
   GRILLAS / CARDS
---------------------------------- */
@media (max-width: 1024px){
  .products-grid{ grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 1.5rem; }
}
@media (max-width: 640px){
  .products-grid{ grid-template-columns: 1fr; gap: 1rem; }
  .product-card{ margin: 0 10px; }
  .product-image{ height: 180px; }
  .product-info{ padding: 1rem; }
  .product-info h3{ font-size: 1.06rem; }
  .product-price{ font-size: 1.12rem; }
}

/* Ofertas grid */
@media (max-width: 900px){
  .offer-banner-card{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  .offer-media img{ height: 200px; }
}

/* Recetas grid (si la página lo redefine, esto no interfiere) */
@media (max-width: 900px){
  .recipes-grid{ grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
}

/* ----------------------------------
   FORMULARIOS / MODALES / TOASTS
---------------------------------- */
@media (max-width: 768px){
  .modal-content{
    margin: 10% auto;
    width: 95%;
    padding: 1.4rem;
    max-height: 86vh;
  }
}
@media (max-width: 480px){
  .form-group{ margin-bottom: 1rem; }
  .form-group input, .form-group textarea{ padding: .7rem; font-size: .95rem; }
  .close{ right: .5rem; top: .5rem; font-size: 1.5rem; }
  .btn-primary{ width: 100%; text-align: center; padding: .9rem 1.2rem; }
}

/* ----------------------------------
   FOOTER
---------------------------------- */
@media (max-width: 720px){
  .footer{ padding: 2.2rem 0 1rem; }
  .footer-content{
    grid-template-columns: 1fr;
    gap: 1.4rem;
    text-align: center;
  }
}

/* ----------------------------------
   EXTRAS
---------------------------------- */
@media (max-height: 500px) and (orientation: landscape){
  .hero{ padding: 100px 0 30px; min-height: auto; }
  .inline-hero-img{ height: 42vh; object-fit: cover; }
}

/* Print (ligero) */
@media print{
  .header, .footer, .btn-primary, .btn-secondary, .btn-login, .btn-cart, .modal{ display:none !important; }
  body{ font-size: 12pt; line-height: 1.35; }
}

/* === Hamburguesa y panel móvil === */
@media (max-width: 900px){
  .nav{ display:none; }                 /* ocultar nav horizontal en móvil */

  .nav-toggle{
    display:inline-flex; flex-direction:column; justify-content:center; gap:4px;
    width:42px; height:42px; margin-left:8px;
    background:#fff; border:0; border-radius:10px; cursor:pointer;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
  }
  .nav-toggle .bar{ width:22px; height:2.5px; background:#1f5b2a; display:block; border-radius:2px; }

  .mobile-nav{
    position:fixed; inset:0; z-index:3000;
    background:rgba(0,0,0,.45);
    display:none;                        /* base en móvil = oculto */
  }
  .mobile-nav.open{ display:block; }     /* se muestra al abrir */

  .mobile-nav ul{
    position:absolute; top:0; right:0; bottom:0; width:min(80vw,360px);
    margin:0; padding:18px; list-style:none; background:#fff;
    border-left:1px solid #e7ece7; box-shadow:-12px 0 24px rgba(0,0,0,.18);
    display:flex; flex-direction:column; gap:6px;
  }
  .mobile-nav a{
    display:block; padding:.9rem 1rem; border-radius:10px;
    color:#1f5b2a; text-decoration:none; font-weight:800; border:1px solid transparent;
  }
  .mobile-nav a:hover{ background:#dfeee5; border-color:#e7ece7; }

  .mobile-close{
    position:absolute; top:10px; left:10px; width:42px; height:42px;
    border:0; border-radius:10px; background:#fff; color:#000; font-size:1.6rem; cursor:pointer;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
  }
}

/* ===== Forzar visibilidad del menú móvil ===== */
@media (max-width: 900px){
  /* Oculta el nav horizontal sí o sí en móvil */
  .nav{ display: none !important; }

  /* Muestra la hamburguesa sí o sí en móvil */
  .nav-toggle{
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 42px; height: 42px;
    margin-left: auto;                 /* empuja a la derecha */
    background: #fff; border: 0; border-radius: 10px; cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
    position: relative; z-index: 1100; /* por si algo la tapa */
  }
  .nav-toggle .bar{
    width: 22px; height: 2.5px; background: #1f5b2a; display: block; border-radius: 2px;
  }

  /* Panel móvil: oculto por defecto, visible con .open */
  .mobile-nav{
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(0,0,0,.45);
    display: none !important;          /* base: oculto */
  }
  .mobile-nav.open{ display: block !important; }

  .mobile-nav ul{
    position: absolute; top: 0; right: 0; bottom: 0; width: min(80vw, 360px);
    margin: 0; padding: 18px; list-style: none; background: #fff;
    border-left: 1px solid #e7ece7; box-shadow: -12px 0 24px rgba(0,0,0,.18);
    display: flex; flex-direction: column; gap: 6px;
  }
  .mobile-close{
    position: absolute; top: 10px; left: 10px; width: 42px; height: 42px;
    border: 0; border-radius: 10px; background: #fff; color: #000; font-size: 1.6rem; cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
  }

  /* Header más compacto y logo más chico en móvil */
  :root{ --nav-h: 84px; }
  .brand-block{ flex-basis: 140px; height: 56px; padding: 0 8px; }
  body{ padding-top: var(--nav-h); }
}
@media (max-width: 900px){
  .nav-toggle{
    /* centra el contenido dentro del botón */
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;   /* centra vertical */
    align-items: center;       /* ✅ centra horizontal */
    gap: 4px;

    width: 42px; height: 42px;
    padding: 0;                /* sin padding que desplace */
    background: #fff; border: 0; border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
  }
  .nav-toggle .bar{
    display: block;
    width: 22px; height: 2.5px;
    background: #1f5b2a;
    border-radius: 2px;
    margin: 0;                 /* evita corrimientos */
  }
}



/* Teléfonos muy estrechos */
@media (max-width: 380px){
  .header .brand-block{ max-width: 44% !important; }
  .header .brand-img{ max-height: 40px !important; }
  .header .btn-login,
  .header .btn-cart{ padding: 6px 8px; font-size: 0.85rem; }
}