/* Copia de zokkia-web/src/css (commit 80ce8ce): no se cambian sus valores aquí. */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

ul { margin: 0; padding: 0; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--text-link-hover); }

::selection { background: var(--green-200); color: var(--green-900); }
input, textarea { caret-color: var(--accent-strong); }

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

/* ---- Utilities --------------------------------------------------------- */

.zk-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.zk-eyebrow {
  display: inline-flex;
  align-items: flex-start;
  line-height: 1.4;
  text-wrap: balance;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-strong);
}

.zk-display {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* ---- Section layout ---------------------------------------------------- */

.zk-section {
  padding-block: var(--section-padding-y);
}

.zk-section--sunken { background: var(--surface-sunken); }
.zk-section--inverse { background: var(--surface-inverse); }
.zk-section--inverse-2 { background: var(--surface-inverse-2); }

/* ---- Grid helpers ------------------------------------------------------ */

.zk-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(2rem, 6vw, 5rem);
  max-width: 960px;
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

.zk-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* ---- Card -------------------------------------------------------------- */

/* ---- Button ------------------------------------------------------------ */

.zk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: 0.005em;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.zk-btn--sm { height: 36px; padding: 0 16px; font-size: var(--text-sm); }
.zk-btn--md { height: 44px; padding: 0 22px; font-size: var(--text-base); }
.zk-btn--lg { height: 54px; padding: 0 30px; font-size: var(--text-md); }
.zk-btn--full { width: 100%; }

.zk-btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-xs);
}
.zk-btn--primary:hover {
  /* Los CTA son <a>: sin esto, a:hover les pondría el verde oscuro de los enlaces. */
  color: var(--text-on-accent);
  background: var(--accent-hover);
  box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}
.zk-btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-xs); }

.zk-btn--secondary {
  background: var(--surface-card);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.zk-btn--secondary:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  transform: scale(1.04);
}
.zk-btn--secondary:active { transform: scale(0.98); }

.zk-btn--ghost {
  background: transparent;
  color: var(--text-primary);
}
.zk-btn--ghost:hover { background: var(--surface-subtle); transform: scale(1.04); }
.zk-btn--ghost:active { transform: scale(0.98); }

/* ---- Pill (filter chip) ------------------------------------------------ */

/* ---- Badge ------------------------------------------------------------- */

/* ---- Form inputs ------------------------------------------------------- */

.zk-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}
.zk-field label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.zk-input-wrap {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.zk-input-wrap:focus-within {
  border-color: var(--accent-strong);
  box-shadow: var(--ring-focus);
}
.zk-input-wrap input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
}
.zk-input-wrap input::placeholder { color: var(--text-muted); }

.zk-textarea {
  width: 100%;
  padding: 12px 14px;
  resize: vertical;
  background: var(--surface-card);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.zk-textarea:focus {
  border-color: var(--accent-strong);
  box-shadow: var(--ring-focus);
}
.zk-textarea::placeholder { color: var(--text-muted); }

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

.zk-hero {
  position: relative;
  overflow: hidden;
  min-height: min(calc(88svh - 76px), 760px);
  display: flex;
  flex-direction: column;
}
.zk-hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
  /* Máscara (no es un fondo): las partículas se atenúan detrás del texto y se desvanecen
     abajo para que no se vea el corte del campo. */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent), linear-gradient(to right, rgba(0,0,0,.25) 0, rgba(0,0,0,.25) 42%, #000 64%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, #000 78%, transparent), linear-gradient(to right, rgba(0,0,0,.25) 0, rgba(0,0,0,.25) 42%, #000 64%);
          mask-composite: intersect;
}
@media (max-width: 760px) {
  .zk-hero__canvas {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.35) 70%, transparent);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,.35) 70%, transparent);
  }
}
.zk-hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.zk-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.zk-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.zk-hero__title { margin: 0; max-width: 17ch; font-size: clamp(2.6rem, 5.4vw, 4.5rem); line-height: 1.05; text-wrap: balance; }
.zk-hero__title span { color: var(--accent); }
.zk-hero__lede { margin: 0; max-width: 520px; font-size: var(--text-md); line-height: 1.65; color: var(--text-secondary); }
.zk-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.zk-hero__note { font-size: var(--text-sm); color: var(--text-secondary); }
.zk-hero__proof { max-width: 46ch; font-size: var(--text-sm); line-height: 1.6; color: var(--text-secondary); }
.zk-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }
.zk-hero-visual img { display: block; width: clamp(160px, 20vw, 260px); height: auto; opacity: .92; }

/* ---- Section heading --------------------------------------------------- */

.zk-section-heading {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.zk-section-heading--lead { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.zk-section-heading__title {
  font-weight: var(--weight-semibold);
  font-size: clamp(1.85rem, 3.4vw, 2.875rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
.zk-section-heading__title--inverse { color: var(--text-on-inverse); }
.zk-section-heading__desc {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 620px;
}
/* Una sola línea en escritorio; en pantallas estrechas parte de forma natural. */
.zk-section-heading__desc--wide { max-width: none; }
.zk-section-heading__desc a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Icon tile --------------------------------------------------------- */

.zk-icon-tile {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: var(--radius-md);
}
.zk-icon-tile--soft {
  background: var(--accent-soft-bg);
  color: var(--accent);
}

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

.zk-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface-page);
  border-bottom: 1px solid transparent;
  transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), backdrop-filter var(--duration-base) var(--ease-out);
}
.zk-header--scrolled {
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--border-subtle);
}
.zk-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 24px;
}
.zk-header__logo img { height: 30px; width: auto; display: block; }
.zk-header__nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.zk-header__nav a {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 8px;
  transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-base) var(--ease-out);
}
.zk-header__nav a:hover,
.zk-header__nav a[aria-current="true"] { color: var(--text-primary); }
.zk-header__nav a[aria-current="true"] { text-decoration-color: var(--accent-strong); }
.zk-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.zk-mobile-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-primary);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.zk-mobile-menu {
  display: none;
  border-top: 1px solid var(--border-subtle);
  padding: 14px var(--container-pad) 22px;
  background: var(--surface-page);
}
.zk-mobile-menu--open { display: block; }
.zk-mobile-menu__links { display: flex; flex-direction: column; gap: 4px; }
.zk-mobile-menu__links a {
  padding: 10px 0;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  display: block;
}
.zk-mobile-menu__cta { margin-top: 16px; }


/* ---- Differentiators strip -------------------------------------------- */

.zk-diff-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
}

.zk-diff-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 18px;
  border-left: 1px solid var(--accent-strong);
}

.zk-diff-item__title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.zk-diff-item__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

@media (max-width: 560px) {
  .zk-diff-strip {
    grid-template-columns: 1fr;
  }
}

/* ---- Process step ------------------------------------------------------ */

.zk-process-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
}

.zk-process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  flex: 1;
  position: relative;
}

/* connector line between steps */
.zk-process-step + .zk-process-step::before {
  content: "";
  position: absolute;
  top: 28px;
  right: calc(50% + 44px);
  left: calc(-50% + 44px);
  height: 1px;
  background: var(--border-default);
}

.zk-process-step__ring {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  flex: none;
  overflow: visible;
}

.zk-process-step__ring-track {
  fill: none;
  stroke: var(--border-default);
  stroke-width: 2;
}

.zk-process-step__ring-fill {
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 2.5;
  stroke-linecap: round;
  transform-origin: center;
  transform: rotate(-90deg);
}

.zk-process-step__ring-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  fill: var(--accent-strong);
  text-anchor: middle;
  dominant-baseline: central;
  letter-spacing: 0.04em;
}

.zk-process-step__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-inline: var(--space-4);
}

.zk-process-step__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}

.zk-process-step__desc {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

@media (min-width: 701px) and (max-width: 1000px) {
  .zk-process-grid { flex-wrap: wrap; row-gap: var(--space-8); }
  .zk-process-step { flex: 0 0 50%; }
  .zk-process-step:nth-child(3)::before { display: none; }
}

@media (max-width: 700px) {
  .zk-process-grid {
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 360px;
  }
  .zk-process-step { flex-direction: row; text-align: left; align-items: flex-start; gap: 16px; padding-bottom: 24px; }
  .zk-process-step + .zk-process-step::before {
    top: calc(-24px + 0px);
    bottom: unset;
    left: 27px;
    right: unset;
    width: 1px;
    height: 24px;
  }
  .zk-process-step__body { padding-inline: 0; padding-top: 6px; }
}

/* ---- Tipos de IA ------------------------------------------------------- */
/* Cuatro preguntas en lenguaje del cliente, una frase cada una. Sin tarjetas, iconos ni listas. */

.zk-ai-types {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8) clamp(1.5rem, 3vw, 2.5rem);
}
/* Subgrid: etiqueta, pregunta y frase quedan a la misma altura en todas las columnas. */
.zk-ai-type {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: var(--space-3);
  align-content: start;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-default);
}
.zk-ai-type__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--accent-strong); }
.zk-ai-type__title { font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: var(--weight-semibold); letter-spacing: -0.02em; line-height: 1.15; }
.zk-ai-type__text { font-size: var(--text-base); line-height: 1.6; color: var(--text-secondary); }

@media (max-width: 1000px) {
  .zk-ai-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .zk-ai-types { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ---- Cases --------------------------------------------------------------- */

.zk-cases { list-style: none; border-top: 1px solid var(--border-default); }
.zk-case {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 11rem);
  gap: var(--space-3) clamp(1.5rem, 4vw, 3rem);
  align-items: baseline;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--border-default);
}
.zk-case__meta { font-size: var(--text-sm); color: var(--accent-strong); font-weight: var(--weight-medium); }
.zk-case__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.zk-case__text { margin-top: var(--space-2); max-width: 62ch; font-size: var(--text-base); line-height: 1.6; color: var(--text-secondary); }
.zk-case__result { justify-self: end; text-align: right; font-size: var(--text-sm); color: var(--text-secondary); }
.zk-case__result strong { display: block; font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--text-primary); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.zk-cases__more { margin-top: var(--space-6); font-size: var(--text-base); color: var(--text-secondary); }
.zk-cases__more a { color: var(--text-link); font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 820px) {
  .zk-case { grid-template-columns: 1fr; }
  .zk-case__result { justify-self: start; text-align: left; }
}

.zk-process-step__time { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--accent-strong); }
.zk-process-note { margin-top: var(--space-8); max-width: 62ch; font-size: var(--text-base); line-height: 1.6; color: var(--text-secondary); }

.zk-split--faq { grid-template-columns: 0.8fr 1.2fr; }
.zk-faq { border-top: 1px solid var(--border-strong); }
.zk-faq__item { border-bottom: 1px solid var(--border-strong); }
.zk-faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
  min-height: 44px;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style: none;
}
.zk-faq__item summary::-webkit-details-marker { display: none; }
/* Icono plus de Phosphor (regular); al abrir gira a una x. */
.zk-faq__item summary::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--accent-strong);
  -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Cpath d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/%3E%3C/svg%3E') center / contain no-repeat;
          mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Cpath d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/%3E%3C/svg%3E') center / contain no-repeat;
  transition: transform var(--duration-base) var(--ease-out);
}
.zk-faq__item[open] summary::after { transform: rotate(45deg); }
.zk-faq__item p { padding-bottom: var(--space-5); max-width: 62ch; font-size: var(--text-base); line-height: 1.65; color: var(--text-secondary); }

/* ---- Results / inverse band ------------------------------------------- */
.zk-results-title { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
/* La banda oscura es una pausa entre secciones alineadas a la izquierda: título y cifras comparten eje central. */
.zk-stat { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.zk-stat-value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: clamp(3rem, 5.5vw, 4.5rem);
  font-variant-numeric: tabular-nums;
  color: var(--text-on-inverse);
}
.zk-stat-sign { color: var(--green-300); }
.zk-stat-label {
  font-size: var(--text-sm);
  color: var(--text-inverse-muted);
  line-height: 1.5;
  max-width: 220px;
  margin-inline: auto;
}


/* ---- Contact / CTA ----------------------------------------------------- */

.zk-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.zk-cta-copy { display: flex; flex-direction: column; gap: 18px; }
.zk-cta-lede { margin: 0; max-width: 420px; font-size: var(--text-md); line-height: 1.6; color: var(--text-secondary); }
.zk-form-noscript { margin: 0; font-size: var(--text-base); line-height: 1.6; color: var(--text-primary); }
.zk-form-noscript a { color: var(--text-link); text-decoration: underline; }
.zk-cta-benefits {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.zk-cta-benefits li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: var(--text-base);
  color: var(--text-primary);
}
.zk-cta-benefits li .zk-icon-tile {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.zk-form-panel {
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
/* Tras enviar, el panel conserva su alto y centra la confirmación: sin salto de layout. */
.zk-form-panel--done { display: flex; align-items: center; justify-content: center; }
.zk-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.zk-form-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.zk-form-legal {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-muted);
}
.zk-form-legal a { color: inherit; text-decoration: underline; }
.zk-form-legal a:hover { color: var(--text-secondary); }

.zk-check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-sm); line-height: 1.45; color: var(--text-primary); cursor: pointer; }
.zk-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.zk-check a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
/* Coral oscurecido para AA en texto pequeño, como el widget de Zoki (--status-danger no llega a 4,5:1). */
.zk-field-msg { margin: 4px 0 0; font-size: var(--text-xs); color: var(--status-danger-strong); }
.zk-field-msg--hint { color: var(--text-secondary); }
/* El borde visible del input es el de su envoltorio, no el del <input>. */
.zk-input-wrap:has(> [aria-invalid="true"]),
.zk-textarea[aria-invalid="true"] { border-color: var(--status-danger-strong); }
.zk-input-wrap:has(> [aria-invalid="true"]):focus-within { box-shadow: 0 0 0 3px rgba(156,46,43,0.18); }
.zk-check input[aria-invalid="true"] { outline: 2px solid var(--status-danger-strong); outline-offset: 2px; }
.zk-req { color: var(--status-danger-strong); }
.zk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zk-form-status { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--status-danger-bg); color: var(--status-danger-strong); font-size: var(--text-sm); }
.zk-form-status a { color: inherit; }
.zk-form-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 30ch;
  margin: 0;
  text-align: center;
  color: var(--text-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}
.zk-form-done__icon { width: 48px; height: 48px; border-radius: 50%; }
.zk-form-done:focus { outline: none; }

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

.zk-footer { padding-bottom: 2rem; }
/* Pie de una sola línea (legal.html): sin columnas ni separador. */
.zk-footer--compact { padding-block: 2rem; }
.zk-footer--compact .zk-footer__bottom { margin-top: 0; padding-top: 0; border-top: 0; }
.zk-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}

.zk-footer__links {
  display: contents;
}

@media (max-width: 620px) {
  .zk-footer__links {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(1rem, 3vw, 1.5rem);
    grid-column: 1 / -1;
  }
}
.zk-footer__brand { display: flex; flex-direction: column; gap: 16px; max-width: 280px; }
.zk-footer__brand img { height: 28px; width: auto; max-width: 160px; object-fit: contain; object-position: left center; }
.zk-footer__brand p { font-size: var(--text-sm); color: var(--text-inverse-muted); line-height: 1.6; margin: 0; }
.zk-footer__col { display: flex; flex-direction: column; gap: 4px; }
.zk-footer__col-heading {
  margin-bottom: 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-inverse-muted);
}
.zk-footer__col a {
  padding-block: 4px;
  font-size: var(--text-sm);
  color: var(--text-on-inverse);
  opacity: 0.85;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.zk-footer__col a:hover { opacity: 1; color: var(--text-on-inverse); }
.zk-footer__bottom {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 24px;
  border-top: 1px solid var(--border-inverse);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.zk-footer__copy { font-size: var(--text-xs); color: var(--text-inverse-muted); }
.zk-footer__legal { display: flex; gap: 22px; }
.zk-footer__legal a { padding-block: 6px; font-size: var(--text-xs); color: var(--text-inverse-muted); }
.zk-footer__legal a:hover { color: var(--text-on-inverse); }

/* ---- 404 ----------------------------------------------------------------- */

.zk-notfound { min-height: calc(100svh - 76px - 96px); display: flex; align-items: center; }
.zk-notfound__code { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--accent-strong); }
.zk-notfound__title { margin-top: var(--space-3); font-size: clamp(2.25rem, 5vw, 3.75rem); }
.zk-notfound__text { margin-top: var(--space-4); max-width: 52ch; font-size: var(--text-md); line-height: 1.6; color: var(--text-secondary); }
.zk-notfound__actions { margin-top: var(--space-7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.zk-notfound__link { font-weight: var(--weight-semibold); color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Legal page -------------------------------------------------------- */

.zk-legal__back { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
.zk-legal__back:hover { color: var(--text-primary); }
.zk-legal { max-width: 800px; color: var(--text-secondary); }
.zk-legal h1 { font-size: var(--text-xl); }
.zk-legal h2 {
  font-size: var(--text-lg);
  margin: var(--space-9) 0 var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}
.zk-legal h3 { font-size: var(--text-base); margin: var(--space-6) 0 var(--space-2); }
.zk-legal p, .zk-legal ul { max-width: 62ch; font-size: var(--text-sm); line-height: 1.7; margin-bottom: var(--space-3); }
.zk-legal ul { padding-left: 1.25rem; }
.zk-legal li { margin-bottom: var(--space-1); }
.zk-legal strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.zk-legal a:not(.zk-legal__toc a) { text-decoration: underline; }
.zk-legal section { scroll-margin-top: 76px; }
.zk-legal__meta { color: var(--text-muted); margin-top: var(--space-2); }
.zk-legal__toc { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-5); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.zk-legal__table { overflow-x: auto; margin-bottom: var(--space-3); }
.zk-legal table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.5; }
.zk-legal th, .zk-legal td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.zk-legal th { color: var(--text-primary); font-weight: var(--weight-semibold); background: var(--surface-sunken); }

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 1000px) {
  .zk-header__nav,
  .zk-header__actions { display: none !important; }
  .zk-mobile-toggle { display: inline-flex !important; }

  /* Tablet: el hero conserva la marca y deja de ocupar casi toda la pantalla. */
  .zk-hero { min-height: 0; }
  .zk-split { grid-template-columns: 1fr !important; }
  .zk-grid-4 { gap: clamp(1.5rem, 4vw, 3rem) !important; }
  .zk-cta-grid { grid-template-columns: 1fr !important; }
  .zk-footer-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .zk-footer__brand { grid-column: 1 / -1; margin-bottom: 0.5rem; }
  .zk-footer__brand { max-width: 100%; }
}

@media (max-width: 760px) {
  .zk-hero-grid { grid-template-columns: 1fr; }
  .zk-hero-visual { display: none; }
}

@media (max-width: 620px) {
  .zk-grid-4 { gap: 1.5rem 2rem !important; }
  .zk-footer-grid { grid-template-columns: 1fr !important; }
  .zk-form-row { grid-template-columns: 1fr !important; }
}

/* ── Enlaces de texto: el subrayado se dibuja de izquierda a derecha ───── */
/* En texto corrido hay un subrayado tenue en reposo (se sigue viendo que es enlace);
   en el pie no, porque las columnas ya lo dejan claro. */
.zk-section-heading__desc a,
.zk-cases__more a,
.zk-form-legal a,
.zk-check a,
.zk-notfound__link {
  --ul-rest: color-mix(in srgb, currentColor 40%, transparent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--ul-rest), var(--ul-rest));
  background-repeat: no-repeat;
  background-size: 0% 1.5px, 100% 1px;
  background-position: 0 var(--ul-y, 100%), 0 var(--ul-y, 100%);
  transition: background-size var(--duration-base) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
/* Pie: enlaces de una línea, la raya es un ::after que crece (sin subrayado en reposo). */
.zk-footer__col a, .zk-footer__legal a { position: relative; }
.zk-footer__col a { align-self: flex-start; }
.zk-footer__col a::after, .zk-footer__legal a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-base) var(--ease-out);
}
.zk-footer__legal a::after { bottom: 6px; }
.zk-footer__col a:hover::after, .zk-footer__col a:focus-visible::after,
.zk-footer__legal a:hover::after, .zk-footer__legal a:focus-visible::after { transform: none; }
.zk-section-heading__desc a:hover, .zk-section-heading__desc a:focus-visible,
.zk-cases__more a:hover, .zk-cases__more a:focus-visible,
.zk-form-legal a:hover, .zk-form-legal a:focus-visible,
.zk-check a:hover, .zk-check a:focus-visible,
.zk-notfound__link:hover, .zk-notfound__link:focus-visible { background-size: 100% 1.5px, 100% 1px; }

/* ── Movimiento ─────────────────────────────────────────────────────────── */
/* Solo se mueve lo que explica algo: el proceso se dibuja fase a fase, y FAQ, menú,
   sección activa y envío del formulario responden a lo que hace el visitante.
   El texto no se anima. */

/* Hero al cargar: solo el titular y la marca; el resto (y el CTA) está quieto desde el
   primer instante. Solo con JS: sin JS no hay estado oculto. */
@keyframes zk-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes zk-grow { from { opacity: 0; transform: scale(0.96); } }
.js .zk-hero__title { animation: zk-rise 600ms var(--ease-out) both; }
.js .zk-hero-visual img { animation: zk-grow 700ms var(--ease-out) 60ms both; }

/* Títulos de sección y lista de casos: entran una vez al llegar (.zk-motion lo pone el JS). */
.zk-motion .zk-enter,
.zk-motion .zk-enter-list > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.zk-motion .zk-enter-list > * { transform: translateY(8px); transition-duration: 450ms; }
.zk-motion .zk-enter-list > :nth-child(2) { transition-delay: 50ms; }
.zk-motion .zk-enter-list > :nth-child(3) { transition-delay: 100ms; }
.zk-motion .zk-enter-list > :nth-child(4) { transition-delay: 150ms; }
.zk-motion .zk-enter-list > :nth-child(5) { transition-delay: 200ms; }
.zk-motion .zk-enter-list > :nth-child(6) { transition-delay: 250ms; }
.zk-motion .zk-enter.is-in,
.zk-motion .zk-enter-list.is-in > * { opacity: 1; transform: none; }

/* Proceso: estado final por defecto; con .zk-motion (JS, sin movimiento reducido)
   parte vacío y se dibuja en orden al entrar en pantalla. */
.zk-process-step:nth-child(1) { --dash: 37.7; --at: 0ms; }
.zk-process-step:nth-child(2) { --dash: 75.4; --at: 450ms; }
.zk-process-step:nth-child(3) { --dash: 113.1; --at: 900ms; }
.zk-process-step:nth-child(4) { --dash: 151; --at: 1350ms; }
.zk-process-step__ring-fill { stroke-dasharray: var(--dash) 151; }
.zk-motion .zk-process-step__ring-fill {
  stroke-dasharray: 0 151;
  stroke-opacity: 0; /* el remate redondo dibujaría un punto con longitud 0 */
  transition: stroke-dasharray 500ms var(--ease-out) calc(var(--at) + 200ms),
              stroke-opacity 1ms linear calc(var(--at) + 200ms);
}
.zk-motion .zk-process-step + .zk-process-step::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms var(--ease-out) var(--at);
}
.zk-motion .zk-process-grid.is-drawn .zk-process-step__ring-fill { stroke-dasharray: var(--dash) 151; stroke-opacity: 1; }
.zk-motion .zk-process-grid.is-drawn .zk-process-step + .zk-process-step::before { transform: none; }
@media (max-width: 700px) {
  .zk-motion .zk-process-step + .zk-process-step::before { transform: scaleY(0); transform-origin: center top; }
}

/* FAQ: la respuesta se despliega (navegadores con ::details-content; el resto, al instante). */
.zk-faq { interpolate-size: allow-keywords; }
.zk-faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--duration-base) var(--ease-out), content-visibility var(--duration-base) allow-discrete;
}
.zk-faq__item[open]::details-content { block-size: auto; }

/* Menú móvil: se descubre desde arriba con un recorte, sin desplazar el texto. */
.zk-mobile-menu--open { animation: zk-menu-in var(--duration-base) var(--ease-out); }
@keyframes zk-menu-in {
  from { clip-path: inset(0 0 100% 0); opacity: 0; }
  to   { clip-path: inset(0 0 0 0);    opacity: 1; }
}

/* Envío correcto: el icono confirma la acción. */
.zk-form-done__icon { animation: zk-pop 320ms var(--ease-out); }
@keyframes zk-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: none;       opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zk-faq__item::details-content { transition: none; }
  /* Sin desplazamiento ni escala: solo el fundido, que sigue indicando el cambio. */
  .zk-mobile-menu--open, .zk-form-done__icon { animation: zk-fade var(--duration-fast) linear; }
  .js .zk-hero__title, .js .zk-hero-visual img { animation: zk-fade 400ms linear both; }
  .zk-section-heading__desc a, .zk-cases__more a, .zk-form-legal a, .zk-check a,
  .zk-notfound__link, .zk-footer__col a::after, .zk-footer__legal a::after { transition: none; }
}
@keyframes zk-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Sin JavaScript ─────────────────────────────────────────────────────── */
/* El script del <head> cambia no-js por js. Sin él, el menú móvil se muestra abierto
   y el formulario deja paso al aviso con el email (los CTA ya son enlaces a #contacto). */
.no-js .zk-mobile-toggle { display: none !important; }
@media (max-width: 1000px) {
  /* El menú abierto es alto: si el header siguiera fijo, taparía el destino de los anclajes. */
  .no-js .zk-header { position: relative; }
  .no-js .zk-mobile-menu { display: block; }
}
.no-js #contact-form { display: none; }

/* ── Saltar al contenido ────────────────────────────────────────────────── */
.zk-skip {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: calc(var(--z-sticky) + 1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: var(--weight-semibold);
}
.zk-skip:focus { top: var(--space-3); }
.zk-skip:hover { color: var(--text-on-accent); }
main:focus { outline: none; }

/* El header fijo no tapa el destino de los anclajes. */
#soluciones, #propuesta, #casos, #proceso, #faq, #contacto { scroll-margin-top: 76px; }