/* FCPB — Global styles */

:root {
  --navy: #0B2545;
  --navy-deep: #061735;
  --royal: #1D4ED8;
  --sky: #4FB8E6;
  --sky-light: #A7DCF5;
  --white: #FFFFFF;
  --bone: #F4F7FB;
  --sunflower: #4FB8E6;
  --ink: #0A0F1E;
  --ink-soft: #3C4657;

  /* semantic
     El fondo de página es un gris frío apenas teñido de azul (el mismo del
     panel): las tarjetas, que son blancas, quedan por encima en vez de
     fundirse con la página. --bg-alt baja un escalón más para que las bandas
     alternadas y los encabezados internos se sigan distinguiendo del fondo. */
  --bg: #F4F7FB;
  --bg-alt: #E8EEF6;
  --bg-inverse: #0B2545;
  --fg: #0B2545;
  --fg-soft: rgba(11, 37, 69, 0.65);
  --fg-mute: rgba(11, 37, 69, 0.45);
  --border: #DDE5EF;
  --card: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(11,37,69,0.06);
  --shadow-md: 0 8px 24px -8px rgba(11,37,69,0.15);
  --shadow-lg: 0 30px 60px -20px rgba(11,37,69,0.25);
}

[data-theme="dark"] {
  --bg: #061024;
  --bg-alt: #0B1D3A;
  --bg-inverse: #0B2545;
  --fg: #E8EEF7;
  --fg-soft: rgba(232,238,247,0.7);
  --fg-mute: rgba(232,238,247,0.45);
  --border: rgba(255,255,255,0.1);
  --card: #0B1D3A;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.5);
  --shadow-lg: 0 30px 60px -20px rgba(0,0,0,0.7);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: 'Archivo', system-ui, sans-serif;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ========== NAV ========== */
.fcpb-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  /* La barra es siempre azul del club, en todas las páginas y con
     cualquier tema. Al scrollear sólo se compacta y toma sombra. */
  background: var(--navy);
  border-bottom: 1px solid transparent;
  transition: padding .3s ease, box-shadow .3s ease;
}
.fcpb-nav.is-scrolled {
  padding: 10px 0;
  box-shadow: 0 4px 18px rgba(11, 37, 69, .28);
}
.fcpb-nav-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Fondo azul fijo ⇒ el contenido del nav siempre va en blanco. */
.fcpb-nav { --nav-fg: #fff; }

.fcpb-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--nav-fg);
}
.fcpb-brand-name {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 2px;
  line-height: 1;
}
.fcpb-brand-sub {
  font-size: 9px;
  letter-spacing: 2px;
  opacity: 0.55;
  margin-top: 3px;
  font-weight: 600;
}
.fcpb-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 15.5px;
  font-weight: 500;
  margin-left: auto;
}
.fcpb-link {
  color: color-mix(in oklab, var(--nav-fg) 72%, transparent);
  position: relative;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color .2s;
}
/* El ícono va un escalón por debajo del texto en tamaño y presencia:
   acompaña y ayuda a reconocer la sección, no compite con la palabra. */
.fcpb-link-ico {
  font-size: 13px;
  opacity: .72;
  transition: opacity .2s, transform .2s;
}
.fcpb-link:hover .fcpb-link-ico,
.fcpb-link.is-active .fcpb-link-ico { opacity: 1; }
.fcpb-link:hover .fcpb-link-ico { transform: translateY(-1px); }
.fcpb-link:hover { color: var(--nav-fg); }
.fcpb-link.is-active { color: var(--nav-fg); font-weight: 600; }
.fcpb-link.is-active::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  /* abarca todo el enlace, ícono incluido */
  height: 2px;
  background: var(--sunflower);
  border-radius: 2px;
}
/* "Socios" lleva al panel: se separa del resto para que se lea como acceso. */
.fcpb-link-panel {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--nav-fg) 30%, transparent);
  color: var(--nav-fg);
  transition: background .2s, border-color .2s;
}
.fcpb-link-panel:hover {
  background: color-mix(in oklab, var(--nav-fg) 12%, transparent);
  border-color: var(--nav-fg);
}
.fcpb-link-panel::after { display: none; }
.fcpb-link-cand { font-size: 10px; opacity: .8; }

.fcpb-nav-ctas {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fcpb-theme-toggle {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--nav-fg) 25%, transparent);
  background: transparent;
  color: var(--nav-fg);
  font-size: 16px;
  display: grid;
  place-items: center;
  transition: all .2s;
}
.fcpb-theme-toggle:hover { background: var(--bg-alt); transform: rotate(15deg); }
.fcpb-cta {
  background: var(--sunflower);
  color: var(--navy);
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform .2s, box-shadow .2s;
}
.fcpb-cta { box-shadow: 0 2px 8px -2px rgba(0,0,0,.35); }
.fcpb-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -6px rgba(79,184,230,.6); }
.fcpb-cta:active { transform: translateY(0); box-shadow: 0 2px 6px -2px rgba(0,0,0,.4); }
.fcpb-cta span { transition: transform .2s; }
.fcpb-cta:hover span { transform: translateX(3px); }
.fcpb-burger { display: none; background: none; border: 0; padding: 8px; flex-direction: column; gap: 4px; }
.fcpb-burger span { width: 22px; height: 2px; background: var(--nav-fg); display: block; }

.fcpb-mobile-menu { display: none; }

@media (max-width: 1180px) {
  .fcpb-links { gap: 15px; font-size: 14.5px; }
  .fcpb-link-ico { font-size: 12px; }
  .fcpb-link-panel { padding: 6px 11px; }
}

@media (max-width: 960px) {
  .fcpb-links { display: none; }
  .fcpb-burger { display: flex; }
  .fcpb-cta { padding: 10px 14px; font-size: 12px; }
  .fcpb-brand-sub { display: none; }
  /* El desplegable continúa la barra: mismo azul, texto blanco. */
  .fcpb-mobile-menu {
    display: flex;
    flex-direction: column;
    padding: 12px 20px 20px;
    border-top: 1px solid rgba(255,255,255,.14);
    background: var(--navy);
    color: var(--nav-fg);
  }
  .fcpb-mobile-menu a {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    font-size: 16.5px;
    font-weight: 600;
    color: var(--nav-fg);
    display: flex;
    align-items: center;
    gap: 13px;
  }
  .fcpb-mobile-menu .fcpb-link-ico {
    width: 20px;
    font-size: 15px;
    text-align: center;
    flex-shrink: 0;
    color: var(--sky);
    opacity: 1;
  }
  .fcpb-mobile-menu a:last-child { border-bottom: 0; }
  /* Dentro del desplegable, "Socios" es una fila más: sin píldora. */
  .fcpb-mobile-menu .fcpb-link-panel { border: 0; padding: 14px 0; border-radius: 0; }
}

/* ========== BUTTONS ==========
   Los tres botones comparten el mismo gesto: descansan con una sombra corta,
   al pasar el mouse suben un poco y la sombra se alarga (como si la luz
   viniera de arriba), y al apretarlos vuelven a apoyarse. La curva es la
   misma en todos para que el sitio se sienta de una pieza. */
:root {
  --ease-boton: cubic-bezier(.34, 1.4, .5, 1);
  --t-boton: transform .25s var(--ease-boton), box-shadow .25s ease,
             background .2s ease, border-color .2s ease, color .2s ease;
}

.btn-primary {
  background: var(--sunflower);
  color: var(--navy);
  border: 0;
  padding: 16px 24px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 6px -1px rgba(11,37,69,.18), 0 6px 16px -8px rgba(79,184,230,.55);
  transition: var(--t-boton);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px -4px rgba(11,37,69,.2), 0 16px 32px -12px rgba(79,184,230,.75);
}
.btn-primary:active { transform: translateY(-1px); box-shadow: 0 2px 6px -2px rgba(11,37,69,.25); }

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 16px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--t-boton);
}
.btn-ghost:hover {
  border-color: var(--fg);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px -14px rgba(11,37,69,.5);
}
.btn-ghost:active { transform: translateY(-1px); box-shadow: none; }

.btn-navy {
  background: var(--navy);
  color: #fff;
  border: 0;
  padding: 16px 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 6px -1px rgba(11,37,69,.25), 0 6px 16px -8px rgba(11,37,69,.4);
  transition: var(--t-boton);
}
.btn-navy:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px -4px rgba(11,37,69,.28), 0 18px 34px -14px rgba(11,37,69,.6);
}
.btn-navy:active { transform: translateY(-1px); box-shadow: 0 2px 6px -2px rgba(11,37,69,.3); }
[data-theme="dark"] .btn-navy { background: var(--sky); color: var(--navy); }

/* La flecha de los botones acompaña el movimiento. */
.btn-primary span, .btn-ghost span, .btn-navy span { transition: transform .25s var(--ease-boton); }
.btn-primary:hover span, .btn-ghost:hover span, .btn-navy:hover span { transform: translateX(3px); }

/* Navegación por teclado: el foco tiene que verse, y no lo daba ninguno. */
.btn-primary:focus-visible, .btn-ghost:focus-visible,
.btn-navy:focus-visible, .fcpb-cta:focus-visible {
  outline: 2px solid var(--royal);
  outline-offset: 3px;
}

/* ========== TAGS / CHIPS ========== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 1.5px;
  font-weight: 700;
  border: 1px solid var(--border);
  color: var(--fg-soft);
  text-transform: uppercase;
}
.chip-dot { width: 6px; height: 6px; background: var(--sunflower); border-radius: 999px; }

.kicker {
  font-size: 11px;
  letter-spacing: 2.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--royal);
}
[data-theme="dark"] .kicker { color: var(--sky); }

/* ========== FOOTER ========== */
.fcpb-footer {
  background: var(--navy);
  color: #fff;
  padding: 80px 0 0;
  margin-top: 120px;
}
.fcpb-footer-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 64px;
}
.fcpb-footer-col { display: flex; flex-direction: column; gap: 12px; }
.fcpb-footer-col a { font-size: 14px; opacity: 0.75; transition: opacity .2s; }
.fcpb-footer-col a:hover { opacity: 1; }
.fcpb-footer-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sunflower);
  margin-bottom: 8px;
}
.fcpb-socials { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.fcpb-social {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  transition: all .2s;
}
.fcpb-social:hover { background: #fff; color: var(--navy); }
.fcpb-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 24px 32px;
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  opacity: 0.5;
}
@media (max-width: 900px) {
  .fcpb-footer-inner { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .fcpb-footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ========== PAGE HERO (shared for inner pages) ========== */
.page-hero {
  padding: 160px 0 60px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.page-hero-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
}
.page-hero h1 {
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-top: 16px;
}
.page-hero p {
  font-size: 18px;
  opacity: 0.7;
  max-width: 560px;
  margin-top: 20px;
  line-height: 1.55;
}

/* ========== FORM ========== */
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.form-field label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--fg-soft); }
.form-field input, .form-field select, .form-field textarea {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  transition: all .2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--royal);
  box-shadow: 0 0 0 4px rgba(29,78,216,0.1);
}
.form-field.error input, .form-field.error select, .form-field.error textarea {
  border-color: #EF4444;
}
.form-field .err-msg { font-size: 12px; color: #EF4444; font-weight: 600; }

/* misc */
.divider { height: 1px; background: var(--border); margin: 40px 0; }
img { max-width: 100%; }


/* ========== ELEVACIÓN DE TARJETAS ==========
   Ahora que la página tiene fondo gris, todo lo que sea "tarjeta" lleva una
   sombra suave en reposo para despegarse. El hover sigue subiendo un escalón. */
.valor-card, .cat-card, .cat-full-card, .cal-box, .cal-detail,
.staff-card, .schedule-table, .info-card, .insc-form, .insc-summary-card,
.sponsors-grid, .fact-strip {
  box-shadow: 0 1px 2px rgba(11,37,69,.04), 0 6px 16px -10px rgba(11,37,69,.14);
}
[data-theme="dark"] .valor-card, [data-theme="dark"] .cat-card,
[data-theme="dark"] .cat-full-card, [data-theme="dark"] .cal-box,
[data-theme="dark"] .cal-detail, [data-theme="dark"] .staff-card,
[data-theme="dark"] .schedule-table, [data-theme="dark"] .info-card,
[data-theme="dark"] .insc-form, [data-theme="dark"] .insc-summary-card {
  box-shadow: none;   /* en oscuro la sombra no aporta: separa el borde */
}


/* Quien pidió menos movimiento en su sistema, no lo recibe. */
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-ghost, .btn-navy, .fcpb-cta { transition: background .2s ease, color .2s ease; }
  .btn-primary:hover, .btn-ghost:hover, .btn-navy:hover, .fcpb-cta:hover { transform: none; }
}


/* ========== SONAR ==========
   Un anillo que nace en el borde del elemento, se expande y se desvanece,
   como el pulso de un radar. El elemento no se mueve: lo que viaja es la
   onda. Se dibuja sobre pseudo-elementos para no tocar la sombra propia
   del botón, y son dos ondas desfasadas para que el barrido sea continuo.
   ============================================================ */
@keyframes sonar {
  0%        { box-shadow: 0 0 0 0 rgba(79, 184, 230, .65); }
  70%, 100% { box-shadow: 0 0 0 18px rgba(79, 184, 230, 0); }
}

.fcpb-cta { position: relative; }
.fcpb-cta::before, .fcpb-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: sonar 3.2s cubic-bezier(.25, .5, .35, 1) infinite;
}
.fcpb-cta::after { animation-delay: 1.6s; }
/* Con el mouse encima ya hay respuesta visual: la onda sobra. */
.fcpb-cta:hover::before, .fcpb-cta:hover::after,
.fcpb-cta:focus-visible::before, .fcpb-cta:focus-visible::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .fcpb-cta::before, .fcpb-cta::after { animation: none; }
}