/* Shared responsive/accessibility corrections, loaded after each page's theme.
   Keep content in normal flow: never conceal overflow at the document level. */
[hidden] { display: none !important; }
main[tabindex="-1"]:focus { outline: none; }
.subject-jumps { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }
.subject-jumps a { display: inline-flex; align-items: center; min-height: 44px; padding: .6rem 1rem; border-radius: 14px; color: #4f28ae; background: #fff; border: 1px solid #d4ccec; }
html { scroll-padding-top: 6rem; }
button, input, select, textarea { font: inherit; }
button, input, select, textarea, audio { max-width: 100%; min-width: 0; }
button { white-space: normal; overflow-wrap: anywhere; }
input, select, textarea { font-size: max(1rem, 16px); }
textarea { resize: vertical; }
:where(h1, h2, h3, h4, p, li, label, a, strong, small, code) { overflow-wrap: anywhere; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #075fbe; outline-offset: 4px;
}
:where(.hero-copy, .course-main, .dashboard-main, .auth-copy, .auth-card,
  .section-heading > *, .section-head > *, .hero-panel > *, .field,
  .analytics-layout > *, .analytics-toolbar > *, .detail-facts > *,
  .option > *, .game-mode > *, .video-stage > *, .lesson-voice-card > *) { min-width: 0; }
.hero-copy { container-type: inline-size; }
.hero h1 { font-size: clamp(2.75rem, 6vw, 5.7rem); line-height: 1.02; }
@supports (font-size: 1cqi) {
  .hero h1 { font-size: clamp(2.5rem, 15cqi, 5.7rem); }
}
.hero .hero-color-line { display: block; }
.hero h1 .hero-word { display: block; white-space: normal; padding-right: .12em; }
.hero .eyebrow { max-width: 100%; }
.journey-card { grid-template-columns: 112px minmax(0, 1fr); }
.journey-card small, .showcase-foot { font-size: .9rem; color: #e2deeb; }
.section-heading { flex-wrap: wrap; }
.result-count { flex-shrink: 1; }
.course-card h4 { margin: .9rem 0 .55rem; font-size: 1.45rem; line-height: 1.15; letter-spacing: -.035em; }
.course-link, .text-button, .filter-button, .clear-search, .footer-copy a,
.account-nav a, .topbar nav a { min-height: 44px; }
.footer-copy a { display: inline-flex; align-items: center; }
.clear-search { min-width: 44px; }
.nav-toggle { display: none; }
.account-header, .account-nav, .topbar-inner { min-width: 0; }
.account-nav { flex-wrap: wrap; overflow: visible; }
.auth-copy h1, .hero-panel h1, .legal h1, .course-hero h1, .route-hero h1 { line-height: 1.08; }
.field .password-wrap input { padding-right: 5rem; }
.check-row input[type="checkbox"] { flex: 0 0 22px; }
.button { max-width: 100%; text-align: center; }
.table-wrap { max-width: 100%; overscroll-behavior-inline: contain; }
.table-wrap:focus-visible { outline-offset: 2px; }
.account-row-main strong, .account-row-main small,
.music-result strong, .music-result span, .music-result small {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
}
.account-detail, .account-row-main, .detail-title { min-width: 0; }
.admin-tabs { flex-wrap: wrap; white-space: normal; overflow: visible; }
.admin-tabs button { white-space: normal; }
.surface pre, .surface code { white-space: pre-wrap; overflow-wrap: anywhere; }
.practice-toolbar .select-wrap { flex: 1 1 20rem; min-width: 0; flex-wrap: wrap; }
.practice-toolbar select { flex: 1 1 15rem; width: 100%; min-width: 0; }
.practice-stats, .course-meta, .video-controls { flex-wrap: wrap; }
.practice-stats { justify-content: flex-start; }
.game-mode { grid-template-columns: 52px minmax(0, 1fr); }
.video-stage { grid-template-columns: auto minmax(0, 1fr); }
.studio-challenge, .storybook-question { grid-template-columns: auto minmax(0, 1fr); }
.mastery-status { white-space: normal; }
.toast { overflow-wrap: anywhere; visibility: hidden; border-radius: 16px; }
.toast.show { visibility: visible; }
@media (max-width: 1200px) {
  .analytics-layout { grid-template-columns: minmax(0, 1fr); }
  .analytics-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-toolbar > :first-child { grid-column: 1 / -1; }
  .mastery-row { grid-template-columns: minmax(0, 1fr); }
  .mastery-status { justify-self: start; }
}
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .nav-shell { flex-wrap: wrap; gap: .5rem; padding-block: .5rem; }
  .nav-shell nav { width: 100%; flex-wrap: wrap; }
  .nav-shell #main-navigation a { display: inline-flex; align-items: center; min-height: 44px; }
  .navigation-ready .nav-toggle {
    display: inline-flex; align-items: center; gap: .5rem; margin-left: auto;
    min-height: 44px; padding: .55rem .9rem; border: 1px solid #d4ccec;
    border-radius: 14px; color: #4f28ae; background: #fff; font-weight: 750;
  }
  .navigation-ready .nav-toggle[aria-expanded="false"] + nav { display: none; }
  .navigation-ready .nav-toggle[aria-expanded="true"] + nav { display: flex; }
}
@media (max-width: 900px) {
  .side-nav, .sidebar nav { display: flex; flex-wrap: wrap; width: 100%; overflow: visible; }
  .side-nav button { flex: 1 1 9rem; min-width: 0; width: auto; }
  .sidebar nav a { flex: 1 1 9rem; min-width: 0; }
  .course-sidebar .side-progress { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  html { scroll-padding-top: 1rem; }
  .site-header, .account-header, .topbar, .top, .lesson-shortcuts { position: static; }
  .account-header { flex-wrap: wrap; overflow: visible; }
  .account-nav { justify-content: flex-start; flex: 1 1 100%; gap: .25rem; }
  .topbar-inner { flex-wrap: wrap; gap: .5rem; padding-block: .5rem; }
  .topbar nav { display: flex; flex-wrap: wrap; flex: 1; gap: .35rem; }
  .topbar nav a:first-child { display: inline-flex; }
  .topbar nav a { align-items: center; padding: .45rem .6rem; }
  .hero { padding-top: 2rem; }
  .journey-card { grid-template-columns: 72px minmax(0, 1fr); padding: 1rem; gap: .8rem; }
  .journey-visual { width: 72px; }
  .showcase-heading strong { font-size: clamp(1.65rem, 7vw, 2.3rem); }
  .journey-card strong { font-size: 1.05rem; }
  .journey-card small { font-size: .875rem; }
  .auth-copy h1 { font-size: clamp(2.4rem, 11vw, 4rem); }
  .hero-panel h1, .student-greeting h1 { font-size: clamp(2rem, 10vw, 3rem); line-height: 1.12; }
  .analytics-toolbar, .detail-facts { grid-template-columns: minmax(0, 1fr); }
  .analytics-toolbar > :first-child { grid-column: auto; }
  .account-list { max-height: none; }
  .account-detail-head { flex-wrap: wrap; }
  .video-stage { grid-template-columns: minmax(0, 1fr); }
  .storybook-art { aspect-ratio: auto; }
  .storybook-art img { aspect-ratio: 4 / 3; height: auto; }
  .storybook-art figcaption { position: relative; inset: auto; padding: 1rem; }
  .storybook-art::after { display: none; }
  .practice-stats { justify-content: flex-start; }
}
@media (max-height: 500px) {
  .site-header, .account-header, .topbar, .course-sidebar { position: static; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (forced-colors: active) {
  .hero h1 .hero-word { background: none; color: CanvasText; }
  .option.selected, .game-mode.active { outline: 2px solid Highlight; }
}

/* Botón «Entrar» siempre visible en la portada (auditoría de navegación 2026-09-16) */
.nav-enter { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; padding: .6rem 1.05rem; border-radius: 999px; background: var(--ink, #1d1d23); color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none; }
.nav-enter:hover { background: #343437; }
.nav-enter:focus-visible { outline: 3px solid #6d4aff; outline-offset: 3px; }
@media (min-width: 1101px) { #main-navigation .nav-account { display: none; } .nav-enter { margin-left: .5rem; order: 3; } }
@media (max-width: 1100px) { .nav-shell .nav-enter { order: 1; } .nav-shell .nav-toggle { order: 2; } .nav-shell #main-navigation { order: 3; } }

/* Selector de idioma ES · EN en la portada (16 de septiembre de 2026) */
.lang-switch { display: inline-flex; align-items: center; margin-left: auto; border: 1px solid rgba(0, 0, 0, .14); border-radius: 999px; overflow: hidden; background: #fff; }
.lang-switch a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .85rem; color: #34303f; font-size: .875rem; font-weight: 800; letter-spacing: .04em; text-decoration: none; }
.lang-switch a[aria-current="page"] { background: #1d1d23; color: #fff; }
.lang-switch a:hover:not([aria-current="page"]) { background: #f2edff; }
.lang-switch a:focus-visible { outline: 3px solid #6d4aff; outline-offset: -3px; }
.nav-shell .nav-enter { margin-left: .5rem; }
@media (min-width: 1101px) { .lang-switch { order: 2; margin-left: .5rem; } }
@media (max-width: 1100px) {
  .site-header .nav-shell .lang-switch a[data-lang] { display: inline-flex; }
  .nav-shell .nav-enter { order: 0; }
  .nav-shell .lang-switch { order: 1; margin-left: .5rem; }
}
@media (max-width: 480px) {
  /* Teléfono: fila 1 = marca … Menú; salto de fila; fila 2 = Entrar … ES/EN */
  .nav-shell::after { content: ''; flex-basis: 100%; height: 0; order: 1; }
  .nav-shell .nav-toggle { order: 0; margin-left: auto; }
  .nav-shell .nav-enter { order: 2; margin-left: 0; }
  .nav-shell .lang-switch { order: 3; margin-left: auto; }
  .nav-shell #main-navigation { order: 4; }
}

/* Mejoras UX 16 de septiembre de 2026: puertas en el héroe, ejemplos, toque, contraste y zoom */
.lp-doors { display: flex; flex-wrap: wrap; gap: .75rem; }
.lp-doors .primary-button { min-height: 54px; }
.lp-doors .lp-door-student { background: #fff; color: #4b2fc7; border: 2px solid #4b2fc7; }
.lp-doors .lp-door-student:hover { background: #f2edff; }
.lp-inline-link { color: #4b2fc7; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lp-examples { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; }
.lp-examples li { padding: 1rem 1.1rem; border-radius: 18px; background: #fff; border: 1px solid rgba(0,0,0,.07); font-size: 1.05rem; line-height: 1.5; }
.lp-examples li strong { display: block; color: #4b2fc7; margin-bottom: .2rem; }
@media (min-width: 760px) { .lp-examples { grid-template-columns: repeat(3, 1fr); } }
.lp-hero-phone { max-width: calc(100vw - 32px); }
.filter-button span { color: #3b2599; opacity: 1; }
@media (max-width: 480px) { .nav-shell .lang-switch { margin-left: auto; } }
@media (max-width: 380px) { .lp-doors .primary-button { width: 100%; justify-content: center; } }
.lp-inline-link { display: inline-block; padding: .35rem 0; }

/* Cabeceras robustas con cualquier tamaño de texto (corrección 16 de septiembre, noche) */
.nav-shell .lang-switch, .nav-shell .lang-switch a, .nav-shell .nav-enter, .nav-shell .nav-toggle, #main-navigation a, .account-nav a, .account-nav .account-signout, .student-exit, .topbar nav a { white-space: nowrap; overflow-wrap: normal; flex-shrink: 0; }
}

/* Capturas reales de la app dentro de los marcos de dispositivo de la portada */
.premium-landing .lp-tablet-screen { padding: 0; overflow: hidden; aspect-ratio: 4 / 3; background: #f7f7fa; }
.premium-landing .lp-real-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.premium-landing .lp-device-stage .lp-hero-phone { display: block; padding: 0; overflow: hidden; aspect-ratio: 390 / 844; background: #fff; }
.premium-landing .lp-age-card .lp-teen-device { display: block; padding: 0; overflow: hidden; aspect-ratio: 390 / 844; background: #fff; }
.premium-landing .lp-hero-phone .lp-phone-camera, .premium-landing .lp-teen-device .lp-phone-camera { position: absolute; top: 7px; left: 50%; translate: -50% 0; z-index: 2; }