/* CSV20.0 · Fase 3 — Cinematic narrative layer */
:root{--p3-sky:#78b6ea;--p3-night:#031321;--p3-glow:#ffb22e}
body[data-version="CSV20.0-Signature-Phase3"]{overflow-x:hidden}
.scroll-progress{position:fixed;inset:0 0 auto;z-index:120;height:3px;background:rgba(255,255,255,.18);pointer-events:none}.scroll-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#ffd34e,#ff7b18,#ed3450);box-shadow:0 0 14px rgba(255,126,26,.65)}
.hero{isolation:isolate}.hero:before{transform:scale(1.035);animation:p3HeroDrift 22s ease-in-out infinite alternate}.hero-copy{position:relative}.hero-copy:before{content:"CASTELLÓN · MAESTRAT · PLANA ALTA";display:block;width:max-content;max-width:100%;margin-bottom:15px;padding:8px 13px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(6,23,43,.35);backdrop-filter:blur(12px);font-size:.68rem;font-weight:900;letter-spacing:.17em;color:#fff}.hero h1 .accent{background:linear-gradient(90deg,#fff4c8,#ffc34b 45%,#ff8862);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-card{transform:perspective(1000px) rotateY(-3deg) rotateX(1deg);transition:transform .5s ease}.hero-card:hover{transform:perspective(1000px) rotateY(0) rotateX(0) translateY(-6px)}
.hero-live{display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;margin-top:20px;padding:10px 14px;border:1px solid rgba(255,255,255,.2);border-radius:16px;background:rgba(4,20,36,.52);color:#e9f2fa;backdrop-filter:blur(12px);font-size:.84rem}.hero-live i{width:9px;height:9px;border-radius:50%;background:#4de58a;box-shadow:0 0 0 6px rgba(77,229,138,.13);animation:p3Pulse 2s infinite}.hero-live strong{color:#fff}
.story-journey{position:relative;padding:120px 0;background:var(--p3-night);color:#fff;overflow:hidden}.story-journey:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 20%,rgba(45,123,187,.28),transparent 34%),radial-gradient(circle at 82% 75%,rgba(255,126,26,.16),transparent 32%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,auto,48px 48px,48px 48px}.story-journey .wrap{position:relative;z-index:2}.story-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:54px;align-items:end;margin-bottom:54px}.story-intro h2{font-size:clamp(2.5rem,5.4vw,5.5rem);line-height:.94;letter-spacing:-.055em;margin:8px 0}.story-intro p{max-width:650px;color:#c8d6e3;font-size:1.08rem}.story-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.story-track:before{content:"";position:absolute;left:9%;right:9%;top:34px;height:2px;background:linear-gradient(90deg,#ffc53e,#ff7b18,#ef3b50);opacity:.7}.story-chapter{position:relative;min-height:330px;padding:76px 23px 24px;border:1px solid rgba(255,255,255,.14);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035));backdrop-filter:blur(12px);transition:transform .4s ease,border-color .4s ease,background .4s ease}.story-chapter:hover,.story-chapter.is-active{transform:translateY(-9px);border-color:rgba(255,196,62,.6);background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.055))}.story-node{position:absolute;top:22px;left:23px;width:25px;height:25px;border-radius:50%;background:#071b30;border:6px solid #ffc53e;box-shadow:0 0 0 8px rgba(255,197,62,.13)}.story-number{font-size:.72rem;letter-spacing:.16em;font-weight:900;color:#ffc85a}.story-chapter h3{font-size:1.45rem;line-height:1.12;margin:12px 0}.story-chapter p{color:#c8d6e3;font-size:.93rem}.story-chapter a{display:inline-flex;margin-top:10px;color:#ffd16b;font-weight:850}.story-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}.story-metric{padding:20px;border-radius:20px;background:#fff;color:var(--ink);text-align:center}.story-metric strong{display:block;font-size:clamp(1.6rem,3vw,2.7rem);letter-spacing:-.04em}.story-metric span{font-size:.82rem;color:var(--muted)}
.phase3-marquee{overflow:hidden;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);margin-top:54px}.phase3-marquee div{display:flex;width:max-content;gap:42px;padding:14px 0;animation:p3Marquee 25s linear infinite}.phase3-marquee span{font-size:.78rem;font-weight:900;letter-spacing:.18em;color:#b9cad8;white-space:nowrap}
.section-head h2,.intro h2{text-wrap:balance}.service-chip,.highlight-card,.payment,.contact-card{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}.service-chip:hover,.highlight-card:hover,.payment:hover,.contact-card:hover{transform:translateY(-5px);border-color:#eac46e;box-shadow:0 22px 45px rgba(16,33,56,.12)}
@keyframes p3HeroDrift{from{transform:scale(1.035) translate3d(-.7%,0,0)}to{transform:scale(1.075) translate3d(.8%,-.5%,0)}}@keyframes p3Pulse{50%{box-shadow:0 0 0 10px rgba(77,229,138,0)}}@keyframes p3Marquee{to{transform:translateX(-50%)}}
@media(max-width:980px){.story-intro{grid-template-columns:1fr;gap:15px}.story-track{grid-template-columns:1fr 1fr}.story-track:before{display:none}.story-metrics{grid-template-columns:1fr 1fr}.hero-card{transform:none}}
@media(max-width:650px){.story-journey{padding:82px 0}.story-track,.story-metrics{grid-template-columns:1fr}.story-chapter{min-height:auto;padding-top:70px}.story-intro h2{font-size:2.7rem}.hero-copy:before{font-size:.56rem;letter-spacing:.1em}.hero-live{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.hero:before,.hero-live i,.phase3-marquee div{animation:none!important}.story-chapter,.hero-card{transition:none!important}}