/* ==========================================================================
   Landing Capacitaciones — JTech
   Sistema visual tomado del diseño "Prediagnóstico" de Claude Design.
   ========================================================================== */

:root {
  --bg: #faf8f5;
  --bg-alt: #f5f2ed;
  --bg-card: #ffffff;
  --bg-mock: #efebe6;

  --ink: #0a0812;
  --ink-dark: #0d0515;
  --ink-85: rgba(10, 8, 18, 0.85);
  --ink-70: rgba(10, 8, 18, 0.7);
  --ink-62: rgba(10, 8, 18, 0.62);
  --ink-55: rgba(10, 8, 18, 0.55);
  --ink-45: rgba(10, 8, 18, 0.45);
  --ink-30: rgba(10, 8, 18, 0.3);
  --ink-18: rgba(10, 8, 18, 0.18);
  --ink-12: rgba(10, 8, 18, 0.12);
  --ink-08: rgba(10, 8, 18, 0.08);

  --violet: #b808f8;
  --violet-dark: #9e08d6;
  --orange: #ff4d1a;
  --orange-dark: #e63e0a;

  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell: 1120px;
  --gutter: 40px;
  --radius-pill: 999px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p {
  margin: 0;
  text-wrap: pretty;
}

img {
  max-width: 100%;
}

/* Varios bloques de este archivo fijan `display` (flex, grid), lo que por
   especificidad le gana al `display: none` que el navegador aplica a [hidden].
   Sin esto, los pasos ocultos del cuestionario se dibujan todos a la vez. */
[hidden] {
  display: none !important;
}

a {
  color: var(--violet);
  text-decoration: none;
}

a:hover {
  color: var(--violet-dark);
}

button {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font: 500 11px/1 var(--sans);
  color: var(--orange);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mono-label {
  font: 400 10.5px/1.4 var(--mono);
  color: var(--ink-45);
  letter-spacing: 0.18em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Botones ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  font: 600 15px var(--sans);
  padding: 16px 34px;
  cursor: pointer;
  transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover {
  background: var(--violet);
  color: #fff;
}

.btn--sm {
  padding: 10px 22px;
  font-size: 12.5px;
}

.btn--orange {
  background: var(--orange);
  padding: 17px 38px;
}

.btn--orange:hover {
  background: var(--orange-dark);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-18);
  font-weight: 500;
  font-size: 14px;
  padding: 14px 26px;
}

.btn--ghost:hover {
  background: transparent;
  border-color: var(--violet);
  color: var(--violet);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  background: rgba(10, 8, 18, 0.15);
  cursor: not-allowed;
}

.cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.cta-note {
  font: 400 13px var(--sans);
  color: var(--ink-45);
}

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 248, 245, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ink-08);
}

.site-header__inner {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--ink);
  min-width: 0;
}

.brand:hover {
  color: var(--ink);
}

.brand img {
  height: 19px;
  width: auto;
  display: block;
}

.brand__rule {
  width: 1px;
  height: 20px;
  background: rgba(10, 8, 18, 0.16);
  flex: none;
}

.brand__tag {
  font: 500 11px/1 var(--mono);
  color: var(--ink-70);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-header__seats {
  font: 400 11px var(--mono);
  color: var(--ink-45);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  padding-block: 96px 88px;
}

.hero__body {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.hero__flags {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pill-free {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  background: var(--orange);
  color: #fff;
  font: 700 11px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero__seats {
  font: 500 11px/1.4 var(--sans);
  color: rgba(10, 8, 18, 0.5);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero h1 {
  font: 300 62px/1.08 var(--sans);
  letter-spacing: -0.04em;
}

.accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--violet);
}

/* El lead va partido en dos: una frase que entra de un golpe y, debajo, lo que
   incluye la sesión. El `gap` es menor que el del hero para que se lean como un
   bloque y no como dos secciones. */
.hero__lead {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero__lead p {
  font: 400 17px/1.65 var(--sans);
  color: rgba(10, 8, 18, 0.65);
}

/* Más oscura que el resto del lead: es lo que engancha el ojo antes de que
   decida si sigue leyendo. Quitar esta regla lo deja todo del mismo tono. */
.hero__lead p:first-child {
  color: var(--ink-85);
}

.hero__proof {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(10, 8, 18, 0.1);
  flex-wrap: wrap;
  max-width: 640px;
}

.hero__badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero__badges img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.hero__proof p {
  flex: 1;
  min-width: 260px;
  font: 400 12.5px/1.55 var(--sans);
  color: var(--ink-55);
}

.hero__proof strong {
  font-weight: 600;
  color: var(--ink);
}

/* --- Bloque de autoridad ------------------------------------------------ */

.authority {
  border-top: 1px solid var(--ink-08);
  border-bottom: 1px solid var(--ink-08);
  background: var(--bg-alt);
}

.authority__inner {
  padding-block: 72px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: start;
}

.authority__portrait {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.authority__portrait img {
  width: 260px;
  height: 300px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

.authority__name {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.authority__name b {
  font: 500 13px var(--sans);
}

.authority__name span {
  font: 400 12px var(--sans);
  color: rgba(10, 8, 18, 0.5);
}

.authority__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 6px;
}

.authority__text > p {
  max-width: 620px;
  font: 300 24px/1.55 var(--sans);
  letter-spacing: -0.015em;
}

.credentials {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.credentials__list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.credential {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 12px;
  border: 1px solid rgba(10, 8, 18, 0.14);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--ink);
  transition: border-color 0.15s, color 0.15s;
}

.credential:hover {
  border-color: var(--violet);
  color: var(--violet);
}

.credential img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: none;
}

.credential span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.credential b {
  font: 500 13px var(--sans);
}

.credential small {
  font: 400 10px var(--mono);
  color: rgba(10, 8, 18, 0.42);
}

/* --- Métricas y logos --------------------------------------------------- */

.proof {
  border-bottom: 1px solid var(--ink-08);
}

.proof__inner {
  padding-block: 72px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(10, 8, 18, 0.16);
}

.stat b {
  font: 600 46px/1 var(--sans);
  color: var(--orange);
  letter-spacing: -0.04em;
}

.stat span {
  font: 400 14px/1.5 var(--sans);
  color: var(--ink-62);
}

.clients {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Los seis logos son wordmarks transparentes en el color de su marca, sueltos
   sobre el fondo de la página. Los tres que venían como bloque de color con
   texto blanco (Lamosa, Cámara, Makora) se invirtieron para que la fila no
   mezclara rectángulos con logos flotando. Van siempre a color, sin efecto al
   pasar el cursor. El alto de cada uno está afinado a ojo para que pesen
   parecido: un trazo grueso necesita menos alto que uno fino. */
.clients__row {
  /* Un solo multiplicador encoge la banda entera en pantallas intermedias, en
     vez de dejar que un logo se caiga solo a la segunda fila. */
  --escala: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px 40px;
  padding-block: 8px;
}

.clients__row li {
  display: flex;
  align-items: center;
}

.logo {
  display: block;
  width: auto;
  height: calc(var(--logo-h) * var(--escala));
  max-width: 100%;
}

.logo--alfa {
  --logo-h: 30px;
}

.logo--lamosa {
  --logo-h: 26px;
}

.logo--sanlorenzo {
  --logo-h: 25px;
}

.logo--camara {
  --logo-h: 26px;
}

.logo--logistica {
  --logo-h: 30px;
}

.logo--makora {
  --logo-h: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Sección "Qué vas a poder hacer" ------------------------------------ */

.outcomes {
  padding-block: 96px 88px;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 44px;
}

.section-head h2 {
  font: 300 42px/1.14 var(--sans);
  letter-spacing: -0.035em;
  max-width: 600px;
}

.outcomes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 64px;
}

.outcome {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(10, 8, 18, 0.16);
}

.outcome__num {
  font: 700 11px var(--mono);
  color: var(--violet);
  letter-spacing: 0.16em;
}

.outcome h3 {
  font: 400 22px/1.3 var(--sans);
  letter-spacing: -0.02em;
}

.outcome p {
  font: 400 15px/1.7 var(--sans);
  color: var(--ink-62);
}

/* --- Carrusel de casos de uso ------------------------------------------- */

.carousel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.carousel__nav {
  display: flex;
  gap: 8px;
}

.carousel__nav button {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink-18);
  background: transparent;
  color: var(--ink);
  font: 300 18px var(--sans);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}

.carousel__nav button:hover:not(:disabled) {
  border-color: var(--violet);
  color: var(--violet);
}

.carousel__nav button:disabled {
  opacity: 0.3;
  cursor: default;
}

.carousel__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 6px;
}

.carousel__track::-webkit-scrollbar {
  height: 0;
}

.use-case {
  flex: 0 0 420px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid rgba(10, 8, 18, 0.1);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s;
}

.use-case:hover {
  border-color: rgba(184, 8, 248, 0.45);
}

.use-case__body {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.use-case__num {
  font: 700 11px var(--mono);
  color: var(--violet);
  letter-spacing: 0.14em;
}

.use-case h3 {
  font: 400 21px/1.35 var(--sans);
  letter-spacing: -0.02em;
}

.use-case p {
  font: 400 15px/1.65 var(--sans);
  color: rgba(10, 8, 18, 0.6);
}

/* Maquetas decorativas dentro de cada tarjeta del carrusel. */

.mock {
  height: 226px;
  background: var(--bg-mock);
  border-bottom: 1px solid rgba(10, 8, 18, 0.1);
  padding: 20px;
  display: flex;
  overflow: hidden;
}

.mock span {
  display: block;
}

.mock--deck {
  gap: 10px;
}

.mock__slide {
  flex: 1;
  background: var(--ink-dark);
  border-radius: 3px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-shadow: 0 6px 18px rgba(10, 8, 18, 0.18);
  background-image: radial-gradient(circle at 92% 6%, rgba(184, 8, 248, 0.35), transparent 55%);
}

.mock__slide-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mock__brandbar {
  width: 52px;
  height: 5px;
  border-radius: 3px;
  background: var(--orange);
}

.mock__brandtag {
  font: 500 7.5px var(--mono);
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.18em;
}

.mock__line-lg {
  width: 86%;
  height: 10px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.88);
}

.mock__line-md {
  width: 58%;
  height: 10px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
}

.mock__bars {
  margin-top: auto;
  display: flex;
  gap: 7px;
  align-items: flex-end;
}

.mock__bars span {
  width: 24px;
  border-radius: 2px;
}

.mock__thumbs {
  width: 56px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mock__thumbs span {
  height: 34px;
  border-radius: 3px;
}

.mock--report,
.mock--chat,
.mock--dash {
  flex-direction: column;
  gap: 9px;
}

.mock__window {
  flex: 1;
  background: #fff;
  border: 1px solid rgba(10, 8, 18, 0.1);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(10, 8, 18, 0.07);
  overflow: hidden;
}

.mock__chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ink-08);
  background: rgba(10, 8, 18, 0.03);
}

.mock__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(10, 8, 18, 0.16);
}

.mock__filename {
  margin-left: 6px;
  font: 400 8px var(--mono);
  color: rgba(10, 8, 18, 0.38);
  letter-spacing: 0.1em;
}

.mock__pane {
  flex: 1;
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.mock__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mock__row span:first-child {
  flex: 1;
  height: 7px;
  border-radius: 2px;
  background: rgba(10, 8, 18, 0.1);
}

.mock__meaning {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--ink-08);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mock__bubble-out {
  align-self: flex-end;
  max-width: 80%;
  background: var(--ink-dark);
  border-radius: 12px 12px 3px 12px;
  padding: 11px 14px;
  font: 400 11.5px/1.4 var(--sans);
  color: rgba(255, 255, 255, 0.92);
}

.mock__bubble-in {
  align-self: flex-start;
  max-width: 88%;
  background: #fff;
  border: 1px solid rgba(10, 8, 18, 0.1);
  border-radius: 12px 12px 12px 3px;
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: 0 6px 18px rgba(10, 8, 18, 0.07);
}

.mock__avatar {
  width: 13px;
  height: 13px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #f00858, #c008e0);
}

.mock__tags {
  margin-top: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mock__tag {
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(10, 8, 18, 0.06);
  font: 400 8.5px var(--mono);
  color: rgba(10, 8, 18, 0.5);
}

.mock__tag--alert {
  background: rgba(255, 77, 26, 0.12);
  color: var(--orange);
}

.mock__kpis {
  display: flex;
  gap: 9px;
}

.mock__kpi {
  flex: 1;
  background: #fff;
  border: 1px solid rgba(10, 8, 18, 0.1);
  border-radius: 3px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mock__kpi b {
  font: 600 20px/1 var(--sans);
}

.mock__chart {
  flex: 1;
  background: #fff;
  border: 1px solid rgba(10, 8, 18, 0.1);
  border-radius: 3px;
  padding: 11px 13px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

.mock__chart span {
  flex: 1;
  border-radius: 1px;
}

.mock__ask {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid rgba(10, 8, 18, 0.14);
  border-radius: var(--radius-pill);
  padding: 9px 14px;
  font: 400 11px var(--sans);
  color: var(--ink-45);
}

.mock__send {
  margin-left: auto;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  flex: none;
}

/* --- Para quién es -------------------------------------------------------*/

.fit {
  border-top: 1px solid var(--ink-08);
  background: var(--ink-dark);
  color: #fff;
}

.fit__inner {
  padding-block: 80px;
  display: grid;
  grid-template-columns: 300px 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.fit h2 {
  font: 300 34px/1.18 var(--sans);
  letter-spacing: -0.03em;
}

.fit__col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fit__col > span {
  font: 700 10.5px var(--mono);
  letter-spacing: 0.18em;
}

.fit__col--yes > span {
  color: var(--orange);
}

.fit__col--no > span {
  color: rgba(255, 255, 255, 0.4);
}

.fit__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fit__list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font: 400 15px/1.55 var(--sans);
}

.fit__mark {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  font: 600 10px var(--sans);
}

.fit__col--yes li {
  color: rgba(255, 255, 255, 0.85);
}

.fit__col--yes .fit__mark {
  border: 1px solid var(--orange);
  color: var(--orange);
}

.fit__col--no li {
  color: rgba(255, 255, 255, 0.5);
}

.fit__col--no .fit__mark {
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.4);
}

/* --- Cómo funciona ------------------------------------------------------ */

.how {
  border-top: 1px solid var(--ink-08);
  background: var(--bg-alt);
}

.how__inner {
  padding-block: 88px;
}

.how h2 {
  font: 300 42px/1.14 var(--sans);
  letter-spacing: -0.035em;
  margin-bottom: 44px;
}

.how__steps {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--ink-12);
}

.how__step {
  display: grid;
  grid-template-columns: 64px 300px 1fr;
  gap: 24px;
  padding-block: 26px;
  border-top: 1px solid var(--ink-12);
  align-items: start;
}

.how__step > span {
  font: 700 12px var(--mono);
  color: var(--violet);
  letter-spacing: 0.14em;
  padding-top: 4px;
}

.how__step h3 {
  font: 400 20px/1.35 var(--sans);
  letter-spacing: -0.02em;
}

.how__step p {
  font: 400 15px/1.7 var(--sans);
  color: var(--ink-62);
  max-width: 520px;
}

.how .cta-row {
  margin-top: 40px;
}

/* --- FAQ ---------------------------------------------------------------- */

.faq {
  padding-block: 88px;
}

.faq__inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: start;
}

.faq h2 {
  font: 300 34px/1.18 var(--sans);
  letter-spacing: -0.03em;
}

.faq__list {
  display: flex;
  flex-direction: column;
  max-width: 680px;
  border-bottom: 1px solid var(--ink-12);
}

.faq__item {
  border-top: 1px solid var(--ink-12);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 22px;
  cursor: pointer;
  font: 400 19px var(--sans);
  color: var(--ink);
  letter-spacing: -0.015em;
  list-style: none;
  transition: color 0.15s;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary:hover {
  color: var(--violet);
}

.faq__sign {
  font: 300 22px var(--sans);
  color: var(--violet);
  flex: none;
}

.faq__sign::after {
  content: "+";
}

.faq__item[open] .faq__sign::after {
  content: "−";
}

.faq__item p {
  font: 400 15px/1.7 var(--sans);
  color: var(--ink-62);
  padding-bottom: 24px;
  max-width: 600px;
}

/* --- Cierre ------------------------------------------------------------- */

.closer {
  background: var(--ink-dark);
  color: #fff;
  background-image: radial-gradient(circle at 85% 5%, rgba(184, 8, 248, 0.22), transparent 55%);
}

.closer__inner {
  padding-block: 104px;
  display: flex;
  flex-direction: column;
  gap: 34px;
  align-items: flex-start;
}

.closer h2 {
  max-width: 840px;
  font: 300 40px/1.28 var(--sans);
  letter-spacing: -0.032em;
}

.closer > .shell > p,
.closer__lead {
  max-width: 640px;
  font: 400 17px/1.7 var(--sans);
  color: rgba(255, 255, 255, 0.62);
}

.closer .cta-note {
  color: rgba(255, 255, 255, 0.5);
}

.takeaways {
  width: 100%;
  max-width: 900px;
  margin-top: 22px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.takeaways > span {
  font: 700 10.5px var(--mono);
  color: var(--violet);
  letter-spacing: 0.18em;
}

.takeaways ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.takeaways li {
  display: flex;
  gap: 12px;
  font: 400 15px/1.55 var(--sans);
  color: rgba(255, 255, 255, 0.82);
}

.takeaways li b {
  font: 700 10.5px var(--mono);
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.14em;
  padding-top: 4px;
  flex: none;
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  background: #0a0812;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__inner {
  padding-block: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.site-footer img {
  height: 18px;
  opacity: 0.8;
}

.site-footer span {
  font: 400 11px var(--mono);
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.1em;
}

.site-footer a {
  color: inherit;
}

.site-footer a:hover {
  color: #fff;
}

/* ==========================================================================
   Cuestionario
   ========================================================================== */

.form-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.form-page .shell {
  max-width: 860px;
}

.form-header__meta {
  font: 400 11px var(--mono);
  color: var(--ink-45);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.progress {
  height: 2px;
  background: var(--ink-08);
}

.progress__bar {
  height: 2px;
  width: 0;
  background: var(--violet);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-main {
  flex: 1;
  width: 100%;
  padding-block: 64px 96px;
}

.screen[hidden] {
  display: none;
}

.intro {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 40px;
}

.intro h1 {
  font: 300 52px/1.1 var(--sans);
  letter-spacing: -0.04em;
  max-width: 640px;
}

.intro p {
  max-width: 560px;
  font: 400 18px/1.65 var(--sans);
  color: var(--ink-62);
}

.intro .cta-row {
  margin-top: 8px;
}

.intro .cta-note {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 38px;
}

.step__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step__tag {
  font: 700 11px var(--mono);
  color: var(--violet);
  letter-spacing: 0.2em;
}

.step__head h2 {
  font: 300 40px/1.14 var(--sans);
  letter-spacing: -0.035em;
}

.step__note {
  font: 400 15px/1.6 var(--sans);
  color: var(--ink-55);
  max-width: 560px;
}

.step__note:empty {
  display: none;
}

.fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.field-label {
  font: 500 12px var(--sans);
  color: var(--ink-70);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field input,
.field textarea {
  padding: 14px 16px;
  border: 1px solid rgba(10, 8, 18, 0.16);
  border-radius: 10px;
  background: #fff;
  font: 400 15px var(--sans);
  color: var(--ink);
  width: 100%;
}

.field textarea {
  padding: 16px;
  border-radius: 12px;
  line-height: 1.6;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-30);
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
  border-color: transparent;
}

.field input[aria-invalid="true"] {
  border-color: var(--orange);
}

.field-error {
  font: 400 12.5px var(--sans);
  color: var(--orange);
}

.field-error:empty {
  display: none;
}

.group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill {
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink-18);
  background: transparent;
  color: var(--ink);
  font: 400 13.5px var(--sans);
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.pill:hover {
  border-color: var(--violet);
}

.pill[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  font-weight: 500;
}

/* Matriz de frecuencia. */

.matrix {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.matrix__head,
.matrix__row {
  display: grid;
  grid-template-columns: 180px repeat(5, 1fr);
  gap: 10px;
  align-items: center;
}

.matrix__head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-12);
}

.matrix__head span {
  font: 400 10.5px/1.35 var(--mono);
  color: var(--ink-45);
  text-align: center;
}

.matrix__row {
  padding-block: 14px;
  border-bottom: 1px solid var(--ink-08);
}

.matrix__row > b {
  font: 400 14.5px var(--sans);
}

/* En escritorio el wrapper desaparece del layout para que cada celda caiga en
   su columna del grid; en móvil (más abajo) pasa a ser una fila flexible. */
.matrix__options {
  display: contents;
}

.matrix__cell {
  display: flex;
  justify-content: center;
}

.dot {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(10, 8, 18, 0.22);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
}

.dot:hover {
  border-color: var(--violet);
}

.dot[aria-pressed="true"] {
  border: 6px solid var(--violet);
  background: #fff;
}

/* Filas de familiaridad. */

.levels {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.levels__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  align-items: center;
  padding-block: 14px;
  border-bottom: 1px solid rgba(10, 8, 18, 0.1);
}

.levels__row > b {
  font: 400 14.5px var(--sans);
}

/* Opciones en fila (checkboxes y casos de uso). */

.rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rows--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.row-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(10, 8, 18, 0.14);
  background: #fff;
  color: var(--ink);
  font: 400 14px/1.45 var(--sans);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  width: 100%;
}

.row-opt:hover:not([aria-disabled="true"]) {
  border-color: var(--violet);
}

.row-opt[aria-pressed="true"] {
  border-color: var(--violet);
  background: rgba(184, 8, 248, 0.06);
}

.row-opt[aria-disabled="true"] {
  border-color: rgba(10, 8, 18, 0.1);
  color: var(--ink-30);
  cursor: not-allowed;
}

.row-opt__box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid rgba(10, 8, 18, 0.25);
  display: grid;
  place-items: center;
  font: 600 11px var(--sans);
  color: #fff;
  flex: none;
}

.row-opt[aria-pressed="true"] .row-opt__box {
  border-color: var(--violet);
  background: var(--violet);
}

.row-opt__num {
  font: 700 10.5px var(--mono);
  letter-spacing: 0.12em;
  color: var(--ink-30);
  flex: none;
}

.row-opt[aria-pressed="true"] .row-opt__num {
  color: var(--violet);
}

/* ==========================================================================
   Encuesta de salida
   ========================================================================== */

.encuesta {
  display: flex;
  flex-direction: column;
  gap: 44px;
  max-width: 720px;
  padding-block: 48px 72px;
}

.encuesta__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.encuesta__intro h1 {
  font: 300 44px/1.1 var(--sans);
  letter-spacing: -0.03em;
}

.encuesta__intro p {
  font: 400 17px/1.6 var(--sans);
  color: var(--ink-62);
}

.bloque {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.bloque__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-12);
}

/* El número lo reescribe el JS: los bloques condicionales aparecen y
   desaparecen, y una numeración fija dejaría huecos. */
.bloque__num {
  font: 500 12px/1 var(--mono);
  color: var(--ink-30);
  letter-spacing: 0.1em;
}

.bloque__head h2 {
  font: 400 22px/1.25 var(--sans);
  letter-spacing: -0.02em;
}

.bloque__nota {
  margin-top: -8px;
  font: 400 15px/1.6 var(--sans);
  color: var(--ink-55);
}

.permisos {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* El campo que acompaña a cada permiso se sangra para que se lea como
   consecuencia de la casilla y no como una pregunta suelta. */
.permisos__extra {
  margin-left: 32px;
  max-width: 420px;
}

.referidos {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* La segunda ficha en adelante lleva regla arriba: con una sola no hay nada que
   separar y una línea suelta se ve como un error. */
.referido + .referido {
  padding-top: 24px;
  border-top: 1px solid var(--ink-12);
}

.referido {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.referido__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 16px;
}

.referido__num {
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.referido__quitar {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-45);
  font: 400 13px/1 var(--sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.referido__quitar:hover {
  color: var(--orange);
}

.referidos__pie {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.referidos__tope {
  font: 400 13px/1.4 var(--sans);
  color: var(--ink-45);
}

.encuesta__nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .encuesta {
    gap: 36px;
    padding-block: 36px 56px;
  }

  .encuesta__intro h1 {
    font-size: 33px;
  }

  .permisos__extra {
    margin-left: 0;
  }
}

/* Acuerdo del testimonio: casilla nativa por accesibilidad, con el cuadro
   dibujado encima para que combine con el resto del formulario. */
.acuerdo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  border: 1px solid rgba(184, 8, 248, 0.28);
  border-radius: 12px;
  background: rgba(184, 8, 248, 0.04);
}

.acuerdo__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.acuerdo__check input {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid rgba(10, 8, 18, 0.28);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s, border-color 0.15s;
}

.acuerdo__check input::after {
  content: "✓";
  font: 600 12px var(--sans);
  color: #fff;
  opacity: 0;
}

.acuerdo__check input:checked {
  background: var(--violet);
  border-color: var(--violet);
}

.acuerdo__check input:checked::after {
  opacity: 1;
}

.acuerdo__check input[aria-invalid="true"] {
  border-color: var(--orange);
}

.acuerdo__texto {
  font: 400 14.5px/1.6 var(--sans);
  color: var(--ink);
}

.acuerdo__nota {
  font: 400 13px/1.6 var(--sans);
  color: var(--ink-55);
  padding-left: 32px;
}

.group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.counter {
  font: 400 11px var(--mono);
  color: var(--violet);
  letter-spacing: 0.1em;
}

.step__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(10, 8, 18, 0.1);
  flex-wrap: wrap;
}

.step__hint {
  font: 400 12.5px var(--sans);
  color: var(--ink-45);
}

.step__hint--error {
  color: var(--orange);
}

.done {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: 60px;
}

.done h1 {
  font: 300 52px/1.1 var(--sans);
  letter-spacing: -0.04em;
}

.done p {
  max-width: 560px;
  font: 400 18px/1.65 var(--sans);
  color: var(--ink-62);
}

.done__meta {
  display: flex;
  gap: 28px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.done__meta span {
  font: 400 11px var(--mono);
  color: var(--ink-45);
  letter-spacing: 0.12em;
}

.done__tag {
  font: 700 11px var(--mono);
  color: var(--violet);
  letter-spacing: 0.2em;
}

/* ==========================================================================
   Aviso de privacidad
   ========================================================================== */

.legal {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
}

.legal h1 {
  font: 300 46px/1.12 var(--sans);
  letter-spacing: -0.04em;
}

.legal__lead {
  font: 400 18px/1.65 var(--sans);
  color: var(--ink-62);
  max-width: 560px;
}

.legal__fecha {
  font: 400 11px var(--mono);
  color: var(--ink-45);
  letter-spacing: 0.12em;
}

.legal section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 26px;
  margin-top: 12px;
  border-top: 1px solid var(--ink-12);
}

.legal h2 {
  font: 400 21px/1.35 var(--sans);
  letter-spacing: -0.02em;
}

.legal p,
.legal li {
  font: 400 15px/1.75 var(--sans);
  color: var(--ink-70);
}

.legal ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 20px;
  list-style: disc;
}

.legal li::marker {
  color: var(--violet);
}

.legal strong {
  font-weight: 600;
  color: var(--ink);
}

/* La captura de borradores es lo menos evidente del sitio: va destacada. */
.legal__nota {
  padding: 18px 20px;
  border-left: 2px solid var(--violet);
  background: var(--bg-alt);
  border-radius: 0 8px 8px 0;
  font: 400 14.5px/1.7 var(--sans);
  color: var(--ink-70);
}

/* ==========================================================================
   Banner de consentimiento
   ========================================================================== */

.consent {
  position: fixed;
  z-index: 40;
  left: 16px;
  right: 16px;
  bottom: 16px;
  margin: 0 auto;
  max-width: 720px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 22px;
  background: var(--ink-dark);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(10, 8, 18, 0.28);
}

.consent__texto {
  flex: 1;
  min-width: 240px;
  font: 400 13.5px/1.6 var(--sans);
  color: rgba(255, 255, 255, 0.78);
}

.consent__texto a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent__acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Sobre el fondo oscuro del banner, el botón fantasma invierte sus colores. */
.consent .btn--ghost {
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.85);
}

.consent .btn--ghost:hover {
  border-color: #fff;
  color: #fff;
}

.consent .btn:not(.btn--ghost) {
  background: #fff;
  color: var(--ink);
}

.consent .btn:not(.btn--ghost):hover {
  background: var(--violet);
  color: #fff;
}

/* El honeypot debe ser invisible pero enfocable solo por bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .clients__row {
    --escala: 0.86;
    gap: 22px 30px;
  }

  .outcomes__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .fit__inner {
    grid-template-columns: 1fr 1fr;
  }

  .fit h2 {
    grid-column: 1 / -1;
  }

  .faq__inner,
  .authority__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .how__step {
    grid-template-columns: 48px 1fr;
    row-gap: 8px;
  }

  .how__step p {
    grid-column: 2;
    max-width: none;
  }

  .takeaways ul {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 860px) {
  :root {
    --gutter: 24px;
  }

  /* Sin el rótulo al lado, el separador quedaba como una raya suelta. */
  .site-header__seats,
  .brand__tag,
  .brand__rule {
    display: none;
  }

  .hero {
    padding-block: 56px 64px;
  }

  .hero h1 {
    font-size: 40px;
    letter-spacing: -0.03em;
  }

  /* Sobre el `p`, no sobre el contenedor: el atajo `font` de `.hero__lead p`
     fija 17px y le ganaría a un font-size heredado. */
  .hero__lead p {
    font-size: 16px;
  }

  .section-head h2,
  .how h2 {
    font-size: 32px;
  }

  .fit h2,
  .faq h2,
  .closer h2 {
    font-size: 28px;
  }

  .authority__text > p {
    font-size: 20px;
  }

  .authority__portrait img {
    width: 100%;
    max-width: 260px;
    height: auto;
    aspect-ratio: 13 / 15;
  }

  .outcomes,
  .faq {
    padding-block: 64px;
  }

  .authority__inner,
  .proof__inner,
  .fit__inner,
  .how__inner {
    padding-block: 56px;
  }

  .closer__inner {
    padding-block: 72px;
  }

  .use-case {
    flex: 0 0 min(88vw, 380px);
  }

  /* Los logos bajan en bloque manteniendo su proporción relativa. */
  .clients__row {
    --escala: 0.78;
    justify-content: flex-start;
    gap: 20px 26px;
  }

  .fit__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* En móvil la matriz de frecuencia se apila: cada producto es un bloque
     con sus opciones como pastillas, que sí caben a lo ancho. */
  .matrix__head {
    display: none;
  }

  .matrix__row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-block: 18px;
  }

  .matrix__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .matrix__cell {
    display: block;
  }

  .dot {
    width: auto;
    height: auto;
    border-radius: var(--radius-pill);
    padding: 9px 14px;
    font: 400 12.5px var(--sans);
    color: var(--ink);
  }

  .dot[aria-pressed="true"] {
    border: 1px solid var(--ink);
    background: var(--ink);
    color: #fff;
  }

  .dot::after {
    content: attr(data-label);
  }

  .levels__row {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
  }

  .rows--2col {
    grid-template-columns: 1fr;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .intro h1,
  .done h1 {
    font-size: 38px;
  }

  .legal h1 {
    font-size: 34px;
  }

  .consent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 16px 18px;
    gap: 14px;
  }

  .consent__acciones {
    width: 100%;
  }

  .consent__acciones .btn {
    flex: 1;
  }

  .step__head h2 {
    font-size: 30px;
  }

  .form-main {
    padding-block: 44px 72px;
  }
}

@media (max-width: 560px) {
  .hero h1 {
    font-size: 33px;
  }

  .stats {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .stat b {
    font-size: 38px;
  }

  .btn {
    width: 100%;
  }

  .site-header .btn {
    width: auto;
  }

  .step__nav .btn {
    width: auto;
    flex: 1;
  }

  .carousel__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .intro h1,
  .done h1 {
    font-size: 32px;
  }

  .site-footer__inner {
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}