/* ============================================================
   LOOOPIA — styles.css
   ============================================================ */

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-bg: #0A0A0A;
  --color-bg-2: #111111;
  --color-bg-3: #0e0e0e;
  --color-bg-card: #ffffff;
  --color-bg-card-alt: #f7f7f5;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-dark: rgba(255, 255, 255, 0.08);

  --color-text-primary: #111111;
  --color-text-secondary: #888888;
  --color-text-light: rgba(255, 255, 255, 0.35);

  --color-accent: #FF4D1C;
  --color-trail: #3B6D11;
  --color-utmb: #3333aa;
  --color-cada: #7a3800;

  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  --radius-card: 12px;
  --radius-pill: 20px;
  --radius-btn: 6px;
}

html,
body {
  font-family: var(--font-body);
  background: var(--color-bg-card-alt);
  color: var(--color-text-primary);
  min-height: 100vh;
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
  background: var(--color-bg);
  padding: 20px 24px 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 16px;
  padding: 16px 0;
}

.header {
  background: var(--color-bg);
  padding: 20px 24px 0;
  position: relative;
  overflow: hidden;
}

/* Carrusel de fondo */
.header-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.header-carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.header-carousel img.active {
  opacity: 1;
}

/* Overlay oscuro para que se lea el logo */
.header-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

/* Todo el contenido del header encima */
.header-inner,
.header-stats {
  position: relative;
  z-index: 2;
}

/* Logo */
.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1;
}

.logo-ooo {
  color: var(--color-accent);
}

.logo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-img {
  height: 100px;
  width: auto;
  display: block;
}

.tagline {
  font-size: 30px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-top: 4px;
  text-align: center;
}

/* Beta badge */
.badge-beta {
  position: absolute;
  right: 0;
  top: 16px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.5px;
  background: rgba(255, 77, 28, 0.15);
  color: var(--color-accent);
  border: 1px solid rgba(255, 77, 28, 0.3);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}

/* Stats row */
.header-stats {
  display: flex;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border-dark);
  justify-content: center;
}

.stat {
  text-align: center;
}

.stat-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.stat-label {
  font-size: 13px;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 3px;
}

/* ============================================================
   TABS (Todas / Trail / Calle)
   ============================================================ */
.tabs-bar {
  display: flex;
  justify-content: center;
  background: var(--color-bg-2);
  border-bottom: 1px solid var(--color-border-dark);
}

.tab-btn {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 14px 24px;
  font-weight: 500;
  padding: 12px 18px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.tab-btn:hover {
  color: rgba(255, 255, 255, 0.7);
}

.tab-btn.active {
  color: #fff;
  border-bottom-color: var(--color-accent);
}

.tab-btn.trail-tab.active {
  border-bottom-color: var(--color-trail);
}

/* ============================================================
   FILTER CHIPS
   ============================================================ */
.filters-bar {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 24px;
  background: var(--color-bg-2);
  flex-wrap: wrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.filters-bar::-webkit-scrollbar {
  display: none;
}

.prov-bar {
  background: var(--color-bg-3);
  border-bottom: 1px solid var(--color-border-dark);
}

.chip {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 18px;
  font-weight: 400;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.chip:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
}

.chip.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  font-weight: 500;
}

.chip.trail-chip.active {
  background: var(--color-trail);
  border-color: var(--color-trail);
}

/* ============================================================
   RESULTS HEADER
   ============================================================ */
.results-header {
  padding: 12px 24px 6px;
  background: var(--color-bg-card-alt);
  border-bottom: 0.5px solid var(--color-border);
}

.results-count {
  font-size: 11px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ============================================================
   RACE CARDS — grid centrado
   ============================================================ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 24px;
  max-width: 1100px;
  margin: 0 auto;
  background: var(--color-bg-card-alt);
}

.race-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-card);
  border: 0.5px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.race-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

.org-riocuarto,
.org-madryn,
.org-byla,
.org-sierra,
.org-paine,
.org-maringa,
.org-carreratt,
.org-conin,
.org-volcano,
.org-carlospaz,
.org-junin,
.org-sucia,
.org-rtc,
.org-tilcara,
.org-bimbo,
.org-perfilx {
  background: #1a1a1a;
  color: #ccc;
  border: 0.5px solid #444;
}

.org-dubai {
  background: #1a1400;
  color: #ffcc44;
  border: 0.5px solid #aa8800;
}

/* ============================================================
   MONTH DIVIDER
   ============================================================ */
.month-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0 8px;
}

.month-divider:first-child {
  margin-top: 0;
}

.month-divider span {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--color-accent);
  white-space: nowrap;
}

.month-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--color-border), transparent);
}

/* ── Imagen ── */
.card-img-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  flex-shrink: 0;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.race-card:hover .card-img {
  transform: scale(1.04);
}

.card-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Contenido debajo de la imagen ── */
.card-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  flex: 1;
}

/* Date block */
.date-block {
  text-align: center;
  border-radius: 8px;
  padding: 8px 6px;
  min-width: 50px;
  flex-shrink: 0;
}

.date-block.calle {
  background: var(--color-accent);
}

.date-block.trail {
  background: var(--color-trail);
}

.date-block.utmb {
  background: #1a1a2e;
  border: 1px solid #5555cc;
}

.date-block.cada {
  background: var(--color-cada);
}

.date-block.past {
  background: #e8e8e8 !important;
  border: none !important;
}

.date-day {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.date-month {
  font-size: 9px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.date-block.past .date-day,
.date-block.past .date-month {
  color: #aaa;
}

/* Card body */
.card-body {
  min-width: 0;
  flex: 1;
}

.card-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.card-meta {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Distance pills */
.distances {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.dist-pill {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 10px;
  background: #f0f0ee;
  color: var(--color-text-secondary);
  border: 0.5px solid #ddd;
}

.dist-pill.ultra {
  background: #EAF3DE;
  color: var(--color-trail);
  border-color: #C0DD97;
}

/* Card right column */
.card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* Org badges */
.org-badge {
  font-size: 9px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.org-sf {
  background: #E6F1FB;
  color: #185FA5;
}

.org-cdc {
  background: #EEEDFE;
  color: #534AB7;
}

.org-nandu {
  background: #FAECE7;
  color: #993C1D;
}

.org-ilvr {
  background: #EAF3DE;
  color: #3B6D11;
}

.org-utmb {
  background: #e8e8ff;
  color: #3333aa;
}

.org-pr {
  background: #0a2a0a;
  color: #7ec87e;
  border: 0.5px solid #3B6D11;
}

.org-champa {
  background: #2a1a00;
  color: #ffb347;
  border: 0.5px solid #7a3800;
}

.org-cada {
  background: #fff3e8;
  color: #a84800;
}

.org-mtu {
  background: #f0f7ee;
  color: #2d5a1b;
  border: 0.5px solid #9dc87e;
}

.org-utacch {
  background: #1a0a2e;
  color: #c4a0ff;
  border: 0.5px solid #6633cc;
}

.org-intl {
  background: #e8f4f8;
  color: #1a6a8a;
}

.org-vut {
  background: #1a2e1a;
  color: #8bc47e;
  border: 0.5px solid #3B6D11;
}

.org-safe {
  background: #1a1a2e;
  color: #7eb8ff;
  border: 0.5px solid #3355aa;
}

.org-turmalina {
  background: #2e1a2e;
  color: #d4a0ff;
  border: 0.5px solid #8833aa;
}

.org-vut {
  background: #1a2e1a;
  color: #8bc47e;
  border: 0.5px solid #3B6D11;
}

.org-arco {
  background: #2e2a1a;
  color: #ffc87e;
  border: 0.5px solid #aa7700;
}

.org-mons {
  background: #1a2a2e;
  color: #7ecfff;
  border: 0.5px solid #0077aa;
}

.org-czs {
  background: #1a2a1a;
  color: #90d090;
  border: 0.5px solid #3B6D11;
}

.org-lagos {
  background: #1a1a3a;
  color: #90b0ff;
  border: 0.5px solid #3355cc;
}

.org-cruce {
  background: #1a0a0a;
  color: #ff9090;
  border: 0.5px solid #aa3333;
}

.org-etapa {
  background: #0a1a2a;
  color: #90c8ff;
  border: 0.5px solid #1155aa;
}

.org-brutus {
  background: #2a1a00;
  color: #ffaa44;
  border: 0.5px solid #aa5500;
}

.org-suca {
  background: #001a2a;
  color: #44aaff;
  border: 0.5px solid #0055aa;
}

.org-mpe {
  background: #001a10;
  color: #44ffaa;
  border: 0.5px solid #00aa55;
}

.org-mdr {
  background: #1a001a;
  color: #ff90ff;
  border: 0.5px solid #aa00aa;
}

.org-tyr {
  background: #001a2a;
  color: #90d0ff;
  border: 0.5px solid #0077cc;
}

.org-hets {
  background: #1a1a00;
  color: #ffee44;
  border: 0.5px solid #aaaa00;
}

.org-b100 {
  background: #0a1a2a;
  color: #44aaff;
  border: 0.5px solid #0055aa;
}

.org-m42 {
  background: #1a0a1a;
  color: #dd88ff;
  border: 0.5px solid #8833cc;
}

.org-esf {
  background: #1a1000;
  color: #ffcc44;
  border: 0.5px solid #aa8800;
}

.org-adv {
  background: #1a1000;
  color: #ffcc44;
  border: 0.5px solid #aa8800;
}

.org-major {
  background: #1a1000;
  color: #ffd700;
  border: 1px solid #ffd700;
}

.org-wayra {
  background: #0a1a2a;
  color: #44ccff;
  border: 0.5px solid #0077aa;
}

.org-fdt {
  background: #2a1a00;
  color: #ffcc44;
  border: 0.5px solid #aa7700;
}

.org-cala {
  background: #1a2a1a;
  color: #88dd44;
  border: 0.5px solid #449900;
}

.org-ulapes {
  background: #1a0a2a;
  color: #cc88ff;
  border: 0.5px solid #7733aa;
}

.org-embalse {
  background: #001a2a;
  color: #44aaff;
  border: 0.5px solid #0055aa;
}

.org-zolkan {
  background: #1a002a;
  color: #cc44ff;
  border: 0.5px solid #8800cc;
}

.org-nat {
  background: #0a2a0a;
  color: #88ff44;
  border: 0.5px solid #449900;
}

.org-acut {
  background: #1a1a2a;
  color: #aaaaff;
  border: 0.5px solid #5555cc;
}

.org-ref4 {
  background: #2a0a0a;
  color: #ff6644;
  border: 0.5px solid #aa3311;
}


/* Inscribite button */
.btn-inscribite {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
  text-align: center;
  transition: opacity 0.15s;
}

.btn-inscribite:hover {
  opacity: 0.85;
}

.btn-calle {
  background: var(--color-accent);
  color: #fff;
}

.btn-trail {
  background: var(--color-trail);
  color: #fff;
}

.btn-utmb {
  background: var(--color-utmb);
  color: #fff;
}

.btn-cada {
  background: var(--color-cada);
  color: #fff;
}

.btn-past {
  background: #eee;
  color: #aaa;
  border: 0.5px solid #ddd;
  cursor: default;
}

.date-block.major {
  background: #ffd700;
}

.date-block.major .date-day,
.date-block.major .date-month {
  color: #111;
}

.btn-major {
  background: #ffd700;
  color: #111;
  font-weight: 700;
}

.tab-btn.major-tab.active {
  border-bottom-color: #ffd700;
}

/* ── BANNER LOOPCLUB ── */
.loopclub-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(90deg, #1a0a00, #2a1000, #1a0a00);
  border-bottom: 1px solid rgba(255, 77, 28, 0.3);
  padding: 10px 24px;
  text-decoration: none;
  transition: background 0.2s;
}

.loopclub-banner:hover {
  background: linear-gradient(90deg, #2a1000, #3a1800, #2a1000);
}

.loopclub-banner-icon {
  font-size: 16px;
}

.loopclub-banner-text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

.loopclub-banner-text strong {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: 700;
}

.loopclub-banner-cta {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
  border: 1px solid rgba(255, 77, 28, 0.4);
  padding: 3px 10px;
  border-radius: 99px;
}

@media (max-width: 480px) {
  .loopclub-banner-text {
    font-size: 11px;
  }

  .loopclub-banner-cta {
    display: none;
  }
}

.travel-card-img {
  width: 100%;
  height: 260px;
  overflow: hidden;
  background: #000;
}

.travel-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* ============================================================
   SECTION DIVIDERS
   ============================================================ */
.section-divider {
  grid-column: 1 / -1;
  padding: 8px 4px 4px;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: transparent;
  border-bottom: 0.5px solid var(--color-border);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 56px 24px;
  color: var(--color-text-secondary);
  font-size: 14px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--color-bg);
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: -0.5px;
}

.footer-logo span {
  color: var(--color-accent);
}

.footer-social {
  display: flex;
  gap: 16px;
}

.footer-social a {
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.15s;
  display: flex;
  align-items: center;
}

.footer-social a:hover {
  color: var(--color-accent);
}

.footer-copy {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.2);
  text-align: center;
  letter-spacing: 0.3px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .cards-grid {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 16px;
  }

  .card-img-wrap {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .header {
    padding: 16px 16px 0;
  }

  .filters-bar {
    padding: 10px 16px;
  }

  .logo {
    font-size: 22px;
  }

  .header-stats {
    gap: 16px;
  }

  .stat-num {
    font-size: 22px;
  }

  .results-header {
    padding: 10px 16px 5px;
  }

  .section-divider {
    padding: 7px 4px 3px;
  }
}