/* 6. Números. Idea de diseño: un cuadro de mando donde manda la cifra.
   Cada pantalla abre con una pieza protagonista (una cifra grande, su ritmo o su estado en palabras y las cifras de apoyo al lado),
   sigue una tira de cifras secundarias, luego gráficas siempre con el mismo estilo (p6-graf) y al final lo que se escribe.
   Las piezas de lectura llevan solo:'ver' en el esquema y desaparecen en Rellenar. */

/* ---- protagonista ---- */
.c:has(>.p6-hero){padding:0;background:none;box-shadow:none;gap:0}
.p6-hero{display:flex;flex-direction:column;gap:24px;padding:28px;border-radius:18px;background:#fff;color:#1D1D1F;box-shadow:0 1px 2px rgba(0,0,0,.03),0 4px 16px rgba(0,0,0,.035)}
.p6-hero.p6-vino{background:linear-gradient(155deg,#8E1A3A 0%,#5C0F26 100%);color:#fff;box-shadow:0 10px 28px rgba(92,15,38,.22)}
.p6-hg{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:center}
.p6-hv{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.p6-hv .btn,.p6-tira .btn{min-height:44px}
.p6-et{margin:0;font-size:13px;line-height:18px;font-weight:600;color:#6E6E73}
.p6-tit{margin:2px 0 0;font-size:30px;line-height:36px;font-weight:700;letter-spacing:-.025em}
.p6-n{margin:4px 0 0;font-size:60px;line-height:64px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.p6-n .p6-sd{font-size:28px;line-height:34px}
.p6-de{margin:4px 0 0;font-size:15px;line-height:22px;color:#6E6E73}
.p6-sd{font-weight:500;color:#6E6E73;font-size:16px}
.p6-est{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:14px 0 0;font-size:15px;line-height:22px}
.p6-vino .p6-et,.p6-vino .p6-de,.p6-vino .p6-sd,.p6-vino .sub2,.p6-vino .lbl,.p6-vino .p6-pista-l{color:rgba(255,255,255,.88)}
.p6-vino .p6-n,.p6-vino .p6-m,.p6-vino .p6-t{color:#fff}

/* barra con marca (ritmo, umbral, referencia) y sus dos etiquetas en palabras */
.p6-pista{margin-top:16px}
.p6-pista-t{position:relative;height:12px;border-radius:99px;background:#E8E8ED}
.p6-pista-t i{display:block;height:100%;border-radius:99px;background:#7A1230;animation:grow .9s cubic-bezier(.2,.8,.2,1)}
.p6-pista-t em{position:absolute;top:-5px;width:2px;height:22px;border-radius:2px;background:#1D1D1F}
.p6-pista-l{display:flex;justify-content:space-between;gap:12px;margin:10px 0 0;font-size:12px;line-height:16px;color:#6E6E73}
.p6-vino .p6-pista-t{background:rgba(255,255,255,.24)}
.p6-vino .p6-pista-t i,.p6-vino .p6-pista-t em{background:#fff}

/* cifras de apoyo al lado de la grande */
.p6-lado{display:grid;gap:18px;min-width:0}
.p6-l{padding-left:20px;border-left:1px solid rgba(0,0,0,.1);min-width:0}
.p6-vino .p6-l{border-left-color:rgba(255,255,255,.3)}
.p6-m{margin:2px 0 0;font-size:28px;line-height:32px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.p6-m2{font-size:40px;line-height:44px}
.p6-m3{font-size:20px;line-height:26px;letter-spacing:-.01em}
.p6-lado.h{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

/* lectura del equipo */
.p6-tira{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 18px;border-radius:14px;background:#F5F5F7}
.p6-tira p{margin:0}
.p6-t{font-size:15px;line-height:22px}
.p6-frase{font-size:22px;line-height:30px;font-weight:600;letter-spacing:-.015em}
.p6-vino .p6-tira{background:rgba(255,255,255,.12)}
.p6-vino .p6-tira .btn{background:#fff;color:#7A1230}
.p6-vino .p6-tira .btn:hover{background:#F4E3E8}

/* embudo en cuatro pasos con chevrones */
.p6-flujo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.p6-paso{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 18px;border-radius:14px;background:#F5F5F7;min-width:0}
.p6-paso p{margin:0}
.p6-paso.fin{background:#F4E3E8}
.p6-paso.fin .p6-n2{color:#7A1230}
.p6-n2{font-size:40px;line-height:44px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.p6-chev{position:absolute;right:-14px;top:50%;width:20px;height:20px;margin-top:-10px;z-index:1;color:#6E6E73;background:#fff;border-radius:50%}

/* trimestres como recorrido */
.p6-qs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.p6-q{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;border-radius:14px;background:#F5F5F7;font-size:13px;line-height:18px;color:#6E6E73}
.p6-q b{font-size:15px;color:#1D1D1F}

/* barra partida (fijos y variables, reparto del NPS) */
.p6-seg{display:flex;gap:2px;height:14px;margin-top:16px;border-radius:99px;overflow:hidden}
.p6-seg i{display:block;height:100%}
.p6-s1{background:#fff}
.p6-s2{background:rgba(255,255,255,.5)}

/* tira de cifras secundarias */
.c:has(>.p6-cw){padding:0}
.p6-cw{overflow:hidden;border-radius:18px}
.p6-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));margin:-1px 0 0 -1px}
.p6-cif{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-left:1px solid rgba(0,0,0,.08);border-top:1px solid rgba(0,0,0,.08);min-width:0}
.p6-cif p{margin:0}
.p6-c{font-size:30px;line-height:36px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* gráficas: siempre el mismo cuerpo, la misma leyenda y las mismas filas */
.p6-graf{display:flex;flex-direction:column;gap:12px}
.p6-graf .hb{grid-template-columns:132px minmax(0,1fr) 120px;min-height:34px}
.p6-graf .hb>span:first-child{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p6-graf .hb>span:last-child{font-size:14px;font-variant-numeric:tabular-nums}
.p6-ley{display:flex;flex-wrap:wrap;gap:6px 16px;margin:2px 0 0;font-size:12px;line-height:16px;color:#6E6E73}
.p6-ley span{display:inline-flex;align-items:center;gap:6px}
.p6-k{display:inline-block;width:14px;height:8px;border-radius:2px}
.p6-k-real{background:#A32A4E}
.p6-k-prev{background:#E3B8C5}
.p6-k-meta{width:2px;height:14px;border-radius:0;background:#1D1D1F}
.p6-vino .p6-ley{color:rgba(255,255,255,.88)}
.p6-fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px 32px}
.p6-fcol{display:flex;flex-direction:column;gap:4px;min-width:0}
.p6-fn{margin:0;font-size:15px;line-height:22px;font-weight:600}
.p6-tasa{margin:0;font-size:12px;line-height:16px;color:#6E6E73;text-align:right}

/* estado vacío con botón */
.p6-vacio{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;border-radius:12px;background:#F5F5F7}
.p6-vacio p{margin:0;font-size:14px;line-height:20px;color:#6E6E73}
.p6-vacio .btn{min-height:44px}

@media (max-width:900px){
  .p6-hero{padding:22px 18px;gap:20px}
  .p6-hg{grid-template-columns:minmax(0,1fr);gap:24px}
  .p6-n{font-size:48px;line-height:52px}
  .p6-m2{font-size:34px;line-height:38px}
  .p6-flujo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p6-chev{display:none}
  .p6-lado.h{grid-template-columns:minmax(0,1fr)}
  .p6-graf .hb{grid-template-columns:92px minmax(0,1fr) 96px}
  .p6-cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p6-fcols{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.p6-pista-t i{animation:none}}