Enrique Escamilla | Data Center Infrastructure Engineer

Enrique EscamillaLoading the official final candidate

<!doctype html>
<html lang="en" data-theme="dark" data-language="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
  <meta name="theme-color" content="#02070c">
  <meta name="description" content="Enrique Escamilla — Data Center Infrastructure Engineer and Technical Systems Architect. A cinematic, bilingual CV and professional portfolio.">
  <meta name="author" content="Enrique Escamilla">
  <meta name="portfolio-build" content="CV-PREVIEW-LOCKED-2026-07-31">
  
  <meta name="color-scheme" content="dark light">
  <title>Enrique Escamilla | Data Center Infrastructure Engineer</title>
  <script>
    if (location.hash === "#portfolio") { location.replace("portfolio.html"); }
    (() => {
      try {
        const themeSaved = localStorage.getItem("portfolio-theme");
        const languageSaved = localStorage.getItem("portfolio-language");
        const theme = themeSaved === "light" || themeSaved === "dark"
          ? themeSaved
          : (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark");
        const language = languageSaved === "es" ? "es" : "en";
        document.documentElement.dataset.theme = theme;
        document.documentElement.dataset.language = language;
        document.documentElement.lang = language === "es" ? "es-MX" : "en";
        document.documentElement.style.colorScheme = theme;
      } catch {
        document.documentElement.dataset.theme = "dark";
        document.documentElement.dataset.language = "en";
      }
    })();
  </script>
  <style>
:root {
  --bg: #03070c;
  --bg-elevated: #09111a;
  --panel: rgba(12, 23, 34, .78);
  --panel-solid: #0d1823;
  --text: #f4f7fa;
  --muted: #9ba9b6;
  --line: rgba(196, 221, 240, .15);
  --accent: #57c6ff;
  --accent-2: #8de6cf;
  --accent-soft: rgba(87, 198, 255, .12);
  --glass: rgba(3, 9, 15, .72);
  --shadow: 0 30px 90px rgba(0, 0, 0, .42);
  --mission-bg: #02070c;
  --mission-surface: #050b12;
  --mission-surface-2: #09131d;
  --mission-text: #f4f7fa;
  --mission-muted: rgba(244, 247, 250, .66);
  --mission-faint: rgba(244, 247, 250, .42);
  --mission-line: rgba(196, 221, 240, .15);
  --mission-control: rgba(2, 7, 12, .74);
  --mission-control-text: #f4f7fa;
  --mission-elevation: 0 24px 80px rgba(0, 0, 0, .38);
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #eef3f6;
  --bg-elevated: #f7fafb;
  --panel: rgba(255, 255, 255, .78);
  --panel-solid: #fff;
  --text: #0a1720;
  --muted: #536775;
  --line: rgba(10, 23, 32, .14);
  --accent: #006fa9;
  --accent-2: #08765d;
  --accent-soft: rgba(0, 111, 169, .09);
  --glass: rgba(238, 243, 246, .8);
  --shadow: 0 30px 80px rgba(34, 59, 73, .16);
  --mission-bg: #edf2f5;
  --mission-surface: #f7fafb;
  --mission-surface-2: #e3ebef;
  --mission-text: #07141d;
  --mission-muted: rgba(7, 20, 29, .68);
  --mission-faint: rgba(7, 20, 29, .44);
  --mission-line: rgba(7, 20, 29, .15);
  --mission-control: rgba(255, 255, 255, .8);
  --mission-control-text: #07141d;
  --mission-elevation: 0 24px 70px rgba(35, 59, 72, .18);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  transition: background-color .25s ease, color .25s ease;
}
body::after {
  content: "";
  position: fixed;
  z-index: 1000;
  inset: 0;
  opacity: .026;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
img, video { display: block; max-width: 100%; }
button, summary { cursor: pointer; }
::selection { background: var(--accent); color: #00131f; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.skip-link {
  position: fixed;
  z-index: 200;
  left: 16px;
  top: -90px;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: #00131f;
  font-weight: 800;
}
.skip-link:focus { top: 14px; }
.eyebrow {
  margin: 0 0 16px;
  color: var(--accent-2);
  font: 800 10px/1.25 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Shared cockpit */
.cinematic-header {
  position: fixed;
  z-index: 100;
  top: max(10px, env(safe-area-inset-top));
  left: 10px;
  right: 10px;
  pointer-events: none;
}
.cinematic-nav {
  width: min(1380px, 100%);
  min-height: 62px;
  margin: 0 auto;
  padding: 7px;
  display: grid;
  grid-template:
    "brand tools" auto
    "tabs tabs" auto / 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--glass);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .22);
  backdrop-filter: blur(22px) saturate(140%);
  pointer-events: auto;
}
.cinematic-brand { grid-area: brand; display: flex; align-items: center; gap: 10px; min-width: 44px; }
.cinematic-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(87, 198, 255, .46);
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
  font: 800 10px/1 monospace;
  letter-spacing: .08em;
}
.cinematic-brand-copy { display: none; }
.cinematic-brand-copy strong { display: block; font-size: 12px; }
.cinematic-brand-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.cinematic-tabs {
  grid-area: tabs;
  min-width: 0;
  display: flex;
  justify-self: stretch;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 66%, transparent);
}
.cinematic-tabs a {
  flex: 1;
  min-width: 50px;
  padding: 9px 10px;
  border-radius: 999px;
  color: var(--muted);
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}
.cinematic-tabs a.active { background: var(--text); color: var(--bg); }
.tab-long { display: none; }
.cinematic-tools { grid-area: tools; display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.round-tool,
.narration-pill,
.narration-more summary {
  min-width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
}
.round-tool { padding: 0; font-size: 9px; font-weight: 900; }
.theme-tool { display: block; font-size: 15px; }
.narration-pill {
  min-width: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.narration-pill.enabled { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--accent-soft); }
.narration-wave { height: 14px; display: flex; align-items: center; gap: 2px; }
.narration-wave i { width: 2px; height: 5px; border-radius: 9px; background: var(--accent); }
.narration-pill.playing .narration-wave i { animation: voice .75s ease-in-out infinite alternate; }
.narration-pill.playing .narration-wave i:nth-child(2) { animation-delay: -.35s; }
.narration-pill.playing .narration-wave i:nth-child(3) { animation-delay: -.15s; }
@keyframes voice { to { height: 14px; } }
.narration-copy { display: none; }
.narration-more { position: relative; }
.narration-more summary { display: grid; place-items: center; list-style: none; font-size: 10px; }
.narration-more summary::-webkit-details-marker { display: none; }
.narration-more > div {
  position: absolute;
  top: 50px;
  right: 0;
  width: 170px;
  padding: 8px;
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-solid);
  box-shadow: var(--shadow);
}
.narration-more button { padding: 9px; border: 0; border-radius: 9px; background: var(--accent-soft); text-align: left; font-size: 11px; }
.narration-more small { padding: 5px 8px; color: var(--muted); font-size: 9px; }

/* CV — cinematic, recruiter-scannable */
.cv-cinematic { overflow: hidden; }
.cv-film-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #020509;
  color: #f7f9fc;
}
.cv-film-background {
  position: absolute;
  z-index: -5;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #020509;
  filter: saturate(.82) contrast(1.08) brightness(.78);
}
.cv-film-vignette {
  position: absolute;
  z-index: -4;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(1,4,8,.3) 0%, rgba(1,4,8,.08) 30%, rgba(1,4,8,.92) 78%, #010408 100%),
    radial-gradient(circle at 60% 40%, transparent 16%, rgba(0,0,0,.48) 88%);
}
.cv-film-grid {
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(87,198,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87,198,255,.16) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, transparent 10%, black 55%, transparent);
}
.cv-film-wordmark {
  position: absolute;
  z-index: -2;
  left: -28vw;
  top: 31%;
  color: transparent;
  opacity: .24;
  font-size: 29vw;
  font-weight: 900;
  line-height: .75;
  letter-spacing: -.09em;
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(191,229,250,.56);
  transform: rotate(-90deg);
}
.cv-film-slide {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: max(235px, calc(env(safe-area-inset-bottom) + 222px));
  animation: film-slide-in .58s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes film-slide-in {
  from { opacity: 0; filter: blur(10px); transform: translateY(24px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
.cv-film-slide .eyebrow { margin-bottom: 12px; color: #8de6cf; text-shadow: 0 2px 18px #000; }
.cv-film-slide h1 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(37px, 11vw, 60px);
  line-height: .9;
  letter-spacing: -.065em;
  text-wrap: balance;
  text-shadow: 0 3px 30px rgba(0,0,0,.8);
}
.cv-film-slide > p:not(.eyebrow) {
  max-width: 620px;
  margin: 14px 0 0;
  color: rgba(247,249,252,.76);
  font-size: 13px;
  line-height: 1.55;
  text-shadow: 0 2px 16px #000;
}
.cv-film-slide > strong {
  display: inline-block;
  margin-top: 14px;
  color: #69ccff;
  font: 800 9px/1.3 monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cv-film-controls {
  position: absolute;
  z-index: 5;
  left: 18px;
  right: 18px;
  bottom: max(117px, calc(env(safe-area-inset-bottom) + 105px));
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cv-film-controls button,
.cv-film-controls a {
  min-height: 41px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(1,6,11,.62);
  color: #f7f9fc;
  backdrop-filter: blur(15px);
  font-size: 9px;
  font-weight: 800;
}
.cv-film-controls .film-control-primary {
  border-color: #57c6ff;
  background: #57c6ff;
  color: #00131f;
}
.cv-film-timeline {
  position: absolute;
  z-index: 5;
  left: 18px;
  right: 18px;
  bottom: max(64px, calc(env(safe-area-inset-bottom) + 52px));
}
.cv-film-progress { height: 1px; overflow: hidden; background: rgba(255,255,255,.18); }
.cv-film-progress i { display: block; height: 100%; background: #57c6ff; box-shadow: 0 0 12px #57c6ff; transition: width .18s linear; }
.cv-film-chapters { margin-top: 8px; display: flex; justify-content: space-between; }
.cv-film-chapters button {
  min-width: 28px;
  min-height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.42);
  font: 800 7px/1 monospace;
}
.cv-film-chapters button i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.cv-film-chapters button.active { color: #57c6ff; }
.cv-film-chapters button.active i { box-shadow: 0 0 10px #57c6ff; }
.cv-film-hint {
  position: absolute;
  z-index: 4;
  left: 18px;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px));
  margin: 0;
  color: rgba(255,255,255,.44);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cv-cinema-hero {
  position: relative;
  min-height: 100svh;
  padding: 160px 18px 66px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  background: #02070c;
}
.cv-cinema-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  height: 16%;
  opacity: .55;
  background: linear-gradient(to bottom, transparent, rgba(87, 198, 255, .12), transparent);
  mix-blend-mode: screen;
  animation: hero-scan 5s ease-in-out infinite;
}
@keyframes hero-scan {
  0%, 100% { opacity: 0; transform: translateY(-110%); }
  18%, 82% { opacity: .55; }
  50% { transform: translateY(620%); }
}
.cv-ambient-video {
  position: absolute;
  z-index: -5;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .54;
  filter: saturate(.72) contrast(1.12);
}
.cinema-veil {
  position: absolute;
  z-index: -4;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 4, 8, .18), rgba(0, 4, 8, .9) 80%),
    linear-gradient(90deg, rgba(0, 4, 8, .82), transparent 70%);
}
.cinema-grid,
.mission-cover-grid {
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: .14;
  background-image:
    linear-gradient(rgba(120, 205, 255, .2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 205, 255, .2) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, transparent, black 38%, transparent);
}
.hero-ghost-name {
  position: absolute;
  z-index: -2;
  left: -31vw;
  top: 34%;
  bottom: auto;
  color: transparent;
  opacity: .24;
  font-size: 29vw;
  font-weight: 900;
  line-height: .75;
  letter-spacing: -.09em;
  -webkit-text-stroke: 1px rgba(185, 229, 255, .6);
  white-space: nowrap;
  transform: rotate(-90deg);
  transform-origin: center;
}
.hero-portrait {
  position: absolute;
  z-index: -1;
  top: 128px;
  right: -9%;
  width: 91%;
  height: 61%;
  margin: 0;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 55%, transparent 98%);
}
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 24%; filter: saturate(.72) contrast(1.04); }
.hero-portrait figcaption { position: absolute; right: 14px; top: 14px; display: grid; gap: 4px; color: white; text-align: right; font-size: 9px; }
.hero-portrait figcaption span { color: #8de6cf; letter-spacing: .12em; text-transform: uppercase; }
.cinema-hero-copy { width: min(760px, 100%); color: #f4f7fa; }
.cinema-hero-copy h1 {
  margin: 0;
  font-size: clamp(56px, 18vw, 90px);
  line-height: .8;
  letter-spacing: -.075em;
  text-wrap: balance;
  animation: title-in .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes title-in {
  from { opacity: 0; filter: blur(12px); transform: translateY(38px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
.cinema-hero-copy h1 span { display: block; color: rgba(244, 247, 250, .7); font-size: .42em; letter-spacing: -.04em; }
.cinema-hero-copy h2 { max-width: 650px; margin: 20px 0 12px; color: #69ccff; font-size: clamp(20px, 6vw, 32px); line-height: 1; letter-spacing: -.04em; }
.cinema-lede { max-width: 660px; margin: 0; color: rgba(244, 247, 250, .88); font-size: 15px; line-height: 1.55; }
.cinema-credibility { margin: 16px 0 0; color: rgba(244, 247, 250, .6); font-size: 10px; line-height: 1.5; }
.cinema-actions { margin-top: 22px; display: flex; gap: 8px; }
.cinema-button {
  min-height: 46px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(3, 9, 15, .48);
  color: white;
  backdrop-filter: blur(12px);
  font-size: 10px;
  font-weight: 800;
}
.cinema-button.primary { border-color: #57c6ff; background: #57c6ff; color: #00131f; }
.scroll-cue { position: absolute; right: 18px; bottom: 28px; display: none; align-items: center; gap: 10px; color: rgba(255,255,255,.55); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.scroll-cue i { width: 42px; height: 1px; background: #57c6ff; }

.recruiter-cut { padding: 82px 18px; background: var(--text); color: var(--bg); }
.recruiter-cut .eyebrow { color: #08765d; }
.recruiter-cut-intro h2 { max-width: 650px; margin: 0; font-size: clamp(38px, 11vw, 70px); line-height: .9; letter-spacing: -.065em; }
.signal-strip { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; }
.signal-strip article { min-height: 135px; padding: 20px 14px 20px 0; border-top: 1px solid color-mix(in srgb, var(--bg) 22%, transparent); }
.signal-strip article:nth-child(even) { padding-left: 14px; border-left: 1px solid color-mix(in srgb, var(--bg) 22%, transparent); }
.signal-strip strong { display: block; font-size: clamp(23px, 7vw, 38px); letter-spacing: -.05em; }
.signal-strip span { display: block; max-width: 145px; margin-top: 10px; opacity: .6; font-size: 9px; line-height: 1.45; text-transform: uppercase; }

.cv-story-section,
.capability-cinema,
.profile-film,
.education-strip,
.cinema-contact {
  width: min(1320px, calc(100% - 36px));
  margin: 0 auto;
  padding: 92px 0;
}
.cinema-section-heading h2,
.capability-cinema-copy h2,
.profile-film-copy h2,
.education-strip h2 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(40px, 10vw, 76px);
  line-height: .92;
  letter-spacing: -.065em;
}
.cinema-section-heading > p:last-child,
.capability-cinema-copy > p:last-child,
.profile-film-copy > p {
  max-width: 660px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.experience-reel { margin-top: 48px; border-top: 1px solid var(--line); }
.experience-frame { padding: 28px 0 40px; display: grid; gap: 22px; border-bottom: 1px solid var(--line); }
.experience-index { color: var(--accent); font: 800 10px/1 monospace; }
.experience-period { display: grid; gap: 8px; align-content: start; }
.experience-period time { color: var(--accent-2); font: 800 10px/1.3 monospace; }
.experience-period strong { font-size: 12px; }
.experience-body h3 { margin: 0; font-size: clamp(27px, 8vw, 48px); line-height: .95; letter-spacing: -.05em; }
.experience-body > p { margin: 14px 0; color: var(--muted); line-height: 1.55; }
.experience-body ul { margin: 18px 0 0; padding: 0; list-style: none; }
.experience-body li { position: relative; padding: 10px 0 10px 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; }
.experience-body li::before { content: "↳"; position: absolute; left: 0; color: var(--accent); }

.capability-cinema { width: 100%; padding-left: 18px; padding-right: 18px; background: var(--bg-elevated); }
.capability-filmstrip {
  margin-top: 44px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 82vw);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  padding-bottom: 18px;
}
.capability-filmstrip article {
  min-height: 350px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, var(--panel), transparent);
}
.capability-filmstrip article > span { color: var(--accent); font: 800 10px/1 monospace; }
.capability-filmstrip h3 { margin: auto 0 13px; font-size: 27px; letter-spacing: -.045em; }
.capability-filmstrip strong { color: var(--accent-2); font-size: 10px; line-height: 1.45; }
.capability-filmstrip p { margin: 18px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

.profile-film { display: grid; gap: 34px; }
.profile-film-copy > strong { color: var(--accent-2); font-size: 10px; }
.profile-film-media { position: relative; }
.profile-film-media video { width: 100%; max-height: 700px; border: 1px solid var(--line); border-radius: 24px; background: #000; box-shadow: var(--shadow); }
.profile-film-media > span { position: absolute; left: 14px; bottom: 14px; padding: 8px 10px; border-radius: 999px; background: rgba(0,0,0,.72); color: white; font: 800 8px/1 monospace; letter-spacing: .1em; pointer-events: none; }
.education-strip { display: grid; gap: 38px; border-top: 1px solid var(--line); }
.education-list p { margin: 0; padding: 15px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; }
.language-list { margin: 0; }
.language-list div { padding: 13px 0; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); font-size: 12px; }
.language-list dd { margin: 0; color: var(--muted); text-align: right; }
.cinema-contact {
  margin-bottom: 18px;
  padding: 48px 24px;
  display: grid;
  gap: 42px;
  border-radius: 28px;
  background: var(--accent);
  color: #00131f;
}
.cinema-contact .eyebrow { color: #075270; }
.cinema-contact h2 { margin: 0; font-size: clamp(44px, 12vw, 82px); line-height: .88; letter-spacing: -.07em; }
.cinema-contact p:not(.eyebrow) { max-width: 680px; line-height: 1.6; }
.cinema-contact-actions { display: grid; align-content: end; }
.cinema-contact-actions a { padding: 14px 0; border-bottom: 1px solid rgba(0,19,31,.22); font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
.cinematic-footer { padding: 35px 18px max(45px, env(safe-area-inset-bottom)); display: grid; gap: 8px; color: var(--muted); font-size: 9px; line-height: 1.45; }

/* Professional Portfolio — full-screen mission log */
.mission-shell { height: 100svh; overflow: hidden; background: #02070c; color: #f4f7fa; }
.mission-progress { position: fixed; z-index: 99; top: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.1); }
.mission-progress i { display: block; height: 100%; background: #57c6ff; box-shadow: 0 0 14px #57c6ff; transition: width .4s ease; }
.mission-deck { height: 100svh; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-type: y mandatory; scrollbar-width: none; background: #02070c; }
.mission-deck::-webkit-scrollbar { display: none; }
.mission-scene {
  position: relative;
  min-height: 100svh;
  padding: 160px 18px 88px;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  isolation: isolate;
  background: #040a11;
}
.mission-scene-count { position: absolute; z-index: 3; left: 18px; bottom: max(58px, calc(env(safe-area-inset-bottom) + 52px)); color: rgba(255,255,255,.46); font: 800 8px/1 monospace; letter-spacing: .12em; text-transform: uppercase; }
.mission-cover { display: flex; align-items: flex-end; }
.mission-cover > video { position: absolute; z-index: -5; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.14); }
.mission-cover-veil { position: absolute; z-index: -4; inset: 0; background: linear-gradient(180deg, rgba(0,4,8,.16), rgba(0,5,10,.92)), linear-gradient(90deg, rgba(0,5,10,.9), transparent); }
.mission-cover-copy { width: min(900px, 100%); }
.mission-cover-copy h1 { margin: 0; font-size: clamp(56px, 17vw, 104px); line-height: .82; letter-spacing: -.075em; }
.mission-cover-copy > p:not(.eyebrow) { max-width: 580px; color: rgba(244,247,250,.72); font-size: 14px; line-height: 1.6; }
.mission-cover-actions { margin-top: 24px; display: flex; gap: 8px; }
.mission-cover-actions button, .mission-cover-actions a, .contact-cinema-actions a {
  min-height: 45px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  color: white;
  font-size: 10px;
  font-weight: 800;
}
.mission-cover-actions button, .contact-cinema-actions .primary { border-color: #57c6ff; background: #57c6ff; color: #00131f; }
.mission-rail {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: max(15px, env(safe-area-inset-bottom));
  display: flex;
  gap: 3px;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(2,7,12,.66);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
}
.mission-rail button {
  width: 21px;
  height: 21px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
}
.mission-rail button i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.36);
  box-shadow: 0 0 0 0 rgba(87,198,255,0);
  transition: .25s ease;
}
.mission-rail button.active i {
  width: 8px;
  height: 8px;
  background: #57c6ff;
  box-shadow: 0 0 12px rgba(87,198,255,.9);
}
.mission-rail button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.motion-control {
  position: fixed;
  z-index: 90;
  right: 12px;
  bottom: max(54px, calc(env(safe-area-inset-bottom) + 48px));
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(2,7,12,.72);
  color: white;
  backdrop-filter: blur(15px);
  font-size: 0;
}
.motion-control span { font-size: 11px; }
.motion-paused video { animation-play-state: paused; }

.mission-identity { background: radial-gradient(circle at 75% 35%, rgba(34,143,201,.18), transparent 40%), #050b12; }
.identity-aura { position: absolute; z-index: -1; width: 70vw; aspect-ratio: 1; right: -25vw; top: 14%; border: 1px solid rgba(87,198,255,.18); border-radius: 50%; box-shadow: 0 0 120px rgba(87,198,255,.1) inset; }
.identity-layout { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.identity-copy { position: relative; z-index: 2; }
.identity-copy h2, .mission-scene-heading h2, .case-cinema-copy h2, .dcim-copy h2, .contact-cinema-copy h2 {
  margin: 0;
  font-size: clamp(39px, 11vw, 76px);
  line-height: .9;
  letter-spacing: -.065em;
}
.identity-copy > p:not(.eyebrow), .mission-scene-heading > p:not(.eyebrow), .case-cinema-copy > p, .dcim-copy > p, .contact-cinema-copy > p {
  max-width: 680px;
  color: rgba(244,247,250,.65);
  font-size: 13px;
  line-height: 1.6;
}
.identity-signals { margin-top: 20px; display: flex; gap: 18px; }
.identity-signals span { max-width: 86px; color: rgba(244,247,250,.45); font-size: 8px; line-height: 1.4; text-transform: uppercase; }
.identity-signals strong { display: block; margin-bottom: 5px; color: #f4f7fa; font-size: 16px; }
.identity-portrait { position: absolute; z-index: 0; top: 78px; right: -12%; width: 78%; height: 60%; margin: 0; mask-image: linear-gradient(to bottom, black 62%, transparent 100%); }
.identity-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; filter: saturate(.7); }
.identity-portrait figcaption { position: absolute; right: 12px; top: 12px; color: rgba(255,255,255,.58); font-size: 8px; }

.mission-model, .mission-trace { display: flex; flex-direction: column; gap: 25px; background: #e8eff2; color: #06131c; }
.mission-model .eyebrow, .mission-trace .eyebrow { color: #08765d; }
.mission-model .mission-scene-heading > p, .mission-trace .mission-scene-heading > p { color: rgba(6,19,28,.62); }
.mission-model .mission-scene-count, .mission-trace .mission-scene-count { color: rgba(6,19,28,.42); }
.model-media-grid { min-height: 0; display: grid; grid-template-columns: 1.35fr .65fr; gap: 8px; flex: 1; }
.mission-media { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; border-radius: 15px; background: #071019; box-shadow: 0 20px 60px rgba(20,45,58,.18); }
.mission-media img, .mission-media video { width: 100%; height: 100%; object-fit: cover; }
.mission-media figcaption { position: absolute; left: 9px; right: 9px; bottom: 9px; padding: 8px 9px; border-radius: 9px; background: rgba(0,0,0,.62); color: white; font-size: 7px; backdrop-filter: blur(10px); }

.mission-case { padding-left: 0; padding-right: 0; display: grid; grid-template-rows: 45% 55%; background: #050b12; }
.case-cinema-media { position: relative; min-height: 0; overflow: hidden; }
.case-cinema-media > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.68) brightness(.7); }
.case-cinema-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #050b12, transparent 65%); }
.case-cinema-media figure { position: absolute; z-index: 2; right: 14px; bottom: 12px; width: 35%; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; box-shadow: var(--shadow); }
.case-cinema-media figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.case-cinema-media figcaption { padding: 7px; background: rgba(0,0,0,.82); color: white; font-size: 6px; }
.case-cinema-copy { padding: 14px 18px 64px; align-self: center; }
.case-kicker { margin-bottom: 8px !important; color: #8de6cf !important; font: 800 8px/1.35 monospace !important; letter-spacing: .12em; text-transform: uppercase; }
.case-cinema-copy h2 { font-size: clamp(32px, 9vw, 58px); }
.case-cinema-copy > p { margin: 9px 0; font-size: 11px; }
.case-cinema-role { padding: 10px 0; border-top: 1px solid rgba(255,255,255,.14); display: grid; gap: 4px; }
.case-cinema-role span { color: #57c6ff; font: 800 7px/1 monospace; letter-spacing: .1em; text-transform: uppercase; }
.case-cinema-role strong { font-size: 9px; line-height: 1.4; }
.case-cinema-copy details, .dcim-copy details { color: rgba(244,247,250,.6); font-size: 9px; line-height: 1.45; }
.case-cinema-copy summary, .dcim-copy summary { color: #f4f7fa; font-weight: 800; }
.case-cinema-copy details p, .dcim-copy details p { margin: 8px 0; }

.trace-media-grid { min-height: 0; display: grid; grid-template: 1fr 1fr / 1.35fr .65fr; gap: 7px; flex: 1; }
.trace-video { grid-row: 1 / 3; }
.trace-quote { position: absolute; z-index: 2; left: 18px; bottom: 55px; width: min(490px, 70%); color: white; font-size: clamp(16px, 5vw, 27px); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; text-shadow: 0 2px 20px black; }
.mission-trace .mission-media { border-radius: 12px; }

.mission-dcim { display: grid; grid-template-rows: 45% 55%; background: #02070c; }
.dcim-visual { position: relative; margin: -160px -18px 0; min-height: 0; overflow: hidden; background: #071019; }
.dcim-visual > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.55); }
.dcim-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 45%, #02070c); }
.dcim-scan { position: absolute; z-index: 2; left: 0; right: 0; top: 20%; height: 1px; background: #57c6ff; box-shadow: 0 0 18px #57c6ff; animation: scan 4s ease-in-out infinite alternate; }
@keyframes scan { to { top: 75%; } }
.dcim-chain { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 22px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.dcim-chain span { padding: 7px; border: 1px solid rgba(87,198,255,.35); border-radius: 8px; background: rgba(2,7,12,.7); color: #dff5ff; font-size: 7px; }
.dcim-chain i { color: #57c6ff; font-style: normal; font-size: 8px; }
.dcim-copy { align-self: center; padding: 15px 0 45px; }
.dcim-copy h2 { font-size: clamp(32px, 9vw, 57px); }
.dcim-copy > p { font-size: 11px; }
.dcim-copy blockquote { margin: 11px 0; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); color: #8de6cf; font-size: 13px; font-weight: 800; }

.mission-contact { display: flex; align-items: flex-end; background: radial-gradient(circle at 70% 25%, rgba(87,198,255,.18), transparent 38%), #040a11; }
.contact-cinema-copy { position: relative; z-index: 2; }
.contact-cinema-copy h2 { font-size: clamp(42px, 12vw, 82px); }
.contact-cinema-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 7px; }
.contact-cinema-copy small { display: block; max-width: 620px; margin-top: 18px; color: rgba(244,247,250,.4); font-size: 8px; line-height: 1.4; }
.contact-cinema-portrait { position: absolute; top: 74px; right: -15%; width: 76%; height: 58%; margin: 0; mask-image: linear-gradient(to bottom, black 55%, transparent 100%); }
.contact-cinema-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; filter: saturate(.65); }

/* High-impact polish */
.cinematic-nav {
  box-shadow:
    0 18px 60px color-mix(in srgb, var(--bg) 58%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 10%, transparent);
}
.cinematic-tabs a,
.round-tool,
.narration-pill,
.narration-more summary,
.cv-film-controls button,
.cv-film-controls a,
.mission-cover-actions button,
.mission-cover-actions a,
.contact-cinema-actions a,
.motion-control {
  transition:
    transform .22s ease,
    color .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}
.cv-film-slide::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 1px;
  width: 2px;
  height: clamp(64px, 22vw, 150px);
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 62%, transparent);
}
.cv-film-slide h1,
.mission-cover-copy h1,
.identity-copy h2,
.mission-scene-heading h2,
.case-cinema-copy h2,
.dcim-copy h2,
.contact-cinema-copy h2 {
  text-wrap: balance;
}
.signal-strip strong { color: color-mix(in srgb, currentColor 86%, var(--accent)); }
.experience-frame,
.capability-filmstrip article {
  transition: transform .32s cubic-bezier(.2,.8,.2,1), border-color .32s ease, box-shadow .32s ease;
}
.mission-media,
.case-cinema-media figure {
  border: 1px solid var(--mission-line);
  box-shadow: var(--mission-elevation);
}
.mission-cover-copy h1 {
  text-shadow: 0 8px 60px color-mix(in srgb, var(--mission-bg) 82%, transparent);
}

/* Complete mission-log theme system */
.mission-shell,
.mission-deck {
  background: var(--mission-bg);
  color: var(--mission-text);
  color-scheme: dark;
}
.mission-scene {
  background: var(--mission-surface);
  color: var(--mission-text);
}
.mission-progress { background: color-mix(in srgb, var(--mission-text) 11%, transparent); }
.mission-scene-count { color: var(--mission-faint); }
.mission-rail {
  border-color: var(--mission-line);
  background: var(--mission-control);
}
.mission-rail button { color: var(--mission-faint); }
.motion-control {
  border-color: var(--mission-line);
  background: var(--mission-control);
  color: var(--mission-control-text);
  box-shadow: 0 10px 36px color-mix(in srgb, var(--mission-bg) 38%, transparent);
}
.identity-copy > p:not(.eyebrow),
.mission-scene-heading > p:not(.eyebrow),
.case-cinema-copy > p,
.dcim-copy > p,
.contact-cinema-copy > p {
  color: var(--mission-muted);
}
.identity-signals span { color: var(--mission-faint); }
.identity-signals strong { color: var(--mission-text); }
.identity-portrait figcaption { color: var(--mission-muted); }
.mission-identity {
  background:
    radial-gradient(circle at 75% 35%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 42%),
    var(--mission-surface);
}
.identity-aura {
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow: 0 0 140px color-mix(in srgb, var(--accent) 10%, transparent) inset;
}
.mission-model,
.mission-trace {
  background: var(--mission-surface-2);
  color: var(--mission-text);
}
.mission-model .eyebrow,
.mission-trace .eyebrow { color: var(--accent-2); }
.mission-model .mission-scene-heading > p,
.mission-trace .mission-scene-heading > p { color: var(--mission-muted); }
.mission-model .mission-scene-count,
.mission-trace .mission-scene-count { color: var(--mission-faint); }
.mission-case { background: var(--mission-surface); }
.case-cinema-media::after {
  background: linear-gradient(to top, var(--mission-surface), transparent 68%);
}
.case-cinema-role { border-color: var(--mission-line); }
.case-cinema-copy details,
.dcim-copy details { color: var(--mission-muted); }
.case-cinema-copy summary,
.dcim-copy summary { color: var(--mission-text); }
.mission-dcim { background: var(--mission-bg); }
.dcim-visual::after {
  background: linear-gradient(to bottom, transparent 43%, var(--mission-bg));
}
.dcim-copy blockquote {
  border-color: var(--mission-line);
  color: var(--accent-2);
}
.mission-contact {
  background:
    radial-gradient(circle at 70% 25%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 40%),
    var(--mission-surface);
}
.contact-cinema-copy small { color: var(--mission-faint); }

/* Light is a pearl-and-graphite cinematic grade, not an inversion. */
html[data-theme="light"] .cv-film-hero {
  background: #dfe7eb;
  color: #06131c;
}
html[data-theme="light"] .cv-film-background {
  filter: saturate(.64) contrast(.92) brightness(1.12);
}
html[data-theme="light"] .cv-film-vignette {
  background:
    linear-gradient(180deg, rgba(239,244,247,.32) 0%, rgba(239,244,247,.08) 34%, rgba(239,244,247,.9) 80%, #eef3f6 100%),
    radial-gradient(circle at 62% 38%, transparent 14%, rgba(228,236,241,.48) 86%);
}
html[data-theme="light"] .cv-film-grid {
  opacity: .22;
  background-image:
    linear-gradient(rgba(0,111,169,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,111,169,.18) 1px, transparent 1px);
}
html[data-theme="light"] .cv-film-wordmark {
  opacity: .22;
  -webkit-text-stroke-color: rgba(6, 39, 57, .4);
}
html[data-theme="light"] .cv-film-slide .eyebrow {
  color: #08765d;
  text-shadow: 0 2px 18px rgba(255,255,255,.72);
}
html[data-theme="light"] .cv-film-slide h1 {
  color: #06131c;
  text-shadow: 0 3px 34px rgba(255,255,255,.9);
}
html[data-theme="light"] .cv-film-slide > p:not(.eyebrow) {
  color: rgba(6,19,28,.72);
  text-shadow: 0 2px 16px rgba(255,255,255,.86);
}
html[data-theme="light"] .cv-film-slide > strong { color: #006fa9; }
html[data-theme="light"] .cv-film-controls button,
html[data-theme="light"] .cv-film-controls a {
  border-color: rgba(6,19,28,.18);
  background: rgba(247,250,251,.72);
  color: #06131c;
  box-shadow: 0 10px 34px rgba(32,55,68,.14);
}
html[data-theme="light"] .cv-film-controls .film-control-primary {
  border-color: #006fa9;
  background: #006fa9;
  color: #f7fbfd;
}
html[data-theme="light"] .cv-film-progress { background: rgba(6,19,28,.18); }
html[data-theme="light"] .cv-film-chapters button { color: rgba(6,19,28,.42); }
html[data-theme="light"] .cv-film-chapters button.active { color: #006fa9; }
html[data-theme="light"] .cv-film-hint { color: rgba(6,19,28,.52); }
html[data-theme="light"] .recruiter-cut {
  background: #10212d;
  color: #f4f8fa;
}
html[data-theme="light"] .recruiter-cut .eyebrow { color: #8de6cf; }
html[data-theme="light"] .signal-strip article {
  border-color: rgba(244,248,250,.18);
}

html[data-theme="light"] .mission-shell,
html[data-theme="light"] .mission-deck { color-scheme: light; }
html[data-theme="light"] .mission-rail button { color: var(--mission-faint); }
html[data-theme="light"] .mission-rail button.active { color: var(--accent); }
html[data-theme="light"] .mission-cover > video {
  filter: saturate(.72) contrast(.96) brightness(1.14);
}
html[data-theme="light"] .mission-cover-veil {
  background:
    linear-gradient(180deg, rgba(237,242,245,.16), rgba(237,242,245,.94)),
    linear-gradient(90deg, rgba(237,242,245,.88), transparent 74%);
}
html[data-theme="light"] .mission-cover-grid {
  opacity: .17;
  background-image:
    linear-gradient(rgba(0,111,169,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,111,169,.18) 1px, transparent 1px);
}
html[data-theme="light"] .mission-cover-copy > p:not(.eyebrow) { color: var(--mission-muted); }
html[data-theme="light"] .mission-cover-actions button {
  border-color: #006fa9;
  background: #006fa9;
  color: white;
}
html[data-theme="light"] .mission-cover-actions a,
html[data-theme="light"] .contact-cinema-actions a {
  border-color: var(--mission-line);
  background: rgba(255,255,255,.7);
  color: var(--mission-text);
}
html[data-theme="light"] .contact-cinema-actions .primary {
  border-color: #006fa9;
  background: #006fa9;
  color: white;
}
html[data-theme="light"] .identity-portrait img,
html[data-theme="light"] .contact-cinema-portrait img {
  filter: saturate(.66) contrast(.94) brightness(1.08);
}
html[data-theme="light"] .case-cinema-media > img {
  filter: saturate(.64) contrast(.94) brightness(.88);
}
html[data-theme="light"] .case-kicker { color: #08765d !important; }
html[data-theme="light"] .case-cinema-role span { color: #006fa9; }
html[data-theme="light"] .dcim-visual > img {
  filter: saturate(.62) contrast(.9) brightness(.82);
}
html[data-theme="light"] .dcim-chain span {
  border-color: rgba(87,198,255,.38);
  background: rgba(3,16,24,.72);
}
html[data-theme="light"] .trace-quote {
  color: #f7fbfd;
  text-shadow: 0 3px 24px rgba(0,0,0,.86);
}

@media (hover: hover) and (pointer: fine) {
  .cinematic-tabs a:hover,
  .round-tool:hover,
  .narration-pill:hover,
  .narration-more summary:hover,
  .cv-film-controls button:hover,
  .cv-film-controls a:hover,
  .mission-cover-actions button:hover,
  .mission-cover-actions a:hover,
  .contact-cinema-actions a:hover,
  .motion-control:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
    box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 14%, transparent);
  }
  .experience-frame:hover { transform: translateX(8px); }
  .capability-filmstrip article:hover {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    box-shadow: 0 24px 70px color-mix(in srgb, var(--accent) 10%, transparent);
  }
}

@media (min-width: 700px) {
  .cinematic-header { top: max(14px, env(safe-area-inset-top)); left: 18px; right: 18px; }
  .cinematic-nav {
    padding: 8px;
    border-radius: 22px;
    grid-template: none;
    grid-template-columns: auto 1fr auto;
  }
  .cinematic-brand, .cinematic-tabs, .cinematic-tools { grid-area: auto; }
  .cinematic-brand-copy { display: block; }
  .cinematic-tabs { justify-self: center; }
  .cinematic-tabs a { min-width: 80px; padding-inline: 15px; font-size: 10px; }
  .tab-short { display: none; }
  .tab-long { display: inline; }
  .narration-pill { min-width: 128px; padding: 0 12px; justify-content: flex-start; }
  .narration-copy { display: grid; gap: 2px; text-align: left; }
  .narration-copy small { color: var(--muted); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
  .narration-copy strong { font-size: 9px; }
  .cv-film-background { object-position: 64% center; }
  .cv-film-vignette {
    background:
      linear-gradient(90deg, rgba(1,4,8,.95) 0%, rgba(1,4,8,.72) 39%, rgba(1,4,8,.08) 75%, rgba(1,4,8,.24) 100%),
      linear-gradient(180deg, rgba(1,4,8,.18), rgba(1,4,8,.72));
  }
  .cv-film-wordmark {
    left: -2vw;
    top: auto;
    bottom: 26%;
    font-size: 20vw;
    transform: none;
  }
  .cv-film-slide {
    left: max(5vw, calc((100vw - 1320px) / 2));
    right: auto;
    bottom: 30%;
    width: min(620px, 47vw);
  }
  .cv-film-slide h1 { font-size: clamp(52px, 6vw, 92px); }
  .cv-film-slide > p:not(.eyebrow) { font-size: 16px; }
  .cv-film-controls {
    left: max(5vw, calc((100vw - 1320px) / 2));
    right: auto;
    bottom: 18%;
  }
  .cv-film-controls button, .cv-film-controls a { min-height: 45px; padding-inline: 16px; font-size: 10px; }
  .cv-film-timeline {
    left: max(5vw, calc((100vw - 1320px) / 2));
    right: max(5vw, calc((100vw - 1320px) / 2));
    bottom: 9%;
  }
  .cv-film-hint { left: max(5vw, calc((100vw - 1320px) / 2)); bottom: 4%; }
  .cv-cinema-hero { padding: 140px 5vw 75px; }
  .hero-portrait { right: 2%; width: 50%; height: 78%; }
  .hero-ghost-name { left: -2vw; top: auto; bottom: 30%; font-size: 23vw; transform: none; }
  .cinema-hero-copy h1 { font-size: clamp(82px, 13vw, 170px); }
  .cinema-hero-copy h2 { font-size: clamp(29px, 4vw, 52px); }
  .cinema-lede { font-size: 18px; }
  .scroll-cue { display: flex; }
  .recruiter-cut { padding: 110px max(5vw, calc((100vw - 1320px) / 2)); display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: end; }
  .signal-strip { margin: 0; grid-template-columns: repeat(4, 1fr); }
  .signal-strip article { min-height: 160px; padding: 25px 18px; border-top: 1px solid color-mix(in srgb, var(--bg) 22%, transparent); border-left: 1px solid color-mix(in srgb, var(--bg) 22%, transparent); }
  .signal-strip article:nth-child(even) { padding-left: 18px; }
  .cv-story-section, .profile-film, .education-strip { padding: 125px 0; }
  .experience-frame { grid-template-columns: 55px 220px 1fr; gap: 25px; padding: 42px 0; }
  .experience-body li { font-size: 13px; }
  .capability-cinema { padding: 125px max(5vw, calc((100vw - 1320px) / 2)); }
  .capability-filmstrip { grid-auto-columns: minmax(300px, 30vw); }
  .profile-film { grid-template-columns: .72fr 1.28fr; align-items: center; gap: 70px; }
  .education-strip { grid-template-columns: 1fr .9fr .65fr; gap: 60px; }
  .cinema-contact { padding: 70px; grid-template-columns: 1.25fr .75fr; gap: 70px; }
  .cinematic-footer { width: min(1320px, calc(100% - 36px)); margin: 0 auto; grid-template-columns: 1fr 1fr 1.5fr; }

.mission-scene { padding: 130px 8vw 72px; }
  .mission-scene-count { left: 8vw; }
  .mission-cover-copy h1 { font-size: clamp(95px, 11vw, 170px); }
  .mission-cover-copy > p:not(.eyebrow) { font-size: 17px; }
  .mission-rail {
    left: auto;
    right: 20px;
    top: 50%;
    bottom: auto;
    padding: 0;
    display: grid;
    gap: 9px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    transform: translateY(-50%);
  }
  .mission-rail button { width: 80px; padding: 4px 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border: 0; background: transparent; color: rgba(255,255,255,.42); font-size: 7px; text-transform: uppercase; }
  .mission-rail button span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .mission-rail button i { order: 2; width: 12px; height: 1px; border-radius: 0; background: currentColor; box-shadow: none; transition: width .25s ease; }
  .mission-rail button.active { color: #57c6ff; }
  .mission-rail button.active i { width: 27px; height: 1px; border-radius: 0; background: currentColor; box-shadow: none; }
  .motion-control { width: auto; height: 38px; padding: 0 13px; display: flex; gap: 8px; border-radius: 999px; font-size: 8px; text-transform: uppercase; }
  .identity-layout { display: grid; grid-template-columns: 1fr .8fr; align-items: center; }
  .identity-portrait { top: 88px; right: 8%; width: 43%; height: 83%; }
  .identity-copy h2, .mission-scene-heading h2, .case-cinema-copy h2, .dcim-copy h2, .contact-cinema-copy h2 { font-size: clamp(58px, 7vw, 112px); }
  .identity-copy > p:not(.eyebrow), .mission-scene-heading > p:not(.eyebrow), .case-cinema-copy > p, .dcim-copy > p, .contact-cinema-copy > p { font-size: 15px; }
  .identity-signals { gap: 35px; }
  .identity-signals span { max-width: 120px; font-size: 9px; }
  .identity-signals strong { font-size: 22px; }
  .mission-model, .mission-trace { flex-direction: row; align-items: stretch; gap: 45px; }
  .mission-scene-heading { width: 36%; align-self: center; }
  .model-media-grid, .trace-media-grid { width: 64%; }
  .mission-media { border-radius: 22px; }
  .mission-case { padding: 0; grid-template-columns: 1.08fr .92fr; grid-template-rows: 1fr; }
  .case-cinema-copy { padding: 130px 9vw 75px 6vw; }
  .case-cinema-copy h2 { font-size: clamp(50px, 5vw, 82px); }
  .case-cinema-copy > p { font-size: 14px; }
  .case-cinema-role { padding: 18px 0; }
  .case-cinema-role strong { font-size: 11px; }
  .case-cinema-copy details, .dcim-copy details { font-size: 11px; }
  .case-cinema-media figure { right: 28px; bottom: 28px; width: 37%; }
  .incident-case .case-cinema-media { order: 2; }
  .incident-case .case-cinema-copy { padding: 130px 6vw 75px 9vw; }
  .trace-quote { left: auto; right: 10vw; bottom: 74px; }
  .mission-dcim { padding: 0; grid-template-columns: 1.08fr .92fr; grid-template-rows: 1fr; }
  .dcim-visual { margin: 0; }
  .dcim-copy { padding: 130px 9vw 75px 6vw; }
  .dcim-copy h2 { font-size: clamp(46px, 4.5vw, 76px); }
  .dcim-copy > p { font-size: 14px; }
  .dcim-copy blockquote { margin: 22px 0; padding: 18px 0; font-size: 19px; }
  .mission-contact { padding-left: 9vw; }
  .contact-cinema-copy { width: 65%; }
  .contact-cinema-portrait { top: 65px; right: 2%; width: 42%; height: 86%; }
}

@media (min-width: 1180px) {
  .cinematic-nav { grid-template-columns: 1fr auto 1fr; }
  .cinematic-tabs a { min-width: 170px; }
  .capability-filmstrip { grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; overflow: visible; }
  .capability-filmstrip article { min-height: 390px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mission-deck { scroll-snap-type: y proximity; }
}

@media print {
  :root { --bg: white; --bg-elevated: white; --panel: white; --text: #111; --muted: #444; --line: #bbb; --accent: #12638c; --accent-2: #17644e; }
  .cinematic-header, .cv-ambient-video, .cinema-grid, .cinema-veil, .hero-ghost-name, .scroll-cue, .profile-film, .cinematic-footer,
  .cv-film-background, .cv-film-vignette, .cv-film-grid, .cv-film-wordmark, .cv-film-controls, .cv-film-timeline, .cv-film-hint { display: none !important; }
  .cv-film-hero { min-height: auto; padding: 30px 0; background: white; color: #111; }
  .cv-film-slide { position: static; color: #111; }
  .cv-film-slide > p:not(.eyebrow), .cv-film-slide > strong { color: #333; text-shadow: none; }
  .cv-film-slide h1 { color: #111; text-shadow: none; }
  .cv-cinema-hero { min-height: auto; padding: 32px 0; background: white; color: #111; }
  .hero-portrait { position: relative; top: auto; right: auto; width: 180px; height: 220px; mask-image: none; }
  .cinema-hero-copy { color: #111; }
  .cinema-hero-copy h1, .cinema-hero-copy h1 span, .cinema-hero-copy h2, .cinema-lede, .cinema-credibility { color: #111; }
  .recruiter-cut, .capability-cinema { padding: 30px 0; background: white; color: #111; }
  .cv-story-section, .education-strip, .cinema-contact { width: 100%; padding: 32px 0; }
  .experience-frame, .capability-filmstrip article { break-inside: avoid; }
  .capability-filmstrip { display: grid; grid-template-columns: repeat(2, 1fr); overflow: visible; }
  .cinema-contact { background: white; color: #111; border-top: 1px solid #bbb; border-radius: 0; }
}

[hidden], .view[hidden] { display: none !important; }
    [data-lang] { display: none; }
    html[data-language="en"] [data-lang="en"],
    html[data-language="es"] [data-lang="es"] { display: revert; }
    .inline-language[data-lang] { display: none; }
    html[data-language="en"] .inline-language[data-lang="en"],
    html[data-language="es"] .inline-language[data-lang="es"] { display: inline; }
    .standalone-note { display: inline-flex; align-items: center; gap: 7px; }
    .standalone-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
    .narration-more[hidden] { display: none !important; }
    .narration-more > div { max-height: min(290px, 55vh); overflow: auto; }
    .view-switch { border: 0; cursor: pointer; }
    .mission-shell .cinematic-header { color: var(--text); }
    .mission-shell .cinematic-tabs a.active { background: var(--text); color: var(--bg); }
    .mission-shell .round-tool,
    .mission-shell .narration-pill,
    .mission-shell .narration-more summary { color: var(--text); }
    .mission-shell .narration-copy small { color: var(--muted); }
    .mission-scene details[open] { position: relative; z-index: 4; }
    .offline-download { white-space: nowrap; }
    @media (max-height: 670px) and (max-width: 699px) {
      .cv-film-slide { bottom: 205px; }
      .cv-film-slide h1 { font-size: clamp(32px, 9vw, 48px); }
      .cv-film-controls { bottom: 102px; }
      .cv-film-timeline { bottom: 52px; }
      .cv-film-hint { bottom: 20px; }
    }
  </style>
  <script type="application/ld+json">
  {
    "@context":"https://schema.org",
    "@type":"Person",
    "name":"Enrique Escamilla",
    "jobTitle":"Data Center Infrastructure Engineer and Technical Systems Architect",
    "email":"mailto:enrique_escamilla@icloud.com",
    "telephone":"+52 442 396 8131",
    "address":{"@type":"PostalAddress","addressLocality":"Querétaro","addressCountry":"MX"},
    "knowsLanguage":["Spanish","English","French","Portuguese"]
  }
  </script>
<style id="escloud-visionos-overrides">
/* ===== ESCLOUD VISIONOS IMPLEMENTATION OVERRIDES ===== */
:root{
  --es-safe-top:env(safe-area-inset-top,0px);
  --es-safe-right:env(safe-area-inset-right,0px);
  --es-safe-bottom:env(safe-area-inset-bottom,0px);
  --es-safe-left:env(safe-area-inset-left,0px);
  --es-glass:color-mix(in srgb,var(--surface,#0b1420) 66%,transparent);
  --es-glass-strong:color-mix(in srgb,var(--surface,#0b1420) 82%,transparent);
  --es-glass-line:color-mix(in srgb,currentColor 18%,transparent);
  --es-glass-shadow:0 22px 70px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.12);
  --es-ease:cubic-bezier(.22,.78,.2,1);
}
html,body,button,input,textarea,select{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif!important;
}
html{color-scheme:dark light}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid color-mix(in srgb,var(--accent,var(--blue,#58b4f5)) 82%,white);outline-offset:3px}
.escloud-stencil{display:grid;place-items:center;color:var(--accent-2,var(--cyan,#a7e4ff));overflow:hidden}
.escloud-stencil svg{width:100%;height:100%;display:block}
.persistent-contact{
  position:fixed;z-index:290;right:calc(14px + var(--es-safe-right));bottom:calc(14px + var(--es-safe-bottom));
  min-width:132px;min-height:52px;padding:0 22px;border-radius:999px;border:1px solid rgba(255,255,255,.22);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
  font-weight:780;letter-spacing:-.015em;color:#06111b;background:rgba(244,248,252,.94);
  box-shadow:0 18px 55px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.95);
  backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);
  transition:opacity .22s var(--es-ease),transform .22s var(--es-ease),filter .22s var(--es-ease),background .22s var(--es-ease);
}
.persistent-contact::after{content:"↗";font-size:16px}
html[data-theme="light"] .persistent-contact{color:#f7fbff;background:rgba(5,19,31,.92);border-color:rgba(5,19,31,.3)}
body.is-scrolling .persistent-contact{opacity:.42;filter:blur(.45px);transform:translateY(3px) scale(.965)}
@media(prefers-reduced-motion:reduce){.persistent-contact{transition:none!important}}
@media print{.persistent-contact{display:none!important}}

html,body{overflow-x:hidden}
.cinematic-header{position:fixed!important;inset:0 0 auto 0!important;z-index:280!important;pointer-events:none!important;padding:0!important}
.cinematic-nav{
  grid-template-areas:none!important;align-items:center!important;
  pointer-events:auto!important;position:absolute!important;top:calc(10px + var(--es-safe-top))!important;left:50%!important;
  transform:translateX(-50%)!important;width:max-content!important;max-width:calc(100vw - 20px - var(--es-safe-left) - var(--es-safe-right))!important;
  min-height:58px!important;padding:7px 8px!important;gap:7px!important;border-radius:27px!important;
  grid-template-columns:auto auto auto!important;background:color-mix(in srgb,var(--surface,#09131e) 64%,transparent)!important;
  border:1px solid color-mix(in srgb,currentColor 16%,transparent)!important;box-shadow:var(--es-glass-shadow)!important;
  backdrop-filter:blur(30px) saturate(165%)!important;-webkit-backdrop-filter:blur(30px) saturate(165%)!important;
  transition:opacity .3s var(--es-ease),transform .35s var(--es-ease),width .35s var(--es-ease),background .3s var(--es-ease)!important;
}
.cinematic-nav.shell-minimized{opacity:.88;transform:translateX(-50%) scale(.94)!important;background:color-mix(in srgb,var(--surface,#09131e) 52%,transparent)!important}
.cinematic-nav.shell-minimized .cinematic-brand-copy,.cinematic-nav.shell-minimized .tab-long,.cinematic-nav.shell-minimized .narration-copy{display:none!important}
.cinematic-nav>*{grid-area:auto!important}.cinematic-brand{padding:0 4px!important;gap:8px!important}
.cinematic-mark{width:42px!important;height:42px!important;border-radius:15px!important;padding:6px!important;background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(89,186,255,.08))!important}
.cinematic-brand-copy small{display:none!important}
.cinematic-tabs{min-height:44px!important;padding:4px!important;border-radius:19px!important;background:rgba(0,0,0,.1)!important}
.cinematic-tabs a{min-height:36px!important;padding:0 16px!important;border-radius:15px!important}
.cinematic-tools{gap:5px!important}
.narration-pill,.round-tool,.film-control-island{min-width:42px!important;height:42px!important;border-radius:15px!important}
.film-control-island{border:1px solid color-mix(in srgb,currentColor 13%,transparent)!important;background:rgba(255,255,255,.045)!important;padding:0 12px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important}
.cv-film-controls{display:none!important}
.cv-film-hint{display:none!important}
.cv-film-hero{min-height:100svh!important;min-height:100dvh!important;padding-top:calc(82px + var(--es-safe-top))!important}
.cv-film-slide{max-width:min(820px,calc(100vw - 44px))!important}
.cv-film-slide h1{font-size:clamp(48px,14vw,108px)!important;line-height:.89!important;text-wrap:balance}
.cv-film-slide p{max-width:680px!important}
.recruiter-cut,.cv-story-section,.capability-cinema,.education-strip,.cinema-contact{min-height:100svh;min-height:100dvh;scroll-margin-top:86px;padding-bottom:calc(104px + var(--es-safe-bottom))!important}
.recruiter-cut{padding-top:calc(104px + var(--es-safe-top))!important}
.signal-strip{width:100%!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:1px!important;border-radius:28px!important;overflow:hidden!important;background:color-mix(in srgb,currentColor 11%,transparent)!important}
.signal-strip article{border-radius:0!important;border:0!important;min-height:152px!important;background:color-mix(in srgb,var(--surface,#0a1420) 78%,transparent)!important;backdrop-filter:blur(20px)!important;color:var(--text)!important}
html[data-theme="light"] .signal-strip{background:rgba(6,20,32,.12)!important}html[data-theme="light"] .signal-strip article{background:rgba(255,255,255,.72)!important;color:#07131f!important}html[data-theme="light"] .signal-strip article span{color:rgba(7,19,31,.62)!important}
[data-lang]{display:none!important}html[data-language="en"] [data-lang="en"],html[data-language="es"] [data-lang="es"]{display:revert!important}.inline-language[data-lang]{display:none!important}html[data-language="en"] .inline-language[data-lang="en"],html[data-language="es"] .inline-language[data-lang="es"]{display:inline!important}
.mission-scene-count{display:none!important}
.capability-filmstrip{scroll-snap-type:x mandatory!important;scrollbar-width:none!important;padding-bottom:12px!important}
.capability-filmstrip::-webkit-scrollbar{display:none!important}
.capability-filmstrip article{scroll-snap-align:center!important;background:linear-gradient(145deg,color-mix(in srgb,var(--surface,#0b1622) 88%,transparent),color-mix(in srgb,var(--surface,#0b1622) 55%,transparent))!important;backdrop-filter:blur(24px) saturate(135%)!important}
.cinema-contact{background:radial-gradient(circle at 78% 20%,rgba(79,180,255,.18),transparent 32rem),var(--surface,#07111c)!important}
.cinema-contact>div{border:1px solid color-mix(in srgb,currentColor 14%,transparent);border-radius:34px;padding:clamp(24px,5vw,72px);background:color-mix(in srgb,var(--surface,#07111c) 68%,transparent);backdrop-filter:blur(26px) saturate(150%);box-shadow:var(--es-glass-shadow)}
@media(max-width:760px){
  .cinematic-nav{width:calc(100vw - 18px - var(--es-safe-left) - var(--es-safe-right))!important;grid-template-columns:auto minmax(120px,1fr) auto!important;grid-template-rows:1fr!important;min-height:56px!important;height:56px!important}
  .cinematic-brand-copy,.tab-long,.narration-copy{display:none!important}
  .cinematic-tabs{justify-self:stretch!important;display:grid!important;grid-template-columns:1fr 1fr!important}
  .cinematic-tabs a{padding:0 10px!important}
  .cinematic-tools{display:flex!important;flex-wrap:nowrap!important}
  #narration-more,#narration-toggle,#cv-sound{display:none!important}
  .film-control-island span:not(:first-child){display:none!important}
  .round-tool,.narration-pill,.film-control-island{width:40px!important;min-width:40px!important;height:40px!important;padding:0!important}
  .signal-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .signal-strip article{min-height:138px!important;padding:18px!important}
  .capability-filmstrip{grid-auto-columns:min(86vw,360px)!important;padding-inline:7vw!important;margin-inline:-7vw!important}
  .capability-filmstrip article{min-height:430px!important}
  .cinema-contact{padding-bottom:calc(96px + var(--es-safe-bottom))!important}
}
@media(max-width:390px){.round-tool.theme-tool{display:none!important}.cinematic-tabs a{font-size:12px!important}}
</style>

<header class="cinematic-header">
    <div class="cinematic-nav">
      <a class="cinematic-brand view-switch" href="#cv" data-open-view="cv" aria-label="Enrique Escamilla, home">
        <span class="cinematic-mark">EE</span>
        <span class="cinematic-brand-copy">
          <strong>Enrique Escamilla</strong>
          <small>
            <span class="inline-language" data-lang="en">Critical infrastructure</span>
            <span class="inline-language" data-lang="es">Infraestructura crítica</span>
          </small>
        </span>
      </a>

<nav class="cinematic-tabs" aria-label="Portfolio views">
        <a class="active view-switch" href="#cv" data-open-view="cv" aria-current="page">CV</a>
        <a class="view-switch" href="portfolio.html">
          <span class="tab-long">
            <span class="inline-language" data-lang="en">Professional Portfolio</span>
            <span class="inline-language" data-lang="es">Portafolio Profesional</span>
          </span>
          <span class="tab-short">
            <span class="inline-language" data-lang="en">Portfolio</span>
            <span class="inline-language" data-lang="es">Portafolio</span>
          </span>
        </a>
      </nav>

<div class="cinematic-tools">
        <button class="narration-pill" id="narration-toggle" type="button" aria-label="Turn AI narration on" aria-pressed="false">
          <span class="narration-wave" aria-hidden="true"><i></i><i></i><i></i></span>
          <span class="narration-copy">
            <small>
              <span class="inline-language" data-lang="en">AI narration</span>
              <span class="inline-language" data-lang="es">Narración IA</span>
            </small>
            <strong id="narration-status">Off</strong>
          </span>
        </button>

<details class="narration-more" id="narration-more" hidden>
          <summary aria-label="More narration controls">•••</summary>
          <div>
            <button type="button" id="narration-pause">
              <span class="inline-language" data-lang="en">Pause</span>
              <span class="inline-language" data-lang="es">Pausar</span>
            </button>
            <button type="button" id="narration-resume">
              <span class="inline-language" data-lang="en">Resume</span>
              <span class="inline-language" data-lang="es">Reanudar</span>
            </button>
            <button type="button" id="narration-restart">
              <span class="inline-language" data-lang="en">Restart</span>
              <span class="inline-language" data-lang="es">Reiniciar</span>
            </button>
            <button type="button" id="narration-stop">
              <span class="inline-language" data-lang="en">Stop</span>
              <span class="inline-language" data-lang="es">Detener</span>
            </button>
            <small id="narration-source">
              <span class="inline-language" data-lang="en">Best available device voice</span>
              <span class="inline-language" data-lang="es">Mejor voz disponible del dispositivo</span>
            </small>
          </div>
        </details>

<div class="view" id="cv-view" data-view="cv">
    <main id="cv-main" class="cv-cinematic">
      <section class="cv-film-hero" aria-labelledby="cv-name">
        <video id="cv-film-video" class="cv-film-background" autoplay muted playsinline preload="metadata" poster="assets/asset-001-d4d6989665.jpg" aria-label="Enrique Escamilla professional introduction film" src="assets/asset-002-8d56082527.mp4"></video>
        <div class="cv-film-vignette" aria-hidden="true"></div>
        <div class="cv-film-grid" aria-hidden="true"></div>
        <div class="cv-film-wordmark" aria-hidden="true">ESCAMILLA</div>

<div class="cv-film-controls" aria-label="CV presentation controls">
          <button class="film-control-primary" id="cv-play" type="button">
            <span aria-hidden="true" id="cv-play-icon">▶</span>
            <span id="cv-play-label">Play with sound</span>
          </button>
          <button id="cv-sound" type="button" aria-pressed="false">
            <span aria-hidden="true" id="cv-sound-icon">◖×</span>
            <span id="cv-sound-label">Sound off</span>
          </button>
          <a class="view-switch" href="portfolio.html">
            <span class="inline-language" data-lang="en">Open portfolio</span>
            <span class="inline-language" data-lang="es">Abrir portafolio</span>
            <span aria-hidden="true">→</span>
          </a>
        </div>

<div class="cv-film-timeline">
          <div class="cv-film-progress" aria-hidden="true"><i id="cv-film-progress" style="width:0%"></i></div>
          <div class="cv-film-chapters" id="cv-film-chapters"></div>
        </div>
        <p class="cv-film-hint" id="cv-film-hint">Muted preview · Tap once for the full experience.</p>
      </section>

<section class="recruiter-cut" aria-labelledby="recruiter-cut-title">
        <div class="recruiter-cut-intro">
          <p class="eyebrow">
            <span class="inline-language" data-lang="en">Recruiter cut</span>
            <span class="inline-language" data-lang="es">Vista para reclutadores</span>
          </p>
          <h2 id="recruiter-cut-title">
            <span data-lang="en">The fit, before the details.</span>
            <span data-lang="es">El perfil, antes de los detalles.</span>
          </h2>
        </div>
        <div class="signal-strip">
          <article><strong>5+</strong><span data-lang="en">Years in data center infrastructure</span><span data-lang="es">Años en infraestructura de data center</span></article>
          <article><strong>ICREA L5</strong><span data-lang="en">Mission-critical operating context</span><span data-lang="es">Contexto operativo de misión crítica</span></article>
          <article><strong>PROSPECT → HANDOFF</strong><span data-lang="en">Plan, deploy, validate, document and deliver</span><span data-lang="es">Planear, instalar, validar, documentar y entregar</span></article>
          <article><strong>FR | EN | ES | BR</strong><span data-lang="en">Professional language capability</span><span data-lang="es">Capacidad profesional multilingüe</span></article>
        </div>
      </section>

<section class="cv-story-section" id="experience" aria-labelledby="experience-title">
        <div class="cinema-section-heading">
          <p class="eyebrow">02 / <span class="inline-language" data-lang="en">Experience</span><span class="inline-language" data-lang="es">Experiencia</span></p>
          <h2 id="experience-title">
            <span data-lang="en">Hands-on delivery. Project-level judgment.</span>
            <span data-lang="es">Ejecución en campo. Criterio a nivel proyecto.</span>
          </h2>
          <p data-lang="en">My work sits between the physical layer, the operating environment and the client handoff.</p>
          <p data-lang="es">Mi trabajo conecta la capa física, el entorno operativo y la entrega al cliente.</p>
        </div>

<div class="experience-reel">
          <article class="experience-frame">
            <div class="experience-index">01</div>
            <div class="experience-period">
              <time><span class="inline-language" data-lang="en">2021—Present</span><span class="inline-language" data-lang="es">2021—Actualidad</span></time>
              <strong>Telmex TRIARA</strong>
            </div>
            <div class="experience-body">
              <h3><span data-lang="en">Data Center Infrastructure Engineer</span><span data-lang="es">Ingeniero de Infraestructura de Data Center</span></h3>
              <p data-lang="en">Mission-critical delivery from physical deployment through operational handoff.</p>
              <p data-lang="es">Entrega de misión crítica desde el despliegue físico hasta la transición operativa.</p>
              <ul data-lang="en">
                <li>Rack &amp; stack, structured cabling and end-to-end infrastructure provisioning.</li>
                <li>Switch-port, VLAN and patching validation for operational readiness.</li>
                <li>PDU/UPS load awareness, preventive maintenance and incident response.</li>
                <li>CMDB accuracy, asset tracking and technical documentation.</li>
              </ul>
              <ul data-lang="es">
                <li>Rack &amp; stack, cableado estructurado y aprovisionamiento integral de infraestructura.</li>
                <li>Validación de puertos, VLAN y patching para asegurar preparación operativa.</li>
                <li>Supervisión de carga PDU/UPS, mantenimiento preventivo y atención de incidentes.</li>
                <li>Precisión de CMDB, control de activos y documentación técnica.</li>
              </ul>
            </div>
          </article>

<article class="experience-frame">
            <div class="experience-index">02</div>
            <div class="experience-period">
              <time>2019—2021</time>
              <strong>Aptar Group</strong>
            </div>
            <div class="experience-body">
              <h3><span data-lang="en">IT Project Manager / Infrastructure Engineer</span><span data-lang="es">IT Project Manager / Ingeniero de Infraestructura</span></h3>
              <p data-lang="en">Infrastructure projects connecting business requirements, technical teams and delivery.</p>
              <p data-lang="es">Proyectos que conectaron requerimientos de negocio, equipos técnicos y ejecución.</p>
              <ul data-lang="en">
                <li>Cross-functional coordination across cloud, network and facilities teams.</li>
                <li>Hybrid-cloud infrastructure support across Azure and AWS environments.</li>
                <li>Vendor coordination, deployment planning, SOPs and operational runbooks.</li>
                <li>Infrastructure support for SAP HANA and ERP environments.</li>
              </ul>
              <ul data-lang="es">
                <li>Coordinación transversal entre equipos de nube, red e instalaciones.</li>
                <li>Soporte de infraestructura híbrida en entornos Azure y AWS.</li>
                <li>Coordinación de proveedores, planeación, SOPs y runbooks operativos.</li>
                <li>Soporte de infraestructura para entornos SAP HANA y ERP.</li>
              </ul>
            </div>
          </article>
        </div>
      </section>

<section class="capability-cinema" id="capabilities" aria-labelledby="capability-title">
        <div class="capability-cinema-copy">
          <p class="eyebrow">03 / <span class="inline-language" data-lang="en">Technical range</span><span class="inline-language" data-lang="es">Alcance técnico</span></p>
          <h2 id="capability-title"><span data-lang="en">One accountable handoff.</span><span data-lang="es">Una entrega con responsabilidad completa.</span></h2>
          <p data-lang="en">Deploy, connect, power, operate, document and hand off—the work is strongest when the whole chain remains visible.</p>
          <p data-lang="es">Desplegar, conectar, energizar, operar, documentar y entregar: el trabajo es más sólido cuando toda la cadena permanece visible.</p>
        </div>
        <div class="capability-filmstrip">
          <article><span>01</span><h3><span data-lang="en">Deploy</span><span data-lang="es">Desplegar</span></h3><strong><span data-lang="en">Rack &amp; stack · RU planning · Rails · Labeling</span><span data-lang="es">Rack &amp; stack · Planeación RU · Rieles · Etiquetado</span></strong><p data-lang="en">Controlled receiving, mounting and physical validation prepared for operational acceptance.</p><p data-lang="es">Recepción controlada, montaje y validación física preparados para aceptación operativa.</p></article>
          <article><span>02</span><h3><span data-lang="en">Connect</span><span data-lang="es">Conectar</span></h3><strong><span data-lang="en">Cat6/6A · SM/MM fiber · Ports · VLANs</span><span data-lang="es">Cat6/6A · Fibra SM/MM · Puertos · VLAN</span></strong><p data-lang="en">Traceable pathways, patching and network-path coordination followed by validation.</p><p data-lang="es">Rutas trazables, parcheo y coordinación de red seguidos por validación.</p></article>
          <article><span>03</span><h3><span data-lang="en">Power</span><span data-lang="es">Energizar</span></h3><strong><span data-lang="en">A/B feeds · PDU/UPS · Mapping · Load awareness</span><span data-lang="es">Feeds A/B · PDU/UPS · Mapeo · Visibilidad de carga</span></strong><p data-lang="en">Redundant-feed awareness and equipment mapping that keep the power path understandable.</p><p data-lang="es">Visibilidad de redundancia y mapeo de equipos para mantener comprensible la ruta eléctrica.</p></article>
          <article><span>04</span><h3><span data-lang="en">Operate</span><span data-lang="es">Operar</span></h3><strong><span data-lang="en">PM · Incident triage · Fault isolation · SLA</span><span data-lang="es">PM · Triage · Aislamiento de fallas · SLA</span></strong><p data-lang="en">Field troubleshooting, coordinated remediation and readiness verification in production environments.</p><p data-lang="es">Diagnóstico en campo, remediación coordinada y verificación de preparación en producción.</p></article>
          <article><span>05</span><h3><span data-lang="en">Document</span><span data-lang="es">Documentar</span></h3><strong><span data-lang="en">As-built · CMDB · Ports/cables · SOPs</span><span data-lang="es">As-built · CMDB · Puertos/cables · SOP</span></strong><p data-lang="en">Records, evidence and handoff material that keep infrastructure identifiable and supportable.</p><p data-lang="es">Registros, evidencia y material de entrega que mantienen la infraestructura identificable y mantenible.</p></article>
          <article><span>06</span><h3><span data-lang="en">Coordinate</span><span data-lang="es">Coordinar</span></h3><strong><span data-lang="en">Access · Vendors · Change windows · Clients</span><span data-lang="es">Accesos · Proveedores · Ventanas de cambio · Clientes</span></strong><p data-lang="en">Controlled site execution from access and receiving through validation and client handoff.</p><p data-lang="es">Ejecución controlada desde acceso y recepción hasta validación y entrega al cliente.</p></article>
        </div>
      </section>

<section class="education-strip" aria-labelledby="education-title">
        <div>
          <p class="eyebrow">04 / <span class="inline-language" data-lang="en">Foundation</span><span class="inline-language" data-lang="es">Formación</span></p>
          <h2 id="education-title"><span data-lang="en">Engineering across cultures.</span><span data-lang="es">Ingeniería entre culturas.</span></h2>
        </div>
        <div class="education-list">
          <p>Universidad Autónoma de Querétaro · Computer Engineering · 2013—2017</p>
          <p>Université de Nantes · International academic experience · 2015—2016</p>
          <p>Hoover High School · Advanced Technical Diploma · Alabama, United States</p>
        </div>
        <dl class="language-list">
          <div><dt><span class="inline-language" data-lang="en">Spanish</span><span class="inline-language" data-lang="es">Español</span></dt><dd><span class="inline-language" data-lang="en">Native</span><span class="inline-language" data-lang="es">Nativo</span></dd></div>
          <div><dt><span class="inline-language" data-lang="en">English</span><span class="inline-language" data-lang="es">Inglés</span></dt><dd><span class="inline-language" data-lang="en">Professional</span><span class="inline-language" data-lang="es">Profesional</span></dd></div>
          <div><dt><span class="inline-language" data-lang="en">French</span><span class="inline-language" data-lang="es">Francés</span></dt><dd><span class="inline-language" data-lang="en">Conversational</span><span class="inline-language" data-lang="es">Conversacional</span></dd></div>
          <div><dt><span class="inline-language" data-lang="en">Portuguese / Brazilian Portuguese</span><span class="inline-language" data-lang="es">Portugués / portugués brasileño</span></dt><dd><span class="inline-language" data-lang="en">Capability</span><span class="inline-language" data-lang="es">Capacidad</span></dd></div>
        </dl>
      </section>

<section class="cinema-contact release-end" id="contact" aria-labelledby="contact-title">
  <div class="release-end-shell">
    <div class="release-end-hero">
      <div class="release-end-copy">
        <p class="release-end-kicker"><span data-lang="en">Final · Executive profile</span><span data-lang="es">Final · Perfil ejecutivo</span></p>
        <h2 id="contact-title">ENRIQUE<br>ESCAMILLA</h2>
        <p class="release-end-role"><span data-lang="en">Data Center Infrastructure Engineer · Technical Systems Architect</span><span data-lang="es">Ingeniero de Infraestructura de Data Center · Arquitecto de Sistemas Técnicos</span></p>
        <p class="release-end-summary"><span data-lang="en">I design, document and operate infrastructure that stays clear under pressure—connecting field execution, systems thinking and reliable delivery.</span><span data-lang="es">Diseño, documento y opero infraestructura que mantiene claridad bajo presión, conectando ejecución en campo, pensamiento sistémico y entrega confiable.</span></p>
        <div class="release-end-actions">
          <button class="release-end-btn primary" type="button" data-contact-open><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="7" r="3.5"/><path d="M2.5 21v-2.5A5.5 5.5 0 0 1 8 13h2a5.5 5.5 0 0 1 5.5 5.5V21M18 7v6M15 10h6"/></svg><span data-lang="en">Open direct contact</span><span data-lang="es">Abrir contacto directo</span></button>
          <a class="release-end-btn offline-download" href="assets/asset-003-fc6564ae46.pdf" download="Enrique_Escamilla_CV_April_2026.pdf"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2h8l4 4v16H6Z"/><path d="M14 2v5h5M8.5 15h7M8.5 18h5M8.5 12h3"/></svg><span data-lang="en">Download ATS CV</span><span data-lang="es">Descargar CV ATS</span></a>
        </div>
      </div>
      <figure class="release-end-portrait">
        <img fetchpriority="high" decoding="async" src="assets/asset-004-ae760db594.jpg" alt="Enrique Escamilla professional portrait">
        <div class="release-end-contact-dock" aria-label="Direct contact shortcuts">
          <a href="https://wa.me/524423968131" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.5 11.7a8.4 8.4 0 0 1-12.4 7.4L3.5 20.5l1.4-4.4A8.4 8.4 0 1 1 20.5 11.7Z"/><path d="M8.2 7.7c.3-.6.6-.6.9-.6h.5c.2 0 .4.1.5.4l.8 1.9c.1.3.1.5-.1.7l-.6.8c-.2.2-.1.5 0 .7.8 1.5 1.9 2.5 3.5 3.2.3.1.5.1.7-.1l.9-1.1c.2-.2.4-.3.7-.2l2 .9c.3.1.4.3.4.5 0 .4-.2 1.5-.9 2.1-.7.7-1.8 1-3 .7-1.7-.4-3.8-1.4-5.7-3.2-1.6-1.5-2.8-3.5-3.1-4.9-.3-1.2 0-2.3.6-2.9.4-.5.9-.8 1.4-.8Z"/></svg></a>
          <a href="tel:+524423968131" aria-label="Call"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7.4 3.5 10 8l-2 1.8a15.5 15.5 0 0 0 6.2 6.2l1.8-2 4.5 2.6c.4.2.6.7.5 1.1-.5 2-2.3 3.3-4.4 3.1C9.4 20.2 3.8 14.6 3.2 7.4 3 5.3 4.3 3.5 6.3 3c.4-.1.9.1 1.1.5Z"/></svg></a>
          <a href="mailto:enrique_escamilla@icloud.com" aria-label="Email"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m4 7 8 6 8-6"/></svg></a>
          <a href="https://www.linkedin.com/in/e-escamilla?trk=contact-info" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9v11M6 5.5v.1M10.5 20V9h4v1.7c.8-1.2 1.9-2 3.6-2 3 0 3.9 2 3.9 5V20h-4v-5.5c0-1.6-.3-2.6-1.7-2.6-1.5 0-1.8 1.2-1.8 2.8V20Z"/></svg></a>
        </div>
      </figure>
    </div>
    <div class="release-end-lower">
      <div class="release-end-metrics" aria-label="Professional highlights">
        <div class="release-end-metric"><strong>10+</strong><span><span data-lang="en">Years experience</span><span data-lang="es">Años de experiencia</span></span></div>
        <div class="release-end-metric"><strong>20+</strong><span><span data-lang="en">Data center projects</span><span data-lang="es">Proyectos de data center</span></span></div>
        <div class="release-end-metric"><strong>50+</strong><span><span data-lang="en">Infrastructure deployments</span><span data-lang="es">Despliegues de infraestructura</span></span></div>
        <div class="release-end-metric"><strong>99.99%</strong><span><span data-lang="en">Uptime commitment</span><span data-lang="es">Compromiso de continuidad</span></span></div>
      </div>
      <div class="release-end-close">
        <p><small><span data-lang="en">Experience that delivers</span><span data-lang="es">Experiencia que entrega</span></small><strong><span data-lang="en">Ready for the next critical build.</span><span data-lang="es">Listo para el siguiente proyecto crítico.</span></strong></p>
        <button class="release-end-btn" type="button" data-contact-open><span data-lang="en">Let’s connect</span><span data-lang="es">Conectemos</span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M14 7l5 5-5 5"/></svg></button>
      </div>
    </div>
  </div>
</section>

</main>
    <footer class="cinematic-footer">
      <span>© 2026 Enrique Escamilla</span>
      <span><span class="inline-language" data-lang="en">Data Center Infrastructure Engineer</span><span class="inline-language" data-lang="es">Ingeniero de Infraestructura de Data Center</span></span>
      <span class="standalone-note"><span class="inline-language" data-lang="en">Complete single-file edition · Works offline</span><span class="inline-language" data-lang="es">Edición completa en un solo archivo · Funciona sin conexión</span></span>
    </footer>
  </div>

<div class="view mission-shell" id="portfolio-view" data-view="portfolio" hidden>
    <div class="mission-progress" aria-hidden="true"><i id="mission-progress-bar" style="width:0%"></i></div>
    <nav class="mission-rail" id="mission-rail" aria-label="Mission chapters"></nav>
    <button class="motion-control" id="motion-control" type="button" aria-pressed="false">
      <span aria-hidden="true" id="motion-icon">Ⅱ</span>
      <span id="motion-label">Pause motion</span>
    </button>

<main id="portfolio-main" class="mission-deck">
      <section class="mission-scene mission-cover" data-scene-index="0" data-narration-section="hero" aria-labelledby="mission-title">
        <video data-scene-video autoplay muted loop playsinline preload="metadata" poster="assets/asset-005-98e84d483b.jpg" aria-hidden="true" src="assets/asset-006-a96483a59b.mp4"></video>
        <div class="mission-cover-veil" aria-hidden="true"></div>
        <div class="mission-cover-grid" aria-hidden="true"></div>
        <div class="mission-cover-copy">
          <p class="eyebrow">Engineering Mission Log / 2026</p>
          <h1 id="mission-title"><span data-lang="en">Infrastructure<br>made visible.</span><span data-lang="es">Infraestructura<br>hecha visible.</span></h1>
          <p data-lang="en">A field-led portfolio of planning, deployment, validation and technical memory.</p>
          <p data-lang="es">Un portafolio desde el campo: planeación, despliegue, validación y memoria técnica.</p>
          <div class="mission-cover-actions">
            <button type="button" data-go-scene="1"><span class="inline-language" data-lang="en">Begin mission</span><span class="inline-language" data-lang="es">Iniciar misión</span> <span aria-hidden="true">↓</span></button>
            <a class="view-switch" href="#cv" data-open-view="cv"><span class="inline-language" data-lang="en">View CV</span><span class="inline-language" data-lang="es">Ver CV</span></a>
          </div>
        </div>
        <div class="mission-scene-count"><span id="scene-count-0">01 / 08 · Access</span></div>
      </section>

<section class="mission-scene mission-identity" data-scene-index="1" data-narration-section="professional" aria-labelledby="identity-title">
        <div class="identity-aura" aria-hidden="true"></div>
        <div class="identity-layout">
          <div class="identity-copy">
            <p class="eyebrow">02 / <span class="inline-language" data-lang="en">Identity</span><span class="inline-language" data-lang="es">Perfil</span></p>
            <h2 id="identity-title"><span data-lang="en">Field capability. Systems-level thinking.</span><span data-lang="es">Capacidad en campo. Pensamiento de sistemas.</span></h2>
            <p data-lang="en">I work where racks, fiber, power, network readiness, documentation and client expectations meet.</p>
            <p data-lang="es">Trabajo donde convergen racks, fibra, energía, preparación de red, documentación y expectativas del cliente.</p>
            <div class="identity-signals">
              <span><strong>5+</strong><span class="inline-language" data-lang="en">Data center years</span><span class="inline-language" data-lang="es">Años en data center</span></span>
              <span><strong>ICREA L5</strong><span class="inline-language" data-lang="en">Critical environment</span><span class="inline-language" data-lang="es">Entorno crítico</span></span>
              <span><strong>FR | EN | ES | BR</strong><span class="inline-language" data-lang="en">Language capability</span><span class="inline-language" data-lang="es">Capacidad lingüística</span></span>
            </div>
          </div>
          <figure class="identity-portrait">
            <img loading="lazy" decoding="async" src="assets/asset-004-ae760db594.jpg" alt="Enrique Escamilla in a professional portrait" data-alt-en="Enrique Escamilla in a professional portrait" data-alt-es="Enrique Escamilla en retrato profesional">
            <figcaption>Enrique Escamilla · Data Center Infrastructure Engineer</figcaption>
          </figure>
        </div>
        <div class="mission-scene-count"><span id="scene-count-1">02 / 08 · Identity</span></div>
      </section>

<section class="mission-scene mission-model" data-scene-index="2" data-narration-section="journey" aria-labelledby="model-title">
        <div class="mission-scene-heading">
          <p class="eyebrow">03 / <span class="inline-language" data-lang="en">Plan</span><span class="inline-language" data-lang="es">Planear</span></p>
          <h2 id="model-title"><span data-lang="en">Model the outcome.</span><span data-lang="es">Modelar el resultado.</span></h2>
          <p data-lang="en">Scaled spatial models make racks, routes, access and sequencing visible before field execution begins.</p>
          <p data-lang="es">Los modelos espaciales a escala hacen visibles racks, rutas, accesos y secuencias antes de iniciar en campo.</p>
        </div>
        <div class="model-media-grid">
          <figure class="mission-media model-main">
            <video data-scene-video muted loop playsinline preload="metadata" poster="assets/asset-007-e666b3d4c2.jpg" aria-label="Three-dimensional data center planning model" src="assets/asset-008-93b81acec3.mp4"></video>
            <figcaption><span class="inline-language" data-lang="en">Spatial planning · Rack and pathway context</span><span class="inline-language" data-lang="es">Planeación espacial · Contexto de racks y rutas</span></figcaption>
          </figure>
          <figure class="mission-media">
            <video data-scene-video muted loop playsinline preload="metadata" poster="assets/asset-009-b1f6ce8ac9.jpg" aria-label="Infrastructure modeling workflow" src="assets/asset-010-500ac8d180.mp4"></video>
            <figcaption><span class="inline-language" data-lang="en">Modeling workflow · Design before deployment</span><span class="inline-language" data-lang="es">Flujo de modelado · Diseñar antes de desplegar</span></figcaption>
          </figure>
        </div>
        <div class="mission-scene-count"><span id="scene-count-2">03 / 08 · Plan</span></div>
      </section>

<section class="mission-scene mission-case" data-scene-index="3" data-narration-section="projects" aria-labelledby="deploy-title">
        <div class="case-cinema-media">
          <img loading="lazy" decoding="async" src="assets/asset-011-7292b38814.jpg" alt="Data center team unpacking and preparing a new equipment rack" data-alt-en="Data center team unpacking and preparing a new equipment rack" data-alt-es="Equipo de data center desempacando y preparando un nuevo rack">
          <figure>
            <img loading="lazy" decoding="async" src="assets/asset-012-023cf4c604.jpg" alt="Completed rack installation with labeled fiber connectivity" data-alt-en="Completed rack installation with labeled fiber connectivity" data-alt-es="Instalación terminada de rack con conectividad de fibra etiquetada">
            <figcaption><span class="inline-language" data-lang="en">Public-safe field evidence</span><span class="inline-language" data-lang="es">Evidencia pública segura</span></figcaption>
          </figure>
        </div>
        <div class="case-cinema-copy">
          <p class="eyebrow">04 / <span class="inline-language" data-lang="en">Deploy</span><span class="inline-language" data-lang="es">Desplegar</span></p>
          <p class="case-kicker" data-lang="en">TRIARA colocation environment · Major international financial institution</p>
          <p class="case-kicker" data-lang="es">Entorno de colocación TRIARA · Institución financiera internacional</p>
          <h2 id="deploy-title"><span data-lang="en">Financial Infrastructure Deployment</span><span data-lang="es">Despliegue de Infraestructura Financiera</span></h2>
          <p data-lang="en">A production-grade deployment required controlled receiving, physical installation, structured connectivity and traceable handoff inside a critical colocation environment.</p>
          <p data-lang="es">Un despliegue de producción requirió recepción controlada, instalación física, conectividad estructurada y una entrega trazable dentro de un entorno crítico de colocación.</p>
          <div class="case-cinema-role">
            <span><span class="inline-language" data-lang="en">My role</span><span class="inline-language" data-lang="es">Mi rol</span></span>
            <strong><span class="inline-language" data-lang="en">Data Center Infrastructure Engineer</span><span class="inline-language" data-lang="es">Ingeniero de Infraestructura de Data Center</span></strong>
          </div>
          <details>
            <summary><span class="inline-language" data-lang="en">Contribution and technical scope</span><span class="inline-language" data-lang="es">Contribución y alcance técnico</span></summary>
            <p data-lang="en">I supported controlled receiving, prepared rack positions, installed and labeled physical infrastructure, validated the completed state and consolidated installation evidence for handoff.</p>
            <p data-lang="es">Apoyé la recepción controlada, preparé posiciones de rack, instalé y etiqueté infraestructura física, validé el estado final y consolidé evidencia para la entrega.</p>
            <p data-lang="en">Rack receiving and assembly, RU planning, rack &amp; stack, copper and fiber pathways, A/B power mapping, labeling, validation and as-built documentation.</p>
            <p data-lang="es">Recepción y ensamble de racks, planeación RU, rack &amp; stack, rutas de cobre y fibra, mapeo eléctrico A/B, etiquetado, validación y documentación as-built.</p>
          </details>
        </div>
        <div class="mission-scene-count"><span id="scene-count-3">04 / 08 · Deploy</span></div>
      </section>

<section class="mission-scene mission-trace" data-scene-index="4" data-narration-section="evidence" aria-labelledby="trace-title">
        <div class="mission-scene-heading">
          <p class="eyebrow">05 / <span class="inline-language" data-lang="en">Trace</span><span class="inline-language" data-lang="es">Trazar</span></p>
          <h2 id="trace-title"><span data-lang="en">Prove every connection.</span><span data-lang="es">Comprobar cada conexión.</span></h2>
          <p data-lang="en">Pathways, fiber integration, optical validation and evidence form one traceable chain.</p>
          <p data-lang="es">Rutas, integración de fibra, validación óptica y evidencia forman una sola cadena trazable.</p>
        </div>
        <div class="trace-media-grid">
          <figure class="mission-media trace-video">
            <video data-scene-video muted loop playsinline preload="metadata" poster="assets/asset-013-dd0a409804.jpg" aria-label="Fiber validation equipment in a data center" src="assets/asset-014-05757f0da1.mp4"></video>
            <figcaption><span class="inline-language" data-lang="en">Optical validation · Field evidence</span><span class="inline-language" data-lang="es">Validación óptica · Evidencia de campo</span></figcaption>
          </figure>
          <figure class="mission-media"><img loading="lazy" decoding="async" src="assets/asset-013-dd0a409804.jpg" alt="Fiber test equipment connected to infrastructure" data-alt-en="Fiber test equipment connected to infrastructure" data-alt-es="Equipo de prueba de fibra conectado a infraestructura"></figure>
          <figure class="mission-media"><img loading="lazy" decoding="async" src="assets/asset-015-39324b8f0c.jpg" alt="Labeled fiber connectivity inside a rack" data-alt-en="Labeled fiber connectivity inside a rack" data-alt-es="Conectividad de fibra etiquetada dentro de un rack"></figure>
        </div>
        <div class="trace-quote"><span data-lang="en">Work performed becomes work trusted.</span><span data-lang="es">El trabajo ejecutado se convierte en trabajo confiable.</span></div>
        <div class="mission-scene-count"><span id="scene-count-4">05 / 08 · Trace</span></div>
      </section>

<section class="mission-scene mission-case incident-case" data-scene-index="5" data-narration-section="projects" aria-labelledby="resolve-title">
        <div class="case-cinema-media">
          <img loading="lazy" decoding="async" src="assets/asset-016-8d980c0994.jpg" alt="Enrique Escamilla validating fiber connectivity in a data center rack" data-alt-en="Enrique Escamilla validating fiber connectivity in a data center rack" data-alt-es="Enrique Escamilla validando conectividad de fibra en un rack de data center">
          <figure>
            <img loading="lazy" decoding="async" src="assets/asset-013-dd0a409804.jpg" alt="Rear rack power and infrastructure validation work" data-alt-en="Rear rack power and infrastructure validation work" data-alt-es="Trabajo de validación de energía e infraestructura en la parte posterior de un rack">
            <figcaption><span class="inline-language" data-lang="en">Diagnosis · Validation · Knowledge transfer</span><span class="inline-language" data-lang="es">Diagnóstico · Validación · Transferencia de conocimiento</span></figcaption>
          </figure>
        </div>
        <div class="case-cinema-copy">
          <p class="eyebrow">06 / <span class="inline-language" data-lang="en">Resolve</span><span class="inline-language" data-lang="es">Resolver</span></p>
          <p class="case-kicker" data-lang="en">Global consumer goods manufacturer</p>
          <p class="case-kicker" data-lang="es">Fabricante global de bienes de consumo</p>
          <h2 id="resolve-title"><span data-lang="en">Infrastructure Incident Resolution &amp; Digital Trainer</span><span data-lang="es">Resolución de Incidentes y Entrenador Digital</span></h2>
          <p data-lang="en">Technical teams needed coordinated infrastructure response and a clearer way to transfer operational knowledge after incidents and changes.</p>
          <p data-lang="es">Los equipos técnicos necesitaban una respuesta coordinada de infraestructura y una forma más clara de transferir conocimiento operativo después de incidentes y cambios.</p>
          <div class="case-cinema-role">
            <span><span class="inline-language" data-lang="en">Operational value</span><span class="inline-language" data-lang="es">Valor operativo</span></span>
            <strong><span data-lang="en">Improved operational clarity, repeatable response steps and knowledge that could move beyond a single specialist.</span><span data-lang="es">Mayor claridad operativa, pasos de respuesta repetibles y conocimiento transferible más allá de un solo especialista.</span></strong>
          </div>
          <details>
            <summary><span class="inline-language" data-lang="en">Contribution and technical scope</span><span class="inline-language" data-lang="es">Contribución y alcance técnico</span></summary>
            <p data-lang="en">I coordinated stakeholders, supported field troubleshooting and validation, captured the resolution evidence and structured it into technical documentation and digital training workflows.</p>
            <p data-lang="es">Coordiné interesados, apoyé diagnóstico y validación en campo, capturé evidencia de resolución y la estructuré en documentación técnica y flujos de capacitación digital.</p>
            <p data-lang="en">Incident triage, stakeholder coordination, remediation planning, field validation, technical documentation and digital training workflows.</p>
            <p data-lang="es">Triage de incidentes, coordinación de interesados, planeación de remediación, validación en campo, documentación técnica y flujos de capacitación digital.</p>
          </details>
        </div>
        <div class="mission-scene-count"><span id="scene-count-5">06 / 08 · Resolve</span></div>
      </section>

<section class="mission-scene mission-dcim" data-scene-index="6" data-narration-section="capabilities" aria-labelledby="dcim-title">
        <div class="dcim-visual">
          <img loading="lazy" decoding="async" src="assets/asset-007-e666b3d4c2.jpg" alt="Conceptual three-dimensional data center digital twin" data-alt-en="Conceptual three-dimensional data center digital twin" data-alt-es="Gemelo digital conceptual tridimensional de un data center">
          <div class="dcim-scan" aria-hidden="true"></div>
          <div class="dcim-chain" aria-hidden="true"><span>Site</span><i>→</i><span>Rack</span><i>→</i><span>Device</span><i>→</i><span>Port</span><i>→</i><span>Cable</span></div>
        </div>
        <div class="dcim-copy">
          <p class="eyebrow">07 / <span class="inline-language" data-lang="en">Evolve</span><span class="inline-language" data-lang="es">Evolucionar</span></p>
          <p class="case-kicker" data-lang="en">Independent systems research and product design</p>
          <p class="case-kicker" data-lang="es">Investigación independiente de sistemas y diseño de producto</p>
          <h2 id="dcim-title"><span data-lang="en">ESCloud DCIM OS &amp; Infrastructure Digital Twin</span><span data-lang="es">ESCloud DCIM OS y Gemelo Digital de Infraestructura</span></h2>
          <p data-lang="en">Infrastructure data often lives across disconnected tools, diagrams and individual knowledge, making capacity and change harder to understand.</p>
          <p data-lang="es">Los datos de infraestructura suelen vivir en herramientas, diagramas y conocimiento individual desconectados, dificultando la comprensión de capacidad y cambios.</p>
          <blockquote><span data-lang="en">Leave a system, not a mystery.</span><span data-lang="es">Dejar un sistema, no un misterio.</span></blockquote>
          <details>
            <summary><span class="inline-language" data-lang="en">Product direction and scope</span><span class="inline-language" data-lang="es">Dirección de producto y alcance</span></summary>
            <p data-lang="en">I designed the information architecture, infrastructure relationship model, bilingual interaction system and digital-twin product direction.</p>
            <p data-lang="es">Diseñé la arquitectura de información, el modelo de relaciones de infraestructura, el sistema de interacción bilingüe y la dirección de producto del gemelo digital.</p>
            <p data-lang="en">Asset relationships, rack and power models, device-port-cable paths, operational workflows, bilingual interface design and digital-twin concepts.</p>
            <p data-lang="es">Relaciones de activos, modelos de rack y energía, rutas equipo-puerto-cable, flujos operativos, interfaz bilingüe y conceptos de gemelo digital.</p>
          </details>
        </div>
        <div class="mission-scene-count"><span id="scene-count-6">07 / 08 · Evolve</span></div>
      </section>

<section class="mission-scene mission-contact" data-scene-index="7" data-narration-section="contact" aria-labelledby="portfolio-contact-title">
        <div class="contact-cinema-copy">
          <p class="eyebrow">08 / <span class="inline-language" data-lang="en">Next mission</span><span class="inline-language" data-lang="es">Siguiente misión</span></p>
          <h2 id="portfolio-contact-title"><span data-lang="en">Ready for infrastructure that has to hold.</span><span data-lang="es">Listo para infraestructura que tiene que responder.</span></h2>
          <p data-lang="en">Open to Data Center Infrastructure Engineer, Data Center Field Engineer and Infrastructure Operations roles.</p>
          <p data-lang="es">Disponible para posiciones de Ingeniería de Infraestructura de Data Center, Ingeniería de Campo y Operaciones.</p>
          <div class="contact-cinema-actions">
            <a class="primary" href="mailto:enrique_escamilla@icloud.com"><span class="inline-language" data-lang="en">Email Enrique</span><span class="inline-language" data-lang="es">Escribir a Enrique</span></a>
            <a class="view-switch" href="#cv" data-open-view="cv"><span class="inline-language" data-lang="en">Review CV</span><span class="inline-language" data-lang="es">Revisar CV</span></a>
            <a href="assets/asset-003-fc6564ae46.pdf" download="Enrique_Escamilla_CV_April_2026.pdf"><span class="inline-language" data-lang="en">Download CV</span><span class="inline-language" data-lang="es">Descargar CV</span></a>
          </div>
          <small data-lang="en">Public-safe evidence. Client-sensitive labels, credentials, serial numbers and operational details are omitted.</small>
          <small data-lang="es">Evidencia pública segura. Se omiten etiquetas, credenciales, números de serie y detalles operativos sensibles.</small>
        </div>
        <figure class="contact-cinema-portrait">
          <img loading="lazy" decoding="async" src="assets/asset-017-d5dc6fd588.jpg" alt="Enrique Escamilla professional portrait" data-alt-en="Enrique Escamilla professional portrait" data-alt-es="Retrato profesional de Enrique Escamilla">
        </figure>
        <div class="mission-scene-count"><span id="scene-count-7">08 / 08 · Contact</span></div>
      </section>
    </main>
  </div>

const root = document.documentElement;
      const body = document.body;
      const cvView = document.getElementById("cv-view");
      const portfolioView = document.getElementById("portfolio-view");
      const cvVideo = document.getElementById("cv-film-video");
      const portfolioDeck = document.getElementById("portfolio-main");
      const prefersReducedMotion = matchMedia("(prefers-reduced-motion: reduce)");

const CV_REFERENCE_DURATION = 59.033333;
      const slides = {
        en: [
          {start:0, eyebrow:"Enrique Escamilla · 5+ years in mission-critical infrastructure", title:"Infrastructure from concept to operation.", body:"I combine strategic systems thinking with the field experience required to make designs buildable, traceable and reliable.", signal:"Design · Deliver · Operate"},
          {start:8, eyebrow:"Spatial intelligence", title:"Model the space before hardware moves.", body:"3D colocation layouts, rack placement, cable paths, capacity and deployment sequencing turn complex requirements into a plan teams can execute.", signal:"3D Modeling · Colocation Planning"},
          {start:17, eyebrow:"Systems architecture", title:"Architecture grounded in implementation.", body:"Network architecture, cloud and managed services are shaped around security, operations, monitoring and the realities of the physical environment.", signal:"Network · Cloud · Managed Services"},
          {start:27, eyebrow:"Hands-on field engineering", title:"Where infrastructure becomes real.", body:"Structured cabling, fiber and copper, rack and stack, labeling, power awareness, testing, troubleshooting and commissioning.", signal:"Rack · Cable · Validate"},
          {start:38, eyebrow:"End-to-end ownership", title:"One accountable delivery chain.", body:"I can plan the space, coordinate the work, execute in the field, validate the result and leave clear technical documentation behind.", signal:"Plan → Build → Handoff"},
          {start:48, eyebrow:"Technical leadership", title:"The bridge between every team involved.", body:"I translate between clients, technical teams, facilities, vendors and contractors so decisions stay aligned from design through delivery.", signal:"Client · Vendor · Technical"},
          {start:56, eyebrow:"The next critical build", title:"Ready to own the full lifecycle.", body:"Open to infrastructure roles where design judgment, field execution and client-facing leadership belong in the same person.", signal:"CV + Professional Portfolio"}
        ],
        es: [
          {start:0, eyebrow:"Enrique Escamilla · Más de 5 años en infraestructura de misión crítica", title:"Infraestructura del concepto a la operación.", body:"Combino pensamiento estratégico de sistemas con experiencia de campo para convertir diseños en soluciones construibles, trazables y confiables.", signal:"Diseñar · Entregar · Operar"},
          {start:8, eyebrow:"Inteligencia espacial", title:"Modelar el espacio antes de mover el hardware.", body:"Modelos 3D de colocación, distribución de racks, rutas de cableado, capacidad y secuencia de despliegue convierten requisitos complejos en un plan ejecutable.", signal:"Modelado 3D · Planeación de Colocación"},
          {start:17, eyebrow:"Arquitectura de sistemas", title:"Arquitectura basada en la implementación.", body:"La arquitectura de red, la nube y los servicios administrados se diseñan alrededor de la seguridad, la operación, el monitoreo y la realidad del entorno físico.", signal:"Red · Nube · Servicios Administrados"},
          {start:27, eyebrow:"Ingeniería práctica en campo", title:"Donde la infraestructura se vuelve real.", body:"Cableado estructurado, fibra y cobre, rack and stack, etiquetado, energía, pruebas, diagnóstico y puesta en operación.", signal:"Rack · Cablear · Validar"},
          {start:38, eyebrow:"Responsabilidad de punta a punta", title:"Una sola cadena responsable.", body:"Puedo planear el espacio, coordinar el trabajo, ejecutar en campo, validar el resultado y dejar documentación técnica clara.", signal:"Planear → Construir → Entregar"},
          {start:48, eyebrow:"Liderazgo técnico", title:"El puente entre todos los equipos.", body:"Traduzco entre clientes, equipos técnicos, instalaciones, proveedores y contratistas para mantener las decisiones alineadas desde el diseño hasta la entrega.", signal:"Cliente · Proveedor · Técnico"},
          {start:56, eyebrow:"El siguiente proyecto crítico", title:"Listo para asumir el ciclo completo.", body:"Disponible para posiciones donde el criterio de diseño, la ejecución en campo y el liderazgo con clientes pertenezcan a la misma persona.", signal:"CV + Portafolio Profesional"}
        ]
      };

const narrationScripts = {
        en: {
          hero:"Enrique Escamilla is a Data Center Infrastructure Engineer and Technical Systems Architect who bridges electromechanical systems, structured cabling, network deployment, documentation and client-facing execution.",
          principles:"The work is complete when it is proven, documented and understandable. Reliability is designed into the process, not added at the end.",
          capabilities:"His practice spans rack deployment, copper and fiber, power paths, network enablement, incident response, technical memory and digital-twin concepts.",
          journey:"Each engagement follows a deliberate sequence: understand the need, model the outcome, execute with control, validate the result and leave room to evolve.",
          projects:"These selected projects show the same idea at different scales: infrastructure should be visible, traceable and ready for the people who operate it.",
          evidence:"The media documents real field conditions while keeping credentials, serial numbers and private client material out of public view.",
          professional:"Since 2021 at Telmex TRIARA Data Centers, Enrique has delivered mission-critical infrastructure across racks, copper and fiber, network activation, power awareness, validation, documentation and client handoff. From 2019 to 2021 at Aptar Group, he connected infrastructure projects with manufacturing operations.",
          contact:"Enrique is based in Querétaro, Mexico, and is open to data center infrastructure, field engineering and infrastructure operations roles."
        },
        es: {
          hero:"Enrique Escamilla trabaja donde la infraestructura crítica se convierte en operación. Une la ejecución disciplinada en campo con sistemas que permanecen claros después de la entrega.",
          principles:"El trabajo se completa cuando queda comprobado, documentado y entendible. La confiabilidad se diseña desde el proceso; no se agrega al final.",
          capabilities:"Su práctica abarca despliegue de racks, cobre y fibra, rutas eléctricas, habilitación de red, atención de incidentes, memoria técnica y conceptos de gemelo digital.",
          journey:"Cada proyecto sigue una secuencia intencional: entender la necesidad, modelar el resultado, ejecutar con control, validar y dejar espacio para evolucionar.",
          projects:"Estos proyectos muestran una misma idea en distintas escalas: la infraestructura debe ser visible, trazable y estar lista para quienes la operan.",
          evidence:"Los medios documentan condiciones reales de campo sin exponer credenciales, números de serie ni material privado del cliente.",
          professional:"Desde 2021 en Telmex TRIARA, Enrique entrega infraestructura de misión crítica en racks, cobre y fibra, habilitación de red, energía, validación, documentación y entrega al cliente. De 2019 a 2021 en Aptar Group, conectó proyectos de infraestructura con operaciones de manufactura.",
          contact:"Enrique vive en Querétaro, México, y está disponible para posiciones de infraestructura de data center, ingeniería de campo y operaciones de infraestructura."
        }
      };

const chapterLabels = {
        en:["Access","Identity","Plan","Deploy","Trace","Resolve","Evolve","Contact"],
        es:["Acceso","Perfil","Planear","Desplegar","Trazar","Resolver","Evolucionar","Contacto"]
      };

let currentView = location.hash === "#portfolio" ? "portfolio" : "cv";
      let cvSlideIndex = 0;
      let cvStartedWithSound = false;
      let motionPaused = prefersReducedMotion.matches;
      let activeScene = 0;
      let narrationEnabled = localStorage.getItem("portfolio-narration") === "on";
      let narrationState = narrationEnabled ? "ready" : "off";
      let narrationUserActivated = false;
      let narrationWasPlaying = false;
      let currentUtterance = null;

function language() {
        return root.dataset.language === "es" ? "es" : "en";
      }

function cvDuration() {
        return Number.isFinite(cvVideo.duration) && cvVideo.duration > 0
          ? cvVideo.duration
          : CV_REFERENCE_DURATION;
      }

function slideStart(slide) {
        return slide.start / CV_REFERENCE_DURATION * cvDuration();
      }

function activeNarrationText() {
        const lang = language();
        if (currentView === "cv") {
          const slide = slides[lang][cvSlideIndex];
          return slide.title + ". " + slide.body;
        }
        const scene = portfolioDeck.querySelector('[data-scene-index="' + activeScene + '"]');
        const section = scene ? scene.dataset.narrationSection : "hero";
        return narrationScripts[lang][section] || narrationScripts[lang].hero;
      }

function statusText(state) {
        const labels = {
          en:{off:"Off", ready:"Ready", loading:"Loading", playing:"Playing", paused:"Paused", error:"Error", unavailable:"Text only"},
          es:{off:"Apagada", ready:"Lista", loading:"Cargando", playing:"Reproduciendo", paused:"Pausada", error:"Error", unavailable:"Solo texto"}
        };
        return labels[language()][state] || labels[language()].off;
      }

function updateNarrationUi() {
        const button = document.getElementById("narration-toggle");
        button.classList.toggle("enabled", narrationEnabled);
        button.classList.toggle("playing", narrationState === "playing");
        button.setAttribute("aria-pressed", String(narrationEnabled));
        button.setAttribute("aria-label", narrationEnabled
          ? (language() === "en" ? "Turn AI narration off" : "Apagar narración con IA")
          : (language() === "en" ? "Turn AI narration on" : "Activar narración con IA"));
        document.getElementById("narration-status").textContent = statusText(narrationState);
        document.getElementById("narration-more").hidden = !narrationEnabled;
      }

function chooseVoice(lang) {
        const expected = lang === "en" ? "en-US" : "es-MX";
        const voices = speechSynthesis.getVoices();
        return voices.find((voice) => voice.lang.toLowerCase() === expected.toLowerCase())
          || voices.find((voice) => voice.lang.toLowerCase().startsWith(lang))
          || null;
      }

function stopNarration(nextState) {
        if ("speechSynthesis" in window) speechSynthesis.cancel();
        currentUtterance = null;
        narrationWasPlaying = false;
        narrationState = nextState || (narrationEnabled ? "ready" : "off");
        updateNarrationUi();
      }

function pauseNarration() {
        if ("speechSynthesis" in window && speechSynthesis.speaking && !speechSynthesis.paused) {
          speechSynthesis.pause();
          narrationState = "paused";
          narrationWasPlaying = false;
          updateNarrationUi();
        }
      }

function updateDynamicLanguage() {
        const lang = language();
        root.lang = lang === "es" ? "es-MX" : "en";
        document.getElementById("language-toggle").textContent = lang === "en" ? "ES" : "EN";
        document.getElementById("language-toggle").setAttribute("aria-label", lang === "en" ? "Cambiar a español" : "Switch to English");
        document.querySelectorAll("[data-alt-en]").forEach((element) => {
          element.alt = lang === "en" ? element.dataset.altEn : element.dataset.altEs;
        });
        document.querySelector(".cinematic-tabs").setAttribute("aria-label", lang === "en" ? "Portfolio views" : "Vistas del portafolio");
        document.getElementById("mission-rail").setAttribute("aria-label", lang === "en" ? "Mission chapters" : "Capítulos de la misión");
        document.getElementById("narration-more").querySelector("summary").setAttribute("aria-label", lang === "en" ? "More narration controls" : "Más controles de narración");
        updateCvSlide(true);
        renderMissionRail();
        updateMotionUi();
        updateNarrationUi();
      }

function updateThemeUi() {
        const isDark = root.dataset.theme !== "light";
        document.getElementById("theme-icon").textContent = isDark ? "☼" : "◐";
        document.getElementById("theme-toggle").setAttribute("aria-pressed", String(!isDark));
        document.getElementById("theme-toggle").setAttribute("aria-label", language() === "en" ? "Switch color theme" : "Cambiar tema de color");
      }

function updateCvControls() {
        const lang = language();
        const playing = !cvVideo.paused;
        const soundOn = !cvVideo.muted;
        document.getElementById("cv-play-icon").textContent = cvStartedWithSound && playing ? "Ⅱ" : "▶";
        document.getElementById("cv-play-label").textContent = cvStartedWithSound
          ? (playing ? (lang === "en" ? "Pause film" : "Pausar película") : (lang === "en" ? "Resume film" : "Reanudar película"))
          : (lang === "en" ? "Play with sound" : "Reproducir con sonido");
        document.getElementById("cv-sound-icon").textContent = soundOn ? "◖))" : "◖×";
        document.getElementById("cv-sound-label").textContent = soundOn ? (lang === "en" ? "Sound on" : "Sonido activo") : (lang === "en" ? "Sound off" : "Sin sonido");
        document.getElementById("cv-sound").setAttribute("aria-pressed", String(soundOn));
        document.getElementById("cv-film-hint").textContent = cvStartedWithSound
          ? (lang === "en" ? "Slides follow the film automatically." : "Las diapositivas siguen la película automáticamente.")
          : (lang === "en" ? "Muted preview · Tap once for the full experience." : "Vista previa sin sonido · Toca una vez para la experiencia completa.");
      }

async function beginCvWithSound() {
        stopNarration();
        cvStartedWithSound = true;
        cvVideo.pause();
        cvVideo.currentTime = 0;
        cvVideo.muted = false;
        cvVideo.volume = 1;
        try {
          await cvVideo.play();
        } catch {
          cvVideo.muted = true;
        }
        updateCvControls();
      }

function renderMissionRail() {
        const rail = document.getElementById("mission-rail");
        rail.replaceChildren();
        chapterLabels[language()].forEach((label, index) => {
          const button = document.createElement("button");
          button.type = "button";
          button.innerHTML = "<i></i><span>" + label + "</span>";
          button.setAttribute("aria-label", (index + 1) + ". " + label);
          button.classList.toggle("active", index === activeScene);
          if (index === activeScene) button.setAttribute("aria-current", "step");
          button.addEventListener("click", () => goToScene(index));
          rail.appendChild(button);
          const count = document.getElementById("scene-count-" + index);
          if (count) count.textContent = String(index + 1).padStart(2, "0") + " / 08 · " + label;
        });
      }

function updateMissionUi() {
        document.getElementById("mission-progress-bar").style.width = (activeScene / 7 * 100) + "%";
        document.querySelectorAll("#mission-rail button").forEach((button, index) => {
          button.classList.toggle("active", index === activeScene);
          if (index === activeScene) button.setAttribute("aria-current", "step");
          else button.removeAttribute("aria-current");
        });
      }

function goToScene(index) {
        const scene = portfolioDeck.querySelector('[data-scene-index="' + index + '"]');
        if (scene) scene.scrollIntoView({behavior:motionPaused ? "auto" : "smooth", block:"start"});
      }

function updateMotionUi() {
        portfolioView.classList.toggle("motion-paused", motionPaused);
        document.getElementById("motion-icon").textContent = motionPaused ? "▶" : "Ⅱ";
        document.getElementById("motion-label").textContent = motionPaused
          ? (language() === "en" ? "Resume motion" : "Reanudar movimiento")
          : (language() === "en" ? "Pause motion" : "Pausar movimiento");
        document.getElementById("motion-control").setAttribute("aria-pressed", String(motionPaused));
        syncPortfolioVideos();
      }

document.querySelectorAll("[data-open-view]").forEach((link) => {
        link.addEventListener("click", (event) => {
          event.preventDefault();
          setView(link.dataset.openView);
        });
      });

document.querySelectorAll("[data-go-scene]").forEach((button) => {
        button.addEventListener("click", () => goToScene(Number(button.dataset.goScene)));
      });

document.getElementById("language-toggle").addEventListener("click", () => {
        const wasSpeaking = narrationState === "playing" || narrationState === "loading";
        root.dataset.language = language() === "en" ? "es" : "en";
        localStorage.setItem("portfolio-language", language());
        renderCvChapters();
        updateDynamicLanguage();
        updateCvControls();
        if (narrationEnabled && narrationUserActivated && wasSpeaking) speakNarration();
        else if ("speechSynthesis" in window) speechSynthesis.cancel();
      });

document.getElementById("theme-toggle").addEventListener("click", () => {
        root.dataset.theme = root.dataset.theme === "light" ? "dark" : "light";
        root.style.colorScheme = root.dataset.theme;
        localStorage.setItem("portfolio-theme", root.dataset.theme);
        updateThemeUi();
      });

document.getElementById("narration-toggle").addEventListener("click", () => {
        narrationEnabled = !narrationEnabled;
        narrationUserActivated = true;
        localStorage.setItem("portfolio-narration", narrationEnabled ? "on" : "off");
        if (narrationEnabled) speakNarration();
        else stopNarration("off");
        updateNarrationUi();
      });
      document.getElementById("narration-pause").addEventListener("click", pauseNarration);
      document.getElementById("narration-resume").addEventListener("click", resumeNarration);
      document.getElementById("narration-restart").addEventListener("click", speakNarration);
      document.getElementById("narration-stop").addEventListener("click", () => stopNarration("ready"));

cvVideo.addEventListener("timeupdate", () => {
        document.getElementById("cv-film-progress").style.width = Math.min(100, cvVideo.currentTime / cvDuration() * 100) + "%";
        updateCvSlide(false);
      });
      cvVideo.addEventListener("loadedmetadata", () => {
        renderCvChapters();
        updateCvSlide(true);
      });
      cvVideo.addEventListener("play", updateCvControls);
      cvVideo.addEventListener("pause", updateCvControls);
      cvVideo.addEventListener("ended", () => {
        if (!cvStartedWithSound) {
          cvVideo.currentTime = 0;
          cvVideo.play().catch(() => undefined);
        }
        updateCvControls();
      });

document.getElementById("motion-control").addEventListener("click", () => {
        motionPaused = !motionPaused;
        updateMotionUi();
      });

const sceneObserver = new IntersectionObserver((entries) => {
        const visible = entries.filter((entry) => entry.isIntersecting).sort((a,b) => b.intersectionRatio - a.intersectionRatio)[0];
        if (!visible) return;
        const next = Number(visible.target.dataset.sceneIndex);
        const wasSpeaking = narrationState === "playing" || narrationState === "loading";
        activeScene = next;
        updateMissionUi();
        syncPortfolioVideos();
        if (narrationEnabled && narrationUserActivated && wasSpeaking) speakNarration();
      }, {root:portfolioDeck, threshold:[0.55,0.72]});
      portfolioDeck.querySelectorAll("[data-scene-index]").forEach((scene) => sceneObserver.observe(scene));

document.addEventListener("visibilitychange", () => {
        if (document.hidden) {
          cvVideo.pause();
          portfolioDeck.querySelectorAll("video").forEach((video) => video.pause());
          pauseNarration();
        }
      });

window.addEventListener("hashchange", () => {
        setView(location.hash === "#portfolio" ? "portfolio" : "cv", false);
      });

prefersReducedMotion.addEventListener("change", (event) => {
        if (event.matches) {
          motionPaused = true;
          cvVideo.pause();
          updateMotionUi();
        }
      });

if ("speechSynthesis" in window) {
        speechSynthesis.getVoices();
        speechSynthesis.addEventListener("voiceschanged", () => {
          if (narrationState === "unavailable") {
            narrationState = narrationEnabled ? "ready" : "off";
            updateNarrationUi();
          }
        });
      }

renderCvChapters();
      renderMissionRail();
      updateDynamicLanguage();
      updateThemeUi();
      updateCvControls();
      updateMotionUi();
      updateNarrationUi();
      setView(currentView, false);
    })();
  </script>

const introEyebrow = document.querySelector('.recruiter-cut-intro .eyebrow [data-lang="en"]');
    if(introEyebrow) introEyebrow.textContent='Profile at a glance';
    const introEs = document.querySelector('.recruiter-cut-intro .eyebrow [data-lang="es"]');
    if(introEs) introEs.textContent='Perfil en síntesis';

if(!document.querySelector('.persistent-contact')){
      const contact=document.createElement('a');contact.className='persistent-contact';contact.href='#contact';
      contact.innerHTML='<span class="inline-language" data-lang="en">Contact</span><span class="inline-language" data-lang="es">Contacto</span>';
      contact.setAttribute('aria-label','Contact Enrique Escamilla');document.body.appendChild(contact);
    }

.es-linkedin-badge-shell{margin:18px 0 0;padding:16px;border:1px solid color-mix(in srgb,currentColor 14%,transparent);border-radius:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel,#0b1724) 78%,transparent),color-mix(in srgb,var(--panel,#0b1724) 52%,transparent));overflow:hidden}
.es-linkedin-badge-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;color:var(--muted,rgba(244,248,252,.68));font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.es-linkedin-badge-label::after{content:"Official profile";padding:5px 8px;border:1px solid color-mix(in srgb,currentColor 15%,transparent);border-radius:999px;color:var(--text,#f4f8fc);font-size:9px;letter-spacing:.08em}
.es-linkedin-badge-frame{min-height:278px;display:grid;place-items:center;border-radius:15px;background:#0b0f14;overflow:hidden}
.es-linkedin-badge-frame iframe{max-width:100%!important}
.es-linkedin-badge-frame .badge-base{max-width:100%}
.es-linkedin-badge-frame .badge-base__link{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 18px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#fff;text-decoration:none;font-weight:780;background:#0a66c2}
html[data-theme="light"] .es-linkedin-badge-shell{background:rgba(255,255,255,.62)}
@media(max-width:430px){.es-linkedin-badge-shell{padding:12px}.es-linkedin-badge-frame{min-height:270px}.es-linkedin-badge-label::after{content:"Official"}}
.es-contact-details{margin:18px 0 0;padding:15px 0;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent);display:grid;gap:6px;color:var(--muted,rgba(244,248,252,.68));font-size:14px}.es-contact-details strong{color:var(--text,#f4f8fc)}
.es-qr-tabs{display:flex;gap:6px;margin-top:18px;padding:5px;border-radius:15px;background:color-mix(in srgb,var(--panel,#0b1724) 66%,transparent)}.es-qr-tabs button{flex:1;min-height:42px;border:0;border-radius:11px;background:transparent;color:inherit;font-size:12px;font-weight:780;cursor:pointer}.es-qr-tabs button[aria-selected="true"]{background:color-mix(in srgb,var(--text,#f4f8fc) 93%,transparent);color:var(--bg,#06111b)}
.es-qr-stage{margin-top:12px;display:grid;grid-template-columns:148px 1fr;gap:18px;align-items:center}.es-qr-stage img{width:148px;height:148px;padding:9px;border-radius:19px;background:#fff}.es-qr-copy{color:var(--muted,rgba(244,248,252,.68));font-size:14px;line-height:1.45}.es-qr-copy strong{display:block;margin-bottom:6px;color:var(--text,#f4f8fc);font-size:18px}.es-qr-copy a{display:inline-flex;margin-top:10px;color:var(--accent,#6fd3ff);font-weight:760;text-decoration:none}
.persistent-contact{cursor:pointer}.capability-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px}.capability-controls button{width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--text);font-size:22px;cursor:pointer}.capability-dots{display:flex;justify-content:center;gap:7px;flex:1}.capability-dots button{width:8px;height:8px;min-width:8px;min-height:8px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--text) 25%,transparent)}.capability-dots button.active{width:25px;border-radius:999px;background:var(--accent)}
.review-status{display:inline-flex;margin:0 0 12px;padding:7px 10px;border:1px solid color-mix(in srgb,var(--accent,#6fd3ff) 36%,transparent);border-radius:999px;background:color-mix(in srgb,var(--accent,#6fd3ff) 11%,transparent);color:var(--accent,#6fd3ff);font-size:10px;font-weight:850;letter-spacing:.11em;text-transform:uppercase}
@media(max-width:760px){.capability-cinema{width:auto!important;max-width:100%!important;box-sizing:border-box!important;overflow:hidden}.capability-filmstrip{width:100%!important;max-width:100%!important;box-sizing:border-box!important;padding-left:0!important;padding-right:0!important;overflow-x:auto!important}.capability-filmstrip article{min-width:100%!important;width:100%!important;scroll-snap-stop:always}.recruiter-cut-intro{padding-bottom:calc(118px + env(safe-area-inset-bottom))!important}.signal-strip article:nth-child(4){padding-bottom:96px!important}.signal-strip article:nth-child(4)>span{display:block!important;max-width:70px!important}.es-contact-dialog{padding:19px;border-radius:27px}.es-contact-actions{grid-template-columns:1fr 1fr}.es-qr-stage{grid-template-columns:1fr;justify-items:center;text-align:center}.es-qr-stage img{width:176px;height:176px}.capability-filmstrip{grid-auto-columns:100%!important;gap:0!important;scrollbar-width:none}.capability-filmstrip::-webkit-scrollbar{display:none}.capability-filmstrip article{width:100%;min-height:390px;border-radius:27px}.signal-strip article strong{font-size:clamp(25px,8vw,42px)}.signal-strip article span{font-size:14px;line-height:1.4}.cinematic-nav{max-width:calc(100vw - 22px)!important}}
@media(max-width:430px){.persistent-contact{min-width:110px!important;padding-inline:14px!important}.es-contact-actions{grid-template-columns:1fr}.es-contact-dialog h2{font-size:42px}.es-contact-role{font-size:15px}}
@media(prefers-reduced-motion:reduce){.es-contact-hub,.es-contact-dialog,.persistent-contact,.capability-filmstrip{scroll-behavior:auto!important;transition:none!important}}
</style>

<div class="es-contact-hub" id="es-contact-hub" hidden aria-hidden="true">
  <section class="es-contact-dialog" role="dialog" aria-modal="true" aria-labelledby="es-contact-title">
    <button class="es-contact-close" type="button" aria-label="Close contact hub">×</button>
    <div class="es-contact-layout">
      <div class="es-contact-main">
        <div class="es-contact-availability"><span class="es-contact-availability-dot" aria-hidden="true"></span><span class="inline-language" data-lang="en">Open to infrastructure opportunities</span><span class="inline-language" data-lang="es">Disponible para oportunidades de infraestructura</span></div>
        <p class="es-contact-eyebrow"><span class="inline-language" data-lang="en">Enrique Escamilla · Direct line</span><span class="inline-language" data-lang="es">Enrique Escamilla · Línea directa</span></p>
        <h2 id="es-contact-title"><span class="inline-language" data-lang="en">Critical infrastructure should never depend on <em>guesswork.</em></span><span class="inline-language" data-lang="es">La infraestructura crítica nunca debe depender de <em>suposiciones.</em></span></h2>
        <p class="es-contact-role"><span class="inline-language" data-lang="en">I design, install, validate, and document the systems that keep data centers operational—from rack and power paths to fiber, network handoff, and final acceptance.</span><span class="inline-language" data-lang="es">Diseño, instalo, valido y documento los sistemas que mantienen operativos los centros de datos: desde racks y rutas de energía hasta fibra, entrega de red y aceptación final.</span></p>
        <div class="es-contact-proof" aria-label="Professional signals">
          <span><span class="inline-language" data-lang="en">Data Center Infrastructure</span><span class="inline-language" data-lang="es">Infraestructura de Data Center</span></span>
          <span><span class="inline-language" data-lang="en">Field + Systems Engineering</span><span class="inline-language" data-lang="es">Ingeniería de campo + sistemas</span></span>
          <span><span class="inline-language" data-lang="en">Querétaro · EN / ES</span><span class="inline-language" data-lang="es">Querétaro · EN / ES</span></span>
        </div>
        <a class="es-contact-primary" href="https://wa.me/524423968131" target="_blank" rel="noreferrer">
          <span class="es-contact-primary-icon" aria-hidden="true">W</span>
          <span class="es-contact-primary-copy"><small><span class="inline-language" data-lang="en">Fastest direct channel</span><span class="inline-language" data-lang="es">Canal directo más rápido</span></small><strong><span class="inline-language" data-lang="en">Start a conversation on WhatsApp</span><span class="inline-language" data-lang="es">Iniciar conversación por WhatsApp</span></strong></span>
          <span class="es-contact-primary-arrow" aria-hidden="true">↗</span>
        </a>
        <div class="es-contact-actions">
          <a class="" href="mailto:enrique_escamilla@icloud.com" ><span class="es-contact-action-icon" aria-hidden="true">✉</span><span class="es-contact-action-copy"><strong><span class="inline-language" data-lang="en">Email</span><span class="inline-language" data-lang="es">Correo</span></strong><small><span class="inline-language" data-lang="en">Send role or project details</span><span class="inline-language" data-lang="es">Comparte detalles del puesto o proyecto</span></small></span></a>
          <a class="" href="tel:+524423968131" ><span class="es-contact-action-icon" aria-hidden="true">☎</span><span class="es-contact-action-copy"><strong><span class="inline-language" data-lang="en">Call</span><span class="inline-language" data-lang="es">Llamar</span></strong><small><span class="inline-language" data-lang="en">Direct mobile line</span><span class="inline-language" data-lang="es">Línea móvil directa</span></small></span></a>
          <a class="" href="https://www.linkedin.com/in/e-escamilla?trk=contact-info" target="_blank" rel="noreferrer"><span class="es-contact-action-icon" aria-hidden="true">in</span><span class="es-contact-action-copy"><strong><span class="inline-language" data-lang="en">LinkedIn</span><span class="inline-language" data-lang="es">LinkedIn</span></strong><small><span class="inline-language" data-lang="en">Verified professional profile</span><span class="inline-language" data-lang="es">Perfil profesional verificado</span></small></span></a>
          <a class="es-cv-download" href="#" ><span class="es-contact-action-icon" aria-hidden="true">↓</span><span class="es-contact-action-copy"><strong><span class="inline-language" data-lang="en">Download CV</span><span class="inline-language" data-lang="es">Descargar CV</span></strong><small><span class="inline-language" data-lang="en">Portable PDF résumé</span><span class="inline-language" data-lang="es">CV en PDF</span></small></span></a>
          <a class="" href="assets/asset-018-28cfc22c94.vcf" download="Enrique_Escamilla.vcf"><span class="es-contact-action-icon" aria-hidden="true">+</span><span class="es-contact-action-copy"><strong><span class="inline-language" data-lang="en">Save contact</span><span class="inline-language" data-lang="es">Guardar contacto</span></strong><small><span class="inline-language" data-lang="en">Add Enrique to contacts</span><span class="inline-language" data-lang="es">Agregar a Enrique a contactos</span></small></span></a>
        </div>
        <div class="es-contact-details">
          <a href="mailto:enrique_escamilla@icloud.com"><strong>enrique_escamilla@icloud.com</strong></a>
          <a href="tel:+524423968131"><strong>+52 442 396 8131</strong></a>
          <span>Querétaro, Mexico</span>
        </div>
      </div>
      <aside class="es-contact-side" aria-label="Verified identity and QR contact transfer">
        <div class="es-contact-identity">
          <div class="es-contact-monogram" aria-hidden="true">EE</div>
          <div><strong>Enrique Escamilla</strong><span><span class="inline-language" data-lang="en">Data Center Infrastructure Engineer · Systems that hold under pressure.</span><span class="inline-language" data-lang="es">Ingeniero de Infraestructura de Data Center · Sistemas que responden bajo presión.</span></span></div>
        </div>
        <div class="es-linkedin-badge-shell">
          <div class="es-linkedin-badge-label"><span><span class="inline-language" data-lang="en">Official LinkedIn identity</span><span class="inline-language" data-lang="es">Identidad oficial en LinkedIn</span></span></div>
          <div class="es-linkedin-badge-frame">
            <div class="badge-base LI-profile-badge" data-locale="en_US" data-size="medium" data-theme="dark" data-type="VERTICAL" data-vanity="e-escamilla" data-version="v1"><a class="badge-base__link LI-simple-link" href="https://www.linkedin.com/in/e-escamilla?trk=contact-info">Enrique Escamilla</a></div>
          </div>
        </div>
        <p class="es-contact-transfer"><span class="inline-language" data-lang="en">Move this contact to another device</span><span class="inline-language" data-lang="es">Lleva este contacto a otro dispositivo</span></p>
        <div class="es-qr-tabs" role="tablist" aria-label="Contact QR codes">
          <button type="button" role="tab" aria-selected="true" data-qr="wa">WhatsApp</button>
          <button type="button" role="tab" aria-selected="false" data-qr="vcard">vCard</button>
          <button type="button" role="tab" aria-selected="false" data-qr="linkedin">LinkedIn</button>
        </div>
        <div class="es-qr-stage">
          <img loading="lazy" decoding="async" data-qr-image alt="WhatsApp QR code" src="assets/asset-019-4b0fa35256.png">
          <div class="es-qr-copy"><strong data-qr-title>WhatsApp</strong><span data-qr-help><span class="inline-language" data-lang="en">Scan from another device or tap below.</span><span class="inline-language" data-lang="es">Escanea desde otro dispositivo o toca abajo.</span></span><br><a data-qr-action href="https://wa.me/524423968131" target="_blank" rel="noreferrer"><span class="inline-language" data-lang="en">Open WhatsApp</span><span class="inline-language" data-lang="es">Abrir WhatsApp</span></a></div>
        </div>
      </aside>
    </div>
  </section>
</div>

})();
</script>

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#06090e">
<meta name="description" content="Enrique Escamilla — Data Center Infrastructure Engineer. An evidence-led engineering mission log.">
<meta name="portfolio-build" content="PORTFOLIO-SINGLE-SCREEN-LOCKED-2026-08-06">

<title>Engineering Mission Log — Enrique Escamilla</title>
<style>
:root{--bg:#06090e;--bg2:#0b1018;--panel:rgba(14,20,30,.72);--panel2:#111822;--text:#f6f8fb;--muted:#9da9b9;--line:rgba(255,255,255,.13);--blue:#58b4f5;--cyan:#a7e4ff;--green:#86e8ba;--amber:#ffd47b;--shadow:0 30px 100px rgba(0,0,0,.48);--r:28px;--ease:cubic-bezier(.2,.8,.2,1)}
html[data-theme="light"]{--bg:#eef3f8;--bg2:#f7f9fc;--panel:rgba(255,255,255,.75);--panel2:#fff;--text:#08111f;--muted:#667085;--line:rgba(10,20,35,.13);--shadow:0 30px 90px rgba(38,64,90,.16)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}body{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.hidden{display:none!important}
body.paused *,body.paused *:before,body.paused *:after{animation-play-state:paused!important;transition-duration:.001ms!important}
.noise{position:fixed;inset:0;pointer-events:none;z-index:300;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.progress{position:fixed;left:0;top:0;height:2px;width:0;z-index:310;background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 16px var(--blue)}
.topbar{position:fixed;z-index:220;left:50%;top:12px;transform:translateX(-50%);width:min(1180px,calc(100% - 22px));height:58px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--bg2) 76%,transparent);backdrop-filter:blur(24px) saturate(140%);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 8px 7px 17px;box-shadow:0 18px 60px rgba(0,0,0,.15)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}.mark{width:34px;height:34px;border:1px solid var(--line);border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(88,180,245,.13));font-size:11px;font-weight:800;color:var(--cyan)}.brand-copy{min-width:0}.brand-copy strong{display:block;font-size:13px;letter-spacing:-.02em;white-space:nowrap}.brand-copy span{display:block;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.actions{display:flex;align-items:center;gap:6px}.btn{border:1px solid var(--line);background:rgba(255,255,255,.045);min-height:38px;border-radius:999px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:700;cursor:pointer;transition:.22s var(--ease)}.btn:hover{transform:translateY(-1px);border-color:rgba(88,180,245,.5);background:rgba(88,180,245,.1)}.btn.icon{width:38px;padding:0}.btn.primary{background:var(--text);color:var(--bg);border-color:transparent}.btn.primary:hover{background:var(--cyan);color:#05111c}.btn svg{width:16px;height:16px}
.rail{position:fixed;z-index:210;right:18px;top:50%;transform:translateY(-50%);display:grid;gap:9px}.dot{width:9px;height:9px;border-radius:50%;border:1px solid color-mix(in srgb,var(--text) 45%,transparent);background:transparent;cursor:pointer;transition:.25s var(--ease);padding:0}.dot.active{background:var(--blue);border-color:var(--blue);box-shadow:0 0 14px var(--blue);transform:scale(1.25)}
.deck{height:100%;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scroll-behavior:smooth;overscroll-behavior-y:contain}.scene{position:relative;min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;display:grid;align-items:center;padding:92px max(48px,7vw) 44px;background:var(--bg)}.scene.alt{background:var(--bg2)}.scene:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,78%) var(--gy,18%),rgba(88,180,245,.13),transparent 30rem),radial-gradient(circle at 10% 90%,rgba(88,180,245,.06),transparent 24rem)}
.wrap{position:relative;z-index:2;width:min(1320px,100%);margin:auto}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.19em;font-weight:800;color:var(--cyan)}.chapter{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}.headline{margin:0;font-size:clamp(44px,7vw,105px);line-height:.9;letter-spacing:-.075em;font-weight:640}.headline.small{font-size:clamp(38px,5.5vw,78px)}.lede{max-width:710px;margin:24px 0 0;color:var(--muted);font-size:clamp(16px,1.7vw,23px);line-height:1.55}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}.tag{border:1px solid var(--line);border-radius:999px;padding:8px 11px;background:rgba(255,255,255,.035);font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted)}
.media{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);background:#05080d;box-shadow:var(--shadow)}.media img,.media video{display:block;width:100%;height:100%;object-fit:cover}.media video{background:#020306}.media.contain img,.media.contain video{object-fit:contain}.media:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(2,4,8,.35),transparent 50%)}.caption{position:absolute;z-index:4;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;align-items:end;gap:20px;color:white;text-shadow:0 2px 20px rgba(0,0,0,.7)}.caption p{margin:0;max-width:700px;font-size:13px;line-height:1.45}.privacy{flex:none;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:7px 9px;background:rgba(2,5,10,.55);backdrop-filter:blur(12px);font-size:9px;text-transform:uppercase;letter-spacing:.12em}
.grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,76px);align-items:center}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stack{display:grid;gap:14px}.glass{border:1px solid var(--line);border-radius:24px;background:var(--panel);backdrop-filter:blur(22px) saturate(130%);box-shadow:inset 0 1px rgba(255,255,255,.04);padding:22px}.glass h3{margin:0 0 8px;font-size:22px;letter-spacing:-.035em}.glass p{margin:0;color:var(--muted);line-height:1.55;font-size:14px}
.reveal{opacity:0;transform:translateY(32px);filter:blur(8px);transition:.8s var(--ease)}.scene.active .reveal{opacity:1;transform:none;filter:none}.scene.active .reveal.d1{transition-delay:.08s}.scene.active .reveal.d2{transition-delay:.16s}.scene.active .reveal.d3{transition-delay:.24s}
/* access */
.access{padding:0;background:#03060a}.access .bgvideo{position:absolute;inset:0}.access .bgvideo video{width:100%;height:100%;object-fit:cover;opacity:.72;filter:saturate(.7) contrast(1.08)}.access .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,3,6,.91),rgba(1,3,6,.34) 60%,rgba(1,3,6,.65)),linear-gradient(to top,rgba(1,3,6,.92),transparent 55%)}.access-content{position:relative;z-index:3;width:min(1250px,calc(100% - 48px));margin:auto;padding-top:90px}.access h1{margin:12px 0 0;font-size:clamp(58px,10vw,150px);line-height:.82;letter-spacing:-.09em;font-weight:760;max-width:1050px}.access .sub{font-size:clamp(18px,2vw,28px);color:rgba(255,255,255,.75);max-width:700px;line-height:1.45;margin:28px 0 0}.access-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}.access-meta{position:absolute;left:max(24px,6vw);right:max(24px,6vw);bottom:28px;z-index:3;display:flex;justify-content:space-between;color:rgba(255,255,255,.48);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
/* identity */
.identity{--gx:30%;--gy:20%}.identity-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:32px}.portrait-stage{height:min(78vh,820px);position:relative;display:grid;place-items:end center}.portrait-stage:before{content:"";position:absolute;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(88,180,245,.28),transparent 66%);filter:blur(6px)}.portrait-stage img{position:relative;z-index:2;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 28px 44px rgba(0,0,0,.4))}.role-lockup{font-size:clamp(18px,2vw,27px);font-weight:550;line-height:1.3;margin-top:20px}.contact-mini{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;color:var(--muted);font-size:13px}
/* foundation */
.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:46px}.milestone{position:relative;min-height:230px;padding:24px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.016));display:flex;flex-direction:column;justify-content:space-between}.milestone:before{content:"";position:absolute;top:28px;left:-13px;width:14px;height:1px;background:var(--blue)}.milestone:first-child:before{display:none}.milestone .year{color:var(--cyan);font-size:12px;letter-spacing:.13em}.milestone h3{margin:0;font-size:22px;letter-spacing:-.035em}.milestone p{margin:7px 0 0;color:var(--muted);font-size:13px;line-height:1.45}.languages{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
/* systems */
.systems-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;margin-top:34px}.systems-grid .media{min-height:52vh}.sketch-card{position:relative;min-height:52vh;background:linear-gradient(145deg,#f5f5f2,#ddd);border-radius:var(--r);overflow:hidden}.sketch-card img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.system-chain{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:calc(100% - 36px);display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.system-chain span{padding:10px 6px;border-radius:10px;text-align:center;background:rgba(3,7,12,.76);border:1px solid rgba(255,255,255,.15);color:#eaf7ff;font-size:9px;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(10px)}
/* plan */
.plan-grid{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:14px;margin-top:34px}.plan-grid .media{height:58vh}.plan-grid .media:nth-child(2){transform:translateY(-16px)}
/* logistics */
.logistics .media{height:58vh}.phase-number{font-size:11px;color:var(--cyan);letter-spacing:.16em;margin-bottom:8px}.phase-title{font-size:22px;letter-spacing:-.04em;margin:0 0 8px}.phase-copy{font-size:13px;line-height:1.5;color:var(--muted);margin:0}.phase-footer{padding:18px 4px 0}
/* trace */
.trace-grid{display:grid;grid-template-columns:1.6fr .8fr;gap:16px;margin-top:32px}.trace-grid>.media{height:63vh}.trace-side{display:grid;grid-template-rows:1fr 1fr;gap:16px}.trace-side .media{min-height:0}.quote-strip{margin-top:18px;font-size:clamp(22px,3vw,42px);letter-spacing:-.045em;font-weight:560}
/* before after */
.compare{position:relative;height:min(68vh,760px);border-radius:30px;border:1px solid var(--line);overflow:hidden;background:#05080d;box-shadow:var(--shadow);margin-top:34px;--pos:50%}.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.compare .after{clip-path:inset(0 0 0 var(--pos))}.compare .line{position:absolute;z-index:5;top:0;bottom:0;left:var(--pos);width:2px;background:white;box-shadow:0 0 20px rgba(0,0,0,.5)}.compare .handle{position:absolute;z-index:6;left:var(--pos);top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(3,7,12,.62);backdrop-filter:blur(16px);display:grid;place-items:center;color:white;font-size:20px}.compare input{position:absolute;inset:0;z-index:8;width:100%;height:100%;opacity:0;cursor:ew-resize}.compare-label{position:absolute;z-index:6;top:18px;padding:8px 11px;border-radius:999px;background:rgba(2,5,10,.6);color:white;border:1px solid rgba(255,255,255,.22);font-size:10px;text-transform:uppercase;letter-spacing:.14em}.compare-label.before{left:18px}.compare-label.after{right:18px}
/* power */
.power-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:16px;margin-top:30px}.power-grid>.media{height:64vh}.detail-grid{display:grid;grid-template-rows:repeat(3,1fr);gap:12px}.detail-grid .media{min-height:0}.ab-path{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:22px}.ab-path .bank{border:1px solid var(--line);border-radius:18px;padding:17px;background:var(--panel);text-align:center}.ab-path .bank strong{display:block;font-size:26px}.ab-path .bank span{color:var(--muted);font-size:11px}.ab-path .arrow{color:var(--blue);font-size:24px}
/* fiber */
.fiber-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-top:30px}.fiber-grid>.media{height:64vh}.fiber-side{display:grid;grid-template-rows:1fr 1fr;gap:16px}.video-badge{position:absolute;z-index:5;top:14px;left:14px;border:1px solid rgba(255,255,255,.26);background:rgba(2,5,10,.55);backdrop-filter:blur(12px);border-radius:999px;padding:7px 10px;color:white;font-size:9px;letter-spacing:.13em;text-transform:uppercase}
/* commissioning */
.verify-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}.verify-grid .media{height:54vh}.checklist{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}.check{border:1px solid var(--line);border-radius:18px;padding:18px;background:var(--panel)}.check b{display:block;color:var(--green);font-size:18px;margin-bottom:8px}.check span{color:var(--muted);font-size:12px}
/* digital twin */
.twin-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:16px;margin-top:28px}.twin-grid>.media{height:63vh}.twin-side{display:grid;grid-template-rows:1fr 1fr;gap:16px}.r-and-d{display:inline-flex;margin-top:20px;align-items:center;gap:8px;border:1px solid rgba(88,180,245,.35);background:rgba(88,180,245,.08);border-radius:999px;padding:9px 12px;color:var(--cyan);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
/* outcome */
.outcome-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:16px;margin-top:30px}.outcome-grid .hero-result{height:64vh}.outcome-grid .team{height:64vh}.outcome-quote{position:absolute;z-index:5;left:30px;right:30px;bottom:28px;color:white;font-size:clamp(24px,3.2vw,48px);font-weight:590;line-height:1.05;letter-spacing:-.045em;text-shadow:0 3px 30px rgba(0,0,0,.7)}
/* contact */
.contact-scene{background:linear-gradient(145deg,#070b12,#0d1520)}.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}.contact-portrait{height:74vh}.contact-portrait img{object-position:center 20%}.contact-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.contact-card{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.contact-line{border:1px solid var(--line);border-radius:16px;padding:15px;background:var(--panel)}.contact-line span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}.contact-line strong{font-size:13px}.qr{display:flex;align-items:center;gap:14px;margin-top:18px}.qr img{width:92px;height:92px;border-radius:12px;background:white;padding:7px}.qr p{color:var(--muted);font-size:12px;line-height:1.45;max-width:250px}
/* recruiter modal */
.modal{position:fixed;inset:0;z-index:400;background:rgba(2,5,10,.72);backdrop-filter:blur(24px);display:none;place-items:center;padding:18px}.modal.open{display:grid}.modal-panel{width:min(1000px,100%);max-height:90vh;overflow:auto;border:1px solid var(--line);border-radius:30px;background:var(--bg2);box-shadow:var(--shadow);padding:26px}.modal-head{display:flex;justify-content:space-between;gap:20px;align-items:start}.modal-head h2{margin:6px 0 0;font-size:clamp(32px,5vw,62px);line-height:.95;letter-spacing:-.06em}.recruit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.recruit-card{border:1px solid var(--line);border-radius:20px;padding:20px;background:var(--panel);cursor:pointer;transition:.25s var(--ease)}.recruit-card:hover{transform:translateY(-3px);border-color:rgba(88,180,245,.45)}.recruit-card b{display:block;color:var(--cyan);font-size:11px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:10px}.recruit-card h3{margin:0 0 8px;font-size:20px;letter-spacing:-.035em}.recruit-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.scene-count{position:absolute;z-index:5;left:max(22px,3vw);bottom:22px;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
@media(max-width:980px){.brand-copy span{max-width:150px}.actions .optional{display:none}.rail{right:9px}.scene{padding-inline:28px}.grid2,.identity-grid,.contact-grid{grid-template-columns:1fr}.identity-grid{grid-template-rows:auto 44vh}.portrait-stage{height:44vh}.timeline{grid-template-columns:repeat(2,1fr)}.systems-grid,.plan-grid,.trace-grid,.power-grid,.fiber-grid,.twin-grid,.outcome-grid{grid-template-columns:1fr}.systems-grid .media,.sketch-card,.trace-grid>.media,.power-grid>.media,.fiber-grid>.media,.twin-grid>.media,.outcome-grid .hero-result,.outcome-grid .team{height:43vh;min-height:0}.plan-grid{grid-template-columns:1fr 1fr}.plan-grid .media{height:38vh}.plan-grid .media:nth-child(2){transform:none;grid-column:1/-1;grid-row:1}.trace-side,.detail-grid,.fiber-side,.twin-side{grid-template-columns:1fr 1fr;grid-template-rows:none}.compare{height:55vh}.verify-grid .media{height:42vh}.contact-portrait{height:48vh}.recruit-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.topbar{height:52px;top:7px}.brand-copy span,.brand-copy strong{display:none}.mark{width:32px;height:32px}.actions .btn:not(.icon):not(.primary){display:none}.actions .btn.primary{padding:0 11px}.scene{padding:74px 16px 38px}.headline{font-size:13.2vw}.headline.small{font-size:11vw}.lede{font-size:15px;margin-top:18px}.rail{display:none}.access-content{width:calc(100% - 32px)}.access h1{font-size:18vw}.access .sub{font-size:16px}.access-meta{font-size:8px}.identity-grid{grid-template-rows:auto 41vh}.portrait-stage{height:41vh}.timeline{grid-template-columns:1fr;gap:8px;margin-top:24px}.milestone{min-height:130px}.milestone:before{display:none}.systems-grid{grid-template-columns:1fr}.systems-grid .media,.sketch-card{height:36vh;min-height:0}.system-chain{grid-template-columns:repeat(3,1fr)}.plan-grid{grid-template-columns:1fr}.plan-grid .media,.plan-grid .media:nth-child(2){grid-column:auto;grid-row:auto;height:27vh}.grid3{grid-template-columns:1fr}.logistics .media{height:33vh}.trace-side,.detail-grid,.fiber-side,.twin-side{grid-template-columns:1fr}.trace-side .media,.detail-grid .media,.fiber-side .media,.twin-side .media{height:25vh}.compare{height:52vh}.power-grid>.media,.fiber-grid>.media,.twin-grid>.media{height:45vh}.verify-grid{grid-template-columns:1fr}.verify-grid .media{height:31vh}.checklist{grid-template-columns:1fr 1fr}.outcome-grid .hero-result{height:41vh}.outcome-grid .team{height:34vh}.contact-portrait{height:38vh}.contact-card{grid-template-columns:1fr}.qr img{width:78px;height:78px}.recruit-grid{grid-template-columns:1fr}.modal-panel{padding:20px}.caption p{font-size:11px}.privacy{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{body{overflow:visible;background:white;color:#111}.topbar,.rail,.progress,.noise,.modal{display:none!important}.deck{height:auto;overflow:visible}.scene{min-height:100vh;page-break-after:always;scroll-snap-align:none;color:#111;background:white!important}.media{box-shadow:none}.headline,.lede,.glass p,.phase-copy{color:#111}.tag,.glass,.contact-line{border-color:#bbb;background:white}.caption{color:white}.scene:before{display:none}}

/* Locked two-tab system */
.site-tabs{display:flex;align-items:center;gap:4px;min-width:0;border:1px solid var(--line);border-radius:999px;padding:3px;background:rgba(255,255,255,.035)}
.site-tab{height:32px;padding:0 13px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.05em;transition:.22s var(--ease)}
.site-tab:hover{color:var(--text);background:rgba(88,180,245,.09)}
.site-tab.active{background:var(--text);color:var(--bg);box-shadow:0 8px 24px rgba(0,0,0,.16)}
.site-tab .short{display:none}
@media(max-width:980px){.topbar{padding-left:8px}.brand-copy{display:none}.site-tab{padding-inline:11px}}
@media(max-width:680px){.topbar{width:calc(100% - 12px);gap:5px}.brand{gap:0}.site-tabs{gap:2px;padding:2px}.site-tab{height:30px;padding-inline:9px;font-size:9px}.site-tab .long{display:none}.site-tab .short{display:inline}.actions{gap:3px}.actions .btn.primary{display:none}.actions .btn.icon{width:32px;min-height:32px}.actions #motionBtn{display:none}}
@media(max-width:390px){.brand{display:none}.site-tab{padding-inline:10px}}

</style>
<style id="escloud-visionos-overrides">
/* ===== ESCLOUD VISIONOS IMPLEMENTATION OVERRIDES ===== */
:root{
  --es-safe-top:env(safe-area-inset-top,0px);
  --es-safe-right:env(safe-area-inset-right,0px);
  --es-safe-bottom:env(safe-area-inset-bottom,0px);
  --es-safe-left:env(safe-area-inset-left,0px);
  --es-glass:color-mix(in srgb,var(--surface,#0b1420) 66%,transparent);
  --es-glass-strong:color-mix(in srgb,var(--surface,#0b1420) 82%,transparent);
  --es-glass-line:color-mix(in srgb,currentColor 18%,transparent);
  --es-glass-shadow:0 22px 70px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.12);
  --es-ease:cubic-bezier(.22,.78,.2,1);
}
html,body,button,input,textarea,select{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif!important;
}
html{color-scheme:dark light}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid color-mix(in srgb,var(--accent,var(--blue,#58b4f5)) 82%,white);outline-offset:3px}
.escloud-stencil{display:grid;place-items:center;color:var(--accent-2,var(--cyan,#a7e4ff));overflow:hidden}
.escloud-stencil svg{width:100%;height:100%;display:block}
.persistent-contact{
  position:fixed;z-index:290;right:calc(14px + var(--es-safe-right));bottom:calc(14px + var(--es-safe-bottom));
  min-width:132px;min-height:52px;padding:0 22px;border-radius:999px;border:1px solid rgba(255,255,255,.22);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
  font-weight:780;letter-spacing:-.015em;color:#06111b;background:rgba(244,248,252,.94);
  box-shadow:0 18px 55px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.95);
  backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);
  transition:opacity .22s var(--es-ease),transform .22s var(--es-ease),filter .22s var(--es-ease),background .22s var(--es-ease);
}
.persistent-contact::after{content:"↗";font-size:16px}
html[data-theme="light"] .persistent-contact{color:#f7fbff;background:rgba(5,19,31,.92);border-color:rgba(5,19,31,.3)}
body.is-scrolling .persistent-contact{opacity:.42;filter:blur(.45px);transform:translateY(3px) scale(.965)}
@media(prefers-reduced-motion:reduce){.persistent-contact{transition:none!important}}
@media print{.persistent-contact{display:none!important}}

html,body{overflow:hidden!important}
.topbar{
  grid-template-areas:none!important;align-items:center!important;
  top:calc(10px + var(--es-safe-top))!important;left:50%!important;transform:translateX(-50%)!important;
  width:max-content!important;max-width:calc(100vw - 18px - var(--es-safe-left) - var(--es-safe-right))!important;
  height:58px!important;min-height:58px!important;padding:7px 8px!important;border-radius:27px!important;
  background:color-mix(in srgb,var(--bg2) 64%,transparent)!important;box-shadow:var(--es-glass-shadow)!important;
  backdrop-filter:blur(30px) saturate(165%)!important;-webkit-backdrop-filter:blur(30px) saturate(165%)!important;
  transition:opacity .28s var(--es-ease),transform .32s var(--es-ease),background .28s var(--es-ease)!important;
}
.topbar.shell-minimized{opacity:.88;transform:translateX(-50%) scale(.94)!important;background:color-mix(in srgb,var(--bg2) 52%,transparent)!important}
.topbar.shell-minimized .brand-copy,.topbar.shell-minimized .site-tab .long{display:none!important}
.topbar>*{grid-area:auto!important}.mark{width:42px!important;height:42px!important;border-radius:15px!important;padding:6px!important;background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(88,180,245,.09))!important}
.brand-copy span{display:none!important}
.site-tabs{height:44px;display:flex;align-items:center;padding:4px;border:1px solid var(--line);border-radius:19px;background:rgba(0,0,0,.1)}
.site-tab{height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;border-radius:15px;font-size:12px;font-weight:750;color:var(--muted)}
.site-tab.active{background:var(--text);color:var(--bg)}
.site-tab .short{display:none}
.actions{gap:5px!important}.actions .optional,.actions .primary{display:none!important}.actions .btn{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;padding:0!important;border-radius:15px!important}
.deck{height:100%!important;scroll-snap-type:y proximity!important;scroll-behavior:smooth!important;padding-bottom:0!important}
.scene{min-height:100svh!important;min-height:100dvh!important;height:auto!important;overflow:visible!important;padding:calc(94px + var(--es-safe-top)) max(20px,5vw) calc(86px + var(--es-safe-bottom))!important;scroll-snap-stop:normal!important;isolation:isolate}
.scene:before{z-index:-2!important}.scene:after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(circle at 80% 18%,color-mix(in srgb,var(--blue) 16%,transparent),transparent 32rem),linear-gradient(to bottom,transparent 55%,color-mix(in srgb,var(--bg) 78%,transparent));opacity:.9}
.scene-removed{display:none!important}
.scene-count,.access-meta{display:none!important}
.reveal{opacity:.84!important;transform:translateY(10px)!important;filter:blur(1.2px)!important;transition:opacity .55s var(--ease),transform .65s var(--ease),filter .55s var(--ease)!important}
.scene.is-current .reveal{opacity:1!important;transform:none!important;filter:none!important}
.access{padding:0!important;min-height:100svh!important;min-height:100dvh!important;overflow:hidden!important}
.access-content{padding:calc(112px + var(--es-safe-top)) 0 calc(90px + var(--es-safe-bottom))!important}
.access h1{font-size:clamp(54px,14vw,138px)!important;line-height:.86!important;letter-spacing:-.085em!important;max-width:900px!important;text-wrap:balance}
.access .sub{max-width:670px!important;font-size:clamp(16px,4.5vw,24px)!important}
.access-actions{margin-top:28px!important}.access-actions .btn:not(.primary){display:none!important}
.media{background:color-mix(in srgb,var(--bg) 85%,black)!important;box-shadow:0 30px 100px rgba(0,0,0,.34)!important}
.media img,.media video{object-position:center!important}
.combined-fiber{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.combined-fiber .fiber-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}.combined-fiber .fiber-heading h3{font-size:clamp(28px,5vw,54px);margin:0;letter-spacing:-.055em}.combined-fiber .fiber-heading p{max-width:460px;margin:0;color:var(--muted);line-height:1.5}
.closing-evidence{margin-top:28px}.closing-evidence .outcome-grid{margin-top:0!important}
.rail{left:50%!important;right:auto!important;top:auto!important;bottom:calc(16px + var(--es-safe-bottom))!important;transform:translateX(-50%)!important;display:flex!important;gap:8px!important;padding:9px 12px!important;border:1px solid var(--line)!important;border-radius:999px!important;background:color-mix(in srgb,var(--bg2) 62%,transparent)!important;backdrop-filter:blur(24px) saturate(150%)!important;box-shadow:var(--es-glass-shadow)!important}
.rail .dot{width:7px!important;height:7px!important}.rail .dot.active{transform:scale(1.4)!important}
.progress{top:auto!important;bottom:0!important;height:2px!important}
#contact{padding-bottom:calc(112px + var(--es-safe-bottom))!important}
@media(max-width:760px){
  .topbar{width:calc(100vw - 18px - var(--es-safe-left) - var(--es-safe-right))!important;display:grid!important;grid-template-columns:auto minmax(118px,1fr) auto!important;grid-template-rows:1fr!important;height:56px!important;min-height:56px!important;gap:6px!important}
  .brand-copy,.site-tab .long{display:none!important}.site-tab .short{display:inline!important}
  .site-tabs{justify-self:stretch;display:grid;grid-template-columns:1fr 1fr}.site-tab{padding:0 8px!important}
  .actions #motionBtn{display:none!important}
  .scene{padding-left:20px!important;padding-right:20px!important}
  .headline,.headline.small{font-size:clamp(42px,12vw,68px)!important;line-height:.94!important;letter-spacing:-.065em!important;text-wrap:balance}
  .lede{font-size:17px!important}
  .grid2,.grid3,.identity-grid,.systems-grid,.power-grid,.fiber-grid,.outcome-grid,.contact-grid{grid-template-columns:1fr!important}
  .timeline{grid-template-columns:1fr!important}
  .scene .media{border-radius:24px!important}
  #integration .media,#plan .media,#traceability .media,#power>.wrap>.power-grid>.media,#commissioning .media,#digital-twin .media{
    width:100vw!important;margin-left:-20px!important;margin-right:-20px!important;border-left:0!important;border-right:0!important;border-radius:0!important;
  }
  #integration .media img,#plan .media img,#traceability .media img,#power .media img,#commissioning .media img,#digital-twin .media img{object-fit:contain!important;background:color-mix(in srgb,var(--bg) 88%,black)!important}
  .combined-fiber .fiber-heading{display:block}.combined-fiber .fiber-heading p{margin-top:10px}
  .contact-grid{gap:24px!important}.contact-portrait{max-height:55svh!important}
}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;filter:none!important}}
</style>

/* Neutralize legacy edge-to-edge media rules inside compact single-screen grids. */
#traceability .trace-grid .media,#power>.wrap>.power-grid>.media,#power .detail-grid .media,#fiber .fiber-grid .media,#commissioning .verify-grid .media,#digital-twin .twin-grid .media,#outcome .outcome-grid .media{width:100%!important;max-width:100%!important;min-width:0!important;margin-left:0!important;margin-right:0!important;border-left:1px solid var(--line)!important;border-right:1px solid var(--line)!important;border-radius:18px!important}
/* Prevent intrinsic media widths from forcing mobile scene grids outside the viewport. */
#traceability .trace-grid{grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr)!important}
#power .power-grid,#fiber .fiber-grid,#digital-twin .twin-grid,#outcome .outcome-grid{grid-template-columns:minmax(0,1.38fr) minmax(0,.62fr)!important}
#outcome .outcome-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)!important}
#commissioning .verify-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#traceability .trace-grid>*,#power .power-grid>*,#fiber .fiber-grid>*,#digital-twin .twin-grid>*,#outcome .outcome-grid>*,#commissioning .verify-grid>*{min-width:0!important;max-width:100%!important;width:auto!important}
#traceability .trace-side,#power .detail-grid,#fiber .fiber-side,#digital-twin .twin-side{min-width:0!important;max-width:100%!important;overflow:hidden!important}
#contact .release-end-copy,#contact .release-end-copy *{max-width:100%;box-sizing:border-box}
#contact .release-end-actions{max-width:100%;overflow:visible}
.scene:not(.scene-removed) img,.scene:not(.scene-removed) video{max-width:100%}
</style></head>
<body>
<div class="noise"></div><div class="progress" id="progress"></div>
<header class="topbar">
  <a class="brand" href="#access" data-jump="0"><span class="mark">EE</span><span class="brand-copy"><strong>Enrique Escamilla</strong><span id="sceneName">Engineering Mission Log</span></span></a>

<nav class="site-tabs" aria-label="Portfolio views">
    <a class="site-tab" href="index.html#cv">CV</a>
    <a class="site-tab active" href="portfolio.html" aria-current="page">
      <span class="long" data-en="Professional Portfolio" data-es="Portafolio Profesional">Professional Portfolio</span>
      <span class="short" data-en="Portfolio" data-es="Portafolio">Portfolio</span>
    </a>
  </nav>
  <div class="actions">
    <button class="btn optional" id="recruiterBtn" type="button"><span data-en="3-Minute View" data-es="Vista de 3 minutos">3-Minute View</span></button>
    <button class="btn icon" id="langBtn" type="button" aria-label="Switch language">ES</button>
    <button class="btn icon" id="motionBtn" type="button" aria-label="Pause motion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M8 5v14M16 5v14"/></svg></button>
    <button class="btn icon" id="themeBtn" type="button" aria-label="Toggle theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3a9 9 0 1 0 9 9c0-.4 0-.8-.1-1.2A7 7 0 0 1 12 3Z"/></svg></button>
    <a class="btn primary" href="#contact" data-jump="13"><span data-en="Contact" data-es="Contacto">Contact</span></a>
  </div>
</header>
<nav class="rail" id="rail" aria-label="Scene navigation"></nav>
<main class="deck" id="deck">
<section class="scene access active" id="access" data-title-en="Access" data-title-es="Acceso">
  <div class="bgvideo"><video muted autoplay loop playsinline preload="metadata" src="assets/asset-008-93b81acec3.mp4"></video></div><div class="veil"></div>
  <div class="access-content reveal">
    <div class="eyebrow" data-en="Mission-critical infrastructure" data-es="Infraestructura de misión crítica">Mission-critical infrastructure</div>
    <h1>ENGINEERING<br>MISSION LOG</h1>
    <p class="sub" data-en="Every critical system begins with trust. Enter the evidence-led portfolio of Enrique Escamilla." data-es="Todo sistema crítico comienza con confianza. Entra al portafolio basado en evidencia de Enrique Escamilla.">Every critical system begins with trust. Enter the evidence-led portfolio of Enrique Escamilla.</p>
    <div class="access-actions"><button class="btn primary" data-jump="1" type="button"><span data-en="Enter Portfolio" data-es="Entrar al portafolio">Enter Portfolio</span></button><button class="btn" id="recruiterBtn2" type="button"><span data-en="3-Minute Recruiter View" data-es="Vista de reclutador · 3 minutos">3-Minute Recruiter View</span></button><button class="btn" id="skipMotion" type="button"><span data-en="Pause Motion" data-es="Pausar movimiento">Pause Motion</span></button></div>
  </div>
  <div class="access-meta"><span>Enrique Escamilla · 2026</span><span data-en="Scroll · swipe · arrow keys" data-es="Desliza · swipe · flechas">Scroll · swipe · arrow keys</span></div>
  <div class="scene-count">00 / 13</div>
</section>
<section class="scene identity alt" id="identity" data-title-en="Identity" data-title-es="Identidad">
 <div class="wrap identity-grid"><div><div class="chapter reveal">01 · Identity</div><div class="eyebrow reveal d1">Enrique Escamilla</div><h2 class="headline reveal d1" data-en="The engineer behind the system." data-es="El ingeniero detrás del sistema.">The engineer behind the system.</h2><div class="role-lockup reveal d2" data-en="Data Center Infrastructure Engineer · Technical Systems Architect" data-es="Ingeniero de Infraestructura de Centros de Datos · Arquitecto de Sistemas Técnicos">Data Center Infrastructure Engineer · Technical Systems Architect</div><p class="lede reveal d2" data-en="I translate infrastructure designs into organized, validated and production-ready environments—connecting the field, the documentation and the client." data-es="Convierto diseños de infraestructura en entornos organizados, validados y listos para producción, conectando el campo, la documentación y al cliente.">I translate infrastructure designs into organized, validated and production-ready environments—connecting the field, the documentation and the client.</p><div class="tags reveal d3"><span class="tag">Rack Integration</span><span class="tag">Structured Cabling</span><span class="tag">Power Distribution</span><span class="tag">Network Provisioning</span><span class="tag">Technical Memory</span></div><div class="contact-mini reveal d3"><span>Querétaro, MX</span><span>ES · EN · FR · PT</span><span>5+ years in critical infrastructure</span></div></div><div class="portrait-stage reveal d2"><img fetchpriority="high" decoding="async" src="assets/asset-022-e94d463fcd.jpg" alt="Enrique Escamilla in professional attire"></div></div>
 <div class="scene-count">01 / 13</div>
</section>
<section class="scene" id="foundation" data-title-en="Foundation" data-title-es="Formación">
 <div class="wrap"><div class="chapter reveal">02 · Foundation</div><div class="eyebrow reveal d1" data-en="Education · International growth · Critical environments" data-es="Formación · Experiencia internacional · Entornos críticos">Education · International growth · Critical environments</div><h2 class="headline small reveal d1" data-en="Engineering shaped across three countries." data-es="Ingeniería formada en tres países.">Engineering shaped across three countries.</h2><div class="timeline">
  <article class="milestone reveal"><span class="year">United States</span><div><h3>Hoover High School</h3><p data-en="Advanced Technical Diploma · Alabama" data-es="Diploma Técnico Avanzado · Alabama">Advanced Technical Diploma · Alabama</p></div></article>
  <article class="milestone reveal d1"><span class="year">France</span><div><h3>Université de Nantes</h3><p data-en="Diplôme en Ingénierie Informatique · Nantes" data-es="Diplôme en Ingénierie Informatique · Nantes">Diplôme en Ingénierie Informatique · Nantes</p></div></article>
  <article class="milestone reveal d1"><span class="year">Mexico</span><div><h3>Universidad Autónoma de Querétaro</h3><p data-en="Computer Engineering · Querétaro" data-es="Ingeniería en Computación · Querétaro">Computer Engineering · Querétaro</p></div></article>
  <article class="milestone reveal d2"><span class="year">2019—2021</span><div><h3>Aptar Group</h3><p data-en="Infrastructure engineering and cross-functional project coordination." data-es="Ingeniería de infraestructura y coordinación de proyectos multidisciplinarios.">Infrastructure engineering and cross-functional project coordination.</p></div></article>
  <article class="milestone reveal d3"><span class="year">2021—Present</span><div><h3>Telmex Triara</h3><p data-en="Mission-critical data center infrastructure and enterprise deployments." data-es="Infraestructura crítica de centros de datos y despliegues empresariales.">Mission-critical data center infrastructure and enterprise deployments.</p></div></article>
 </div><div class="languages reveal d3"><span class="tag">Spanish · Native</span><span class="tag">English · Fluent</span><span class="tag">French · Conversational</span><span class="tag">Portuguese · Conversational</span></div></div>
 <div class="scene-count">02 / 13</div>
</section>
<section class="scene alt" id="systems" data-title-en="Systems Thinking" data-title-es="Pensamiento de sistemas">
 <div class="wrap"><div class="chapter reveal">03 · Systems Thinking</div><div class="eyebrow reveal d1" data-en="Physical + digital infrastructure" data-es="Infraestructura física + digital">Physical + digital infrastructure</div><h2 class="headline small reveal d1" data-en="I connect every layer of the deployment." data-es="Conecto cada capa del despliegue.">I connect every layer of the deployment.</h2><p class="lede reveal d2" data-en="From topology and rack plans to field execution and operational documentation, every layer belongs to the same system." data-es="Desde la topología y los planos de rack hasta la ejecución en campo y la documentación operativa, cada capa pertenece al mismo sistema.">From topology and rack plans to field execution and operational documentation, every layer belongs to the same system.</p><div class="systems-grid"><figure class="media reveal d2"><img loading="lazy" decoding="async" src="assets/asset-023-17ee3578bc.jpg" alt="Engineering workstation with infrastructure topology"><figcaption class="caption"><p data-en="Topology, power distribution and deployment context reviewed from one engineering workspace." data-es="Topología, distribución eléctrica y contexto de despliegue revisados desde un solo espacio de ingeniería.">Topology, power distribution and deployment context reviewed from one engineering workspace.</p><span class="privacy">Anonymized</span></figcaption></figure><div class="sketch-card reveal d3"><img loading="lazy" decoding="async" src="assets/asset-024-b23a62523d.jpg" alt="Original rack layout sketch"><div class="system-chain"><span>Rack</span><span>Power</span><span>Network</span><span>Fiber</span><span>Docs</span><span>Operations</span></div></div></div></div>
 <div class="scene-count">03 / 13</div>
</section>
<section class="scene" id="plan" data-title-en="Plan Before Touch" data-title-es="Planear antes de tocar">
 <div class="wrap"><div class="chapter reveal">04 · Plan Before Touch</div><div class="eyebrow reveal d1" data-en="Rack elevations · allocation · spatial model" data-es="Elevaciones de rack · asignación · modelo espacial">Rack elevations · allocation · spatial model</div><h2 class="headline small reveal d1" data-en="The plan must survive the field." data-es="El plan debe sobrevivir al campo.">The plan must survive the field.</h2><div class="plan-grid"><figure class="media reveal d2"><img loading="lazy" decoding="async" src="assets/asset-025-55c759afff.jpg" alt="Workstation with rack elevation"><figcaption class="caption"><p data-en="Equipment allocation and rack records prepared before installation." data-es="Asignación de equipos y registros de rack preparados antes de la instalación.">Equipment allocation and rack records prepared before installation.</p><span class="privacy">Anonymized</span></figcaption></figure><figure class="media reveal d2"><video muted loop playsinline preload="metadata" src="assets/asset-010-500ac8d180.mp4"></video><span class="video-badge">Diagram → 3D model</span><figcaption class="caption"><p data-en="The deployment moves from diagram to navigable spatial model." data-es="El despliegue pasa de diagrama a modelo espacial navegable.">The deployment moves from diagram to navigable spatial model.</p></figcaption></figure><figure class="media reveal d3"><img loading="lazy" decoding="async" src="assets/asset-026-953b69a3aa.jpg" alt="Rack record compared with physical equipment"><figcaption class="caption"><p data-en="The approved record is verified against the physical rack—not assumed." data-es="El registro aprobado se valida contra el rack físico, no se da por hecho.">The approved record is verified against the physical rack—not assumed.</p><span class="privacy">Anonymized</span></figcaption></figure></div></div>
 <div class="scene-count">04 / 13</div>
</section>
<section class="scene alt logistics" id="logistics" data-title-en="Receive · Inspect · Position" data-title-es="Recibir · Inspeccionar · Posicionar">
 <div class="wrap"><div class="chapter reveal">05 · Field Operations</div><h2 class="headline small reveal d1" data-en="Infrastructure work begins before the first device is mounted." data-es="El trabajo de infraestructura comienza antes de montar el primer equipo.">Infrastructure work begins before the first device is mounted.</h2><div class="grid3" style="margin-top:30px"><article class="reveal d1"><figure class="media"><img loading="lazy" decoding="async" src="assets/asset-027-6c2709f615.jpg" alt="Protected equipment shipment arriving onsite"></figure><div class="phase-footer"><div class="phase-number">01 · RECEIVE</div><h3 class="phase-title" data-en="Controlled site receiving" data-es="Recepción controlada en sitio">Controlled site receiving</h3><p class="phase-copy" data-en="Secure transportation and arrival coordination are part of engineering delivery." data-es="El transporte seguro y la coordinación de llegada son parte de la entrega de ingeniería.">Secure transportation and arrival coordination are part of engineering delivery.</p></div></article><article class="reveal d2"><figure class="media"><img loading="lazy" decoding="async" src="assets/asset-011-7292b38814.jpg" alt="Team inspecting infrastructure equipment"></figure><div class="phase-footer"><div class="phase-number">02 · INSPECT</div><h3 class="phase-title" data-en="Verify before deployment" data-es="Verificar antes del despliegue">Verify before deployment</h3><p class="phase-copy" data-en="Condition, components and deployment readiness are checked before installation." data-es="Condición, componentes y preparación se verifican antes de instalar.">Condition, components and deployment readiness are checked before installation.</p></div></article><article class="reveal d3"><figure class="media"><img loading="lazy" decoding="async" src="assets/asset-028-49953b1b7b.jpg" alt="Data center room during cabinet positioning"></figure><div class="phase-footer"><div class="phase-number">03 · POSITION</div><h3 class="phase-title" data-en="Align with the room plan" data-es="Alinear con el plano de sala">Align with the room plan</h3><p class="phase-copy" data-en="Cabinets are positioned against access, room layout and deployment sequence." data-es="Los gabinetes se posicionan según acceso, distribución de sala y secuencia de despliegue.">Cabinets are positioned against access, room layout and deployment sequence.</p></div></article></div></div>
 <div class="scene-count">05 / 13</div>
</section>
<section class="scene" id="traceability" data-title-en="Traceability" data-title-es="Trazabilidad">
 <div class="wrap"><div class="chapter reveal">06 · Identification & Traceability</div><div class="eyebrow reveal d1">Operational control</div><h2 class="headline small reveal d1" data-en="A system is not maintainable until it is identifiable." data-es="Un sistema no es mantenible hasta que es identificable.">A system is not maintainable until it is identifiable.</h2><div class="trace-grid"><figure class="media reveal d2"><img loading="lazy" decoding="async" src="assets/asset-029-394fd1262e.jpg" alt="Field labeling and rack documentation station"><figcaption class="caption"><p data-en="Rack, equipment and location identifiers prepared from approved deployment records." data-es="Identificadores de rack, equipos y ubicación preparados desde registros aprobados.">Rack, equipment and location identifiers prepared from approved deployment records.</p><span class="privacy">Anonymized</span></figcaption></figure><div class="trace-side"><figure class="media reveal d2"><img loading="lazy" decoding="async" src="assets/asset-030-8b2f0b024c.jpg" alt="Industrial labeling system"></figure><figure class="media reveal d3"><img loading="lazy" decoding="async" src="assets/asset-031-793034b051.jpg" alt="Field workstation inside data center"><figcaption class="caption"><p data-en="Documentation stays beside the work." data-es="La documentación permanece junto al trabajo.">Documentation stays beside the work.</p><span class="privacy">Anonymized</span></figcaption></figure></div></div><div class="quote-strip reveal d3" data-en="Labeling is not decoration. It is operational control." data-es="El etiquetado no es decoración. Es control operativo.">Labeling is not decoration. It is operational control.</div></div>
 <div class="scene-count">06 / 13</div>
</section>
<section class="scene alt" id="integration" data-title-en="Rack Integration" data-title-es="Integración de rack">
 <div class="wrap"><div class="chapter reveal">07 · Empty Cabinet → Integrated Rack</div><div class="eyebrow reveal d1">Before / After</div><h2 class="headline small reveal d1" data-en="From empty cabinet to service-ready infrastructure." data-es="De gabinete vacío a infraestructura lista para servicio.">From empty cabinet to service-ready infrastructure.</h2><div class="compare reveal d2" id="compare"><img loading="lazy" decoding="async" src="assets/asset-032-c00b8f3cd6.jpg" alt="Empty data center cabinet"><img loading="lazy" decoding="async" class="after" src="assets/asset-012-023cf4c604.jpg" alt="Integrated data center rack"><div class="line"></div><div class="handle">↔</div><span class="compare-label before" data-en="Before · readiness verified" data-es="Antes · preparación validada">Before · readiness verified</span><span class="compare-label after" data-en="After · integrated system" data-es="Después · sistema integrado">After · integrated system</span><input id="compareRange" type="range" min="0" max="100" value="50" aria-label="Compare before and after"></div><div class="tags reveal d3"><span class="tag">Equipment mounting</span><span class="tag">Power paths</span><span class="tag">Fiber</span><span class="tag">Network</span><span class="tag">Serviceability</span></div></div>
 <div class="scene-count">07 / 13</div>
</section>
<section class="scene" id="power" data-title-en="Power Paths" data-title-es="Rutas de energía">
 <div class="wrap"><div class="chapter reveal">08 · Power Paths</div><div class="eyebrow reveal d1">A / B distribution</div><h2 class="headline small reveal d1" data-en="Power must be visible, documented and serviceable." data-es="La energía debe ser visible, documentada y mantenible.">Power must be visible, documented and serviceable.</h2><div class="power-grid"><figure class="media reveal d2"><img loading="lazy" decoding="async" src="assets/asset-033-c1267790c7.jpg" alt="Rear rack view with A and B power distribution"><figcaption class="caption"><p data-en="A/B power distribution organized across the rack with serviceable cable paths." data-es="Distribución A/B organizada en el rack con rutas de cable mantenibles.">A/B power distribution organized across the rack with serviceable cable paths.</p></figcaption></figure><div class="detail-grid"><figure class="media reveal d2"><img loading="lazy" decoding="async" src="assets/asset-034-84eb68ffd7.jpg" alt="Intelligent rack PDU display"></figure><figure class="media reveal d2"><img loading="lazy" decoding="async" src="assets/asset-013-dd0a409804.jpg" alt="Technician verifying rack PDU"></figure><figure class="media reveal d3"><img loading="lazy" decoding="async" src="assets/asset-035-b9d0bb5c91.jpg" alt="Rack power routing detail"></figure></div></div><div class="ab-path reveal d3"><div class="bank"><strong>A</strong><span>Independent power path</span></div><div class="arrow">↔</div><div class="bank"><strong>B</strong><span>Independent power path</span></div></div></div>
 <div class="scene-count">08 / 13</div>
</section>
<section class="scene alt" id="fiber" data-title-en="Fiber & Connectivity" data-title-es="Fibra y conectividad">
 <div class="wrap"><div class="chapter reveal">09 · Fiber & Connectivity</div><div class="eyebrow reveal d1">Route · Label · Test · Validate</div><h2 class="headline small reveal d1" data-en="The physical layer is a complete chain—not a single cable." data-es="La capa física es una cadena completa, no un solo cable.">The physical layer is a complete chain—not a single cable.</h2><div class="fiber-grid"><figure class="media reveal d2"><img loading="lazy" decoding="async" src="assets/asset-005-98e84d483b.jpg" alt="High-density fiber cassette and optical connections"><figcaption class="caption"><p data-en="High-density fiber distributed and identified at the rack." data-es="Fibra de alta densidad distribuida e identificada en el rack.">High-density fiber distributed and identified at the rack.</p></figcaption></figure><div class="fiber-side"><figure class="media reveal d2"><video muted loop playsinline preload="metadata" src="assets/asset-006-a96483a59b.mp4"></video><span class="video-badge">Pathway</span><figcaption class="caption"><p data-en="Routes extend beyond the cabinet." data-es="Las rutas se extienden más allá del gabinete.">Routes extend beyond the cabinet.</p></figcaption></figure><figure class="media reveal d3"><video muted loop playsinline preload="metadata" src="assets/asset-014-05757f0da1.mp4"></video><span class="video-badge">Optical test</span><figcaption class="caption"><p data-en="Links are tested before handover." data-es="Los enlaces se prueban antes de la entrega.">Links are tested before handover.</p></figcaption></figure></div></div><div class="tags reveal d3"><span class="tag">SM / MM Fiber</span><span class="tag">Patch paths</span><span class="tag">Identification</span><span class="tag">Optical validation</span></div></div>
 <div class="scene-count">09 / 13</div>
</section>
<section class="scene" id="commissioning" data-title-en="Commissioning" data-title-es="Comisionamiento">
 <div class="wrap"><div class="chapter reveal">10 · Commissioning</div><div class="eyebrow reveal d1">Installation ≠ completion</div><h2 class="headline small reveal d1" data-en="Verification is completion." data-es="La verificación es la terminación.">Verification is completion.</h2><p class="lede reveal d2" data-en="The physical environment is checked against rack records, equipment placement, connectivity, power paths and final documentation." data-es="El entorno físico se compara con registros de rack, ubicación de equipos, conectividad, energía y documentación final.">The physical environment is checked against rack records, equipment placement, connectivity, power paths and final documentation.</p><div class="verify-grid"><figure class="media reveal d2"><img loading="lazy" decoding="async" src="assets/asset-015-39324b8f0c.jpg" alt="Anonymized rack elevation record"><figcaption class="caption"><p data-en="Approved rack record." data-es="Registro aprobado de rack.">Approved rack record.</p><span class="privacy">Anonymized</span></figcaption></figure><figure class="media reveal d3"><img loading="lazy" decoding="async" src="assets/asset-016-8d980c0994.jpg" alt="Hands-on fiber integration in rack"><figcaption class="caption"><p data-en="Physical execution verified against the documented plan." data-es="Ejecución física validada contra el plan documentado.">Physical execution verified against the documented plan.</p></figcaption></figure></div><div class="checklist reveal d3"><div class="check"><b>✓</b><span data-en="Physical placement" data-es="Ubicación física">Physical placement</span></div><div class="check"><b>✓</b><span data-en="Connectivity paths" data-es="Rutas de conectividad">Connectivity paths</span></div><div class="check"><b>✓</b><span data-en="Power verification" data-es="Validación eléctrica">Power verification</span></div><div class="check"><b>✓</b><span data-en="Technical evidence" data-es="Evidencia técnica">Technical evidence</span></div></div></div>
 <div class="scene-count">10 / 13</div>
</section>
<section class="scene alt" id="digital-twin" data-title-en="Digital Twin" data-title-es="Gemelo digital">
 <div class="wrap"><div class="chapter reveal">11 · Digital Twin & Technical Memory</div><div class="eyebrow reveal d1">Independent engineering R&D · ESCloud</div><h2 class="headline small reveal d1" data-en="The work should remain understandable after the installation team leaves." data-es="El trabajo debe seguir siendo comprensible después de que el equipo de instalación se retire.">The work should remain understandable after the installation team leaves.</h2><div class="twin-grid"><figure class="media contain reveal d2"><video muted loop playsinline preload="metadata" src="assets/asset-008-93b81acec3.mp4"></video><span class="video-badge">3D facility model</span><figcaption class="caption"><p data-en="Physical infrastructure translated into navigable technical memory." data-es="Infraestructura física convertida en memoria técnica navegable.">Physical infrastructure translated into navigable technical memory.</p></figcaption></figure><div class="twin-side"><figure class="media contain reveal d2"><img loading="lazy" decoding="async" src="assets/asset-007-e666b3d4c2.jpg" alt="Detailed 3D data center model"></figure><figure class="media contain reveal d3"><img loading="lazy" decoding="async" src="assets/asset-009-b1f6ce8ac9.jpg" alt="3D infrastructure model"></figure></div></div><div class="r-and-d reveal d3">ESCloud · Offline-first · Modular · Digital twin · Technical memory</div></div>
 <div class="scene-count">11 / 13</div>
</section>
<section class="scene" id="outcome" data-title-en="Outcome & Team" data-title-es="Resultado y equipo">
 <div class="wrap"><div class="chapter reveal">12 · Outcome & Team</div><div class="eyebrow reveal d1">Scale · Coordination · Handover</div><h2 class="headline small reveal d1" data-en="Reliable infrastructure is delivered by teams and sustained by documentation." data-es="La infraestructura confiable se entrega en equipo y se sostiene con documentación.">Reliable infrastructure is delivered by teams and sustained by documentation.</h2><div class="outcome-grid"><figure class="media hero-result reveal d2"><img loading="lazy" decoding="async" src="assets/asset-036-509be5fe13.jpg" alt="Data center infrastructure room"><div class="outcome-quote" data-en="Not one rack. A system." data-es="No es un rack. Es un sistema.">Not one rack. A system.</div></figure><figure class="media team reveal d3"><img loading="lazy" decoding="async" src="assets/asset-037-63a37430d8.jpg" alt="Engineering team inside data center"><figcaption class="caption"><p data-en="Complex deployments depend on coordination, trust and shared accountability." data-es="Los despliegues complejos dependen de coordinación, confianza y responsabilidad compartida.">Complex deployments depend on coordination, trust and shared accountability.</p><span class="privacy">Badges anonymized</span></figcaption></figure></div><div class="tags reveal d3"><span class="tag">Field engineering</span><span class="tag">Project coordination</span><span class="tag">Technical communication</span><span class="tag">Operational handover</span></div></div>
 <div class="scene-count">12 / 13</div>
</section>

<section class="scene contact-scene alt release-end" id="contact" data-title-en="Contact" data-title-es="Contacto">
  <div class="release-end-shell">
    <div class="release-end-hero">
      <div class="release-end-copy">
        <p class="release-end-kicker" data-en="Final · Next mission" data-es="Final · Siguiente misión">Final · Next mission</p>
        <h2 data-en="INFRASTRUCTURE THAT PERFORMS." data-es="INFRAESTRUCTURA QUE RESPONDE.">INFRASTRUCTURE THAT PERFORMS.</h2>
        <p class="release-end-role" data-en="Strategy · Design · Field execution · Operations" data-es="Estrategia · Diseño · Ejecución en campo · Operaciones">Strategy · Design · Field execution · Operations</p>
        <p class="release-end-summary" data-en="A proof-driven portfolio of systems that connect architecture, documentation, deployment and operations into one reliable lifecycle." data-es="Un portafolio basado en evidencia que conecta arquitectura, documentación, despliegue y operaciones en un solo ciclo de vida confiable.">A proof-driven portfolio of systems that connect architecture, documentation, deployment and operations into one reliable lifecycle.</p>
        <div class="release-end-actions">
          <button class="release-end-btn primary" type="button" data-contact-open><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="7" r="3.5"/><path d="M2.5 21v-2.5A5.5 5.5 0 0 1 8 13h2a5.5 5.5 0 0 1 5.5 5.5V21M18 7v6M15 10h6"/></svg><span data-en="Open direct contact" data-es="Abrir contacto directo">Open direct contact</span></button>
          <a class="release-end-btn" href="assets/asset-003-fc6564ae46.pdf" download="Enrique_Escamilla_CV_April_2026.pdf" type="application/pdf" data-cv-download><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2h8l4 4v16H6Z"/><path d="M14 2v5h5M8.5 15h7M8.5 18h5M8.5 12h3"/></svg><span data-en="Download CV" data-es="Descargar CV">Download CV</span></a>
        </div>
      </div>
      <figure class="release-end-portrait">
        <img loading="lazy" decoding="async" src="assets/asset-038-6774ca34dd.jpg" alt="Enrique Escamilla portrait">
        <div class="release-end-contact-dock" aria-label="Direct contact shortcuts">
          <a href="https://wa.me/524423968131" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.5 11.7a8.4 8.4 0 0 1-12.4 7.4L3.5 20.5l1.4-4.4A8.4 8.4 0 1 1 20.5 11.7Z"/><path d="M8.2 7.7c.3-.6.6-.6.9-.6h.5c.2 0 .4.1.5.4l.8 1.9c.1.3.1.5-.1.7l-.6.8c-.2.2-.1.5 0 .7.8 1.5 1.9 2.5 3.5 3.2.3.1.5.1.7-.1l.9-1.1c.2-.2.4-.3.7-.2l2 .9c.3.1.4.3.4.5 0 .4-.2 1.5-.9 2.1-.7.7-1.8 1-3 .7-1.7-.4-3.8-1.4-5.7-3.2-1.6-1.5-2.8-3.5-3.1-4.9-.3-1.2 0-2.3.6-2.9.4-.5.9-.8 1.4-.8Z"/></svg></a>
          <a href="tel:+524423968131" aria-label="Call"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7.4 3.5 10 8l-2 1.8a15.5 15.5 0 0 0 6.2 6.2l1.8-2 4.5 2.6c.4.2.6.7.5 1.1-.5 2-2.3 3.3-4.4 3.1C9.4 20.2 3.8 14.6 3.2 7.4 3 5.3 4.3 3.5 6.3 3c.4-.1.9.1 1.1.5Z"/></svg></a>
          <a href="mailto:enrique_escamilla@icloud.com" aria-label="Email"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m4 7 8 6 8-6"/></svg></a>
          <a href="https://www.linkedin.com/in/e-escamilla?trk=contact-info" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9v11M6 5.5v.1M10.5 20V9h4v1.7c.8-1.2 1.9-2 3.6-2 3 0 3.9 2 3.9 5V20h-4v-5.5c0-1.6-.3-2.6-1.7-2.6-1.5 0-1.8 1.2-1.8 2.8V20Z"/></svg></a>
        </div>
      </figure>
    </div>
    <div class="release-end-featured" aria-label="Featured work"><div class="release-end-work"><img loading="lazy" decoding="async" src="assets/asset-012-023cf4c604.jpg" alt="Data center integration"><span>Data center integration</span></div><div class="release-end-work"><img loading="lazy" decoding="async" src="assets/asset-016-8d980c0994.jpg" alt="Fiber infrastructure"><span>Fiber infrastructure</span></div><div class="release-end-work"><img loading="lazy" decoding="async" src="assets/asset-007-e666b3d4c2.jpg" alt="3D design & planning"><span>3D design & planning</span></div><div class="release-end-work"><img loading="lazy" decoding="async" src="assets/asset-023-17ee3578bc.jpg" alt="Documentation systems"><span>Documentation systems</span></div></div>
    <div class="release-end-lower">
      <div class="release-end-solutions" aria-label="Solutions delivered">
        <div class="release-end-solution"><strong>Data Center</strong><br>Infrastructure</div>
        <div class="release-end-solution"><strong>Structured</strong><br>Cabling</div>
        <div class="release-end-solution"><strong>Power & Cooling</strong><br>Systems</div>
        <div class="release-end-solution"><strong>Systems</strong><br>Operations</div>
        <div class="release-end-solution"><strong>Documentation</strong><br>& SOPs</div>
        <div class="release-end-solution"><strong>Automation</strong><br>& AI Workflows</div>
      </div>
      <div class="release-end-close">
        <p><small data-en="Let’s build what’s next" data-es="Construyamos lo que sigue">Let’s build what’s next</small><strong data-en="Open to high-impact infrastructure work." data-es="Disponible para trabajo de infraestructura de alto impacto.">Open to high-impact infrastructure work.</strong></p>
        <button class="release-end-btn" type="button" data-contact-open><span data-en="Let’s connect" data-es="Conectemos">Let’s connect</span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M14 7l5 5-5 5"/></svg></button>
      </div>
    </div>
  </div>
  <div class="scene-count">13 / 13</div>
</section>

</main>
<div class="modal" id="modal" role="dialog" aria-modal="true" aria-label="Three-minute recruiter view"><div class="modal-panel"><div class="modal-head"><div><div class="eyebrow" data-en="3-minute recruiter view" data-es="Vista de reclutador · 3 minutos">3-minute recruiter view</div><h2 data-en="Six reasons to interview Enrique." data-es="Seis razones para entrevistar a Enrique.">Six reasons to interview Enrique.</h2></div><button class="btn icon" id="closeModal" type="button">×</button></div><div class="recruit-grid"><article class="recruit-card" data-jump="1"><b>01 · Role</b><h3 data-en="Hands-on infrastructure engineer" data-es="Ingeniero de infraestructura práctico">Hands-on infrastructure engineer</h3><p data-en="Five-plus years across critical data center and enterprise environments." data-es="Más de cinco años en centros de datos críticos y entornos empresariales.">Five-plus years across critical data center and enterprise environments.</p></article><article class="recruit-card" data-jump="3"><b>02 · Judgment</b><h3 data-en="Systems-level thinking" data-es="Pensamiento de sistemas">Systems-level thinking</h3><p data-en="Connects physical work, topology, power, documentation and operations." data-es="Conecta trabajo físico, topología, energía, documentación y operación.">Connects physical work, topology, power, documentation and operations.</p></article><article class="recruit-card" data-jump="7"><b>03 · Execution</b><h3 data-en="Evidence from empty rack to integrated system" data-es="Evidencia de rack vacío a sistema integrado">Evidence from empty rack to integrated system</h3><p data-en="Real project media demonstrates delivery, not just listed skills." data-es="Medios reales demuestran entrega, no sólo habilidades enumeradas.">Real project media demonstrates delivery, not just listed skills.</p></article><article class="recruit-card" data-jump="9"><b>04 · Validation</b><h3 data-en="Tests the physical layer" data-es="Prueba la capa física">Tests the physical layer</h3><p data-en="Pathways, fiber integration and optical validation are shown as one chain." data-es="Rutas, integración de fibra y validación óptica se muestran como una sola cadena.">Pathways, fiber integration and optical validation are shown as one chain.</p></article><article class="recruit-card" data-jump="11"><b>05 · Scale</b><h3 data-en="Builds technical memory" data-es="Construye memoria técnica">Builds technical memory</h3><p data-en="Independent ESCloud R&D turns infrastructure into reusable operational knowledge." data-es="La I+D independiente de ESCloud convierte infraestructura en conocimiento operativo reutilizable.">Independent ESCloud R&D turns infrastructure into reusable operational knowledge.</p></article><article class="recruit-card" data-jump="13"><b>06 · Fit</b><h3 data-en="Field capability with client clarity" data-es="Capacidad de campo con claridad para el cliente">Field capability with client clarity</h3><p data-en="A strong fit where execution, coordination and communication must coexist." data-es="Buen encaje donde ejecución, coordinación y comunicación deben coexistir.">A strong fit where execution, coordination and communication must coexist.</p></article></div></div></div>
<script id="canonical-portfolio-foundation-js">
(()=>{
'use strict';
let lang=localStorage.getItem('portfolio-language')||localStorage.getItem('ee-lang')||'en';
let theme=localStorage.getItem('portfolio-theme')||localStorage.getItem('ee-theme')||'dark';
const sceneName=document.getElementById('sceneName');
function localize(){document.documentElement.lang=lang;document.querySelectorAll('[data-en]').forEach(el=>{el.textContent=el.dataset[lang]});const lb=document.getElementById('langBtn');if(lb)lb.textContent=lang==='en'?'ES':'EN';localStorage.setItem('portfolio-language',lang);localStorage.setItem('ee-lang',lang);document.dispatchEvent(new CustomEvent('portfolio:language',{detail:{lang}}))}
document.documentElement.dataset.theme=theme;
document.getElementById('langBtn')?.addEventListener('click',()=>{lang=lang==='en'?'es':'en';localize()});
document.getElementById('themeBtn')?.addEventListener('click',()=>{theme=theme==='dark'?'light':'dark';document.documentElement.dataset.theme=theme;localStorage.setItem('portfolio-theme',theme);localStorage.setItem('ee-theme',theme)});
const cmp=document.getElementById('compare'),range=document.getElementById('compareRange');if(range&&cmp)range.oninput=()=>cmp.style.setProperty('--pos',range.value+'%');
const modal=document.getElementById('modal');function openModal(){modal?.classList.add('open');document.body.style.overflow='hidden'}function closeModal(){modal?.classList.remove('open');document.body.style.overflow=''}window.__portfolioCloseModal=closeModal;
document.getElementById('recruiterBtn')?.addEventListener('click',openModal);document.getElementById('recruiterBtn2')?.addEventListener('click',openModal);document.getElementById('closeModal')?.addEventListener('click',closeModal);modal?.addEventListener('click',e=>{if(e.target===modal)closeModal()});
localize();
})();
</script>

['identity','foundation','systems'].forEach(id=>document.getElementById(id)?.classList.add('scene-removed'));

/* Fiber and Outcome remain independent single-screen scenes. */

Object.entries(copy).forEach(([id,c])=>{const sec=document.getElementById(id);if(!sec)return;const h=sec.querySelector(id==='access'?'h1':'.headline');const e=sec.querySelector('.eyebrow');const p=sec.querySelector(id==='access'?'.sub':'.lede')||sec.querySelector('.headline + p');setLocalized(h,c.title[0],c.title[1]);setLocalized(e,c.eyebrow[0],c.eyebrow[1]);if(p)setLocalized(p,c.support[0],c.support[1]);sec.dataset.titleEn=c.eyebrow[0];sec.dataset.titleEs=c.eyebrow[1]});

const access=document.getElementById('access');const start=access?.querySelector('.access-actions .primary');
    if(start){start.removeAttribute('data-jump');setLocalized(start.querySelector('span')||start,'Explore the work','Explorar el trabajo');start.dataset.controllerTarget='plan'}

if(!document.querySelector('.persistent-contact')){const a=document.createElement('a');a.className='persistent-contact';a.href='#contact';a.innerHTML='<span data-en="Contact" data-es="Contacto">Contact</span>';a.setAttribute('aria-label','Contact Enrique Escamilla');document.body.appendChild(a)}

.es-linkedin-badge-shell{margin:18px 0 0;padding:16px;border:1px solid color-mix(in srgb,currentColor 14%,transparent);border-radius:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel,#0b1724) 78%,transparent),color-mix(in srgb,var(--panel,#0b1724) 52%,transparent));overflow:hidden}
.es-linkedin-badge-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;color:var(--muted,rgba(244,248,252,.68));font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.es-linkedin-badge-label::after{content:"Official profile";padding:5px 8px;border:1px solid color-mix(in srgb,currentColor 15%,transparent);border-radius:999px;color:var(--text,#f4f8fc);font-size:9px;letter-spacing:.08em}
.es-linkedin-badge-frame{min-height:278px;display:grid;place-items:center;border-radius:15px;background:#0b0f14;overflow:hidden}
.es-linkedin-badge-frame iframe{max-width:100%!important}
.es-linkedin-badge-frame .badge-base{max-width:100%}
.es-linkedin-badge-frame .badge-base__link{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 18px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#fff;text-decoration:none;font-weight:780;background:#0a66c2}
html[data-theme="light"] .es-linkedin-badge-shell{background:rgba(255,255,255,.62)}
@media(max-width:430px){.es-linkedin-badge-shell{padding:12px}.es-linkedin-badge-frame{min-height:270px}.es-linkedin-badge-label::after{content:"Official"}}
.es-contact-details{margin:18px 0 0;padding:15px 0;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent);display:grid;gap:6px;color:var(--muted,rgba(244,248,252,.68));font-size:14px}.es-contact-details strong{color:var(--text,#f4f8fc)}
.es-qr-tabs{display:flex;gap:6px;margin-top:18px;padding:5px;border-radius:15px;background:color-mix(in srgb,var(--panel,#0b1724) 66%,transparent)}.es-qr-tabs button{flex:1;min-height:42px;border:0;border-radius:11px;background:transparent;color:inherit;font-size:12px;font-weight:780;cursor:pointer}.es-qr-tabs button[aria-selected="true"]{background:color-mix(in srgb,var(--text,#f4f8fc) 93%,transparent);color:var(--bg,#06111b)}
.es-qr-stage{margin-top:12px;display:grid;grid-template-columns:148px 1fr;gap:18px;align-items:center}.es-qr-stage img{width:148px;height:148px;padding:9px;border-radius:19px;background:#fff}.es-qr-copy{color:var(--muted,rgba(244,248,252,.68));font-size:14px;line-height:1.45}.es-qr-copy strong{display:block;margin-bottom:6px;color:var(--text,#f4f8fc);font-size:18px}.es-qr-copy a{display:inline-flex;margin-top:10px;color:var(--accent,#6fd3ff);font-weight:760;text-decoration:none}
.persistent-contact{cursor:pointer}.capability-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px}.capability-controls button{width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--text);font-size:22px;cursor:pointer}.capability-dots{display:flex;justify-content:center;gap:7px;flex:1}.capability-dots button{width:8px;height:8px;min-width:8px;min-height:8px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--text) 25%,transparent)}.capability-dots button.active{width:25px;border-radius:999px;background:var(--accent)}
.review-status{display:inline-flex;margin:0 0 12px;padding:7px 10px;border:1px solid color-mix(in srgb,var(--accent,#6fd3ff) 36%,transparent);border-radius:999px;background:color-mix(in srgb,var(--accent,#6fd3ff) 11%,transparent);color:var(--accent,#6fd3ff);font-size:10px;font-weight:850;letter-spacing:.11em;text-transform:uppercase}
@media(max-width:760px){.es-contact-dialog{padding:19px;border-radius:27px}.es-contact-actions{grid-template-columns:1fr 1fr}.es-qr-stage{grid-template-columns:1fr;justify-items:center;text-align:center}.es-qr-stage img{width:176px;height:176px}.capability-filmstrip{grid-auto-columns:100%!important;gap:0!important;scrollbar-width:none}.capability-filmstrip::-webkit-scrollbar{display:none}.capability-filmstrip article{width:100%;min-height:390px;border-radius:27px}.signal-strip article strong{font-size:clamp(25px,8vw,42px)}.signal-strip article span{font-size:14px;line-height:1.4}.cinematic-nav{max-width:calc(100vw - 22px)!important}}
@media(max-width:430px){.persistent-contact{min-width:110px!important;padding-inline:14px!important}.es-contact-actions{grid-template-columns:1fr}.es-contact-dialog h2{font-size:42px}.es-contact-role{font-size:15px}}
@media(prefers-reduced-motion:reduce){.es-contact-hub,.es-contact-dialog,.persistent-contact,.capability-filmstrip{scroll-behavior:auto!important;transition:none!important}}
</style>

<div class="es-contact-hub" id="es-contact-hub" hidden aria-hidden="true">
  <section class="es-contact-dialog" role="dialog" aria-modal="true" aria-labelledby="es-contact-title">
    <button class="es-contact-close" type="button" aria-label="Close contact hub">×</button>
    <div class="es-contact-layout">
      <div class="es-contact-main">
        <div class="es-contact-availability"><span class="es-contact-availability-dot" aria-hidden="true"></span><span data-en="Open to infrastructure opportunities" data-es="Disponible para oportunidades de infraestructura">Open to infrastructure opportunities</span></div>
        <p class="es-contact-eyebrow"><span data-en="Enrique Escamilla · Direct line" data-es="Enrique Escamilla · Línea directa">Enrique Escamilla · Direct line</span></p>
        <h2 id="es-contact-title"><span data-en="Critical infrastructure should never depend on guesswork." data-es="La infraestructura crítica nunca debe depender de suposiciones.">Critical infrastructure should never depend on <em>guesswork.</em></span></h2>
        <p class="es-contact-role"><span data-en="I design, install, validate, and document the systems that keep data centers operational—from rack and power paths to fiber, network handoff, and final acceptance." data-es="Diseño, instalo, valido y documento los sistemas que mantienen operativos los centros de datos: desde racks y rutas de energía hasta fibra, entrega de red y aceptación final.">I design, install, validate, and document the systems that keep data centers operational—from rack and power paths to fiber, network handoff, and final acceptance.</span></p>
        <div class="es-contact-proof" aria-label="Professional signals">
          <span><span data-en="Data Center Infrastructure" data-es="Infraestructura de Data Center">Data Center Infrastructure</span></span>
          <span><span data-en="Field + Systems Engineering" data-es="Ingeniería de campo + sistemas">Field + Systems Engineering</span></span>
          <span><span data-en="Querétaro · EN / ES" data-es="Querétaro · EN / ES">Querétaro · EN / ES</span></span>
        </div>
        <a class="es-contact-primary" href="https://wa.me/524423968131" target="_blank" rel="noreferrer">
          <span class="es-contact-primary-icon" aria-hidden="true">W</span>
          <span class="es-contact-primary-copy"><small><span data-en="Fastest direct channel" data-es="Canal directo más rápido">Fastest direct channel</span></small><strong><span data-en="Start a conversation on WhatsApp" data-es="Iniciar conversación por WhatsApp">Start a conversation on WhatsApp</span></strong></span>
          <span class="es-contact-primary-arrow" aria-hidden="true">↗</span>
        </a>
        <div class="es-contact-actions">
          <a class="" href="mailto:enrique_escamilla@icloud.com" ><span class="es-contact-action-icon" aria-hidden="true">✉</span><span class="es-contact-action-copy"><strong><span data-en="Email" data-es="Correo">Email</span></strong><small><span data-en="Send role or project details" data-es="Comparte detalles del puesto o proyecto">Send role or project details</span></small></span></a>
          <a class="" href="tel:+524423968131" ><span class="es-contact-action-icon" aria-hidden="true">☎</span><span class="es-contact-action-copy"><strong><span data-en="Call" data-es="Llamar">Call</span></strong><small><span data-en="Direct mobile line" data-es="Línea móvil directa">Direct mobile line</span></small></span></a>
          <a class="" href="https://www.linkedin.com/in/e-escamilla?trk=contact-info" target="_blank" rel="noreferrer"><span class="es-contact-action-icon" aria-hidden="true">in</span><span class="es-contact-action-copy"><strong><span data-en="LinkedIn" data-es="LinkedIn">LinkedIn</span></strong><small><span data-en="Verified professional profile" data-es="Perfil profesional verificado">Verified professional profile</span></small></span></a>
          <a class="es-cv-download" href="#" ><span class="es-contact-action-icon" aria-hidden="true">↓</span><span class="es-contact-action-copy"><strong><span data-en="Download CV" data-es="Descargar CV">Download CV</span></strong><small><span data-en="Portable PDF résumé" data-es="CV en PDF">Portable PDF résumé</span></small></span></a>
          <a class="" href="assets/asset-018-28cfc22c94.vcf" download="Enrique_Escamilla.vcf"><span class="es-contact-action-icon" aria-hidden="true">+</span><span class="es-contact-action-copy"><strong><span data-en="Save contact" data-es="Guardar contacto">Save contact</span></strong><small><span data-en="Add Enrique to contacts" data-es="Agregar a Enrique a contactos">Add Enrique to contacts</span></small></span></a>
        </div>
        <div class="es-contact-details">
          <a href="mailto:enrique_escamilla@icloud.com"><strong>enrique_escamilla@icloud.com</strong></a>
          <a href="tel:+524423968131"><strong>+52 442 396 8131</strong></a>
          <span>Querétaro, Mexico</span>
        </div>
      </div>
      <aside class="es-contact-side" aria-label="Verified identity and QR contact transfer">
        <div class="es-contact-identity">
          <div class="es-contact-monogram" aria-hidden="true">EE</div>
          <div><strong>Enrique Escamilla</strong><span><span data-en="Data Center Infrastructure Engineer · Systems that hold under pressure." data-es="Ingeniero de Infraestructura de Data Center · Sistemas que responden bajo presión.">Data Center Infrastructure Engineer · Systems that hold under pressure.</span></span></div>
        </div>
        <div class="es-linkedin-badge-shell">
          <div class="es-linkedin-badge-label"><span><span data-en="Official LinkedIn identity" data-es="Identidad oficial en LinkedIn">Official LinkedIn identity</span></span></div>
          <div class="es-linkedin-badge-frame">
            <div class="badge-base LI-profile-badge" data-locale="en_US" data-size="medium" data-theme="dark" data-type="VERTICAL" data-vanity="e-escamilla" data-version="v1"><a class="badge-base__link LI-simple-link" href="https://www.linkedin.com/in/e-escamilla?trk=contact-info">Enrique Escamilla</a></div>
          </div>
        </div>
        <p class="es-contact-transfer"><span data-en="Move this contact to another device" data-es="Lleva este contacto a otro dispositivo">Move this contact to another device</span></p>
        <div class="es-qr-tabs" role="tablist" aria-label="Contact QR codes">
          <button type="button" role="tab" aria-selected="true" data-qr="wa">WhatsApp</button>
          <button type="button" role="tab" aria-selected="false" data-qr="vcard">vCard</button>
          <button type="button" role="tab" aria-selected="false" data-qr="linkedin">LinkedIn</button>
        </div>
        <div class="es-qr-stage">
          <img loading="lazy" decoding="async" data-qr-image alt="WhatsApp QR code" src="assets/asset-019-4b0fa35256.png">
          <div class="es-qr-copy"><strong data-qr-title>WhatsApp</strong><span data-qr-help><span data-en="Scan from another device or tap below." data-es="Escanea desde otro dispositivo o toca abajo.">Scan from another device or tap below.</span></span><br><a data-qr-action href="https://wa.me/524423968131" target="_blank" rel="noreferrer"><span data-en="Open WhatsApp" data-es="Abrir WhatsApp">Open WhatsApp</span></a></div>
        </div>
      </aside>
    </div>
  </section>
</div>

const boot = () => requestAnimationFrame(init);

function init() {
    if (window.__portfolioControllerInitialized) return;
    window.__portfolioControllerInitialized = true;

const reduced = matchMedia('(prefers-reduced-motion: reduce)');
    const deck = document.getElementById('deck');
    const topbar = document.querySelector('.topbar');
    const rail = document.getElementById('rail');
    const progress = document.getElementById('progress');
    const sceneName = document.getElementById('sceneName');
    const actions = document.querySelector('.actions');
    const allScenes = [...document.querySelectorAll('.scene')];
    const scenes = allScenes.filter(scene => !scene.classList.contains('scene-removed'));

if (!deck || !scenes.length) return;

const state = {
      index: 0,
      total: scenes.length,
      autoplay: !reduced.matches,
      transitioning: false,
      programmatic: false,
      userInteracted: false,
      timer: 0,
      transitionTimer: 0,
      scrollTimer: 0,
      islandTimer: 0,
      wheelTimer: 0,
      currentMedia: null,
      transitionToken: 0,
      targetIndex: 0,
      lastTop: 0,
      durationScale: 1,
      ignoreReconcileUntil: 0
    };

let touchStart = null;
    let pointerStart = null;
    let autoBtn = document.getElementById('es-auto-tour');
    if (!autoBtn) {
      autoBtn = document.createElement('button');
      autoBtn.type = 'button';
      autoBtn.id = 'es-auto-tour';
      autoBtn.className = 'btn icon';
      actions?.prepend(autoBtn);
    }

let autoplayProgress = topbar?.querySelector('.es-autoplay-progress');
    if (!autoplayProgress && topbar) {
      autoplayProgress = document.createElement('span');
      autoplayProgress.className = 'es-autoplay-progress';
      autoplayProgress.innerHTML = '<i></i>';
      topbar.append(autoplayProgress);
    }
    const autoplayProgressBar = autoplayProgress?.querySelector('i') || null;

const clampIndex = value => Math.max(0, Math.min(state.total - 1, Number(value) || 0));
    const language = () => document.documentElement.lang.toLowerCase().startsWith('es') ? 'es' : 'en';
    const motionPaused = () => Boolean(window.PortfolioUI?.isMotionPaused?.());
    const transitionBehavior = requested => {
      if (requested) return requested;
      return reduced.matches ? 'auto' : 'smooth';
    };
    const interactiveSelector = [
      'a', 'button', 'input', 'select', 'textarea', 'summary',
      '[contenteditable="true"]', '[role="button"]', 'iframe',
      '.es-gallery-controls', '.es-model-frame', '.modal', '.canonical-contact'
    ].join(',');
    const isInteractive = target => target instanceof Element && Boolean(target.closest(interactiveSelector));

function targetTop(index) {
      return Math.max(0, scenes[clampIndex(index)].offsetTop);
    }

function clampOriginalIndex(value) {
      return Math.max(0, Math.min(allScenes.length - 1, Number(value) || 0));
    }

function resetAutoplayProgress() {
      if (!autoplayProgressBar) return;
      autoplayProgressBar.style.transition = 'none';
      autoplayProgressBar.style.width = '0';
      void autoplayProgressBar.offsetWidth;
    }

function clearAutoplayTimer() {
      clearTimeout(state.timer);
      state.timer = 0;
      resetAutoplayProgress();
    }

function clearTransitionTimer() {
      clearTimeout(state.transitionTimer);
      state.transitionTimer = 0;
    }

function autoplayLabel() {
      const es = language() === 'es';
      if (state.index === state.total - 1 && !state.autoplay) {
        return es ? 'Reiniciar recorrido automático' : 'Restart guided autoplay';
      }
      if (state.autoplay) return es ? 'Pausar recorrido automático' : 'Pause guided autoplay';
      return es ? 'Reanudar recorrido automático' : 'Resume guided autoplay';
    }

function renderAutoplay() {
      if (!autoBtn) return;
      autoBtn.textContent = state.autoplay ? 'Ⅱ' : '▶';
      autoBtn.setAttribute('aria-pressed', String(state.autoplay));
      autoBtn.setAttribute('aria-label', autoplayLabel());
      autoBtn.title = autoplayLabel();
      autoBtn.dataset.mode = state.autoplay ? 'auto' : 'manual';
    }

function activeTitle(scene) {
      return scene?.dataset[language() === 'es' ? 'titleEs' : 'titleEn'] || scene?.id || '';
    }

function syncState() {
      scenes.forEach((scene, index) => {
        const active = index === state.index;
        scene.classList.toggle('active', active);
        scene.classList.toggle('is-current', active);
        scene.toggleAttribute('data-active', active);
        if (active) scene.setAttribute('aria-current', 'step');
        else scene.removeAttribute('aria-current');
      });

const dots = rail ? [...rail.querySelectorAll('.dot')] : [];
      dots.forEach((dot, index) => {
        const active = index === state.index;
        dot.classList.toggle('active', active);
        dot.setAttribute('aria-current', active ? 'step' : 'false');
        dot.setAttribute('aria-pressed', String(active));
      });

if (progress) {
        const denominator = Math.max(1, state.total - 1);
        progress.style.width = `${(state.index / denominator) * 100}%`;
        progress.setAttribute('aria-valuenow', String(state.index + 1));
        progress.setAttribute('aria-valuemin', '1');
        progress.setAttribute('aria-valuemax', String(state.total));
      }

if (sceneName) sceneName.textContent = activeTitle(scenes[state.index]);
      document.body.dataset.portfolioMode = state.autoplay ? 'autoplay' : 'manual';
      document.body.dataset.portfolioScene = String(state.index + 1);
      renderAutoplay();
      syncMedia();
      window.PortfolioUI?.updateSceneName?.();
      document.dispatchEvent(new CustomEvent('portfolio-scene-change', {
        detail: { index: state.index, id: scenes[state.index]?.id || null, autoplay: state.autoplay }
      }));
    }

function durationFor(scene) {
      const words = scene.innerText.trim().split(/\s+/).filter(Boolean).length;
      let milliseconds = 10000 + words * 300 + (scene.querySelector('video,.compare,.es-model-card') ? 6000 : 2500);
      if (scene.id === 'access') milliseconds = 26000;
      if (scene.id === 'integration') milliseconds = 38000;
      if (scene.id === 'contact') milliseconds = 44000;

const video = scene.querySelector('video');
      if (video && Number.isFinite(video.duration) && video.duration > 0 && !video.loop) {
        milliseconds = Math.max(milliseconds, Math.min(45000, video.duration * 1000 + 1500));
      }
      return Math.max(24000, Math.min(44000, milliseconds)) * state.durationScale;
    }

function scheduleAutoplay(delay = 0) {
      clearAutoplayTimer();
      if (!state.autoplay || document.hidden || state.transitioning) return;
      if (state.index >= state.total - 1) {
        state.autoplay = false;
        renderAutoplay();
        return;
      }

const milliseconds = Math.max(120, durationFor(scenes[state.index]) + delay);
      if (autoplayProgressBar) {
        autoplayProgressBar.style.transition = `width ${milliseconds}ms linear`;
        autoplayProgressBar.style.width = '100%';
      }

state.timer = setTimeout(() => {
        state.timer = 0;
        if (!state.autoplay || state.transitioning || document.hidden) return;
        navigateTo(state.index + 1, { source: 'autoplay' });
      }, milliseconds);
    }

function stopCurrentScroll() {
      const currentTop = deck.scrollTop;
      deck.scrollTo({ top: currentTop, behavior: 'auto' });
    }

function finishNavigation(token) {
      if (token !== state.transitionToken) return;
      clearTransitionTimer();
      clearTimeout(state.scrollTimer);
      state.scrollTimer = 0;
      const exactTop = targetTop(state.targetIndex);
      if (Math.abs(deck.scrollTop - exactTop) > 2) {
        deck.scrollTo({ top: exactTop, behavior: 'auto' });
      }
      state.index = state.targetIndex;
      state.transitioning = false;
      state.programmatic = false;
      state.ignoreReconcileUntil = performance.now() + 500;
      syncState();

if (state.autoplay) {
        if (state.index >= state.total - 1) {
          state.autoplay = false;
          clearAutoplayTimer();
          renderAutoplay();
        } else {
          scheduleAutoplay(180);
        }
      }
    }

function navigateTo(target, options = {}) {
      const source = options.source || 'manual';
      const index = clampIndex(resolveTarget(target));
      const manualSource = !['autoplay', 'resume', 'init', 'reconcile'].includes(source);

if (manualSource) enterManual(source);
      else if (source === 'autoplay' && (!state.autoplay || state.transitioning)) return false;

if (state.transitioning || state.programmatic) cancelTransition();
      clearAutoplayTimer();

state.index = index;
      state.targetIndex = index;
      state.transitioning = true;
      state.programmatic = true;
      state.transitionToken += 1;
      const token = state.transitionToken;
      syncState();
      window.PortfolioUI?.closeModal?.();

const behavior = transitionBehavior(options.behavior);
      deck.scrollTo({ top: targetTop(index), behavior });

if (behavior === 'auto') {
        requestAnimationFrame(() => finishNavigation(token));
      } else {
        state.transitionTimer = setTimeout(() => finishNavigation(token), 950);
      }
      return true;
    }

function reconcileFromScroll() {
      if (state.programmatic || state.transitioning || performance.now() < state.ignoreReconcileUntil) return;
      const next = closestSceneIndex();
      if (next !== state.index) {
        state.index = next;
        state.targetIndex = next;
        syncState();
        if (state.autoplay) scheduleAutoplay(250);
      }
    }

function setAutoplay(enabled) {
      const next = Boolean(enabled);
      if (!next) {
        enterManual('autoplay-control');
        return;
      }

state.userInteracted = false;
      state.autoplay = true;
      renderAutoplay();

if (state.index >= state.total - 1) {
        navigateTo(0, { source: 'resume', behavior: reduced.matches ? 'auto' : 'smooth' });
      } else {
        syncState();
        scheduleAutoplay(180);
      }
    }

function onDeckScroll() {
      wakeIsland();
      document.body.classList.add('is-scrolling');

const top = deck.scrollTop;
      if (topbar) {
        if (top < 40 || top < state.lastTop - 10) topbar.classList.remove('shell-minimized');
        else if (top > state.lastTop + 2) topbar.classList.add('shell-minimized');
      }
      state.lastTop = top;

clearTimeout(state.scrollTimer);
      state.scrollTimer = setTimeout(() => {
        document.body.classList.remove('is-scrolling');
        reconcileFromScroll();
      }, 160);

if (state.programmatic && Math.abs(deck.scrollTop - targetTop(state.targetIndex)) <= 2) {
        finishNavigation(state.transitionToken);
      }
    }

function onTouchStart(event) {
      enterManual('touch');
      const touch = event.changedTouches?.[0];
      if (!touch) return;
      touchStart = {
        x: touch.clientX,
        y: touch.clientY,
        interactive: isInteractive(event.target)
      };
    }

function onKeyDown(event) {
      const target = event.target;
      if (isInteractive(target) || event.altKey || event.ctrlKey || event.metaKey) return;
      let next = null;
      if (['ArrowDown', 'PageDown', ' '].includes(event.key)) next = state.index + 1;
      if (['ArrowUp', 'PageUp'].includes(event.key)) next = state.index - 1;
      if (event.key === 'Home') next = 0;
      if (event.key === 'End') next = state.total - 1;
      if (next == null) return;
      event.preventDefault();
      navigateTo(next, { source: 'keyboard' });
    }

function onDocumentClick(event) {
      if (event.defaultPrevented) return;
      const previous = event.target.closest?.('[data-scene-prev]');
      const next = event.target.closest?.('[data-scene-next]');
      if (previous || next) {
        event.preventDefault();
        navigateTo(state.index + (next ? 1 : -1), { source: next ? 'next-control' : 'previous-control' });
        return;
      }

const direct = event.target.closest?.('[data-scene-target]');
      if (direct) {
        event.preventDefault();
        navigateTo(direct.dataset.sceneTarget, { source: 'section-link' });
        return;
      }

const jump = event.target.closest?.('[data-jump]');
      if (jump) {
        event.preventDefault();
        const raw = jump.dataset.jump;
        const original = /^-?\d+$/.test(raw || '') ? allScenes[clampOriginalIndex(Number(raw))] : null;
        navigateTo(original?.id || raw, { source: 'jump-link' });
        return;
      }

const anchor = event.target.closest?.('a[href^="#"]');
      if (!anchor) return;
      const id = (anchor.getAttribute('href') || '').slice(1);
      if (!id || id === 'contact') return;
      if (scenes.some(scene => scene.id === id)) {
        event.preventDefault();
        navigateTo(id, { source: 'deep-link' });
      }
    }

autoBtn?.addEventListener('click', event => {
      event.preventDefault();
      event.stopPropagation();
      setAutoplay(!state.autoplay);
    });

deck.addEventListener('scroll', onDeckScroll, { passive: true });
    deck.addEventListener('wheel', onWheel, { passive: false });
    deck.addEventListener('touchstart', onTouchStart, { passive: true });
    deck.addEventListener('touchend', onTouchEnd, { passive: true });
    deck.addEventListener('pointerdown', onPointerDown, { passive: true });
    deck.addEventListener('pointerup', onPointerUp, { passive: true });
    deck.addEventListener('scrollend', () => {
      if (state.programmatic) {
        if (Math.abs(deck.scrollTop - targetTop(state.targetIndex)) <= 8) {
          finishNavigation(state.transitionToken);
        }
      } else {
        reconcileFromScroll();
      }
    }, { passive: true });

['pointermove', 'pointerdown', 'touchstart', 'keydown'].forEach(type => {
      document.addEventListener(type, wakeIsland, { passive: true });
    });
    topbar?.addEventListener('focusin', wakeIsland, { passive: true });
    topbar?.addEventListener('mouseenter', wakeIsland, { passive: true });
    topbar?.addEventListener('click', () => {
      topbar.classList.remove('shell-minimized');
      wakeIsland();
    });
    addEventListener('resize', () => {
      if (innerWidth > 700) topbar?.classList.remove('island-idle');
      wakeIsland();
      requestAnimationFrame(() => {
        deck.scrollTo({ top: targetTop(state.index), behavior: 'auto' });
        syncState();
      });
    }, { passive: true });

// Preserve the rack-comparison demonstration without giving it control of the deck.
    const range = document.getElementById('compareRange');
    const compare = document.getElementById('compare');
    let compareTouched = false;
    let compareDemoed = false;
    const setCompare = value => {
      if (!range || !compare) return;
      range.value = String(value);
      compare.style.setProperty('--pos', `${value}%`);
      range.setAttribute('aria-valuenow', String(Math.round(value)));
    };
    range?.addEventListener('input', () => {
      compareTouched = true;
      enterManual('comparison');
    });
    const tween = (from, to, milliseconds) => new Promise(resolve => {
      const started = performance.now();
      const step = now => {
        if (compareTouched) {
          resolve();
          return;
        }
        const percent = Math.min(1, (now - started) / milliseconds);
        const eased = 0.5 - Math.cos(Math.PI * percent) / 2;
        setCompare(from + (to - from) * eased);
        if (percent < 1) requestAnimationFrame(step);
        else resolve();
      };
      requestAnimationFrame(step);
    });
    const runCompareDemo = async () => {
      if (compareDemoed || compareTouched || reduced.matches) return;
      compareDemoed = true;
      await new Promise(resolve => setTimeout(resolve, 1200));
      await tween(50, 18, 1100);
      await new Promise(resolve => setTimeout(resolve, 450));
      await tween(18, 82, 2000);
      await new Promise(resolve => setTimeout(resolve, 650));
      await tween(82, 50, 900);
    };
    const integrationIndex = scenes.findIndex(scene => scene.id === 'integration');
    document.addEventListener('portfolio-scene-change', event => {
      if (event.detail?.index === integrationIndex) runCompareDemo();
    });

// Preload the Autodesk model, but never resume autoplay as a side effect of closing it.
    const prepareModel = () => {
      const card = document.querySelector('.es-model-card');
      if (!card) {
        setTimeout(prepareModel, 120);
        return;
      }
      const frame = card.querySelector('.es-model-frame');
      const button = card.querySelector('.es-load-model');
      const close = card.querySelector('.es-model-frame-close');
      if (!frame || !button) return;

buildRail();
    syncState();
    navigateTo(0, { source: 'init', behavior: 'auto' });
    wakeIsland();
    (window.requestIdleCallback || (callback => setTimeout(callback, 0)))(prepareModel, { timeout: 500 });

document.querySelectorAll('img').forEach((image, index) => {
      if (index > 0) {
        image.loading = 'lazy';
        image.decoding = 'async';
      }
    });

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', boot, { once: true });
  } else {
    boot();
  }
})();
</script>
<script id="canonical-scene-fit-js">
(()=>{
  'use strict';
  const fit=()=>{
    const deck=document.getElementById('deck');
    if(!deck)return;
    document.querySelectorAll('.scene:not(.scene-removed)').forEach(scene=>{
      const content=scene.querySelector(':scope > .wrap,:scope > .access-content,:scope > .release-end-shell');
      if(!content)return;
      content.style.setProperty('--scene-fit','1');
      if(scene.id==='contact')return;
      const style=getComputedStyle(scene);
      const available=Math.max(1,scene.clientHeight-(parseFloat(style.paddingTop)||0)-(parseFloat(style.paddingBottom)||0));
      const natural=Math.max(1,content.scrollHeight);
      const scale=Math.min(1,available/natural);
      content.style.setProperty('--scene-fit',String(Math.max(.5,scale)));
    });
  };
  let timer=0;
  const queue=()=>{clearTimeout(timer);timer=setTimeout(fit,90)};
  const start=()=>requestAnimationFrame(()=>requestAnimationFrame(fit));
  if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',start,{once:true});else start();
  addEventListener('load',fit,{once:true});
  addEventListener('resize',queue,{passive:true});
  addEventListener('orientationchange',()=>setTimeout(fit,260),{passive:true});
  document.addEventListener('portfolio:language',queue);
  document.addEventListener('portfolio-scene-change',queue);
  window.CanonicalSceneFit={fit};
})();
</script>
<script id="canonical-cv-download-blob">
(()=>{
  'use strict';
  const install=()=>{
    const links=[...document.querySelectorAll('a[href^="data:application/pdf;base64"]')];
    if(!links.length)return;
    const source=links[0].getAttribute('href')||'';
    const encoded=source.slice(source.indexOf(',')+1);
    try{
      const binary=atob(encoded),bytes=new Uint8Array(binary.length);
      for(let i=0;i<binary.length;i++)bytes[i]=binary.charCodeAt(i);
      const url=URL.createObjectURL(new Blob([bytes],{type:'application/pdf'}));
      links.forEach(link=>{
        link.href=url;
        link.download='Enrique_Escamilla_CV_April_2026.pdf';
        link.type='application/pdf';
        link.dataset.cvDownloadReady='true';
        link.setAttribute('aria-label',document.documentElement.lang.toLowerCase().startsWith('es')?'Descargar CV en PDF':'Download CV as PDF');
      });
      addEventListener('pagehide',()=>URL.revokeObjectURL(url),{once:true});
    }catch(error){
      console.warn('CV download fallback remains active.',error);
    }
  };
  if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',install,{once:true});else install();
})();
</script>
</body></html>