:root {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-synthesis: none;
  --bg: #020b24;
  --bg-2: #06122f;
  --panel: #07142f;
  --panel-2: #0a1938;
  --panel-3: #0d2042;
  --navy: #061946;
  --navy-deep: #031033;
  --teal: #00aab2;
  --teal-bright: #12c3c6;
  --teal-soft: rgba(0, 170, 178, .14);
  --text: #f4f8fb;
  --muted: #8fa0b8;
  --muted-2: #61728e;
  --line: rgba(166, 193, 225, .13);
  --light: #f7fafc;
  --light-2: #edf3f7;
  --ink: #061946;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
main { overflow: hidden; }

.nav-shell {
  position: fixed; z-index: 50; left: 50%; top: 18px; transform: translateX(-50%);
  width: min(1180px, calc(100% - 32px)); height: 66px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px 0 15px;
  background: rgba(2, 11, 36, .78); backdrop-filter: blur(20px);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 16px 52px rgba(0,0,0,.25);
}
.brand { display:flex; align-items:center; gap:9px; font-family:Manrope,sans-serif; font-weight:800; letter-spacing:-.04em; }
.brand-logo { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 0 16px rgba(0,170,178,.14)); }
.brand-word { display:flex; align-items:baseline; font-size:21px; line-height:1; }
.brand-word b { color:#f5f8fb; }
.brand-word strong { color:var(--teal-bright); }
.nav-shell nav { display:flex; gap:27px; font-size:13px; color:#aebbd0; }
.nav-shell nav a { transition:.2s ease; }
.nav-shell nav a:hover { color:#fff; }
.nav-actions { display:flex; align-items:center; gap:14px; }
.nav-login { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:#b8c5d7; padding:8px 2px; transition:.2s ease; }
.nav-login:hover { color:var(--teal-bright); }
.nav-login span { font-size:10px; }
.lang-switch { display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line); border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.04em; }
.lang-switch a { padding:4px 8px; border-radius:999px; color:#8295ae; transition:.2s ease; }
.lang-switch a:hover { color:#fff; }
.lang-switch a[aria-current] { background:rgba(255,255,255,.08); color:var(--teal-bright); }
@media (max-width:720px) { .lang-switch { margin-right:10px; font-size:10px; } .lang-switch a { padding:3px 7px; } }

.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:12px; font-weight:700; transition:.25s ease; }
.button.small { height:40px; padding:0 16px; font-size:13px; }
.button.ghost { border:1px solid rgba(18,195,198,.22); background:rgba(6,25,70,.56); }
.button.primary { padding:15px 19px; color:#021126; background:linear-gradient(135deg,var(--teal-bright),var(--teal)); box-shadow:0 12px 34px rgba(0,170,178,.20); }
.button.primary:hover { transform:translateY(-2px); box-shadow:0 16px 44px rgba(0,170,178,.30); }
.button.secondary { padding:15px 19px; border:1px solid rgba(255,255,255,.17); background:rgba(255,255,255,.04); }
.button.secondary:hover { border-color:rgba(18,195,198,.42); background:rgba(0,170,178,.07); transform:translateY(-2px); }
.button.text { color:#b8c5d7; padding:15px 10px; }

.hero {
  min-height: 940px; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:40px;
  max-width:1240px; margin:auto; padding:150px 30px 100px; position:relative;
}
.hero:before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:46px 46px; mask-image:linear-gradient(to bottom,black,transparent 88%); pointer-events:none; }
.hero-glow { position:absolute; filter:blur(95px); border-radius:50%; opacity:.16; pointer-events:none; }
.hero-glow-one { width:440px; height:440px; background:var(--teal); right:5%; top:23%; }
.hero-glow-two { width:340px; height:340px; background:#224bc1; right:31%; top:57%; opacity:.12; }
.hero-copy { z-index:2; }
.eyebrow { display:flex; align-items:center; gap:10px; color:#aebbd0; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.13em; }
.eyebrow span { display:block; width:30px; height:1px; background:var(--teal-bright); box-shadow:0 0 12px rgba(18,195,198,.5); }
.hero h1, .section h2, .quote-section h2 { font-family:Manrope,sans-serif; font-weight:800; letter-spacing:-.055em; line-height:.98; }
.hero h1 { font-size:clamp(34px,3.7vw,46px); margin:26px 0 14px; }
.hero-brandline { margin:0 0 22px; font:700 16px Manrope,sans-serif; letter-spacing:-.02em; color:var(--teal-bright); }
.hero h1 em, .section h2 em, .quote-section h2 em { color:var(--teal-bright); font-style:normal; }
.hero-copy > p { color:#9eacc0; max-width:570px; line-height:1.72; font-size:17px; }
.hero-actions { display:flex; align-items:center; gap:12px; margin-top:34px; }
.hero-proof { display:flex; gap:34px; margin-top:62px; padding-top:24px; border-top:1px solid var(--line); max-width:560px; }
.hero-proof div { display:flex; flex-direction:column; gap:4px; }
.hero-proof strong { font:700 17px Manrope,sans-serif; color:#edf5fa; }
.hero-proof span { color:#667892; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }

.hero-visual { position:relative; height:610px; z-index:2; perspective:1200px; }
.dashboard-card { position:absolute; width:720px; height:455px; left:-18px; top:88px; background:#11161c; border-radius:18px; overflow:hidden; color:#eef4f8; box-shadow:0 50px 120px rgba(0,0,0,.52),0 0 0 1px rgba(135,170,199,.16); transform:rotateY(-5deg) rotateX(2deg) rotateZ(-1.15deg); }
.real-app-preview img { width:100%; height:100%; object-fit:cover; object-position:top left; display:block; }
.float-card { position:absolute; border:1px solid rgba(128,182,221,.15); background:rgba(6,19,49,.94); backdrop-filter:blur(18px); border-radius:15px; box-shadow:0 25px 70px rgba(0,0,0,.38); }
.ai-card { width:236px; right:-4px; top:22px; padding:16px 17px; animation:float 5s ease-in-out infinite; }
.ai-card small { color:var(--teal-bright); font-size:8px; letter-spacing:.11em; text-transform:uppercase; }
.ai-card strong { display:block; font-size:14px; margin:7px 0; }
.ai-card p { font-size:10px; line-height:1.48; color:#91a2b8; margin:0; }
.pulse { position:absolute; right:14px; top:16px; width:7px; height:7px; background:var(--teal-bright); border-radius:50%; box-shadow:0 0 0 5px rgba(18,195,198,.09); }
.session-card { left:-20px; bottom:2px; width:240px; padding:16px; animation:float 6s ease-in-out infinite reverse; }
.session-card small { font-size:8px; color:#71859d; letter-spacing:.1em; }
.session-card strong { display:block; font-size:13px; margin:7px 0 14px; }
.session-card div { display:flex; gap:7px; }
.session-card span { font-size:8px; padding:6px 7px; background:#0c2449; border-radius:6px; color:#afbed0; }
.orbit { position:absolute; border:1px solid rgba(18,195,198,.09); border-radius:50%; }
.orbit-one { width:570px; height:570px; left:80px; top:30px; }
.orbit-two { width:420px; height:420px; left:160px; top:110px; border-color:rgba(93,129,190,.08); }
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)} }

.logos-strip { min-height:92px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:34px; color:#657791; letter-spacing:.14em; font-size:11px; font-weight:800; }
.logos-strip i { font-style:normal; color:var(--teal-bright); opacity:.7; }

.section { max-width:1180px; margin:auto; padding:130px 30px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:58px; }
.section-heading h2 { font-size:clamp(42px,5vw,66px); margin:0; max-width:820px; }
.section-heading .eyebrow { align-self:flex-start; margin-top:15px; white-space:nowrap; }
.section-heading.compact { display:block; }
.section-heading.compact .eyebrow { margin-bottom:22px; }
.section-lede { color:#93a4bb; max-width:750px; line-height:1.7; margin:22px 0 0; font-size:15px; }

.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.feature-card { border:1px solid var(--line); border-radius:20px; padding:20px; background:linear-gradient(180deg,#081633,#041029); position:relative; overflow:hidden; min-height:430px; }
.feature-card.featured-wide { grid-column:1/-1; display:grid; grid-template-columns:1.12fr .88fr; min-height:430px; gap:28px; align-items:center; }
.feature-number { position:absolute; right:20px; top:20px; font-family:Manrope,sans-serif; color:#4d6380; font-size:12px; z-index:4; }
.feature-visual { height:240px; background:#030d27; border:1px solid rgba(137,177,219,.09); border-radius:14px; margin-bottom:25px; position:relative; overflow:hidden; }
.featured-wide .feature-visual { height:350px; margin:0; }
.feature-copy { padding:15px 35px 15px 8px; }
.feature-kicker { display:block; color:var(--teal-bright); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px; }
.feature-card h3 { font:700 25px Manrope,sans-serif; letter-spacing:-.035em; margin:0 0 10px; }
.feature-card p { color:#8396ad; line-height:1.65; font-size:13px; margin:0; }
.field-lines { position:absolute; inset:25px; border:1px solid rgba(18,195,198,.27); border-radius:8px; }
.field-lines:before { content:''; position:absolute; top:0; bottom:0; left:50%; border-left:1px solid rgba(18,195,198,.24); }
.field-lines:after { content:''; position:absolute; width:72px; height:72px; border:1px solid rgba(18,195,198,.22); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); }
.tactical-demo { background:radial-gradient(circle at 70% 25%,rgba(0,170,178,.13),transparent 33%),#030d27; }
.tactic-dot { position:absolute; width:31px; height:31px; border-radius:50%; display:grid; place-items:center; font:700 9px Manrope,sans-serif; box-shadow:0 6px 20px rgba(0,0,0,.3); z-index:2; }
.tactic-dot.teal { background:var(--teal-bright); color:#04142d; }
.tactic-dot.navy { background:#254e91; color:white; }
.tactic-dot.d1 { left:28%; top:35%; }.tactic-dot.d2 { left:42%; top:64%; }.tactic-dot.d3 { right:25%; top:26%; }.tactic-dot.d4 { right:30%; bottom:22%; }
.movement-line { position:absolute; height:2px; border-top:2px dashed var(--teal-bright); opacity:.65; transform-origin:left center; }
.move-one { width:120px; left:32%; top:42%; transform:rotate(23deg); }.move-two { width:98px; right:29%; bottom:31%; transform:rotate(-57deg); }
.teams-demo { display:grid; grid-template-columns:1fr 1fr; align-content:center; gap:12px; padding:42px 30px 30px; }
.team-pill { position:absolute; top:18px; left:20px; font:700 10px Manrope,sans-serif; color:var(--teal-bright); border:1px solid rgba(18,195,198,.25); padding:5px 8px; border-radius:6px; }
.team-column { background:#0d2550; border:1px solid rgba(101,151,214,.16); border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:9px; }.team-column.alt{background:#07343e;border-color:rgba(18,195,198,.17)}
.team-column b { font-size:11px; }.team-column span { color:#8096b3; font-size:9px; }
.neutral-pill { grid-column:1/-1; text-align:center; color:#8aa0b8; font-size:9px; padding:8px; border:1px dashed rgba(18,195,198,.2); border-radius:8px; }
.training-demo { padding:30px; }
.calendar-mini { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-bottom:18px; }.calendar-mini span{text-align:center;color:#7185a0;font-size:8px}.calendar-mini i{height:32px;border:1px solid rgba(255,255,255,.08);border-radius:7px;background:#081a39}.calendar-mini i.active{background:rgba(0,170,178,.18);border-color:rgba(18,195,198,.35);position:relative}.calendar-mini i.active:after{content:'';width:5px;height:5px;background:var(--teal-bright);border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.training-row { display:grid; grid-template-columns:48px 1fr auto; align-items:center; padding:10px 0; border-top:1px solid rgba(255,255,255,.06); font-size:9px; }.training-row b{color:var(--teal-bright)}.training-row span{color:#dbe7f1}.training-row em{font-style:normal;color:#6d809a}
.match-demo { padding:35px 30px; }.score{display:flex;align-items:center;justify-content:space-between;background:#081b3f;padding:18px;border-radius:12px}.score span{font:700 9px Manrope,sans-serif;color:#8397b1}.score strong{font:800 25px Manrope,sans-serif;color:#fff}.match-events{display:flex;flex-direction:column;gap:7px;margin-top:17px}.match-events span{font-size:9px;color:#8395ad;border-left:2px solid var(--teal);padding-left:9px}
.finance-demo { padding:32px; }.bank-row{display:flex;justify-content:space-between;align-items:center;padding:14px;background:#071c3e;border-radius:10px}.bank-row span{font-size:9px;color:#899bb2}.bank-row b{font-size:12px;color:var(--teal-bright)}.match-confidence{margin-top:16px;border:1px solid rgba(18,195,198,.16);padding:15px;border-radius:10px;display:flex;flex-direction:column;gap:6px}.match-confidence small{font-size:7px;letter-spacing:.11em;color:#657b98}.match-confidence strong{font-size:12px}.match-confidence i{font-style:normal;color:#89a0ba;font-size:8px}

.ai-section { max-width:none; padding:120px max(30px,calc((100vw - 1180px)/2)); display:grid; grid-template-columns:.86fr 1.14fr; gap:90px; align-items:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:radial-gradient(circle at 84% 45%,rgba(0,170,178,.08),transparent 32%),#03102a; }
.ai-copy h2 { font:800 clamp(42px,5vw,68px)/1 Manrope,sans-serif; letter-spacing:-.055em; margin:25px 0; }
.ai-copy p { color:#8fa2ba; line-height:1.7; max-width:580px; }
.ai-points { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }.ai-points span{font-size:9px;padding:8px 10px;border-radius:7px;border:1px solid rgba(18,195,198,.16);color:#9cb1c5;background:rgba(0,170,178,.05)}
.insight-stack { position:relative; height:480px; }
.insight-card { position:absolute; border:1px solid rgba(255,255,255,.08); background:#071836; border-radius:17px; padding:21px; box-shadow:0 30px 70px rgba(0,0,0,.24); }
.insight-card small { font-size:8px; color:#607894; letter-spacing:.11em; }.insight-card strong{display:block}.insight-card.muted{width:210px;left:5%;top:7%;transform:rotate(-4deg);opacity:.7}.insight-card.muted strong{font:700 24px Manrope,sans-serif;margin:9px 0}.insight-card.muted span{font-size:8px;color:#70839c}.insight-card.muted.right{left:auto;right:2%;top:auto;bottom:7%;transform:rotate(5deg)}
.main-insight { width:72%; max-width:510px; left:50%; top:50%; transform:translate(-50%,-50%); padding:30px; background:linear-gradient(145deg,#08204a,#061633); z-index:3; border-color:rgba(18,195,198,.22); }.insight-icon{width:38px;height:38px;border-radius:10px;background:var(--teal-soft);display:grid;place-items:center;color:var(--teal-bright);margin-bottom:28px}.main-insight strong{font:700 25px Manrope,sans-serif;line-height:1.25;letter-spacing:-.035em;margin-top:8px}.main-insight p{font-size:12px;line-height:1.65;color:#8da1ba}.main-insight button{border:0;background:transparent;padding:10px 0;color:var(--teal-bright);font-size:11px;font-weight:700;cursor:pointer}

.licenses { border-bottom:1px solid var(--line); }
.license-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.license-card { min-height:490px; border:1px solid var(--line); border-radius:24px; padding:32px; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; }
.license-card:before { content:''; position:absolute; width:260px; height:260px; border-radius:50%; filter:blur(90px); opacity:.11; pointer-events:none; }
.club-license { background:linear-gradient(145deg,#081b42,#06132e); }.club-license:before{background:var(--teal);right:-80px;top:-80px}
.coach-license { background:linear-gradient(145deg,#0a1740,#07112c); }.coach-license:before{background:#315ed1;left:-70px;bottom:-70px}
.license-tag { font-size:9px; font-weight:700; color:var(--teal-bright); letter-spacing:.12em; }
.license-icon { width:65px; height:65px; margin:42px 0 18px; border-radius:17px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); display:grid; place-items:center; }.license-icon img{width:52px;height:52px;object-fit:contain}.coach-symbol{font:800 27px Manrope,sans-serif;color:var(--teal-bright)}
.license-card h3 { font:800 34px Manrope,sans-serif; letter-spacing:-.04em; margin:0 0 12px; }.license-card>p{color:#8fa1b8;line-height:1.65;font-size:14px;max-width:510px}.license-card ul{list-style:none;padding:0;margin:24px 0 32px;display:flex;flex-direction:column;gap:11px;color:#a3b2c4;font-size:12px}.license-card li:before{content:'✓';color:var(--teal-bright);margin-right:10px}.license-card .button{margin-top:auto}.coach-preview{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;width:100%;margin:25px 0 34px;border:1px solid rgba(255,255,255,.08);border-radius:13px;overflow:hidden}.coach-preview span{padding:16px 13px;display:flex;flex-direction:column;gap:5px}.coach-preview b{font-size:11px}.coach-preview small{font-size:8px;color:#6e829e;line-height:1.4}.coach-preview i{height:42px;width:1px;background:rgba(255,255,255,.08)}

.coach-plans { border-bottom:1px solid var(--line); background:radial-gradient(circle at 50% 0%,rgba(0,170,178,.06),transparent 42%); }
.plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:stretch; }
.plan-card { position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; padding:28px 26px 26px; background:linear-gradient(180deg,#081633,#041029); }
.plan-card.featured { border-color:rgba(18,195,198,.34); background:linear-gradient(180deg,#08224c,#05142f); box-shadow:0 24px 60px rgba(0,170,178,.10); }
.plan-badge { position:absolute; top:-9px; left:26px; font-size:8px; font-weight:700; letter-spacing:.12em; color:#03122a; background:linear-gradient(135deg,var(--teal-bright),var(--teal)); padding:5px 9px; border-radius:6px; }
.plan-name { font:700 13px Manrope,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-bright); }
.plan-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; margin:14px 0 4px; }
.plan-price strong { font:800 40px Manrope,sans-serif; letter-spacing:-.05em; }
.plan-price small { font-size:10px; color:#7d90ab; }
.plan-lede { color:#8fa1b8; font-size:12.5px; line-height:1.6; margin:10px 0 0; }
.plan-card ul { list-style:none; padding:0; margin:22px 0 28px; display:flex; flex-direction:column; gap:10px; color:#a3b2c4; font-size:12px; line-height:1.45; }
.plan-card li:before { content:'✓'; color:var(--teal-bright); margin-right:9px; }
.plan-card .button { margin-top:auto; padding:14px 18px; font-size:13px; }

.compare-wrap { margin-top:34px; }
.compare-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:18px; background:#04122c; }
.compare-scroll:focus-visible { outline:2px solid rgba(18,195,198,.5); outline-offset:2px; }
.compare-table { width:100%; min-width:760px; border-collapse:collapse; font-size:11.5px; }
.compare-table thead th { text-align:left; vertical-align:bottom; padding:20px 16px; background:#061a3d; border-bottom:1px solid var(--line); }
.compare-table thead th b { display:block; font:700 15px Manrope,sans-serif; letter-spacing:-.02em; }
.compare-table thead th:first-child { font-size:8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#6f83a1; }
.compare-table thead small { display:block; margin-top:5px; font-size:9px; font-weight:400; color:#7d90ab; }
.compare-table tbody th { text-align:left; font-weight:600; color:#c3d0e0; }
.compare-table th, .compare-table td { padding:14px 16px; border-bottom:1px solid rgba(166,193,225,.07); vertical-align:top; color:#93a5bd; line-height:1.5; }
.compare-table tbody tr:nth-child(even) { background:rgba(255,255,255,.014); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom:0; }
.cell-yes, .cell-no { font-size:11px; font-style:normal; }
.compare-note td { color:#7d90ab; font-style:italic; }
.compare-foot { margin:14px 2px 0; font-size:10px; color:#607694; }
.plan-alt-link { align-self:center; margin-top:12px; font-size:10.5px; color:#7d90ab; }
.plan-alt-link:hover { color:var(--teal-bright); text-decoration:underline; }
.license-card .plan-alt-link { align-self:flex-start; margin-top:14px; font-size:11px; }
.plans-login-note { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:26px 2px 0; font-size:11.5px; color:#7d90ab; }
.plans-login-note a { color:var(--teal-bright); font-weight:700; }
.plans-login-note a:hover { text-decoration:underline; }
.coach-compare-link { display:inline-block; margin-top:14px; font-size:10px; font-weight:700; color:var(--teal-bright); }
.coach-compare-link:hover { text-decoration:underline; }

.roles { border-bottom:1px solid var(--line); }
.role-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.role-grid article { border:1px solid var(--line); border-radius:16px; padding:24px 22px 20px; min-height:180px; background:linear-gradient(180deg,#081633,#041029); }
.role-grid article>span { font-family:Manrope,sans-serif; font-size:10px; color:var(--teal-bright); font-weight:700; letter-spacing:.08em; }
.role-grid h3 { font:700 20px Manrope,sans-serif; letter-spacing:-.025em; margin:10px 0 8px; }
.role-grid p { color:#788da8; line-height:1.6; font-size:12.5px; margin:0; }

/* =========================================================
   COMPONENTES COMPARTIDOS — METODOLOGÍA / FAMILIAS
========================================================= */

.check-list { list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; color:#a3b2c4; font-size:13px; }
.check-list li { padding-left:22px; position:relative; line-height:1.55; }
.check-list li:before { content:'✓'; position:absolute; left:0; top:0; color:var(--teal-bright); font-weight:700; }

.methodology, .families, .faq { border-top:1px solid var(--line); }

.faq-list { display:flex; flex-direction:column; gap:10px; max-width:820px; }
.faq-item { border:1px solid var(--line); border-radius:14px; padding:0 22px; background:linear-gradient(180deg,#081633,#041029); }
.faq-item summary {
  cursor: pointer;
  padding: 20px 0;
  font: 700 15px Manrope,sans-serif;
  letter-spacing: -.01em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 20px; color: var(--teal-bright); flex: 0 0 auto; }
.faq-item[open] summary::after { content: '–'; }
.faq-item p { color: #8fa2ba; font-size: 13.5px; line-height: 1.7; margin: 0 0 22px; max-width: 68ch; }

.shot-frame {
  position: relative;
  height: 100%;
  min-height: 260px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(137,177,219,.14);
  background: #030d27;
}
.featured-wide .shot-frame { min-height: 350px; margin: 0; }
.shot-frame img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
/* <picture> es inline por defecto: sin esto la imagen pierde la altura del marco. */
.shot-frame picture, .real-app-preview picture { display:block; width:100%; height:100%; }
.shot-frame figcaption {
  position: absolute; left:0; right:0; bottom:0;
  padding: 8px 12px;
  font-size: 9px; letter-spacing:.06em; text-transform:uppercase;
  color:#5c718f; background:rgba(3,13,39,.72); backdrop-filter:blur(6px);
}

.quote-section { max-width:1240px; margin:70px auto; padding:70px; border-radius:28px; background:var(--light); color:var(--ink); display:grid; grid-template-columns:.82fr 1.18fr; gap:65px; position:relative; overflow:hidden; }
.quote-section:before { content:''; position:absolute; width:380px; height:380px; background:var(--teal-bright); filter:blur(135px); opacity:.12; left:-130px; bottom:-150px; }
.quote-intro { position:relative; z-index:2; }.eyebrow.light{color:#66798e}.quote-section h2{font-size:56px;margin:25px 0}.quote-intro>p{color:#65788d;line-height:1.7}.quote-benefit{display:flex;gap:12px;margin-top:28px}.quote-benefit>span{width:25px;height:25px;border-radius:50%;background:var(--navy);color:var(--teal-bright);display:grid;place-items:center;font-size:11px;flex:0 0 auto}.quote-benefit strong{font-size:13px}.quote-benefit p{margin:5px 0 0;color:#7a8b9d;font-size:11px;line-height:1.5}
.quote-configurator { background:#04122f; color:#eef6fa; border-radius:20px; padding:27px; box-shadow:0 25px 60px rgba(20,32,64,.18); }
.config-top { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:20px; border-bottom:1px solid var(--line); }.config-top small{font-size:8px;color:#6f83a1;letter-spacing:.12em}.config-top h3{font:700 24px Manrope,sans-serif;margin:6px 0 0;letter-spacing:-.03em}.live-dot{font-size:8px;color:var(--teal-bright);letter-spacing:.08em}
.license-switch { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:15px 0 0; }.license-switch button{border:1px solid var(--line);background:#071a3c;border-radius:11px;padding:13px;text-align:left;display:flex;flex-direction:column;gap:3px;cursor:pointer}.license-switch button span{font-size:12px;font-weight:700}.license-switch button small{font-size:8px;color:#6f83a1}.license-switch button.active{border-color:rgba(18,195,198,.42);background:rgba(0,170,178,.12)}.license-switch button.active span{color:var(--teal-bright)}
.quote-form { display:none; }.quote-form.active{display:block}.config-block{padding:24px 0;border-bottom:1px solid var(--line)}.teams-block label{display:flex;justify-content:space-between;align-items:center;font-size:12px}.teams-block label strong{font:700 26px Manrope,sans-serif;color:var(--teal-bright)}input[type=range]{width:100%;accent-color:var(--teal);margin:24px 0 7px}.range-labels{display:flex;justify-content:space-between;color:#5c718f;font-size:8px}.config-label{display:block;font-size:9px;color:#7388a5;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}.config-explainer{font-size:10px;color:#7286a3;margin:-3px 0 15px;line-height:1.5}
.toggle-row { width:100%; display:flex; justify-content:space-between; align-items:center; padding:13px 0; border:0; background:transparent; text-align:left; cursor:pointer; }.toggle-copy{display:flex;flex-direction:column;gap:4px}.toggle-copy strong{font-size:12px}.toggle-copy em{font-style:normal;font-size:7px;color:#7185a0;border:1px solid var(--line);padding:3px 5px;border-radius:5px;margin-left:7px}.toggle-copy small{font-size:9px;color:#6f83a0}.toggle-row>i{width:35px;height:20px;border-radius:99px;background:#10264c;padding:3px;transition:.2s}.toggle-row>i b{display:block;width:14px;height:14px;border-radius:50%;background:#617692;transition:.2s}.toggle-row.on>i{background:var(--teal)}.toggle-row.on>i b{background:#04142d;transform:translateX(15px)}
.coach-options { display:grid; grid-template-columns:1fr; gap:8px; }.coach-options button{border:1px solid var(--line);border-radius:10px;background:#071a3c;padding:13px 14px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}.coach-options button.selected{border-color:rgba(18,195,198,.4);background:rgba(0,170,178,.12)}.coach-options span{display:flex;flex-direction:column;gap:4px}.coach-options strong{font-size:11px}.coach-options small{font-size:8px;color:#6d829f}.coach-options i{font-style:normal;color:var(--teal-bright);font-size:10px}
.summary-box { padding:16px; background:#071a3a; border-radius:11px; margin:20px 0; }.summary-box small{font-size:8px;color:#667b98;letter-spacing:.1em}.summary-box div{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.summary-box span{padding:6px 8px;background:#0d254b;border-radius:6px;font-size:8px;color:#b2c1d1}
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.contact-grid label{font-size:8px;color:#7287a4;display:flex;flex-direction:column;gap:6px}.contact-grid label.full{grid-column:1/-1}.contact-grid label em{font-style:normal;color:#596f8f}.contact-grid input{width:100%;height:42px;border-radius:8px;border:1px solid var(--line);background:#071a3a;color:white;padding:0 11px;outline:none}.contact-grid input:focus{border-color:rgba(18,195,198,.5)}
.submit-button { width:100%; min-height:52px; border:0; border-radius:10px; background:linear-gradient(135deg,var(--teal-bright),var(--teal)); color:#03122a; font-weight:800; margin-top:14px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; cursor:pointer; }.submit-button:hover{filter:brightness(1.05)}.form-note{font-size:8px!important;color:#627794!important;line-height:1.45!important;margin:12px 0 0!important}

footer { max-width:1180px; margin:auto; padding:45px 30px 55px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; color:#60758f; font-size:10px; }.footer-brand .brand-logo{width:34px;height:34px}.footer-brand .brand-word{font-size:18px}.footer-legal{display:flex;gap:16px;flex-wrap:wrap}.footer-legal a{color:#60758f}.footer-legal a:hover{color:var(--teal-bright)}.footer-legal button{border:0;background:transparent;padding:0;font:inherit;font-size:10px;color:#60758f;cursor:pointer}.footer-legal button:hover{color:var(--teal-bright)}

@media(max-width:1050px){
  .hero{grid-template-columns:1fr;padding-top:150px;min-height:auto}.hero-copy{max-width:760px}.hero-visual{height:590px;margin-top:10px}.dashboard-card{left:50%;transform:translateX(-50%) rotateY(-3deg) rotateZ(-1deg)}.ai-card{right:6%}.session-card{left:6%}
  .ai-section{grid-template-columns:1fr;gap:30px}.insight-stack{max-width:700px;width:100%;margin:auto}.quote-section{grid-template-columns:1fr;padding:55px}.quote-intro{max-width:700px}.section-heading{display:block}.section-heading .eyebrow{margin-bottom:22px}.nav-shell nav{display:none}.featured-wide{grid-template-columns:1fr!important}.featured-wide .feature-copy{padding:0 5px 10px}.featured-wide .feature-visual{height:280px}.featured-wide .shot-frame{min-height:280px}.role-grid{grid-template-columns:repeat(2,1fr)}.plan-grid{grid-template-columns:1fr}.plan-card.featured{order:-1}
}

@media(max-width:720px){
  .nav-shell{top:10px;height:58px}.nav-shell .button{display:none}.nav-actions{gap:0}.nav-login{font-size:12px}.brand-logo{width:36px;height:36px}.brand-word{font-size:18px}.hero{padding:120px 18px 70px}.hero h1{font-size:34px}.hero-brandline{font-size:14px}.hero-copy>p{font-size:15px}.hero-actions{align-items:flex-start;flex-direction:column}.hero-proof{gap:20px;justify-content:space-between}.hero-proof strong{font-size:14px}.hero-visual{height:470px;margin-top:10px}.dashboard-card{width:610px;height:400px;left:28%;transform:scale(.68) translateX(-50%);transform-origin:top left}.ai-card{right:-2px;top:10px;transform:scale(.82);transform-origin:top right}.session-card{left:0;bottom:10px;transform:scale(.86);transform-origin:bottom left}.orbit{display:none}.logos-strip{gap:14px;font-size:7px;padding:0 14px;white-space:nowrap}.section{padding:90px 18px}.section-heading h2{font-size:43px}.feature-grid{grid-template-columns:1fr}.feature-card,.feature-card.featured-wide{grid-column:auto;min-height:400px}.featured-wide .feature-visual{height:240px}.featured-wide .shot-frame{min-height:220px}.ai-copy h2{font-size:42px}.main-insight{width:90%}.insight-card.muted{display:none}.license-grid{grid-template-columns:1fr}.license-card{min-height:460px}.coach-preview{grid-template-columns:1fr}.coach-preview i{width:100%;height:1px}.plan-price strong{font-size:34px}.compare-scroll{border-radius:14px}.role-grid{grid-template-columns:1fr}.quote-section{margin:30px 12px;padding:34px 18px;border-radius:22px;gap:35px}.quote-section h2{font-size:42px}.coach-options{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr}.contact-grid label.full{grid-column:auto}footer{margin-top:70px;gap:15px;flex-direction:column;align-items:flex-start}
}

/* AÑADE esto al final de styles.css */

.tactical-demo {
  position: relative;
  background:
    radial-gradient(circle at 70% 25%, rgba(0,170,178,.13), transparent 33%),
    #030d27;
}

.tactical-demo .field-lines {
  position: absolute;
  inset: 25px;
  border: 1px solid rgba(18,195,198,.27);
  border-radius: 8px;
}

.tactical-demo .field-lines::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 1px solid rgba(18,195,198,.24);
}

.tactical-demo .field-lines::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(18,195,198,.22);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* =========================================
   PARED: 7 -> 9 -> 7 SUPERANDO 2 RIVALES
========================================= */

/* 7 inicia abierto a la izquierda */
.wall-player-a {
  left: 18%;
  top: 58%;
  animation: wall-run-7 6s ease-in-out infinite;
}

/* 9 viene a ofrecer apoyo por dentro */
.wall-player-b {
  left: 45%;
  top: 30%;
  animation: wall-run-9 6s ease-in-out infinite;
}

/* Los dos defensores bloquean el camino directo */
.defender-a {
  left: 46%;
  top: 54%;
}

.defender-b {
  left: 59%;
  top: 48%;
}


/* =========================================
   BALÓN
========================================= */

.tactic-ball {
  position: absolute;

  left: calc(18% + 24px);
  top: calc(58% + 13px);

  width: 11px;
  height: 11px;

  border-radius: 50%;
  background: white;
  border: 2px solid #07152f;

  box-shadow:
    0 0 0 2px rgba(18,195,198,.35),
    0 0 15px rgba(18,195,198,.7);

  z-index: 10;

  animation: wall-ball 6s ease-in-out infinite;
}


/* =========================================
   MOVIMIENTO DEL 7

   Pasa -> arranca -> rodea defensores ->
   recibe detrás de ellos
========================================= */

@keyframes wall-run-7 {

  /* posición inicial */
  0%,
  15% {
    left: 18%;
    top: 58%;
  }

  /* da el pase y arranca */
  28% {
    left: 28%;
    top: 58%;
  }

  /* sigue en línea recta */
  45% {
    left: 42%;
    top: 58%;
  }

  /* pasa por detrás del 4 */
  62% {
    left: 57%;
    top: 58%;
  }

  /* recibe la pared ya superando al 4 */
  78%,
  92% {
    left: 72%;
    top: 58%;
  }

  100% {
    left: 18%;
    top: 58%;
  }
}


/* =========================================
   MOVIMIENTO DEL 9

   Viene al apoyo -> recibe -> devuelve ->
   vuelve ligeramente a su zona
========================================= */

@keyframes wall-run-9 {

  0%,
  15% {
    left: 45%;
    top: 30%;
  }

  /* pequeño apoyo hacia el balón */
  30% {
    left: 41%;
    top: 36%;
  }

  /* devuelve de primeras */
  42% {
    left: 43%;
    top: 34%;
  }

  /* vuelve a abrir espacio */
  62%,
  92% {
    left: 48%;
    top: 29%;
  }

  100% {
    left: 45%;
    top: 30%;
  }
}


/* =========================================
   MOVIMIENTO DEL BALÓN

   7 -> 9 -> 7
========================================= */

@keyframes wall-ball {

  /* balón con 7 */
  0%,
  15% {
    left: calc(18% + 24px);
    top: calc(58% + 13px);
  }

  /* pase 7 -> 9 */
  32% {
    left: calc(41% + 20px);
    top: calc(36% + 18px);
  }

  /* 9 recibe */
  38% {
    left: calc(43% + 18px);
    top: calc(34% + 18px);
  }

  /* 9 devuelve al espacio, detrás del 4 */
  58% {
    left: calc(55% + 20px);
    top: calc(58% + 13px);
  }

  /* 7 alcanza el balón */
  78%,
  92% {
    left: calc(72% + 20px);
    top: calc(58% + 13px);
  }

  100% {
    left: calc(18% + 24px);
    top: calc(58% + 13px);
  }
}


/* =========================================
   EFECTO RECEPCIÓN
========================================= */

.wall-player-a::after,
.wall-player-b::after {
  content: "";

  position: absolute;
  inset: -6px;

  border: 1px solid rgba(18,195,198,.5);
  border-radius: 50%;

  opacity: 0;
}


.wall-player-b::after {
  animation: receive-9 6s ease-out infinite;
}


.wall-player-a::after {
  animation: receive-7 6s ease-out infinite;
}


@keyframes receive-9 {

  0%,
  27% {
    opacity: 0;
    transform: scale(.8);
  }

  32% {
    opacity: 1;
    transform: scale(1);
  }

  40% {
    opacity: 0;
    transform: scale(1.5);
  }

  100% {
    opacity: 0;
  }
}


@keyframes receive-7 {

  0%,
  70% {
    opacity: 0;
    transform: scale(.8);
  }

  78% {
    opacity: 1;
    transform: scale(1);
  }

  88% {
    opacity: 0;
    transform: scale(1.5);
  }

  100% {
    opacity: 0;
  }
}

/* =========================================
   POSICIONES Y MOVIMIENTO DE LOS DEFENSORES
========================================= */

.defender-a {
  left: 46%;
  top: 54%;
  animation: defender-4-move 6s ease-in-out infinite;
}

.defender-b {
  left: 59%;
  top: 48%;
  animation: defender-6-move 6s ease-in-out infinite;
}


/* El 4 salta hacia el 9 cuando recibe */
@keyframes defender-4-move {

  0%,
  18% {
    left: 46%;
    top: 54%;
  }

  /* salta hacia el 9 */
  32% {
    left: 44%;
    top: 45%;
  }

  45% {
    left: 44%;
    top: 39%;
  }

  /* intenta girarse cuando ve pasar al 7 */
  60% {
    left: 49%;
    top: 46%;
  }

  /* ya ha sido superado */
  78% {
    left: 55%;
    top: 51%;
  }

  92% {
    left: 50%;
    top: 53%;
  }

  100% {
    left: 46%;
    top: 54%;
  }
}

/* El 6 acompaña inicialmente la ruptura del 7 */
@keyframes defender-6-move {

  0%,
  18% {
    left: 59%;
    top: 48%;
  }

  /* detecta la carrera del 7 */
  35% {
    left: 61%;
    top: 43%;
  }

  /* intenta cerrar el espacio */
  55% {
    left: 64%;
    top: 36%;
  }

  /* el 7 termina superándolo */
  72% {
    left: 67%;
    top: 34%;
  }

  92% {
    left: 62%;
    top: 43%;
  }

  100% {
    left: 59%;
    top: 48%;
  }
}
/* =========================================================
   HERO / PREVIEW REAL DE LA APP — AJUSTE MÓVIL
========================================================= */

@media (max-width: 720px) {
  .hero-visual {
    height: 405px;
    margin-top: 22px;
    overflow: visible;
    perspective: none;
  }

  .dashboard-card.real-app-preview {
    width: 720px;
    height: 455px;
    left: 50%;
    top: 24px;
    transform: translateX(-50%) scale(.78) rotateZ(-.45deg);
    transform-origin: top center;
    border-radius: 16px;
    box-shadow:
      0 30px 70px rgba(0,0,0,.46),
      0 0 0 1px rgba(135,170,199,.16);
  }

  .hero-visual .ai-card,
  .hero-visual .session-card {
    display: none;
  }
}

@media (max-width: 600px) {
  .hero-visual {
    height: 335px;
  }

  .dashboard-card.real-app-preview {
    top: 18px;
    transform: translateX(-50%) scale(.66) rotateZ(-.35deg);
  }
}

@media (max-width: 480px) {
  .hero-visual {
    height: 255px;
    margin-top: 18px;
  }

  .dashboard-card.real-app-preview {
    top: 12px;
    transform: translateX(-50%) scale(.47);
    border-radius: 14px;
  }
}

@media (max-width: 380px) {
  .hero-visual {
    height: 235px;
  }

  .dashboard-card.real-app-preview {
    transform: translateX(-50%) scale(.43);
  }
}

/* =========================================================
   FORMULARIO — ESTADOS DEL ENDPOINT
========================================================= */

.website-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  left: -9999px !important;
}

.form-content.hidden {
  display: none;
}

.request-state {
  display: none;
}

.request-state.loading,
.request-state.error,
.request-state.success {
  display: block;
}

/* BOTÓN ENVIANDO */

.submit-button:disabled {
  cursor: wait;
  opacity: .75;
}

.button-spinner {
  display: block;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(3, 18, 42, .25);
  border-top-color: #03122a;
  animation: request-spin .75s linear infinite;
}

@keyframes request-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ESTADO ENVIANDO */

.request-state.loading {
  margin-top: 14px;
  padding: 16px;
  background: rgba(18, 195, 198, .07);
  border: 1px solid rgba(18, 195, 198, .18);
  border-radius: 11px;
}

.request-loading {
  display: flex;
  align-items: center;
  gap: 13px;
}

.request-spinner {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(18, 195, 198, .18);
  border-top-color: var(--teal-bright);
  animation: request-spin .8s linear infinite;
}

.request-loading strong {
  display: block;
  font-size: 11px;
  color: #dffbfc;
}

.request-loading p {
  margin: 3px 0 0;
  font-size: 9px;
  color: #7187a3;
}

/* ERROR */

.request-state.error {
  position: relative;
  margin-top: 14px;
  padding: 16px;
  display: flex;
  gap: 12px;
  background: rgba(232, 121, 110, .06);
  border: 1px solid rgba(232, 121, 110, .20);
  border-radius: 11px;
}

.request-error-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(232, 121, 110, .12);
  color: #ff9d95;
  font-weight: 800;
}

.request-error-copy strong {
  display: block;
  font-size: 11px;
  color: #fff;
}

.request-error-copy p {
  margin: 5px 0 0;
  font-size: 9px;
  line-height: 1.5;
  color: #8396ae;
}

.request-retry-button {
  margin-top: 11px;
  border: 1px solid rgba(18, 195, 198, .25);
  border-radius: 7px;
  background: rgba(18, 195, 198, .08);
  color: var(--teal-bright);
  padding: 7px 12px;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.request-retry-button:hover {
  background: rgba(18, 195, 198, .14);
}

/* ÉXITO */

.request-state.success {
  padding: 55px 25px;
  text-align: center;
}

.request-state-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.success-icon {
  position: relative;
  background: rgba(18, 195, 198, .12);
  border: 1px solid rgba(18, 195, 198, .35);
  color: var(--teal-bright);
  font-size: 29px;
  animation:
    request-success-in .45s
    cubic-bezier(.2, .85, .35, 1.35)
    both;
}

.success-icon::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(18, 195, 198, .16);
  animation: request-success-ring 1.6s ease-out infinite;
}

@keyframes request-success-in {
  from {
    opacity: 0;
    transform: scale(.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes request-success-ring {
  0% {
    opacity: .6;
    transform: scale(.8);
  }

  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

.request-state-label {
  display: block;
  margin-bottom: 8px;
  color: var(--teal-bright);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
}

.request-state.success h3 {
  margin: 0 0 10px;
  font:
    800 28px Manrope,
    sans-serif;
  letter-spacing: -.04em;
}

.request-state.success p {
  max-width: 390px;
  margin: 0 auto;
  color: #8195ad;
  font-size: 11px;
  line-height: 1.65;
}

.request-back-button {
  margin-top: 25px;
  border: 1px solid rgba(18, 195, 198, .25);
  border-radius: 9px;
  padding: 10px 20px;
  background: rgba(18, 195, 198, .08);
  color: var(--teal-bright);
  font-weight: 700;
  font-size: 10px;
  cursor: pointer;
}

.request-back-button:hover {
  background: rgba(18, 195, 198, .14);
}

/* =========================================================
   ANIMACIONES AL HACER SCROLL
========================================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity .7s cubic-bezier(.16,.8,.24,1),
    transform .7s cubic-bezier(.16,.8,.24,1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="fade"] { transform: none; }

[data-reveal="scale"] { transform: scale(.92); }
[data-reveal="scale"].is-visible { transform: scale(1); }

[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="left"].is-visible { transform: translateX(0); }

[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="right"].is-visible { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   AVISO DE COOKIES
========================================================= */

.cookie-banner {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 0);
  width: min(760px, calc(100% - 24px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: rgba(4, 15, 40, .96);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 25px 70px rgba(0,0,0,.45);
  transition: opacity .35s ease, transform .35s ease;
}

.cookie-banner.is-leaving {
  opacity: 0;
  transform: translate(-50%, 24px);
  pointer-events: none;
}

.cookie-copy { flex: 1 1 320px; }
.cookie-copy strong { display: block; font: 700 14px Manrope,sans-serif; margin-bottom: 6px; }
.cookie-copy p { margin: 0; font-size: 12px; line-height: 1.6; color: #93a4bb; }
.cookie-copy a { color: var(--teal-bright); text-decoration: underline; }

.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-actions button {
  border-radius: 9px;
  padding: 11px 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #dbe7f1;
  white-space: nowrap;
}
.cookie-actions button:hover { border-color: rgba(18,195,198,.4); }
.cookie-actions .cookie-accept {
  border: 0;
  color: #021126;
  background: linear-gradient(135deg,var(--teal-bright),var(--teal));
}

@media (max-width: 600px) {
  .cookie-banner { padding: 18px; bottom: 10px; }
  .cookie-actions { width: 100%; }
  .cookie-actions button { flex: 1 1 auto; }
}

/* =========================================================
   PÁGINAS LEGALES (privacidad / cookies)
========================================================= */

.legal-shell {
  max-width: 820px;
  margin: 0 auto;
  padding: 160px 24px 120px;
  color: #cdd8e6;
  line-height: 1.75;
}
.legal-shell h1 {
  font: 800 clamp(32px,5vw,48px)/1.1 Manrope,sans-serif;
  letter-spacing: -.03em;
  color: #f4f8fb;
  margin: 0 0 10px;
}
.legal-shell .legal-updated { color: #6f83a1; font-size: 12px; margin: 0 0 46px; }
.legal-shell h2 {
  font: 700 22px Manrope,sans-serif;
  letter-spacing: -.02em;
  color: #f4f8fb;
  margin: 44px 0 14px;
}
.legal-shell p { margin: 0 0 16px; font-size: 14.5px; }
.legal-shell ul { margin: 0 0 16px; padding-left: 20px; font-size: 14.5px; }
.legal-shell li { margin-bottom: 8px; }
.legal-shell strong { color: #eef4f8; }
.legal-shell a { color: var(--teal-bright); text-decoration: underline; }
.legal-shell .legal-placeholder {
  background: rgba(224,168,90,.08);
  border: 1px dashed rgba(224,168,90,.4);
  color: #e0a85a;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}
.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 13px; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 12px; border: 1px solid var(--line); vertical-align: top; }
.legal-table th { background: rgba(255,255,255,.04); color: #aebbd0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.legal-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 30px; color: #93a4bb; font-size: 13px; }
.legal-back:hover { color: var(--teal-bright); }

/* =========================================================
   PÁGINAS INTERNAS (una URL por intención de búsqueda)

   Cada página de producto reutiliza los componentes de la
   home (.section, .feature-card, .faq-item, .plan-card…) y
   añade solo la cabecera propia, las migas de pan y el
   bloque de enlaces internos.
========================================================= */

.page-hero {
  position: relative;
  max-width: 1180px;
  margin: auto;
  padding: 148px 30px 74px;
}
.page-hero:before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 2; }
/* .page-hero > * la volvería a poner en flujo: el resplandor va suelto. */
.page-hero .hero-glow { position: absolute; z-index: 0; }

/* Las secciones de la home respiran 130px porque cada una lleva un visual
   grande. En las páginas internas, casi todo texto, ese mismo aire deja
   huecos de casi 300px entre bloques. */
.page .section { padding: 96px 30px; }
.page .section-heading { margin-bottom: 44px; }

.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 11px; color: #61728e; margin-bottom: 26px; }
.breadcrumbs a { color: #93a4bb; }
.breadcrumbs a:hover { color: var(--teal-bright); }
.breadcrumbs i { font-style: normal; color: #3f5271; }

.page-hero h1 {
  font: 800 clamp(34px, 3.9vw, 54px)/1.04 Manrope, sans-serif;
  letter-spacing: -.05em;
  margin: 24px 0 18px;
}
.page-hero h1 em { color: var(--teal-bright); font-style: normal; }
.page-brandline { margin: -6px 0 20px; font: 700 15px Manrope, sans-serif; letter-spacing: -.02em; color: var(--teal-bright); }
.page-lede { color: #9eacc0; max-width: 640px; line-height: 1.72; font-size: 17px; margin: 0; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }

.page-section-lede { color: #93a4bb; max-width: 750px; line-height: 1.7; margin: 22px 0 0; font-size: 15px; }
.page-block { max-width: 820px; }
.page-block p { color: #8fa2ba; font-size: 14.5px; line-height: 1.75; margin: 0 0 16px; }
.page-block h3 { font: 700 22px Manrope, sans-serif; letter-spacing: -.025em; margin: 34px 0 12px; }
.page-block strong { color: #e7eff7; }
.page-block a { color: var(--teal-bright); }
.page-block a:hover { text-decoration: underline; }

.step-list { counter-reset: step; list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.step-list li {
  counter-increment: step;
  position: relative;
  padding: 20px 22px 20px 60px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #081633, #041029);
  color: #93a5bd; font-size: 13.5px; line-height: 1.6;
}
.step-list li:before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 22px; top: 20px;
  font: 700 12px Manrope, sans-serif; color: var(--teal-bright); letter-spacing: .06em;
}
.step-list b { display: block; color: #eef4f8; font: 700 15px Manrope, sans-serif; letter-spacing: -.02em; margin-bottom: 5px; }

.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.related-card {
  display: block;
  border: 1px solid var(--line); border-radius: 18px; padding: 24px 22px;
  background: linear-gradient(180deg, #081633, #041029);
  transition: .25s ease;
}
.related-card:hover { border-color: rgba(18,195,198,.34); transform: translateY(-3px); }
.related-card small { display: block; color: var(--teal-bright); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.related-card strong { display: block; font: 700 19px Manrope, sans-serif; letter-spacing: -.03em; margin: 12px 0 8px; }
.related-card p { color: #788da8; font-size: 12.5px; line-height: 1.6; margin: 0; }

.cta-band {
  max-width: 1180px; margin: 0 auto; padding: 46px 40px;
  border: 1px solid rgba(18,195,198,.2); border-radius: 24px;
  background: radial-gradient(circle at 15% 20%, rgba(0,170,178,.12), transparent 45%), linear-gradient(145deg, #081b42, #05122c);
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.cta-band h2 { font: 800 clamp(28px, 3.4vw, 40px)/1.05 Manrope, sans-serif; letter-spacing: -.045em; margin: 0 0 10px; }
.cta-band em { color: var(--teal-bright); font-style: normal; }
.cta-band p { color: #93a5bd; font-size: 14px; line-height: 1.65; margin: 0; max-width: 560px; }
.cta-band .page-actions { margin-top: 0; }

.summary-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 12.5px; font-weight: 700; color: var(--teal-bright); }
.summary-link:hover { text-decoration: underline; }
.feature-copy .summary-link, .feature-card .summary-link { margin-top: 14px; }

.footer-map { display: flex; flex-wrap: wrap; gap: 6px 16px; max-width: 620px; }
.footer-map a { color: #60758f; }
.footer-map a:hover { color: var(--teal-bright); }

@media (max-width: 1050px) {
  .related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .page .section { padding: 68px 18px; }
  .page-hero { padding: 118px 18px 50px; }
  .page-hero h1 { font-size: 40px; max-width: none; }
  .page-lede { font-size: 15px; }
  .related-grid { grid-template-columns: 1fr; }
  .cta-band { margin: 0 12px; padding: 32px 20px; border-radius: 20px; }
  .step-list li { padding: 18px 18px 18px 52px; }
  .step-list li:before { left: 18px; }
}

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card-grid.two { grid-template-columns: repeat(2, 1fr); }
.feature-card.plain { min-height: 0; padding: 26px 24px; }
.feature-card.plain h3 { font-size: 20px; margin-bottom: 9px; }
.feature-card.plain p { font-size: 13px; }
@media (max-width: 1050px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .card-grid, .card-grid.two { grid-template-columns: 1fr; } }

/* =========================================================
   PIZARRA GRATIS (/pizarra-tactica-gratis/)
   Landing de captación: el visual de la pizarra ES un botón
   que abre la pizarra en el panel.
========================================================= */
.free-board-hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.free-board-note { color: #7f93ad; font-size: 13px; margin: 14px 0 0; }
.page-section-lede a, .faq-item p a { color: var(--teal-bright); }
.page-section-lede a:hover, .faq-item p a:hover { text-decoration: underline; }
.free-board-preview {
  display: block; position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(18,195,198,.22);
  box-shadow: 0 40px 100px rgba(0,0,0,.45), 0 0 0 1px rgba(135,170,199,.08);
  transition: transform .25s ease, border-color .25s ease;
}
.free-board-preview:hover { transform: translateY(-4px); border-color: rgba(18,195,198,.45); }
.free-board-preview .feature-visual { height: 380px; margin: 0; border: 0; border-radius: 0; }
.free-board-preview > span {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 20;
  background: rgba(3,13,39,.88); border: 1px solid rgba(18,195,198,.3); color: #eef4f8;
  font: 700 13px Manrope, sans-serif; padding: 9px 16px; border-radius: 999px; white-space: nowrap;
}
@media (max-width: 1050px) { .free-board-hero { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 720px) { .free-board-preview .feature-visual { height: 260px; } }