/* Sistema de diseño de Lucmatek.
   Los tokens vienen del tema publicado (oklch, Archivo + Instrument Sans) para
   que la paleta no se desincronice con la marca. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ink-950: oklch(.17 .034 245);
  --ink-900: oklch(.205 .039 245);
  --ink-850: oklch(.235 .042 245);
  --ink-800: oklch(.27 .045 245);
  --ink-700: oklch(.35 .044 245);
  --paper: oklch(.975 .009 225);
  --paper-blue: oklch(.95 .022 225);
  --white: oklch(1 0 0);
  --muted: oklch(.67 .025 240);
  --line-dark: oklch(.38 .04 230 / .55);
  --line-light: oklch(.84 .025 230);
  --cyan: oklch(.79 .15 205);
  --cyan-strong: oklch(.7 .17 216);
  --blue: oklch(.48 .18 255);
  --lime: oklch(.88 .2 128);
  --lime-dark: oklch(.54 .14 132);
  --error: oklch(.62 .2 25);

  --font-display: "Archivo", "Aptos Display", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

  --text-xs: .73rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.05rem, 1vw + .75rem, 1.25rem);
  --text-h3: clamp(1.35rem, 1vw + 1rem, 1.8rem);
  --text-h2: clamp(2rem, 3.4vw, 3.6rem);
  --text-hero: clamp(2.4rem, 5.4vw, 5.2rem);

  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;

  --radius-sm: .45rem;
  --radius-md: .85rem;
  --radius-lg: 1.25rem;
  --radius-round: 999rem;

  /* Azul marino de la propia marca: es el fondo con el que viene grabado el
     asset "dark" del logo (#0d1930). El pie lo usa como fondo para que el
     logotipo encaje sin necesidad de recortar alfa ni aplicar filtros. */
  --ink-brand: #0d1930;

  --header-height: 4.5rem;
  --page-gutter: clamp(1.15rem, 4vw, 4.5rem);
  --page-width: 92rem;
  --reading-width: 43rem;
  --shadow-soft: 0 1.4rem 3.8rem oklch(.12 .03 245 / .14);
  --transition-base: .28s cubic-bezier(.22, 1, .36, 1);
}

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

html {
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink-900);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}

h1 em, h2 em {
  font-style: normal;
  color: var(--cyan-strong);
}

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

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  color: var(--white);
  background: var(--ink-950);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus { transform: translateY(0); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--cyan-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.9rem;
  padding: 0 var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-round);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.button--primary { color: var(--ink-950); background: var(--cyan); }
.button--primary:hover { background: var(--cyan-strong); color: var(--white); }
.button--ghost { color: var(--ink-900); background: transparent; border-color: var(--line-light); }
.button--ghost:hover { border-color: var(--ink-700); background: var(--white); }
.button--block { width: 100%; }

.eyebrow {
  margin: 0;
  color: var(--cyan-strong);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ---------- Cabecera ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: oklch(.975 .009 225 / .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-light);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: min(var(--page-width), 100% - var(--page-gutter) * 2);
  min-height: var(--header-height);
  margin-inline: auto;
}

.brand img { width: clamp(8.5rem, 14vw, 11rem); height: auto; }

.header__toggle {
  display: none;
  place-items: center;
  gap: 6px;
  padding: var(--space-3);
  color: var(--ink-900);
  background: transparent;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
}

.header__bar { display: block; width: 20px; height: 2px; background: currentColor; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-800);
}

.nav__link::after {
  content: "";
  position: absolute;
  inset: auto 0 -6px;
  height: 2px;
  background: var(--cyan-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.nav__link:hover::after { transform: scaleX(1); }

.button--nav { min-height: 2.5rem; padding-inline: var(--space-5); font-size: var(--text-sm); }

.lang-switch {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.lang-switch:hover { color: var(--ink-900); }

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

.hero {
  width: min(var(--page-width), 100% - var(--page-gutter) * 2);
  margin-inline: auto;
  padding-block: var(--space-16) var(--space-10);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--space-12);
  align-items: center;
}

.hero__title {
  margin-top: var(--space-4);
  font-size: var(--text-hero);
}

.hero__lead {
  max-width: 34rem;
  margin: var(--space-6) 0 0;
  font-size: var(--text-lg);
  color: var(--ink-700);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.hero__method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-light);
}

.hero__method-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__promises {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  font-weight: 600;
}

.hero__promises li { display: flex; align-items: center; gap: var(--space-2); }
.hero__promises li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime-dark); }

.hero__visual { position: relative; margin: 0; }

.hero__visual img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.hero__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--text-xs);
}

.hero__caption-title { font-weight: 700; }
.hero__caption-meta { color: var(--muted); }
.hero__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.chip {
  padding: 4px 10px;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-round);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  color: var(--ink-800);
}

.signal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  margin: var(--space-12) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--line-light);
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  color: var(--muted);
}

/* ---------- Secciones ---------- */

.section {
  width: min(var(--page-width), 100% - var(--page-gutter) * 2);
  margin-inline: auto;
  padding-block: var(--space-20);
}

.section--tint { background: var(--paper-blue); width: 100%; max-width: none; padding-inline: max(var(--page-gutter), calc((100% - var(--page-width)) / 2 + var(--page-gutter))); }
.section--ink { background: var(--ink-950); width: 100%; max-width: none; color: var(--paper); padding-inline: max(var(--page-gutter), calc((100% - var(--page-width)) / 2 + var(--page-gutter))); }
.section--ink .eyebrow { color: var(--cyan); }
.section--ink h2 em { color: var(--cyan); }
.section--ink .section__intro { color: oklch(.84 .02 235); }

.section__head { max-width: var(--reading-width); margin-bottom: var(--space-12); }
.section__title { margin-top: var(--space-3); font-size: var(--text-h2); }
.section__intro { margin: var(--space-5) 0 0; color: var(--ink-700); font-size: var(--text-lg); }

.grid--services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-6);
}

/* ---------- Servicios ---------- */

.service-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  --accent: var(--cyan);
}

.service-card--blue { --accent: var(--blue); }
.service-card--mist { --accent: var(--cyan-strong); }
.service-card--lime { --accent: var(--lime-dark); }

.service-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-blue); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); }
.service-card:hover .service-card__media img { transform: scale(1.03); }

.service-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-6); }

.service-card__number {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  letter-spacing: .1em;
}

.service-card__title { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); font-size: var(--text-h3); }
.service-card__title .icon { width: 1.35em; height: 1.35em; color: var(--accent); }

.service-card__summary { margin: var(--space-3) 0 0; color: var(--ink-700); }

.service-card__list {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--ink-800);
}

.service-card__list li { padding: var(--space-2) 0 var(--space-2) var(--space-5); border-top: 1px solid var(--line-light); position: relative; }
.service-card__list li::before { content: ""; position: absolute; left: 0; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.service-card__cta { margin-top: auto; padding-top: var(--space-6); font-weight: 600; color: var(--ink-900); text-decoration: none; }
.service-card__cta::after { content: " →"; }

/* ---------- Ruta ---------- */

.route { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-8); }

.route__tabs { display: flex; flex-direction: column; gap: var(--space-2); }

.route-tab {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  text-align: left;
  background: transparent;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  transition: background var(--transition-base), border-color var(--transition-base);
}

.route-tab:hover { background: var(--white); }
.route-tab.is-active { background: var(--ink-950); border-color: var(--ink-950); color: var(--paper); }
.route-tab__index { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--cyan-strong); }
.route-tab.is-active .route-tab__index { color: var(--cyan); }
.route-tab__label { font-weight: 600; }

.route__panels { background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius-lg); padding: var(--space-8); }

.route-panel__status { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime-dark); }
.dot--cyan { background: var(--cyan-strong); }

.route-panel__question { margin-top: var(--space-4); font-size: var(--text-h3); }
.route-panel__result { margin: var(--space-5) 0 0; font-weight: 700; color: var(--cyan-strong); }
.route-panel__detail { margin: var(--space-3) 0 var(--space-8); color: var(--ink-700); }

/* ---------- Audiencia ---------- */

.segmented { display: inline-flex; gap: 4px; margin-top: var(--space-6); padding: 4px; background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius-round); }

.segmented__button { padding: var(--space-2) var(--space-5); background: transparent; border: 0; border-radius: var(--radius-round); font-weight: 600; }
.segmented__button.is-active { background: var(--ink-950); color: var(--paper); }

.audience { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: var(--space-10); align-items: start; }

.audience__label { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; color: var(--muted); }
.audience__title { margin-top: var(--space-3); font-size: var(--text-h2); }
.audience__title em { color: var(--cyan-strong); }
.audience__copy { margin: var(--space-5) 0 0; font-size: var(--text-lg); color: var(--ink-700); }

.audience__list { margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.audience__list li { padding: var(--space-3) 0; border-top: 1px solid var(--line-light); font-weight: 500; }

.metric { margin-top: var(--space-8); padding: var(--space-6); background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius-md); }
.metric__label { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; color: var(--muted); }
.metric__value { margin: var(--space-3) 0 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: .02em; }
.metric__copy { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--ink-700); }

/* ---------- Proceso ---------- */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }

.step { padding-top: var(--space-5); border-top: 2px solid oklch(.3 .04 240); }
.step__number { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; color: var(--cyan); }
.step__title { margin-top: var(--space-3); font-size: var(--text-lg); }
.step__copy { margin: var(--space-3) 0 0; color: oklch(.82 .02 235); font-size: var(--text-sm); }

/* ---------- Productos ---------- */

.products { display: grid; gap: var(--space-6); }

.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); align-items: center; background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius-lg); padding: var(--space-10); }
.product--alt { background: var(--paper-blue); }

.product__label { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; color: var(--cyan-strong); }
.product__title { margin-top: var(--space-3); font-size: var(--text-h2); }
.product__copy { margin: var(--space-5) 0 0; color: var(--ink-700); }

.product__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0; padding: 0; list-style: none; }
.product__tags li { padding: 4px 10px; border: 1px solid var(--line-light); border-radius: var(--radius-round); font-size: var(--text-xs); color: var(--ink-800); }

.product__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.product__media { position: relative; margin: 0; }
.product__media img { width: 100%; border-radius: var(--radius-md); }
.product__stack { position: absolute; inset: auto var(--space-5) var(--space-5) auto; padding: var(--space-4) var(--space-5); background: var(--ink-950); color: var(--paper); border-radius: var(--radius-md); }
.product__stack-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; color: var(--cyan); }

.flow { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); font-weight: 600; }
.flow__item { display: flex; align-items: center; gap: var(--space-2); }
.flow__arrow { color: var(--cyan); }

/* ---------- Cuidado ---------- */

.care { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-12); align-items: center; }
.care__media { position: relative; margin: 0; }
.care__media img { width: 100%; border-radius: var(--radius-lg); }
.care__badge { position: absolute; top: var(--space-4); left: var(--space-4); padding: 6px 12px; background: var(--ink-950); color: var(--paper); border-radius: var(--radius-round); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; }

.signals { display: grid; gap: var(--space-3); margin: var(--space-8) 0; padding: 0; list-style: none; }
.signals li { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; }
.signals li::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--lime-dark); }

/* ---------- Digital ---------- */

.digital { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-12); align-items: center; }
.digital__list { display: grid; gap: var(--space-3); margin: var(--space-8) 0; padding: 0; list-style: none; }
.digital__list li { padding: var(--space-3) var(--space-5); background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius-sm); font-weight: 600; }

.console { padding: var(--space-8); background: var(--ink-950); color: var(--paper); border-radius: var(--radius-lg); font-family: var(--font-mono); }
.console__head { margin: 0; font-size: var(--text-xs); letter-spacing: .14em; color: var(--cyan); }
.console__label { margin: var(--space-8) 0 0; font-size: var(--text-xs); letter-spacing: .12em; color: var(--muted); }
.console__status { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: var(--text-lg); font-weight: 700; }
.console__checks { margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.console__checks li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid oklch(.3 .04 240); font-size: var(--text-sm); }
.console__checks strong { color: var(--cyan); }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: var(--space-3); max-width: var(--reading-width); }

.faq__item { background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius-md); }
.faq__question { padding: var(--space-5) var(--space-6); font-weight: 600; cursor: pointer; list-style: none; }
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after { content: "+"; float: right; color: var(--cyan-strong); font-size: var(--text-lg); line-height: 1; }
.faq__item[open] .faq__question::after { content: "–"; }
.faq__answer { padding: 0 var(--space-6) var(--space-5); color: var(--ink-700); }

/* ---------- Contacto ---------- */

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.contact__alt { margin: var(--space-6) 0 0; color: var(--ink-700); }
.contact__alt a { color: var(--cyan-strong); font-weight: 600; }

.contact__form { display: grid; gap: var(--space-5); padding: var(--space-8); background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius-lg); }

.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 600; }
.field__optional { color: var(--muted); font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  color: var(--ink-900);
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
}

.field textarea { resize: vertical; }
.field :is(input, select, textarea):focus-visible { border-color: var(--cyan-strong); background: var(--white); }
.field__error { margin: 0; color: var(--error); font-size: var(--text-sm); font-weight: 600; }

.contact__privacy { margin: 0; font-size: var(--text-xs); color: var(--muted); }

/* ---------- Pie ---------- */

.footer { background: var(--ink-brand); color: var(--paper); padding-block: var(--space-16) var(--space-8); }
.footer__inner,
.footer__base { width: min(var(--page-width), 100% - var(--page-gutter) * 2); margin-inline: auto; }

.footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-10); justify-content: space-between; align-items: flex-start; }
.footer .brand img { width: clamp(8.5rem, 14vw, 10rem); height: auto; }
.footer__tagline { margin: var(--space-4) 0 0; color: oklch(.8 .02 235); max-width: 22rem; }

.footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-10); }
.footer__nav ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.footer__nav a { color: oklch(.85 .02 235); text-decoration: none; font-size: var(--text-sm); }
.footer__nav a:hover { color: var(--cyan); }

.footer__base { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid oklch(.3 .04 240); font-size: var(--text-xs); color: var(--muted); }
.footer__base p { margin: 0; }

/* ---------- WhatsApp flotante ---------- */

.floating-whatsapp {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--white);
  background: oklch(.55 .17 150);
  border-radius: var(--radius-round);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition: transform var(--transition-base);
}

.floating-whatsapp:hover { transform: translateY(-2px); }
.floating-whatsapp svg { width: 1.4rem; height: 1.4rem; }
.floating-whatsapp__label { display: none; font-size: var(--text-sm); font-weight: 600; }

/* ---------- Promesas ---------- */

.trust {
  background: var(--ink-950);
  color: var(--paper);
  padding-block: var(--space-12);
}

.trust__inner {
  width: min(var(--page-width), 100% - var(--page-gutter) * 2);
  margin-inline: auto;
}

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

.trust__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-6);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.promise { padding-top: var(--space-4); border-top: 1px solid oklch(.34 .04 240); }

.promise__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.promise__title .icon { width: 1.05rem; height: 1.05rem; flex: none; color: var(--lime); }

.promise__copy { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: oklch(.8 .02 235); }

/* ---------- Planes ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-5);
  align-items: start;
}

.plan {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
}

.plan--featured { border-color: var(--cyan-strong); box-shadow: var(--shadow-soft); }

.plan__name {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-strong);
}

/* No hay precio en la tarjeta. La jerarquia la marca el alcance: que queda
   dentro de ese plan y en funcion de que se define. Se lee como una linea de
   servicio, no como una oferta economica. */
.plan__scope {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--ink-800);
}

.plan__scope::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 2px;
  background: var(--cyan-strong);
}

.plan--featured .plan__scope { color: var(--ink-950); }
.plan--featured .plan__scope::before { background: var(--cyan-strong); }

.plan__summary { margin: var(--space-4) 0 0; color: var(--ink-700); font-size: var(--text-sm); }

.plan__features {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-6);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.plan__features li { display: flex; align-items: flex-start; gap: var(--space-2); }
.plan__features .icon { width: 1rem; height: 1rem; flex: none; margin-top: .28em; color: var(--lime-dark); }

.plan .button { margin-top: auto; }

.recurring {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--ink-950);
  color: var(--paper);
  border-radius: var(--radius-lg);
}

.recurring__label { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.recurring__copy { margin: var(--space-2) 0 0; max-width: 44rem; font-size: var(--text-sm); color: oklch(.82 .02 235); }

.plans__note { margin: var(--space-6) 0 0; max-width: var(--reading-width); font-size: var(--text-xs); color: var(--muted); }

/* ---------- Portal de clientes ---------- */

.portal {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--space-10);
  align-items: start;
}

/* El mock es el objeto central del capitulo: tiene que separarse del fondo
   oscuro de la seccion. Superficie mas clara que la seccion, borde mas presente
   y una linea de luz superior. */
.portal__window {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, oklch(.26 .042 245), oklch(.215 .04 245));
  border: 1px solid oklch(.42 .05 235);
  border-radius: var(--radius-lg);
  box-shadow: 0 1.8rem 4rem oklch(.06 .03 245 / .6), 0 0 0 1px oklch(.79 .15 205 / .07);
}

.portal__window::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .7;
}

.portal__chrome {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: oklch(.29 .04 245);
  border-bottom: 1px solid oklch(.38 .05 235);
}

.portal__dots { display: flex; gap: 6px; margin: 0; }
.portal__dots span { width: 9px; height: 9px; border-radius: 50%; background: oklch(.38 .04 240); }

.portal__url {
  flex: 1;
  margin: 0;
  padding: 5px var(--space-3);
  overflow: hidden;
  background: oklch(.2 .034 245);
  border: 1px solid oklch(.36 .04 235);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: oklch(.72 .02 235);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal__lock { margin: 0; color: var(--cyan); }
.portal__lock .icon { width: 1.05rem; height: 1.05rem; }

.portal__tabs { display: flex; overflow-x: auto; background: oklch(.235 .04 245); border-bottom: 1px solid oklch(.38 .05 235); scrollbar-width: thin; }

.portal-tab {
  flex: 1 0 auto;
  padding: var(--space-4) var(--space-5);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: var(--text-sm);
  font-weight: 600;
  color: oklch(.78 .02 235);
  white-space: nowrap;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.portal-tab:hover { color: var(--paper); }
.portal-tab.is-active { color: var(--paper); border-bottom-color: var(--cyan); }

.portal__panels { min-height: 12.5rem; padding: var(--space-6); }

.portal-panel__copy { margin: 0; max-width: 34rem; color: oklch(.9 .015 235); }

.portal-panel__rows { display: grid; gap: var(--space-3); margin: var(--space-6) 0 0; }
.portal-panel__rows span { display: block; height: 10px; border-radius: 999px; background: oklch(.33 .045 238); }
.portal-panel__rows span:nth-child(1) { width: 88%; }
.portal-panel__rows span:nth-child(2) { width: 64%; }
.portal-panel__rows span:nth-child(3) { width: 42%; }

.portal__access-title { margin: 0; font-family: var(--font-display); font-size: var(--text-h3); font-weight: 700; }
.portal__access-copy { margin: var(--space-3) 0 0; color: oklch(.82 .02 235); }

.access { margin: var(--space-6) 0 0; padding: 0; list-style: none; counter-reset: acceso; }

.access__step {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid oklch(.32 .04 240);
  font-size: var(--text-sm);
}

.access__index { flex: none; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--cyan); }

.portal__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.portal__actions .button--primary .icon { width: 1.05rem; height: 1.05rem; }
.portal__login-note { margin: var(--space-4) 0 0; font-size: var(--text-xs); color: oklch(.72 .02 235); }
.portal__staff { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: oklch(.72 .02 235); }
.portal__staff a { color: var(--cyan); font-weight: 600; }

/* ---------- Institucional ---------- */

.institutional {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--space-10);
  align-items: start;
}

.founder { padding: var(--space-8); background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius-lg); }
.founder__role { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-strong); }
.founder__name { margin: var(--space-3) 0 0; font-family: var(--font-display); font-size: var(--text-h2); letter-spacing: -.03em; }
.founder__copy { margin: var(--space-5) 0 0; color: var(--ink-700); }

.facts { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }

.fact { padding: var(--space-5); background: var(--paper-blue); border-radius: var(--radius-md); }
.fact__label { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fact__value { margin: var(--space-2) 0 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.fact__note { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--ink-700); }

.divisions { margin-top: var(--space-10); }
.divisions__label { margin: 0 0 var(--space-5); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.divisions__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }

.division { padding-top: var(--space-4); border-top: 2px solid var(--ink-950); }
.division__name { margin: 0; font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; }
.division__copy { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--ink-700); }

/* ---------- Contacto directo ---------- */

.contact__direct { display: grid; gap: var(--space-3); margin: var(--space-8) 0 0; padding: 0; list-style: none; }

.contact__direct li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line-light);
}

.contact__direct-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact__direct-label .icon { width: 1rem; height: 1rem; }

.contact__direct-value { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; text-decoration: none; letter-spacing: -.01em; }
.contact__direct-value:hover { color: var(--cyan-strong); }

.contact__direct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }

.contact__direct-alt {
  padding: 5px var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-800);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-round);
  text-decoration: none;
}

.contact__direct-alt:hover { color: var(--ink-950); border-color: var(--cyan-strong); background: var(--white); }

.contact__note { margin: var(--space-5) 0 0; font-size: var(--text-sm); color: var(--muted); }

/* ---------- Acceso de clientes ---------- */

.client-link,
.hero__client,
.footer__client {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.client-link { color: var(--ink-800); padding: var(--space-2) var(--space-3); border: 1px solid var(--line-light); border-radius: var(--radius-round); }
.client-link .icon { width: 1.05rem; height: 1.05rem; }
.client-link:hover { color: var(--ink-950); border-color: var(--cyan-strong); background: var(--white); }

.hero__client { width: 100%; color: var(--ink-700); }
.hero__client .icon { width: 1.1rem; height: 1.1rem; }
.hero__client span { border-bottom: 1px solid var(--line-light); padding-bottom: 2px; transition: border-color var(--transition-base), color var(--transition-base); }
.hero__client:hover { color: var(--ink-950); }
.hero__client:hover span { border-bottom-color: var(--cyan-strong); }

.footer__client { margin-top: var(--space-5); padding: var(--space-3) var(--space-5); color: var(--paper); background: oklch(.3 .04 240); border-radius: var(--radius-round); }
.footer__client .icon { width: 1.05rem; height: 1.05rem; color: var(--cyan); }
.footer__client:hover { background: var(--cyan); color: var(--ink-950); }

.button--onink { color: var(--paper); border-color: oklch(.42 .04 240); }
.button--onink:hover { color: var(--ink-950); background: var(--paper); border-color: var(--paper); }

/* =============================================================
   Movimiento
   -------------------------------------------------------------
   Firma de la pagina: una "lectura de senal" que se traza mientras
   se lee. Todo el sistema usa solo opacity y transform para no
   provocar layout, y vive bajo `html.js`: si el JavaScript no
   arranca, la pagina se ve completa y estatica. Nunca queda
   contenido oculto por una animacion que no llego a correr.
   ============================================================= */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --reveal-shift: 18px;
  --reveal-time: .72s;
  --stagger: 70ms;
}

/* --- Textura ambiente del hero: rejilla tecnica + barrido --- */

.hero { position: relative; }

.hero__scan { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.hero__scan::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image:
    linear-gradient(oklch(.55 .05 230 / .5) 1px, transparent 1px),
    linear-gradient(90deg, oklch(.55 .05 230 / .5) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 78%);
  transition: opacity 1.4s var(--ease-out);
}

.hero__scan::after {
  content: "";
  position: absolute;
  inset: -50% -10% auto -10%;
  height: 42%;
  opacity: 0;
  background: linear-gradient(to bottom, transparent, oklch(.79 .15 205 / .09), transparent);
}

.js .hero__scan::before { opacity: .55; }
.js .hero__scan::after { opacity: 1; animation: senal-barrido 11s linear infinite; }

@keyframes senal-barrido {
  from { transform: translate3d(0, -120%, 0); }
  to { transform: translate3d(0, 360%, 0); }
}

/* --- Secuela de carga del hero: una sola vez, en orden --- */

.js [data-hero] { opacity: 0; transform: translate3d(0, 22px, 0); }
.js [data-hero].is-in { opacity: 1; transform: none; transition: opacity var(--reveal-time) var(--ease-out), transform var(--reveal-time) var(--ease-out); }

.js [data-hero="1"].is-in { transition-delay: .04s; }
.js [data-hero="2"].is-in { transition-delay: .12s; }
.js [data-hero="3"].is-in { transition-delay: .22s; }
.js [data-hero="4"].is-in { transition-delay: .32s; }
.js [data-hero="5"].is-in { transition-delay: .44s; }
.js [data-hero="6"].is-in { transition-delay: .2s; }

/* --- Revelado al entrar en pantalla --- */

.js [data-reveal] { opacity: 0; transform: translate3d(0, var(--reveal-shift), 0); }

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--reveal-time) var(--ease-out), transform var(--reveal-time) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

/* --- Cabecera: riel de progreso de lectura --- */

.header { position: sticky; transition: box-shadow var(--transition-base), background var(--transition-base); }
.header.is-condensed { background: oklch(.975 .009 225 / .96); box-shadow: 0 1px 0 var(--line-light), 0 .8rem 2rem oklch(.12 .03 245 / .07); }

.header__progress { position: absolute; inset: auto 0 -1px; height: 2px; overflow: hidden; }
.header__progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan-strong), var(--cyan)); transform: scaleX(0); transform-origin: left; }

/* --- Riel del proceso: la linea se rellena al leer --- */

.steps { position: relative; }
.steps__rail { position: absolute; top: 0; left: 0; right: 0; height: 2px; display: block; }
.steps__rail span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--lime)); transform: scaleX(0); transform-origin: left; }
.js .step { border-top-color: transparent; }

/* --- Paneles del portal: cambio con desplazamiento corto --- */

.portal-panel { animation: panel-entra .5s var(--ease-out) both; }

@keyframes panel-entra {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: none; }
}

.portal-tab { position: relative; }
.portal-tab::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.portal-tab.is-active::after { transform: scaleX(1); }

/* --- Barras del login simulado: pulso discreto, sin falso contenido --- */

.portal-panel__rows span { animation: skeleton 2.6s var(--ease-in-out) infinite; }
.portal-panel__rows span:nth-child(2) { animation-delay: .18s; }
.portal-panel__rows span:nth-child(3) { animation-delay: .36s; }

@keyframes skeleton { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* --- Micro-interacciones --- */

.button { position: relative; overflow: hidden; }

.button::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, oklch(1 0 0 / .35), transparent);
  transform: skewX(-18deg);
  opacity: 0;
}

.button:hover::after { opacity: 1; animation: brillo .75s var(--ease-out) both; }
@keyframes brillo { from { transform: translateX(0) skewX(-18deg); } to { transform: translateX(340%) skewX(-18deg); } }

.service-card,
.plan,
.founder,
.portal__window {
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

@media (hover: hover) {
  .service-card:hover { transform: translate3d(0, -4px, 0); border-color: var(--cyan-strong); box-shadow: var(--shadow-soft); }
  .plan:hover { transform: translate3d(0, -4px, 0); border-color: var(--cyan-strong); box-shadow: var(--shadow-soft); }
  .plan--featured:hover { border-color: var(--cyan); }
}

.faq__item { transition: border-color var(--transition-base), background var(--transition-base); }
.faq__item:hover { border-color: var(--cyan-strong); }

.route-tab, .segmented__button, .portal-tab, .service-card__cta { transition-timing-function: var(--ease-out); }

/* --- Adaptación a pantallas ---------- */

@media (min-width: 48rem) {
  .floating-whatsapp__label { display: inline; }
  .floating-whatsapp { padding: var(--space-3) var(--space-5); }
}

/* La nav de escritorio necesita unos 924px con todos sus elementos (enlaces,
   acceso de clientes, boton de WhatsApp y cambio de idioma). Entre 768 y 959px
   no cabia y la pagina se desbordaba en horizontal, asi que el menu compacto
   entra antes. El resto del diseno movil se mantiene en 47.9375rem para no
   forzar el diseno de telefono en una tablet. */
@media (max-width: 59.9375rem) {
  :root { --header-height: 4.25rem; }

  .header__toggle { display: grid; }

  .nav {
    position: fixed;
    inset: var(--header-height) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-6) var(--page-gutter);
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    background: var(--paper);
    border-bottom: 1px solid var(--line-light);
    box-shadow: var(--shadow-soft);
    display: none;
  }

  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .nav__link { display: block; padding: var(--space-3) 0; font-size: var(--text-lg); }
  .nav__link::after { inset: auto 0 0; }
  .button--nav { width: 100%; }
  .client-link { justify-content: center; padding: var(--space-3) var(--space-4); }
  /* El idioma se centra igual que el resto del menu compacto: alineado a la
     izquierda se leia como un elemento de otro grupo. */
  .lang-switch { display: block; padding-top: var(--space-2); text-align: center; }
}

@media (max-width: 64rem) {
  .hero__grid,
  .route,
  .audience,
  .product,
  .care,
  .digital,
  .contact,
  .portal,
  .institutional { grid-template-columns: 1fr; }

  .hero__visual { order: -1; }
  .product__media { order: -1; }
  .care__media { order: -1; }

  .steps { gap: var(--space-5); }
  .trust { padding-block: var(--space-10); }
}

@media (max-width: 47.9375rem) {
  :root { --header-height: 4rem; }

  /* La cabecera compacta ya se resuelve en el bloque de 59.9375rem; aqui solo
     se ajusta la altura en el movil mas estrecho. */
  .client-link { padding: var(--space-2) var(--space-3); }

  .hero { padding-block: var(--space-10) var(--space-8); }
  .section { padding-block: var(--space-16); }
  .product { padding: var(--space-6); }
  .route__panels { padding: var(--space-6); }
  .contact__form { padding: var(--space-6); }
  .footer__base { flex-direction: column; }

  .recurring { flex-direction: column; align-items: stretch; }
  .recurring .button { width: 100%; }
  .portal__panels { min-height: 11rem; padding: var(--space-5); }
  .portal__actions .button { width: 100%; }
  .founder { padding: var(--space-6); }

  /* En movil las cinco pestañas no caben en una fila: se vuelve rejilla para
     que se vean todas, en vez de un scroll horizontal sin pista visible. */
  .portal__tabs { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .portal-tab { padding: var(--space-3) var(--space-2); font-size: var(--text-xs); text-align: center; }

  /* En una columna el riel del proceso pasa a ser vertical: si no, la linea
     horizontal queda sobre un gap y no se lee como recorrido. */
  .steps__rail { inset: 0 auto 0 0; width: 2px; height: auto; }
  .steps__rail span { width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; }
  .js .step { border-top: 0; }
  .step { padding: 0 0 0 var(--space-5); }
  .step::before {
    content: "";
    position: absolute;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cyan);
  }
  .step { position: relative; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }

  /* Con movimiento reducido se corta de raiz: nada de barrido, nada de
     secuencia de entrada y nada de barras pulsando. El contenido se muestra
     tal cual esta en el HTML. */
  .js .hero__scan { display: none; }
  .js [data-hero],
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js .portal-panel { animation: none; }
  .js .portal-panel__rows span { animation: none; }
  .button::after { display: none; }
  .steps__rail { display: none; }
  .js .step { border-top: 2px solid oklch(.3 .04 240); }
  .header__progress { display: none; }
}

@media print {
  .header, .floating-whatsapp, .contact__form, .signal { display: none; }
  body { background: #fff; color: #000; }
}