/* Challenge player on /herramientas pages. Uses blog.css tokens. */
.tl-hero { min-height: min(600px, 74svh); }
.tl-hero .bl-hero-content { padding-bottom: 180px; }
.tl-stage { position: relative; z-index: 2; max-width: 900px; margin: -130px auto 0; padding: 0 var(--bl-gutter); scroll-margin-top: calc(var(--bl-header) + 16px); }
.tl-panel { position: relative; min-height: 460px; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--bl-border-strong); border-radius: 28px; background: radial-gradient(ellipse at 10% 0%, color-mix(in srgb, var(--bl-lavender) 16%, transparent), transparent 55%), radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--bl-green) 12%, transparent), transparent 55%), var(--bl-panel); box-shadow: var(--bl-shadow); scroll-margin-top: calc(var(--bl-header) + 16px); }
.tl-panel.tl-in > * { animation: tl-in .5s var(--bl-ease) both; }
.tl-panel h2 { margin: 18px 0 0; color: var(--bl-text); font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.05; letter-spacing: -.045em; text-wrap: balance; }
.tl-panel h3 { margin: 0; color: var(--bl-text); font-weight: 600; letter-spacing: -.03em; }
.tl-panel p { margin: 0; }
.tl-start { display: grid; align-content: center; justify-items: start; gap: 0; min-height: 380px; }
.tl-pitch { max-width: 620px; margin-top: 16px !important; color: var(--bl-muted); font-size: 17px; line-height: 1.65; }
.tl-actions { margin-top: 28px; }
.tl-actions .bl-btn:disabled { opacity: .5; cursor: default; transform: none; }
.tl-note { max-width: 620px; margin-top: 18px !important; color: var(--bl-faint); font-size: 13px; line-height: 1.55; }
.tl-warning { max-width: 620px; margin-top: 18px !important; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--bl-red) 40%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--bl-red) 10%, transparent); color: var(--bl-text); font-size: 14.5px; }
.tl-challenge { margin-top: 18px !important; padding: 10px 16px; border-radius: 999px; background: color-mix(in srgb, var(--bl-lime) 16%, transparent); color: var(--bl-text); font-size: 14.5px; }
.tl-challenge:not([hidden]) { display: inline-block; }

/* Progress */
.tl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--bl-text); font: 500 13px "DM Mono", monospace; }
.tl-top small { color: var(--bl-faint); }
.tl-chip { padding: 5px 11px; border: 1px solid var(--bl-border-strong); border-radius: 999px; background: var(--bl-tint); color: var(--bl-secondary); font: 500 11px "DM Mono", monospace; letter-spacing: .06em; }
.tl-bar { height: 3px; margin-top: 14px; border-radius: 3px; background: var(--bl-tint-2); overflow: hidden; }
.tl-bar i { display: block; height: 100%; background: var(--bl-lime); transform: scaleX(var(--p)); transform-origin: left; transition: transform .6s var(--bl-ease); }

/* Voice challenge */
.tl-speak { display: grid; justify-items: center; gap: 18px; margin-top: 30px; text-align: center; }
.tl-instruction { color: var(--bl-muted); font-size: 15px; }
.tl-sentence { max-width: 720px; color: var(--bl-text); font-size: clamp(26px, 3.6vw, 42px); font-weight: 500; line-height: 1.22; letter-spacing: -.035em; text-wrap: balance; }
.tl-sentence span { border-radius: 8px; transition: color .25s, background .25s; }
.tl-w--live { color: var(--bl-lavender); }
.tl-w--ok { color: var(--bl-green); }
.tl-w--miss { color: var(--bl-red); text-decoration: underline wavy var(--bl-red) 1.5px; text-underline-offset: 7px; }
.tl-hint { color: var(--bl-faint); font-size: 14px; font-style: italic; }
.tl-mic-row { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 5vw, 44px); margin-top: 6px; }
.tl-round { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--bl-secondary); }
.tl-round svg { box-sizing: content-box; padding: 13px; border: 1px solid var(--bl-border-strong); border-radius: 50%; background: var(--bl-tint); transition: background .2s, transform .2s; }
.tl-round:hover svg { background: var(--bl-tint-2); transform: translateY(-2px); }
.tl-round small { font-size: 12px; }
.tl-mic { position: relative; display: grid; place-items: center; width: 92px; height: 92px; border: 0; border-radius: 50%; background: var(--bl-primary-bg); color: var(--bl-primary-text); box-shadow: var(--bl-primary-shadow), 0 20px 50px -10px color-mix(in srgb, var(--bl-lavender) 60%, transparent); transition: transform .25s var(--bl-ease); }
.tl-mic:hover { transform: scale(1.04); }
.tl-mic-rings i { position: absolute; inset: 0; border: 2px solid var(--bl-lavender); border-radius: 50%; opacity: 0; pointer-events: none; }
.tl-listening { background: linear-gradient(180deg, #f39e9b, #e0625e); color: #fff; }
.tl-listening .tl-mic-rings i { animation: tl-ring 1.6s ease-out infinite; border-color: #f18b88; }
.tl-listening .tl-mic-rings i + i { animation-delay: .8s; }
.tl-status { min-height: 1.6em; color: var(--bl-muted); font-size: 15px; }
.tl-feedback { display: grid; gap: 14px; width: 100%; max-width: 640px; text-align: left; animation: tl-in .45s var(--bl-ease) both; }
.tl-verdict { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--bl-border-strong); border-radius: 18px; background: var(--bl-surface); }
.tl-verdict b { font-size: 34px; font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.tl-verdict b small { font-size: 16px; }
.tl-verdict span { display: grid; color: var(--bl-text); font-weight: 500; }
.tl-verdict span small { color: var(--bl-muted); font-weight: 400; }
.tl-good b, b.tl-good { color: var(--bl-green); }
.tl-mid b { color: #d9b44a; }
.tl-low b { color: var(--bl-red); }
.tl-heard { display: grid; gap: 3px; color: var(--bl-secondary); font-size: 15px; }
.tl-heard small { color: var(--bl-faint); font: 500 10px "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.tl-tip { padding: 14px 16px; border-left: 2px solid var(--bl-lavender); border-radius: 0 12px 12px 0; background: var(--bl-tint); color: var(--bl-secondary); font-size: 15px; line-height: 1.55; }
.tl-tip b { color: var(--bl-text); }
.tl-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.tl-row--end { margin-top: 8px; }
.tl-ghost { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--bl-border-strong); border-radius: 999px; background: var(--bl-tint); color: var(--bl-secondary) !important; font-size: 14px; font-weight: 600; text-decoration: none !important; transition: background .2s, color .2s; }
.tl-ghost:hover { background: var(--bl-tint-2); color: var(--bl-text) !important; }

/* Quiz */
.tl-question { display: grid; gap: 20px; margin-top: 30px; }
.tl-context { color: var(--bl-secondary); font-size: 17px; }
.tl-context b { color: var(--bl-text); font-weight: 600; }
.tl-q { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; text-wrap: balance; }
.tl-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tl-option { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 18px; border: 1px solid var(--bl-border-strong); border-radius: 18px; background: var(--bl-surface); color: var(--bl-text); font-size: 16.5px; font-weight: 500; line-height: 1.35; text-align: left; transition: border-color .2s, background .2s, transform .2s var(--bl-ease); }
.tl-option:not(:disabled):hover { border-color: var(--bl-lavender); transform: translateY(-2px); }
.tl-option:disabled { cursor: default; }
.tl-option small { display: block; margin-top: 2px; color: var(--bl-faint); font: 500 11.5px "DM Mono", monospace; }
.tl-key { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--bl-tint-2); color: var(--bl-muted); font: 500 12px "DM Mono", monospace; }
.tl-options--two .tl-option { justify-content: center; min-height: 92px; font-size: 19px; text-align: center; }
.tl-options--two .tl-key { display: none; }
.tl-picked { border-color: var(--bl-text); background: var(--bl-tint-2); }
.tl-right { border-color: var(--bl-green) !important; background: var(--bl-green-soft) !important; }
.tl-wrong { border-color: var(--bl-red) !important; background: color-mix(in srgb, var(--bl-red) 12%, transparent) !important; }
.tl-answer { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; }
.tl-answer.tl-good { color: var(--bl-green); }
.tl-answer.tl-low { color: var(--bl-red); }
.tl-explain { color: var(--bl-secondary); font-size: 15.5px; line-height: 1.6; }
.tl-explain b, .tl-explain i { color: var(--bl-text); }
.tl-play { display: inline-flex; align-items: center; justify-self: center; gap: 10px; min-height: 64px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--bl-primary-bg); color: var(--bl-primary-text); box-shadow: var(--bl-primary-shadow); font-size: 15px; font-weight: 600; }
.tl-question:has(.tl-play) .tl-q { text-align: center; }

/* Result */
.tl-result { display: grid; gap: 30px; }
.tl-score { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: clamp(20px, 4vw, 40px); }
.tl-score-ring { position: relative; width: 180px; height: 180px; }
.tl-ring { width: 100%; height: 100%; }
.tl-ring circle { fill: none; stroke-width: 10; }
.tl-ring-track { stroke: var(--bl-tint-2); }
.tl-ring-fill { stroke: var(--bl-lime); stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: tl-fill 1.2s .15s var(--bl-ease) forwards; }
.tl-score-ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.tl-score-ring b { color: var(--bl-text); font-size: 52px; font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.tl-score-ring small { color: var(--bl-faint); font: 500 13px "DM Mono", monospace; }
.tl-score-copy h2 { margin-top: 12px; }
.tl-score-copy > p:not(.bl-eyebrow) { margin-top: 12px !important; color: var(--bl-muted); font-size: 16px; line-height: 1.65; }
.tl-small { display: block; margin-top: 8px; color: var(--bl-faint); font-size: 13px; }
.tl-rival { display: flex; align-items: center; gap: 8px; margin-top: 14px !important; padding: 10px 14px; border-radius: 14px; background: var(--bl-tint-2); color: var(--bl-text) !important; font-size: 14.5px; }
.tl-rival--win { background: color-mix(in srgb, var(--bl-lime) 16%, transparent); }
.tl-block h3 { margin-bottom: 14px; font-size: 18px; }
.tl-bars { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tl-bars li { display: grid; grid-template-columns: minmax(120px, 1.2fr) 2fr 64px; align-items: center; gap: 14px; color: var(--bl-secondary); font-size: 14.5px; }
.tl-bars i { position: relative; height: 8px; border-radius: 8px; background: var(--bl-tint-2); overflow: hidden; }
.tl-bars i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bl-green); transform: scaleX(var(--v)); transform-origin: left; animation: tl-grow 1s .3s var(--bl-ease) backwards; }
.tl-bars i.tl-mid::after { background: #d9b44a; }
.tl-bars i.tl-low::after { background: var(--bl-red); }
.tl-bars b { color: var(--bl-text); font: 500 13px "DM Mono", monospace; text-align: right; }
.tl-focus { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tl-focus > div { padding: 18px; border: 1px solid var(--bl-border); border-radius: 18px; background: var(--bl-surface); }
.tl-focus b { color: var(--bl-text); font-size: 15px; }
.tl-focus p { margin-top: 6px !important; color: var(--bl-muted); font-size: 14px; line-height: 1.55; }
.tl-stat-row { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--bl-border); }
.tl-stat-row > div { display: grid; gap: 4px; padding: 18px 0; }
.tl-stat-row > div + div { padding-left: 20px; border-left: 1px solid var(--bl-border); }
.tl-stat-row b { color: var(--bl-text); font-size: 34px; font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.tl-stat-row b small { color: var(--bl-faint); font-size: 16px; }
.tl-stat-row span { color: var(--bl-muted); font-size: 13.5px; }
.tl-review { border: 1px solid var(--bl-border); border-radius: 18px; background: var(--bl-surface); }
.tl-review summary { padding: 16px 20px; color: var(--bl-text); cursor: pointer; font-weight: 600; }
.tl-review ul { display: grid; gap: 0; margin: 0; padding: 0 20px 8px; list-style: none; }
.tl-review li { display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid var(--bl-border); font-size: 14.5px; }
.tl-review-q { color: var(--bl-secondary); }
.tl-review-q b { color: var(--bl-text); }
.tl-review-yours, .tl-review-right { display: flex; align-items: center; gap: 8px; }
.tl-review-yours { color: var(--bl-red); }
.tl-review-right { color: var(--bl-green); font-weight: 600; }
.tl-review small { margin-left: 6px; color: var(--bl-faint); font-weight: 400; }
.tl-review-explain { color: var(--bl-muted); }
.tl-review-explain b, .tl-review-explain i { color: var(--bl-text); }
.tl-cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 24px; padding: 26px; border: 1px solid var(--bl-border-strong); border-radius: 22px; background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--bl-lavender) 20%, transparent), transparent 60%), radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--bl-green) 16%, transparent), transparent 60%), var(--bl-surface); }
.tl-cta-title { margin-top: 10px !important; color: var(--bl-text); font-size: 23px; font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.tl-cta p:not(.bl-eyebrow, .tl-cta-title) { margin-top: 8px !important; color: var(--bl-muted); font-size: 15px; line-height: 1.6; }
.tl-cta small { grid-column: 1 / -1; color: var(--bl-faint); font-size: 12.5px; }
.tl-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.tl-share p { color: var(--bl-muted); font-size: 14.5px; }
.tl-share p b { color: var(--bl-text); }
.tl-share > div { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--bl-border-strong); border-radius: 999px; background: var(--bl-tint); color: var(--bl-text) !important; font-size: 14px; font-weight: 600; text-decoration: none !important; transition: background .2s, transform .2s var(--bl-ease); }
.tl-pill:hover { background: var(--bl-tint-2); transform: translateY(-2px); }
.tl-pill[data-share="whatsapp"] svg { color: #25d366; }

@keyframes tl-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes tl-ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@keyframes tl-fill { to { stroke-dashoffset: var(--to); } }
@keyframes tl-grow { from { transform: scaleX(0); } }

@media (max-width: 760px) {
  .tl-hero .bl-hero-content { padding-bottom: 150px; }
  .tl-stage { margin-top: -110px; padding: 0 12px; }
  .tl-panel { min-height: 420px; border-radius: 22px; padding: 22px 18px; }
  .tl-start { min-height: 340px; }
  .tl-options { grid-template-columns: 1fr; }
  .tl-options--two { grid-template-columns: 1fr 1fr; }
  .tl-score { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .tl-score-ring { width: 150px; height: 150px; }
  .tl-score-ring b { font-size: 44px; }
  .tl-rival { justify-content: center; }
  .tl-bars li { grid-template-columns: 1fr 64px; gap: 6px 12px; }
  .tl-bars li span { grid-column: 1 / -1; }
  .tl-cta { grid-template-columns: 1fr; }
  .tl-cta .bl-btn { width: 100%; }
  .tl-share { flex-direction: column; align-items: stretch; }
  .tl-mic { width: 84px; height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-ring-fill { stroke-dashoffset: var(--to); }
}