/* =========================================================
   AGITAYDECIDE — LANDING PAGE
   Todas las medidas de escritorio se expresan en --u: 1 unidad
   equivale a 1px de la maqueta de referencia (1024px de ancho)
   y escala de forma fluida hasta 1440px.
   ========================================================= */

:root {
  --ink: #070918;
  --ink-2: #0A0C1F;
  --bone: #ECE8DE;
  --lime: #D4FB3F;
  --pink: #FF1F84;
  --cyan: #2EC5F7;
  --lav: #9D95CC;
  --muted: #CFCDDA;
  --dark-text: #0B0A18;

  --display: "Plus Jakarta Sans", system-ui, sans-serif;
  --hand: "Architects Daughter", "Comic Sans MS", cursive;

  --u: clamp(1px, calc(100vw / 1024), 1.40625px);

  --ease-shake: cubic-bezier(.36, .07, .19, .97);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ink);
  color: #F4F2EA;
  font-family: var(--display);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
  overflow: hidden;
}

::selection {
  background: var(--lime);
  color: var(--dark-text);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

svg {
  display: block;
  overflow: visible;
}

svg text {
  font-family: var(--display);
}

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

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

.noise {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.container {
  position: relative;
  width: calc(882 * var(--u));
  margin-inline: auto;
}

/* ---------- Tipografía compartida ---------- */

.eyebrow {
  font-size: calc(9 * var(--u));
  line-height: 1;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.eyebrow-cyan { color: var(--cyan); }
.eyebrow-dark { color: var(--dark-text); }

.title {
  font-weight: 800;
  letter-spacing: 0;
}

p {
  word-spacing: .1em;
}

/* El punto de Plus Jakarta Sans trae mucho aire a la izquierda. */
.dot {
  margin-left: -.11em;
}

.lime { color: var(--lime); }
.pink { color: var(--pink); }
.ink { color: var(--dark-text); }

.hand {
  font-family: var(--hand);
}

.scribble {
  position: absolute;
  pointer-events: none;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(13 * var(--u));
  border-radius: 999px;
  background: var(--lime);
  color: var(--dark-text);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 0 calc(22 * var(--u)) rgba(212, 251, 63, .16);
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
}

.btn:hover {
  transform: translateY(calc(-2 * var(--u)));
  box-shadow: 0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(212, 251, 63, .26);
}

.btn-icon {
  flex: none;
  width: calc(21 * var(--u));
  height: calc(21 * var(--u));
}

.btn:hover .btn-icon {
  animation: wiggle .5s var(--ease-shake);
}

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

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
}

.header-inner {
  height: calc(60 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-left: calc(-2 * var(--u));
  color: #F6F5F0;
}

.brand-mark {
  position: relative;
  top: calc(2.5 * var(--u));
  width: calc(37 * var(--u));
  height: calc(46.5 * var(--u));
  color: #fff;
}

.brand-name {
  font-size: calc(20.6 * var(--u));
  font-weight: 800;
  letter-spacing: -.03em;
}

.nav {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
  font-size: calc(10.8 * var(--u));
  font-weight: 500;
  color: #E9E7F1;
}

.nav a:not(.nav-cta) {
  transition: color .2s ease;
}

.nav a:not(.nav-cta):hover {
  color: var(--lime);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(100 * var(--u));
  height: calc(31 * var(--u));
  margin-left: calc(1 * var(--u));
  border-radius: 999px;
  background: var(--lime);
  color: var(--dark-text);
  font-size: calc(9.8 * var(--u));
  font-weight: 700;
  box-shadow: 0 0 calc(18 * var(--u)) rgba(212, 251, 63, .18);
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
}

.nav-cta:hover {
  transform: translateY(calc(-1 * var(--u)));
  box-shadow: 0 calc(6 * var(--u)) calc(22 * var(--u)) rgba(212, 251, 63, .3);
}

.menu-toggle {
  display: none;
}

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

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 66% 55%, rgba(34, 38, 92, .32), transparent 70%),
    var(--ink);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(122, 132, 210, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 132, 210, .1) 1px, transparent 1px);
  background-size: calc(27 * var(--u)) calc(27 * var(--u));
  background-position: center calc(7 * var(--u));
  -webkit-mask-image: radial-gradient(34% 58% at 64% 60%, #000 20%, transparent 100%);
  mask-image: radial-gradient(34% 58% at 64% 60%, #000 20%, transparent 100%);
}

.hero-inner {
  height: calc(375 * var(--u));
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding-top: calc(93 * var(--u));
}

.hero .eyebrow {
  color: #E4E2EC;
}

.hero h1 {
  margin-top: calc(4 * var(--u));
  font-weight: 800;
  letter-spacing: -.012em;
}

.h1-a,
.h1-b {
  display: block;
}

.h1-a {
  font-size: calc(40 * var(--u));
  line-height: calc(44 * var(--u));
}

.h1-b {
  position: relative;
  width: max-content;
  font-size: calc(52 * var(--u));
  line-height: calc(52 * var(--u));
  letter-spacing: .02em;
  color: var(--lime);
}

.h1-b .scribble {
  left: calc(-6 * var(--u));
  top: calc(50 * var(--u));
  width: calc(225 * var(--u));
  height: calc(28 * var(--u));
}

.hero-sub {
  margin-top: calc(37 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(17.5 * var(--u));
  font-weight: 650;
  color: #F6F5F0;
}

.hero .btn {
  margin-top: calc(14 * var(--u));
  width: calc(180 * var(--u));
  height: calc(35 * var(--u));
  padding: 0;
  font-size: calc(13.4 * var(--u));
}

.microcopy {
  margin-top: calc(14 * var(--u));
  font-size: calc(10 * var(--u));
  line-height: 1;
  font-weight: 600;
  letter-spacing: .17em;
  color: #D9D7E2;
}

.hero-art {
  position: absolute;
  left: calc(425 * var(--u));
  top: calc(60 * var(--u));
  width: calc(470 * var(--u));
  height: calc(316 * var(--u));
  z-index: 1;
}

.hero-art .note {
  font-family: var(--hand);
  font-size: 17px;
  stroke: #F6F5F0;
  stroke-width: .2px;
}

.hero-phone {
  transform-box: fill-box;
  transform-origin: 50% 80%;
}

.hero-art:hover .hero-phone {
  animation: wiggle .7s var(--ease-shake);
}

/* ---------- El problema ---------- */

.problem {
  position: relative;
  background: var(--ink);
  border-top: 1px solid rgba(157, 149, 204, .08);
  overflow: hidden;
}

.problem-inner {
  height: calc(267 * var(--u));
}

.problem-copy {
  position: relative;
  z-index: 2;
  padding-top: calc(24 * var(--u));
}

.problem h2 {
  margin-top: calc(8.5 * var(--u));
  font-size: calc(27.5 * var(--u));
  line-height: calc(28 * var(--u));
}

.problem-lines {
  margin-top: calc(17 * var(--u));
  font-size: calc(12.2 * var(--u));
  line-height: calc(17.1 * var(--u));
  font-weight: 600;
  color: #F4F2EA;
}

.problem-note {
  display: flex;
  align-items: center;
  gap: calc(11 * var(--u));
  margin-top: calc(13 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(15 * var(--u));
  font-weight: 600;
  color: var(--lime);
}

.problem-note-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(27 * var(--u));
  height: calc(27 * var(--u));
  border-radius: 50%;
  border: calc(1.2 * var(--u)) solid #3A3D52;
}

.problem-note-icon svg {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
}

.problem-art {
  position: absolute;
  left: calc(325 * var(--u));
  top: calc(10 * var(--u));
  width: calc(570 * var(--u));
  height: calc(257 * var(--u));
}

.problem-art .bubble-text {
  font-size: 12.5px;
  font-weight: 600;
}

/* ---------- La solución ---------- */

.solution {
  position: relative;
  background: var(--bone);
  color: var(--dark-text);
  overflow: hidden;
}

.solution-inner {
  height: calc(240 * var(--u));
}

.solution-phone {
  position: absolute;
  left: calc(-20 * var(--u));
  top: 0;
  width: calc(305 * var(--u));
  height: calc(240 * var(--u));
  transform-origin: 55% 60%;
}

.solution-phone.is-shaking {
  animation: shake .7s var(--ease-shake);
}

.agitar-btn {
  position: absolute;
  z-index: 3;
  left: calc(93 * var(--u));
  top: calc(180 * var(--u));
  width: calc(114 * var(--u));
  height: calc(34 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--lime);
  color: var(--dark-text);
  font-size: calc(13 * var(--u));
  font-weight: 800;
  letter-spacing: .01em;
  transform: rotate(-4deg);
  box-shadow: inset 0 calc(-2 * var(--u)) 0 rgba(0, 0, 0, .12), 0 0 calc(16 * var(--u)) rgba(212, 251, 63, .22);
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
}

.agitar-btn:hover {
  transform: rotate(-4deg) translateY(calc(-2 * var(--u))) scale(1.02);
  box-shadow: inset 0 calc(-2 * var(--u)) 0 rgba(0, 0, 0, .12), 0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(212, 251, 63, .35);
}

.agitar-btn.is-shaking {
  animation: shake-btn .7s var(--ease-shake);
}

.solution-copy {
  position: absolute;
  z-index: 2;
  left: calc(299 * var(--u));
  top: calc(30 * var(--u));
}

.solution h2 {
  margin-top: calc(15 * var(--u));
  font-size: calc(29 * var(--u));
  line-height: calc(30 * var(--u));
}

.solution-copy p:last-child {
  margin-top: calc(18 * var(--u));
  font-size: calc(12.4 * var(--u));
  line-height: calc(16.5 * var(--u));
  font-weight: 500;
  color: #1B1A2A;
}

.verdict-art {
  position: absolute;
  left: calc(640 * var(--u));
  top: calc(38 * var(--u));
  width: calc(290 * var(--u));
  height: calc(180 * var(--u));
}

.verdict-art .is-hidden {
  display: none;
}

.verdict-card {
  transform-box: fill-box;
  transform-origin: center;
}

.verdict-card.is-pop {
  animation: pop .55s cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Beneficios ---------- */

.benefits {
  background: var(--ink);
}

.benefits-inner {
  height: calc(196 * var(--u));
  display: grid;
  grid-template-columns: calc(261 * var(--u)) calc(142 * var(--u)) calc(157 * var(--u)) calc(184 * var(--u)) calc(138 * var(--u));
  align-items: start;
}

.benefits-head {
  padding-top: calc(37 * var(--u));
}

.benefits h2 {
  margin-top: calc(7.5 * var(--u));
  font-size: calc(30 * var(--u));
  line-height: calc(36 * var(--u));
}

.benefits h2 .lime {
  position: relative;
  display: inline-block;
}

.benefits h2 .scribble {
  left: calc(71 * var(--u));
  top: calc(18.5 * var(--u));
  width: calc(112 * var(--u));
  height: calc(42 * var(--u));
}

.benefit {
  margin-top: calc(46.5 * var(--u));
  min-height: calc(106 * var(--u));
  padding-left: calc(25 * var(--u));
  border-left: 1px solid rgba(157, 149, 204, .26);
}

.benefit:nth-child(2) {
  border-image: linear-gradient(rgba(157, 149, 204, .3), rgba(212, 251, 63, .55)) 1;
}

.benefit:nth-child(3) { padding-left: calc(30 * var(--u)); }
.benefit:nth-child(4) { padding-left: calc(32 * var(--u)); }
.benefit:nth-child(5) { padding-left: calc(31 * var(--u)); }

.benefit-icon {
  height: calc(38 * var(--u));
  width: auto;
}

.benefit h3 {
  margin-top: calc(11.5 * var(--u));
  white-space: nowrap;
  font-size: calc(14.4 * var(--u));
  line-height: 1.2;
  font-weight: 700;
  color: #F7F6F2;
}

.benefit p {
  margin-top: calc(7 * var(--u));
  white-space: nowrap;
  font-size: calc(10.8 * var(--u));
  line-height: calc(13.9 * var(--u));
  font-weight: 500;
  color: var(--muted);
}

/* ---------- Funcionalidades ---------- */

.features {
  position: relative;
  background: var(--ink);
  border-top: 1px solid rgba(157, 149, 204, .08);
  overflow: hidden;
}

.features::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(122, 132, 210, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 132, 210, .12) 1px, transparent 1px);
  background-size: calc(38 * var(--u)) calc(38 * var(--u));
  -webkit-mask-image: radial-gradient(45% 80% at 12% 100%, #000 10%, transparent 100%);
  mask-image: radial-gradient(45% 80% at 12% 100%, #000 10%, transparent 100%);
}

.features-inner {
  height: calc(189 * var(--u));
  display: grid;
  grid-template-columns: calc(221 * var(--u)) repeat(4, calc(147 * var(--u)));
  column-gap: calc(18 * var(--u));
  align-items: start;
}

.features-head {
  padding-top: calc(29 * var(--u));
}

.features h2 {
  margin-top: calc(9 * var(--u));
  font-size: calc(30.5 * var(--u));
  line-height: calc(31 * var(--u));
}

.features h2 .lime {
  position: relative;
  display: inline-block;
}

.features h2 .scribble {
  left: calc(-10 * var(--u));
  top: calc(35 * var(--u));
  width: calc(88 * var(--u));
  height: calc(22 * var(--u));
}

.feature-card {
  --c: var(--lime);
  --c-soft: rgba(212, 251, 63, .35);
  position: relative;
  margin-top: calc(25 * var(--u));
  height: calc(128 * var(--u));
  padding: calc(13 * var(--u)) calc(19 * var(--u)) 0 calc(19 * var(--u));
  border-radius: calc(12 * var(--u));
  border: calc(1.4 * var(--u)) solid transparent;
  background:
    linear-gradient(#0A0B1C, #0A0B1C) padding-box,
    linear-gradient(170deg, var(--c-soft) 0%, rgba(157, 149, 204, .25) 30%, var(--c) 100%) border-box;
  transition: transform .35s var(--ease-out), box-shadow .35s ease;
}

.feature-card::after {
  content: "";
  position: absolute;
  top: calc(-1.4 * var(--u));
  left: 22%;
  width: 40%;
  height: calc(1.4 * var(--u));
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  opacity: .8;
}

.feature-card:hover {
  transform: translateY(calc(-4 * var(--u)));
  box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) calc(-12 * var(--u)) var(--c-soft);
}

.feature-pink { --c: var(--pink); --c-soft: rgba(255, 31, 132, .35); }
.feature-cyan { --c: var(--cyan); --c-soft: rgba(46, 197, 247, .35); }
.feature-lav { --c: #A49DD6; --c-soft: rgba(164, 157, 214, .35); }
.feature-lav::after { background: linear-gradient(90deg, transparent, #E9E7F5, transparent); }

.feature-icon {
  display: grid;
  place-items: center;
  width: calc(33 * var(--u));
  height: calc(33 * var(--u));
  border-radius: 50%;
  background: var(--c);
  color: var(--dark-text);
}

.feature-icon svg {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}

.feature-card h3 {
  margin-top: calc(13 * var(--u));
  font-size: calc(12.4 * var(--u));
  white-space: nowrap;
  line-height: 1.2;
  font-weight: 700;
  color: #F7F6F2;
}

.feature-card p {
  margin-top: calc(5 * var(--u));
  font-size: calc(10.4 * var(--u));
  white-space: nowrap;
  line-height: calc(13 * var(--u));
  font-weight: 500;
  color: var(--muted);
}

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

.how {
  background: var(--bone);
  color: var(--dark-text);
}

.how-inner {
  height: calc(158 * var(--u));
  display: grid;
  grid-template-columns: calc(214 * var(--u)) calc(234 * var(--u)) calc(228 * var(--u)) calc(206 * var(--u));
}

.how-head {
  padding-top: calc(30 * var(--u));
}

.how h2 {
  margin-top: calc(10 * var(--u));
  font-size: calc(27 * var(--u));
  line-height: calc(26 * var(--u));
  white-space: nowrap;
}

.how h2 > span {
  position: relative;
  display: inline-block;
}

.how h2 .scribble {
  left: calc(-7 * var(--u));
  top: calc(57 * var(--u));
  width: calc(104 * var(--u));
  height: calc(22 * var(--u));
}

.step {
  position: relative;
}

.step::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(30 * var(--u));
  height: calc(43 * var(--u));
  width: 1px;
  background: rgba(11, 10, 24, .22);
}

.step-arrow {
  position: absolute;
  left: calc(-2 * var(--u));
  top: calc(78 * var(--u));
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  color: var(--dark-text);
}

.step:first-of-type .step-arrow {
  left: calc(1 * var(--u));
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  color: #8A8794;
  transform: rotate(-35deg);
}

.step-art {
  position: absolute;
}

.step-1 .step-art { left: calc(12 * var(--u)); top: calc(22 * var(--u)); width: calc(95 * var(--u)); height: calc(120 * var(--u)); }
.step-2 .step-art { left: calc(23 * var(--u)); top: calc(21 * var(--u)); width: calc(84 * var(--u)); height: calc(122 * var(--u)); }
.step-3 .step-art { left: calc(19 * var(--u)); top: calc(23 * var(--u)); width: calc(80 * var(--u)); height: calc(120 * var(--u)); }

.step-text {
  position: absolute;
  top: calc(19 * var(--u));
}

.step-1 .step-text { left: calc(106 * var(--u)); }
.step-2 .step-text { left: calc(107 * var(--u)); }
.step-3 .step-text { left: calc(102 * var(--u)); }

.step-num {
  display: grid;
  place-items: center;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  margin-left: calc(-1 * var(--u));
  border-radius: 50%;
  font-size: calc(10.5 * var(--u));
  font-weight: 800;
  color: var(--dark-text);
}

.step-1 .step-num { background: var(--lime); }
.step-2 .step-num { background: var(--pink); }
.step-3 .step-num { background: var(--cyan); }

.step h3 {
  margin-top: calc(5 * var(--u));
  font-size: calc(12.4 * var(--u));
  white-space: nowrap;
  line-height: 1.2;
  font-weight: 700;
}

.step p {
  margin-top: calc(4.5 * var(--u));
  font-size: calc(10.2 * var(--u));
  white-space: nowrap;
  line-height: calc(12 * var(--u));
  font-weight: 500;
  color: #34313F;
}

/* ---------- Footer / CTA final ---------- */

.site-footer {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}

.footer-inner {
  height: calc(111 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-footer .brand {
  gap: calc(9 * var(--u));
  margin-left: 0;
}

.site-footer .brand-mark {
  top: calc(-1 * var(--u));
  width: calc(39 * var(--u));
  height: calc(49 * var(--u));
}

.site-footer .brand-name {
  position: relative;
  top: calc(-5 * var(--u));
  font-size: calc(19.2 * var(--u));
}

.footer-claim {
  position: absolute;
  left: calc(255 * var(--u));
  top: calc(5 * var(--u));
  width: calc(290 * var(--u));
  height: calc(95 * var(--u));
}

.footer-claim .claim-hand {
  font-family: var(--hand);
  font-size: 19.5px;
  stroke: #F6F5F0;
  stroke-width: .3px;
}

.footer-deco {
  position: absolute;
  left: calc(555 * var(--u));
  top: calc(5 * var(--u));
  width: calc(380 * var(--u));
  height: calc(80 * var(--u));
  pointer-events: none;
}

.site-footer .btn {
  position: relative;
  z-index: 2;
  width: calc(154 * var(--u));
  height: calc(36 * var(--u));
  margin-right: calc(29 * var(--u));
  margin-top: calc(-4 * var(--u));
  padding: 0;
  gap: calc(10 * var(--u));
  font-size: calc(12 * var(--u));
}

/* ---------- Modal + formulario de registro ---------- */

.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.lead-modal.is-open {
  display: flex;
}

.lead-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 4, 15, .82);
  backdrop-filter: blur(7px);
}

.lead-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  max-height: min(90vh, 780px);
  overflow-y: auto;
  padding: 38px 30px 30px;
  border: 1px solid rgba(212, 251, 63, .35);
  border-radius: 24px;
  background: #0b0d20;
  color: #f4f2ea;
  text-align: center;
  box-shadow: 0 24px 90px rgba(0, 0, 0, .45);
}

.lead-modal__panel h2 {
  margin: 8px 0 12px;
  font-size: clamp(1.6rem, 4vw, 2.15rem);
  line-height: 1.15;
  font-weight: 800;
}

.lead-modal__description {
  margin: 0 auto 26px;
  max-width: 390px;
  line-height: 1.65;
  color: #d4d3df;
}

.lead-modal__close {
  position: absolute;
  top: 10px;
  right: 14px;
  color: #f4f2ea;
  font-size: 32px;
  line-height: 1;
}

.lead-modal__close:hover {
  color: var(--lime);
}

body.lead-modal-open {
  overflow: hidden;
}

.lead-form {
  max-width: 460px;
  margin: 0 auto;
  text-align: left;
}

.lead-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.lead-form label {
  display: block;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  color: #f4f2ea;
}

.lead-form .req {
  color: var(--lime);
}

.lead-form input {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 7px;
  padding: 12px 14px;
  border: 1px solid rgba(244, 242, 234, .24);
  border-radius: 10px;
  outline: none;
  background: #15182d;
  color: #f4f2ea;
  font: inherit;
  font-weight: 500;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.lead-form input:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(212, 251, 63, .13);
}

.lead-form input.is-invalid {
  border-color: #ff7b6b;
}

.lead-msg {
  min-height: 20px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: #ff7b6b;
}

.lead-msg.ok {
  color: var(--lime);
}

.lead-submit {
  display: block;
  margin-left: auto;
  min-height: 46px;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  transition: transform .2s ease, filter .2s ease, opacity .2s ease;
}

.lead-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.lead-submit:disabled {
  opacity: .6;
  cursor: wait;
  transform: none;
}

@media (max-width: 480px) {
  .lead-modal__panel {
    padding: 36px 18px 22px;
    border-radius: 18px;
  }

  .lead-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ---------- Revelado al hacer scroll ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}

.js .reveal.visible {
  opacity: 1;
  transform: none;
}

.js .delay-1 { transition-delay: .08s; }
.js .delay-2 { transition-delay: .16s; }
.js .delay-3 { transition-delay: .24s; }

/* ---------- Animaciones ---------- */

@keyframes shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-9px) rotate(-4deg); }
  30% { transform: translateX(8px) rotate(3.5deg); }
  45% { transform: translateX(-6px) rotate(-2.5deg); }
  60% { transform: translateX(5px) rotate(2deg); }
  75% { transform: translateX(-3px) rotate(-1deg); }
}

@keyframes shake-btn {
  0%, 100% { transform: rotate(-4deg) translateX(0); }
  20% { transform: rotate(-7deg) translateX(-6px); }
  40% { transform: rotate(-1deg) translateX(5px); }
  60% { transform: rotate(-6deg) translateX(-4px); }
  80% { transform: rotate(-3deg) translateX(2px); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-5deg); }
  40% { transform: rotate(4deg); }
  60% { transform: rotate(-3deg); }
  80% { transform: rotate(2deg); }
}

@keyframes pop {
  0% { transform: scale(.9); }
  65% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* =========================================================
   Tablet y móvil
   ========================================================= */

@media (max-width: 980px) {
  :root {
    --u: 1px;
  }

  .container {
    width: min(100% - 40px, 680px);
  }

  /* Header */
  .header-inner {
    height: 72px;
  }

  .brand {
    margin-left: 0;
  }

  .menu-toggle {
    position: relative;
    z-index: 60;
    display: grid;
    place-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--dark-text);
  }

  .menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .25s ease;
  }

  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 50;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    background: var(--ink);
    font-size: 20px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .3s ease, transform .3s ease;
  }

  .nav.open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .nav-cta {
    width: auto;
    height: 50px;
    padding: 0 28px;
    font-size: 16px;
  }

  /* Hero */
  .hero-inner {
    height: auto;
    padding-bottom: 40px;
  }

  .hero-copy {
    padding-top: 118px;
  }

  .h1-a { font-size: clamp(34px, 8.4vw, 56px); line-height: 1.12; }
  .h1-b { font-size: clamp(42px, 10.5vw, 68px); line-height: 1.1; }
  .h1-b .scribble { top: 88%; width: 100%; height: auto; }

  .hero-sub { font-size: 17px; line-height: 1.35; }

  .hero .btn {
    width: auto;
    height: 48px;
    gap: 14px;
    padding: 0 24px;
    font-size: 16px;
  }

  .eyebrow {
    font-size: 11px;
  }

  .btn-icon { width: 24px; height: 24px; }

  .microcopy { font-size: 11px; }

  .hero-art {
    position: relative;
    left: auto;
    top: auto;
    width: calc(100% + 40px);
    max-width: none;
    height: auto;
    margin: 36px -20px 0;
  }

  /* Problema */
  .problem-inner {
    height: auto;
    padding-bottom: 50px;
  }

  .problem-copy { padding-top: 64px; }
  .problem h2 { font-size: clamp(32px, 7.5vw, 44px); line-height: 1.05; }
  .problem-lines { font-size: 16px; line-height: 1.5; }
  .problem-note { font-size: 15px; line-height: 1.35; }

  .problem-art {
    position: relative;
    left: auto;
    top: auto;
    width: calc(100% + 40px);
    height: auto;
    margin: 36px -20px 0;
  }

  /* Solución */
  .solution-inner {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    padding-top: 64px;
  }

  .solution-copy {
    position: static;
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 36px;
  }

  .solution h2 { font-size: clamp(30px, 7vw, 44px); line-height: 1.1; }
  .solution-copy p:last-child { font-size: 16px; line-height: 1.5; }

  .phone-wrap {
    position: relative;
    grid-row: 2;
  }

  .solution-phone {
    position: relative;
    left: auto;
    width: 100%;
    height: auto;
  }

  .agitar-btn {
    left: 37%;
    top: 75%;
    width: 37.4%;
    height: 14.2%;
    font-size: clamp(12px, 3.4vw, 18px);
  }

  .verdict-art {
    position: relative;
    left: auto;
    top: auto;
    grid-row: 2;
    width: 100%;
    height: auto;
    align-self: center;
  }

  /* Beneficios */
  .benefits-inner {
    height: auto;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    padding-bottom: 64px;
  }

  .benefits-head {
    grid-column: 1 / -1;
    padding-top: 64px;
    margin-bottom: 12px;
  }

  .benefits h2 { font-size: clamp(32px, 7.5vw, 44px); line-height: 1.2; }
  .benefits h2 .scribble { left: 46%; top: 42%; width: 73%; height: auto; }

  .benefit,
  .benefit:nth-child(n) {
    margin-top: 32px;
    min-height: 0;
    padding-left: 18px;
  }

  .benefit-icon { height: 34px; }
  .benefit h3 { font-size: 18px; }
  .benefit p { font-size: 15px; line-height: 1.45; white-space: normal; }

  /* Funcionalidades */
  .features-inner {
    height: auto;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-bottom: 64px;
  }

  .features-head {
    grid-column: 1 / -1;
    padding-top: 64px;
    margin-bottom: 20px;
  }

  .features h2 { font-size: clamp(32px, 7.5vw, 44px); line-height: 1.1; }
  .features h2 .scribble { top: 95%; width: 100%; height: auto; }

  .feature-card {
    margin-top: 0;
    height: auto;
    min-height: 170px;
    padding: 18px 20px 22px;
    border-width: 1.5px;
  }

  .feature-icon { width: 44px; height: 44px; }
  .feature-icon svg { width: 22px; height: 22px; }
  .feature-card h3 { font-size: 17px; margin-top: 18px; }
  .feature-card p { font-size: 15px; line-height: 1.45; white-space: normal; }

  /* Cómo funciona */
  .how-inner {
    height: auto;
    grid-template-columns: 1fr;
    padding: 64px 0;
    gap: 34px;
  }

  .how-head { padding-top: 0; }
  .how h2 { font-size: clamp(32px, 7.5vw, 44px); line-height: 1.1; white-space: normal; }
  .how h2 .scribble { top: 92%; width: 104px; height: 22px; }

  .step {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-top: 26px;
    border-top: 1px solid rgba(11, 10, 24, .15);
  }

  .step::before,
  .step-arrow {
    display: none;
  }

  .step-art,
  .step-1 .step-art,
  .step-2 .step-art,
  .step-3 .step-art {
    position: static;
    flex: none;
    width: 96px;
    height: auto;
  }

  .step-text,
  .step-1 .step-text,
  .step-2 .step-text,
  .step-3 .step-text {
    position: static;
  }

  .step-num { width: 32px; height: 32px; font-size: 13px; }
  .step h3 { font-size: 19px; margin-top: 10px; }
  .step p { font-size: 15px; line-height: 1.45; white-space: normal; }

  /* Footer */
  .footer-inner {
    height: auto;
    flex-direction: column;
    gap: 22px;
    padding: 48px 0 56px;
  }

  .footer-claim {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 360px);
    height: auto;
  }

  .footer-deco {
    display: none;
  }

  .site-footer .btn {
    width: auto;
    height: 48px;
    gap: 14px;
    margin: 0;
    padding: 0 24px;
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .solution-inner {
    grid-template-columns: 1fr;
  }

  .phone-wrap,
  .verdict-art {
    grid-row: auto;
  }

  .phone-wrap {
    width: 82%;
    margin: 0 auto;
  }

  .verdict-art {
    width: 90%;
    margin: 24px auto 0;
  }

  .benefits-inner,
  .features-inner {
    grid-template-columns: 1fr;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}