/* ============================================================
   PRICEALLY — sistema visual "SIGNAL + OFFSET"
   Estático. Sin dependencias. Sin peticiones externas. Mobile-first.

   GRAMÁTICA DEL SISTEMA
   ─────────────────────
   Cada dato es un par: lo esperado y lo observado.
     · Cuando COINCIDEN, lo observado tapa exactamente a lo esperado
       y se lee un solo trazo en tinta.   → ocurrió como debía
     · Cuando NO coinciden, aparecen los dos y lo observado se tiñe
       de coral.                          → apareció una diferencia
   El coral no decora: significa «aquí hay una diferencia».

   HONESTIDAD VISUAL
   ─────────────────
   Ningún visual de esta página representa una medición. No hay cifras,
   porcentajes, montos ni deltas cuantificados. Son diagramas conceptuales.
   ============================================================ */

:root{
  --paper:   #FAF9F5;   /* papel cálido                      */
  --surface: #F0EEE8;   /* sección alterna y campos          */
  --ink:     #14161A;   /* tinta                  17.19 : 1  */
  --muted:   #565C64;   /* texto secundario        6.41 : 1  */
  --expected:#A9AFB5;   /* marca de gráfico, nunca texto     */
  --signal:  #FF4A1C;   /* observado / diferencia            */
  --sig-txt: #C93510;   /* coral legible           4.98 : 1  */
  --rule:    #E4E1D9;
  --err:     #B32414;
  --ok:      #2C5C46;
  /* sobre superficie oscura (CTA y modal) los dos anteriores no llegan a AA:
     #B32414 sobre #14161A da 2.4. Estos son sus equivalentes oscuros. */
  --err-osc: #FF8B72;
  --ok-osc:  #7FC4A2;

  /* Tipografía del sistema: cero peticiones externas.
     Sustituta de Instrument Sans + Inter mientras no se autoalojen. */
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, "JetBrains Mono", Consolas, monospace;

  --measure: 34rem;
  --hero-w:  33rem;
  --wide:    64rem;
  --pad:     1.5rem;
  --head-h:  3.5rem;
  --off:     5px;       /* desplazamiento base del sistema */
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:   #121417;
    --surface: #1A1D21;
    --ink:     #F0EFEA;
    --muted:   #A6ACB4;
    --expected:#4E545B;
    --signal:  #FF5C31;
    --sig-txt: #FF8563;
    --rule:    #292D33;
    --err:     #FF8B72;
    --ok:      #7FC4A2;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ---------- utilidades ---------- */
.skip{ position:absolute; left:-9999px; background:var(--ink); color:var(--paper); padding:.75rem 1rem; z-index:60; }
.skip:focus{ left:1rem; top:1rem; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:2px; }
a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:.18em; }
a:hover{ color:var(--sig-txt); }
em{ font-style:italic; }
main > section[id]{ scroll-margin-top:calc(var(--head-h) + 1rem); }

.masthead-in,.hero,.sec,.foot{
  max-width:var(--wide); margin-inline:auto; padding-inline:var(--pad);
}
.hero h1{ max-width:var(--hero-w); }
@media (min-width: 62rem){ .hero h1{ max-width:none; } }
.hero-sub,.sec-intro,.sec > p,.cadena-pie,.razones dd,.mecanismos p,
.privacy,.form,.form-msg,.foot-nota,.razones-pie,.cta-txt p{ max-width:var(--measure); }

/* ============================================================
   CABECERA
   ============================================================ */
.masthead{
  position:sticky; top:0; z-index:50; background:var(--paper);
  border-bottom:1px solid transparent; transition:border-color .2s ease;
}
.masthead[data-desplazado="true"]{ border-bottom-color:var(--rule); }
.masthead-in{ height:var(--head-h); display:flex; align-items:center; justify-content:space-between; gap:1rem; }

.marca{
  font-size:.9375rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; min-height:44px;
}
.marca:hover{ color:var(--ink); opacity:.7; }

.nav{ display:none; }
.nav-lista{ list-style:none; margin:0; padding:0; display:flex; gap:1.75rem; }
.nav-lista a{ font-size:.875rem; color:var(--muted); text-decoration:none; white-space:nowrap; }
.nav-lista a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:.35em; }

.nav-cta{
  /* mismo criterio que .btn: el contraste tinta-sobre-coral sólo funciona con
     los valores del esquema claro, así que van literales */
  font-size:.875rem; font-weight:500; color:#14161A; background:#FF4A1C;
  text-decoration:none; white-space:nowrap; border:1px solid #FF4A1C;
  border-radius:2px; padding:.5rem .9rem; transition:opacity .15s ease;
}
.nav-cta:hover{ color:#14161A; opacity:.85; }

.nav-toggle{
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px;
  padding:0 .25rem 0 .5rem; margin-right:-.25rem; background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.nav-toggle-icono{ display:inline-block; width:18px; height:10px; position:relative; }
.nav-toggle-icono i{ position:absolute; left:0; width:18px; height:1px; background:var(--ink); transition:transform .18s ease; }
.nav-toggle-icono i:nth-child(1){ top:0; }
.nav-toggle-icono i:nth-child(2){ bottom:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icono i:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icono i:nth-child(2){ transform:translateY(-4.5px) rotate(-45deg); }

.masthead[data-menu="abierto"] .nav{
  display:block; position:absolute; top:var(--head-h); left:0; right:0;
  background:var(--paper); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:.5rem var(--pad) 1.5rem;
}
.masthead[data-menu="abierto"] .nav-lista{ display:block; }
.masthead[data-menu="abierto"] .nav-lista a{
  display:block; padding:.85rem 0; font-size:1rem; color:var(--ink);
  border-bottom:1px solid var(--rule);
}
.masthead[data-menu="abierto"] .nav-cta{ display:inline-block; margin-top:1.25rem; padding:.7rem 1.1rem; }

/* ============================================================
   HERO — texto y matriz forman UNA composición
   ============================================================ */
.hero{ padding-top:2.5rem; padding-bottom:3.25rem; }
.hero-eyebrow{
  font-size:.75rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--sig-txt); margin:0 0 1.25rem; max-width:var(--measure);
}
h1{
  font-size:2.25rem; line-height:1.1; letter-spacing:-.03em; font-weight:700;
  margin:0 0 1.35rem; text-wrap:pretty;   /* móvil: el titular manda */
}
.hero-sub{ font-size:1.0625rem; line-height:1.55; color:var(--muted); margin:0; text-wrap:pretty; }

.hero-viz{ margin:2.5rem 0 0; }
.viz-hero{ display:block; width:100%; height:auto; }
.hero-viz-d{ display:none; }          /* la matriz densa entra en tablet */

/* firma gráfica de móvil: un objeto pequeño, con aire, no un separador */
.hero-firma{ margin:3.25rem 0 1rem; }
.viz-firma{ display:block; width:78%; max-width:17rem; height:auto; }

/* la gramática, también aquí */
.mx-o{ fill:var(--ink); }             /* coinciden */
.mx-e{ fill:var(--expected); }        /* lo esperado, visible sólo al separarse */
.mx-d{ fill:var(--signal); }          /* lo observado, desplazado */
.mx-mask{ fill:var(--paper); }

/* ============================================================
   SECCIONES
   ============================================================ */
.sec{ padding-block:3.5rem; border-top:1px solid var(--rule); }
.sec-alt{ background:var(--surface); border-top-color:transparent; max-width:none; padding-inline:0; }
.sec-alt > *{ max-width:var(--wide); margin-inline:auto; padding-inline:var(--pad); }

.sec-head{ margin-bottom:2rem; }
.num{
  display:block; font-family:var(--mono); font-size:.6875rem; letter-spacing:.16em;
  color:var(--sig-txt); margin-bottom:.75rem;
}
h2{ font-size:1.5rem; line-height:1.15; font-weight:700; letter-spacing:-.02em; margin:0; text-wrap:balance; }
.sec-intro{ font-size:1rem; color:var(--muted); margin:.85rem 0 0; text-wrap:pretty; }
p{ margin:0 0 1.1rem; }
.sec > p:last-of-type{ margin-bottom:0; }

.destacado{
  font-size:1.1875rem; line-height:1.4; color:var(--ink); margin:0 0 1.5rem;
  padding-left:1rem; border-left:2px solid var(--signal); text-wrap:pretty;
  max-width:var(--measure);
}
.sec > p:not(.destacado){ color:var(--muted); }

/* ---------- 04 · sobre Priceally ----------
   Un statement y dos bloques secundarios de peso distinto: el primero lleva
   dos niveles (las áreas en tinta y una nota en gris), el segundo uno solo. */
.sobre{ margin-top:2.5rem; display:grid; gap:2.25rem; }
.sobre-b{ border-top:1px solid var(--ink); padding-top:1rem; }
.sobre-lab{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink); margin:0 0 .9rem;
}
.areas{
  list-style:none; margin:0 0 .8rem; padding:0;
  color:var(--ink); line-height:1.5; text-wrap:balance;
}
.areas li{ display:inline; }
/* el separador viaja pegado a su área con espacio duro: nunca abre línea.
   En gris de texto, no en --expected: ese gris es de marca de gráfico y da 2.1 */
.areas li:not(:last-child)::after{ content:"\00a0·"; color:var(--muted); }
.sobre-nota{ margin:0; font-size:.875rem; line-height:1.55; color:var(--muted); text-wrap:pretty; }
.sobre-txt{ margin:0; line-height:1.5; color:var(--ink); text-wrap:pretty; }

/* leyenda: sólo donde hace falta aprender el código, no en el hero */
.leyenda{ display:flex; gap:1.75rem; margin:0 0 2rem; font-family:var(--mono); font-size:.6875rem;
  letter-spacing:.12em; text-transform:uppercase; }
.lg{ display:inline-flex; align-items:center; gap:.5rem; color:var(--muted); }
.lg::before{ content:""; width:22px; height:3px; background:var(--expected); }
.lg-o{ color:var(--sig-txt); }
.lg-o::before{ background:var(--signal); }

/* ---------- 01 · mecanismos ---------- */
.mecanismos{ list-style:none; counter-reset:m; margin:0; padding:0; display:grid; gap:0; }
.mecanismos li{
  counter-increment:m; position:relative; padding:1.5rem 0 1.75rem;
  border-top:1px solid var(--ink);
}
.mecanismos li:last-child{ border-bottom:1px solid var(--rule); }
.mec-viz{ margin:.25rem 0 1.1rem; }
.viz-m{ display:block; width:100%; max-width:26rem; height:auto; }
.mk-e{ stroke:var(--expected); fill:var(--expected); stroke-width:2.6; }
.mk-o{ stroke:var(--ink);      fill:var(--ink);      stroke-width:2.6; }
.mk-d{ stroke:var(--signal);   fill:var(--signal);   stroke-width:2.6; }
.mk-d[fill="none"]{ fill:none; stroke-width:2; }
.mk-gone{ stroke-width:1.6; opacity:.55; }
.mk-cut{ stroke:var(--ink); stroke-width:1; opacity:.45; }
.mecanismos h3{
  font-size:1rem; font-weight:600; line-height:1.35; margin:0 0 .4rem; text-wrap:balance;
}
.mecanismos li::before{
  content:"0" counter(m); font-family:var(--mono); font-size:.6875rem;
  letter-spacing:.08em; color:var(--sig-txt); display:block; margin-bottom:.9rem;
}
.mecanismos p{ margin:0; color:var(--muted); font-size:.9375rem; text-wrap:pretty; }

/* ---------- 02 · el recorrido: segunda gran pieza ---------- */
/* nada de margin:0 aquí: anularía el margin-inline:auto de .sec-alt > * y el
   bloque se pegaría al borde izquierdo en vez de caer sobre el eje editorial */
.camino-viz{ position:relative; margin:0 0 .25rem; }
.viz-journey{ display:block; width:100%; height:clamp(150px, 22vw, 260px); overflow:visible; }
.jr-e{ stroke:var(--expected); stroke-width:4; fill:none; stroke-linecap:round; } /* esperado  */
.jr-a{ stroke:var(--ink);      stroke-width:4; fill:none; stroke-linecap:round; } /* coinciden */
.jr-o{ stroke:var(--signal);   stroke-width:4; fill:none; stroke-linecap:round; } /* se separan */
.jr-tick{ stroke:var(--ink); stroke-width:1; opacity:.22; vector-effect:non-scaling-stroke; }
/* los puntos comparten eje con las marcas y con las etiquetas: mismo % */
.jr-pt{
  position:absolute; left:var(--x); top:var(--y); width:12px; height:12px;
  border-radius:50%; transform:translate(-50%,-50%);
}
.jr-pt-e{ background:var(--expected); }   /* esperado  */
.jr-pt-c{ background:var(--ink); }        /* coinciden */
.jr-pt-o{ background:var(--signal); }     /* se separan */

.camino-est{
  list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:0;
  border-top:1px solid var(--rule);
}
.camino-est li{ padding:.85rem 0; border-bottom:1px solid var(--rule); }
.paso{
  display:block; font-family:var(--mono); font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); margin-bottom:.15rem;
}
.glosa{ display:block; font-size:.875rem; color:var(--muted); }
.sec > p.cadena-pie{ max-width:var(--wide); }   /* anula .sec > p, igual que .md-nota */
.cadena-pie{ font-size:.9375rem; color:var(--muted); margin-block:0; }
.cadena-pie > span{ display:block; max-width:var(--measure); }

/* ---------- 03 · patrón de anomalías (CSS puro, sin SVG) ---------- */
.razones{ margin:0; display:grid; gap:2.25rem; }
.razones dt{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); margin:0 0 .45rem;
}
.razones dd{ margin:0; color:var(--muted); font-size:.9375rem; line-height:1.55; text-wrap:pretty; }

.defs{ position:absolute; width:0; height:0; overflow:hidden; }
.viz-pat{ display:block; width:100%; max-width:19rem; height:auto; margin:0 0 1rem; }
.pat-mask{ fill:var(--paper); }
.viz-pat .mk-e{ fill:var(--expected); stroke:none; }
.viz-pat .mk-d{ fill:var(--signal);   stroke:none; }
.viz-pat .mk-o{ fill:var(--ink);      stroke:none; }
.razones-pie{ margin:2rem 0 0; font-size:.875rem; color:var(--muted); }


/* ============================================================
   05 · MINI-DEMO — input → contraste → diferencia → evidencia
   Todo lo que se muestra aquí es cumplible hoy con método y
   análisis humano. Nada simula un producto: ni identificadores
   generados, ni marcas de tiempo, ni estados, ni controles.
   ============================================================ */
.md{ list-style:none; display:grid; gap:0; }   /* sin margin/padding: los da .sec-alt > * */
.md-paso{ border-top:1px solid var(--ink); padding:1.75rem 0 2.25rem; }
.md-paso:last-child{ border-bottom:1px solid var(--rule); }
.md-num{
  display:block; font-family:var(--mono); font-size:.6875rem;
  letter-spacing:.16em; color:var(--sig-txt); margin-bottom:.6rem;
}
.md-txt h3{ font-size:1.25rem; font-weight:700; letter-spacing:-.015em; margin:0 0 .5rem; }
.md-txt p{ margin:0 0 1.5rem; color:var(--muted); font-size:.9375rem; max-width:22rem; }

/* --- 01 · las tres fuentes --- */
.md-fuentes{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.md-viz{ min-width:0; }
.md-fuentes li{ background:var(--paper); border-top:2px solid var(--ink); padding:1rem 1.1rem 1.15rem; }
.md-lab{
  display:block; font-family:var(--mono); font-size:.6875rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink); margin-bottom:.45rem;
}
.md-preg{ display:block; font-size:.9375rem; font-weight:500; color:var(--muted); }

/* --- 02 · el caso --- */
.md-caso{ position:relative; background:var(--paper); padding:1.15rem 1.1rem 1.25rem; }
.md-badge{
  display:inline-block; font-family:var(--mono); font-size:.625rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--sig-txt);
  border:1px solid var(--sig-txt); border-radius:2px; padding:.25rem .5rem; margin:0 0 1.1rem;
}
.md-fila{ margin:0 0 1.1rem; }
.md-fila .md-lab{ margin-bottom:.4rem; color:var(--muted); }
.md-pista{ position:relative; display:flex; height:1.75rem; margin-bottom:.45rem; }
/* pequeña marca que abraza cada barra: no cruza el texto */
.md-pista::after{ content:''; position:absolute; left:56%; top:-.3rem; bottom:-.3rem; width:1px; background:var(--muted); }
.md-ink{ background:var(--ink); width:56%; }
.md-cor{ background:var(--signal); width:44%; }
.md-dice{ display:block; font-size:.875rem; line-height:1.5; color:var(--muted); }
/* la marca del corte: es una fecha del ejemplo, no un dato medido.
   Va en su propia fila, encima de las barras: antes era una regla vertical
   larga y atravesaba los párrafos. */
.md-corte{ position:relative; height:1.15rem; margin:0; }
.md-corte::after{
  content:''; position:absolute; left:56%; bottom:0; width:1px; height:.38rem; background:var(--muted);
}
.md-corte-lab{
  position:absolute; left:56%; bottom:.6rem; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em; color:var(--ink);
}
.md-sigue{ margin:0; font-size:.875rem; line-height:1.5; color:var(--sig-txt); }

/* --- 03 · la ficha --- */
.md-review{ background:var(--paper); border-top:2.5px solid var(--ink); padding:1.1rem 1.1rem 1.35rem; }
.md-review-cab{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem;
  margin:0 0 .9rem; padding-bottom:.85rem; border-bottom:1px solid var(--rule);
}
.md-review-tit{
  font-size:.9375rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink);
}
.md-review-cab .md-badge{ margin:0; }
.md-campos{ margin:0; display:grid; gap:1.1rem; }
.md-campos dt{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .3rem;
}
.md-campos dd{ margin:0; font-size:.875rem; line-height:1.5; color:var(--ink); }
.md-clave dt{ color:var(--sig-txt); }

.sec > p.md-nota{ margin-top:1.75rem; font-size:.8125rem; line-height:1.55; color:var(--muted);
  max-width:var(--wide); }   /* anula .sec > p: el bloque ocupa el contenedor, el texto se estrecha dentro */
/* el bloque ocupa el contenedor; el texto se estrecha dentro,
   sin recentrarse (mismo criterio que el resto de la página) */
.md-nota > span{ display:block; max-width:var(--measure); }

/* ---------- 06 · CTA ---------- */
/* Valores literales, no variables de tema: en modo oscuro var(--ink) es claro,
   la banda se invertía a fondo claro y el formulario que lleva dentro —que está
   construido para superficie oscura— quedaba ilegible. La banda de la demo es
   oscura en los dos esquemas. */
.cta{ background:#14161A; border-top:0; color:#FAF9F5; max-width:none; padding-inline:0; padding-block:0; }
.cta > *{ max-width:var(--wide); margin-inline:auto; padding-inline:var(--pad); }
.cta-viz{ padding-block:0; }   /* el centrado lo da .cta > * */
.viz-cta{ display:block; width:100%; height:64px; }
.cta .mk-e{ stroke:#3A3F45; fill:#3A3F45; }
.cta .mk-o{ stroke:#FAF9F5; fill:#FAF9F5; }
.cta .mk-d{ stroke:#FF4A1C; fill:#FF4A1C; }
.cta-cols{ padding-block:2.5rem 3rem; }
.cta .num{ color:#FF4A1C; }
.cta h2{ color:#FAF9F5; margin-bottom:1.25rem; }
.cta p{ color:#A2A8B0; }

.form{ margin-top:2.5rem; }
/* El formulario vive siempre sobre superficie oscura (banda de la demo y modal),
   así que sus colores son literales y no dependen del esquema del sistema. */
.form-titulo{
  font-size:1.0625rem; font-weight:600; color:#FAF9F5;
  margin:0 0 1.75rem; letter-spacing:-.01em;
}

/* el desplegable hereda exactamente el estilo de los campos de texto */
select{
  width:100%; font:inherit; font-size:1rem; color:#FAF9F5;
  background:#1D2126; border:1px solid #333940; border-radius:2px;
  padding:.7rem .8rem; min-height:44px;
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#8B929A 50%),
                   linear-gradient(135deg,#8B929A 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  transition:border-color .15s ease;
}
select:hover{ border-color:#5A626B; }
.field{ margin:0 0 1.6rem; border:0; padding:0; }
label, legend{
  display:block; font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:#8B929A; margin:0 0 .5rem; padding:0;
}
.opt{ text-transform:none; letter-spacing:0; }
.req{ color:#FF4A1C; }
input[type="text"], input[type="email"], textarea{
  width:100%; font:inherit; font-size:1rem; color:#FAF9F5; background:#1D2126;
  border:1px solid #333940; border-radius:2px; padding:.7rem .8rem; transition:border-color .15s ease;
}
textarea{ resize:vertical; min-height:8.5rem; line-height:1.55; }
input::placeholder, textarea::placeholder{ color:#79808A; }
input:hover, textarea:hover{ border-color:#5A626B; }
.radios{ display:flex; flex-wrap:wrap; gap:.25rem 1.5rem; margin-top:-.35rem; }
.radio{
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding-right:.35rem;
  font-family:var(--sans); font-size:1rem; letter-spacing:0; text-transform:none;
  color:#FAF9F5; margin:0; cursor:pointer;
}
.radio input{ accent-color:#FF4A1C; width:1.05rem; height:1.05rem; margin:0; }
.hp{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.privacy{ font-size:.8125rem; line-height:1.5; color:#98A0A8; margin:0 0 1.5rem; }
.btn{
  font-family:var(--sans); font-size:.9375rem; font-weight:500; letter-spacing:.01em;
  color:#14161A; background:#FF4A1C; border:1px solid #FF4A1C; border-radius:2px;
  padding:.8rem 1.75rem; cursor:pointer; width:100%; transition:opacity .15s ease;
}
.btn:hover{ opacity:.85; }
.btn[disabled]{ opacity:.5; cursor:progress; }
.err{ font-family:var(--sans); font-size:.8125rem; color:var(--err-osc); margin:.4rem 0 0; }
[aria-invalid="true"]{ border-color:var(--err-osc); }
.form-msg{
  font-size:.9375rem; line-height:1.55; margin:1.5rem 0 0; padding:1rem 1.1rem;
  border-left:2px solid #333940; background:#1D2126; color:#FAF9F5;
}
.form-msg[data-state="ok"]{ border-left-color:var(--ok-osc); }
.form-msg[data-state="error"]{ border-left-color:var(--err-osc); }

/* `.cta p` (0,1,1) le ganaba a `.err` (0,1,0) y el texto de error salía gris:
   el estado de error dejaba de leerse como error. Vale para los dos formularios. */
.cta .err, .modal .err{ color:var(--err-osc); }

/* ---------- modal de solicitud de demo ----------
   Panel oscuro con valores literales, no con las variables de tema: el
   formulario que hereda (campos, etiquetas, botón) ya está construido para
   fondo oscuro, así que el modal debe verse igual en claro y en oscuro. */
.modal{
  position:fixed; inset:0; z-index:100; display:flex; padding:1.25rem;
  overflow-y:auto; overscroll-behavior:contain;
}
.modal[hidden]{ display:none; }
.modal-fondo{ position:fixed; inset:0; background:rgba(8,9,11,.74); }
.modal-caja{
  position:relative; margin:auto; width:100%; max-width:36rem;
  background:#14161A; color:#FAF9F5;
  border:1px solid #2A2F35; border-radius:3px;
  padding:1.5rem 1.25rem 1.75rem;
}
.modal-cab{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  margin-bottom:1.75rem;
}
.modal-tit{
  font-size:1.0625rem; font-weight:600; color:#FAF9F5; margin:0; letter-spacing:-.01em;
}
.modal-x{
  flex:none; width:44px; height:44px; margin:-.65rem -.4rem 0 0;
  display:grid; place-items:center; font:inherit; cursor:pointer;
  color:#FAF9F5; background:transparent; border:1px solid #333940; border-radius:2px;
}
.modal-x:hover{ border-color:#5A626B; }
.modal-x svg{ width:13px; height:13px; display:block; }
.modal .form{ margin-top:0; }

.modal .form-msg{ background:#1D2126; }

/* el scroll de la página se bloquea mientras el modal está abierto;
   el padding compensa la barra de desplazamiento para que no salte */
html.sin-scroll{ overflow:hidden; }
html.sin-scroll body{ padding-right:var(--barra, 0px); }

/* ---------- pie ---------- */
.foot{
  border-top:1px solid var(--rule); padding-top:2.5rem; padding-bottom:3.5rem;
  font-size:.8125rem; line-height:1.6; color:var(--muted);
}
.foot-marca{
  font-size:.9375rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); margin:0 0 .9rem;
}
.foot-links{ margin:0 0 1.5rem; }
.foot-nota{ margin:0; font-size:.75rem; line-height:1.55; }

/* ---------- páginas de texto ---------- */
.doc{ max-width:var(--measure); margin-inline:auto; padding:3rem var(--pad); }
.doc h1{ font-size:1.5rem; margin-bottom:1.25rem; }
.doc h2{ font-size:1rem; margin-top:2rem; margin-bottom:.6rem; }
.doc p, .doc li{ color:var(--muted); }
.doc ul{ padding-left:1.15rem; margin:0 0 1.1rem; }
.doc li{ margin-bottom:.45rem; }
.doc-back{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:0 0 2rem;
}

/* ============================================================
   TABLET  ≥ 40rem
   ============================================================ */
@media (min-width: 40rem){
  :root{ --pad:2rem; --hero-w:38rem; --off:6px; --gut:6rem; }
  body{ font-size:1.0625rem; }
  .hero{ padding-top:3.5rem; padding-bottom:3.5rem; }
  h1{ font-size:2.875rem; }
  .hero-sub{ font-size:1.125rem; }
  .hero-viz{ margin-top:3rem; }
  .hero-viz-d{ display:block; }
  .hero-firma{ display:none; }
  .sec{ padding-block:5rem; }
  h2{ font-size:2rem; }
  .destacado{ font-size:1.375rem; padding-left:1.25rem; }

  .mecanismos{ grid-template-columns:1fr 1fr; column-gap:3rem; }
  .mecanismos li{ border-bottom:1px solid var(--rule); }
  .mecanismos li:nth-child(-n+2){ border-top:1px solid var(--ink); }
  .mecanismos li:nth-child(n+3){ border-top:0; }

  /* Se reserva un canal a la derecha (--gut) para que la cuarta etiqueta pueda
     alinearse a la izquierda de su marca como las otras tres. Antes iba pegada
     al borde derecho y era la única alineada a la derecha. */
  .camino-viz{ margin-right:var(--gut); }
  .camino-est{
    display:block; position:relative; height:4.5rem; border-top:0;
    margin-right:var(--gut);
  }
  .camino-est li{
    position:absolute; top:0; border-bottom:0; padding:0;
    left:calc(var(--i) * 33.3333%); max-width:min(11rem, 31%);
  }
  /* con left:100% el ancho disponible es 0 y encogería a su mínimo:
     el canal reservado hay que dárselo explícitamente */
  .camino-est li:last-child{ width:var(--gut); max-width:none; }
  .razones{ grid-template-columns:1fr 1fr; gap:2.5rem 3rem; }
  .md-fuentes{ grid-template-columns:repeat(3,1fr); gap:1rem; }
  .md-campos{ grid-template-columns:1fr 1fr; gap:1.25rem 1.75rem; }
  .btn{ width:auto; }
  .viz-cta{ height:84px; }
}

/* ============================================================
   NAVEGACIÓN DE ESCRITORIO  ≥ 48rem
   ============================================================ */
@media (min-width: 48rem){
  .nav{ display:flex; align-items:center; gap:2rem; }
  .nav-toggle{ display:none; }
  .masthead[data-menu="abierto"] .nav{
    position:static; display:flex; border:0; padding:0; background:none;
  }
  .masthead[data-menu="abierto"] .nav-lista{ display:flex; }
  .masthead[data-menu="abierto"] .nav-lista a{
    display:inline; padding:0; font-size:.875rem; color:var(--muted); border-bottom:0;
  }
  .masthead[data-menu="abierto"] .nav-cta{ margin-top:0; padding:.5rem .9rem; }

  /* los dos bloques secundarios de la 04, en columnas */
  .sobre{ grid-template-columns:1fr 1fr; gap:4rem; margin-top:3rem; }
  .sobre-nota{ font-size:.9375rem; }
}

/* ============================================================
   ESCRITORIO  ≥ 62rem — aquí manda el ritmo de escala
   ============================================================ */
@media (min-width: 62rem){
  :root{ --hero-w:46rem; --head-h:4rem; --off:7px; }

  /* el statement es el peso real de la sección: más cuerpo y más medida.
     El aire que queda a su derecha es deliberado; el ancho completo lo
     ancla la banda de dos columnas de debajo. */
  #priceally .destacado{ font-size:1.625rem; line-height:1.35; max-width:46.5rem; }
  .sobre{ margin-top:3.5rem; }
  /* 50 / 50 · el visual llena su mitad, sin margen sobrante */
  .hero{
    display:grid; grid-template-columns:1fr 1fr; gap:3rem;
    align-items:center; padding-top:4.5rem; padding-bottom:4.5rem;
  }
  .hero-txt{ max-width:29rem; }
  h1{ font-size:2.5rem; letter-spacing:-.03em; }
  .hero-sub{ font-size:1.0625rem; }
  .hero-viz{ margin:0; }

  .sec{ padding-block:7rem; }
  .sec .sec-head{ position:relative; }
  .num{ position:absolute; left:-4.5rem; top:.5rem; margin:0; }
  .cta-txt .num{ position:static; margin-bottom:.75rem; }

  .mecanismos{ column-gap:4rem; }
  .razones{ gap:3rem 4rem; }
  .pat{ --cw:17px; --rh:17px; --dash:12px; width:calc(var(--cw) * 20); }

  /* el recorrido gana escala: es la segunda pieza de la página */
  .viz-journey{ height:300px; }
  .camino-est{ margin-bottom:2.5rem; }

  /* mini-demo: el texto acompaña, el visual manda */
  .md-paso{
    display:grid; grid-template-columns:19rem 1fr; gap:3rem;
    padding:2.25rem 0 2.75rem;
  }
  .md-txt p{ margin-bottom:0; }
  .md-caso{ padding:1.35rem 1.4rem 1.5rem; }
  .md-review{ padding:1.35rem 1.4rem 1.6rem; }

  /* CTA a dos columnas */
  .cta-cols{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start;
              padding-block:3.5rem 3.5rem; }
  .form{ margin-top:0; }
  .viz-cta{ height:104px; }
}

/* ============================================================
   PANTALLA ANCHA  ≥ 80rem — el titular recupera cuerpo
   ============================================================ */
@media (min-width: 80rem){
  h1{ font-size:3rem; }
  .hero{ gap:4rem; }
  .hero-txt{ max-width:32rem; }
}

/* ---------- impresión ---------- */
@media print{
  .form,.skip,.btn,.nav,.nav-toggle,.cta-viz,.modal{ display:none; }
  .masthead{ position:static; border-bottom:1px solid #000; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .sec-alt,.cta{ background:transparent; color:#000; }
  .cta h2,.cta p{ color:#000; }
}

/* ============================================================
   MOTION
   Tres animaciones, ninguna decorativa. Cada una muestra una
   secuencia que el estado final no puede mostrar:
     A · la matriz parecía uniforme y aparece la diferencia
     B · los dos recorridos salen juntos y se separan
     C · lo esperado, después lo observado, después la diferencia

   Reglas del sistema:
     · el estado inicial NUNCA lleva transition; la transición
       pertenece a la clase o atributo que dispara el cambio
     · todo estado oculto cuelga de .motion, que sólo existe si
       hay JS, hay IntersectionObserver y no se pide movimiento
       reducido
     · sólo opacity, transform, stroke-dashoffset y fill
   ============================================================ */

:root{ --ease-m:cubic-bezier(.22,.61,.36,1); }

/* ---------- A · hero ---------- */

.motion .hero-txt{ opacity:0; animation:m-fade 400ms var(--ease-m) forwards; }
.motion .hero-viz{ opacity:0; animation:m-fade 450ms var(--ease-m) 120ms forwards; }

/* la marca esperada nace en tinta: mientras coincide, es una marca más */
.motion .viz-hero .mx-e{ fill:var(--ink); }
/* --dy lo pone main.js: es la distancia exacta de cada celda a su marca
   esperada, leída de los atributos que ya existen. Nada se recalcula.
   Los 10px extra amplifican el recorrido para que la separación se vea:
   sin ellos el viaje real es de 0,9 a 6,2 px renderizados. */
.motion .viz-hero .mx-d{
  opacity:0; transform:translateY(calc(var(--dy, 0px) - 10px));
}
.motion[data-hero="visto"] .viz-hero .mx-e{
  fill:var(--expected); transition:fill 500ms var(--ease-m) 560ms;
}
/* la opacidad entra antes que el movimiento: así el recorrido se ve entero
   con la marca ya visible, en vez de aparecer a medio camino */
.motion[data-hero="visto"] .viz-hero .mx-d{
  opacity:1; transform:translateY(0);
  transition:opacity 180ms var(--ease-m) 560ms,
             transform 500ms var(--ease-m) 560ms;
}

@keyframes m-fade{ to{ opacity:1; } }

/* ---------- B · recorrido ---------- */

.motion .camino .jr-e,
.motion .camino .jr-a,
.motion .camino .jr-o{ stroke-dasharray:1; stroke-dashoffset:1; }
.motion .camino .jr-tick,
.motion .camino .jr-pt,
.motion .camino .camino-est li{ opacity:0; }

/* el tramo que coincide y el que se separa: uno empieza donde acaba el otro */
/* La secuencia manda: la tinta llega a la estación 2, el punto aterriza ahí,
   hay una pausa de 120 ms, y sólo entonces nace el coral. Total 1,28 s. */
.camino[data-visto="true"] .jr-e{ transition:stroke-dashoffset 950ms var(--ease-m); stroke-dashoffset:0; }
.camino[data-visto="true"] .jr-a{ transition:stroke-dashoffset 400ms var(--ease-m); stroke-dashoffset:0; }
.camino[data-visto="true"] .jr-o{ transition:stroke-dashoffset 500ms var(--ease-m) 520ms; stroke-dashoffset:0; }

.camino[data-visto="true"] .jr-tick,
.camino[data-visto="true"] .jr-pt,
.camino[data-visto="true"] .camino-est li{ animation:m-fade 260ms var(--ease-m) forwards; }

/* cada estación aparece cuando el trazo la alcanza */
.camino[data-visto="true"] .jr-tick:nth-of-type(1),
.camino[data-visto="true"] .camino-est li:nth-child(1),
.camino[data-visto="true"] .jr-pt:nth-of-type(1){ animation-delay:180ms; }
.camino[data-visto="true"] .jr-tick:nth-of-type(2),
.camino[data-visto="true"] .camino-est li:nth-child(2),
.camino[data-visto="true"] .jr-pt:nth-of-type(2){ animation-delay:400ms; }   /* aquí acaba la tinta */
.camino[data-visto="true"] .jr-tick:nth-of-type(3),
.camino[data-visto="true"] .camino-est li:nth-child(3),
.camino[data-visto="true"] .jr-pt:nth-of-type(3),
.camino[data-visto="true"] .jr-pt:nth-of-type(4){ animation-delay:790ms; }
.camino[data-visto="true"] .jr-tick:nth-of-type(4),
.camino[data-visto="true"] .camino-est li:nth-child(4),
.camino[data-visto="true"] .jr-pt:nth-of-type(5),
.camino[data-visto="true"] .jr-pt:nth-of-type(6){ animation-delay:1020ms; }

/* ---------- 01 · mecanismos: lo esperado, y después lo que rompe ----------
   Sólo se mueve el elemento que rompe el patrón. Ni el bloque, ni el texto.
   El desplazamiento va por mecanismo porque la ruptura no es igual en los
   cuatro: tres se quiebran en vertical y el cuarto en horizontal. */

.motion .mecanismos .mk-e,
.motion .mecanismos .mk-o{ opacity:0; }
.motion .mecanismos .mk-d{
  opacity:0;
  transform:translate(var(--mdx, 0px), var(--mdy, -10px));
  stroke:var(--ink); fill:var(--ink);
}
.motion .mecanismos li:nth-child(4) .mk-d{ --mdx:-12px; --mdy:0px; }

.mecanismos li[data-visto="true"] .mk-e{ animation:m-fade 320ms var(--ease-m) forwards; }
.mecanismos li[data-visto="true"] .mk-o{ animation:m-fade 320ms var(--ease-m) 200ms forwards; }
.mecanismos li[data-visto="true"] .mk-d{
  opacity:1; transform:translate(0,0);
  stroke:var(--signal); fill:var(--signal);
  /* el coral llega al terminar el movimiento, no antes */
  transition:opacity 200ms var(--ease-m) 200ms,
             transform 420ms var(--ease-m) 200ms,
             stroke    260ms var(--ease-m) 540ms,
             fill      260ms var(--ease-m) 540ms;
}

/* ---------- C · mini-demo, sólo el ejemplo ---------- */
/* La ficha Priceally Review NO se anima: es una plantilla de entrega humana y
   cualquier gesto de aparición la haría parecer un registro autogenerado.
   Las tres fuentes tampoco: una cascada de tarjetas no comunica nada. */

.motion .md-caso .md-badge,
.motion .md-caso .md-fila,
.motion .md-caso .md-corte,
.motion .md-caso .md-sigue{ opacity:0; }
.motion .md-caso .md-cor{ transform:scaleX(0); transform-origin:left center; }

.md-paso[data-visto="true"] .md-badge{ animation:m-fade 300ms var(--ease-m) forwards; }
.md-paso[data-visto="true"] .md-fila:nth-of-type(1){ animation:m-fade 300ms var(--ease-m) forwards; }
.md-paso[data-visto="true"] .md-corte{ animation:m-fade 240ms var(--ease-m) 180ms forwards; }
.md-paso[data-visto="true"] .md-fila:nth-of-type(2){ animation:m-fade 300ms var(--ease-m) 250ms forwards; }
.md-paso[data-visto="true"] .md-cor{ transition:transform 420ms var(--ease-m) 480ms; transform:scaleX(1); }
.md-paso[data-visto="true"] .md-sigue{ animation:m-fade 260ms var(--ease-m) 820ms forwards; }

/* ---------- movimiento reducido ----------
   El script del <head> ya evita añadir .motion, así que esto es una segunda
   red: si la clase llegara por cualquier vía, todo queda en su estado final. */
@media (prefers-reduced-motion: reduce){
  .motion .hero-txt, .motion .hero-viz,
  .motion .camino .jr-tick, .motion .camino .jr-pt, .motion .camino .camino-est li,
  .motion .mecanismos .mk-e, .motion .mecanismos .mk-o, .motion .mecanismos .mk-d,
  .motion .md-caso .md-badge, .motion .md-caso .md-fila,
  .motion .md-caso .md-corte, .motion .md-caso .md-sigue{ opacity:1 !important; }
  .motion .md-caso .md-cor{ transform:none !important; }
  .motion .camino .jr-e, .motion .camino .jr-a, .motion .camino .jr-o{
    stroke-dasharray:none !important; stroke-dashoffset:0 !important;
  }
  .motion .viz-hero .mx-e{ fill:var(--expected) !important; }
  .motion .viz-hero .mx-d{ opacity:1 !important; transform:none !important; }
  .motion .mecanismos .mk-d{
    transform:none !important; stroke:var(--signal) !important; fill:var(--signal) !important;
  }
}