@font-face {
  font-family: Manrope;
  src: url("assets/manrope.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f5f5ef;
  --carbon: #12151a;
  --steel: #40586d;
  --steel-hover: #324659;
  --steel-light: #9cb5cf;
  --white-cold: #f5f7fa;
  --muted: #49534f;
  --rule: #cbd0cc;
  --dark-rule: #425363;
  --technical: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --edge: clamp(24px, 4.167vw, 64px);
  font-family: Manrope, system-ui, sans-serif;
  color: var(--carbon);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .24em; }
button, select, textarea { font: inherit; }
button { cursor: pointer; }
p, h1, h2, h3 { margin: 0; }
h1, h2, h3 { font-weight: 800; }
:focus-visible { outline: 3px solid var(--steel); outline-offset: 4px; }
::selection { color: var(--carbon); background: #d2dfeb; }

.shell { width: min(1408px, calc(100% - var(--edge) * 2)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 3; top: 12px; left: var(--edge); transform: translateY(-150%); padding: 12px 18px; background: var(--paper); }
.skip-link:focus { transform: none; }
.site-header, .opening { background: var(--carbon); color: var(--white-cold); }
.header-content { min-height: 73px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: clamp(24px, 4vw, 62px); border-bottom: 1px solid var(--dark-rule); }
.brand { width: clamp(170px, 12.5vw, 194px); display: block; }
.main-nav { display: flex; align-items: center; gap: clamp(24px, 3.55vw, 56px); }
.main-nav a { text-decoration: none; font-size: clamp(15px, 1.22vw, 19px); font-weight: 600; padding-block: 10px; }
.main-nav a:hover { color: var(--steel-light); }

.button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 46px; padding: 9px 21px; border: 1px solid transparent; border-radius: 3px; text-decoration: none; font-weight: 800; line-height: 1.3; transition: color 150ms, background-color 150ms, border-color 150ms; }
.button-primary { color: var(--white-cold); background: var(--steel); }
.button-primary:hover { background: var(--steel-hover); }
.button-outline { color: var(--carbon); border-color: var(--steel); background: transparent; font-size: clamp(16px, 1.36vw, 21px); font-weight: 700; }
.button-outline:hover { background: #e1e7eb; }
.text-link { font-weight: 700; }
.text-link:hover { color: var(--steel); }

.header-contact { min-height: 40px; color: var(--white-cold); border-color: #74889b; font-size: clamp(15px, 1.22vw, 19px); }
.header-contact:hover { background: #25323e; }
.site-header :focus-visible, .opening :focus-visible { outline-color: var(--steel-light); }
.opening { padding-block: 32px 36px; }
.hero { display: grid; grid-template-columns: 45.5% 54.5%; align-items: start; padding-bottom: clamp(21px, 2.6vw, 40px); }
.hero-copy { position: relative; z-index: 1; min-width: 0; padding-top: clamp(30px, 3.8vw, 58px); }
.eyebrow { font-size: clamp(12px, 1.2vw, 18px); color: var(--steel); text-transform: uppercase; font-weight: 800; letter-spacing: .045em; line-height: 1.35; }
.hero-index, .factory-caption { font: 500 clamp(12px, 1.15vw, 17px)/1.35 var(--technical); letter-spacing: .08em; text-transform: uppercase; }
.hero-index { color: var(--white-cold); }
.hero-index span { color: var(--steel-light); }
.hero h1 { margin-block: 27px 27px; font-size: clamp(48px, 5.72vw, 88px); line-height: .93; letter-spacing: -.075em; }
.hero h1 span { display: block; color: var(--steel-light); }
.hero-lead { font-size: clamp(18px, 1.65vw, 26px); font-weight: 800; line-height: 1.3; letter-spacing: -.028em; }
.hero-description { max-width: 56ch; margin-top: 11px; font-size: clamp(16px, 1.23vw, 19px); line-height: 1.48; color: #d1d9e1; }
.hero-actions { margin-top: 19px; }
.hero-actions .button { min-height: 52px; padding-inline: 26px; font-size: clamp(16px, 1.24vw, 19px); color: var(--carbon); background: var(--steel-light); }
.hero-actions .button:hover { background: #b8cde0; }

.factory { position: relative; min-width: 0; margin: 0; }
.factory-caption { position: absolute; z-index: 1; top: 10px; left: 0; padding-left: 14px; border-left: 2px solid var(--steel-light); pointer-events: none; }
.factory-caption-note { display: block; margin-top: 4px; color: #a8b6c5; font-size: .86em; text-transform: none; letter-spacing: .03em; }
.motion-control { position: absolute; z-index: 2; top: 9px; right: 0; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #657c90; border-radius: 3px; color: var(--steel-light); background: var(--carbon); }
.motion-control:hover { background: #263340; color: var(--white-cold); }
.motion-control[hidden], .factory-rail[hidden] { display: none; }
.motion-control .icon-pause, .motion-control[aria-label^="Pausar"] .icon-play { display: none; }
.motion-control[aria-label^="Pausar"] .icon-pause { display: initial; }
.factory-drawing { display: block; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.factory-floor { opacity: .64; }
.floor-track, .guide, .factory-label path { fill: none; stroke-width: 1; stroke: #667e92; }
.floor-track { opacity: .61; }
.floor-points { fill: #acc6de; opacity: .8; }
.guide { stroke-dasharray: 2 5; opacity: .75; }
.deck-body { stroke: #7592a8; stroke-width: 1; stroke-linejoin: round; }
.deck-rim { fill: none; stroke: #93adbf; transition: stroke 400ms ease, stroke-width 400ms ease; }
.factory-module.is-active .deck-rim { stroke: #dbeaf7; stroke-width: 2; }
.bolts { fill: #14212b; stroke: #8ca6ba; }
.deck-etch, .circuit-line { fill: none; stroke: #91aec5; stroke-width: .9; }
.deck-etch { opacity: .58; }
.circuit-pads { fill: #94b7d3; stroke: none; }
.factory-label { fill: #bcc9d6; font: 500 15px var(--technical); letter-spacing: .075em; transition: fill 400ms ease; }
.factory-label.is-active { fill: #f5f7fa; }
.factory-label.is-active path { stroke: #b8d1e7; }
.flow { fill: none; stroke: #cfe7fa; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 20 1 77; stroke-dashoffset: 9; }
.circuit-packet { opacity: .65; }
.guide-packet { stroke-dasharray: 2 98; }
.flow { animation: signal 5.2s linear infinite paused; }
.factory-module.is-active .deck-body { animation: lift 5.2s ease-in-out infinite paused; }
.is-playing .flow, .is-playing .factory-module.is-active .deck-body { animation-play-state: running; }
@keyframes signal { to { stroke-dashoffset: -91; } }
@keyframes lift { 0%, 100% { transform: translateY(0); } 46%, 58% { transform: translateY(-16px); } }

.factory-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #667787; }
.factory-rail button { position: relative; min-width: 0; min-height: 68px; padding: 12px clamp(12px, 1.75vw, 27px); border: 0; border-right: 1px solid #667787; color: var(--white-cold); background: transparent; text-align: left; font-size: clamp(17px, 2vw, 30px); font-weight: 800; letter-spacing: -.028em; transition: background-color 180ms; }
.factory-rail button:last-child { border-right: 0; }
.factory-rail button:hover { background: #243340; }
.factory-rail button[aria-selected="true"]::before { position: absolute; inset: -1px 0 auto; height: 3px; background: var(--steel-light); content: ""; }
.factory-rail button:focus-visible { z-index: 1; outline-offset: -5px; }
.factory-rail button span { margin-right: .28em; color: var(--steel-light); font-variant-numeric: tabular-nums; }
.factory-explorer-label { margin-bottom: 10px; color: var(--steel-light); font: 500 12px/1.4 var(--technical); letter-spacing: .07em; text-transform: uppercase; }
.factory-rail button[aria-selected="true"] { background: #1c2731; }
.factory-detail:not([hidden]) { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(18px, 4vw, 62px); padding: 21px clamp(14px, 1.75vw, 27px); border: 1px solid #667787; border-top: 0; background: #1c2731; }
.factory-detail:focus-visible { outline-offset: -4px; }
.factory-detail h2 { margin-bottom: 5px; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.25; letter-spacing: -.025em; }
.factory-detail p { color: #d1d9e1; font-size: 16px; line-height: 1.48; }
.factory-result { align-self: center; padding-left: 19px; border-left: 1px solid #667787; }
.factory-result p:first-child { margin-bottom: 5px; color: var(--steel-light); font: 500 11px/1.4 var(--technical); letter-spacing: .07em; text-transform: uppercase; }

.section { border-top: 1px solid var(--rule); padding-block: 48px 74px; scroll-margin-top: 16px; }
.section-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 36px; margin-bottom: 34px; }
.section-intro h2, .contact h2 { margin-top: 7px; font-size: clamp(35px, 4.35vw, 67px); line-height: 1.12; letter-spacing: -.052em; }
.services .section-intro { grid-template-columns: 41% 1fr; }
.services h2 { font-size: clamp(35px, 3.75vw, 58px); }
.section-intro > p { font-size: clamp(18px, 1.74vw, 26px); line-height: 1.42; max-width: 41ch; }
.service-list, .process-list { list-style: none; margin: 0; padding: 0; }
.service-list li { display: grid; grid-template-columns: 60px minmax(205px, .87fr) 1.9fr; align-items: baseline; gap: 20px; padding-block: 24px; border-block-start: 1px solid var(--rule); }
.service-list li:last-child { border-block-end: 1px solid var(--rule); }
.list-number { color: var(--steel); font-weight: 800; font-variant-numeric: tabular-nums; font-size: clamp(17px, 2vw, 29px); }
.section h3 { font-size: clamp(20px, 2vw, 30px); line-height: 1.2; letter-spacing: -.032em; }
.service-list p { font-size: clamp(16px, 1.38vw, 21px); line-height: 1.55; }
.process-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 27px; }
.process-list li { border-top: 2px solid var(--steel); padding: 17px 17px 4px 0; }
.process-list .list-number { display: block; margin-bottom: 11px; font-size: 18px; }
.process-list p { margin-top: 10px; line-height: 1.6; color: var(--muted); max-width: 32ch; }

.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(25px, 6vw, 90px); }
.contact-intro > p:last-child { margin-top: 19px; font-size: clamp(18px, 1.74vw, 26px); line-height: 1.45; max-width: 36ch; }
.contact form { border: 1px solid var(--rule); padding: clamp(20px, 3vw, 42px); background: #fcfcf8; border-radius: 5px; }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-note { color: var(--muted); margin: 8px 0 22px; line-height: 1.55; }
form label { display: block; margin: 14px 0 7px; font-weight: 800; }
form input, form select, form textarea { display: block; width: 100%; padding: 10px 12px; min-height: 46px; background: #fff; color: var(--carbon); border: 1px solid #788480; border-radius: 3px; }
form select {
  appearance: none;
  padding-inline-end: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%2340586d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
form textarea { resize: vertical; }
form .button { margin-top: 18px; }
form .button:disabled { cursor: wait; opacity: .75; }
.form-status:not(:empty) { margin-top: 11px; color: var(--steel); font-weight: 700; }

.form-status[data-state="error"] { color: #96372c; }

.site-footer { background: var(--carbon); color: var(--white-cold); }
.footer-content { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; padding-block: 48px 37px; }
.footer-brand a { display: inline-block; max-width: 100%; }
.footer-brand p { margin-top: 11px; color: #c4ccd1; font-size: 15px; }
.footer-nav > p { color: var(--steel-light); font: 500 12px/1.4 var(--technical); letter-spacing: .07em; text-transform: uppercase; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 4px clamp(14px, 3vw, 42px); list-style: none; margin: 6px 0 0; padding: 0; }
.footer-nav a, .footer-meta a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; }
.footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; padding-block: 5px; border-top: 1px solid var(--dark-rule); color: #c4ccd1; font-size: 13px; }
.footer-meta a { gap: 8px; }
.footer-meta a span { color: var(--steel-light); }
.site-footer a:hover { color: var(--steel-light); text-decoration: underline; }
.site-footer a:focus-visible { outline-color: var(--steel-light); }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 46% 54%; padding-bottom: 20px; }
  .hero h1 { font-size: clamp(36px, 5.75vw, 60px); }
  .hero-copy { padding-top: 18px; }
  .hero-actions .button { min-height: 48px; padding-inline: 17px; }
  .factory-caption { top: 0; }
  .motion-control { top: 0; }
}

@media (max-width: 800px) {
  .header-content { grid-template-columns: 1fr auto; gap: 0 13px; padding: 13px 0 3px; }
  .brand { width: min(188px, 50vw); }
  .header-contact { grid-column: 2; grid-row: 1; min-height: 44px; padding-inline: 12px; }
  .main-nav { grid-row: 2; grid-column: 1 / -1; justify-content: space-between; gap: 9px; }
  .main-nav a { min-height: 44px; font-size: 14px; display: flex; align-items: center; }
  .opening { padding-block: 34px 29px; overflow: clip; }
  .hero { grid-template-columns: 1fr; gap: 28px; padding-bottom: 7px; }
  .hero-copy { padding-top: 0; }
  .hero h1 { font-size: clamp(38px, 11.3vw, 74px); margin-block: 15px 18px; }
  .hero-lead { letter-spacing: -.02em; }
  .hero-description { margin-top: 9px; }
  .hero-actions { margin-top: 17px; }
  .factory { width: min(100%, 600px); margin-inline: auto; padding-top: 37px; }
  .factory-drawing { width: 118%; margin-left: 2%; }
  .factory-label { display: none; }
  .factory-rail button { min-height: 58px; padding: 8px 4px 7px 9px; font-size: clamp(12px, 3.65vw, 21px); }
  .factory-rail button span { display: block; margin: 0; font: 500 .82em var(--technical); }
  .factory-detail:not([hidden]) { grid-template-columns: 1fr; gap: 14px; padding: 16px 13px; }
  .factory-result { padding: 11px 0 0; border: 0; border-top: 1px solid #667787; }
  .section { padding-block: 34px 43px; }
  .section-intro, .services .section-intro, .contact { grid-template-columns: 1fr; gap: 16px; }
  .section-intro { margin-bottom: 21px; }
  .section-intro h2, .contact h2 { margin-top: 5px; }
  .service-list li { grid-template-columns: 32px 1fr; gap: 7px 10px; padding-block: 16px; }
  .service-list p { grid-column: 2; }
  .process-list { grid-template-columns: 1fr; gap: 19px; }
  .process-list li { padding-top: 12px; }
  .process-list .list-number { margin-bottom: 5px; }
  .contact-intro > p:last-child { margin-top: 10px; }
  .contact-fields { grid-template-columns: 1fr; gap: 0; }
  .footer-content { grid-template-columns: 1fr; gap: 24px; padding-block: 30px 18px; }
  .footer-brand img { width: 198px; }
  .footer-nav ul { margin-top: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .deck-rim, .factory-label, .factory-rail button { transition: none; }
  .flow, .factory-module.is-active .deck-body { animation: none; }
}

@media (forced-colors: active) {
  form select { appearance: auto; padding-inline-end: 12px; background-image: none; }
}