/* Davar Labs — editorial monochrome.
   Black and white, Poppins in three weights, huge uppercase headlines with tight tracking,
   rotated section labels on the left edge and a dot progress rail on the right.
   Uppercase is reserved for display type; body copy stays sentence case for readability. */

/* Self-hosted fonts (Fontsource 5.3.0, OFL), so no visitor's IP goes to Google. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-ext-300-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-300-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/libre-baskerville-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/libre-baskerville-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --bg: #ffffff;
  --bg-soft: #f4f4f2;
  --ink: #0a0a0a;
  --ink-2: #555555;      /* body on white: 7.4:1 */
  --muted: #6b6b6b;      /* captions on white: 5.3:1 */
  --line: #e4e4e1;
  --dark: #0a0a0a;
  --on-dark: #ffffff;
  --on-dark-2: #b9b9b9;  /* body on black: 10:1 */
  --focus: #2f6bff;
  --live: #22c55e;       /* green means one thing only: an agent that is live */

  --f: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Libre Baskerville", Georgia, serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --maxw: 1180px;
  --gut: clamp(20px, 6vw, 96px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* component display rules must never override the hidden attribute */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink-2); font-family: var(--f); font-size: 16px; line-height: 1.7;
  letter-spacing: .01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 600; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; font-weight: 600; }
.skip:focus { top: 12px; }

/* ---------- Type ---------- */
.display { font-size: clamp(40px, 6.4vw, 84px); line-height: .98; letter-spacing: -0.05em; text-transform: uppercase; max-width: 13ch; }
.title { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.05; letter-spacing: -0.035em; text-transform: uppercase; max-width: 20ch; margin-bottom: 18px; }
.eyebrow { font-size: 13px; font-weight: 400; letter-spacing: .14em; color: var(--muted); margin-bottom: 22px; }
.eyebrow::after { content: " …"; }
.sub, .body { font-size: 17px; max-width: 60ch; }
.sub { margin-bottom: clamp(36px, 5vw, 56px); }
.body + .body { margin-top: 14px; }
.muted { color: var(--muted); }
.rule { display: block; width: 100px; height: 3px; background: currentColor; margin: 34px 0; }

/* Rotated label on the left edge of each section (decorative) */
.side { position: absolute; left: clamp(14px, 2.2vw, 34px); top: clamp(96px, 12vw, 140px); margin: 0;
  writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .side { display: none; } }

/* ---------- Header ---------- */
.top { position: fixed; inset: 0 0 auto 0; z-index: 40; height: 72px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-inline: clamp(16px, 3vw, 40px); color: var(--on-dark); transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.top.solid { background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 1px 0 var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.logo { display: inline-flex; align-items: center; gap: 10px; line-height: 1; color: inherit; }
.logo-mark { width: 34px; height: 34px; flex: none; }
.logo-text { display: inline-grid; }
.logo-word { font-weight: 600; font-size: 24px; letter-spacing: -0.05em; text-transform: uppercase; }
.logo-sub { justify-self: end; font-family: var(--f-serif); font-style: italic; font-size: 12px; letter-spacing: .04em; margin-top: 2px; }
.menu { display: flex; gap: clamp(16px, 2.4vw, 34px); }
.menu a { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .85; padding: 8px 0; border-bottom: 2px solid transparent; transition: opacity .2s, border-color .2s; }
.menu a:hover, .menu a.on { opacity: 1; border-color: currentColor; }
@media (max-width: 1020px) { .menu { display: none; } }
.top-end { display: flex; align-items: center; gap: 12px; }
/* Language selector: trigger shows the current language, the panel lists all three by name */
.lang { position: relative; }
.lang-trigger { appearance: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px 0 11px; cursor: pointer;
  background: transparent; color: inherit; border: 1px solid currentColor; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.lang-trigger:hover { background: rgba(127,127,127,.12); }
.lang-globe { width: 15px; height: 15px; }
.lang-chev { width: 11px; height: 11px; transition: transform .2s var(--ease); }
.lang-trigger[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }
.lang-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; margin: 0; padding: 6px; list-style: none; z-index: 60;
  background: #fff; color: var(--ink); border: 1px solid var(--ink); box-shadow: 0 14px 34px -14px rgba(0,0,0,.35); }
.lang-list[hidden] { display: none; }
.lang-list button { appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px;
  padding: 0 12px; cursor: pointer; background: transparent; border: 0; color: var(--ink); font: inherit; font-size: 14px; text-align: left; }
.lang-list button:hover, .lang-list button:focus-visible { background: var(--bg-soft); outline: none; }
.lang-short { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--muted); }
.lang-list button[aria-pressed="true"] { font-weight: 600; }
.lang-list button[aria-pressed="true"] .lang-short { color: var(--ink); }
.lang-list button[aria-pressed="true"] .lang-short::before { content: "✓ "; }
@media (max-width: 560px) { .top .btn-sm { display: none; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border: 2px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 11px; }
.btn-solid { background: var(--ink); color: #fff; }
.btn-solid:hover { background: #fff; color: var(--ink); border-color: var(--ink); }
.top:not(.solid) .btn-solid { background: #fff; color: var(--ink); }
.top:not(.solid) .btn-solid:hover { background: transparent; color: #fff; border-color: #fff; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: transparent; color: #fff; border-color: #fff; }
.btn-line { color: #fff; border-color: rgba(255,255,255,.5); }
.btn-line:hover { border-color: #fff; }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn .wa { flex: none; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(32px, 4vw, 44px); }

/* ---------- Dot rail ---------- */
.dots { position: fixed; right: clamp(10px, 1.6vw, 26px); top: 50%; transform: translateY(-50%); z-index: 30; display: grid; gap: 2px;
  color: #fff; mix-blend-mode: difference; }
.dots a { width: 22px; height: 22px; display: grid; place-items: center; }
.dots a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; transition: transform .2s, opacity .2s; }
.dots a.on::before { opacity: 1; transform: scale(1.5); }
.dots a:hover::before { opacity: .8; }
@media (max-width: 900px) { .dots { display: none; } }

/* ---------- Sections ---------- */
section { position: relative; }
.sec { padding-block: clamp(80px, 11vw, 150px); }
.sec-soft { background: var(--bg-soft); }
.dark { background: var(--dark); color: var(--on-dark-2); }
.dark h1, .dark h2, .dark h3 { color: var(--on-dark); }
.dark .eyebrow, .dark .side, .dark .muted { color: #9a9a9a; }
.dark .rule { color: #fff; }

/* Hero */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 120px 80px; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 85% 40%, rgba(255,255,255,.07), transparent 70%); }
.hero-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }
.hero .lede, .contact .lede { font-size: clamp(16px, 1.5vw, 18px); max-width: 52ch; color: var(--on-dark-2); }
.assure { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark); }
.assure li::before { content: "— "; color: #777; }
.foot-note { position: absolute; left: var(--gut); bottom: 24px; font-size: 12px; color: #777; }
@media (max-width: 980px) { .foot-note { display: none; } }

/* Credentials name wall */
.cred { border-bottom: 1px solid var(--line); }
.cred-row { display: flex; align-items: center; gap: 18px 40px; padding-block: 34px; }
.cred-label { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
/* The carousel: two identical sets side by side, slid left by one set's width, so the loop is seamless. */
.cred-marquee {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cred-track { display: flex; width: max-content; animation: cred-scroll 28s linear infinite; }
.cred-set { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
.cred-marquee:hover .cred-track,
.cred-marquee:focus-within .cred-track { animation-play-state: paused; }
.cw { white-space: nowrap; }
@keyframes cred-scroll { to { transform: translateX(-50%); } }
@media (max-width: 720px) {
  .cred-row { flex-direction: column; align-items: stretch; gap: 16px; padding-block: 26px; }
  .cred-set { gap: 44px; padding-right: 44px; }
  .cred-track { animation-duration: 22s; }
}
/* Without motion: one static row that wraps, and no duplicate. */
@media (prefers-reduced-motion: reduce) {
  .cred-track { animation: none; width: auto; }
  .cred-marquee { -webkit-mask-image: none; mask-image: none; }
  .cred-set { flex-wrap: wrap; gap: 18px 36px; padding-right: 0; }
  .cred-set[aria-hidden="true"] { display: none; }
}
.cw { color: var(--ink); opacity: .55; transition: opacity .2s; line-height: 1; }
.cw:hover { opacity: 1; }
.cw-siemens { font-weight: 600; font-size: 22px; letter-spacing: .02em; }
.cw-tp { font-weight: 300; font-size: 19px; letter-spacing: -0.01em; }
.cw-ardan { font-weight: 600; font-size: 18px; letter-spacing: .18em; text-transform: uppercase; }
.cw-frizata { font-family: var(--f-serif); font-style: italic; font-size: 22px; }
.cw-beast { font-weight: 600; font-size: 20px; letter-spacing: -0.04em; text-transform: uppercase; }

/* Old way vs new */
.vs { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); }
@media (max-width: 760px) { .vs { grid-template-columns: 1fr; } }
.vs-col { padding: 30px 0; }
.vs-new { padding-left: clamp(0px, 4vw, 48px); }
@media (min-width: 761px) { .vs-new { border-left: 1px solid var(--line); } }
.vs-head { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 18px; }
.vs-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.vs-col li { padding-left: 30px; position: relative; font-size: 16px; }
.vs-old li { color: var(--muted); text-decoration: line-through; text-decoration-color: #c8c8c8; }
.vs-old li::before { content: "×"; position: absolute; left: 0; color: var(--muted); }
.vs-new li { color: var(--ink); font-weight: 400; }
.vs-new li::before { content: "→"; position: absolute; left: 0; font-weight: 600; }

/* Split header + giant numeral */
.split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: clamp(36px, 5vw, 64px); }
.stat { display: flex; align-items: flex-end; gap: 14px; color: var(--ink); }
.stat-num { font-size: clamp(76px, 10vw, 136px); font-weight: 600; line-height: .8; letter-spacing: -0.06em; }
.stat-label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; max-width: 15ch; line-height: 1.4; padding-bottom: 4px; }
.dark .stat { color: #fff; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--ink); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 28px clamp(0px, 2.4vw, 32px) 8px 0; }
@media (min-width: 861px) { .step + .step { padding-left: clamp(16px, 2.4vw, 32px); border-left: 1px solid #d9d9d5; } }
.step-n { display: block; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--muted); margin-bottom: 16px; }
.step h3, .stack h3, .cap h3 { font-size: 18px; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.3; margin-bottom: 10px; }
.step p, .stack p, .cap p { font-size: 15px; }

/* Value stack */
.stack { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--ink); max-width: 860px; }
.stack li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.stack-n { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--muted); padding-top: 3px; }
.stack .stack-g { background: var(--ink); color: var(--on-dark-2); padding: 26px 18px; margin-top: 12px; border: 0; }
.stack-g h3 { color: #fff; }
.stack-g .stack-n { color: #fff; font-size: 20px; padding-top: 0; }

/* Guarantee */
.guar { display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 7vw, 110px); align-items: center; }
@media (max-width: 860px) { .guar { grid-template-columns: 1fr; } }
.stat-xl .stat-num { font-size: clamp(96px, 15vw, 210px); }
.stat-xl { flex-direction: column; align-items: flex-start; gap: 18px; }

/* Founder */
.founder { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
@media (max-width: 900px) { .founder { grid-template-columns: 1fr; } .portrait { order: -1; } }
.punch { margin-top: 22px; font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.55; max-width: 60ch; }
.why { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--f-serif); font-style: italic; font-size: 15px; line-height: 1.8; color: var(--muted); max-width: 60ch; }
.portrait { position: relative; width: min(100%, 440px); justify-self: center; aspect-ratio: 1 / 1.08; }
.halftone { position: absolute; left: -8%; top: 22%; width: 62%; height: 70%;
  background-image: radial-gradient(#bdbdbd 1px, transparent 1.3px); background-size: 9px 9px; }
.avatar { position: absolute; right: 0; top: 0; width: 82%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #3a3a3a, #0a0a0a 70%); color: #fff; font-size: clamp(90px, 14vw, 150px); font-weight: 600; letter-spacing: -0.05em;
  filter: grayscale(1); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.portrait .stat { position: absolute; left: 6%; bottom: 7%; }
.portrait .stat-num { text-shadow: 4px 4px 0 #fff, -4px -4px 0 #fff, 4px -4px 0 #fff, -4px 4px 0 #fff; }
.founder-name { position: absolute; right: 0; bottom: -6px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }

/* Inline text link with an arrow (the home page's case block) */
.text-link { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.text-link .arr { display: inline-block; transition: transform .2s; }
.text-link:hover .arr { transform: translateX(3px); }
.case-follow { margin-top: 28px; }

/* Capabilities */
.caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--ink); }
@media (max-width: 900px) { .caps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .caps { grid-template-columns: 1fr; } }
.cap { padding: 26px 24px 10px 0; }
.caps-never h3::before { content: "× "; color: var(--muted); }
@media (min-width: 901px) { .caps-never { grid-template-columns: repeat(3, 1fr); } }

/* FAQ */
.faq { border-top: 2px solid var(--ink); max-width: 860px; }
.faq details { border-bottom: 1px solid #d9d9d5; }
.faq summary { cursor: pointer; list-style: none; padding: 22px 48px 22px 0; position: relative; font-size: 16px; font-weight: 600; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 300; transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 22px; font-size: 15.5px; max-width: 70ch; }

/* Contact */
.contact { padding-block: clamp(100px, 14vw, 180px); }
.dark .final-eyebrow { color: #fff; }
.final-eyebrow::after { content: none; }

/* Footer */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 30px var(--gut);
  font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }
.foot .logo { color: var(--ink); }

/* Mobile sticky CTA */
.sticky-cta { display: none; }
@media (max-width: 720px) {
  .sticky-cta { display: block; position: fixed; inset: auto 0 0 0; z-index: 50; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .28s var(--ease); }
  .sticky-cta.on { transform: none; }
  .sticky-cta .btn { width: 100%; }
}

/* Ad-tracking consent bar (built by track.js). White with an ink border, so it reads the same over
   dark and light sections. On phones it rides above the sticky CTA (69px tall) while that is shown. */
.consent { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 55; max-width: 760px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 20px; background: #fff; color: var(--ink);
  border: 1px solid var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.18); font-size: 13px; line-height: 1.5; transition: bottom .28s var(--ease); }
.consent-text { flex: 1 1 300px; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 720px) { .sticky-cta.on ~ .consent { bottom: calc(81px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }
button.foot-link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }

/* One entrance for the hero; nothing else animates */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* The copy paints above the stage's oversized word where the two meet (home and /agentes) */
.hero-copy { position: relative; z-index: 1; }
.hero-copy > * { animation: rise .7s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: .06s; }
.hero-copy > :nth-child(3), .hero-copy > :nth-child(4) { animation-delay: .14s; }
.hero-copy > :nth-child(n+5) { animation-delay: .22s; }
@media (prefers-reduced-motion: reduce) { .hero-copy > * { animation: none; } }

/* Hero headline sized to its column so the longest word («AUTOMATIZAMOS.», about 8.9em at
   this weight) never runs into the example card; the column tops out near 490px */
.hero .display { font-size: clamp(34px, 3.7vw, 52px); max-width: none; }
.hero .rule { margin: 26px 0; }
.hero .cta-row { margin-top: 28px; }

/* Phones and tablets: headline, then the example card (.stage), then the pitch */
@media (max-width: 980px) {
  .hero-grid { gap: 0; }
  .hero-copy { display: contents; }
  .hero-copy .eyebrow { order: 1; }
  .hero-copy .display { order: 2; }
  .hero-copy .rule { order: 4; }
  .hero-copy .lede { order: 5; }
  .hero-copy .hero-cta { order: 6; }
  .hero-copy .assure { order: 7; }
}

/* The guarantee's links to each solution's own guarantee read as links (WCAG 1.4.1). */
.guar-more a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.guar-more a:hover { text-decoration-thickness: 2px; }

/* Home hub: the business-type selector sits in the hero, under the copy on wide screens. On phones
   it follows the CTA and the example card moves below it, so the first screen shows both. */
.hub-pick { margin-top: clamp(8px, 2vw, 24px); }
.hub-pick-title { font-size: clamp(18px, 2vw, 22px); letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.25; margin-bottom: 16px; }
.hub-pick-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hub-pick-card { display: flex; flex-direction: column; gap: 6px; padding: clamp(18px, 2.4vw, 28px); border: 1px solid #3a3a3a; background: #111;
  color: var(--on-dark-2); transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.hub-pick-kind { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #9a9a9a; }
.hub-pick-name { font-size: clamp(19px, 1.9vw, 24px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; text-transform: uppercase; color: var(--on-dark); }
.hub-pick-out { font-size: 15px; line-height: 1.55; flex: 1; }
.hub-pick-go { margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark); }
.hub-pick-go .arr, .hub-pick-other .arr { display: inline-block; transition: transform .2s; }
.hub-pick-card:hover, .hub-pick-card:focus-visible { background: #fff; border-color: #fff; color: var(--ink-2); }
.hub-pick-card:hover .hub-pick-name, .hub-pick-card:hover .hub-pick-go, .hub-pick-card:focus-visible .hub-pick-name, .hub-pick-card:focus-visible .hub-pick-go { color: var(--ink); }
.hub-pick-card:hover .hub-pick-kind, .hub-pick-card:focus-visible .hub-pick-kind { color: var(--muted); }
.hub-pick-card:hover .arr, .hub-pick-other:hover .arr { transform: translateX(3px); }
.hub-pick-other { display: inline-block; margin-top: 16px; font-size: 14px; color: var(--on-dark-2); text-decoration: underline; text-underline-offset: 4px; }
.hub-pick-other:hover { color: #fff; }
@media (min-width: 981px) {
  .hub-hero .hero-copy { grid-row: 1; grid-column: 1; }
  .hub-hero .stage { grid-row: 1; grid-column: 2; }
  .hub-hero .hub-pick { grid-row: 2; grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .hub-hero { padding-top: 96px; }
  .hub-hero .hub-pick { order: 8; margin-top: 36px; }
  .hub-hero .stage { order: 9; margin-top: 40px; }
}
@media (max-width: 640px) {
  .hub-pick-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hub-pick-card, .hub-pick-go .arr, .hub-pick-other .arr { transition: none; } }

/* ---------- Contact + project brief ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
@media (max-width: 980px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact .display { font-size: clamp(36px, 4.4vw, 62px); max-width: 12ch; }
.contact-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; color: var(--on-dark); font-size: 15px; }
.contact-points li::before { content: "→ "; color: #777; }
.contact-alt { margin-top: 34px; font-size: 13px; letter-spacing: .08em; color: #9a9a9a; }

.brief { background: #fff; color: var(--ink-2); padding: clamp(22px, 3.4vw, 40px); scroll-margin-top: 90px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.brief-steps { list-style: none; padding: 0; margin: 0 0 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.brief-steps li { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 3px solid var(--line); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: border-color .2s, color .2s; }
.brief-steps li span { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid currentColor; font-size: 10px; flex: none; }
.brief-steps li.on { border-color: var(--ink); color: var(--ink); }
.brief-steps b { font-weight: 600; }
@media (max-width: 480px) { .brief-steps b { display: none; } }
.brief-progress { font-size: 12px; color: var(--muted); margin-bottom: 18px; }

.brief-step { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 16px; }
.step-title { padding: 0; margin-bottom: 4px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; letter-spacing: -0.03em; text-transform: uppercase; color: var(--ink); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.field em, .group em { font-style: normal; font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select { width: 100%; min-height: 46px; padding: 11px 13px; font: inherit; font-size: 15px; font-weight: 400; color: var(--ink);
  background: #fff; border: 1px solid #cfcfca; border-radius: 0; transition: border-color .15s, box-shadow .15s; }
.field textarea { resize: vertical; min-height: 104px; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: #9a9a9a; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.field.bad input, .field.bad textarea { border-color: #c62828; box-shadow: 0 0 0 1px #c62828; }

.group { border: 0; padding: 0; margin: 0; min-width: 0; }
.group legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid #cfcfca; font-size: 14px; color: var(--ink);
  transition: background .15s, color .15s, border-color .15s; }
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.group.bad .chip span { border-color: #c62828; }
.hint { margin-top: 8px; font-size: 12.5px; color: var(--muted); }

.brief-error { margin-top: 18px; padding: 10px 12px; font-size: 14px; color: #8e1b1b; background: #fdecec; border-left: 3px solid #c62828; }
.brief-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.brief-nav .js-next, .brief-nav .js-send { margin-left: auto; }
.btn-ghost-dark { background: transparent; color: var(--ink); border-color: #cfcfca; }
.btn-ghost-dark:hover { border-color: var(--ink); }
.js-send[disabled] { opacity: .6; cursor: progress; }

.brief-done { text-align: center; padding: 30px 0 10px; outline: none; }
.done-mark { width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center; border: 2px solid var(--ink); font-size: 28px; color: var(--ink); }
.brief-done .js-done-t { font-size: 22px; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 10px; }
.brief-done p { max-width: 42ch; margin: 0 auto 22px; }
.brief-done .btn + .btn { margin-left: 8px; }
/* After the message: the demo (qualified) or free resources (under the bar), left-aligned under a rule */
.done-next { text-align: left; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.done-next h3 { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.brief-done .done-next p { max-width: 60ch; margin: 0 0 16px; }
.done-next .btn { margin-top: 18px; }
.brief-done .done-next .try-note { margin-top: 14px; }
.done-list { margin: 0 0 6px; padding-left: 1.3em; display: grid; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.done-list li::marker { font-weight: 600; color: var(--ink); }
.done-next .text-link { margin-top: 18px; }
@media (max-width: 480px) { .done-next .btn { width: 100%; } }

/* Diagnosis page (/diagnostico, /<landing>/diagnostico): the brief is the whole page, under the fixed header */
.diag-page .contact { padding-block: clamp(110px, 12vw, 150px) clamp(64px, 8vw, 110px); min-height: 100vh; }
.contact-mail { margin-top: 12px; font-size: 15px; }
.contact-mail a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.5); }
.contact-mail a:hover { border-color: #fff; }

/* Call picker: shown after the brief, in the same card */
.brief h2, .brief h3 { color: var(--ink); } /* the card is white inside the dark contact section */
.book { outline: none; }
.book-title { font-size: 22px; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 6px; }
.book-sub { font-size: 13.5px; color: var(--muted); margin-bottom: 22px; }
.book-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; scrollbar-width: thin; }
.book-day { flex: none; width: 68px; display: grid; justify-items: center; gap: 2px; padding: 10px 0 9px; cursor: pointer; font: inherit;
  background: #fff; color: var(--ink); border: 1px solid #cfcfca; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.book-day span { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.book-day b { font-size: 22px; font-weight: 600; line-height: 1.1; }
.book-day:hover, .book-time:hover { border-color: var(--ink); }
.book-day[aria-pressed="true"], .book-time[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.book-day[aria-pressed="true"] span { color: #b9b9b9; }
.book-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.book-time { min-height: 42px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .04em; background: #fff; color: var(--ink);
  border: 1px solid #cfcfca; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.book-state { padding: 18px 0; font-size: 14px; color: var(--muted); }
.book-nav { display: flex; justify-content: flex-end; margin-top: 24px; }
.js-book[disabled] { opacity: .6; cursor: progress; }
.book-nofit { width: 100%; margin-top: 18px; padding: 12px 16px; text-align: center; line-height: 1.3; }
@media (max-width: 480px) { .book-nav .btn { width: 100%; } }

/* ---------- Cost guide (guia.html) ---------- */
.guide-page .guide-hero { padding-top: clamp(120px, 14vw, 170px); }
.guide-title { font-size: clamp(36px, 5.6vw, 76px); max-width: 16ch; }
.estimator { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: clamp(28px, 4vw, 48px); }
@media (max-width: 960px) { .estimator { grid-template-columns: 1fr; } }
.est-inputs { display: grid; gap: 36px; }
.est-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.est-group legend { padding: 0; margin-bottom: 16px; font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.est-group legend em { display: block; margin-top: 4px; font-style: normal; font-weight: 400; text-transform: none; letter-spacing: .01em; font-size: 13px; color: var(--muted); }
.est-n { color: var(--muted); margin-right: 6px; }
.picks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 560px) { .picks { grid-template-columns: 1fr; } }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pick-box { display: grid; gap: 4px; height: 100%; padding: 16px 18px; border: 1px solid #cfcfca; background: #fff; transition: border-color .15s; }
.pick-box b { font-size: 15px; font-weight: 600; color: var(--ink); }
.pick-box small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.pick:hover .pick-box { border-color: var(--ink); }
.pick input:checked + .pick-box { background: var(--ink); border-color: var(--ink); }
.pick input:checked + .pick-box b { color: #fff; }
.pick input:checked + .pick-box small { color: #bdbdbd; }
.pick input:focus-visible + .pick-box, .tick input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.ticks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (max-width: 560px) { .ticks { grid-template-columns: 1fr; } }
.tick { display: flex; cursor: pointer; }
.tick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tick span { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border: 1px solid #cfcfca; font-size: 14px; color: var(--ink); transition: border-color .15s; }
.tick span::before { content: ""; width: 18px; height: 18px; flex: none; border: 1.5px solid var(--ink); background: #fff center / 12px no-repeat; }
.tick:hover span { border-color: var(--ink); }
.tick input:checked + span { border-color: var(--ink); font-weight: 600; }
.tick input:checked + span::before { background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }

.est-result { position: sticky; top: 96px; background: var(--ink); color: var(--on-dark-2); padding: clamp(22px, 3vw, 34px); display: grid; gap: 14px; }
@media (max-width: 960px) { .est-result { position: static; } }
.est-label { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #9a9a9a; }
.est-empty { font-size: 16px; color: #fff; }
.est-figs { margin: 0; display: grid; gap: 16px; }
.est-figs div { border-top: 1px solid #2c2c2c; padding-top: 12px; }
.est-figs dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #9a9a9a; }
.est-figs dd { margin: 4px 0 0; color: #fff; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.fig-cost { font-size: clamp(26px, 3vw, 36px); }
.fig-time, .fig-month { font-size: 19px; }
.est-store, .est-note { font-size: 12.5px; line-height: 1.55; color: #9a9a9a; }
.est-mail { margin-top: 8px; padding-top: 18px; border-top: 1px solid #2c2c2c; display: grid; gap: 12px; }
.est-mail-t { color: #fff; font-weight: 600; font-size: 15px; }
.est-mail-p { font-size: 13px; margin-top: -6px; }
.est-mail .field { color: #fff; }
.est-mail .field input { background: #141414; border-color: #3a3a3a; color: #fff; }
.est-mail .field input:focus { border-color: #fff; box-shadow: 0 0 0 1px #fff; }
.est-mail .btn-solid { background: #fff; color: var(--ink); }
.est-mail .btn-solid:hover { background: transparent; color: #fff; border-color: #fff; }
.est-done { color: #fff; font-weight: 600; }

.tips { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--ink); margin-top: clamp(24px, 3vw, 40px); }
.tips-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .tips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tips, .tips-3 { grid-template-columns: 1fr; } }
.tip { padding: 26px 22px 8px 0; }
.tip-n { display: block; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--muted); margin-bottom: 14px; }
.tip h3 { font-size: 16px; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 8px; }
.tip p { font-size: 14.5px; }
.guide-cta .display { font-size: clamp(32px, 4.6vw, 62px); max-width: 18ch; }
.foot-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.menu a[aria-current="page"] { opacity: 1; border-color: currentColor; }

/* ---------- Plans (recurring upsell) ---------- */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 2px solid var(--ink); max-width: 1000px; }
@media (max-width: 820px) { .plans { grid-template-columns: 1fr; } }
.plan { display: flex; flex-direction: column; gap: 16px; padding: clamp(26px, 3.4vw, 40px); background: #fff; border: 1px solid #d9d9d5; border-top: 0; }
.plan h3 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.03em; text-transform: uppercase; }
.plan-for { font-size: 15px; }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding-block: 12px; border-block: 1px solid #e4e4e1; color: var(--ink); }
.plan-price b { font-size: clamp(30px, 3.6vw, 42px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.plan-per { font-size: 13px; color: var(--muted); }
.plan-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; flex: 1; align-content: start; }
.plan-list li { position: relative; padding-left: 24px; font-size: 15px; }
.plan-list li::before { content: "→"; position: absolute; left: 0; font-weight: 600; color: var(--ink); }
.plan-list .plan-inherit { padding-left: 0; font-weight: 600; color: var(--ink); }
.plan-list .plan-inherit::before { content: none; }
.plan .btn { align-self: flex-start; }
.btn-line-dark { color: var(--ink); border-color: var(--ink); }
.btn-line-dark:hover { background: var(--ink); color: #fff; }
.plan-top { background: var(--ink); color: var(--on-dark-2); border-color: var(--ink); }
.plan-top h3, .plan-top .plan-price, .plan-top .plan-list li::before, .plan-top .plan-inherit { color: #fff; }
.plan-top .plan-price { border-color: #2c2c2c; }
.plan-top .plan-per { color: #9a9a9a; }
.plan-tag { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: #fff; padding: 4px 10px; }
.plans-note { margin-top: 18px; font-size: 13px; color: var(--muted); max-width: 70ch; }

/* Marketing consent checkbox (forms) */
.optin { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.optin input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--ink); cursor: pointer; }
.est-mail .optin { color: #9a9a9a; }
.est-mail .optin input { accent-color: #fff; }

/* Legal pages (privacidad, terminos): Spanish and English on one page, plain reading column. */
.legal-nav { display: flex; gap: 20px; font-size: 14px; }
.legal-nav a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal { max-width: 760px; padding-block: 120px 80px; }
.legal article + article { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--line); }
.legal h1, .legal .legal-h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.15; margin-bottom: 28px; }
.legal h2, .legal h3 { font-size: 19px; margin: 40px 0 12px; }
.legal article > h2.legal-h1 { margin-top: 0; }
.legal p + p { margin-top: 14px; }
.legal ul { margin: 12px 0 0; padding-left: 20px; }
.legal li + li { margin-top: 8px; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal code { font-size: 14px; }
.legal-date { font-size: 13px; letter-spacing: .14em; color: var(--muted); margin-bottom: 22px; }

/* ---------- Automation landing (agentes.html); the hero stage below also styles the home page ---------- */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.link-quiet { align-self: center; font-size: 13px; letter-spacing: .04em; color: var(--on-dark-2); text-decoration: underline; text-underline-offset: 4px; }
.link-quiet:hover { color: #fff; }
/* "Automatizamos" is one long word: sized so it stays clear of the agent card */
.agents-page .hero .display { font-size: clamp(34px, 3.9vw, 52px); }
.agents-page .contact .display { font-size: clamp(34px, 3.8vw, 52px); }

/* Hero stage, shared by the home page and /agentes: an illustrative live card floats over an
   oversized word, for depth without colour */
.stage { position: relative; margin: 0; display: grid; place-items: center; padding-block: clamp(24px, 4vw, 56px);
  animation: rise .7s var(--ease) .18s both; }
.stage-word { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); pointer-events: none; user-select: none;
  font-size: clamp(88px, 13vw, 210px); font-weight: 600; line-height: 1; letter-spacing: -0.06em; text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.16); }
/* position: relative keeps the card above the absolutely placed word, also on phones where it isn't rotated */
.stage .live-card { position: relative; width: min(100%, 460px); transform: rotate(-1.2deg); }
.stage-note { margin-top: 16px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9a9a9a; }
.examples-note { margin-top: 22px; font-size: 13px; color: var(--muted); }

.live-card { background: #111; color: var(--on-dark-2); border: 1px solid #2a2a2a; text-align: left;
  box-shadow: 0 40px 80px -36px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.02) inset; }
.live-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #242424;
  font-size: 12px; letter-spacing: .04em; }
.live-host { color: #9a9a9a; font-family: var(--f-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-on { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; color: var(--live); }
.live-on::before, .live-on::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
/* The pulse is a ring scaling out from the dot: transform and opacity only, so it never repaints */
.live-on::after { position: absolute; left: 0; top: 50%; margin-top: -3.5px; animation: live-pulse 2s infinite; }
@keyframes live-pulse { from { transform: scale(1); opacity: .6; } 70%, to { transform: scale(3.2); opacity: 0; } }
.live-feed { list-style: none; margin: 0; padding: 14px 16px; display: grid; gap: 10px; }
.live-feed li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; font-size: 13.5px; line-height: 1.45; color: #d6d6d6; }
.live-feed time { font-family: var(--f-mono); font-size: 12px; color: #9a9a9a; padding-top: 1px; }
.live-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 12px 16px; border-top: 1px solid #242424; font-size: 12px; }
.live-foot span { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9a9a9a; }
.live-foot b { color: #fff; font-weight: 600; }
/* The hero's feed writes itself in, one line at a time */
.stage .live-feed li { animation: rise .5s var(--ease) both; }
.stage .live-feed li:nth-child(1) { animation-delay: .5s; }
.stage .live-feed li:nth-child(2) { animation-delay: .9s; }
.stage .live-feed li:nth-child(3) { animation-delay: 1.3s; }
.stage .live-feed li:nth-child(4) { animation-delay: 1.7s; }
.stage .live-feed li:nth-child(5) { animation-delay: 2.1s; }
@media (prefers-reduced-motion: reduce) { .stage .live-feed li, .stage, .live-on::after { animation: none; } }
@media (max-width: 980px) { .stage { order: 3; margin-top: 28px; } }
@media (max-width: 560px) { .stage .live-card { transform: none; } }

/* Agent tabs */
.agent-tabs { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--ink); margin-bottom: clamp(28px, 4vw, 44px); }
@media (max-width: 860px) { .agent-tabs { grid-template-columns: repeat(2, 1fr); column-gap: 16px; } } /* every tab stays in view */
.agent-tabs button { appearance: none; display: flex; align-items: baseline; gap: 10px; padding: 16px 16px 14px 0; cursor: pointer; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line); font: inherit; color: var(--muted); transition: color .2s var(--ease), border-color .2s var(--ease); }
.agent-tabs button span { font-size: 12px; font-weight: 600; letter-spacing: .14em; }
.agent-tabs button b { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.agent-tabs button:hover { color: var(--ink); }
/* inset shadow, not a thicker border, so selecting a tab never changes its height */
.agent-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.agent-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .agent-panel { grid-template-columns: 1fr; } }
.agent-panel h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 14px; }
.agent-panel h3 + p { font-size: 16px; max-width: 52ch; }
.check-list { margin-top: 22px; }
.check-list li { color: var(--ink); }
.check-list li::before { content: "✓"; }

/* Savings calculator: reuses the cost guide's estimator layout */
.range-field { display: grid; gap: 10px; }
.range-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14px; font-weight: 600; color: var(--ink); }
.range-top output { flex: none; font-size: 20px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.range-field input[type="range"] { width: 100%; margin: 0; height: 28px; accent-color: var(--ink); cursor: pointer; }
.roi .est-result .btn { justify-self: start; margin-top: 6px; }
.roi .est-figs dd { font-variant-numeric: tabular-nums; }

/* Comparison table: scrolls inside its own box on narrow screens, never the page */
/* position: relative contains the table's absolutely placed .vh labels, which would otherwise widen the page */
.cmp-wrap { position: relative; overflow-x: auto; border-top: 2px solid var(--ink); }
.cmp-wrap:focus-visible { outline-offset: 2px; }
.cmp { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14.5px; }
.cmp th, .cmp td { padding: 16px 14px; border-bottom: 1px solid #d9d9d5; text-align: left; vertical-align: top; }
.cmp thead th { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cmp tbody th { font-weight: 600; color: var(--ink); width: 28%; }
.cmp .cmp-us { background: var(--ink); color: #fff; font-weight: 600; }
.mk { font-size: 18px; font-weight: 600; line-height: 1; }
.mk-n, .mk-p { color: var(--muted); }

/* Teams offer (equipos.html) */
.teams-title { max-width: 18ch; }
.teams-chart { margin: clamp(24px, 3vw, 40px) 0 0; max-width: 1000px; }
.teams-chart img { display: block; width: 100%; height: auto; background: var(--dark); }
.teams-chart figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.teams-honest { margin-top: clamp(24px, 3vw, 36px); max-width: 70ch; font-size: 15px; color: var(--ink); border-left: 3px solid var(--ink); padding-left: 16px; }
.teams-steps { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .teams-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .teams-steps { grid-template-columns: 1fr; } }
.cmd { margin: 24px 0 10px; padding: 18px 20px; max-width: 760px; overflow-x: auto; background: var(--dark); color: #f2f2f2; font-size: 14px; line-height: 1.7; }
.teams-small { font-size: 13px; color: var(--muted); }
.teams-contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .teams-contact { grid-template-columns: 1fr; } }
/* The form is a .brief card: same booking and done blocks as the brief on the home page. */
.teams-fields { display: grid; gap: 14px; }
.teams-fields .btn { justify-self: start; }
.field.bad select { border-color: #c62828; box-shadow: 0 0 0 1px #c62828; }

/* ---------- Reviews teaser (home, #reviews): cards from reviews/review-card.css ---------- */
.rv-score { display: flex; align-items: flex-end; gap: 16px; color: #fff; }
.rv-avg { font-size: clamp(64px, 8vw, 112px); font-weight: 600; line-height: .8; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.rv-score-meta { display: grid; gap: 8px; padding-bottom: 4px; }
.rv-score-meta .rc-stars { --star: 18px; color: #fff; }
.rv-count { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9a9a9a; }
.rv-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: start; }
@media (max-width: 980px) { .rv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rv-list { grid-template-columns: minmax(0, 1fr); } }
.rv-list .rc--dark { --rc-line: #333; }
.rv-teaser .rc-name { color: var(--rc-ink); } /* over .dark h3, which would turn names white on white cards */
@media (hover: hover) { .rv-list .rc:hover { border-color: var(--rc-ink); transform: translateY(-4px); } }
.rv-teaser .text-link { color: #fff; }
.rv-all { margin-top: clamp(32px, 4vw, 48px); }
@media (prefers-reduced-motion: reduce) { .rv-list .rc:hover { transform: none; } }