/* ══════════════════════════════════════════════════════════════════════════
   VOLLEY·STATS — sistema de diseño v2
   --------------------------------------------------------------------------
   MARCA: los valores salen del Brand Book v1.0 (octubre 2026).
   DATOS: los colores de dato NO salen del brand book, se calcularon y se
   validaron con el verificador de paletas. Dos reglas que no se negocian:

     1. EL ROJO DE MARCA NUNCA ES UN DATO. #E10600 es logo, botón y marcador
        de sección. Si un número se pinta de rojo, el lector no sabe si eso
        significa "de la marca" o "mal".

     2. EL PAR DIVERGENTE NO ES VERDE/ROJO. Medido: verde y rojo quedan a
        ΔE 2–6 bajo deuteranopia, o sea que un 8% de los varones —y este
        producto lo miran entrenadores, casi todos varones— no los distingue.
        El par frío/cálido que usamos queda a ΔE 21,8. Y además cada número
        lleva su signo, así que el color nunca es la única pista.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── marca ─────────────────────────────────────────────── Brand Book v1.0 */
  --tinta:#07080F;        /* fondo              60% del uso */
  --grafito:#1C1F2A;      /* tarjetas y superficies          */
  --cancha:#F5F7FA;       /* texto principal    25%          */
  --dato:#8A93A6;         /* ejes y etiquetas   10%          */
  --rojo:#E10600;         /* acento SOLO marca   5%          */
  --rojo-hover:#A30400;

  /* ── tintas de texto ─────────────────────────────────────────────────── */
  --t1:#F5F7FA;           /* 18.6:1 */
  --t2:#C2C9D6;           /* 11.4:1 */
  --t3:#8A93A6;           /*  5.8:1 */

  /* ── superficies ─────────────────────────────────────────────────────── */
  --sup1:#11141E;
  --sup2:#1C1F2A;
  --linea:rgba(245,247,250,.09);
  --linea2:rgba(245,247,250,.17);

  /* ── dato · divergente (validado) ────────────────────────────────────── */
  --mas:#3295CB;          /* por encima de lo esperable */
  --menos:#CC8026;        /* por debajo                 */
  --cero:#8A93A6;

  /* ── dato · la escala de evaluación del ataque ───────────────────────── */
  /* Seis grados con una sola polaridad: punto arriba, error abajo. Es una
     escala divergente, no una paleta de categorías, así que el gris del medio
     y los extremos claros son a propósito. Medido con el verificador sobre
     #07080F: el peor par contiguo queda a ΔE 18,6 bajo deuteranopia y 19,3 con
     visión normal. Y cada grado lleva su palabra escrita al lado, así que el
     color nunca decide solo. */
  --ev-pt:#2E86C1;        /* #  punto      */
  --ev-po:#9ED7F2;        /* +  positivo   */
  --ev-rg:#8A93A6;        /* !  regular    */
  --ev-ml:#EDBE6E;        /* -  malo       */
  --ev-bl:#C07218;        /* /  bloqueado  */
  --ev-er:#7A3E0A;        /* =  error      */

  /* ── dato · secuencial, un solo tono (validado) ──────────────────────── */
  --m1:#4A3B8C; --m2:#5E4BA8; --m3:#7A68C4; --m4:#9A8ADA; --m5:#C0B6EE;

  /* ── tipografía ──────────────────────────────────────────────────────── */
  --disp:'Bebas Neue',Impact,sans-serif;
  --tit:'Barlow Condensed',system-ui,sans-serif;
  --txt:'Barlow',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  color-scheme:dark;        /* decide controles y barras de scroll */
  --r:14px; --r2:10px;
  --ancho:1240px;
  --gut:clamp(18px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--tinta);color:var(--t2);
  font-family:var(--txt);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ══ rejilla ══════════════════════════════════════════════════════════════
   El canal lateral nunca baja de 16px y ademas despeja la barra del sistema
   cuando el telefono esta acostado. */
.w{max-width:var(--ancho);margin:0 auto;
  padding-left:max(var(--gut),env(safe-area-inset-left,0px));
  padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
section{padding-block:clamp(64px,9vw,128px);position:relative}
section + section{border-top:1px solid var(--linea)}

/* ══ tipografía ═══════════════════════════════════════════════════════════ */
h1,h2,h3,h4{font-family:var(--tit);color:var(--t1);font-weight:700;
  letter-spacing:-.015em;line-height:1.04;margin:0}
h1{font-size:clamp(2.6rem,6.4vw,5rem)}
h2{font-size:clamp(2rem,4.4vw,3.4rem)}
h3{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.15}
h4{font-size:1.02rem}
p{margin:0 0 1em}
.lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--t2);max-width:58ch;line-height:1.6}
.dim{color:var(--t3)}
.hl{color:var(--rojo)}

/* el marcador de sección: cuadradito rojo + etiqueta mono */
.kick{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--t3);display:flex;align-items:center;
  gap:9px;margin-bottom:18px}
.kick::before{content:'';width:7px;height:7px;background:var(--rojo);
  border-radius:1px;flex:0 0 7px}

/* Medida de lectura: entre 45 y 70 caracteres por renglon. Mas ancho que eso
   y el ojo pierde el salto de linea — se lee peor aunque entre mas texto. */
.shead{max-width:62ch;margin-bottom:clamp(30px,4vw,52px)}
.shead .lead{margin-top:16px}

/* ══ números ══════════════════════════════════════════════════════════════
   Este es un producto de números: la cifra es tipografía de titular, no
   texto chico. Tabular siempre, para que no bailen al cambiar. */
.num{font-family:var(--disp);font-weight:400;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;color:var(--t1);line-height:.9}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ══ superficies ══════════════════════════════════════════════════════════ */
.card{background:var(--sup1);border:1px solid var(--linea);border-radius:var(--r);
  padding:22px}
.panel{background:var(--sup1);border:1px solid var(--linea);border-radius:var(--r);
  overflow:hidden}
.panel-h{display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--linea);background:rgba(245,247,250,.02);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t3);flex-wrap:wrap}
.panel-b{padding:clamp(16px,2.4vw,26px)}

/* ══ botones ══════════════════════════════════════════════════════════════ */
.cta,.cta2{display:inline-flex;align-items:center;gap:9px;border-radius:9px;
  padding:13px 22px;font-family:var(--tit);font-weight:700;font-size:1.02rem;
  letter-spacing:.01em;text-decoration:none;transition:.18s;white-space:nowrap}
.cta{background:var(--rojo);color:#fff}
.cta:hover{background:#FF1A0D;transform:translateY(-1px)}
.cta2{border:1px solid var(--linea2);color:var(--t1)}
.cta2:hover{border-color:var(--t3);background:rgba(245,247,250,.04)}

/* ══ píldoras de filtro — una sola fila arriba del gráfico ════════════════ */
.pills{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.pill{border:1px solid var(--linea);border-radius:99px;padding:7px 14px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--t3);transition:.16s;
  min-height:34px;display:inline-flex;align-items:center;gap:7px}
.pill:hover{border-color:var(--linea2);color:var(--t1)}
.pill.on{background:var(--cancha);border-color:var(--cancha);color:var(--tinta)}
.pill .pt{width:9px;height:9px;border-radius:2px;flex:0 0 9px}

/* ══ leyenda ══════════════════════════════════════════════════════════════ */
.leg{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  font-family:var(--mono);font-size:.68rem;color:var(--t3);letter-spacing:.06em}
.leg i{width:11px;height:11px;border-radius:2px;display:inline-block;
  margin-right:7px;vertical-align:-1px}

/* ══ la tabla de respaldo: todo gráfico tiene sus números ═════════════════ */
.verdatos{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t3);border-bottom:1px dotted var(--linea2);
  padding:2px 0}
.verdatos:hover{color:var(--t1)}
.tabla{width:100%;border-collapse:collapse;font-family:var(--mono);
  font-size:.78rem;margin-top:16px}
.tabla th,.tabla td{padding:7px 10px;border-bottom:1px solid var(--linea);
  text-align:right;font-variant-numeric:tabular-nums;color:var(--t2)}
.tabla th{color:var(--t3);font-weight:500;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap}
.tabla th:first-child,.tabla td:first-child{text-align:left}
.tabla caption{caption-side:top;text-align:left;color:var(--t3);
  font-size:.7rem;padding-bottom:8px}

/* ══ tooltip ══════════════════════════════════════════════════════════════ */
.tip{position:fixed;z-index:90;pointer-events:none;opacity:0;transition:opacity .12s;
  background:var(--sup2);border:1px solid var(--linea2);border-radius:9px;
  padding:9px 12px;font-family:var(--mono);font-size:.74rem;color:var(--t1);
  box-shadow:0 18px 40px -18px #000;max-width:270px;line-height:1.5}
.tip.on{opacity:1}
.tip b{color:var(--t1);font-weight:600}
.tip span{color:var(--t3)}

/* ══ aparición ════════════════════════════════════════════════════════════
   La pagina esta COMPLETA quieta: .rv es visible por defecto. La animacion
   solo se enciende cuando el motor dice que puede (html[data-anim]), asi no
   hay forma de que un bloque quede invisible para siempre porque el
   observador no disparo. */
.rv{opacity:1;transform:none}
html[data-anim] .rv:not(.in){opacity:0;transform:translateY(14px)}
html[data-anim] .rv{transition:opacity .55s ease,transform .55s ease}
@media (prefers-reduced-motion:reduce){
  html[data-anim] .rv:not(.in){opacity:1;transform:none}
  html[data-anim] .rv{transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ══ utilidades ═══════════════════════════════════════════════════════════ */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,22px)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,18px)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.oculto{display:none}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--mas);outline-offset:3px;border-radius:4px}