/* Reset mínimo */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Helvetica Neue', Arial, sans-serif; color: #333; line-height: 1.5; }
    a { 
        text-decoration: none; color: inherit; 
        display: inline-block;            /* necesario para que transform funcione bien */
        transition: transform 0.3s ease;   /* suaviza la animación */
    }
    /* Al pasar el ratón */
    a:hover {
    transform: scale(1.1);            /* aumenta un 10% */
    }
    img { max-width: 100%; display: block; }

    /* Variables de color */
    :root {
      --primary: #0ead69;
      --secondary: #F9F9F9;
      --accent: #FFC500;
      --dark: #1A1A1A;
      --blue_mubb: #0B3954;;
    }

    /* Contenedor genérico */
    .container { width: 90%; max-width: 1600px; margin: 0 auto; }
    .text_center{
      text-align: center;
    }
    .mar_top_dos{
      margin-top: 2vh;
    }
    .mar_bot_dos{
      margin-bottom: 2vh;
    }
    .center{
      align-items: center;
      justify-content: center;
      width: auto;
      margin-left: auto;
      margin-right: auto;
    }

    /* Header */
    header {
    position: sticky;    /* fija el header al top */
    top: 0;              /* siempre en la parte superior */
    z-index: 1000;       /* por encima del resto */
    background: var(--primary); /* conserva tu fondo */
    color: #fff; padding: 1rem 0;
    }
    nav { display: flex; justify-content: space-between; align-items: center; }
    .nav-links { list-style: none; display: flex; }
    .nav-links li { margin-left: 2rem; }
    .nav-links a{ font-size: 1.2em; padding:1vh 0;}
    .nav-links a:hover { color: var(--accent); }

    /* 3. Estilos del “hamburger” (oculto en desktop) */
    .hamburger {
        display: none;            /* sólo visible en móvil */
        font-size: 1.8rem;
        cursor: pointer;
        color: #fff;
    }

    /* Checkbox hack */
    #nav-toggle {
    display: none;            /* checkbox escondido */
    }

/* 4. Media query para móvil */
@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 100%;              /* justo debajo del header */
    left: 0;
    right: 0;
    background: var(--dark);
    flex-direction: column;
    display: none;          /* oculto por defecto */
  }
  .hamburger {
    display: block;         /* muestra el ícono */
    margin-right: 5%;
  }
  /* Cuando el checkbox esté chequeado, muestra el menú */
  #nav-toggle:checked + .hamburger + .nav-links {
    display: flex;
  }
}

    /* Hero */
    .hero { 
      min-height: 60vh;
      background-image: url(../productos/platillos_mubba.jpg); 
      color: #fff; padding: 4rem 0; text-align: center; 
      /* ocupa todo el contenedor */
      background-size: cover;
      /* centra la imagen */
      background-position: center center;
      /* evita repeticiones */
      background-repeat: no-repeat;
      /* opcional: para superponer color semitransparente */
      position: relative;
      display: flex;
      flex-direction: colum;
      align-items: center;
      justify-content: center;
    }
    .hero_charolas{
      min-height: 60vh;
      background-image: url(../productos/charolas_bocadillos_mubba_head.jpg); 
      color: #fff; 
      padding: 4rem 0; 
      text-align: center; 
      /* ocupa todo el contenedor */
      background-size: cover;
      /* centra la imagen */
      background-position: bottom center;
      /* evita repeticiones */
      background-repeat: no-repeat;
      /* opcional: para superponer color semitransparente */
      position: relative;
      display: flex;
      flex-direction: colum;
      align-items: end;
      justify-content: center;
    }
    .hero::before, .hero_charolas::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.4); /* cambia opacidad/color según el overlay deseado */
      z-index: 0;
    }

    .hero > * , .hero_charolas > *{
      position: relative; /* para que el contenido quede sobre el overlay */
      z-index: 1;
    }
    .hero h1, .hero_charolas h1 { font-size: 3em; margin-bottom: 1rem; }
    .hero p, .hero_charolas p {text-align: center; font-size: 1.6em; margin-bottom: 2rem; }


    .btn { 
        display: inline-block; 
        background: var(--accent); 
        color: var(--dark); 
        padding: 0.75rem 2rem; 
        border-radius: 4px; 
        font-weight: bold;

        margin-right: 1rem; margin-bottom: 1rem; 
    }
    .btn + .btn { margin-right: 1rem; margin-bottom: 1rem;}

    /* Sección de destacados */
    .features { padding: 4rem 0; background: var(--secondary); width: 100%;}
    .cards { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; }
    .card { background: #fff; border-radius: 6px; overflow: hidden; width: 300px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
    .card img{ height: 200px; object-fit: cover; }
    .card-content { padding: 1rem; }
    .card-content h3 { color: var(--primary); font-size: 1.6em; margin-bottom: 0.5rem; }
    .card-content p { font-size: 1.2em; margin-bottom: 1rem; }

    /* Sección de promoción Wednesday */
    .promo { padding: 2rem 0; display:flex; flex-direction: row; flex-wrap: wrap; justify-content: center; background: var(--primary); color: #fff; text-align: center; }
    .promo h2 { font-size: 2.5em; margin-bottom: 1rem; }
    .promo p { font-size: 1.5em; margin-bottom: 1.5rem; }
    .cincuenta { width: 48%; height: auto; display:flex; flex-direction: column;
    justify-content:center; align-items: center; padding:0 1%;}

    /* CTA Catering */
    .cta-catering { padding: 4rem 0; text-align: center; display:flex; flex-direction: row; flex-wrap: wrap; justify-content: center; text-align: center; }
    .cta-catering h2{font-size: 2.5em; margin-bottom: 1rem;}
    .cta-catering p{font-size: 1.5em; margin-bottom: 1.5rem;}

     /* Sección Horario y Ubicación */
    .info {width: 100%; margin:auto; display:flex; flex-direction: row; flex-wrap: wrap; padding: 2rem 2rem; background-color:var(--accent); justify-content: center; text-align: center;}
    .info .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
    .info .grid h2 {font-size: 2.5em; color: var(--dark); margin-bottom: 1rem; text-align: center; }
    .info .grid h3 {font-size: 2em; color: var(--dark); margin-bottom: 1rem; text-align: left; }
    .info .grid p { font-size: 1.1em !important; margin-bottom: 1em; text-align: left;}
    .map-responsive { position: relative; overflow: hidden; padding-bottom: 56.25%; }
    .map-responsive iframe { position: absolute; top:0; left:0; width:100%; height:100%; border:0; }

    /* Footer */
    footer { background: var(--dark); color: #ccc; padding: 2rem 0; }
    .social { margin-top: 1rem; }
    .social a { margin-right: 1rem; color: #ccc; }
    .social a:hover { color: #fff; }

    /* Responsivo */
    @media (max-width: 768px) {
      .cards { flex-direction: column; align-items: center; }
      .nav-links { display: none; }

      .promo, .info {flex-direction: column;align-items: center;justify-content: center;}
      .cincuenta{width: 90%;flex-direction: column;align-items: center;justify-content: center;}
      .grid{
        /* Opción A: desactivar columnas devolviendo el valor por defecto */
        grid-template-columns: none;      /* o bien: initial; o unset; */

        /* Opción B: dejar de usar grid y usar flujo normal */
        display: block;
      }
    }

    /*SOBRE NOSOTROS*/
    /* Sección “Sobre Mubba” */
.about {
  padding: 3rem 0;
  margin:3vh auto 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.about h2 {
  text-align: center;
  color: #FFF;
  margin-bottom: 1rem;
  font-size: 2rem;
}
.about p {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.2em;
  line-height: 1.5;
  width: 100%;
  color: #FFF;
}

/* BOCADILLOS */
.ochenta{width: 60%;background-color: #0ead69;}
.veinte{width: 40%;}
.back_blue{
  background-color: var(--blue_mubb);
}

    .cards_boc { 
      display: flex; 
      width: 90%; 
      flex-wrap: wrap; 
      gap: 1rem; 
      justify-content: center; align-items: center; 
      margin: auto;
    }
    .card_boc { 
      background: #fff; 
      border-radius: 6px; 
      width: calc(50% - 1rem); 
      padding: 1rem; 
      box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
      display: flex;
      flex-direction: row;
      flex-wrap: wrap; 
      justify-content: center; 
      align-items: center; 
    }

    .card_boc img{ 
      height: 300px; 
      object-fit: cover; 
      min-width: 100%;
    }

    .card_boc h3 { margin-bottom: 0.5rem; color: var(--dark); font-size: 1.4rem; text-align: left; margin-left:5%}
    .card_boc p { font-size: 0.9rem; color: #555; text-align: left; margin-left:5%}

    /* Formulario */
    .form-section { padding: 3rem 0; }
    .form-section h2 { font-size: 2em; text-align: center; color: var(--primary); margin-bottom: 1rem; }
    .form-section p{
      font-size: 1.1em;
      line-height: 1.5;
      text-align: center;
    }
    form { margin-top: 3vh; background: #fff; padding: 2rem; border-radius: 6px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
    .form-group { margin-bottom: 1rem; }
    label { display: block; font-weight: bold; margin-bottom: 0.5rem; align-items: center; justify-content: center;}
    input, select { width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; }
    select[multiple] { height: 8rem; }
    .btn-submit { width: 100%; margin-top: 1rem; }


    /* Responsivo */
    @media (max-width: 600px) {
      .cards_boc { flex-direction: column; }
      .card_boc { width: 100%; }
      /* .nav-links { display: none; } */
    }