/* ============================================================
   Diagnóstico MEGA (landing /diagnostico-mega). Usa calculators.css.
   Sin emojis: cada animal se representa con su letra de MEGA.
   ============================================================ */
@layer templates {
  .landing-header { border-bottom: 1px solid var(--c-line); }
  .landing-header__inner { display: flex; justify-content: space-between; align-items: center; min-height: 72px; gap: var(--s-md); }
  .landing-footer { border-top: 1px solid var(--c-line); padding: var(--s-lg) 0; font-size: var(--fs-small); color: var(--c-gray); }
  .landing-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-md); }
  .landing-footer nav { display: flex; gap: var(--s-md); }

  .mega-hero { padding: var(--s-xl) 0; }
  .mega-hero h1 { max-width: 20ch; margin: var(--s-sm) 0 var(--s-md); font-size: var(--fs-display); line-height: 0.95; }
  .mega-hero .page-hero__lead { max-width: var(--measure); }
  .mega-animals { list-style: none; margin: var(--s-xl) 0 0; padding: 0; display: grid; gap: var(--s-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
  .mega-animal { display: grid; gap: 0.3rem; padding: var(--s-lg); border: 1px solid var(--c-line); background: var(--c-surface-1); }
  .mega-animal__letter {
    font-family: var(--f-display); font-stretch: var(--display-stretch); font-weight: 900; font-size: 2.6rem; line-height: 1;
    color: transparent; -webkit-text-stroke: 1px var(--c-red-line);
  }
  .mega-animal__letter--lg { font-size: 5rem; }
  .mega-animal__title { font-family: var(--f-mono); font-size: var(--fs-meta); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-2); }

  .mega-form.is-stepped .mega-step[hidden] { display: none; }
  .mega-step { display: grid; gap: var(--s-md); }
  .mega-step__head h2 { font-size: var(--fs-h3); }
  .mega-step__nav { display: flex; gap: var(--s-sm); justify-content: flex-end; flex-wrap: wrap; }
  .no-js .mega-step__nav { display: none; }
  .no-js .mega-step:last-of-type .mega-step__nav { display: flex; }
  .no-js .mega-step__nav [data-mega-prev] { display: none; }
  .mega-progress { height: 4px; background: var(--c-surface-3); position: sticky; top: 0; z-index: 2; }
  .mega-progress span { display: block; height: 100%; width: 0; background: var(--c-red); transition: width var(--dur-fast) var(--ease-out); }
  .mega-progress__text { font-family: var(--f-mono); font-size: var(--fs-meta); color: var(--c-ink-2); margin: 0; min-height: 1.2em; }
  .no-js .mega-progress, .no-js .mega-progress__text { display: none; }
  .mega-options { display: grid; gap: var(--s-sm); margin-top: var(--s-sm); }
  .mega-options label {
    display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0.9rem; min-height: 44px;
    border: 1px solid var(--c-line-strong); cursor: pointer; font-size: var(--fs-small); line-height: 1.45;
  }
  .mega-options label:hover { border-color: var(--c-gray); }
  .mega-options label:has(input:checked) { border-color: var(--c-ink); background: var(--c-surface-2); }
  .mega-options input { accent-color: var(--c-red); margin-top: 0.2rem; flex: none; }

  .mega-result__grid { display: grid; gap: var(--s-md); margin-top: var(--s-md); }
  @media (min-width: 900px) { .mega-result__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
  .mega-card h2 { font-size: var(--fs-h3); }
  .mega-card--main { border-color: var(--c-red-line); }
  .mega-card__head { display: flex; gap: var(--s-md); align-items: center; }
  .mega-quote { margin: var(--s-sm) 0 0; padding-left: var(--s-md); border-left: 3px solid var(--c-red-line); font-family: var(--f-serif); font-style: italic; font-size: 1.15rem; }
  .mega-stations { list-style: none; margin: var(--s-lg) 0 0; padding: 0; display: grid; gap: 0.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
  .mega-station { padding: 0.6rem 0.75rem; border: 1px solid var(--c-line); font-size: var(--fs-small); color: var(--c-ink-2); }
  .mega-station span { font-family: var(--f-mono); font-size: var(--fs-meta); color: var(--c-gray); }
  .mega-station--critical { border-color: var(--c-red-line); color: var(--c-ink); background: var(--c-surface-2); }
  .mega-formula { max-width: var(--measure); }
}