:root {
  --fondo: #f5f3ee;
  --superficie: #ffffff;
  --texto: #1d2433;
  --suave: #5c6474;
  --linea: #e2ddd3;
  --marca: #1f3a68;
  --marca-suave: #e6ecf6;
  --si: #1f7a55;
  --si-suave: #e3f3eb;
  --aveces: #c98a1b;
  --aveces-suave: #fbf0d9;
  --radio: 20px;
  --sombra: 0 10px 30px rgba(29, 36, 51, .08);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fondo); color: var(--texto);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45; min-height: 100vh; overflow-x: hidden;
}
.contenedor { max-width: 640px; margin: 0 auto; padding: 32px 16px 48px; }
.marca { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--marca); font-weight: 600; }
h1 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: clamp(30px, 7vw, 44px); line-height: 1.1; margin: 8px 0 12px; }
h2 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 24px; margin: 32px 0 12px; }
p.lead { color: var(--suave); font-size: 18px; margin: 0 0 24px; }
.tarjeta { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 24px; }
label { display: block; font-weight: 600; margin-bottom: 8px; }
input[type=text], input[type=password] {
  width: 100%; font: inherit; font-size: 18px; padding: 14px 16px;
  border: 2px solid var(--linea); border-radius: 12px; background: #fff; color: var(--texto);
}
input:focus { outline: none; border-color: var(--marca); }
button, .boton {
  font: inherit; font-weight: 600; font-size: 17px; border: 0; cursor: pointer;
  padding: 14px 20px; border-radius: 12px; background: var(--marca); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  transition: transform .08s ease, opacity .15s;
}
button:active { transform: scale(.96); }
button:disabled { opacity: .45; cursor: default; }
.secundario { background: transparent; color: var(--marca); border: 2px solid var(--marca-suave); }
.ancho { width: 100%; margin-top: 16px; }
.enlace { background: none; color: var(--suave); padding: 8px; font-weight: 500; font-size: 15px; text-decoration: underline; }
.aviso { color: var(--suave); font-size: 15px; }
.error { color: #b3261e; margin-top: 8px; }
.oculto { display: none !important; }

/* Inicio */
.emojis-inicio { font-size: 40px; letter-spacing: 6px; margin-bottom: 4px; }

/* Cuestionario */
.contador { color: var(--suave); font-size: 14px; display: flex; justify-content: space-between; align-items: center; min-height: 28px; }
.animo { background: var(--marca-suave); color: var(--marca); font-weight: 600; padding: 3px 10px; border-radius: 99px; font-size: 13px; animation: pop .35s ease; }
.progreso { height: 8px; background: var(--linea); border-radius: 99px; overflow: hidden; margin: 8px 0 24px; }
.progreso > div { height: 100%; background: linear-gradient(90deg, var(--marca), var(--si)); width: 0; transition: width .35s ease; }
.carta { text-align: center; padding: 32px 24px; min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.carta .emoji { font-size: 56px; line-height: 1; }
.carta .frase { font-family: "Fraunces", Georgia, serif; font-size: clamp(22px, 5.5vw, 30px); line-height: 1.25; }
.entra { animation: entrar .3s ease; }
.sale-si { animation: salirDer .22s ease forwards; }
.sale-no { animation: salirIzq .22s ease forwards; }
.sale-aveces { animation: salirArr .22s ease forwards; }
@keyframes entrar { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes salirDer { to { opacity: 0; transform: translateX(60px) rotate(4deg); } }
@keyframes salirIzq { to { opacity: 0; transform: translateX(-60px) rotate(-4deg); } }
@keyframes salirArr { to { opacity: 0; transform: translateY(-30px); } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.opciones button { flex-direction: column; gap: 4px; padding: 14px 8px; font-size: 15px; background: var(--superficie); color: var(--texto); border: 2px solid var(--linea); }
.opciones button span { font-size: 28px; line-height: 1; }
.opciones .op-si { background: var(--si); color: #fff; border-color: var(--si); }
.opciones .op-aveces:hover { border-color: var(--aveces); }
.opciones .op-no:hover { border-color: var(--suave); }

/* Resultados */
.retrato { text-align: center; padding: 32px 24px; background: linear-gradient(160deg, var(--marca-suave), var(--superficie) 70%); }
.retrato .emoji { font-size: 72px; line-height: 1; animation: pop .5s ease; }
.retrato .etiqueta { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); font-weight: 600; margin-top: 12px; }
.retrato h1 { margin: 4px 0 8px; }
.retrato p { color: var(--suave); font-size: 17px; margin: 0 auto; max-width: 440px; }
.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--si-suave); }
.lista li .em { flex: none; font-size: 22px; line-height: 1.2; }
.lista.aveces li { background: var(--aveces-suave); }
.lista.dudas li { background: var(--superficie); border: 1px solid var(--linea); flex-direction: column; gap: 6px; }
.lista.dudas li strong { display: flex; gap: 10px; }
.lista.dudas li small { color: var(--suave); font-size: 15px; padding-left: 32px; }
.subtitulo-lista { color: var(--suave); margin: 18px 0 10px; }
.cierre { text-align: center; font-size: 17px; margin: 24px 0 0; padding: 16px; border-radius: 14px; background: var(--marca-suave); color: var(--marca); font-weight: 600; }
.enlace-personal { word-break: break-all; font-size: 14px; color: var(--marca); }

@media (max-width: 380px) { .opciones button { font-size: 13px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #14171d; --superficie: #1d2129; --texto: #eef0f4; --suave: #a3aab8; --linea: #2f3542;
    --marca: #8fb0e8; --marca-suave: #26324a; --si: #3aa877; --si-suave: #18342a; --aveces: #e0b050; --aveces-suave: #3a301a;
    --sombra: none;
  }
  :root:not([data-theme="light"]) button:not(.secundario):not(.enlace):not(.opciones button) { color: #10141b; }
  :root:not([data-theme="light"]) .opciones .op-si { color: #10141b; }
  :root:not([data-theme="light"]) input[type=text], :root:not([data-theme="light"]) input[type=password] { background: var(--superficie); }
}