/* =====================================================================
   Montek SiteCad · estilos del sitio · Dirección A «Plano de obra»
   La web se ve como el lienzo de la app: cuadrícula de 1 m, cotas en
   ámbar, selección en cian, esquinas cortadas como los botones.
   Letras (v13, guía de marca): Montserrat (títulos y rótulos), Lato
   (texto) e IBM Plex Mono (medidas). Licencia OFL, guardadas en el sitio.
   Los colores de la marca están en el bloque v13, al final del archivo.
   Para cambiar un color: cámbialo aquí arriba en las "variables".
   ===================================================================== */

@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"); }

/* ---------- Tema oscuro (el de la app; es el principal) ---------- */
:root {
  --bg: #0B1B2E;          /* barra / fondo */
  --bg-2: #0D1E31;        /* lienzo */
  --surface: #122640;     /* panel */
  --surface-2: #152A42;   /* chip */
  --line: #21405F;
  --grid-minor: rgba(45, 212, 245, .055);
  --grid-major: rgba(45, 212, 245, .10);
  --text: #EAF2F8;
  --muted: #9FB4C8;
  --faint: #7D97B0;
  --accent: #2DD4F5;
  --accent-ink: #0B1B2E;
  --accent-soft: rgba(45, 212, 245, .12);
  --amber: #F2B33D;
  --amber-soft: rgba(242, 179, 61, .13);
  --green: #7BD88F;
  --wall: #D5E1EC;
  --primary: #2DD4F5;     /* botón principal */
  --primary-ink: #0B1B2E;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -18px rgba(0, 0, 0, .55);
  --logo-dark: inline; --logo-light: none;
  color-scheme: dark;

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Plex Mono", "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --wrap: 76rem;
  --cut: 14px;
}

/* ---------- Tema claro (papel del lienzo y tinta azul noche) ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F7F5F0; --bg-2: #FBFAF6; --surface: #FFFFFF; --surface-2: #F3F1EC; --line: #E0DBD0;
    --grid-minor: rgba(20, 32, 46, .045); --grid-major: rgba(20, 32, 46, .085);
    --text: #14202E; --muted: #5A6878; --faint: #6B655E;
    --accent: #0C7591; --accent-ink: #FFFFFF; --accent-soft: rgba(14, 124, 153, .10);
    --amber: #9A5A00; --amber-soft: rgba(217, 142, 11, .13); --green: #087A4C; --wall: #14202E;
    --primary: #0B1B2E; --primary-ink: #FFFFFF;
    --shadow: 0 1px 2px rgba(11, 27, 46, .06), 0 18px 40px -20px rgba(11, 27, 46, .22);
    --logo-dark: none; --logo-light: inline;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F7F5F0; --bg-2: #FBFAF6; --surface: #FFFFFF; --surface-2: #F3F1EC; --line: #E0DBD0;
  --grid-minor: rgba(20, 32, 46, .045); --grid-major: rgba(20, 32, 46, .085);
  --text: #14202E; --muted: #5A6878; --faint: #6B655E;
  --accent: #0C7591; --accent-ink: #FFFFFF; --accent-soft: rgba(14, 124, 153, .10);
  --amber: #9A5A00; --amber-soft: rgba(217, 142, 11, .13); --green: #087A4C; --wall: #14202E;
  --primary: #0B1B2E; --primary-ink: #FFFFFF;
  --shadow: 0 1px 2px rgba(11, 27, 46, .06), 0 18px 40px -20px rgba(11, 27, 46, .22);
  --logo-dark: none; --logo-light: inline;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.62 var(--f-body); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.04; letter-spacing: -.015em; margin: 0; text-wrap: balance; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
.mono { font-family: var(--f-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 700px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 99; }
.skip:focus { left: 8px; }
.grid-bg { position: relative; isolation: isolate; }
.grid-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px),
                    linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
}

/* ---------- Cabecera ---------- */
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 14px; min-height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); margin-right: auto; }
.brand img { width: 40px; height: 40px; }
.brand .logo-d { display: var(--logo-dark); }
.brand .logo-l { display: var(--logo-light); }
.brand b { font: 700 1.18rem/1 var(--f-display); letter-spacing: .005em; }
.brand b span { color: var(--accent); font-weight: 600; }
.menu { display: none; gap: 2px; }
.menu a { color: var(--muted); text-decoration: none; font: 500 .93rem var(--f-body); padding: 8px 11px; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
@media (min-width: 1040px) { .menu { display: flex; } }
.tools { display: flex; align-items: center; gap: 6px; }
.icon-btn, .lang summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 500 .78rem/1 var(--f-mono); letter-spacing: .06em; color: var(--text);
  border: 1px solid var(--line); background: var(--surface); height: 38px; min-width: 38px; padding: 0 10px;
}
.lang summary::-webkit-details-marker, .navm summary::-webkit-details-marker { display: none; }
.icon-btn svg, .lang summary svg { width: 16px; height: 16px; }
.lang, .navm { position: relative; }
.pop { position: absolute; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; min-width: 190px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); z-index: 40; }
.pop a { display: block; padding: 9px 11px; color: var(--text); text-decoration: none; font-size: .94rem; }
.pop a:hover { background: var(--accent-soft); }
.pop a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.pop small { font: 500 .68rem var(--f-mono); color: var(--faint); letter-spacing: .06em; margin-left: 6px; }
.navm summary { list-style: none; }
@media (min-width: 1040px) { .navm { display: none; } }
.theme-btn .i-sun, .theme-btn .i-moon, .theme-btn .i-auto { display: none; }
:root[data-theme-choice="auto"] .theme-btn .i-auto, :root:not([data-theme-choice]) .theme-btn .i-auto,
:root[data-theme-choice="light"] .theme-btn .i-sun, :root[data-theme-choice="dark"] .theme-btn .i-moon { display: block; }
.top .btn { min-height: 38px; padding: 0 14px; font-size: .9rem; --cut: 9px; display: none; }
@media (min-width: 720px) { .top .btn { display: inline-flex; } }
.account { display: none; }                 /* v1.1: se muestra con CUENTAS_ACTIVAS */
.has-accounts .account { display: inline-flex; }

/* ---------- Botones (esquina cortada de la app) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 22px;
  text-decoration: none; cursor: pointer; border: 0; font: 600 1rem/1.1 var(--f-body);
  color: var(--primary-ink); background: var(--primary);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  transition: filter .15s, transform .15s;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn small { display: block; font: 500 .68rem/1.25 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; opacity: .78; }
.btn.ghost { color: var(--text); background: transparent; box-shadow: inset 0 0 0 1px var(--line); clip-path: none; }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); filter: none; }
.btn.amber { background: var(--amber); color: #0B1B2E; }
.link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.link-arrow::after { content: "→"; transition: transform .15s; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- Rótulos y cotas como recurso gráfico ---------- */
.kicker { font: 500 .74rem/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 8px; height: 8px; background: var(--amber); transform: rotate(45deg); flex: none; }
.dim { display: flex; align-items: center; gap: 10px; color: var(--amber); font: 500 .82rem/1 var(--f-mono); letter-spacing: .03em; max-width: 34rem; }
.dim::before, .dim::after { content: ""; flex: 1; height: 1px; background: currentColor; min-width: 24px; }
.dim span { position: relative; padding: 0 2px; white-space: nowrap; }
.dim.tick { position: relative; }
.dim.tick::before { box-shadow: -1px 0 0 0 currentColor; }
.sec-head { display: grid; gap: 14px; max-width: 48rem; margin-bottom: 40px; }
.sec-head h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
.sec-head p { color: var(--muted); font-size: 1.08rem; max-width: 42rem; }
section.band { padding-block: 84px; border-bottom: 1px solid var(--line); }
section.band.alt { background: var(--bg-2); }
section.band.tight { padding-block: 28px; }

/* ---------- Portada ---------- */
.hero { border-bottom: 1px solid var(--line); overflow: hidden; }
.hero .wrap { display: grid; gap: 48px; padding-block: 52px 64px; align-items: center; }
@media (min-width: 960px) { .hero .wrap { grid-template-columns: 1.1fr .9fr; padding-block: 76px 88px; } }
.hero h1 { font-size: clamp(2.7rem, 7.4vw, 5.4rem); line-height: .94; letter-spacing: -.025em; margin: 18px 0 0; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .dim { margin: 20px 0 22px; }
.hero .lead { font-size: clamp(1.05rem, 2.1vw, 1.22rem); color: var(--muted); max-width: 36rem; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 34px; max-width: 36rem; }
@media (min-width: 560px) { .spec { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.spec div { background: var(--bg-2); padding: 12px 14px; font: 400 .76rem/1.35 var(--f-mono); color: var(--muted); min-width: 0; }
.spec b { display: block; color: var(--text); font: 700 1.3rem/1.05 var(--f-display); letter-spacing: 0; margin-bottom: 4px; }
.phone-stage { position: relative; display: flex; justify-content: center; }
.phone { width: min(330px, 80vw); aspect-ratio: 9 / 18.5; border-radius: 36px; padding: 10px; background: #071322; box-shadow: 0 0 0 1px #21405F, 0 40px 80px -30px rgba(0, 0, 0, .6), 0 0 90px -10px rgba(45, 212, 245, .22); }
.phone .screen { width: 100%; height: 100%; border-radius: 27px; overflow: hidden; }
.phone svg { width: 100%; height: 100%; }
.callout { position: absolute; font: 500 .74rem/1.25 var(--f-mono); letter-spacing: .03em; background: var(--surface); border: 1px solid var(--line); padding: 9px 12px; box-shadow: var(--shadow); display: none; color: var(--muted); }
.callout b { display: block; font: 600 1.05rem var(--f-mono); color: var(--amber); }
.callout.c2 b { color: var(--accent); }
.callout.c3 b { color: var(--green); }
@media (min-width: 1180px) {
  .callout { display: block; }
  .callout.c1 { left: -4px; top: 9%; }
  .callout.c2 { right: -6px; top: 44%; }
  .callout.c3 { left: 0; bottom: 12%; }
}
.callout::after { content: ""; position: absolute; top: 50%; width: 34px; height: 1px; background: currentColor; opacity: .5; }
.callout.c1::after, .callout.c3::after { left: 100%; }
.callout.c2::after { right: 100%; }

/* Cinta de formatos y equipos */
.formats { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.formats .lbl { font: 500 .72rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-right: 8px; }
.formats span.f { font: 500 .84rem/1 var(--f-mono); color: var(--text); border: 1px solid var(--line); background: var(--surface); padding: 9px 12px; }

/* Antes / después */
.vs { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 820px) { .vs { grid-template-columns: 1fr 1fr; } }
.vs > div { background: var(--surface); padding: 28px clamp(20px, 3vw, 36px); display: grid; gap: 18px; align-content: start; }
.vs h3 { font-size: 1.5rem; display: flex; align-items: center; gap: 12px; }
.vs .before h3 { color: var(--muted); }
.vs ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: v; }
.vs li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; counter-increment: v; }
.vs li::before { content: counter(v, decimal-leading-zero); font: 500 .8rem/1.9 var(--f-mono); color: var(--faint); }
.vs .after li::before { color: var(--accent); }
.vs li b { display: block; font-weight: 600; }
.vs li span { color: var(--muted); font-size: .95rem; }
.vs .before li b { color: var(--muted); font-weight: 500; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--faint) 60%, transparent); }

/* Funciones: lista + lámina */
.showcase { display: grid; gap: 20px; }
@media (min-width: 960px) { .showcase { grid-template-columns: 22rem 1fr; gap: 28px; align-items: start; } }
.tabs { display: grid; gap: 6px; }
.tabs button { all: unset; cursor: pointer; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.tabs button b { display: block; color: var(--text); font: 600 1.08rem/1.2 var(--f-display); letter-spacing: .005em; }
.tabs button small { font-size: .86rem; line-height: 1.35; display: block; }
.tabs button .n { font: 500 .78rem var(--f-mono); color: var(--faint); }
.tabs button[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.tabs button[aria-selected="true"] .n { color: var(--accent); }
.tabs button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.panels { min-width: 0; }
.panel { border: 1px solid var(--line); background: var(--bg-2); display: grid; min-width: 0; }
.panel + .panel { margin-top: 20px; }
.js .panel + .panel { margin-top: 0; }
.panel[hidden] { display: none; }
.panel .art { aspect-ratio: 16 / 9; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.panel .art svg { width: 100%; height: 100%; }
.panel .txt { padding: 24px clamp(18px, 3vw, 32px) 28px; display: grid; gap: 14px; }
.panel h3 { font-size: 1.7rem; }
.panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--muted); }
@media (min-width: 720px) { .panel ul { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
.panel li { position: relative; padding-left: 20px; }
.panel li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; background: var(--amber); transform: rotate(45deg); }

/* Pasos del tutorial (portada) */
.steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0; padding: 0; list-style: none; counter-reset: s; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(5, 1fr); } }
.steps li { background: var(--surface); padding: 22px 20px 24px; counter-increment: s; display: grid; gap: 8px; align-content: start; }
.steps li::before { content: "PASO " counter(s); font: 500 .72rem var(--f-mono); letter-spacing: .12em; color: var(--accent); }
.steps b { font: 700 1.2rem/1.15 var(--f-display); }
.steps p { color: var(--muted); font-size: .94rem; }
.after-steps { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }

/* Entregables */
.deliver { display: grid; gap: 22px; }
@media (min-width: 980px) { .deliver { grid-template-columns: 1.35fr 1fr; align-items: stretch; } }
.sheet { background: #FFFFFF; color: #14202E; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 14px; min-width: 0; }
.sheet svg { width: 100%; height: auto; }
.sheet-cap { font: 500 .74rem var(--f-mono); color: var(--faint); margin-top: 10px; letter-spacing: .03em; }
.files { display: grid; gap: 12px; align-content: start; }
.file { border: 1px solid var(--line); background: var(--surface); padding: 18px 20px; display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
.file .ext { font: 700 1rem/1 var(--f-mono); color: var(--accent); border: 1.5px solid currentColor; height: 64px; display: grid; place-items: center; clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%); }
.file.pdf .ext { color: var(--amber); }
.file.xls .ext { color: var(--green); }
.file b { font: 600 1.12rem var(--f-display); display: block; margin-bottom: 4px; }
.file p { color: var(--muted); font-size: .94rem; }

/* Para quién */
.who { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px) { .who { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .who { grid-template-columns: repeat(3, 1fr); } }
.who > div { background: var(--surface); padding: 22px 22px 24px; display: grid; gap: 8px; align-content: start; }
.who b { font: 700 1.25rem/1.15 var(--f-display); }
.who p { color: var(--muted); font-size: .95rem; }
.who .tag { font: 500 .7rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

/* Versiones y precios */
.plans { display: grid; gap: 18px; align-items: stretch; }
@media (min-width: 900px) { .plans { grid-template-columns: 1fr 1.15fr; } }
.plan { background: var(--surface); border: 1px solid var(--line); padding: 30px clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 20px; position: relative; }
.plan.pro { border: 1.5px solid var(--accent); box-shadow: var(--shadow); }
.plan .badge { position: absolute; top: -12px; left: 24px; font: 500 .72rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: 6px 10px; }
.plan h3 { font-size: 2rem; }
.plan .sub { color: var(--muted); margin-top: 4px; }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price b { font: 600 2.5rem/1 var(--f-mono); letter-spacing: -.02em; }
.price span { color: var(--muted); }
.prices { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 520px) { .prices { grid-template-columns: repeat(3, 1fr); } }
.prices div { background: var(--bg-2); padding: 14px 16px; }
.prices b { display: block; font: 600 1.6rem/1.1 var(--f-mono); font-variant-numeric: tabular-nums; }
.prices span { color: var(--muted); font-size: .86rem; }
.prices em { font-style: normal; color: var(--amber); font: 500 .7rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; display: block; margin-top: 6px; }
.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.checks li { position: relative; padding-left: 28px; }
.checks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; background: var(--accent-soft); }
.checks li::after { content: ""; position: absolute; left: 5px; top: .55em; width: 8px; height: 4px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.checks li.minus { color: var(--muted); }
.checks li.minus::after { border-left: 0; transform: none; top: .82em; height: 0; border-bottom-color: var(--faint); }
.pass { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; border: 1px dashed var(--amber); background: var(--amber-soft); padding: 18px 22px; }
.pass b { font: 700 1.2rem var(--f-display); }
.pass p { color: var(--muted); font-size: .95rem; }
.pass .mono { font-size: 1.4rem; }
.fine { color: var(--faint); font-size: .86rem; margin-top: 16px; max-width: 60rem; }

/* Confianza */
.trust { display: grid; gap: 28px; }
@media (min-width: 980px) { .trust { grid-template-columns: 1fr 1fr; gap: 48px; } }
.pillars { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pillars > div { background: var(--surface); padding: 20px 22px; display: grid; grid-template-columns: 36px 1fr; gap: 14px; }
.pillars svg { width: 28px; height: 28px; color: var(--accent); }
.pillars b { display: block; font: 700 1.15rem/1.2 var(--f-display); margin-bottom: 4px; }
.pillars p { color: var(--muted); font-size: .95rem; }
.road { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-left: 1px solid var(--line); }
.road li { position: relative; padding: 0 0 26px 26px; }
.road li::before { content: ""; position: absolute; left: -6px; top: 4px; width: 11px; height: 11px; background: var(--bg); border: 1.5px solid var(--faint); transform: rotate(45deg); }
.road li.now::before { background: var(--accent); border-color: var(--accent); }
.road .when { font: 500 .76rem var(--f-mono); letter-spacing: .08em; color: var(--amber); text-transform: uppercase; }
.road b { display: block; font: 700 1.2rem/1.2 var(--f-display); margin: 2px 0 4px; }
.road p { color: var(--muted); font-size: .95rem; }

/* Preguntas */
.faq { display: grid; gap: 8px; max-width: 54rem; }
.faq details { background: var(--surface); border: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 54px 18px 20px; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details[open] summary { color: var(--accent); }
.faq details p { padding: 0 20px 20px; color: var(--muted); }

/* Llamado final */
.final { padding-block: 84px; background: #0B1B2E; color: #EAF2F8; border-bottom: 1px solid #21405F; }
.final.grid-bg::before { background-image: linear-gradient(rgba(45,212,245,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(45,212,245,.06) 1px, transparent 1px), linear-gradient(rgba(45,212,245,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(45,212,245,.1) 1px, transparent 1px); }
.final .wrap { display: grid; gap: 18px; justify-items: start; }
@media (min-width: 900px) { .final .wrap { grid-template-columns: auto 1fr auto; align-items: center; gap: 36px; } }
.final img { width: 88px; height: 88px; }
.final h2 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); }
.final p { color: #9FB4C8; max-width: 40rem; margin-top: 10px; }
.final .btn { background: #2DD4F5; color: #0B1B2E; }

/* Pie */
.foot { padding-block: 48px 52px; color: var(--muted); font-size: .92rem; background: var(--bg); }
.foot .wrap { display: grid; gap: 28px; }
@media (min-width: 860px) { .foot .wrap { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot b { color: var(--text); font: 700 1.02rem var(--f-display); display: block; margin-bottom: 10px; letter-spacing: .01em; }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--accent); text-decoration: underline; }
.foot .mail { font-family: var(--f-mono); font-size: .86rem; color: var(--text); word-break: break-all; }
.foot .legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 22px; font-size: .8rem; color: var(--faint); display: grid; gap: 6px; }

/* ---------- Páginas internas (tutorial, manual, soporte…) ---------- */
.page-head { border-bottom: 1px solid var(--line); }
.page-head .wrap { padding-block: 52px 44px; display: grid; gap: 16px; }
.page-head h1 { font-size: clamp(2.3rem, 6vw, 4rem); }
.page-head p { color: var(--muted); font-size: 1.1rem; max-width: 44rem; }
.page-head .meta { font: 500 .78rem var(--f-mono); color: var(--faint); letter-spacing: .04em; display: flex; gap: 8px 18px; flex-wrap: wrap; }
.crumbs { font: 500 .76rem var(--f-mono); letter-spacing: .06em; color: var(--faint); }
.crumbs a { color: var(--faint); }

/* Manual: índice + contenido */
.docs { display: grid; gap: 32px; padding-block: 40px 88px; }
@media (min-width: 980px) { .docs { grid-template-columns: 17rem minmax(0, 1fr); gap: 52px; } }
.toc { align-self: start; display: grid; gap: 14px; }
@media (min-width: 980px) { .toc { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow: auto; padding-right: 6px; } }
.toc input { width: 100%; height: 44px; padding: 0 14px; font: 400 .95rem var(--f-body); color: var(--text); background: var(--surface); border: 1px solid var(--line); }
.toc input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; counter-reset: t; }
.toc li { counter-increment: t; }
.toc a { display: grid; grid-template-columns: 30px 1fr; gap: 6px; padding: 7px 8px; color: var(--muted); text-decoration: none; font-size: .93rem; line-height: 1.3; }
.toc a::before { content: counter(t, decimal-leading-zero); font: 500 .74rem/1.75 var(--f-mono); color: var(--faint); }
.toc a:hover, .toc a.on { color: var(--text); background: var(--accent-soft); }
.toc .none { color: var(--faint); font-size: .9rem; padding: 8px; }
.chapter { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); display: grid; gap: 16px; min-width: 0; }
.chapter:last-child { border-bottom: 0; }
.chapter > .num { font: 500 .76rem var(--f-mono); color: var(--accent); letter-spacing: .12em; text-transform: uppercase; }
.chapter h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
.chapter h3 { font-size: 1.28rem; margin-top: 10px; }
.chapter p, .chapter li { max-width: 46rem; }
.chapter ul, .chapter ol { margin: 0; padding-left: 1.25em; display: grid; gap: 8px; }
.chapter li::marker { color: var(--accent); }
.chapter .tbl { overflow-x: auto; border: 1px solid var(--line); max-width: 52rem; }
.chapter table { border-collapse: collapse; width: 100%; font-size: .94rem; }
.chapter th, .chapter td { text-align: left; vertical-align: top; padding: 10px 14px; border-top: 1px solid var(--line); }
.chapter th { font: 500 .72rem var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-top: 0; }
.chapter td:first-child { font-weight: 600; white-space: nowrap; }
.chapter code, .say { font: 500 .9em var(--f-mono); background: var(--surface-2); border: 1px solid var(--line); padding: 1px 6px; white-space: nowrap; }
.say { color: var(--accent); }
.tip, .warn { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 14px 18px; max-width: 46rem; }
.warn { border-left-color: var(--amber); background: var(--amber-soft); }
.tip b, .warn b { font: 500 .72rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: 4px; color: var(--accent); }
.warn b { color: var(--amber); }
.kbd { font: 600 .86em var(--f-body); border: 1px solid var(--line); background: var(--surface); padding: 1px 7px; white-space: nowrap; }

/* Tutorial */
.lesson { display: grid; gap: 28px; padding-block: 44px 20px; }
.tsteps { margin: 0; padding: 0; list-style: none; display: grid; gap: 22px; counter-reset: ts; }
.tstep { counter-increment: ts; display: grid; gap: 20px; border: 1px solid var(--line); background: var(--surface); padding: 22px; min-width: 0; }
@media (min-width: 900px) { .tstep { grid-template-columns: 20rem 1fr; gap: 32px; padding: 26px; align-items: center; } }
.tstep .fig { background: var(--bg-2); border: 1px solid var(--line); aspect-ratio: 4 / 3; overflow: hidden; }
.tstep .fig svg { width: 100%; height: 100%; }
.tstep .body { display: grid; gap: 10px; min-width: 0; }
.tstep .body::before { content: "PASO " counter(ts, decimal-leading-zero); font: 500 .74rem var(--f-mono); letter-spacing: .12em; color: var(--accent); }
.tstep h3 { font-size: 1.55rem; }
.tstep p, .tstep li { color: var(--muted); max-width: 42rem; }
.tstep ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.more { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 12px; }
@media (min-width: 760px) { .more { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .more { grid-template-columns: repeat(4, 1fr); } }
.more a { background: var(--surface); padding: 20px; text-decoration: none; color: var(--text); display: grid; gap: 6px; align-content: start; }
.more a:hover { background: var(--accent-soft); }
.more b { font: 700 1.15rem var(--f-display); }
.more span { color: var(--muted); font-size: .93rem; }
.more small { font: 500 .7rem var(--f-mono); color: var(--accent); letter-spacing: .1em; text-transform: uppercase; }

/* Descargas */
.dl { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.dl > div { background: var(--surface); padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; align-items: center; }
.dl b { font: 700 1.1rem var(--f-display); display: block; }
.dl p { color: var(--muted); font-size: .93rem; }
.dl .size { font: 500 .76rem var(--f-mono); color: var(--faint); }
.dl a.get { font: 600 .9rem var(--f-body); text-decoration: none; border: 1px solid var(--accent); padding: 10px 14px; white-space: nowrap; }
.dl a.get:hover { background: var(--accent-soft); }
.dl .soon { font: 500 .74rem var(--f-mono); color: var(--faint); letter-spacing: .06em; text-transform: uppercase; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatches div { width: 120px; border: 1px solid var(--line); background: var(--surface); }
.swatches i { display: block; height: 56px; }
.swatches span { display: block; padding: 8px 10px; font: 500 .72rem/1.35 var(--f-mono); color: var(--muted); }

/* Novedades */
.log { display: grid; gap: 22px; }
.release { border: 1px solid var(--line); background: var(--surface); padding: 24px clamp(18px, 3vw, 30px); display: grid; gap: 12px; }
.release header { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; }
.release h2 { font-size: 1.8rem; }
.release .when { font: 500 .78rem var(--f-mono); color: var(--amber); letter-spacing: .06em; }
.release .state { font: 500 .7rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px; border: 1px solid var(--line); color: var(--muted); }
.release .state.now { border-color: var(--accent); color: var(--accent); }
.release ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--muted); }

/* Soporte */
.support { display: grid; gap: 18px; padding-block: 44px 88px; }
@media (min-width: 900px) { .support { grid-template-columns: 1.1fr .9fr; gap: 32px; } }
.card { border: 1px solid var(--line); background: var(--surface); padding: 24px clamp(18px, 3vw, 30px); display: grid; gap: 14px; align-content: start; min-width: 0; }
.card h2 { font-size: 1.7rem; }
.card p, .card li { color: var(--muted); }
.card ol, .card ul { margin: 0; padding-left: 1.25em; display: grid; gap: 8px; }
.copy { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.copy .mail { font: 500 1.05rem var(--f-mono); color: var(--text); border: 1px solid var(--line); background: var(--bg-2); padding: 12px 14px; user-select: all; word-break: break-all; }
.copy button { cursor: pointer; font: 600 .9rem var(--f-body); color: var(--text); border: 1px solid var(--line); background: var(--surface-2); padding: 12px 14px; }
.copy button:hover { border-color: var(--accent); }

/* Próximamente (cuenta / visor) */
.soon-page { padding-block: 64px 96px; display: grid; gap: 28px; }
@media (min-width: 900px) { .soon-page { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; } }
.soon-page .illu { border: 1px dashed var(--line); background: var(--bg-2); aspect-ratio: 4 / 3; }
.soon-page .illu svg { width: 100%; height: 100%; }
.soon-page ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; color: var(--muted); }

/* ---------- Páginas legales ---------- */
.doc { max-width: 50rem; margin: 0 auto; padding-block: 40px 80px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.doc .langs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.doc .langs a { font: 500 .8rem/1 var(--f-mono); letter-spacing: .06em; color: var(--muted); text-decoration: none; border: 1px solid var(--line); padding: 9px 13px; }
.doc .langs a[aria-current="true"] { color: var(--text); border-color: var(--amber); background: var(--amber-soft); }
.doc .draft { border: 1px dashed var(--amber); background: var(--amber-soft); padding: 12px 16px; margin-bottom: 18px; font-size: .93rem; }
.doc .draft b { font: 500 .72rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 4px; }
.doc article { background: var(--surface); border: 1px solid var(--line); padding: 30px clamp(18px, 4vw, 44px); display: grid; gap: 16px; min-width: 0; }
.doc article[hidden] { display: none; }
.doc h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); }
.doc h2 { font-size: 1.3rem; margin-top: 14px; }
.doc .meta { font: 500 .8rem/1.5 var(--f-mono); color: var(--muted); }
.doc .key { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 14px 18px; }
.doc .soon { border-left: 3px solid var(--amber); background: var(--amber-soft); padding: 14px 18px; }
.doc ul, .doc ol { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }
.doc .tbl { overflow-x: auto; border: 1px solid var(--line); }
.doc table { border-collapse: collapse; width: 100%; font-size: .93rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px; border-top: 1px solid var(--line); }
.doc th { font: 500 .72rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-top: 0; background: var(--surface-2); }
.doc td:first-child { font-weight: 600; min-width: 8.5rem; }
.doc .mail { font-family: var(--f-mono); font-size: .95em; }
.pend { display: none; }
.draft-on .pend { display: inline; font: 500 .66rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--amber); border: 1px solid var(--amber); padding: 2px 5px; margin-left: 6px; vertical-align: 2px; white-space: nowrap; }
@media (max-width: 600px) {
  .doc table, .doc tbody, .doc tr, .doc td { display: block; width: 100%; }
  .doc tr:first-child { display: none; }
  .doc tr { border-top: 1px solid var(--line); padding: 10px 0; }
  .doc tr:nth-child(2) { border-top: 0; }
  .doc td { border-top: 0; padding: 4px 14px; }
  .doc td:first-child { color: var(--accent); }
}
.err { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 48px 16px; }
.err .mono { color: var(--amber); font-size: 3.4rem; }
.err h1 { margin: 10px 0 12px; font-size: 2.4rem; }
.err p { color: var(--muted); margin-bottom: 24px; }

/* Aparición suave (la página se ve completa aunque no haya animación) */
@keyframes rise { from { transform: translateY(10px); opacity: .001; } to { transform: none; opacity: 1; } }
.hero .copy-col > * { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.hero .copy-col > *:nth-child(2) { animation-delay: .06s; }
.hero .copy-col > *:nth-child(3) { animation-delay: .12s; }
.hero .copy-col > *:nth-child(4) { animation-delay: .18s; }
.hero .copy-col > *:nth-child(5) { animation-delay: .24s; }
.hero .copy-col > *:nth-child(6) { animation-delay: .30s; }
@keyframes draw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
.phone .drawn { stroke-dasharray: 400; animation: draw 1.6s .4s ease-out both; }

/* ---------- Ilustraciones (siguen el tema claro/oscuro) ---------- */
.ill text { font-family: var(--f-body); }
.ill .mo { font-family: var(--f-mono); font-weight: 500; }
.ill .cd { font-family: var(--f-display); font-weight: 700; }
.ill .w { fill: none; stroke: var(--wall); stroke-linejoin: miter; }
.ill .wf { fill: var(--wall); }
.ill .d { fill: none; stroke: var(--amber); }
.ill .dt { fill: var(--amber); }
.ill .a { fill: none; stroke: var(--accent); }
.ill .af { fill: var(--accent); }
.ill .t { fill: var(--text); }
.ill .m { fill: var(--muted); }
.ill .f { fill: var(--faint); }
.ill .ln { fill: none; stroke: var(--line); }
.ill .lnf { fill: var(--line); }
.ill .bg { fill: var(--bg-2); }
.ill .sf { fill: var(--surface); }
.ill .sf2 { fill: var(--surface-2); }
.ill .gr { fill: none; stroke: var(--muted); }
.ill .r1 { fill: var(--accent); fill-opacity: .10; }
.ill .r2 { fill: var(--amber); fill-opacity: .11; }
.ill .r3 { fill: var(--green); fill-opacity: .10; }
.ill .gh { fill: none; stroke: var(--accent); stroke-opacity: .5; stroke-dasharray: 5 5; }
.ill .ink { fill: var(--primary-ink); }
.ill .pri { fill: var(--primary); }


/* =====================================================================
   DISEÑO v3 · ideas tomadas de webs de referencia, con piel propia
   ===================================================================== */

/* Título de portada con contraste de pesos (700 + 300), como el héroe de SketchUp */
.hero h1 .lt { font-weight: 300; letter-spacing: -.02em; }
.hero h1 .lt em { font-weight: 600; }
h2 { letter-spacing: -.012em; }
.sec-head h2 { font-weight: 700; }

/* Píldora sobre el título (idea de magicplan), con punto que late */
.pill { display: inline-flex; align-items: center; gap: 10px; font: 500 .8rem/1.2 var(--f-body); color: var(--text);
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 8px 14px 8px 12px; border-radius: 999px; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); animation: ping 2.4s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Niveles y marca de corte en el fondo del héroe (idea de Vectorworks) */
.hero { position: relative; }
.hero .levels { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.levels .lv { stroke: var(--amber); stroke-opacity: .28; stroke-width: 1; }
.levels .lvt { font: 500 13px var(--f-mono); fill: var(--amber); fill-opacity: .55; }
.levels .lvm { fill: var(--amber); fill-opacity: .45; }
.levels .sec { fill: none; stroke: var(--accent); stroke-opacity: .45; stroke-width: 1.2; }
.levels .sec text { fill: var(--accent); fill-opacity: .6; stroke: none; font: 500 12px var(--f-mono); }
@media (max-width: 700px) { .hero .levels { display: none; } }

/* Llamadas del teléfono como tarjetas de vidrio (idea de magicplan) */
.callout { background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 12px; }

/* Flecha en los botones (Autodesk, magicplan) */
.arr { font-style: normal; display: inline-block; margin-left: 8px; transition: transform .18s; }
.btn:hover .arr, .announce a:hover .arr { transform: translateX(4px); }

/* Banda de anuncio bajo el héroe (Vectorworks · Allplan) */
.announce { background: var(--accent); color: var(--accent-ink); }
.announce .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 22px; padding-block: 16px; text-align: center; }
.announce p { font: 500 1rem/1.4 var(--f-display); letter-spacing: .02em; }
.announce a { color: inherit; font: 600 .95rem var(--f-body); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; white-space: nowrap; }

/* Banda de llamado a mitad de página (SketchUp) */
.ctaband { background: var(--amber-soft); border-block: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); }
.ctaband .wrap { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; padding-block: 40px; }
.ctaband h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
.ctaband p { color: var(--muted); margin-top: 6px; }

/* Pasos con números grandes calados (Vectorworks) */
.steps li { position: relative; overflow: hidden; }
.steps li::after { content: counter(s, decimal-leading-zero); position: absolute; right: 10px; bottom: -18px; font: 700 5.4rem/1 var(--f-display);
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 40%, transparent); pointer-events: none; }

/* Integraciones en baldosas (magicplan) */
section.band.tight2 { padding-block: 72px; }
.integ { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .integ { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .integ { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.integ > div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 18px; display: grid; gap: 6px; align-content: start; min-height: 112px; transition: border-color .2s, transform .2s; }
.integ > div:hover { border-color: var(--accent); transform: translateY(-2px); }
.integ b { font: 700 1.3rem/1.1 var(--f-display); letter-spacing: .01em; }
.integ span { color: var(--muted); font-size: .88rem; line-height: 1.35; }

/* Estudiantes y equipos (VisualARQ: licencia educativa) */
.extra { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 760px) { .extra { grid-template-columns: 1fr 1fr; } }
.extra > div { border: 1px solid var(--line); background: var(--surface); padding: 18px 22px; display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; align-items: center; }
.extra b { font: 700 1.15rem var(--f-display); }
.extra p { color: var(--muted); font-size: .93rem; grid-column: 1; }
.extra .link-arrow { grid-column: 2; grid-row: 1 / span 2; }

/* Bloque oscuro de ayuda (Vectorworks «Facilitando el cambio») */
.helpband { background: #071322; color: #EAF2F8; padding-block: 84px; }
.helpband.grid-bg::before { background-image: linear-gradient(rgba(45,212,245,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(45,212,245,.05) 1px, transparent 1px); background-size: 20px 20px; }
.helpband .wrap { display: grid; gap: 32px; }
@media (min-width: 960px) { .helpband .wrap { grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; } }
.helpband h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
.helpband p { color: #9FB4C8; margin-top: 14px; font-size: 1.06rem; max-width: 34rem; }
.helplist { display: grid; border-top: 1px solid #21405F; }
.helplist a { display: grid; grid-template-columns: 44px 1fr auto; gap: 4px 14px; align-items: baseline; padding: 18px 4px; border-bottom: 1px solid #21405F; color: #EAF2F8; text-decoration: none; }
.helplist a::after { content: "→"; color: #2DD4F5; grid-column: 3; grid-row: 1 / span 2; align-self: center; transition: transform .18s; }
.helplist a:hover::after { transform: translateX(4px); }
.helplist small { font: 500 .78rem var(--f-mono); color: #F2B33D; grid-row: 1 / span 2; }
.helplist b { font: 700 1.3rem var(--f-display); }
.helplist span { color: #9FB4C8; font-size: .93rem; grid-column: 2; }

/* Opiniones: espacio reservado para testimonios reales (Autodesk · VisualARQ) */
.voices { margin-top: 40px; border: 1px dashed var(--line); padding: 28px clamp(20px, 3vw, 36px); display: grid; gap: 18px; align-items: center; position: relative; overflow: hidden; }
@media (min-width: 900px) { .voices { grid-template-columns: 90px 1fr auto; } }
.voices .q { font: 700 7rem/0.6 var(--f-display); color: var(--accent); opacity: .5; }
.voices h3 { font-size: 1.6rem; margin: 8px 0 6px; }
.voices p { color: var(--muted); max-width: 40rem; }

/* Tarjetas un poco más suaves en lo repetido (no en lo técnico) */
.who > div, .pillars > div { transition: background .2s; }
.who > div:hover { background: var(--surface-2); }
/* Ajustes finales v3 */
.ctaband { background: var(--surface); border-top: 3px solid var(--amber); border-bottom: 1px solid var(--line); }
.pass { background: var(--surface); }
.steps li { padding-bottom: 78px; }
.steps li::after { bottom: -14px; }
@media (max-width: 759px) {
  .steps li { padding-bottom: 22px; padding-right: 96px; }
  .steps li::after { bottom: auto; top: 50%; transform: translateY(-50%); font-size: 4.2rem; }
}

/* =====================================================================
   SITIO DE LA EMPRESA · Montek Ingeniería
   ===================================================================== */

/* Barra superior de la empresa en las páginas de cada app (estilo Vectorworks) */
.util { background: #071322; border-bottom: 1px solid #21405F; font: 500 .74rem/1 var(--f-mono); letter-spacing: .06em; }
.util .wrap { display: flex; align-items: center; gap: 10px; min-height: 34px; color: #6F8BA6; overflow-x: auto; white-space: nowrap; }
.util a { color: #9FB4C8; text-decoration: none; }
.util a:hover { color: #2DD4F5; }
.util b { color: #EAF2F8; font-weight: 500; }
.util .u-brand { color: #EAF2F8; text-transform: uppercase; letter-spacing: .12em; }
.util nav { margin-left: auto; display: flex; gap: 18px; }

/* Cabecera de la empresa */
.co-word { font: 700 1.08rem/1 var(--f-display); letter-spacing: .08em; }
.co-word span { font-weight: 300; color: var(--accent); letter-spacing: .1em; }
.top.co .btn.co-cta { display: none; min-height: 38px; padding: 0 16px; font-size: .9rem; --cut: 9px; }
@media (min-width: 720px) { .top.co .btn.co-cta { display: inline-flex; } }

/* Portada de la empresa */
.co-visual { position: relative; display: flex; justify-content: center; min-width: 0; }
.co-visual svg { width: min(560px, 100%); height: auto; box-shadow: var(--shadow); }
.callout.co-c { text-decoration: none; }
@media (min-width: 1180px) {
  .callout.co-c.c1 { left: -26px; top: 14%; right: auto; bottom: auto; }
  .callout.co-c.c2 { right: -18px; bottom: 16%; top: auto; left: auto; }
}
.callout.co-c.c1 b { color: var(--accent); }
.callout.co-c.c2 b { color: var(--amber); }

/* Dos líneas de trabajo */
.lines { border-bottom: 1px solid var(--line); }
.lines .wrap { display: grid; gap: 1px; background: var(--line); padding-left: 0; padding-right: 0; max-width: none; }
@media (min-width: 820px) { .lines .wrap { grid-template-columns: 1fr 1fr; } }
.line-card { background: var(--bg-2); padding: 44px max(32px, calc((100vw - 76rem) / 2 + 32px)); text-decoration: none; color: var(--text); display: grid; gap: 12px; align-content: start; transition: background .2s; }
@media (min-width: 820px) {
  .line-card:first-child { padding-right: 48px; }
  .line-card:last-child { padding-left: 48px; }
}
.line-card:hover { background: var(--surface); }
.line-card h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
.line-card p { color: var(--muted); max-width: 30rem; }
.line-card .go { color: var(--accent); font-weight: 600; }
.line-card:hover .arr { transform: translateX(4px); }

/* Catálogo de aplicaciones */
.apps { display: grid; gap: 18px; }
@media (min-width: 900px) { .apps { grid-template-columns: 1.4fr 1fr; align-items: stretch; } }
.appcard { background: var(--surface); border: 1px solid var(--line); padding: 26px clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 16px; }
.appcard.big { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.appcard .ah { display: flex; gap: 18px; align-items: center; }
.appcard .ah img { width: 72px; height: 72px; flex: none; }
.appcard h3 { font-size: 1.8rem; margin-top: 6px; }
.appcard .meta { color: var(--faint); font: 500 .8rem var(--f-mono); margin-top: 4px; }
.appcard > p { color: var(--muted); }
.appcard .af { margin-top: auto; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--line); }
.appcard .price-s { color: var(--text); font-size: .9rem; }
.appcard.next { border-style: dashed; background: transparent; }
.appcard .plus { width: 72px; height: 72px; flex: none; display: grid; place-items: center; border: 1.5px dashed var(--line); font: 300 2.6rem var(--f-display); color: var(--accent); }
.state { display: inline-block; font: 500 .68rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px; border: 1px solid currentColor; }
.s-disponible { color: var(--green); }
.s-prueba { color: var(--amber); }
.s-desarrollo, .s-idea { color: var(--accent); }

/* Servicios */
.svcs { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 680px) { .svcs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .svcs { grid-template-columns: repeat(3, 1fr); } }
.svc { background: var(--surface); padding: 26px 24px 24px; display: grid; gap: 10px; align-content: start; text-decoration: none; color: var(--text); position: relative; transition: background .2s; }
.svc:hover { background: var(--surface-2); }
.svc .n { position: absolute; top: 22px; right: 22px; font: 500 .76rem var(--f-mono); color: var(--faint); }
.svc .ic { width: 48px; height: 48px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.svc .ic svg, .ic.big svg { width: 26px; height: 26px; }
.svc b { font: 700 1.35rem/1.15 var(--f-display); margin-top: 4px; }
.svc .d { color: var(--muted); font-size: .95rem; }
.svc .go { color: var(--accent); font-weight: 600; font-size: .92rem; margin-top: 6px; }
.svc:hover .arr { transform: translateX(4px); }
@media (min-width: 760px) { .steps.steps4 { grid-template-columns: repeat(4, 1fr); } }
.svc-detail { display: grid; gap: 18px; padding-block: 44px 88px; }
@media (min-width: 900px) { .svc-detail { grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: start; } }
.ic.big { width: 56px; height: 56px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.svc-detail .card ul:not(.checks) { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

/* Contacto */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.contact-list li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.contact-list svg { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.contact-list b { display: block; color: var(--text); }

/* Proyectos */
.projects { display: grid; gap: 18px; }
@media (min-width: 760px) { .projects { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .projects { grid-template-columns: repeat(3, 1fr); } }
.proj { background: var(--surface); border: 1px solid var(--line); display: grid; }
.proj .pimg { aspect-ratio: 4 / 3; background: var(--bg-2); overflow: hidden; }
.proj .pimg img { width: 100%; height: 100%; object-fit: cover; }
.proj .ptx { padding: 18px 20px 22px; display: grid; gap: 6px; }
.proj h3 { font-size: 1.3rem; }
.proj .meta { color: var(--faint); font: 500 .8rem var(--f-mono); }
.proj p { color: var(--muted); font-size: .94rem; }


/* =====================================================================
   SISTEMA TIPOGRÁFICO v5 · Archivo + IBM Plex Mono (estilo suizo)
   Guía: ui-ux-pro-max «Minimalism & Swiss Style» (jerarquía clara,
   mucho aire, contraste alto, hover 200 ms, foco visible).
   ===================================================================== */
:root { --stretch-display: 112%; --stretch-brand: 118%; --ease: cubic-bezier(.2, .7, .2, 1); }
body { font-size: 1.0625rem; line-height: 1.62; letter-spacing: -.002em; font-feature-settings: "kern", "liga"; }
h1, h2, h3, h4 { font-weight: 700; font-stretch: var(--stretch-display); letter-spacing: -.028em; line-height: 1.02; }

/* Escala de títulos (más contenida: el ancho semiexpandido ya da presencia) */
.hero h1 { font-size: clamp(2.35rem, 5.6vw, 4.5rem); line-height: .98; letter-spacing: -.035em; }
.hero h1 .lt { font-weight: 300; letter-spacing: -.03em; }
.hero h1 .lt em { font-weight: 700; }
.sec-head h2, .line-card h2 { font-size: clamp(1.85rem, 3.6vw, 2.75rem); }
.page-head h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.035em; }
.chapter h2, .helpband h2, .final h2, .ctaband h2 { letter-spacing: -.03em; }

/* Elementos que usan la letra de títulos con «font:» abreviado */
.brand b, .svc b, .appcard h3, .who b, .steps b, .pillars b, .road b, .file b, .integ b, .helplist b,
.extra b, .pass b, .plan h3, .tabs button b, .panel h3, .vs h3, .release h2, .card h2, .chapter h2,
.chapter h3, .tstep h3, .more b, .dl b, .foot b, .voices h3, .proj h3, .doc h1, .doc h2, .err h1,
.strip b, .spec b, .line-card h2 { font-stretch: var(--stretch-display); letter-spacing: -.02em; }
.brand b { font-stretch: var(--stretch-brand); font-weight: 700; letter-spacing: -.015em; }
.brand b span { font-weight: 400; }
.co-word { font-stretch: 125% !important; font-weight: 800; letter-spacing: .01em !important; }
.co-word span { font-weight: 300; letter-spacing: .04em !important; }
.spec b { font-size: 1.15rem; letter-spacing: -.01em; }
.price b, .prices b { letter-spacing: -.03em; }

/* Texto de lectura */
.lead { letter-spacing: -.005em; }
.sec-head p, .page-head p { font-size: 1.12rem; }
.menu a { font-weight: 500; font-size: .95rem; letter-spacing: -.005em; }
.btn { font-weight: 600; font-stretch: 104%; letter-spacing: -.005em; transition: filter .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.btn small { font-stretch: 100%; }
.kicker, .tag, .state, .badge, .eyebrow { font-stretch: 100%; }

/* Interacción: cursor, foco y transiciones de 200 ms */
a, button, summary, [role="tab"] { cursor: pointer; }
.svc, .integ > div, .who > div, .line-card, .appcard, .file, .faq details { transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 1px; }

/* Aire extra en escritorio (estilo suizo) */
@media (min-width: 1100px) {
  section.band { padding-block: 104px; }
  .sec-head { margin-bottom: 52px; }
}

/* v5 · ajustes finos */
@media (max-width: 520px) {
  .co-word { font-size: .86rem; font-stretch: 108% !important; white-space: nowrap; letter-spacing: 0 !important; }
  .co-word span { letter-spacing: .02em !important; }
}
@media (min-width: 900px) {
  .callout.co-c.c1 { left: -34px; top: 58%; }
  .callout.co-c.c2 { right: -22px; bottom: -5%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* =====================================================================
   v6 · Sitio completo de Montek Ingeniería
   Software, servicios por familia, dron, cursos, cuenta Montek y cotización.
   Cada sección tiene su propia composición (índice de láminas, cadena de
   obra, plano de vuelo, agenda de cursos) en lugar de tarjetas repetidas.
   ===================================================================== */
.s-inscripciones { color: var(--green); }
.s-proximamente, .s-borrador { color: var(--amber); }
.s-consulta { color: var(--accent); }
.acct-btn svg { width: 17px; height: 17px; }
.acct-btn[aria-current="page"] { border-color: var(--accent); color: var(--accent); }
.narrow { max-width: 54rem; }
h3.mini { font: 500 .74rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 26px 0 12px; font-stretch: 100%; }
.lead { color: var(--muted); font-size: clamp(1.05rem, 1.9vw, 1.16rem); max-width: 40rem; }
.checks.two { gap: 10px 26px; }
@media (min-width: 640px) { .checks.two { grid-template-columns: 1fr 1fr; } }
.split-head { display: grid; gap: 14px 48px; margin-bottom: 44px; align-items: end; }
.split-head h2 { font-size: clamp(2rem, 4.4vw, 3rem); margin-top: 14px; }
.split-head > p { color: var(--muted); font-size: 1.06rem; max-width: 34rem; }
@media (min-width: 900px) { .split-head { grid-template-columns: 1.1fr 1fr; } }

/* Índice de láminas (inicio) */
.idx-band { padding-block: 72px !important; }
.idx-head { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 28px; margin-bottom: 26px; }
.idx-head h2 { font-size: clamp(2rem, 4.4vw, 3rem); flex-basis: 100%; }
.idx-head .kicker { flex-basis: 100%; }
.idx-note { color: var(--faint); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; margin-left: auto; display: none; }
.idx { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--text); }
.idx li { border-bottom: 1px solid var(--line); }
.idx a { display: grid; grid-template-columns: 4.2rem 1fr auto; gap: 4px 18px; align-items: center; padding: 18px 6px; color: var(--text); text-decoration: none; transition: background .2s var(--ease), padding .2s var(--ease); }
.idx .code { color: var(--amber); font-size: .82rem; grid-row: span 2; align-self: start; padding-top: 6px; }
.idx b { font: 700 clamp(1.2rem, 2.3vw, 1.6rem)/1.15 var(--f-display); font-stretch: var(--stretch-display); letter-spacing: -.02em; }
.idx .d { color: var(--muted); font-size: .95rem; grid-column: 2; }
.idx .arr { grid-row: 1 / span 2; grid-column: 3; color: var(--accent); font-size: 1.2rem; transition: transform .2s var(--ease); }
.idx a:hover { background: var(--accent-soft); padding-inline: 14px; }
.idx a:hover .arr { transform: translateX(4px); }
@media (min-width: 900px) {
  .idx-note { display: block; }
  .idx-head h2 { flex-basis: auto; }
  .idx a { grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.2fr) 2rem; padding: 22px 8px; }
  .idx .code { grid-row: auto; align-self: center; padding: 0; }
  .idx .d { grid-column: 3; }
  .idx .arr { grid-row: auto; grid-column: 4; justify-self: end; }
}

/* Producto destacado */
.spot { background: var(--bg-2); }
.spot-g { display: grid; gap: 44px; align-items: center; }
@media (min-width: 940px) { .spot-g { grid-template-columns: .8fr 1.2fr; gap: 72px; } }
.spot-tel { display: flex; justify-content: center; }
.spot-tel .phone { width: min(300px, 74vw); }
.spot-tx h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 14px 0 16px; }
.fsheet { margin: 28px 0 0; display: grid; border-top: 1px solid var(--line); max-width: 38rem; }
.fsheet div { display: grid; grid-template-columns: 9rem 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.fsheet dt { font: 500 .72rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding-top: 3px; }
.fsheet dd { margin: 0; color: var(--text); }
.fsheet.small div { grid-template-columns: 6.5rem 1fr; padding: 8px 0; font-size: .94rem; }
.price-line { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; color: var(--text); font-size: .92rem; }

/* Cadena de obra (construcción) */
.chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.chain li a { display: grid; grid-template-columns: 2.6rem 1fr; gap: 2px 14px; padding: 16px 0 16px 0; text-decoration: none; color: var(--text); position: relative; border-left: 2px solid var(--amber); padding-left: 20px; margin-left: 6px; }
.chain .tick { position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; background: var(--bg); border: 2px solid var(--amber); transform: rotate(45deg); transition: background .2s; }
.chain .num { color: var(--amber); font-size: .8rem; grid-row: span 2; padding-top: 6px; }
.chain b { font: 700 1.5rem/1.1 var(--f-display); font-stretch: var(--stretch-display); letter-spacing: -.02em; }
.chain li a > span:last-child { color: var(--muted); font-size: .95rem; grid-column: 2; }
.chain li a:hover .tick { background: var(--amber); }
.chain li a:hover b { color: var(--accent); }
section.band.alt .chain .tick { background: var(--bg-2); }
@media (min-width: 900px) {
  .chain { grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--amber); padding-top: 0; }
  .chain li a { display: flex; flex-direction: column; gap: 6px; border-left: 0; margin: 0; padding: 30px 18px 8px 0; }
  .chain .tick { left: 0; top: -8px; }
  .chain .num { padding: 0; }
  .chain li + li a::before { content: ""; position: absolute; left: -1px; top: -12px; height: 22px; border-left: 1px solid var(--amber); }
}
.chain-foot { margin-top: 26px; }

/* Software */
.soft-g { display: grid; gap: 36px; }
@media (min-width: 940px) { .soft-g { grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; } }
.soft-g h2 { font-size: clamp(2rem, 4.4vw, 3rem); margin: 14px 0 16px; }
.soft-proof { margin-top: 22px; font-size: .8rem; color: var(--faint); border-left: 2px solid var(--accent); padding-left: 12px; }
.soft-list { border-top: 1px solid var(--line); }
.soft-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 18px; align-items: center; padding: 24px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); transition: background .2s var(--ease); }
.soft-row .ic { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--accent); }
.soft-row .ic svg { width: 24px; height: 24px; }
.soft-row b { display: block; font: 700 1.4rem/1.15 var(--f-display); font-stretch: var(--stretch-display); letter-spacing: -.02em; }
.soft-row .d { color: var(--muted); font-size: .95rem; display: block; margin-top: 4px; }
.soft-row .arr { color: var(--accent); transition: transform .2s var(--ease); }
.soft-row:hover { background: var(--accent-soft); }
.soft-row:hover .arr { transform: translateX(4px); }

/* Dron: banda siempre oscura, como el lienzo de la app */
.drone {
  --bg: #0B1B2E; --bg-2: #0D1E31; --surface: #122640; --surface-2: #152A42; --line: #21405F;
  --text: #EAF2F8; --muted: #9FB4C8; --faint: #8AA3BB; --accent: #2DD4F5; --accent-soft: rgba(45, 212, 245, .12);
  --amber: #F2B33D; --green: #7BD88F; --wall: #D5E1EC; --primary: #2DD4F5; --primary-ink: #0B1B2E;
  background: var(--bg); color: var(--text); color-scheme: dark;
}
.drone-g { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .drone-g { grid-template-columns: 1.05fr .95fr; gap: 64px; } }
.drone h2 { font-size: clamp(2rem, 4.4vw, 3rem); margin: 14px 0 16px; }
.drone-ill { border: 1px solid var(--line); background: var(--bg-2); }
.svc-ill { margin-top: 14px; border: 1px solid var(--line); }

/* Agenda de cursos */
.agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 820px) { .agenda { grid-template-columns: 1fr 1fr; } }
.agenda a { display: grid; grid-template-columns: 3.6rem 1fr; gap: 6px 14px; padding: 22px 22px 20px; background: var(--surface); color: var(--text); text-decoration: none; height: 100%; transition: background .2s var(--ease); }
.agenda .code { color: var(--amber); font-size: .82rem; grid-row: span 3; padding-top: 5px; }
.agenda b { font: 700 1.22rem/1.2 var(--f-display); font-stretch: var(--stretch-display); letter-spacing: -.015em; }
.agenda .meta { color: var(--faint); font-size: .78rem; }
.agenda .state { justify-self: start; }
.agenda a:hover { background: var(--surface-2); }

/* Banda de cuenta */
.acct-band { padding-block: 56px !important; }
.acct-g { display: grid; gap: 18px 28px; align-items: center; }
@media (min-width: 860px) { .acct-g { grid-template-columns: auto 1fr auto; } }
.acct-g h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.acct-g p { color: var(--muted); margin-top: 8px; max-width: 46rem; }

/* Planes */
.plans-h { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.plans-h img { width: 44px; height: 44px; }
.plans-h h3 { font-size: 1.5rem; }
.plans { display: grid; gap: 18px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { border: 1px solid var(--line); background: var(--surface); padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.plan header { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.plan h3 { font-size: 1.6rem; }
.plan .para { color: var(--muted); font-size: .95rem; }
.plan .amount { display: grid; gap: 4px; padding-block: 12px; border-block: 1px solid var(--line); }
.plan .amount b { font: 700 2.4rem/1 var(--f-display); font-stretch: var(--stretch-display); letter-spacing: -.03em; }
.plan .amount span { font: 400 .8rem var(--f-mono); color: var(--faint); }
.plan .btn { margin-top: auto; }
.plan.hot { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }

/* Compra en pasos */
.buy-how { display: grid; gap: 26px; }
@media (min-width: 940px) { .buy-how { grid-template-columns: .8fr 2fr; align-items: start; gap: 48px; } .buy-how > .link-arrow { grid-column: 2; } }
.buy-how h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin-top: 14px; }
.mini-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: m; }
@media (min-width: 720px) { .mini-steps:not(.v) { grid-template-columns: repeat(3, 1fr); } }
.mini-steps li { counter-increment: m; border-top: 2px solid var(--accent); padding-top: 14px; display: grid; gap: 6px; }
.mini-steps li::before { content: counter(m, decimal-leading-zero); font: 500 .76rem var(--f-mono); color: var(--accent); }
.mini-steps b { font: 700 1.15rem var(--f-display); font-stretch: var(--stretch-display); }
.mini-steps p { color: var(--muted); font-size: .94rem; }
.mini-steps.v { gap: 12px; }
.mini-steps.v li { border-top: 0; border-left: 2px solid var(--accent); padding: 0 0 0 14px; }

/* Servicios por familia */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.jump a { display: inline-flex; gap: 10px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600; font-size: .94rem; transition: border-color .2s; }
.jump a span { color: var(--amber); font-size: .78rem; }
.jump a:hover { border-color: var(--accent); }
.tbl-wrap { overflow-x: auto; margin-top: 40px; border: 1px solid var(--line); background: var(--surface); }
.svc-tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.svc-tbl th, .svc-tbl td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.svc-tbl thead th { font: 500 .72rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); background: var(--bg-2); }
.svc-tbl tbody th a { font: 700 1.08rem var(--f-display); font-stretch: var(--stretch-display); color: var(--text); text-decoration: none; }
.svc-tbl tbody th a:hover { color: var(--accent); }
.svc-tbl td { color: var(--muted); font-size: .94rem; }
.svc-tbl td.mono { font-size: .8rem; font-weight: 400; }
.svc-tbl tbody tr:last-child > * { border-bottom: 0; }

/* Formularios */
.quote-g { display: grid; gap: 18px; padding-block: 44px 88px; }
@media (min-width: 980px) { .quote-g { grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; } }
.quote, .acct-form fieldset { display: grid; gap: 16px; }
.acct-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.acct-form fieldset[disabled] { opacity: .62; }
.row2 { display: grid; gap: 16px; }
@media (min-width: 640px) { .row2 { grid-template-columns: 1fr 1fr; } }
.quote label, .acct-form label { display: grid; gap: 7px; font-weight: 600; font-size: .92rem; color: var(--text); }
.quote label small, .acct-form label small { font-weight: 400; color: var(--faint); }
.quote input, .quote select, .quote textarea, .acct-form input, .acct-form select {
  width: 100%; min-height: 48px; padding: 11px 13px; font: 400 1rem var(--f-body); color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; transition: border-color .2s;
}
.quote textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.quote input:focus, .quote select:focus, .quote textarea:focus, .acct-form input:focus, .acct-form select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.quote ::placeholder, .acct-form ::placeholder { color: var(--faint); }
.quote .cta { margin-top: 4px; align-items: center; }
.form-msg { color: var(--amber); font-size: .92rem; min-height: 1.3em; }
.acct-form .chk { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--muted); }
.acct-form .chk input { width: 20px; min-height: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.code-in { font-family: var(--f-mono) !important; letter-spacing: .3em; font-size: 1.3rem !important; text-transform: uppercase; }
.code-in.wide { letter-spacing: .14em; font-size: 1.1rem !important; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
.btn.sm { min-height: 38px; padding: 0 14px; font-size: .86rem; --cut: 8px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--faint); font: 500 .74rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.alt-links { color: var(--muted); font-size: .92rem; }

/* Avisos y pasos */
.notice { grid-column: 1 / -1; border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line)); border-left: 4px solid var(--amber); background: var(--amber-soft); padding: 14px 18px; color: var(--text); font-size: .95rem; }
.notice b { color: var(--text); }
.stepper { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 .8rem var(--f-mono); color: var(--faint); }
.stepper li { display: inline-flex; gap: 8px; align-items: center; }
.stepper span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line); font-size: .74rem; }
.stepper [aria-current] { color: var(--text); }
.stepper [aria-current] span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.example-tag { grid-column: 1 / -1; color: var(--amber); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }

/* Cursos */
.courses { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--text); }
.courses li { border-bottom: 1px solid var(--line); }
.courses a { display: grid; grid-template-columns: 3.8rem 1fr; gap: 10px 18px; padding: 24px 6px; color: var(--text); text-decoration: none; transition: background .2s var(--ease); }
.courses .code { color: var(--amber); font-size: .84rem; grid-row: span 3; padding-top: 6px; }
.courses .ct b { display: block; font: 700 clamp(1.25rem, 2.4vw, 1.6rem)/1.15 var(--f-display); font-stretch: var(--stretch-display); letter-spacing: -.02em; }
.courses .ct .d { display: block; color: var(--muted); margin-top: 6px; max-width: 44rem; }
.courses .cm { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--faint); font-size: .8rem; font-weight: 400; }
.courses .state { justify-self: start; }
.courses a:hover { background: var(--accent-soft); }
@media (min-width: 980px) {
  .courses a { grid-template-columns: 4.4rem minmax(0, 1fr) 13rem 9.5rem; align-items: center; padding: 26px 10px; }
  .courses .code { grid-row: auto; padding: 0; }
  .courses .cm { flex-direction: column; }
  .courses .state { justify-self: end; }
}
.course-g { display: grid; gap: 28px; padding-block: 44px 88px; }
@media (min-width: 980px) { .course-g { grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; } .course-g .buy { position: sticky; top: 92px; } }
.course-main { display: grid; gap: 40px; }
.course-main h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-bottom: 16px; }
.course-main p { color: var(--muted); }
.syllabus { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.syllabus li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.syllabus .mono { color: var(--accent); font-size: .82rem; padding-top: 4px; }
.syllabus b { font: 700 1.12rem var(--f-display); font-stretch: var(--stretch-display); }
.syllabus p { font-size: .94rem; margin-top: 4px; }
.buy .amount b { font: 700 1.9rem/1.1 var(--f-display); font-stretch: var(--stretch-display); letter-spacing: -.02em; }
.buy .state { justify-self: start; }

/* Inscripción */
.checkout { display: grid; gap: 22px; padding-block: 36px 88px; }
.checkout h2 { font-size: 1.5rem; }
.sum-row { display: grid; gap: 6px 18px; align-items: center; padding-top: 4px; }
@media (min-width: 820px) { .sum-row { grid-template-columns: auto 1fr auto auto; } }
.sum-row .code { color: var(--amber); }
.sum-row b { font-family: var(--f-display); font-stretch: var(--stretch-display); font-size: 1.15rem; }
.sum-row .mono { color: var(--faint); font-size: .82rem; font-weight: 400; }
.sum-row .amount { color: var(--text); }
.co-pay h2 { margin-bottom: 16px; }
.pay-g { display: grid; gap: 18px; }
@media (min-width: 980px) { .pay-g { grid-template-columns: repeat(3, 1fr); } }
.pay h3 { font-size: 1.3rem; }
.pay .ic { width: 46px; height: 46px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.pay .ic svg { width: 24px; height: 24px; }
.pay .btn { margin-top: auto; }
.qr { width: 180px; height: 180px; border: 1px solid var(--line); background: #fff; }
.qr.ph { display: grid; place-items: center; background: var(--bg-2); color: var(--faint); border-style: dashed; }
.qr.ph svg { width: 54px; height: 54px; }

/* Cuenta */
.acct-g2 { display: grid; gap: 18px; padding-block: 36px 88px; }
@media (min-width: 940px) { .acct-g2 { grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: start; } }
.acct-g2 > .card > .ic { width: 46px; height: 46px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.acct-g2 > .card > .ic svg { width: 24px; height: 24px; }
.acct-side .checks li { color: var(--muted); }
.dash { display: grid; gap: 18px; padding-block: 36px 88px; }
@media (min-width: 940px) { .dash { grid-template-columns: 1fr 1fr; } .dash-lic { grid-column: 1 / -1; } }
.dash h2 { font-size: 1.4rem; display: flex; gap: 12px; align-items: baseline; }
.dash .count { font-size: .8rem; color: var(--faint); font-weight: 400; }
.dtbl { width: 100%; border-collapse: collapse; font-size: .94rem; }
.dash-lic { overflow-x: auto; }
.dtbl th, .dtbl td { text-align: left; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dtbl th { font: 500 .7rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.devs, .reqs { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 0 !important; }
.devs li { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.devs .ic { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--accent); }
.devs .ic svg { width: 20px; height: 20px; }
.devs b { display: block; color: var(--text); font-weight: 600; }
.devs .mono { font-size: .76rem; color: var(--faint); font-weight: 400; }
.reqs li { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.card.danger { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }

/* Cómo funciona */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.flow li { position: relative; padding: 0 0 26px 34px; border-left: 2px solid var(--accent); margin-left: 8px; display: grid; gap: 4px; }
.flow li:last-child { border-left-color: transparent; }
.flow li::before { content: ""; position: absolute; left: -9px; top: 2px; width: 16px; height: 16px; background: var(--bg); border: 2px solid var(--accent); }
.flow .num { color: var(--accent); font-size: .78rem; }
.flow b { font: 700 1.4rem/1.1 var(--f-display); font-stretch: var(--stretch-display); }
.flow p { color: var(--muted); font-size: .95rem; max-width: 22rem; }
@media (min-width: 980px) {
  .flow { grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--accent); }
  .flow li, .flow li:last-child { border-left: 0; margin: 0; padding: 30px 20px 0 0; }
  .flow li::before { left: 0; top: -9px; }
}
.arch-g { display: grid; gap: 36px; }
@media (min-width: 1040px) { .arch-g { grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; } }
.arch-g h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 14px 0 16px; }
.arch-g .checks { margin-top: 22px; }
.arch-ill { border: 1px solid var(--line); background: var(--surface); padding: 10px; }
.two-ways { display: grid; gap: 18px; }
@media (min-width: 820px) { .two-ways { grid-template-columns: 1fr 1fr; } }
.two-ways h3 { font-size: 1.5rem; }
details.qa { background: var(--surface); border: 1px solid var(--line); margin-bottom: 8px; }
details.qa summary { cursor: pointer; list-style: none; padding: 18px 54px 18px 20px; font-weight: 600; position: relative; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
details.qa[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
details.qa[open] summary { color: var(--accent); }
details.qa p { padding: 0 20px 20px; color: var(--muted); }

/* Cabecera v6: cuenta visible en móvil, CTA corto */
@media (max-width: 400px) { .acct-btn { display: none; } }
.hero .copy-col { min-width: 0; }
@media (max-width: 600px) { .dim span { white-space: normal; text-align: center; } }
@media (min-width: 1040px) { .foot .wrap { grid-template-columns: 1.5fr repeat(4, 1fr); } }
.acct-band { background: var(--bg-2); }
.drone-ill svg, .svc-ill svg { width: 100%; height: auto; }
.card .stepper { padding-left: 0; display: flex; }
.card .mini-steps { padding-left: 0; }
.acct-form .chk span { flex: 1; }
@media (max-width: 600px) { .hero .dim::before, .hero .dim::after { display: none; } .hero .dim span { text-align: left; } }

/* =====================================================================
   v7 · Producto y precios al estilo de los grandes fabricantes de CAD
   - Subnavegación fija del producto con la sección activa (Autodesk, Vectorworks)
   - Precios con selector de periodo, tres niveles y comparación (página «Comprar»)
   - Garantías de pago junto a los precios (confianza antes de pagar)
   - Menú desplegable de Software y Servicios (catálogo por disciplina, CYPE)
   ===================================================================== */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Subnavegación de producto */
.pnav { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 25; }
.pnav .wrap { display: flex; align-items: center; gap: 18px; min-height: 54px; }
.pn-name { display: none; font: 700 1rem var(--f-display); font-stretch: var(--stretch-display); white-space: nowrap; }
.pn-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.pn-links::-webkit-scrollbar { display: none; }
.pn-links a { color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 500; padding: 16px 12px; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.pn-links a:hover { color: var(--text); }
.pn-links a.on { color: var(--text); border-bottom-color: var(--accent); }
.pn-cta { display: none !important; }
@media (min-width: 900px) {
  .pnav { position: sticky; top: 66px; }
  .pn-name { display: block; padding-right: 16px; border-right: 1px solid var(--line); }
  .pn-cta { display: inline-flex !important; min-height: 38px !important; padding: 0 16px !important; font-size: .88rem !important; --cut: 9px; }
}
html { scroll-padding-top: 132px; }

/* Precios: tres niveles */
.sc-plans { align-items: stretch; }
@media (min-width: 900px) { .sc-plans { grid-template-columns: 1fr 1.12fr 1fr; } }
.sc-plans .plan { padding: 30px clamp(20px, 2.6vw, 30px); gap: 18px; }
.sc-plans .plan header { display: block; }
.sc-plans .plan h3 { font-size: 1.9rem; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sc-plans .plan .btn { width: 100%; }
.sc-plans .plan .checks { border-top: 1px solid var(--line); padding-top: 18px; }
.sc-plans .price { min-height: 92px; align-content: center; }
.plan.team { border-style: dashed; }
.per-in { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: var(--bg-2); padding: 3px; gap: 3px; }
.seg label { text-align: center; padding: 9px 6px; font-size: .86rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.seg label:hover { color: var(--text); }
.per-in:nth-of-type(1):checked ~ .seg label:nth-child(1),
.per-in:nth-of-type(2):checked ~ .seg label:nth-child(2),
.per-in:nth-of-type(3):checked ~ .seg label:nth-child(3) { background: var(--accent); color: var(--accent-ink); }
.per-in:nth-of-type(1):focus-visible ~ .seg label:nth-child(1),
.per-in:nth-of-type(2):focus-visible ~ .seg label:nth-child(2),
.per-in:nth-of-type(3):focus-visible ~ .seg label:nth-child(3) { outline: 2px solid var(--amber); outline-offset: 2px; }
.pps { min-height: 92px; }
.pp { display: none; gap: 4px; }
.pp b { font: 600 2.6rem/1 var(--f-mono); letter-spacing: -.03em; color: var(--text); }
.pp span { color: var(--muted); font-size: .92rem; }
.pp small { color: var(--amber); font: 500 .78rem var(--f-mono); }
.per-in:nth-of-type(1):checked ~ .pps .pp0,
.per-in:nth-of-type(2):checked ~ .pps .pp1,
.per-in:nth-of-type(3):checked ~ .pps .pp2 { display: grid; }

/* Garantías de pago */
.secure-pay { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 820px) { .secure-pay { grid-template-columns: repeat(3, 1fr); } }
.secure-pay li { background: var(--bg-2); padding: 18px 20px 18px 54px; position: relative; display: grid; gap: 4px; }
.secure-pay li::before { content: ""; position: absolute; left: 20px; top: 20px; width: 20px; height: 20px; border: 1.6px solid var(--green); border-radius: 50%; }
.secure-pay li::after { content: ""; position: absolute; left: 26px; top: 26px; width: 8px; height: 4px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.secure-pay b { font-weight: 700; }
.secure-pay span { color: var(--muted); font-size: .9rem; }

/* Comparación de planes */
.compare { margin-top: 28px; border: 1px solid var(--line); background: var(--surface); }
.compare summary { cursor: pointer; list-style: none; padding: 18px 22px; font: 700 1.25rem var(--f-display); font-stretch: var(--stretch-display); position: relative; }
.compare summary::-webkit-details-marker { display: none; }
.compare summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.compare[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.compare .tbl-wrap { margin: 0; border: 0; border-top: 1px solid var(--line); }
.cmp { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .94rem; }
.cmp th, .cmp td { padding: 13px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.cmp thead th { font: 500 .72rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); background: var(--bg-2); }
.cmp thead th.hot { color: var(--accent); }
.cmp tbody th { font-weight: 600; width: 34%; }
.cmp td { color: var(--muted); width: 22%; }
.cmp td:nth-of-type(2) { background: var(--accent-soft); color: var(--text); }
.cmp td.n { color: var(--faint); }
.cmp .ok { display: inline-block; width: 10px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg) translateY(-2px); }
.cmp tbody tr:last-child > * { border-bottom: 0; }
#precios .pass { margin-top: 28px; }

/* Menú desplegable (empresa) */
.mm { position: relative; display: flex; }
.mm > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: .7; }
.mm-p { position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%); width: min(660px, 90vw); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 22px; display: none; gap: 20px; z-index: 40; }
.mm:hover .mm-p, .mm:focus-within .mm-p { display: grid; }
.mm-p::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.menu .mm-p a { padding: 0; box-shadow: none !important; color: var(--text); }
.mm-prod { display: grid; grid-template-columns: 56px 1fr; gap: 4px 16px; padding: 14px !important; border: 1px solid var(--line); background: var(--bg-2); text-decoration: none; }
.mm-prod img { grid-row: span 3; width: 56px; height: 56px; }
.mm-prod b { font: 700 1.15rem var(--f-display); font-stretch: var(--stretch-display); }
.mm-prod span { color: var(--muted); font-size: .88rem; line-height: 1.45; }
.mm-prod:hover { border-color: var(--accent); }
.mm-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9rem; }
.menu .mm-links a { color: var(--accent); font-weight: 600; }
.mm-p.cols { grid-template-columns: repeat(3, 1fr); width: min(820px, 92vw); }
.mm-col h4 { font: 500 .7rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; font-stretch: 100%; }
.mm-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.menu .mm-col a { font-size: .93rem; font-weight: 500; }
.menu .mm-col a:hover, .menu .mm-p a:hover { color: var(--accent); }
.mm-foot { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 14px; font-size: .9rem; }
.compare { overflow: hidden; max-width: 100%; min-width: 0; }
.cmp td, .cmp th { position: relative; }

/* =====================================================================
   v8 · REDISEÑO «AZUL MARINO»
   Referencias: Autodesk (cabecera y portadas oscuras, mucho aire, botones
   sobrios), estudios de arquitectura e ingeniería de alto nivel (títulos en
   serif, detalles en oro) y nuestra identidad de plano técnico (curvas de
   nivel, retícula, cotas).
   - Letras: Newsreader (títulos) + Instrument Sans (texto) + Plex Mono.
   - Cabecera, portadas, banda de cierre y pie: siempre azul marino.
   - Acentos: cian de la app (enlaces, selección) y oro (detalles, cifras).
   ===================================================================== */
:root {
  --bg: #07111F; --bg-2: #0A182B; --surface: #0E1F36; --surface-2: #132946; --line: #1E3555; --line-2: #2A4670;
  --grid-minor: rgba(156, 195, 240, .035); --grid-major: rgba(156, 195, 240, .07);
  --text: #EEF3FA; --muted: #A9B8CC; --faint: #8497B0;
  --accent: #5FD0EE; --accent-ink: #06101D; --accent-soft: rgba(95, 208, 238, .11);
  --amber: #D9B46A; --amber-soft: rgba(217, 180, 106, .13); --green: #7FD6A2; --wall: #DCE6F2;
  --primary: #F1F5FB; --primary-ink: #0A1628;
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 30px 60px -30px rgba(0, 0, 0, .75);
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --radius: 16px; --radius-s: 10px;
  --navy-1: #0D2140; --navy-2: #081427; --navy-3: #050C18;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F5F6F8; --bg-2: #ECEFF4; --surface: #FFFFFF; --surface-2: #F3F5F8; --line: #DCE2EB; --line-2: #C7D0DD;
    --grid-minor: rgba(11, 27, 51, .035); --grid-major: rgba(11, 27, 51, .06);
    --text: #0B1B33; --muted: #4A5A70; --faint: #5E6D83;
    --accent: #0B6E8E; --accent-ink: #FFFFFF; --accent-soft: rgba(11, 110, 142, .08);
    --amber: #8A6416; --amber-soft: rgba(176, 132, 46, .12); --green: #0B7A4E; --wall: #0B1B33;
    --primary: #0B1B33; --primary-ink: #FFFFFF;
    --shadow: 0 1px 2px rgba(11, 27, 51, .05), 0 24px 48px -28px rgba(11, 27, 51, .28);
  }
}
:root[data-theme="light"] {
  --bg: #F5F6F8; --bg-2: #ECEFF4; --surface: #FFFFFF; --surface-2: #F3F5F8; --line: #DCE2EB; --line-2: #C7D0DD;
  --grid-minor: rgba(11, 27, 51, .035); --grid-major: rgba(11, 27, 51, .06);
  --text: #0B1B33; --muted: #4A5A70; --faint: #5E6D83;
  --accent: #0B6E8E; --accent-ink: #FFFFFF; --accent-soft: rgba(11, 110, 142, .08);
  --amber: #8A6416; --amber-soft: rgba(176, 132, 46, .12); --green: #0B7A4E; --wall: #0B1B33;
  --primary: #0B1B33; --primary-ink: #FFFFFF;
  --shadow: 0 1px 2px rgba(11, 27, 51, .05), 0 24px 48px -28px rgba(11, 27, 51, .28);
}

/* Bandas siempre azul marino (en los dos temas) */
.top, .pnav, .hero, .page-head, .ctaband, .foot, .drone, .final, .err, .helpband, .acct-band {
  --bg: #07111F; --bg-2: #0A182B; --surface: #0F2139; --surface-2: #142A48; --line: #1F3758; --line-2: #2C4A74;
  --grid-minor: rgba(156, 195, 240, .035); --grid-major: rgba(156, 195, 240, .07);
  --text: #EEF3FA; --muted: #A9B8CC; --faint: #8DA0B8;
  --accent: #5FD0EE; --accent-ink: #06101D; --accent-soft: rgba(95, 208, 238, .11);
  --amber: #D9B46A; --amber-soft: rgba(217, 180, 106, .13); --green: #7FD6A2; --wall: #DCE6F2;
  --primary: #F1F5FB; --primary-ink: #0A1628;
  --logo-dark: inline; --logo-light: none;
  color: var(--text); color-scheme: dark;
}

/* Base */
body { font: 400 1.0625rem/1.66 var(--f-body); letter-spacing: 0; font-feature-settings: "ss01", "kern"; }
::selection { background: rgba(95, 208, 238, .28); }
h1, h2 { font-family: var(--serif); font-weight: 400; font-stretch: normal !important; letter-spacing: -.018em; line-height: 1.04; font-variation-settings: "opsz" 72; }
h3, h4 { font-family: var(--f-display); font-weight: 600; font-stretch: 100% !important; letter-spacing: -.012em; }
h1 em, h2 em { font-style: italic; color: var(--amber); font-weight: 400; }
.lead { font-size: clamp(1.06rem, 1.7vw, 1.2rem); line-height: 1.65; }
.kicker { font: 500 .7rem/1.2 var(--f-mono); letter-spacing: .2em; color: var(--amber); gap: 12px; }
.kicker::before { width: 26px; height: 1px; transform: none; background: currentColor; opacity: .8; }
section.band { padding-block: 96px; }
@media (min-width: 1100px) { section.band { padding-block: 120px; } }
section.band.alt { background: var(--bg-2); }
.sec-head h2, .split-head h2, .idx-head h2, .soft-g h2, .drone h2, .arch-g h2, .buy-how h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 400; }
.sec-head { gap: 18px; margin-bottom: 56px; }

/* Cabecera azul marino con vidrio */
.top { background: rgba(7, 17, 31, .82); border-bottom: 1px solid rgba(156, 195, 240, .12); }
.top .wrap { min-height: 72px; }
.menu a { color: #B9C6D8; font-weight: 500; font-size: .94rem; letter-spacing: .005em; }
.menu a:hover, .menu a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--amber); }
.co-word { font: 600 .98rem/1 var(--f-body) !important; letter-spacing: .26em !important; font-stretch: 100% !important; color: #fff; }
.co-word span { font-weight: 400 !important; color: var(--amber) !important; letter-spacing: .26em !important; }
.brand b { font-family: var(--f-body); font-weight: 600; font-stretch: 100% !important; letter-spacing: .01em; }
.icon-btn, .lang summary { border-radius: var(--radius-s); background: rgba(255, 255, 255, .04); border-color: var(--line); }
.icon-btn:hover, .lang summary:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .08); }
.pop, .mm-p { border-radius: var(--radius); }
.util { background: #050C18; border-bottom-color: rgba(156, 195, 240, .1); }
@media (min-width: 900px) { .pnav { top: 72px; } }
html { scroll-padding-top: 140px; }

/* Botones: rectángulo sobrio con radio, sin corte (el corte queda en el logo) */
.btn {
  clip-path: none; border-radius: var(--radius-s); min-height: 52px; padding: 0 24px; font: 600 .98rem/1.1 var(--f-body);
  font-stretch: 100% !important; letter-spacing: .005em; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -14px rgba(0, 0, 0, .55);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-1px); filter: none; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 16px 30px -14px rgba(0, 0, 0, .6); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line-2); box-shadow: none; }
.btn.ghost:hover { border-color: var(--text); background: rgba(127, 160, 200, .06); }
.btn.amber { background: linear-gradient(180deg, #E4C27E, #C9A157); color: #0A1628; }
.top .btn { min-height: 40px; border-radius: 9px; padding: 0 18px; font-size: .9rem; }
.top .co-cta { background: linear-gradient(180deg, #E4C27E, #C9A157); color: #0A1628; }
.btn[disabled] { box-shadow: none; transform: none; }

/* Portadas: degradado azul marino, curvas de nivel y retícula que se desvanece */
.hero, .page-head, .final, .err {
  background:
    url("../img/fondos/curvas.svg") right -6% top -18% / min(1250px, 120%) auto no-repeat,
    radial-gradient(900px 520px at 88% -6%, rgba(95, 208, 238, .17), transparent 62%),
    radial-gradient(760px 520px at -6% 108%, rgba(217, 180, 106, .11), transparent 60%),
    linear-gradient(180deg, var(--navy-1) 0%, var(--navy-2) 58%, var(--navy-3) 100%);
  border-bottom: 1px solid rgba(156, 195, 240, .12);
}
.hero.grid-bg::before, .page-head.grid-bg::before, .final.grid-bg::before, .err.grid-bg::before, .helpband.grid-bg::before {
  background-image: url("../img/fondos/reticula.svg"); background-size: 120px 120px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 25%, transparent 80%);
}
.hero h1 { font-size: clamp(2.9rem, 6.4vw, 5.6rem); line-height: .98; letter-spacing: -.025em; font-weight: 400; }
.hero h1 .lt { font-weight: 400 !important; }
.hero h1 .lt em, .hero h1 em { font-weight: 400 !important; color: var(--amber); font-style: italic; }
.hero .lead { color: #B8C6D9; }
.hero .dim { color: var(--amber); }
.page-head .wrap { padding-block: 72px 64px; }
.page-head h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.page-head p { color: #B8C6D9; }
.crumbs, .crumbs a { color: #8DA0B8; }
.co-visual .ill, .phone { filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .45)); }
.co-visual .ill rect:first-child { rx: 14px; }
.callout { border-radius: 12px; background: rgba(15, 33, 57, .78); border-color: rgba(156, 195, 240, .18); color: #A9B8CC; }
.pill { border-radius: 999px; background: rgba(255, 255, 255, .05); border-color: rgba(156, 195, 240, .2); }
.hero .spec { border-radius: var(--radius); overflow: hidden; background: rgba(156, 195, 240, .14); border-color: rgba(156, 195, 240, .14); }
.hero .spec div { background: rgba(10, 24, 43, .72); }
.hero .spec b { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; }

/* Tarjetas y superficies: radio, borde fino y degradado leve */
.card, .appcard, .plan, .faq details, details.qa, .compare, .tbl-wrap, .notice, .pass, .extra > div, .file, .integ > div,
.voices, .mm-prod, .jump a, .copy .mail, .quote input, .quote select, .quote textarea, .acct-form input, .acct-form select, .seg, .drone-ill, .arch-ill, .svc-ill, .soon-page .illu {
  border-radius: var(--radius);
}
.copy .mail, .quote input, .quote select, .quote textarea, .acct-form input, .acct-form select, .jump a, .seg, .notice { border-radius: var(--radius-s); }
.seg label { border-radius: 7px; }
.card, .appcard, .plan, .extra > div, .file, .integ > div {
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 82%, var(--bg)) 100%);
  box-shadow: var(--shadow);
}
.appcard, .plan, .card, .integ > div, .file { transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.appcard:hover, .integ > div:hover, .file:hover { transform: translateY(-3px); border-color: var(--line-2); }
.svcs, .who, .steps, .agenda, .secure-pay, .vs, .helplist { border-radius: var(--radius); overflow: hidden; }
.who > div, .steps li, .agenda a, .svc { background: var(--surface); }

/* Listas grandes en serif (índice, cadena, filas, cursos, planes) */
.idx b, .chain b, .soft-row b, .courses .ct b, .flow b, .appcard h3, .plan h3, .sc-plans .plan h3, .spot-tx h2, .two-ways h3, .plans-h h3 {
  font-family: var(--serif) !important; font-weight: 400 !important; letter-spacing: -.015em; font-stretch: normal !important;
}
.idx b { font-size: clamp(1.45rem, 2.6vw, 2.05rem); }
.idx { border-top: 1px solid var(--text); }
.idx a { padding-block: 26px; }
.idx .code, .courses .code, .agenda .code, .chain .num { color: var(--amber); }
.chain b { font-size: 1.9rem; }
.soft-row b { font-size: 1.7rem; }
.courses .ct b { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.agenda b { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; letter-spacing: -.01em; font-stretch: normal !important; }
.plan h3, .sc-plans .plan h3 { font-size: 2.2rem; }
.flow b { font-size: 1.7rem; }
.appcard h3 { font-size: 2.1rem; }

/* Cifras de precios en serif */
.pp b, .price b, .plan .amount b, .buy .amount b, .prices b {
  font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(2.6rem, 4vw, 3.4rem) !important;
  letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; font-stretch: normal !important;
}
.plan.pro, .plan.hot { border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), var(--shadow); }
.plan .badge { border-radius: 999px; padding: 7px 12px; background: linear-gradient(180deg, #E4C27E, #C9A157); color: #0A1628; }
.secure-pay li { background: var(--surface); }

/* Producto destacado y franjas */
.spot { background: radial-gradient(800px 500px at 15% 50%, var(--accent-soft), transparent 70%), var(--bg-2); }
.fsheet { border-top-color: var(--line-2); }
.drone { background: url("../img/fondos/curvas.svg") left -10% bottom -30% / 1100px auto no-repeat, linear-gradient(180deg, var(--navy-2), var(--navy-3)); }
.acct-band { background: linear-gradient(90deg, var(--navy-1), var(--navy-2)); border-block: 1px solid rgba(156, 195, 240, .12); }
.acct-band h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.acct-band .ic.big { border-radius: 14px; background: rgba(217, 180, 106, .14); color: var(--amber); }

/* Banda de llamada final */
.ctaband {
  background: url("../img/fondos/curvas.svg") right -10% center / 900px auto no-repeat,
              radial-gradient(700px 300px at 80% 50%, rgba(217, 180, 106, .14), transparent 70%),
              linear-gradient(90deg, var(--navy-1), var(--navy-3));
  border-top: 0; border-bottom: 0; position: relative;
}
.ctaband::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--amber), transparent); }
.ctaband .wrap { padding-block: 64px; }
.ctaband h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.02em; }
.ctaband p { color: #B8C6D9; }

/* Pie */
.foot { background: url("../img/fondos/curvas.svg") right -20% bottom -40% / 1000px auto no-repeat, linear-gradient(180deg, var(--navy-2), var(--navy-3)); border-top: 1px solid rgba(156, 195, 240, .1); padding-block: 72px 56px; }
.foot b { font-family: var(--f-body); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); font-stretch: 100% !important; }
.foot .wrap > div:first-child b { font-family: var(--serif); text-transform: none; letter-spacing: -.01em; font-size: 1.5rem; font-weight: 400; color: #fff; }
.foot a { color: #B9C6D8; }
.foot a:hover { color: #fff; }

/* Formularios y pasos */
.quote input:focus, .quote select:focus, .quote textarea:focus, .acct-form input:focus, .acct-form select:focus { outline: 3px solid var(--accent-soft); outline-offset: 0; border-color: var(--accent); }
.stepper span { border-radius: 50%; }
.mini-steps li { border-top-color: var(--amber); }
.mini-steps li::before { color: var(--amber); }
.mini-steps.v li { border-left-color: var(--amber); }
.steps li::before { color: var(--amber); }
.flow { border-top-color: var(--amber) !important; }
.flow li { border-left-color: var(--amber); }
.flow li::before { border-color: var(--amber); border-radius: 50%; }
.flow .num { color: var(--amber); }
.chain { border-top-color: var(--amber); }
.chain .tick { border-radius: 50%; transform: none; }
.state { border-radius: 999px; padding: 5px 10px; }
.notice { border-left-width: 1px; background: var(--amber-soft); }
.svc-tbl, .cmp, .dtbl { font-variant-numeric: tabular-nums; }
.svc-tbl tbody th a { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; font-stretch: normal !important; }
.mm-prod b, .mm-col h4 { font-stretch: normal !important; }
.mm-prod b { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; }
.mm-p { background: #0D1D33; border-color: #1F3758; }
.menu .mm-p a { color: #EEF3FA; }
.mm-prod { background: #0A182B; border-color: #1F3758; }
.mm-prod span { color: #A9B8CC; }
.mm-foot { border-top-color: #1F3758; }
.mm-col h4 { color: #D9B46A; }
.menu .mm-links a, .mm-foot a { color: #5FD0EE; }
.announce { background: linear-gradient(90deg, #0B1A30, #0E2443); border-block: 1px solid rgba(156, 195, 240, .12); color: #DCE6F2; }
.announce a { color: #E4C27E; }
.extra { grid-template-columns: 1fr !important; }
.helpband.grid-bg::before { opacity: .6; }
.spot { position: relative; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) section.band.alt { background-image: url("../img/fondos/reticula-clara.svg"); background-size: 120px 120px; } }
:root[data-theme="light"] section.band.alt { background-image: url("../img/fondos/reticula-clara.svg"); background-size: 120px 120px; }
@media (max-width: 520px) {
  .co-word { font-size: .8rem !important; letter-spacing: .14em !important; }
  .co-word span { letter-spacing: .14em !important; }
  .top .wrap { min-height: 64px; }
}


/* =====================================================================
   v9 · LETRAS CON CARÁCTER PROPIO
   - Títulos: Gloock, serif de alto contraste (más presencia que una serif
     editorial común).
   - Rótulos, códigos y etiquetas: Michroma, ancha y técnica, como la rotulación
     de un instrumento de medición. Reemplaza la mono dorada.
   - Palabra destacada: ya no va en cursiva dorada; lleva debajo una línea de
     cota con sus dos marcas, el gesto propio de Montek.
   ===================================================================== */
:root { --serif: "Gloock", "Iowan Old Style", Georgia, serif; --f-tech: "Michroma", "Eurostile", "Arial Black", sans-serif; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; font-variation-settings: normal; }
.hero h1 { font-size: clamp(2.7rem, 6vw, 5.2rem); line-height: 1.02; letter-spacing: -.012em; }
.page-head h1 { letter-spacing: -.01em; }

/* Palabra destacada con línea de cota */
h1 em, h2 em, .hero h1 em, .hero h1 .lt em {
  font-style: normal !important; color: inherit !important; font-weight: 400 !important;
  position: relative; display: inline-block; padding-bottom: .16em; white-space: nowrap;
}
h1 em::after, h2 em::after { content: ""; position: absolute; left: .04em; right: .04em; bottom: 0; height: 2px; background: var(--amber); }
h1 em::before, h2 em::before { content: ""; position: absolute; left: .04em; right: .04em; bottom: -.12em; height: .3em; border-left: 2px solid var(--amber); border-right: 2px solid var(--amber); }

/* Rótulos técnicos (antes mono dorada) */
.kicker, .dim, .dim span, .idx .code, .courses .code, .agenda .code, .sum-row .code, .chain .num, .flow .num, h3.mini,
.foot b, .mm-col h4, .who .tag, .state, .plan .badge, .fsheet dt, .cmp thead th, .svc-tbl thead th, .dtbl th, .idx-note,
.example-tag, .stepper, .badge, .tag, .extra-tag {
  font-family: var(--f-tech) !important; font-weight: 400 !important; font-stretch: normal !important;
  text-transform: uppercase; font-style: normal;
}
.kicker { font-size: .62rem; letter-spacing: .2em; line-height: 1.5; }
.hero .dim, .dim { font-size: .66rem; letter-spacing: .16em; line-height: 1.7; }
.dim span { white-space: normal; text-align: center; }
.idx .code, .courses .code, .agenda .code, .sum-row .code { font-size: .66rem; letter-spacing: .1em; }
.chain .num, .flow .num { font-size: .64rem; letter-spacing: .12em; }
.steps li::before, .mini-steps li::before { font-family: var(--f-tech); font-size: .6rem; letter-spacing: .16em; }
h3.mini { font-size: .6rem; letter-spacing: .2em; }
.foot b { font-size: .62rem !important; letter-spacing: .2em !important; }
.foot .wrap > div:first-child b { font-family: var(--serif) !important; text-transform: none; letter-spacing: 0 !important; font-size: 1.5rem !important; }
.mm-col h4 { font-size: .58rem; letter-spacing: .16em; }
.state, .badge, .plan .badge { font-size: .56rem !important; letter-spacing: .14em !important; line-height: 1.4; }
.who .tag { font-size: .58rem; letter-spacing: .16em; }
.fsheet dt { font-size: .58rem; letter-spacing: .14em; }
.cmp thead th, .svc-tbl thead th, .dtbl th { font-size: .58rem !important; letter-spacing: .14em !important; }
.idx-note, .example-tag { font-size: .58rem; letter-spacing: .16em; }
.stepper { font-size: .6rem; letter-spacing: .12em; }
.crumbs { font-family: var(--f-body); font-weight: 500; font-size: .86rem; letter-spacing: .01em; }

/* Títulos de listas y cifras en Gloock */
.idx b, .chain b, .soft-row b, .courses .ct b, .flow b, .appcard h3, .plan h3, .sc-plans .plan h3, .spot-tx h2, .two-ways h3,
.plans-h h3, .agenda b, .svc-tbl tbody th a, .mm-prod b, .acct-band h2, .ctaband h2, .hero .spec b,
.pp b, .price b, .plan .amount b, .buy .amount b, .prices b { font-family: var(--serif) !important; letter-spacing: -.01em !important; }
.idx b { font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
.chain b { font-size: 1.7rem; }
.soft-row b { font-size: 1.55rem; }
.pp b, .price b, .plan .amount b, .buy .amount b { font-size: clamp(2.4rem, 3.6vw, 3.1rem) !important; }
@media (max-width: 520px) {
  .hero h1 { font-size: clamp(2.5rem, 11vw, 3.2rem); }
  .kicker { font-size: .58rem; letter-spacing: .16em; }
  .hero .dim, .dim { font-size: .6rem; letter-spacing: .12em; }
}
.hero .dim { margin-top: 30px; }
.hero h1 em::before { bottom: -.1em; }
.pp b, .price b, .plan .amount b, .buy .amount b, .prices b, .hero .spec b { font-family: "Montek Cifras", var(--serif) !important; }

/* =====================================================================
   v10 · Rótulos en versalitas clásicas (Cormorant SC) en lugar de Michroma
   Las minúsculas se dibujan como mayúsculas pequeñas: por eso no se fuerza
   text-transform y el texto conserva mayúscula inicial.
   ===================================================================== */
:root { --f-tech: "Cormorant SC", "Cormorant Garamond", Georgia, serif; }
.kicker, .dim, .dim span, .idx .code, .courses .code, .agenda .code, .sum-row .code, .chain .num, .flow .num, h3.mini,
.foot b, .mm-col h4, .who .tag, .state, .plan .badge, .fsheet dt, .cmp thead th, .svc-tbl thead th, .dtbl th, .idx-note,
.example-tag, .stepper, .badge, .tag, .extra-tag, .steps li::before, .mini-steps li::before {
  font-family: var(--f-tech) !important; font-weight: 600 !important; text-transform: none !important;
}
.kicker { font-size: 1rem; letter-spacing: .08em; }
.hero .dim, .dim { font-size: 1.08rem; letter-spacing: .05em; line-height: 1.5; }
.idx .code, .courses .code, .agenda .code, .sum-row .code { font-size: 1rem; letter-spacing: .04em; }
.chain .num, .flow .num { font-size: 1rem; letter-spacing: .04em; }
.steps li::before, .mini-steps li::before { font-size: .98rem; letter-spacing: .06em; }
h3.mini { font-size: .98rem; letter-spacing: .08em; }
.foot b { font-size: 1rem !important; letter-spacing: .08em !important; }
.mm-col h4 { font-size: .98rem; letter-spacing: .06em; }
.state, .badge, .plan .badge { font-size: .9rem !important; letter-spacing: .05em !important; line-height: 1; padding: 4px 10px 6px; }
.who .tag, .fsheet dt { font-size: .95rem; letter-spacing: .06em; }
.cmp thead th, .svc-tbl thead th, .dtbl th { font-size: .95rem !important; letter-spacing: .05em !important; }
.idx-note, .example-tag { font-size: .95rem; letter-spacing: .06em; }
.stepper { font-size: .98rem; letter-spacing: .04em; }
@media (max-width: 520px) {
  .kicker { font-size: .95rem; letter-spacing: .07em; }
  .hero .dim, .dim { font-size: 1rem; letter-spacing: .04em; }
}
.idx .code, .courses .code, .agenda .code { font-size: 1.12rem; }
@media (min-width: 900px) { .hero .dim { font-size: 1.15rem; } }

/* =====================================================================
   v11 · TOQUE MÁS ELEGANTE
   Menos es más: dorado champán en vez de amarillo, líneas finas, más aire,
   brillos más suaves y botones más discretos.
   ===================================================================== */
:root, .top, .pnav, .hero, .page-head, .ctaband, .foot, .drone, .final, .err, .helpband, .acct-band { --champagne: #CDB98F; --hair: rgba(205, 185, 143, .45); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --champagne: #866A3A; --hair: rgba(134, 106, 58, .35); } }
:root[data-theme="light"] { --champagne: #866A3A; --hair: rgba(134, 106, 58, .35); }

/* Rótulos: champán, peso medio, más espaciados y discretos */
.kicker, .dim, .dim span, .idx .code, .courses .code, .agenda .code, .chain .num, .flow .num, h3.mini, .foot b, .mm-col h4,
.steps li::before, .mini-steps li::before, .idx-note { color: var(--champagne) !important; font-weight: 500 !important; }
.kicker { font-size: .98rem; letter-spacing: .14em; gap: 14px; }
.kicker::before { width: 34px; background: var(--hair); opacity: 1; }
.hero .dim, .dim { letter-spacing: .12em; }
.hero .dim::before, .hero .dim::after { background: var(--hair); }

/* Títulos: más aire y un poco más contenidos */
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.8rem); line-height: 1.06; letter-spacing: -.008em; }
.sec-head h2, .split-head h2, .idx-head h2, .soft-g h2, .drone h2, .arch-g h2, .buy-how h2 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: 1.08; }
.hero h1 { margin-top: 26px; }
.hero .lead { margin-top: 26px; color: #AEBCCF; font-weight: 400; }
.hero .cta { margin-top: 40px; }
section.band { padding-block: 104px; }
@media (min-width: 1100px) { section.band { padding-block: 136px; } }

/* Línea de cota fina */
h1 em::after, h2 em::after { height: 1px; background: var(--champagne); }
h1 em::before, h2 em::before { border-left-width: 1px; border-right-width: 1px; border-color: var(--champagne); height: .26em; }

/* Portadas: brillos más suaves, línea dorada fina al pie */
.hero, .page-head {
  background:
    url("../img/fondos/curvas.svg") right -6% top -18% / min(1250px, 120%) auto no-repeat,
    radial-gradient(900px 520px at 88% -6%, rgba(95, 208, 238, .10), transparent 62%),
    radial-gradient(760px 520px at -6% 108%, rgba(205, 185, 143, .08), transparent 60%),
    linear-gradient(180deg, #0C1F3C 0%, #081427 58%, #050C18 100%);
  border-bottom: 0; position: relative;
}
.hero::after, .page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--hair), transparent); }
.hero.grid-bg::before, .page-head.grid-bg::before { opacity: .55; }
.top { border-bottom: 1px solid rgba(205, 185, 143, .16); }
.co-word span { color: var(--champagne) !important; }

/* Botones más sobrios */
.btn { min-height: 50px; padding: 0 26px; font-weight: 500; font-size: .95rem; letter-spacing: .02em; border-radius: 8px;
  box-shadow: none; }
.btn:hover { transform: none; box-shadow: 0 10px 30px -16px rgba(0, 0, 0, .55); }
.btn.ghost { border-color: rgba(205, 185, 143, .4); }
.hero .btn.ghost, .page-head .btn.ghost, .drone .btn.ghost, .final .btn.ghost { color: #EEF3FA; }
.btn.ghost:hover { border-color: var(--champagne); background: rgba(205, 185, 143, .06); }
.btn.amber, .top .co-cta { background: transparent; color: var(--champagne); border: 1px solid var(--champagne); }
.btn.amber:hover, .top .co-cta:hover { background: var(--champagne); color: #0A1628; }
.top .btn { border-radius: 8px; font-weight: 500; letter-spacing: .03em; }
.plan .badge { background: transparent; color: var(--champagne); border: 1px solid var(--champagne); }

/* Superficies: bordes finos, sin sombras pesadas */
.card, .appcard, .plan, .extra > div, .file, .integ > div { box-shadow: none; }
.appcard:hover, .integ > div:hover, .file:hover { transform: none; border-color: var(--hair); }
.plan.pro, .plan.hot { box-shadow: none; border-color: var(--hair); }
.idx { border-top: 1px solid var(--hair); }
.idx li { border-bottom-color: var(--line); }
.idx a:hover { background: transparent; padding-inline: 6px; }
.idx a:hover b { color: var(--accent); }
.state { border-color: currentColor; }
.s-prueba, .s-proximamente, .s-borrador { color: var(--champagne); }

/* Banda final y cuenta: más sobrias */
.ctaband { background: linear-gradient(90deg, #0C1F3C, #050C18); }
.ctaband::before { background: linear-gradient(90deg, transparent, var(--hair), transparent); }
.acct-band .ic.big { background: transparent; border: 1px solid var(--hair); color: var(--champagne); }
.foot { border-top: 1px solid rgba(205, 185, 143, .14); }
.hero .dim { margin: 40px 0 0 !important; }
@media (max-width: 520px) { .hero .dim, .dim { letter-spacing: .07em; } .hero .dim { margin-top: 34px !important; } }
.top, .pnav, .hero, .page-head, .ctaband, .foot, .drone, .final, .err, .helpband, .acct-band { --amber: #CDB98F; --amber-soft: rgba(205, 185, 143, .12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --amber: #CDB98F; --amber-soft: rgba(205, 185, 143, .12); } }
:root[data-theme="dark"] { --amber: #CDB98F; --amber-soft: rgba(205, 185, 143, .12); }

/* =====================================================================
   v12 · FOTOS Y VIDEOS REALES
   Cada foto aparece sola cuando su archivo está en assets/img/fotos/.
   Las fotos de fondo se tiñen de azul marino y se desvanecen hacia el
   texto para que se lea siempre (contraste AA).
   ===================================================================== */
.foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero.has-photo .hero-bg, .page-head.has-photo .head-bg {
  position: absolute; inset: 0; z-index: -2; opacity: .48; filter: saturate(.75) contrast(1.05);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 30%, rgba(0,0,0,.7) 60%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 30%, rgba(0,0,0,.7) 60%, #000 100%);
}
.hero.has-photo, .page-head.has-photo { background-image: radial-gradient(900px 520px at 88% -6%, rgba(95,208,238,.10), transparent 62%), linear-gradient(180deg, #0C1F3C 0%, #081427 58%, #050C18 100%); }
.hero.has-photo::before, .page-head.has-photo::before { opacity: .25 !important; }
@media (max-width: 900px) {
  .hero.has-photo .hero-bg { opacity: .28; -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.2)); mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.2)); }
}
.photo-band { margin: 48px 0 0; aspect-ratio: 21 / 8; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
@media (max-width: 700px) { .photo-band { aspect-ratio: 4 / 3; } }
.photo-side { margin: 34px 0 0; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.drone-ill.is-photo { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); }
.demo-frame { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #050C18; aspect-ratio: 16 / 9; }
.demo-frame video, .demo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.demo-band { background: var(--bg-2); }

/* =====================================================================
   v13 · IDENTIDAD DE MARCA MONTEK (guía de Canva, noviembre 2026)
   - Letras: Montserrat (títulos y rótulos) + Lato (texto). Plex Mono solo
     para medidas y datos técnicos.
   - Colores de la guía: azul guía #032B4E, azul principal #006ECE,
     azul tecnológico #4BA5E3, gris #8E9DAF y gris claro #E4E9EF / #F2F5F9.
   - Reemplaza los acentos champán y el cian anteriores.
   ===================================================================== */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/Montserrat-var.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/Lato-400i.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Lato-700.woff2") format("woff2"); }

:root {
  --mk-guia: #032B4E; --mk-principal: #006ECE; --mk-tec: #4BA5E3; --mk-gris: #8E9DAF; --mk-claro: #F2F5F9;
  --serif: "Montserrat", "Segoe UI", Arial, sans-serif;
  --f-display: "Montserrat", "Segoe UI", Arial, sans-serif;
  --f-tech: "Montserrat", "Segoe UI", Arial, sans-serif;
  --f-body: "Lato", "Segoe UI", Arial, sans-serif;
  --bg: #021A31; --bg-2: #03213D; --surface: #052847; --surface-2: #08305A; --line: #123F6B; --line-2: #1D5285;
  --grid-minor: rgba(75, 165, 227, .04); --grid-major: rgba(75, 165, 227, .08);
  --text: #EEF4FA; --muted: #A9BED3; --faint: #8FA7C0;
  --accent: #4BA5E3; --accent-ink: #021A31; --accent-soft: rgba(75, 165, 227, .12);
  --amber: #4BA5E3; --amber-soft: rgba(75, 165, 227, .12); --champagne: #4BA5E3; --hair: rgba(75, 165, 227, .42);
  --primary: #FFFFFF; --primary-ink: #032B4E;
  --navy-1: #053764; --navy-2: #032B4E; --navy-3: #021A31;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F2F5F9; --bg-2: #E4E9EF; --surface: #FFFFFF; --surface-2: #F2F5F9; --line: #D3DCE6; --line-2: #BFCAD8;
    --grid-minor: rgba(3, 43, 78, .035); --grid-major: rgba(3, 43, 78, .06);
    --text: #032B4E; --muted: #3F5670; --faint: #546B84;
    --accent: #005FB3; --accent-ink: #FFFFFF; --accent-soft: rgba(0, 110, 206, .08);
    --amber: #005FB3; --amber-soft: rgba(0, 110, 206, .09); --champagne: #005FB3; --hair: rgba(0, 110, 206, .32);
    --primary: #032B4E; --primary-ink: #FFFFFF; --wall: #032B4E;
  }
}
:root[data-theme="light"] {
  --bg: #F2F5F9; --bg-2: #E4E9EF; --surface: #FFFFFF; --surface-2: #F2F5F9; --line: #D3DCE6; --line-2: #BFCAD8;
  --grid-minor: rgba(3, 43, 78, .035); --grid-major: rgba(3, 43, 78, .06);
  --text: #032B4E; --muted: #3F5670; --faint: #546B84;
  --accent: #005FB3; --accent-ink: #FFFFFF; --accent-soft: rgba(0, 110, 206, .08);
  --amber: #005FB3; --amber-soft: rgba(0, 110, 206, .09); --champagne: #005FB3; --hair: rgba(0, 110, 206, .32);
  --primary: #032B4E; --primary-ink: #FFFFFF; --wall: #032B4E;
}
:root[data-theme="dark"] { --amber: #4BA5E3; --champagne: #4BA5E3; --hair: rgba(75, 165, 227, .42); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --amber: #4BA5E3; --champagne: #4BA5E3; } }

/* Bandas en azul guía (los dos temas) */
.top, .pnav, .hero, .page-head, .ctaband, .foot, .drone, .final, .err, .helpband, .acct-band {
  --bg: #032B4E; --bg-2: #03243F; --surface: #073763; --surface-2: #0A4275; --line: #1A4C7C; --line-2: #2A5E92;
  --grid-minor: rgba(75, 165, 227, .045); --grid-major: rgba(75, 165, 227, .09);
  --text: #FFFFFF; --muted: #B9CCDF; --faint: #9EB5CC;
  --accent: #4BA5E3; --accent-ink: #021A31; --accent-soft: rgba(75, 165, 227, .14);
  --amber: #4BA5E3; --amber-soft: rgba(75, 165, 227, .14); --champagne: #4BA5E3; --hair: rgba(75, 165, 227, .45);
  --primary: #FFFFFF; --primary-ink: #032B4E;
}
::selection { background: rgba(0, 110, 206, .3); }

/* Letras */
body { font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.68; font-feature-settings: normal; }
h1, h2 { font-family: var(--f-display) !important; font-weight: 700 !important; letter-spacing: -.022em !important; line-height: 1.1; font-variation-settings: normal; }
h3, h4 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.01em; }
h1 em, h2 em { font-style: normal; font-weight: 300; color: inherit; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 4.3rem); line-height: 1.08; }
.idx b, .chain b, .soft-row b, .courses .ct b, .flow b, .appcard h3, .plan h3, .sc-plans .plan h3, .spot-tx h2, .two-ways h3, .plans-h h3,
.agenda b, .acct-band h2, .ctaband h2, .svc-tbl tbody th a, .mm-prod b, .hero .spec b, .foot .wrap > div:first-child b {
  font-family: var(--f-display) !important; font-weight: 600 !important; letter-spacing: -.015em !important;
}
.pp b, .price b, .plan .amount b, .buy .amount b, .prices b {
  font-family: var(--f-display) !important; font-weight: 700 !important; letter-spacing: -.03em !important;
  font-variant-numeric: lining-nums tabular-nums;
}
.brand b, .menu a, .btn, .crumbs { font-family: var(--f-display); }
.menu a { font-weight: 500; font-size: .9rem; letter-spacing: .005em; }

/* Rótulos: Montserrat en mayúsculas pequeñas y espaciadas, en azul */
.kicker, .dim, .dim span, .idx .code, .courses .code, .agenda .code, .sum-row .code, .chain .num, .flow .num, h3.mini,
.foot b, .mm-col h4, .who .tag, .state, .plan .badge, .fsheet dt, .cmp thead th, .svc-tbl thead th, .dtbl th, .idx-note,
.example-tag, .stepper, .badge, .tag, .extra-tag, .steps li::before, .mini-steps li::before {
  font-family: var(--f-tech) !important; font-weight: 600 !important; text-transform: uppercase !important; font-style: normal;
}
.kicker { font-size: .74rem !important; letter-spacing: .2em !important; }
.hero .dim, .dim { font-size: .76rem !important; letter-spacing: .18em !important; }
.idx .code, .courses .code, .agenda .code, .sum-row .code, .chain .num, .flow .num { font-size: .74rem !important; letter-spacing: .14em !important; }
.steps li::before, .mini-steps li::before, h3.mini, .mm-col h4, .who .tag, .fsheet dt, .idx-note, .example-tag, .stepper { font-size: .72rem !important; letter-spacing: .14em !important; }
.foot b { font-size: .72rem !important; letter-spacing: .18em !important; }
.state, .badge, .plan .badge, .cmp thead th, .svc-tbl thead th, .dtbl th { font-size: .68rem !important; letter-spacing: .12em !important; padding-block: 5px; }
@media (max-width: 520px) { .kicker, .hero .dim, .dim { letter-spacing: .12em !important; } }

/* Logo */
.brand { gap: 0; }
.brand .logo-mk { display: block; height: 42px; width: auto; }
@media (max-width: 520px) { .brand .logo-mk { height: 36px; } }
.foot .logo-mk { display: block; height: 96px; width: auto; margin-bottom: 18px; }

/* Botones: azul principal sólido como la guía */
.btn { border-radius: 6px; font-weight: 600; letter-spacing: .01em; }
.btn.primary, .btn:not(.ghost):not(.amber):not(.co-cta) { background: var(--mk-principal); color: #FFFFFF; border: 1px solid var(--mk-principal); }
.btn.primary:hover, .btn:not(.ghost):not(.amber):not(.co-cta):hover { background: #005BB0; border-color: #005BB0; }
.btn.amber, .top .co-cta { background: var(--mk-principal); color: #FFFFFF; border: 1px solid var(--mk-principal); }
.btn.amber:hover, .top .co-cta:hover { background: #005BB0; color: #FFFFFF; }
.btn.ghost { border-color: rgba(75, 165, 227, .45); }
.btn.ghost:hover { border-color: var(--mk-tec); background: rgba(75, 165, 227, .08); }
.plan .badge { background: var(--mk-principal); color: #FFFFFF; border-color: var(--mk-principal); }

/* Portadas y bandas: azul guía con la diagonal azul de la guía */
.hero, .page-head {
  background:
    linear-gradient(135deg, transparent 0 78%, rgba(0, 110, 206, .55) 78% 80%, transparent 80% 83%, rgba(0, 110, 206, .9) 83%),
    url("../img/fondos/curvas.svg") right -6% top -18% / min(1250px, 120%) auto no-repeat,
    radial-gradient(900px 520px at 88% -6%, rgba(75, 165, 227, .14), transparent 62%),
    linear-gradient(180deg, #053764 0%, #032B4E 55%, #021A31 100%);
}
.hero.has-photo, .page-head.has-photo {
  background-image:
    linear-gradient(135deg, transparent 0 80%, rgba(0, 110, 206, .55) 80% 81.5%, transparent 81.5% 84%, rgba(0, 110, 206, .85) 84%),
    radial-gradient(900px 520px at 88% -6%, rgba(75, 165, 227, .12), transparent 62%),
    linear-gradient(180deg, #053764 0%, #032B4E 55%, #021A31 100%);
}
.hero.has-photo .hero-bg, .page-head.has-photo .head-bg { filter: saturate(.85) contrast(1.05); }
.hero .lead { color: #C7D6E6; }
.ctaband { background: linear-gradient(90deg, #053764, #021A31); }
.top { background: rgba(3, 43, 78, .94); border-bottom: 1px solid rgba(75, 165, 227, .18); }
.foot { border-top: 1px solid rgba(75, 165, 227, .16); background: linear-gradient(180deg, #032B4E, #021A31); }
.drone { background: url("../img/fondos/curvas.svg") left -10% bottom -30% / 1100px auto no-repeat, linear-gradient(180deg, #032B4E, #021A31); }
.acct-band { background: linear-gradient(90deg, #053764, #032B4E); }
.co-word span { color: var(--mk-tec) !important; }
.announce { background: linear-gradient(90deg, #053764, #032B4E); border-block: 1px solid rgba(75, 165, 227, .2); color: #FFFFFF; }
.announce a { color: #8CCBF5; }
.mm-col h4, .helplist small { color: var(--mk-tec) !important; }
.acct-band .ic.big { background: rgba(75, 165, 227, .12); border-color: rgba(75, 165, 227, .4); color: var(--mk-tec); }
.hero .spec b { font-size: 1.25rem !important; }

/* =====================================================================
   v14 · ACENTO CÁLIDO «NARANJA OBRA» Y FONDOS CON MÁS TONOS
   Estudio de color: el azul de la marca está en 208° del círculo
   cromático; su complementario exacto es el naranja de 28°. Es el color
   de la obra (chalecos, conos, atardecer de las fotos) y hace resaltar el
   azul sin competir con él. Regla 60-30-10: 60 % azules y neutros, 30 %
   blancos y grises, 10 % naranja, solo en rótulos, palabras destacadas,
   códigos y líneas finas. Los botones siguen en azul.
   - Naranja obra #F28A2E (decoración) · #F5A25D (texto sobre azul, 7:1)
   - Naranja tostado #A84A0C (texto sobre fondos claros, 5,1:1)
   - Arena #F7F1EA (sección cálida, tema claro) · Hielo #E8F1FA (sección fría)
   - Azul profundo #06294A / #082B47 (secciones alternas, tema oscuro)
   ===================================================================== */
:root { --mk-naranja: #F28A2E; --warm: #F5A25D; --warm-line: #F28A2E; --sec-fria: #04284A; --sec-calida: #072540; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --warm: #A84A0C; --warm-line: #E07A22; --sec-fria: #E8F1FA; --sec-calida: #F7F1EA; } }
:root[data-theme="light"] { --warm: #A84A0C; --warm-line: #E07A22; --sec-fria: #E8F1FA; --sec-calida: #F7F1EA; }
.top, .pnav, .hero, .page-head, .ctaband, .foot, .drone, .final, .err, .helpband, .acct-band { --warm: #F5A25D; --warm-line: #F28A2E; }

/* Letras: rótulos, códigos y pasos en naranja */
.kicker, .idx .code, .courses .code, .agenda .code, .sum-row .code, .chain .num, .flow .num,
.steps li::before, .mini-steps li::before, .foot b, .s-prueba, .s-proximamente, .s-borrador { color: var(--warm) !important; }
.kicker::before { background: var(--warm-line) !important; opacity: .9; }
.state.s-prueba, .state.s-proximamente, .state.s-borrador { border-color: currentColor; }

/* Palabra destacada de los títulos: naranja sobre azul, azul sobre claro; cota naranja */
h1 em, h2 em { color: var(--accent) !important; }
.hero h1 em, .hero h1 .lt em, .page-head h1 em, .drone h2 em, .ctaband h2 em, .acct-band h2 em, .final h2 em { color: var(--warm) !important; }
h1 em::after, h2 em::after { background: var(--warm-line) !important; }
h1 em::before, h2 em::before { border-color: var(--warm-line) !important; }
.chain .tick, .flow .tick { border-color: var(--warm-line); }

/* Fondos: secciones alternas fría (hielo) y cálida (arena) */
.spot { background-color: var(--sec-fria); }
section.band.alt { background-color: var(--sec-calida); }
section.band.alt .chain .tick { background: var(--sec-calida); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) section.band.alt {
  background-image: radial-gradient(700px 420px at 100% 0%, rgba(242, 138, 46, .07), transparent 70%); } }
:root[data-theme="dark"] section.band.alt { background-image: radial-gradient(700px 420px at 100% 0%, rgba(242, 138, 46, .07), transparent 70%); }

/* Portadas: brillo cálido de atardecer abajo a la izquierda y franja fina naranja */
.hero, .page-head {
  background:
    linear-gradient(135deg, transparent 0 78%, rgba(242, 138, 46, .85) 78% 78.6%, transparent 78.6% 80.4%, rgba(0, 110, 206, .55) 80.4% 82%, transparent 82% 84%, rgba(0, 110, 206, .9) 84%),
    url("../img/fondos/curvas.svg") right -6% top -18% / min(1250px, 120%) auto no-repeat,
    radial-gradient(760px 480px at -8% 112%, rgba(242, 138, 46, .16), transparent 62%),
    radial-gradient(900px 520px at 88% -6%, rgba(75, 165, 227, .16), transparent 62%),
    linear-gradient(180deg, #053764 0%, #032B4E 55%, #021A31 100%);
}
.hero.has-photo, .page-head.has-photo {
  background-image:
    linear-gradient(135deg, transparent 0 80%, rgba(242, 138, 46, .85) 80% 80.5%, transparent 80.5% 82%, rgba(0, 110, 206, .55) 82% 83.4%, transparent 83.4% 85.5%, rgba(0, 110, 206, .85) 85.5%),
    radial-gradient(760px 480px at -8% 112%, rgba(242, 138, 46, .14), transparent 62%),
    radial-gradient(900px 520px at 88% -6%, rgba(75, 165, 227, .12), transparent 62%),
    linear-gradient(180deg, #053764 0%, #032B4E 55%, #021A31 100%);
}

/* Dron: cielo de atardecer (azul arriba, horizonte cálido) */
.drone { background:
  url("../img/fondos/curvas.svg") left -10% bottom -30% / 1100px auto no-repeat,
  radial-gradient(1100px 360px at 50% 115%, rgba(242, 138, 46, .2), transparent 70%),
  linear-gradient(180deg, #032B4E 0%, #053764 60%, #0A3D6B 100%); }

/* Banda final: azul principal intenso con brillo cálido */
.ctaband { background:
  radial-gradient(600px 300px at 0% 100%, rgba(242, 138, 46, .22), transparent 70%),
  linear-gradient(110deg, #053764 0%, #0A4F96 60%, #006ECE 100%); }
.ctaband .btn:not(.ghost) { background: #FFFFFF; color: #032B4E; border-color: #FFFFFF; }
.ctaband .btn:not(.ghost):hover { background: #F2F5F9; border-color: #F2F5F9; }

/* Pie: línea superior en degradado azul → naranja */
.foot { position: relative; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #006ECE 0%, #4BA5E3 55%, #F28A2E 100%); }