/* ============================================================================
   Kipux — landing page
   Propuesta 1b «Editorial / claro» del documento de diseño.
   Tokens y medidas tomados del diseño; los breakpoints son añadidos (el lienzo
   original era de ancho fijo 1280px y no expresaba el comportamiento responsive).
   ========================================================================== */

:root {
  /* Superficies */
  --bg:            #faf9f7;
  --dark:          #16171a;
  --dark-fg:       #f3f1eb;
  --hover-row:     #f3f1eb;

  /* Banda de hueso cálido. Coincide con --hover-row, pero es otro papel: aquel
     es un estado, éste una superficie. Separados porque cuando ambos coinciden
     en la misma sección el hover deja de existir —de ahí --slab-hover. */
  --slab:          #f3f1eb;
  --slab-rule:     #ddd8cc;
  --slab-hover:    #e9e5db;

  /* Texto */
  --ink:           #16171a;
  --body:          #55575d;
  --muted:         #6b6d73;
  --muted-2:       #7a7c82;
  --faint:         #8a8c92;
  --dark-body:     #b6b8bd;
  --dark-faint:    #8f9bb3;

  /* Líneas */
  --rule:          #e2e0da;
  --field-line:    #c9c7c0;

  /* Acento */
  --accent:        #2b62e8;
  --accent-hover:  #1d4fd0;
  --accent-light:  #6f8ff5;
  /* Estaba al 5%: sobre hueso eso es invisible, y era el único realce del
     nivel que se vende aparte y de la columna propia de la comparativa. */
  --accent-tint:   rgba(43, 98, 232, .085);

  /* El acento llevado a superficie grande. #2b62e8 a sangría completa grita;
     bajado a L=28% aguanta un bloque entero y deja que el original siga
     funcionando como realce encima. Contrastes medidos sobre --deep:
     14.9:1 el titular, 6.5:1 el cuerpo, 5.3:1 los rótulos de 13px. */
  --deep:          #173778;
  --deep-fg:       #eef1fb;
  --deep-body:     #b9c4e6;
  --deep-faint:    #9db0e2;

  /* Cordeles del quipu. No los usa ninguna regla de esta hoja: los lee
     `initQuipu` con getPropertyValue para pintar el SVG. No borrar por
     parecer muertos. */
  --cord:          #ded8cc;
  --cord-knot:     #cdc5b6;

  /* Tramado de los placeholders de captura */
  --hatch: repeating-linear-gradient(135deg, #f1efe9 0 12px, #ebe9e2 12px 24px);

  /* Tipografía */
  --sans:  'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --shell-max: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 73px;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */

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

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

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

h1, h2, h3, h4, p, figure, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }

a {
  color: inherit;
  text-decoration: none;
  transition: color .18s ease;
}
a:hover { color: var(--accent); }

input, textarea, select, button { font: inherit; color: inherit; }

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

/* ── Utilidades ────────────────────────────────────────────────────────── */

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--dark-fg);
  padding: 12px 20px;
  font-size: 14px;
}
.skip-link:focus {
  left: 0;
  color: var(--dark-fg);
}

.eyebrow {
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--faint);
  margin-bottom: 28px;
}
.eyebrow--dark { color: var(--dark-faint); }

.lead {
  font-size: clamp(1.0625rem, 1.2vw + .55rem, 1.22rem);
  line-height: 1.65;
  color: var(--body);
  max-width: 52ch;
  text-wrap: pretty;
}

/* ── Nudos ─────────────────────────────────────────────────────────────────
   Kipux viene de quipu: los cordeles anudados con los que se llevaba
   contabilidad. Donde la página ya dibujaba un filete de tinta ahora cuelga un
   nudo con su cabo, que es la gramática del quipu aplicada a las reglas que ya
   existían. Se pega a un filete de 1px puesto justo encima del borde de padding
   del elemento; si algún bloque nuevo lo quiere, basta con darle
   `border-top: 1px solid var(--ink)` y sumarlo a esta lista.              */

.pillar,
.control,
.cta__grid { position: relative; }

.pillar::before,
.control::before,
.cta__grid::before {
  content: '';
  position: absolute;
  left: 0;
  top: -4px;              /* centra el nudo de 7px sobre el filete de 1px */
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
}

/* El cabo que sigue bajando. Vive dentro del padding superior del bloque, así
   que nunca llega al texto. */
.pillar::after,
.control::after,
.cta__grid::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 1px;
  height: 15px;
  background: var(--rule);
}

/* ── Botones y enlaces ─────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  border: 0;
  cursor: pointer;
  font-size: 15.5px;
  text-align: center;
  transition: background-color .18s ease, color .18s ease;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
  padding: 16px 30px;
}
.btn--primary:hover { background: var(--accent-hover); color: #fff; }

.btn--ink {
  background: var(--ink);
  color: var(--bg);
  padding: 10px 20px;
  font-size: 14.5px;
}
.btn--ink:hover { background: var(--accent); color: #fff; }

/* Secundario del asistente («Atrás»): tiene que leerse como salida, no competir
   con el botón que avanza. Sólo filete, sin relleno. */
.btn--ghost {
  background: transparent;
  color: var(--muted);
  padding: 16px 24px;
  box-shadow: inset 0 0 0 1px var(--field-line);
}
.btn--ghost:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.link-underline {
  padding: 16px 4px;
  font-size: 15.5px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}
.link-underline:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 38px;
}

/* ── Header ────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
/* Sombra sutil sólo cuando la página ya se desplazó. */
.site-header.is-stuck {
  box-shadow: 0 1px 16px rgba(22, 23, 26, .06);
}

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

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.brand:hover { color: inherit; }
.brand__mark { width: 28px; height: 28px; }
.brand__name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .02em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 14.5px;
  color: #4a4c52;
}

/* Con «Acceder» de por medio la barra queda justa en el umbral del menú móvil
   (1120px): entre ese umbral y 1300px se cierra el aire entre anclas para que
   no se parta en dos líneas. */
@media (min-width: 1121px) and (max-width: 1300px) {
  .nav { gap: 22px; }
}

/* «Acceder» convive con el CTA negro: quien ya es cliente tiene que encontrarlo
   sin que le dispute la atención a quien todavía no cotiza. Sin relleno y con
   filete, se lee como puerta y no como llamada. */
.nav__login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 14.5px;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--field-line);
  transition: color .18s ease, box-shadow .18s ease;
}
.nav__login:hover {
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  padding: 10px 12px;
  cursor: pointer;
  line-height: 0;
}
.nav-toggle__bars {
  display: block;
  width: 20px;
}
.nav-toggle__bars span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle__bars span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

/* El aire de arriba creció: sin él el quipu no tiene de dónde colgar. */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(76px, 10vw, 156px) clamp(48px, 6vw, 80px);
}

/* Lienzo del quipu. Los cordeles los dibuja `initQuipu` en main.js, porque hay
   que medir dónde está el contenido para recortarlos contra él; sin JS esto
   queda vacío y la página se ve como antes. */
.quipu {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* Se desvanece hacia abajo para no competir con el titular. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0 46%, rgba(0, 0, 0, .3) 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0 46%, rgba(0, 0, 0, .3) 78%, transparent 100%);
}
.quipu svg { display: block; width: 100%; height: 100%; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: end;
}

.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 5.4vw + .35rem, 4.75rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin-bottom: 26px;
  text-wrap: pretty;
}
.hero__title em {
  font-style: italic;
  color: var(--accent);
}

/* Placeholder tramado de captura de producto. */
.shot {
  background: var(--hatch);
  border: 1px solid var(--rule);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.shot__label {
  font-family: var(--mono);
  font-size: 12.5px;
  color: #9a9a94;
  letter-spacing: .08em;
  text-align: center;
  line-height: 1.8;
}
.shot__img { width: 100%; }

/* El bucle P2P ocupa el encuadre entero: sin trama ni relleno, sólo el filete. */
.shot--video {
  background: none;
  padding: 0;
  min-height: 0;
  display: block;
  overflow: hidden;
}
.shot__video {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Pilares ───────────────────────────────────────────────────────────── */

.pillars { padding-bottom: clamp(56px, 8vw, 96px); }

/* El filete corrido pasó a ser uno por columna: son tres cordeles, no uno. */
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 56px);
}

.pillar {
  border-top: 1px solid var(--ink);
  padding-top: 20px;
}

.pillar__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.4vw + .8rem, 1.6875rem);
  letter-spacing: -.01em;
  margin-bottom: 14px;
}
.pillar__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
}

/* ── Secciones genéricas ───────────────────────────────────────────────── */

.section {
  padding-bottom: clamp(56px, 8vw, 96px);
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.section__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.2vw + .6rem, 2.875rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}

.section__lead {
  font-size: 17px;
  color: var(--body);
  margin-top: 12px;
  margin-bottom: 40px;
  max-width: 60ch;
}

.section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.section__meta {
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--faint);
  flex: none;
}

/* Un segundo encabezado dentro de la misma sección: pesa menos que el h2 pero
   sigue siendo un corte, no un párrafo con negrita. */
.section__head--sub {
  margin-top: clamp(44px, 5vw, 68px);
  margin-bottom: 28px;
}
.section__subtitle {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.4vw + .8rem, 1.6875rem);
  letter-spacing: -.01em;
}

/* ── Bandas de superficie ──────────────────────────────────────────────────
   La página era una sola hoja de hueso de punta a punta. Estas bandas no
   alternan por alternar: marcan los tres actos —qué es / qué lo hace distinto
   / cómo se compra— y el cierre por fin usa el color de la marca.        */

.section--slab {
  background: var(--slab);
  padding-top: clamp(48px, 6vw, 80px);
  margin-bottom: clamp(56px, 8vw, 96px);
}

.section--deep {
  background: var(--deep);
  color: var(--deep-fg);
  padding-top: clamp(56px, 7vw, 92px);
  padding-bottom: clamp(56px, 7vw, 92px);
}
.section--deep .section__title  { color: var(--deep-fg); }
.section--deep .eyebrow         { color: var(--deep-faint); }
.section--deep .contact__lead   { color: var(--deep-body); }
.section--deep .cta__note       { color: var(--deep-faint); }
.section--deep .contact__meta   { color: var(--deep-faint); }
.section--deep .contact__meta a:hover { color: #fff; }
.section--deep .cta__grid       { border-top-color: rgba(255, 255, 255, .22); }
.section--deep .cta__step {
  color: var(--deep-body);
  border-top-color: rgba(255, 255, 255, .16);
}
.section--deep .cta__step:last-child { border-bottom-color: rgba(255, 255, 255, .16); }
.section--deep .cta__step__num       { color: var(--deep-faint); }

/* Un botón azul sobre banda azul no existe: se invierte a papel sobre color. */
.section--deep .btn--primary { background: var(--dark-fg); color: var(--ink); }
.section--deep .btn--primary:hover { background: #fff; color: var(--ink); }

/* El nudo del cierre cae sobre color, no sobre papel. */
.section--deep .cta__grid::before { background: var(--deep-fg); }
.section--deep .cta__grid::after  { background: rgba(255, 255, 255, .3); }

/* ── Módulos ───────────────────────────────────────────────────────────── */

.modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
}

.module {
  border-bottom: 1px solid var(--rule);
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background-color .18s ease;
}
.module:hover { background: var(--hover-row); }

/* Sobre el hueso cálido, --rule casi desaparece; y el hover era exactamente ese
   mismo color, así que dejaba de existir. */
.section--slab .modules,
.section--slab .module { border-color: var(--slab-rule); }
.section--slab .module:hover { background: var(--slab-hover); }

.module__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.module__name {
  font-size: 17.5px;
  font-weight: 500;
}
.tag-core {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--accent);
  flex: none;
}

/* Los verticales ya construidos no son módulos de segunda: son la prueba de
   que lo a medida existe. Se distinguen en tinta, no en un gris de descarte. */
.tag-custom {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink);
  flex: none;
}
.module__desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

.modules__note {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--faint);
  margin-top: 24px;
  max-width: 68ch;
}
.modules__cta { margin-top: 14px; }

/* ── Controles ─────────────────────────────────────────────────────────── */

.controls__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 48px;
}

.control { border-top: 1px solid var(--ink); padding-top: 20px; }

.control__idx {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: 14px;
}
.control__title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
}
.control__body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
}

/* ── A medida (banda oscura, full-bleed) ───────────────────────────────── */

.custom {
  background: var(--dark);
  color: var(--dark-fg);
  margin-bottom: clamp(56px, 8vw, 96px);
  scroll-margin-top: var(--header-h);
}

.custom__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(56px, 7vw, 84px);
}

.custom__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.2vw + .6rem, 2.875rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 22px;
}
.custom__body {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--dark-body);
  max-width: 46ch;
}

.step {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-block: 22px;
  display: grid;
  grid-template-columns: 40px 1fr;
  font-size: 16.5px;
}
.step:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.step__num { color: var(--accent-light); }

/* ── Planes ────────────────────────────────────────────────────────────── */

/* Escalera acumulativa, no tres columnas paralelas: cada nivel hereda del
   anterior, y ponerlos uno debajo del otro evita que se lean como tres
   opciones donde hay que comparar cuál trae más módulos. */
.tiers { border-top: 1px solid var(--ink); }

.tier {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) 1.2fr;
  gap: clamp(24px, 4vw, 56px);
  padding: 32px 0 36px;
  border-bottom: 1px solid var(--rule);
}

/* El nivel de gobierno es el que se vende aparte: se destaca con el tinte de
   acento, sin sacarlo de la escalera. */
.tier--featured {
  background: var(--accent-tint);
  border-bottom-color: var(--accent);
  padding-inline: clamp(16px, 2.5vw, 28px);
  margin-inline: clamp(-16px, -2.5vw, -28px);
}
/* El filete de arriba del bloque destacado es el de abajo del anterior: hay que
   teñirlo ahí, o el tinte queda abierto por arriba. */
.tier:has(+ .tier--featured) { border-bottom-color: var(--accent); }

.tier__idx {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: 14px;
}

.tier__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.6vw + .9rem, 1.9375rem);
  letter-spacing: -.015em;
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

/* El precio va en la misma línea del nombre y en mono: es un dato, no un
   reclamo. Se pega a la línea base del título gracias al flex del padre. */
.tier__price {
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: .02em;
  color: var(--accent);
  white-space: nowrap;
}
.tier__price small {
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--faint);
}
.tier__price--quote {
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11.5px;
}

.tier__for {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--faint);
  margin-top: 14px;
  max-width: 34ch;
}

.tier__desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  margin-bottom: 20px;
  max-width: 62ch;
}
.tier__desc em {
  font-style: normal;
  color: var(--ink);
  font-weight: 500;
}

.tier__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 32px;
}

.tier__list li {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  padding-left: 16px;
  position: relative;
}
/* Regla corta en vez de bullet o palomita: la página no usa iconografía. */
.tier__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

.tiers__note {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--faint);
  margin-top: 28px;
  max-width: 68ch;
}

/* En línea aparte: dentro del párrafo el subrayado se parte al final de línea. */
.tiers__cta { margin-top: 14px; }

/* ── Estudios contables ────────────────────────────────────────────────────
   No reusa la escalera de `.tiers`: ahí cada nivel hereda del anterior, y esto
   no es un nivel más sino otra puerta. Dos columnas parejas —el argumento a la
   izquierda, lo concreto a la derecha— y sin numerar, porque los cuatro puntos
   no son una secuencia.                                                    */

.study__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

/* El aire hasta el precio lo pone --price; el del lead sobraba. */
.study__copy .section__lead { margin-bottom: 0; }

.study__price {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--accent);
  margin-top: 26px;
}

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

.study__point {
  border-bottom: 1px solid var(--slab-rule);
  padding-block: 20px;
}
.study__point__title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}
.study__point__body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
}

/* ── Cloud AWS ─────────────────────────────────────────────────────────── */

.cloud__grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(36px, 5vw, 64px);
}
.cloud__lead {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--body);
  margin-top: 20px;
}
.cloud__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 48px;
}
.feature__title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
}
.feature__body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
}

/* ── Comparativa ───────────────────────────────────────────────────────── */

.compare__scroll { overflow-x: auto; }

.compare {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  border-top: 1px solid var(--ink);
  text-align: left;
}

.compare thead th,
.compare thead td {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--faint);
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
  vertical-align: bottom;
}
.compare thead .compare__own { color: var(--accent); }

.compare tbody th,
.compare tbody td {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.55;
  padding: 22px 20px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--muted-2);
}
.compare tbody th {
  font-weight: 500;
  color: var(--ink);
  width: 25%;
}
.compare tbody .compare__own {
  background: var(--accent-tint);
  color: var(--ink);
}

/* Primera columna a ras del margen, como en el diseño. */
.compare thead td:first-child,
.compare tbody th:first-child { padding-left: 0; }

/* ── Contacto ──────────────────────────────────────────────────────────── */

.contact__lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
  margin-top: 20px;
  margin-bottom: 28px;
}

.contact__meta {
  font-style: normal;
  font-size: 14.5px;
  color: var(--faint);
  line-height: 2;
  display: flex;
  flex-direction: column;
}

/* ── Cierre: paso a la encuesta ────────────────────────────────────────── */

/* Mismo reparto que tenía el formulario incrustado, pero a la derecha ya no
   hay campos sino el adelanto de lo que se va a preguntar. */
.cta__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--ink);
  padding-top: 56px;
}

.cta__note {
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--faint);
}

.cta__steps {
  display: grid;
  align-content: start;
  gap: 0;
  /* Alineado con el cuerpo del texto de la izquierda, no con su título. */
  margin-top: 6px;
}

.cta__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: baseline;
  padding-block: 16px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.55;
  color: var(--body);
}
.cta__step:last-child { border-bottom: 1px solid var(--rule); }

.cta__step__num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--accent);
}

/* ── Formulario ────────────────────────────────────────────────────────── */

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--faint);
}
.field--wide { margin-top: 28px; }

.field__input,
.field__textarea {
  background: transparent;
  font-size: 16px;
  letter-spacing: normal;
  color: var(--ink);
  outline: none;
  transition: border-color .18s ease;
}
.field__input {
  border: 0;
  border-bottom: 1px solid var(--field-line);
  padding: 10px 0;
}
.field__textarea {
  border: 1px solid var(--field-line);
  padding: 12px;
  resize: vertical;
  min-height: 96px;
}
.field__input:focus,
.field__textarea:focus { border-color: var(--accent); }

.field.is-invalid .field__input,
.field.is-invalid .field__textarea { border-color: #c0392b; }

.field__error {
  font-size: 12px;
  letter-spacing: .02em;
  color: #c0392b;
  min-height: 0;
}
.field__error:empty { display: none; }

/* El widget de reCAPTCHA trae su propio iframe de 304x78 y no se puede
   reestilar: sólo se le reserva el aire de arriba y se deja que se encoja
   en móvil, donde 304px se sale de pantallas angostas. */
.form__captcha { margin-top: 28px; }
.form__captcha:empty { display: none; }

@media (max-width: 360px) {
  .form__captcha { transform: scale(0.85); transform-origin: left top; }
}

.form__submit { margin-top: 28px; }

.form__status {
  margin-top: 16px;
  font-size: 14.5px;
  letter-spacing: normal;
  color: var(--body);
}
.form__status:empty { display: none; }
.form__status.is-error { color: #c0392b; }
.form__status.is-ok { color: var(--accent); }

/* ── Encuesta de cotización (pantalla completa) ────────────────────────── */

/* La página es la encuesta: barra, escenario y pie se reparten el alto de la
   ventana y el documento no se desplaza. Si un paso no cabe (móvil chico, o el
   texto ampliado del sistema), el que desplaza es el escenario. */
.survey-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.survey__bar {
  flex: none;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.survey__bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: 13px var(--gutter);
}

/* Lo escribe main.js. Sin JS queda vacío y no debe dejar hueco. */
.survey__counter {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.survey__counter:empty { display: none; }

.survey__escape { font-size: 14.5px; color: var(--muted); }

/* `margin:auto` en el panel y no `align-items:center`: centrado en flex recorta
   la parte de arriba cuando el contenido excede el contenedor con scroll. */
.survey__stage {
  flex: 1 1 auto;
  display: flex;
  overflow-y: auto;
  padding: clamp(28px, 4vw, 56px) var(--gutter);
}
.survey__panel {
  margin: auto;
  width: 100%;
  max-width: 720px;
}

.survey__eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: 18px;
}

.survey__foot {
  flex: none;
  border-top: 1px solid var(--rule);
}
.survey__foot__inner {
  display: flex;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: 14px var(--gutter);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--faint);
}
.survey__foot b { color: var(--muted); font-weight: 500; }

/* ── La encuesta manda sobre el formulario de la landing ───────────────── */

/* Un paso a la vez y a pantalla completa: la pregunta puede pesar como un
   título de sección, que es lo que la distingue de un formulario incrustado. */
.survey-page .wizard__legend {
  font-size: clamp(1.5rem, 2.4vw + .7rem, 2.125rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  margin-bottom: 8px;
}
.wizard__hint {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: clamp(26px, 3vw, 36px);
  max-width: 52ch;
}
/* En la landing el scroll de paso esquivaba el header fijo; aquí el escenario
   ya empieza debajo de la barra y ese margen sólo mete un salto. */
.survey-page .wizard { scroll-margin-top: 0; }

/* Barra de avance más marcada: en pantalla completa es la única referencia de
   dónde está la persona. */
.survey-page .js-wizard .wizard__progress {
  gap: 6px;
  margin-bottom: clamp(30px, 4vw, 44px);
}
.survey-page .wizard__tick { border-top-width: 3px; padding-top: 9px; }

.survey-page .field { font-size: 12px; }
.survey-page .field__input,
.survey-page .field__textarea { font-size: 17px; }
.survey-page .field__input { padding: 12px 0; }

/* Las opciones pasan a fichas: en una encuesta el objetivo del clic es la
   respuesta entera, no un radio de 16px. */
.survey-page .choices { gap: 10px; }
.survey-page .choices--inline,
.survey-page .choices--grid {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.survey-page .choice {
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--rule);
  font-size: 15px;
  transition: border-color .18s ease, background-color .18s ease;
}
.survey-page .choice:hover { border-color: var(--field-line); background: var(--hover-row); }
/* `:has` es progresivo: donde no exista, el punto del radio sigue marcando la
   respuesta y sólo se pierde el realce de la ficha. */
.survey-page .choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--ink);
}

/* Los botones cierran el paso: filete arriba para separarlos de los campos. */
.survey-page .wizard__nav {
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

/* Enviado: el acuse queda solo en pantalla, centrado como cierre. */
.survey-page .form.is-sent { text-align: center; }
.survey-page .form.is-sent .form__status {
  font-size: clamp(1.25rem, 1.6vw + .8rem, 1.6rem);
  line-height: 1.35;
  max-width: 32ch;
  margin-inline: auto;
}
/* Con el acuse en pantalla el rótulo de la encuesta ya no viene a cuento. */
.survey__panel:has(.form.is-sent) .survey__eyebrow { visibility: hidden; }

/* ── Asistente de cotización ───────────────────────────────────────────── */

/* Enviado: se retiran los pasos y la barra, y queda sólo el acuse. */
.form.is-sent .wizard__step,
.form.is-sent .wizard__progress { display: none; }
.form.is-sent .form__status {
  margin-top: 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  max-width: 46ch;
}

/* Los <fieldset> traen borde, padding y min-width:min-content del navegador;
   lo último rompe los grids internos en móvil, así que se resetea. */
/* Al cambiar de paso se hace scroll al formulario; sin este margen el header
   fijo tapa el primer campo. */
.wizard { scroll-margin-top: calc(var(--header-h) + 24px); }

.wizard__step {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.wizard__legend {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  padding: 0;
  margin-bottom: 24px;
}

/* Sin JS los cuatro pasos se muestran seguidos: hace falta separarlos. */
.wizard__step + .wizard__step {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--rule);
}
/* Con JS sólo vive un paso a la vez, así que la regla anterior estorba. */
.js-wizard .wizard__step + .wizard__step {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.js-wizard .wizard__step[hidden] { display: none; }

/* La barra de avance sólo tiene sentido si hay pasos que ocultar. */
.wizard__progress { display: none; }
.js-wizard .wizard__progress {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  margin-bottom: 32px;
}

.wizard__tick {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 10px;
  border-top: 2px solid var(--rule);
  transition: color .18s ease, border-color .18s ease;
  /* En pantallas angostas el nombre del paso se recorta antes de desbordar. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wizard__tick__num { display: block; color: var(--field-line); }

.wizard__tick.is-done { border-top-color: var(--accent-light); color: var(--muted-2); }
.wizard__tick.is-done .wizard__tick__num { color: var(--accent-light); }
.wizard__tick.is-current { border-top-color: var(--accent); color: var(--ink); }
.wizard__tick.is-current .wizard__tick__num { color: var(--accent); }

.wizard__nav {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 32px;
}
/* Dentro de la barra de navegación el margen suelto del submit descuadra. */
.wizard__nav .form__submit { margin-top: 0; }

/* ── Campos de opción ──────────────────────────────────────────────────── */

.form__row--wide { margin-top: 28px; }

/* Un grupo de radios/checkboxes no es un <label>: el rótulo va como <span>
   suelto y el contenedor sólo aporta el espaciado del resto de campos. */
.field--group { gap: 12px; }
/* El grupo no tiene filete que ponerse rojo: el rótulo hace de señal. Las
   opciones no se tiñen porque `.choice` fija su propio color. */
.field--group.is-invalid { color: #c0392b; }

.choices { display: grid; gap: 10px 20px; }
.choices--inline { grid-auto-flow: column; grid-auto-columns: max-content; }
.choices--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.choice {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  letter-spacing: normal;
  color: var(--body);
  cursor: pointer;
  /* El texto no debe partirse en dos líneas junto a su control. */
  line-height: 1.4;
}
.choice:hover { color: var(--ink); }
.choice input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  cursor: pointer;
}

/* El <select> hereda el filete inferior de .field__input; sólo hay que quitarle
   la apariencia nativa y devolverle una flecha, porque `appearance:none` la
   borra junto con el resto del cromo del sistema. */
.field__select {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  padding-right: 24px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 8px center, right 3px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
/* Sin elegir, el placeholder debe leerse como pista y no como respuesta. */
.field__select:invalid { color: var(--faint); }
.field__select option { color: var(--ink); }

/* ── Footer ────────────────────────────────────────────────────────────── */

/* En tinta y pegado a la banda de cierre: eran dos <span> flotando sobre el
   mismo hueso que el resto y la página terminaba sin terminar. */
.site-footer { background: var(--dark); }
.site-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 26px;
  font-size: 12.5px;
  color: var(--faint);
  letter-spacing: .08em;
}

.site-footer__link {
  color: var(--dark-fg);
  border-bottom: 1px solid rgba(243, 241, 235, .35);
}
.site-footer__link:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* ── Reveal en scroll ──────────────────────────────────────────────────── */

/* Sólo se oculta si JS confirma soporte, para no dejar la página en blanco. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1),
              transform .7s cubic-bezier(.2, .7, .3, 1);
}
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ══ Responsive ═══════════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
  .modules { grid-template-columns: repeat(2, 1fr); }
  .controls__grid { grid-template-columns: repeat(2, 1fr); }
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
  .shot { min-height: 300px; }
  .cloud__grid { grid-template-columns: 1fr; }
  .custom__grid { grid-template-columns: 1fr; align-items: start; }
  .cta__grid { grid-template-columns: 1fr; }
  .study__grid { grid-template-columns: 1fr; }
  .tier { grid-template-columns: 1fr; gap: 20px; }
  .tier__for { max-width: none; }
}

/* El menú pasa a desplegable antes de que los 7 enlaces + CTA se aprieten.
   Subió de 1040 a 1120 al entrar «Contable» en la barra.
   Mantener este valor en sync con `initNav` de main.js. */
@media (max-width: 1120px) {
  :root { --header-h: 69px; }

  .nav-toggle { display: block; }

  .nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    padding: 8px var(--gutter) 24px;
    box-shadow: 0 12px 24px rgba(22, 23, 26, .06);
    display: none;
  }
  .nav.is-open { display: flex; }

  .nav__link {
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 16px;
  }
  .nav__login {
    justify-content: center;
    margin-top: 20px;
    padding: 14px 20px;
    font-size: 15.5px;
  }
  .nav__login + .nav__cta { margin-top: 10px; }
  .nav__cta {
    margin-top: 20px;
    padding: 14px 20px;
    font-size: 15.5px;
  }

  .pillars__grid { grid-template-columns: 1fr; gap: 32px; }
  .section__head { flex-direction: column; align-items: start; gap: 10px; }
  .cloud__features { gap: 32px 40px; }
}

@media (max-width: 640px) {
  .modules { grid-template-columns: 1fr; }
  .module { padding-inline: 0; }
  .controls__grid { grid-template-columns: 1fr; gap: 32px; }
  .cloud__features { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .tier__list { grid-template-columns: 1fr; }
  /* El tinte a sangría completa se ve sucio en móvil: se reduce a un filete. */
  .tier--featured {
    margin-inline: 0;
    padding-inline: 14px;
    border-left: 2px solid var(--accent);
  }
  .actions { gap: 8px 16px; }
  .btn--primary { width: 100%; }

  /* Asistente en móvil: las opciones en fila no caben y los botones se apilan
     con el que avanza arriba, que es el que se busca con el pulgar. */
  .choices--inline { grid-auto-flow: row; grid-auto-columns: auto; }
  .choices--grid { grid-template-columns: 1fr; }
  .wizard__nav { flex-direction: column-reverse; align-items: stretch; }
  .wizard__nav .btn { width: 100%; }
  /* Cuatro rótulos no entran; el número basta para ubicarse (en la encuesta,
     además, el contador de la barra dice el nombre del paso). */
  .wizard__tick__label { display: none; }
  .link-underline { padding-inline: 0; }

  /* Marca y salida en una fila; el contador baja a la suya en vez de apretar
     a los otros dos hasta partirlos. */
  .survey__bar__inner { flex-wrap: wrap; row-gap: 4px; }
  .survey__counter { order: 3; flex-basis: 100%; }
  /* La segunda línea del pie es refuerzo, no dato: en móvil sobra. */
  .survey__foot__inner span + span { display: none; }

  /* La tabla de 4 columnas no cabe: cada fila pasa a ser una ficha con
     el nombre de la columna delante de cada valor. */
  .compare__scroll { overflow-x: visible; }
  .compare { min-width: 0; border-top: 0; }
  .compare thead { display: none; }
  .compare tbody,
  .compare tbody tr,
  .compare tbody th,
  .compare tbody td { display: block; width: auto; }

  .compare tbody tr {
    border-top: 1px solid var(--ink);
    padding-block: 20px;
  }
  .compare tbody th {
    padding: 0 0 12px;
    border: 0;
    font-size: 17px;
  }
  .compare tbody td {
    padding: 8px 0 8px 12px;
    border: 0;
    border-left: 2px solid var(--rule);
    margin-bottom: 8px;
  }
  .compare tbody .compare__own { border-left-color: var(--accent); }
  .compare tbody td::before {
    content: attr(data-col);
    display: block;
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 4px;
  }
}

/* ── Preferencias del sistema ──────────────────────────────────────────── */

@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 [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-header, .nav-toggle, .skip-link { display: none; }
  body { background: #fff; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
}