/* ============================================================
   /fc27 — hub de hype para el regreso de la Liga MX a EA Sports
   FC 27 (18 clubes confirmados, sale el 25 de septiembre de 2026).
   Página 100% informativa por ahora: no hay precios de cartas que
   mostrar todavía porque el mercado de Ultimate Team no existe
   hasta que el juego esté en manos de los jugadores. Cuando eso
   pase, esta misma página es la base para meter la sección de
   precios (ver nota de "Próximamente" al final).
   ============================================================ */

/* el fondo de pizarrón táctico que nació aquí ahora vive en pizarramx.css
   (body) — pasó a ser el fondo de todo el sitio, no hace falta repetirlo
   en esta hoja. */

.f27-hero {
  position: relative;
  padding: 56px 28px 40px;
  overflow: hidden;
  border-bottom: 1px solid var(--pf-linea);
  text-align: center;
}
.f27-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(75% 190% at 50% -45%, rgba(232,184,74,0.16), transparent 68%);
}
.f27-hero-content { position: relative; max-width: 680px; margin: 0 auto; }
.f27-badge {
  display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: 0.6px; color: var(--pf-reflector); text-transform: uppercase;
  border: 1px solid rgba(232,184,74,0.4); border-radius: 999px; padding: 4px 12px;
  margin-bottom: 14px;
}
.f27-hero h1 {
  font-family: 'Anton', sans-serif; font-size: 32px; letter-spacing: 0.5px;
  color: var(--pf-cal); margin: 0 0 10px;
}
.f27-hero p { color: var(--pf-cal-muted); font-size: 14px; margin: 0 auto; max-width: 54ch; }

/* cuenta regresiva reutiliza .pf-countdown-box/.pf-countdown-num/-lbl de
   pizarramx.css (mismo componente que la ficha de partido), solo se
   centra distinto porque aquí no va junto a un marcador */
.f27-countdown-wrap { margin-top: 26px; }
.f27-countdown-label {
  font-family: 'Exo 2', sans-serif; font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.4px; color: var(--pf-cal-muted); text-transform: uppercase;
  margin: 0 0 10px;
}
.f27-countdown { display: flex; justify-content: center; gap: 10px; }

.f27-section {
  max-width: 900px; margin: 0 auto;
  padding: 40px 28px 0;
}
.f27-section h2 {
  font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 18px;
  color: var(--pf-cal); margin: 0 0 16px;
  display: flex; align-items: center; gap: 8px;
}

/* ediciones y precio */
.f27-ediciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.f27-edicion {
  background: var(--pf-panel-negro); border: 1px solid var(--pf-linea); border-radius: 12px;
  padding: 18px; text-align: center;
}
.f27-edicion-nombre {
  font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 13.5px;
  color: var(--pf-cal); margin: 0 0 8px;
}
.f27-edicion-precio {
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 22px;
  color: var(--pf-reflector);
}
.f27-edicion-precio span { font-size: 11px; color: var(--pf-cal-muted); font-weight: 400; margin-left: 3px; }

/* plataformas */
.f27-plataformas { display: flex; flex-wrap: wrap; gap: 8px; }
.f27-plataforma {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--pf-cal);
  background: rgba(244,247,241,0.06); border: 1px solid var(--pf-linea);
  border-radius: 999px; padding: 6px 14px;
}

/* grid de los 18 clubes — mismo lenguaje que .clb-grid de equipos.css
   pero más chico, aquí solo son escudos + nombre, no tarjetas completas */
.f27-clubes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.f27-club {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px; border-radius: 10px; border: 1px solid var(--pf-linea);
  background: var(--pf-panel-negro); text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.f27-club:hover { border-color: var(--pf-reflector); transform: translateY(-2px); }
.f27-club img, .f27-club .pf-crest { width: 42px; height: 42px; object-fit: contain; }
.f27-club-nombre {
  font-family: 'Exo 2', sans-serif; font-weight: 600; font-size: 11px;
  color: var(--pf-cal); text-align: center; line-height: 1.25;
}

/* aviso de "próximamente" — precios de cartas */
.f27-proximamente {
  margin-top: 8px; padding: 16px; border-radius: 10px;
  border: 1px dashed var(--pf-linea); color: var(--pf-cal-muted); font-size: 13px;
}

/* fuentes citadas — igual de chico y discreto que .pf-video-fuente */
.f27-fuentes {
  margin: 40px 0 0; padding: 18px 0 40px; border-top: 1px solid var(--pf-linea);
  font-size: 11.5px; color: var(--pf-cal-muted);
}
.f27-fuentes a { color: var(--pf-reflector); text-decoration: none; }
.f27-fuentes a:hover { text-decoration: underline; }
.f27-fuentes ul { margin: 8px 0 0; padding-left: 18px; }
.f27-fuentes li { margin-bottom: 4px; }

@media (max-width: 639px) {
  .f27-hero { padding: 40px 18px 28px; }
  .f27-hero h1 { font-size: 24px; }
  .f27-section { padding: 32px 18px 0; }
  .f27-ediciones { grid-template-columns: 1fr; }
  .f27-clubes { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}