/* ======================================================================
   ELLA ELIGE — DIAGNÓSTICO V2
   styles.css

   Sistema visual reconstruido desde cero (arquitectura V2): pocos
   componentes (tarjeta, botón, checklist, stepper), muchísimo aire,
   tipografía como jerarquía principal. Cero animación compleja — la
   única transición es un fundido de opacidad puramente declarativo que
   JavaScript nunca espera ni coordina (ver ui.js, ScreenManager).
   Mobile-first: todo se diseña primero para el ancho de un teléfono.
   ====================================================================== */

:root{
  /* Paleta — tonos cálidos y suaves, coherentes con la marca. */
  --color-cream:      #FBF6EF;
  --color-blush:       #F3E4DE;
  --color-burgundy:     #6E2A3A;
  --color-burgundy-dark: #501E2A;
  --color-gold:          #C9A46B;
  --color-ink:            #2B2420;
  --color-ink-muted:       #6E655C;
  --color-white:            #FFFFFF;
  --color-alert:             #A6553D;

  /* Tintes pastel por perfil — mismos 5 tonos que ya existían en la V1,
     ningún color nuevo. Puramente decorativo, aplicado como fondo suave
     de #screen-results según el perfil (ver ui.js, applyTint). */
  --tint-coral:  #F1DCD3;
  --tint-gold:    #F2E4CE;
  --tint-rose:     #F5E1E6;
  --tint-violet:    #E6E1F0;
  --tint-sage:       #E1EAE1;

  --bg-app:        var(--color-cream);
  --bg-surface:     var(--color-white);
  --bg-surface-soft: var(--color-blush);

  --text-primary:  var(--color-ink);
  --text-muted:     var(--color-ink-muted);
  --accent:          var(--color-burgundy);
  --accent-strong:    var(--color-burgundy-dark);

  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;

  --radius-sm: 12px;
  --radius: 18px;
  --radius-pill: 999px;

  --max-width: 480px;

  /* Única duración de transición de toda la aplicación — un fundido
     corto y discreto. JS nunca espera a que termine (ver ui.js). */
  --duration-screen: 200ms;
}

*, *::before, *::after{
  box-sizing: border-box;
}

html, body{
  margin: 0;
  padding: 0;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-base);
  -webkit-text-size-adjust: 100%;
}

body{
  min-height: 100vh;
  min-height: 100dvh;
}

#app{
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ----------------------------------------------------------------------
   Barra de progreso del cuestionario — funcional, no decorativa.
---------------------------------------------------------------------- */
.app-progress{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--bg-surface-soft);
  z-index: 10;
  opacity: 0;
  transition: opacity var(--duration-screen) ease;
}
.app-progress.is-visible{ opacity: 1; }
.app-progress__fill{
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width var(--duration-screen) ease;
}

/* ----------------------------------------------------------------------
   Pantallas — cada una ocupa toda la vista; se muestran u ocultan
   alternando .is-active. El fundido de opacidad es puramente
   declarativo: si el navegador no llega a reproducirlo, el cambio es
   instantáneo y nada se rompe. JS nunca escucha "transitionend" ni
   coordina un temporizador con esta duración.
---------------------------------------------------------------------- */
.screen{
  position: absolute;
  inset: 0;
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--sp-8) var(--sp-5) var(--sp-6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transition: opacity var(--duration-screen) ease;
}
.screen.is-active{
  display: flex;
  justify-content: center;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce){
  .screen, .app-progress, .app-progress__fill{
    transition: none;
  }
}

.screen__inner{
  width: 100%;
  max-width: var(--max-width);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: auto 0;
}

/* ----------------------------------------------------------------------
   Tipografía — la jerarquía principal de todo el sistema.
---------------------------------------------------------------------- */
.eyebrow{
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

h1{
  margin: 0;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
}

h2{
  margin: 0;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
}

p{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary);
}

.meta{
  font-size: 13px;
  color: var(--text-muted);
}

/* ----------------------------------------------------------------------
   Botones — dos variantes únicamente.
---------------------------------------------------------------------- */
.btn-primary{
  appearance: none;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--color-white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: var(--sp-4) var(--sp-6);
  cursor: pointer;
  width: 100%;
}
.btn-primary:disabled{
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-tertiary{
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 14px;
  padding: var(--sp-3) var(--sp-2);
  cursor: pointer;
}

/* ----------------------------------------------------------------------
   Cuestionario
---------------------------------------------------------------------- */
.quiz-counter{
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.quiz-eyebrow{
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 var(--sp-1);
}

.answer-list{
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.answer-option{
  appearance: none;
  border: 1.5px solid var(--bg-surface-soft);
  border-radius: var(--radius);
  background: var(--bg-surface);
  padding: var(--sp-4);
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.answer-option.is-selected{
  border-color: var(--accent);
  background: var(--bg-surface-soft);
}
.answer-option__indicator{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--bg-surface-soft);
  flex-shrink: 0;
}
.answer-option.is-selected .answer-option__indicator{
  border-color: var(--accent);
  background: var(--accent);
}

.quiz-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}
.quiz-nav .btn-primary{
  width: auto;
  flex: 1;
}

/* ----------------------------------------------------------------------
   Pantalla "Analizando" — un solo mensaje centrado, nada más.
---------------------------------------------------------------------- */
.screen__inner--center{
  margin: auto;
  text-align: center;
  align-items: center;
}

.analyzing-message{
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ----------------------------------------------------------------------
   Resultado — jerarquía aprobada (V3.2). El nombre del perfil nunca se
   muestra aquí. Orden de importancia visual, de mayor a menor:
     1) .discovery-hook — encabezado INTRODUCTORIO, pequeño (peso h2)
     2) .discovery-feature — GRAN TARJETA de descubrimiento: la frase de
        poder, el elemento más importante de toda la pantalla
     3) .info-block (x3) — claramente secundarias, livianas
     4) .results-cta / .results-cta-lead — CTA, antes del beneficio
     5) .card--featured — beneficio del 25%, después del CTA, como
        recompensa
   Entrada progresiva solo con prefers-reduced-motion: no-preference,
   ver bloque de animación al final de esta sección — CSS puro, sin JS
   controlando ninguna secuencia.
---------------------------------------------------------------------- */
.discovery{
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
}

/* Título principal — editorial, serif, con jerarquía clara. Más
   importante que las etiquetas secundarias de las tarjetas de abajo,
   pero deliberadamente sin competir con la frase de descubrimiento de
   dentro de la gran tarjeta (que es más grande, en cursiva y en color
   de acento). Ancho acotado para que en móvil quepa en 2–3 líneas de
   forma natural, sin forzar saltos de línea manuales. */
.discovery-title{
  margin: 0;
  max-width: 300px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

/* GRAN TARJETA DE DESCUBRIMIENTO — la frase de poder vive aquí. Es el
   elemento visual más importante de toda la pantalla: tipografía serif
   editorial grande, comilla decorativa de fondo, franja de acento
   burgundy → gold, fondo en degradado suave, sombra profunda, esquinas
   amplias. Sin iconos de check ni listas: una sola frase tratada como
   pieza central. */
.discovery-feature{
  position: relative;
  margin-top: var(--sp-3);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  background: linear-gradient(165deg, var(--color-white) 0%, var(--bg-surface-soft) 100%);
  border: 1px solid rgba(110,42,58,.16);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(43,36,32,.04), 0 24px 48px rgba(43,36,32,.12);
  overflow: hidden;
}
.discovery-feature::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-burgundy) 0%, var(--color-gold) 100%);
}
.discovery-feature::after{
  content: "\201C";
  position: absolute;
  top: -6px;
  right: var(--sp-5);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 120px;
  line-height: 1;
  color: var(--color-burgundy);
  opacity: .08;
  pointer-events: none;
}
.discovery-feature__quote{
  position: relative;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 26px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent-strong);
}

/* Tintes de fondo por perfil — degradado radial suave detrás de todo
   #screen-results, aplicado por ui.js según el perfil ganador. Puramente
   decorativo: no revela el nombre del perfil. */
#screen-results.is-tint-coral{ background: radial-gradient(120% 60% at 18% -10%, var(--tint-coral) 0%, var(--bg-app) 55%); }
#screen-results.is-tint-gold{ background: radial-gradient(120% 60% at 18% -10%, var(--tint-gold) 0%, var(--bg-app) 55%); }
#screen-results.is-tint-rose{ background: radial-gradient(120% 60% at 18% -10%, var(--tint-rose) 0%, var(--bg-app) 55%); }
#screen-results.is-tint-violet{ background: radial-gradient(120% 60% at 18% -10%, var(--tint-violet) 0%, var(--bg-app) 55%); }
#screen-results.is-tint-sage{ background: radial-gradient(120% 60% at 18% -10%, var(--tint-sage) 0%, var(--bg-app) 55%); }

/* ----------------------------------------------------------------------
   "¿Qué significa?" / "¿Qué debes hacer ahora?" / "Cómo puedes empezar
   a cambiar esta historia" — claramente secundarias: más pequeñas y
   compactas que antes, sin competir con la gran tarjeta de arriba. Cada
   una con un acento discreto propio (punto, flecha, borde punteado)
   sin dejar de verse de la misma familia visual. Mismo contenido,
   mismos ids, ningún texto nuevo.
---------------------------------------------------------------------- */
.info-block{
  padding-top: var(--sp-3);
  border-top: 1px solid var(--bg-surface-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.info-block__label{
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}
.info-block__body{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-primary);
}
.info-block--meaning .info-block__label::before{
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: var(--sp-2);
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}
.info-block--nextstep{ border-top-color: var(--accent); }
.info-block--nextstep .info-block__label::before{
  content: "\2192";
  display: inline-block;
  margin-right: var(--sp-2);
  color: var(--accent);
  font-weight: 700;
}
.info-block--howto{ border-top-style: dashed; }

/* Línea introductoria del CTA — pequeña, justo antes del botón. */
.results-cta-lead{
  margin-top: var(--sp-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

/* CTA principal — ahora antes del beneficio del 25%. Sombra de marca +
   feedback táctil al presionar. */
.results-cta{
  box-shadow: 0 10px 24px rgba(110,42,58,.2);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.results-cta:active{
  transform: scale(0.98);
  box-shadow: 0 5px 12px rgba(110,42,58,.18);
}

/* Entrada progresiva — SOLO si el sistema permite movimiento. Fuera de
   este media query (o con reduced motion activo) todo se ve al 100% de
   inmediato: la pantalla es idéntica a como se vería sin animación.
   CSS puro — ningún JavaScript controla esta secuencia. */
@media (prefers-reduced-motion: no-preference){
  .discovery-title,
  .discovery-feature,
  .info-block,
  .results-cta-lead,
  .results-cta,
  #screen-results .card--featured{
    opacity: 0;
    animation: eeFadeUp .5s ease-out forwards;
  }
  .discovery-title{ animation-delay: 0ms; }
  .discovery-feature{ animation-delay: 120ms; }
  .info-block--meaning{ animation-delay: 300ms; }
  .info-block--nextstep{ animation-delay: 360ms; }
  .info-block--howto{ animation-delay: 420ms; }
  .results-cta-lead{ animation-delay: 480ms; }
  .results-cta{ animation-delay: 520ms; }
  #screen-results .card--featured{ animation-delay: 600ms; }

  @keyframes eeFadeUp{
    from{ opacity: 0; transform: translateY(10px); }
    to{ opacity: 1; transform: translateY(0); }
  }
}

/* ----------------------------------------------------------------------
   Tarjeta — componente base para la tarjeta de bono (única tarjeta con
   fondo/caja que queda en esta pantalla).
---------------------------------------------------------------------- */
.card{
  background: var(--bg-surface);
  border-radius: var(--radius);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.card.is-hidden{
  display: none;
}

.card__label{
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin: 0;
}

.card__body{
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0;
}
.card__body--strong{
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

/* ----------------------------------------------------------------------
   Link de "Repetir el diagnóstico" — discreto, debajo del CTA.
---------------------------------------------------------------------- */
.btn-restart{
  align-self: center;
  font-size: 13px;
}

/* ----------------------------------------------------------------------
   Tarjeta de bono — "🎁 Beneficio desbloqueado". Va DESPUÉS del CTA
   principal, como recompensa por completar el diagnóstico, no como
   argumento de venta principal: por eso no compite en posición con la
   gran tarjeta de descubrimiento ni con el CTA. Mismo contenido, misma
   lógica, solo más presencia — reutiliza .card/.card__label/.card__body.
---------------------------------------------------------------------- */
.card--featured{
  margin-top: var(--sp-5);
  padding: var(--sp-6) var(--sp-5);
  background: var(--bg-surface-soft);
  border: 2px solid var(--accent);
  gap: var(--sp-3);
  box-shadow: 0 1px 2px rgba(43,36,32,.05), 0 14px 30px rgba(43,36,32,.09);
}
/* Eyebrow del bono como pequeño "badge" — se siente como una recompensa
   desbloqueada, no como un título de tarjeta genérico. */
.card--featured .card__label:first-child{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 13px;
  padding: 4px var(--sp-3);
  background: var(--bg-surface);
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 2px rgba(43,36,32,.08);
}

.bonus-code-label{
  margin-top: var(--sp-2);
}
.bonus-code-box{
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1.5px dashed var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--sp-5);
  box-shadow: inset 0 1px 3px rgba(43,36,32,.06);
}
.bonus-code-box span{
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent-strong);
}
.btn-bonus-copy{
  align-self: center;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-pill);
  padding: var(--sp-2) var(--sp-5);
  color: var(--accent-strong);
  font-weight: 600;
}
.bonus-code-hint{
  margin-top: var(--sp-1);
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

/* ----------------------------------------------------------------------
   Panel de modo debug — solo existe en el DOM cuando la URL trae
   ?debug=true (ver ui.js, DebugPanel). Herramienta de desarrollo, no
   necesita seguir la identidad visual de marca.
---------------------------------------------------------------------- */
.debug-panel{
  position: fixed;
  bottom: var(--sp-3);
  right: var(--sp-3);
  z-index: 999;
  max-width: 280px;
  max-height: 60vh;
  overflow-y: auto;
  background: rgba(20, 16, 14, 0.92);
  color: #E8E1D8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
}
.debug-panel__row{
  margin: 0 0 2px;
  color: inherit;
  font-size: 11px;
  word-break: break-word;
}
.debug-panel__events{
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  max-height: 120px;
  overflow-y: auto;
}
.debug-panel__events li{
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 2px 0;
}