:root {
  --bg: #05070b;
  --panel: #0a1019;
  --panel-2: #0e1723;
  --text: #f4f7fb;
  --muted: #8b98aa;
  --cyan: #39ddff;
  --blue: #2d63ff;
  --coral: #ff6b5f;
  --line: rgba(211, 228, 255, .15);
  --line-bright: rgba(57, 221, 255, .42);
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --radius: 3px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.5; overflow-x: hidden; }
body::selection { background: var(--cyan); color: var(--bg); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.section-shell { max-width: 1240px; margin-inline: auto; padding-inline: 48px; position: relative; z-index: 1; }
.ambient-grid { position: fixed; inset: 0; pointer-events: none; opacity: .3; background-image: linear-gradient(rgba(57,221,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(57,221,255,.035) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 70%); z-index: 0; }
.site-header { height: 88px; max-width: 1240px; margin-inline: auto; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 5; background: rgba(5,7,11,.78); }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-name { display: block; color: var(--text); font: 700 22px/1.05 var(--mono); letter-spacing: .04em; }
.site-footer .footer-brand .brand-name { font-size: 18px; }
@media (max-width: 900px) { .brand-name { font-size: 20px; } }
.brand-logo, .footer-logo { width: 190px; height: auto; display: block; filter: brightness(0) invert(1); }
.header-status { margin-left: auto; margin-right: 42px; color: var(--muted); font: 10px var(--mono); letter-spacing: .1em; }
.header-status span, .live-dot::before { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); content: ''; }
.site-nav { display: flex; align-items: center; gap: 30px; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.site-nav a:not(.nav-cta) { color: var(--muted); transition: color .2s ease; }
.site-nav a:not(.nav-cta):hover { color: var(--cyan); }
.nav-cta { padding: 10px 14px; border: 1px solid var(--cyan); color: var(--cyan); }
.nav-cta span, .button span { margin-left: 16px; font-size: 17px; }
.menu-toggle { display: none; border: 0; background: none; color: var(--text); }
.hero { min-height: 680px; display: grid; grid-template-columns: .87fr 1.13fr; gap: 64px; align-items: center; padding-top: 58px; padding-bottom: 82px; }
.eyebrow { margin: 0 0 28px; display: flex; align-items: center; gap: 10px; color: var(--muted); font: 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.eyebrow-dot { width: 6px; height: 6px; background: var(--coral); border-radius: 50%; box-shadow: 0 0 12px var(--coral); animation: dot-pulse 2.4s ease-in-out infinite; }
.hero-copy { animation: rise-in .8s cubic-bezier(.2,.8,.2,1) both; }
.hero h1, h2 { margin: 0; font-weight: 400; letter-spacing: -.065em; line-height: .95; }
.hero h1 { font-size: clamp(64px, 8vw, 116px); }
.hero h1 span, h2 em { color: var(--cyan); font-weight: 400; }
.hero-intro { max-width: 410px; margin: 36px 0 30px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 27px; }
.button { display: inline-flex; align-items: center; border: 1px solid transparent; padding: 16px 18px; cursor: pointer; font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-3px); box-shadow: 0 0 24px rgba(57,221,255,.2); }
.button-primary { background: var(--cyan); color: var(--bg); }
.button-primary:hover { background: #a4f3ff; }
.text-link { color: var(--text); font: 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.text-link span { color: var(--coral); margin-left: 8px; }
.hero-interface { position: relative; min-height: 545px; overflow: hidden; border: 1px solid var(--line-bright); background: radial-gradient(circle at 54% 42%, rgba(45,99,255,.3), transparent 30%), linear-gradient(135deg, #0b1728, #05070b 70%); animation: rise-in 1s .12s cubic-bezier(.2,.8,.2,1) both; }
.hero-interface::before { position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.09); content: ''; }
.interface-top { position: absolute; z-index: 3; left: 24px; right: 24px; top: 20px; display: flex; justify-content: space-between; color: var(--muted); font: 10px var(--mono); letter-spacing: .12em; }
.live-dot { color: var(--cyan); }
.live-dot::before { margin-right: 6px; }
.scan-grid { position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(rgba(57,221,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(57,221,255,.13) 1px, transparent 1px); background-size: 48px 48px; transform: perspective(360px) rotateX(58deg) translateY(24%); transform-origin: center bottom; }
.signal-orbit { position: absolute; width: 300px; height: 300px; left: 50%; top: 48%; transform: translate(-50%, -50%); border: 1px solid rgba(57,221,255,.8); border-radius: 50%; box-shadow: 0 0 80px rgba(45,99,255,.22), inset 0 0 60px rgba(57,221,255,.12); animation: orbit-spin 16s linear infinite; }
.signal-orbit::before, .signal-orbit::after { position: absolute; inset: 22px; border: 1px solid rgba(255,107,95,.5); border-radius: 50%; content: ''; }
.signal-orbit::after { inset: 64px; border-color: rgba(255,255,255,.16); }
.signal-orbit i, .signal-orbit b, .signal-orbit em { position: absolute; display: block; border-radius: 50%; }
.signal-orbit i { width: 12px; height: 12px; top: 24px; left: 108px; background: var(--cyan); box-shadow: 0 0 22px var(--cyan); }
.signal-orbit b { width: 8px; height: 8px; bottom: 68px; right: 28px; background: var(--coral); }
.signal-orbit em { width: 6px; height: 6px; top: 83px; right: 48px; background: white; }
.signal-wave { position: absolute; left: 50%; top: 48%; display: flex; align-items: center; gap: 5px; transform: translate(-50%, -50%) rotate(-25deg); }
.signal-wave span { display: block; width: 3px; height: 30px; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); animation: wave 1.2s ease-in-out infinite alternate; }
.signal-wave span:nth-child(2n) { height: 66px; animation-delay: .15s; }
.signal-wave span:nth-child(3n) { height: 44px; animation-delay: .3s; }
.signal-wave span:nth-child(4n) { height: 92px; animation-delay: .45s; }
.interface-label { position: absolute; z-index: 2; color: var(--muted); font: 10px/1.5 var(--mono); letter-spacing: .08em; }
.label-a { left: 24px; bottom: 30px; color: var(--coral); }
.label-b { right: 24px; top: 102px; text-align: right; color: var(--cyan); }
.terminal-card { position: absolute; z-index: 2; right: 24px; bottom: 24px; width: 168px; padding: 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(5,7,11,.74); font-family: var(--mono); }
.terminal-card small, .terminal-card span { display: block; color: var(--muted); font-size: 9px; letter-spacing: .1em; }
.terminal-card strong { display: block; margin: 6px 0; color: white; font-size: 13px; }
.terminal-card span { color: var(--cyan); }
.interface-coordinates { position: absolute; left: 50%; bottom: 20px; color: rgba(255,255,255,.4); font: 9px var(--mono); transform: translateX(-50%); letter-spacing: .12em; }
.metrics-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #070b12; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 24px; padding-bottom: 26px; }
.metrics-grid div { display: grid; gap: 4px; border-left: 1px solid var(--line-bright); padding-left: 18px; animation: metric-in .7s both; }
.metrics-grid div:nth-child(2) { animation-delay: .08s; }.metrics-grid div:nth-child(3) { animation-delay: .16s; }.metrics-grid div:nth-child(4) { animation-delay: .24s; }
.metrics-grid strong { color: var(--coral); font: 11px var(--mono); }.metrics-grid span { color: var(--muted); font: 12px var(--mono); }
.featured-section { padding-top: 125px; padding-bottom: 120px; }.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 48px; }.section-heading h2, .contact-heading h2 { font-size: clamp(52px, 7vw, 90px); }.section-note { margin: 0 0 9px; color: var(--muted); font: 11px/1.55 var(--mono); text-align: right; }
.output-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; align-items: end; }.output-card { position: relative; min-height: 360px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }.output-card-wide { min-height: 440px; }.output-number { position: absolute; z-index: 3; top: 18px; left: 20px; color: var(--coral); font: 11px var(--mono); }.output-glyph { position: absolute; inset: 0; overflow: hidden; }.glyph-paper { background: linear-gradient(135deg, #15233b, #08111e); }.glyph-paper::before, .glyph-paper::after { position: absolute; width: 48%; height: 62%; content: ''; transform: rotate(-12deg); }.glyph-paper::before { left: 18%; top: 17%; border: 1px solid var(--cyan); background: rgba(57,221,255,.06); box-shadow: 32px 28px 0 rgba(255,107,95,.12); }.glyph-paper::after { right: 12%; bottom: 12%; border: 1px solid var(--coral); background: rgba(255,107,95,.06); transform: rotate(16deg); }.glyph-paper i, .glyph-paper b { position: absolute; z-index: 1; display: block; }.glyph-paper i { left: 30%; top: 33%; width: 28%; height: 4px; background: var(--cyan); box-shadow: 0 20px 0 var(--cyan), 0 40px 0 rgba(57,221,255,.35); }.glyph-paper b { right: 22%; top: 20%; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 18px var(--coral); }.glyph-screen { background: radial-gradient(circle at 56% 44%, rgba(45,99,255,.4), transparent 30%), #08111e; }.glyph-screen::before { position: absolute; left: 18%; right: 18%; top: 21%; bottom: 17%; border: 1px solid var(--cyan); content: ''; box-shadow: 0 0 30px rgba(57,221,255,.15); }.glyph-screen i, .glyph-screen b, .glyph-screen em { position: absolute; display: block; }.glyph-screen i { left: 28%; top: 36%; width: 44%; height: 3px; background: var(--cyan); }.glyph-screen b { left: 28%; top: 48%; width: 30%; height: 3px; background: var(--coral); }.glyph-screen em { left: 62%; top: 61%; width: 13px; height: 13px; border: 1px solid var(--cyan); border-radius: 50%; }.output-copy { position: absolute; z-index: 3; left: 20px; right: 20px; bottom: 18px; }.output-copy span { color: var(--coral); font: 10px var(--mono); letter-spacing: .12em; }.output-copy h3 { margin: 8px 0 3px; font-size: 26px; font-weight: 400; letter-spacing: -.04em; }.output-copy p { margin: 0; color: var(--muted); font-size: 13px; }
.services-section { padding-top: 102px; padding-bottom: 130px; }.service-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }.service-card { position: relative; min-height: 300px; padding: 16px; border: 1px solid var(--line); background: var(--panel); transition: border-color .25s ease, transform .25s ease, background .25s ease; }.service-card:hover { transform: translateY(-6px); border-color: var(--cyan); background: var(--panel-2); }.service-id { color: var(--muted); font: 9px var(--mono); letter-spacing: .12em; }.service-card h3 { margin: 22px 0 7px; font-size: 18px; letter-spacing: -.04em; }.service-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }.service-arrow { position: absolute; right: 16px; top: 14px; color: var(--coral); font-size: 19px; }.service-icon { position: relative; height: 112px; margin-top: 16px; overflow: hidden; border: 1px solid rgba(57,221,255,.22); background: #07101c; }.service-icon::before { position: absolute; inset: 14px; border: 1px solid rgba(57,221,255,.4); content: ''; }.service-icon i, .service-icon b, .service-icon em { position: absolute; display: block; }.icon-digital i { left: 27%; top: 42%; width: 46%; height: 9px; background: var(--cyan); box-shadow: 0 18px 0 var(--blue); }.icon-digital b { right: 17%; top: 21%; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }.icon-offset i { left: 22%; top: 35%; width: 56%; height: 28px; border: 1px solid var(--cyan); transform: skewY(-14deg); }.icon-offset b { left: 31%; top: 50%; width: 38%; height: 2px; background: var(--coral); }.icon-offset em { left: 44%; top: 22%; width: 2px; height: 64px; background: var(--cyan); transform: rotate(35deg); }.icon-screen i { left: 25%; top: 32%; width: 50%; height: 50%; border: 1px solid var(--cyan); transform: rotate(45deg); }.icon-screen b { left: 38%; top: 45%; width: 24%; height: 2px; background: var(--coral); transform: rotate(-45deg); }.icon-scale i { left: 22%; bottom: 18%; width: 55%; height: 45%; border: 1px solid var(--cyan); }.icon-scale b { left: 37%; top: 19%; width: 2px; height: 55%; background: var(--coral); transform: rotate(28deg); }.icon-web i { left: 20%; top: 25%; width: 60%; height: 48%; border: 1px solid var(--cyan); }.icon-web b { left: 28%; top: 39%; width: 35%; height: 3px; background: var(--cyan); box-shadow: 0 12px 0 var(--blue); }.icon-web em { right: 24%; bottom: 18%; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); }
.manifesto-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #080d15; padding: 116px 0 124px; }.manifesto-grid { display: grid; grid-template-columns: 1fr 1.7fr; gap: 80px; }.manifesto-label { display: flex; align-items: flex-start; gap: 14px; padding-top: 10px; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .14em; }.coral-line { width: 28px; height: 2px; margin-top: 8px; background: var(--coral); box-shadow: 0 0 14px var(--coral); }.manifesto-copy h2 { font-size: clamp(52px, 7vw, 88px); }.manifesto-copy h2 em { color: var(--cyan); }.manifesto-copy > p:not(.eyebrow) { max-width: 525px; margin: 40px 0 72px; color: var(--muted); font-size: 17px; }.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; border-top: 1px solid var(--line); padding-top: 20px; }.process-steps div { display: grid; gap: 5px; }.process-steps span { color: var(--coral); font: 11px var(--mono); }.process-steps strong { font-size: 18px; font-weight: 500; }.process-steps small { color: var(--muted); font: 11px var(--mono); }
.contact-section { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; padding-top: 125px; padding-bottom: 132px; }.contact-heading h2 { font-size: clamp(54px, 7vw, 92px); }.contact-details { display: grid; gap: 13px; max-width: 410px; margin-top: 48px; }.contact-details a { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; padding-top: 11px; border-top: 1px solid var(--line); font: 13px var(--mono); }.contact-details a span { color: var(--muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }.contact-details a b { color: var(--coral); font-size: 17px; font-weight: 400; }.contact-details a:hover { color: var(--cyan); }.quote-form { align-self: end; display: grid; gap: 25px; padding: 22px; border: 1px solid var(--line); background: var(--panel); }.form-terminal { display: flex; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--cyan); font: 10px var(--mono); }.form-terminal span:last-child { color: var(--coral); }.quote-form label { display: grid; gap: 9px; color: var(--muted); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.quote-form input, .quote-form textarea { width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); outline: none; background: transparent; color: var(--text); resize: vertical; }.quote-form input:focus, .quote-form textarea:focus { border-color: var(--cyan); }.quote-form input::placeholder, .quote-form textarea::placeholder { color: #596579; font-size: 15px; letter-spacing: 0; text-transform: none; }.form-note { min-height: 22px; margin: 0; color: var(--cyan); font: 12px var(--mono); }
.site-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 20px; min-height: 125px; border-top: 1px solid var(--line); color: var(--muted); font: 11px var(--mono); }.footer-brand { display: flex; align-items: center; gap: 9px; }.footer-brand .brand-mark { width: 26px; height: 26px; font-size: 10px; }.footer-brand .brand-name { font-size: 10px; }.site-footer > p { justify-self: center; color: var(--muted); }.footer-meta { justify-self: end; display: grid; text-align: right; gap: 4px; }.footer-meta a { color: var(--cyan); }
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dot-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,107,95,.35); } 50% { box-shadow: 0 0 0 6px rgba(255,107,95,0); } }
@keyframes metric-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes orbit-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes wave { from { transform: scaleY(.55); } to { transform: scaleY(1.3); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 900px) { .section-shell, .site-header { padding-inline: 24px; }.site-header { height: 74px; }.brand-logo { width: 165px; }.header-status { display: none; }.menu-toggle { display: block; font: 700 11px var(--mono); }.menu-toggle span { color: var(--coral); font-size: 18px; margin-left: 5px; }.site-nav { display: none; position: absolute; left: 24px; right: 24px; top: 64px; padding: 18px; background: var(--panel); border: 1px solid var(--line-bright); box-shadow: 0 16px 35px rgba(0,0,0,.35); }.site-nav.is-open { display: grid; gap: 18px; }.site-nav .nav-cta { display: inline-block; width: fit-content; }.hero { min-height: auto; grid-template-columns: 1fr; gap: 42px; padding-top: 70px; padding-bottom: 84px; }.hero h1 { font-size: clamp(62px, 16vw, 96px); }.hero-interface { min-height: 390px; }.signal-orbit { width: 240px; height: 240px; }.metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }.featured-section { padding-top: 85px; padding-bottom: 90px; }.section-heading { display: block; }.section-note { margin-top: 22px; text-align: left; }.output-grid { grid-template-columns: 1fr; }.output-card, .output-card-wide { min-height: 360px; }.service-grid { grid-template-columns: repeat(2, 1fr); }.manifesto-section { padding: 84px 0 90px; }.manifesto-grid { grid-template-columns: 1fr; gap: 35px; }.contact-section { grid-template-columns: 1fr; gap: 64px; padding-top: 84px; padding-bottom: 95px; }.site-footer { grid-template-columns: 1fr; gap: 15px; padding-top: 30px; padding-bottom: 30px; }.site-footer > p, .footer-meta { justify-self: start; text-align: left; } }
@media (max-width: 520px) { .service-grid { grid-template-columns: 1fr; }.metrics-grid { grid-template-columns: 1fr; }.hero-interface { min-height: 360px; }.terminal-card { right: 14px; bottom: 14px; }.interface-label { font-size: 8px; }.signal-orbit { width: 205px; height: 205px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; } }

/* Imágenes aportadas para los servicios: conservar la pieza completa. */
.service-media {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 360px;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid rgba(57, 221, 255, .22);
  background: #000;
}

.service-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}