/* ============================================================
   BARNETEGI · STUDIO LAYER · v40
   Dirección de arte derivada de REFERENCIAS DESIGN.
   Esta capa convierte los componentes funcionales de app.css en
   un producto editorial, táctil y responsive sin duplicar lógica.
   ============================================================ */

:root {
  --paper: #f5efe4;
  --paper-deep: #ebe1d0;
  --surface: #fffdf8;
  --surface-glass: rgba(255, 253, 248, .86);
  --surface-raised: #ffffff;
  --surface-hover: #f7f3ea;
  --control-border: #a5aa9f;
  --on-accent: #fffaf0;
  --forest-950: #173329;
  --forest-900: #214436;
  --forest-800: #2e4a3b;
  --forest-600: #577764;
  --forest-150: #dfe9df;
  --forest-100: #e9f0e8;
  --terra-700: #a83e30;
  --terra-500: #c24b3a;
  --terra-100: #f5dfd7;
  --sea-800: #205f8c;
  --sea-600: #2e6fa7;
  --sea-100: #dceaf3;
  --sun-600: #986718;
  --sun-400: #e1b55c;
  --sun-100: #f5e9cb;
  --slate-800: #36434a;
  --slate-600: #4a535a;
  --slate-100: #e3e8e8;
  --hairline: rgba(45, 55, 48, .11);
  --hairline-strong: rgba(45, 55, 48, .18);
  --shadow-soft: 0 1px 1px rgba(35, 50, 39, .04), 0 8px 24px rgba(35, 50, 39, .07);
  --shadow-float: 0 18px 55px rgba(25, 45, 34, .16), 0 3px 12px rgba(25, 45, 34, .08);
  --shadow-press: 0 2px 6px rgba(25, 45, 34, .08);
  --font-ui: ui-rounded, "SF Pro Rounded", "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-editorial: "Iowan Old Style", "New York", "Palatino Linotype", Palatino, Georgia, serif;
  --page-max: 720px;
  --nav-h: 74px;
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;

  /* Compatibilidad hacia atrás con app.css. */
  --bg: var(--paper);
  --bg-card: var(--surface);
  --bg-sunken: var(--paper-deep);
  --ink: #29352f;
  --ink-soft: #6d6b62;
  --muted: var(--ink-soft);
  --line: var(--hairline);
  --brand: var(--forest-800);
  --brand-soft: var(--forest-150);
  --accent: var(--terra-500);
  --accent-soft: var(--terra-100);
  --gold: var(--sun-600);
  --gold-bright: var(--sun-400);
  --gold-soft: var(--sun-100);
  --info: var(--sea-600);
  --info-soft: var(--sea-100);
  --slate: var(--slate-600);
  --radius: var(--radius-md);
  --radius-card: var(--radius-md);
  --shadow: var(--shadow-soft);
  --serif: var(--font-editorial);
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d1711;
  --paper-deep: #080f0b;
  --surface: #1e3026;
  --surface-glass: rgba(30, 48, 38, .94);
  --surface-raised: #263c30;
  --surface-hover: #2b4537;
  --control-border: #63796c;
  --on-accent: #102017;
  --forest-950: #d8e9dc;
  --forest-900: #bad4c0;
  --forest-800: #9bc4a6;
  --forest-600: #789985;
  --forest-150: #263b2f;
  --forest-100: #213329;
  --terra-700: #f0a08e;
  --terra-500: #e47d66;
  --terra-100: #452c25;
  --sea-800: #b4d8f0;
  --sea-600: #8fc2e3;
  --sea-100: #203544;
  --sun-600: #efc66f;
  --sun-400: #e8bd61;
  --sun-100: #40351f;
  --slate-800: #d4dadd;
  --slate-600: #aab5b1;
  --slate-100: #293632;
  --hairline: rgba(236, 242, 237, .16);
  --hairline-strong: rgba(236, 242, 237, .28);
  --shadow-soft: 0 1px 1px rgba(0, 0, 0, .18), 0 10px 28px rgba(0, 0, 0, .20);
  --shadow-float: 0 20px 60px rgba(0, 0, 0, .40), 0 3px 12px rgba(0, 0, 0, .24);
  --ink: #f4eedf;
  --ink-soft: #bcc4bb;
  --muted: var(--ink-soft);
  --ok: #98c8a4;
  --bad: #ed8973;
  --brand-ink: var(--on-accent);
}

* { scrollbar-color: var(--forest-600) transparent; }

html {
  min-height: 100%;
  background: var(--paper-deep);
  scroll-behavior: smooth;
}

body {
  position: relative;
  overflow-x: hidden;
  min-height: 100svh;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.58;
  letter-spacing: -.008em;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--sun-400) 12%, transparent) 0, transparent 23rem),
    radial-gradient(circle at 92% 34%, color-mix(in srgb, var(--sea-600) 7%, transparent) 0, transparent 27rem),
    var(--paper);
  color: var(--ink);
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  opacity: .26;
  filter: blur(.2px);
}

body::before {
  width: 380px;
  height: 380px;
  left: max(-260px, calc(50vw - 720px));
  top: 12vh;
  border: 1px solid color-mix(in srgb, var(--forest-600) 22%, transparent);
  border-radius: 45% 55% 52% 48%;
  box-shadow: 28px 28px 0 -27px color-mix(in srgb, var(--terra-500) 38%, transparent),
    55px 55px 0 -54px color-mix(in srgb, var(--sea-600) 45%, transparent);
  transform: rotate(-18deg);
}

body::after {
  width: 360px;
  height: 150px;
  right: max(-250px, calc(50vw - 710px));
  bottom: 12vh;
  background:
    radial-gradient(ellipse at 50% 100%, transparent 43%, color-mix(in srgb, var(--forest-600) 26%, transparent) 44% 45%, transparent 46%) 0 0 / 90px 45px repeat-x;
  transform: rotate(7deg);
}

button,
input,
textarea,
select { font-family: inherit; }

button,
.card.tappable,
.list-row { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sun-400) 70%, white);
  outline-offset: 3px;
}

::selection {
  background: color-mix(in srgb, var(--sun-400) 48%, transparent);
  color: var(--forest-950);
}

/* ---------- estructura y transición entre vistas ---------- */

#screen {
  position: relative;
  overflow-x: clip;
  width: 100%;
  max-width: var(--page-max);
  min-height: calc(100svh - 50px);
  margin: 0 auto;
  padding: 24px 20px calc(var(--nav-h) + var(--safe-bottom) + 58px);
  animation: none;
}

#screen.view-enter > * {
  animation: studio-enter .48s cubic-bezier(.2, .78, .25, 1) both;
}

#screen.view-enter > :nth-child(2) { animation-delay: 35ms; }
#screen.view-enter > :nth-child(3) { animation-delay: 70ms; }
#screen.view-enter > :nth-child(4) { animation-delay: 100ms; }
#screen.view-enter > :nth-child(n+5) { animation-delay: 125ms; }
#screen.view-back > * { animation-name: studio-back; }

@keyframes studio-enter {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.992); }
  to { opacity: 1; transform: none; }
}

@keyframes studio-back {
  from { opacity: 0; transform: translate3d(-12px, 0, 0); }
  to { opacity: 1; transform: none; }
}

body[data-view="home"] #screen { padding-top: 12px; }
body[data-view="welcome"] #screen { max-width: 940px; padding-top: 0; }
body[data-view="welcome"] #topbar,
body[data-view="welcome"] .tabbar,
body[data-view="welcome"] #askfab { display: none !important; }

/* ---------- barra superior de orientación ---------- */

#topbar {
  position: sticky;
  top: 0;
  z-index: 70;
  padding: calc(var(--safe-top) + 8px) 10px 0;
  border: 0;
  background: linear-gradient(to bottom, var(--paper) 38%, transparent);
}

#topbar-btn {
  width: min(calc(100% - 4px), var(--page-max));
  min-height: 40px;
  margin: 0 auto;
  padding: 8px 14px 9px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-glass);
  box-shadow: 0 5px 18px rgba(25, 45, 34, .06);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

#tb-label {
  overflow: hidden;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--ink-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tb-chev {
  margin-left: 10px;
  font-size: .64rem;
  color: var(--forest-800);
}

.tb-fill-wrap {
  height: 3px;
  margin-top: 6px;
  background: color-mix(in srgb, var(--forest-800) 12%, transparent);
}

#tb-fill { background: linear-gradient(90deg, var(--forest-800), var(--sun-400)); }

#topmenu {
  width: min(calc(100% - 4px), var(--page-max));
  margin-top: 7px;
  padding: 10px 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-glass);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  animation: menu-drop .24s ease-out both;
}

@keyframes menu-drop {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.tm-continue {
  border-radius: var(--radius-pill);
  padding: 13px 17px;
  background: linear-gradient(145deg, var(--forest-800), var(--forest-950));
}

.tm-level { border-radius: 10px; transition: background .18s ease; }
.tm-level:hover { background: var(--forest-100); }

/* ---------- navegación inferior ---------- */

nav.tabbar {
  left: 50%;
  right: auto;
  bottom: max(8px, var(--safe-bottom));
  width: min(calc(100% - 16px), 700px);
  height: var(--nav-h);
  padding: 5px 7px;
  border: 1px solid var(--hairline-strong);
  border-radius: 23px;
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  box-shadow: 0 18px 45px rgba(24, 45, 33, .16), inset 0 1px rgba(255, 255, 255, .55);
  transform: translateX(-50%);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

[data-theme="dark"] nav.tabbar { box-shadow: 0 18px 45px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .06); }

nav.tabbar button {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 6px 1px 4px;
  border-radius: 15px;
  gap: 3px;
  background: transparent !important;
  color: var(--ink-soft);
  font-size: clamp(.59rem, 2.7vw, .72rem);
  font-weight: 560;
  line-height: 1;
  transition: color .22s ease, transform .22s var(--ease-spring);
}

/* el resaltado ES el contenedor del icono: centrado por construcción,
   sin píldora absoluta ni transforms que desalineen */
nav.tabbar button .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 28px;
  border-radius: 12px;
  background: transparent;
  transition: background .22s ease, transform .22s var(--ease-spring);
}

nav.tabbar button .ico svg { width: 21px; height: 21px; stroke-width: 1.7; }
nav.tabbar button.active { color: var(--forest-900); font-weight: 720; }
nav.tabbar button.active .ico { background: var(--forest-150); }
nav.tabbar button:active { transform: scale(.94); }

/* ---------- jerarquía tipográfica ---------- */

h1,
h2,
.goal-num,
.stat .n,
.srs-word { font-family: var(--font-editorial); }

h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.8rem, 7vw, 2.2rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.035em;
}

h2 {
  margin: 26px 0 11px;
  font-size: clamp(1.35rem, 5vw, 1.68rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.025em;
}

h3 { line-height: 1.25; letter-spacing: -.015em; }

.eyebrow {
  display: block;
  color: var(--forest-600);
  font-size: .66rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.screen-lead {
  max-width: 570px;
  margin: -4px 0 22px;
  color: var(--ink-soft);
}

.screen-lead p { margin: 7px 0 0; font-size: .98rem; line-height: 1.55; }
.screen-lead.compact { margin-top: 0; margin-bottom: 18px; }
.screen-lead.compact p { font-size: .9rem; }

.screen-head {
  position: relative;
  min-height: 52px;
  margin: 0 0 17px;
  gap: 11px;
}

.screen-head .back {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  background: var(--surface-glass);
  box-shadow: 0 4px 12px rgba(32, 50, 39, .06);
  transition: transform .18s var(--ease-spring), background .18s ease;
}

.screen-head .back:hover { background: var(--forest-100); transform: translateX(-2px); }
.screen-head .back:active { transform: translateX(-3px) scale(.94); }
.screen-head .back .ic svg { width: 20px; height: 20px; }

.screen-head-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 15px;
  background: var(--forest-150);
  color: var(--forest-900);
}

.screen-head-icon .ic svg { width: 23px; height: 23px; }
.screen-head-copy { min-width: 0; }
.screen-head-copy h1 { font-size: clamp(1.62rem, 6vw, 2rem); }
.screen-head-copy > i {
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 7px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--terra-500) 0 28%, var(--sun-400) 28% 56%, var(--forest-600) 56%);
}

/* ---------- superficies y controles ---------- */

.card {
  position: relative;
  margin-bottom: 15px;
  padding: 19px 22px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px rgba(255, 255, 255, .52);
  pointer-events: none;
}

[data-theme="dark"] .card::after { box-shadow: inset 0 1px rgba(255, 255, 255, .055); }

.card.tappable {
  transition: transform .25s var(--ease-spring), border-color .2s ease, box-shadow .25s ease;
}

@media (hover: hover) {
  .card.tappable:hover {
    z-index: 2;
    border-color: color-mix(in srgb, var(--forest-600) 28%, var(--hairline));
    box-shadow: var(--shadow-float);
    transform: translateY(-3px);
  }
}

.card.tappable:active { box-shadow: var(--shadow-press); transform: translateY(1px) scale(.985); }

.btn {
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--paper-deep);
  color: var(--ink);
  font-size: .94rem;
  font-weight: 720;
  box-shadow: none;
  transition: transform .2s var(--ease-spring), box-shadow .2s ease, background .2s ease, opacity .2s ease;
}

.btn:hover { background: color-mix(in srgb, var(--paper-deep) 76%, var(--forest-150)); }
.btn:active { transform: translateY(1px) scale(.97); }

.btn.primary {
  border: 1px solid color-mix(in srgb, var(--forest-950) 45%, transparent);
  border-radius: var(--radius-pill);
  background: linear-gradient(145deg, var(--forest-800), var(--forest-950));
  color: #f8f1e3;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--forest-950) 22%, transparent), inset 0 1px rgba(255, 255, 255, .13);
}

.btn.primary:hover { box-shadow: 0 12px 28px color-mix(in srgb, var(--forest-950) 28%, transparent), inset 0 1px rgba(255, 255, 255, .18); }
[data-theme="dark"] .btn.primary { color: #102017; }

.btn.ghost {
  border-color: var(--hairline-strong);
  background: transparent;
}

.btn.sm { min-height: 39px; padding: 8px 14px; border-radius: var(--radius-pill); }
.btnrow { align-items: stretch; gap: 9px; }
.btnrow .btn { min-width: 0; }
/* filas de chips que envuelven (modo, nivel, ideas): cada globo mide lo que
   su texto pide y salta de línea, en vez de encoger hasta solaparse */
/* traducciones intercaladas (lecturas y proba): discretas, en cursiva */
.trad { color: var(--ink-soft); font-style: italic; font-size: .93em; border-left: 3px solid var(--hairline-strong); padding-left: 11px; margin-top: -4px; }
.trad-nudge { margin-bottom: 10px; }
.trad-nudge .btnrow { margin-top: 8px; }
/* Ari es tocable en las guías: insignia «?» */
.ari-guide-character { position: relative; cursor: pointer; }
.ari-guide-character .ari-who { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: var(--on-accent, #fff); font-size: .64rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(20, 40, 28, .25); }

/* enlaces de marca (Lombok, etc.) en la paleta de la app, no el azul del navegador */
.brand-link { color: var(--forest-600, #3c6b52); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.brand-link:active { opacity: .7; }
[data-theme="dark"] .brand-link { color: var(--brand, #9bc4a6); }

/* migas de pan estructurales sobre el título */
.screen-head .crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 3px; font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.screen-head .crumbs button { background: none; border: 0; padding: 2px 0; min-height: 0; font: inherit; font-weight: 760; color: var(--forest-600, #3c6b52); cursor: pointer; border-radius: 4px; }
.screen-head .crumbs button:active { opacity: .65; }
.screen-head .crumbs span { opacity: .55; }
.btnrow[style*="flex-wrap"] { align-items: flex-start; }
.btnrow[style*="flex-wrap"] .btn {
  flex: 0 0 auto; max-width: 100%;
  min-height: 36px; padding: 8px 14px;
  font-size: .87rem; line-height: 1.3;
  white-space: normal; text-align: left;
}
.btnrow[style*="flex-wrap"] .btn.primary { text-align: center; }
.convlist .list-row .conv-del { flex: none; min-height: 32px; min-width: 32px; padding: 4px 10px; }

.bar {
  height: 7px;
  background: color-mix(in srgb, var(--forest-800) 10%, var(--paper-deep));
  box-shadow: inset 0 1px 2px rgba(29, 42, 34, .06);
}

.bar > i { background: linear-gradient(90deg, var(--forest-600), var(--forest-900)); }
.bar.gold > i { background: linear-gradient(90deg, var(--sun-600), var(--sun-400)); }

.pill {
  padding: 4px 9px;
  border: 1px solid var(--hairline);
  background: var(--paper-deep);
  font-weight: 720;
}

.list-row {
  min-height: 57px;
  padding: 13px 4px;
  border-bottom-color: var(--hairline);
  transition: background .18s ease, padding .18s ease, border-radius .18s ease;
}

.list-row:hover {
  margin-left: -7px;
  margin-right: -7px;
  padding-left: 11px;
  padding-right: 11px;
  border-radius: 12px;
  background: var(--forest-100);
}

.list-row .title { font-weight: 690; letter-spacing: -.012em; }
.list-row .chev,
.chev { color: var(--forest-600); font-size: 1.18rem; }

input.search,
input.answer,
textarea.answer,
textarea,
select {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 88%, var(--paper));
  box-shadow: inset 0 1px 2px rgba(35, 50, 39, .04);
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
/* iOS hace zoom al enfocar un campo con letra < 16px; forzamos 16px en los
   controles que no lo fijan ya (evita el descuadre al abrir el formulario). */
textarea, textarea.answer, select, input.search { font-size: 16px; }

input.search:focus,
input.answer:focus,
textarea.answer:focus,
textarea:focus,
select:focus {
  outline: 0;
  border-color: var(--forest-600);
  background: var(--surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--forest-600) 13%, transparent);
}

/* ---------- home ---------- */

.home-hero {
  height: clamp(250px, 68vw, 330px);
  margin: -12px -20px 18px;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  isolation: isolate;
  box-shadow: 0 16px 38px rgba(29, 57, 40, .13);
}

.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(102deg, rgba(20, 45, 32, .03) 22%, transparent 58%),
    linear-gradient(to top, rgba(20, 45, 32, .28), transparent 44%);
  pointer-events: none;
}

.home-hero-art,
.home-hero-art svg,
.home-hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-hero-art svg,
.home-hero-art img { object-fit: cover; transform: scale(1.025); }

.home-hero .hero-text {
  top: 24px;
  right: 41%;
  left: 20px;
  z-index: 3;
  padding: 15px 16px 16px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 18px;
  background: rgba(249, 244, 232, .78);
  box-shadow: 0 10px 28px rgba(30, 52, 37, .08);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
}

[data-theme="dark"] .home-hero .hero-text { background: rgba(13, 24, 17, .88); border-color: rgba(255, 255, 255, .20); }
.home-hero .hero-text .eyebrow { color: var(--terra-700); }
.home-hero .hero-text h1 { margin-top: 5px; color: var(--forest-950); font-size: clamp(1.75rem, 8vw, 2.35rem); }
.home-hero .hero-text p { margin-top: 8px; color: var(--slate-800); font-size: .89rem; line-height: 1.36; }
.home-hero .hero-text p span { color: var(--ink-soft); font-size: .8rem; }

.home-hero .ari {
  right: 1%;
  bottom: -4px;
  z-index: 4;
  width: clamp(135px, 39vw, 182px);
  height: clamp(174px, 48vw, 224px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 15px 16px rgba(22, 44, 31, .3));
}

.hero-trail {
  position: absolute;
  z-index: 2;
  bottom: -54px;
  left: 23%;
  width: 32px;
  height: 190px;
  border-radius: 50%;
  border-left: 13px solid rgba(248, 241, 226, .92);
  transform: rotate(22deg);
  opacity: .78;
}
.home-hero .hero-trail { display: none; }

.home-goal { padding: 0; }
.home-goal .goal-main { padding: 19px 22px 15px; }
.home-goal .goal-week { padding: 13px 22px 17px; border-top: 1px solid var(--hairline); background: color-mix(in srgb, var(--forest-100) 48%, transparent); }
.home-goal .goal-streak { margin: 0; padding: 10px 22px 15px; }
.home-goal .goal-num { font-size: 2.05rem; line-height: 1; }
.home-goal .bar { max-width: 300px; height: 9px; }
.home-goal .row { align-items: center; }
.streak-lockup { display: flex; align-items: center; gap: 3px; flex: none; }
.streak-lockup .flame svg { width: 48px; height: 56px; }
.streak-lockup > span { display: flex; flex-direction: column; color: var(--terra-700); font-size: .72rem; font-weight: 800; line-height: 1.05; }
.streak-lockup small { color: var(--ink-soft); font-size: .57rem; font-weight: 600; }

.aste { gap: 4px; margin-top: 8px; }
.aste-d b { width: 30px; height: 30px; border-color: var(--hairline-strong); background: color-mix(in srgb, var(--surface) 72%, transparent); }
.aste-d.on b, .aste-d.on.today b { background: var(--brand); color: var(--on-accent, #fff); }
.aste-d.today b { box-shadow: 0 0 0 2px var(--sun-400), 0 4px 10px rgba(185, 133, 41, .18); }

.home-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.home-stats .stat {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 12px 10px;
  border-color: var(--hairline);
  border-radius: 16px;
  box-shadow: 0 5px 15px rgba(35, 50, 39, .04);
  text-align: left;
}

.home-stats .stat-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--forest-100);
  color: var(--forest-900);
}

.home-stats .stat-icon svg { width: 16px; height: 16px; }
.home-stats .n { font-size: 1.35rem; line-height: .95; white-space: nowrap; }
.home-stats .n small { font-family: var(--font-ui); font-size: .62rem; color: var(--ink-soft); }
.home-stats .l { margin-top: 4px; font-size: .63rem; line-height: 1.05; white-space: nowrap; }

.journey-card {
  min-height: 122px;
  padding: 0;
  isolation: isolate;
  background: var(--surface);
}

.journey-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  border-radius: inherit;
  background:
    linear-gradient(90deg, var(--surface) 0 46%, color-mix(in srgb, var(--surface) 88%, transparent) 61%, transparent 82%),
    var(--world-image) center right / cover no-repeat;
  clip-path: none;
  opacity: 1;
}

.journey-card::after { display: none; }

.journey-card-copy { position: relative; z-index: 2; width: 74%; padding: 20px; }
.journey-card .row { margin-top: 9px; }
.journey-card .level-badge { width: 43px; height: 43px; }
.journey-card .title { font-size: 1.08rem; font-weight: 760; }
.journey-card .chev { font-size: 1.4rem; }

.section-title { display: flex; align-items: flex-end; justify-content: space-between; margin: 27px 0 12px; }
.section-title h2 { margin: 3px 0 0; }
.section-flourish { width: 58px; opacity: .62; transform: rotate(-7deg); }
.section-flourish svg { display: block; width: 100%; height: auto; }

.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.feature-action {
  position: relative;
  display: grid;
  grid-template-columns: 39px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow-soft);
  transition: transform .22s var(--ease-spring), box-shadow .2s ease;
}

.feature-action::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -28px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--tone-soft, var(--forest-100));
  opacity: .64;
}

.feature-action:hover { box-shadow: var(--shadow-float); transform: translateY(-2px); }
.feature-action:active { transform: scale(.98); }
.feature-action > * { position: relative; z-index: 1; }
.feature-action .feature-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 13px; background: var(--tone-soft, var(--forest-100)); color: var(--tone, var(--forest-900)); }
.feature-action svg { width: 21px; height: 21px; }
.feature-action b,
.feature-action small { display: block; }
.feature-action b { font-size: .9rem; line-height: 1.16; }
.feature-action small { margin-top: 3px; color: var(--ink-soft); font-size: .68rem; }
.feature-action > i { color: var(--tone, var(--forest-900)); font-size: 1.2rem; font-style: normal; }

.device-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 17px;
  padding: 12px 14px;
  border: 1px dashed var(--hairline-strong);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface) 56%, transparent);
  color: var(--ink-soft);
  font-size: .78rem;
  line-height: 1.48;
}
.device-note > .ic { flex: none; margin-top: 2px; color: var(--forest-600); }
.device-note p { margin: 0; }

.tone-forest { --tone: var(--forest-900); --tone-soft: var(--forest-150); }
.tone-terra { --tone: var(--terra-700); --tone-soft: var(--terra-100); }
.tone-blue { --tone: var(--sea-800); --tone-soft: var(--sea-100); }
.tone-gold { --tone: var(--sun-600); --tone-soft: var(--sun-100); }
.tone-slate { --tone: var(--slate-800); --tone-soft: var(--slate-100); }

/* ---------- itinerario y mapa ---------- */

.level-stack { position: relative; display: grid; gap: 11px; }
.level-stack::before {
  content: "";
  position: absolute;
  top: 46px;
  bottom: 46px;
  left: 42px;
  z-index: 0;
  width: 2px;
  background: linear-gradient(var(--forest-600), var(--sea-600), var(--sun-400), var(--terra-500));
  opacity: .26;
}

.level-card {
  z-index: 1;
  min-height: 102px;
  margin: 0;
  padding: 16px;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface);
}

.level-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--surface) 0 57%, color-mix(in srgb, var(--surface) 91%, transparent) 71%, transparent 100%);
}
.level-card-art { position: absolute; inset: 0 0 0 auto; z-index: -2; width: 56%; height: 100%; object-fit: cover; }
.level-card .level-row { position: relative; z-index: 2; width: 88%; }

.level-card.level-a1,
.level-card.level-a2 { --tone: var(--forest-800); --tone-soft: var(--forest-150); }
.level-card.level-b1 { --tone: var(--sea-800); --tone-soft: var(--sea-100); }
.level-card.level-b2 { --tone: var(--sun-600); --tone-soft: var(--sun-100); }
.level-card.level-c1 { --tone: var(--terra-700); --tone-soft: var(--terra-100); }
.level-card.level-c2 { --tone: var(--slate-800); --tone-soft: var(--slate-100); }

.level-card .level-badge {
  position: relative;
  width: 54px;
  height: 54px;
  overflow: visible;
  border: 4px solid var(--surface);
  border-radius: 50%;
  background: var(--tone-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone) 20%, transparent), 0 5px 14px rgba(30, 50, 38, .08);
  color: var(--tone);
}

.level-card .level-badge i {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--tone);
  color: var(--on-accent);
  font-size: .58rem;
  font-style: normal;
}

.level-card .level-title { font-size: 1.02rem; font-weight: 760; }
.level-card .bar { max-width: 360px; }
.level-card .bar > i { background: var(--tone); }
.level-card .chev { color: var(--tone); }

.level-world-hero,
.level-intro-world {
  position: relative;
  min-height: 238px;
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  isolation: isolate;
}
.level-world-hero > img,
.level-intro-world > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.level-world-hero::after,
.level-intro-world::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(13, 30, 20, .9) 0, rgba(13, 30, 20, .18) 72%); }
.level-world-copy { position: absolute; right: 18px; bottom: 17px; left: 18px; display: flex; align-items: flex-end; gap: 13px; color: #fffaf0; }
.level-world-copy .world-level { display: grid; flex: none; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.48); border-radius: 17px; background: rgba(245,239,228,.18); font-weight: 850; backdrop-filter: blur(12px); }
.level-world-copy .eyebrow { color: #f3d58f; }
.level-world-copy h2 { margin: 2px 0 3px; color: #fffaf0; font-size: clamp(1.35rem, 5vw, 1.8rem); line-height: 1.08; }
.level-world-copy p { max-width: 560px; margin: 0; color: rgba(255,250,240,.86); font-size: .82rem; line-height: 1.35; }
.level-world-hero.compact { min-height: 178px; }
.level-world-hero.compact .level-world-copy p { display: none; }
.level-intro-world { min-height: 190px; }
.level-intro-world > div { position: absolute; right: 18px; bottom: 16px; left: 18px; color: #fffaf0; }
.level-intro-world .eyebrow { color: #f3d58f; }
.level-intro-world p { margin: 3px 0 0; font-family: var(--font-editorial); font-size: 1.2rem; }
.level-summit { position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--sun-400); }
.level-summit::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--world-image) center / cover no-repeat; opacity: .24; }
.level-summit::after { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--surface) 86%, transparent); }

/* ---------- Ari · tutor contextual ---------- */

.ari-guide {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: end;
  min-height: 126px;
  margin: 0 0 16px;
  padding: 8px 12px 10px 3px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--forest-600) 34%, var(--hairline));
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 4% 115%, color-mix(in srgb, var(--forest-150) 92%, transparent) 0 34%, transparent 35%),
    linear-gradient(130deg, color-mix(in srgb, var(--forest-100) 70%, var(--surface)), var(--surface) 72%);
  box-shadow: var(--shadow-soft);
  isolation: isolate;
}
.ari-guide::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -68px;
  z-index: -1;
  width: 150px;
  height: 124px;
  border: 18px solid color-mix(in srgb, var(--sun-400) 22%, transparent);
  border-radius: 50%;
  transform: rotate(-13deg);
}
.ari-guide-character { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; align-self: stretch; min-height: 112px; }
.ari-guide-character img { display: block; width: 94px; height: 116px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 10px 10px rgba(27, 52, 35, .24)); }
.ari-guide-copy {
  position: relative;
  z-index: 3;
  align-self: center;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: 17px;
  background: color-mix(in srgb, var(--surface-glass) 96%, transparent);
  box-shadow: 0 8px 24px rgba(28, 48, 35, .08);
  backdrop-filter: blur(14px);
}
.ari-guide-copy::before { content: ""; position: absolute; top: 48%; left: -8px; width: 14px; height: 14px; border-bottom: 1px solid var(--hairline-strong); border-left: 1px solid var(--hairline-strong); background: var(--surface); transform: translateY(-50%) rotate(45deg); }
.ari-guide-copy .eyebrow { color: var(--terra-700); font-size: .64rem; }
.ari-guide-copy h3 { margin: 3px 0 4px; font-family: var(--font-editorial); font-size: 1.06rem; line-height: 1.15; }
.ari-guide-copy p { margin: 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.42; }

/* ---------- hitos · el mundo se mueve, Ari permanece sereno ---------- */

.milestone-scene {
  --milestone-tone: var(--forest-800);
  --milestone-soft: var(--forest-100);
  position: relative;
  display: grid;
  grid-template-columns: minmax(158px, 42%) minmax(0, 1fr);
  align-items: center;
  min-height: 242px;
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--milestone-tone) 36%, var(--hairline));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 19% 50%, color-mix(in srgb, var(--milestone-soft) 96%, transparent) 0 21%, transparent 52%),
    linear-gradient(125deg, color-mix(in srgb, var(--milestone-soft) 72%, var(--surface)), var(--surface) 67%);
  box-shadow: var(--shadow-float);
  isolation: isolate;
}
.milestone-scene::before,
.milestone-scene::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.milestone-scene::before { right: -74px; top: -105px; width: 260px; height: 260px; border: 34px solid color-mix(in srgb, var(--milestone-tone) 8%, transparent); }
.milestone-scene::after { right: 17%; bottom: -80px; width: 180px; height: 130px; border: 1px solid color-mix(in srgb, var(--sun-400) 32%, transparent); transform: rotate(-12deg); }
.milestone-scene.is-path { --milestone-tone: var(--forest-800); --milestone-soft: var(--forest-150); }
.milestone-scene.is-crown { --milestone-tone: var(--sun-600); --milestone-soft: var(--sun-100); }
.milestone-scene.is-review { --milestone-tone: var(--sea-600); --milestone-soft: var(--sea-100); }
.milestone-visual { position: relative; display: grid; place-items: end center; align-self: stretch; min-height: 242px; }
.milestone-ari { position: relative; z-index: 4; display: block; width: min(176px, 92%); height: 218px; margin-bottom: -8px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 16px 15px rgba(26, 48, 33, .25)); }
.milestone-path { position: absolute; inset: 17px 0 0; z-index: 1; width: 100%; height: calc(100% - 17px); overflow: visible; opacity: .62; }
.milestone-path path { fill: none; stroke: var(--milestone-tone); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 360; stroke-dashoffset: 360; animation: milestone-draw 1.15s .12s cubic-bezier(.25,.8,.25,1) forwards; }
.milestone-ring { position: absolute; z-index: 0; top: 49%; left: 50%; width: 118px; height: 118px; border: 1px solid color-mix(in srgb, var(--milestone-tone) 48%, transparent); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.45); animation: milestone-ring 1.15s .08s cubic-bezier(.2,.8,.3,1) both; }
.milestone-ring.ring-two { width: 168px; height: 168px; border-color: color-mix(in srgb, var(--sun-400) 52%, transparent); animation-delay: .22s; }
.milestone-spark { --angle: calc(var(--i) * 36deg); position: absolute; z-index: 3; top: 48%; left: 50%; width: 7px; height: 15px; border-radius: 80% 8% 80% 8%; background: var(--milestone-tone); opacity: 0; transform-origin: 50% 50%; animation: milestone-spark 1.05s calc(.16s + var(--i) * .035s) cubic-bezier(.12,.72,.2,1) both; }
.milestone-spark:nth-of-type(3n) { background: var(--sun-400); }
.milestone-spark:nth-of-type(4n) { background: var(--terra-500); }
.milestone-seal { position: absolute; right: 10px; bottom: 17px; z-index: 5; display: grid; place-items: center; width: 47px; height: 47px; border: 3px solid var(--surface); border-radius: 50%; background: var(--milestone-tone); color: var(--on-accent); box-shadow: 0 8px 20px color-mix(in srgb, var(--milestone-tone) 33%, transparent); transform: scale(0) rotate(-18deg); animation: milestone-seal .58s .7s var(--ease-spring) forwards; }
.milestone-seal .ic { width: 23px; height: 23px; }
.milestone-copy { position: relative; z-index: 5; min-width: 0; padding: 28px 27px 28px 10px; }
.milestone-copy .eyebrow { color: var(--milestone-tone); }
.milestone-copy h2 { max-width: 390px; margin: 7px 0 10px; font-family: var(--font-editorial); font-size: clamp(1.45rem, 5.4vw, 2rem); line-height: 1.08; letter-spacing: -.025em; }
.milestone-copy p { max-width: 430px; margin: 11px 0 0; color: var(--ink-soft); font-size: .84rem; line-height: 1.48; }
.milestone-metric { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 11px; border: 1px solid color-mix(in srgb, var(--milestone-tone) 30%, var(--hairline)); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface) 76%, transparent); color: var(--milestone-tone); font-size: .74rem; font-weight: 850; letter-spacing: .02em; box-shadow: 0 5px 15px rgba(26, 48, 33, .07); }
.summit-story summary { cursor: pointer; color: var(--forest-900); list-style-position: outside; }
.summit-story[open] summary { margin-bottom: 12px; }
.summit-story p { margin-bottom: 0; line-height: 1.58; }

@keyframes milestone-draw { to { stroke-dashoffset: 0; } }
@keyframes milestone-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.42); }
  38% { opacity: .8; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}
@keyframes milestone-spark {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-35px) scale(.2); }
  28% { opacity: .95; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-101px) rotate(155deg) scale(.9); }
}
@keyframes milestone-seal { to { transform: scale(1) rotate(0); } }

.level-unit-list { overflow: hidden; padding: 0; }
.level-list-summary { display: grid; grid-template-columns: auto minmax(120px, 1fr); align-items: end; gap: 16px; padding: 16px 17px; border-bottom: 1px solid var(--hairline); background: linear-gradient(110deg, var(--forest-100), color-mix(in srgb, var(--surface) 88%, var(--sun-100))); }
.level-list-summary > div:first-child { display: grid; gap: 3px; }
.level-list-summary .eyebrow { color: var(--forest-700); font-size: .62rem; }
.level-list-summary b { font-family: var(--font-editorial); font-size: 1rem; }
.level-list-summary .bar { margin-bottom: 5px; }
.unit-list-row { position: relative; min-height: 72px; margin: 0; padding: 12px 14px; border-radius: 0; }
.unit-list-row.current { min-height: 90px; background: linear-gradient(100deg, color-mix(in srgb, var(--forest-100) 86%, var(--surface)), var(--surface)); box-shadow: inset 3px 0 var(--terra-500); }
.unit-list-row .title { padding-right: 2px; }
.unit-current-hint { margin-top: 5px; color: var(--terra-700); font-size: .66rem; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }
.unit-list-ari { width: 58px; height: 68px; margin: -4px -4px -6px 2px; border: 0; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 7px 8px rgba(27, 52, 35, .2)); pointer-events: none; }

/* ---------- hub de entrenamiento ---------- */

.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.tool-card {
  min-height: 168px;
  margin: 0;
  padding: 17px;
  background:
    radial-gradient(circle at 115% -12%, var(--tone-soft) 0 42%, transparent 43%),
    var(--surface);
}
.tool-card .tool-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.tool-card .tool-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--tone-soft); color: var(--tone); }
.tool-card .tool-icon svg { width: 25px; height: 25px; }
.tool-arrow { color: var(--tone); font-size: 1rem; font-weight: 800; }
.tool-card .eyebrow { color: var(--tone); }
.tool-card .title { margin-top: 5px; font-size: 1.08rem; font-weight: 780; }
.tool-card .sub { margin-top: 3px; line-height: 1.3; }

/* ---------- hablar / leer ---------- */

.speak-hero.immersive {
  height: 285px;
  margin: 0 0 17px;
  border: 1px solid color-mix(in srgb, var(--sea-600) 45%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 42px rgba(27, 79, 113, .22);
}

.speak-hero.immersive > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(1.35); }
.speak-hero.immersive::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 61, 89, .84), rgba(14, 61, 89, .18) 65%); }
.speak-hero-copy { position: absolute; top: 28px; left: 24px; z-index: 3; width: 57%; color: #f5efe4; }
.speak-hero-copy .eyebrow { color: #b8dcee; }
.speak-hero-copy h2 { margin: 8px 0; color: #fffaf0; font-size: clamp(1.75rem, 7vw, 2.25rem); line-height: 1.03; }
.speak-hero-copy p { color: rgba(255, 250, 240, .8); font-size: .83rem; }
.speak-hero.immersive > img { position: absolute; right: -2px; bottom: -7px; z-index: 4; width: 154px; height: 190px; border: 0; border-radius: 0; background: transparent; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 13px 15px rgba(6, 41, 64, .38)); }
.sound-orbit { position: absolute; left: 24px; bottom: 24px; z-index: 4; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, .46); border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; box-shadow: 0 0 0 8px rgba(255, 255, 255, .07), 0 0 0 16px rgba(255, 255, 255, .035); backdrop-filter: blur(8px); }
.sound-orbit svg { width: 26px; height: 26px; }
.inline-key { display: inline-flex; align-items: center; gap: 4px; color: var(--sun-600); font-weight: 700; white-space: nowrap; }

.idea-card { border-color: color-mix(in srgb, var(--sun-400) 42%, var(--hairline)); background: linear-gradient(135deg, var(--surface), var(--sun-100)); }
.idea-card .tool-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--sun-100); color: var(--sun-600); }
.content-group { padding-top: 15px; }
.group-head { display: flex; align-items: center; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--hairline); }
.group-head .level-badge { width: 43px; height: 43px; border-radius: 13px; }
.group-head h3 { margin-bottom: 2px; font-family: var(--font-editorial); font-size: 1.05rem; }
.speaking-group .list-row .small .ic { color: var(--sun-600); }
.reading-lead { padding: 16px 18px; border-left: 3px solid var(--forest-600); border-radius: 0 16px 16px 0; background: linear-gradient(90deg, var(--forest-100), transparent); }
.reading-group .unit-num .ic svg { width: 16px; height: 16px; }
.reading-text { font-family: var(--font-editorial); font-size: 1.13rem; line-height: 1.92; }
.reading-text p + p::before { content: "❧"; display: block; margin: 16px 0 9px; color: var(--terra-500); font-size: .9rem; text-align: center; }
.reading-text .w { border-bottom-color: var(--sun-600); text-decoration: none; }

/* ---------- Más ---------- */

.more-brand {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  gap: 10px;
  margin: -2px 0 21px;
  padding: 17px 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 6% 50%, color-mix(in srgb, var(--forest-150) 74%, transparent), transparent 36%),
    linear-gradient(115deg, var(--surface), color-mix(in srgb, var(--paper) 88%, var(--forest-100)));
}
.more-brand-lockup { min-width: 0; }
.more-brand-lockup .brand-lockup { width: 100%; max-width: 520px; margin: 0; filter: drop-shadow(0 7px 12px rgba(29, 54, 38, .1)); }
.more-brand p { max-width: 390px; margin: 0; color: var(--ink-soft); font-family: var(--font-editorial); font-size: clamp(.92rem, 2.2vw, 1.08rem); line-height: 1.45; }
/* las cuatro palabras del logo original, en la tipografía del lockup */
.more-brand .brand-tagline {
  font-family: inherit; text-transform: uppercase; letter-spacing: .13em;
  font-size: clamp(.62rem, 1.7vw, .74rem); font-weight: 700; color: #24443a;
  text-align: center;
}
.more-brand .brand-tagline i { font-style: normal; color: #c4552b; margin: 0 .1em; }
[data-theme="dark"] .more-brand .brand-tagline { color: #24443a; }
.more-head { margin: 16px 2px 10px; }
.more-head .small.sub { margin: 3px 0 0; }
[data-theme="dark"] .more-brand { border-color: rgba(36, 74, 56, .22); background: #f5efe4; }
[data-theme="dark"] .more-brand p { color: #5d655f; }
.more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.more-card { min-height: 160px; margin: 0; padding: 17px; background: linear-gradient(145deg, var(--surface) 62%, var(--tone-soft) 140%); }
.more-card .more-icon { display: grid; place-items: center; width: 43px; height: 43px; margin-bottom: 17px; border-radius: 14px; background: var(--tone-soft); color: var(--tone); }
.more-card .more-icon svg { width: 23px; height: 23px; }
.more-card .eyebrow { color: var(--tone); }
.more-card .title { margin-top: 4px; font-size: 1.05rem; font-weight: 770; }
.more-card .sub { margin-top: 3px; line-height: 1.25; }
.more-arrow { position: absolute; top: 18px; right: 18px; color: var(--tone); font-size: .92rem; font-weight: 800; }
.more-card:last-child { grid-column: 1 / -1; min-height: 126px; }

.xp-chart { display: block; width: 100%; height: auto; color: var(--forest-900); }

/* ---------- onboarding ---------- */

.onboarding {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(210px, 36vh) auto;
  min-height: min(690px, calc(100svh - 110px));
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background:
    radial-gradient(circle at 80% 8%, color-mix(in srgb, var(--sun-400) 18%, transparent), transparent 32%),
    linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--paper) 80%, var(--forest-100)));
  box-shadow: var(--shadow-float);
}

.onboarding-brand { display: flex; align-items: center; gap: 10px; z-index: 3; padding: 18px 20px 0; color: var(--forest-950); font-size: .85rem; font-weight: 850; letter-spacing: .16em; }
.onboarding-brand svg,
.onboarding-brand img { width: 36px; height: 36px; filter: drop-shadow(0 4px 8px rgba(26, 48, 34, .12)); }
.onboarding-art { position: relative; z-index: 1; display: grid; place-items: center; min-height: 220px; overflow: hidden; }
.onboarding-art .empty-ari { position: relative; z-index: 3; padding: 0; }
.empty-ari img { height: auto; }
.onboarding-art .empty-ari img { width: clamp(154px, 45vw, 220px); height: min(230px, 33vh); border-radius: 0; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(26, 48, 34, .22)); }
.onboarding-hill { position: absolute; right: -8%; bottom: -54%; left: -8%; height: 88%; border-radius: 50% 50% 0 0; background: var(--forest-150); }
.onboarding-hill::before,
.onboarding-hill::after { content: ""; position: absolute; border-radius: 50% 50% 0 0; }
.onboarding-hill::before { right: 38%; bottom: 22%; width: 72%; height: 72%; background: color-mix(in srgb, var(--forest-600) 42%, var(--forest-150)); transform: rotate(7deg); }
.onboarding-hill::after { right: -12%; bottom: 12%; width: 68%; height: 58%; background: color-mix(in srgb, var(--sea-600) 28%, var(--forest-150)); transform: rotate(-7deg); }
.onboarding-copy { position: relative; z-index: 4; min-width: 0; padding: 25px 24px 27px; border-top: 1px solid rgba(255, 255, 255, .42); background: var(--surface-glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.onboarding-copy h1 { margin: 7px 0 12px; font-size: clamp(1.8rem, 8vw, 2.45rem); }
.onboarding-body { max-width: 100%; overflow-wrap: anywhere; color: var(--ink-soft); font-size: .94rem; line-height: 1.58; }
.onboarding-body b { color: var(--ink); }
.onboarding-steps { display: flex; gap: 7px; margin-top: 20px; }
.onboarding-steps i { width: 7px; height: 7px; border-radius: 99px; background: var(--hairline-strong); transition: width .24s ease, background .24s ease; }
.onboarding-steps i.on { width: 26px; background: var(--terra-500); }
.onboarding-steps i.done { background: var(--forest-600); }
.onboarding-actions { display: flex; gap: 10px; width: min(100%, 560px); margin: 17px auto 0; }
.onboarding-actions .grow { flex: 1; }
.onboarding-actions .btn { white-space: nowrap; }

/* ---------- ejercicios, repaso y contenido largo ---------- */

.srs-card { padding: clamp(22px, 7vw, 34px); }
.srs-card .empty-ari img { width: clamp(138px, 38vw, 175px); max-height: 172px; }
.srs-word { font-size: clamp(1.9rem, 8vw, 2.65rem); letter-spacing: -.035em; }
.srs-sub { margin-top: 9px; }
.srs-answer { margin-top: 24px; padding-top: 24px; }
.review-manage-entry { border-color: color-mix(in srgb, var(--forest-600) 25%, var(--hairline)); }
.review-manage-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--forest-100); color: var(--forest-700); }
.review-manage-icon svg { width: 23px; height: 23px; }
.review-library-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 18px; }
.review-library-summary > div { display: grid; gap: 2px; min-width: 0; padding: 13px 8px; border: 1px solid var(--hairline); border-radius: 15px; background: var(--surface); text-align: center; box-shadow: var(--shadow-soft); }
.review-library-summary b { font-family: var(--font-editorial); color: var(--forest-700); font-size: 1.35rem; line-height: 1; }
.review-library-summary span { color: var(--ink-soft); font-size: .62rem; line-height: 1.25; }
.review-level-title { display: flex; align-items: center; gap: 10px; margin: 22px 2px 9px; }
.review-level-title .level-badge { width: 42px; height: 42px; flex: none; font-size: .78rem; }
.review-level-title > div { display: grid; gap: 2px; }
.review-level-title > div > b { font-family: var(--font-editorial); font-size: .95rem; }
.review-level-title > div > span { color: var(--ink-soft); font-size: .68rem; }
.review-source-list { overflow: hidden; padding: 0; }
.review-source-row { display: flex; align-items: center; gap: 10px; min-height: 74px; padding: 11px 13px; border-bottom: 1px solid var(--hairline); }
.review-source-row:last-child { border-bottom: 0; }
.review-source-row .btn { min-width: 70px; padding: 8px 11px; }
.review-library-note { margin: 18px 5px 0; padding-left: 11px; border-left: 2px solid var(--forest-300); line-height: 1.5; }
.grade-row { gap: 7px; }
.grade-row .btn { min-height: 61px; border-radius: 15px; box-shadow: 0 5px 12px rgba(25, 40, 31, .08); }

.ex-prompt { font-family: var(--font-editorial); font-size: clamp(1.35rem, 5vw, 1.72rem); line-height: 1.3; }
.choices { gap: 9px; }
.choices .btn { min-height: 54px; padding: 13px 16px; border-color: var(--hairline-strong); border-radius: 15px; background: var(--surface); }
.choices .btn:hover { border-color: var(--forest-600); background: var(--forest-100); }
.feedback { border-radius: 16px; }
.feedback.ari-feedback { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 7px; min-height: 82px; padding: 8px 13px 8px 6px; overflow: hidden; }
.ari-feedback > img { display: block; width: 62px; height: 70px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 7px 7px rgba(25, 48, 33, .2)); }
.ari-feedback-copy { min-width: 0; }
.ari-feedback-copy > b { display: block; margin-bottom: 3px; font-size: .63rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.ari-feedback-copy > div { color: var(--ink); font-size: .88rem; line-height: 1.42; }
.ari-feedback.bad .ari-feedback-copy > div { color: var(--ink); }
/* escuchar + regenerar lado a lado: el ↻ ya no pisa el botón principal */
.audio-control { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; vertical-align: middle; }
.audio-control .audio-btn { position: static; }
/* centrado óptico real: el svg deja de alinearse a la línea base del texto */
.audio-btn { display: grid; place-items: center; padding: 0; }
.audio-btn svg { width: 21px; height: 21px; display: block; }
.audio-btn .ic-play { transform: translateX(1.5px); } /* el triángulo pide medio paso a la derecha */
/* «generando»: ecualizador de 3 barras — se lee como sonido en camino */
.audio-wait { display: inline-flex; align-items: center; justify-content: center; gap: 2.5px; height: 18px; }
.audio-wait i {
  display: block; width: 3px; height: 7px; border-radius: 2px;
  background: currentColor;
  animation: audio-eq .85s ease-in-out infinite;
}
.audio-wait i:nth-child(2) { animation-delay: .14s; }
.audio-wait i:nth-child(3) { animation-delay: .28s; }
@keyframes audio-eq { 0%, 100% { height: 7px; } 50% { height: 16px; } }
.audio-regenerate {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--forest-700);
  box-shadow: 0 5px 12px rgba(26, 48, 34, .13);
  cursor: pointer;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.audio-regenerate[hidden] { display: none; }
.audio-regenerate svg { width: 15px; height: 15px; }
.audio-regenerate:hover { background: var(--forest-100); color: var(--forest-950); transform: rotate(-18deg); }
.audio-regenerate:disabled { opacity: .48; cursor: wait; }
.audio-control.just-regenerated .audio-regenerate { animation: audio-renew .58s ease; }
.audio-text-regenerate {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--forest-700);
  box-shadow: 0 4px 10px rgba(26, 48, 34, .1);
  vertical-align: middle;
  cursor: pointer;
}
.audio-text-regenerate svg { width: 16px; height: 16px; }
.audio-text-regenerate:hover { background: var(--forest-100); }
.audio-text-regenerate:disabled { opacity: .48; cursor: wait; }
.audio-text-control-block { position: relative; }
.audio-text-control-block .btn.block { padding-right: 54px; }
.audio-text-control-block .btn.block + .audio-text-regenerate { position: absolute; top: 50%; right: 8px; margin: 0; transform: translateY(-50%); }
.audio-btn.audio-error { background: color-mix(in srgb, var(--terra-100) 82%, var(--surface)); color: var(--terra-700); animation: audio-nudge .32s ease 2; }
@keyframes audio-nudge { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(-3px); } 70% { transform: translateX(3px); } }
@keyframes audio-spin { to { transform: rotate(360deg); } }
@keyframes audio-renew { 0% { transform: rotate(0) scale(.9); } 65% { transform: rotate(-300deg) scale(1.12); } 100% { transform: rotate(-360deg) scale(1); } }
.xp-chip { padding: 4px 10px; }

.lesson-body { font-size: 1rem; line-height: 1.72; }
.lesson-body h3 { margin-top: 30px; font-family: var(--font-editorial); font-size: 1.22rem; }
.lesson-body .ej,
.lesson-body .ojo,
.lesson-body .ancla { padding: 13px 15px; border-radius: 4px 14px 14px 4px; }
.lesson-body table { overflow: hidden; border-radius: 13px; }
.lesson-body th,
.lesson-body td { border-color: var(--hairline); padding: 9px 10px; }

.statgrid { gap: 10px; }
.stat {
  border-color: var(--hairline);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.stat .n { color: var(--forest-900); font-weight: 650; }
.stat .l { margin-top: 3px; }

.profila-head {
  background:
    radial-gradient(circle at 95% 5%, var(--sun-100), transparent 36%),
    linear-gradient(145deg, var(--surface), var(--forest-100));
}
.profila-ari { width: 76px; height: 88px; border: 0; border-radius: 0; background: transparent; object-fit: contain; box-shadow: none; filter: drop-shadow(0 9px 10px rgba(27, 52, 35, .22)); }
.profila-ari-says { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 8px; margin: 10px 0 2px 76px; padding: 9px 11px; border: 1px solid var(--hairline); border-radius: 13px; background: color-mix(in srgb, var(--surface) 84%, transparent); color: var(--ink-soft); font-size: .75rem; line-height: 1.38; }
.profila-ari-says::before { content: ""; position: absolute; top: -6px; left: 14px; width: 11px; height: 11px; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); background: var(--surface); transform: rotate(45deg); }
.profila-ari-says b { color: var(--terra-700); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }

.empty-ari img,
.ari-img { border-radius: 0; background: transparent; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(27, 52, 35, .17)); }
.brand-symbol { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-lockup-wrap { padding: 12px 0 24px; }
.brand-lockup { display: block; width: min(100%, 520px); height: auto; margin: 0 auto; }
[data-theme="dark"] .brand-lockup-wrap { margin-bottom: 20px; padding: 16px 18px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); background: #f5efe4; box-shadow: var(--shadow-soft); }
[data-theme="dark"] .more-symbol .brand-symbol,
[data-theme="dark"] .onboarding-brand .brand-symbol { box-sizing: border-box; padding: 4px; border-radius: 13px; background: #f5efe4; }

[data-theme="dark"] input.search,
[data-theme="dark"] input.answer,
[data-theme="dark"] textarea.answer,
[data-theme="dark"] textarea,
[data-theme="dark"] select { border-color: var(--control-border); background: var(--surface-raised); }
[data-theme="dark"] .card.tappable:hover,
[data-theme="dark"] .list-row:hover,
[data-theme="dark"] .choices .btn:hover { background: var(--surface-hover); }
[data-theme="dark"] .level-list-summary { background: linear-gradient(110deg, var(--forest-100), var(--surface-raised)); }
[data-theme="dark"] .home-hero::after { background: linear-gradient(102deg, rgba(8, 19, 12, .14) 18%, transparent 62%), linear-gradient(to top, rgba(8, 19, 12, .46), rgba(8, 19, 12, .08) 70%); }
.btn.danger,
.grade-row .g-again,
.grade-row .g-hard { color: var(--on-accent); }
.dominak { gap: 16px 9px; }
.domina { transition: transform .2s var(--ease-spring); }
.domina:not(.off):hover { transform: translateY(-3px) scale(1.03); }
.domina svg { filter: drop-shadow(0 6px 8px rgba(30, 48, 37, .12)); }
.heat { gap: 4px; }
.heat i { width: 12px; height: 12px; border-radius: 4px; }

.gloss-pop,
.toast {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(12px);
}

/* ---------- caja de herramientas flotante (speed-dial) ---------- */
#fabwrap {
  position: fixed; z-index: 45;
  right: max(16px, calc((100vw - var(--page-max)) / 2 - 66px));
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 17px);
}
#fabwrap[hidden] { display: none; }
#fabscrim {
  position: fixed; inset: 0; z-index: -1;
  background: rgba(18, 32, 24, 0); transition: background .2s ease;
}
#fabscrim.open { background: rgba(18, 32, 24, .28); }
#fabmain {
  position: relative; z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .25);
  background: linear-gradient(145deg, var(--forest-800), var(--forest-950));
  color: #fff;
  box-shadow: 0 11px 28px rgba(20, 43, 29, .27), inset 0 1px rgba(255, 255, 255, .15);
  cursor: pointer;
  transition: transform .24s var(--ease-spring), box-shadow .22s ease, background .25s ease;
}
#fabmain svg { width: 26px; height: 26px; display: block; }
#fabmain:active { transform: scale(.92); }
#fabmain.open { transform: rotate(90deg); }
#fabwrap.dict-active #fabmain {
  background: linear-gradient(145deg, var(--sun-500, #d19a2e), var(--sun-600, #b9822c));
  box-shadow: 0 11px 28px rgba(185, 130, 41, .38), inset 0 1px rgba(255, 255, 255, .22);
}
#fabmenu {
  position: absolute; right: 2px; bottom: 62px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
#fabmenu[hidden] { display: none; }
.fab-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0; border: none; background: none; cursor: pointer;
  opacity: 0; transform: translateY(10px) scale(.9);
  transition: opacity .2s ease, transform .2s var(--ease-spring);
}
#fabmenu.open .fab-item { opacity: 1; transform: none; }
#fabmenu.open .fab-item:nth-child(2) { transition-delay: .05s; }
.fab-lbl {
  background: var(--surface); color: var(--ink);
  padding: 7px 13px; border-radius: var(--radius-pill);
  font-size: .82rem; font-weight: 720; white-space: nowrap;
  box-shadow: var(--shadow-float); border: 1px solid var(--hairline);
}
.fab-ic {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--forest-700, #3c6b52);
  box-shadow: var(--shadow-float); border: 1px solid var(--hairline);
}
.fab-ic svg { width: 22px; height: 22px; }
.fab-item.active .fab-ic { background: var(--sun-100, #f3e4c2); color: var(--sun-700, #9a6c1a); border-color: var(--sun-300, #e0c07a); }
.fab-item.active .fab-lbl { background: var(--sun-100, #f3e4c2); color: var(--sun-800, #7a5514); border-color: var(--sun-300, #e0c07a); }

/* pista y tarjeta del modo diccionario */
.dict-hint {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 80px);
  z-index: 60; display: inline-flex; align-items: center; gap: 7px;
  background: var(--forest-900, #16281c); color: #f4eede;
  padding: 9px 16px; border-radius: var(--radius-pill); font-size: .84rem; font-weight: 700;
  box-shadow: var(--shadow-float); transition: opacity .6s ease;
}
.dict-hint svg { width: 18px; height: 18px; }
.dict-hint.fade { opacity: 0; }
body.dict-on #screen { cursor: help; }
body.dict-on #screen p, body.dict-on #screen li, body.dict-on #screen .eu, body.dict-on #screen td, body.dict-on #screen .ej { cursor: help; }
.word-card {
  position: fixed; z-index: 62; max-width: min(300px, 88vw);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline-strong); border-radius: 14px;
  padding: 11px 14px; box-shadow: var(--shadow-float);
  opacity: 0; transform: translateY(6px) scale(.96);
  transition: opacity .18s ease, transform .18s var(--ease-spring);
}
.word-card.in { opacity: 1; transform: none; }
.word-card .wc-eu { font-size: 1.05rem; }
.word-card .wc-lemma { font-size: .68rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.word-card .wc-es { margin-top: 2px; color: var(--forest-700, #3c6b52); font-weight: 640; }
.word-card .wc-es.sub { color: var(--ink-soft); font-weight: 400; font-size: .84rem; }
.word-card .wc-ex { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hairline); font-size: .8rem; color: var(--ink-soft); font-style: italic; }
.word-card .wc-ai { margin-top: 8px; }
.word-card { padding-right: 40px; } /* hueco para el botón de escuchar */
.wc-say {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hairline);
  background: var(--paper-deep, #efe7d5); color: var(--forest-700, #3c6b52);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.wc-say svg { width: 16px; height: 16px; }
.gloss-say {
  border: none; background: rgba(255, 255, 255, .18); color: inherit;
  border-radius: 6px; padding: 2px 6px; margin-left: 6px; cursor: pointer; vertical-align: middle;
}
.gloss-say svg { width: 15px; height: 15px; display: block; }

/* barra de acciones sobre la selección (fallo · profundizar · corregir) */
.sel-bar {
  position: fixed; z-index: 63; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  padding: 5px; border-radius: 18px;
  max-width: calc(100vw - 16px);
  background: var(--forest-900, #16281c);
  box-shadow: 0 10px 26px rgba(20, 43, 29, .38);
  animation: deepenIn .2s var(--ease-spring) both;
}
.sel-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; border: none; border-radius: var(--radius-pill);
  background: transparent; color: #f4eede; font-weight: 720; font-size: .82rem; white-space: nowrap; cursor: pointer;
}
.sel-btn svg { width: 15px; height: 15px; }
.sel-btn:active { background: rgba(255, 255, 255, .12); }
.sel-btn.fix { color: var(--sun-300, #e0c07a); }
.sel-btn.drill { color: #9ed7b4; }
.sel-btn.flag { color: #f0b6a6; }
@keyframes deepenIn { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }
.deepen-overlay {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  background: rgba(18, 32, 24, .4); padding: 24px;
}
.deepen-card {
  background: var(--surface); border-radius: 16px; padding: 20px 22px;
  box-shadow: var(--shadow-float); max-width: 340px; text-align: center;
}

/* ---------- responsive ---------- */

@media (max-width: 430px) {
  #screen { padding-right: 16px; padding-left: 16px; }
  .ari-guide { grid-template-columns: 78px minmax(0, 1fr); min-height: 116px; padding: 7px 9px 8px 2px; }
  .ari-guide-character { min-height: 102px; }
  .ari-guide-character img { width: 80px; height: 104px; }
  .ari-guide-copy { padding: 12px 13px; }
  .ari-guide-copy h3 { font-size: .98rem; }
  .ari-guide-copy p { font-size: .75rem; }
  .milestone-scene { grid-template-columns: 132px minmax(0, 1fr); min-height: 218px; border-radius: 24px; }
  .milestone-visual { min-height: 218px; }
  .milestone-ari { width: 138px; height: 193px; margin-left: -7px; }
  .milestone-copy { padding: 22px 16px 22px 2px; }
  .milestone-copy h2 { margin-top: 5px; font-size: 1.34rem; }
  .milestone-copy p { margin-top: 9px; font-size: .75rem; }
  .milestone-metric { min-height: 29px; padding: 4px 8px; font-size: .66rem; }
  .milestone-seal { right: 2px; bottom: 14px; width: 40px; height: 40px; }
  .home-hero { margin-right: -16px; margin-left: -16px; }
  .home-hero .hero-text { right: 37%; left: 15px; padding: 13px 14px; }
  .home-hero .hero-text h1 { font-size: 1.78rem; }
  .home-hero .ari { right: -1%; }
  .home-stats { gap: 6px; }
  .home-stats .stat { flex-direction: column; align-items: flex-start; gap: 5px; padding: 10px 8px; }
  .home-stats .stat-icon { width: 27px; height: 27px; }
  .home-stats .l { white-space: normal; }
  .journey-card-copy { width: 78%; padding: 17px; }
  .feature-action { grid-template-columns: 36px 1fr auto; gap: 8px; padding: 10px; }
  .feature-action .feature-icon { width: 36px; height: 36px; }
  .feature-action b { font-size: .82rem; }
  .tool-card,
  .more-card { min-height: 153px; padding: 15px; }
  .tool-card .tool-top { margin-bottom: 15px; }
  .tool-card .title,
  .more-card .title { font-size: .98rem; }
  .more-brand { grid-template-columns: 1fr; gap: 7px; padding: 15px 17px 17px; }
  .more-brand-lockup .brand-lockup { max-width: 330px; }
  .more-brand p { max-width: 300px; padding-left: 5px; font-size: .88rem; }
  .more-brand .brand-tagline { max-width: none; padding-left: 0; white-space: nowrap; font-size: clamp(.5rem, 2.55vw, .68rem); letter-spacing: .1em; }
  .speak-hero.immersive > img { right: -18px; width: 142px; height: 174px; }
  .speak-hero-copy { left: 20px; width: 60%; }
  .onboarding-actions { gap: 8px; }
  .onboarding-actions .btn { padding-right: 15px; padding-left: 15px; }
}

@media (max-width: 350px) {
  .feature-grid,
  .tool-grid,
  .more-grid { grid-template-columns: 1fr; }
  .tool-card,
  .more-card { min-height: 132px; }
  .home-hero .hero-text { right: 31%; }
  .ari-guide { grid-template-columns: 70px minmax(0, 1fr); }
  .ari-guide-character img { width: 72px; height: 96px; }
  .ari-guide-copy { padding: 10px 11px; }
  .ari-guide-copy p { font-size: .71rem; }
  .milestone-scene { grid-template-columns: 112px minmax(0, 1fr); }
  .milestone-ari { width: 117px; height: 180px; }
  .milestone-copy { padding-right: 12px; }
  .milestone-copy h2 { font-size: 1.18rem; }
  nav.tabbar button { font-size: .54rem; }
  .grade-row { display: grid; grid-template-columns: 1fr 1fr; }
  .onboarding-actions { flex-direction: column; }
}

@media (min-width: 760px) {
  #screen { padding-top: 34px; }
  body[data-view="home"] #screen { padding-top: 20px; }
  .home-hero { margin-right: 0; margin-left: 0; border-radius: var(--radius-xl); }
  .home-hero .hero-text { left: 28px; }
  .level-stack { grid-template-columns: 1fr 1fr; }
  .level-stack::before { display: none; }
  .tool-grid,
  .more-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
  .feature-action { grid-template-columns: 39px 1fr; }
  .feature-action > i { display: none; }
  .onboarding { grid-template-columns: 1.15fr .85fr; grid-template-rows: auto 1fr; min-height: 660px; border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
  .onboarding-brand { grid-column: 1 / -1; }
  .onboarding-art { min-height: 560px; }
  .onboarding-art .empty-ari img { width: 245px; }
  .onboarding-copy { display: flex; flex-direction: column; justify-content: center; padding: 48px 42px; border-top: 0; border-left: 1px solid var(--hairline); }
  .onboarding-actions { position: relative; z-index: 2; margin-top: -76px; margin-right: 24px; justify-content: flex-end; }
}

@media (min-width: 1100px) {
  :root { --page-max: 800px; }
  nav.tabbar { width: 760px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #screen.view-enter > *,
  #screen.view-back > * { animation: none !important; }
  .flame.big svg { animation: none !important; }
  .milestone-path path { animation: none !important; stroke-dashoffset: 0; }
  .milestone-ring,
  .milestone-spark { display: none; }
  .milestone-seal { animation: none !important; transform: none; }
}

@media (prefers-contrast: more) {
  :root { --hairline: rgba(30, 42, 34, .28); --hairline-strong: rgba(30, 42, 34, .46); }
  [data-theme="dark"] { --hairline: rgba(255, 255, 255, .25); --hairline-strong: rgba(255, 255, 255, .42); }
  .sub,
  .small { color: var(--ink); }
}

/* selector de nivel de trabajo: «Automático» a lo ancho, niveles en rejilla */
.lvlrow { flex-wrap: wrap; gap: 8px; }
.lvlrow .btn { flex: 1 1 calc(33.33% - 8px); min-width: 0; }
.lvlrow .btn:first-child { flex: 1 1 100%; }

/* diagnóstico de memoria */
.diag-bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--hairline); margin: 4px 0 10px; }
.diag-bar i { display: block; height: 100%; }
.diag-bar i.c { background: var(--brand, #2e6f4e); }
.diag-bar i.y { background: var(--sun-400, #d7ab54); }
.diag-bar i.l { background: var(--terra-400, #d98b5f); }
.diag-bar i.n { background: color-mix(in srgb, var(--ink-soft) 35%, transparent); }
.diag-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--ink-soft); }
.diag-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 3px; }
.diag-legend i.c { background: var(--brand, #2e6f4e); }
.diag-legend i.y { background: var(--sun-400, #d7ab54); }
.diag-legend i.l { background: var(--terra-400, #d98b5f); }
.diag-legend i.n { background: color-mix(in srgb, var(--ink-soft) 35%, transparent); }

/* etiquetas de estado en el detalle del diagnóstico */
.diag-tag { flex: none; font-size: .68rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.diag-tag.c { background: color-mix(in srgb, var(--brand, #2e6f4e) 20%, transparent); color: var(--brand, #2e6f4e); }
.diag-tag.y { background: color-mix(in srgb, var(--sun-500, #c99a3a) 22%, transparent); color: var(--sun-700, #9a6c1a); }
.diag-tag.l { background: color-mix(in srgb, var(--terra-400, #d98b5f) 22%, transparent); color: var(--terra-600, #b05f33); }
.diag-tag.n { background: color-mix(in srgb, var(--ink-soft) 16%, transparent); color: var(--ink-soft); }

/* respuesta correcta pero con matiz de orden (galdegaia) */
input.answer.correct.order { border-color: var(--sun-400, #d7ab54); background: color-mix(in srgb, var(--sun-400, #d7ab54) 12%, var(--surface)); }