/* =================================================================
   Forma Soccer · home.css
   Estilos específicos del homepage (mockup 01).
   Cargado condicional desde index.php solo cuando body.is-home.
   ================================================================= */

/* Aliases que mapean los nombres del mockup (--blue, --orange) a los
   nombres canónicos de template.css (--brand-blue, --brand-orange).
   Permite que las reglas extraídas del mockup funcionen sin reescribir. */
:root {
  --blue: var(--brand-blue);
  --orange: var(--brand-orange);
}

/* ---------- HERO (sección de apertura) ---------- */
.hero { padding: 56px 0 90px; position: relative; }
.hero-grid {
  /* Width-based scaling restaurado — el asset Chuuta es ahora square
     1400×1400 (vs portrait 768×1376 previo). Sin aspect-ratio 1.79
     que multiplicaba la altura, el width-clamp ya no penaliza
     verticalmente. Visual col 1.1fr ≈ 645px, chuuta clamp ≈ 700px
     wide × 700 tall = hero section ~800-900px (compact above-fold).
     align-items: center — square asset luce mejor centrado vertical
     vs el end-align del portrait previo. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px; align-items: center; position: relative;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--orange); font-weight: 800;
  margin-bottom: 24px;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px;
}
.hero-eyebrow::before {
  content: ''; width: 36px; height: 2px; background: currentColor;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--orange); color: white;
  padding: 6px 12px;
  font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px;
  margin-bottom: 24px;
}
.hero-badge .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; opacity: 0.9;
}
.hero h1 {
  font-weight: 900; font-style: italic;
  font-size: clamp(32px, 11vw, 124px); line-height: 0.88;
  letter-spacing: -0.04em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 28px;
}
.hero h1 .orange { color: var(--orange); }
.hero h1 .outline {
  /* TRADE-OFF DOCUMENTADO: este fill debe coincidir con el bg
   * del section.hero (--cream). Es bg-coupled por decisión consciente.
   * Razón: stems italic 900 ~16-18px + stroke 4px deja gap visible
   * (doble outline cream-on-cream). Iteraciones 3/3.5/4/transparent
   * todas confirmaron el bug. paint-order:stroke fill + cream match
   * es la solución limpia.
   * Si bg cambia: actualizar `color` aquí. */
  font-weight: 900;
  color: var(--cream);
  -webkit-text-stroke: 2px var(--brand-blue);
  paint-order: stroke fill;
}
.hero-lead {
  font-size: 18px; line-height: 1.55; color: var(--ink-2);
  max-width: 520px; margin-bottom: 32px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-meta {
  /* 2x2 grid (era 4x1) — el text col se redujo a ~467px en viewport
     ≥1280 desde que Chuuta toma 1.5fr del hero-grid (commit 4daf424).
     4-col en ese ancho deja ~110px por celda → values como "6 jul – 1 ago"
     wrappean a 2 líneas feo. 2x2 da ~220px por celda → single-line clean.
     Phones (≤480) y todos los desktop sizes usan el mismo layout — más
     consistente que el 4x1 desktop + 2x2 mobile previo. */
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px; max-width: 600px;
}
.hero-meta-item .label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--muted); letter-spacing: 0.08em;
  font-weight: 700; text-transform: uppercase;
  margin-bottom: 6px;
}
.hero-meta-item .value {
  font-family: 'JetBrains Mono', monospace; font-size: 16px;
  font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em;
}

/* Hero visual (Chuuta + decorative cards) */
.hero-visual {
  /* min-height removido: el grid row crece naturalmente con la altura
     intrinsic del chuuta (aspect-ratio 1376:768 ≈ 1.79). A 1440 chrome
     chuuta ~749 wide → ~1340 tall. align-items: end del grid mantiene
     el text content alineado al bottom contra el chuuta. */
  position: relative;
}
.hero-chuuta {
  position: relative; z-index: 2;
  display: block;
  /* Width-based scaling restaurado post-asset-swap (1400×1400 square).
     A 1440 chrome: 52vw ≈ 749 → cap 780. Height auto = 780 (square
     aspect 1:1) — hero section ~900px total con padding (vs 1544 del
     portrait). max-width: none override del global img reset.
     PNG nativo 1400 wide — downscale a 780 es 56% (smooth render). */
  width: clamp(500px, 52vw, 780px);
  max-width: none;
  height: auto;
  margin-left: auto;
}

/* ---------- PRESTIGIO (banda mini stats) ---------- */
.prestigio-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.stat-block { border-left: 3px solid var(--orange); padding-left: 20px; }
.stat-value {
  font-weight: 900; font-style: italic;
  font-size: clamp(48px, 5vw, 64px); line-height: 1;
  letter-spacing: -0.04em; color: white;
  margin-bottom: 8px;
}
.stat-value .small { font-size: 0.6em; color: var(--orange); }
.stat-label {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: rgba(255,255,255,0.7); letter-spacing: 0.08em;
  font-weight: 700; text-transform: uppercase;
}

/* ---------- ACTIVIDADES (8 cards) ---------- */
.actividades-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.activity {
  background: white; border: 1px solid var(--line);
  padding: 28px 22px; position: relative;
  transition: all 0.2s; cursor: default;
}
.activity:hover {
  transform: translateY(-4px); border-color: var(--orange);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.08);
}
.activity.featured { background: var(--blue); color: white; border-color: var(--blue); }
.activity.featured:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.activity-num {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--orange); letter-spacing: 0.12em;
  font-weight: 700; margin-bottom: 14px;
}
.activity-icon {
  font-size: 36px; line-height: 1; margin-bottom: 18px; display: block;
}
.activity-title {
  font-weight: 900; font-style: italic;
  font-size: 18px; line-height: 1.15;
  color: var(--blue); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: -0.01em;
}
.activity.featured .activity-title { color: white; }
.activity-desc {
  font-size: 13px; line-height: 1.45; color: var(--muted);
  font-weight: 500;
}
.activity.featured .activity-desc { color: rgba(255,255,255,0.8); }

/* ---------- CATEGORÍAS (7 cards, Femenil span 2) ---------- */
.categorias-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.categoria {
  --cat-color: var(--blue);
  padding: 32px 24px;
  background: var(--cream);
  border-top: 3px solid var(--cat-color);
  position: relative; transition: transform 0.2s;
  cursor: default;
}
.categoria:hover { transform: translateY(-4px); }
.categoria.baby { --cat-color: var(--c-baby); }
.categoria.africa { --cat-color: var(--c-africa); }
.categoria.europa-chica { --cat-color: var(--c-europa-chica); }
.categoria.europa-grande { --cat-color: var(--c-europa-grande); }
.categoria.america { --cat-color: var(--c-america); }
.categoria.asia { --cat-color: var(--c-asia); }
.categoria.femenil { --cat-color: var(--c-femenil); }
.categoria-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--cat-color); letter-spacing: 0.12em;
  font-weight: 700; text-transform: uppercase; margin-bottom: 14px;
}
.categoria-name {
  font-weight: 900; font-style: italic;
  font-size: 28px; line-height: 1; letter-spacing: -0.02em;
  color: var(--cat-color); margin-bottom: 8px;
  text-transform: uppercase;
}
.categoria-years {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  font-weight: 700; color: var(--ink); margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.categoria-age {
  font-size: 12px; color: var(--muted); font-weight: 500;
}
.categoria.femenil {
  grid-column: span 2;
  background: linear-gradient(135deg, var(--cat-color) 0%, var(--orange) 100%);
  color: white;
}
.categoria.femenil .categoria-tag,
.categoria.femenil .categoria-name { color: white; }
.categoria.femenil .categoria-name { font-size: 36px; }
.categoria.femenil .categoria-years { color: rgba(255,255,255,0.95); }
.categoria.femenil .categoria-age { color: rgba(255,255,255,0.8); }

/* ---------- STATS PREVIEW (mini tabla + match card) ---------- */
.stats-preview-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px;
}
.stats-mini-table {
  background: white; border: 1px solid var(--line);
}
.stats-mini-row {
  display: grid; grid-template-columns: 40px 1fr 80px 60px;
  align-items: center; gap: 14px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}
.stats-mini-row:last-child { border-bottom: 0; }
.stats-mini-row:hover { background: var(--blue-pale); }
.stats-mini-row .pos {
  font-weight: 900; font-style: italic;
  font-size: 22px; color: var(--blue); text-align: center;
  letter-spacing: -0.02em;
}
.stats-mini-row:first-child .pos { color: var(--orange); }
.stats-mini-row .team-cell {
  display: flex; align-items: center; gap: 10px;
}
.stats-mini-row .team-badge-mini {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 900; font-style: italic;
  font-size: 11px; letter-spacing: -0.02em;
}
.stats-mini-row .team-name {
  font-weight: 800; text-transform: uppercase;
  font-size: 13px; letter-spacing: 0.01em; color: var(--ink);
}
.stats-mini-row .gd {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--ink-2); text-align: center;
}
.stats-mini-row .pts {
  font-weight: 900; font-style: italic;
  font-size: 22px; color: var(--blue); text-align: center;
  letter-spacing: -0.02em;
}
.stats-mini-row:first-child .pts { color: var(--orange); }
.stats-mini-footer {
  padding: 14px 20px; background: var(--cream); border-top: 1px solid var(--line);
  text-align: center;
}
.stats-mini-footer a {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--orange); letter-spacing: 0.08em;
  font-weight: 700; text-transform: uppercase;
  text-decoration: none;
}
.stats-mini-footer a:hover { color: var(--orange-dark); }

.match-card {
  background: var(--blue); color: white;
  padding: 28px 24px; display: flex; flex-direction: column; gap: 16px;
  text-decoration: none;
}
.match-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: rgba(255,255,255,0.7); letter-spacing: 0.1em;
  font-weight: 700; text-transform: uppercase;
}
.match-card-status {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.14); padding: 4px 10px;
}
.match-card-teams {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 12px;
}
.match-card-team {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.match-card-team .team-badge-mid {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 900; font-style: italic;
  font-size: 16px; letter-spacing: -0.02em;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.22);
}
.match-card-team .team-name-mid {
  font-weight: 800; font-style: italic;
  font-size: 13px; text-transform: uppercase; color: white;
  letter-spacing: 0.02em;
}
.match-card-score {
  display: flex; gap: 10px; align-items: baseline;
  font-weight: 900; font-style: italic;
  font-size: clamp(36px, 4vw, 48px);
  letter-spacing: -0.04em;
}
.match-card-score .sep { color: var(--orange); font-size: 70%; }
.match-card-meta {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: rgba(255,255,255,0.7); letter-spacing: 0.08em;
  font-weight: 700; text-transform: uppercase; text-align: center;
}

/* Team-badge palette para .stats-mini-row .team-badge-mini y .match-card .team-badge-mid */
.team-badge-mini.color-0, .team-badge-mid.color-0 { background: var(--brand-blue); }
.team-badge-mini.color-1, .team-badge-mid.color-1 { background: var(--brand-orange); }
.team-badge-mini.color-2, .team-badge-mid.color-2 { background: var(--c-baby); }
.team-badge-mini.color-3, .team-badge-mid.color-3 { background: var(--c-africa); }
.team-badge-mini.color-4, .team-badge-mid.color-4 { background: var(--c-europa-chica); }
.team-badge-mini.color-5, .team-badge-mid.color-5 { background: var(--c-europa-grande); }
.team-badge-mini.color-6, .team-badge-mid.color-6 { background: var(--c-america); }
.team-badge-mini.color-7, .team-badge-mid.color-7 { background: var(--c-asia); }
.team-badge-mini.color-8, .team-badge-mid.color-8 { background: var(--c-femenil); }
.team-badge-mini.color-9, .team-badge-mid.color-9 { background: var(--ink-2); }

/* ---------- CTA FINAL (sección naranja) ---------- */
.cta-final {
  background: var(--orange); color: white;
  padding: 120px 0; position: relative; overflow: hidden;
}
.cta-final::before {
  content: 'INSCRÍBETE';
  position: absolute;
  right: -40px; bottom: -50px;
  font-weight: 900; font-style: italic;
  font-size: 240px; line-height: 0.85;
  color: rgba(255,255,255,0.08);
  letter-spacing: -0.04em; pointer-events: none;
}
.cta-content { position: relative; z-index: 1; max-width: 800px; }
.cta-final h2 {
  font-weight: 900; font-style: italic;
  font-size: clamp(48px, 7vw, 96px); line-height: 0.92;
  text-transform: uppercase; letter-spacing: -0.04em;
  margin-bottom: 24px;
}
.cta-final h2 .orange { color: white; }   /* sobre fondo naranja, "orange" se pone blanco */
.cta-final p {
  font-size: 18px; line-height: 1.5;
  max-width: 540px; color: rgba(255,255,255,0.9);
  font-weight: 500; margin-bottom: 32px;
}
.cta-final .btn-secondary { background: var(--blue); }
.cta-final .btn-outline { color: white; border-color: white; }
.cta-final .btn-outline:hover { background: white; color: var(--orange); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid, .prestigio-grid, .stats-preview-grid { grid-template-columns: 1fr; }
  .actividades-grid, .categorias-grid { grid-template-columns: repeat(2, 1fr); }
  .categoria.femenil { grid-column: span 2; }
  .stats-mini-row { grid-template-columns: 36px 1fr 60px 50px; padding: 12px 16px; }
  .cta-final { padding: 64px 0; }
  .cta-final::before { font-size: 140px; }
  /* Mobile reset para Chuuta: el clamp desktop (560-880px) sería más
     ancho que el viewport mismo (390-768). Reset a width: 100% para
     que la mascota ocupe el wrap entero sin overflow. min-height del
     visual block también se reduce porque el aspect-ratio del PNG
     480×480 cuadrado significa que a 340px wide se rendea 340px alto. */
  .hero-visual { min-height: auto; }
  .hero-chuuta {
    width: 100%;
    max-width: 480px;
    margin-right: auto;
  }
}

/* Mobile <768: activities + categorias stack 1-col. A 2-col en 390px
   viewport quedan ~163px cada card, insuficiente para body text + icon
   sin truncar. Stack permite respirar el contenido completo. */
@media (max-width: 768px) {
  .actividades-grid, .categorias-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* .categoria.femenil tenía grid-column: span 2 para ocupar la fila
     entera del 2-col. En 1-col, span 2 colapsa a single col por CSS
     auto-fit pero el explícito auto es más claro. */
  .categoria.femenil { grid-column: auto; }
}

/* @media 480 removido — el default .hero-meta ya es 2x2 grid desde
   commit que sigue, aplica consistente en todos los viewports. */

/* Nota histórica: este file tenía un @media 430px que hideaba .nav-cta
   en homepage por "choque con logo+toggle". Removido — el CTA
   INSCRIBIRME es el converter principal del site, esconderlo en
   homepage (la página de mayor tráfico) era counter-productivo. Además
   creaba inconsistencia: visible en /actividades, /reglamento, etc.
   pero ausente en /. Mismo footer-grid + .nav-inner se prueba que
   acomoda los 3 elementos (logo 36px + toggle 24px + nav-cta) en
   320px+ viewports sin clash. */