/* RUIZ PPF STUDIO — premium motion layer */
:root{--ppf-purple:#b62cff;--ppf-cyan:#dffbff}
.page section{position:relative}.premium-reveal{opacity:0;transform:translateY(34px);filter:blur(7px);transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1),filter .85s}.premium-reveal.is-visible{opacity:1;transform:none;filter:none}
.pageHero{overflow:hidden}.pageHero:after{content:"";position:absolute;inset:-50%;pointer-events:none;background:linear-gradient(110deg,transparent 43%,rgba(255,255,255,.07) 49%,rgba(195,55,255,.13) 51%,transparent 57%);transform:translateX(-45%) rotate(5deg);animation:ppfSweep 6.5s ease-in-out infinite}.pageHero>div,.pageHero>img{position:relative;z-index:1}.pageHero img{transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter .8s;box-shadow:0 28px 80px #0008}.pageHero:hover img{transform:scale(1.025);filter:contrast(1.06) saturate(1.06)}
@keyframes ppfSweep{0%,18%{transform:translateX(-55%) rotate(5deg)}55%,100%{transform:translateX(55%) rotate(5deg)}}
.layerVisual{overflow:hidden}.layerVisual:after{content:"";position:absolute;inset:-20%;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.12),transparent 63%);animation:ppfSweep 5s ease-in-out infinite}.layerVisual span{transition:.45s cubic-bezier(.2,.8,.2,1)}.layerVisual span:hover{transform:skewX(-8deg) translateX(10px);box-shadow:0 0 35px #b62cff55;background:#b62cff0d}
.zoneCar img{transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .8s}.zoneCar:hover img{transform:scale(1.018);filter:brightness(1.08)}.zoneTags span,.benefitCards article{transition:.4s cubic-bezier(.2,.8,.2,1)}.zoneTags span:hover,.benefitCards article:hover{transform:translateY(-6px);border-color:#b62cff88;box-shadow:0 18px 45px #6d009522;background:linear-gradient(145deg,#b62cff0c,#090909)}
.projectCard{position:relative;transform-style:preserve-3d;will-change:transform}.projectCard:before{content:"";position:absolute;z-index:5;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(199,77,255,.15),transparent 42%);opacity:0;transition:.35s}.projectCard:hover:before{opacity:1}.projectMedia img{will-change:transform;transition:transform .8s cubic-bezier(.16,1,.3,1),filter .7s}.projectCard:hover .projectMedia img{transform:scale(1.075);filter:saturate(1.12) contrast(1.06)}.projectView{transform:translateY(12px);opacity:0;transition:.45s cubic-bezier(.2,.8,.2,1)}.projectCard:hover .projectView{transform:none;opacity:1}.projectInfo h3{transition:.35s}.projectCard:hover .projectInfo h3{letter-spacing:.035em;color:#fff;text-shadow:0 0 25px #b62cff44}
.projectDisplay{position:relative}.projectDisplay.media-changing img{animation:galleryReveal .6s cubic-bezier(.16,1,.3,1)}@keyframes galleryReveal{0%{opacity:0;transform:scale(1.06) translateX(var(--slide,18px));filter:blur(12px)}100%{opacity:1;transform:none;filter:none}}.projectDisplay:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.09),transparent 58%);transform:translateX(-120%)}.projectDisplay.media-changing:after{animation:galleryFlash .75s ease}@keyframes galleryFlash{to{transform:translateX(120%)}}
.projectThumbs button{transition:.3s}.projectThumbs button:hover{transform:translateY(-4px);border-color:#ffffff55}.projectThumbs button.on{box-shadow:0 0 22px #a523ff55}
.contactPage:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--cx,20%) var(--cy,30%),#a521ff16,transparent 22%)}.quoteWrap aside,.quoteWrap form{transition:.5s cubic-bezier(.2,.8,.2,1)}.quoteWrap aside:hover,.quoteWrap form:hover{border-color:#b62cff88;box-shadow:0 30px 80px #5b00751c}.formStep.active{animation:formIn .5s cubic-bezier(.2,.8,.2,1)}@keyframes formIn{from{opacity:0;transform:translateX(18px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}.choices label{transition:.3s}.choices label:hover{border-color:#b62cff88;transform:translateY(-2px)}
.videoPage{padding:125px 6% 90px;background:radial-gradient(circle at 80% 8%,#320842 0,transparent 25%),#030303;min-height:100vh}.videoHero{max-width:850px;margin-bottom:45px}.videoHero small{letter-spacing:.25em;color:#b62cff;font-weight:800}.videoHero h1{font-size:clamp(48px,7vw,100px);line-height:.86;letter-spacing:-.06em;margin:12px 0}.videoHero h1 b{color:#b62cff}.videoHero p{color:#999;line-height:1.7}.videoGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.videoCard{border:1px solid #ffffff14;border-radius:18px;overflow:hidden;background:#080808;transition:.5s cubic-bezier(.2,.8,.2,1)}.videoCard:hover{transform:translateY(-7px);border-color:#b62cff77;box-shadow:0 30px 70px #65008b25}.videoFrame{aspect-ratio:16/9;overflow:hidden;background:#000;position:relative}.videoFrame video{width:100%;height:100%;object-fit:cover;transition:.7s}.videoCard:hover video{transform:scale(1.025)}.mutedBadge{position:absolute;top:14px;right:14px;background:#050505cc;border:1px solid #ffffff2a;padding:8px 11px;border-radius:999px;font-size:8px;letter-spacing:.12em}.videoMeta{padding:18px 20px}.videoMeta small{color:#b62cff;letter-spacing:.16em}.videoMeta h3{margin:6px 0 0;font-size:23px}
@media(max-width:850px){.videoGrid{grid-template-columns:1fr}.projectCard:hover{transform:none!important}.projectView{opacity:1;transform:none}.premium-reveal{transform:translateY(20px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.premium-reveal{opacity:1;transform:none;filter:none}}
/* === Premium motion v2: homepage === */
.hero{overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-8%;z-index:0;background:inherit;background-size:cover;background-position:center;animation:heroBreath 14s ease-in-out infinite alternate;filter:saturate(1.06) contrast(1.04)}
.hero::after{content:"";position:absolute;z-index:2;inset:-30% -15%;pointer-events:none;background:linear-gradient(112deg,transparent 35%,rgba(255,255,255,.035) 45%,rgba(194,88,255,.13) 49%,rgba(255,255,255,.04) 53%,transparent 63%);transform:translateX(-65%) skewX(-10deg);animation:ppfSweep 7.5s cubic-bezier(.2,.7,.2,1) infinite}
.hero .shade{z-index:1}.heroText,.heroBenefits{z-index:4}
.heroText small{display:inline-block;animation:microFloat 4s ease-in-out infinite}
.heroText h1{transform-origin:left center;animation:titleFloat 7s ease-in-out infinite}
.heroText h1 b{position:relative;text-shadow:0 0 30px rgba(174,36,255,.14)}
.heroText h1 b::after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:1px;background:linear-gradient(90deg,#8d19d9,#d679ff,transparent);animation:titleLine 5s ease-in-out infinite}
.heroBenefits span{transition:transform .35s ease,color .35s ease,text-shadow .35s ease}.heroBenefits span:hover{transform:translateY(-4px);color:#fff;text-shadow:0 0 16px rgba(185,55,255,.65)}
@keyframes heroBreath{0%{transform:scale(1.01) translate3d(0,0,0)}100%{transform:scale(1.075) translate3d(-1.1%,.5%,0)}}
@keyframes ppfSweep{0%,18%{transform:translateX(-72%) skewX(-10deg);opacity:0}30%{opacity:1}58%,100%{transform:translateX(72%) skewX(-10deg);opacity:0}}
@keyframes microFloat{50%{transform:translateY(-4px);filter:drop-shadow(0 0 8px rgba(184,48,255,.45))}}
@keyframes titleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes titleLine{0%,15%{width:0;opacity:0}35%,70%{width:72%;opacity:1}90%,100%{width:0;opacity:0}}
/* Service cards: film-like shimmer */
.services .card{position:relative;background-size:cover;background-position:center;transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s,border-color .55s}
.services .card::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.04) 43%,rgba(188,64,255,.16) 49%,rgba(255,255,255,.05) 55%,transparent 70%);transform:translateX(-120%);transition:transform .8s cubic-bezier(.2,.8,.2,1);z-index:1;pointer-events:none}
.services .card:hover::before{transform:translateX(120%)}.services .card:hover{transform:translateY(-9px) scale(1.015);box-shadow:0 25px 65px rgba(126,20,190,.24)}.services .card>div{position:relative;z-index:2}
.visitorCounter{position:fixed;left:18px;bottom:18px;z-index:28;padding:9px 12px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(4,4,5,.72);backdrop-filter:blur(12px);font-size:7px;letter-spacing:.18em;color:#8e969b;box-shadow:0 8px 30px rgba(0,0,0,.25)}.visitorCounter #visitorCount{color:#fff;font-weight:800}.visitorPulse{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#b72cff;box-shadow:0 0 10px #b72cff;animation:visitorPulse 2s infinite}@keyframes visitorPulse{50%{opacity:.35;transform:scale(.75)}}
@media(prefers-reduced-motion:reduce){.hero::before,.hero::after,.heroText small,.heroText h1,.heroText h1 b::after,.visitorPulse{animation:none!important}}
@media(max-width:560px){.visitorCounter{left:10px;bottom:10px;padding:7px 9px}.hero::before{animation-duration:18s}}

/* === V3: motion that is clearly visible, still premium === */
.hero{background-image:none!important}
.hero::before{content:"";position:absolute;inset:-7%;z-index:0;background:url("../img/hero/hero.jpg") center 48%/cover no-repeat;filter:saturate(1.08) contrast(1.06);animation:heroCamera 11s cubic-bezier(.45,0,.25,1) infinite alternate;will-change:transform,background-position}
.hero .shade{z-index:1}
.hero .heroText{animation:heroTextIn 1.15s cubic-bezier(.16,1,.3,1) both}
.hero .heroText small{animation:heroLabelIn .8s .15s both, microFloat 4s 1.2s ease-in-out infinite}
.hero .heroText h1{animation:heroTitleIn 1s .18s cubic-bezier(.16,1,.3,1) both,titleFloat 7s 1.4s ease-in-out infinite}
.hero .heroText p{animation:heroCopyIn .9s .55s both}.hero .actions{animation:heroCopyIn .9s .72s both}.heroBenefits{animation:heroBenefitsIn .9s 1s both}
.hero::after{z-index:2;animation:heroLightPass 5.6s 1.2s cubic-bezier(.2,.7,.2,1) infinite!important}
@keyframes heroCamera{0%{transform:scale(1.015) translate3d(0,0,0)}45%{transform:scale(1.055) translate3d(-.7%,.1%,0)}100%{transform:scale(1.095) translate3d(-1.8%,.55%,0)}}
@keyframes heroTextIn{from{opacity:0;transform:translate3d(-45px,15px,0);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
@keyframes heroLabelIn{from{opacity:0;letter-spacing:.5em}to{opacity:1;letter-spacing:.18em}}
@keyframes heroTitleIn{from{opacity:0;transform:translateY(35px) scale(.97);filter:blur(9px)}to{opacity:1;transform:none;filter:none}}
@keyframes heroCopyIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes heroBenefitsIn{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}
@keyframes heroLightPass{0%,15%{transform:translateX(-80%) skewX(-12deg);opacity:0}25%{opacity:.8}48%{opacity:.35}58%,100%{transform:translateX(80%) skewX(-12deg);opacity:0}}
.heroText{transition:transform .5s cubic-bezier(.2,.8,.2,1)}

/* Project cards: glass/PPF light response */
.projectCard{overflow:hidden!important}.projectCard::after{content:"";position:absolute;z-index:6;inset:-35%;pointer-events:none;background:linear-gradient(112deg,transparent 37%,rgba(255,255,255,.04) 44%,rgba(223,174,255,.28) 49%,rgba(255,255,255,.08) 53%,transparent 61%);transform:translateX(-70%) rotate(3deg);opacity:0;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .25s}.projectCard:hover::after{transform:translateX(70%) rotate(3deg);opacity:1}.projectCard:hover .projectMedia img{transform:scale(1.105) rotate(.35deg);filter:saturate(1.15) contrast(1.08) brightness(1.04)}

/* Fullscreen gallery: PPF peel reveal */
.projectDisplay{overflow:hidden;background:#030303;isolation:isolate}.projectDisplay img{will-change:transform,filter,opacity}.projectDisplay.media-changing img{animation:ppfPhotoReveal .72s cubic-bezier(.16,1,.3,1)}
.projectDisplay::before{content:"";position:absolute;z-index:8;inset:-12%;pointer-events:none;background:linear-gradient(105deg,transparent 28%,rgba(220,248,255,.08) 39%,rgba(255,255,255,.36) 47%,rgba(190,95,255,.26) 51%,rgba(255,255,255,.08) 57%,transparent 68%);transform:translateX(-125%) skewX(-8deg);filter:blur(.3px)}
.projectDisplay.media-changing::before{animation:ppfPeel .72s cubic-bezier(.3,.7,.2,1)}
.projectDisplay.media-changing::after{animation:galleryFlash .72s ease!important;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.18),rgba(178,45,255,.18),transparent 61%)}
@keyframes ppfPhotoReveal{0%{opacity:.15;transform:scale(1.09) translateX(var(--slide,24px));filter:blur(16px) brightness(1.3)}45%{opacity:.8;filter:blur(3px) brightness(1.08)}100%{opacity:1;transform:scale(1);filter:none}}
@keyframes ppfPeel{0%{transform:translateX(-125%) skewX(-8deg)}100%{transform:translateX(125%) skewX(-8deg)}}
.projectThumbs button{overflow:hidden}.projectThumbs img{transition:transform .45s,filter .45s}.projectThumbs button:hover img{transform:scale(1.12);filter:brightness(1.15)}

/* Videos: preserve source sharpness instead of cropping portrait clips into 16:9 */
.videoGrid{align-items:start}.videoFrame{background:#050505;isolation:isolate}.videoFrame::before{content:"";position:absolute;inset:-12px;background:var(--poster,linear-gradient(135deg,#17051f,#050505));filter:blur(28px) brightness(.38);opacity:.8;z-index:0}.videoFrame video{position:relative;z-index:1;object-fit:contain!important;background:transparent}.videoCard.portrait .videoFrame{aspect-ratio:9/16;max-height:680px}.videoCard.landscape .videoFrame{aspect-ratio:16/9}.videoCard.portrait{max-width:460px;width:100%;justify-self:center}.videoCard.landscape{grid-column:span 1}.mutedBadge{z-index:3}
@media(min-width:1050px){.videoGrid{grid-template-columns:repeat(3,1fr)}.videoCard.landscape{grid-column:span 2}.videoCard.landscape .videoFrame{max-height:520px}}
@media(max-width:850px){.videoCard.portrait{max-width:520px}.videoCard.landscape{grid-column:auto}}

/* Premium materials showcase */
.materialsShowcase{position:relative;display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(38px,6vw,96px);align-items:center;overflow:hidden;background:radial-gradient(circle at 78% 45%,rgba(178,45,255,.13),transparent 31%),linear-gradient(180deg,#070707 0%,#0b0b0c 100%)}
.materialsShowcase::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)}
.materialsShowcase::after{content:"MATERIAL";position:absolute;left:-.035em;bottom:-.23em;font-size:clamp(100px,17vw,270px);font-weight:900;letter-spacing:-.07em;color:rgba(255,255,255,.018);pointer-events:none;line-height:1}
.materialsIntro{position:relative;z-index:2;max-width:610px}.materialsIntro small{display:block;color:#b65cff;font-weight:800;letter-spacing:.19em;margin-bottom:18px}.materialsIntro h2{font-size:clamp(42px,5vw,78px);line-height:.94;letter-spacing:-.055em;margin:0 0 28px;color:#fff}.materialsIntro h2 b{color:#bd55ff;font-weight:900}.materialsIntro p{max-width:560px;color:#aaa;font-size:clamp(15px,1.2vw,18px);line-height:1.8}.materialTags{display:flex;flex-wrap:wrap;gap:9px;margin-top:32px}.materialTags span{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.035);padding:10px 13px;font-size:10px;letter-spacing:.12em;font-weight:800;color:#ddd;backdrop-filter:blur(10px)}
.materialsVisual{position:relative;min-height:570px;z-index:2}.materialMain{position:absolute;inset:0 7% 6% 0;margin:0;overflow:hidden;background:#111;box-shadow:0 35px 90px rgba(0,0,0,.55)}.materialMain::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.92) 100%)}.materialMain img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .8s}.materialsVisual:hover .materialMain img{transform:scale(1.035);filter:contrast(1.04) saturate(1.08)}.materialMain figcaption{position:absolute;z-index:2;left:30px;right:150px;bottom:27px}.materialMain figcaption small{display:block;color:#c06aff;letter-spacing:.18em;font-weight:900;font-size:9px;margin-bottom:8px}.materialMain figcaption strong{color:#fff;font-size:clamp(17px,1.55vw,24px);line-height:1.25}
.materialFloat{position:absolute;width:42%;right:0;top:8%;margin:0;border:1px solid rgba(255,255,255,.16);background:#090909;padding:8px;box-shadow:0 28px 65px rgba(0,0,0,.58);transform:rotate(2deg);overflow:hidden}.materialFloat img{display:block;width:100%;aspect-ratio:1.12/1;object-fit:cover}.materialFloat span{position:absolute;right:16px;bottom:14px;background:rgba(5,5,5,.84);color:#fff;padding:8px 10px;font-size:8px;letter-spacing:.17em;font-weight:900;backdrop-filter:blur(8px)}
.materialSeal{position:absolute;right:3%;bottom:1%;z-index:4;width:112px;height:112px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:8px;background:#b52cff;color:#fff;box-shadow:0 15px 45px rgba(181,44,255,.32);transform:rotate(-8deg)}.materialSeal b{font-size:25px;letter-spacing:-.06em}.materialSeal span{font-size:7px;line-height:1.25;letter-spacing:.1em;font-weight:900}
@media(max-width:900px){.materialsShowcase{grid-template-columns:1fr;gap:32px}.materialsVisual{min-height:470px}.materialMain{inset:0 4% 4% 0}.materialFloat{width:43%;top:5%}.materialSeal{width:90px;height:90px;right:1%}.materialMain figcaption{left:20px;right:105px;bottom:20px}}
@media(max-width:560px){.materialsShowcase{padding-top:72px!important;padding-bottom:72px!important}.materialsIntro h2{font-size:42px}.materialTags span{font-size:8px;padding:8px 9px}.materialsVisual{min-height:390px}.materialMain{inset:0 0 0 0}.materialMain img{object-position:center}.materialFloat{width:45%;right:-8px;top:-18px;padding:5px}.materialFloat span{font-size:6px;right:8px;bottom:8px}.materialSeal{width:76px;height:76px;right:5px;bottom:-22px}.materialSeal b{font-size:19px}.materialSeal span{font-size:5.5px}.materialMain figcaption{left:17px;right:75px;bottom:17px}.materialMain figcaption strong{font-size:15px}}

/* MATERIALS V2 — editorial / cinematic */
.materialsShowcase{min-height:760px;padding-top:110px!important;padding-bottom:110px!important;grid-template-columns:minmax(330px,.78fr) minmax(560px,1.22fr);gap:clamp(45px,6vw,105px);background:linear-gradient(115deg,#030303 0%,#070508 48%,#0c0611 100%);isolation:isolate}
.materialsAura{position:absolute;z-index:0;width:520px;height:520px;right:8%;top:13%;border-radius:50%;background:radial-gradient(circle,rgba(177,34,255,.19),rgba(119,19,190,.06) 38%,transparent 70%);filter:blur(8px);animation:matAura 5s ease-in-out infinite alternate;pointer-events:none}
.materialsShowcase::after{content:"RPF";left:auto;right:-.02em;bottom:-.26em;font-size:clamp(180px,25vw,430px);color:rgba(255,255,255,.018);letter-spacing:-.09em}
.materialsIntro{max-width:590px}.materialEyebrow{display:flex;align-items:center;gap:12px;color:#c34cff;font-size:10px;font-weight:900;letter-spacing:.24em;margin-bottom:23px}.materialEyebrow span{width:42px;height:1px;background:linear-gradient(90deg,#9c1cff,#e177ff);box-shadow:0 0 14px #b32aff}
.materialsIntro h2{font-size:clamp(48px,5vw,82px);line-height:.9;margin-bottom:30px}.materialsIntro p{font-size:14px;line-height:1.85;color:#aaa;max-width:530px}
.materialTags{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:32px}.materialTags span{display:flex;align-items:center;gap:10px;min-height:48px;padding:11px 13px;border-color:rgba(194,73,255,.18);background:linear-gradient(110deg,rgba(255,255,255,.045),rgba(173,36,255,.025));transition:.35s ease}.materialTags span:hover{transform:translateY(-3px);border-color:rgba(194,73,255,.5);background:rgba(177,44,255,.08);box-shadow:0 12px 30px rgba(126,24,185,.12)}.materialTags i{font-style:normal;color:#bb3aff;font-size:8px;letter-spacing:.05em}
.materialLine{display:flex;align-items:center;gap:14px;margin-top:27px;color:#777;font-size:10px;letter-spacing:.08em}.materialLine b{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(194,73,255,.45);border-radius:50%;color:#d36cff;font-size:10px;box-shadow:inset 0 0 18px rgba(177,44,255,.08)}
.materialsVisual{min-height:550px;perspective:1200px}.materialMain{inset:3% 10% 3% 0;border:1px solid rgba(255,255,255,.1);border-radius:4px;box-shadow:0 45px 100px rgba(0,0,0,.7),0 0 0 1px rgba(176,43,255,.035);transform:translateZ(0)}.materialMain::before{content:"";position:absolute;z-index:2;inset:0;border:1px solid transparent;background:linear-gradient(135deg,rgba(206,95,255,.5),transparent 25%,transparent 72%,rgba(130,24,220,.25)) border-box;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}.materialMain::after{background:linear-gradient(180deg,rgba(0,0,0,.02) 42%,rgba(0,0,0,.9) 100%)}.materialMain img{object-position:center 55%}
.materialMain figcaption{left:28px;bottom:26px;right:170px}.materialMain figcaption strong{font-size:clamp(17px,1.4vw,22px)}
.materialFloat{width:39%;right:-1%;top:2%;padding:6px;border-radius:3px;border-color:rgba(205,92,255,.35);transform:rotate(2.5deg) translateZ(45px);box-shadow:0 35px 80px rgba(0,0,0,.75),0 0 35px rgba(153,30,235,.1);transition:transform .8s cubic-bezier(.16,1,.3,1)}.materialFloat img{aspect-ratio:1.22/1;object-position:center}.materialsVisual:hover .materialFloat{transform:rotate(.5deg) translate(-7px,7px) translateZ(45px)}
.materialSeal{right:4%;bottom:0;width:105px;height:105px;background:linear-gradient(145deg,#7b16da,#c13cff);border:1px solid rgba(255,255,255,.28);box-shadow:0 18px 50px rgba(151,27,231,.35),inset 0 0 25px rgba(255,255,255,.09);animation:sealFloat 4s ease-in-out infinite}.materialSeal::after{content:"";position:absolute;inset:7px;border:1px dashed rgba(255,255,255,.35);border-radius:50%}
.materialNumber{position:absolute;right:5%;top:-7%;font-size:clamp(100px,10vw,165px);font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.075);letter-spacing:-.08em;z-index:-1}
.materialScan{position:absolute;z-index:5;left:0;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,#c653ff,rgba(255,255,255,.8),transparent);box-shadow:0 0 20px rgba(198,83,255,.8);opacity:0;pointer-events:none}.materialsVisual.show .materialScan{animation:materialScan 3.6s 1s ease-in-out infinite}
.materialsShowcase .materialsIntro.show .materialEyebrow{animation:matIn .65s .05s both}.materialsShowcase .materialsIntro.show h2{animation:matIn .75s .12s both}.materialsShowcase .materialsIntro.show p{animation:matIn .75s .2s both}.materialsShowcase .materialsIntro.show .materialTags{animation:matIn .75s .28s both}.materialsShowcase .materialsIntro.show .materialLine{animation:matIn .75s .36s both}.materialsShowcase .materialsVisual.show .materialMain{animation:matVisualIn 1s .15s cubic-bezier(.16,1,.3,1) both}.materialsShowcase .materialsVisual.show .materialFloat{animation:matFloatIn 1s .45s cubic-bezier(.16,1,.3,1) both}.materialsShowcase .materialsVisual.show .materialSeal{animation:sealIn .7s .75s cubic-bezier(.16,1,.3,1) both,sealFloat 4s 1.5s ease-in-out infinite}
@keyframes matIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes matVisualIn{from{opacity:0;transform:translateX(55px) scale(.96);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}@keyframes matFloatIn{from{opacity:0;transform:translate(50px,-25px) rotate(7deg) scale(.9)}to{opacity:1;transform:rotate(2.5deg) translateZ(45px)}}@keyframes sealIn{from{opacity:0;transform:scale(.4) rotate(-45deg)}to{opacity:1;transform:scale(1) rotate(-8deg)}}@keyframes sealFloat{50%{transform:translateY(-8px) rotate(-4deg)}}@keyframes matAura{to{transform:scale(1.12) translate(-20px,12px);opacity:.75}}@keyframes materialScan{0%,15%{top:4%;opacity:0}25%{opacity:.7}70%{opacity:.35}82%,100%{top:92%;opacity:0}}
@media(max-width:1100px){.materialsShowcase{grid-template-columns:.85fr 1.15fr;gap:42px}.materialsVisual{min-height:500px}.materialTags{grid-template-columns:1fr}.materialsIntro h2{font-size:55px}}
@media(max-width:900px){.materialsShowcase{min-height:auto;grid-template-columns:1fr;gap:48px}.materialsIntro{max-width:700px}.materialTags{grid-template-columns:1fr 1fr}.materialsVisual{min-height:500px}.materialMain{inset:2% 7% 4% 0}.materialFloat{width:38%;right:0}.materialsAura{right:-20%;top:45%}}
@media(max-width:560px){.materialsShowcase{padding:78px 22px 90px!important;gap:38px}.materialEyebrow{font-size:8px;letter-spacing:.19em}.materialsIntro h2{font-size:42px;line-height:.92}.materialsIntro p{font-size:13px!important;line-height:1.75}.materialTags{grid-template-columns:1fr;gap:7px}.materialTags span{min-height:42px;font-size:8px;padding:9px 11px}.materialLine{margin-top:20px}.materialsVisual{min-height:390px;margin-top:5px}.materialMain{inset:7% 0 0 0;border-radius:3px}.materialMain img{object-position:center}.materialFloat{width:43%;right:-7px;top:-5px}.materialFloat span{font-size:5.5px;padding:6px 7px}.materialSeal{width:72px;height:72px;right:5px;bottom:-22px}.materialSeal b{font-size:18px}.materialSeal span{font-size:5px}.materialMain figcaption{left:16px;right:75px;bottom:15px}.materialMain figcaption strong{font-size:14px}.materialNumber{right:0;top:-10%;font-size:100px}}
@media(prefers-reduced-motion:reduce){.materialsShowcase *{animation:none!important;transition:none!important}}

/* NUEVO PROYECTO · MAZDA 3 */
.projectCardNew{position:relative}.projectCardNew:before{content:"";position:absolute;inset:-1px;z-index:0;background:linear-gradient(135deg,rgba(195,60,255,.75),transparent 30%,transparent 68%,rgba(195,60,255,.3));opacity:.55;pointer-events:none}.projectCardNew>*{position:relative;z-index:1}.projectNew,.videoNew{position:absolute;z-index:6;left:14px;top:14px;padding:8px 11px;background:#b52cff;color:#fff;font-size:8px;font-weight:900;letter-spacing:.14em;box-shadow:0 8px 28px rgba(181,44,255,.4);animation:newPulse 2.4s ease-in-out infinite}.videoCardNew .videoFrame{border:1px solid rgba(190,70,255,.35);box-shadow:0 18px 55px rgba(112,18,170,.12)}.videoCardNew{animation:newCardIn .8s cubic-bezier(.16,1,.3,1) both}.videoCardNew:nth-child(2){animation-delay:.08s}.videoCardNew:nth-child(3){animation-delay:.16s}.videoCardNew:nth-child(4){animation-delay:.24s}@keyframes newPulse{50%{box-shadow:0 8px 34px rgba(181,44,255,.7);transform:translateY(-2px)}}@keyframes newCardIn{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:none}}