:root{
    /* --- Paleta corporativa socialrun.ai --- */
    --ink:#0B0B0D;        /* fondo: el vacío del tablero, la noche/asfalto */
    --carbon:#141419;     /* superficies elevadas: paneles del tablero */
    --line:#26262E;       /* filetes / divisores */
    --bone:#ECE6D6;       /* texto: crema cálida, no blanco puro */
    --fog:#7C7C72;        /* texto secundario / etiquetas */
    --ember:#FF4B1F;      /* HOT · live · acción (el calor del esfuerzo) */
    --amber:#F3C34C;      /* brillo del tablero: horas, IDs (sodio/farola) */

    --shout:'Anton', system-ui, sans-serif;
    --ui:'Space Grotesk', system-ui, sans-serif;
    --data:'Space Mono', ui-monospace, monospace;

    --maxw:1180px;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--ink); color:var(--bone);
    font-family:var(--ui); font-size:16px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
    /* textura sutil: grilla de puntos como panel de tablero */
    background-image:radial-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
    background-size:22px 22px;
  }
  a{color:inherit}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
  .mono{font-family:var(--data)}
  .hot-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ember);
    box-shadow:0 0 0 0 rgba(255,75,31,.6); animation:pulse 2s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,75,31,.55)}70%{box-shadow:0 0 0 7px rgba(255,75,31,0)}100%{box-shadow:0 0 0 0 rgba(255,75,31,0)}}

  /* ---------- TOP BAR ---------- */
  .topbar{position:sticky; top:0; z-index:40; background:rgba(11,11,13,.82);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
  .topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px}
  .brand{display:flex; align-items:center; gap:11px; text-decoration:none}
  .brand svg{display:block}
  .brand-name{font-family:var(--shout); font-size:20px; letter-spacing:.02em; line-height:1}
  .brand-name .dom{color:var(--fog); font-family:var(--data); font-size:12px; letter-spacing:0; margin-left:2px}
  .top-right{display:flex; align-items:center; gap:18px}
  .live{display:flex; align-items:center; gap:7px; font-family:var(--data); font-size:12px; color:var(--fog); text-transform:uppercase; letter-spacing:.08em}
  .lang{display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-family:var(--data); font-size:12px}
  .lang button{background:transparent; color:var(--fog); border:0; padding:6px 12px; cursor:pointer; font-family:inherit; font-size:inherit; letter-spacing:.05em}
  .lang button.on{background:var(--bone); color:var(--ink); font-weight:700}

  /* ---------- HERO / FRASES ---------- */
  .hero{border-bottom:1px solid var(--line); padding:56px 0 44px; position:relative; overflow:hidden}
  .eyebrow{font-family:var(--data); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); display:flex; align-items:center; gap:12px}
  .eyebrow::after{content:""; height:1px; flex:1; background:linear-gradient(90deg,var(--line),transparent)}
  .phrase-stage{margin:26px 0 8px; min-height:clamp(150px,26vw,300px); display:flex; align-items:flex-start}
  .phrase{font-family:var(--shout); text-transform:uppercase; line-height:.92;
    font-size:clamp(44px,8.4vw,116px); letter-spacing:-.005em; margin:0; max-width:16ch}
  .phrase .accent{color:var(--ember)}
  .phrase-en{font-family:var(--data); color:var(--fog); font-size:clamp(13px,1.6vw,16px); letter-spacing:.03em; margin-top:6px; min-height:22px}
  /* efecto tablero: barrido al cambiar */
  .flap{animation:flap .5s cubic-bezier(.2,.8,.2,1)}
  @keyframes flap{0%{opacity:0; transform:translateY(-14px); clip-path:inset(0 0 100% 0)}60%{opacity:1}100%{opacity:1; transform:translateY(0); clip-path:inset(0 0 0 0)}}
  .ticks{display:flex; gap:9px; margin-top:26px}
  .tick{width:34px; height:4px; border-radius:2px; background:var(--line); border:0; padding:0; cursor:pointer; transition:background .3s}
  .tick.on{background:var(--ember)}

  /* ---------- STAT RIBBON ---------- */
  .ribbon{border-bottom:1px solid var(--line); background:var(--carbon)}
  .ribbon .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:0; padding:14px 24px; font-family:var(--data); font-size:13px; color:var(--fog)}
  .ribbon .stat{display:flex; align-items:baseline; gap:8px; padding:2px 22px}
  .ribbon .stat:first-child{padding-left:0}
  .ribbon .stat + .stat{border-left:1px solid var(--line)}
  .ribbon .stat b{color:var(--bone); font-weight:700}
  .ribbon .stat .lbl{color:var(--fog)}
  .ribbon b{color:var(--bone); font-weight:700}
  .ribbon .sep{color:var(--line)}

  /* ---------- CONTROLES ---------- */
  .controls{padding:26px 0 10px}
  .controls .wrap{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
  .search{flex:1; min-width:240px; display:flex; align-items:center; gap:10px; background:var(--carbon); border:1px solid var(--line); border-radius:10px; padding:12px 15px}
  .search svg{flex:none; opacity:.6}
  .search input{flex:1; background:transparent; border:0; color:var(--bone); font-family:var(--ui); font-size:15px; outline:none}
  .search input::placeholder{color:var(--fog)}
  .chip{font-family:var(--data); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--fog); background:var(--carbon); border:1px solid var(--line); border-radius:999px; padding:11px 16px; cursor:pointer; display:flex; align-items:center; gap:8px; transition:.2s}
  .select{font-family:var(--data); font-size:12px; letter-spacing:.03em; color:var(--bone); background:var(--carbon); border:1px solid var(--line); border-radius:999px; padding:11px 16px; cursor:pointer; outline:none; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237C7C72' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:34px; min-width:150px; transition:.2s}
  .select:hover{border-color:var(--fog)}
  .select:focus{border-color:var(--ember)}
  .select option{background:var(--carbon); color:var(--bone)}
  .chip:hover{border-color:var(--fog)}
  .chip.on{color:var(--ink); background:var(--ember); border-color:var(--ember); font-weight:700}
  .chip.on .hot-dot{background:var(--ink); animation:none}

  /* ---------- TABLERO ---------- */
  .board{padding:14px 0 40px}
  .day-head{position:sticky; top:64px; z-index:20; display:flex; align-items:baseline; justify-content:space-between; gap:12px;
    padding:12px 16px; margin-top:6px; background:rgba(11,11,13,.94); backdrop-filter:blur(8px);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .day-head .dh-date{font-family:var(--shout); text-transform:uppercase; font-size:16px; letter-spacing:.06em; color:var(--amber)}
  .day-head .dh-count{font-family:var(--data); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--fog)}
  .loadmore-wrap{display:flex; justify-content:center; padding:26px 0 4px}
  .loadmore{font-family:var(--data); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone);
    background:var(--carbon); border:1px solid var(--line); border-radius:999px; padding:13px 30px; cursor:pointer; transition:.2s}
  .loadmore:hover{border-color:var(--ember); color:var(--ember)}
  .board-head{display:grid; grid-template-columns:74px 1.15fr 1.1fr 1.15fr 34px; gap:14px; padding:10px 16px; font-family:var(--data); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fog); border-bottom:1px solid var(--line)}
  .row{display:grid; grid-template-columns:74px 1.15fr 1.1fr 1.15fr 34px; gap:14px; align-items:center; padding:15px 16px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .15s; position:relative}
  .row:hover{background:var(--carbon)}
  .row .id{font-family:var(--data); font-size:13px; color:var(--amber); display:flex; align-items:center; gap:8px}
  .row .date{font-family:var(--data); font-size:13px; color:var(--amber); display:flex; align-items:center; gap:8px; letter-spacing:.04em}
  .row .time-lead{font-family:var(--data); font-size:16px; color:var(--amber); display:flex; align-items:center; gap:8px}
  .row .org{font-family:var(--ui); font-weight:600; font-size:14px; color:var(--bone)}
  .row .place-city{display:flex; flex-direction:column; gap:2px}
  .row .city{font-family:var(--shout); font-size:20px; letter-spacing:.01em; line-height:1; text-transform:uppercase}
  .row .country{font-family:var(--data); font-size:11px; color:var(--fog); letter-spacing:.06em; text-transform:uppercase}
  .row .time{font-family:var(--data); font-size:17px; color:var(--bone)}
  .row .spot{color:var(--bone); font-size:14px}
  .row .spot small{display:block; color:var(--fog); font-family:var(--data); font-size:11px; text-transform:uppercase; letter-spacing:.05em}
  .row .dist{font-family:var(--data); font-size:13px; color:var(--fog)}
  .row .caret{justify-self:end; color:var(--fog); transition:transform .25s}
  .row.open .caret{transform:rotate(90deg); color:var(--ember)}
  .row.hot .city{color:var(--bone)}
  .detail{grid-column:1 / -1; overflow:hidden; max-height:0; transition:max-height .3s ease; padding-left:110px}
  .row.open .detail{max-height:260px; padding-top:14px}
  .detail-grid{display:flex; flex-wrap:wrap; gap:10px 26px; font-size:14px; padding-bottom:4px}
  .detail-grid .k{font-family:var(--data); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--fog); display:block; margin-bottom:2px}
  .detail-note{color:var(--fog); font-style:italic; margin-top:8px; max-width:60ch}
  .join{display:inline-flex; align-items:center; gap:8px; margin-top:12px; background:var(--ember); color:var(--ink); font-family:var(--data); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; border:0; border-radius:8px; padding:10px 16px; cursor:pointer; text-decoration:none}
  .detail-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:12px}
  .detail-actions .join{margin-top:0}
  .maplink{display:inline-flex; align-items:center; gap:6px; font-family:var(--data); font-size:12px; letter-spacing:.04em; color:var(--amber); text-decoration:none; border:1px solid var(--line); border-radius:8px; padding:9px 14px; transition:.2s}
  .maplink:hover{border-color:var(--amber)}
  .empty{padding:60px 16px; text-align:center; color:var(--fog); font-family:var(--data); display:none}

  /* ---------- TICKER ---------- */
  .tickerband{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--carbon); overflow:hidden; padding:16px 0}
  .ticker{display:flex; gap:0; white-space:nowrap; width:max-content; animation:scroll 34s linear infinite}
  .ticker span{font-family:var(--shout); text-transform:uppercase; font-size:24px; letter-spacing:.02em; color:var(--fog); padding:0 28px; display:inline-flex; align-items:center; gap:28px}
  .ticker span::after{content:"●"; color:var(--ember); font-size:10px}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .tickerband:hover .ticker{animation-play-state:paused}

  /* ---------- FASE 2 ---------- */
  .phase2{padding:64px 0}
  .phase2 h2{font-family:var(--shout); text-transform:uppercase; font-size:clamp(28px,4vw,46px); letter-spacing:-.01em; margin:0 0 8px}
  .phase2 .lead{color:var(--fog); max-width:52ch; margin:0 0 28px}
  .p2grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  .p2card{border:1px solid var(--line); border-radius:14px; padding:22px; background:var(--carbon)}
  .p2card .num{font-family:var(--data); font-size:12px; color:var(--amber); letter-spacing:.1em}
  .p2card h3{font-family:var(--shout); text-transform:uppercase; font-size:22px; margin:12px 0 6px; letter-spacing:.01em}
  .p2card p{color:var(--fog); font-size:14px; margin:0}

  /* ---------- IDENTIDAD (brand sheet embebido) ---------- */
  .identity{border-top:1px solid var(--line); padding:64px 0}
  .id-eyebrow{font-family:var(--data); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); margin-bottom:26px}
  .id-block{margin-bottom:44px}
  .id-block > h4{font-family:var(--shout); text-transform:uppercase; font-size:15px; letter-spacing:.14em; color:var(--fog); margin:0 0 18px; padding-bottom:10px; border-bottom:1px solid var(--line)}
  .logos{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
  .logo-card{border:1px solid var(--line); border-radius:14px; padding:26px 22px; background:var(--carbon); display:flex; flex-direction:column; gap:16px; min-height:150px; justify-content:space-between}
  .logo-card .art{display:flex; align-items:center; min-height:56px}
  .logo-card .cap{font-family:var(--data); font-size:11px; color:var(--fog); letter-spacing:.05em; text-transform:uppercase}
  .logo-card .cap b{color:var(--bone)}
  .swatches{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px}
  .sw{border:1px solid var(--line); border-radius:12px; overflow:hidden}
  .sw .chip-color{height:74px}
  .sw .meta{padding:11px 13px; font-family:var(--data); font-size:12px}
  .sw .meta .nm{color:var(--bone); text-transform:uppercase; letter-spacing:.05em; font-size:11px}
  .sw .meta .hex{color:var(--fog)}
  .sw .meta .use{color:var(--fog); font-size:10px; margin-top:4px; display:block}
  .type-rows{display:flex; flex-direction:column; gap:20px}
  .type-row{border:1px solid var(--line); border-radius:12px; padding:20px 22px; background:var(--carbon)}
  .type-row .label{font-family:var(--data); font-size:11px; color:var(--fog); text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px}
  .type-row .sample-shout{font-family:var(--shout); text-transform:uppercase; font-size:40px; line-height:.95}
  .type-row .sample-ui{font-family:var(--ui); font-size:22px}
  .type-row .sample-data{font-family:var(--data); font-size:20px; color:var(--amber)}
  .lemas{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px}
  .lema{border:1px solid var(--line); border-left:3px solid var(--ember); border-radius:10px; padding:16px 18px; background:var(--carbon)}
  .lema .es{font-family:var(--ui); font-weight:600; font-size:16px}
  .lema .en{font-family:var(--data); font-size:12px; color:var(--fog); margin-top:5px}

  /* ---------- FOOTER ---------- */
  footer{border-top:1px solid var(--line); padding:40px 0; color:var(--fog); font-family:var(--data); font-size:12px}
  footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center}
  footer .note{max-width:46ch; line-height:1.6}
  footer .brand-row{display:flex; align-items:center; gap:12px}
  footer a{color:inherit; text-decoration:none; border-bottom:1px solid transparent}
  footer a:hover{color:var(--ink); border-bottom-color:var(--ember)}
  footer a.ig{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--line); border-radius:10px; color:var(--fog); border-bottom:1px solid var(--line); transition:.2s}
  footer a.ig:hover{color:var(--ember); border-color:var(--ember); background:var(--carbon)}

  /* ---------- RESPONSIVE ---------- */

  /* ===== Navegación de secciones ===== */
  .nav{display:flex; gap:6px; background:var(--carbon); border:1px solid var(--line); border-radius:999px; padding:4px}
  .nav-btn{font-family:var(--data); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--fog);
    background:transparent; border:0; border-radius:999px; padding:8px 16px; cursor:pointer; transition:.2s; white-space:nowrap}
  .nav-btn:hover{color:var(--bone)}
  .nav-btn.on{background:var(--ember); color:var(--ink); font-weight:700}
  .view[hidden]{display:none}

  /* ===== RunClubs: cabecera ===== */
  .rc-hero{padding:56px 0 20px}
  .rc-hero .rc-title{font-family:var(--shout); font-size:clamp(52px,10vw,120px); line-height:.92; letter-spacing:.01em; margin:14px 0 0}
  .rc-hero .rc-title .accent{color:var(--ember)}
  .rc-hero .rc-lead{font-family:var(--ui); color:var(--fog); font-size:clamp(15px,2vw,19px); max-width:560px; margin:16px 0 0}

  /* ===== RunClubs: parrilla de clubes ===== */
  .rc-list{padding:8px 0 44px}
  .clubs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  .club{position:relative; background:var(--carbon); border:1px solid var(--line); border-radius:16px; padding:20px; transition:.2s; overflow:hidden}
  .club:hover{border-color:var(--fog); transform:translateY(-2px)}
  .club.hot{border-color:rgba(255,75,31,.5)}
  .club .club-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
  .club .club-name{font-family:var(--shout); font-size:21px; line-height:1.05; letter-spacing:.01em}
  .club .club-hot{font-family:var(--data); font-size:10px; letter-spacing:.12em; color:var(--ember); border:1px solid rgba(255,75,31,.5); border-radius:999px; padding:3px 8px; white-space:nowrap}
  .club .club-loc{font-family:var(--data); font-size:12px; color:var(--amber); letter-spacing:.03em; margin-top:6px}
  .club .club-meta{display:flex; flex-wrap:wrap; gap:14px; margin-top:16px; font-family:var(--data); font-size:12px; color:var(--fog)}
  .club .club-meta b{color:var(--bone); font-weight:700}
  .club .club-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:16px}
  .club .tag{font-family:var(--data); font-size:11px; letter-spacing:.03em; color:var(--fog); background:var(--ink); border:1px solid var(--line); border-radius:999px; padding:5px 10px}
  .club .club-handle{display:inline-block; margin-top:16px; font-family:var(--data); font-size:12px; color:var(--bone); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px}
  .club .club-handle:hover{color:var(--ember); border-color:var(--ember)}
  .club .club-fol{font-family:var(--data); font-size:12px; color:var(--fog)}
  .club .club-fol b{color:var(--bone)}
  .club .noverif{color:var(--fog); font-style:italic; opacity:.75}
  .club .club-note{font-family:var(--ui); font-size:13px; color:var(--fog); line-height:1.45; margin-top:12px}
  .club .club-links{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:16px}
  .club .club-link{font-family:var(--data); font-size:11px; letter-spacing:.04em; color:var(--amber); text-decoration:none; border:1px solid var(--line); border-radius:8px; padding:5px 10px; transition:.2s}
  .club .club-link:hover{border-color:var(--amber)}

  @media (max-width:820px){
    .board-head{display:none}
    .row{grid-template-columns:1fr auto; gap:6px 14px; padding:16px}
    .row .time-lead{grid-column:2; order:2; text-align:right; justify-self:end; font-size:15px}
    .row .place-city{grid-column:1; order:1}
    .row .org{grid-column:1 / -1; order:3; color:var(--fog)}
    .row .spot{grid-column:1 / -1; order:4}
    .row .caret{grid-column:2; order:2; justify-self:end}
    .detail{padding-left:0}
    .day-head{top:56px}
    .controls .wrap{flex-direction:column; align-items:stretch}
    .select{width:100%}
    .ribbon .wrap{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px}
    .ribbon .stat{flex-direction:column; align-items:flex-start; gap:3px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--ink)}
    .ribbon .stat:first-child{padding-left:14px}
    .ribbon .stat + .stat{border-left:1px solid var(--line)}
    .ribbon .stat b{font-size:18px}
    .ribbon .stat .lbl{font-size:11px; text-transform:uppercase; letter-spacing:.06em; line-height:1.3}
    .nav{order:3; width:100%; justify-content:center}
    .topbar .wrap{flex-wrap:wrap; height:auto; padding-top:10px; padding-bottom:10px; gap:10px}
    .clubs-grid{grid-template-columns:1fr}
    .rc-hero{padding:36px 0 12px}
    .p2grid{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
    .ticker{animation:none; transform:none}
  }