/* ==========================================================================
   EligePádel — Tema «Pista» (18/10/2026)
   Se carga DESPUÉS de app.css en todas las páginas (lo inyecta
   scripts/build-theme.mjs). Solo cambia tokens y piel de componentes:
   la estructura y el comportamiento siguen viniendo de app.css y del JS.

   Paleta sacada de la propia pista: césped azul, bola amarilla, líneas
   blancas y cristal. El azul trabaja; el amarillo solo marca lo que
   importa (nota, comprar, CTA principal en fondo oscuro).
   ========================================================================== */

@font-face{
  font-family:"Unbounded";src:url("/assets/fonts/unbounded-var-latin.woff2") format("woff2");
  font-weight:200 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Pista */
  --court:#1D4ED8;        /* césped azul: acento principal */
  --court-2:#2F64F0;      /* hover / brillo */
  --court-deep:#0A2160;   /* pista de noche: hero, pie, nota */
  --court-ink:#0E1A35;    /* texto */
  --ball:#DCF23C;         /* bola */
  --ball-2:#C9E01F;
  --glass:#F2F5FB;        /* fondo de página */

  --bg:var(--glass);
  --bg-2:#E8EEF8;
  --surface:#FFFFFF;
  --surface-2:#F6F8FD;
  --surface-3:#E9EFF9;

  --line:rgba(14,26,53,.10);
  --line-strong:rgba(14,26,53,.22);

  --text:var(--court-ink);
  --text-2:#2A3654;
  --muted:#4E5B78;
  --muted-2:#5D6987;

  --accent:var(--court);
  --accent-ink:#FFFFFF;
  --accent-soft:#E6EDFD;
  --accent-line:#B5C8F6;
  --pro:#16794A;
  --con:#C2362F;
  --warn:#8A5B00;

  --plate:radial-gradient(120% 90% at 50% 18%,#FFFFFF 0%,#F4F7FD 58%,#E5ECF8 100%);
  --plate-line:rgba(14,26,53,.07);
  --media-bg:#EEF2FA;

  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:30px;

  --shadow-1:0 1px 2px rgba(10,33,96,.06);
  --shadow-2:0 22px 44px -24px rgba(10,33,96,.32);
  --shadow-3:0 34px 70px -30px rgba(10,33,96,.42);

  --ff-display:"Unbounded",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* La voz «mono» desaparece: los datos se leen en Inter con cifras tabulares. */
  --ff-mono:var(--ff);

  --nav-h:68px;
}

::selection{background:var(--ball);color:var(--court-deep)}
body{background:var(--bg);color:var(--text)}

/* ---------- Tipografía ---------- */
/* Unbounded es ancha: tamaños algo menores y peso medio para que respire. */
h1,h2,h3,h4{font-weight:650;letter-spacing:-.02em;line-height:1.1}
.d1{font-size:clamp(2.1rem,4.4vw,3.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.02}
.d2{font-size:clamp(1.6rem,3vw,2.35rem);font-weight:650;letter-spacing:-.025em;line-height:1.08}
.h2{font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:650;letter-spacing:-.022em;line-height:1.14}
.h3{font-size:1.05rem;font-weight:600;letter-spacing:-.012em}
.page-head h1{font-weight:700;letter-spacing:-.028em}
.ficha-title{font-size:clamp(1.7rem,2.9vw,2.4rem);font-weight:650;letter-spacing:-.025em;line-height:1.08}
.lead{color:var(--muted)}

/* Antes: mono, versal y tracking. Ahora una línea corta en azul pista. */
.eyebrow,.kicker{
  font-family:var(--ff);font-size:.9rem;font-weight:650;letter-spacing:0;text-transform:none;
  color:var(--court);margin-bottom:var(--s-2)
}
.eyebrow--muted{color:var(--muted-2)}
.pcard-brand,.source-tag,.footer .footer-heading,.fgroup > b,.article-meta{
  text-transform:none;letter-spacing:0;font-weight:600
}
.price-now,.pcard-score b,.ficha-score b,.meter i,.rating b,.spec-table td,.cmp-table td,.chip{
  font-variant-numeric:tabular-nums
}

/* ---------- Botones ---------- */
.btn{border-radius:var(--r-pill);font-family:var(--ff);font-weight:650;letter-spacing:-.005em}
.btn-primary{--btn-bg:var(--court);--btn-fg:#FFFFFF;--btn-bd:var(--court);font-weight:700}
.btn-primary:hover{--btn-bg:var(--court-deep);--btn-bd:var(--court-deep);box-shadow:var(--shadow-2)}
.btn-ghost{--btn-bd:var(--line-strong)}
.btn-ghost:hover{--btn-bg:var(--accent-soft);--btn-bd:var(--accent-line)}
.btn-soft{--btn-bg:var(--accent-soft);--btn-fg:var(--court-deep);--btn-bd:transparent}
.btn-soft:hover{--btn-bg:#D9E4FC;--btn-bd:transparent}
/* Comprar en Amazon: el único botón amarillo fuera del hero. */
.btn-amazon,.pcard-cta,.ficha-buy .btn-primary,.mobile-buybar .btn-primary,a.btn[href*="amazon."]{
  --btn-bg:var(--ball);--btn-fg:var(--court-deep);--btn-bd:var(--ball);font-weight:750
}
.btn-amazon:hover,.pcard-cta:hover,.ficha-buy .btn-primary:hover,.mobile-buybar .btn-primary:hover,a.btn[href*="amazon."]:hover{
  --btn-bg:var(--ball-2);--btn-bd:var(--ball-2);--btn-fg:var(--court-deep);box-shadow:0 14px 30px -16px rgba(120,140,0,.55)
}
:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{outline-color:var(--court)}

/* ---------- Chips ---------- */
.chip{border-radius:var(--r-pill);padding:4px 11px;background:var(--surface-3);border-color:transparent;color:var(--text-2);font-family:var(--ff);font-weight:550;letter-spacing:0}
.chip--accent{background:var(--accent-soft);color:var(--court)}

/* ---------- Superficies ---------- */
.card,.panel{border-color:var(--line);border-radius:var(--r-lg)}
.card:hover{background:var(--surface);border-color:var(--accent-line)}
.panel{box-shadow:var(--shadow-1)}
.section--line{border-top-color:var(--line)}
.tile{border-radius:var(--r)}
.tile:hover{border-color:var(--accent-line);background:var(--surface)}
.callout{border-radius:var(--r)}
.kv{border-radius:var(--r)}

/* ---------- Tarjeta de pala ---------- */
.pcard{border-radius:var(--r-xl);background:var(--surface)}
.pcard:hover,.pcard:focus-within{transform:translateY(-6px);border-color:var(--accent-line);box-shadow:var(--shadow-3)}
.pcard-media{margin:8px 8px 0;border-radius:calc(var(--r-xl) - 8px)}
.pcard-body{padding:var(--s-4) var(--s-5) var(--s-5)}
.pcard-brand{font-size:var(--fs-sm);color:var(--court)}
.pcard-name{font-size:1rem;font-weight:650;letter-spacing:-.015em;line-height:1.3}
/* La nota es la bola: amarilla, redonda, en una esquina de la foto. */
.pcard-score{
  top:12px;right:12px;flex-direction:column;align-items:center;justify-content:center;gap:0;
  width:58px;height:58px;padding:0;border-radius:50%;border:0;
  background:radial-gradient(circle at 34% 30%,#F1FF8A 0%,var(--ball) 46%,var(--ball-2) 100%);
  box-shadow:0 10px 22px -10px rgba(110,130,0,.7)
}
.pcard-score b{font-family:var(--ff-display);font-size:1.05rem;font-weight:700;color:var(--court-deep);letter-spacing:-.03em}
.pcard-score span{font-size:.62rem;letter-spacing:0;text-transform:none;color:rgba(10,33,96,.72);font-weight:600;margin-top:1px}
.pcard-compare{border-radius:var(--r-pill);font-family:var(--ff);font-weight:600;font-size:var(--fs-sm);letter-spacing:0}

/* ---------- Ficha ---------- */
.ficha-score{background:var(--court-deep);border:0;color:#fff;border-radius:var(--r-lg)}
.ficha-score b{font-family:var(--ff-display);font-weight:700;color:var(--ball)}
.ficha-score i{color:rgba(255,255,255,.7);text-transform:none;letter-spacing:0}
.ficha-score strong,.ficha-score h2,.ficha-score h3,.ficha-score p{color:#fff}
.ficha-score span,.ficha-score small{color:rgba(255,255,255,.78)}
.gallery-main{border-radius:var(--r-xl)}
.meter-bar,.meter{border-radius:var(--r-pill)}

/* ---------- Cabecera ---------- */
.nav{background:rgba(242,245,251,.86);border-bottom-color:var(--line)}
.brand{font-family:var(--ff-display);font-weight:700;font-size:1.02rem;letter-spacing:-.04em;gap:10px}
.brand em{color:var(--court)}
/* Marca: una bola de pádel en lugar del cuadrado con iniciales. */
.brand-mark{
  width:30px;height:30px;border-radius:50%;font-size:0;color:transparent;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.34' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23F3FF96'/%3E%3Cstop offset='.5' stop-color='%23DCF23C'/%3E%3Cstop offset='1' stop-color='%23B9D012'/%3E%3C/radialGradient%3E%3CclipPath id='c'%3E%3Ccircle cx='15' cy='15' r='15'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='15' cy='15' r='15' fill='url(%23g)'/%3E%3Cg clip-path='url(%23c)' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 2c6 6 6 20 0 26'/%3E%3Cpath d='M26 2c-6 6-6 20 0 26'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
  box-shadow:0 4px 10px -4px rgba(120,140,0,.6)
}
.nav-links a{font-weight:550;color:var(--muted)}
.nav-links a:hover,.nav-links a.is-active{color:var(--court-deep)}
.nav-links a.is-active::after{background:var(--court)}
.nav-cta{--btn-bg:var(--court);--btn-bd:var(--court);--btn-fg:#fff}

/* ---------- Pie ---------- */
.footer{
  --bg-2:var(--court-deep);--text:#FFFFFF;--muted:#C9D5F2;--muted-2:#A9BBE6;
  --accent:var(--ball);--accent-ink:var(--court-deep);
  --line:rgba(255,255,255,.12);--line-strong:rgba(255,255,255,.3);
  position:relative;border-top:0;background:var(--court-deep);
  padding:clamp(40px,5vw,64px) 0 28px;margin-top:clamp(48px,6vw,88px)
}
/* Cierre: una pista vista desde arriba, con la red en el centro. */
.footer-cta{
  display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;
  padding:clamp(28px,3.4vw,44px) clamp(24px,4vw,56px);margin-bottom:clamp(44px,5vw,64px);
  border-radius:var(--r-xl);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.38' stroke-width='2' vector-effect='non-scaling-stroke'%3E%3Crect x='1' y='1' width='198' height='98' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M169.5 0V100M100 50H169.5' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3Cpath d='M100 0V100' stroke='%23fff' stroke-opacity='.75' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat,
    radial-gradient(80% 120% at 30% 0%,#3468F0 0%,var(--court) 55%,#173FB0 100%);
  box-shadow:0 30px 60px -34px rgba(0,8,40,.9)
}
.footer-cta-text{max-width:44ch}
.footer-cta-title{font-family:var(--ff-display);font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:650;letter-spacing:-.025em;line-height:1.1;color:#fff}
.footer-cta-lead{margin-top:10px;font-size:1rem;line-height:1.55;color:rgba(255,255,255,.85)}
.footer-cta-actions{display:flex;flex-wrap:wrap;gap:10px}
.footer .footer-cta-btn{
  display:inline-flex;align-items:center;min-height:50px;padding:0 24px;border-radius:999px;
  font-size:.98rem;font-weight:700;transition:background .2s var(--ease),transform .16s var(--ease)
}
.footer .footer-cta-btn--ball{background:var(--ball);color:var(--court-deep)}
.footer .footer-cta-btn--ball:hover{background:#E9FB62;color:var(--court-deep);transform:translateY(-2px)}
.footer .footer-cta-btn--line{background:rgba(10,33,96,.7);border:1.5px solid rgba(255,255,255,.55);color:#fff}
.footer .footer-cta-btn--line:hover{background:rgba(10,33,96,.6);color:#fff;border-color:#fff}

.footer-grid{grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:36px 28px}
.footer .brand{display:inline-flex;flex-direction:row;align-items:center;gap:10px;color:#fff;font-size:1.1rem;padding:0}
.footer .brand em{color:var(--ball)}
.footer-claim{margin-top:14px;max-width:34ch;font-size:.95rem;line-height:1.6;color:var(--muted)}
.footer .footer-heading{font-family:var(--ff-display);font-size:.85rem;font-weight:600;letter-spacing:-.01em;color:#fff;margin:4px 0 14px}
.footer ul{gap:0}
.footer ul a{padding-block:6px;font-size:.93rem;color:var(--muted)}
.footer a:hover{color:var(--ball)}

/* Banda legal: ancho completo, letra pequeña y una fila de enlaces. */
.footer-note{
  max-width:none;margin-top:clamp(40px,4.5vw,56px);padding-top:24px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 40px;align-items:start;
  font-size:.84rem;line-height:1.65;color:var(--muted-2)
}
.footer-note>p:not(.footer-legal-links):not(:last-child){grid-column:1;max-width:84ch}
.footer-note strong{color:#fff;font-weight:600}
.footer-legal-links{grid-column:2;grid-row:1 / span 3;flex-direction:column;align-items:flex-end;gap:0 !important}
.footer .footer-legal-links a{min-height:34px;padding:0;font-size:.88rem;color:var(--muted);text-decoration:none}
.footer .footer-legal-links a:hover{color:var(--ball)}
.footer-note>p:last-child{grid-column:1 / -1;margin-top:14px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted-2)}

@media (max-width:900px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid>div:first-child{grid-column:1 / -1}
  .footer-note{grid-template-columns:minmax(0,1fr)}
  .footer-legal-links{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 20px !important}
}
@media (max-width:700px){
  .footer-cta{background:radial-gradient(80% 120% at 30% 0%,#3468F0 0%,var(--court) 55%,#173FB0 100%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.3),0 30px 60px -34px rgba(0,8,40,.9)}
}
@media (max-width:520px){
  .footer-cta-actions{width:100%}
  .footer .footer-cta-btn{flex:1 1 100%;justify-content:center}
}

/* ---------- Barra de comparación y barra de compra móvil ---------- */
.cmp-bar{border-radius:var(--r-lg);visibility:hidden;transition:transform .32s var(--ease),visibility 0s linear .32s}
/* Vacía no solo se desplaza fuera de pantalla: se oculta del todo (en capturas
   largas y en móviles con barra de navegador retráctil asomaba «0 palas»). */
.cmp-bar.is-visible{visibility:visible;transition:transform .32s var(--ease),visibility 0s}


/* ---------- Etiquetas: fuera versal y tracking ----------
   Generado a partir de las reglas de app.css con text-transform:uppercase.
   Mismo selector, cargado después: gana sin !important. */
.hero-stat span,
.hero-preview-head span,
.analysis-origin span,
.kv dt,
.score-explainer span,
.sens b,
.pc b,
.decision-card>span,
.retailer-card span,
.history-head span,
.retailer-pending>span,
.ph-tendencia,
.ph-stats dt,
.ph-badge,
.quick-compare span,
.product-context-links>span,
.fgroup > b,
.watch-card-top>span:first-child,
.cmp-diff-count,
.verdict-row b,
.cmp-empty-suggestions span,
.quiz-profile span,
.podium-medal,
.qr-rank,
.qr-contra span,
.qr-badge,
.qr-compartido span,
.rk-selector-titulo,
.rk-pros span,
.rk-contras span,
.rk-porque span,
.rk-paraquien span,
.rk-badge,
.rk-tabla thead th,
.rk-metodo-formula span,
.rk-hijos span,
.rk-guias span,
.cmp-aviso span,
.cmp-crit-ganadora span,
.cmp-relacionados span,
.start-path>span,
.compare-story>span,
.article-meta,
.toc b,
.comparison-product>span,
.comparison-product-facts small,
.ranking-method>div:last-child>span,
.ranking-copy>span,
.ranking-metrics small,
.ranking-hub-grid span,
.metrics-status span,
.ep-command-result small,
.mobile-buybar span{
  text-transform:none;letter-spacing:0;font-family:var(--ff);font-size:.8rem;font-weight:600
}

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .pcard:hover,.pcard:focus-within{transform:none}
}

/* ---------- Anuncios (AdSense, bloques fijos) ----------
   Invisibles hasta que Google sirve un anuncio: así no queda nunca un hueco
   vacío (sitio sin aprobar, sin inventario o bloqueador). */
.ep-ad{display:none}
.ep-ad:has(ins.adsbygoogle[data-ad-status="filled"]){display:block;margin:clamp(32px,4vw,56px) auto;padding-top:14px;border-top:1px solid var(--line)}
.ep-ad-label{margin:0 0 8px;font-size:.75rem;font-weight:600;color:var(--muted-2)}
.ep-ad ins.adsbygoogle{min-height:90px}
.ep-ad ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
.prose .ep-ad--medio:has(ins.adsbygoogle[data-ad-status="filled"]){margin:32px 0}

/* Migas de pan: .crumbs anulaba el margen lateral de .wrap en móvil */
.crumbs.wrap{padding-inline:var(--gutter)}