/* Shared Educatodo controls are deliberately namespaced: resources keep their identity. */
.aprende-utility { width: 100%; background: #fffdf7; color: #20312e; border-bottom: 3px solid #ffd75e; font: 500 14px/1.45 "Avenir Next", Avenir, system-ui, sans-serif; position: relative; z-index: 60; }
.aprende-utility-inner { width: min(1200px, calc(100% - 32px)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding-block: 5px; }
.aprende-trail, .aprende-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-width: 0; }
.aprende-trail { font-size: 14px; }
.aprende-trail a { color: #fff; text-decoration: underline; text-underline-offset: 4px; padding-block: 12px; font-weight: 750; font-size: 14px; }
.aprende-trail > span:last-child { color: #e2ebe7; }
.aprende-tools { flex-shrink: 0; gap: 8px; }
.aprende-tools button, .aprende-switcher summary { min-height: 44px; padding: 11px 12px; border: 1px solid #b7c8c0; border-radius: 9px; background: transparent; color: #20312e; font: inherit; cursor: pointer; }
.aprende-tools button[aria-pressed="true"] { background: #ffd75e; color: #20312e; border-color: #ffd75e; }
.aprende-switcher { position: relative; }
.aprende-switcher nav { position: absolute; z-index: 30; right: 0; top: calc(100% + 8px); display: grid; width: min(300px, calc(100vw - 32px)); gap: 3px; padding: 8px; border-radius: 12px; background: white; color: #20312e; box-shadow: 0 8px 28px #102c3040; border: 1px solid #bdccc7; }
.aprende-switcher nav a { padding: 12px; min-height: 44px; border-radius: 6px; text-decoration: none; font: 650 15px/1.4 system-ui, sans-serif; color: #20312e; }
.aprende-switcher nav a:hover, .aprende-switcher nav a[aria-current] { background: #e4f2eb; }
.aprende-utility [hidden], [hidden] { display: none !important; }
:where(a, button, input, select, summary):focus-visible { outline: 3px solid #075b95 !important; outline-offset: 4px; }
.aprende-utility :focus-visible { outline-color: #075b95 !important; }
html { scroll-padding-top: 110px; }
html.aprende-reading { font-size: 125%; }
html.aprende-reading :where(main p, main li, .lyric-line, .activity-subtitle, .intro, .route-note) { font-size: max(1rem, 18px); line-height: 1.75; }
html.aprende-reading :where(main button, main input, .filter-buttons button, .tabs button, .mode-switch button) { font-size: max(.875rem, 16px); }
.resource-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 22px; }
.resource-shortcuts a { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 14px; border: 1px solid #a9c2b8; border-radius: 12px; background: #fff; color: #20312e; font-size: 14px; font-weight: 750; text-decoration: none; }
.resource-audio-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 16px 0; padding: 12px 16px; border: 1px solid #aac6be; border-radius: 14px; background: #edf7f2; color: #20312e; font: 500 16px/1.5 system-ui, sans-serif; }
.resource-audio-controls button, .resource-audio-controls select { min-height: 44px; padding: 8px 12px; background: white; color: #20312e; border: 1px solid #799e91; border-radius: 8px; font: inherit; }
.resource-audio-controls label { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.resource-audio-controls p { margin: 0; flex: 1 1 230px; font-size: 14px; line-height: 1.5; }
.resource-results { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0; font-size: 14px; }
.resource-results button { min-height: 44px; padding: 8px 14px; border: 1px solid #637b74; border-radius: 10px; background: white; color: #20312e; font: inherit; cursor: pointer; }
@media (max-width: 700px) {
  .aprende-utility-inner { flex-wrap: wrap; gap: 2px; padding-block: 6px; }
  .aprende-trail { width: 100%; gap: 10px; }
  .aprende-trail > span { display: none; }
  .aprende-tools { width: 100%; }
  .aprende-switcher nav { right: auto; left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print { .aprende-utility, .resource-audio-controls, .resource-shortcuts { display: none !important; } }

/* Legibility fixes for the original collections, including fixed-pixel legacy styles. */
.topbar nav a, .back-to-library, .filter-buttons button, .search-box input,
.lesson-forms-grid button, .lesson-spelling-block button, .sentence-actions button,
.single-result, .single-quiz-card > p, .sentence-feedback, .sentence-builder-copy > span,
.lesson-example-block span, .all-verbs-link, .lesson-nav a { font-size: .875rem; }
.product-label, .eyebrow, .lesson-forms-grid small, .lesson-spelling-block small, .lesson-example-block small,
.verb-navigation span, .type-badge, .hero-facts, .learning-strip p { font-size: .75rem; }
.lesson-forms-grid button, .lesson-spelling-block button, .sentence-actions button,
.filter-buttons button, .word-bank button, .letter-strip a, .sound, .letter-audio-button,
.listen-all, .mode-switch button, .tabs button, .speed-row button { min-height: 44px; }
.type-badge.regular, .regular-dot { background: #356321; color: white; }
.type-badge.irregular, .irregular-dot { background: #a9371b; color: white; }
.sentence-feedback.correct { color: #356321; }
.sentence-feedback.wrong { color: #a9371b; }
.lesson-shortcuts { max-width: 1200px; margin: 20px auto 0; padding-inline: 20px; }
.lesson-title h1 { margin: 0 0 12px; font: 800 clamp(2rem, 5vw, 3.4rem)/1.1 "Avenir Next", Avenir, system-ui, sans-serif; letter-spacing: -.03em; }
.single-lesson { padding-top: 30px; }
.practice-section > .resource-audio-controls { grid-column: 1 / -1; }
.skip-link { position: fixed; top: 10px; left: 16px; z-index: 100; transform: translateY(-200%); padding: 12px 16px; border-radius: 8px; background: white; color: #20312e; font-size: 16px; }
.skip-link:focus { transform: none; }
.search-box:focus-within, .search-field:focus-within { outline: 3px solid #075b95; outline-offset: 3px; }
.word-bank button:disabled { opacity: .45; }

/* Song Book: larger text and explicit audio availability, without obscuring the printed page. */
.audio-dot { position: static; display: inline-flex; width: auto; height: auto; min-height: 26px; padding: 5px 8px; margin-top: 12px; border-radius: 8px; color: #20312e; font-size: .75rem; line-height: 1.3; }
.mode-switch button, .tabs button, .speed-row button, .activity-kicker, .crumbs { font-size: .875rem; }
.site-header .brand-copy small { font-size: .75rem; }
.site-header .brand-copy strong { font-size: .875rem; }
.page-nav { grid-template-columns: 1fr auto 1fr; align-items: center; }
.page-nav > span { padding: 12px; color: #586862; text-align: center; font-size: .875rem; }
.page-nav a { display: grid; place-items: center; }
.song-audio-status { font-size: .875rem; line-height: 1.5; color: white; }
.song-audio-status:empty { display: none; }
.pronunciation-note { font-size: .875rem; line-height: 1.6; padding: 12px; background: #fff4cf; border-radius: 10px; }
.activity-hero .page-art { margin: 0; }

@media (max-width: 800px) {
  .topbar { height: auto; min-height: 72px; flex-wrap: wrap; gap: 6px 16px; padding-block: 8px; }
  .topbar nav { display: flex; order: 3; flex: 1 0 100%; flex-wrap: wrap; gap: 4px 18px; }
  .topbar nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .single-lesson { grid-template-columns: 1fr; gap: 20px; }
  .single-lesson-content { grid-row: 1; }
  .single-card-visual { max-width: 240px; }
  .site-header:has(.mode-switch) { flex-wrap: wrap; }
  .mode-switch { flex-wrap: wrap; border-radius: 14px; }
  .mode-switch button { flex: 1; }
  .page-nav { grid-template-columns: 1fr 1fr; }
  .page-nav a[href="/cancionero/"] { grid-column: 1 / -1; grid-row: 2; }
  .activity-hero .page-art { width: min(240px, 100%); justify-self: center; }
  .home-hero .home-cover { display: none; }
  .home-hero h1 { font-size: 3rem; }
}
@media (max-width: 500px) {
  .topbar .product-label { display: none; }
  .site-header:has(.mode-switch) { position: static; }
  .site-header:has(.mode-switch) .mode-switch { width: 100%; }
  .filter-buttons, .explorer-tools { flex-wrap: wrap; }
  .search-box { min-width: 0; width: 100%; }
}

/* One brand header, one useful set of controls. No duplicate mobile navigation. */
[data-aprende-shell] [data-resource-header] { display: none; }
.aprende-utility-inner { min-height: 76px; gap: 24px; }
.aprende-brand { display: inline-flex; flex: none; align-items: center; gap: 9px; color: #20312e; text-decoration: none; }
.aprende-brand img { width: 56px; height: auto; object-fit: contain; }
.aprende-brand > span { display: grid; font-size: 25px; line-height: 1.1; font-weight: 900; letter-spacing: -.045em; }
.aprende-brand strong { font-size: 12px; line-height: 1.7; font-weight: 750; letter-spacing: .035em; }
.aprende-location { flex: 1; min-width: 0; color: #435e53; font-size: 14px; text-underline-offset: 4px; }
.aprende-tools { margin-left: auto; }
[data-aprende-reading] { display: inline-flex; gap: 8px; align-items: center; justify-content: center; }
[data-aprende-reading] > span:first-child { font: 700 19px/1 Georgia, serif; }
.aprende-switcher nav { min-width: 230px; }
html { scroll-padding-top: 24px; }
@media (max-width: 700px) {
  .aprende-utility-inner { flex-wrap: wrap; gap: 4px 10px; padding-block: 8px; min-height: 68px; }
  .aprende-brand > span { font-size: 22px; }
  .aprende-brand img { width: 46px; }
  .aprende-tools { width: auto; gap: 6px; }
  .aprende-location { order: 3; flex: 1 0 100%; padding-block: 4px; }
  .aprende-reading-label { display: none; }
  .aprende-switcher nav { left: auto; right: 0; width: min(300px, calc(100vw - 32px)); }
}
@media (max-width: 360px) {
  .aprende-brand strong { font-size: 12px; letter-spacing: 0; }
  .aprende-brand img { width: 40px; }
  .aprende-brand { gap: 6px; }
  .aprende-tools button, .aprende-switcher summary { padding-inline: 9px; }
}

.song-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
/* Fixed only on activities. The home retains its independent, scrolling menu. */
html[data-aprende-activity] { --aprende-header-height: 89px; scroll-padding-top: calc(var(--aprende-header-height) + 16px); }
.aprende-header-space { height: var(--aprende-header-height, 89px); }
.aprende-utility[data-aprende-sticky] { position: fixed; inset: 0 0 auto; box-shadow: 0 3px 12px #20312e0d; }
.aprende-utility[data-aprende-sticky] .aprende-utility-inner { min-height: 84px; }
.aprende-utility[data-aprende-sticky] .aprende-switcher nav { max-height: calc(100vh - var(--aprende-header-height, 89px) - 16px); max-height: calc(100dvh - var(--aprende-header-height, 89px) - 16px); overflow-y: auto; overscroll-behavior: contain; }
/* Homepage footer, shared without inheriting each activity's fonts or color tokens. */
[data-aprende-shell] .abaco_abacus-module_footer { display: none !important; }
footer.aprende-site-footer { display: block; position: relative; width: 100%; max-width: none; margin: 0; padding: 34px 0; border: 0; border-top: 2px solid #20312e; border-radius: 0; background: #20312e; color: #fff; text-align: left; font: 500 1rem/1.5 "Avenir Next", Avenir, "Trebuchet MS", system-ui, sans-serif; box-shadow: none; clear: both; }
.aprende-site-footer, .aprende-site-footer * { box-sizing: border-box; }
.aprende-site-footer .aprende-footer-inner { width: min(1200px, calc(100% - 40px)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.aprende-site-footer .aprende-footer-brand { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; color: #fff; text-decoration: none; flex-shrink: 0; }
.aprende-site-footer .aprende-footer-brand img { width: 64px; max-width: 100%; height: auto; object-fit: contain; padding: 6px; border-radius: 10px; background: #fffdf7; margin: 0; }
.aprende-site-footer .aprende-footer-copy { display: grid; gap: 2px; }
.aprende-site-footer .aprende-footer-copy strong { color: #fff; font: 950 1rem/1.5 "Avenir Next", Avenir, system-ui, sans-serif; letter-spacing: .11em; }
.aprende-site-footer .aprende-footer-copy small { color: #afbbb8; font-size: .875rem; font-weight: 850; letter-spacing: .075em; text-transform: uppercase; }
.aprende-site-footer .aprende-footer-meta { display: grid; justify-items: end; gap: 10px; min-width: 0; }
.aprende-site-footer .aprende-footer-meta p { max-width: 380px; margin: 0; color: #c6cfcc; font: inherit; font-size: .875rem; text-align: right; }
.aprende-site-footer .aprende-footer-contact, .aprende-site-footer .aprende-footer-store { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font: inherit; font-size: .875rem; text-underline-offset: 5px; overflow-wrap: anywhere; }
.aprende-site-footer .aprende-footer-store { gap: 8px; font-weight: 850; text-decoration: underline; text-decoration-color: #ffd75e; text-decoration-thickness: 2px; }
.aprende-site-footer a:hover { color: #ffd75e; }
.aprende-site-footer a:focus-visible { outline-color: #ffd75e !important; }
.aprende-site-footer .aprende-footer-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px) {
  .aprende-site-footer .aprende-footer-inner { width: calc(100% - 32px); flex-direction: column; align-items: flex-start; gap: 24px; }
  .aprende-site-footer .aprende-footer-meta { justify-items: start; }
  .aprende-site-footer .aprende-footer-meta p { text-align: left; }
  .aprende-site-footer .aprende-footer-brand { flex-shrink: 1; flex-wrap: wrap; }
}
@media (max-width: 700px) { html[data-aprende-activity] { --aprende-header-height: 125px; } }
@media (max-width: 360px) { html[data-aprende-activity] { --aprende-header-height: 175px; } }
@media print { .aprende-header-space { display: none; } html[data-aprende-activity] { scroll-padding-top: 0; } }
.song-heading .activity-number { margin: 0; color: #8c2925; font-size: .875rem; }
.song-modes { border: 1px solid #c2cfc8; flex-wrap: wrap; }
.song-modes button { min-height: 44px; }
.game-help, .song-text-fallback { margin-top: 18px; padding: 12px 14px; border: 1px solid #9fbcae; border-radius: 12px; background: #fffdf7; }
.game-help summary, .song-text-fallback summary { padding-block: 6px; min-height: 44px; cursor: pointer; font-weight: 750; font-size: 1rem; color: #234637; }
.game-help p, .teacher-close { font-size: 1rem; line-height: 1.65; }
.game-help p:last-child { margin-bottom: 0; }
.home-hero .home-cover { max-height: 260px; max-width: 195px; justify-self: end; margin: 0; }
.home-hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.featured-card--banner .featured-copy { grid-template-columns: minmax(0,1fr); gap: 12px; }
.featured-card--banner .featured-copy h2 { line-height: 1.12; }
.featured-card--banner .featured-copy span { justify-content: space-between; }
.activity-title { font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.04; letter-spacing: -.04em; overflow-wrap: anywhere; }
.tabs { grid-template-columns: repeat(3,minmax(0,1fr)); }
.tabs button { overflow-wrap: anywhere; }
.activity-card h3 { max-width: 85%; overflow-wrap: anywhere; }
.color-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 26px 12px; }
.color-grid button span { font-size: .875rem; bottom: -24px; }
.color-grid button.correct, .color-grid button.wrong { background: var(--swatch); }
.color-grid button.correct { box-shadow: 0 0 0 3px white, 0 0 0 5px #234637; }
.color-grid button.wrong { box-shadow: 0 0 0 3px white, 0 0 0 5px #a9371b; }
.game .color-grid { margin-bottom: 48px; }
@media (max-width: 700px) {
  .song-heading { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 20px; }
  .song-modes { display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; }
  .song-modes button { border-radius: 10px; padding: 10px 7px; line-height: 1.3; }
  .activity-hero { gap: 16px; }
  .activity-hero .page-art { display: block; width: min(150px, 100%); }
  .activity-hero .page-art img { max-width: 100%; }
  .filter-group { flex-wrap: wrap; }
}