/* Hallmark · macrostructure: Cinematic Long Scroll · tone: premium · anchor hue: PIEDRA orange
 * theme: PIEDRA Graphite · enrichment: CSS 3D camera with authentic current app captures
 * reference behavior: one continuous editorial surface crossing a perspective camera
 */

:root { --ink:#0e0e10; --paper:#f6ebd5; --muted:#b5a694; --line:rgba(246,235,213,.14); --orange:#ff8700; --gold:#e0b15b; --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif; --mono:"Cascadia Code","SF Mono",Consolas,monospace; --ease:cubic-bezier(.6,0,.4,1); --duration:19s; }
* { box-sizing:border-box; }
html,body { width:100%; min-height:100%; margin:0; overflow-x:clip; background:#080707; }
body { display:grid; place-items:center; color:var(--paper); font-family:var(--font); }
.film { position:relative; width:min(100vw,calc(100vh * 1.77778)); aspect-ratio:16/9; overflow:hidden; isolation:isolate; background:#080707; }
body.is-reel .film { width:min(100vw,calc(100vh * .5625)); aspect-ratio:9/16; }
.film::before,.film::after { content:""; position:absolute; inset:0; z-index:10; pointer-events:none; }
.film::before { background:linear-gradient(90deg,rgba(0,0,0,.72),transparent 18%,transparent 80%,rgba(0,0,0,.55)); }
.film::after { background:linear-gradient(180deg,rgba(0,0,0,.74),transparent 19%,transparent 80%,rgba(0,0,0,.9)); }
.grain { position:absolute; inset:-30%; z-index:11; opacity:.1; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain .2s steps(2) infinite; }
@keyframes grain { 25% { transform:translate(2%,-3%); } 50% { transform:translate(-3%,2%); } 75% { transform:translate(3%,3%); } }
.brand { position:absolute; top:5.1%; left:5%; z-index:14; display:flex; align-items:center; gap:.7em; font:730 clamp(10px,.85vw,15px)/1 var(--mono); letter-spacing:.12em; color:var(--paper); }
.brand::before { content:""; width:.55em; height:.55em; border-radius:50%; background:var(--orange); box-shadow:0 0 0 .26em rgba(255,135,0,.16); }
.brand span { color:var(--muted); font-size:.8em; }
.cinema { position:absolute; inset:0; perspective:1200px; transform-style:preserve-3d; animation:camera-orbit var(--duration) var(--ease) infinite; }
@keyframes camera-orbit { 0%,100% { perspective-origin:61% 37%; } 50% { perspective-origin:39% 62%; } }
.surface { position:absolute; top:50%; left:50%; width:min(87vw,1180px); padding:clamp(14px,1.6vw,28px); border:1px solid rgba(246,235,213,.13); background:linear-gradient(150deg,#1d1916,#12100f 80%); box-shadow:0 40px 120px rgba(0,0,0,.72); transform-origin:top center; transform-style:preserve-3d; animation:cinematic-scroll var(--duration) var(--ease) infinite; }
@keyframes cinematic-scroll { 0% { opacity:0; transform:translate3d(-50%,30vh,-250px) rotateY(28deg) rotateX(1deg); } 11% { opacity:1; } 88% { opacity:1; } 100% { opacity:0; transform:translate3d(-50%,calc(-100% + 68vh),-100px) rotateY(-27deg) rotateX(-1deg); } }
.surface-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:start; padding-bottom:clamp(28px,4vw,64px); border-bottom:1px solid var(--line); }
.kicker { margin:0 0 .75em; color:var(--orange); font:760 clamp(9px,.75vw,13px)/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3,p { margin:0; } h1 { max-width:11ch; font-size:clamp(36px,5vw,82px); line-height:.91; letter-spacing:-.065em; overflow-wrap:anywhere; }
.lead { max-width:32ch; margin-top:1.35em; color:var(--muted); font-size:clamp(13px,1.15vw,20px); line-height:1.5; }
.edition { padding:.7em .8em; border:1px solid var(--line); border-radius:999px; color:var(--gold); font:700 clamp(8px,.62vw,11px)/1 var(--mono); letter-spacing:.08em; white-space:nowrap; }
.statement { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(20px,4vw,70px); padding:clamp(35px,5vw,90px) 0; }
.statement h2 { font-size:clamp(25px,3.1vw,55px); line-height:.98; letter-spacing:-.055em; overflow-wrap:anywhere; }.statement p { align-self:end; color:var(--muted); font-size:clamp(12px,1.02vw,18px); line-height:1.55; }
.module { position:relative; margin:0 0 clamp(18px,2vw,32px); transform-style:preserve-3d; }.module-label { display:none; }
.shot { overflow:hidden; border:1px solid rgba(246,235,213,.18); border-radius:clamp(10px,1vw,18px); background:#0b0908; box-shadow:0 25px 52px rgba(0,0,0,.5); transform-style:preserve-3d; }.shot img { display:block; width:100%; height:auto; }
.module:nth-of-type(2) .shot { animation:image-pop-1 var(--duration) var(--ease) infinite; }.module:nth-of-type(3) .shot { animation:image-pop-2 var(--duration) var(--ease) infinite; }.module:nth-of-type(4) .shot { animation:image-pop-3 var(--duration) var(--ease) infinite; }.module:nth-of-type(5) .shot { animation:image-pop-4 var(--duration) var(--ease) infinite; }
@keyframes image-pop-1 { 0%,20% { transform:translateZ(0); } 32%,100% { transform:translateZ(58px); } } @keyframes image-pop-2 { 0%,36% { transform:translateZ(0); } 49%,100% { transform:translateZ(58px); } } @keyframes image-pop-3 { 0%,53% { transform:translateZ(0); } 66%,100% { transform:translateZ(58px); } } @keyframes image-pop-4 { 0%,70% { transform:translateZ(0); } 83%,100% { transform:translateZ(58px); } }
.module-copy { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; margin-top:16px; }.module-copy h3 { font-size:clamp(18px,1.8vw,32px); letter-spacing:-.045em; }.module-copy p { color:var(--muted); font-size:clamp(11px,.9vw,16px); line-height:1.5; }
.end-card { display:grid; place-items:center; min-height:clamp(240px,28vw,410px); margin-top:4vw; padding:35px; border:1px solid rgba(255,135,0,.42); border-radius:18px; background:radial-gradient(circle at 50% 5%,rgba(255,135,0,.22),transparent 44%),#17120d; text-align:center; transform:translateZ(80px); }.end-card h2 { max-width:12ch; font-size:clamp(32px,4.4vw,70px); line-height:.92; letter-spacing:-.065em; }.end-card p { margin-top:1em; color:var(--muted); font-size:clamp(12px,1vw,17px); }.download-pill { display:inline-flex; gap:.7em; align-items:center; margin-top:1.7em; padding:.9em 1.15em; border-radius:999px; background:var(--orange); color:#211308; font-size:clamp(11px,.92vw,16px); font-weight:800; }.download-pill::before { content:"↓"; font-size:1.25em; }
.controls { position:fixed; right:16px; bottom:16px; z-index:20; display:flex; gap:8px; }.controls button { min-height:38px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:#211d19; color:var(--paper); font:700 12px var(--font); cursor:pointer; }.controls button:hover,.controls button:focus-visible { border-color:var(--orange); outline:2px solid transparent; }
.film.is-restarting,.film.is-restarting * { animation:none !important; }
body.is-reel .brand { left:7%; top:3%; } body.is-reel .surface { width:156%; padding:3.5%; } body.is-reel .surface-head { grid-template-columns:1fr; } body.is-reel h1 { font-size:clamp(42px,10vw,88px); } body.is-reel .lead { font-size:clamp(13px,3.2vw,21px); } body.is-reel .statement,body.is-reel .module-copy { grid-template-columns:1fr; gap:16px; } body.is-reel .statement h2 { font-size:clamp(31px,7.5vw,62px); } body.is-reel .module { margin-bottom:4vw; } body.is-reel .module-copy h3 { font-size:clamp(22px,5vw,35px); } body.is-reel .end-card { min-height:330px; } body.is-reel .end-card h2 { font-size:clamp(38px,8.8vw,72px); }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }.surface { opacity:1; transform:translate(-50%,-12%) !important; } }

/* Variante autónoma para el fondo del hero de la landing. */
html, body.hero-embed { width:100%; height:100%; min-height:0; overflow:hidden; background:transparent; }
body.hero-embed { display:block; }
.hero-embed .film { width:100%; height:100%; aspect-ratio:auto; background:#080707; }
.hero-embed .surface { width:min(82vw,1180px); }
.hero-embed .film::before { background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.34) 42%,transparent 74%,rgba(0,0,0,.28)); }
.hero-embed .film::after { background:linear-gradient(180deg,rgba(0,0,0,.78),transparent 22%,transparent 76%,rgba(0,0,0,.94)); }

@media (max-width:860px) {
  .hero-embed .surface { width:126%; }
}