/* ==========================================================
   Conoce a fondo esta pala — estilos
   Tokens del design system de Padel Nuestro (05-design-system).
   Fondo claro para contenido; navy en hero y radar.
   ========================================================== */
:root{
  --pn-navy:#04233A; --pn-navy-ink:#00243C; --pn-dark-blue:#094977;
  --pn-lime:#CCFF00; --pn-lime-deep:#B8CD00;
  --pn-court-cyan:#1E95D6; --pn-cyan-300:#6FC9EA; --pn-mint-300:#75F0D7;
  --pn-white:#FFFFFF; --pn-grey-900:#1D1D1B; --pn-grey-80:#707076;
  --pn-grey-50:#D6D6DC; --pn-grey-20:#E8E8EE; --pn-surface-light:#F6F7F9;
  --pn-success:#00B67A; --pn-danger:#EA626E;
  --pn-shadow-02:0px 4px 12px rgba(8,15,52,.06);
  --pn-shadow-03:0px 14px 42px rgba(8,15,52,.06);
  --pn-shadow-05:0px 24px 60px rgba(4,35,58,.18);
  --ease:cubic-bezier(.2,.6,.2,1);

  --ink:var(--pn-navy); --ink-2:#41586A; --ink-3:var(--pn-grey-80); --ink-4:#A6ADB8;
  --line:var(--pn-grey-20); --line-2:#F0F1F5;
  --bg:#FFFFFF; --soft:var(--pn-surface-light);
  --sale:#C8324A; --sale-soft:#FDEDEF;
  --r:12px; --r-lg:16px; --r-pill:999px;
  --max:1200px;
  --font-display:"Barlow Condensed","Barlow Semi Condensed",system-ui,sans-serif;
  --font-body:"Barlow Semi Condensed","Barlow Condensed",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.4;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
img{max-width:100%; display:block}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); line-height:1.1; font-weight:700}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
dl,dd{margin:0}
:focus-visible{outline:3px solid var(--pn-lime); outline-offset:2px; border-radius:4px; box-shadow:0 0 0 5px rgba(4,35,58,.55)}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

/* Modo inline: la altura la marca el contenido, sin barras internas */
html.is-inline, html.is-inline body{min-height:0; overflow:hidden; scroll-behavior:auto}

/* ---------- Barra superior (popup) ---------- */
.topbar{display:none; position:sticky; top:0; z-index:50; background:var(--pn-navy); color:#fff; border-bottom:1px solid rgba(255,255,255,.12)}
html.is-popup .topbar{display:block}
.topbar-in{display:flex; align-items:center; gap:14px; height:58px}
.topbar-kicker{font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:13px; color:var(--pn-lime); white-space:nowrap}
.topbar-name{font-family:var(--font-display); font-weight:600; font-size:17px; color:rgba(255,255,255,.85); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1}
.btn-close{width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; transition:background .18s var(--ease), transform .18s var(--ease)}
.btn-close:hover{background:var(--pn-lime); color:var(--pn-navy); transform:rotate(90deg)}
.only-popup{display:none !important}
html.is-popup .only-popup{display:inline-flex !important}

/* ---------- Estados ---------- */
.state{min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px 20px; gap:14px; color:var(--ink-2)}
html.is-inline .state{min-height:0; padding:48px 20px}
.state-title{font-size:30px; color:var(--ink)}
.spinner{width:34px; height:34px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--pn-navy); animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.picker{width:min(520px,100%); margin-top:8px}
.picker-input{width:100%; border:1px solid var(--pn-grey-50); border-radius:12px; padding:14px 18px; font:inherit; font-size:16px; color:var(--ink); background:#fff}
.picker-input:focus{border-color:var(--pn-navy); box-shadow:0 0 0 4px rgba(204,255,0,.35); outline:0}

/* ---------- Tipografía de sección ---------- */
.eyebrow{display:inline-block; font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--pn-dark-blue); margin-bottom:10px}
.eyebrow--lime{color:var(--pn-lime)}
.eyebrow--pill{background:var(--pn-lime); color:var(--pn-navy); padding:5px 11px; border-radius:var(--r-pill)}
.sec{padding:64px 0}
.sec--soft{background:var(--soft)}
.sec--dark{background:var(--pn-navy); color:#fff}
.sec-hd{margin-bottom:34px}
h2.sec-t{font-size:38px; font-weight:700; letter-spacing:-.01em; margin-bottom:8px}
.sec-sub{font-size:17px; color:var(--ink-2); max-width:58ch; line-height:1.45}
.sec--dark .sec-sub{color:rgba(255,255,255,.72)}
@media(max-width:720px){.sec{padding:44px 0} h2.sec-t{font-size:30px}}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 24px; border-radius:var(--r-pill); font-family:var(--font-display); font-weight:700; font-size:16px; text-transform:uppercase; letter-spacing:.02em; transition:transform .15s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--lime{background:var(--pn-lime); color:var(--pn-navy)}
.btn--lime:hover{background:var(--pn-lime-deep)}
.btn--navy{background:var(--pn-navy); color:var(--pn-lime)}
.btn--navy:hover{background:var(--pn-dark-blue)}
.btn--ghost{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.35)}
.btn--ghost:hover{border-color:#fff}

/* ---------- Hero ---------- */
.hero{background:radial-gradient(circle at 18% 20%, #094977 0%, #04233A 62%); color:#fff; position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(30,149,214,.35), transparent 70%); pointer-events:none}
.hero-grid{display:grid; grid-template-columns:minmax(260px,420px) 1fr; gap:48px; align-items:center; padding-top:48px; padding-bottom:56px; position:relative; z-index:1}
.hero-imgbox{background:#fff; border-radius:var(--r-lg); aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden; box-shadow:var(--pn-shadow-05)}
.hero-imgbox img{width:100%; height:100%; object-fit:contain; padding:8%}
.hero-brand{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:15px; color:rgba(255,255,255,.7); margin-bottom:4px}
.hero-name{font-size:52px; font-weight:800; font-style:italic; text-transform:uppercase; line-height:.95; letter-spacing:-.01em; margin-bottom:16px}
.hero-summary{font-size:19px; line-height:1.4; color:rgba(255,255,255,.85); max-width:56ch; margin-bottom:18px}
.hero-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px}
.chip{display:inline-block; padding:7px 13px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.28); font-family:var(--font-display); font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:#fff}
.tag{display:inline-block; padding:4px 10px; border-radius:var(--r-pill); font-family:var(--font-display); font-weight:700; font-style:italic; text-transform:uppercase; font-size:13px; letter-spacing:.04em}
.hero-note{font-size:12.5px; color:rgba(255,255,255,.5); margin-top:6px}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr; gap:28px; padding-top:28px; padding-bottom:40px}
  .hero-media{max-width:320px; margin:0 auto; width:100%}
  .hero-name{font-size:40px}
}

/* ---------- Radar ---------- */
.radar-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,520px); gap:48px; align-items:center}
.radar-text .sec-t{color:#fff}
.segmented{display:inline-flex; background:rgba(255,255,255,.08); border-radius:var(--r-pill); padding:4px; margin:22px 0 18px; gap:2px}
.segmented button{padding:9px 16px; border-radius:var(--r-pill); font-family:var(--font-display); font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.7); transition:background .18s var(--ease), color .18s var(--ease)}
.segmented button.is-active{background:var(--pn-lime); color:var(--pn-navy)}
.legend{display:flex; flex-direction:column; gap:8px; font-size:15px; color:rgba(255,255,255,.85)}
.legend li{display:flex; align-items:center; gap:10px}
.legend-key{width:26px; height:0; border-top:2px solid; display:inline-block; position:relative}
.legend-key::after{content:""; position:absolute; left:50%; top:-5px; width:8px; height:8px; border-radius:50%; transform:translateX(-50%); background:currentColor}
.legend-key--pala{color:var(--pn-lime)}
.legend-key--media{color:var(--pn-cyan-300); border-top-style:dashed}
.radar-basado{margin-top:12px; font-size:13px; color:rgba(255,255,255,.5)}
.radar-box{position:relative}
.radar{position:relative; width:100%; max-width:520px; margin:0 auto}
.radar-svg{width:100%; height:auto; display:block; overflow:visible}
.radar-ring{fill:none; stroke:rgba(255,255,255,.12); stroke-width:1}
.radar-ring.is-outer{stroke:rgba(255,255,255,.22)}
.radar-ring-label{font-family:var(--font-body); font-size:11px; fill:rgba(255,255,255,.45)}
.radar-axis{stroke:rgba(255,255,255,.12); stroke-width:1}
.radar-poly{stroke-width:2; stroke-linejoin:round; transition:all .5s var(--ease)}
.radar-poly--pala{fill:rgba(204,255,0,.22); stroke:var(--pn-lime)}
.radar-poly--media{fill:rgba(111,201,234,.10); stroke:var(--pn-cyan-300); stroke-dasharray:6 4}
.radar-dot{stroke:var(--pn-navy); stroke-width:2; transition:all .5s var(--ease)}
.radar-dot--pala{fill:var(--pn-lime)}
.radar-dot--media{fill:var(--pn-cyan-300)}
.radar-label{font-family:var(--font-display); font-weight:600; font-size:15px; text-transform:uppercase; letter-spacing:.05em; fill:rgba(255,255,255,.9)}
.radar-value{font-family:var(--font-display); font-weight:800; font-size:17px; fill:#fff}
.radar-hit{fill:transparent; cursor:pointer; outline:0}
.radar-hit:focus-visible{fill:rgba(204,255,0,.15)}
.radar-tip{position:absolute; transform:translate(-50%, calc(-100% - 14px)); background:#fff; color:var(--ink); border-radius:10px; padding:10px 14px; box-shadow:var(--pn-shadow-05); pointer-events:none; z-index:5; min-width:180px; max-width:260px; font-size:14px; line-height:1.3}
.radar-tip b{display:block; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em; font-size:14px}
.radar-tip span{display:block; font-weight:700; margin-top:2px}
.radar-tip span i{font-style:normal; font-weight:500; color:var(--ink-3)}
.radar-tip small{display:block; margin-top:4px; color:var(--ink-2); font-size:12.5px}
.radar-tip::after{content:""; position:absolute; left:50%; bottom:-6px; width:12px; height:12px; background:#fff; transform:translateX(-50%) rotate(45deg)}
@media(max-width:860px){
  .radar-grid{grid-template-columns:1fr; gap:24px}
  .radar{max-width:420px}
  .radar-label{font-size:14px}
}

/* ---------- Barras + perfil ---------- */
.profile{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:48px; align-items:start}
.bars{display:flex; flex-direction:column; gap:22px}
.bar-t{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.bar-name{font-family:var(--font-body); font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.06em}
.bar-level{font-size:14px; color:var(--ink-3); font-weight:500}
.bar-level b{color:var(--ink); font-family:var(--font-display); font-size:17px; margin-left:4px}
.bar{position:relative; height:10px; border-radius:var(--r-pill); background:var(--pn-grey-20); overflow:visible}
.bar i{display:block; height:100%; border-radius:var(--r-pill); background:var(--pn-navy); width:0; transition:width 1.1s var(--ease)}
.bar i.hi{background:var(--pn-court-cyan)}
.bar-media{position:absolute; top:-5px; width:3px; height:20px; border-radius:2px; background:var(--pn-cyan-300); transform:translateX(-50%); box-shadow:0 0 0 2px #fff}
.bar-note{font-size:13px; color:var(--ink-3); margin-top:7px; line-height:1.4}
.profile-card{background:var(--pn-navy); color:#fff; border-radius:var(--r-lg); padding:30px 28px; position:sticky; top:80px}
.profile-card h3{font-size:28px; line-height:1.1; margin:14px 0 18px; text-transform:uppercase; font-weight:800; font-style:italic}
.who{display:flex; flex-direction:column; gap:12px}
.who-item{display:flex; gap:11px; align-items:flex-start; font-size:15.5px; line-height:1.35; color:rgba(255,255,255,.9)}
.who-item svg{flex:none; margin-top:2px; border-radius:50%; padding:2px; width:21px; height:21px}
.who-item.yes svg{color:var(--pn-navy); background:var(--pn-lime)}
.who-item.no svg{color:#fff; background:var(--pn-danger)}
.who-item.warn svg{color:var(--pn-navy); background:#FFD166}
@media(max-width:900px){.profile{grid-template-columns:1fr; gap:32px} .profile-card{position:static}}

/* ---------- Anatomía (ilustraciones PNG/WebP transparentes sobre tarjeta clara) ---------- */
.anatomy-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.anatomy-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px}
.anatomy-card h3{font-size:24px; text-transform:uppercase; margin-bottom:8px}
.anatomy-card>p{font-size:16px; color:var(--ink-2); line-height:1.5; min-height:3em}
.formas{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:22px; position:relative; padding-bottom:30px}
.forma-fig{margin:0; text-align:center}
.forma-fig img{display:block; width:100%; height:auto; aspect-ratio:2/3; opacity:.3; filter:grayscale(1); transition:opacity .35s var(--ease), filter .35s var(--ease)}
.forma-fig.is-active img{opacity:1; filter:none}
.forma-fig figcaption{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:13px; margin-top:4px; color:var(--ink-3)}
.forma-fig.is-active figcaption{color:var(--ink); font-weight:800}
.sweet-legend{position:absolute; left:0; bottom:0; font-size:13px; color:var(--ink-3); display:flex; align-items:center; gap:8px}
.sweet-legend i{width:14px; height:10px; border-radius:50%; background:var(--pn-lime); border:1px solid var(--pn-navy); display:inline-block}
.balance{margin-top:16px}
.balance-img{display:block; width:100%; height:auto; aspect-ratio:5/3}
.balance-axis{display:flex; justify-content:space-between; padding:8px 14% 0; border-top:1px solid var(--pn-grey-50); margin-top:-8px}
.balance-tick{font-family:var(--font-display); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3)}
.balance-tick.is-active{color:var(--ink); font-weight:800}
@media(max-width:860px){.anatomy-grid{grid-template-columns:1fr}}

/* ---------- Ficha técnica ---------- */
.specs-grid{display:block}
.specs{display:grid; grid-template-columns:1fr 1fr; gap:0 40px}
.spec{display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--pn-grey-20); font-size:16px}
.spec dt{color:var(--pn-grey-80)}
.spec dd{font-weight:600; text-align:right; color:var(--pn-navy)}
.specs-note{margin-top:16px; font-size:13px; color:var(--ink-3)}
@media(max-width:620px){.specs{grid-template-columns:1fr}}

/* ---------- Palas parecidas ---------- */
.similar{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.sim-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--pn-shadow-03); transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s}
.sim-card:hover{transform:translateY(-3px); border-color:var(--pn-navy)}
.sim-img{background:var(--soft); aspect-ratio:1/1; display:grid; place-items:center}
.sim-img img{width:100%; height:100%; object-fit:contain; padding:10%}
.sim-body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px}
.sim-brand{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3)}
.sim-brand em{font-style:normal; color:var(--pn-dark-blue)}
.sim-name{font-size:21px; text-transform:uppercase; line-height:1.1}
.sim-chips{display:flex; flex-wrap:wrap; gap:6px}
.sim-chips span{font-size:12px; background:var(--soft); border-radius:6px; padding:3px 8px; color:var(--ink-2); font-weight:600}
.sim-foot{display:flex; justify-content:flex-end; margin-top:6px}
.sim-cta{font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--pn-dark-blue)}
@media(max-width:860px){.similar{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.similar{grid-template-columns:1fr}}

/* ---------- Pie ---------- */
.foot{padding:36px 0 48px; border-top:1px solid var(--line)}
.foot .wrap{display:flex; flex-direction:column; gap:22px; align-items:flex-start}
.foot-disclaimer{font-size:13px; color:var(--ink-3); line-height:1.5; max-width:80ch}
html.is-popup .foot{padding-bottom:72px}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}