/* Ferrer & Asociados · tema compartido (paleta y tipografías de la Smart Class) */
:root {
  --navy: #2C4183;
  --navy-2: #244B96;
  --navy-3: #1A3E7B;
  --deep: #002060;
  --ink: #081C3B;
  --gold: #E1BD37;
  --gold-2: #FFC000;
  --gold-3: #FFD639;
  --gris: #5B6478;
  --linea: #E3E7F0;
  --suave: #F3F5F9;
  --ok: #1F9E6E;
  --error: #D64545;

  /* Colores de respuesta (forma + color, nunca solo color) */
  --a0: #2A5BC4; /* triángulo */
  --a1: #D9A400; /* rombo */
  --a2: #E0603F; /* círculo */
  --a3: #1F8F7A; /* cuadrado */

  --radio: 14px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
  --sombra: 0 10px 30px rgba(8, 28, 59, .18);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Roboto", Arial, sans-serif;
  color: #fff;
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p { margin: 0; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
[hidden] { display: none !important; }

.titular { font-family: "Oswald", "Roboto", sans-serif; font-weight: 500; letter-spacing: .01em; }
.display { font-family: "Red Hat Display", "Roboto", sans-serif; font-weight: 900; }

/* Fondo de marca: azul profundo con brillo dorado sutil */
.fondo {
  min-height: 100%;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(225, 189, 55, .16), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(42, 91, 196, .35), transparent 60%),
    linear-gradient(160deg, var(--deep) 0%, var(--ink) 70%);
}

/* Trazo dorado bajo títulos, como el del logo */
.trazo {
  display: inline-block;
  position: relative;
}
.trazo::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -4%;
  bottom: -.12em;
  height: .22em;
  background: linear-gradient(90deg, var(--gold-2), var(--gold-3) 70%, rgba(255, 214, 57, 0));
  border-radius: 999px;
  transform: skewX(-12deg);
  z-index: -1;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  border: 0;
  border-radius: 999px;
  padding: .85em 1.6em;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--gold-2);
  box-shadow: 0 4px 0 #B58D1A;
  transition: transform .15s var(--ease), box-shadow .15s, background .2s, opacity .2s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--gold-3); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #B58D1A; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.sec { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }
.btn.sec:hover { background: rgba(255, 255, 255, .2); }
.btn.azul { background: var(--navy); color: #fff; box-shadow: 0 4px 0 var(--deep); }
.btn.azul:hover { background: var(--navy-2); }
.btn.peligro { background: var(--error); color: #fff; box-shadow: 0 4px 0 #9b2c2c; }
.btn.chico { padding: .5em 1em; font-size: .9rem; }
.btn svg { width: 1.1em; height: 1.1em; }

.campo {
  width: 100%;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: .9em 1em;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.campo:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(225, 189, 55, .3); }

.aviso {
  border-radius: 10px;
  padding: .7em 1em;
  background: rgba(214, 69, 69, .16);
  color: #FFD3D3;
  font-size: .95rem;
}

/* ---------- Respuestas (formas) ---------- */
.forma { width: 1em; height: 1em; flex: none; fill: currentColor; }
.op0 { --c: var(--a0); }
.op1 { --c: var(--a1); }
.op2 { --c: var(--a2); }
.op3 { --c: var(--a3); }

.respuestas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.respuesta {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7em;
  min-height: 84px;
  padding: .8em 1em;
  border: 0;
  border-radius: var(--radio);
  background: var(--c);
  color: #fff;
  text-align: left;
  font-weight: 700;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .18);
  transition: transform .15s var(--ease), opacity .3s, filter .3s;
}
.respuesta .forma { width: 1.6em; height: 1.6em; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .15)); }
.respuesta .txt { flex: 1; overflow-wrap: anywhere; }

/* ---------- Animaciones ---------- */
@keyframes entra { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes gira { to { transform: rotate(360deg); } }
.entra { animation: entra .5s var(--ease) both; }
.pop { animation: pop .5s var(--rebote) both; }

.cargando {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .2);
  border-top-color: var(--gold-2);
  animation: gira .9s linear infinite;
}

.pie-marca {
  font-size: .78rem;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .04em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}