/* HERO · escenario de producto cinematográfico con render 3D y chat HTML legible. */
.hero {
  --hero-black: #04130f;
  position: relative; min-height: 55rem; padding: 4.4rem 0 3rem; overflow: clip; isolation: isolate;
  color: var(--marfil); background: var(--hero-black);
}
.hero::before {
  content: ""; position: absolute; inset: 4.3rem 0 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(48rem 44rem at 74% 42%, rgba(20,105,83,.62), transparent 72%),
    radial-gradient(30rem 36rem at 88% 70%, rgba(194,118,35,.14), transparent 74%),
    linear-gradient(110deg, #04130f 0%, #08251e 50%, #061a15 100%);
}
.hero::after {
  content: ""; position: absolute; z-index: -1; inset: 4.3rem 0 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(4,19,15,.28), transparent 55%), linear-gradient(0deg, rgba(4,19,15,.45), transparent 28%);
}
.hero__bg { position: absolute; inset: 4.4rem 0 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__bg::before {
  content: ""; position: absolute; right: 4%; top: 5%; width: min(62vw, 58rem); aspect-ratio: 1;
  border: 1px solid rgba(242,245,240,.05); border-radius: 50%;
  box-shadow: 0 0 0 3.2rem rgba(242,245,240,.015), 0 0 0 6.4rem rgba(242,245,240,.012);
}
.bokeh { position: absolute; inset: 0; opacity: .7; }
.bokeh i { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; border-radius: 50%; background: var(--c); opacity: var(--o); filter: blur(var(--b)); mix-blend-mode: screen; transform: translate(calc(var(--px,0) * var(--k) * 1px), calc(var(--py,0) * var(--k) * .45px)); transition: transform 1.2s var(--ease); }
.bokeh i:nth-child(n+5) { display: none; }
.beam { position: absolute; top: -20%; width: 15rem; height: 140%; opacity: .35; background: linear-gradient(90deg,transparent,rgba(246,245,240,.13),transparent); transform: rotate(23deg); mix-blend-mode: screen; }
.beam--1 { left: 67%; } .beam--2 { left: 84%; width: 8rem; opacity: .26; }
.grain { position: absolute; inset: 0; opacity: .035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__index { position: absolute; z-index: 4; top: 5.6rem; left: max(var(--gutter),calc((100vw - var(--max))/2)); right: max(var(--gutter),calc((100vw - var(--max))/2)); display: flex; justify-content: space-between; color: rgba(246,245,240,.54); font: 700 .61rem "Courier New",monospace; letter-spacing: .17em; }
.hero__inner { position: relative; max-width: 92rem; min-height: 47.5rem; }
.hero__text { position: absolute; left: 2%; top: 16%; z-index: 3; width: min(48%, 39rem); padding: .3rem 0 2rem; }
.hero__eyebrow { margin: 0 0 1.35rem; color: var(--ambar); font: 700 .68rem/1.4 var(--font-body); letter-spacing: .17em; text-transform: uppercase; }
.hero__title { max-width: 11ch; font-size: clamp(3.45rem,5.7vw,5.3rem); line-height: .91; letter-spacing: -.065em; }
.hero__title .l1, .hero__title .l2 { display: block; }
.hero__title .l2 { color: var(--ambar); margin-top: .12em; }
.hero__sub { max-width: 28rem; margin-top: 1.5rem; color: rgba(246,245,240,.8); font-size: clamp(1.04rem,1.25vw,1.22rem); line-height: 1.48; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.hero__cta .btn { min-height: 3.3rem; padding-inline: 1.35rem; }
.hero__note { max-width: 28rem; margin-top: 1.2rem; padding-left: .85rem; border-left: 2px solid var(--ambar); color: rgba(246,245,240,.67); font-size: .78rem; line-height: 1.5; }
.hero__note b { color: var(--marfil); }
.hero__scene { position: absolute; z-index: 2; inset: 0 -4% 0 35%; overflow: visible; pointer-events: none; }
.hero__stage-mark { position: absolute; z-index: 1; top: 12%; right: 13%; display: flex; gap: .8rem; align-items: center; color: rgba(246,245,240,.58); font: 700 .57rem "Courier New",monospace; letter-spacing: .14em; }
.hero__stage-mark span:first-child { color: var(--ambar); }
.hero__stage-mark span:last-child { padding: .35rem .55rem; border: 1px solid rgba(246,245,240,.22); }
.phone-wrap { position: absolute; top: -10%; right: -4%; width: min(58vw, 60rem); aspect-ratio: 2/3; perspective: 1800px; }
.rig { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: perspective(1800px) rotateY(var(--ry,-7deg)) rotateX(var(--rx,3deg)) rotateZ(-1deg); transform-origin: 50% 48%; transition: transform .75s var(--ease); }
.phone-render { position: absolute; inset: 0; transform-style: preserve-3d; }
.phone-render > img { position: absolute; inset: 0; width: 100%; height: auto; display: block; filter: drop-shadow(0 3rem 3rem rgba(0,0,0,.4)); }
.render-screen { position: absolute; left: 21.7%; top: 5%; width: 58.7%; height: 89.4%; overflow: hidden; border-radius: 13% / 7%; display: flex; flex-direction: column; color: var(--marfil); background: rgba(5,20,16,.96); }
.render-island { position: absolute; z-index: 4; top: 2.7%; left: 50%; width: 29%; height: 3.2%; border-radius: 99px; background: #020609; transform: translateX(-50%); box-shadow: inset 0 1px 1px rgba(255,255,255,.1); }
.render-screen .chat-head { flex: 0 0 17%; min-height: 0; gap: 3%; padding: 10% 7% 2%; background: linear-gradient(110deg,rgba(13,91,75,.98),rgba(17,73,62,.98)); color: var(--marfil); }
.render-screen .chat-head__avatar { width: 14%; height: auto; aspect-ratio: 1; border-radius: 50%; font-size: clamp(.55rem,.9vw,.9rem); }
.render-screen .chat-head__name { font-size: clamp(.56rem,.88vw,.88rem); line-height: 1.1; }
.render-screen .chat-head__sub { font-size: clamp(.46rem,.68vw,.68rem); }
.render-screen .chat-body { flex: 1; min-height: 0; justify-content: flex-end; overflow: hidden; padding: 3% 4%; gap: 2.4%; background: #091713; }
.render-screen .day { padding: .15rem .55rem; border-radius: 99px; color: rgba(246,245,240,.74); background: rgba(246,245,240,.1); font-size: clamp(.42rem,.58vw,.6rem); }
.render-screen .msg { max-width: 88%; padding: 2.2% 3% 1.6%; border-radius: .7rem; box-shadow: none; font-size: clamp(.55rem,1.02vw,1rem); line-height: 1.23; }
.render-screen .msg--client { align-self: flex-end; color: #eff9f2; background: #17735f; border-bottom-right-radius: .18rem; }
.render-screen .msg--bot { align-self: flex-start; color: #f5f3ec; background: #1c302a; border-bottom-left-radius: .18rem; }
.render-screen .msg time { margin-top: .1rem; font-size: clamp(.38rem,.5vw,.52rem); opacity: .58; }
.render-screen .msg--typing { gap: .18rem; padding: .55rem .65rem; }
.render-screen .msg--typing i { width: .28rem; height: .28rem; }
.render-screen .chat-foot { flex: 0 0 9%; min-height: 0; gap: 2%; padding: 1.5% 4% 3%; background: #091713; }
.render-screen .chat-foot__field { padding: 2.5% 5%; border-radius: 99px; background: #1c2c27; color: rgba(246,245,240,.55); font-size: clamp(.43rem,.62vw,.64rem); }
.render-screen .chat-foot__send { width: 9%; height: auto; aspect-ratio: 1; border-radius: 50%; }
.render-screen .chat-foot__send svg { width: 55%; height: 55%; }
.chip-pos { position: absolute; z-index: 3; transform: translateZ(60px); }
.chip-pos--1 { top: 23%; left: -2%; }
.chip-pos--2 { right: 2%; top: 60%; }
.chip-pos--3 { display: none; }
.chip { display: flex; align-items: center; gap: .58rem; padding: .7rem .9rem .7rem .72rem; border: 1px solid rgba(246,245,240,.24); border-radius: .6rem; color: var(--marfil); background: rgba(7,33,27,.92); box-shadow: 0 1.2rem 2.6rem rgba(0,0,0,.35); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.chip::before { content: ""; flex: none; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--ambar) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323352E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/70% no-repeat; }

/* Entrada breve y reposo casi quieto: la interfaz sigue siendo la protagonista. */
.js .nav__logo img { opacity: 0; transform: translateY(-.35rem); }
.js .nav__cta, .js .nav__burger { opacity: 0; }
@media (min-width: 62.01rem) { .js .nav__links { opacity: 0; } .js .nav.is-play .nav__links { opacity: 1; transition: opacity .5s ease .25s; } }
.js .nav.is-play .nav__logo img { opacity: 1; transform: none; transition: opacity .5s ease .05s,transform .5s var(--ease) .05s,height .45s var(--ease); }
.js .nav.is-play .nav__cta,.js .nav.is-play .nav__burger { opacity: 1; transition: opacity .45s ease .2s; }
.js .hero .hero__title .w { display: inline-block; opacity: 0; transform: translateY(.4em); }
.js .hero.is-play .hero__title .w { opacity: 1; transform: none; transition: opacity .55s var(--ease),transform .6s var(--ease); transition-delay: calc(.16s + var(--i)*35ms); }
.js .hero .phone-wrap { opacity: 0; }
.js .hero.is-play .phone-wrap { animation: phone-rise 1.1s var(--ease) .35s both, phone-breathe 8s ease-in-out 2s infinite alternate; }
.js .hero .chip { opacity: 0; }
.js .hero.is-play .chip { animation: chip-arrive .65s var(--ease) both; animation-delay: var(--cd,2s); }
@keyframes phone-rise { from { opacity: 0; transform: translateY(2.7rem) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes phone-breathe { from { translate: 0 0; } to { translate: 0 -.45rem; } }
@keyframes chip-arrive { from { opacity: 0; transform: translateY(.7rem) scale(.96); } to { opacity: 1; transform: none; } }
.hero.is-offscreen .phone-wrap { animation-play-state: paused !important; }

@media (max-width: 64rem) {
  .hero { min-height: 0; padding-top: 5.2rem; }
  .hero__index { top: 5.9rem; font-size: .54rem; }
  .hero__inner { min-height: 0; display: flex; flex-direction: column; padding-top: 4.2rem; }
  .hero__text { position: relative; inset: auto; width: min(100%,42rem); padding: 1rem 0 .7rem; }
  .hero__title { max-width: 12ch; font-size: clamp(3.35rem,8vw,5.6rem); }
  .hero__scene { position: relative; inset: auto; width: 100vw; height: 35rem; margin-left: calc((100% - 100vw)/2); overflow: hidden; }
  .hero__stage-mark { top: 2%; right: var(--gutter); }
  .phone-wrap { width: min(36rem,100vw); top: -8%; left: 0; right: 0; margin-inline: auto; }
  .rig { transform: perspective(1800px) rotateY(-4deg) rotateX(2deg) rotateZ(-1deg); }
  .chip-pos--1 { left: 3%; top: 28%; }
  .chip-pos--2 { right: 3%; top: 61%; }
  .hero__scene .chip { font-size: .68rem; padding: .58rem .7rem; }
  .beam { opacity: .2; }
}
@media (max-width: 40rem) {
  .hero { padding-top: 4.2rem; }
  .hero__index { top: 4.75rem; left: 1rem; right: 1rem; font-size: .46rem; letter-spacing: .1em; }
  .hero__inner { padding-top: 3.2rem; }
  .hero__eyebrow { max-width: 28ch; margin-bottom: .9rem; font-size: .6rem; letter-spacing: .13em; }
  .hero__title { max-width: 10.5ch; font-size: clamp(3rem,11.3vw,4.15rem); line-height: .9; }
  .hero__sub { max-width: 34rem; margin-top: 1rem; font-size: 1rem; }
  .hero__cta { display: grid; gap: .65rem; margin-top: 1.25rem; }
  .hero__cta .btn { width: 100%; min-height: 3rem; }
  .hero__note { max-width: 34rem; margin-top: .9rem; font-size: .69rem; }
  .hero__scene { height: 29rem; margin-top: -.5rem; }
  .hero__stage-mark { top: 0; right: 1rem; font-size: .47rem; gap: .45rem; }
  .phone-wrap { width: min(26rem,90vw); top: -5%; left: 0; right: 0; margin-inline: auto; }
  .chip-pos--1 { top: 28%; left: 2%; }
  .chip-pos--2 { top: 63%; right: 1%; }
  .hero__scene .chip { gap: .38rem; padding: .48rem .55rem; font-size: .56rem; }
  .hero__scene .chip::before { width: .95rem; height: .95rem; }
  .render-screen .chat-head__name { font-size: .58rem; }
  .render-screen .chat-head__sub { font-size: .46rem; }
  .render-screen .msg { font-size: .58rem; }
  .render-screen .msg time { font-size: .39rem; }
  .bokeh i:nth-child(n+3) { display: none; }
  .grain { display: none; }
}
@media (max-width: 360px) {
  .hero__title { font-size: 2.8rem; }
  .hero__index span:last-child { display: none; }
  .hero__scene .chip-pos--2 { display: none; }
}
@media (max-width: 64rem), (hover:none) {
  .grain { display: none; }
  .bokeh i { filter: blur(4px); mix-blend-mode: normal; transition: none; }
  .beam { filter: none; mix-blend-mode: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero .hero__title .w,.js .hero .phone-wrap,.js .hero .chip,.js .nav__logo img,.js .nav__cta,.js .nav__burger { opacity: 1; transform: none; animation: none; }
  .bokeh i { transition: none; transform: none; }
  @media (min-width: 62.01rem) { .js .nav__links { opacity: 1; } }
}