/* Layout: página editorial de una columna ancha (1180 px); hero oscuro "consola de mando" con el video en vivo;
   secciones alternan texto + medio; señalética industrial (franja de seguridad amarilla, etiquetas mono de zona). */
:root {
  --paper: #F3F6F8;        /* fondo: gris acero claro con sesgo azul */
  --panel: #FFFFFF;
  --ink: #0F1E2C;
  --muted: #566879;
  --line: #D8E0E8;
  --hull: #1F5FD6;         /* azul del casco / acento */
  --hull-soft: #E3ECFC;
  --signal: #F2B300;       /* amarillo de seguridad */
  --night: #0B1A27;        /* banda del hero: siempre oscura */
  --night-2: #13283A;
  --night-ink: #E6EEF5;
  --night-muted: #93A7BA;
  --ok: #17935F;
  --crit: #D2383A;
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --wrap: 1180px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #0D1620; --panel: #142231; --ink: #E4ECF3; --muted: #93A6B8; --line: #24384B;
  --hull: #5C8FF2; --hull-soft: #18294A; --night: #07121C; --night-2: #102233;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --paper: #0D1620; --panel: #142231; --ink: #E4ECF3; --muted: #93A6B8; --line: #24384B;
  --hull: #5C8FF2; --hull-soft: #18294A; --night: #07121C; --night-2: #102233;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }   /* el menú fijo no tapa el título al ir a una sección */
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: .2px; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(34px, 4.6vw, 54px); }
h3 { font-size: 26px; font-weight: 600; line-height: 1.1; }
p { margin: 0; }
.eyebrow { font: 500 12.5px/1 var(--mono); letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.lead { font-size: 19px; color: var(--muted); max-width: 62ch; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* botones */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 10px; font: 600 16px/1 var(--body); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s, background .15s, border-color .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--signal); color: #0B1A27; }
.btn-primary:hover { background: #FFC21A; }
.btn-ghost { border-color: rgba(230, 238, 245, .28); color: var(--night-ink); }
.btn-ghost:hover { border-color: var(--night-ink); }
.btn-line { border-color: var(--line); color: var(--ink); background: var(--panel); }
.btn-line:hover { border-color: var(--hull); }

/* ---------- barra superior ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--night) 94%, transparent); backdrop-filter: blur(8px); color: var(--night-ink); }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 23px/1 var(--display); letter-spacing: .3px; }
.top nav { display: flex; gap: 22px; margin-left: auto; font-size: 15px; }
.top nav a { text-decoration: none; color: var(--night-muted); }
.top nav a:hover { color: var(--night-ink); }
.top .btn { min-height: 40px; padding: 0 16px; font-size: 15px; white-space: nowrap; gap: 0; }
.top .btn .long { display: inline; }
@media (max-width: 480px) { .top .btn .long { display: none; } }
.hazard { height: 5px; background: repeating-linear-gradient(-45deg, var(--signal) 0 12px, #0B1A27 12px 24px); }
@media (max-width: 860px) { .top nav { display: none; } .top .btn { margin-left: auto; } }

/* ---------- hero ---------- */
.hero { background: radial-gradient(1200px 520px at 78% 0%, var(--night-2), var(--night) 70%); color: var(--night-ink); padding-block: clamp(40px, 6vw, 80px) clamp(48px, 7vw, 96px); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero .eyebrow { color: var(--signal); }
.hero h1.eyebrow { line-height: 1.45; max-width: 46ch; }
.hero .headline { font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: .2px; text-wrap: balance; font-size: clamp(40px, 4.9vw, 66px); margin-top: 18px; }
.hero .headline em { font-style: normal; color: var(--signal); }
.hero .lead { color: var(--night-muted); margin-top: 22px; font-size: 19px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(147, 167, 186, .22); font: 500 13px/1.4 var(--mono); color: var(--night-muted); }
.facts span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 8px; vertical-align: 1px; }
@media (max-width: 960px) { .hero .wrap { grid-template-columns: 1fr; } }

.console { position: relative; border-radius: 14px; background: #0A141D; border: 1px solid rgba(147, 167, 186, .25); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.console .bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font: 500 12px/1 var(--mono); color: var(--night-muted); border-bottom: 1px solid rgba(147, 167, 186, .18); }
.console .bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(147, 167, 186, .35); }
.console .bar .live { margin-left: auto; color: #7EE2B2; }
.console .bar .live::before { content: "●"; margin-right: 6px; animation: blink 1.6s infinite; }
.console video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0 0 14px 14px; background: #0A141D; }
.chip { position: absolute; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: rgba(11, 26, 39, .92); border: 1px solid rgba(147, 167, 186, .3); color: var(--night-ink); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.chip small { font: 500 11px/1 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--night-muted); }
.chip b { font: 700 30px/1 var(--display); font-variant-numeric: tabular-nums; }
.chip.safe { left: -18px; bottom: 28px; }
.chip.safe b { color: #7EE2B2; }
.chip.miss { right: -14px; top: 64px; }
.chip.miss b { color: #FF8A86; font-size: 22px; }
.chip.miss span { font: 500 12.5px/1.3 var(--body); color: var(--night-muted); }
@media (max-width: 960px) { .chip.safe { left: 10px; bottom: 10px; } .chip.miss { right: 10px; top: 52px; } }
@media (max-width: 520px) { .chip.miss { display: none; } .chip b { font-size: 24px; } }
.caption { margin-top: 12px; font: 400 12.5px/1.4 var(--mono); color: var(--night-muted); }

/* ---------- secciones ---------- */
section.block { padding-block: clamp(64px, 9vw, 120px); }
.head { display: grid; gap: 16px; max-width: 780px; }
.head + * { margin-top: clamp(32px, 5vw, 56px); }

/* problema */
.problem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.problem article { padding: 26px 26px 0 0; display: grid; gap: 10px; align-content: start; }
.problem article + article { padding-left: 26px; border-left: 1px solid var(--line); }
.problem .mono { font-size: 13px; color: var(--crit); letter-spacing: .4px; }
.problem p { color: var(--muted); }
@media (max-width: 820px) { .problem { grid-template-columns: 1fr; } .problem article + article { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 22px; } }

/* cómo funciona */
.how { background: var(--panel); border-block: 1px solid var(--line); }
.flow { overflow-x: auto; }
.flow-hint { display: none; font: 400 12.5px var(--mono); color: var(--muted); margin-top: 8px; }
@media (max-width: 800px) { .flow-hint { display: block; } }
.flow svg { width: 100%; min-width: 760px; height: auto; display: block; }
.flow .t1 { font: 700 21px var(--display); fill: var(--ink); }
.flow .t2 { font: 400 14px var(--body); fill: var(--muted); }
.flow .tm { font: 500 12px var(--mono); fill: var(--muted); letter-spacing: .6px; }
.flow .box { fill: var(--paper); stroke: var(--line); stroke-width: 1.25; }
.flow .box.acc { fill: var(--hull-soft); stroke: var(--hull); stroke-width: 2; }
.flow .wire { stroke: var(--line); stroke-width: 2; fill: none; }
.flow .pkt { fill: var(--hull); }
.flow .ring { fill: none; stroke: var(--hull); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ring 2.4s ease-out infinite; }
.flow .ring.d2 { animation-delay: .8s; } .flow .ring.d3 { animation-delay: 1.6s; }
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.notes div { display: grid; gap: 6px; }
.notes b { font: 600 18px/1.2 var(--body); }
.notes p { color: var(--muted); font-size: 15.5px; }
@media (max-width: 820px) { .notes { grid-template-columns: 1fr; } }

/* funciones con video */
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.feature + .feature { margin-top: clamp(56px, 8vw, 96px); }
.feature.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature.flip > :first-child { order: 2; }
.feature .txt { display: grid; gap: 16px; }
.feature ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.feature li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; color: var(--muted); }
.feature li .ico { width: 36px; height: 36px; border-radius: 9px; background: var(--hull-soft); display: grid; place-items: center; }
.feature li .ico svg { width: 20px; height: 20px; stroke: var(--hull); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature li > span:last-child { padding-top: 5px; }
.feature li b { color: var(--ink); font-weight: 600; }
.media { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 18px 50px rgba(15, 30, 44, .12); }
.media video, .media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; }
.media figcaption { padding: 10px 14px; font: 400 12.5px/1.4 var(--mono); color: var(--muted); border-top: 1px solid var(--line); }
@media (max-width: 960px) { .feature, .feature.flip { grid-template-columns: 1fr; } .feature.flip > :first-child { order: 0; } }

/* grilla de capacidades */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.grid article { background: var(--panel); padding: 26px; display: grid; gap: 10px; align-content: start; }
.grid .tag { font: 500 11.5px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--hull); }
.grid p { color: var(--muted); font-size: 15.5px; }
.grid svg { width: 30px; height: 30px; stroke: var(--hull); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 960px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

/* privacidad */
.privacy { background: var(--night); color: var(--night-ink); }
.privacy .eyebrow { color: var(--signal); }
.privacy .lead { color: var(--night-muted); }
.privacy .rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 40px; }
.privacy .rules div { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding-block: 20px; border-top: 1px solid rgba(147, 167, 186, .22); }
.privacy .rules b { font: 700 28px/1 var(--display); color: var(--signal); }
.privacy .rules p { color: var(--night-muted); }
.privacy .rules p strong { color: var(--night-ink); font-weight: 600; display: block; margin-bottom: 2px; }
@media (max-width: 820px) { .privacy .rules { grid-template-columns: 1fr; } .privacy .rules div { grid-template-columns: 96px 1fr; } }

/* industrias */
.sectors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sectors article { border-top: 3px solid var(--ink); padding-top: 18px; display: grid; gap: 8px; }
.sectors p { color: var(--muted); }
.sectors .mono { font-size: 12.5px; color: var(--hull); }
/* gemelo digital: dos maquetas 3D */
.twins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.twins figure { margin: 0; }
.twins-note { margin-top: 18px; font: 400 12.5px/1.5 var(--mono); color: var(--muted); max-width: 80ch; }
@media (max-width: 860px) { .twins { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .sectors { grid-template-columns: 1fr; } }

/* piloto */
.steps { list-style: none; margin: clamp(32px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: s; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: var(--line); }
.steps li { counter-increment: s; position: relative; padding-right: 20px; display: grid; gap: 8px; }
.steps li::before { content: counter(s); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 2px solid var(--hull); color: var(--hull); font: 700 22px/1 var(--display); position: relative; }
.steps b { font: 600 19px/1.2 var(--body); margin-top: 8px; }
.steps p { color: var(--muted); font-size: 15.5px; }
.steps .mono { font-size: 12px; color: var(--muted); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 26px; } .steps::before { left: 23px; right: auto; width: 2px; top: 0; bottom: 0; height: auto; } .steps li { grid-template-columns: 48px 1fr; column-gap: 18px; } .steps li::before { grid-row: span 3; } .steps b { margin-top: 0; } }

/* preguntas */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font: 600 19px/1.3 var(--body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font: 400 28px/1 var(--body); color: var(--hull); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--muted); max-width: 70ch; }

/* contacto */
.contact { background: var(--hull); color: #fff; border-radius: 18px; padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 36px; align-items: center; position: relative; overflow: hidden; }
.contact h2 { color: #fff; }
.contact .lead { color: rgba(255, 255, 255, .82); margin-top: 14px; }
.contact .ways { display: grid; gap: 12px; }
.way { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); border-radius: 12px; padding: 14px 16px; }
.way small { display: block; font: 500 11.5px/1 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-bottom: 6px; }
.way a { font: 600 19px/1.2 var(--body); color: #fff; text-decoration: none; word-break: break-all; }
.way a:hover { text-decoration: underline; }
.way button { min-height: 40px; padding: 0 14px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .45); background: transparent; color: #fff; font: 600 14px var(--body); cursor: pointer; }
.way button:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

footer { padding-block: 40px 56px; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 24px; }

/* movimiento: entra desde una posición visible (nunca opacidad 0) */
.rise { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .16s; } .rise.d3 { animation-delay: .24s; } .rise.d4 { animation-delay: .32s; }
.reveal { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.pre { transform: translateY(18px); }
@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes ring { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal.pre { transform: none; }
}

/* ---------- páginas interiores (landings) ---------- */
.hero.sub { padding-block: clamp(32px, 5vw, 64px) clamp(40px, 6vw, 80px); }
.hero.sub h1:not(.eyebrow) { font-size: clamp(38px, 4.6vw, 60px); margin-top: 16px; }
.crumbs { font: 500 12.5px/1.4 var(--mono); letter-spacing: .8px; color: var(--night-muted); margin-bottom: 18px; }
.crumbs a { color: var(--night-muted); text-decoration: none; }
.crumbs a:hover { color: var(--night-ink); }
.prose { max-width: 74ch; }
.prose h2 { margin-bottom: 18px; }
.prose h3 { margin: 28px 0 8px; }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { margin: 14px 0 0; padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.lp-steps { counter-reset: s; display: grid; gap: 16px; margin-top: 26px; padding: 0; list-style: none; }
.lp-steps li { counter-increment: s; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px 18px 64px; position: relative; }
.lp-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 20px; top: 18px; font: 600 15px/1.4 var(--mono); color: var(--hull); }
.lp-steps b { display: block; font-family: var(--display); font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 26px; }
.related a { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; text-decoration: none; transition: border-color .15s, transform .15s; }
.related a:hover { border-color: var(--hull); transform: translateY(-1px); }
.related small { font: 500 12px/1 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.related strong { display: block; font: 600 22px/1.15 var(--display); margin-top: 8px; }
.sectors a { color: var(--hull); font-weight: 600; text-decoration: none; display: inline-block; margin-top: 12px; }
.sectors a:hover { text-decoration: underline; }

.lead a, .prose a, .faq a, .feature .txt a { color: var(--hull); text-underline-offset: 3px; }
.hero .lead a { color: var(--signal); }
footer a { color: inherit; text-underline-offset: 3px; }
footer a:hover { color: var(--ink); }
.privacy .prose a { color: var(--signal); }