/* Hormiga · Curso «Invierte sin miedo» (/aprende). Antes "Hormiga Familia": la clase .familia se mantiene.
   Pensado para cualquier edad y para quien tiene miedo a invertir: letra grande (mínimo 18 px), alto contraste,
   botones grandes, una acción por pantalla y tono tranquilo, sin brillos ni animaciones llamativas. */
body.familia {
  --text: #1c130d;
  --text-2: #2f251d;
  --muted: #54463a;
  font-size: 20px;
  line-height: 1.6;
}
.familia .btn-primary { background-image: none; }                 /* sin barrido de luz: tono tranquilo */
.familia .btn { min-height: 60px; font-size: 19px; padding: 0 24px; }
.familia .btn-xl { min-height: 68px; font-size: 21px; font-weight: 700; }
.familia .btn + .btn, .familia .btn-block + .btn-block { margin-top: 12px; }
.familia .fine, .familia .legend, .familia .chart-axis { font-size: 16px; }
.familia .chart-axis { font-size: 13px; }
.familia :focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
.familia h1[tabindex="-1"]:focus { outline: none; }                 /* el foco al cambiar de pantalla no necesita marco */

/* ---------- Portada ----------
   Titular grande y equilibrado (Fraunces), una sola idea por bloque y el vídeo
   de la hormiga como ilustración (decorativo, sin texto que repita el titular). */
.fam-hero { position: relative; padding: 36px 0 52px; background:
  radial-gradient(60% 70% at 100% 0%, rgba(242, 169, 59, .22), transparent 70%),
  radial-gradient(50% 60% at 0% 100%, rgba(232, 120, 80, .14), transparent 70%); }
.fam-hero[hidden] { display: none; }
.fam-hero-grid { display: grid; gap: 32px; align-items: center; }
.fam-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 17px; font-weight: 600; color: var(--muted); }
.fam-kicker span { padding: 5px 12px; border-radius: 99px; background: var(--clay); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.fam-title { font-family: var(--display); font-weight: 700; font-size: clamp(44px, 9.5vw, 84px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 20px; color: var(--text); text-wrap: balance; font-variation-settings: "SOFT" 100; }
.fam-title em { font-style: italic; font-weight: 500; color: var(--clay); white-space: nowrap; }
.fam-hero .fam-lead { max-width: 36ch; font-size: 21px; text-wrap: pretty; margin-bottom: 26px; }
.fam-promise { list-style: none; padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fam-promise li { padding: 14px 14px 12px; border-radius: 18px; background: rgba(255, 253, 249, .78); border: 1px solid var(--line); }
.fam-promise b { display: block; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--clay-ink); margin-bottom: 6px; font-feature-settings: "tnum"; }
.fam-promise span { display: block; font-size: 16px; line-height: 1.3; color: var(--text-2); }
.fam-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fam-hero-ctas .btn + .btn { margin-top: 0; }
.fam-hero-ctas .btn-primary { flex: 1 1 260px; }
.fam-hero-media { margin: 0; justify-self: center; width: min(100%, 460px); }
.fam-hero-media video { display: block; width: 100%; aspect-ratio: 1; border-radius: 36px; background: #fbf1e3; box-shadow: 0 30px 60px -34px rgba(110, 58, 26, .55), 0 0 0 1px var(--line); }
@media (min-width: 900px) {
  .fam-hero { padding: 64px 0 80px; }
  .fam-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; }
  .fam-hero-media { width: 100%; max-width: 480px; transform: rotate(1.5deg); }
}
.fam-under-hero { padding-top: 8px; }
.fam-steps-list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; position: relative; }
.fam-steps-list::before { content: ""; position: absolute; left: 27px; top: 30px; bottom: 30px; border-left: 3px dotted var(--clay); opacity: .45; }
.fam-steps-list li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; padding: 12px 0; }
.fam-steps-list .stop { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 2.5px solid var(--clay); color: var(--clay); font-family: var(--display); font-weight: 700; font-size: 26px; }
.fam-steps-list b { display: block; font-size: 22px; line-height: 1.25; margin-top: 4px; }
.fam-steps-list small { display: block; font-size: 18px; color: var(--text-2); margin-top: 4px; }

.fam { max-width: 700px; padding-top: 28px; }
.fam h1 { font-size: clamp(40px, 10vw, 60px); margin: 8px 0 16px; line-height: 1.05; text-wrap: balance; }
.fam h2, .fam-h2 { font-size: clamp(30px, 7vw, 40px); margin: 40px 0 12px; }
.fam-lead { font-size: 21px; color: var(--text-2); margin: 0 0 24px; }
.fam-step { font-size: 17px; font-weight: 700; color: var(--clay-ink); margin: 0 0 6px; letter-spacing: .02em; }
.fam-legal { font-size: 17px; color: var(--muted); background: var(--card-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin: 28px 0; }
.fam-notice { font-size: 18px; color: #6b4a00; background: #fff4dc; border: 1px solid #f0d49a; border-radius: 16px; padding: 14px 16px; margin: 0 0 20px; }
.fam-invited { font-size: 19px; font-weight: 600; color: var(--green-ink); background: var(--green-dim); border-radius: 16px; padding: 14px 16px; margin: 0 0 18px; }
.fam-back { font-size: 18px; margin: 18px 0; display: inline-block; }
.fam-label { display: block; font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.familia .text-input { min-height: 62px; font-size: 21px; }
.fam-video { margin: 0 0 24px; }
.fam-video video { width: 100%; aspect-ratio: 1; border-radius: 24px; background: var(--card-2); border: 1px solid var(--line); box-shadow: var(--shadow); }
.fam-video figcaption { font-size: 16px; color: var(--muted); margin-top: 8px; text-align: center; }
.fam-help { margin-top: 48px; padding: 24px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.fam-help h2 { margin-top: 0; font-size: 28px; }
.fam-help p { font-size: 19px; color: var(--text-2); }

/* Opciones grandes (una por línea, fáciles de tocar) */
.opts { display: grid; gap: 12px; margin: 8px 0 20px; }
.opt { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 68px; padding: 14px 20px; text-align: left; font-size: 20px; font-weight: 600; color: var(--text); background: var(--card); border: 2px solid var(--line-2); border-radius: 18px; cursor: pointer; transition: border-color .15s, background .15s; }
.opt::before { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-2); background: #fff; }
.multi .opt::before { border-radius: 8px; }
.opt[aria-checked=true], .opt[aria-pressed=true] { border-color: var(--clay); background: var(--clay-dim); }
.opt[aria-checked=true]::before, .opt[aria-pressed=true]::before { border-color: var(--clay); background: var(--clay) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.4 2.4L12 5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.q { border: 0; padding: 0; margin: 0; min-width: 0; }
.q legend { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 7.5vw, 42px); line-height: 1.12; padding: 0; margin-bottom: 18px; letter-spacing: -0.02em; font-variation-settings: "SOFT" 100; }
.q-sub { font-size: 19px; color: var(--text-2); margin: 0 0 12px; }
.fam-money input { min-height: 70px; font-size: 30px; }
.steppers { display: grid; gap: 20px; }
.stepper-label { display: block; font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.stepper-row { display: grid; grid-template-columns: 68px 1fr 68px; gap: 10px; }
.stepper-row input { min-height: 68px; text-align: center; font-family: var(--display); font-size: 36px; font-weight: 700; border-radius: 18px; border: 2px solid var(--line-2); background: var(--card); -moz-appearance: textfield; }
.stepper-row input::-webkit-outer-spin-button, .stepper-row input::-webkit-inner-spin-button { -webkit-appearance: none; }
.step-btn { min-height: 68px; border-radius: 18px; border: 2px solid var(--line-2); background: var(--card-2); font-size: 34px; font-weight: 600; cursor: pointer; color: var(--clay-ink); }
.fam-nav { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; margin-top: 24px; }
.fam-nav .btn + .btn { margin-top: 0; }
.fam-progress { height: 16px; margin: 0 0 14px; background: repeating-linear-gradient(90deg, var(--line-2) 0 5px, transparent 5px 12px) center / 100% 4px no-repeat; }
.fam-progress span { display: block; position: relative; height: 4px; margin-top: 6px; width: 0; background: var(--clay); transition: width .4s ease; }
.fam-progress span::after { content: ""; position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--clay); border: 3px solid var(--card); box-shadow: 0 0 0 2px var(--clay); }

/* Escenarios de ejemplo */
.scenarios { display: grid; gap: 14px; margin-bottom: 8px; }
.scen { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 20px; }
.scen h3 { font-size: 26px; margin: 0 0 4px; }
.scen .scen-desc { font-size: 18px; color: var(--text-2); margin: 0 0 12px; }
.scen .scen-big { font-family: var(--display); font-weight: 700; font-size: 40px; color: var(--green-ink); line-height: 1.1; margin: 0; font-feature-settings: "tnum"; }
.scen .scen-note { font-size: 17px; color: var(--muted); margin: 4px 0 14px; }
.range { position: relative; height: 14px; border-radius: 99px; background: linear-gradient(90deg, var(--coral-dim), var(--card-2) 50%, var(--green-dim)); margin: 34px 0 10px; }
.range .bar { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, var(--coral), var(--green)); opacity: .8; }
.range .zero { position: absolute; left: 50%; top: -6px; bottom: -6px; width: 2px; background: var(--text); }
.range-labels { display: flex; justify-content: space-between; font-size: 17px; font-weight: 600; }
.range-labels .neg { color: var(--coral-ink); }
.range-labels .pos { color: var(--green-ink); }

/* Ruta de lecciones */
.lessons { list-style: none; padding: 0; margin: 10px 0 24px; display: grid; gap: 12px; position: relative; }
.lesson-item { display: grid; grid-template-columns: 60px 1fr; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 20px; background: var(--card); border: 2px solid var(--line); text-align: left; width: 100%; cursor: pointer; font: inherit; color: inherit; }
.lesson-item .stop { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; border: 2.5px solid var(--clay); color: var(--clay); font-family: var(--display); font-weight: 700; font-size: 26px; background: var(--card); }
.lesson-item b { display: block; font-size: 21px; line-height: 1.25; }
.lesson-item small { display: block; font-size: 17px; color: var(--muted); }
.lesson-item.is-done .stop { background: var(--clay); color: #fff; }
.lesson-item.is-next { border-color: var(--clay); box-shadow: 0 0 0 4px var(--clay-dim); }
.lesson-item[disabled] { cursor: not-allowed; opacity: .55; }
.lesson-item[disabled] .stop { border-color: var(--line-2); color: var(--muted); }

/* Temario en la portada */
.syllabus { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 12px; }
.syl { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; padding: 18px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.syl-n { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--clay-dim); color: var(--clay-ink); }
.syl-n .ico { width: 26px; height: 26px; }
.syl-kicker { margin: 0 0 2px; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--clay-ink); }
.syl b { display: block; font-size: 22px; line-height: 1.25; }
.syl small { display: block; font-size: 17px; color: var(--text-2); margin-top: 4px; }
.syl-list { margin: 8px 0 0; font-size: 15px; color: var(--muted); line-height: 1.5; }
.syl.is-premium { background: linear-gradient(135deg, var(--card), var(--clay-dim)); border: 2px dashed var(--clay); }
.syl.is-premium .syl-n { background: var(--clay); color: #fff; }

/* Nivel de partida (tras el diagnóstico) */
.start-level { margin: 8px 0 18px; padding: 20px; border-radius: 22px; background: var(--green-dim); border: 1px solid rgba(35, 112, 74, .25); }
.start-level h2 { margin: 0 0 6px; font-size: 28px; }
.start-level p:last-child { margin: 0; font-size: 19px; color: var(--text-2); }

/* Introducción al curso */
.intro-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.intro-top .link-btn { font-size: 18px; }
.intro-dots { display: flex; gap: 8px; margin: 8px 0 22px; }
.intro-dots span { flex: 1; height: 6px; border-radius: 99px; background: var(--line); transition: background .3s; }
.intro-dots span.done { background: var(--clay-dim); }
.intro-dots span.on { background: var(--clay); }
.intro-ico { display: inline-grid; place-items: center; width: 72px; height: 72px; margin: 0 0 14px; border-radius: 22px; background: var(--clay); color: #fff; transform: rotate(-4deg); box-shadow: 0 0 0 6px var(--clay-dim); }
.intro-ico .ico { width: 36px; height: 36px; }
.intro-slide > p:not([class]) { font-size: 21px; color: var(--text-2); }
.intro-facts { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.intro-facts li { padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.intro-facts b { display: block; font-family: var(--display); font-size: 34px; line-height: 1; color: var(--clay-ink); margin-bottom: 6px; }
.intro-facts span { font-size: 17px; color: var(--text-2); }
.intro-path { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 4px; position: relative; }
.intro-path::before { content: ""; position: absolute; left: 25px; top: 28px; bottom: 28px; border-left: 3px dotted var(--clay); opacity: .45; }
.intro-path li { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; padding: 8px 0; }
.intro-path-n { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--card); border: 2.5px solid var(--clay); color: var(--clay-ink); }
.intro-path-n .ico { width: 24px; height: 24px; }
.intro-path b { display: block; font-size: 20px; line-height: 1.25; }
.intro-path small { display: block; font-size: 17px; color: var(--muted); }
.intro-path .is-premium .intro-path-n { border-style: dashed; color: var(--muted); border-color: var(--line-2); }
.intro-anatomy { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 12px; }
.intro-anatomy li { padding: 16px 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.intro-anatomy li > b { display: block; font-size: 20px; }
.intro-anatomy small { display: block; font-size: 18px; color: var(--text-2); margin-top: 4px; }
.intro-demo { margin: 10px 0 0; }
.intro-demo-out { margin: 4px 0 0; font-size: 18px; color: var(--text-2); }
.intro-rules { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 12px; }
.intro-rules li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 19px; color: var(--text-2); }
.intro-rules .ico { width: 24px; height: 24px; color: var(--clay); margin-top: 3px; }
.intro-card { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; width: 100%; margin: 6px 0 18px; padding: 14px 16px; border-radius: 20px; background: var(--card); border: 2px solid var(--line); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.intro-card:hover { border-color: var(--clay); }
.intro-card.is-new { border-color: var(--clay); box-shadow: 0 0 0 4px var(--clay-dim); }
.intro-card-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--clay-dim); color: var(--clay-ink); }
.intro-card-ico .ico { width: 24px; height: 24px; }
.intro-card b { display: block; font-size: 19px; }
.intro-card small { display: block; font-size: 16px; color: var(--muted); }
.intro-card-go { font-size: 24px; color: var(--clay-ink); }
a.intro-card { text-decoration: none; margin-top: -8px; }
.intro-card-ico.tools-ico { background: var(--green-dim); color: var(--green-ink); }

/* Curso: niveles */
.levels { display: grid; gap: 18px; margin: 18px 0 24px; }
.level { padding: 20px; border-radius: 26px; background: var(--card-2); border: 1px solid var(--line); }
.level .lessons { margin: 16px 0 4px; }
.level-head { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; margin-bottom: 12px; }
.level-ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--clay); color: #fff; }
.level-ico .ico { width: 28px; height: 28px; }
.level-kicker { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--clay-ink); }
.level-kicker .stamp { font-size: 13px; vertical-align: 1px; }
.level h2 { margin: 2px 0 0; font-size: clamp(26px, 6vw, 32px); }
.level-goal { margin: 0 0 12px; font-size: 18px; color: var(--text-2); }
.level-bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.level-bar span { display: block; height: 100%; background: var(--clay); border-radius: 99px; transition: width .4s ease; }
.level-count { margin: 6px 0 0; font-size: 16px; font-weight: 600; color: var(--muted); }
.level.is-complete .level-ico { background: var(--green-ink); }
.level.is-complete .level-bar span { background: var(--green-ink); }
.level.is-complete .level-count { color: var(--green-ink); }
@media (max-width: 520px) {
  .level { padding: 16px 12px; border-radius: 22px; }
  .level .lesson-item { grid-template-columns: 48px 1fr; gap: 12px; padding: 14px; }
  .level .lesson-item .stop { width: 46px; height: 46px; font-size: 22px; }
}
.level.is-locked { opacity: .72; }
.level.is-locked .level-ico { background: var(--line-2); color: var(--muted); }
.level-lock { display: flex; gap: 10px; align-items: center; margin: 14px 0 0; font-size: 17px; color: var(--muted); }
.level-lock .ico { width: 20px; height: 20px; flex: none; }

/* Nivel 5: el curso completo (próximamente) */
.premium:empty { display: none; }
.premium { margin: 0 0 24px; padding: 24px; border-radius: 26px; border: 2px dashed var(--clay); background: linear-gradient(160deg, var(--card), var(--clay-dim)); }
.premium h2 { margin: 4px 0 8px; font-size: clamp(26px, 6vw, 34px); }
.premium-list { list-style: none; padding: 0; margin: 14px 0 20px; display: grid; gap: 10px; }
.premium-list li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 18px; color: var(--text-2); }
.premium-list .ico { width: 22px; height: 22px; color: var(--clay); margin-top: 3px; }

/* ¡Nivel superado! */
.level-badge { display: inline-grid; place-items: center; width: 112px; height: 112px; margin: 0 auto 12px; border-radius: 34px; background: var(--clay); color: #fff; box-shadow: 0 0 0 8px var(--clay-dim); transform: rotate(-4deg); }
.level-badge .ico { width: 54px; height: 54px; }
.mission { margin: 0 0 24px; padding: 22px; border-radius: 22px; background: var(--card); border: 2px solid var(--clay-dim); }
.mission h2 { margin: 0 0 8px; font-size: 28px; }
.mission p { font-size: 19px; color: var(--text-2); }

/* Contenido de la lección */
.fam-actions { margin-bottom: 18px; }
.lesson-body h2 { font-size: 30px; margin: 34px 0 10px; }
.lesson-body p { font-size: 21px; color: var(--text-2); margin: 0 0 16px; }
.term { display: inline; padding: 0 2px; border: 0; background: none; font: inherit; color: var(--clay-ink); font-weight: 700; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 5px; text-decoration-thickness: 2px; cursor: pointer; }
.term::after { content: "?"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 4px; vertical-align: 2px; border-radius: 50%; background: var(--clay-dim); color: var(--clay-ink); font-size: 14px; font-weight: 800; text-decoration: none; }
.fam-term .modal-card h2 { font-size: 32px; margin: 4px 44px 12px 0; }

/* Prácticas (calculadoras, clasificar, ordenar, tarjetas y simulador de caída) */
.practice { margin: 36px 0 0; padding: 24px; border-radius: 24px; background: linear-gradient(170deg, var(--card), var(--card-2)); border: 2px solid var(--clay-dim); }
.practice[hidden] { display: none; }
.practice h2 { margin: 4px 0 6px; font-size: clamp(26px, 6vw, 30px); }
.practice-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 12px; border-radius: 99px; background: var(--clay); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.practice-kicker .ico { width: 18px; height: 18px; }
.practice .btn { margin-top: 14px; }
.pfeedback { font-size: 19px; margin: 14px 0 0; padding: 14px 16px; border-radius: 14px; }
.pfeedback.ok { background: var(--green-dim); color: var(--green-ink); }
.pfeedback.ko { background: var(--coral-dim); color: var(--coral-ink); }
.calc-big { font-family: var(--display); font-weight: 700; font-size: clamp(36px, 9vw, 48px); line-height: 1.05; margin: 10px 0 2px; color: var(--text); font-feature-settings: "tnum"; }
.calc-big.pos, .calc-out .pos { color: var(--green-ink); }
.calc-big.neg, .calc-out .neg { color: var(--coral-ink); }
.calc-note { font-size: 16px !important; color: var(--muted) !important; }
.calc-out { margin-top: 8px; padding: 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.calc-out p { font-size: 19px; color: var(--text-2); margin: 0 0 10px; }
.calc-out p:last-child { margin-bottom: 0; }
.pslider { display: block; margin: 16px 0; }
.pslider-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 18px; font-weight: 600; }
.pslider-top b { font-family: var(--display); font-size: 24px; color: var(--clay-ink); white-space: nowrap; font-feature-settings: "tnum"; }
.pslider input[type=range] { width: 100%; height: 44px; margin: 4px 0 0; cursor: pointer; }
.pslider input[type=range]::-webkit-slider-runnable-track { height: 8px; background: var(--clay-dim); }
.pslider input[type=range]::-moz-range-track { height: 8px; background: var(--clay-dim); }
.pslider input[type=range]::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -11px; box-shadow: 0 0 0 1px var(--line-2), 0 2px 6px rgba(74, 45, 24, .2), inset 0 0 0 8px var(--clay); }
.pslider input[type=range]::-moz-range-thumb { background: var(--clay); }
.pbars { display: grid; gap: 10px; margin: 14px 0; }
.pbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; font-size: 17px; }
.pbar-label { color: var(--text-2); }
.pbar b { font-feature-settings: "tnum"; }
.pbar-track { grid-column: 1 / -1; height: 14px; border-radius: 99px; background: var(--line); overflow: hidden; }
.pbar-fill { display: block; height: 100%; border-radius: 99px; background: var(--muted); transition: width .25s ease; }
.pbar-fill.pos { background: var(--green); }
.pbar-fill.neg { background: var(--coral); }
.pbar-fill.ref { background: var(--line-2); }

.psort { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; }
.psort li { padding: 14px; border-radius: 18px; background: var(--card); border: 2px solid var(--line); }
.psort li p { margin: 0 0 10px; font-size: 19px; font-weight: 700; }
.psort li.is-right { border-color: var(--green); background: var(--green-dim); }
.psort li.is-wrong { border-color: var(--coral); background: var(--coral-dim); }
.pchips { display: flex; flex-wrap: wrap; gap: 8px; }
.pchip { min-height: 44px; padding: 8px 14px; border-radius: 99px; border: 2px solid var(--line-2); background: var(--card); font: inherit; font-size: 16px; font-weight: 600; color: var(--text); cursor: pointer; }
.pchip[aria-checked=true] { border-color: var(--clay); background: var(--clay); color: #fff; }

.porder { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.porder li { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 12px 12px 12px 14px; border-radius: 18px; background: var(--card); border: 2px solid var(--line); font-size: 18px; }
.porder li.is-right { border-color: var(--green); background: var(--green-dim); }
.porder li.is-wrong { border-color: var(--coral); background: var(--coral-dim); }
.porder-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--clay-dim); color: var(--clay-ink); font-weight: 800; }
.porder-btns { display: flex; gap: 6px; }
.porder-btns button { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--line-2); background: var(--card-2); font-size: 22px; font-weight: 700; color: var(--clay-ink); cursor: pointer; }
.porder-btns button:disabled { opacity: .3; cursor: default; }

.pcard-count { margin: 10px 0 6px; font-size: 16px; font-weight: 700; color: var(--muted); }
.pcard { padding: 22px; border-radius: 20px; background: var(--card); border: 2px solid var(--line); box-shadow: var(--shadow); }
.pcard p { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.4; }
.pcard-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.practice .pcard-choices .btn, .practice .crash-ctas .btn { margin-top: 10px; }   /* botones en fila, alineados */
.pcard-choices .btn.is-right { border-color: var(--green); background: var(--green-dim); color: var(--green-ink); opacity: 1; }
.pcard-choices .btn.is-wrong { border-color: var(--coral); background: var(--coral-dim); color: var(--coral-ink); opacity: 1; }
.pcard-end { text-align: center; }

.crash { margin-top: 10px; }
.crash-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 8px; }
.crash-top [data-c-date] { font-size: 17px; font-weight: 700; color: var(--muted); min-width: 80px; }
.crash-top [data-c-val] { font-family: var(--display); font-size: clamp(34px, 8vw, 44px); font-feature-settings: "tnum"; }
.crash-top [data-c-chg] { font-size: 20px; font-weight: 800; }
.crash-top .neg { color: var(--coral-ink); }
.crash-top .pos { color: var(--green-ink); }
.crash-chart { display: block; width: 100%; height: 220px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.crash-base { stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }
.crash-hold { fill: none; stroke: var(--clay); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.crash-me { fill: none; stroke: var(--coral-ink); stroke-width: 3; stroke-dasharray: 2 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.crash-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.crash-sell:not(:disabled) { border-color: var(--coral); color: var(--coral-ink); }

/* Mini quiz */
.quiz { margin: 36px 0 0; padding: 24px; border-radius: 24px; background: var(--card); border: 2px solid var(--line); }
.quiz h2 { margin: 0 0 6px; font-size: 30px; }
.quiz-q { margin: 22px 0 0; }
.quiz-q p.qt { font-size: 21px; font-weight: 700; margin: 0 0 10px; }
.quiz-q .opt.is-right { border-color: var(--green); background: var(--green-dim); }
.quiz-q .opt.is-wrong { border-color: var(--coral); background: var(--coral-dim); }
.quiz-feedback { font-size: 19px; margin: 6px 0 0; padding: 12px 14px; border-radius: 14px; }
.quiz-feedback.ok { background: var(--green-dim); color: var(--green-ink); }
.quiz-feedback.ko { background: var(--coral-dim); color: var(--coral-ink); }

/* Lista de próximos pasos */
.checklist { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.check { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: 20px; background: var(--card); border: 2px solid var(--line); cursor: pointer; font-size: 20px; }
.check input { flex: none; width: 30px; height: 30px; margin: 2px 0 0; accent-color: var(--green-ink); }
.check small { display: block; font-size: 17px; color: var(--muted); }
.check:has(input:checked) { background: var(--green-dim); border-color: rgba(35, 112, 74, .35); }
.check:has(input:checked) span > b { text-decoration: line-through; text-decoration-color: var(--green-ink); }

/* Familia */
.fam-family { margin-top: 40px; padding: 24px; border-radius: 24px; background: var(--card); border: 2px solid var(--clay-dim); }
.fam-family h2 { margin-top: 0; font-size: 28px; }
.fam-family-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.fam-family-list li { font-size: 19px; padding: 14px 0; border-top: 1px solid var(--line); }
.fam-family-list li:first-child { border-top: 0; padding-top: 0; }
.fam-family-list .btn { margin-top: 10px; }
.fam-sharing { margin-top: 24px; padding: 18px; border-radius: 18px; background: var(--card-2); }
.fam-sharing .switch { font-size: 19px; }
.btn-wa { background-color: #1f8a4c; }
.btn-wa:hover { background-color: #18733f; }
.invite-ready { margin-top: 20px; }
.fam-done { text-align: center; padding: 30px 0; }
.fam-done-flag { display: inline-grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--clay); color: #fff; margin: 0 auto 10px; }
.fam-done-flag .ico { width: 46px; height: 46px; }

/* Resumen para imprimir (PDF) */
.print-summary { display: none; }
@media print {
  @page { margin: 18mm; }
  body.familia > *:not(.print-summary) { display: none !important; }
  body::after { display: none !important; }
  .print-summary { display: block !important; font-family: Georgia, serif; color: #000; font-size: 16pt; line-height: 1.5; }
  .print-summary h1 { font-size: 26pt; margin: 0 0 6pt; }
  .print-summary h2 { font-size: 18pt; margin: 18pt 0 6pt; border-bottom: 1pt solid #999; padding-bottom: 3pt; }
  .print-summary li { margin: 6pt 0; }
  .print-summary .small { font-size: 12pt; color: #333; }
}