/* ============================================================================
   AURA DISCOVERY™ — responsive.css
   Mobile first. Las reglas base viven en style.css y describen el móvil.
   Aquí sólo se amplía hacia arriba con min-width. Nunca al revés.
   ----------------------------------------------------------------------------
   Breakpoints
   480px  → móvil grande
   768px  → tablet
   1024px → escritorio
   1440px → escritorio amplio
   ========================================================================== */


/* ============================================================================
   MÓVIL PEQUEÑO (< 480px) — ajustes de compresión
   Único uso de max-width del archivo: evita que el pie se rompa en pantallas
   estrechas, donde no cabe texto largo junto a dos botones.
   ========================================================================== */
@media (max-width: 479px) {
  .app__footer-inner .btn--primary { flex: 1 1 auto; }
  .btn--lg { width: 100%; }
  .hero__actions .btn { width: 100%; }
}


/* ============================================================================
   MÓVIL GRANDE — 480px
   ========================================================================== */
@media (min-width: 480px) {
  :root {
    --size-title:   2rem;      /* 32px */
    --size-display: 2.75rem;   /* 44px */
  }

  .stage { padding: var(--space-8) var(--space-6) var(--space-9); }

  .hero__logo { width: 64px; height: 64px; }
}


/* ============================================================================
   TABLET — 768px
   ========================================================================== */
@media (min-width: 768px) {
  :root {
    --size-body:    1.0625rem;  /* 17px */
    --size-lead:    1.1875rem;  /* 19px */
    --size-title:   2.5rem;     /* 40px */
    --size-display: 3.5rem;     /* 56px */
    --header-h:     4.5rem;
    --measure:      44rem;
  }

  .app__header { padding: 0 var(--space-8); }

  .stage { padding: var(--space-9) var(--space-8) var(--space-10); }

  /* Tarjetas cortas en dos columnas: menos scroll, comparación más fácil */
  .choices--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Las tarjetas con descripción larga siguen a ancho completo */
  .choices--stack { grid-template-columns: 1fr; }

  .app__footer { padding: var(--space-5) var(--space-8); }
  .autosave { display: inline-flex; }

  .prisma__avatar { width: 36px; height: 36px; }
  .prisma__avatar svg { width: 17px; height: 17px; }

  .hero { padding: var(--space-8) 0 var(--space-9); }
  .hero__logo { width: 72px; height: 72px; }

  .next-steps { padding: var(--space-7); }
}


/* ============================================================================
   ESCRITORIO — 1024px
   ========================================================================== */
@media (min-width: 1024px) {
  :root {
    --size-title:   2.75rem;   /* 44px */
    --size-display: 4rem;      /* 64px */
    --measure:      46rem;
  }

  .app__header { padding: 0 var(--space-9); }

  /* Más aire vertical: el contenido respira y nada compite por atención */
  .stage { padding: calc(var(--space-10) + var(--space-2)) var(--space-9) var(--space-10); }

  /* Personalidad y motivos: tres columnas caben sin apretar */
  .choices--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .app__footer { padding: var(--space-5) var(--space-9); }
}


/* ============================================================================
   ESCRITORIO AMPLIO — 1440px
   ========================================================================== */
@media (min-width: 1440px) {
  :root {
    --measure: 48rem;
  }

  .stage { padding-top: var(--space-10); }
}


/* ============================================================================
   ALTURA REDUCIDA
   Portátiles y móviles en horizontal: se recorta el aire vertical antes que
   el contenido, para que el botón principal siga siendo alcanzable.
   ========================================================================== */
@media (max-height: 700px) and (min-width: 768px) {
  .stage { padding-top: var(--space-7); padding-bottom: var(--space-8); }
  .hero  { padding: var(--space-4) 0 var(--space-6); }
}


/* ============================================================================
   IMPRESIÓN
   Vive en css/print.css, que se carga con media="print".
   No se duplica aquí: un mismo comportamiento definido en dos archivos acaba
   divergiendo, y el bug aparece justo cuando un cliente imprime su informe.
   ========================================================================== */