/* ===================================================
   EXPERIENCIA INÉS — RESPONSIVE
   Mobile-first (el 100% del tráfico real entra por QR
   en un teléfono). Tablet/desktop centran el frame
   como un dispositivo, para no romper la sensación de app.
   =================================================== */

/* ---- Tablet / Desktop: frame tipo dispositivo ---- */

@media (min-width: 560px){

  body{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--bg-2);
    min-height:100vh;
  }

  #app-frame{
    height:min(880px, 92vh);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg);
    border:8px solid #0d140e;
  }

}

@media (min-width: 900px){
  #app-frame{
    height:min(900px, 94vh);
  }
}

/* ---- Ajustes tipográficos en pantallas muy pequeñas ---- */

@media (max-width: 340px){

  .section-heading__title{
    font-size:1.9rem;
  }

  .topbar-title{
    font-size:1.5rem;
  }

  .antojo-card__title,
  .nav-row__title{
    font-size:.94rem;
  }

  .brand-logo--hero{
    width:min(190px, 56vw);
  }

}

/* ---- Pantallas bajas (landscape en celular) ---- */

@media (max-height: 560px) and (orientation: landscape){

  .hero-screen{
    padding:var(--s-4);
  }

  .brand-logo--hero{
    width:104px;
    margin-bottom:var(--s-3);
  }

  .hero-title{
    font-size:2rem;
  }

  .hero-slogan{
    display:none;
  }

}