/* Futsal Assistant — shared editorial design system. Palette retained. */
:root {
  --bg:#0d141c;
  --bg-2:#101b25;
  --surface:#131f2a;
  --border:#283641;
  --accent:#11BDE8;
  --text:#F2F2F7;
  --text-2:#b8c2cb;
  --text-3:#919ca7;
  --font:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-display:var(--font)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}

h1,h2,h3,h4,p,figure {
  margin:0
}

a {
  color:inherit;
  text-decoration:none
}

button,input {
  font:inherit
}

button,a,input,summary {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px
}

img {
  display:block;
  max-width:100%
}

button {
  cursor:pointer
}

a,button {
  touch-action:manipulation
}

[hidden] {
  display:none!important
}

.wrap {
  width:min(1200px,calc(100% - 96px));
  margin-inline:auto
}

.eyebrow {
  font-size:10px;
  line-height:1.5;
  letter-spacing:.16em;
  font-weight:600;
  color:var(--accent)
}

.lead {
  font-size:17px;
  line-height:1.75;
  color:var(--text-2)
}

h1,h2,h3 {
  font-weight:400;
  letter-spacing:-.055em;
  line-height:1.06;
  text-wrap:balance
}

h1 {
  font-size:clamp(56px,5.5vw,84px)
}

h2 {
  font-size:clamp(38px,4vw,60px)
}

h3 {
  font-size:clamp(32px,3.5vw,48px)
}

h4 {
  font-size:18px;
  line-height:1.4;
  font-weight:500
}

h1 em {
  font-style:normal;
  color:var(--accent)
}

.small-note {
  color:var(--text-3);
  font-size:11px;
  line-height:1.6
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  padding:12px 20px;
  background:var(--text);
  color:var(--bg);
  z-index:500
}

.skip-link:focus {
  top:12px
}

/* Quiet, functional navigation. */
.site-nav {
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:88px;
  padding:16px max(48px,calc((100vw - 1200px)/2));
  border-bottom:1px solid var(--border);
  background:rgba(13,20,28,.96);
  backdrop-filter:blur(16px)
}

.nav-logo {
  display:flex;
  gap:12px;
  align-items:center;
  white-space:nowrap;
  font-size:14px;
  font-weight:600;
  letter-spacing:-.02em
}

.nav-logo img {
  width:34px;
  height:34px;
  border-radius:8px
}

.nav-right,.nav-links {
  display:flex;
  align-items:center;
  gap:30px
}

.nav-links a {
  font-size:12px;
  color:var(--text-2);
  white-space:nowrap
}

.nav-links a:hover {
  color:var(--text)
}

.nav-links a[aria-current=page] {
  color:var(--accent)
}

.nav-links .nav-download {
  padding:11px 16px;
  color:var(--text);
  border:1px solid #385461;
  border-radius:4px
}

.nav-download > span[aria-hidden] {
  margin-left:14px;
  color:var(--accent)
}

.lang-dropdown {
  position:relative
}

.lang-btn {
  display:flex;
  align-items:center;
  gap:7px;
  min-height:44px;
  background:transparent;
  color:var(--text-2);
  border:0;
  font-size:12px
}

.lang-flag-wrap {
  display:flex;
  align-items:center
}

.lang-menu {
  position:absolute;
  right:0;
  top:100%;
  min-width:145px;
  background:var(--surface);
  border:1px solid var(--border);
  padding:6px;
  box-shadow:0 12px 32px #0006
}

.lang-option {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  width:100%;
  border:0;
  background:none;
  color:var(--text-2);
  text-align:left;
  font-size:13px
}

.lang-option:hover,.lang-option[aria-selected=true] {
  background:var(--bg-2);
  color:var(--accent)
}

/* The opening pairs the copy and store links with the live demo:
   the phone on the right runs the real match screen (web/demo). */
.opening {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:44px 80px;
  padding-block:56px 44px
}

.opening-copy .eyebrow {
  margin-bottom:28px
}

.opening-copy h1 {
  margin-bottom:25px
}

.opening-copy .lead {
  max-width:500px;
  margin-bottom:30px
}

.opening-copy .small-note {
  margin-top:12px
}

.store-links {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}

.store-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px
}

.store-badge img {
  width:auto;
  height:44px
}

.store-badge img[data-badge=gp] {
  height:57px
}

.store-badge:hover {
  opacity:.8
}

.club-intro {
  display:flex;
  flex-direction:column;
  align-self:stretch;
  justify-content:space-between;
  background:linear-gradient(145deg,#203c49,#12212d);
  padding:30px 32px;
  border:1px solid #385461;
  border-radius:4px;
  position:relative;
  overflow:hidden
}

.club-intro-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:38px
}

.pro-mark {
  font-size:13px;
  letter-spacing:.04em;
  border:1px solid #487177;
  padding:3px 8px;
  color:var(--text)
}

.club-intro h2 {
  font-size:clamp(30px,2.8vw,40px);
  letter-spacing:-.04em;
  margin-bottom:22px
}

.club-intro p:not(.eyebrow):not(.small-note) {
  font-size:14px;
  color:var(--text-2);
  line-height:1.75
}

.line-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:13px;
  font-weight:500;
  border-top:1px solid #385461;
  padding-top:22px;
  margin-top:34px
}

.line-link>span[aria-hidden] {
  font-size:24px;
  color:var(--accent)
}

.club-intro .small-note {
  margin-top:14px;
  font-size:10px
}

.chapter-nav {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)
}

.chapter-nav a {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:23px 24px;
  font-size:10px;
  letter-spacing:.12em;
  color:var(--text-2)
}

.chapter-nav a:first-child {
  padding-left:0
}

.chapter-nav a+a {
  border-left:1px solid var(--border)
}

.chapter-nav a:hover {
  color:var(--accent)
}

/* Three generous product stories replace the repeating feature card grid. */
.workflow {
  padding-top:100px
}

.section-heading {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:40px;
  margin-bottom:72px
}

.section-heading .eyebrow {
  padding-top:12px
}

.section-heading h2 {
  max-width:790px
}

.section-heading .lead {
  margin-top:22px;
  max-width:570px
}

.story {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
  padding-block:64px;
  border-top:1px solid var(--border)
}

.story-copy>.eyebrow {
  margin-bottom:22px
}

.story-copy h3 {
  margin-bottom:22px
}

.story-copy .lead {
  font-size:15px
}

.plain-list {
  list-style:none;
  padding:0;
  margin:28px 0
}

.plain-list li {
  padding:12px 0;
  border-bottom:1px solid var(--border);
  font-size:13px
}

.plain-list li::before {
  content:none;
  color:var(--accent);
  margin-right:16px
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:20px;
  font-size:13px;
  line-height:1.5;
  padding-block:10px
}

.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px
}

.text-link>span[aria-hidden] {
  color:var(--accent)
}

.board-figure,.app-figure {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden
}

.board-toolbar {
  display:flex;
  justify-content:space-between;
  padding:17px 22px;
  border-bottom:1px solid var(--border);
  font-size:11px;
  color:var(--text-2)
}

.board-stage {
  height:390px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:32px 42px;
  background:linear-gradient(125deg,#193342,transparent)
}

.board-stage img {
  height:100%;
  width:auto;
  position:relative;
  box-shadow:0 18px 35px #0005;
  transform:rotate(8deg)
}

.board-word {
  font-size:clamp(56px,6.5vw,92px);
  line-height:.95;
  letter-spacing:-.06em;
  color:#385461;
  position:absolute;
  left:24px;
  top:42px;
  font-weight:600
}

.board-figure figcaption,.app-figure figcaption {
  padding:16px 22px;
  border-top:1px solid var(--border);
  font-size:10px;
  letter-spacing:.04em;
  color:var(--text-3)
}

.app-stage {
  height:470px;
  position:relative;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:30px 40px;
  background:linear-gradient(145deg,#223e4d,#121f2a)
}

.app-stage img {
  height:410px;
  width:auto;
  border:6px solid #0d141c;
  border-radius:25px;
  position:relative;
  box-shadow:0 24px 40px #0005
}

.stage-word {
  font-size:clamp(65px,7vw,100px);
  line-height:.9;
  letter-spacing:-.07em;
  position:absolute;
  left:28px;
  top:42px;
  color:#385461;
  font-weight:600
}

.feature-details {
  margin-top:28px
}

.feature-details details {
  border-top:1px solid var(--border)
}

.feature-details details:last-child {
  border-bottom:1px solid var(--border)
}

summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:19px 0;
  font-size:14px
}

summary::-webkit-details-marker {
  display:none
}

summary>span:last-child {
  color:var(--accent)
}

details[open] summary>span:last-child {
  transform:rotate(45deg)
}

details p {
  font-size:13px;
  color:var(--text-2);
  padding:0 28px 22px 0
}

.analysis-story {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  padding-block:70px 100px;
  border-top:1px solid var(--border)
}

.analysis-story .eyebrow {
  margin-bottom:22px
}

.analysis-story .lead {
  font-size:15px
}

.report-list {
  margin-top:28px
}

.report-list>div {
  display:flex;
  align-items:flex-start;
  gap:20px;
  border-top:1px solid var(--border);
  padding:22px 0
}

.report-num {
  font-size:11px;
  color:var(--accent);
  padding-top:4px
}

.report-list h4 {
  font-size:15px
}

.report-list p {
  font-size:12px;
  color:var(--text-2);
  margin-top:6px
}

.report-list>div>span:last-child {
  margin-left:auto;
  color:var(--text-3)
}

/* Club proposition: a full-width editorial section with readable benefits. */
.club-section {
  padding-block:80px;
  background:linear-gradient(115deg,#203c49,#12212d);
  border-block:1px solid #385461
}

.club-editorial {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:100px;
  margin-top:40px
}

.club-editorial h2 {
  font-size:clamp(36px,3.8vw,56px);
  margin-bottom:26px
}

.club-editorial .lead {
  max-width:570px;
  font-size:15px
}

.club-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 26px;
  margin-top:34px
}

.solid-link {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  background:var(--accent);
  color:var(--bg);
  font-size:13px;
  padding:15px 20px;
  border-radius:4px;
  font-weight:600
}

.solid-link:hover {
  filter:brightness(1.1)
}

.club-benefits>div {
  position:relative;
  padding:0 0 25px 35px;
  margin-bottom:25px;
  border-bottom:1px solid #385461
}

.club-benefits>div:last-child {
  margin-bottom:0
}

.benefit-index {
  position:absolute;
  left:0;
  top:2px;
  color:var(--accent);
  font-size:10px
}

.club-benefits h3 {
  font-size:21px;
  letter-spacing:-.025em;
  margin-bottom:10px
}

.club-benefits p {
  font-size:13px;
  color:var(--text-2)
}

.download-section {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px;
  padding-block:92px
}

.download-section h2 {
  font-size:clamp(40px,4.5vw,68px);
  margin-bottom:22px
}

.download-section .lead {
  font-size:15px
}

.download-section .small-note {
  margin-top:12px
}

.site-footer {
  border-top:1px solid var(--border);
  padding:32px 0 28px
}

.footer-inner {
  width:min(1200px,calc(100% - 96px));
  margin:auto;
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:24px
}

.footer-logo {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:12px;
  font-weight:500
}

.footer-logo img {
  width:28px;
  height:28px
}

.footer-links {
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:12px 22px;
  font-size:11px;
  color:var(--text-2)
}

.footer-copy {
  grid-column:1/-1;
  font-size:10px;
  color:var(--text-3)
}

@media(min-width:1500px) {
  .opening {
    padding-block:100px
  }

  .opening-copy h1 {
    font-size:88px
  }

}

@media(max-width:1050px) {
  .wrap,.footer-inner {
    width:calc(100% - 64px)
  }

  .site-nav {
    padding-inline:32px
  }

  .opening {
    gap:36px;
    grid-template-columns:1.4fr 1fr
  }

  .opening h1 {
    font-size:58px
  }

  .club-intro {
    padding:24px
  }

  .nav-right,.nav-links {
    gap:20px
  }

  .story,.analysis-story {
    gap:44px
  }

  .club-editorial {
    gap:50px
  }

  .app-stage {
    padding-right:22px
  }

  .board-stage {
    padding-right:26px
  }

  .section-heading {
    grid-template-columns:1fr 2.5fr
  }

}

@media(max-width:760px) {
  .site-nav {
    min-height:76px;
    padding:12px 24px;
    gap:14px
  }

  .nav-logo {
    font-size:12px;
    gap:8px
  }

  .nav-logo img {
    width:28px;
    height:28px
  }

  .nav-right,.nav-links {
    gap:12px
  }

  .nav-links>a:first-child {
    display:none
  }

  .nav-links .nav-download {
    padding:8px 10px
  }

  .nav-download > span[aria-hidden] {
    display:none
  }

  .lang-btn {
    font-size:11px
  }

  .lang-flag-wrap {
    display:none
  }

  .wrap,.footer-inner {
    width:calc(100% - 48px)
  }

  .opening {
    padding-block:52px 40px;
    gap:36px;
    grid-template-columns:1fr
  }

  .opening h1 {
    font-size:clamp(48px,8vw,66px)
  }

  .opening-copy .lead {
    max-width:520px;
    font-size:16px
  }

  .club-intro {
    padding:24px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 32px
  }

  .club-intro-top {
    grid-column:1/-1;
    margin-bottom:24px
  }

  .club-intro h2 {
    font-size:32px
  }

  .club-intro .line-link {
    align-self:center;
    margin:0;
    padding:18px 0
  }

  .club-intro .small-note {
    grid-column:1/-1
  }

  .chapter-nav a {
    font-size:8px;
    letter-spacing:.04em;
    padding:20px 12px
  }

  .workflow {
    padding-top:60px
  }

  .section-heading {
    grid-template-columns:1fr;
    gap:20px;
    margin-bottom:40px
  }

  .section-heading h2 {
    font-size:42px
  }

  .section-heading .lead {
    font-size:15px
  }

  .story {
    gap:32px;
    grid-template-columns:1fr;
    padding-block:44px
  }

  .story-copy h3,.analysis-story h3 {
    font-size:40px
  }

  .board-figure {
    max-width:550px;
    width:100%
  }

  .board-stage {
    height:350px
  }

  .board-word {
    font-size:90px
  }

  .match-story .app-figure {
    order:2;
    max-width:550px;
    width:100%
  }

  .app-stage {
    height:420px;
    justify-content:center;
    padding-left:130px
  }

  .app-stage img {
    height:370px
  }

  .stage-word {
    font-size:90px
  }

  .analysis-story {
    grid-template-columns:1fr;
    gap:28px;
    padding-block:44px 60px
  }

  .club-section {
    padding-block:54px
  }

  .club-editorial {
    grid-template-columns:1fr;
    gap:42px;
    margin-top:28px
  }

  .club-editorial h2 {
    font-size:42px
  }

  .club-benefits {
    display:grid;
    grid-template-columns:1fr;
    gap:0
  }

  .download-section {
    align-items:flex-start;
    flex-direction:column;
    padding-block:60px;
    gap:26px
  }

  .footer-inner {
    grid-template-columns:1fr;
    gap:22px
  }

  .footer-links {
    justify-content:flex-start
  }

  .footer-copy {
    grid-column:auto
  }

}

@media(max-width:440px) {
  .site-nav {
    padding-inline:18px
  }

  .nav-links>a:not(.nav-download) {
    display:none
  }

  .nav-logo span {
    font-size:11px
  }

  .nav-links .nav-download {
    font-size:11px
  }

  .lang-btn {
    gap:4px
  }

  .wrap,.footer-inner {
    width:calc(100% - 40px)
  }

  .opening h1 {
    font-size:49px;
    letter-spacing:-.06em
  }

  .opening .eyebrow {
    font-size:8px
  }

  .club-intro {
    display:flex;
    gap:0
  }

  .club-intro-top {
    width:100%;
    margin-bottom:28px
  }

  .club-intro h2 {
    font-size:34px
  }

  .club-intro .line-link {
    margin-top:22px;
    width:100%
  }

  .club-intro .small-note {
    align-self:flex-start
  }

  .chapter-nav a {
    font-size:8px;
    padding-inline:10px;
    line-height:1.6
  }

  .chapter-nav a span[aria-hidden] {
    display:none
  }

  .section-heading h2,.club-editorial h2 {
    font-size:37px
  }

  .board-stage {
    padding-right:22px;
    height:330px
  }

  .board-word {
    font-size:73px;
    left:18px
  }

  .app-stage {
    padding-left:105px;
    padding-right:15px
  }

  .stage-word {
    left:18px;
    font-size:80px
  }

  .club-actions {
    align-items:flex-start;
    flex-direction:column
  }

  .solid-link {
    width:100%
  }

  .download-section h2 {
    font-size:44px
  }

  .store-links {
    gap:8px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }

}

/* Product education: concise detail without adding promotional cards. */
.preparation-details, .plays-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}
.preparation-details { padding: 0 0 54px; }
.preparation-details h4, .plays-details h4 { margin-bottom: 10px; font-size: 17px; font-weight: 500; }
.preparation-details p, .plays-details p { color: var(--text-2); font-size: 14px; line-height: 1.75; }
.plays-story { border-top: 1px solid var(--border); padding: 58px 0; align-items: center; }
.plays-story .eyebrow { margin-bottom: 20px; }
.plays-story h3 { margin-bottom: 20px; }
.plays-story .lead { font-size: 15px; }
.plays-details h4:not(:first-child) { margin-top: 28px; }
.plan-comparison { padding-bottom: 80px; }
.plan-comparison h2 { font-size: clamp(30px,3.5vw,46px); margin-bottom: 20px; }
.plan-comparison .lead { max-width: 780px; font-size: 15px; margin-bottom: 30px; }
.comparison-scroll { overflow-x: auto; }
.plan-comparison table { border-collapse: collapse; width: 100%; font-size: 13px; line-height: 1.6; }
.plan-comparison th, .plan-comparison td { padding: 17px 20px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.plan-comparison th:first-child { padding-left: 0; width: 44%; }
.plan-comparison thead th { font-weight: 500; color: var(--text-2); }
.plan-comparison tbody th { font-weight: 400; }
.plan-comparison td:last-child, .plan-comparison thead th:last-child { color: var(--accent); }
.club-plan-benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-bottom: 40px; }
.club-plan-benefits h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.02em; margin-bottom: 12px; }
.club-plan-benefits p { color: var(--text-2); font-size: 13px; line-height: 1.75; }
@media (max-width:760px) {
  .preparation-details, .plays-story, .club-plan-benefits { grid-template-columns: 1fr; gap: 28px; }
  .plays-story { padding-block: 42px; }
  .plan-comparison { padding-bottom: 54px; }
  .plan-comparison th, .plan-comparison td { padding: 12px 8px; font-size: 11px; }
  .plan-comparison th:first-child { width: 40%; }
}

/* The entire club invitation is one native, keyboard-accessible link. */
a.club-intro { cursor: pointer; text-decoration: none; transition: border-color .18s ease; }
a.club-intro:hover { border-color: var(--accent); }
a.club-intro:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

.club-pro-logo { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }

/* A quiet invitation to experience PRO in the app. */
.pro-trial { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:28px 0; margin:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pro-trial h3 { margin:0 0 10px; font-size:24px; letter-spacing:-.025em; color:var(--text); }
.pro-trial p { margin:0; max-width:650px; line-height:1.65; color:var(--muted); }
.pro-trial small { display:block; max-width:650px; margin-top:10px; font-size:12px; line-height:1.6; color:var(--muted); }
.pro-trial > a { flex-shrink:0; }
@media(max-width:760px) { .pro-trial { align-items:flex-start; flex-direction:column; gap:20px; } }

/* Demo interactiva: la pantalla de partido real (web/demo) dentro de un iPhone.
   La app se pinta a 375×812 y se escala con --s; el póster tapa el hueco
   mientras carga y queda como respaldo si el iframe no llega a cargar. */
.opening-copy {
  align-self:center
}

.hero-points {
  list-style:none;
  display:grid;
  gap:10px;
  margin:-6px 0 32px;
  padding:0
}

.hero-points li {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  color:var(--text)
}

.hero-points svg {
  flex:none;
  color:var(--accent)
}

.opening-demo {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px
}

.demo-note {
  max-width:300px;
  text-align:center;
  font-size:11px;
  line-height:1.6;
  color:var(--text-3)
}

.demo-phone {
  --s:.74;
  position:relative;
  padding:7px;
  background:#0a0f14;
  border-radius:calc(50px * var(--s) + 7px);
  box-shadow:0 0 0 1px #2d4552,0 30px 60px #0009
}

.demo-screen {
  position:relative;
  width:calc(375px * var(--s));
  height:calc(812px * var(--s));
  border-radius:calc(50px * var(--s));
  overflow:hidden;
  /* clip, a diferencia de hidden, no deja que nada desplace la pantalla: en
     iPhone, al cerrar un panel de la demo, Safari la movía para enseñar el
     elemento con foco y la app quedaba subida con una franja negra abajo. */
  overflow:clip;
  background:#000;
  isolation:isolate
}

.demo-screen iframe {
  position:absolute;
  top:0;
  left:0;
  width:375px;
  height:812px;
  border:0;
  transform:scale(var(--s));
  transform-origin:0 0;
  background:#000
}

.demo-poster {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  pointer-events:none;
  transition:opacity .4s ease
}

.demo-screen.is-live .demo-poster {
  opacity:0
}

.demo-statusbar {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:calc(54px * var(--s));
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 calc(30px * var(--s)) 0 calc(44px * var(--s));
  font-size:calc(16px * var(--s));
  font-weight:600;
  color:#fff;
  z-index:2;
  pointer-events:none
}

.demo-island {
  position:absolute;
  left:50%;
  top:calc(11px * var(--s));
  width:calc(120px * var(--s));
  height:calc(34px * var(--s));
  border-radius:99px;
  background:#000;
  transform:translateX(-50%)
}

.demo-icons {
  display:flex;
  gap:calc(6px * var(--s));
  align-items:center
}

.demo-icons svg {
  fill:currentColor;
  width:auto;
  height:calc(12px * var(--s))
}

.demo-home {
  position:absolute;
  left:50%;
  bottom:calc(8px * var(--s));
  width:calc(134px * var(--s));
  height:calc(5px * var(--s));
  border-radius:99px;
  background:#fff;
  transform:translateX(-50%);
  z-index:2;
  pointer-events:none
}

/* Al finalizar el partido: el resumen se desenfoca y sube una tarjeta con las
   tiendas. Cada pieza entra un poco después que la anterior. */
.demo-cta {
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:flex-end;
  padding:12px 10px 22px;
  background:linear-gradient(to top,#000d 30%,#0000);
  backdrop-filter:blur(0);
  -webkit-backdrop-filter:blur(0);
  opacity:0;
  visibility:hidden;
  transition:opacity .45s ease,backdrop-filter .6s ease,-webkit-backdrop-filter .6s ease,visibility 0s .6s
}

.demo-cta.is-open {
  opacity:1;
  visibility:visible;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:opacity .45s ease,backdrop-filter .6s ease,-webkit-backdrop-filter .6s ease
}

.demo-cta-card {
  position:relative;
  width:100%;
  padding:22px 16px 18px;
  border:1px solid #2d4552;
  border-radius:22px;
  background:linear-gradient(160deg,#1d3644,#0e1922 70%);
  box-shadow:0 -10px 40px #11bde826;
  text-align:center;
  transform:translateY(110%) scale(.96);
  transition:transform .7s cubic-bezier(.2,1.25,.35,1)
}

.demo-cta.is-open .demo-cta-card {
  transform:none
}

.demo-cta-card>* {
  opacity:0;
  transform:translateY(12px);
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,1,.3,1)
}

.demo-cta.is-open .demo-cta-card>* {
  opacity:1;
  transform:none
}

.demo-cta.is-open .demo-cta-logo { transition-delay:.25s }
.demo-cta.is-open .demo-cta-card h3 { transition-delay:.33s }
.demo-cta.is-open .demo-cta-card p { transition-delay:.41s }
.demo-cta.is-open .demo-cta-badges { transition-delay:.5s }
.demo-cta.is-open .demo-cta-again { transition-delay:.6s }

.demo-cta-logo {
  width:44px;
  height:44px;
  margin:0 auto 10px;
  border-radius:11px
}

.demo-cta-card h3 {
  font-size:17px;
  line-height:1.2;
  letter-spacing:-.02em;
  margin-bottom:6px
}

.demo-cta-card p {
  font-size:11px;
  line-height:1.5;
  color:var(--text-2);
  margin-bottom:14px
}

.demo-cta-badges {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px
}

.demo-cta-badges a {
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease
}

.demo-cta-badges a:hover {
  transform:scale(1.04)
}

/* Los dos con el mismo ancho visible. El PNG de Google Play trae margen
   transparente (distinto en la versión es/ca y en la en), que se recorta con
   márgenes negativos proporcionales al ancho. */
.demo-cta-badges img[data-badge] {
  width:150px;
  height:auto!important
}

.demo-cta-badges img[data-badge=gp] {
  margin-block:-6.7px
}

.demo-cta-badges img[data-badge=gp][src*="googleplay-en"] {
  width:172px;
  margin:-10.9px
}

.demo-cta-again {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  padding:6px 10px;
  border:0;
  border-radius:99px;
  background:none;
  color:var(--text-2);
  font:inherit;
  font-size:12px;
  cursor:pointer
}

.demo-cta-again:hover {
  background:#ffffff12;
  color:var(--text)
}

@media(prefers-reduced-motion:reduce) {
  .demo-cta,.demo-cta-card,.demo-cta-card>* { transition-duration:.01s!important; transition-delay:0s!important }
}

@media(max-width:1050px) {
  .demo-phone {
    --s:.62
  }
}

@media(max-width:760px) {
  .demo-phone {
    --s:.72
  }
}

@media(max-width:440px) {
  .demo-phone {
    --s:.7
  }
}

/* Clubes, justo bajo el hero: es la venta que más interesa, así que va a todo
   lo ancho y con su propio botón, no como un enlace secundario. */
.club-band {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;
  align-items:center;
  gap:40px;
  margin-bottom:64px;
  padding:34px 40px;
  border:1px solid #385461;
  border-radius:6px;
  background:linear-gradient(120deg,#203c49,#12212d 70%);
  text-decoration:none;
  transition:border-color .18s ease
}

.club-band:hover {
  border-color:var(--accent)
}

.club-band:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px
}

.club-band-head {
  display:flex;
  align-items:center;
  gap:22px
}

.club-band-head .club-pro-logo {
  flex:none;
  width:56px;
  height:56px
}

.club-band-head .eyebrow {
  margin-bottom:10px
}

.club-band h2 {
  font-size:clamp(26px,2.4vw,34px);
  letter-spacing:-.04em;
  line-height:1.1
}

.club-band-copy p:not(.small-note) {
  font-size:14px;
  line-height:1.7;
  color:var(--text-2)
}

.club-band-copy .small-note {
  margin-top:10px;
  font-size:11px
}

.club-band-cta {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border-radius:4px;
  background:var(--accent);
  color:#071018;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  transition:transform .18s ease
}

.club-band:hover .club-band-cta {
  transform:translateX(3px)
}

@media(max-width:1050px) {
  .club-band {
    grid-template-columns:1fr 1fr;
    gap:24px 32px
  }

  .club-band-cta {
    grid-column:1/-1;
    justify-self:start
  }
}

@media(max-width:760px) {
  .club-band {
    grid-template-columns:1fr;
    padding:26px 22px;
    margin-bottom:44px
  }

  .club-band-head {
    align-items:flex-start
  }

  .club-band-cta {
    justify-self:stretch;
    justify-content:center;
    white-space:normal;
    text-align:center
  }
}

/* Gratis frente a PRO: dos tarjetas que se leen de un vistazo, una línea por
   ventaja. El detalle de límites y condiciones vive en clubs.html. */
.plan-comparison h2 {
  margin-bottom:36px
}

.plan-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}

.plan-card {
  display:flex;
  flex-direction:column;
  padding:30px 32px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface)
}

.plan-card.is-pro {
  border-color:#385461;
  background:linear-gradient(150deg,#203c49,#12212d 75%)
}

.plan-card header {
  margin-bottom:22px
}

.plan-card h3 {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:26px;
  letter-spacing:-.03em;
  margin-bottom:6px
}

.plan-card header p {
  font-size:14px;
  color:var(--text-2)
}

.plan-badge {
  padding:4px 10px;
  border-radius:99px;
  background:#30d1581f;
  color:#30d158;
  font-size:12px;
  font-weight:600;
  letter-spacing:0
}

.plan-list {
  list-style:none;
  display:grid;
  gap:13px;
  align-content:start;
  margin:0 0 28px;
  padding:0;
  flex:1
}

.plan-list li {
  display:flex;
  gap:10px;
  font-size:15px;
  line-height:1.45;
  color:var(--text)
}

.plan-list svg {
  flex:none;
  margin-top:2px;
  color:var(--accent)
}

.plan-cta {
  align-self:flex-start;
  padding:13px 20px;
  border:1px solid var(--border);
  border-radius:4px;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  transition:border-color .18s ease
}

.plan-cta:hover {
  border-color:var(--accent)
}

.plan-cta.is-solid {
  border-color:var(--accent);
  background:var(--accent);
  color:#071018
}

.plan-card small {
  margin-top:12px;
  font-size:11px;
  line-height:1.6;
  color:var(--text-3)
}

.plan-foot {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 28px;
  margin-top:24px;
  font-size:13px;
  color:var(--text-2)
}

.plan-foot a {
  color:var(--text);
  text-decoration:underline;
  text-underline-offset:4px
}

.plan-foot a:hover {
  color:var(--accent)
}

@media(max-width:760px) {
  .plan-cards {
    grid-template-columns:1fr
  }

  .plan-card {
    padding:24px 22px
  }

  .plan-cta {
    align-self:stretch;
    text-align:center
  }
}