/* Cinematic product presentation. Scoped to public content, never the shared header. */
/* La composición sigue el contrato Link de public-design.css: texto izquierdo,
   producto derecho desde 900 px; móvil en flujo. La animación no cambia la rejilla. */
.public-site .cinematic-hero { overflow: clip; }
.public-site .cinematic-hero .demo-stage { --camera: 0; flex: none; width: 100%; min-height: 0; height: clamp(600px, 48vw, 720px); padding: 28px; border-radius: 12px; perspective: 1800px; background: var(--bg2); }
.public-site .cinematic-hero .product-images { height: 100%; }
.public-site .cinematic-hero .product-media { transform-style: preserve-3d; }
.public-site .cinematic-hero .product-desktop { width: 78%; left: 3%; top: 12%; border: 6px solid #252b28; border-radius: 16px; transform: translate3d(0, calc(var(--camera) * -35px), 0) rotateY(calc(-8deg + var(--camera) * 8deg)) rotateX(calc(4deg - var(--camera) * 4deg)); box-shadow: 0 30px 55px rgb(1 30 15 / 20%); }
.public-site .cinematic-hero .product-phone { height: 98%; right: 3%; bottom: -2%; transform: translate3d(0, calc(var(--camera) * 32px), 60px) rotateZ(calc(4deg - var(--camera) * 4deg)); filter: drop-shadow(12px 22px 16px rgb(1 30 15 / 22%)); }
.public-site .cinematic-hero .demo-orbit { width: 80%; height: auto; aspect-ratio: 1; opacity: .55; transform: rotateX(66deg) translateY(160px); }
.public-site .stage-horizon { position: absolute; left: 0; right: 0; top: 72%; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.public-site .cinema { padding-block: 100px; }
.public-site .cinema-heading { display: grid; gap: 32px; margin-bottom: 40px; align-items: end; }
.public-site .cinema-heading h2 { max-width: 15ch; margin: 0; }
.public-site .cinema-heading .eyebrow { margin-bottom: 18px; }
.public-site .cinema-heading .lead { max-width: 49ch; margin: 0; }
.public-site .cinema-figure { margin: 0; }
.public-site .cinema-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; background: var(--bg2); overflow: hidden; }
.public-site .cinema-screen img, .public-site .cinema-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.public-site .cinema-screen video { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; pointer-events: none; }
.public-site .cinema-figure.is-playing video, .public-site .cinema-figure.has-played video { opacity: 1; }
.public-site .cinema-figure figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; color: var(--muted); font-size: 13px; }
.public-site .cinema-figure small { display: block; font-size: 11px; margin-top: 4px; }
.public-site .cinema-figure button[hidden] { display: none; }
.public-site .benefits { overflow: clip; }
.public-site .story-step { min-height: 410px; padding-block: 48px; transition: opacity .3s; }
.public-site .story-number { display: flex; gap: 16px; align-items: center; font-size: 13px; }
.public-site .story-rule { height: 1px; width: 56px; background: var(--line); position: relative; }
.public-site .story-rule::after { content: ''; position: absolute; inset: 0; background: var(--brand-accent); transform-origin: left; scale: 0 1; transition: scale .45s; }
.public-site .story-step.selected .story-rule::after { scale: 1 1; }
.public-site .story-art { --scene-travel: 0; height: min(760px, calc(100svh - 150px)); min-height: 460px; background: radial-gradient(ellipse at 50% 40%, var(--brand-surface), transparent 72%), var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 48px 24px; }
.public-site .story-scene .product-phone { transform: perspective(1200px) translateY(calc(var(--scene-travel) * -14px)) rotateY(calc(var(--scene-travel) * 5deg)); }
.public-site .story-art-orbit { width: 90%; height: auto; aspect-ratio: 1; }
.public-site .story-chapter { position: absolute; top: 24px; left: 24px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.public-site .card { transition: border-color .2s, transform .25s; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .public-site .card:hover { border-color: color-mix(in srgb, var(--brand-accent) 55%, var(--line)); transform: translateY(-4px); }
  .public-site .btn .i { transition: transform .2s; }
  .public-site .btn:hover .i { transform: translateX(3px); }
}
@media (min-width: 900px) {
  .public-site .cinema-heading { grid-template-columns: 1fr 1fr; }
  .public-site .feature-story { gap: 10%; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .public-site .story-art { top: 112px; }
}
@media (max-width: 899px) {
  .public-site .cinematic-hero .demo-stage { height: 540px; padding: 24px; }
  .public-site .cinematic-hero .product-desktop { top: 16%; width: 85%; left: 0; }
  .public-site .cinematic-hero .product-phone { height: 92%; right: 0; }
  .public-site .cinema { padding-block: 64px; }
  .public-site .cinema-heading { gap: 20px; margin-bottom: 28px; }
  .public-site .cinema-heading h2 { max-width: 20ch; }
  .public-site .story-art { height: 380px; min-height: 0; padding-block: 24px 36px; }
  .public-site .story-step { min-height: 290px; padding-block: 30px; }
}
@media (max-width: 639px) {
  .public-site .cinematic-hero .demo-stage { height: 400px; padding: 16px; border-radius: 18px; }
  .public-site .cinematic-hero .product-phone { height: 94%; right: -1%; }
  .public-site .cinematic-hero .product-desktop { width: 96%; top: 20%; left: -8%; border-width: 3px; border-radius: 8px; }
  .public-site .cinema-screen { border-radius: 12px; }
  .public-site .cinema-figure figcaption { font-size: 11px; }
  .public-site .cinema-figure .btn { font-size: 12px; padding-inline: 10px; }
  .public-site .story-art { height: min(340px, 44svh); padding: 20px 16px 36px; }
  .public-site .story-chapter { left: 16px; top: 14px; font-size: 10px; }
  .public-site .story-step { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .public-site .cinematic-hero .product-phone, .public-site .cinematic-hero .product-desktop, .public-site .story-scene .product-phone { transform: none; }
  .public-site .feature-story.motion-ready .story-art { position: relative; top: auto; }
  .public-site .cinema-screen video { transition: none; }
}
/* Mobile chapters keep their image in the reading flow, never covering the text.
   The same scene nodes move back to the shared desktop stage at 900px. */
@media (max-width: 899px) {
  .public-site .feature-story.motion-ready .story-art { display: none; }
  .public-site .story-step { min-height: 0; padding-bottom: 36px; }
  .public-site .story-step .story-scene { display: block; position: relative; height: min(560px, 70svh); margin-top: 28px; padding: 24px; border-radius: 20px; background: radial-gradient(ellipse at 50% 30%, var(--brand-surface), transparent 72%), var(--card); border: 1px solid var(--line); scroll-margin-top: 100px; }
  .public-site .story-step .product-phone { transform: none; }
}