:root {
  --ink: #0b0f14;
  --ink-2: #111820;
  --graphite: #1c252e;
  --steel: #5f6b76;
  --muted: #66717d;
  --line: #dfe3e7;
  --line-dark: rgba(255,255,255,.14);
  --paper: #f3f5f6;
  --white: #ffffff;
  --copper: #c96f2d;
  --copper-dark: #9b4e18;
  --copper-soft: #fff3ea;
  --shadow: 0 24px 60px rgba(8, 13, 18, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 76px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 36px;
  background: rgba(11, 15, 20, .94);
  color: #fff;
  border-bottom: 1px solid var(--line-dark);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 16px; min-width: 290px; }
.brand-logo { width: 54px; height: 54px; object-fit: contain; }
.brand strong { display: block; font-size: 17px; letter-spacing: .01em; }
.brand small { display: block; margin-top: 2px; color: #b9c0c7; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 12px 14px;
  color: #d7dde4;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 600;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.08); }

.hero {
  position: relative;
  min-height: 720px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 0;
  color: #fff;
  background:
    radial-gradient(circle at 14% 16%, rgba(201,111,45,.28), transparent 28%),
    linear-gradient(135deg, rgba(11,15,20,.97), rgba(17,24,32,.94)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 92px);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 12% -12% auto auto;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(255,255,255,.08);
  transform: rotate(22deg);
  background: linear-gradient(135deg, rgba(255,255,255,.045), transparent);
}
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--copper), transparent 35%, var(--copper));
}
.hero-copy { position: relative; z-index: 1; max-width: 980px; padding: 118px 72px 110px; align-self: center; }
.eyebrow, .kicker {
  margin: 0 0 22px;
  color: var(--copper);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 980px;
  margin-bottom: 28px;
  font-size: clamp(48px, 6.2vw, 88px);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.05em;
}
.hero-lead { max-width: 820px; color: #dce2e8; font-size: 21px; line-height: 1.6; }
.hero-actions, .contact-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--copper); border-color: var(--copper); color: #fff; }
.button.primary:hover { background: var(--copper-dark); border-color: var(--copper-dark); }
.button.ghost { background: transparent; border-color: rgba(255,255,255,.72); color: #fff; }
.button.ghost:hover { background: #fff; color: var(--ink); }

.hero-panel {
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 56px 42px 92px;
  background: rgba(8, 12, 16, .56);
  border-left: 1px solid var(--line-dark);
}
.hero-panel p { margin-bottom: 22px; color: #fff; font-size: 28px; font-weight: 300; line-height: 1.18; letter-spacing: -.02em; }
.hero-panel ul { margin: 0; padding: 0; list-style: none; color: #d7dde4; }
.hero-panel li { position: relative; margin: 14px 0; padding-left: 22px; }
.hero-panel li::before { content: ''; position: absolute; left: 0; top: .72em; width: 8px; height: 8px; background: var(--copper); }

.section { padding: 92px 72px; }
.section-head { max-width: 980px; margin-bottom: 46px; }
.section-head.compact { max-width: 840px; }
.section-head.inverted { color: #fff; }
.section-head p:not(.kicker) { margin-top: 18px; color: #c9d0d7; font-size: 18px; }
h2 { margin-bottom: 0; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.05; font-weight: 300; letter-spacing: -.04em; }

.positioning { display: grid; grid-template-columns: 180px minmax(0, 960px); gap: 70px; background: #fff; }
.positioning-rule { width: 100%; height: 4px; margin-top: 22px; background: var(--copper); }
.positioning-copy p:last-child { max-width: 920px; margin-top: 28px; color: var(--muted); font-size: 21px; line-height: 1.65; }

.services { background: var(--paper); }
.service-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.service-grid article {
  position: relative;
  min-height: 292px;
  padding: 26px;
  background: #fff;
  border-color: transparent;
  transition: transform .45s ease, box-shadow .45s ease, background-color .45s ease;
}
.service-grid article:hover {
  transform: translateY(-3px);
  background: #fffdfb;
  box-shadow: 0 18px 38px rgba(11, 15, 20, .08);
}
.service-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 48px;
  color: var(--copper-dark);
  border: 1px solid #ead3c3;
  background: var(--copper-soft);
  overflow: hidden;
  transition: transform .45s ease, color .45s ease, border-color .45s ease, background-color .45s ease;
}
.service-icon svg {
  position: relative;
  z-index: 2;
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-icon::before,
.service-icon::after {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: 0;
}
.service-grid article:hover .service-icon {
  transform: scale(1.04);
  color: #d97832;
  border-color: rgba(201, 111, 45, .52);
  background: #fff7f0;
}
.service-grid article:nth-child(1) .service-icon::before {
  left: 8px;
  bottom: 10px;
  width: 27px;
  height: 2px;
  background: linear-gradient(90deg, rgba(95,107,118,.45), rgba(201,111,45,.92));
  transform: translateX(-18px);
}
.service-grid article:nth-child(1):hover .service-icon::before { animation: surfaceScrape .62s ease-out both; }
.service-grid article:nth-child(1):hover .service-icon svg { animation: scrapeTool .62s ease-out both; }
.service-grid article:nth-child(2) .service-icon::before,
.service-grid article:nth-child(2) .service-icon::after {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--copper);
}
.service-grid article:nth-child(2) .service-icon::before { right: 10px; top: 11px; }
.service-grid article:nth-child(2) .service-icon::after { right: 15px; top: 18px; }
.service-grid article:nth-child(2):hover .service-icon svg { animation: toolPulse .46s ease-in-out both; }
.service-grid article:nth-child(2):hover .service-icon::before { animation: soberSpark .58s ease-out both; }
.service-grid article:nth-child(2):hover .service-icon::after { animation: soberSpark .58s .08s ease-out both; }
.service-grid article:nth-child(3) .service-icon::before {
  left: 7px;
  bottom: 9px;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(201,111,45,.2), rgba(201,111,45,.9));
}
.service-grid article:nth-child(3):hover .service-icon::before { animation: coatingPass .72s ease-out both; }
.service-grid article:nth-child(3):hover .service-icon svg { animation: applicatorPass .72s ease-out both; }
.service-grid article:nth-child(4) .service-icon::before {
  left: 17px;
  top: 16px;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(201, 111, 45, .9);
  border-radius: 45% 55% 42% 58%;
  background: rgba(201, 111, 45, .12);
  transform: scale(1.35);
}
.service-grid article:nth-child(4):hover .service-icon::before { animation: containCorrosion .68s ease-out both; }
.service-grid article:nth-child(4):hover .service-icon svg { animation: shieldSettle .68s ease-out both; }
.service-grid article:nth-child(5) .service-icon::before {
  right: 11px;
  top: 11px;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  transform: rotate(45deg) translate(-4px, -4px);
}
.service-grid article:nth-child(5) .service-icon::after {
  left: 9px;
  bottom: 10px;
  width: 15px;
  height: 2px;
  background: currentColor;
  transform: translateX(-5px);
}
.service-grid article:nth-child(5):hover .service-icon::before { animation: nutAlign .62s ease-out both; }
.service-grid article:nth-child(5):hover .service-icon::after { animation: partAdjust .62s ease-out both; }
.service-grid article:nth-child(5):hover .service-icon svg { animation: assemblySettle .62s ease-out both; }
.service-grid h3 { min-height: 58px; margin-bottom: 14px; font-size: 22px; line-height: 1.15; letter-spacing: -.015em; }
.service-grid p { color: var(--muted); margin-bottom: 0; }

@keyframes surfaceScrape {
  0% { opacity: 0; transform: translateX(-18px); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateX(20px); }
}
@keyframes scrapeTool { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(2px); } }
@keyframes toolPulse {
  0%, 100% { transform: rotate(0deg) translate(0,0); }
  25% { transform: rotate(-2deg) translate(.5px,-.5px); }
  50% { transform: rotate(2deg) translate(-.5px,.5px); }
  75% { transform: rotate(-1deg) translate(.4px,0); }
}
@keyframes soberSpark {
  0% { opacity: 0; transform: translate(0,0) scale(.7); }
  28% { opacity: .9; }
  100% { opacity: 0; transform: translate(7px,-7px) scale(.2); }
}
@keyframes coatingPass {
  0% { opacity: 0; width: 0; }
  22% { opacity: 1; }
  100% { opacity: .95; width: 30px; }
}
@keyframes applicatorPass { 0% { transform: translateX(-1px); } 100% { transform: translateX(2px); } }
@keyframes containCorrosion {
  0% { opacity: .9; transform: scale(1.35); border-radius: 45% 55% 42% 58%; }
  100% { opacity: .95; transform: scale(.72); border-radius: 50%; background: rgba(201,111,45,.04); }
}
@keyframes shieldSettle { 0% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes nutAlign {
  0% { opacity: 0; transform: rotate(45deg) translate(-6px, -6px); }
  30% { opacity: .9; }
  100% { opacity: .85; transform: rotate(45deg) translate(0, 0); }
}
@keyframes partAdjust {
  0% { opacity: 0; transform: translateX(-5px); }
  35% { opacity: .85; }
  100% { opacity: .75; transform: translateX(1px); }
}
@keyframes assemblySettle { 0% { transform: translateY(0); } 55% { transform: translateY(-1px); } 100% { transform: translateY(0); } }


.process { color: #fff; background: var(--ink); }
.process-line { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line-dark); border: 1px solid var(--line-dark); }
.process-line li { min-height: 290px; padding: 26px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); }
.process-line span { display: block; margin-bottom: 52px; color: var(--copper); font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
.process-line strong { display: block; min-height: 54px; margin-bottom: 16px; color: #fff; font-size: 21px; line-height: 1.18; }
.process-line p { margin: 0; color: #c8d0d8; }

.standards { background: #fff; }
.standards-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.standards-grid article { min-height: 250px; padding: 28px; border: 1px solid var(--line); background: #fff; }
.standards-grid h3 { margin-bottom: 22px; color: var(--copper-dark); font-family: 'IBM Plex Mono', monospace; font-size: 20px; letter-spacing: .02em; }
.standards-grid p { margin: 0; color: #46515b; }
.technical-note { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 32px; margin-top: 22px; padding: 26px 28px; border-left: 4px solid var(--copper); background: #f8f4f0; }
.technical-note strong { color: var(--copper-dark); font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; }
.technical-note p { margin: 0; color: #44392f; }

.projects { color: #fff; background: #0c1117; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.project-card { display: flex; flex-direction: column; min-height: 100%; border: 1px solid var(--line-dark); background: rgba(255,255,255,.045); box-shadow: 0 24px 70px rgba(0,0,0,.22); }
.project-media { display: grid; gap: 6px; padding: 6px; background: rgba(255,255,255,.06); }
.project-media.trio { grid-template-columns: 1fr 1fr; }
.project-media.duo { grid-template-columns: 1fr 1fr; }
.project-media .main-img { grid-column: 1 / -1; height: 300px; }
.project-media.duo .main-img { height: 300px; }
.project-media img { width: 100%; height: 126px; display: block; object-fit: cover; aspect-ratio: 16 / 10; filter: saturate(.86) contrast(1.08) brightness(.96); }
.project-copy { padding: 26px; }
.project-copy span { display: block; margin-bottom: 14px; color: #f0b27a; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.project-copy h3 { margin-bottom: 14px; font-size: 25px; line-height: 1.12; letter-spacing: -.02em; }
.project-copy p { margin: 0; color: #cbd3dc; }

.contact { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 72px; padding: 92px 72px; color: #fff; background:
  linear-gradient(135deg, rgba(12,17,23,.98), rgba(28,37,46,.92)),
  repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 92px);
}
.contact h2 { max-width: 820px; }
.contact-copy > p:not(.kicker) { max-width: 800px; margin-top: 26px; color: #d7dee5; font-size: 20px; line-height: 1.62; }
.direct-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.direct-links a { padding: 11px 13px; color: #dbe2e9; border: 1px solid var(--line-dark); background: rgba(255,255,255,.05); }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-self: start; padding: 28px; color: var(--ink); background: #fff; box-shadow: var(--shadow); }
.contact-form label { display: grid; gap: 8px; color: #2a333c; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.contact-form .wide, .form-button { grid-column: 1 / -1; }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid #cfd5db; border-radius: 2px; padding: 13px 12px; color: var(--ink); font: inherit; background: #f9fafb; }
.contact-form textarea { resize: vertical; }
.form-button { margin-top: 4px; background: var(--ink); color: #fff; border-color: var(--ink); }
.form-button:hover { background: var(--copper-dark); border-color: var(--copper-dark); }

.footer { display: flex; justify-content: space-between; gap: 24px; padding: 28px 72px; color: #d8dde4; background: #050607; font-size: 14px; }
.footer a { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .service-grid article,
  .service-icon,
  .service-icon svg,
  .service-icon::before,
  .service-icon::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

@media (max-width: 1240px) {
  .service-grid, .process-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-grid { grid-template-columns: 1fr; }
  .project-media .main-img, .project-media.duo .main-img { height: 380px; }
}

@media (max-width: 1020px) {
  .site-header { position: static; display: block; padding: 0; }
  .brand { padding: 12px 24px; border-bottom: 1px solid var(--line-dark); }
  .nav { overflow-x: auto; padding: 6px 12px; }
  .nav a { white-space: nowrap; }
  .hero, .contact, .positioning { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-copy { padding: 82px 28px; }
  .hero-panel { padding: 34px 28px 48px; border-left: 0; border-top: 1px solid var(--line-dark); }
  .section, .contact { padding: 72px 28px; }
  .positioning { gap: 28px; }
  .positioning-rule { width: 90px; }
  .standards-grid { grid-template-columns: 1fr 1fr; }
  .technical-note { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 680px) {
  .brand { min-width: 0; }
  .brand-logo { width: 46px; height: 46px; }
  .brand small { font-size: 10px; }
  .nav { flex-wrap: wrap; overflow: visible; gap: 2px; padding: 8px 18px 12px; }
  .nav a { padding: 8px 10px; font-size: 13px; }
  h1 { font-size: clamp(42px, 13vw, 58px); }
  h2 { font-size: clamp(33px, 10vw, 46px); }
  .hero-lead, .positioning-copy p:last-child, .contact-copy > p:not(.kicker) { font-size: 18px; }
  .service-grid, .process-line, .standards-grid, .contact-form { grid-template-columns: 1fr; }
  .service-grid article, .process-line li, .standards-grid article { min-height: auto; }
  .service-icon, .process-line span { margin-bottom: 26px; }
  .project-media.trio, .project-media.duo { grid-template-columns: 1fr; }
  .project-media .main-img, .project-media.duo .main-img, .project-media img { height: 230px; }
  .direct-links { display: grid; }
  .footer { flex-direction: column; padding: 28px; }
}


/* JM Roa — sistema integral de microanimaciones técnicas 2026-07-09 */
:root {
  --motion-ease: cubic-bezier(.22, .61, .36, 1);
  --motion-ease-out: cubic-bezier(.16, 1, .3, 1);
  --motion-fast: .42s;
  --motion-med: .64s;
  --motion-slow: .86s;
  --copper-glow: rgba(201, 111, 45, .34);
}

.motion-ready body { overflow-x: hidden; }

.site-header {
  transition: min-height var(--motion-med) var(--motion-ease),
    padding var(--motion-med) var(--motion-ease),
    background-color var(--motion-med) var(--motion-ease),
    box-shadow var(--motion-med) var(--motion-ease),
    border-color var(--motion-med) var(--motion-ease);
}
.site-header::after {
  content: '';
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
  opacity: 0;
  transform: scaleX(.18);
  transform-origin: center;
  transition: opacity var(--motion-med) var(--motion-ease), transform var(--motion-med) var(--motion-ease);
}
.site-header.is-scrolled {
  min-height: 64px;
  background: rgba(5, 7, 9, .98);
  border-color: rgba(201, 111, 45, .24);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
}
.site-header.is-scrolled::after { opacity: .9; transform: scaleX(1); }
.brand { animation: brandLoad var(--motion-slow) var(--motion-ease-out) both; }
.nav a { position: relative; overflow: hidden; transition: color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease); }
.nav a::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--motion-fast) var(--motion-ease);
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.055); }
.nav a:hover::after { transform: scaleX(1); }

.hero::after {
  height: 5px;
  background: linear-gradient(90deg, transparent, var(--copper), rgba(201,111,45,.12), var(--copper), transparent);
  background-size: 240% 100%;
  animation: traceLine 9s linear infinite;
}
.hero-copy .eyebrow { animation: heroRise var(--motion-med) var(--motion-ease-out) .08s both; }
.hero-copy h1 { animation: heroTitleIn var(--motion-slow) var(--motion-ease-out) .18s both; }
.hero-lead { animation: heroRise var(--motion-med) var(--motion-ease-out) .34s both; }
.hero-actions { animation: heroRise var(--motion-med) var(--motion-ease-out) .48s both; }
.hero-panel { animation: panelTraceIn var(--motion-slow) var(--motion-ease-out) .38s both; }
.hero-panel li { opacity: 0; animation: bulletIn .58s var(--motion-ease-out) both; }
.hero-panel li:nth-child(1) { animation-delay: .58s; }
.hero-panel li:nth-child(2) { animation-delay: .66s; }
.hero-panel li:nth-child(3) { animation-delay: .74s; }
.hero-panel li:nth-child(4) { animation-delay: .82s; }
.hero-panel li::before { transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease); }
.hero-panel li:hover::before { transform: scaleX(1.45); background: #e28643; }

.button { position: relative; overflow: hidden; will-change: transform; transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.button::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -45%;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-18deg) translateX(0);
  opacity: 0;
  pointer-events: none;
}
.button:hover { transform: translateY(-2px); }
.button:hover::after { animation: buttonPass .72s var(--motion-ease-out) both; }
.button.primary:hover,
.form-button:hover { background: #d77932; border-color: #d77932; box-shadow: 0 12px 24px rgba(201,111,45,.18); }
.button.ghost:hover { border-color: var(--copper); color: var(--ink); }
.contact .button.ghost:hover, .hero .button.ghost:hover { color: var(--ink); }
.form-button.is-sending::before {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 8px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
  animation: buttonConfirm .82s var(--motion-ease-out) both;
}

.reveal-block { opacity: 0; transform: translateY(18px); transition: opacity var(--motion-slow) var(--motion-ease-out), transform var(--motion-slow) var(--motion-ease-out); }
.reveal-block.is-visible { opacity: 1; transform: translateY(0); }
.service-grid article.reveal-block:nth-child(1), .process-line li.reveal-block:nth-child(1), .standards-grid article.reveal-block:nth-child(1), .project-card.reveal-block:nth-child(1) { transition-delay: .03s; }
.service-grid article.reveal-block:nth-child(2), .process-line li.reveal-block:nth-child(2), .standards-grid article.reveal-block:nth-child(2), .project-card.reveal-block:nth-child(2) { transition-delay: .11s; }
.service-grid article.reveal-block:nth-child(3), .process-line li.reveal-block:nth-child(3), .standards-grid article.reveal-block:nth-child(3), .project-card.reveal-block:nth-child(3) { transition-delay: .19s; }
.service-grid article.reveal-block:nth-child(4), .process-line li.reveal-block:nth-child(4), .standards-grid article.reveal-block:nth-child(4) { transition-delay: .27s; }
.service-grid article.reveal-block:nth-child(5), .process-line li.reveal-block:nth-child(5) { transition-delay: .35s; }

.positioning { overflow: hidden; }
.positioning-rule { transform: scaleX(0); transform-origin: left; transition: transform var(--motion-slow) var(--motion-ease-out); }
.positioning.is-visible .positioning-rule { transform: scaleX(1); }
.positioning-copy h2, .positioning-copy p:last-child { transition: opacity var(--motion-slow) var(--motion-ease-out), transform var(--motion-slow) var(--motion-ease-out), clip-path var(--motion-slow) var(--motion-ease-out); }
.positioning:not(.is-visible) .positioning-copy h2 { opacity: 0; transform: translateY(14px); clip-path: inset(0 0 22% 0); }
.positioning:not(.is-visible) .positioning-copy p:last-child { opacity: 0; transform: translateY(12px); }
.positioning.is-visible .positioning-copy p:last-child { transition-delay: .16s; }

.service-grid article { border: 1px solid transparent; }
.service-grid article::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(201,111,45,0);
  pointer-events: none;
  transition: border-color var(--motion-med) var(--motion-ease), opacity var(--motion-med) var(--motion-ease);
  opacity: 0;
}
.service-grid article:hover::after { border-color: rgba(201,111,45,.48); opacity: 1; }

.process { position: relative; overflow: hidden; }
.process-line { position: relative; isolation: isolate; }
.process-line::before {
  content: '';
  position: absolute;
  left: 2%;
  right: 2%;
  top: 44px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 1;
}
.process-line.is-visible::before { animation: processTrace .86s var(--motion-ease-out) .12s both; }
.process-line li { position: relative; overflow: hidden; transition: transform var(--motion-med) var(--motion-ease), background-color var(--motion-med) var(--motion-ease), border-color var(--motion-med) var(--motion-ease); }
.process-line li::before, .process-line li::after { content: ''; position: absolute; pointer-events: none; opacity: 0; }
.process-line li::before { left: 0; top: 0; width: 0; height: 2px; background: var(--copper); transition: width var(--motion-med) var(--motion-ease), opacity var(--motion-med) var(--motion-ease); }
.process-line li:hover { transform: translateY(-3px); background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.026)); }
.process-line li:hover::before { width: 100%; opacity: .85; }
.process-line li:hover span { color: #f0a15c; }
.process-line li:nth-child(1)::after { left: 22px; top: 70px; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--copper), transparent); transform: translateX(-12px); }
.process-line li:nth-child(1):hover::after { animation: scanPass .64s var(--motion-ease-out) both; }
.process-line li:nth-child(2)::after { inset: 18px; border: 1px solid rgba(201,111,45,.55); transform: scale(.92); }
.process-line li:nth-child(2):hover::after { animation: secureArea .68s var(--motion-ease-out) both; }
.process-line li:nth-child(3)::after { left: 22px; top: 74px; width: 56px; height: 2px; background: linear-gradient(90deg, rgba(201,111,45,.08), var(--copper)); transform: translateX(-20px); }
.process-line li:nth-child(3):hover::after { animation: cleanLine .62s var(--motion-ease-out) both; }
.process-line li:nth-child(4)::after { left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(90deg, rgba(201,111,45,.18), rgba(201,111,45,.58)); }
.process-line li:nth-child(4):hover::after { animation: coatBase .72s var(--motion-ease-out) both; }
.process-line li:nth-child(5)::after { right: 22px; top: 68px; width: 18px; height: 9px; border-left: 2px solid var(--copper); border-bottom: 2px solid var(--copper); transform: rotate(-45deg) scale(.7); }
.process-line li:nth-child(5):hover::after { animation: checkSet .58s var(--motion-ease-out) both; }

.standards-grid article { position: relative; transition: transform var(--motion-med) var(--motion-ease), border-color var(--motion-med) var(--motion-ease), box-shadow var(--motion-med) var(--motion-ease); }
.standards-grid article:hover { transform: translateY(-2px); border-color: rgba(201,111,45,.48); box-shadow: 0 14px 30px rgba(11,15,20,.06); }
.standards-grid h3 { position: relative; display: inline-block; }
.standards-grid h3::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform var(--motion-fast) var(--motion-ease); }
.standards-grid article:hover h3::after { transform: scaleX(1); }
.technical-note { position: relative; overflow: hidden; }
.technical-note::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(201,111,45,.10), transparent 46%); transform: translateX(-100%); opacity: 0; }
.technical-note.is-visible::before { animation: noteReveal .82s var(--motion-ease-out) both; }

.project-card { position: relative; overflow: hidden; transition: transform var(--motion-med) var(--motion-ease), border-color var(--motion-med) var(--motion-ease), box-shadow var(--motion-med) var(--motion-ease); }
.project-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--copper); transform: scaleX(0); transform-origin: left; opacity: .9; pointer-events: none; }
.project-card:hover { transform: translateY(-4px); border-color: rgba(201,111,45,.42); box-shadow: 0 28px 76px rgba(0,0,0,.28); }
.project-card:hover::after { animation: projectTrace .72s var(--motion-ease-out) both; }
.project-media { position: relative; overflow: hidden; }
.project-media::after { content: 'EVIDENCIA TÉCNICA'; position: absolute; left: 12px; top: 12px; padding: 5px 8px; color: #fff; background: rgba(11,15,20,.62); border-left: 2px solid var(--copper); font: 600 10px/1 'IBM Plex Mono', monospace; letter-spacing: .1em; opacity: 0; transform: translateY(-5px); transition: opacity var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
.project-card:hover .project-media::after { opacity: .95; transform: translateY(0); }
.project-media img { transition: transform .72s var(--motion-ease-out), filter .72s var(--motion-ease-out); }
.project-card.is-visible .project-media img { animation: imageSettle .72s var(--motion-ease-out) both; }
.project-card:hover .project-media img { transform: scale(1.03); filter: saturate(.9) contrast(1.11) brightness(.9); }
.project-card:nth-child(1)::before { content: ''; position: absolute; left: 18px; right: 18px; bottom: 18px; height: 1px; background: linear-gradient(90deg, transparent, var(--copper), transparent); opacity: 0; z-index: 2; pointer-events: none; }
.project-card:nth-child(1):hover::before { animation: portLine .72s var(--motion-ease-out) both; }
.project-card:nth-child(2)::after { transform-origin: left; }
.project-card:nth-child(3)::before { content: ''; position: absolute; right: 22px; bottom: 22px; width: 16px; height: 16px; border: 1px solid var(--copper); border-radius: 50%; opacity: 0; transform: scale(1.45); z-index: 2; pointer-events: none; }
.project-card:nth-child(3):hover::before { animation: corrosionPoint .68s var(--motion-ease-out) both; }

.contact { position: relative; overflow: hidden; }
.contact::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--copper), transparent); opacity: .55; }
.contact-copy.reveal-block, .contact-form.reveal-block { transform: translateY(16px); }
.contact-form.reveal-block { transform: translateX(18px); }
.direct-links a { transition: color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease); }
.direct-links a:hover { color: #fff; border-color: rgba(201,111,45,.55); background: rgba(201,111,45,.10); transform: translateY(-2px); }
.contact-form { position: relative; overflow: hidden; }
.contact-form::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, transparent, var(--copper), transparent); opacity: .7; }
.contact-form input, .contact-form textarea { transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease); }
.contact-form label { transition: color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
.contact-form label:focus-within { color: var(--copper-dark); transform: translateY(-1px); }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--copper); background: #fff; box-shadow: inset 0 0 0 1px rgba(201,111,45,.14), 0 0 0 3px rgba(201,111,45,.08); }

.footer a { position: relative; transition: color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
.footer a::before { content: '↑'; display: inline-block; margin-right: 7px; color: var(--copper); opacity: 0; transform: translateY(5px); transition: opacity var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
.footer a:hover { color: #f0a15c; transform: translateY(-1px); }
.footer a:hover::before { opacity: 1; transform: translateY(0); }

@keyframes brandLoad { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes traceLine { from { background-position: 180% 0; } to { background-position: -60% 0; } }
@keyframes heroRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroTitleIn { from { opacity: 0; transform: translateY(18px); clip-path: inset(0 0 30% 0); } to { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); } }
@keyframes panelTraceIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes bulletIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes buttonPass { 0% { opacity: 0; transform: skewX(-18deg) translateX(0); } 30% { opacity: .8; } 100% { opacity: 0; transform: skewX(-18deg) translateX(360%); } }
@keyframes buttonConfirm { from { transform: scaleX(0); opacity: 0; } 45% { opacity: 1; } to { transform: scaleX(1); opacity: 0; } }
@keyframes processTrace { from { transform: scaleX(0); opacity: .2; } to { transform: scaleX(1); opacity: .9; } }
@keyframes scanPass { from { opacity: 0; transform: translateX(-12px); } 35% { opacity: .9; } to { opacity: 0; transform: translateX(44px); } }
@keyframes secureArea { from { opacity: 0; transform: scale(.92); } to { opacity: .75; transform: scale(1); } }
@keyframes cleanLine { from { opacity: 0; transform: translateX(-20px); } 40% { opacity: .9; } to { opacity: 0; transform: translateX(42px); } }
@keyframes coatBase { from { opacity: 0; height: 0; } to { opacity: .78; height: 5px; } }
@keyframes checkSet { from { opacity: 0; transform: rotate(-45deg) scale(.7); } to { opacity: .9; transform: rotate(-45deg) scale(1); } }
@keyframes noteReveal { from { opacity: 0; transform: translateX(-100%); } 45% { opacity: 1; } to { opacity: 0; transform: translateX(100%); } }
@keyframes projectTrace { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes imageSettle { from { transform: scale(1.025); } to { transform: scale(1); } }
@keyframes portLine { from { opacity: 0; transform: translateX(-18px); } 40% { opacity: .85; } to { opacity: 0; transform: translateX(34px); } }
@keyframes corrosionPoint { from { opacity: 0; transform: scale(1.45); } to { opacity: .9; transform: scale(.72); } }

@media (max-width: 1020px) {
  .site-header::after { left: 24px; right: 24px; }
  .site-header.is-scrolled { min-height: auto; }
  .hero::after { animation-duration: 12s; opacity: .72; }
  .reveal-block { transform: translateY(10px); transition-duration: .56s; }
  .contact-form.reveal-block { transform: translateY(12px); }
  .process-line::before { display: none; }
}

@media (max-width: 680px) {
  .button:hover, .service-grid article:hover, .process-line li:hover, .project-card:hover, .standards-grid article:hover { transform: none; }
  .project-card:hover .project-media img { transform: scale(1.015); }
  .hero-panel li { animation-delay: .2s !important; }
  .nav a::after { bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  .reveal-block { opacity: 1 !important; transform: none !important; }
  .hero::after { animation: none !important; }
}