/* ==========================================================================
   Agiliza — Control de Obras · landing agiliza.uy

   Paleta ALINEADA CON EL SISTEMA (template Sash, el que usa obra.agiliza.uy):
   primario #6c5ffc, texto #282f53, superficie oscura #1a1a3c. Así la web y el
   sistema se ven de la misma familia cuando el cliente pasa de una al otro.
   El degradé del logo se mantiene, pero arranca en el violeta del sistema.
   ========================================================================== */

:root {
  /* Oscuros: del template (--blue #1a1a3c y --dark-body #292e4a) */
  --navy:        #1a1a3c;
  --navy-2:      #292e4a;

  /* Primario del sistema + acompañantes del degradé de marca */
  --violet:      #6c5ffc;   /* Sash --primary */
  --blue:        #6276ed;   /* Sash --primary-bg-border */
  --cyan:        #22c9f5;   /* del logo, cierra el degradé */
  --violet-dark: #233ac5;   /* Sash --primary-bg-hover */
  --grad:        linear-gradient(120deg, var(--violet) 0%, var(--blue) 55%, var(--cyan) 100%);
  --grad-soft:   linear-gradient(120deg, rgba(108,95,252,.10), rgba(34,201,245,.10));

  /* Tipografía: mismo tono de texto que el sistema */
  --ink:         #282f53;   /* Sash body color */
  --ink-2:       #4a5175;
  --ink-3:       #767d9e;
  --line:        #e6e8f2;
  --bg:          #ffffff;
  --bg-2:        #f6f6fb;   /* gris muy suave del template */

  --primary-soft:#eaedf7;   /* Sash --primary-transparentcolor */
  --ok:          #28a745;   /* Sash --success */
  --danger:      #dc3545;   /* Sash --danger */
  --amber:       #f5a524;   /* acento cálido secundario (CTAs/destaques) */

  --radius:      16px;
  --radius-lg:   24px;
  --shadow:      0 1px 2px rgba(40,47,83,.04), 0 8px 24px rgba(40,47,83,.06);
  --shadow-lg:   0 24px 60px rgba(40,47,83,.14);

  --wrap:        1160px;
  --nav-h:       74px;
}

/* --- reset corto --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.6rem); }
h3 { font-size: 1.12rem; font-weight: 700; }
p  { margin: 0 0 1rem; color: var(--ink-2); }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section--alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.center { text-align: center; }
.lead { font-size: clamp(1.02rem, .96rem + .35vw, 1.2rem); color: var(--ink-2); }
.muted { color: var(--ink-3); font-size: .92rem; }
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-block;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue);
  background: var(--grad-soft);
  border: 1px solid rgba(108,95,252,.18);
  padding: .35rem .8rem; border-radius: 999px;
  margin-bottom: 1rem;
}

.section-head { max-width: 720px; margin: 0 auto clamp(2.2rem, 4vw, 3.4rem); }
.section-head.center { text-align: center; }

/* --- botones --- */
/* Botones PLANOS, como los del sistema: violeta sólido, radio chico, sin
   degradé ni glow. Al pasar el mouse oscurece (Sash --primary-bg-hover). */
.btn {
  --btn-bg: var(--violet);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem;
  border: 1px solid transparent; border-radius: 5px;
  font-weight: 600; font-size: .95rem;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
  background: var(--btn-bg); color: #fff;
}
.btn:hover { background: var(--violet-dark); }
.btn--ghost {
  background: #fff; color: var(--violet);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--primary-soft, #eaedf7); border-color: var(--violet); color: var(--violet); }
.btn--light { background: #fff; color: var(--violet); }
.btn--light:hover { background: #eaedf7; color: var(--violet-dark); }
.btn--lg { padding: 1rem 1.7rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nav.is-stuck { border-bottom-color: var(--line); box-shadow: 0 4px 20px rgba(40,47,83,.05); }
.nav__inner { height: 100%; display: flex; align-items: center; gap: 1.5rem; }
.nav__logo { flex: none; display: inline-flex; align-items: center; }
.nav__logo img { height: 34px; width: auto; display: block; }
/* Wrapper del menú: en desktop es transparente al layout (los hijos actúan como
   items directos del nav); en mobile pasa a ser el panel desplegable. */
.nav__menu { display: contents; }
.nav__links { display: flex; gap: 1.6rem; margin-left: auto; }
.nav__links a { font-size: .93rem; font-weight: 600; color: var(--ink-2); }
.nav__links a:hover { color: var(--blue); }
.nav__cta { display: flex; gap: .6rem; align-items: center; }
.nav__toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  width: 42px; height: 42px; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--navy); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav__toggle span::before { transform: translateY(-6px); }
.nav__toggle span::after  { transform: translateY(4px); }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: rotate(45deg); }
.nav.is-open .nav__toggle span::after  { transform: rotate(-45deg) translateY(-2px); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3.5rem, 7vw, 6rem);
}
.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 130%;
  background:
    radial-gradient(48% 42% at 78% 18%, rgba(34,201,245,.16), transparent 70%),
    radial-gradient(42% 46% at 12% 8%, rgba(108,95,252,.14), transparent 70%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero h1 { margin-bottom: .7rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 1.2rem; }
.hero__note { font-size: .88rem; color: var(--ink-3); display: flex; align-items: center; gap: .45rem; }

.hero__points { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: .55rem; }
.hero__points li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; color: var(--ink-2); }
.hero__points svg { flex: none; margin-top: .28rem; color: var(--ok); }

/* --- mockup del panel (CSS puro, no es un screenshot) --- */
.mock {
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  /* Sin transform 3D: el rotateY/rotateX inclinaba el panel pero dejaba la capa GPU
     congelada y el texto borroso/poco visible. La profundidad la da la sombra. */
}
.mock__bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .7rem .9rem; background: var(--navy);
}
.mock__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.28); }
.mock__title { margin-left: .6rem; color: rgba(255,255,255,.72); font-size: .75rem; font-weight: 600; }
.mock__body { padding: 1.1rem; display: grid; gap: .9rem; background: var(--bg-2); }
.mock__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.mock__kpi {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem;
}
.mock__kpi small { display: block; font-size: .66rem; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.mock__kpi b { font-size: 1.02rem; color: var(--navy); }
.mock__kpi .up { color: var(--ok); font-size: .72rem; font-weight: 700; }
.mock__kpi .down { color: #d8443c; font-size: .72rem; font-weight: 700; }
.mock__card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .9rem; }
.mock__card h4 { margin: 0 0 .7rem; font-size: .78rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.mock__line { display: grid; grid-template-columns: 108px 1fr 44px; align-items: center; gap: .6rem; margin-bottom: .55rem; font-size: .74rem; color: var(--ink-2); }
.mock__track { display: block; height: 8px; border-radius: 999px; background: #eef1f9; overflow: hidden; }
/* display:block es necesario: <i> es inline y el height:100% no aplicaría */
.mock__fill { display: block; height: 100%; border-radius: 999px; background: var(--grad); }
.mock__val { text-align: right; font-weight: 700; color: var(--navy); font-size: .74rem; }
.mock__bars { display: flex; align-items: flex-end; gap: .45rem; height: 74px; }
.mock__bars i { flex: 1; border-radius: 5px 5px 0 0; background: var(--grad); opacity: .85; }

/* ==========================================================================
   Franja "pensado para"
   ========================================================================== */
.strip { border-block: 1px solid var(--line); background: var(--bg-2); padding: 1.5rem 0; }
.strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem 1.6rem; }
.strip span { font-size: .84rem; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; }
.strip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); }

/* ==========================================================================
   Antes / con Agiliza
   ========================================================================== */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.compare__col { border-radius: var(--radius-lg); padding: 1.8rem; border: 1px solid var(--line); background: #fff; }
.compare__col--bad { background: #fff; }
.compare__col--good { background: var(--navy); border-color: transparent; color: #fff; box-shadow: var(--shadow-lg); }
.compare__col--good h3, .compare__col--good p { color: #fff; }
.compare__col h3 { margin-bottom: 1.1rem; font-size: 1.05rem; }
.compare ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.compare li { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; }
.compare li svg { flex: none; margin-top: .3rem; }
.compare__col--bad li { color: var(--ink-2); }
.compare__col--bad li svg { color: #d8443c; }
.compare__col--good li { color: rgba(255,255,255,.9); }
.compare__col--good li svg { color: var(--cyan); }

/* ==========================================================================
   Bento de módulos
   ========================================================================== */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
/* Tarjetas al estilo del sistema: planas (sin sombra), radio 7px y borde suave.
   El hover no levanta la tarjeta: sólo tiñe el borde y el fondo. */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 7px;
  padding: 1.5rem; box-shadow: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.card:hover { background: var(--primary-soft); border-color: var(--violet); }
.card h3 { margin-bottom: .4rem; }
.card p { margin: 0; font-size: .92rem; }
.card__icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: .9rem;
  background: var(--grad-soft); color: var(--blue);
  border: 1px solid rgba(108,95,252,.16);
}
/* 12 módulos: 4 filas parejas de 3 (cada card ocupa 2 de las 6 columnas). */
.bento .card { grid-column: span 2; }

.more-modules {
  margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
}
.chip {
  font-size: .82rem; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line); background: #fff;
  padding: .35rem .8rem; border-radius: 999px;
}

/* ==========================================================================
   Filas zig-zag
   ========================================================================== */
.rows { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.row:nth-child(even) .row__media { order: -1; }
.row ul { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .6rem; }
.row li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; color: var(--ink-2); }
.row li svg { flex: none; margin-top: .3rem; color: var(--blue); }
.row__media {
  border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff;
  padding: 1.4rem; box-shadow: var(--shadow);
}

/* mini widgets de las filas */
.w-title { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 700; margin-bottom: .9rem; }
.w-tree { display: grid; gap: .5rem; font-size: .84rem; }
.w-tree div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .7rem; border-radius: 10px; background: var(--bg-2); }
.w-tree div b { color: var(--navy); font-weight: 700; }
.w-tree .lvl-1 { margin-left: 1.1rem; background: #fff; border: 1px dashed var(--line); }
.w-tree .lvl-2 { margin-left: 2.2rem; background: #fff; border: 1px dashed var(--line); color: var(--ink-3); }

.w-flow { display: grid; gap: .45rem; }
.w-step { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: 10px; background: var(--bg-2); font-size: .85rem; }
.w-step i {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--grad); color: #fff;
  display: grid; place-items: center; font-style: normal; font-size: .7rem; font-weight: 800;
}
.w-step.is-done { background: rgba(18,165,111,.08); }
.w-step.is-done i { background: var(--ok); }

.w-stack { display: grid; gap: .6rem; }
.w-money { display: flex; justify-content: space-between; align-items: center; padding: .65rem .8rem; border-radius: 10px; border: 1px solid var(--line); font-size: .85rem; }
.w-money b { color: var(--navy); }
.w-money .neg { color: #d8443c; font-weight: 700; }
.w-money .pos { color: var(--ok); font-weight: 700; }

/* ==========================================================================
   Banda de stats
   ========================================================================== */
.stats { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.stats::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 85% 10%, rgba(34,201,245,.24), transparent 60%),
              radial-gradient(50% 120% at 10% 90%, rgba(108,95,252,.28), transparent 60%);
}
.stats .wrap { position: relative; z-index: 1; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.stats b { display: block; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; }
.stats span { font-size: .88rem; color: rgba(255,255,255,.72); }

/* ==========================================================================
   Pasos
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; counter-reset: step; }
.step { position: relative; padding-top: 3.2rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--grad); color: #fff; font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 8px 20px rgba(108,95,252,.28);
}

/* ==========================================================================
   Planes
   ========================================================================== */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: start; }
/* Variante de 4 planes (Presupuestos / +IA / Obra / Completo). */
.plans--4 { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 1120px) and (min-width: 981px) { .plans--4 { grid-template-columns: repeat(2, 1fr); } }
.plans__note { margin-top: 1.5rem; font-size: .92rem; }
.plans__note a { color: var(--violet); font-weight: 600; }
.plan { background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 1.9rem; box-shadow: none; }
.plan--featured { border-color: var(--violet); background: var(--navy); color: #fff; box-shadow: none; position: relative; }
.plan__tag {
  position: absolute; top: -12px; right: 1.5rem;
  background: var(--grad); color: #fff; font-size: .72rem; font-weight: 800;
  padding: .3rem .8rem; border-radius: 999px; letter-spacing: .04em;
}
.plan__price { font-size: 1.6rem; font-weight: 800; color: var(--navy); margin: .6rem 0 .2rem; letter-spacing: -.02em; }
.plan__cap { font-size: .82rem; color: var(--ink-3); font-weight: 600; margin: .1rem 0 0; }
.soon { font-size: .8em; font-weight: 600; opacity: .6; }
.plan__cap b { color: var(--navy); }
.plan--featured .plan__cap { color: rgba(255,255,255,.75); }
.plan--featured .plan__cap b { color: #fff; }
.plan ul { list-style: none; padding: 0; margin: 1.3rem 0 1.6rem; display: grid; gap: .6rem; }
.plan li { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; color: var(--ink-2); }
.plan li svg { flex: none; margin-top: .28rem; color: var(--blue); }

/* Overrides del plan destacado — van DESPUÉS de .plan li, si no la cascada
   los pisa (misma especificidad) y el texto queda gris oscuro sobre navy. */
.plan--featured h3,
.plan--featured .plan__price { color: #fff; }
.plan--featured p,
.plan--featured li { color: rgba(255,255,255,.86); }
.plan--featured li svg { color: var(--cyan); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 780px; margin-inline: auto; display: grid; gap: .7rem; }
.faq details {
  border: 1px solid var(--line); border-radius: 7px; background: #fff; padding: 0 1.2rem;
  transition: border-color .2s ease, background-color .2s ease;
}
.faq details[open] { border-color: var(--violet); background: var(--primary-soft); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 0;
  font-weight: 700; font-size: 1rem; color: var(--navy);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--blue); line-height: 1; flex: none;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 1.1rem; font-size: .95rem; }

/* ==========================================================================
   Formulario / CTA final
   ========================================================================== */
.demo { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.demo::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(55% 100% at 15% 0%, rgba(108,95,252,.32), transparent 60%),
              radial-gradient(55% 100% at 90% 100%, rgba(34,201,245,.22), transparent 60%);
}
.demo .wrap { position: relative; z-index: 1; }
.demo__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.demo h2 { color: #fff; }
.demo p { color: rgba(255,255,255,.78); }
.demo__list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .7rem; }
.demo__list li { display: flex; gap: .6rem; align-items: flex-start; color: rgba(255,255,255,.86); font-size: .95rem; }
.demo__list svg { flex: none; margin-top: .3rem; color: var(--cyan); }

.form { background: #fff; border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.2rem); box-shadow: var(--shadow-lg); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.field { display: grid; gap: .35rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 700; color: var(--ink-2); }
.field input, .field textarea, .field select {
  font: inherit; font-size: .93rem; color: var(--ink);
  padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(108,95,252,.14);
}
.field textarea { resize: vertical; min-height: 96px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__msg { margin: .9rem 0 0; font-size: .9rem; font-weight: 600; display: none; }
.form__msg.is-ok  { display: block; color: var(--ok); }
.form__msg.is-err { display: block; color: #d8443c; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: #070c33; color: rgba(255,255,255,.66); padding: 3.5rem 0 2rem; font-size: .9rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; }
.footer img { height: 34px; margin-bottom: 1rem; }
.footer h4 { color: #fff; font-size: .84rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .9rem; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.footer a:hover { color: var(--cyan); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; font-size: .84rem;
}

/* ==========================================================================
   Reveal — SOLO se oculta si el JS arrancó (clase .js en <html>).
   Sin esto, un fallo de JS dejaría la página en blanco.
   ========================================================================== */
/* Reveal DESACTIVADO: los mockups (celular / panel de portada) son elementos CSS
   pesados; cualquier transición (transform u opacity) los promovía a una capa GPU
   que quedaba con un snapshot "congelado". Ahora el contenido está SIEMPRE visible,
   sin animación ni capa. `!important` para que se muestre pase lo que pase con el JS. */
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ==========================================================================
   Excel vs Agiliza — la planilla vieja al lado del costo real al día.
   ========================================================================== */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.vs__col {
  border: 1px solid var(--line); border-radius: 7px;
  background: #fff; overflow: hidden; box-shadow: none;
}
/* La columna "vieja" se ve apagada; la nueva, viva y con el acento de marca. */
.vs__col--old { background: #fbfbfc; }
.vs__col--new { border-color: var(--violet); box-shadow: none; }

.vs__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1rem;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--line);
  font-size: .8rem; line-height: 1.3;
}
.vs__col--old .vs__head { background: #f2f3f7; color: var(--ink-3); }
.vs__col--new .vs__head { background: var(--grad-soft); color: var(--ink); }
.vs__file { font-weight: 700; word-break: break-all; }
.vs__meta { color: var(--ink-3); white-space: nowrap; }

.vs__table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.vs__table th, .vs__table td { padding: .7rem 1.1rem; text-align: right; }
.vs__table th:first-child, .vs__table td:first-child { text-align: left; }
.vs__table th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); font-weight: 700; border-bottom: 1px solid var(--line);
}
.vs__table td { border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.vs__table tr:last-child td { border-bottom: 0; }
.vs__col--old .vs__table td { color: var(--ink-3); }
.vs__col--new .vs__table td:first-child { color: var(--ink); font-weight: 600; }

.vs__stale { color: #c3c7d6; }                 /* el "real" que nunca se carga */
.vs__pos   { color: var(--ok); font-weight: 700; }
.vs__neg   { color: var(--danger); font-weight: 700; }

.vs__foot { padding: .75rem 1.1rem; font-size: .8rem; color: var(--ink-3); }
.vs__col--new .vs__foot { color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .hero__grid, .row, .compare, .demo__grid, .vs { grid-template-columns: 1fr; }
  .row:nth-child(even) .row__media { order: 0; }
  .mock { transform: none; }
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento .card:nth-child(n) { grid-column: span 2; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .steps, .plans { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }

  .nav__toggle { display: flex; }
  /* Menú mobile: links + botones bajan juntos como un panel único bajo la barra. */
  .nav__menu {
    display: none;
    position: absolute; left: 0; right: 0; top: var(--nav-h);
    flex-direction: column; gap: 1rem;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 1.1rem 1.25rem 1.35rem;
    box-shadow: 0 12px 24px rgba(40,47,83,.08);
  }
  .nav.is-open .nav__menu { display: flex; }
  .nav.is-open { background: #fff; }
  .nav__menu .nav__links { flex-direction: column; gap: 1rem; margin: 0; }
  .nav__menu .nav__cta { flex-direction: column; align-items: stretch; gap: .6rem; }
  .nav__menu .nav__cta .btn { width: 100%; }
}

@media (max-width: 620px) {
  .bento, .form__grid { grid-template-columns: 1fr; }
  .bento .card:nth-child(n) { grid-column: auto; }
  .mock__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
}

/* ==========================================================================
   Sección App móvil + celular dibujado en CSS
   ========================================================================== */
.appsec__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.applist { list-style: none; padding: 0; margin: 1.6rem 0 1.8rem; display: grid; gap: .7rem; }
.applist li { display: flex; gap: .6rem; align-items: flex-start; font-size: .96rem; color: var(--ink-2); }
.applist svg { flex: none; margin-top: .28rem; color: var(--ok); }

.stores { display: flex; flex-wrap: wrap; gap: .8rem; }
.store {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--navy);
}
.store svg { color: var(--navy); flex: none; }
.store b { display: block; font-size: .9rem; line-height: 1.1; }
.store small { display: block; font-size: .68rem; color: var(--ink-3); font-weight: 600; }

/* --- Celular --- */
.phonewrap { display: flex; justify-content: center; }
.phone {
  position: relative; width: 300px; max-width: 100%;
  border-radius: 42px; padding: 12px;
  background: linear-gradient(160deg, #2a3350, var(--navy));
  box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,.06);
  /* Sin transform 3D (mismo motivo que .mock): evitaba el congelamiento y el texto
     borroso del celular. */
}
.phone__notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 22px; background: var(--navy); border-radius: 0 0 16px 16px; z-index: 3;
}
.phone__screen {
  position: relative; border-radius: 32px; overflow: hidden;
  background: var(--bg-2); padding: 1.1rem .9rem 1.2rem;
  display: grid; gap: .7rem;
  min-height: 560px;
}
.ph__top { display: flex; align-items: center; justify-content: space-between; padding: .3rem .2rem .1rem; }
.ph__time { font-size: .74rem; font-weight: 700; color: var(--navy); }
.ph__brand { font-size: .82rem; font-weight: 800; letter-spacing: -.01em; color: var(--violet); }
.ph__obra {
  background: var(--grad); color: #fff; border-radius: 16px; padding: .8rem 1rem;
}
.ph__obra small { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; opacity: .85; }
.ph__obra b { font-size: 1.25rem; }
.ph__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ph__kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .55rem .5rem; text-align: center; }
.ph__kpi small { display: block; font-size: .58rem; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ph__kpi b { font-size: .92rem; color: var(--navy); }
.ph__kpi i { display: block; font-style: normal; font-size: .62rem; font-weight: 700; }
.ph__kpi i.ok { color: var(--ok); }
.ph__cta {
  display: flex; align-items: center; gap: .7rem;
  background: var(--primary-soft); border: 1px dashed var(--violet); border-radius: 14px;
  padding: .75rem .85rem; font-size: .8rem; color: var(--ink-2);
}
.ph__cta b { color: var(--violet-dark); font-weight: 700; }
.ph__cam {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  background: var(--violet); color: #fff; display: grid; place-items: center;
}
.ph__list { display: grid; gap: .5rem; }
.ph__li {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: .6rem;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .55rem .7rem;
}
.ph__ic {
  width: 32px; height: 32px; border-radius: 9px; background: var(--bg-2);
  display: grid; place-items: center; font-size: 1rem;
}
.ph__txt b { display: block; font-size: .82rem; color: var(--navy); }
.ph__txt small { display: block; font-size: .68rem; color: var(--ink-3); }
.ph__amt { font-size: .82rem; font-weight: 700; color: var(--navy); white-space: nowrap; }

@media (max-width: 860px) {
  .appsec__grid { grid-template-columns: 1fr; }
  .phonewrap { margin-top: 1rem; }
  .phone { transform: none; }
}

/* ==========================================================================
   Modal "Entrar" — elegir versión (anterior / nuevo)
   ========================================================================== */
.lgn { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.lgn[hidden] { display: none; }
.lgn__backdrop { position: absolute; inset: 0; background: rgba(11,17,69,.55); }
.lgn__box {
  position: relative; z-index: 1; background: #fff; border-radius: 18px;
  box-shadow: var(--shadow-lg); width: 100%; max-width: 440px; padding: 1.9rem 1.6rem; text-align: center;
}
.lgn__x { position: absolute; top: .55rem; right: .85rem; background: none; border: none; font-size: 1.7rem; line-height: 1; color: var(--ink-3); cursor: pointer; padding: .2rem .4rem; }
.lgn__x:hover { color: var(--navy); }
.lgn__title { margin: 0 0 .3rem; font-size: 1.18rem; color: var(--navy); }
.lgn__sub { margin: 0 0 1.3rem; color: var(--ink-2); font-size: .9rem; }
.lgn__opts { display: grid; gap: .75rem; }
.lgn__opt {
  display: flex; align-items: center; gap: .9rem; position: relative; text-decoration: none; text-align: left;
  border: 1.5px solid var(--line); border-radius: 14px; padding: .9rem 1rem;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.lgn__mark { flex: none; height: 34px; width: auto; max-width: 40px; object-fit: contain; }
.lgn__mark--wide { max-width: 104px; }
.lgn__txt { display: block; min-width: 0; }
.lgn__opt b { display: block; color: var(--navy); font-size: 1.03rem; }
.lgn__opt small { color: var(--ink-3); font-size: .82rem; }
.lgn__opt:hover { border-color: var(--violet); background: var(--primary-soft, #eef1fb); transform: translateY(-1px); }
.lgn__opt--new { border-color: var(--violet); }
.lgn__badge {
  position: absolute; top: .85rem; right: .95rem; background: var(--grad); color: #fff;
  font-size: .62rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .05em;
}
body.lgn-open { overflow: hidden; }

/* ==========================================================================
   REDISEÑO — identidad "plano de obra": fuente display + grilla blueprint +
   acento cálido. Va al final para pisar lo anterior donde corresponde.
   ========================================================================== */

/* (1) Títulos y números con fuente display, más carácter */
h1, h2, h3,
.plan__price, .stats b, .mock__title { font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; }

/* (2) Grilla tipo plano detrás del hero (se desvanece hacia los bordes) */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(108,95,252,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,95,252,.06) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(78% 68% at 50% 22%, #000 0%, transparent 78%);
          mask-image: radial-gradient(78% 68% at 50% 22%, #000 0%, transparent 78%);
}
.hero__grid { z-index: 1; }

/* (3) La misma grilla (clara) sobre la banda oscura de stats, para atar el tema */
.stats {
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px; background-position: center top;
}

/* (4) Acento cálido: la pastilla "Más elegido" pasa a ámbar (pop sobre el violeta) */
.plan__tag { background: var(--amber); color: #3a2a05; }

/* Mockup del hero "vivo": las barras de avance y de gasto se llenan al cargar.
   Animación CSS pura (anima width/height, NO transform → sin capa GPU que se congele).
   Si por lo que sea no corre, quedan en su valor natural = llenas (estado seguro). */
.hero .mock__fill { animation: mockFill 1.15s cubic-bezier(.22,1,.36,1); }
@keyframes mockFill { from { width: 0; } }
.hero .mock__bars i { animation: mockBar 1s cubic-bezier(.22,1,.36,1) .15s; }
@keyframes mockBar { from { height: 0; } }

/* ==========================================================================
   Hero: pila de 3 mockups superpuestos (panel + celular + aviso Telegram)
   ========================================================================== */
.herostack { position: relative; }
.herostack__main { position: relative; z-index: 1; }

/* Celular abajo-izquierda, adelante del panel */
.herostack__phone { position: absolute; left: -3%; bottom: -7%; z-index: 3; width: 32%; max-width: 156px; }
.hsphone { position: relative; border-radius: 24px; padding: 6px;
  background: linear-gradient(160deg, #2a3350, var(--navy));
  box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(255,255,255,.06); }
.hsphone__notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 42%; height: 10px; background: var(--navy); border-radius: 0 0 8px 8px; z-index: 2; }
.hsphone__screen { display: grid; gap: .5rem;
  border-radius: 19px; background: #fff; padding: .9rem .7rem .8rem; }
.hsphone__head { font-size: .62rem; font-weight: 700; color: var(--ink-3); text-align: center; }
.hsphone__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.hsphone__kpi { background: var(--bg-2); border-radius: 9px; padding: .45rem .5rem; }
.hsphone__kpi small { display: block; font-size: .54rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.hsphone__kpi b { font-size: .92rem; color: var(--navy); font-family: "Space Grotesk", sans-serif; }
.hsphone__list { flex: 1; display: grid; gap: .38rem; align-content: start; margin-top: .1rem; }
.hsphone__it { display: flex; justify-content: space-between; align-items: center; gap: .4rem;
  font-size: .58rem; color: var(--ink-2); border-bottom: 1px solid var(--line); padding-bottom: .34rem; }
.hsphone__it b { flex: none; color: var(--navy); font-family: "Space Grotesk", sans-serif; }
.hsphone__cta { text-align: center; font-size: .62rem; font-weight: 700;
  color: #fff; background: var(--violet); border-radius: 8px; padding: .5rem; }

/* Aviso por Telegram arriba-derecha */
.herostack__note { position: absolute; right: -3%; top: -6%; z-index: 4;
  display: flex; align-items: center; gap: .55rem;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: .55rem .75rem; }
.hsnote__ic { flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; background: #229ED9; color: #fff; }
.herostack__note b { display: block; font-size: .78rem; color: var(--navy); }
.herostack__note small { font-size: .7rem; color: var(--ink-3); }
.herostack__note--wa { top: -6%; bottom: auto; right: 34%; }
.herostack__note--wa .hsnote__ic { background: #25D366; }

/* En pantallas chicas: solo el panel (las capas flotantes se ocultan) */
@media (max-width: 620px) {
  .herostack__phone, .herostack__note { display: none; }
}