/* Paleta del Manual de marca Fusión Digital v2.0 */
:root {
  --bg: #1B1030;          /* Fondo principal */
  --panel: #3B2A5E;       /* Fondo de panel */
  --lavender: #BFA6EE;    /* Acento lavanda */
  --white: #FFFFFF;       /* Texto principal */
  --ink: #121014;         /* Texto sobre lavanda */
  --creative: #A98BEA;    /* Creatividad */
  --grad-a: #3A0F5E;      /* Degradado del logotipo */
  --grad-b: #7B9BD6;
  --radius: 18px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 400;
  color: var(--white);
  background: linear-gradient(135deg, #140B24 0%, var(--bg) 45%, var(--panel) 100%) fixed;
  background-color: var(--bg);
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px clamp(16px, 5vw, 64px);
}

/* Recorta el margen transparente del PNG del logo */
.logo { width: 190px; aspect-ratio: 1240 / 405; overflow: hidden; }
.logo img { width: 154.8%; margin-left: -25.8%; margin-top: -31%; display: block; }

.tag, .label {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lavender);
}

.wrap {
  flex: 1;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 8px clamp(16px, 5vw, 32px) 48px;
}

h1 {
  font-weight: 800;
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.05;
  margin: 12px 0 18px;
}

h2 {
  font-weight: 700;
  font-size: clamp(24px, 3.5vw, 32px);
  margin: 0 0 6px;
}

.lead { font-size: clamp(16px, 2vw, 19px); line-height: 1.55; color: #E9E1FA; max-width: 52ch; }
.meta { color: var(--lavender); font-weight: 500; }

/* Bienvenida */
.welcome {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 32px;
  align-items: center;
  min-height: 70vh;
}
.welcome-art img {
  width: 100%;
  border-radius: 28px;
  box-shadow: 0 30px 80px -30px rgba(169, 139, 234, .55);
}

/* Botones: un solo botón de acción en lavanda */
.btn, .btn-ghost {
  font: inherit;
  font-weight: 700;
  font-size: 17px;
  border-radius: 12px;
  padding: 14px 30px;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.btn { background: var(--lavender); color: var(--ink); border: 0; }
.btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn-ghost { background: transparent; color: var(--lavender); border: 1.5px solid rgba(191, 166, 238, .4); }
.btn-ghost:hover { border-color: var(--lavender); }
.btn:focus-visible, .btn-ghost:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

/* Progreso con el degradado del logotipo */
.progress { height: 10px; background: rgba(255, 255, 255, .08); border-radius: 99px; overflow: hidden; }
.progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  border-radius: 99px;
  transition: width .4s ease;
}
.progress-text { color: var(--lavender); font-weight: 500; font-size: 14px; margin: 10px 0 24px; }

.section-intro { margin-bottom: 20px; }
.section-intro p { margin: 0; color: #D8CCF2; }

/* Tarjetas de pregunta */
.q {
  background: rgba(59, 42, 94, .72);
  border: 1px solid rgba(191, 166, 238, .14);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 0 0 16px;
}
.q legend, .q > label.q-title {
  display: block;
  float: left;
  width: 100%;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
  padding: 0;
}
.q legend + *, .q > label.q-title + * { clear: both; }
.q-num { color: var(--lavender); margin-right: 8px; }
.q-hint { display: block; font-weight: 400; font-size: 14px; color: #CFC2EC; margin-top: 4px; }
.req { color: var(--lavender); }

input[type="text"], input[type="email"], textarea, select {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--white);
  background: rgba(27, 16, 48, .7);
  border: 1.5px solid rgba(191, 166, 238, .25);
  border-radius: 12px;
  padding: 13px 14px;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, textarea:focus { outline: none; border-color: var(--lavender); }
::placeholder { color: #9C8DBD; }

.options { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt span {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(191, 166, 238, .25);
  background: rgba(27, 16, 48, .55);
  transition: all .15s ease;
}
.opt input:checked + span { background: var(--lavender); color: var(--ink); border-color: var(--lavender); font-weight: 700; }
.opt input:focus-visible + span { outline: 2px solid var(--white); outline-offset: 2px; }

.scale { display: flex; gap: 10px; flex-wrap: wrap; }
.scale .opt span { width: 56px; text-align: center; font-weight: 700; }
.scale-labels { display: flex; justify-content: space-between; max-width: 320px; font-size: 13px; color: #CFC2EC; margin-top: 8px; }

.q.invalid { border-color: #FF8FB1; }

.error { color: #FFB3C9; font-weight: 500; }
.nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }

/* Gracias */
.thanks { text-align: center; padding-top: 24px; }
.thanks .lead { margin: 0 auto; }
.thanks-art { width: min(320px, 80%); border-radius: 50%; }

.foot { text-align: center; padding: 24px 16px; font-size: 13px; color: #A99BC9; }

@media (max-width: 760px) {
  .welcome { grid-template-columns: 1fr; min-height: auto; }
  .welcome-art { order: -1; max-width: 360px; }
  .logo { width: 150px; }
  .options { grid-template-columns: 1fr; }
  .nav .btn, .nav .btn-ghost { flex: 1; }
}