[hidden]:not([hidden=until-found i]){display:none!important}
html{scroll-padding-top:env(safe-area-inset-top,0px)} body{margin:0} img{max-width:100%}

  :root{
    --bg: #F4F7FA;
    --surface: #FFFFFF;
    --surface-2: #EBF1F6;
    --ink: #002443;
    --ink-soft: #4C6072;
    --ink-faint: #66788A;
    --line: #DCE4EA;
    --accent: #0166EE;
    --accent-ink: #FFFFFF;
    --accent-soft: #E1EDFF;
    --good: #067D17;
    --good-soft: #E1F7E4;
    --premium: #45607A;
    --premium-soft: #E7ECF1;
    --premium-ink: #26394A;
    --shadow: 0 1px 2px rgba(0,36,67,.05), 0 6px 16px rgba(0,36,67,.07);
    --focus: #0166EE;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg: #071A29;
      --surface: #0D2740;
      --surface-2: #123350;
      --ink: #EAF1F6;
      --ink-soft: #A6BAC7;
      --ink-faint: #6D8291;
      --line: #1D3B54;
      --accent: #3D8FFF;
      --accent-ink: #FFFFFF;
      --accent-soft: #123457;
      --good: #29D94A;
      --good-soft: #113C1C;
      --premium: #85A0B7;
      --premium-soft: #1B2E40;
      --premium-ink: #CBDCE9;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"]{
    --bg: #071A29;
    --surface: #0D2740;
    --surface-2: #123350;
    --ink: #EAF1F6;
    --ink-soft: #A6BAC7;
    --ink-faint: #6D8291;
    --line: #1D3B54;
    --accent: #3D8FFF;
    --accent-ink: #FFFFFF;
    --accent-soft: #123457;
    --good: #29D94A;
    --good-soft: #113C1C;
    --premium: #85A0B7;
    --premium-soft: #1B2E40;
    --premium-ink: #CBDCE9;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.35);
  }

  *{ box-sizing: border-box; }
  body{
    background: var(--bg);
    color: var(--ink);
    font-family: 'Karla', system-ui, sans-serif;
    padding-inline: 16px;
    padding-block: 0 88px;
    max-width: 480px;
    margin-inline: auto;
    min-height: 100vh;
  }
  h1,h2,h3{ font-family: 'Big Shoulders Display', system-ui, sans-serif; text-transform: uppercase; text-wrap: balance; margin: 0; letter-spacing: .01em; }
  .tnum{ font-variant-numeric: tabular-nums; }

  /* ---- header ---- */
  header.top{
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
    background: var(--bg);
    padding-block: 14px 10px;
    display: flex; flex-direction: column; gap: 10px;
    border-bottom: 1px solid var(--line);
  }
  .brand-row{ display:flex; align-items:center; justify-content: space-between; gap: 10px; }
  .brand{ display:flex; align-items:baseline; gap: 8px; }
  .brand .mark{
    width: 30px; height: 30px; border-radius: 8px;
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent) 52%, var(--good) 52%, var(--good) 100%); color: white;
    display:flex; align-items:center; justify-content:center;
    font-family:'Big Shoulders Display'; font-weight:800; font-size: 17px;
    flex: none;
  }
  .brand h1{ font-size: 21px; font-weight: 800; color: var(--ink); white-space: nowrap; }
  .theme-btn{
    border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
    width: 34px; height: 34px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size: 15px; flex: none;
  }
  .theme-btn:focus-visible, button:focus-visible, select:focus-visible, .tab:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }

  .locbar{
    display:flex; align-items:center; gap: 8px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    padding: 9px 12px;
  }
  .locbar svg{ flex:none; color: var(--accent); }
  .locbar select{
    flex:1; border:none; background:transparent; color: var(--ink);
    font-family:'Karla'; font-size: 14.5px; font-weight: 600; appearance:none;
    padding-right: 8px;
  }
  .locbar .use-me{
    flex:none; border:none; background:transparent; color: var(--accent);
    font-family:'Karla'; font-weight:700; font-size: 12.5px; cursor:pointer;
    padding: 4px 2px; text-decoration: underline; text-underline-offset: 2px;
  }

  /* ---- hero carousel (auto-rotating "otros deportes" promo, eye-catching transitions) ---- */
  .hero-carousel{
    position:relative; margin-top:2px; border-radius:18px; overflow:hidden;
    height:172px; box-shadow: var(--shadow); isolation:isolate;
  }
  .hero-track{ position:relative; width:100%; height:100%; }
  .hero-slide{
    position:absolute; inset:0; opacity:0; pointer-events:none;
    transition: opacity .85s ease;
    cursor:pointer;
  }
  .hero-slide.active{ opacity:1; pointer-events:auto; z-index:1; }
  .hs-bg{
    position:absolute; inset:-6%; background-size:cover; background-position:center;
    display:flex; align-items:center; justify-content:flex-end;
    transform: scale(1); will-change: transform;
  }
  .hs-bg.kb{ animation: zonaKenBurns 6.5s ease-out forwards; }
  @keyframes zonaKenBurns{ from{ transform:scale(1); } to{ transform:scale(1.12); } }
  .hs-icon{
    font-size: 108px; opacity:.22; margin-right: 6px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
    transform: rotate(-10deg);
  }
  .hs-lock{
    position:absolute; top:12px; right:12px; z-index:2; font-size:13px; color:#fff;
    background:rgba(0,0,0,.32); width:26px; height:26px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }
  body.is-premium .hs-lock{ display:none; }
  .hs-body{
    position:absolute; left:0; right:0; bottom:0; z-index:1; padding:16px;
    display:flex; flex-direction:column; gap:2px; color:#fff;
    background: linear-gradient(0deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 65%);
  }
  .hs-kicker{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; opacity:.85; }
  .hs-body h3{ font-size:26px; color:#fff; line-height:1.02; }
  .hs-body p{ margin:0; font-size:12.5px; font-weight:600; opacity:.92; }
  .hero-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:30px; height:30px; border-radius:50%; border:none; cursor:pointer;
    background:rgba(0,0,0,.32); color:#fff; font-size:17px; line-height:1;
    display:flex; align-items:center; justify-content:center;
  }
  .hero-nav.prev{ left:10px; }
  .hero-nav.next{ right:10px; }
  .hero-nav:hover{ background:rgba(0,0,0,.48); }
  .hero-dots{
    position:absolute; left:0; right:0; bottom:8px; z-index:2;
    display:flex; justify-content:center; gap:6px;
  }
  .hero-dot{
    width:6px; height:6px; border-radius:50%; border:none; padding:0; cursor:pointer;
    background: rgba(255,255,255,.45);
  }
  .hero-dot.active{ background:#fff; width:16px; border-radius:4px; }
  @media (prefers-reduced-motion: reduce){
    .hero-slide{ transition: none; }
    .hs-bg.kb{ animation: none; }
  }
  .clear-filter{
    border:none; background: var(--surface-2); color: var(--ink-soft); border-radius:999px;
    width:18px; height:18px; font-size:10px; cursor:pointer; margin-left:5px;
    display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
  }

  /* ---- tabs ---- */
  .tabs{ display:flex; gap: 8px; margin-block: 14px 4px; }
  .tab{
    flex:1; border:1px solid var(--line); background: var(--surface); color: var(--ink-soft);
    border-radius: 10px; padding: 9px 6px; font-family:'Karla'; font-weight:700; font-size: 13px;
    cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;
    transition: background .15s, color .15s, border-color .15s;
  }
  .tab[aria-selected="true"]{ background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .tab .lock{ font-size: 11px; opacity:.75; }

  .subline{ display:flex; align-items:baseline; justify-content:space-between; margin-block: 12px 10px; }
  .subline p{ margin:0; color: var(--ink-soft); font-size: 13px; }
  .subline .count{ font-weight:700; color: var(--ink); }

  /* ---- venue cards ---- */
  .list{ display:flex; flex-direction:column; gap: 12px; }
  .card{
    background: var(--surface); border:1px solid var(--line); border-radius: 16px;
    padding: 14px; box-shadow: var(--shadow);
  }
  .card-head{ display:flex; gap:10px; justify-content:space-between; align-items:flex-start; }
  .card-title{ display:flex; flex-direction:column; gap:3px; min-width:0; }
  .card-title h3{ font-size: 19px; font-weight:700; color:var(--ink); line-height:1.05; }
  .meta-row{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
  .cat-chip{
    font-size: 11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color: var(--ink-soft); background: var(--surface-2); border:1px solid var(--line);
    padding: 2px 8px; border-radius: 999px;
  }
  .dot{ color: var(--ink-faint); font-size: 11px; }
  .addr{ color: var(--ink-faint); font-size: 12.5px; }
  .dist{
    flex:none; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  }
  .dist .val{ font-family:'Big Shoulders Display'; font-weight:700; font-size: 20px; color: var(--accent); line-height:1; }
  .dist .lbl{ font-size: 10.5px; color: var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }

  .plans{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 12px; }
  .plan{
    background: var(--surface-2); border:1px solid var(--line); border-radius: 10px;
    padding: 8px 10px; flex: 1 1 128px;
  }
  .plan .pname{ font-size: 11.5px; color: var(--ink-soft); font-weight:600; }
  .plan .pprice{ font-family:'Big Shoulders Display'; font-size: 20px; font-weight:700; color: var(--ink); }
  .plan .pprice small{ font-family:'Karla'; font-size: 11px; color: var(--ink-faint); font-weight:600; }
  .plan .pprice.tbd{ font-size: 14px; }
  .plan.best{ border-color: var(--good); background: var(--good-soft); }
  .plan.best .pname{ color: var(--good); }

  .open-row{ display:flex; align-items:center; gap:6px; margin-top:10px; font-size:12.5px; }
  .pip{ width:7px; height:7px; border-radius:50%; background: var(--good); flex:none; }
  .open-row.closed .pip{ background: var(--ink-faint); }
  .open-row span{ color: var(--ink-soft); }
  .open-row b{ color: var(--good); font-weight:700; }
  .open-row.closed b{ color: var(--ink-faint); }
  .src-row{ margin-top:6px; font-size: 11px; color: var(--ink-faint); }

  /* ---- locked / premium ---- */
  .card.locked{ position: relative; overflow:hidden; }
  .card.locked .card-head, .card.locked .plans, .card.locked .open-row{ filter: blur(4.5px); opacity:.55; pointer-events:none; user-select:none; }
  .lock-overlay{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap: 8px; text-align:center; padding: 14px; background: linear-gradient(180deg, transparent, var(--surface) 70%);
  }
  .lock-badge{
    width: 34px; height:34px; border-radius:50%; background: var(--premium-soft); color: var(--premium-ink);
    display:flex; align-items:center; justify-content:center; font-size:15px; border:1px solid var(--premium);
  }
  .lock-overlay p{ margin:0; font-size: 12.5px; color: var(--ink-soft); font-weight:600; max-width: 220px; }

  .cat-chip.premium{ color: var(--premium-ink); background: var(--premium-soft); border-color: var(--premium); }

  /* ---- upsell (deliberately dark "spotlight" panel in both themes) ---- */
  .upsell{
    margin-top: 16px; border-radius: 18px; padding: 18px;
    background: linear-gradient(155deg, #0B2A47 0%, #001830 130%);
    color: #EAF1F6; display:flex; flex-direction:column; gap:10px; box-shadow: var(--shadow);
  }
  .upsell .kicker{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: #5FA6FF; font-weight:700; }
  .upsell h2{ font-size: 24px; color:#F3F8FB; }
  .upsell p{ margin:0; font-size: 13px; color:#B9CADA; line-height:1.45; }
  .upsell ul{ margin:2px 0 0; padding-left: 18px; font-size:13px; color:#CBDAE7; display:flex; flex-direction:column; gap:4px; }
  .upsell-btn{
    margin-top: 4px; align-self:flex-start; border:none; cursor:pointer;
    background: var(--good); color:#fff; font-family:'Karla'; font-weight:700; font-size: 14px;
    padding: 11px 18px; border-radius: 10px;
  }
  .upsell .price{ font-family:'Big Shoulders Display'; font-size: 15px; color:#F3F8FB; }
  .upsell .price b{ font-size:22px; }

  .demo-flag{
    display:inline-flex; align-items:center; gap:5px; margin-top:2px;
    font-size: 10.5px; color: #8FB4D6; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  }

  .unlock-banner{
    display:flex; align-items:center; justify-content:space-between; gap: 10px;
    background: var(--premium-soft); border:1px solid var(--premium); color: var(--premium-ink);
    border-radius: 12px; padding: 10px 12px; margin-block: 12px 4px; font-size: 12.5px; font-weight:600;
  }
  .unlock-banner button{
    flex:none; border:none; background: transparent; color: var(--premium-ink); text-decoration:underline;
    text-underline-offset:2px; font-weight:700; font-family:'Karla'; font-size:12.5px; cursor:pointer;
  }

  /* ---- app download card ---- */
  .app-card{
    margin-top: 14px; border-radius: 18px; padding: 16px;
    background: var(--surface); border:1px solid var(--line); box-shadow: var(--shadow);
    display:flex; align-items:center; gap: 14px;
  }
  .app-card .qr-wrap{
    flex: none; width: 84px; height: 84px; border-radius: 12px; background:#fff;
    display:flex; align-items:center; justify-content:center; padding: 6px;
    border: 1px solid var(--line);
  }
  .app-card .qr-wrap img, .app-card .qr-wrap canvas{ width:100%; height:100%; image-rendering: pixelated; }
  .app-card .app-copy{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
  .app-card .kicker{
    font-size: 10.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--accent); font-weight:700;
  }
  .app-card h3{ font-size: 17px; color: var(--ink); line-height:1.05; }
  .app-card p{ margin:0; font-size: 12px; color: var(--ink-soft); line-height:1.4; }
  .app-card .app-btn{
    margin-top: 4px; align-self:flex-start; border:1px solid var(--accent); background: var(--accent-soft);
    color: var(--accent); font-family:'Karla'; font-weight:700; font-size: 12.5px; cursor:pointer;
    padding: 7px 12px; border-radius: 8px;
  }

  footer.tabbar{
    position: fixed; left:0; right:0; bottom:0; z-index: 6;
    background: var(--surface); border-top:1px solid var(--line);
    display:flex; justify-content:center;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar-inner{ width:100%; max-width:480px; display:flex; }
  .tabbtn{
    flex:1; border:none; background:transparent; color: var(--ink-faint);
    display:flex; flex-direction:column; align-items:center; gap:3px; padding: 10px 4px 12px;
    font-family:'Karla'; font-size: 10.5px; font-weight:700; cursor:pointer;
  }
  .tabbtn.active{ color: var(--accent); }
  .tabbtn svg{ width:20px; height:20px; }

  .toast{
    position: fixed; left: 50%; bottom: 78px; transform: translateX(-50%) translateY(8px);
    background: var(--ink); color: var(--bg); font-size: 13px; font-weight:600;
    padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow);
    opacity:0; pointer-events:none; transition: opacity .2s, transform .2s; z-index: 20;
    max-width: 88%; text-align:center;
  }
  .toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

  @media (prefers-reduced-motion: reduce){
    .tab, .toast{ transition: none; }
  }

  /* ---- responsive: tablet & desktop ---- */
  /* Base layout above is the phone app. From here the container widens in
     steps and the card list becomes a grid, so the same markup reads as a
     real website on a bigger screen instead of a narrow phone column. */
  @media (min-width: 720px){
    body{ max-width: 720px; padding-inline: 28px; }
    .hero-carousel{ height:220px; }
    .hs-icon{ font-size:140px; }
    .hs-body{ padding:20px; }
    .hs-body h3{ font-size:32px; }
    .list{ display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; align-items:start; }
    .list > .upsell, .list > .app-card{ grid-column: 1 / -1; }
    .tabbar-inner{ max-width: 720px; }
  }
  @media (min-width: 1040px){
    body{ max-width: 1040px; padding-inline: 40px; }
    header.top{ padding-block: 20px 14px; }
    .brand h1{ font-size: 24px; }
    .hero-carousel{ height:270px; }
    .hs-icon{ font-size:170px; }
    .hs-body{ padding:26px; }
    .hs-body h3{ font-size:38px; }
    .hs-body p{ font-size:14px; }
    .list{ grid-template-columns: repeat(3, 1fr); gap:16px; }
    .upsell{ padding: 24px 28px; }
    .upsell h2{ font-size: 28px; max-width: 520px; }
    .upsell p{ max-width: 480px; }
    .app-card{ padding: 20px 24px; }
    .tabbar-inner{ max-width: 1040px; }
  }

/* ---- cuenta, sesión y Premium real ---- */
.head-actions{ display:flex; align-items:center; gap:8px; }
.account-btn{
  border:1px solid var(--line); background: var(--surface); color: var(--ink);
  height:34px; border-radius:999px; padding:0 14px; cursor:pointer;
  font-family:'Karla'; font-weight:700; font-size:13px; max-width:150px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.account-btn.premium{ border-color: var(--good); color: var(--good); }

.card-actions{ display:flex; align-items:center; gap:14px; margin-top:10px; flex-wrap:wrap; }
.card-actions a, .card-actions button{
  font-size:12.5px; font-weight:700; color: var(--accent); text-decoration:none;
  background:none; border:none; padding:0; cursor:pointer; font-family:'Karla';
}
.card-actions .fav.on{ color:#E0245E; }
.note{ margin:8px 0 0; font-size:12.5px; color: var(--ink-soft); line-height:1.4; }

.teaser .card-head h3, .teaser .addr{ color: transparent; text-shadow: 0 0 9px var(--ink-faint); }

.panel{
  background: var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:18px; box-shadow: var(--shadow); display:flex; flex-direction:column; gap:10px;
}
.panel h2{ font-size:22px; }
.panel p{ margin:0; color: var(--ink-soft); font-size:13.5px; line-height:1.45; }
.panel .row{ display:flex; gap:10px; flex-wrap:wrap; }
.plan-pill{
  align-self:flex-start; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 10px; border-radius:999px; background: var(--surface-2); color: var(--ink-soft); border:1px solid var(--line);
}
.plan-pill.on{ background: var(--good-soft); color: var(--good); border-color: var(--good); }
.list > .panel{ grid-column: 1 / -1; }

.primary-btn{
  border:none; cursor:pointer; background: var(--accent); color: var(--accent-ink);
  font-family:'Karla'; font-weight:700; font-size:14px; padding:11px 18px; border-radius:10px;
}
.ghost-btn{
  border:1px solid var(--line); cursor:pointer; background: var(--surface); color: var(--ink);
  font-family:'Karla'; font-weight:700; font-size:14px; padding:10px 16px; border-radius:10px;
}
.link-btn{ border:none; background:none; color: var(--accent); font-weight:700; cursor:pointer; padding:0; font-family:'Karla'; font-size:inherit; }

.auth-dlg{
  border:none; border-radius:18px; padding:0; width:min(400px, calc(100vw - 32px));
  background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.auth-dlg::backdrop{ background: rgba(0,20,40,.55); }
.auth-dlg form{ position:relative; padding:22px; display:flex; flex-direction:column; gap:12px; }
.auth-dlg h2{ font-size:24px; }
.auth-sub{ margin:0; font-size:13px; color: var(--ink-soft); }
.auth-dlg label{ display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:700; color: var(--ink-soft); }
.auth-dlg input{
  font-family:'Karla'; font-size:15px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background: var(--bg); color: var(--ink);
}
.auth-dlg input:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
.auth-err{ margin:0; font-size:13px; font-weight:600; color:#D92D20; }
.auth-switch{ margin:0; font-size:13px; color: var(--ink-soft); text-align:center; }
.dlg-close{
  position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%;
  border:none; background: var(--surface-2); color: var(--ink-soft); cursor:pointer;
}
.tabs .tab{ min-width:0; }

/* ---- páginas por deporte (SEO) e inicio ---- */
a.brand{ text-decoration:none; }
.brand-name{ font-family:'Big Shoulders Display', system-ui, sans-serif; text-transform:uppercase; font-size:21px; font-weight:800; color: var(--ink); }
a.account-btn{ display:inline-flex; align-items:center; text-decoration:none; }
.crumbs{ font-size:12.5px; color: var(--ink-faint); margin:14px 0 6px; }
.crumbs a{ color: var(--accent); text-decoration:none; }
.seo-h1{ font-size:32px; line-height:1.05; color: var(--ink); margin:4px 0 8px; }
.seo-intro{ margin:0 0 14px; color: var(--ink-soft); font-size:15px; line-height:1.5; max-width:680px; }
.seo-stats{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.seo-stats div{ flex:1 1 110px; background: var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; }
.seo-stats b{ font-family:'Big Shoulders Display'; font-size:24px; color: var(--accent); }
.seo-stats span{ font-size:12px; color: var(--ink-soft); }
.seo-card-title{ font-size:19px; font-weight:700; color: var(--ink); line-height:1.05; }
.note a{ color: var(--accent); font-weight:700; }
a.upsell-btn{ text-decoration:none; display:inline-block; }
.seo-faq, .seo-footer, .home-seo{ margin-top:22px; }
.seo-faq h2, .seo-footer h2, .home-seo h2{ font-size:22px; margin-bottom:8px; }
.seo-faq details{ background: var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:8px; }
.seo-faq summary{ cursor:pointer; font-weight:700; font-size:14.5px; }
.seo-faq p, .home-seo p{ margin:8px 0 0; color: var(--ink-soft); font-size:14px; line-height:1.5; }
.seo-footer ul, .home-seo ul{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:8px; }
.seo-footer li a, .home-seo li a{
  display:block; padding:10px 12px; border-radius:10px; background: var(--surface); border:1px solid var(--line);
  color: var(--ink); text-decoration:none; font-weight:700; font-size:14px;
}
.seo-footer li a[aria-current]{ border-color: var(--accent); color: var(--accent); }
.seo-footer p{ font-size:12px; color: var(--ink-faint); margin-top:12px; }
body.seo-page{ padding-bottom:40px; }

.cat-chip.here{ color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }

/* Celulares angostos: que el encabezado no se salga de la pantalla. */
@media (max-width: 380px){
  .brand h1, .brand-name{ font-size:17px; }
  .brand .mark{ width:26px; height:26px; font-size:15px; }
  .account-btn{ padding:0 10px; max-width:96px; }
  .head-actions{ gap:6px; }
  .brand-row{ min-width:0; }
}

/* Ingreso con Google */
.social-login{ display:flex; flex-direction:column; align-items:stretch; gap:10px; }
#googleBtn{ display:flex; justify-content:center; min-height:44px; }
.or-line{ display:flex; align-items:center; gap:10px; margin:0; font-size:12px; color: var(--ink-faint); }
.or-line::before, .or-line::after{ content:''; flex:1; height:1px; background: var(--line); }
.auth-dlg form{ overflow-x:hidden; }

/* Transición de rompecabezas del banner */
.puzzle-layer{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.pz-piece{
  position:absolute; will-change: transform, opacity;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.7)) drop-shadow(0 5px 8px rgba(0,0,0,.3));
}
.pz-shape{ position:absolute; inset:0; overflow:hidden; }
.pz-img{ position:absolute !important; right:auto !important; bottom:auto !important; opacity:1 !important; transition:none !important; }
.hero-carousel.pz-instant .hero-slide{ transition:none !important; }

/* Contador de visitas sobre el banner */
.hero-visits{
  position:absolute; top:12px; left:12px; z-index:2;
  background: rgba(0,0,0,.35); color:#fff; font-size:12px; font-weight:700;
  padding:4px 10px; border-radius:999px; font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
}

/* Búsqueda por dirección */
.addrbar{
  display:flex; align-items:center; gap:8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 5px 5px 5px 12px;
}
.addrbar:focus-within{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.addrbar svg{ flex:none; color: var(--ink-faint); }
.addrbar input{
  flex:1; min-width:0; border:none; background:transparent; color: var(--ink);
  font-family:'Karla'; font-size:14.5px; padding:6px 0; outline:none;
}
.addrbar input::placeholder{ color: var(--ink-faint); }
.addrbar button{
  flex:none; border:none; cursor:pointer; background: var(--accent); color: var(--accent-ink);
  font-family:'Karla'; font-weight:700; font-size:13px; padding:8px 14px; border-radius:9px;
}
.addrbar button:disabled{ opacity:.7; cursor:wait; }

/* Descripción de la página, arriba del banner */
.home-intro{ margin: 14px 0 12px; }
.home-intro h2{ font-size: 26px; line-height: 1.05; color: var(--ink); }
.home-intro p{ margin: 6px 0 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.45; max-width: 640px; }
@media (min-width: 1040px){ .home-intro h2{ font-size: 32px; } .home-intro p{ font-size: 15.5px; } }

/* Contacto */
.contact-card{
  margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background: var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:14px; padding:16px 18px; box-shadow: var(--shadow);
}
.contact-card h2{ font-size:20px; margin:0; }
.contact-card p{ margin:4px 0 0; }
.auth-dlg select, .auth-dlg textarea{
  font-family:'Karla'; font-size:15px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background: var(--bg); color: var(--ink); resize: vertical;
}
.auth-dlg select:focus-visible, .auth-dlg textarea:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
.auth-switch a{ color: var(--accent); font-weight:700; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* Buscador "¿Qué deporte o lugar estás buscando?" */
.home-intro{ margin: 18px 0 14px; }
.home-intro h2{ font-size: 30px; }
.finder{
  position:relative; margin-top:14px; display:flex; align-items:center; gap:10px;
  background: var(--surface); border:2px solid var(--line); border-radius:16px;
  padding:6px 6px 6px 14px; box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s;
}
.finder:focus-within{ border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); }
.finder > svg{ flex:none; color: var(--accent); }
.finder input{
  flex:1; min-width:0; border:none; background:transparent; color: var(--ink); outline:none;
  font-family:'Karla'; font-size:16px; font-weight:600; padding:10px 0;
}
.finder input::placeholder{ color: var(--ink-faint); font-weight:500; }
.finder input::-webkit-search-cancel-button{ cursor:pointer; }
.finder > button{
  flex:none; border:none; cursor:pointer; background: var(--accent); color: var(--accent-ink);
  font-family:'Karla'; font-weight:700; font-size:14px; padding:11px 18px; border-radius:11px;
}
.finder > button:disabled{ opacity:.7; cursor:wait; }
.finder-list{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:8; list-style:none; margin:0; padding:6px;
  background: var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow: 0 12px 30px rgba(0,36,67,.18);
}
.finder-list li{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer; }
.finder-list li.active, .finder-list li:hover{ background: var(--accent-soft); }
.fo-emoji{ font-size:18px; width:24px; text-align:center; }
.fo-main{ flex:1; font-weight:700; color: var(--ink); }
.fo-meta{ font-size:12px; color: var(--ink-faint); }
.sport-chips{ display:flex; gap:8px; margin-top:12px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.sport-chips::-webkit-scrollbar{ display:none; }
.sport-chip{
  flex:none; border:1px solid var(--line); background: var(--surface); color: var(--ink);
  font-family:'Karla'; font-weight:700; font-size:13px; padding:8px 14px; border-radius:999px; cursor:pointer;
  transition: transform .15s, background .15s, border-color .15s;
}
.sport-chip:hover{ transform: translateY(-2px); border-color: var(--accent); }
.sport-chip.on{ background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (min-width: 1040px){ .home-intro h2{ font-size: 40px; } }
@media (prefers-reduced-motion: reduce){ .sport-chip{ transition:none; } .sport-chip:hover{ transform:none; } }

/* Búsqueda: "¿Qué estás buscando?" y "¿Dónde?" */
.home-intro{ text-align:center; margin: 22px auto 16px; max-width: 720px; }
.home-intro p{ margin-left:auto; margin-right:auto; }
.search-box{ text-align:left; margin-top:18px; display:flex; flex-direction:column; }
.search-label{ font-weight:800; font-size:14px; color: var(--ink); margin: 14px 0 6px 4px; }
.search-box .finder{ margin-top:0; }
.search-box .sport-chips{ margin-top:10px; }
.where{
  display:flex; align-items:center; gap:10px;
  background: var(--surface); border:2px solid var(--line); border-radius:16px;
  padding:6px 8px 6px 14px; box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s;
}
.where:focus-within{ border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); }
.where > svg{ flex:none; color: #E0245E; }
.where input{
  flex:1; min-width:0; border:none; background:transparent; color: var(--ink); outline:none;
  font-family:'Karla'; font-size:16px; font-weight:700; padding:10px 0;
}
.where input::placeholder{ color: var(--ink-faint); font-weight:500; }
.where input.busy{ opacity:.6; }
.where .use-me{ flex:none; white-space:nowrap; }
.where .use-me{
  border:none; background: var(--accent-soft); color: var(--accent); cursor:pointer;
  font-family:'Karla'; font-weight:700; font-size:13px; padding:9px 12px; border-radius:10px;
}
.where .use-me:hover{ background: var(--accent); color: var(--accent-ink); }

/* Botones de deporte: en varias filas para que ninguno quede cortado */
.search-box .sport-chips{ flex-wrap:wrap; overflow:visible; justify-content:center; padding-bottom:0; }
@media (max-width: 480px){ .sport-chip{ padding:7px 11px; font-size:12.5px; } }

/* Logo: ícono + nombre en dos colores (se adapta a modo claro y oscuro) */
.brand{ align-items:center; }
.mark-img{ width:34px; height:34px; flex:none; display:block; }
.wm-1{ color: var(--ink); }
.wm-2{ color: var(--good); }
@media (max-width: 380px){ .mark-img{ width:28px; height:28px; } }

/* Tarjetas del mismo alto en cada fila: el contenido arriba y las acciones
   (Cómo llegar, Llamar, Guardar) y la fuente siempre alineadas abajo. */
.list{ align-items: stretch; }
.card{ display:flex; flex-direction:column; }
.card .card-actions{ margin-top:auto; padding-top:12px; }
.card .src-row{ margin-top:6px; }
.card.locked{ justify-content:flex-start; min-height: 220px; }
/* Dirección en su propia línea, sin el punto suelto */
.card .meta-row{ row-gap:4px; }
.card .meta-row .dot{ display:none; }
.card .meta-row .addr{ flex-basis:100%; }

/* SEO: título principal, artículos, guías y grupos por localidad */
.home-intro h1{ font-family:'Big Shoulders Display', system-ui, sans-serif; text-transform:uppercase; font-size:30px; line-height:1.05; color: var(--ink); margin:0; }
@media (min-width: 1040px){ .home-intro h1{ font-size:40px; } }
.brand-name-lg{ font-size:21px; }
.home-seo h2{ margin-top:18px; }
.seo-article{ margin-top:26px; max-width:760px; }
.seo-article h2{ font-size:22px; margin:22px 0 8px; }
.seo-article p, .seo-article li{ color: var(--ink-soft); font-size:15px; line-height:1.6; }
.seo-article a{ color: var(--accent); font-weight:700; }
.seo-article ul, .seo-article ol{ padding-left:20px; }
.guide .seo-h1{ margin-top:6px; }
.muted{ color: var(--ink-faint) !important; font-size:13px !important; }
.table-wrap{ overflow-x:auto; margin:10px 0; }
.table-wrap table{ width:100%; border-collapse:collapse; background: var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:14px; }
.table-wrap th, .table-wrap td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); color: var(--ink); }
.table-wrap th{ background: var(--surface-2); font-size:12.5px; color: var(--ink-soft); }
.seo-group{ font-size:22px; margin:26px 0 10px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.seo-group a{ font-family:'Karla'; text-transform:none; font-size:13px; color: var(--accent); text-decoration:none; font-weight:700; }
a.cat-chip{ text-decoration:none; }

.cat-chip.near{ color: var(--ink-soft); background: var(--surface-2); border-style: dashed; }

/* Foto del lugar (licencia libre, con crédito) */
.card-photo{ margin:-14px -14px 12px; position:relative; border-radius:16px 16px 0 0; overflow:hidden; aspect-ratio: 16 / 9; background: var(--surface-2); }
.card-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-photo figcaption{
  position:absolute; right:6px; bottom:6px; max-width:calc(100% - 12px);
  font-size:10.5px; color:#fff; background:rgba(0,0,0,.5); padding:2px 7px; border-radius:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-photo figcaption a{ color:#fff; text-decoration:underline; }
.card-photo.gphoto:empty{ background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size:200% 100%; animation: bdShimmer 1.2s linear infinite; }
@keyframes bdShimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }