/* ═══════════════════════════════════════════════════════════
   MOBILE.CSS — Fútbol Sin Fronteras
   ───────────────────────────────────────────────────────────
   Solo overrides responsivos. Los estilos base están en
   styles.css y aplican a todas las pantallas incluyendo desktop.
   
   Breakpoints:
     ≤ 1050px  → tablet landscape
     ≤  900px  → tablet portrait / mobile landscape
     ≤  640px  → mobile portrait
     ≤  400px  → mobile pequeño
   ═══════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   TABLET LANDSCAPE (≤ 1050px)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1050px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
  .yt-stats-side { width: 70px; }
  .yt-stat-side-num { font-size: 1rem; }
  .yt-stat-side-label { font-size: 0.48rem; }
}

/* ────────────────────────────────────────────────────────────
   TABLET / MOBILE LANDSCAPE (≤ 900px)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Header */
  .main-nav { display: none; }
  .brand-divider, .brand-program { display: none; }
  .hamburger { display: flex; }
  .header-inner { height: 56px; padding: 0 16px; justify-content: space-between; }
  .brand-name { font-size: 1.05rem; letter-spacing: 0.12em; }
  .brand-tag  { font-size: 0.52rem; }
  
  /* Back to top visible en móvil */
  .back-to-top { display: flex; }

  /* Hero */
  .hero { min-height: 65vh; }
  .hero-content { padding: 72px 24px 52px; }

  /* Video + stats */
  .video-wrapper-outer { flex-direction: column; }
  .yt-stats-side {
    flex-direction: row;
    width: 100%;
    border: 1px solid var(--border);
    border-bottom: none;
    padding: 0;
  }
  .yt-stat-side-item    { flex: 1; padding: 12px 8px; }
  .yt-stat-side-divider { width: 1px; height: auto; margin: 8px 0; }
  .video-wrapper { grid-template-columns: 1fr; }

  /* Archivo */

  /* Acerca de mí */
  .about-grid    { grid-template-columns: 1fr; gap: 0; }
  .about-visual  { padding-top: 32px; order: 2; }
  .about-content { order: 1; }
  .about-photo   { width: 200px; height: 200px; margin: 0 auto; }
  .about-stats   { gap: 16px; justify-content: center; }
  .stat          { text-align: center; }

  /* Homenaje */
  .tribute-inner         { grid-template-columns: 1fr; gap: 36px; }
  .tribute-photo         { max-width: 100%; height: auto; max-height: 420px; object-fit: contain; object-position: center; background: var(--bg); }
  .tribute-photo-deco    { display: none; }
  .tribute-photo-wrap    { display: flex; justify-content: center; }
  
  /* SM Tribute (nuevo homenaje) */
  .sm-tribute-inner { grid-template-columns: 1fr; gap: 32px; }
  .sm-tribute-photo { max-width: 100%; }
  .sm-tribute-photo-deco { display: none; }

  /* Grupos / Partidos */
  .grupos-grid { grid-template-columns: 1fr 1fr; }
  .partido-card { grid-template-columns: 1fr; text-align: center; }
  .partido-equipo.right { text-align: center; }

  /* Sponsors */
}

/* ────────────────────────────────────────────────────────────
   MOBILE PORTRAIT (≤ 640px)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Global */
  .section       { padding: 48px 0; }
  .container     { padding: 0 18px; }
  .section-title { font-size: clamp(2rem, 8vw, 3rem); }

  /* Header */
  .header-inner { padding: 0 18px; }
  .brand-name   { font-size: 1.1rem; }
  .brand-tag    { font-size: 0.55rem; letter-spacing: 0.18em; }

  /* Hero */
  .hero         { min-height: 55vh; }
  .hero-content { padding: 56px 18px 48px; }
  .hero-subtitle { font-size: 0.65rem; letter-spacing: 0.22em; }
  .hero-title    { font-size: clamp(3.2rem, 13vw, 5rem); margin-bottom: 16px; }
  .hero-desc     { font-size: 0.92rem; margin-bottom: 28px; }
  .cta-btn       { padding: 12px 24px; font-size: 0.78rem; }

  /* Live banner */
  .live-banner-inner { padding: 10px 16px; gap: 10px; }
  .live-title { display: none; }
  .live-label { display: none; }
  .live-btn   { padding: 8px 14px; font-size: 0.7rem; }
  /* countdown visible en móvil */

  /* Video */
  .video-meta  { padding: 20px 0 0; }
  .video-title { font-size: 1.05rem; line-height: 1.3; }
  .video-desc  { font-size: 0.85rem; }
  .yt-link     { font-size: 0.7rem; padding: 10px 16px; }
  .yt-link svg { width: 15px; height: 15px; }
  .yt-stat-side-num   { font-size: 1rem; }
  .yt-stat-side-label { font-size: 0.45rem; }
  .yt-stat-side-item  { padding: 10px 4px; }

  /* Archivo */
  .archivo-canal-btn { width: 100%; justify-content: center; }
  .archivo-thumb { width: 130px; flex-shrink: 0; aspect-ratio: unset; height: auto; }
  .archivo-info  { padding: 12px; }
  .archivo-title { font-size: 0.85rem; -webkit-line-clamp: 3; }
  .archivo-date  { font-size: 0.62rem; }
  .archivo-duration { font-size: 0.62rem; }

  /* Acerca de mí */
  .about-stats { flex-wrap: wrap; gap: 20px; }
  .stat        { min-width: calc(50% - 10px); }
  .stat-num    { font-size: 2rem; }

  /* Homenaje */
  .tribute-section { padding: 48px 0; }
  .tribute-title   { font-size: clamp(1.4rem, 5vw, 2rem); }
  .tribute-name    { font-size: 1.1rem; }
  .tribute-desc    { font-size: 0.88rem; }
  .tribute-legacy  { font-size: 0.88rem; }
  .tribute-photo   { width: 100%; height: 240px; object-fit: cover; object-position: top; }
  
  /* SM Tribute (nuevo homenaje) */
  .sm-tribute { padding: 48px 0; }
  .sm-tribute-title { font-size: clamp(1.5rem, 5vw, 2rem); }
  .sm-tribute-name { font-size: 1rem; }
  .sm-tribute-desc { font-size: 0.88rem; }
  .sm-tribute-quote { font-size: 0.85rem; padding: 16px 20px; }

  /* Footer */
  .footer-grid     { grid-template-columns: 1fr; }
  .footer-brand    { justify-content: center; }
  .footer-social   { align-items: center; }
  .footer-contact,
  .footer-donate   { align-items: center; text-align: center; }
  .footer-mail-btn,
  .mp-btn          { align-self: center; }
  .footer-body     { padding: 36px 0 28px; }

  /* Grupos */
  .grupos-grid { grid-template-columns: 1fr; }

  /* Back to top */
  .back-to-top { bottom: 20px; right: 16px; width: 42px; height: 42px; }
  .back-to-top svg { width: 20px; height: 20px; }

}

/* ────────────────────────────────────────────────────────────
   MOBILE PEQUEÑO (≤ 400px)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  .brand-name         { font-size: 0.95rem; }
  .stat-num           { font-size: 1.7rem; }
}

/* ── Video section responsive ── */
@media (max-width: 768px) {
  .video-section-title { font-size: 2.4rem; margin-bottom: 28px; }
  .video-frame-wrap    { max-width: 100%; }
  .video-info          { padding: 0 4px; }
  .video-title         { font-size: 1.4rem; }
}

/* ── Carousel responsive ────────────────────────────── */
@media (max-width: 768px) {
  .archivo-carousel-card { width: 240px; }
}
@media (max-width: 480px) {
  .archivo-carousel-card { width: 200px; }
}

/* ── Patrocinios responsive ── */
@media (max-width: 600px) {
  .patrocinios-logos { gap: 28px; }
  .patrocinio-logo   { height: 54px; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE-FIRST PREMIUM — Comprehensive additions
   ══════════════════════════════════════════════════════════════ */

/* ── Touch targets mínimos 44x44px ─────────────────────────── */
@media (max-width: 768px) {
  .nav-btn, .btn-primary-global, .btn-outline-global,
  .hamburger, .close-btn, button {
    min-height: 44px;
  }

  /* Hero principal */
  .hero-section h1,
  .hero h1 { font-size: clamp(2.4rem, 9vw, 4rem); line-height: .92; }
  .hero-section p,
  .hero p { font-size: clamp(.95rem, 3.5vw, 1.1rem); line-height: 1.7; }

  /* Secciones: padding reducido */
  section { padding: 44px 0 !important; }

  /* Cards: padding interno adecuado para táctil */
  .card, .feature-card, .info-card { padding: 18px 16px; }

  /* Grids: una columna en < 640px */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Imágenes: siempre responsive */
  img { max-width: 100%; height: auto; }

  /* No scroll horizontal */
  .container, .inner, main, section, header, footer {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Focus visible para accesibilidad */
  :focus-visible { outline: 2px solid var(--orange, #f05a00); outline-offset: 2px; }

  /* Formularios: inputs full-width y táctiles */
  input, select, textarea {
    width: 100%;
    min-height: 44px;
    font-size: 16px; /* evita zoom en iOS */
    box-sizing: border-box;
  }
  textarea { min-height: 100px; }

  /* Radio player y embeds: responsive */
  .radio-player, iframe, embed { max-width: 100%; }
}

@media (max-width: 640px) {
  /* Tipografía: líneas más cómodas */
  body { font-size: 15px; line-height: 1.65; }

  /* Contenedor con padding consistente */
  .container, .inner { padding-left: 16px !important; padding-right: 16px !important; }

  /* Header: logo más pequeño */
  .site-logo img, .logo img { max-height: 36px; }

  /* CTA buttons: full width en mobile */
  .cta-section .btn, .hero .btn { width: 100%; text-align: center; }

  /* Evitar text-overflow */
  h1, h2, h3, h4, p, a, span {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

@media (max-width: 400px) {
  /* Screens muy pequeñas: reducir paddings adicionales */
  .container, .inner { padding-left: 12px !important; padding-right: 12px !important; }
  h1 { font-size: clamp(1.8rem, 8vw, 2.4rem) !important; }
}