/* ═══════════════════════════════════════════════════════════════════════════
   Ópera de Morelia — FASE J5 Mobile polish
   Apple-tier touch targets, type scaling, padding rhythm
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────── BASELINE 768px and below ──────────── */
@media (max-width: 768px){
  /* SECTIONS — tighter vertical rhythm */
  .mod-section,
  .opm-numbers,
  .opm-newsletter,
  .mod-photomoment,
  .mod-quote,
  .mod-portrait,
  .estudia, #contacto,
  .mod-final-cta{
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }

  /* HEADLINES — scale tighter */
  .mod-h2,
  .opm-newsletter-h2,
  .section-title,
  .mod-final-cta .mod-h2{
    font-size: clamp(2rem, 8vw, 2.6rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.02em !important;
  }

  .hero-title{
    font-size: clamp(2.4rem, 11vw, 3.4rem) !important;
    line-height: 0.98 !important;
  }

  /* LEDE — read better on small screens */
  .mod-lede,
  .hero-lede,
  .opm-newsletter-lede,
  .opm-numbers-hero-lede{
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* HERO — content respira en mobile */
  .hero-content{
    bottom: 40px !important;
    padding: 0 20px !important;
  }
  .hero-eyebrow{
    font-size: 12px !important;
    margin-bottom: 14px !important;
  }
  .hero-lede{
    margin-bottom: 28px !important;
    max-width: none !important;
  }
  .hero-cta-row{
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .hero-cta-row .btn-primary,
  .hero-cta-row .btn-secondary{
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 22px !important;
  }

  /* NUMBERS hero — stack vertically */
  .opm-numbers-hero{
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    align-items: flex-start !important;
  }
  .opm-numbers-hero-num{
    font-size: clamp(6.5rem, 32vw, 9rem) !important;
  }
  .opm-numbers-hero-suffix{
    font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
    margin-top: 0.3em !important;
  }
  .opm-numbers-hero-headline{
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
  .opm-numbers-grid{
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .opm-numbers-card-num{
    font-size: clamp(4rem, 20vw, 5.5rem) !important;
  }

  /* CARDS — single column */
  .mod-cards-3,
  .mod-cards-2,
  .mod-collab{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* INTRO section — foto respira */
  .mod-intro-split .mod-intro-img{
    aspect-ratio: 4 / 3 !important;
    border-radius: 12px !important;
    margin-top: 36px !important;
  }
  .mod-intro-split .mod-intro-text{
    margin-bottom: 0 !important;
  }

  /* PHOTO MOMENT — text scale + padding */
  .mod-photomoment{
    min-height: 480px !important;
  }
  .mod-photomoment-caption,
  .mod-photomoment-text,
  .mod-photomoment h2,
  .mod-photomoment h3,
  .mod-photomoment p{
    font-size: clamp(1.8rem, 8vw, 2.8rem) !important;
    line-height: 1.08 !important;
    padding: 0 18px !important;
  }

  /* PORTRAIT — portrait image smaller */
  .mod-portrait-img{
    width: 200px !important;
    height: 200px !important;
    margin-bottom: 36px !important;
  }
  .mod-portrait-name{
    font-size: clamp(2.2rem, 9vw, 2.8rem) !important;
  }

  /* QUOTE — scale */
  .mod-quote p{
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
    padding: 0 16px !important;
  }

  /* PULL CTAs — stack */
  .mod-cta-row,
  .opm-numbers-cta{
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .mod-cta-row .mod-btn,
  .opm-numbers-cta .opm-numbers-link{
    width: 100% !important;
    justify-content: center !important;
  }

  /* FINAL CTA — stack buttons */
  .mod-final-cta .mod-cta-row{
    flex-direction: column !important;
    align-items: stretch !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* NEWSLETTER — stack form */
  .opm-newsletter-form{
    flex-direction: column !important;
    max-width: 360px !important;
  }
  .opm-newsletter-field{ width: 100% !important; }
  .opm-newsletter-input{
    padding: 16px 20px !important;
    font-size: 16px !important; /* prevents iOS zoom */
  }
  .opm-newsletter-submit{
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 22px !important;
  }

  /* FORMS — bigger touch + no iOS zoom */
  .estudia input,
  .estudia textarea,
  .estudia select,
  #contacto input,
  #contacto textarea,
  #contacto select,
  input, textarea, select{
    font-size: 16px !important; /* prevents iOS auto-zoom */
    padding: 14px 16px !important;
  }
  .estudia label, #contacto label{
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  /* TIMELINE mobile */
  .mod-timeline-item{
    grid-template-columns: 64px 1fr !important;
    gap: 14px !important;
    padding: 22px 0 !important;
  }
  .mod-timeline-badge{
    grid-column: 1 / -1 !important;
    margin-top: 6px !important;
    margin-left: 78px !important;
  }
  .mod-timeline-year{
    font-size: 1.2rem !important;
  }
  .mod-timeline-content h3{
    font-size: 1.05rem !important;
  }

  /* COLABORADORES — minimum height */
  .mod-collab-item{
    min-height: auto !important;
    padding: 24px 22px !important;
  }
  .mod-collab-name{
    font-size: 1.25rem !important;
  }

  /* SEARCH overlay mobile */
  .opm-search-panel{
    margin: 4vh 12px 0 !important;
    padding: 12px !important;
  }
  .opm-search-input{
    font-size: 16px !important; /* prevents iOS zoom */
  }

  /* FOOTER mobile */
  footer{
    padding: 64px 0 28px !important;
  }
  .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .footer-bot{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* NAV mobile — touch targets */
  .apple-nav .an-brand{
    gap: 8px !important;
  }
  .apple-nav .an-logo{
    width: 22px !important;
    height: 22px !important;
  }
  .apple-nav .an-name{
    font-size: 15px !important;
  }
  .an-ham{
    padding: 12px !important;
  }

  /* SEARCH TRIGGER — hide on mobile (use search in hamburger instead) */
  .opm-search-trigger{
    display: none !important;
  }
}

/* ──────────── EXTRA SMALL — 380px and below (iPhone SE) ──────────── */
@media (max-width: 380px){
  .mod-section,
  .opm-numbers,
  .opm-newsletter,
  .estudia, #contacto,
  .mod-final-cta{
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .hero-title{
    font-size: clamp(2rem, 12vw, 2.8rem) !important;
  }
  .mod-h2,
  .opm-newsletter-h2{
    font-size: clamp(1.7rem, 8.5vw, 2.3rem) !important;
  }
  .opm-numbers-hero-num{
    font-size: clamp(5.5rem, 30vw, 7.5rem) !important;
  }

  /* Hero content tighter */
  .hero-content{
    bottom: 32px !important;
    padding: 0 16px !important;
  }
}

/* ──────────── LANDSCAPE small ──────────── */
@media (max-width: 900px) and (orientation: landscape){
  .hero-content{
    bottom: 24px !important;
  }
  .hero-title{
    font-size: clamp(2.4rem, 6vw, 3.4rem) !important;
  }
  .hero-cta-row{
    flex-direction: row !important;
  }
}

/* ──────────── TABLET 768-1024 ──────────── */
@media (min-width: 768px) and (max-width: 1024px){
  .mod-cards-3{
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .mod-collab{
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .opm-numbers-hero{
    grid-template-columns: 1fr 1fr !important;
  }
}