/* ══════════════════════════════════════
   MOBILE — estilos dedicados
   No modifica buho-landing.css ni mobile-nav.css
   Breakpoint principal: ≤ 640px
══════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── HERO ── */

  /* Sacamos el height fijo y el overflow que recortaba el mockup */
  .hero-wrap {
    height: auto;
    overflow: visible;
  }

  /* Reducimos padding excesivo */
  .hero {
    padding: 7rem 0 3rem;
  }

  /* Cancelamos el translateY que empujaba y superponía */
  .hero-left {
    transform: none;
  }

  /* Logo posado en el borde superior del card */
  .hero-card-wrap {
    position: relative;
    margin-top: 50px;
  }

  .hero-logo-float {
    position: absolute;
    width: 115px;
    top: -78px;
    right: 16px;
  }

  /* Reducimos padding del card */
  .hero-card {
    padding: 2.5rem 1.8rem 2.2rem;
  }

  /* Corregimos el scale y transform-origin del chat */
  .hero-chat {
    transform: none;
    width: 100%;
    margin: 2rem auto 0;
  }

  .chat-wrap {
    display: flex;
    justify-content: center;
  }

  .chat-mockup {
    width: 100%;
    max-width: 320px;
  }

  /* ── INFORME SECTION ── */

  .informe-card {
    border-radius: 12px;
    overflow: hidden;
    padding: 1.8rem 1.4rem;
    min-height: unset;
  }

  .informe-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .informe-preview {
    display: none;
  }

  /* ── FEATURES ── */
  #funcionalidades.section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    min-height: unset;
  }

  #funcionalidades .section-label {
    margin-top: 2rem;
  }

  .feature-card {
    padding: 1.5rem;
  }

  /* ── NAV (iOS Safari fixes) ── */
  nav {
    -webkit-backdrop-filter: blur(12px);
    transform: translateZ(0);
  }

  /* ── WHATSAPP FLOAT (home indicator iOS) ── */
  .wa-float {
    bottom: calc(4rem + env(safe-area-inset-bottom));
  }

  /* ── FOOTER ── */
  .footer-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }

  /* ── CUSTOM CARD (búho. pronto disponible) ── */
  .custom-card {
    padding: 1.8rem 1.4rem;
    margin-top: 0;
  }

}