/*
 * Overrides y adiciones sobre base.css (CSS compilado original del onboarding).
 * base.css NO se toca: todo cambio de estilo va aquí para poder auditarlo.
 */

/* ============================================================
 * 1. Animaciones del onboarding
 * base.css referencia stepIn / topbarFloat / msgSlide / phoneSlide
 * pero nunca las definió, así que las transiciones no animaban.
 * ============================================================ */

/* Entrada de cada pantalla: fade + subida suave */
@keyframes stepIn {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.step.active {
  animation: stepIn 0.4s var(--ease-clay) backwards;
}

/* Flotación sutil del avatar de Pablo en la topbar */
@keyframes topbarFloat {
  0%,
  to {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

/* Mensajes del chat de WhatsApp (demo "primer gasto") */
@keyframes msgSlide {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Entrada del mockup de teléfono */
@keyframes phoneSlide {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================================
 * 2. Centrado vertical del contenido
 * En pantallas de pregunta el contenedor scrollea (overflow-y-auto);
 * margin-block:auto en los extremos centra cuando sobra espacio y
 * mantiene el scroll natural cuando falta.
 * ============================================================ */

/* El CSS original nunca definió .app-shell, así que la página medía solo
 * la altura de su contenido y todo quedaba pegado arriba. Con el shell a
 * altura completa, los .step (flex: 1) llenan el viewport y el centrado
 * de abajo funciona. */
.app-shell {
  /* Altura FIJA al viewport (no min-): así el scroll vive dentro de cada
   * .step (overflow-y auto en base.css) y los footers sticky quedan
   * clavados abajo mientras el contenido pasa por detrás. */
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.vcenter > :first-child {
  margin-top: auto;
}

.vcenter > :last-child {
  margin-bottom: auto;
}

/* Pantallas tipo héroe (Pablo + burbuja): centrar la columna completa */
.vcenter-flex {
  justify-content: center;
}

/* ============================================================
 * 3. X de salida directa en la primera pantalla (sin modal)
 * ============================================================ */

.btn-exit-floating {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 20;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-navy);
  font-size: 16px;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: background var(--duration-fast);
}

.btn-exit-floating:hover {
  background: var(--color-lila-deep);
}

/* X de la topbar (heredada de base.css vía clases utilitarias) */
.btn-exit {
  width: 36px;
  height: 36px;
  min-height: 44px;
  color: var(--color-navy);
  border-radius: var(--radius-full);
  transition: background var(--duration-fast);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
}

.btn-exit:hover {
  background: var(--color-lila-deep);
}

/* ============================================================
 * 4. Remates "estilo Duolingo" (Fase 1 — solo CSS)
 * Todo aquí es override; base.css no se toca.
 * Objetivo: botones 3D presionables, cards con rebote, progreso
 * con vida, mascota con idle bounce y entrada escalonada.
 * ============================================================ */

/* --- 4.1 Botón primario "3D": reborde inferior que se hunde al tocar --- */
/* El sello Duolingo: el botón tiene un borde sólido debajo (ledge) y al
 * presionar baja y el ledge se comprime, dando feedback físico. */
.btn-primary {
  box-shadow:
    0 5px 0 0 #c9820a,
    0 10px 18px -4px rgba(43, 44, 100, 0.28);
  transition:
    transform 0.12s var(--ease-soft),
    box-shadow 0.12s var(--ease-soft);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 0 0 #c9820a,
    0 13px 22px -4px rgba(43, 44, 100, 0.3);
}

.btn-primary:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 0 #c9820a,
    0 3px 8px -2px rgba(43, 44, 100, 0.25);
}

/* --- 4.2 Option cards: reborde 3D + rebote elástico al seleccionar --- */
.option-card {
  box-shadow:
    0 3px 0 0 #cfc7e2,
    0 4px 10px -3px rgba(43, 44, 100, 0.1);
  transition:
    border-color 0.13s var(--ease-soft),
    transform 0.13s var(--ease-soft),
    box-shadow 0.13s var(--ease-soft);
}

.option-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 5px 0 0 #cfc7e2,
    0 9px 16px -4px rgba(43, 44, 100, 0.14);
}

.option-card:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 0 #cfc7e2;
}

.option-card.selected {
  box-shadow:
    0 3px 0 0 var(--color-ambar-deep),
    0 6px 14px -4px rgba(245, 158, 11, 0.32);
  animation: optionPop 0.34s var(--ease-clay);
}

@keyframes optionPop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.035);
  }
  to {
    transform: scale(1);
  }
}

/* --- 4.3 Entrada escalonada de las opciones (cascada Duolingo) --- */
.step.active [role="radiogroup"] > .option-card,
.step.active [role="group"] > .option-card {
  animation: optionIn 0.45s var(--ease-clay) backwards;
}
.step.active .option-card:nth-child(1) {
  animation-delay: 0.06s;
}
.step.active .option-card:nth-child(2) {
  animation-delay: 0.12s;
}
.step.active .option-card:nth-child(3) {
  animation-delay: 0.18s;
}
.step.active .option-card:nth-child(4) {
  animation-delay: 0.24s;
}
.step.active .option-card:nth-child(5) {
  animation-delay: 0.3s;
}
.step.active .option-card:nth-child(6) {
  animation-delay: 0.36s;
}

@keyframes optionIn {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- 4.4 Barra de progreso con vida: gruesa como Duolingo + brillo --- */
.progress-track {
  height: 14px;
}

.progress-fill {
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  transform: translateX(-100%);
  animation: progressShine 2.4s ease-in-out infinite;
}

@keyframes progressShine {
  0% {
    transform: translateX(-100%);
  }
  60%,
  to {
    transform: translateX(100%);
  }
}

/* --- 4.5 Pablo con vida: idle bounce suave (no toca los transforms
 * utilitarios del contenedor porque animamos la <img> interna) --- */
.pablo-hero img {
  animation: pabloBob 3.4s var(--ease-soft) infinite;
  transform-origin: center bottom;
  will-change: transform;
}

@keyframes pabloBob {
  0%,
  to {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-7px) rotate(-0.6deg);
  }
}

/* El avatar de Pablo en la topbar flota sutilmente (base.css citaba
 * topbarFloat pero nunca lo aplicaba). */
.topbar__pablo img {
  animation: topbarFloat 3s var(--ease-soft) infinite;
}

/* --- 4.7 Cuadrícula de tarjetas cuadradas (StepPrimer, estilo Duolingo) ---
 * Réplica del selector de idiomas de Duolingo: tarjetas blancas grandes,
 * borde gris fino, sombra mínima, icono grande y plano, label centrado.
 * Reutiliza .option-card (misma lógica de selección) con --tile. */
/* Contenedor del step-primer: base.css es Tailwind precompilado, así que
 * los paddings/anchos van aquí con CSS real (clases nuevas no existen ahí). */
.primer-body {
  max-width: 720px;
  gap: 24px;
  padding-top: 96px; /* despeja el header fijo (~66px) */
  padding-bottom: 32px;
}

.step[data-step="step-primer"] {
  background: var(--color-lila);
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  padding-block: 8px;
}

.option-card--tile {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 22px 12px;
  border-radius: 16px;
  background: var(--color-white);
  border: 2px solid #e5e5e5;
  border-bottom-width: 4px; /* el "ledge" sutil que usa Duolingo */
  box-shadow: none;
}

.option-card--tile:hover {
  transform: none;
  background: #f7f7f7;
  border-color: #e5e5e5;
  box-shadow: none;
}

.option-card--tile:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
  box-shadow: none;
}

.option-card--tile.selected {
  background: var(--color-lila-light);
  border: 2px solid var(--color-ambar);
  border-bottom-width: 4px;
  border-bottom-color: var(--color-ambar-deep);
  padding: 22px 12px;
  box-shadow: none;
}

/* La tile no usa el radio circular; la selección se ve por el borde */
.option-card--tile .option-radio {
  display: none;
}

/* Icono grande y plano, sin caja de color (como las banderas de Duolingo) */
.option-card--tile .option-icon {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 8px;
}

.option-card--tile .option-label {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: #4b4b4b;
}

.option-card--tile.selected .option-label {
  color: var(--color-navy);
}

/* Desktop: 3 columnas dimensionadas para que las 2 filas + título entren
 * completas en el viewport sin scroll (tarjetas ~200px). */
@media (min-width: 480px) {
  .options-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 640px;
    margin-inline: auto;
  }
  .option-card--tile .option-icon {
    font-size: 46px;
  }
  .option-card--tile .option-label {
    font-size: 15px;
  }
}

/* Mobile: 2 columnas altas y espaciosas que scrollean como Duolingo.
 * Sin aspect-ratio (forzaría anchos que desbordan): altura fija generosa. */
@media (max-width: 479.9px) {
  .primer-body {
    padding-top: 90px;
    padding-inline: 22px;
  }
  .options-grid {
    gap: 20px;
    padding-bottom: 32px;
  }
  .option-card--tile {
    aspect-ratio: auto;
    min-height: 210px;
    padding: 28px 14px;
    gap: 10px;
  }
  .option-card--tile .option-icon {
    font-size: 56px;
    margin-bottom: 8px;
  }
  .option-card--tile .option-label {
    font-size: 15px;
  }
  /* Flujo natural de documento: nada de centrado vertical — el contenido
   * arranca bajo el header y scrollea, sin huecos muertos al final */
  .step[data-step="step-primer"] .vcenter > :first-child {
    margin-top: 0;
  }
  .step[data-step="step-primer"] .vcenter > :last-child {
    margin-bottom: 0;
  }
}

/* --- 4.8 Header tipo Duolingo (barra blanca + línea divisoria fina) ---
 * fixed: queda pegado arriba mientras el contenido scrollea por debajo. */
.duo-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--color-white);
  border-bottom: 2px solid #e5e5e5;
}

.duo-header__inner {
  max-width: 1024px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  min-height: 64px;
}

.duo-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  margin-right: auto;
}

.duo-header__brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.duo-header__brand span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--color-ambar-deep);
}

.duo-header__link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9b9b9b;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  min-height: 44px;
  transition: color var(--duration-fast);
}

.duo-header__link:hover {
  color: var(--color-navy-soft);
}

/* La X vive dentro del header, alineada a la izquierda del logo */
.duo-header__exit {
  margin-left: -8px;
}

/* --- 4.9 Pantallas fiesta + fuente (estilo Duolingo) ------------------- */

.step[data-step="step-fiesta"],
.step[data-step="step-fuente"] {
  background: var(--color-lila);
}

/* Todo el onboarding va sobre lila (como la landing usapablo.com); las
 * tarjetas, pills y footers blancos resaltan encima. */
body {
  background: var(--color-lila);
}

/* Slider de estrés sobre blanco: caja con borde estilo pill */
.slider-zona {
  max-width: 560px;
  margin-inline: auto;
  margin-top: 36px;
}

.slider-caja {
  background: var(--color-white);
  border: 2px solid #e5e5e5;
  border-radius: 16px;
  padding: 16px 20px;
}

/* Footer tipo Duolingo: línea divisoria + CONTINUAR a la derecha.
 * sticky (no absolute como .cta-footer de base.css): el scroll vive en
 * .step, y sticky mantiene el footer clavado abajo mientras el contenido
 * pasa por detrás — absolute se iría con el scroll. Los márgenes negativos
 * atraviesan el padding lateral del .step para llegar de borde a borde. */
.duo-footer {
  position: sticky;
  bottom: 0;
  margin-inline: -24px;
  border-top: 2px solid #e5e5e5;
  background: var(--color-white);
  padding: 18px 24px;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  z-index: 10;
}

.duo-footer .btn-continue {
  width: auto;
  min-width: 220px;
  max-width: 300px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 15px;
}

@media (max-width: 640px) {
  .duo-footer {
    padding: 14px 16px;
  }
  .duo-footer .btn-continue {
    width: 100%;
    max-width: none;
  }
}

/* Burbuja de diálogo con cola (centrada, apunta hacia abajo) */
.speech-bubble {
  position: relative;
  background: var(--color-white);
  border: 2px solid #e5e5e5;
  border-radius: 16px;
  padding: 12px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--color-navy);
  max-width: 480px;
  text-align: center;
  line-height: 1.45;
  animation: bubblePop 0.5s var(--ease-clay) 0.15s backwards;
}

/* Link secundario dentro del footer ("¿Ya eres miembro?") */
.duo-footer__link {
  margin-right: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9b9b9b;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  min-height: 44px;
  transition: color var(--duration-fast);
}

.duo-footer__link:hover {
  color: var(--color-navy-soft);
}

.speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: var(--color-white);
  border-right: 2px solid #e5e5e5;
  border-bottom: 2px solid #e5e5e5;
  transform: translateX(-50%) rotate(45deg);
}

/* Variante lateral: la cola apunta a la izquierda (hacia la mascota) */
.speech-bubble--side::after {
  bottom: auto;
  left: -9px;
  top: 50%;
  border-right: none;
  border-top: none;
  border-left: 2px solid #e5e5e5;
  border-bottom: 2px solid #e5e5e5;
  transform: translateY(-50%) rotate(45deg);
}

@keyframes bubblePop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Escenario compartido entry/fiesta: mascota SIEMPRE en el mismo sitio
 * para que el paso de una pantalla a otra no se sienta como cambio de
 * página (patrón Duolingo): solo cambian burbuja, expresión y confetti. */
.duo-stage {
  gap: 18px;
}

.step[data-step="entry"],
.step[data-step="step-2"],
.step[data-step="step-3"] {
  background: var(--color-lila);
}

.duo-stage__pablo {
  width: 240px;
  height: 240px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.duo-stage__pablo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  animation: pabloBob 3.4s var(--ease-soft) infinite;
  transform-origin: center bottom;
}

@media (max-width: 640px) {
  .duo-stage__pablo {
    width: 200px;
    height: 200px;
  }
}

/* Transición seamless: estas pantallas comparten escenario, así que se
 * desactiva la animación de entrada del step (el fade+subida vendía el
 * "cambio de página"); la vida la ponen burbuja, confetti y mascota. */
.step.active[data-step="entry"],
.step.active[data-step="step-fiesta"],
.step.active[data-step="step-fuente"],
.step.active[data-step="step-porque"],
.step.active[data-step="step-2"],
.step.active[data-step="step-3"],
.step.active[data-step="step-4"] {
  animation: none;
}

/* Burbuja reactiva: pop al cambiar el texto (se re-dispara por JS) */
.speech-bubble.bubble-react {
  animation: bubblePop 0.4s var(--ease-clay);
}

/* Confetti: cada pieza explota desde el centro y cae con giro */
.fiesta-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 10px;
  height: 12px;
  opacity: 0;
  animation: confettiBurst var(--dur, 2s) cubic-bezier(0.22, 0.9, 0.35, 1)
    var(--delay, 0s) forwards;
}

@keyframes confettiBurst {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
  45% {
    opacity: 1;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
  }
  to {
    opacity: 0;
    transform: translate(var(--dx), calc(var(--dy) + var(--fall)))
      rotate(calc(var(--rot) * 1.6));
  }
}

/* Pregunta "¿Cómo supiste de Pablo?" — proporciones Duolingo:
 * columna ancha (1024px), mascota+burbuja arriba a la izquierda, gap
 * grande antes del grid de opciones centrado (760px). */
.fuente-body {
  max-width: 1024px;
  gap: 0; /* espaciado manual: header → gap grande → grid */
  padding-top: 0; /* nada de franja sobre el header sticky */
  padding-bottom: 24px; /* el footer sticky va en flujo, tras el contenido */
  min-height: 0;
}

/* El contenido arranca arriba (no centrado verticalmente), como Duolingo */
.step[data-step="step-fuente"] .vcenter > :first-child,
.step[data-step="step-porque"] .vcenter > :first-child {
  margin-top: 0;
}

/* La topbar acompaña el ancho Duolingo */
body .topbar > div {
  max-width: 1024px;
}

/* Header fijo (patrón Duolingo): vive FUERA de la zona de scroll — la
 * mascota + burbuja quedan arriba y solo las opciones scrollean debajo.
 * En desktop va limpio (sin línea, como Duolingo web); en mobile lleva
 * la línea límite de borde a borde, igual que la del footer. */
.fuente-header {
  background: var(--color-lila);
  flex-shrink: 0;
}

.fuente-header__inner {
  max-width: 1024px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px 14px;
}

@media (max-width: 560px) {
  .fuente-header {
    margin-inline: -24px;
    border-bottom: 2px solid #e5e5e5;
  }
}

/* Caja de la mascota FIJA: sin flex-shrink ni dimensiones fluidas, para
 * que Pablito no salte cuando la burbuja reactiva cambia de tamaño */
.fuente-pablo {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
}

.fuente-pablo picture {
  display: flex;
  width: 100%;
  height: 100%;
}

.fuente-pablo img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  animation: pabloBob 3.4s var(--ease-soft) infinite;
}

/* La mascota "viaja": aparece grande al centro del escenario y se desliza
 * hasta su sitio junto a la pregunta (patrón Duolingo del lápiz). Después
 * retoma su flotación normal. */
.step.active[data-step="step-fuente"] .fuente-pablo img {
  animation:
    fuentePabloIn 0.9s var(--ease-clay) backwards,
    pabloBob 3.4s var(--ease-soft) 1.1s infinite;
}

@keyframes fuentePabloIn {
  0% {
    transform: translate(min(240px, 30vw), 28vh) scale(2);
  }
  to {
    transform: translate(0, 0) scale(1);
  }
}

/* Las opciones entran DESPUÉS de que la mascota aterriza */
.step.active[data-step="step-fuente"] .fuente-grid > .option-card:nth-child(1) {
  animation-delay: 0.6s;
}
.step.active[data-step="step-fuente"] .fuente-grid > .option-card:nth-child(2) {
  animation-delay: 0.67s;
}
.step.active[data-step="step-fuente"] .fuente-grid > .option-card:nth-child(3) {
  animation-delay: 0.74s;
}
.step.active[data-step="step-fuente"] .fuente-grid > .option-card:nth-child(4) {
  animation-delay: 0.81s;
}
.step.active[data-step="step-fuente"] .fuente-grid > .option-card:nth-child(5) {
  animation-delay: 0.88s;
}
.step.active[data-step="step-fuente"] .fuente-grid > .option-card:nth-child(6) {
  animation-delay: 0.95s;
}
.step.active[data-step="step-fuente"] .fuente-grid > .option-card:nth-child(7) {
  animation-delay: 1.02s;
}
.step.active[data-step="step-fuente"] .fuente-grid > .option-card:nth-child(8) {
  animation-delay: 1.09s;
}

/* Pills en 2 columnas, dimensiones Duolingo (~360×75, gap 18) */
.fuente-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  margin-top: 90px; /* el gap grande entre burbuja y opciones */
}

.option-card--pill {
  background: var(--color-white);
  border: 2px solid #e5e5e5;
  border-bottom-width: 4px;
  border-radius: 16px;
  box-shadow: none;
  min-height: 76px;
  padding: 16px 20px;
  gap: 14px;
}

.option-card--pill .option-icon {
  font-size: 26px;
}

.option-card--pill:hover {
  transform: none;
  background: #f7f7f7;
  border-color: #e5e5e5;
  box-shadow: none;
}

.option-card--pill:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
  box-shadow: none;
}

.option-card--pill.selected {
  background: var(--color-lila-light);
  border: 2px solid var(--color-ambar);
  border-bottom-width: 4px;
  border-bottom-color: var(--color-ambar-deep);
  padding: 14px 16px;
  box-shadow: none;
}

.option-card--pill .option-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: #4b4b4b;
}

.option-card--pill.selected .option-label {
  color: var(--color-navy);
}

@media (max-width: 560px) {
  .fuente-body {
    padding-top: 16px;
  }
  .fuente-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 32px;
  }
  .fuente-pablo,
  .fuente-pablo img {
    width: 96px;
    height: 96px;
  }
  .speech-bubble {
    font-size: 15px;
  }
  /* Altura mínima del header: una burbuja de 1 o 3 líneas no lo mueve */
  .fuente-header__inner {
    min-height: 124px;
  }
}

/* --- 4.10 Demo interactivo (step-4): iPhone + WhatsApp ----------------- */

.step[data-step="step-4"] {
  background: var(--color-lila);
}

.demo-body {
  max-width: 1024px;
  gap: 14px;
  padding-top: 12px;
  padding-bottom: 16px;
  min-height: 0;
}

.demo-title {
  font-size: 24px;
  letter-spacing: -0.01em;
}

/* Chips arriba del iPhone: dejan clarísimo que puede usar 3 formas */
.demo-tips {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.demo-tip {
  background: var(--color-lila-light);
  border: 1.5px solid var(--color-lila-deep);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
  font-family: var(--font-display);
}

@media (max-width: 560px) {
  .demo-tip {
    font-size: 12px;
    padding: 5px 10px;
  }
}

/* Pulse suave en los botones foto/mic para atraer la atención mientras
 * el user aún no ha registrado nada (se apaga al primer envío) */
@keyframes waBtnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.wa-input__btn:not(.wa-input__btn--off) {
  animation: waBtnPulse 2.2s ease-in-out infinite;
}

.wa-input__btn:not(.wa-input__btn--off):nth-of-type(2) {
  animation-delay: 1.1s;
}

/* ── Marco del iPhone (titanio + isla dinámica + barra home) ─────────
 * Todo con font-size + em para escalar uniformemente al reducir --w
 * (mismo patrón que HeroPhone.astro del hero de la landing) */
.iphone {
  --w: 340px;
  font-size: 14px; /* base: cambia en mobile para escalar todo el interior */
  position: relative;
  width: var(--w);
  max-width: 92vw;
  border-radius: 3.857em;
  padding: 0.714em;
  background: linear-gradient(145deg, #3a3a3c, #1c1c1e 40%, #48484a);
  box-shadow:
    0 1.71em 3.43em -1.14em rgba(43, 44, 100, 0.35),
    inset 0 0 0.143em 0.143em rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

/* Botones laterales del marco */
.iphone::before,
.iphone::after {
  content: "";
  position: absolute;
  background: #2c2c2e;
  border-radius: 0.214em;
}
.iphone::before {
  left: -0.178em;
  top: 9.28em;
  width: 0.214em;
  height: 4.14em;
}
.iphone::after {
  right: -0.178em;
  top: 10.71em;
  width: 0.214em;
  height: 6em;
}

.iphone__isla {
  position: absolute;
  top: 1.43em;
  left: 50%;
  transform: translateX(-50%);
  width: 6.857em;
  height: 1.857em;
  background: #000;
  border-radius: 1.428em;
  z-index: 12;
}

.iphone__pantalla {
  position: relative;
  height: 42em; /* 588px / 14 */
  border-radius: 3.14em;
  overflow: hidden;
  background: #efe7dd;
  display: flex;
  flex-direction: column;
}

.iphone__homebar {
  position: absolute;
  bottom: 0.428em;
  left: 50%;
  transform: translateX(-50%);
  width: 7.857em;
  height: 0.286em;
  border-radius: 0.286em;
  background: rgba(0, 0, 0, 0.35);
  z-index: 12;
  pointer-events: none;
}

/* ── Barra de estado iOS ── */
.ios-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 1.857em 0.286em 2.143em;
  background: #f6f6f6;
  color: #000;
  font-family: -apple-system, "SF Pro Text", var(--font-display), sans-serif;
  font-size: 1em;
  font-weight: 700;
}
.ios-status svg { width: auto; height: 0.786em; }

.ios-status__iconos {
  display: inline-flex;
  align-items: center;
  gap: 0.357em;
}

/* ── Header WhatsApp iOS ── */
.wa-header {
  display: flex;
  align-items: center;
  gap: 0.571em;
  padding: 0.428em 0.857em 0.571em;
  background: #f6f6f6;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  color: #007aff;
}
.wa-header svg { height: 1em; width: auto; }
.wa-header svg:first-child { height: 1.286em; }

.wa-header__back {
  flex-shrink: 0;
}

.wa-header__avatar {
  width: 2.571em;
  height: 2.571em;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-white);
}

.wa-header__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.wa-header__nombre {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.07em;
  color: #000;
}

.wa-header__estado {
  font-size: 0.821em;
  color: #8e8e93;
}

.wa-header__icono {
  flex-shrink: 0;
  margin-left: 0.714em;
}

/* ── Zona de chat ── */
.wa-chat {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 0.714em 0.857em 0.428em;
  display: flex;
  flex-direction: column;
  gap: 0.428em;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.25) 0.8px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.25) 0.8px, transparent 1px),
    #efe7dd;
  background-size: 3.286em 3.286em, 2.714em 2.714em, auto;
}

.wa-chat::-webkit-scrollbar {
  display: none;
}

.wa-dia {
  align-self: center;
  margin-block: 0.286em;
}

.wa-dia span {
  background: #dcd3c8;
  color: #5b5b5b;
  font-size: 0.786em;
  font-weight: 600;
  padding: 0.286em 0.714em;
  border-radius: 0.571em;
}

/* Burbujas */
.wa-msg {
  position: relative;
  max-width: 82%;
  padding: 0.5em 0.714em 0.357em;
  border-radius: 0.714em;
  font-size: 1em;
  line-height: 1.4;
  color: #111;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.12);
  animation: msgSlide 0.25s var(--ease-clay);
  word-wrap: break-word;
}

.wa-msg--in {
  align-self: flex-start;
  background: #fff;
  border-top-left-radius: 0.143em;
}

.wa-msg--out {
  align-self: flex-end;
  background: #d9fdd3;
  border-top-right-radius: 0.143em;
}

.wa-msg__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.143em;
  font-size: 0.714em;
  color: #8a8a8a;
  float: right;
  margin: 0.571em 0 0 0.571em;
}
.wa-msg__meta svg { width: 1.07em; height: 0.643em; }

.wa-msg__foto {
  display: block;
  width: 12.857em;
  max-width: 100%;
  border-radius: 0.571em;
  margin-bottom: 0.143em;
}

/* Indicador escribiendo… */
.wa-typing {
  display: inline-flex;
  gap: 0.286em;
  padding: 0.857em 1em;
}

.wa-typing span {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #b5b5b5;
  animation: typingDot 1.2s ease-in-out infinite;
}

.wa-typing span:nth-child(2) {
  animation-delay: 0.15s;
}
.wa-typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typingDot {
  0%,
  60%,
  to {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* Nota de voz */
.wa-audio {
  display: inline-flex;
  align-items: center;
  gap: 0.571em;
  min-width: 12.14em;
  padding: 0.143em 0;
}

.wa-audio__play {
  width: 2.143em;
  height: 2.143em;
  border: none;
  border-radius: 50%;
  background: #34b7f1;
  color: #fff;
  font-size: 0.857em;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wa-audio__onda {
  display: inline-flex;
  align-items: center;
  gap: 0.143em;
  flex: 1;
}

.wa-audio__onda i {
  width: 0.214em;
  border-radius: 0.143em;
  background: #8fbc8f;
}

.wa-audio__onda i:nth-child(odd) {
  height: 1em;
}
.wa-audio__onda i:nth-child(even) {
  height: 0.571em;
}
.wa-audio__onda i:nth-child(3n) {
  height: 1.286em;
}

.wa-audio__dur {
  font-size: 0.786em;
  color: #8a8a8a;
}

/* Barra de input */
.wa-input {
  display: flex;
  align-items: center;
  gap: 0.428em;
  padding: 0.571em 0.714em 1.571em;
  background: #f6f6f6;
}
.wa-input svg { width: 1.571em; height: 1.571em; }

.wa-input__btn {
  width: 2.571em;
  height: 2.571em;
  border: none;
  background: none;
  color: #007aff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  transition: background var(--duration-fast);
}

.wa-input__btn:hover {
  background: rgba(0, 122, 255, 0.1);
}

.wa-input__campo {
  flex: 1;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  padding: 0.5em 1em;
}

.wa-input__campo input {
  width: 100%;
  border: none;
  outline: none;
  background: none;
  font-size: 1em;
  font-family: inherit;
  color: #111;
}

/* Demo cerrado: botones del input apagados */
.wa-input__btn--off {
  opacity: 0.35;
  pointer-events: none;
}

.wa-input__campo input:disabled {
  color: #9b9b9b;
}

/* Overlay de grabación */
.wa-grabando {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.714em;
  padding: 0.857em 1em 1.714em;
  background: #f6f6f6;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 11;
}

.wa-grabando__punto {
  width: 0.857em;
  height: 0.857em;
  border-radius: 50%;
  background: #ff3b30;
  animation: grabPulso 1s ease-in-out infinite;
}

@keyframes grabPulso {
  0%,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.wa-grabando__tiempo {
  font-size: 1em;
  font-weight: 700;
  color: #111;
  min-width: 2.857em;
}

.wa-grabando__cancelar {
  margin-left: auto;
  border: none;
  background: none;
  color: #8e8e93;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  padding: 0.428em 0.714em;
}

.wa-grabando__enviar {
  width: 2.857em;
  height: 2.857em;
  border: none;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wa-grabando__enviar svg { width: 1.286em; height: 1.286em; }

/* Mobile: el ancho se deriva del alto disponible (svh menos topbar,
 * título, footer sticky y padding) para que el iPhone siempre quepa
 * completo sin invadir el CONTINUAR. Cap por vw en pantallas anchas
 * y por px en pantallas grandes. Font-size proporcional al ancho
 * escala todo el interior uniformemente. */
@media (max-width: 560px) {
  .demo-title {
    font-size: 20px;
  }
  .iphone {
    --w: clamp(200px, min(66vw, calc((100svh - 320px) / 1.85)), 300px);
    font-size: calc(var(--w) * 0.0412);
  }
}

/* --- 4.11 Tarjetas y leyendas de las pantallas informativas ------------ */

/* Hint sobre las cards que replican el dashboard real */
.dashboard-preview-hint {
  font-family: var(--font-body, inherit);
  font-size: 12px;
  color: var(--color-navy-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin: 12px 0 14px;
}

/* Tarjeta genérica estilo Duolingo (reemplaza las sombras clay) */
.duo-card {
  background: var(--color-white);
  border: 2px solid #e5e5e5;
  border-bottom-width: 4px;
  border-radius: 20px;
  box-shadow: none;
}

/* Leyenda del grid "No estás solo" */
.nuevo1-zona {
  max-width: 480px;
  margin-inline: auto;
  margin-top: 24px;
}

.nuevo1-leyenda {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 320px;
}

.nuevo1-leyenda__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body, inherit);
  font-size: 14px;
  color: var(--color-navy);
}

.nuevo1-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* En pills checkbox (step-13/16) el cuadrito de check SÍ se muestra */
.option-card--pill.checkbox .option-radio {
  display: flex;
}

/* --- 4.6 Respeto por accesibilidad: sin movimiento si el usuario lo pidió --- */
@media (prefers-reduced-motion: reduce) {
  .pablo-hero img,
  .topbar__pablo img,
  .progress-fill::after,
  .step.active .option-card {
    animation: none !important;
  }
  .btn-primary,
  .option-card {
    transition-duration: 0.01ms;
  }
}

/* Los WebP/GIF animados de Pablito traen el fondo blanqueado a #fff puro
 * (se optimizaron cuando el onboarding era blanco). Sobre el lila actual
 * dejaban un cuadro blanco: multiply funde el blanco con CUALQUIER fondo
 * (el resto de colores apenas se oscurece sobre un lila tan claro). */
.duo-stage__pablo img,
.fuente-pablo img {
  mix-blend-mode: multiply;
}