/* Free exercises on telling the time in Spanish. Loaded after clock-exercise.css (dial, hands, choices), accent-exercise.css (listening buttons)
   and fecha-exercise.css (Spanish keyboard and written line). */
.hora-figure{display:flex;justify-content:center;margin:4px 0 16px}
.hora-figure .clock-face{width:min(240px,70vw);height:auto}
.hora-display[lang="es"]{color:#034cff}
.hora-digital{display:inline-block;padding:10px 26px;border:4px solid #101052;border-radius:18px;background:#101052;color:#7dffb0;font:800 54px/1 'Barlow Condensed',Inter,monospace;letter-spacing:.06em;box-shadow:0 6px 0 #cdccff;font-variant-numeric:tabular-nums}
.hora-card{display:inline-flex;flex-direction:column;gap:4px;padding:12px 22px;border-radius:14px;background:#fff0ce;text-align:center}
.hora-card span{font:650 14px Inter,sans-serif;color:#6b4a00}
.hora-card strong{font:800 32px Inter,sans-serif;color:#101052}
.hora-board{display:flex;flex-direction:column;gap:8px;min-width:min(320px,100%);padding:14px 18px;border-radius:14px;background:#1b1f3b;color:#fff;box-shadow:0 6px 0 #cdccff}
.hora-board-title{font:800 15px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#ffd23f}
.hora-board-row{display:flex;justify-content:space-between;gap:18px;font:750 22px Inter,sans-serif}
.hora-board-row strong{font:800 26px 'Barlow Condensed',Inter,monospace;color:#7dffb0;font-variant-numeric:tabular-nums}
.hora-listen{justify-content:center;margin-bottom:16px}
/* Four clocks to choose from, two by two. */
.hora-clocks{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.hora-clocks .clock-choice{display:flex;justify-content:center;padding:8px!important}
.hora-clocks .clock-face{width:100%;max-width:170px;height:auto;pointer-events:none}
.hora-exercise .clock-level:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
@media(max-width:700px){
 .hora-digital{font-size:44px;padding:8px 20px}
 .hora-clocks{gap:8px!important}.hora-clocks .clock-choice{padding:4px!important}
 .hora-board-row{font-size:19px}
}