/* ==========================================================================
 * Pablo · estilo "awsmd" para TODO el onboarding (se carga al final).
 * Elegido por Jonathan: Instrument Serif cursiva + Inter Tight, fondo blanco
 * o negro según el modo del teléfono, tarjetas gris cálido, CTA negro y
 * acento azul. Sin personaje: Pablo habla solo con sus burbujas.
 * Solo cambia lo visual: mismos pasos, textos, orden y handlers.
 * ========================================================================== */

html[data-ios-tema="awsmd"] {
  --aw-bg: #ffffff;
  --aw-card: #f2f0f0;
  --aw-card-2: #e8e6e6;
  --aw-ink: #0d0f11;
  --aw-ink-2: #6b6e72;
  --aw-ink-3: #a6a8ac;
  --aw-cta: #0d0f11;
  --aw-cta-ink: #ffffff;
  --aw-accent: #4858e4;
  --aw-font: "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --aw-serif: "Instrument Serif", Georgia, serif;

  /* tokens del sitio original → nuevo estilo */
  --color-lila: var(--aw-bg);
  --color-lila-light: var(--aw-card);
  --color-lila-deep: var(--aw-card-2);
  --color-white: var(--aw-bg);
  --color-navy: var(--aw-ink);
  --color-navy-soft: var(--aw-ink-2);
  --pab-card: var(--aw-card);
  --pab-card-edge: transparent;
  --pab-border: transparent;
  --pab-ink: var(--aw-ink);
  --pab-ink-soft: var(--aw-ink-2);
  --pab-primary: var(--aw-cta);
  --pab-primary-edge: transparent;
  --pab-primary-ink: var(--aw-cta-ink);
  --pab-primary-strong: var(--aw-accent);
  --pab-amber-texto: var(--aw-ink);
  --pab-accent: var(--aw-accent);
  --pab-accent-edge: transparent;
  --pab-neutral: var(--aw-card);
  --pab-neutral-edge: transparent;
  --pab-drop-sm: 0px;
  --pab-drop: 0px;
  --pab-drop-lg: 0px;
  --pab-r-field: 16px;
  --pab-r-tile: 14px;
  --pab-r-card: 22px;
  --font-display: var(--aw-font);
  --font-body: var(--aw-font);
  --cer-1: transparent; --cer-2: transparent; --cer-3: transparent; --cer-4: transparent;
  --cer-5: transparent; --cer-6: transparent; --cer-7: transparent; --cer-8: transparent;
  --cer-1-edge: transparent; --cer-2-edge: transparent; --cer-3-edge: transparent; --cer-4-edge: transparent;
  --cer-5-edge: transparent; --cer-6-edge: transparent; --cer-7-edge: transparent; --cer-8-edge: transparent;
}
@media (prefers-color-scheme: dark) {
  html[data-ios-tema="awsmd"] {
    --aw-bg: #0d0f11;
    --aw-card: #1a1c1f;
    --aw-card-2: #26282c;
    --aw-ink: #f4f4f4;
    --aw-ink-2: #9a9da3;
    --aw-ink-3: #5d6066;
    --aw-cta: #f4f4f4;
    --aw-cta-ink: #0d0f11;
  }
}

html[data-ios-tema="awsmd"] body,
html[data-ios-tema="awsmd"] .app-shell,
html[data-ios-tema="awsmd"] .step {
  background: var(--aw-bg);
  color: var(--aw-ink);
  font-family: var(--aw-font);
  -webkit-font-smoothing: antialiased;
}

/* --- Sin personaje ------------------------------------------------------ */
html[data-ios-tema="awsmd"] .pablo-actor,
html[data-ios-tema="awsmd"] .topbar__pablo,
html[data-ios-tema="awsmd"] .duo-header__brand img {
  display: none !important;
}

/* --- Tipografía: títulos gruesos y apretados; lo destacado en serif ----- */
html[data-ios-tema="awsmd"] .step h1,
html[data-ios-tema="awsmd"] .step h2,
html[data-ios-tema="awsmd"] .onb-escena-titulo,
html[data-ios-tema="awsmd"] .demo-title,
html[data-ios-tema="awsmd"] .om-paywall__titulo,
html[data-ios-tema="awsmd"] .pw-head__titulo {
  font-family: var(--aw-font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: var(--aw-ink) !important;
}
html[data-ios-tema="awsmd"] .text-amber {
  font-family: var(--aw-serif) !important;
  font-style: italic;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: inherit !important;
}
html[data-ios-tema="awsmd"] .step .text-navy { color: var(--aw-ink) !important; }
html[data-ios-tema="awsmd"] .step .text-muted-foreground,
html[data-ios-tema="awsmd"] .onb-escena-sub { color: var(--aw-ink-2) !important; }

/* --- Barra superior ----------------------------------------------------- */
html[data-ios-tema="awsmd"] .topbar { background: var(--aw-bg); }
html[data-ios-tema="awsmd"] .btn-back,
html[data-ios-tema="awsmd"] .btn-exit {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--aw-card);
  color: var(--aw-ink);
  box-shadow: none;
  font-size: 18px;
}
html[data-ios-tema="awsmd"] .progress-track {
  height: 4px;
  border-radius: 4px;
  background: var(--aw-card-2);
  border: 0;
  box-shadow: none;
}
html[data-ios-tema="awsmd"] .progress-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--aw-accent);
  box-shadow: none;
  border: 0;
}
html[data-ios-tema="awsmd"] .btn-topbar-skip,
html[data-ios-tema="awsmd"] .duo-header__link,
html[data-ios-tema="awsmd"] .duo-footer__link {
  font-family: var(--aw-font);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.2px;
  text-transform: none;
  color: var(--aw-ink-2);
}
html[data-ios-tema="awsmd"] .duo-header {
  background: var(--aw-bg);
  border-bottom: 0;
}
html[data-ios-tema="awsmd"] .duo-header__brand span {
  font-family: var(--aw-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--aw-ink);
}

/* --- Burbujas de Pablo (estilo mensaje recibido) ----------------------- */
html[data-ios-tema="awsmd"] .speech-bubble {
  background: var(--aw-card);
  border: 0;
  border-radius: 22px 22px 22px 6px;
  box-shadow: none;
  padding: 14px 18px;
  font-family: var(--aw-font);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.4px;
  color: var(--aw-ink);
  text-align: left;
}
html[data-ios-tema="awsmd"] .speech-bubble::after { display: none; }
/* sin muñeco, la burbuja de la cabecera ocupa el ancho */
html[data-ios-tema="awsmd"] .fuente-header {
  background: var(--aw-bg);
  border-bottom: 0 !important;
}
html[data-ios-tema="awsmd"] .fuente-header__inner {
  padding: 8px 16px 8px;
}
html[data-ios-tema="awsmd"] .fuente-header .speech-bubble {
  max-width: none;
  flex: 1 1 auto;
}
/* pantallas de diálogo: burbuja grande, protagonista */
html[data-ios-tema="awsmd"] .duo-stage .speech-bubble {
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.8px;
  padding: 20px 22px;
  max-width: 340px;
}

/* --- Botones ------------------------------------------------------------ */
html[data-ios-tema="awsmd"] .btn-primary {
  min-height: 56px;
  border-radius: 999px;
  border: 0;
  background: var(--aw-cta);
  color: var(--aw-cta-ink);
  box-shadow: none;
  font-family: var(--aw-font);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.3px;
  text-transform: none;
  transition: transform var(--ios-spring-dur, 0.5s) var(--ios-spring, ease), background-color 0.2s ease-out, opacity 0.2s;
}
html[data-ios-tema="awsmd"] .btn-primary:hover { transform: none; box-shadow: none; }
html[data-ios-tema="awsmd"] .btn-primary:active { transform: scale(0.97); box-shadow: none; }
html[data-ios-tema="awsmd"] .btn-primary.disabled,
html[data-ios-tema="awsmd"] .btn-primary[disabled] {
  background: var(--aw-card);
  color: var(--aw-ink-3);
  box-shadow: none;
}
html[data-ios-tema="awsmd"] .btn-primary .arrow {
  background: var(--aw-accent);
  color: #fff;
}
html[data-ios-tema="awsmd"] .btn-secondary {
  border-radius: 999px;
  border: 0;
  background: var(--aw-card);
  color: var(--aw-ink);
  box-shadow: none;
  font-family: var(--aw-font);
  font-weight: 600;
}
html[data-ios-tema="awsmd"] .duo-footer,
html[data-ios-tema="awsmd"] .cta-footer {
  border-top: 0 !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--aw-bg) 0%, transparent), var(--aw-bg) 28%);
  box-shadow: none;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* --- Opciones en píldora ------------------------------------------------ */
html[data-ios-tema="awsmd"] .option-card--pill {
  --c: var(--ic, var(--aw-ink-2));
  background: var(--aw-card);
  border: 0;
  border-radius: 18px;
  box-shadow: none;
  min-height: 62px;
  padding: 12px 16px;
  gap: 14px;
  color: var(--aw-ink);
  transition: transform var(--ios-spring-dur, 0.5s) var(--ios-spring, ease), background-color 0.3s ease-out;
}
html[data-ios-tema="awsmd"] .option-card--pill:hover { transform: none; box-shadow: none; }
html[data-ios-tema="awsmd"] .option-card--pill:active { transform: scale(0.97); box-shadow: none; }
html[data-ios-tema="awsmd"] .option-card--pill .option-label {
  font-family: var(--aw-font);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.35px;
  color: var(--aw-ink);
  overflow-wrap: normal;
  transition: color 0.3s ease-out;
}
html[data-ios-tema="awsmd"] .option-card--pill .option-icon {
  width: 36px;
  height: 36px;
}
html[data-ios-tema="awsmd"] .option-card--pill .ios-icon {
  --s: 34px;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
html[data-ios-tema="awsmd"] .option-card--pill .ios-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--c);
  stroke-width: 2.3;
  filter: url(#aw-gloss) drop-shadow(0 3px 4px color-mix(in srgb, var(--c) 35%, transparent));
}
html[data-ios-tema="awsmd"] .option-card--pill .ios-icon svg [fill="#fff"] { fill: var(--c); }
/* logos de redes (SVG originales) sobre squircle blanco */
html[data-ios-tema="awsmd"] .option-card--pill .option-icon:has(svg):not(:has(.ios-icon)) {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #ffffff;
  border: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
html[data-ios-tema="awsmd"] .option-card--pill .option-icon:has(svg):not(:has(.ios-icon)) svg {
  width: 22px;
  height: 22px;
}
/* elegida: negro (blanco en modo oscuro), como la muestra */
html[data-ios-tema="awsmd"] .option-card--pill.selected,
html[data-ios-tema="awsmd"] .option-card--pill.selected:hover {
  background: var(--aw-cta);
  box-shadow: none;
  border: 0;
  animation: none;
}
html[data-ios-tema="awsmd"] .option-card--pill.selected .option-label { color: var(--aw-cta-ink); }
html[data-ios-tema="awsmd"] .option-card--pill .option-radio,
html[data-ios-tema="awsmd"] .option-card--pill.checkbox .option-radio {
  border-color: var(--aw-ink-3);
  background: transparent;
  box-shadow: none;
}
html[data-ios-tema="awsmd"] .option-card--pill.selected .option-radio {
  border-color: var(--aw-accent);
  background: var(--aw-accent);
}
html[data-ios-tema="awsmd"] .fuente-grid { gap: 8px; }
html[data-ios-tema="awsmd"] .fn-parati {
  background: var(--aw-accent);
  color: #fff;
  border: 0;
  box-shadow: none;
  font-family: var(--aw-font);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  border-radius: 999px;
}

/* --- Tarjetas, campos y bloques ---------------------------------------- */
html[data-ios-tema="awsmd"] .duo-card,
html[data-ios-tema="awsmd"] .tc-card,
html[data-ios-tema="awsmd"] .pago-card,
html[data-ios-tema="awsmd"] .slider-caja,
html[data-ios-tema="awsmd"] .plan-card,
html[data-ios-tema="awsmd"] .pw-plan,
html[data-ios-tema="awsmd"] .om-paywall__card,
html[data-ios-tema="awsmd"] .om-nota,
html[data-ios-tema="awsmd"] .pw-nota {
  background: var(--aw-card) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 22px;
  color: var(--aw-ink);
}
html[data-ios-tema="awsmd"] .plan-card.selected,
html[data-ios-tema="awsmd"] .pw-plan.selected,
html[data-ios-tema="awsmd"] .pw-plan[aria-checked="true"],
html[data-ios-tema="awsmd"] .plan-card[aria-checked="true"] {
  box-shadow: inset 0 0 0 2px var(--aw-ink) !important;
}
html[data-ios-tema="awsmd"] .plan-badge {
  background: var(--aw-accent) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-ios-tema="awsmd"] .cuenta-campo,
html[data-ios-tema="awsmd"] .cuenta-input {
  background: var(--aw-card);
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  color: var(--aw-ink);
  font-family: var(--aw-font);
  font-size: 17px;
}
html[data-ios-tema="awsmd"] .cuenta-input { min-height: 56px; padding-inline: 18px; }
html[data-ios-tema="awsmd"] .cuenta-input::placeholder { color: var(--aw-ink-3); }
html[data-ios-tema="awsmd"] .cuenta-input:focus,
html[data-ios-tema="awsmd"] .cuenta-campo:focus-within {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--aw-accent);
}
html[data-ios-tema="awsmd"] .cuenta-hint,
html[data-ios-tema="awsmd"] .pago-nota { color: var(--aw-ink-2); }
html[data-ios-tema="awsmd"] .cuenta-link { color: var(--aw-accent); }

/* demo de WhatsApp: pestañas como píldoras */
html[data-ios-tema="awsmd"] .demo-tip {
  background: var(--aw-card);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  color: var(--aw-ink);
  font-family: var(--aw-font);
  font-weight: 600;
}
html[data-ios-tema="awsmd"] .demo-tip .pab-icono,
html[data-ios-tema="awsmd"] .demo-tip img { display: none; }

/* deslizador de estrés */
html[data-ios-tema="awsmd"] .step input[type="range"] { accent-color: var(--aw-ink); }

/* "De cada 100 peruanos": colores del nuevo sistema */
html[data-ios-tema="awsmd"] .nuevo1-swatch { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  html[data-ios-tema="awsmd"] .btn-primary,
  html[data-ios-tema="awsmd"] .option-card--pill { transition: none; }
}

/* Sin personaje también dentro de escenas, deslizador y pago */
html[data-ios-tema="awsmd"] .step img[src*="/images/pablo/"],
html[data-ios-tema="awsmd"] .step video[src*="/images/pablo/"],
html[data-ios-tema="awsmd"] .step video:has(source[src*="/images/pablo/"]),
html[data-ios-tema="awsmd"] .slider-emoji {
  display: none !important;
}

/* "¿Cómo supiste…?": 2 columnas angostas, que el texto parta bien */
html[data-ios-tema="awsmd"] .step[data-step="step-fuente"] .option-card--pill {
  padding: 12px 12px;
  gap: 10px;
}
html[data-ios-tema="awsmd"] .step[data-step="step-fuente"] .option-card--pill .option-label {
  font-size: 15px;
  letter-spacing: -0.3px;
  overflow-wrap: anywhere;
}

/* ==========================================================================
 * Pablo = orbe de luz (como Gemini Live / modo voz de ChatGPT).
 * Vive en los mismos anclajes donde estaba el personaje.
 *  · Diálogos: cápsula grande que respira y fluye.
 *  · Preguntas: orbe pequeño como avatar junto a la burbuja.
 *  · Analizando: fluye más rápido (pensando). Celebración: late.
 * ========================================================================== */
html[data-ios-tema="awsmd"] {
  --orb-a: #2f6bff;
  --orb-b: #8fb4ff;
  --orb-c: #6c4dff;
  --orb-d: #31c7ff;
  --orb-top: #f3f6ff;
}
@media (prefers-color-scheme: dark) {
  html[data-ios-tema="awsmd"] { --orb-top: #1b2b66; }
}
html[data-ios-tema="awsmd"] [data-pablo-anclaje] {
  position: relative;
  display: block !important;
  flex: none;
  overflow: hidden;
  isolation: isolate;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--orb-top) 0%, color-mix(in srgb, var(--orb-a) 55%, var(--orb-top)) 55%, var(--orb-a) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 18px 40px -14px color-mix(in srgb, var(--orb-a) 70%, transparent);
  animation: orbBreathe 4.5s ease-in-out infinite;
}
html[data-ios-tema="awsmd"] [data-pablo-anclaje]::before,
html[data-ios-tema="awsmd"] [data-pablo-anclaje]::after {
  content: "";
  position: absolute;
  inset: -40%;
  filter: blur(14px);
  pointer-events: none;
}
html[data-ios-tema="awsmd"] [data-pablo-anclaje]::before {
  background:
    radial-gradient(35% 30% at 30% 62%, var(--orb-c), transparent 70%),
    radial-gradient(40% 32% at 68% 70%, var(--orb-d), transparent 70%),
    radial-gradient(30% 26% at 52% 80%, var(--orb-a), transparent 70%);
  animation: orbFlow 7s linear infinite;
}
html[data-ios-tema="awsmd"] [data-pablo-anclaje]::after {
  background: radial-gradient(45% 30% at 50% 18%, rgba(255, 255, 255, 0.9), transparent 70%);
  mix-blend-mode: soft-light;
  animation: orbFlow 11s linear infinite reverse;
}
@keyframes orbFlow {
  to { transform: rotate(360deg); }
}
@keyframes orbBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
/* tamaños por lugar */
html[data-ios-tema="awsmd"] .duo-stage [data-pablo-anclaje],
html[data-ios-tema="awsmd"] .duo-stage__pablo {
  width: 140px !important;
  height: 140px !important;
  min-height: 0 !important;
  margin: 34px auto 0 !important;
}
html[data-ios-tema="awsmd"] .fuente-pablo {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  align-self: flex-end;
  margin-bottom: 2px;
}
html[data-ios-tema="awsmd"] .fuente-pablo::before,
html[data-ios-tema="awsmd"] .fuente-pablo::after { filter: blur(5px); }
/* estados */
html[data-ios-tema="awsmd"] .step[data-step="step-analizando"] [data-pablo-anclaje]::before { animation-duration: 1.6s; }
html[data-ios-tema="awsmd"] .step[data-step="step-analizando"] [data-pablo-anclaje] { animation-duration: 1.4s; }
html[data-ios-tema="awsmd"] .step[data-step="step-fiesta"] [data-pablo-anclaje] { animation: orbCheer 1.1s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes orbCheer {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.12, 0.92); }
  60% { transform: scale(0.96, 1.05); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ios-tema="awsmd"] [data-pablo-anclaje],
  html[data-ios-tema="awsmd"] [data-pablo-anclaje]::before,
  html[data-ios-tema="awsmd"] [data-pablo-anclaje]::after { animation: none !important; }
}
html[data-ios-tema="awsmd"] [data-pablo-anclaje] { visibility: visible !important; opacity: 1 !important; }
html[data-ios-tema="awsmd"] [data-pablo-anclaje] > *,
html[data-ios-tema="awsmd"] .duo-prop { display: none !important; }

/* Tras un avance automático, la pantalla nueva no recibe toques por un momento
 * (evita elegir o saltar sin querer con el toque que iba para la anterior). */
html[data-auto-avance] .step { pointer-events: none !important; }

/* Logos de redes: colores originales con el mismo brillo cromado de los
 * glifos, sin caja blanca (flotan igual que los demás íconos). */
html[data-ios-tema="awsmd"] .option-card--pill .option-icon:has(svg):not(:has(.ios-icon)) {
  width: 36px;
  height: 36px;
  background: none;
  box-shadow: none;
  border-radius: 0;
  gap: 0;
}
html[data-ios-tema="awsmd"] .option-card--pill .option-icon:has(svg):not(:has(.ios-icon)) svg {
  width: 32px;
  height: 32px;
  filter: none;
}
/* Facebook + Instagram juntos */
html[data-ios-tema="awsmd"] .option-card--pill .option-icon:has(.logo-fb) { width: 48px; }
html[data-ios-tema="awsmd"] .option-card--pill .option-icon:has(.logo-fb) svg { width: 26px; height: 26px; }
html[data-ios-tema="awsmd"] .option-card--pill .option-icon .logo-fb { margin-right: -6px; position: relative; z-index: 1; }
/* "¿Cómo supiste…?": que las palabras con barra no se corten a la mitad */
html[data-ios-tema="awsmd"] .step[data-step="step-fuente"] .option-card--pill .option-label {
  font-size: 14.5px;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Ojos del orbe (variante 1 "Óvalos"): parpadean y miran a los lados.
 * El brillo interno pasa al fondo para dejar ::before/::after a los ojos. */
html[data-ios-tema="awsmd"] [data-pablo-anclaje] {
  background:
    radial-gradient(35% 30% at 30% 62%, rgba(108, 77, 255, .9), transparent 70%),
    radial-gradient(40% 32% at 70% 72%, rgba(49, 199, 255, .9), transparent 70%),
    radial-gradient(45% 30% at 50% 16%, rgba(255, 255, 255, .85), transparent 70%),
    linear-gradient(180deg, var(--orb-top) 0%, color-mix(in srgb, var(--orb-a) 55%, var(--orb-top)) 55%, var(--orb-a) 100%);
  background-size: 200% 200%, 200% 200%, 100% 100%, 100% 100%;
  animation: orbBreathe 4.5s ease-in-out infinite, orbFondo 8s ease-in-out infinite;
}
@keyframes orbFondo { 0%,100% { background-position: 0% 0%, 100% 100%, 0 0, 0 0; } 50% { background-position: 100% 60%, 0% 30%, 0 0, 0 0; } }
html[data-ios-tema="awsmd"] [data-pablo-anclaje]::before,
html[data-ios-tema="awsmd"] [data-pablo-anclaje]::after {
  inset: auto;
  top: 38%;
  width: 15%;
  height: 22%;
  border-radius: 50%;
  background: #fff;
  filter: none;
  mix-blend-mode: normal;
  box-shadow: 0 2px 6px rgba(0, 30, 120, .25);
  animation: ojoParpadeo 4.2s infinite, ojoMirar 7s ease-in-out infinite;
}
html[data-ios-tema="awsmd"] [data-pablo-anclaje]::before { left: 31%; }
html[data-ios-tema="awsmd"] [data-pablo-anclaje]::after { right: 31%; }
html[data-ios-tema="awsmd"] .fuente-pablo::before,
html[data-ios-tema="awsmd"] .fuente-pablo::after { filter: none; }
@keyframes ojoParpadeo { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes ojoMirar { 0%, 40%, 100% { translate: 0 0; } 50%, 65% { translate: -12% 0; } 75%, 90% { translate: 12% 0; } }
html[data-ios-tema="awsmd"] .step[data-step="step-analizando"] [data-pablo-anclaje]::before,
html[data-ios-tema="awsmd"] .step[data-step="step-analizando"] [data-pablo-anclaje]::after { animation: ojoParpadeo 4.2s infinite; translate: 10% -25%; }
html[data-ios-tema="awsmd"] .step[data-step="step-fiesta"] [data-pablo-anclaje]::before,
html[data-ios-tema="awsmd"] .step[data-step="step-fiesta"] [data-pablo-anclaje]::after {
  animation: none; background: transparent; box-shadow: none; border: 4px solid #fff;
  border-bottom-color: transparent; border-left-color: transparent; rotate: -45deg; height: 15%; border-radius: 50% 50% 0 50%;
}

/* Resumen: tarjetas grandes con color por nivel + leyenda (elegido en el lab) */
html[data-ios-tema="awsmd"] .res-radar { display: none !important; }
html[data-ios-tema="awsmd"] .res-grafica { display: flex; flex-direction: column; gap: 8px; }
html[data-ios-tema="awsmd"] .res-eje {
  --n: #ff9500;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--aw-card);
  border-radius: 18px;
  padding: 14px 14px 14px 72px;
  min-height: 82px;
  box-shadow: inset 5px 0 0 var(--n);
}
html[data-ios-tema="awsmd"] .res-eje[data-nivel="bajo"] { --n: #ff3b30; }
html[data-ios-tema="awsmd"] .res-eje[data-nivel="medio"] { --n: #ff9500; }
html[data-ios-tema="awsmd"] .res-eje[data-nivel="alto"] { --n: #34c759; }
html[data-ios-tema="awsmd"] .res-eje::before {
  content: ""; position: absolute; left: 16px; top: 50%; translate: 0 -50%;
  width: 44px; height: 44px; border-radius: 12px; background: var(--c) var(--ic) center / 26px no-repeat;
}
html[data-ios-tema="awsmd"] .res-eje[data-res-eje="claridad"] { --c: #5856d6; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4 20.4h16'/%3E%3Crect x='5.2' y='12' width='3.2' height='6' rx='.8' fill='%23fff'/%3E%3Crect x='10.4' y='8' width='3.2' height='10' rx='.8' fill='%23fff'/%3E%3Crect x='15.6' y='4.4' width='3.2' height='13.6' rx='.8' fill='%23fff'/%3E%3C/svg%3E"); }
html[data-ios-tema="awsmd"] .res-eje[data-res-eje="mes"] { --c: #ff3b30; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3.2'/%3E%3Cpath d='M3.5 9.6h17M8 3v3.6M16 3v3.6M8.7 14.8l2.2 2.2 4.4-4.5'/%3E%3C/svg%3E"); }
html[data-ios-tema="awsmd"] .res-eje[data-res-eje="plan"] { --c: #ff2d55; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 12.3C4.2 9 7.5 6.7 11.8 6.7c1.9 0 3.6.4 4.9 1.2l2.1-1.1-.3 2.7c.9.8 1.5 1.7 1.7 2.7h1.2v3h-1.4c-.5 1.2-1.4 2.2-2.6 2.9v2.4h-2.6v-1.6c-.9.2-1.8.3-2.8.3s-1.9-.1-2.8-.3v1.6H6.7v-2.6c-1.6-1.2-2.5-2.9-2.5-4.9z'/%3E%3Cpath d='M10 9.4h3.4'/%3E%3Ccircle cx='11.7' cy='3.3' r='1.7'/%3E%3C/svg%3E"); }
html[data-ios-tema="awsmd"] .res-eje__icono, html[data-ios-tema="awsmd"] .res-pista { display: none !important; }
html[data-ios-tema="awsmd"] .res-eje__cab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1; }
html[data-ios-tema="awsmd"] .res-eje__nombre { font-size: 14px; font-weight: 500; color: var(--aw-ink-2); }
html[data-ios-tema="awsmd"] .res-eje__valor { font-size: 19px; font-weight: 700; letter-spacing: -.4px; color: var(--aw-ink); text-align: left; }
html[data-ios-tema="awsmd"] .res-eje::after {
  content: "Regular"; position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 999px;
  color: color-mix(in srgb, var(--n) 80%, #000); background: color-mix(in srgb, var(--n) 15%, transparent);
}
html[data-ios-tema="awsmd"] .res-eje[data-nivel="bajo"]::after { content: "Por mejorar"; }
html[data-ios-tema="awsmd"] .res-eje[data-nivel="alto"]::after { content: "Bien"; }
html[data-ios-tema="awsmd"] .res-eje { padding-right: 96px; }
html[data-ios-tema="awsmd"] .res-leyenda { display: flex; justify-content: center; gap: 14px; margin: 10px 0 0; color: var(--aw-ink-2); font-size: 13px; }
html[data-ios-tema="awsmd"] .res-leyenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--l); margin-right: 6px; vertical-align: -1px; }
html[data-ios-tema="awsmd"] .res-lectura { color: var(--aw-ink-2); font-size: 16px; }
html[data-ios-tema="awsmd"] .res-grafica { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }

/* Logos = íconos oficiales de cada app (vector, nítidos) */
html[data-ios-tema="awsmd"] .option-card--pill .option-icon:has(.app-ic) { width: auto; height: 36px; display: inline-flex; gap: 0; background: none; box-shadow: none; }
html[data-ios-tema="awsmd"] .option-card--pill .option-icon .app-ic { width: 36px !important; height: 36px !important; filter: drop-shadow(0 1px 2px rgba(0,0,0,.12)) !important; border-radius: 9px; }
html[data-ios-tema="awsmd"] .option-card--pill .option-icon .app-ic + .app-ic { margin-left: -8px; }

html[data-ios-tema="awsmd"] .fuente-header__inner { align-items: center; }
html[data-ios-tema="awsmd"] .fuente-pablo { align-self: center; margin-bottom: 0; }
html[data-ios-tema="awsmd"] .step[data-step="step-fuente"] .option-card--pill .option-label { hyphens: manual; overflow-wrap: normal; word-break: normal; }
/* íconos oficiales de App Store: máscara de ícono de iOS */
html[data-ios-tema="awsmd"] .option-card--pill .option-icon img.app-ic { display: block !important; width: 36px; height: 36px; border-radius: 22.5%; box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.12); }
html[data-ios-tema="awsmd"] .option-card--pill .option-icon:has(img.app-ic) { width: auto; height: 36px; display: inline-flex; background: none; box-shadow: none; }
html[data-ios-tema="awsmd"] .option-card--pill .option-icon img.app-ic + img.app-ic { margin-left: -8px; box-shadow: 0 0 0 2px var(--aw-card), 0 1px 2px rgba(0,0,0,.12); }
html[data-ios-tema="awsmd"] .option-card--pill .option-icon:has(img.app-ic + img.app-ic) img.app-ic { width: 32px; height: 32px; }

/* Resumen · Puntaje de salud financiera (elegido en el lab) */
html[data-ios-tema="awsmd"] .res-score { background: var(--aw-card); border-radius: 22px; padding: 16px; margin-bottom: 8px; text-align: center; }
html[data-ios-tema="awsmd"] .res-score small { color: var(--aw-ink-2); font-size: 14px; }
html[data-ios-tema="awsmd"] .res-score__num { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
html[data-ios-tema="awsmd"] .res-score__num b { font-size: 72px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--aw-ink); }
html[data-ios-tema="awsmd"] .res-score__num span { color: var(--aw-ink-2); font-size: 20px; font-weight: 600; }
html[data-ios-tema="awsmd"] .res-score__seg { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-top: 10px; }
html[data-ios-tema="awsmd"] .res-score__seg i { height: 11px; border-radius: 5px; background: color-mix(in srgb, var(--aw-ink) 9%, transparent); transition: background .2s; }
html[data-ios-tema="awsmd"] .res-score__seg i.on { background: var(--sc); }
/* tarjetas compactas debajo del puntaje */
html[data-ios-tema="awsmd"] .res-eje { min-height: 66px; padding: 10px 92px 10px 62px; }
html[data-ios-tema="awsmd"] .res-eje::before { left: 12px; width: 38px; height: 38px; border-radius: 11px; background-size: 22px; }
html[data-ios-tema="awsmd"] .res-eje__valor { font-size: 17px; }

/* Panel de selección · Píldoras (elegido en el lab), en todas las preguntas
 * con opciones menos la lista de funciones "Para ti". */
html[data-ios-tema="awsmd"] .fuente-grid:not(.fn-lista) {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  grid-template-columns: none;
  align-content: flex-start;
}
html[data-ios-tema="awsmd"] .fuente-grid:not(.fn-lista) .option-card--pill {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 50px;
  padding: 6px 18px 6px 7px;
  gap: 10px;
  border-radius: 999px;
}
html[data-ios-tema="awsmd"] .fuente-grid:not(.fn-lista) .option-card--pill .option-label {
  flex: 0 1 auto;
  font-size: 16.5px;
  white-space: normal;
}
html[data-ios-tema="awsmd"] .fuente-grid:not(.fn-lista) .option-card--pill .option-icon img.app-ic { border-radius: 50%; }
html[data-ios-tema="awsmd"] .fuente-grid:not(.fn-lista) .option-card--pill .option-icon img.app-ic + img.app-ic { box-shadow: 0 0 0 2px var(--aw-card); }
html[data-ios-tema="awsmd"] .fuente-grid:not(.fn-lista) .option-card--pill.selected .option-icon img.app-ic + img.app-ic { box-shadow: 0 0 0 2px var(--aw-cta); }
html[data-ios-tema="awsmd"] .step[data-step="step-fuente"] .option-card--pill { padding: 6px 18px 6px 7px; gap: 10px; }
html[data-ios-tema="awsmd"] .step[data-step="step-fuente"] .option-card--pill .option-label { font-size: 16.5px; }
html[data-ios-tema="awsmd"] .fuente-grid:not(.fn-lista) .option-card--pill { border-radius: 999px !important; }

/* Resumen: brillo del color del nivel, de izquierda a derecha (como "Historias") */
html[data-ios-tema="awsmd"] .res-eje {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--n) 30%, transparent) 0%, color-mix(in srgb, var(--n) 10%, transparent) 45%, transparent 80%),
    var(--aw-card);
  box-shadow: none;
}
html[data-ios-tema="awsmd"] .res-score {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--sc, #FF9500) 28%, transparent) 0%, color-mix(in srgb, var(--sc, #FF9500) 8%, transparent) 50%, transparent 85%),
    var(--aw-card);
  transition: background .4s;
}

/* ==========================================================================
 * Orbe final (elegido en el lab): terciopelo azul eléctrico + halo que
 * respira (variante 4) + rebote al tocarlo (variante 7). Ojos "Óvalos".
 * ========================================================================== */
html[data-ios-tema="awsmd"] {
  --orb-t: #8fb2ff;
  --orb-base: #1546ff;
  --orb-deep: #06155e;
  --orb-glow: rgba(21, 70, 255, .7);
}
html[data-ios-tema="awsmd"] [data-pablo-anclaje] {
  overflow: visible;
  background:
    radial-gradient(circle, transparent 58%, rgba(255, 255, 255, .32) 100%),
    radial-gradient(circle at 50% 50%, var(--orb-deep) 0%, var(--orb-base) 62%, color-mix(in srgb, var(--orb-base) 45%, #fff) 100%);
  background-size: auto;
  box-shadow: 0 18px 34px -16px var(--orb-glow);
  cursor: pointer;
  animation: orbHalo 3s ease-in-out infinite;
}
html[data-ios-tema="awsmd"] [data-pablo-anclaje].toca {
  animation: orbRebote .7s cubic-bezier(.3, 1.6, .5, 1), orbHalo 3s ease-in-out infinite;
}
@keyframes orbHalo {
  0%, 100% { box-shadow: 0 18px 34px -16px var(--orb-glow), 0 0 0 0 rgba(21, 70, 255, 0); }
  50% { box-shadow: 0 18px 34px -16px var(--orb-glow), 0 0 40px 10px rgba(21, 70, 255, .45); }
}
@keyframes orbRebote {
  0% { transform: scale(1); }
  20% { transform: scale(1.18, .78); }
  45% { transform: scale(.88, 1.12); }
  65% { transform: scale(1.05, .95); }
  100% { transform: scale(1); }
}
/* el avatar pequeño respira con un halo más chico */
html[data-ios-tema="awsmd"] .fuente-pablo { animation-name: orbHaloS; }
html[data-ios-tema="awsmd"] .fuente-pablo.toca { animation: orbRebote .7s cubic-bezier(.3, 1.6, .5, 1), orbHaloS 3s ease-in-out infinite; }
@keyframes orbHaloS {
  0%, 100% { box-shadow: 0 8px 16px -8px var(--orb-glow), 0 0 0 0 rgba(21, 70, 255, 0); }
  50% { box-shadow: 0 8px 16px -8px var(--orb-glow), 0 0 16px 4px rgba(21, 70, 255, .45); }
}
/* "analizando": el halo late más rápido; la celebración conserva su rebote */
html[data-ios-tema="awsmd"] .step[data-step="step-analizando"] [data-pablo-anclaje] { animation-duration: 1.2s; }

/* Orbe · movimiento: entra al cargar cada pantalla, habla con cada frase,
 * y en "Analizando" piensa (mira arriba y gira suave). */
html[data-ios-tema="awsmd"] [data-pablo-anclaje].entra {
  animation: orbEntra .9s cubic-bezier(.3, 1.6, .5, 1) both, orbHalo 3s ease-in-out .9s infinite;
}
html[data-ios-tema="awsmd"] .fuente-pablo.entra {
  animation: orbEntra .9s cubic-bezier(.3, 1.6, .5, 1) both, orbHaloS 3s ease-in-out .9s infinite;
}
@keyframes orbEntra {
  0% { opacity: 0; transform: translateY(24px) scale(.3); }
  55% { opacity: 1; transform: translateY(-6px) scale(1.12, .92); }
  75% { transform: translateY(0) scale(.96, 1.05); }
  100% { opacity: 1; transform: none; }
}
html[data-ios-tema="awsmd"] [data-pablo-anclaje].habla {
  animation: orbVoz 1.1s ease-in-out, orbHalo 3s ease-in-out infinite;
}
html[data-ios-tema="awsmd"] .fuente-pablo.habla {
  animation: orbVoz 1.1s ease-in-out, orbHaloS 3s ease-in-out infinite;
}
@keyframes orbVoz {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.07, .93); }
  30% { transform: scale(.97, 1.04); }
  50% { transform: scale(1.06, .94); }
  70% { transform: scale(.98, 1.03); }
  85% { transform: scale(1.03, .97); }
}
html[data-ios-tema="awsmd"] .step[data-step="step-analizando"] [data-pablo-anclaje] {
  animation: orbPiensa 2.4s ease-in-out infinite, orbHalo 1.2s ease-in-out infinite;
}
html[data-ios-tema="awsmd"] .step[data-step="step-analizando"] [data-pablo-anclaje]::before,
html[data-ios-tema="awsmd"] .step[data-step="step-analizando"] [data-pablo-anclaje]::after {
  animation: ojoParpadeo 3s infinite; translate: 12% -28%;
}
@keyframes orbPiensa {
  0%, 100% { transform: rotate(0) translateY(0); }
  25% { transform: rotate(-8deg) translateY(-4px); }
  75% { transform: rotate(8deg) translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ios-tema="awsmd"] [data-pablo-anclaje].entra,
  html[data-ios-tema="awsmd"] [data-pablo-anclaje].habla { animation: none; }
}

/* ==========================================================================
 * Cajas de opción: "Tinte de marca" (elegido en el lab). Cada caja brilla
 * con el color de su ícono de izquierda a derecha; la elegida pasa a negro.
 * Íconos de color plano (sin el brillo 3D, que queda solo en "Quiero
 * aprender a…").
 * ========================================================================== */
html[data-ios-tema="awsmd"] .option-card--pill {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--c) 24%, transparent) 0%, color-mix(in srgb, var(--c) 7%, transparent) 55%, transparent 100%),
    var(--aw-card);
}
html[data-ios-tema="awsmd"] .option-card--pill.selected,
html[data-ios-tema="awsmd"] .option-card--pill.selected:hover { background: var(--aw-cta); }
html[data-ios-tema="awsmd"] .option-card--pill .ios-icon svg { filter: none !important; stroke-width: 2.1; }
/* "¿Cómo supiste…?": el tinte toma el color de cada red */
html[data-ios-tema="awsmd"] .option-card--pill:has(img[data-logo="google"]) { --c: #4285f4; }
html[data-ios-tema="awsmd"] .option-card--pill:has(img[data-logo="tiktok"]) { --c: #ee1d52; }
html[data-ios-tema="awsmd"] .option-card--pill:has(img[data-logo="youtube"]) { --c: #ff0000; }
html[data-ios-tema="awsmd"] .option-card--pill:has(img[data-logo="facebook"]) { --c: #d6249f; }
html[data-ios-tema="awsmd"] .option-card--pill:has(img[data-logo="whatsapp"]) { --c: #25d366; }

/* Sin salto al cambiar de pantalla: el orbe solo aparece suave (pedido de Jonathan). */
@keyframes orbEntra { from { opacity: 0; } to { opacity: 1; } }

/* "De cada 100 personas": dona (elegida en el lab) en lugar de los puntos */
html[data-ios-tema="awsmd"] .step[data-step="step-nuevo-1"] .duo-card { display: none !important; }
html[data-ios-tema="awsmd"] .nuevo1-dona { position: relative; width: 190px; height: 190px; margin: 0 auto; }
html[data-ios-tema="awsmd"] .nuevo1-dona svg { width: 100%; height: 100%; rotate: -90deg; }
html[data-ios-tema="awsmd"] .nuevo1-dona circle { transition: stroke-dasharray 1.1s cubic-bezier(.2, .8, .2, 1); }
html[data-ios-tema="awsmd"] .nuevo1-dona > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
html[data-ios-tema="awsmd"] .nuevo1-dona b { font: 800 54px/1 var(--aw-font); letter-spacing: -2.5px; color: var(--aw-ink); }
html[data-ios-tema="awsmd"] .nuevo1-dona span { color: var(--aw-ink-2); font: 600 13px var(--aw-font); }
html[data-ios-tema="awsmd"] .nuevo1-leyenda__item:nth-child(1) .nuevo1-swatch { background: #FF9500 !important; }
html[data-ios-tema="awsmd"] .nuevo1-leyenda__item:nth-child(2) .nuevo1-swatch { background: #1546FF !important; }
html[data-ios-tema="awsmd"] .nuevo1-leyenda__item:nth-child(3) .nuevo1-swatch { background: #A9B4D8 !important; }
html[data-ios-tema="awsmd"] .nuevo1-leyenda { color: var(--aw-ink); }

/* ==========================================================================
 * Pedido de Jonathan: "Quiero aprender a…" se ve completo en una sola vista
 * (sin scroll) y, donde hay "¿Ya eres miembro?", el texto va ENCIMA del botón
 * Continuar, que ocupa todo el ancho.
 * ========================================================================== */
html[data-ios-tema="awsmd"] .step[data-step="step-primer"] .primer-body{gap:12px!important;overflow:hidden!important;justify-content:flex-start!important;padding-top:6px!important;padding-bottom:max(34px,env(safe-area-inset-bottom))!important}
html[data-ios-tema="awsmd"] .step[data-step="step-primer"] h2{margin:0!important}
html[data-ios-tema="awsmd"] .step[data-step="step-primer"] .options-grid{gap:8px!important;flex:1 1 auto;min-height:0;grid-template-rows:repeat(3,minmax(0,1fr))!important}
html[data-ios-tema="awsmd"] .step[data-step="step-primer"] .option-card--tile{min-height:0!important;padding:10px 12px!important}
html[data-ios-tema="awsmd"] .step[data-step="step-primer"] .option-card--tile .option-label{font-size:clamp(13px,2.4vh,16px)!important;line-height:1.15!important}
html[data-ios-tema="awsmd"] .duo-footer:has(.duo-footer__link){display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important}
html[data-ios-tema="awsmd"] .duo-footer:has(.duo-footer__link) .duo-footer__link{order:-1;align-self:center;text-align:center;padding:4px 8px}
html[data-ios-tema="awsmd"] .duo-footer:has(.duo-footer__link) .btn-continue{width:100%!important;flex:none}
html[data-ios-tema="awsmd"] .duo-footer:has(.duo-footer__link) .duo-footer__link{width:100%!important;text-align:center!important;justify-content:center!important}