/* Landing choreography. Static content remains available until JS is ready. */
body.hero-cinematic {
  --capability-bar-height: 68px;
  --experience-paper: #02050d;
  --galaxy-image: url('/static/img/recupero-galaxy-v1.webp');
}
.hero-monitor-layer { position: absolute; inset: 0; z-index: 3; }
body.hero-cinematic .hero-monitor-layer.is-retired { visibility: hidden; }
body.hero-cinematic .hero-monitor-layer.is-zooming::before,
body.hero-cinematic .hero-monitor-layer.is-zooming::after { display: none; }
body.hero-cinematic .hero-monitor-layer::before,
body.hero-cinematic .hero-monitor-layer::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: clamp(110px, 18vw, 320px);
  pointer-events: none; z-index: 6; filter: blur(24px);
}
body.hero-cinematic .hero-monitor-layer::before {
  left: -2%;
  background: linear-gradient(113deg, var(--experience-paper) 10%, rgba(2,5,13,.98) 22%, rgba(2,5,13,.88) 34%, rgba(2,5,13,.44) 52%, transparent 76%);
}
body.hero-cinematic .hero-monitor-layer::after {
  right: -1%;
  background: linear-gradient(247deg, var(--experience-paper) 10%, rgba(2,5,13,.98) 22%, rgba(2,5,13,.88) 34%, rgba(2,5,13,.44) 52%, transparent 76%);
}
body.hero-cinematic .hero-monitor-layer .hero-reference-cutout {
  position: absolute; right: -0.25vw; bottom: -0.4%;
  width: min(83vw, 1390px, calc((100svh - 110px) * 1.78)); max-width: none; height: auto;
  transform: none; filter: drop-shadow(0 28px 56px #0004);
  -webkit-mask-image: linear-gradient(112deg, transparent 0%, rgba(0,0,0,.28) 4%, #000 12%, #000 88%, rgba(0,0,0,.28) 96%, transparent 100%);
  mask-image: linear-gradient(112deg, transparent 0%, rgba(0,0,0,.28) 4%, #000 12%, #000 88%, rgba(0,0,0,.28) 96%, transparent 100%);
}
body.hero-cinematic .hero-reference-bg::before,
body.hero-cinematic .hero-reference-bg::after,
body.hero-cinematic .hero-reference-glow { display: none !important; }
.capability-intro, .hero-scroll-cue, .experience-progress, .cosmos-scene, .monitor-universe { display: none; }
body.hero-cinematic.motion-enabled .hero-monitor-layer .hero-reference-cutout {
  width: min(83vw, 1390px, calc((var(--stage-height) - 42px) * 1.78));
}
body.hero-cinematic .hero-reference-handwrite {
  top: 20px !important; right: 12% !important; font-size: 21px !important;
  max-width: 210px; line-height: 1.12 !important;
}
body.hero-cinematic .hero-reference-handwrite span { font-size: 30px !important; }
body.hero-cinematic main > * {
  /* Stable document geometry is necessary for the scroll sequence and anchors. */
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}
body.hero-cinematic.motion-enabled .hero-reference-shell {
  height: calc(var(--stage-height) + var(--scroll-travel)) !important;
  max-height: none !important; overflow: visible !important;
  background: var(--experience-paper) !important;
}
body.hero-cinematic.motion-enabled .hero-reference {
  position: sticky !important; top: var(--reference-nav-h) !important;
  height: var(--stage-height) !important; min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
}
body.hero-cinematic.motion-enabled .hero-reference-copy {
  opacity: var(--copy-opacity, 1) !important;
  transform: translate3d(0, var(--copy-y, 0px), 0) !important;
  filter: blur(var(--copy-blur, 0px)) !important;
}
body.hero-cinematic.motion-enabled .hero-reference-handwrite {
  opacity: var(--handwrite-opacity, 1) !important;
}
body.hero-cinematic.motion-enabled .hero-reference-shade {
  opacity: var(--copy-opacity, 1);
}
body.hero-cinematic .hero-monitor-layer.is-building .hero-reference-cutout {
  opacity: var(--image-reveal, 0);
}
body.hero-cinematic .hero-monitor-layer.is-building .hero-particles {
  display: block !important; visibility: visible !important; opacity: 1 !important;
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 4; pointer-events: none; mix-blend-mode: normal; filter: none !important;
}
body.hero-cinematic.motion-enabled .hero-reference-portal {
  display: none !important;
}
body.hero-cinematic.motion-enabled .hero-portal-copy { display: none !important; }
body.hero-cinematic.motion-enabled .capability-intro {
  display: block; position: absolute; z-index: 12;
  inset: 5% 20px auto; text-align: center; pointer-events: none;
  opacity: var(--intro-opacity, 0);
  transform: translateY(var(--intro-y, 30px));
}
.capability-intro .eyebrow { color: #77cede; font-size: 9px; letter-spacing: .28em; }
.capability-intro h2 { color: #f2f8ff; font-size: clamp(28px, 3.1vw, 46px); line-height: 1.08; margin: 10px 0; letter-spacing: -.04em; }
.capability-intro h2 br { display: none; }
.capability-intro h2 em { font-style: normal; color: #8ceafa; margin-left: .2em; }
.capability-intro p { color: #9eb6cb; font-size: 11px; }
body.hero-cinematic.motion-enabled .hero-scroll-cue {
  display: inline-flex; align-items: center; gap: 16px;
  position: absolute; left: 54px; bottom: 23px; z-index: 13;
  color: #aac8d2; font-size: 9px; letter-spacing: .2em;
  opacity: var(--copy-opacity, 1);
}
.hero-scroll-cue .icon { width: 17px; height: 17px; transform: rotate(90deg); animation: scroll-cue 2s ease-in-out infinite; }
body.hero-cinematic.motion-enabled .experience-progress {
  display: block; position: absolute; inset: auto 0 0; height: 2px; z-index: 14;
  background: #7ea5b420;
}
.experience-progress > span { display: block; height: 100%; background: #39c4d0; transform: scaleX(var(--experience-progress, 0)); transform-origin: left; }
body.hero-cinematic.motion-enabled .capability-strip {
  position: fixed; z-index: 40; inset: var(--reference-nav-h) 0 auto;
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
  height: var(--capability-bar-height); min-height: var(--capability-bar-height); gap: 12px;
  padding: 12px clamp(18px, 3vw, 56px); margin: 0 !important;
  border: 0 !important; background: rgba(3,13,27,var(--strip-bg-alpha,0)) !important; overflow: visible;
  visibility: hidden; pointer-events: none;
  opacity: var(--strip-opacity, 0); transform: translate3d(0,var(--strip-y,0px),0);
  transition: none !important;
}
body.hero-cinematic.motion-enabled .capability-strip.is-active { visibility: visible; }
body.hero-cinematic.motion-enabled .capability-strip > span {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 5px 9px; border: 0;
  border-radius: 0; color: #eef8ff; font-size: clamp(11px, .96vw, 14px);
  white-space: nowrap; background: transparent;
  box-shadow: none; text-shadow: 0 2px 15px #000, 0 0 28px #4dcde040;
  opacity: 0; transform-origin: center;
}
body.hero-cinematic .capability-strip b { font-weight: 550; }
body.hero-cinematic .capability-strip .capability-index,
body.hero-cinematic .capability-strip small { display: none; }
body.hero-cinematic.motion-enabled .capability-strip .capability-index {
  display: block; position: absolute; left: -15px; top: 12px;
  font: 7px 'Consolas', monospace; color: #7aafbf;
  opacity: var(--flight-detail, 1);
}
body.hero-cinematic.motion-enabled .capability-strip small {
  display: block; position: absolute; left: 35px; top: 33px;
  color: #9eb9ce; font-size: 6.5px; letter-spacing: .035em;
  opacity: var(--flight-detail, 1);
}
body.hero-cinematic.motion-enabled .capability-strip .icon { color: #7be9ff; width: 18px; height: 18px; flex-basis: 18px; }
body.hero-cinematic.motion-enabled .capability-strip > span::before {
  content: ''; position: absolute; left: 35px; right: -28px; top: 30px; height: 1px;
  background: linear-gradient(90deg, #5bc2e770, #5bc2e700);
  opacity: var(--flight-detail, 1);
}
body.hero-cinematic.motion-enabled .capability-strip > span::after {
  content: ''; position: absolute; width: 7px; height: 7px; right: 7px; top: -3px;
  background: #c8fbff; box-shadow: 0 0 12px #21cadb;
  clip-path: polygon(50% 0,62% 36%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 36%);
  opacity: var(--spark-opacity, 0); transform: scale(var(--spark-scale, 1));
}
body.hero-cinematic.motion-enabled .capability-strip.is-docked { pointer-events: none; }
body.hero-cinematic.motion-enabled .capability-strip.is-docked > span { background: transparent; border-color: transparent; box-shadow: none; }

body.hero-cinematic.motion-enabled main > section[id] {
  scroll-margin-top: calc(var(--reference-nav-h) + 20px);
}
body.hero-cinematic.motion-enabled #centralizacion {
  position: relative; z-index: 15;
  margin-top: calc(-1 * var(--stage-height));
  opacity: var(--next-section-opacity, 0);
}
/* The photograph opens into an animated universe within the monitor's bezel. */
body.hero-cinematic.motion-enabled .monitor-universe {
  display: grid; place-items: center; position: absolute; z-index: 5;
  left: 0; top: 0; width: var(--screen-w); height: var(--screen-h);
  transform-origin: 0 0;
  overflow: hidden; background: #010811; opacity: var(--screen-opacity, 0);
  border-radius: 2px;
}
.monitor-universe::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 44%, rgba(116,227,247,.08), rgba(116,227,247,0) 44%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 24%);
  mix-blend-mode: screen; opacity: .7;
}
.monitor-nebula, .cosmos-nebula { position: absolute; inset: -4%; background: var(--galaxy-image) center 52% / cover no-repeat; }
.monitor-nebula { animation: galaxy-pan-monitor 14s ease-in-out infinite alternate paused; }
.monitor-title-group {
  position: relative; z-index: 3; width: min(84%, 780px); aspect-ratio: 2.6 / 1; display: grid; place-items: center;
  transform: scale(var(--monitor-title-scale, 1));
}
.monitor-title-group > span, .monitor-title-group > .monitor-orbit { opacity: var(--monitor-content-opacity,1); }
.monitor-title-group > span { position: relative; z-index: 3; font-size: clamp(18px, 2.45vw, 39px); font-weight: 560; color: #e2f9ff; letter-spacing: .19em; text-shadow: 0 0 18px #68cffe80; text-align: center; }
.monitor-title-group > span > span { display: block; font-size: 7px; letter-spacing: .29em; margin-top: 12px; color: #a2c7d8; }
.monitor-orbit { position: absolute; z-index: 2; inset: 11% 12%; border: 1px solid #8fe7ff66; border-radius: 50%; box-shadow: 0 0 34px #269acb18; }
.monitor-debris { position:absolute; left:-50%; top:-100%; width:200%; height:300%; z-index:4; pointer-events:none; }
body.hero-cinematic.motion-enabled .cosmos-scene {
  display: block; position: absolute; inset: 0; z-index: 10; overflow: hidden;
  background: #02050d; opacity: var(--universe-opacity, 0); pointer-events: none;
}
.cosmos-nebula {
  background: none;
  opacity: var(--nebula-opacity, .85);
  transform: scale(var(--nebula-scale, 1.05)) rotate(var(--nebula-rotation, 0deg));
  will-change: transform;
}
.cosmos-nebula::after {
  content: ''; position: absolute; inset: -5%;
  background: var(--galaxy-image) center / cover no-repeat;
  animation: galaxy-pan-monitor 22s ease-in-out infinite alternate paused;
}
#cosmos-stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--stars-opacity, .8); }
.cosmos-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, #02091235, #01051170 80%), linear-gradient(180deg,#02051099,transparent 28%,transparent 80%,#020510a0); }
.cosmos-veil::after {
  content:''; position:absolute; inset:auto -8% -18%; height:48%; pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,#72dce626 0,#2e77901b 28%,transparent 68%),linear-gradient(180deg,transparent,#0309138f);
  filter:blur(18px); opacity:var(--handoff-fog-opacity,0);
}
.cosmos-orbits { position: absolute; inset: -20%; opacity: var(--orbits-opacity, .3); transform: rotate(-17deg); }
.cosmos-orbits > i { position: absolute; width: 78%; height: 63%; left: 11%; top: 20%; border: 1px solid #83d4fa23; border-radius: 50%; }
.cosmos-orbits > i:nth-child(2) { transform: rotate(55deg); }
.cosmos-orbits > i:nth-child(3) { transform: rotate(-55deg); }
.cosmos-coordinate { position: absolute; bottom: 20px; left: 28px; color: #8aaabb; font: 8px 'Consolas',monospace; letter-spacing: .2em; opacity: var(--coordinate-opacity, .7); }








body.is-monitor-active .monitor-nebula,
body.is-universe-active .cosmos-nebula::after { animation-play-state: running; will-change: transform; }
@keyframes galaxy-pan-monitor {
  from { transform: translate3d(-1%, 1%, 0) scale(1.04) rotate(-1deg); }
  to { transform: translate3d(1%, -1%, 0) scale(1.14) rotate(2deg); }
}
@keyframes nebula-drift { from { transform: scale(1) rotate(-2deg); } to { transform: scale(1.14) rotate(3deg); } }
/* Editorial entrances: spring settling, staggered details, one soft light sweep. */
body.hero-cinematic .will-reveal {
  opacity: 0; transform: translate3d(0, 46px, 0) scale(.985);
  transition: opacity .65s ease, transform .95s cubic-bezier(.18,.85,.28,1.15);
  transition-delay: var(--reveal-delay, 0ms);
}
body.hero-cinematic .will-reveal.is-visible { opacity: 1; transform: none; }
body.hero-cinematic .will-reveal [data-motion-child] { opacity: 0; }
body.hero-cinematic .will-reveal.is-visible [data-motion-child] {
  animation: detail-arrive .85s both;
  animation-delay: calc(var(--reveal-delay, 0ms) + var(--detail-delay, 0ms));
}
body.hero-cinematic .story-visual { position: relative; overflow: hidden; }
body.hero-cinematic .story-visual::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, #c7f5ff50 48%, #ffffff70 50%, transparent 65%);
  transform: translateX(-130%); opacity: 0;
}
body.hero-cinematic .is-visible .story-visual::after { animation: section-glint 1.2s .3s both; }
body.hero-cinematic .section-topline.will-reveal { position: relative; overflow: hidden; }
body.hero-cinematic .section-topline.will-reveal::after {
  content: ''; position: absolute; inset: auto 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, #3bbdcf, #dec28a, transparent);
  opacity: 0; pointer-events: none;
}
body.hero-cinematic .section-topline.is-visible::after { animation: section-glint 1.3s .15s both; }
@keyframes detail-arrive {
  0% { opacity: 0; translate: 0 30px; scale: .96; }
  60% { opacity: 1; translate: 0 -5px; scale: 1.015; }
  82% { translate: 0 2px; scale: .998; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes section-glint {
  0% { opacity: 0; transform: translateX(-130%); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateX(130%); }
}
@keyframes scroll-cue { 50% { transform: translateY(5px) rotate(90deg); } }
@media (max-width: 1500px) {
  body.hero-cinematic .hero-monitor-layer .hero-reference-cutout { width: min(81vw, 1215px, calc((100svh - 125px) * 1.72)); }
}
@media (min-width: 1041px) and (max-height: 820px) {
  body.hero-cinematic.motion-enabled .hero-reference-copy { top: 30px !important; }
  body.hero-cinematic.motion-enabled .hero-reference-copy h1 { font-size: clamp(40px, 4vw, 60px) !important; }
  body.hero-cinematic.motion-enabled .hero-reference-copy > p { font-size: 14px !important; line-height: 1.65 !important; }
  body.hero-cinematic.motion-enabled .hero-trust { margin-top: 22px !important; }
}
@media (max-width: 1040px) {
  body.hero-cinematic .hero-monitor-layer .hero-reference-cutout { right: -2vw; width: min(118vw, 1120px); }
  body.hero-cinematic.motion-enabled .hero-monitor-layer .hero-reference-cutout { width: min(118vw, 1120px, var(--responsive-image-width)); }
  body.hero-cinematic .hero-reference-copy { left: auto !important; width: auto !important; }
  body.hero-cinematic.motion-enabled .hero-reference-copy { position: absolute !important; left: 0 !important; top: 0 !important; padding: 26px 28px 0 !important; width: 100% !important; }
  body.hero-cinematic.motion-enabled .hero-reference-copy h1 { font-size: clamp(35px, 5.5vw, 52px) !important; line-height: 1.05 !important; }
  body.hero-cinematic.motion-enabled .hero-reference-copy > p { max-width: 580px !important; font-size: 13px !important; line-height: 1.6 !important; }
  body.hero-cinematic.motion-enabled .hero-trust { display: none !important; }
  body.hero-cinematic.motion-enabled .hero-reference-shade { background: linear-gradient(180deg,#021116 0%,#021116f0 26%,#02111620 60%,transparent 100%) !important; }
  body.hero-cinematic.motion-enabled .hero-scroll-cue { left: 28px; bottom: 16px; }
  body.hero-cinematic .public-nav nav.is-open { display: flex !important; }
}
@media (max-width: 600px) {
  body.hero-cinematic .hero-monitor-layer .hero-reference-cutout { width: 148vw; right: -8vw; }
  body.hero-cinematic.motion-enabled .hero-monitor-layer .hero-reference-cutout { width: min(148vw, var(--responsive-image-width)); }
  body.hero-cinematic.motion-enabled .hero-reference-copy { padding: 18px 20px 0 !important; }
  body.hero-cinematic.motion-enabled .hero-reference-copy h1 { font-size: clamp(30px, 8.5vw, 43px) !important; }
  body.hero-cinematic.motion-enabled .hero-reference-copy .eyebrow { font-size: 8px !important; margin-bottom: 12px !important; letter-spacing: .15em !important; }
  body.hero-cinematic.motion-enabled .hero-reference-copy .hero-actions-v2 { display: flex; flex-wrap: wrap; gap: 8px !important; margin-top: 15px !important; }
  body.hero-cinematic.motion-enabled .hero-reference-copy .hero-actions-v2 .btn { width: auto; min-height: 42px !important; padding: 10px 12px !important; font-size: 10px !important; }
  body.hero-cinematic.motion-enabled .hero-scroll-cue { left: 20px; font-size: 8px; }
  .capability-intro h2 { font-size: 28px; }
  .capability-intro h2 br { display: block; }
  .capability-intro .eyebrow { font-size: 7px; letter-spacing: .19em; }
  .capability-intro p { font-size: 10px; }
  
  .cosmos-coordinate { left: 20px; font-size: 6px; }
  body.hero-cinematic { --capability-bar-height: 60px; }
}
@media (max-height: 580px) {
  body.hero-cinematic.motion-enabled .hero-reference-copy { width: 55% !important; padding: 12px 20px !important; }
  body.hero-cinematic.motion-enabled .hero-reference-copy h1 { font-size: 30px !important; }
  body.hero-cinematic.motion-enabled .hero-reference-copy > p { font-size: 11px !important; }
  body.hero-cinematic.motion-enabled .hero-trust,
  body.hero-cinematic.motion-enabled .hero-scroll-cue { display: none !important; }
  body.hero-cinematic .hero-monitor-layer .hero-reference-cutout { width: 70vw; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.hero-cinematic .will-reveal,
  body.hero-cinematic .will-reveal [data-motion-child] { opacity: 1 !important; transform: none !important; }
  body.hero-cinematic *, body.hero-cinematic *::before, body.hero-cinematic *::after {
    animation: none !important; transition: none !important;
  }
  body.hero-cinematic .hero-monitor-layer .hero-reference-cutout { opacity: 1 !important; }
  body.hero-cinematic .story-visual, body.hero-cinematic .control-room-final,
  body.hero-cinematic .ai-capabilities article, body.hero-cinematic .people-image img { transform: none !important; }
  body.hero-cinematic .room-final-node { translate: none !important; }
}


/* 40.36 · performance + transient universe */
body.hero-cinematic.motion-enabled #en-operacion,
body.hero-cinematic.motion-enabled #inteligencia,
body.hero-cinematic.motion-enabled .operation-film-final,
body.hero-cinematic.motion-enabled #filosofia,
body.hero-cinematic.motion-enabled #como-empezar,
body.hero-cinematic.motion-enabled .definitive-cta { content-visibility:auto !important; contain-intrinsic-size:850px !important; }
body.hero-cinematic.is-universe-active .hero-reference-copy { pointer-events:none; }