/* =================================================================
   BLOG · LAS PIEZAS DE LA ENTRADA DE LOS TÍTULOS DE INGLÉS
   Valores de material/mockup-blog-titulos-ingles.html (su CSS de «títulos»
   y de la «calculadora de títulos», tal cual, bajo su contenedor; los
   colores, con las variables de 25-blog-bloques.css): los tres niveles
   (opv/cifras «niveles», .bl-tier), la tabla de títulos (opv/tabla
   «tramos», .bl-tc2) y la calculadora (opv/calc-titulos, .bl-tcalc, sobre
   la caja .bl-ck del comprobador). Los que no puntúan (la lista con el
   estilo «No puntúan») van en 25-blog-bloques.css. Solo se carga si la
   entrada lleva alguno (head.php, $GLOBALS['opv_titulos'],
   includes/blog-titulos.php).
   ================================================================= */

/* ---------- opv/cifras «niveles» ---------- */
.bl-tier{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:4px 0 18px;padding:0;list-style:none;font-family:var(--bb-font)}
.bl-tier--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bl-tier--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bl-tier>li{position:relative;min-width:0;margin:0;padding:18px 16px 16px;overflow:hidden;border:1px solid rgba(255,255,255,.95);border-radius:20px;background:var(--bb-glass-bg);box-shadow:var(--bb-glass-sh)}
.bl-tier>li::marker{content:none}
.bl-tier>li::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(91,208,143,.25),transparent 70%)}
.bl-tier small{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;line-height:1.4;color:var(--bb-gd);text-transform:uppercase}
.bl-tier b{display:block;margin-top:6px;font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--bb-ink)}
.bl-tier b em{font-style:normal;font-size:15px;font-weight:700;color:var(--bb-mut);letter-spacing:0}
.bl-tier span{display:block;margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--bb-ink2)}
/* El de verde (el último; con «verde: primera», el primero): el C2 de la maqueta */
.bl-tier>li.v{border:0;background:var(--bb-metal-bg);box-shadow:none}
.bl-tier>li.v :is(small,b,b em,span){color:#fff}

/* ---------- opv/tabla «tramos» ---------- */
.bl-tc2{display:grid;gap:8px;margin:4px 0 22px;font-family:var(--bb-font)}
.bl-tc2 .rw{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.7fr));gap:8px;align-items:center;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--bb-line);font-size:14px;line-height:1.45;color:var(--bb-ink2)}
.bl-tc2--2 .rw{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.bl-tc2--3 .rw{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,.7fr))}
.bl-tc2 .rw.hd{background:transparent;border:0;padding:0 14px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--bb-mut)}
.bl-tc2 .rw.hd span{text-align:center}
.bl-tc2 .rw b{display:block;font-size:15px;color:var(--bb-ink)}
.bl-tc2 .rw small{display:block;margin-top:2px;font-size:12.5px;color:var(--bb-mut)}
.bl-tc2 .rw>span{text-align:center;font-weight:700;font-size:13.5px}
.bl-tc2 .rw>span i{display:block;font-style:normal;font-size:11.5px;font-weight:600;color:var(--bb-mut)}

/* ---------- opv/calc-titulos ---------- */
.bl-tcalc .stp{margin-top:16px}
.bl-tcalc .stp[hidden]{display:none}
.bl-tcalc .lb{display:block;margin:0 0 8px;font-size:11.5px;font-weight:800;line-height:1.4;letter-spacing:.1em;color:var(--bb-mut);text-transform:uppercase}
.bl-tcalc .chips{display:flex;flex-wrap:wrap;gap:6px}
.bl-tcalc .chips button{height:40px;padding:0 14px;border-radius:12px;border:1.5px solid var(--bb-line);background:#fff;font:700 14px/1 var(--bb-font);color:var(--bb-ink2);cursor:pointer;transition:.18s}
.bl-tcalc .chips button[aria-pressed="true"]{border-color:var(--bb-g);background:#F2FAF5;color:var(--bb-gd)}
.bl-tcalc .chips button:focus-visible,.bl-tcalc .bands select:focus-visible{outline:3px solid rgba(30,158,90,.45);outline-offset:2px}
.bl-tcalc .bands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bl-tcalc .bands label{display:grid;gap:6px;font-size:12px;font-weight:700;color:var(--bb-mut)}
.bl-tcalc .bands select{min-width:0;height:46px;border-radius:12px;border:1.5px solid var(--bb-gb);background:#fff;font:800 17px var(--bb-font);color:var(--bb-ink);text-align:center}
.bl-tcalc .out{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;margin-top:18px;padding:16px 18px;border-radius:20px;background:#fff;border:1px solid var(--bb-line);transition:border-color .3s,background .3s}
.bl-tcalc .out .pn{display:grid;place-items:center;width:84px;height:92px;color:#fff;background:var(--bb-metal-bg);clip-path:var(--bb-hex)}
.bl-tcalc .out .pn b{font-size:34px;font-weight:800;line-height:1;color:#fff}
.bl-tcalc .out .pn small{margin-top:-14px;font-size:11px;font-weight:800;letter-spacing:.06em}
/* Con 0 puntos, el hexágono en gris (en la maqueta, .out.z .pt: la clase del hexágono es .pn) */
.bl-tcalc .out.z .pn{background:linear-gradient(180deg,#C9D3CF,#8FA29A)}
.bl-tcalc .out.w{border-color:#BFE6CF;background:#F2FAF5}
.bl-tcalc .out .tx b{display:block;font-size:17px;line-height:1.35;color:var(--bb-ink)}
.bl-tcalc .out .tx p{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:var(--bb-ink2)}

@media (max-width:760px){
  .bl-tier,.bl-tier--2,.bl-tier--4{grid-template-columns:minmax(0,1fr)}
  .bl-tier>li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
  .bl-tier small{grid-column:1/-1}
  .bl-tier b{font-size:34px}
  .bl-tier span{margin-top:0}
  /* La tabla: el título arriba, los tramos debajo con su «5 PUNTOS» encima (de la cabecera, data-c) */
  .bl-tc2 .rw{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bl-tc2--2 .rw{grid-template-columns:minmax(0,1fr)}
  .bl-tc2--3 .rw{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-tc2 .rw>div{grid-column:1/-1}
  .bl-tc2 .rw.hd{display:none}
  .bl-tc2 .rw>span::before{content:attr(data-c);display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--bb-gd);text-transform:uppercase}
  .bl-tcalc .bands{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  .bl-tcalc .chips button,.bl-tcalc .out{transition:none}
}