/* =====================================================================
   HORIZON PADEL · v2-skin.css — Rediseño visual V2
   Cambia la PIEL del sitio (fondos, tarjetas, títulos, formularios)
   sobre el marcado existente. Carga después de motion-v2.css.
   ===================================================================== */

/* ------------------------------------------------ Fondos por sección
   Textura de líneas de pista + nebulosas de color alternadas: el fondo
   deja de ser plano y cada sección tiene atmósfera propia. */
html.mo-on main > section:nth-of-type(odd):not(.trn-hero):not(.mo-cta),
html.mo-on body > section:nth-of-type(odd):not(.trn-hero):not(#site-hero):not(.mo-cta) {
  background-image:
    radial-gradient(ellipse 55% 60% at 0% 0%, rgba(0, 87, 255, 0.10), transparent 62%),
    radial-gradient(ellipse 45% 55% at 100% 100%, rgba(255, 140, 56, 0.05), transparent 60%),
    repeating-linear-gradient(90deg, rgba(120, 160, 255, 0.022) 0 1px, transparent 1px 120px);
}
html.mo-on main > section:nth-of-type(even):not(.trn-hero):not(.mo-cta),
html.mo-on body > section:nth-of-type(even):not(.trn-hero):not(#site-hero):not(.mo-cta) {
  background-image:
    radial-gradient(ellipse 50% 55% at 100% 0%, rgba(255, 140, 56, 0.07), transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(0, 87, 255, 0.08), transparent 62%),
    repeating-linear-gradient(90deg, rgba(120, 160, 255, 0.022) 0 1px, transparent 1px 120px);
}
/* línea de luz que separa secciones */
html.mo-on main > section:not(.trn-hero) + section:not(.mo-cta) {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 5%, rgba(0, 120, 255, 0.35) 35%, rgba(255, 140, 56, 0.25) 65%, transparent 95%) 1;
}

/* --------------------------------------------------- Títulos de sección
   Más rotundos: barra de energía inclinada junto al label. */
html.mo-on .section-label, html.mo-on .trn-label {
  display: inline-flex; align-items: center; gap: 10px;
}
html.mo-on .section-label::before, html.mo-on .trn-label::before {
  content: ''; width: 26px; height: 3px; flex: none;
  transform: skewX(-24deg);
  background: linear-gradient(90deg, var(--mo-blue, #0057ff), var(--mo-cyan, #36c2ff));
  box-shadow: 0 0 12px rgba(0, 110, 255, 0.7);
}
html.mo-on .section-title { letter-spacing: 0.005em; }

/* ------------------------------------------------------ Tarjetas (global)
   Borde degradado luminoso + cristal más profundo + hover con energía. */
html.mo-on .stat-card, html.mo-on .sede-card, html.mo-on .premio-item,
html.mo-on .nos-club-card, html.mo-on .faq-item, html.mo-on .evento-card,
html.mo-on .beneficio-card, html.mo-on .como-step, html.mo-on .valor-card,
html.mo-on .equipo-card, html.mo-on .contacto-card, html.mo-on .nos-stat-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)) padding-box,
    linear-gradient(150deg, rgba(70, 130, 255, 0.45), rgba(255, 255, 255, 0.06) 38%, rgba(255, 140, 56, 0.28)) border-box;
  border: 1px solid transparent;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 8, 0.45);
  transition: transform 0.35s var(--mo-ease, ease), box-shadow 0.35s var(--mo-ease, ease);
}
html.mo-on .stat-card:hover, html.mo-on .sede-card:hover, html.mo-on .premio-item:hover,
html.mo-on .evento-card:hover, html.mo-on .beneficio-card:hover, html.mo-on .como-step:hover {
  box-shadow: 0 26px 60px rgba(0, 20, 80, 0.55), 0 0 0 1px rgba(80, 150, 255, 0.35);
}

/* números de stats con degradado de marca */
html.mo-on .stat-number, html.mo-on .rh-stat-num, html.mo-on .nos-stat-card b {
  background: linear-gradient(110deg, #6db4ff 5%, #ffffff 55%, #8fd0ff 95%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------- RANKING
   Pestañas pill + premios con metal de verdad (oro/plata/bronce). */
html.mo-on .cat-tab {
  border-radius: 100px !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  text-transform: uppercase; letter-spacing: 0.06em;
}
html.mo-on .cat-tab.active, html.mo-on .cat-tab[aria-pressed="true"] {
  background: linear-gradient(100deg, #0057ff, #2b86ff);
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 26px rgba(0, 80, 255, 0.45);
}
html.mo-on .premio-item.gold {
  background:
    linear-gradient(180deg, rgba(255, 210, 74, 0.12), rgba(255, 255, 255, 0.012)) padding-box,
    linear-gradient(150deg, rgba(255, 210, 74, 0.8), rgba(255, 255, 255, 0.08) 45%, rgba(255, 170, 40, 0.5)) border-box;
}
html.mo-on .premio-item.silver {
  background:
    linear-gradient(180deg, rgba(210, 220, 240, 0.10), rgba(255, 255, 255, 0.012)) padding-box,
    linear-gradient(150deg, rgba(220, 230, 245, 0.65), rgba(255, 255, 255, 0.07) 45%, rgba(160, 175, 200, 0.45)) border-box;
}
html.mo-on .premio-item.bronze {
  background:
    linear-gradient(180deg, rgba(205, 127, 50, 0.12), rgba(255, 255, 255, 0.012)) padding-box,
    linear-gradient(150deg, rgba(225, 150, 80, 0.7), rgba(255, 255, 255, 0.07) 45%, rgba(160, 95, 40, 0.5)) border-box;
}
html.mo-on .premio-medal { font-size: 1.6em; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); }

/* ------------------------------------------------------ NOSOTROS
   Línea temporal con energía + tarjetas de club. */
html.mo-on .tl-dot {
  background: linear-gradient(135deg, #0057ff, #36c2ff) !important;
  box-shadow: 0 0 0 4px rgba(0, 87, 255, 0.18), 0 0 18px rgba(0, 120, 255, 0.8) !important;
}
html.mo-on .tl-year {
  font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif; font-size: 1.5em;
  background: linear-gradient(110deg, #6db4ff, #fff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html.mo-on .nos-club-name { letter-spacing: 0.02em; }

/* --------------------------------------------------- CONTACTO + FAQ
   Inputs de cristal con anillo de foco; FAQ como tarjetas. */
html.mo-on .form-input, html.mo-on .form-group textarea, html.mo-on .form-group select {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
html.mo-on .form-input:focus, html.mo-on .form-group textarea:focus {
  border-color: rgba(60, 140, 255, 0.85) !important;
  box-shadow: 0 0 0 4px rgba(0, 100, 255, 0.18) !important; outline: none;
}
html.mo-on .faq-item { border-radius: 14px; overflow: hidden; }
html.mo-on .faq-question { letter-spacing: 0.01em; }
html.mo-on .faq-icon { color: var(--mo-cyan, #36c2ff); }

/* ------------------------------------------------------ EVENTOS (home/americanas)
   Tarjetas de americana con cabecera de energía. */
html.mo-on .evento-card { overflow: hidden; }
html.mo-on .evento-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, #0057ff, #36c2ff 55%, #ff8c38);
  opacity: 0.85;
}

/* --------------------------------------------------------- Footer + nav */
html.mo-on #site-footer { border-top: 1px solid rgba(80, 130, 255, 0.18); }

@media (max-width: 720px) {
  html.mo-on .section-label::before, html.mo-on .trn-label::before { width: 18px; }
}

/* Botón "Ver todas las americanas" (solo home, lo inyecta el loader) */
.eventos-vertodas { text-align: center; margin-top: 1.8rem; }
.eventos-vertodas-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.95rem 1.9rem; border-radius: 100px;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 700;
  font-size: 1.02rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  background: linear-gradient(90deg, #0057ff, #2b86ff);
  box-shadow: 0 12px 30px rgba(0, 87, 255, 0.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.eventos-vertodas-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0, 87, 255, 0.38); }
.ranking-more-link { display: inline-block; text-decoration: none; }

/* =====================================================================
   MOBILE V2 — pulido específico de móvil (la mayoría entra por aquí).
   Se carga la última: usa !important para ganar a los breakpoints viejos.
   Objetivo: que NO parezca un escritorio encogido. Aire, tipografía
   grande, targets cómodos y tarjetas que respiran.
   ===================================================================== */
@media (max-width: 600px) {
  /* Marcas de agua gigantes fuera (limpieza + rendimiento) */
  .mo-watermark { display: none !important; }

  /* Ritmo de secciones: más aire arriba/abajo */
  main > section, body > section { padding-top: 4.6rem !important; padding-bottom: 4.6rem !important; }

  /* AMERICANAS / EVENTOS — a 1 columna, grandes y legibles */
  .eventos-grid { grid-template-columns: 1fr !important; gap: 0.95rem !important; }
  .evento-card { border-radius: 16px !important; }
  .evento-body { padding: 1.1rem 1.15rem !important; }
  .evento-date { font-size: 1.05rem !important; line-height: 1.1 !important; padding-right: 76px !important; }
  .evento-sede { font-size: 0.85rem !important; margin-bottom: 0.6rem !important; }
  .evento-horario { font-size: 1.4rem !important; }
  .evento-precio { font-size: 1.35rem !important; }
  .evento-extra { font-size: 0.74rem !important; padding: 0.36rem 0.62rem !important; line-height: 1.2 !important; }
  .inscribirse-btn { font-size: 0.86rem !important; padding: 0.9rem 0.7rem !important; letter-spacing: 0.05em !important; }
  .evento-badge { font-size: 0.64rem !important; padding: 0.28rem 0.58rem !important; }

  /* Filtros: chips cómodos de tocar */
  .event-filter-btn { padding: 0.66rem 0.95rem !important; font-size: 0.76rem !important; }

  /* SOBRE — stats en 2x2 compacto con más fuerza */
  .sobre-stats { grid-template-columns: 1fr 1fr !important; gap: 0.8rem !important; }
  .sobre-stats .stat-card { padding: 1.15rem 1rem !important; }
  .stat-number { font-size: 2.35rem !important; }

  /* SEDES — una columna, tarjetas amplias */
  .sedes-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }

  /* CTAs del hero a ancho cómodo */
  .hero-btns a, .trn-hero-cta .trn-btn { min-height: 52px !important; }
}

@media (max-width: 430px) {
  .hero-headline { font-size: 2.6rem !important; }
  .evento-horario, .evento-precio { font-size: 1.3rem !important; }
}