/**
 * Copa Radar - Responsive Styles
 *
 * Media queries organizadas por breakpoint.
 * Enfoque mobile-first con ajustes para pantallas más grandes.
 */

/* ==========================================================================
   BREAKPOINT: TABLET Y MENOR (max-width: 960px)
   ========================================================================== */

@media (max-width: 960px) {
  /* Navigation */
  .nav {
    padding: var(--space-md) var(--section-padding-x-mobile);
  }

  .nav__links,
  .nav__langs {
    display: none;
  }

  /* Countdown */
  .countdown {
    flex-direction: column;
    gap: 0.4rem;
  }

  /* Hero */
  .hero {
    grid-template-columns: 1fr;
    padding: var(--space-3xl) var(--section-padding-x-mobile) 3rem;
    gap: var(--space-xl);
    min-height: auto;
  }

  .hero__visual {
    order: -1;
  }

  /* Language Strip */
  .lang-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .lang-strip__item {
    padding: var(--space-md);
  }

  .lang-strip__item:nth-child(2) {
    border-right: none;
  }

  .lang-strip__item:nth-child(3),
  .lang-strip__item:nth-child(4) {
    border-top: var(--border-width) solid var(--color-border);
  }

  /* Stats */
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats__item:nth-child(2) {
    border-right: none;
  }

  .stats__item:nth-child(3),
  .stats__item:nth-child(4) {
    border-top: var(--border-width) solid var(--color-border);
  }

  /* Sections */
  .section {
    padding: var(--space-3xl) var(--section-padding-x-mobile);
  }

  /* Sedes */
  .sedes {
    padding: 3rem var(--section-padding-x-mobile);
  }

  .sedes__grid {
    grid-template-columns: 1fr;
  }

  .sede {
    min-height: auto;
    padding: var(--space-xl);
  }

  /* Opening Match */
  .opening-match {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
    padding: var(--space-xl);
  }

  .opening-match__right {
    text-align: center;
  }

  /* Final Match */
  .final-match {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    padding: var(--space-md);
  }

  /* Features & How Grid */
  .features,
  .how-grid {
    grid-template-columns: 1fr;
  }

  /* Newsletter */
  .newsletter {
    padding: var(--space-3xl) var(--section-padding-x-mobile);
  }

  .newsletter__title {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }

  /* Footer */
  .footer {
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-xl) var(--section-padding-x-mobile);
    text-align: center;
  }

  .footer__links {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
  }
}

/* ==========================================================================
   BREAKPOINT: MOBILE PEQUEÑO (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
  /* Hero */
  .hero__title {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  /* Language Strip */
  .lang-strip {
    grid-template-columns: 1fr;
  }

  .lang-strip__item {
    border-right: none;
    border-bottom: var(--border-width) solid var(--color-border);
  }

  .lang-strip__item:last-child {
    border-bottom: none;
  }

  /* Stats */
  .stats {
    grid-template-columns: 1fr;
  }

  .stats__item {
    border-right: none;
    border-bottom: var(--border-width) solid var(--color-border);
    text-align: center;
  }

  .stats__item:last-child {
    border-bottom: none;
  }

  /* Map Mockup */
  .map-mockup__header {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
  }

  .map-mockup__title {
    font-size: 0.6rem;
    width: 100%;
  }

  .map-mockup__filters {
    width: 100%;
    justify-content: space-between;
  }

  .map-filter {
    font-size: 0.55rem;
    padding: 0.25rem 0.3rem;
  }

  .map-filter-btn {
    font-size: 0.55rem;
    padding: 0.25rem 0.4rem;
  }

  .map-mockup__body {
    height: 280px;
  }

  .map-mockup__legend {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Rating modal */
  .rating-modal__content {
    padding: 1rem;
    margin: 1rem;
  }

  .star-btn {
    font-size: 1.3rem;
  }

  /* Sugerencias form */
  .sugerir-form__grid {
    grid-template-columns: 1fr;
  }

  .sugerir-form__group--full {
    grid-column: 1;
  }

  /* Newsletter Form */
  .form-group {
    flex-direction: column;
  }

  .form-input {
    border-right: var(--border-width) solid rgba(255, 255, 255, 0.09);
    border-bottom: none;
  }

  .form-submit {
    width: 100%;
  }

  /* Newsletter Languages */
  .newsletter__languages {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  /* Social Proof */
  .social-proof {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ==========================================================================
   BREAKPOINT: PANTALLA GRANDE (min-width: 1200px)
   ========================================================================== */

@media (min-width: 1200px) {
  .hero {
    padding: var(--space-4xl) 8rem;
  }

  .section {
    padding: var(--section-padding-y) 8rem;
  }

  .nav {
    padding: 1.1rem 8rem;
  }

  .footer {
    padding: var(--space-xl) 8rem;
  }

  .sedes {
    padding: var(--space-4xl) 8rem var(--space-3xl);
  }

  .newsletter {
    padding: var(--section-padding-y) 8rem;
  }
}

/* ==========================================================================
   BREAKPOINT: PANTALLA EXTRA GRANDE (min-width: 1400px)
   ========================================================================== */

@media (min-width: 1400px) {
  .hero__title {
    font-size: 7rem;
  }

  .section__title {
    font-size: 4.5rem;
  }

  .newsletter__title {
    font-size: 5.5rem;
  }
}

/* ==========================================================================
   PREFERENCIAS DE USUARIO
   ========================================================================== */

/* Alto contraste */
@media (prefers-contrast: high) {
  :root {
    --color-text-primary: #ffffff;
    --color-text-muted: #999999;
    --color-border: rgba(255, 255, 255, 0.15);
  }

  .btn--primary {
    border: 2px solid white;
  }
}

/* Modo oscuro forzado (para sistemas que lo soporten) */
@media (prefers-color-scheme: dark) {
  /* El sitio ya es dark mode por defecto */
}

/* Impresión */
@media print {
  .nav,
  .countdown,
  .marquee,
  .newsletter,
  .footer {
    display: none;
  }

  body {
    background: white;
    color: black;
  }

  .hero {
    min-height: auto;
    padding: 2rem;
  }

  .hero__title,
  .section__title {
    color: black;
  }
}