:root {
  --ink: #08111f;
  --ink-soft: #152237;
  --paper: #f5f7f8;
  --white: #ffffff;
  --muted: #687385;
  --line: #dfe5e9;
  --blue: #3c63ff;
  --blue-2: #5b9bff;
  --cyan: #54d9e8;
  --gold: #e6bd55;
  --green: #58d3a3;
  --radius-sm: 12px;
  --radius: 22px;
  --radius-lg: 34px;
  --shadow: 0 24px 70px rgba(8, 17, 31, .12);
  --container: min(1180px, calc(100% - 40px));
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
::selection { background: rgba(43, 94, 255, .18); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; z-index: 1000; left: 16px; top: 12px; padding: 10px 14px;
  background: var(--white); border-radius: 8px; transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }
.container { width: var(--container); margin-inline: auto; }
.section { padding: 120px 0; }

/* ─── HEADER ─── */
.site-header {
  position: fixed; z-index: 100; inset: 0 0 auto; height: 76px;
  display: flex; align-items: center; transition: background .3s, box-shadow .3s, height .3s;
}
.site-header.is-scrolled {
  height: 66px; background: rgba(255,255,255,.92); backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(8,17,31,.08);
}
.nav-shell { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; width: 117px; flex: 0 0 auto; }
.brand img { width: 100%; height: auto; }
.main-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; }
.main-nav a { position: relative; }
.main-nav > a:not(.nav-cta):not(.lang-link)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px;
  background: var(--blue); transition: right .25s var(--ease);
}
.main-nav > a:hover::after { right: 0; }
.nav-cta { padding: 11px 18px; color: var(--white); background: var(--ink); border-radius: 999px; }
.nav-cta:hover { background: var(--blue); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 10px; }
.nav-toggle span:not(.sr-only) { display: block; height: 2px; margin: 5px 0; background: var(--ink); transition: .25s; }

/* ─── HERO ─── */
.hero {
  position: relative; min-height: 790px; overflow: hidden;
  padding: 150px 0 90px;
  background: linear-gradient(180deg, #fbfcfd 0%, #f2f5f7 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .24; pointer-events: none;
  background-image: linear-gradient(rgba(8,17,31,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(8,17,31,.07) 1px, transparent 1px);
  background-size: 52px 52px; mask-image: linear-gradient(to bottom, black, transparent 78%);
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .96fr 1.04fr; gap: 64px; align-items: center; }
.eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 22px;
  color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
}
.eyebrow span { width: 28px; height: 1px; background: currentColor; }
.eyebrow.light { color: var(--white); }
.hero h1, .section-head h2, .statement h2, .faq h2, .contact h2 {
  margin: 0; font-weight: 610; letter-spacing: -.052em; line-height: .99;
}
.hero h1 { max-width: 730px; font-size: clamp(48px, 5.4vw, 78px); }
.hero h1 em, .statement h2 em { color: var(--blue); font-style: normal; }
.hero-lead { max-width: 630px; margin: 28px 0 0; color: #465166; font-size: 19px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px;
  padding: 0 22px; border: 1px solid transparent; border-radius: 999px; font-weight: 750;
  transition: transform .25s var(--ease), background .25s, border-color .25s, color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: var(--white); background: var(--blue); box-shadow: 0 12px 30px rgba(43,94,255,.22); }
.btn-primary:hover { background: #2851cc; }
.btn-secondary { background: rgba(255,255,255,.74); border-color: rgba(8,17,31,.15); }
.btn-secondary:hover { background: var(--white); border-color: var(--ink); }
.btn-outline { background: transparent; border-color: rgba(255,255,255,.22); color: var(--white); font-size: 14px; }
.btn-outline:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }

.hero-stage { position: relative; min-width: 0; padding: 0 0 34px; margin-top: -30px; }
.machine-card {
  position: relative; z-index: 1; overflow: hidden;
  border: 1px solid rgba(8,17,31,.06); border-radius: 28px; background: #eaecf0;
  box-shadow: 0 34px 90px rgba(8,17,31,.12);
}
.machine-card img { width: 100%; aspect-ratio: auto; object-fit: contain; }
.machine-card::after { content: none; }
.hotspot {
  position: absolute; z-index: 4; width: 34px; height: 34px; border: 0; border-radius: 50%;
  color: var(--ink); background: var(--white); box-shadow: 0 0 0 7px rgba(255,255,255,.25), 0 4px 14px rgba(0,0,0,.25);
  cursor: pointer; transition: .25s var(--ease);
}
.hotspot:hover, .hotspot.is-active { color: var(--white); background: var(--blue); transform: scale(1.12); }
.hotspot span { font-size: 12px; font-weight: 800; }
.hotspot.h1 { left: 44%; top: 34%; }
.hotspot.h2 { left: 64%; top: 51%; }
.hotspot.h3 { left: 27%; top: 59%; }
.hotspot-card {
  position: absolute; z-index: 3; right: 18px; bottom: 18px; width: min(240px, 43%); padding: 16px;
  color: var(--white); background: rgba(8,17,31,.85); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.16); border-radius: 16px;
}
.hotspot-card small { display: block; color: var(--blue-2); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.hotspot-card strong { display: block; margin-top: 4px; font-size: 15px; }
.hotspot-card p { margin: 6px 0 0; color: rgba(255,255,255,.68); font-size: 11px; line-height: 1.45; }
.floating-note {
  position: absolute; z-index: 3; padding: 10px 14px; border: 1px solid rgba(8,17,31,.08); border-radius: 999px;
  background: rgba(255,255,255,.84); backdrop-filter: blur(12px); box-shadow: 0 10px 28px rgba(8,17,31,.12); font-size: 12px; font-weight: 700;
}
.note-top { right: -8px; top: 0; }
.note-bottom { left: -20px; bottom: 0; }
.pulse { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(88,211,163,.18); }

/* ─── STATEMENT ─── */
.statement { padding: 94px 0; color: var(--white); background: var(--ink); }
.statement-grid { display: grid; grid-template-columns: .3fr 1.7fr; gap: 50px; align-items: start; }
.statement-kicker { margin: 8px 0 0; color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.statement h2 { font-size: clamp(38px, 5.2vw, 68px); }
.statement h2 em { color: var(--cyan); }

/* ─── SECTION HEAD ─── */
.section-head { max-width: 790px; margin-bottom: 58px; }
.section-head h2 { font-size: clamp(40px, 5vw, 66px); }
.section-head > p:not(.eyebrow), .split-head > p { margin: 22px 0 0; color: var(--muted); font-size: 18px; line-height: 1.65; }
.split-head { max-width: none; display: grid; grid-template-columns: 1.12fr .72fr; gap: 85px; align-items: end; }
.split-head > p { margin: 0 0 3px; }

/* ─── PLATFORM (photo + text layout) ─── */
.platform { background: var(--white); padding-bottom: 0; }
.platform-showcase { overflow: hidden; }
.platform-top { display: grid; grid-template-columns: 1fr 1fr; }
.platform-photo-main { margin: 0; overflow: hidden; }
.platform-photo-main img { width: 100%; height: 100%; object-fit: cover; }
.platform-bottom { display: grid; grid-template-columns: 1fr 1fr; }
.platform-photo { margin: 0; overflow: hidden; }
.platform-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.platform-intro {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(30px, 5vw, 60px); background: var(--paper);
}
.platform-intro h2 { margin: 0; font-size: clamp(30px, 3.4vw, 46px); font-weight: 610; letter-spacing: -.048em; line-height: 1.05; }
.platform-lead { margin: 22px 0 0; color: var(--muted); font-size: 15px; line-height: 1.7; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.platform-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }
.platform-channels strong { display: block; font-size: 18px; letter-spacing: -.02em; }
.platform-channels p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* ─── PRODUCTS ─── */
.products { overflow: hidden; }
.product-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 7px; background: var(--paper); border-radius: 999px; }
.product-tab { padding: 15px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-weight: 800; transition: .25s; }
.product-tab.is-active { color: var(--white); background: var(--ink); box-shadow: 0 8px 22px rgba(8,17,31,.15); }
.product-panels { margin-top: 24px; }
.product-panel { display: grid; grid-template-columns: 1.04fr .96fr; min-height: 590px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.product-panel[hidden] { display: none; }
.product-visual { position: relative; min-height: 530px; background: #dfe4e8; }
.product-visual img { width: 100%; height: 100%; object-fit: cover; }
.product-visual-portrait img { object-position: center; }
.visual-label { position: absolute; left: 22px; top: 22px; padding: 9px 13px; color: var(--white); background: rgba(8,17,31,.76); backdrop-filter: blur(10px); border-radius: 999px; font-size: 11px; font-weight: 800; }
.product-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 76px); background: var(--white); }
.product-name { display: flex; gap: 3px; align-items: baseline; color: var(--blue); font-size: 14px; letter-spacing: -.02em; }
.product-name strong { font-size: 20px; }
.product-copy h3 { margin: 0 0 0; font-size: clamp(34px, 3.8vw, 53px); line-height: 1.02; letter-spacing: -.048em; }
.product-copy > p { margin: 20px 0 0; color: var(--muted); line-height: 1.65; }
.feature-list { display: grid; gap: 11px; margin: 28px 0; padding: 0; list-style: none; }
.feature-list li { position: relative; padding-left: 23px; font-size: 14px; }
.feature-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 9px; height: 1px; background: var(--blue); }
.ideal-for { padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.ideal-for span { margin-right: 8px; color: var(--ink); font-weight: 800; text-transform: uppercase; }

/* ─── PROCESS (statement style) ─── */
.process-statement { padding: 94px 0; color: var(--white); background: var(--ink); }
.process-statement-grid { display: grid; grid-template-columns: .3fr 1.7fr; gap: 50px; align-items: start; }
.process-statement .statement-kicker { margin: 8px 0 0; color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.process-statement h2 { margin: 0; font-size: clamp(38px, 5.2vw, 68px); font-weight: 610; letter-spacing: -.052em; line-height: .99; }
.process-statement-content > p { margin: 24px 0 0; color: rgba(255,255,255,.6); font-size: 18px; line-height: 1.65; max-width: 720px; }
.process-statement .process-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.process-statement .process-meta div { padding: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-sm); }
.process-statement .process-meta strong { display: block; font-size: 15px; color: var(--white); }
.process-statement .process-meta span { color: rgba(255,255,255,.5); font-size: 12px; }

/* ─── PRICING (dark cards) ─── */
.pricing { background: var(--white); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.price-card.dark {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius); background: #0c1424; color: var(--white);
}
.price-card-hero { position: relative; aspect-ratio: 16 / 20; overflow: hidden; background: #1a2438; }
.price-card-hero img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.price-badge {
  position: absolute; right: 16px; top: 16px; padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.7); background: rgba(8,17,31,.45); backdrop-filter: blur(8px);
}
.price-badge.accent { color: var(--white); border-color: var(--blue); background: rgba(43,94,255,.35); }
.price-card-body { display: flex; flex-direction: column; flex: 1; padding: 28px 28px 24px; }
.price-for { display: block; margin-bottom: 8px; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.price-card-body h3 { margin: 0; font-size: 26px; font-weight: 400; letter-spacing: -.02em; }
.price-card-body h3 strong { font-weight: 800; }
.price-card-body > p { margin: 14px 0 0; color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.65; }
.price-features { display: grid; gap: 10px; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,.1); list-style: none; }
.price-features li { position: relative; padding-left: 18px; font-size: 13px; color: rgba(255,255,255,.78); }
.price-features li::before { content: "•"; position: absolute; left: 0; color: var(--blue-2); font-weight: 800; }
.price-bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; padding-top: 22px; }
.price-amount small { display: block; color: rgba(255,255,255,.4); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.price-amount span { font-size: 32px; font-weight: 800; letter-spacing: -.04em; }
.price-amount em { font-style: normal; font-size: 20px; }
.price-card .text-link { border: 0; padding: 0; color: rgba(255,255,255,.6); font-size: 13px; font-weight: 800; }
.price-card .text-link:hover { color: var(--white); }
.price-card .text-link span { color: var(--blue-2); }

/* Featured (middle) pricing card */
.price-card.dark.featured { border: 1px solid var(--blue); }
.price-card.dark.featured .price-badge { border-color: var(--blue); }

/* Pricing custom bar */
.pricing-custom {
  display: flex; justify-content: space-between; align-items: center; gap: 30px;
  margin-top: 28px; padding: 28px 34px;
  background: var(--ink); border-radius: var(--radius); color: var(--white);
}
.pricing-custom-copy { flex: 1; }
.pricing-custom-copy strong { font-size: 17px; }
.custom-badge {
  display: inline-block; margin-left: 10px; padding: 4px 10px;
  background: var(--gold); color: var(--ink); border-radius: 999px;
  font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; vertical-align: middle;
}
.pricing-custom-copy p { margin: 8px 0 0; color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.6; }
.pricing-custom-title { margin: 12px 0 0; font-size: 20px; font-weight: 610; letter-spacing: -.03em; color: var(--white); }
.pricing-custom .btn-outline { flex-shrink: 0; }

/* ─── FAQ ─── */
.faq { background: var(--paper); }
.faq h2 { font-size: clamp(40px, 4.8vw, 64px); }
.faq-grid { display: grid; grid-template-columns: .74fr 1.26fr; gap: 100px; align-items: start; }
.faq-intro { position: sticky; top: 110px; }
.faq-intro > p:not(.eyebrow) { color: var(--muted); font-size: 17px; }
.accordion { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item button { width: 100%; display: flex; justify-content: space-between; gap: 20px; padding: 23px 0; text-align: left; border: 0; background: transparent; cursor: pointer; font-weight: 800; }
.faq-item i { position: relative; flex: 0 0 20px; height: 20px; }
.faq-item i::before, .faq-item i::after { content: ""; position: absolute; left: 4px; right: 4px; top: 9px; height: 1px; background: var(--ink); transition: .25s; }
.faq-item i::after { transform: rotate(90deg); }
.faq-item.is-open i::after { transform: rotate(0); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.faq-answer p { overflow: hidden; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-item.is-open .faq-answer p { padding-bottom: 24px; }

/* ─── CONTACT ─── */
.contact { padding: 120px 0; color: var(--white); background: var(--blue); }
.contact-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 90px; align-items: start; }
.contact h2 { max-width: 570px; font-size: clamp(40px, 4.8vw, 64px); }
.contact-copy > p:not(.eyebrow) { max-width: 560px; color: rgba(255,255,255,.68); font-size: 18px; }
.contact-direct { display: grid; gap: 7px; margin-top: 36px; }
.contact-direct a { font-size: 17px; font-weight: 800; }
.contact-direct span { color: rgba(255,255,255,.55); font-size: 12px; }
.contact-form { padding: 34px; color: var(--ink); background: var(--white); border-radius: var(--radius); box-shadow: 0 28px 80px rgba(0,0,0,.2); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.contact-form label { display: grid; gap: 8px; margin-bottom: 16px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.contact-form input, .contact-form textarea { width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: #fbfcfd; resize: vertical; text-transform: none; letter-spacing: 0; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(43,94,255,.11); }
.privacy-check { display: flex !important; grid-template-columns: auto 1fr; align-items: flex-start; gap: 10px !important; font-size: 11px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; }
.privacy-check input { width: 17px; height: 17px; padding: 0; }
.privacy-check a { text-decoration: underline; }
.btn-contact { width: 100%; border: 0; color: var(--white); background: var(--ink); cursor: pointer; }
.btn-contact:hover { background: var(--blue); }
.btn-contact:disabled { opacity: .55; cursor: wait; transform: none; }
.form-status { min-height: 20px; margin: 12px 0 0; font-size: 12px; }
.form-status.is-error { color: #ba3140; }
.form-status.is-success { color: #16845d; }

/* ─── MAIL OBFUSCATION ─── */
.mail-obfuscated { display: inline-block; }
.mail-img { height: 20px; width: auto; display: inline-block; vertical-align: middle; }
.mail-img-footer { height: 14px; opacity: .55; }
.mail-obfuscated:hover .mail-img-footer { opacity: 1; }

/* ─── FOOTER ─── */
.site-footer { padding: 70px 0 28px; color: var(--white); background: #050b14; }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, .7fr); gap: 45px; }
.footer-brand img { width: 116px; filter: invert(1); }
.footer-brand p { max-width: 280px; color: rgba(255,255,255,.5); font-size: 13px; }
.footer-col { display: grid; align-content: start; gap: 10px; font-size: 12px; }
.footer-col strong { margin-bottom: 6px; color: var(--blue-2); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.footer-col a, .footer-col span { color: rgba(255,255,255,.55); }
.footer-col a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; margin-top: 55px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.4); font-size: 11px; }


/* ─── LANGUAGE SWITCH ─── */
.lang-link {
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; transition: border-color .25s, color .25s;
}
.lang-link:hover { border-color: var(--ink); }

/* ─── GLOBAL POLISH ─── */
[id] { scroll-margin-top: 88px; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.swipe-hint { display: none; }
.mobile-cta { display: none; }

/* ─── REVEAL ─── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ─── RESPONSIVE ─── */
@media (max-width: 1050px) {
  .main-nav { gap: 18px; }
  .main-nav a { font-size: 12px; }
  .hero-grid { gap: 32px; }
  .hero h1 { font-size: clamp(45px, 6vw, 64px); }
  .platform-top { grid-template-columns: 1fr 1fr; }
  .faq-grid, .contact-grid { gap: 55px; }
}

/* ══════════ TABLET & MOBILE ══════════ */
@media (max-width: 860px) {
  :root { --container: min(100% - 30px, 720px); }
  .section { padding: 84px 0; }
  [id] { scroll-margin-top: 76px; }

  /* Header + menú a pantalla completa */
  .site-header { height: 64px; }
  .site-header.is-scrolled { height: 60px; }
  .brand { width: 106px; position: relative; z-index: 102; }
  .nav-toggle { display: block; z-index: 102; margin-right: -10px; }
  .main-nav {
    position: fixed; inset: 0; z-index: 101; display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start; gap: 6px;
    padding: 96px 34px 40px; background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    transform: translateX(100%); transition: transform .4s var(--ease); overflow-y: auto;
  }
  .main-nav::before {
    content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none;
    background-image: linear-gradient(rgba(8,17,31,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(8,17,31,.05) 1px, transparent 1px);
    background-size: 44px 44px; mask-image: linear-gradient(to bottom, black, transparent 85%);
  }
  .main-nav > a { position: relative; width: 100%; padding: 13px 0; font-size: 26px; letter-spacing: -.02em; border-bottom: 1px solid rgba(8,17,31,.07); }
  .main-nav > a:not(.nav-cta):not(.lang-link)::after { content: none; }
  .main-nav .lang-link { width: auto; margin-top: 22px; padding: 10px 18px; font-size: 12px; border: 1px solid rgba(8,17,31,.2); border-bottom-width: 1px; }
  .main-nav .nav-cta { width: 100%; margin-top: 10px; padding: 17px 22px; text-align: center; font-size: 16px; border-bottom: 0; border-radius: 999px; }
  .main-nav > a { opacity: 0; transform: translateY(16px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  body.nav-open .main-nav { transform: translateX(0); }
  body.nav-open .main-nav > a { opacity: 1; transform: translateY(0); }
  body.nav-open .main-nav > a:nth-child(1) { transition-delay: .06s; }
  body.nav-open .main-nav > a:nth-child(2) { transition-delay: .1s; }
  body.nav-open .main-nav > a:nth-child(3) { transition-delay: .14s; }
  body.nav-open .main-nav > a:nth-child(4) { transition-delay: .18s; }
  body.nav-open .main-nav > a:nth-child(5) { transition-delay: .22s; }
  body.nav-open .main-nav > a:nth-child(6) { transition-delay: .26s; }
  body.nav-open .main-nav > a:nth-child(7) { transition-delay: .3s; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Hero */
  .hero { min-height: auto; padding: 118px 0 70px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { max-width: 700px; }
  .hero-stage { margin-top: 0; padding-bottom: 0; }
  .machine-card { border-radius: 22px; box-shadow: 0 22px 60px rgba(8,17,31,.14); }

  /* Bloques apilados */
  .statement-grid, .split-head, .faq-grid, .contact-grid, .process-statement-grid { grid-template-columns: 1fr; gap: 38px; }
  .statement, .process-statement { padding: 68px 0; }
  .statement-grid, .process-statement-grid { gap: 16px; }
  .section-head { margin-bottom: 40px; }
  .split-head > p { margin: 0; }
  .faq-intro { position: static; }

  /* Plataforma */
  .platform-top { grid-template-columns: 1fr; }
  .platform-bottom { grid-template-columns: 1fr 1fr; gap: 0; }

  /* Producto */
  .product-panel { grid-template-columns: 1fr; min-height: 0; }
  .product-visual { min-height: 400px; }

  /* Precios: carrusel deslizable con snap */
  .pricing-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(400px, 84%);
    gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: calc(50vw - 50%);
    margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); padding-bottom: 10px;
    scrollbar-width: none;
  }
  .pricing-grid::-webkit-scrollbar { display: none; }
  .price-card.dark { scroll-snap-align: center; }
  .swipe-hint { display: block; margin: 4px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
  .pricing-custom { flex-direction: column; align-items: stretch; text-align: center; margin-top: 22px; }
  .pricing-custom .btn-outline { align-self: center; }

  /* Footer */
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ══════════ MÓVIL ══════════ */
@media (max-width: 580px) {
  :root { --container: min(100% - 26px, 520px); }
  .section { padding: 68px 0; }

  /* Hero */
  .hero { padding: 104px 0 60px; }
  .hero h1 { font-size: clamp(35px, 10.6vw, 52px); }
  .hero-lead { margin-top: 20px; font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; margin-top: 28px; }
  .btn { min-height: 54px; }
  .machine-card { border-radius: 18px; }
  .eyebrow { margin-bottom: 16px; }

  /* Titulares */
  .statement h2, .section-head h2, .faq h2, .contact h2, .process-statement h2 { font-size: clamp(31px, 9.6vw, 44px); }
  .section-head > p:not(.eyebrow), .split-head > p, .process-statement-content > p { font-size: 16px; }

  /* Plataforma */
  .platform-intro { padding: 28px 22px 32px; }
  .platform-channels { grid-template-columns: 1fr; gap: 16px; }
  .platform-bottom { grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 3px; }

  /* Pestañas de producto: scroll horizontal tipo segmented control */
  .product-tabs { display: flex; gap: 6px; padding: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .product-tabs::-webkit-scrollbar { display: none; }
  .product-tab { flex: 0 0 auto; padding: 12px 20px; font-size: 14px; white-space: nowrap; }
  .product-panel { border-radius: 22px; }
  .product-visual { min-height: 300px; }
  .product-copy { padding: 30px 22px 34px; }
  .product-copy h3 { font-size: clamp(28px, 8.4vw, 38px); }
  .feature-list { margin: 24px 0; }
  .visual-label { left: 14px; top: 14px; padding: 8px 12px; font-size: 10px; }

  /* Proceso */
  .process-statement .process-meta { grid-template-columns: 1fr; gap: 10px; margin-top: 30px; }

  /* Precios */
  .pricing-grid { grid-auto-columns: 86%; }
  .price-card-hero { aspect-ratio: 16 / 12; }
  .price-card-body { padding: 22px 22px 20px; }
  .price-amount span { font-size: 28px; }
  .pricing-custom { padding: 26px 20px; }
  .pricing-custom-title { font-size: 18px; }

  /* FAQ */
  .faq-item button { padding: 20px 0; font-size: 15px; }
  .faq-answer p { font-size: 14px; }

  /* Contacto: formulario cómodo, sin zoom en iOS */
  .contact { padding: 84px 0 96px; }
  .contact-direct { margin-top: 28px; }
  .contact-form { padding: 24px 18px; border-radius: 18px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form input, .contact-form textarea { padding: 15px 14px; font-size: 16px; border-radius: 12px; }
  .btn-contact { min-height: 56px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .site-footer { padding: 56px 0 24px; }
  .footer-bottom { flex-direction: column; gap: 8px; margin-top: 42px; }
}

/* ─── CTA FIJA EN MÓVIL ─── */
@media (max-width: 860px) {
  .mobile-cta {
    position: fixed; z-index: 99; left: 14px; right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px;
    color: var(--white); background: var(--ink); border-radius: 999px;
    font-weight: 800; font-size: 15px; letter-spacing: -.01em;
    box-shadow: 0 14px 40px rgba(8, 17, 31, .32);
    opacity: 0; transform: translateY(84px); pointer-events: none;
    transition: transform .45s var(--ease), opacity .45s var(--ease), background .25s;
  }
  .mobile-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .mobile-cta:active { background: var(--blue); }
  .mobile-cta span { color: var(--blue-2); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .main-nav > a { opacity: 1; transform: none; }
}

/* ══════════ DARK THEME · #141821 ══════════
   Base requested: RGB(20, 24, 33). Contrast-first palette for text,
   controls, cards and responsive navigation. */
:root {
  --bg: #141821;
  --surface: #1b2230;
  --surface-2: #202938;
  --text: #f5f7fb;
  --text-muted: #aab4c3;
  --line-dark: #364152;
  --accent: #3c63ff;
  --accent-hover: #5b9bff;
  --accent-ink: #ffffff;
  --brand-gradient: linear-gradient(90deg, #545cf0 0%, #0a7fd7 32%, #0a7fd7 56%, #00a1c8 100%);
  --ink: var(--text);
  --ink-soft: #d6dce6;
  --paper: var(--surface);
  --muted: var(--text-muted);
  --line: var(--line-dark);
  --blue: var(--accent);
  --blue-2: #5b9bff;
  --cyan: #00a1c8;
  --gold: #e6bd55;
  --green: #5fe0b0;
  --shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
}
::selection { background: rgba(60,99,255,.34); color: #fff; }
.skip-link { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-dark); }

/* Header / navigation */
.site-header { color: var(--text); }
.site-header.is-scrolled {
  background: rgba(20,24,33,.92);
  box-shadow: 0 1px 0 rgba(255,255,255,.09);
}
.brand img { filter: invert(1); }
.main-nav > a:not(.nav-cta):not(.lang-link)::after { background: var(--accent); }
.nav-cta {
  color: var(--accent-ink);
  background: var(--accent);
}
.nav-cta:hover { background: #2851cc; }
.nav-toggle span:not(.sr-only) { background: var(--text); }
.lang-link { border-color: var(--line-dark); }
.lang-link:hover { border-color: var(--accent); color: var(--accent-hover); }

/* Main backgrounds */
.hero,
.platform,
.products,
.pricing,
.faq,
.contact,
.statement,
.process-statement,
.site-footer {
  background: var(--bg);
}
.hero { background-image: none; }
.hero::before {
  opacity: .55;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
}

/* Typography */
.hero-lead,
.section-head > p:not(.eyebrow),
.split-head > p,
.platform-lead,
.platform-channels p,
.product-copy > p,
.ideal-for,
.faq-intro > p:not(.eyebrow),
.faq-answer p,
.swipe-hint {
  color: var(--text-muted);
}
.eyebrow,
.product-name { color: var(--accent); }
.eyebrow.light { color: var(--text); }
/* Selected headline emphasis uses the supplied blue→cyan gradient. */
.hero h1 em,
.statement h2 em {
  display: inline-block;
  font-style: normal;
  background-image: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@supports not (background-clip: text) {
  .hero h1 em,
  .statement h2 em {
    -webkit-text-fill-color: #3c63ff;
    color: #3c63ff;
    background: none;
  }
}

/* Buttons */
.btn-primary {
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.btn-primary:hover { background: #2851cc; }
.btn-secondary {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line-dark);
}
.btn-secondary:hover {
  color: #fff;
  background: var(--surface-2);
  border-color: var(--accent);
}
.btn-outline {
  color: var(--text);
  border-color: rgba(255,255,255,.28);
}
.btn-outline:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.55);
}

/* Hero image */
.machine-card {
  background: var(--surface);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 34px 90px rgba(0,0,0,.38);
}
.hotspot {
  color: var(--accent-ink);
  background: var(--text);
  box-shadow: 0 0 0 7px rgba(255,255,255,.16), 0 4px 14px rgba(0,0,0,.35);
}
.hotspot:hover, .hotspot.is-active { color: var(--accent-ink); background: var(--accent); }
.hotspot-card { background: rgba(20,24,33,.9); }
.floating-note {
  color: var(--text);
  background: rgba(27,34,48,.92);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 10px 28px rgba(0,0,0,.30);
}

/* Platform */
.platform-showcase {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.platform-intro { background: var(--surface); }
.platform-lead { border-color: var(--line-dark); }

/* Product tabs and panels */
.product-tabs {
  background: var(--surface);
  border: 1px solid var(--line-dark);
}
.product-tab { color: var(--text-muted); }
.product-tab:hover { color: var(--text); }
.product-tab.is-active {
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: none;
}
.product-panel {
  background: var(--surface);
  border-color: var(--line-dark);
}
.product-visual { background: var(--surface-2); }
.product-copy { background: var(--surface); }
.ideal-for { border-color: var(--line-dark); }
.ideal-for span { color: var(--text); }
.visual-label { background: rgba(20,24,33,.82); }

/* Statement/process blocks */
.statement,
.process-statement {
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.process-statement-content > p { color: var(--text-muted); }
.process-statement .process-meta div {
  background: var(--surface);
  border-color: var(--line-dark);
}
.process-statement .process-meta span { color: var(--text-muted); }

/* Pricing */
.price-card.dark {
  background: var(--surface);
  border: 1px solid var(--line-dark);
}
.price-card-hero { background: var(--surface-2); }
.price-card-body > p,
.price-card .text-link,
.pricing-custom-copy p { color: var(--text-muted); }
.price-features li { color: #dce2ec; }
.price-amount small { color: #8f9bad; }
.price-card.dark.featured { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(60,99,255,.18); }
.pricing-custom {
  background: var(--surface);
  border: 1px solid var(--line-dark);
}
.custom-badge { color: #171a20; }

/* FAQ */
.accordion,
.faq-item { border-color: var(--line-dark); }
.faq-item button { color: var(--text); }
.faq-item i::before,
.faq-item i::after { background: var(--text); }

/* Contact */
.contact {
  color: var(--text);
  border-top: 1px solid rgba(255,255,255,.07);
}
.contact .eyebrow { color: var(--cyan); }
.contact-copy > p:not(.eyebrow),
.contact-direct span { color: var(--text-muted); }
.contact-direct a:hover { color: var(--accent-hover); }
.contact-form {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-dark);
  box-shadow: 0 28px 80px rgba(0,0,0,.30);
}
.contact-form input,
.contact-form textarea {
  color: var(--text);
  background: #111722;
  border-color: var(--line-dark);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #7f8a9c; }
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(60,99,255,.18);
}
.privacy-check a { color: var(--accent-hover); }
.btn-contact {
  color: var(--accent-ink);
  background: var(--accent);
}
.btn-contact:hover { background: #2851cc; }
.form-status.is-error { color: #ff8b98; }
.form-status.is-success { color: #70e3b8; }

/* Footer */
.site-footer { border-top: 1px solid var(--line-dark); }
.footer-brand img { filter: invert(1); }
.footer-brand p,
.footer-col a,
.footer-col span { color: var(--text-muted); }
.footer-col strong { color: var(--accent-hover); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-color: var(--line-dark);
  color: #8f9bad;
}
.mail-img-footer { opacity: .72; }

/* Mobile navigation / sticky CTA */
@media (max-width: 860px) {
  .main-nav {
    background: rgba(20,24,33,.97);
    color: var(--text);
  }
  .main-nav::before {
    background-image:
      linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  }
  .main-nav > a { border-bottom-color: rgba(255,255,255,.09); }
  .main-nav .lang-link { border-color: var(--line-dark); }
  .mobile-cta {
    color: var(--accent-ink);
    background: var(--accent);
    box-shadow: 0 14px 40px rgba(0,0,0,.38);
  }
  .mobile-cta:active { background: #2851cc; }
  .mobile-cta span { color: var(--accent-ink); }
}


/* ══════════ REQUESTED VISUAL UPDATE · 2026-09 ══════════
   The first hero asset is intentionally isolated in a media wrapper so it
   can be replaced by a <video> later without changing the page structure. */
.hero {
  min-height: 0;
  padding: 96px 0 92px;
}
.hero-media {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(44px, 5vw, 68px);
  /* Exact background sampled from the supplied hero image: RGB(20, 24, 33). */
  background: #141821;
}
.hero-media img,
.hero-media video {
  display: block;
  width: 100%;
  height: auto;
}
.hero-grid {
  display: block;
}
.hero-copy {
  max-width: 940px;
}

/* High-contrast callout sections against the #141821 page background. */
.statement {
  background:
    radial-gradient(circle at 86% 18%, rgba(99,219,234,.12), transparent 34%),
    linear-gradient(135deg, #202d47 0%, #1b2539 58%, #192130 100%);
  border-top: 1px solid rgba(60,99,255,.28);
  border-bottom: 1px solid rgba(99,219,234,.18);
}
.process-statement {
  background:
    radial-gradient(circle at 12% 86%, rgba(60,99,255,.12), transparent 36%),
    linear-gradient(135deg, #1b263b 0%, #202a3d 52%, #192231 100%);
  border-top: 1px solid rgba(60,99,255,.22);
  border-bottom: 1px solid rgba(60,99,255,.18);
}
.site-footer {
  background: #0b1018;
  border-top: 1px solid rgba(60,99,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

@media (max-width: 860px) {
  .hero { padding: 78px 0 70px; }
  .hero-media { margin-bottom: 42px; }
}

@media (max-width: 560px) {
  .hero { padding: 72px 0 56px; }
  .hero-media {
    width: calc(100% - 20px);
    margin-bottom: 34px;
  }
}


/* ══════════ REQUESTED TWEAKS · 2026-09-02 ══════════
   1) Unify the three pricing badges/cards so the middle option is not visually selected.
   2) Lower desktop header navigation/buttons to align their text baseline with the logo baseline. */

/* Pricing badges: same size and same visual weight on the three cards */
.price-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  text-align: center;
}
.price-badge.accent {
  color: rgba(255,255,255,.7);
  border-color: rgba(255,255,255,.2);
  background: rgba(8,17,31,.45);
}
.price-card.dark.featured {
  border-color: var(--line-dark);
  box-shadow: none;
}
.price-card.dark.featured .price-badge {
  border-color: rgba(255,255,255,.2);
}

/* Desktop header: move the nav text/buttons slightly down to line up with the logo baseline */
@media (min-width: 861px) {
  .site-header .main-nav {
    position: relative;
    top: 4px;
  }
}

/* Keep unified badge width comfortable on small screens */
@media (max-width: 520px) {
  .price-badge {
    width: 118px;
  }
}


/* ══════════ REQUESTED REFINEMENTS · 2026-09-02 · v3 ══════════
   Final overrides for pricing badges, header vertical position and the two
   high-contrast statement sections. These rules intentionally live at the
   end of the stylesheet so they take precedence over earlier theme rules. */

/* 1) All three pricing badges use the exact visual treatment of the supplied
      FERIAS reference: blue translucent pill, blue edge and white type. */
.price-badge,
.price-badge.accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  padding: 6px 14px;
  color: #fff;
  border: 1px solid #3c63ff;
  border-radius: 999px;
  background: rgba(60, 99, 255, .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
}

/* The centre pricing card is deliberately NOT selected/highlighted. */
.price-card.dark.featured {
  border-color: var(--line-dark);
  box-shadow: none;
}
.price-card.dark.featured .price-badge {
  border-color: #3c63ff;
}

/* 2) HEADER VERTICAL POSITION — this is the rule to edit if you want to
      raise/lower the complete desktop nav (links, language and CTA button).
      Change 30px to the desired offset. */
@media (min-width: 861px) {
  .site-header .main-nav {
    position: relative;
    top: 30px;
  }
}

/* 3) White contrast sections: “No hacemos…” and “Una herramienta…”. */
.statement,
.process-statement {
  color: #141821;
  background: #fff;
  background-image: none;
  border-top: 1px solid #e2e6ec;
  border-bottom: 1px solid #e2e6ec;
}

.statement .statement-kicker,
.process-statement .statement-kicker {
  color: #3c63ff;
}

.statement h2,
.process-statement h2 {
  color: #141821;
}

/* The emphasis in “por qué es mejor” keeps the brand gradient on white. */
.statement h2 em {
  background-image: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.process-statement-content > p {
  color: #687385;
}

.process-statement .process-meta div {
  background: #f5f7f8;
  border-color: #dfe5e9;
}

.process-statement .process-meta strong {
  color: #141821;
}

.process-statement .process-meta span {
  color: #687385;
}


/* ══════════ HEADER REFINEMENTS · 2026-09-02 · v4 ══════════
   Desktop nav vertical offset: this is the single value to edit if the
   navigation links need to move up/down relative to the logo. */
@media (min-width: 861px) {
  .site-header .main-nav {
    position: relative;
    top: 15px;
  }
}

/* When the header becomes sticky/scrolled, extend its translucent background
   15px farther down and draw the separator at the new lower edge. This moves
   the white line down without changing the nav position or header alignment. */
.site-header.is-scrolled {
  box-shadow: none;
}
.site-header.is-scrolled::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 15px;
  pointer-events: none;
  background: rgba(20,24,33,.92);
  border-bottom: 1px solid rgba(255,255,255,.09);
}

/* EN/ES and demo links are now plain blue text links — no pill/button UI. */
.main-nav .lang-link,
.main-nav .nav-cta {
  color: var(--accent);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.main-nav .lang-link:hover,
.main-nav .nav-cta:hover {
  color: var(--accent-hover);
  background: transparent;
}

@media (min-width: 861px) {
  .main-nav .lang-link,
  .main-nav .nav-cta {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    text-align: left;
  }
}

/* Mobile keeps a comfortable tap area, but without visible button containers. */
@media (max-width: 860px) {
  .main-nav .lang-link,
  .main-nav .nav-cta {
    width: 100%;
    margin-top: 0;
    padding: 13px 0;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,.09);
    font-size: 26px;
    letter-spacing: -.02em;
  }
}


/* ══════════ COPY REFINEMENT · industrial positioning · v5 ══════════ */
.statement-content {
  min-width: 0;
}
.statement-content > p {
  max-width: 820px;
  margin: 30px 0 0;
  color: #687385;
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 1.65;
}
@media (max-width: 860px) {
  .statement-content > p {
    margin-top: 22px;
    font-size: 16px;
  }
}


/* ══════════ HEADER + COPY REFINEMENTS · 2026-09-02 · v8 ══════════ */

/* Brand lock-up — proportions taken from the supplied reference:
   logo + thin vertical rule + two-line descriptor. */
@media (min-width: 861px) {
  .site-header .brand-lockup {
    width: auto;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .site-header .brand-lockup .brand-mark {
    display: block;
    width: 117px;
    height: auto;
    flex: 0 0 117px;
  }
  .site-header .brand-lockup .brand-divider {
    display: block;
    width: 1px;
    height: 29px;
    margin-left: 5px;
    margin-right: 6px;
    flex: 0 0 1px;
    background: rgba(255,255,255,.96);
  }
  .site-header .brand-lockup .brand-tagline {
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.018em;
  }
}

/* The 15px extension under the scrolled header now uses the same blur as the
   main header. A 1px overlap avoids the visible change of blur at the seam. */
.site-header.is-scrolled::after {
  top: calc(100% - 1px);
  height: 16px;
  background: rgba(20,24,33,.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.09);
}

/* Patent-context note under the engineering paragraph. */
.statement-content > p.statement-note {
  max-width: 820px;
  margin-top: 12px;
  color: #8b95a4;
  font-size: 12px;
  line-height: 1.55;
}

/* Mobile keeps the compact logo so the lock-up does not collide with the menu. */
@media (max-width: 860px) {
  .site-header .brand-lockup {
    width: 106px;
  }
  .site-header .brand-lockup .brand-mark {
    width: 106px;
    height: auto;
  }
  .site-header .brand-lockup .brand-divider,
  .site-header .brand-lockup .brand-tagline {
    display: none;
  }
}

/* ══════════ BRAND LOCK-UP ALIGNMENT · 2026-09-02 · v9 ══════════
   Reference match: logo, separator and descriptor are baseline-aligned.
   This deliberately replaces the previous vertical centering: the vertical
   rule ends on the logo baseline and the second descriptor line uses that
   same baseline, matching the supplied composition. */
@media (min-width: 861px) {
  .site-header .brand-lockup {
    align-items: baseline;
  }
}

/* ══════════ BRAND LOCK-UP GEOMETRY · 2026-09-02 · v10 ══════════
   Rebuilt from the supplied reference. The three elements share the SAME
   bottom edge; the separator starts lower than the logo, and the descriptor
   sits immediately to its right. Values are proportional to the reference
   screenshot rather than vertically centering/baseline-aligning the pieces. */
@media (min-width: 861px) {
  .site-header .brand-lockup {
    width: auto;
    display: inline-flex;
    align-items: flex-end;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .site-header .brand-lockup .brand-mark {
    display: block;
    width: 167px;
    height: auto;
    flex: 0 0 167px;
  }

  .site-header .brand-lockup .brand-divider {
    display: block;
    width: 1px;
    height: 41px;
    margin: 0 8px 0 10px;
    flex: 0 0 1px;
    background: rgba(255,255,255,.96);
  }

  .site-header .brand-lockup .brand-tagline {
    display: block;
    margin: 0;
    padding: 0 0 1px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.018em;
  }
}


/* ══════════ FOOTER BRAND LOCK-UP · 2026-09-02 · v11 ══════════
   Same logo + divider + two-line descriptor geometry used in the desktop header. */
.footer-brand-lockup {
  width: auto;
  display: inline-flex;
  align-items: flex-end;
  flex: 0 0 auto;
  white-space: nowrap;
}

.footer-brand-lockup .footer-brand-mark {
  display: block;
  width: 167px;
  height: auto;
  flex: 0 0 167px;
  filter: invert(1);
}

.footer-brand-lockup .footer-brand-divider {
  display: block;
  width: 1px;
  height: 41px;
  margin: 0 8px 0 10px;
  flex: 0 0 1px;
  background: rgba(255,255,255,.96);
}

.footer-brand-lockup .footer-brand-tagline {
  display: block;
  margin: 0;
  padding: 0 0 1px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.018em;
}

@media (max-width: 580px) {
  .footer-brand-lockup .footer-brand-mark {
    width: 132px;
    flex-basis: 132px;
  }
  .footer-brand-lockup .footer-brand-divider {
    height: 32px;
    margin-left: 8px;
    margin-right: 7px;
  }
  .footer-brand-lockup .footer-brand-tagline {
    font-size: 12.5px;
  }
}


/* ══════════ BRAND LOCK-UP SCALE + TAGLINE OFFSET · 2026-09-02 · v12 ══════════
   Requested: reduce the complete logo + divider + descriptor lock-up by 20%.
   The descriptor is moved 2px lower independently from the flex-end alignment. */
@media (min-width: 861px) {
  .site-header .brand-lockup .brand-mark {
    width: 134px;
    flex-basis: 134px;
  }

  .site-header .brand-lockup .brand-divider {
    height: 33px;
    margin: 0 6px 0 8px;
  }

  .site-header .brand-lockup .brand-tagline {
    margin: 0;
    padding: 0;
    font-size: 12.8px;
    line-height: 1.02;
    transform: translateY(2px);
  }
}

/* Footer uses the same 20%-smaller lock-up and the same 2px text offset. */
.footer-brand-lockup .footer-brand-mark {
  width: 134px;
  flex-basis: 134px;
}

.footer-brand-lockup .footer-brand-divider {
  height: 33px;
  margin: 0 6px 0 8px;
}

.footer-brand-lockup .footer-brand-tagline {
  margin: 0;
  padding: 0;
  font-size: 12.8px;
  line-height: 1.02;
  transform: translateY(2px);
}

@media (max-width: 580px) {
  .footer-brand-lockup .footer-brand-mark {
    width: 106px;
    flex-basis: 106px;
  }
  .footer-brand-lockup .footer-brand-divider {
    height: 26px;
    margin-left: 6px;
    margin-right: 6px;
  }
  .footer-brand-lockup .footer-brand-tagline {
    font-size: 10px;
    transform: translateY(2px);
  }
}

/* ══════════ HEADER SINGLE BLUR + LARGE TEXT SAFETY · 2026-09-02 · v13 ══════════
   The scrolled header uses ONE continuous blurred layer, including the extra
   15px requested below the original header. This removes the visible seam /
   second dark strip created by stacking a separate blurred ::after element. */
.site-header.is-scrolled {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.site-header.is-scrolled::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 15px);
  pointer-events: none;
  background: rgba(20,24,33,.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.site-header.is-scrolled::after {
  content: none !important;
  display: none !important;
}
.site-header .nav-shell {
  position: relative;
  z-index: 1;
}

/* Give large display type a little more vertical room. This avoids glyphs
   with ascenders/descenders (for example j and q) looking cropped. */
.statement h2 {
  line-height: 1.045;
}
.statement h2 em {
  padding-top: .025em;
  padding-bottom: .105em;
  margin-top: -.025em;
  margin-bottom: -.105em;
}

/* Anchor jumps should leave the content below the complete sticky header. */
html {
  scroll-padding-top: 96px;
}
section[id] {
  scroll-margin-top: 96px;
}


/* ══════════ HEADER / ORDER / ANCHOR REFINEMENTS · v15 ══════════
   Keep the fixed header completely stationary when the scrolled state toggles.
   Earlier rules reduced its height from 76px to 66px (and 64px to 60px on
   mobile), which made the whole header jump upward. */
@media (min-width: 861px) {
  .site-header,
  .site-header.is-scrolled {
    height: 76px;
  }
  .site-header {
    transition: background .3s, box-shadow .3s;
  }
}

@media (max-width: 860px) {
  .site-header,
  .site-header.is-scrolled {
    height: 64px;
  }
}

/* Pricing badges were intentionally removed from the markup in v15. */

/* ══════════ DESKTOP TOP-NAV ANCHOR POSITION · v18 ══════════
   When a section is opened from the upper desktop navigation, move its
   landing position about 50px higher than the previous 96px anchor offset.
   Change 46px below if you want to fine-tune this later. */
@media (min-width: 861px) {
  #plataforma,
  #configuraciones,
  #diferencia,
  #proceso,
  #precios {
    scroll-margin-top: -46px;
  }
}