/* ============================================================================
   PENCA MUNDIAL 2026 — Responsive v2.0
   ============================================================================ */

/* Breakpoints */
:root {
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}

/* Imágenes y videos */
img, video, iframe { max-width: 100%; height: auto; }

/* Contenedor responsive */
.container {
    width: 100%;
    padding-right: 16px;
    padding-left: 16px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* ── Match cards responsive ── */
@media (max-width: 480px) {
    .match-card__body { padding: 12px 14px; }
    .match-team__name { font-size: .82rem; }
    .match-center { padding: 8px 10px; min-width: 56px; }
    .match-center__score { font-size: 1.5rem; }
    .prono-input { width: 34px; height: 30px; font-size: .9rem; }
}

/* ── Rank rows responsive ── */
@media (max-width: 480px) {
    .rank-row { padding: 9px 12px; gap: 9px; }
    .rank-name { font-size: .82rem; }
    .rank-pts { font-size: 1.2rem; }
}

/* ── Podio responsive ── */
@media (max-width: 480px) {
    .podio { gap: 4px; }
    .podio__item--1 .podio__avatar { width: 56px; height: 56px; font-size: 18px; }
    .podio__item--1 .podio__bar { width: 68px; height: 64px; }
    .podio__item--2 .podio__bar, .podio__item--3 .podio__bar { width: 56px; }
}

/* ── Countdown responsive ── */
@media (max-width: 400px) {
    .countdown { gap: 6px; }
    .countdown__box { min-width: 52px; padding: 10px 10px; }
    .countdown__num { font-size: 2rem; }
}

/* ── Form responsive ── */
@media (max-width: 520px) {
    .form-box { padding: 28px 20px; border-radius: var(--r-lg); }
    .field-row-2 { grid-template-columns: 1fr; }
}

/* ── Section titles responsive ── */
@media (max-width: 480px) {
    .section-title { font-size: 1.8rem; }
}

/* ── Stat cards grid responsive ── */
@media (max-width: 480px) {
    .stat-card__num { font-size: 1.7rem; }
}

/* ── Tables responsive ── */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Botones responsive ── */
@media (max-width: 380px) {
    .btn--lg { padding: 11px 20px; font-size: .9rem; }
    .btn { padding: 9px 16px; font-size: .82rem; }
}

/* ── Footer responsive ── */
@media (max-width: 768px) {
    .site-footer { padding: 32px 16px 20px; margin-top: 48px; }
    .site-footer__inner { flex-direction: column; gap: 20px; }
}

/* ── Group cards responsive ── */
@media (max-width: 480px) {
    .group-table th:nth-child(n+5),
    .group-table td:nth-child(n+5) { display: none; }
}

/* ── Live dot animation ── */
@keyframes pulse-live {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251,93,19,.5); }
    50% { box-shadow: 0 0 0 5px rgba(251,93,19,0); }
}
.live-dot { animation: pulse-dot 1.2s ease-in-out infinite, pulse-live 2s ease-in-out infinite; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-border); }

/* ── Mejoras táctiles y de espaciado en móvil ── */
@media (max-width: 768px) {
    /* Áreas de toque más grandes para links y botones */
    .btn, .nav-links a, button { min-height: 42px; }
    /* Contenido principal con margen lateral cómodo */
    main, .page-wrap, .content-wrap { padding-left: 14px; padding-right: 14px; }
    /* Evitar overflow horizontal */
    body { overflow-x: hidden; }
    /* Hero del index más compacto */
    .hero { padding: 28px 16px !important; }
    .hero__visual { margin-top: 24px; }
    /* Grid de 2 columnas del index pasa a 1 */
    .main-grid, .hero-grid { grid-template-columns: 1fr !important; }
}

/* ── Inputs: evitar zoom automático en iOS (font-size >= 16px) ── */
@media (max-width: 768px) {
    input, select, textarea { font-size: 16px !important; }
    .prono-input { font-size: 16px !important; }
}

/* ── Tablas anchas: scroll horizontal suave en móvil ── */
@media (max-width: 600px) {
    .top10-row { grid-template-columns: 40px 1fr 70px 50px; gap: 8px; padding: 10px 12px; }
}