/* =================================================================
   BLOG · LAS PIEZAS DE LA ENTRADA DE INGLÉS
   Valores de material/mockup-blog-ingles.html (su CSS de «inglés» y del
   «simulacro tipo app», tal cual, bajo su contenedor; los colores, con las
   variables de 25-blog-bloques.css): las barras de gramática
   (opv/barras-gramatica, .bl-gch), el simulacro (opv/simulacro-app,
   .bl-sim), las tarjetas de los exámenes explicados
   (opv/examenes-explicados, .bl-yrs) y las variantes de la entrada: las
   cuatro cifras de la prueba (opv/cifras «fichas», .bl-k4) y las trampas
   (opv/tarjetas «trampas», .bl-trp). Y las de la entrada del examen de
   inglés de cada año (material/mockup-blog-examen-ingles-2026.html): la
   fila de letras (opv/letras-examen, .bl-lt), las preguntas explicadas
   (opv/examen-explicado, .bl-pxl), los puntos de gramática
   (opv/puntos-gramatica, .bl-pts), las cuatro con trampa (opv/tarjetas
   «claves», .bl-t4; «contexto», .bl-t4--gris), la plantilla (opv/plantilla-ab,
   .bl-key) y el selector de examen (opv/examen-selector, .bl-exsw). La calculadora (opv/calc-aptitudes
   «puntos») va con 36-blog-psicotecnicos.css. Solo se carga si la entrada
   lleva alguno (head.php, $GLOBALS['opv_ingles'], includes/blog-ingles.php).
   CLS 0: el cuerpo del simulacro tiene la altura mínima de la maqueta
   (430px; 440px en el móvil) y las barras traen su ancho en el HTML.
   ================================================================= */

/* Solo para lectores de pantalla */
.bl-trp .bl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- opv/cifras «fichas» ---------- */

.bl-k4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:4px 0 18px;padding:0;list-style:none;font-family:var(--bb-font)}
.bl-k4--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bl-k4--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bl-k4>li{min-width:0;margin:0;padding:14px 14px 12px;border:1px solid rgba(255,255,255,.95);border-radius:18px;background:var(--bb-glass-bg);box-shadow:var(--bb-glass-sh)}
.bl-k4>li::before,.bl-k4>li::marker{display:none;content:none}
.bl-k4 small{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;line-height:1.4;color:var(--bb-gd);text-transform:uppercase}
.bl-k4 b{display:block;margin-top:6px;font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--bb-ink);line-height:1}
.bl-k4 b em{font-style:normal;font-size:14px;font-weight:700;color:var(--bb-mut);letter-spacing:0}
.bl-k4 span{display:block;margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--bb-ink2)}
/* La ficha con pago (lo que se paga, en la entrada de lo que cuesta prepararla): borde y cifra en ámbar */
.bl-k4>li.pay{border:1.5px solid #F2C14E}
.bl-k4>li.pay b{color:#A26A00}

/* ---------- opv/barras-gramatica ---------- */

.bl-gch{margin:4px 0 12px;padding:16px 18px;border:1px solid rgba(255,255,255,.95);border-radius:20px;background:var(--bb-glass-bg);box-shadow:var(--bb-glass-sh);font-family:var(--bb-font)}
.bl-body .bl-gch h4{margin:0 0 10px;font-size:14px;line-height:1.4;color:var(--bb-ink)} /* el título opcional («Ortografía · 9 faltas») */
.bl-gch+.bl-gch{margin-top:-2px} /* dos seguidas, una debajo de otra: 10px entre ellas, como la maqueta */
.bl-gch ol{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.bl-gch li{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr) 34px;gap:12px;align-items:center;margin:0;padding:0;font-size:14px;line-height:1.4;color:var(--bb-ink2)}
.bl-gch li::before,.bl-gch li::marker{display:none;content:none}
.bl-gch .gl{line-height:1.25}
.bl-gch .gl small{display:block;font-size:11.5px;font-weight:700;color:var(--bb-mut)}
.bl-gch .gb{height:10px;border-radius:10px;background:#EEF3F0;overflow:hidden}
.bl-gch .gb i{display:block;height:100%;border-radius:10px;background:var(--bb-metal-bg);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.bl-gch li b{text-align:right;color:var(--bb-ink);font-size:14.5px;font-variant-numeric:tabular-nums}
.bl-gch li.g1{color:var(--bb-ink);font-weight:700}
.bl-gch li.g1 .gb{height:14px}
.bl-gch .fix{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:999px;background:var(--bb-gl);color:var(--bb-gd);font-size:10.5px;font-weight:800;letter-spacing:.04em;line-height:1.5;vertical-align:1px}
.bl-body .bl-gch .gf{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--bb-line);font-size:12.5px;font-weight:600;line-height:1.55;color:var(--bb-mut)}
.bl-gch .gf .fix{margin:0 6px 0 0;vertical-align:0}
/* Al entrar en pantalla (ingles.js: solo las que están por debajo al cargar), las barras crecen y la caja aparece */
.bl-gch--fx{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.bl-gch--fx .gb i{transform:scaleX(0)}
.bl-gch--fx.is-in{opacity:1;transform:none}
.bl-gch--fx.is-in .gb i{transform:scaleX(1)}

/* ---------- opv/tarjetas «trampas» ---------- */

.bl-trp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:4px 0 22px;padding:0;list-style:none;font-family:var(--bb-font)}
.bl-trp>li{position:relative;min-width:0;margin:0;padding:16px;border:1px solid rgba(255,255,255,.95);border-radius:18px;background:var(--bb-glass-bg);box-shadow:var(--bb-glass-sh)}
.bl-trp>li::before,.bl-trp>li::marker{display:none;content:none}
.bl-trp b{display:block;font-size:15.5px;line-height:1.4;color:var(--bb-ink)}
.bl-body .bl-trp p{margin:6px 0 10px;font-size:14px;line-height:1.5;color:var(--bb-ink2)}
.bl-trp .ex{display:grid;gap:5px}
.bl-trp .ex>span{display:flex;gap:8px;align-items:flex-start;padding:6px 10px;border-radius:10px;font-size:13.5px;line-height:1.4;font-weight:600}
.bl-trp .ex i{flex:none;font-style:normal;font-weight:800}
.bl-trp .ex .no{background:#FDF5F5;color:#9B2C2C}
.bl-trp .ex .si{background:#F2FAF5;color:var(--bb-gd)}
/* Con enlace (u; la entrada de prepararla por libre): «→ Calculadora de nota» */
.bl-trp .ex .bl-trp__a{color:inherit;font-weight:800;text-decoration:underline;text-underline-offset:2px}

/* ---------- opv/examenes-explicados ---------- */

.bl-yrs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:4px 0 24px;font-family:var(--bb-font)}
.bl-yrs--1{grid-template-columns:minmax(0,1fr)}
.bl-yrs--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bl-yr{display:grid;gap:2px;padding:14px 16px;border-radius:18px;border:1px solid var(--bb-line);background:#fff;font-size:14px;font-weight:800;line-height:1.4;color:var(--bb-ink2);text-decoration:none;transition:border-color .2s,color .2s}
.bl-yr b{font-size:24px;letter-spacing:-.02em;line-height:1.25;color:var(--bb-ink)}
.bl-yr small{font-size:13px;font-weight:700;color:var(--bb-mut)}
.bl-yr em{margin-top:6px;font-style:normal;font-size:13px;color:var(--bb-gd)}
a.bl-yr:hover{border-color:#BFE6CF;color:var(--bb-gd)}
a.bl-yr:focus-visible{outline:3px solid rgba(30,158,90,.45);outline-offset:2px}
/* Sin enlace: «Próximamente», apagada (la «soon» de material/mockup-blog-examen-ingles-2026.html), y la de la entrada que se lee, «Estás aquí» */
.bl-yr--prox{opacity:.6}
.bl-yr--aqui{border-color:#BFE6CF;background:#F2FAF5}

/* ---------- LAS DEL EXAMEN DE INGLÉS DE CADA AÑO (material/mockup-blog-examen-ingles-2026.html) ---------- */

.bl-pxl .bl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* opv/letras-examen */
.bl-lt{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 26px;font-family:var(--bb-font)}
.bl-lt span{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:12px;background:#F8FBF9;border:1px solid var(--bb-line);font-size:14px;font-weight:700;color:var(--bb-ink2)}
.bl-lt span b{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--bb-metal-bg);color:#fff;font-size:12.5px;text-transform:uppercase}
.bl-lt span em{font-style:normal;color:var(--bb-ink);font-weight:800}

/* opv/examen-explicado */
.bl-pxl{display:grid;gap:8px;margin:4px 0 30px;font-family:var(--bb-font)}
.bl-px{position:relative;border-radius:16px;border:1px solid var(--bb-line);background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.bl-px[open]{border-color:#BFE6CF;box-shadow:0 16px 30px -24px rgba(13,40,25,.45)}
.bl-px summary{list-style:none;display:grid;grid-template-columns:30px minmax(0,1fr) auto 22px;gap:10px;align-items:center;padding:12px 14px;cursor:pointer}
.bl-px summary::-webkit-details-marker{display:none}
.bl-px summary::marker{content:none}
.bl-px summary:focus-visible{outline:3px solid rgba(30,158,90,.45);outline-offset:-3px}
.bl-px summary>i{display:grid;place-items:center;width:30px;height:33px;font-style:normal;font-size:12px;font-weight:800;color:var(--bb-gd);background:var(--bb-gl);clip-path:var(--bb-hex)}
.bl-px.rv summary>i{color:#8A5A0B;background:#FFF6E5}
.bl-px summary svg{width:18px;height:18px;color:var(--bb-mut);transition:transform .25s}
.bl-px[open] summary svg{transform:rotate(180deg)}
.bl-px .ps{font-size:15px;font-weight:700;color:var(--bb-ink);line-height:1.4}
.bl-px .ps u{text-decoration:none;display:inline-block;min-width:40px;border-bottom:2px solid #A9C9B7;transform:translateY(-3px)}
.bl-px .pt{font-style:normal;font-size:11px;font-weight:800;line-height:1.4;padding:3px 8px;border-radius:999px;background:var(--bb-gl);color:var(--bb-gd);white-space:nowrap}
.bl-px .pb{padding:0 14px 14px 54px}
.bl-px .po{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.bl-px .po li{display:flex;align-items:center;gap:8px;margin:0;padding:7px 10px;border-radius:11px;border:1px solid var(--bb-line);font-size:14px;font-weight:600;line-height:1.4;color:var(--bb-mut)}
.bl-px .po li::before,.bl-px .po li::marker{display:none;content:none}
.bl-px .po li b{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#F1F5F3;font-size:11.5px;color:var(--bb-mut)}
.bl-px .po li.ok{border-color:#1FB57A;background:#ECFBF3;color:#0E7A50;font-weight:800}
.bl-px .po li.ok b{background:#1FB57A;color:#fff}
.bl-body .bl-px .pe{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:var(--bb-ink2)}
.bl-body .bl-px .pe b{color:var(--bb-ink)}
.bl-px .pm{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:13px;line-height:1.5;color:var(--bb-mut)}
.bl-px .pm b{color:var(--bb-ink2)}

/* opv/puntos-gramatica */
.bl-pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 0 16px;padding:0;list-style:none;font-family:var(--bb-font)}
.bl-pts>li{min-width:0;margin:0;padding:12px 14px;border-radius:14px;background:#F8FBF9;border:1px solid var(--bb-line)}
.bl-pts>li::before,.bl-pts>li::marker{display:none;content:none}
.bl-pts>li.hi{background:#F2FAF5;border-color:#BFE6CF}
.bl-pts b{display:block;font-size:14.5px;line-height:1.4;color:var(--bb-ink)}
.bl-pts span{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.bl-pts span i{font-style:normal;display:grid;place-items:center;min-width:26px;height:24px;padding:0 6px;border-radius:7px;background:#fff;border:1px solid var(--bb-line);font-size:12px;font-weight:800;color:var(--bb-gd)}

/* opv/tarjetas «claves» */
.bl-t4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:4px 0 26px;padding:0;list-style:none;font-family:var(--bb-font)}
.bl-t4>li{min-width:0;margin:0;padding:16px;border:1px solid rgba(255,255,255,.95);border-radius:18px;background:var(--bb-glass-bg);box-shadow:var(--bb-glass-sh)}
.bl-t4>li::before,.bl-t4>li::marker{display:none;content:none}
.bl-t4 small{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--bb-gl);color:var(--bb-gd);font-size:11px;font-weight:800;letter-spacing:.06em;line-height:1.5;text-transform:uppercase}
.bl-t4 b{display:block;margin-top:8px;font-size:15.5px;line-height:1.4;color:var(--bb-ink)}
.bl-body .bl-t4 p{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--bb-ink2)}

/* opv/plantilla-ab */
.bl-key{margin:4px 0 22px;padding:16px;border:1px solid rgba(255,255,255,.95);border-radius:20px;background:var(--bb-glass-bg);box-shadow:var(--bb-glass-sh);font-family:var(--bb-font)}
.bl-key .kt{display:inline-flex;padding:4px;border-radius:12px;background:#EEF3F0}
.bl-key .kt button{height:34px;margin:0;padding:0 14px;border:0;border-radius:9px;background:transparent;font:800 13.5px/1 var(--bb-font);color:var(--bb-mut);cursor:pointer}
.bl-key .kt button[aria-selected="true"]{background:#fff;color:var(--bb-ink);box-shadow:0 2px 6px rgba(13,20,17,.08)}
.bl-key .kt button:focus-visible{outline:3px solid rgba(30,158,90,.45);outline-offset:1px}
.bl-key .kg{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;margin-top:14px}
.bl-key .kg[hidden]{display:none}
.bl-key .kg div{display:grid;place-items:center;padding:6px 0;border-radius:10px;background:#fff;border:1px solid var(--bb-line)}
.bl-key .kg small{font-size:11px;font-weight:700;line-height:1.4;color:var(--bb-mut)}
.bl-key .kg b{font-size:17px;line-height:1.3;color:var(--bb-gd)}
.bl-body .bl-key .kr{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:13.5px;font-weight:700;line-height:1.45;color:var(--bb-ink2)}
.bl-key .kr b{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#FFF6E5;color:#8A5A0B}

/* ---------- opv/simulacro-app ---------- */

/* Ancla #simulacro, por debajo de la cabecera fija (como #comprobador) */
.bl-sim{scroll-margin-top:96px;margin:4px 0 38px;border-radius:26px;overflow:hidden;background:#fff;border:1px solid var(--bb-line);box-shadow:0 30px 60px -36px rgba(13,40,25,.55),0 2px 6px rgba(13,20,17,.04);font-family:var(--bb-font)}
.bl-sim:focus{outline:none}
.bl-sim button{margin:0;-webkit-tap-highlight-color:transparent}
.bl-sim button:focus-visible{outline:3px solid rgba(30,158,90,.45);outline-offset:2px}
.bl-sim .aph{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;color:#fff;background:var(--bb-metal-bg)}
.bl-sim .apt{display:flex;align-items:center;gap:10px;min-width:0}
.bl-sim .apt i{flex:none;display:grid;place-items:center;width:34px;height:37px;color:var(--bb-gd);background:#fff;clip-path:var(--bb-hex)}
.bl-sim .apt svg{width:17px;height:17px}
.bl-sim .apt b{display:block;font-size:16px;letter-spacing:-.01em;line-height:1.35;color:#fff}
.bl-sim .apt small{display:block;font-size:12px;font-weight:600;line-height:1.4;color:#DFF7EA}
.bl-sim .aps{display:flex;align-items:center;gap:6px;flex:none}
.bl-sim .aps>span{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.16);font-size:13px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.bl-sim .aps b{color:inherit}
.bl-sim .aps svg{width:13px;height:13px}
.bl-sim .aps .sn{background:#fff;color:var(--bb-gd)}
.bl-sim .aps .sn small{font-size:10.5px;font-weight:700;color:var(--bb-mut)}
.bl-sim .aps .st.lw{background:#FDEEEE;color:#B23A3A}
.bl-sim .apr{height:4px;background:#E6EEEA}
.bl-sim .apr i{display:block;height:100%;background:var(--bb-metal-g);background-size:200% 100%;transform-origin:left;transform:scaleX(0);transition:transform .35s}
.bl-sim .apn{display:flex;gap:6px;padding:12px 16px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--bb-line);scroll-snap-type:x proximity}
.bl-sim .apn::-webkit-scrollbar{display:none}
.bl-sim .apn button{flex:none;width:32px;height:32px;padding:0;border-radius:10px;border:1.5px solid var(--bb-line);background:#fff;font:800 12.5px/1 var(--bb-font);color:var(--bb-mut);cursor:pointer;scroll-snap-align:center;transition:background .2s,border-color .2s,color .2s}
.bl-sim .apn button.cur{border-color:var(--bb-ink);color:var(--bb-ink)}
.bl-sim .apn button.ok{border-color:#1FB57A;background:#1FB57A;color:#fff}
.bl-sim .apn button.ko{border-color:#E5484D;background:#E5484D;color:#fff}
.bl-sim .apn button.bl{border-color:#C9D3CF;background:#EEF2F0;color:var(--bb-mut)}
.bl-sim .apn button.cur.ok,.bl-sim .apn button.cur.ko,.bl-sim .apn button.cur.bl{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--bb-ink)}
.bl-sim .apb{padding:18px 16px 6px;min-height:430px}
.bl-sim .qtp{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:800;letter-spacing:.1em;line-height:1.4;color:var(--bb-mut);text-transform:uppercase}
.bl-sim .qtg{padding:3px 9px;border-radius:999px;background:var(--bb-gl);color:var(--bb-gd);font-size:11px;letter-spacing:.04em;text-transform:none;opacity:0;transition:opacity .25s}
.bl-sim .qtg.on{opacity:1}
.bl-body .bl-sim .qs{margin:10px 0 0;font-size:19px;line-height:1.45;font-weight:800;color:var(--bb-ink);letter-spacing:-.01em}
.bl-sim .qs u{text-decoration:none;display:inline-block;min-width:64px;border-bottom:2.5px solid #A9C9B7;transform:translateY(-3px)}
.bl-sim .qo{display:grid;gap:8px;margin-top:16px}
.bl-sim .qo button{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 14px 8px 10px;border-radius:15px;border:1.5px solid var(--bb-line);background:#fff;font:700 15.5px/1.35 var(--bb-font);color:var(--bb-ink2);text-align:left;cursor:pointer;transition:border-color .18s,background .18s,color .18s,transform .18s}
.bl-sim .qo button:hover{border-color:#BFE6CF}
.bl-sim .qo button:active{transform:scale(.99)}
.bl-sim .qo button em{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#F1F5F3;font-style:normal;font-size:13px;font-weight:800;color:var(--bb-mut);transition:background .18s,color .18s}
.bl-sim .qo button span{flex:1}
.bl-sim .qo button svg{flex:none;width:20px;height:20px;opacity:0}
.bl-sim .qo button.sel{border-color:var(--bb-ink);color:var(--bb-ink);background:#F8FBF9}
.bl-sim .qo button.sel em{background:var(--bb-ink);color:#fff}
.bl-sim .qo button.ok{border-color:#1FB57A;background:#ECFBF3;color:#0E7A50}
.bl-sim .qo button.ok em{background:#1FB57A;color:#fff}
.bl-sim .qo button.ok svg{opacity:1;color:#1FB57A}
.bl-sim .qo button.ko{border-color:#E5484D;background:#FDEEEE;color:#B23A3A}
.bl-sim .qo button.ko em{background:#E5484D;color:#fff}
.bl-sim .qo button.ko svg{opacity:1;color:#E5484D}
.bl-sim .qo button.dim{opacity:.5}
.bl-sim .qo.lk button{cursor:default}
.bl-sim .qo.lk button:hover{border-color:inherit}
.bl-sim .qo.lk button.ok:hover{border-color:#1FB57A}
.bl-sim .qo.lk button.ko:hover{border-color:#E5484D}
.bl-sim .qo.lk button.dim:hover{border-color:var(--bb-line)}
.bl-sim .fb{margin-top:12px;border-radius:15px;border:1.5px solid;overflow:hidden;animation:bl-sim-fbin .3s ease}
@keyframes bl-sim-fbin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bl-sim .fb.ok{border-color:#1FB57A}
.bl-sim .fb.ko{border-color:#E5484D}
.bl-sim .fb.bl{border-color:#C9D3CF}
.bl-sim .fb .fh{display:flex;align-items:center;gap:8px;padding:11px 14px 0;font-weight:800;font-size:15px;line-height:1.4}
.bl-sim .fb.ok .fh{color:#0E7A50}
.bl-sim .fb.ko .fh{color:#B23A3A}
.bl-sim .fb.bl .fh{color:var(--bb-ink2)}
.bl-sim .fb .fh i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#fff}
.bl-sim .fb.ok .fh i{background:#1FB57A}
.bl-sim .fb.ko .fh i{background:#E5484D}
.bl-sim .fb.bl .fh i{background:#A9B6B0}
.bl-sim .fb .fh i svg{width:12px;height:12px}
.bl-body .bl-sim .fb p{margin:0;padding:6px 14px 10px;font-size:14.5px;line-height:1.55;color:var(--bb-ink2)}
.bl-body .bl-sim .fb p b{color:var(--bb-ink)}
.bl-sim .fb .tr{padding:9px 14px 11px;background:#F6F8F7;border-top:1px solid var(--bb-line);font-size:13.5px;line-height:1.5;color:var(--bb-mut)}
.bl-sim .fb .tr b{color:var(--bb-ink2)}
.bl-sim .apf{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;padding:12px 16px 14px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--bb-line)}
.bl-sim .apf .hint{flex:1;text-align:center;font-size:12.5px;font-weight:700;line-height:1.4;color:var(--bb-mut)}
.bl-sim .apf button{height:48px;padding:0 18px;border-radius:14px;font:800 15px/1 var(--bb-font);cursor:pointer;transition:opacity .2s,transform .2s,background .2s}
.bl-sim .apf .sk2{border:1.5px solid var(--bb-line);background:#fff;color:var(--bb-ink2)}
.bl-sim .apf .go{margin-left:auto;min-width:132px;border:0;color:#fff;background:var(--bb-metal-bg);box-shadow:0 12px 24px -14px rgba(20,99,74,.8)}
.bl-sim .apf .go[disabled]{opacity:.35;box-shadow:none;cursor:default}
.bl-sim .apf .go.pop{animation:bl-sim-pop .35s ease}
@keyframes bl-sim-pop{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:none}}
/* resultado */
.bl-sim .rs{display:grid;justify-items:center;text-align:center;padding:8px 0 4px}
.bl-sim .rg{position:relative;width:150px;height:150px}
.bl-sim .rg svg{width:150px;height:150px;transform:rotate(-90deg)}
.bl-sim .rg circle{fill:none;stroke-width:12}
.bl-sim .rg .bg{stroke:#EEF3F0}
.bl-sim .rg .fg{stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
.bl-sim .rs.no .rg .fg{stroke:#E5484D}
.bl-sim .rg .rv{position:absolute;inset:0;display:grid;place-content:center}
.bl-sim .rg .rv b{font-size:38px;font-weight:800;letter-spacing:-.03em;color:var(--bb-ink);font-variant-numeric:tabular-nums;line-height:1}
.bl-sim .rg .rv small{margin-top:4px;font-size:12px;font-weight:700;color:var(--bb-mut)}
.bl-sim .rs .vb{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:6px 14px;border-radius:999px;font-size:14px;font-weight:800;line-height:1.4;background:#ECFBF3;color:#0E7A50}
.bl-sim .rs .vb svg{width:15px;height:15px}
.bl-sim .rs.no .vb{background:#FDEEEE;color:#B23A3A}
.bl-body .bl-sim .rs .vm{margin:10px 0 0;max-width:420px;font-size:15px;line-height:1.55;color:var(--bb-ink2)}
.bl-sim .r3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;max-width:420px;margin-top:16px}
.bl-sim .r3>div{display:grid;place-items:center;padding:10px 4px;border-radius:14px;background:#F8FBF9;border:1px solid var(--bb-line)}
.bl-sim .r3 b{font-size:22px;line-height:1.3;font-variant-numeric:tabular-nums}
.bl-sim .r3 span{font-size:11.5px;font-weight:700;line-height:1.4;color:var(--bb-mut)}
.bl-sim .r3 .o b{color:#1FB57A}
.bl-sim .r3 .x b{color:#E5484D}
.bl-sim .r3 .w b{color:var(--bb-mut)}
.bl-sim .rp{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:460px;margin-top:14px}
.bl-sim .rp span{padding:5px 11px;border-radius:999px;background:#FDF5F5;border:1px solid #F1C9C9;color:#9B2C2C;font-size:12.5px;font-weight:700;line-height:1.4}
.bl-body .bl-sim .rs .rl{margin:14px 0 0;font-size:12.5px;font-weight:700;line-height:1.5;color:var(--bb-mut)}

@media (max-width:1060px){.bl-sim{scroll-margin-top:140px}}
@media (max-width:980px){.bl-sim{scroll-margin-top:128px}}
@media (max-width:760px){
  .bl-k4,.bl-k4--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-gch li{grid-template-columns:minmax(0,1fr) 30px;gap:4px 10px}
  .bl-gch .gl{grid-column:1/-1}
  .bl-gch .gb{grid-column:1}
  .bl-trp{grid-template-columns:minmax(0,1fr)}
  .bl-yrs,.bl-yrs--2{grid-template-columns:minmax(0,1fr)}
  .bl-px summary{grid-template-columns:30px minmax(0,1fr) 20px}
  .bl-px .pt{display:none}
  .bl-px .pb{padding:0 12px 14px}
  .bl-px .po{grid-template-columns:minmax(0,1fr)}
  .bl-pts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-t4{grid-template-columns:minmax(0,1fr)}
  .bl-key .kg{grid-template-columns:repeat(5,minmax(0,1fr))}
  .bl-sim{margin-left:-6px;margin-right:-6px;border-radius:22px}
  .bl-sim .aph{flex-wrap:wrap;padding:12px 14px}
  .bl-sim .apt small{display:none}
  .bl-sim .aps{width:100%;justify-content:space-between}
  .bl-sim .apb{min-height:440px;padding:16px 14px 6px}
  .bl-body .bl-sim .qs{font-size:18px}
  .bl-sim .apf{padding:10px 14px 12px}
  .bl-sim .apf .hint{display:none}
  .bl-sim .apf .go{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .bl-gch .gb i,.bl-gch--fx,.bl-sim .apr i,.bl-sim .rg .fg,.bl-sim .qtg,.bl-sim .qo button,.bl-px,.bl-px summary svg{transition:none}
  .bl-sim .fb,.bl-sim .apf .go.pop{animation:none}
}

/* ---------- opv/examen-selector y opv/tarjetas «contexto» (material/mockup-blog-examen-ingles-2024.html) ---------- */

/* Los bloques de un examen no elegido: en el HTML, pero ocultos (sus display: grid… no pueden con hidden) */
.bl-body [data-ex][hidden]{display:none!important}
/* Las píldoras de «Por qué hubo tres exámenes», en gris */
.bl-t4--gris small{background:#F1F5F3;color:var(--bb-ink2)}
/* Las pestañas, fijas bajo la cabecera del sitio (76px; 64px hasta 980px) y, hasta 1060px, bajo la barra del índice (60px) */
.bl-exsw{position:sticky;top:84px;z-index:6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:8px 0 6px;padding:4px;border-radius:16px;background:rgba(238,243,240,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--bb-line);font-family:var(--bb-font)}
.bl-exsw--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bl-exsw--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bl-exsw button{display:grid;gap:1px;margin:0;padding:8px 6px;border:0;border-radius:12px;background:transparent;font-family:var(--bb-font);cursor:pointer;color:var(--bb-mut);text-align:center;-webkit-tap-highlight-color:transparent}
.bl-exsw button b{font-size:14px;line-height:1.35;color:inherit}
.bl-exsw button small{font-size:11.5px;font-weight:700;line-height:1.35;color:var(--bb-mut)}
.bl-exsw button[aria-selected="true"]{background:#fff;color:var(--bb-ink);box-shadow:0 4px 12px -6px rgba(13,40,25,.35)}
.bl-exsw button[aria-selected="true"] small{color:var(--bb-gd)}
.bl-exsw button:focus-visible{outline:3px solid rgba(30,158,90,.45);outline-offset:1px}
.bl-exsw .sh{display:none}
.bl-body .bl-exnote{margin:0 0 26px;font-size:14px;line-height:1.5;color:var(--bb-mut);text-align:center}
@media (max-width:1060px){.bl-exsw{top:136px}}
@media (max-width:980px){.bl-exsw{top:124px}}
@media (max-width:760px){
  .bl-exsw button b{font-size:13px}
  .bl-exsw button small{font-size:10.5px}
  .bl-exsw .lg{display:none}
  .bl-exsw .sh{display:inline}
}