@font-face{font-family:"Aeonik";src:url("/fonts/Aeonik-Regular.woff") format("woff");font-weight:300 400;font-style:normal;font-display:swap} @font-face{font-family:"Aeonik";src:url("/fonts/Aeonik-medium.woff2") format("woff2");font-weight:380;font-style:normal;font-display:swap} @font-face{font-family:"Aeonik";src:url("/fonts/Aeonik-Bold.woff") format("woff");font-weight:600 800;font-style:normal;font-display:swap} :root{--black:#030407;--black2:#080910;--panel:#0d0f17;--paper:#f4f1ec;--paper2:#ebe6df;--ink:#f7f5f1;--muted:rgba(247,245,241,.68);--soft:rgba(247,245,241,.45);--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.07);--cyan:#8ae8ff;--blue:#82aaff;--violet:#a786ff;--pink:#ff9bd5;--gold:#ffc983;--r:30px;--shadow:0 35px 120px rgba(0,0,0,.45);--cw:50vw;--ch:72vh;--ccr:16px} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--ink);font-family:"Aeonik",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}body::after{content:'';position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px}img,video,model-viewer{max-width:100%;display:block}a{color:inherit;text-decoration:none}p{margin:0;color:var(--muted);line-height:1.65}.container{width:min(100% - 48px,1240px);margin:auto}.container-wide{width:min(100% - 48px,1500px);margin:auto}.container-narrow{width:min(100% - 48px,900px);margin:auto}.section{padding:clamp(90px,10vw,170px) 0}.section-tight{padding:clamp(64px,8vw,120px) 0}.paper{background:linear-gradient(180deg,var(--paper),var(--paper2));color:#111319}.paper p,.paper .lead{color:#30323a}.paper .eyebrow{color:#7c5cd6}.eyebrow{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);font-weight:500;margin-bottom:18px}.display-xl{font-size:clamp(62px,8.6vw,156px);line-height:.88;letter-spacing:-.075em;font-weight:300;margin:0}.display-lg{font-size:clamp(52px,6.8vw,116px);line-height:.92;letter-spacing:-.065em;font-weight:300;margin:0}.h1{font-size:clamp(46px,5.8vw,92px);line-height:.95;letter-spacing:-.055em;font-weight:300;margin:0}.h2{font-size:clamp(38px,4.7vw,76px);line-height:1;letter-spacing:-.05em;font-weight:380;margin:0}.h3{font-size:clamp(26px,2.4vw,42px);line-height:1.05;letter-spacing:-.035em;font-weight:380;margin:0}.lead{font-size:clamp(18px,1.4vw,22px);line-height:1.45;letter-spacing:-.01em;font-weight:380;max-width:660px}.measure{max-width:640px}.measure-wide{max-width:980px}.gradient-text{background:linear-gradient(105deg,#fff 10%,#f0d7c7 36%,#90b9ff 64%,#d0a7ff 92%);-webkit-background-clip:text;background-clip:text;color:transparent}.muted{color:var(--muted)}.center{text-align:center}.sr-only{position:absolute;left:-9999px}.site-header{position:fixed;inset:0 0 auto 0;height:84px;z-index:50;background:linear-gradient(180deg,rgba(0,0,0,.68),rgba(0,0,0,.2));backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}.nav-wrap{width:min(100% - 56px,1500px);height:100%;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand img{width:138px;height:auto}.nav{display:flex;align-items:center;gap:40px}.nav a:not(.btn){font-size:14px;color:rgba(255,255,255,.72)}.nav a[aria-current=page]{color:var(--violet)}.nav-toggle{display:none}.mobile-panel{display:none}.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:44px;padding:0 22px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:radial-gradient(120% 160% at 25% 10%,rgba(255,255,255,.18),rgba(255,255,255,.06) 42%,rgba(255,255,255,.03) 100%),linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 60px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.04);backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);font-weight:380;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:white;transform:translateZ(0);will-change:transform,filter,box-shadow;transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s,box-shadow .22s,border-color .22s}.btn::before{content:'';position:absolute;inset:0;z-index:2;padding:1px;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.48),rgba(130,170,255,.30) 45%,rgba(255,255,255,.18));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.42;transition:opacity .22s}.btn::after{content:'';position:absolute;inset:-70% -45%;z-index:1;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.34),rgba(130,210,255,.20) 24%,rgba(255,255,255,0) 58%);transform:translateX(-32%) translateY(-12%) rotate(14deg);opacity:0;mix-blend-mode:screen;transition:opacity .22s,transform .42s cubic-bezier(.2,.8,.2,1)}.btn:hover{transform:translateY(-2px) scale(1.015);filter:saturate(1.12) contrast(1.06);border-color:rgba(255,255,255,.22);box-shadow:0 26px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(255,255,255,.07),0 0 42px rgba(105,170,255,.18)}.btn:hover::before{opacity:.88}.btn:hover::after{opacity:.95;transform:translateX(10%) translateY(-8%) rotate(14deg)}.btn:active{transform:translateY(1px) scale(.97);filter:saturate(1.02) contrast(1.02);box-shadow:inset 0 2px 5px rgba(0,0,0,.28),0 10px 32px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.12)}.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(120,180,255,.24),0 18px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.18)}.btn-small{min-height:36px;padding:0 14px;font-size:.66rem}.btn-plain{background:rgba(255,255,255,.018);box-shadow:none}.btn-row{display:flex;gap:16px;flex-wrap:wrap}.hero{position:relative;min-height:100svh;padding:150px 0 80px;display:flex;align-items:center;overflow:hidden}.hero-bg{position:absolute;inset:0;z-index:0}.hero-bg img,.hero-bg video{width:100%;height:100%;object-fit:cover;opacity:.78}.hero:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 68% 35%,transparent 0 22%,rgba(0,0,0,.18) 42%,rgba(0,0,0,.78) 78%),linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.18) 58%,rgba(0,0,0,.35));z-index:1}.hero-inner{position:relative;z-index:2;width:min(100% - 56px,1540px);margin:auto;display:grid;grid-template-columns:minmax(0,760px) minmax(420px,1fr);align-items:center;gap:48px}.hero-copy .lead{margin-top:26px}.hero-actions{margin-top:44px}.hero-object{justify-self:end;width:min(42vw,690px);filter:drop-shadow(0 45px 120px rgba(78,139,255,.2))}.hero-object img{mix-blend-mode:screen}.trust-bar{background:#05060a;border-block:1px solid var(--line2);padding:5rem 0;overflow:hidden}.trust-inner{padding:0 clamp(24px,4vw,56px);margin-bottom:3rem}.trust-h{font-size:clamp(1.8rem,3.2vw,3rem);font-weight:380;letter-spacing:-.03em;line-height:1.05;color:var(--ink);margin:0}.trust-carousel-wrap{overflow:hidden;position:relative}.trust-carousel-wrap::before,.trust-carousel-wrap::after{content:'';position:absolute;top:0;bottom:0;z-index:2;width:12%;pointer-events:none}.trust-carousel-wrap::before{left:0;background:linear-gradient(to right,#05060a,transparent)}.trust-carousel-wrap::after{right:0;background:linear-gradient(to left,#05060a,transparent)}.trust-carousel{display:flex;align-items:center;gap:4rem;white-space:nowrap;animation:trustroll 30s linear infinite}.tc-name{font-size:.7rem;font-weight:380;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,245,241,.38);flex-shrink:0;transition:color .2s}.tc-name:hover{color:rgba(247,245,241,.78)}@keyframes trustroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}.grav-scroll{position:relative;height:320vh;background:#000}.grav-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center}.grav-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.grav-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,.2) 0%,transparent 30%,rgba(5,5,8,.88) 100%),linear-gradient(to right,rgba(0,0,0,.42) 0%,transparent 60%)}.grav-stage{position:absolute;z-index:3;bottom:5rem;left:50%;transform:translateX(-50%);width:min(100% - 56px,1500px);display:flex;flex-direction:column;align-items:flex-start;padding:0;max-width:820px;pointer-events:none}.grav-stage.active{pointer-events:all}.grav-eyebrow{display:block;font-size:.62rem;font-weight:380;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,245,241,.55);margin-bottom:.8rem;opacity:0;transform:translateY(8px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}.grav-word{display:block;font-size:clamp(3.2rem,7vw,7.5rem);font-weight:300;letter-spacing:-.045em;line-height:.92;color:#f0efec;text-shadow:0 2px 40px rgba(0,0,0,.7);opacity:0;transform:translateY(20px);transition:opacity .65s .06s cubic-bezier(.16,1,.3,1),transform .65s .06s cubic-bezier(.16,1,.3,1);margin-bottom:1.2rem}.grav-sub{font-size:clamp(.9rem,1.4vw,1.1rem);font-weight:380;color:rgba(247,245,241,.78);text-shadow:0 1px 20px rgba(0,0,0,.8);line-height:1.65;max-width:480px;opacity:0;transform:translateY(10px);transition:opacity .6s .14s cubic-bezier(.16,1,.3,1),transform .6s .14s cubic-bezier(.16,1,.3,1)}.grav-stage .btn{opacity:0;transform:translateY(10px);transition:opacity .6s .22s cubic-bezier(.16,1,.3,1),transform .6s .22s cubic-bezier(.16,1,.3,1)}.grav-stage.active .grav-eyebrow,.grav-stage.active .grav-word,.grav-stage.active .grav-sub,.grav-stage.active .btn{opacity:1;transform:translateY(0)}.grav-stage.exit .grav-eyebrow,.grav-stage.exit .grav-word,.grav-stage.exit .grav-sub,.grav-stage.exit .btn{opacity:0;transform:translateY(-14px);transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1)}@media(max-width:768px){.grav-word{font-size:clamp(3rem,12vw,5.5rem)}.grav-scroll{height:260vh}.grav-stage{width:min(100% - 2.8rem,1500px);padding:0;bottom:4rem}}@media(prefers-reduced-motion:reduce){.grav-word,.grav-sub,.grav-eyebrow,.grav-stage .btn{transition:none!important}}.manifesto .h2{margin-bottom:30px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:34px;margin-bottom:46px}.section-head .lead{max-width:480px}.glass-card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));border-radius:var(--r);box-shadow:var(--shadow);backdrop-filter:blur(22px);overflow:hidden}.asset-visual{position:relative;border-radius:26px;background:radial-gradient(circle at 50% 30%,rgba(121,169,255,.16),transparent 46%),#07080d;overflow:hidden}.asset-visual img{width:100%;height:100%;object-fit:cover}.av-lg{aspect-ratio:16/10}.av-square{aspect-ratio:1}.av-icon img{object-fit:contain;padding:28px;mix-blend-mode:screen}.radiography{background:#05060a}.xray-panel{display:grid;grid-template-columns:280px 1fr;border:1px solid var(--line);border-radius:34px;overflow:hidden;background:#07080d}.xray-tabs{padding:18px;border-right:1px solid var(--line2);display:grid;gap:10px}.xray-tab{border:1px solid var(--line2);background:rgba(255,255,255,.025);color:var(--muted);border-radius:18px;padding:17px 18px;text-align:left;font:inherit;cursor:pointer}.xray-tab.is-active{color:#fff;background:linear-gradient(90deg,rgba(128,173,255,.16),rgba(255,255,255,.04));border-color:rgba(130,170,255,.32)}.xray-stage{min-height:560px;position:relative}.xray-content{display:grid;grid-template-columns:minmax(320px,1fr) minmax(360px,560px);gap:36px;align-items:center;padding:44px}.xray-icon{height:420px}.xray-icon img{object-fit:contain;padding:60px;mix-blend-mode:screen}.xray-text .lead{margin-top:20px}.system-steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.step-card{padding:34px 26px;border-right:1px solid var(--line2)}.step-card:last-child{border-right:0}.step-card .h3{font-size:28px;margin-bottom:16px}.project-feature{display:grid;grid-template-columns:1.1fr .9fr;border:1px solid var(--line);border-radius:34px;overflow:hidden}.project-feature>img{width:100%;height:100%;min-height:430px;object-fit:cover}.project-copy{padding:48px;display:flex;flex-direction:column;justify-content:space-between;gap:36px}.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{border:1px solid var(--line);border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));overflow:hidden;transition:transform .25s,border-color .25s}.card:hover{transform:translateY(-6px);border-color:rgba(142,181,255,.34)}.card-media{aspect-ratio:16/10;overflow:hidden}.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s}.card:hover .card-media img{transform:scale(1.045)}.card-body{padding:28px}.card-body p{margin-top:12px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.service-card{padding:28px}.service-card .asset-visual{margin-bottom:26px}.list-lines{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:11px}.list-lines li{color:var(--muted);padding-left:20px;position:relative}.list-lines li:before{content:'◇';position:absolute;left:0;color:var(--gold)}.work-models{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.price-card{padding:36px}.price-card.featured{border-color:rgba(135,177,255,.44);box-shadow:0 0 0 1px rgba(135,177,255,.18),0 30px 110px rgba(75,118,255,.18)}.price{font-size:30px;margin:24px 0;color:#fff}.compare{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:24px;overflow:hidden}.compare td,.compare th{border-bottom:1px solid var(--line2);padding:18px;text-align:left}.compare th{color:#fff}.compare td{color:var(--muted)}.cta-band{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:34px;padding:64px;background:#05060a;display:grid;grid-template-columns:1fr 420px;align-items:center;gap:40px}.cta-band img{width:100%;mix-blend-mode:screen}.hero-simple{position:relative;padding:160px 0 80px;overflow:hidden}.hero-simple-bg{position:absolute;inset:auto;left:50%;top:50%;width:100svh;height:100vw;opacity:.4;transform:translate(-50%,-50%) rotate(90deg)}.hero-simple:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#030407 0 45%,rgba(3,4,7,.25),#030407 96%)}.hero-simple .container-wide{position:relative;z-index:2}.filter-row{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 42px}.chip{border:1px solid var(--line);border-radius:999px;padding:12px 20px;color:var(--muted);background:rgba(255,255,255,.02)}.chip.active{color:#fff;border-color:rgba(135,177,255,.42);box-shadow:0 0 24px rgba(135,177,255,.16)}.article-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.article-feature{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border-radius:32px;overflow:hidden;background:var(--paper);color:#111;margin-bottom:54px}.article-feature img{height:100%;object-fit:cover}.article-feature .copy{padding:54px}.article-feature p{color:#34323a}.case-hero{position:relative;min-height:82svh;display:flex;align-items:end;padding:140px 0 80px;overflow:hidden}.case-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.78}.case-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.15),rgba(0,0,0,.58)),linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.75))}.case-hero .container-wide{position:relative;z-index:2}.case-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.case-meta span{border:1px solid var(--line);border-radius:999px;padding:10px 16px;color:var(--muted)}.gallery-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.gallery-grid img{aspect-ratio:1.25;object-fit:cover;border-radius:18px}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.metric strong{display:block;font-size:72px;line-height:1;letter-spacing:-.06em}.metric span{font-size:20px;color:#333}.form-grid{display:grid;gap:16px}.field{width:100%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:#fff;border-radius:16px;padding:17px 18px;font:inherit}.field::placeholder{color:rgba(255,255,255,.34)}textarea.field{min-height:170px}.site-footer{border-top:1px solid var(--line2);padding:64px 0 24px;background:#05060a}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px}.footer-logo{width:142px;margin-bottom:22px}.footer-title{font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--soft)}.footer-links{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px;color:var(--muted)}.footer-bottom{display:flex;justify-content:space-between;color:var(--soft);font-size:13px;border-top:1px solid var(--line2);margin-top:48px;padding-top:22px}.article-layout{display:grid;grid-template-columns:minmax(0,820px) 260px;gap:80px}.article-body{font-size:19px;line-height:1.75}.article-body p{color:#23252b;margin:22px 0}.article-body h2{font-size:34px;letter-spacing:-.03em;margin:56px 0 16px}.article-body li{margin:10px 0}.toc{position:sticky;top:110px;align-self:start;display:grid;gap:12px}.toc a{border-bottom:1px solid rgba(0,0,0,.12);padding:12px 0;color:#34323a}.faq-list{border-top:1px solid rgba(0,0,0,.15)}.faq-item{border-bottom:1px solid rgba(0,0,0,.15);padding:24px 0}.faq-item summary{cursor:pointer;font-size:20px}.faq-item p{margin-top:14px}.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.kpi{border:1px solid var(--line);border-radius:24px;padding:24px;background:#080910}.kpi strong{font-size:44px;display:block}.process-row{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(0,0,0,.12);border-radius:28px;overflow:hidden}.process-step{background:var(--paper);padding:30px}.process-step strong{display:block;font-size:34px;letter-spacing:-.04em;margin-bottom:14px}@media(max-width:1000px){.nav{display:none}.nav-toggle{display:block;border:1px solid var(--line);background:rgba(255,255,255,.04);color:white;border-radius:999px;padding:12px 18px}.mobile-panel{position:fixed;inset:84px 16px auto 16px;z-index:60;background:rgba(6,7,12,.94);border:1px solid var(--line);border-radius:24px;padding:18px;backdrop-filter:blur(20px);display:none}.nav-open .mobile-panel{display:grid;gap:8px}.mobile-panel a{padding:14px;border-radius:14px;color:white}.hero-inner,.project-feature,.xray-panel,.xray-content,.article-feature,.cta-band,.article-layout{grid-template-columns:1fr}.hero{padding-top:125px}.hero-object{justify-self:start;width:min(86vw,520px);opacity:.7}.display-xl{font-size:clamp(54px,15vw,84px)}.display-lg{font-size:clamp(48px,13vw,78px)}.service-grid,.cards-grid,.work-models,.article-grid,.footer-grid,.metric-grid,.kpi-row,.process-row{grid-template-columns:1fr}.system-steps{grid-template-columns:1fr;border:0}.step-card{border:1px solid var(--line2);border-radius:22px;margin-bottom:12px}.section-head{display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem}.xray-tabs{border-right:0;border-bottom:1px solid var(--line2)}.xray-icon{height:300px}.hero-simple-bg{position:absolute;left:50%;top:50%;width:100svh;height:100vw;opacity:.32;margin-top:0;transform:translate(-50%,-50%) rotate(90deg)}.hero-simple:after{background:linear-gradient(180deg,#030407 0,rgba(3,4,7,.45),#030407 100%)}.gallery-grid{grid-template-columns:repeat(2,1fr)}.footer-bottom{display:grid;gap:12px}.site-header{height:74px}.brand img{width:120px}.hero-simple{padding-top:125px}} /* ── COVERFLOW ── */ .coverflow-wrap{position:relative;width:100%;overflow:hidden;background:var(--black)} .coverflow-wrap::before,.coverflow-wrap::after{content:'';position:absolute;top:0;bottom:0;z-index:15;width:6vw;pointer-events:none} .coverflow-wrap::before{left:0;background:linear-gradient(to right,var(--black) 0%,transparent 100%)} .coverflow-wrap::after{right:0;background:linear-gradient(to left,var(--black) 0%,transparent 100%)} .cf-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:2200px;perspective-origin:50% 48%} .cf-track{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d} .cf-card{position:absolute;width:var(--cw);height:var(--ch);border-radius:var(--ccr);overflow:hidden;will-change:transform,filter,opacity;transform-style:preserve-3d;transition:transform .58s cubic-bezier(.25,.46,.45,.94),filter .58s cubic-bezier(.25,.46,.45,.94),opacity .58s cubic-bezier(.25,.46,.45,.94),box-shadow .58s cubic-bezier(.25,.46,.45,.94)} .cf-card[data-pos="0"]{transform:translateX(0) translateZ(0) rotateY(0deg) scale(1);filter:brightness(1) saturate(1);opacity:1;z-index:10;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 80px rgba(0,0,0,.7),0 60px 140px rgba(0,0,0,.35)} .cf-card[data-pos="-1"]{transform:translateX(-58%) translateZ(-180px) rotateY(14deg) scale(.9);filter:brightness(.62) saturate(.72);opacity:1;z-index:7;cursor:pointer} .cf-card[data-pos="1"]{transform:translateX(58%) translateZ(-180px) rotateY(-14deg) scale(.9);filter:brightness(.62) saturate(.72);opacity:1;z-index:7;cursor:pointer} .cf-card[data-pos="-1"]:hover{filter:brightness(.82) saturate(.9);transform:translateX(-58%) translateZ(-160px) rotateY(14deg) scale(.91)} .cf-card[data-pos="1"]:hover{filter:brightness(.82) saturate(.9);transform:translateX(58%) translateZ(-160px) rotateY(-14deg) scale(.91)} .cf-card[data-pos="-2"]{transform:translateX(-100%) translateZ(-320px) rotateY(22deg) scale(.76);filter:brightness(.18) saturate(.3);opacity:.55;z-index:4} .cf-card[data-pos="2"]{transform:translateX(100%) translateZ(-320px) rotateY(-22deg) scale(.76);filter:brightness(.18) saturate(.3);opacity:.55;z-index:4} .cf-card[data-pos="-3"]{transform:translateX(-130%) translateZ(-400px) rotateY(24deg) scale(.68);filter:brightness(.08);opacity:.2;z-index:2} .cf-card[data-pos="3"]{transform:translateX(130%) translateZ(-400px) rotateY(-24deg) scale(.68);filter:brightness(.08);opacity:.2;z-index:2} .cf-card[data-pos="fl"]{transform:translateX(-160%) translateZ(-500px);opacity:0;z-index:1;pointer-events:none} .cf-card[data-pos="fr"]{transform:translateX(160%) translateZ(-500px);opacity:0;z-index:1;pointer-events:none} .cf-slides{position:absolute;inset:0;display:flex;flex-direction:column;transition:transform .42s cubic-bezier(.25,.46,.45,.94)} .cf-slide{width:100%;height:var(--ch);flex-shrink:0;position:relative} .cf-slide img{width:100%;height:100%;object-fit:cover;display:block} .cf-placeholder{width:100%;height:100%;background:linear-gradient(135deg,rgba(18,18,45,.7),rgba(5,5,8,.95));display:flex;align-items:center;justify-content:center} .cf-placeholder span{font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,239,236,.14)} .cf-sheen{position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(to bottom,rgba(255,255,255,.055) 0%,transparent 100%);pointer-events:none;z-index:3;opacity:0;transition:opacity .4s;border-radius:var(--ccr) var(--ccr) 0 0} .cf-card[data-pos="0"] .cf-sheen{opacity:1} .cf-veil{position:absolute;bottom:0;left:0;right:0;height:55%;background:linear-gradient(to top,rgba(5,5,8,.92) 0%,rgba(5,5,8,.28) 60%,transparent 100%);pointer-events:none;z-index:4} .cf-info{position:absolute;bottom:0;left:0;right:0;padding:1.8rem 2rem;z-index:6;pointer-events:none} .cf-enter{position:absolute;inset:0;z-index:8;cursor:pointer;display:block} .cf-cat{display:block;font-size:.54rem;font-weight:380;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,239,236,.42);margin-bottom:.4rem} .cf-name{font-size:clamp(1.4rem,2.2vw,2.2rem);font-weight:380;letter-spacing:-.03em;line-height:1;margin-bottom:.25rem;color:var(--ink)} .cf-sub{font-size:.7rem;color:rgba(240,239,236,.35)} .cf-meta{position:absolute;top:1.1rem;right:1.1rem;padding:.5rem .9rem;background:rgba(5,5,8,.42);border:1px solid rgba(240,239,236,.1);border-radius:16px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:6;text-align:right;opacity:0;transform:translateY(-5px) scale(.96);transition:opacity .32s cubic-bezier(.16,1,.3,1),transform .32s cubic-bezier(.16,1,.3,1);pointer-events:none} .cf-card[data-pos="0"] .cf-meta{opacity:1;transform:translateY(0) scale(1)} .cf-meta-yr{font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,239,236,.3);margin-bottom:.18rem} .cf-meta-cl{font-size:.76rem;font-weight:380} .cf-link{position:absolute;top:1.1rem;left:1.1rem;width:34px;height:34px;border-radius:999px;background:rgba(240,239,236,.07);border:1px solid rgba(240,239,236,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--ink);text-decoration:none;z-index:7;opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s,background .2s} .cf-card[data-pos="0"] .cf-link{opacity:1;transform:scale(1)} .cf-link:hover{background:rgba(240,239,236,.14);border-color:rgba(240,239,236,.24)} .cf-ticks{position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;z-index:7;opacity:0;transition:opacity .3s;pointer-events:none} .cf-card[data-pos="0"] .cf-ticks{opacity:1} .cf-tick{height:1px;background:rgba(240,239,236,.25);border-radius:1px;transition:width .3s cubic-bezier(.16,1,.3,1),background .3s;width:12px} .cf-tick.active{width:22px;background:rgba(240,239,236,.85)} .cf-hud{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.7rem;z-index:20} .cf-counter{font-size:.58rem;font-weight:380;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,239,236,.3)} .cf-dots{display:flex;gap:.4rem;align-items:center} .cf-dot{width:18px;height:4px;border-radius:2px;background:rgba(240,239,236,.18);border:none;padding:0;transition:background .3s,width .3s cubic-bezier(.16,1,.3,1)} .cf-dot.on{width:28px;background:var(--ink)} .cf-arrows{display:flex;gap:.5rem} .cf-btn{width:34px;height:34px;border-radius:999px;background:rgba(240,239,236,.06);border:1px solid rgba(240,239,236,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);color:var(--ink);font-size:.8rem;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,transform .15s} .cf-btn:hover{background:rgba(240,239,236,.11);border-color:rgba(240,239,236,.2)} .cf-btn:active{transform:scale(.91)} /* ── PROJECTS BAR ── */ .projects-bar{position:static;background:transparent;display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;padding:clamp(28px,4vw,52px) max(28px,calc((100% - 1500px)/2)) 0;flex-wrap:wrap} .projects-bar-h{font-size:clamp(2.15rem,3.65vw,3.9rem);font-weight:380;letter-spacing:-.045em;line-height:1.02;color:var(--ink);margin:0} .projects-bar-right{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap} .cf-search-box{display:flex;align-items:center;gap:.5rem;padding:.36rem .85rem;background:rgba(247,245,241,.05);border:1px solid rgba(247,245,241,.1);border-radius:999px;transition:border-color .2s,background .2s} .cf-search-box:focus-within{border-color:rgba(167,134,255,.4);background:rgba(247,245,241,.07)} .cf-search-icon{font-size:.68rem;color:rgba(247,245,241,.3)} .cf-search-input{background:none;border:none;outline:none;font-family:"Aeonik",system-ui,sans-serif;font-size:.68rem;letter-spacing:.04em;color:var(--ink);width:130px;transition:width .3s cubic-bezier(.16,1,.3,1)} .cf-search-input::placeholder{color:rgba(247,245,241,.22)} .cf-search-input:focus{width:180px} .cf-filters{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap} .cf-filt{font-family:"Aeonik",system-ui,sans-serif;font-size:.58rem;font-weight:380;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,245,241,.35);background:transparent;border:1px solid rgba(247,245,241,.1);border-radius:999px;padding:.26rem .7rem;transition:background .2s,color .2s,border-color .2s} .cf-filt:hover{color:var(--ink);background:rgba(247,245,241,.06);border-color:rgba(247,245,241,.18)} .cf-filt.on{background:rgba(247,245,241,.09);color:var(--ink);border-color:rgba(247,245,241,.2)} /* ── CASOS DE ÉXITO ── */ .casos-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px} .caso-card{position:relative;border:1px solid var(--line);border-radius:26px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,.016));transition:border-color .28s,transform .28s;text-decoration:none;display:block;color:inherit} .caso-card:hover{border-color:rgba(142,181,255,.32);transform:translateY(-4px)} .caso-media{aspect-ratio:16/9;overflow:hidden} .caso-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s} .caso-card:hover .caso-media img{transform:scale(1.04)} .caso-body{padding:2rem 2rem 1.8rem} .caso-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem} .caso-tag{font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);border:1px solid var(--line2);border-radius:999px;padding:.18rem .6rem} .caso-name{font-size:clamp(1.3rem,1.8vw,1.9rem);font-weight:380;letter-spacing:-.03em;line-height:1.05;margin:0 0 .7rem;color:var(--ink)} .caso-desc{font-size:.88rem;color:var(--muted);line-height:1.65;margin:0 0 1.4rem} .caso-cta{font-size:.66rem;font-weight:380;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);transition:color .2s} .caso-card:hover .caso-cta{color:var(--ink)} /* Side nav arrows */ .cf-side-prev,.cf-side-next{position:absolute;top:50%;transform:translateY(-50%);z-index:18;width:44px;height:44px;border-radius:999px;background:rgba(247,245,241,.08);border:1px solid rgba(247,245,241,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:rgba(247,245,241,.6);cursor:pointer;transition:background .2s,color .2s,opacity .2s;opacity:0} .cf-side-prev{left:1.5vw} .cf-side-next{right:1.5vw} .coverflow-wrap:hover .cf-side-prev,.coverflow-wrap:hover .cf-side-next{opacity:1} .cf-side-prev:hover,.cf-side-next:hover{background:rgba(247,245,241,.16);color:var(--ink)} /* ── AYUNTAMIENTOS LANDING ── */ .ayunt-hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--black);padding:120px 0 80px} .ayunt-hero-bg{position:absolute;inset:0;z-index:0} .ayunt-hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.38;object-position:center right} .ayunt-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,#030407 38%,rgba(3,4,7,.72) 62%,rgba(3,4,7,.25) 100%),linear-gradient(180deg,rgba(3,4,7,.3),transparent 40%,rgba(3,4,7,.7) 85%,#030407 100%)} .ayunt-hero-inner{position:relative;z-index:2;width:min(100% - 48px,1440px);margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px,5vw,80px)} .ayunt-hero-copy .eyebrow{margin-bottom:1.4rem} .ayunt-hero-h{font-size:clamp(2.8rem,5.5vw,6rem);font-weight:380;letter-spacing:-.055em;line-height:.92;margin:0 0 1.4rem;color:var(--ink)} .ayunt-hero-sub{font-size:clamp(1rem,1.3vw,1.18rem);color:var(--muted);line-height:1.65;max-width:520px;margin:0 0 2.4rem} .ayunt-trust-badges{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:2rem} .ayunt-badge{display:flex;align-items:center;gap:.5rem;font-size:.62rem;font-weight:380;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)} .ayunt-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cyan);flex-shrink:0} /* Dashboard mockup */ .ayunt-dashboard{position:relative;display:flex;flex-direction:column;gap:1rem} .ayunt-dash-card{background:rgba(12,13,22,.82);border:1px solid rgba(255,255,255,.12);border-radius:20px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:1.4rem 1.6rem;box-shadow:0 24px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1)} .ayunt-dash-label{font-size:.55rem;font-weight:380;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-bottom:1rem;display:block} .ayunt-metrics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8rem;margin-bottom:1rem} .ayunt-metric strong{display:block;font-size:clamp(1.4rem,2.8vw,2.2rem);font-weight:380;letter-spacing:-.04em;color:var(--ink);line-height:1} .ayunt-metric span{font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .ayunt-metric.highlight strong{font-size:clamp(2rem,4vw,3.2rem);color:var(--cyan)} .ayunt-graph{height:48px;display:flex;align-items:flex-end;gap:2px;margin-top:.5rem} .ayunt-bar{flex:1;border-radius:3px 3px 0 0;background:rgba(138,232,255,.18);transition:height .3s} .ayunt-bar.hi{background:rgba(138,232,255,.5)} .ayunt-dash-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .ayunt-dash-mini{background:rgba(12,13,22,.82);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:1.1rem 1.2rem;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} .ayunt-mini-label{font-size:.52rem;font-weight:380;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:.6rem;display:block} .ayunt-mini-val{font-size:1.5rem;font-weight:380;letter-spacing:-.04em;color:var(--ink)} .ayunt-mini-sub{font-size:.6rem;color:var(--muted);margin-top:.2rem} .ayunt-progress-bar{height:4px;background:rgba(255,255,255,.1);border-radius:2px;margin-top:.8rem;overflow:hidden} .ayunt-progress-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--violet))} /* Problems section */ .ayunt-problems{background:var(--paper);color:#111} .ayunt-problems .eyebrow{color:#777} .ayunt-problems-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.08);border-radius:20px;overflow:hidden;margin-top:clamp(32px,3vw,52px)} .ayunt-problem{background:var(--paper);padding:2rem 1.4rem} .ayunt-problem-icon{width:40px;height:40px;margin-bottom:1.2rem;background:rgba(0,0,0,.06);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem} .ayunt-problem-title{font-size:.88rem;font-weight:380;letter-spacing:-.015em;color:#111;margin-bottom:.5rem} .ayunt-problem-desc{font-size:.78rem;color:#555;line-height:1.6} /* What we resolve */ .ayunt-resolve{background:var(--black2)} .ayunt-resolve-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:start} .ayunt-resolve-statement{font-size:clamp(2rem,3.8vw,4rem);font-weight:380;letter-spacing:-.045em;line-height:1.02;color:var(--ink)} .ayunt-resolve-checks{display:grid;grid-template-columns:1fr 1fr;gap:.9rem .8rem} .ayunt-check{display:flex;align-items:flex-start;gap:.6rem;font-size:.88rem;color:var(--muted);line-height:1.55} .ayunt-check::before{content:'✓';color:var(--cyan);font-weight:380;font-size:.8rem;flex-shrink:0;margin-top:.1rem} /* Ecosystem */ .ayunt-eco{background:var(--panel)} .ayunt-eco-inner{display:grid;grid-template-columns:1fr 480px;gap:clamp(40px,5vw,80px);align-items:start} .ayunt-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden;margin-top:clamp(28px,3vw,44px)} .ayunt-service{background:var(--panel);padding:1.6rem 1.4rem;transition:background .25s} .ayunt-service:hover{background:rgba(138,232,255,.04)} .ayunt-service-icon{font-size:1.2rem;margin-bottom:.8rem;opacity:.7} .ayunt-service-name{font-size:.88rem;font-weight:380;color:var(--ink);margin-bottom:.45rem} .ayunt-service-desc{font-size:.72rem;color:var(--muted);line-height:1.6} .ayunt-ui-mock{background:rgba(8,9,16,.8);border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.6)} .ayunt-ui-header{padding:1rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between} .ayunt-ui-title{font-size:.7rem;font-weight:380;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)} .ayunt-ui-tabs{display:flex;gap:.3rem} .ayunt-ui-tab{font-size:.58rem;letter-spacing:.06em;padding:.22rem .65rem;border-radius:999px;border:1px solid rgba(255,255,255,.1);color:var(--muted);cursor:default} .ayunt-ui-tab.on{background:rgba(138,232,255,.12);border-color:rgba(138,232,255,.3);color:var(--cyan)} .ayunt-ui-body{padding:1.1rem 1.2rem;display:grid;gap:.7rem} .ayunt-event-row{display:flex;align-items:center;gap:.8rem;padding:.7rem .8rem;background:rgba(255,255,255,.03);border-radius:10px;border:1px solid rgba(255,255,255,.06)} .ayunt-event-date{text-align:center;min-width:34px} .ayunt-event-day{font-size:1rem;font-weight:380;letter-spacing:-.03em;line-height:1;color:var(--ink)} .ayunt-event-mon{font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .ayunt-event-info{flex:1} .ayunt-event-name{font-size:.74rem;font-weight:380;color:var(--ink)} .ayunt-event-time{font-size:.6rem;color:var(--muted)} .ayunt-event-badge{font-size:.52rem;padding:.2rem .5rem;border-radius:999px;background:rgba(138,232,255,.12);color:var(--cyan);letter-spacing:.06em;text-transform:uppercase} /* Casos */ .ayunt-cases{background:#030407} .ayunt-cases-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(32px,3vw,52px)} .ayunt-case{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--black2);transition:border-color .28s,transform .28s;display:block;text-decoration:none;color:inherit} .ayunt-case:hover{border-color:rgba(138,232,255,.28);transform:translateY(-4px)} .ayunt-case-media{aspect-ratio:4/3;overflow:hidden} .ayunt-case-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s} .ayunt-case:hover .ayunt-case-media img{transform:scale(1.05)} .ayunt-case-body{padding:1.2rem} .ayunt-case-client{font-size:.56rem;font-weight:380;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:.4rem} .ayunt-case-name{font-size:.92rem;font-weight:380;color:var(--ink);line-height:1.3;margin-bottom:.4rem} .ayunt-case-desc{font-size:.72rem;color:var(--muted);line-height:1.55;margin-bottom:.8rem} .ayunt-case-tags{display:flex;gap:.3rem;flex-wrap:wrap} .ayunt-case-tag{font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);border:1px solid var(--line2);border-radius:999px;padding:.14rem .5rem} /* Pricing */ .ayunt-pricing{background:var(--black)} .ayunt-pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(32px,3vw,52px)} .ayunt-plan{border:1px solid var(--line);border-radius:20px;padding:2rem 1.6rem;background:rgba(255,255,255,.018);position:relative;display:flex;flex-direction:column} .ayunt-plan.featured{border-color:rgba(138,232,255,.42);background:rgba(138,232,255,.04);box-shadow:0 0 0 1px rgba(138,232,255,.14),0 30px 100px rgba(138,232,255,.08)} .ayunt-plan-badge{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--cyan);color:#030407;font-size:.52rem;font-weight:380;letter-spacing:.12em;text-transform:uppercase;padding:.26rem .9rem;border-radius:0 0 10px 10px} .ayunt-plan-name{font-size:.72rem;font-weight:380;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-bottom:.6rem} .ayunt-plan-desc{font-size:.8rem;color:var(--muted);line-height:1.55;margin-bottom:1.4rem} .ayunt-plan-price{font-size:2rem;font-weight:380;letter-spacing:-.04em;color:var(--ink);margin-bottom:.2rem;line-height:1} .ayunt-plan-price span{font-size:.72rem;font-weight:380;color:var(--muted);letter-spacing:0} .ayunt-plan-from{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:1.4rem} .ayunt-plan-list{list-style:none;padding:0;margin:0 0 1.8rem;display:grid;gap:.55rem;flex:1} .ayunt-plan-list li{font-size:.78rem;color:var(--muted);padding-left:1.1rem;position:relative;line-height:1.5} .ayunt-plan-list li::before{content:'✓';position:absolute;left:0;color:var(--cyan);font-size:.72rem} .ayunt-plan-cta{margin-top:auto} /* Trust logos */ .ayunt-logos{background:var(--black2);border-block:1px solid var(--line2);overflow:hidden;padding:3.5rem 0} .ayunt-logos-inner{padding:0 clamp(24px,4vw,56px);margin-bottom:2rem} .ayunt-logos-h{font-size:.72rem;font-weight:380;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)} .ayunt-logos-track{display:flex;gap:4rem;white-space:nowrap;animation:trustroll 28s linear infinite;align-items:center} .ayunt-logo-item{font-size:.68rem;font-weight:380;letter-spacing:.08em;text-transform:uppercase;color:rgba(247,245,241,.3);flex-shrink:0;transition:color .2s} .ayunt-logo-item:hover{color:rgba(247,245,241,.7)} /* CTA final */ .ayunt-cta{background:#030407;padding:clamp(80px,12vw,160px) 0;text-align:center;position:relative;overflow:hidden} .ayunt-cta-glow{position:absolute;width:600px;height:600px;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(138,232,255,.05) 0%,transparent 65%);pointer-events:none} .cta-band-glow{position:absolute;width:900px;height:900px;left:28%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(167,134,255,.18) 0%,rgba(130,170,255,.08) 45%,transparent 72%);pointer-events:none;z-index:0} .cta-band>:not(.cta-band-glow){position:relative;z-index:1} .ayunt-cta-inner{position:relative;z-index:2;max-width:680px;margin:0 auto;padding:0 24px} .ayunt-cta-h{font-size:clamp(2.4rem,5vw,5rem);font-weight:380;letter-spacing:-.05em;line-height:.94;margin:0 0 1.4rem;color:var(--ink)} .ayunt-cta-sub{font-size:clamp(.9rem,1.3vw,1.05rem);color:var(--muted);line-height:1.65;margin:0 0 2.6rem} /* Responsive ayuntamientos */ @media(max-width:1100px){.ayunt-pricing-grid{grid-template-columns:repeat(2,1fr)}.ayunt-cases-grid{grid-template-columns:repeat(2,1fr)}.ayunt-eco-inner{grid-template-columns:1fr}.ayunt-ui-mock{display:none}} @media(max-width:900px){.ayunt-hero-inner,.ayunt-resolve-inner{grid-template-columns:1fr}.ayunt-dashboard{display:none}.ayunt-problems-grid{grid-template-columns:1fr 1fr}.ayunt-services-grid{grid-template-columns:1fr 1fr}.ayunt-resolve-checks{grid-template-columns:1fr}} @media(max-width:600px){.ayunt-pricing-grid,.ayunt-cases-grid{grid-template-columns:1fr}.ayunt-problems-grid{grid-template-columns:1fr}.ayunt-services-grid{grid-template-columns:1fr}} @media(max-width:1000px){.casos-grid{grid-template-columns:1fr}:root{--cw:88vw;--ch:68vh}.projects-bar{top:74px}.projects-bar-right{display:none}} @media(max-width:768px){:root{--cw:88vw;--ch:65vh}.cf-card[data-pos="-1"]{transform:translateX(-82%) translateZ(-80px) rotateY(8deg) scale(.9)!important;filter:brightness(.5) saturate(.6)!important}.cf-card[data-pos="1"]{transform:translateX(82%) translateZ(-80px) rotateY(-8deg) scale(.9)!important;filter:brightness(.5) saturate(.6)!important}.cf-card[data-pos="-2"],.cf-card[data-pos="2"],.cf-card[data-pos="-3"],.cf-card[data-pos="3"]{opacity:0!important}.cf-side-prev,.cf-side-next{display:none}} /* ── FASE 04: MANIFIESTO / XRAY / CAPACIDADES ── */ .manifesto-grid{display:grid;grid-template-columns:200px 1fr;gap:clamp(3rem,6vw,7rem);align-items:start} .manifesto-body .h2{margin-bottom:clamp(20px,2.5vw,36px)} .paper .gradient-text{background:linear-gradient(105deg,#1c1c2a 10%,#2d5bb0 36%,#5f44c0 64%,#8b3aad 92%);-webkit-background-clip:text;background-clip:text;color:transparent} .xray-content:not([hidden]){animation:xfadein .38s cubic-bezier(.16,1,.3,1) both} @keyframes xfadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @media(prefers-reduced-motion:reduce){.xray-content:not([hidden]){animation:none}} @media(max-width:900px){.manifesto-grid{grid-template-columns:1fr;gap:2rem}} /* ============================================================ DRBRAND HOME EDIT — capa final de coherencia visual Objetivo: magic-first, botones 4index-like, panel interactivo, organizaciones casi al final y escala tipográfica más contenida. ============================================================ */ /* Escala tipográfica menos bruta en home */ body { --home-h2-max: 62px; --home-h3-max: 34px; } .h2 { font-size: clamp(2.15rem, 3.65vw, var(--home-h2-max)); letter-spacing: -0.045em; } .h3 { font-size: clamp(1.55rem, 2vw, var(--home-h3-max)); letter-spacing: -0.032em; } .lead { font-size: clamp(1rem, 1.08vw, 1.18rem); line-height: 1.45; } /* Botones glass v2: acento único, sin efecto arcoíris */ .btn { --btn-accent-rgb: 130, 170, 255; color: rgba(247,245,241,.68); background: radial-gradient(120% 160% at 22% 8%, rgba(255,255,255,.105), rgba(255,255,255,.035) 38%, rgba(3,4,7,.78) 100%), linear-gradient(180deg, rgba(10,11,18,.88), rgba(3,4,7,.78)); border: 1px solid rgba(255,255,255,.115); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -18px 34px rgba(var(--btn-accent-rgb),.055), 0 0 0 1px rgba(255,255,255,.025), 0 14px 42px rgba(0,0,0,.48), 0 0 28px rgba(var(--btn-accent-rgb),.08); text-shadow: none; backdrop-filter: blur(22px) saturate(1.08); -webkit-backdrop-filter: blur(22px) saturate(1.08); } .btn::before { opacity: .58; background: linear-gradient(135deg, rgba(255,255,255,.48) 0%, rgba(var(--btn-accent-rgb),.32) 42%, rgba(255,255,255,.18) 100%); } .btn::after { inset: -95% -55%; opacity: .22; background: radial-gradient(circle at 28% 38%, rgba(255,255,255,.28), rgba(var(--btn-accent-rgb),.14) 20%, transparent 48%), linear-gradient(105deg, transparent 38%, rgba(255,255,255,.12) 49%, transparent 60%); transform: translateX(-36%) rotate(8deg); mix-blend-mode: screen; } .btn:hover { color: #fff; transform: translateY(-3px) scale(1.018); filter: saturate(1.08) contrast(1.05); border-color: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -20px 40px rgba(var(--btn-accent-rgb),.085), 0 0 0 1px rgba(255,255,255,.05), 0 22px 70px rgba(0,0,0,.54), 0 0 38px rgba(var(--btn-accent-rgb),.18); } .btn:hover::before { opacity: .82; } .btn:hover::after { opacity: .46; transform: translateX(14%) rotate(8deg); } .btn:active { color: rgba(255,255,255,.86); transform: translateY(1px) scale(.965); filter: saturate(1.02) contrast(1.02); box-shadow: inset 0 3px 12px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.5), 0 0 18px rgba(var(--btn-accent-rgb),.10); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--btn-accent-rgb),.20), 0 18px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.18); } .btn.btn-plain { color: rgba(247,245,241,.58); background: rgba(3,4,7,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(255,255,255,.025), 0 0 20px rgba(var(--btn-accent-rgb),.04); } .btn.btn-plain:hover { color: #fff; } /* Magic scroll como primera experiencia */ .grav-scroll { margin-top: 0; } .grav-stage { max-width: none; } .grav-cta { position: absolute; right: 0; bottom: .4rem; margin: 0; pointer-events: auto; } .grav-cta-mobile { display: none; } @media (max-width: 768px) { .grav-cta-desktop { display: none; } .grav-cta-mobile { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border-radius: 999px; font-size: 1.15rem; bottom: 0; } } .grav-word { font-size: clamp(3rem, 6.4vw, 6.8rem); letter-spacing: -0.052em; } /* Organizaciones: casi al final, más sobria y con menor jerarquía */ .trust-bar-late { padding: clamp(2.5rem, 4vw, 4.5rem) 0 clamp(3.5rem, 6vw, 6rem); background: radial-gradient(circle at 50% 0%, rgba(130,170,255,.045), transparent 42%), #05060a; } .trust-bar-late .trust-inner { margin-bottom: 2rem; padding: 0; } .trust-bar-late .eyebrow { margin-bottom: 12px; } .trust-bar-late .trust-h { font-size: clamp(1.05rem, 1.65vw, 1.55rem); letter-spacing: -0.015em; color: rgba(247,245,241,.62); font-weight:380; } .trust-bar-late .tc-name { font-size: .62rem; letter-spacing: .14em; color: rgba(247,245,241,.30); } .trust-bar-late .trust-carousel { gap: 3rem; animation-duration: 34s; } /* Panel interactivo tipo Apple / sistema */ .radiography-system { background: radial-gradient(circle at 72% 22%, rgba(130,170,255,.075), transparent 34%), radial-gradient(circle at 50% 100%, rgba(255,201,131,.04), transparent 30%), #05060a; } .system-panel-head { align-items: flex-start; } .xray-panel-apple { grid-template-columns: minmax(220px, 300px) 1fr; min-height: 640px; border-radius: 34px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)), #06070d; box-shadow: 0 34px 120px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.06); } .xray-system-tabs { padding: 18px; gap: 9px; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.006)); } .xray-system-tabs .xray-tab { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; min-height: 56px; padding: 12px 14px; color: rgba(247,245,241,.54); background: rgba(255,255,255,.018); border-color: rgba(255,255,255,.075); } .xray-system-tabs .xray-tab:hover { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.035); } .xray-system-tabs .xray-tab.is-active { color: #fff; background: radial-gradient(120% 140% at 0% 0%, rgba(130,170,255,.18), transparent 50%), rgba(255,255,255,.045); border-color: rgba(130,170,255,.30); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 28px rgba(130,170,255,.075); } .tab-index { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; font-size: .58rem; letter-spacing: .08em; color: rgba(247,245,241,.42); border: 1px solid rgba(255,255,255,.08); } .xray-tab.is-active .tab-index { color: #fff; border-color: rgba(130,170,255,.30); background: rgba(130,170,255,.10); } .xray-orbit-stage { min-height: 640px; } .xray-panel-apple .xray-content { grid-template-columns: minmax(300px, 480px) minmax(420px, 1fr); min-height: 640px; padding: clamp(2rem, 4vw, 4.5rem); gap: clamp(2rem, 5vw, 5.5rem); } .xray-panel-apple .xray-text { align-self: center; } .xray-panel-apple .xray-text .h3 { font-size: clamp(2.4rem, 4.6vw, 5rem); line-height: .95; } .system-bullets { list-style: none; display: grid; gap: .75rem; margin: 2rem 0 0; padding: 0; } .system-bullets li { position: relative; padding-left: 1.45rem; color: rgba(247,245,241,.62); font-size: .94rem; line-height: 1.45; } .system-bullets li::before { content: ''; position: absolute; left: 0; top: .57em; width: .45rem; height: .45rem; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--pink), var(--gold)); box-shadow: 0 0 18px rgba(130,170,255,.32); } .system-orbit-visual { position: relative; align-self: center; min-height: 440px; border-radius: 30px; overflow: hidden; background: radial-gradient(ellipse at 50% 52%, rgba(130,170,255,.18), transparent 20%), radial-gradient(ellipse at 50% 52%, transparent 0 28%, rgba(130,170,255,.10) 28.3% 28.8%, transparent 29% 100%), radial-gradient(ellipse at 50% 52%, transparent 0 42%, rgba(255,201,131,.12) 42.3% 42.8%, transparent 43% 100%), radial-gradient(circle at 50% 52%, rgba(255,255,255,.05), transparent 46%), #030407; border: 1px solid rgba(255,255,255,.075); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } .system-orbit-visual::before, .system-orbit-visual::after { content: ''; position: absolute; inset: 14%; border-radius: 50%; border: 1px solid rgba(130,170,255,.16); transform: rotateX(64deg) rotateZ(-12deg); box-shadow: 0 0 70px rgba(130,170,255,.10); } .system-orbit-visual::after { inset: 25%; border-color: rgba(255,201,131,.14); transform: rotateX(64deg) rotateZ(22deg); } .orbit-core { position: absolute; left: 50%; top: 52%; width: min(42%, 260px); height: auto; transform: translate(-50%, -50%); object-fit: contain; mix-blend-mode: screen; filter: drop-shadow(0 0 44px rgba(130,170,255,.28)); z-index: 2; } .orbit-label { position: absolute; z-index: 3; display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border-radius: 999px; color: rgba(247,245,241,.72); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; background: rgba(3,4,7,.54); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .orbit-label-top { left: 50%; top: 12%; transform: translateX(-50%); } .orbit-label-right { right: 8%; top: 48%; transform: translateY(-50%); } .orbit-label-bottom { left: 50%; bottom: 12%; transform: translateX(-50%); } .orbit-label-left { left: 8%; top: 48%; transform: translateY(-50%); } /* Capacidades más sobrias */ .service-card { padding: clamp(1.35rem, 2.2vw, 2rem); } .service-card .h3 { font-size: clamp(1.45rem, 2vw, 2rem); } /* Responsive */ @media (max-width: 1000px) { .xray-panel-apple { grid-template-columns: 1fr; } .xray-panel-apple .xray-content { grid-template-columns: 1fr; min-height: auto; } .system-orbit-visual { min-height: 330px; } } @media (max-width: 768px) { .h2 { font-size: clamp(2rem, 10vw, 3.3rem); } .lead { font-size: 1rem; } .xray-system-tabs { grid-template-columns: 1fr; } .orbit-label { display: none; } .trust-bar-late { padding: 3rem 0; } } /* ── AEONIK GLOBAL OVERRIDE ── */ body,button,input,textarea,select,p,a,span,li,.h1,.h2,.h3,.display-xl,.display-lg,.grav-word,.grav-sub,.grav-eyebrow,.eyebrow,.lead,.btn,.nav a,.footer-title,.trust-h,.tc-name,.cf-name,.cf-sub,.cf-cat,.cf-search-input,.cf-filt{font-family:"Aeonik",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} strong,b{font-family:"Aeonik",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:380} a.card{display:block} a.card .card-body h3{transition:color .25s} a.card:hover .card-body h3{color:var(--violet)} /* ── REVEAL ON SCROLL ── */ .rv{opacity:0;transform:translateY(18px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)} .rv.in{opacity:1;transform:translateY(0)} @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}} /* ============================================================ BUTTON GLASS v3 — centro transparente, acento lila espacial Sin fondo negro, sin arcoíris, sin pesos bold. ============================================================ */ .btn { --btn-accent-rgb: 167, 134, 255; color: rgba(247, 245, 241, .70); background: radial-gradient(120% 140% at 50% -30%, rgba(255,255,255,.16), rgba(255,255,255,.045) 28%, rgba(255,255,255,0) 54%), radial-gradient(120% 140% at 50% 130%, rgba(var(--btn-accent-rgb),.16), rgba(var(--btn-accent-rgb),.045) 30%, rgba(var(--btn-accent-rgb),0) 58%); border: 1px solid rgba(var(--btn-accent-rgb), .34); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(var(--btn-accent-rgb),.18), inset 0 0 18px rgba(var(--btn-accent-rgb),.055), 0 0 0 1px rgba(255,255,255,.025), 0 14px 42px rgba(0,0,0,.26), 0 0 32px rgba(var(--btn-accent-rgb),.16); text-shadow: none; backdrop-filter: blur(22px) saturate(1.08); -webkit-backdrop-filter: blur(22px) saturate(1.08); font-weight:380; } .btn::before { opacity: .72; background: linear-gradient(135deg, rgba(255,255,255,.46) 0%, rgba(var(--btn-accent-rgb),.44) 42%, rgba(255,255,255,.16) 100%); } .btn::after { inset: -120% -70%; opacity: .18; background: radial-gradient(circle at 28% 38%, rgba(255,255,255,.20), rgba(var(--btn-accent-rgb),.16) 18%, rgba(var(--btn-accent-rgb),0) 44%), linear-gradient(105deg, transparent 42%, rgba(255,255,255,.10) 50%, transparent 58%); transform: translateX(-34%) rotate(8deg); mix-blend-mode: screen; } .btn:hover { color: #fff; transform: translateY(-3px) scale(1.018); filter: saturate(1.08) contrast(1.04); border-color: rgba(var(--btn-accent-rgb), .52); background: radial-gradient(120% 140% at 50% -30%, rgba(255,255,255,.20), rgba(255,255,255,.055) 28%, rgba(255,255,255,0) 54%), radial-gradient(120% 140% at 50% 130%, rgba(var(--btn-accent-rgb),.22), rgba(var(--btn-accent-rgb),.065) 30%, rgba(var(--btn-accent-rgb),0) 58%); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(var(--btn-accent-rgb),.24), inset 0 0 24px rgba(var(--btn-accent-rgb),.085), 0 0 0 1px rgba(255,255,255,.035), 0 20px 58px rgba(0,0,0,.30), 0 0 44px rgba(var(--btn-accent-rgb),.26); } .btn:hover::before { opacity: .92; } .btn:hover::after { opacity: .34; transform: translateX(12%) rotate(8deg); } .btn:active { color: rgba(255,255,255,.88); transform: translateY(1px) scale(.965); filter: saturate(1.02) contrast(1.02); box-shadow: inset 0 2px 10px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 16px rgba(var(--btn-accent-rgb),.07), 0 7px 20px rgba(0,0,0,.28), 0 0 20px rgba(var(--btn-accent-rgb),.14); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--btn-accent-rgb),.22), 0 18px 54px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 20px rgba(var(--btn-accent-rgb),.08); } .btn.btn-plain { color: rgba(247,245,241,.62); background: transparent; border-color: rgba(var(--btn-accent-rgb), .24); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 14px rgba(var(--btn-accent-rgb),.035), 0 0 20px rgba(var(--btn-accent-rgb),.08); } .btn.btn-plain:hover { color: #fff; background: radial-gradient(120% 140% at 50% -30%, rgba(255,255,255,.14), rgba(255,255,255,.035) 28%, rgba(255,255,255,0) 54%), radial-gradient(120% 140% at 50% 130%, rgba(var(--btn-accent-rgb),.16), rgba(var(--btn-accent-rgb),.04) 30%, rgba(var(--btn-accent-rgb),0) 58%); } /* Consentimiento RGPD en formularios */ .form-consent { display: flex; align-items: flex-start; gap: 10px; font-size: .85rem; line-height: 1.5; color: rgba(255,255,255,.55); } .form-consent input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: rgb(var(--btn-accent-rgb)); } .form-consent a { color: rgba(255,255,255,.8); text-decoration: underline; } /* ── SISTEMA: 7 fases (alineado con el panel interactivo de la home) ── */ .system-steps-7{grid-template-columns:repeat(7,1fr)} .system-steps-7 .step-card{padding:30px 20px} @media(max-width:1280px){.system-steps-7{grid-template-columns:repeat(4,1fr)}.system-steps-7 .step-card{border-bottom:1px solid var(--line2)}} @media(max-width:768px){.system-steps-7{grid-template-columns:1fr}} /* ── CONTACTO: separación entre columnas cuando son tarjetas independientes ── */ .project-feature:has(>.glass-card),.project-feature[style*="border:0"]{gap:clamp(22px,3vw,40px);border:0;overflow:visible} /* ── MINI-ICON: icono iridiscente para cards (fondo oscuro) ── */ .mini-icon{width:58px;height:58px;border-radius:16px;background:rgba(167,134,255,.07);border:1px solid rgba(167,134,255,.16);display:flex;align-items:center;justify-content:center;margin-bottom:16px} .mini-icon img{width:42px;height:42px;object-fit:contain;mix-blend-mode:screen} /* ── LEGIBILIDAD: componentes con fondo claro siempre con texto oscuro ── */ .process-step{color:#111319} .process-step p{color:#3a3d46} .process-step strong{color:#7c5cd6} /* ── LEGIBILIDAD SOBRE FONDO CLARO (.paper) ── */ .paper .compare{border-color:rgba(17,19,25,.16)} .paper .compare th{color:#111319} .paper .compare td{color:#3a3d46} .paper .compare td,.paper .compare th{border-bottom-color:rgba(17,19,25,.12)} .paper .muted{color:#4a4d56} .paper .soft,.paper .footer-title{color:#5a5d66} .paper .list-lines li{color:#3a3d46;border-color:rgba(17,19,25,.12)} .paper .glass-card{background:rgba(255,255,255,.55);border-color:rgba(17,19,25,.12);color:#111319} .paper .glass-card p{color:#3a3d46} .article-feature .eyebrow{color:#7c5cd6} /* ── BOTONES SOBRE FONDO CLARO (.paper): texto oscuro, acento lila oscuro ── */ .paper .btn,.article-feature .btn,.process-step .btn{color:#2a2c34;border-color:rgba(95,68,192,.34);background:radial-gradient(120% 140% at 50% -30%,rgba(255,255,255,.65),rgba(255,255,255,.1) 54%),rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 12px 34px rgba(28,28,42,.12),0 0 26px rgba(95,68,192,.10);text-shadow:none} .paper .btn::before,.article-feature .btn::before{opacity:.3} .paper .btn::after,.article-feature .btn::after{opacity:.12} .paper .btn:hover,.article-feature .btn:hover{color:#0c0d12;border-color:rgba(95,68,192,.55);background:radial-gradient(120% 140% at 50% -30%,rgba(255,255,255,.8),rgba(255,255,255,.2) 54%),rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 16px 44px rgba(28,28,42,.16),0 0 36px rgba(95,68,192,.20)} .paper .btn.btn-plain,.article-feature .btn.btn-plain{color:#2a2c34;background:transparent} .paper .btn.btn-plain:hover,.article-feature .btn.btn-plain:hover{color:#0c0d12} /* ── HEADINGS — Aeonik peso 400 (antes 500) ── */ .h2,.h3,.trust-h,.ayunt-cta-h,.cf-name{font-weight:380} /* ── NAV / FOOTER — refinamiento tipográfico y acento lila ── */ .nav a:not(.btn){transition:color .2s} .nav a:not(.btn):hover{color:var(--violet)} .site-footer{font-size:15px;line-height:1.45;font-weight:300} .site-footer .muted{font-size:14.5px;line-height:1.5} .footer-links{gap:7px} .footer-links a,.footer-bottom a{transition:color .2s} .footer-links a:hover,.footer-bottom a:hover{color:var(--violet)} .footer-social{display:flex;gap:12px;margin-top:20px;padding:0;list-style:none} .footer-social a{width:34px;height:34px;border-radius:999px;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:color .2s,border-color .2s} .footer-social a:hover{color:var(--violet);border-color:var(--violet)} .footer-social svg{width:15px;height:15px;fill:currentColor} /* Coverflow: solo flechas laterales en desktop; en móvil sin flechas (swipe + dots) */ .cf-hud .cf-arrows{display:none} /* ── CTA BAND con imagen — imagen a sangre dentro del contenedor ── */ .cta-band-media{padding:0;align-items:stretch;gap:0} .cta-band-media>div:not(.cta-band-glow){padding:clamp(36px,5vw,64px);align-self:center} .cta-band-media img{height:100%;object-fit:cover;display:block} @media(max-width:900px){.cta-band-media img{width:100%;height:clamp(220px,42vw,320px)}} /* ── VÍDEO DE PÍLDORAS como fondo (sustituye a la píldora estática) ── */ .cta-band video{width:100%} .cta-band-media video{width:100%;height:100%;object-fit:cover;display:block} @media(max-width:900px){.cta-band-media video{width:100%;height:clamp(220px,42vw,320px)}} video.hero-simple-bg{object-fit:cover} /* ── SECCIÓN CON VÍDEO DE FONDO (contenedores tipo paquetes) ── */ .section-video{position:relative;overflow:hidden} .section-video .section-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .section-video .section-bg-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(3,4,7,.88),rgba(3,4,7,.55) 50%,rgba(3,4,7,.9));pointer-events:none} .section-video>.container,.section-video>.container-wide,.section-video>.container-narrow{position:relative;z-index:2} @media(max-width:768px){.section-video .section-bg-video{object-position:left center}.section-video .section-bg-overlay{background:rgba(3,4,7,.62)}} /* ── COVERFLOW: card activa al ancho de la caja principal ── */ .coverflow-wrap{--cw:min(100vw - 48px,1340px)} /* ── INTERVENCIONES (scaffolding portfolio) ── */ .badge-wip{display:inline-flex;align-items:center;gap:.45rem;font-size:.56rem;font-weight:380;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,201,131,.88);border:1px solid rgba(255,201,131,.3);border-radius:999px;padding:.32rem .75rem;background:rgba(255,201,131,.06)} .badge-wip::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(255,201,131,.6)} .caso-media video,.cf-slide video{width:100%;height:100%;object-fit:cover;display:block} .interv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .interv-grid .caso-media{aspect-ratio:16/10} .interv-grid .caso-body{padding:1.4rem 1.4rem 1.3rem} .interv-grid .caso-name{font-size:1.1rem} .interv-grid .caso-desc{font-size:.78rem;margin-bottom:0} .caso-card.is-hidden{display:none} .ph-cover{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 72% 18%,rgba(167,134,255,.13),transparent 52%),radial-gradient(circle at 15% 90%,rgba(130,170,255,.07),transparent 40%),linear-gradient(180deg,#0d0f17,#080910)} .ph-cover span{font-size:clamp(2.4rem,4vw,3.4rem);font-weight:300;letter-spacing:-.04em;color:rgba(247,245,241,.16);line-height:1} @media(max-width:1000px){.interv-grid{grid-template-columns:1fr 1fr}} @media(max-width:640px){.interv-grid{grid-template-columns:1fr}} /* ── COOKIE BANNER ── */ .cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:9100;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;padding:1.1rem 1.4rem;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:rgba(6,7,12,.9);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);box-shadow:0 24px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)} .cookie-banner p{margin:0;font-size:.8rem;line-height:1.55;color:var(--muted);max-width:62ch} .cookie-banner p a{color:var(--ink);text-decoration:underline} .cookie-actions{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center} .cookie-link{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);background:none;border:none;cursor:pointer;padding:.4rem;font-family:inherit;transition:color .2s} .cookie-link:hover{color:var(--ink)} .cookie-prefs{width:100%;display:flex;gap:1rem 1.6rem;flex-wrap:wrap;align-items:center;padding-top:.9rem;border-top:1px solid var(--line2)} .cookie-prefs label{display:flex;align-items:center;gap:.45rem;font-size:.74rem;color:var(--muted)} .cookie-prefs input{accent-color:var(--violet)} @media(max-width:768px){.cookie-banner{left:10px;right:10px;bottom:10px;flex-direction:column;align-items:flex-start}.cookie-actions{width:100%;justify-content:flex-end}} /* ============================================================ SISTEMA V4 GLOBAL — propagado desde la home (jun 2026). Tipografía 4index, caja 1340, botones crystal-pill primarios, header compacto con logo ×2 y footer de navegación completa. ============================================================ */ /* Tipografía y caja */ .eyebrow{font-size:.58rem;font-weight:380;letter-spacing:.18em} .h2{font-size:clamp(2rem,4vw,4rem);font-weight:380;letter-spacing:-.035em;line-height:1.06} .h3{font-weight:380;letter-spacing:-.015em} .lead{font-size:clamp(1.05rem,1.3vw,1.35rem);line-height:1.7;font-weight:380} .container-wide{width:min(100% - 48px,1340px)} /* Botones crystal pill (acabado primario sobre fondo oscuro) */ .btn{display:inline-flex;align-items:center;gap:8px;padding:.68rem 1.5rem;border-radius:999px;font-size:.75rem;font-weight:380;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);min-height:44px;background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.42);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.15),inset 0 -1px 0 rgba(0,0,0,.2),0 0 0 1px rgba(96,165,250,.12),0 0 24px rgba(167,139,250,.18),inset 0 0 18px rgba(167,139,250,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);filter:none;transition:background .25s cubic-bezier(.16,1,.3,1),border-color .25s,transform .18s cubic-bezier(.16,1,.3,1),box-shadow .25s} .btn::before{content:'';position:absolute;inset:auto;top:0;left:-80%;width:50%;height:100%;padding:0;border-radius:0;background:linear-gradient(105deg,transparent,rgba(255,255,255,.1) 50%,transparent);-webkit-mask:none;mask:none;transform:skewX(-12deg);opacity:1;transition:left .5s cubic-bezier(.16,1,.3,1)} .btn::after{content:none} .btn:hover{color:var(--ink);background:rgba(167,139,250,.2);border-color:rgba(167,139,250,.65);transform:translateY(-2px);filter:none;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.15),inset 0 -1px 0 rgba(0,0,0,.2),0 0 0 1px rgba(96,165,250,.2),0 0 40px rgba(167,139,250,.28),inset 0 0 24px rgba(167,139,250,.1)} .btn:hover::before{left:120%;opacity:1} .btn:active{transform:scale(.96) translateY(1px);filter:none;box-shadow:inset 0 2px 6px rgba(0,0,0,.35)} .btn:focus-visible{outline:2px solid rgba(167,139,250,.7);outline-offset:3px;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.15),inset 0 -1px 0 rgba(0,0,0,.2)} /* Header compacto v4 */ .site-header{height:76px;background:linear-gradient(180deg,rgba(0,0,0,.58),rgba(0,0,0,.12))} .nav-wrap{width:min(100% - 48px,100%);padding:0 .4rem} .brand img{width:auto;height:52px} .nav{gap:2rem} .nav a:not(.btn){font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:rgba(240,239,236,.5)} .nav a:not(.btn):hover{color:var(--ink)} .nav .btn{padding:.48rem 1.1rem;font-size:.68rem;min-height:36px} .mobile-panel{inset:86px 16px auto 16px} /* Footer v4: navegación completa + legal + social */ .footer-v4{border-top:1px solid var(--line2);padding:2rem 2.4rem;background:#05060a;display:flex;flex-direction:column;gap:1.3rem} .foot-nav{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1.4rem;padding-bottom:1.3rem;border-bottom:1px solid var(--line2)} .foot-nav a{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,245,241,.48);transition:color .2s} .foot-nav a:hover{color:var(--ink)} .foot-nav-sep{flex:1;min-width:1rem} .foot-nav a[href^="mailto"],.foot-nav a[href^="tel"]{text-transform:none;letter-spacing:.04em;color:rgba(247,245,241,.6)} .foot-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem} .foot-l{font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)} .foot-links{display:flex;gap:1.2rem} .foot-links a{font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);transition:color .2s} .foot-links a:hover{color:rgba(247,245,241,.7)} .foot-social{display:flex;gap:.5rem;margin-top:0} .fsoc{width:28px;height:28px;border:1px solid var(--line2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:380;color:var(--soft);transition:border-color .2s,color .2s} .fsoc:hover{border-color:rgba(247,245,241,.3);color:rgba(247,245,241,.7)} @media(max-width:768px){ .h2{font-size:clamp(1.9rem,8.4vw,2.8rem)} .lead{font-size:1rem} .footer-v4{padding:1.5rem 1.4rem} } /* =========================================================================== FICHA EDITORIAL (single-project) — plantilla "de diseño" en paleta clara --------------------------------------------------------------------------- Reconstruye el lenguaje del antiguo /santa-otilia.html (hero, retos, decisiones, galerías asimétricas, CTA, siguiente proyecto) sobre fondo blanco. Clases con prefijo .cs-* para NO colisionar con .hero/.gallery/ .card/.next de este mismo archivo. Activar con: .case-editorial → estructura + paleta clara de la ficha. .case-light → header/footer/botones del sitio en versión clara (portado de proyectos-light.html). Borrar este bloque revierte por completo; no toca reglas anteriores. Tokens locales: tinta #15171c, títulos #0b0c10, texto #41434a, apoyo #6b6e76, acento #7c5cd6, hairline rgba(17,19,25,.10). =========================================================================== */ body.case-editorial{background:#fff;color:#15171c;scroll-behavior:smooth} body.case-editorial main{background:#fff} /* Grano sutil de película sobre blanco (multiply para que apenas se note) */ body.case-editorial::after{content:'';position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.035;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px} /* Barra de progreso de scroll */ #cs-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:600;pointer-events:none;background:linear-gradient(90deg,var(--violet),rgba(167,134,255,.35));transition:width .1s linear} /* Contenedores */ .cs-wrap{max-width:1180px;margin:0 auto;padding:0 24px} .cs-wide{max-width:1480px;margin:0 auto;padding:0 24px} .cs-divider{border:0;border-top:1px solid rgba(17,19,25,.1);margin:0} .cs-eyebrow{display:block;font-size:.6rem;font-weight:380;letter-spacing:.18em;text-transform:uppercase;color:#7c5cd6} /* ── HERO (título arriba, imagen contenida, meta debajo: 100% claro) ── */ .cs-hero{padding:clamp(120px,15vh,180px) 0 0} .cs-hero-head{max-width:1180px;margin:0 auto;padding:0 24px} .cs-hero-cat{margin-bottom:1.1rem;color:#6b6e76} .cs-hero-title{font-size:clamp(3rem,8vw,7.5rem);font-weight:380;letter-spacing:-.045em;line-height:.92;color:#0b0c10;margin:0} .cs-hero-sub{margin:1.4rem 0 0;max-width:680px;font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.6;color:#41434a} .cs-hero-media{margin:clamp(2rem,4vw,3.2rem) auto 0;max-width:1480px;padding:0 24px} .cs-hero-media img{width:100%;height:clamp(360px,62vh,720px);object-fit:cover;border-radius:18px;display:block} .cs-meta{max-width:1180px;margin:clamp(1.6rem,3vw,2.4rem) auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(17,19,25,.1);border:1px solid rgba(17,19,25,.1);border-radius:14px;overflow:hidden} .cs-mr{background:#fff;padding:1.1rem 1.3rem} .cs-ml{font-size:.54rem;font-weight:380;letter-spacing:.14em;text-transform:uppercase;color:#9a9ca3;margin-bottom:.3rem} .cs-mv{font-size:.92rem;font-weight:380;color:#15171c} /* ── HERO FULL-BLEED con slider de las imágenes más potentes ── Carrusel a ancho completo (scroll-snap) con título superpuesto en blanco. Es la única zona oscura: el resto de la ficha sigue en claro. */ .cs-hero-full{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:min(92vh,900px);overflow:hidden;background:#0b0c10} .cs-hero-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none} .cs-hero-track::-webkit-scrollbar{display:none} .cs-hero-slide{flex:0 0 100vw;width:100vw;height:100%;scroll-snap-align:center} .cs-hero-slide img{width:100%;height:100%;object-fit:cover;display:block} .cs-hero-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(5,6,10,.8),rgba(5,6,10,.18) 55%,transparent),linear-gradient(0deg,rgba(5,6,10,.88),rgba(5,6,10,.12) 42%,transparent 72%)} .cs-hero-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding-bottom:clamp(2.4rem,5vw,4.2rem)} .cs-hero-cap-in{max-width:1480px;margin:0 auto;padding:0 24px;pointer-events:none} .cs-hero-full .cs-eyebrow{color:rgba(255,255,255,.74)} .cs-hero-full .cs-hero-title{color:#fff} .cs-hero-full .cs-hero-sub{color:rgba(255,255,255,.88);max-width:620px} .cs-hero-dots{position:absolute;right:clamp(16px,4vw,40px);bottom:clamp(18px,4vw,34px);z-index:4;display:flex;gap:8px} .cs-hero-dot{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.38);cursor:pointer;transition:background .2s,transform .2s} .cs-hero-dot.on{background:#fff;transform:scale(1.3)} .cs-hero-hint{position:absolute;left:clamp(16px,4vw,40px);bottom:clamp(18px,4vw,30px);z-index:4;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);pointer-events:none} @media(max-width:860px){.cs-hero-full{height:min(82vh,660px)}.cs-hero-hint{display:none}} /* ── SECCIÓN NUMERADA (reto, decisiones…) ── */ .cs-sec{padding:clamp(4.5rem,8vw,7rem) 0} .cs-brief{display:grid;grid-template-columns:200px 1fr;gap:clamp(2rem,4vw,4rem);align-items:start} .cs-label{font-size:.6rem;font-weight:380;letter-spacing:.18em;text-transform:uppercase;color:#9a9ca3;line-height:1.8;padding-top:.4rem} .cs-label span{display:block;margin-top:.4rem;color:#c2c3c8} .cs-h2{font-size:clamp(1.6rem,3vw,2.5rem);font-weight:380;letter-spacing:-.03em;line-height:1.12;color:#0b0c10;margin:0 0 1.3rem} .cs-p{font-size:.95rem;line-height:1.8;color:#52555d;margin:0 0 1rem;max-width:640px} .cs-p:last-child{margin-bottom:0} .cs-p strong{color:#15171c;font-weight:380} /* Tarjetas de restricciones/retos */ .cs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(17,19,25,.08);border:1px solid rgba(17,19,25,.08);border-radius:14px;overflow:hidden;margin-top:2rem} .cs-card{background:#fcfbfa;padding:1.7rem 1.5rem;transition:background .25s} .cs-card:hover{background:#f5f3f0} .cs-card-num{font-size:.56rem;font-weight:380;letter-spacing:.14em;text-transform:uppercase;color:#7c5cd6;margin-bottom:.8rem} .cs-card-title{font-size:.95rem;font-weight:380;color:#15171c;margin:0 0 .5rem} .cs-card-desc{font-size:.82rem;line-height:1.65;color:#6b6e76;margin:0} /* ── DECISIONES (lista Q&A, el bloque más "de diseño") ── */ .cs-decisions{display:flex;flex-direction:column} .cs-decision{display:grid;grid-template-columns:48px 1fr 1.1fr;gap:clamp(1rem,2.5vw,2.5rem);align-items:start;padding:1.8rem 1rem;margin:0 -1rem;border-bottom:1px solid rgba(17,19,25,.1);border-radius:12px;transition:background .25s} .cs-decision:first-child{border-top:1px solid rgba(17,19,25,.1)} .cs-decision:hover{background:#faf9f7} .cs-d-num{font-size:.6rem;font-weight:380;letter-spacing:.12em;color:#b9bac0;padding-top:.3rem} .cs-d-q{font-size:.92rem;font-weight:380;line-height:1.35;color:#15171c;margin:0} .cs-d-a{font-size:.86rem;line-height:1.7;color:#6b6e76;margin:0} .cs-d-a strong{color:#2b2d34;font-weight:380} /* ── GALERÍAS ── */ .cs-gallery{padding:0} .cs-grow{display:grid;gap:10px;margin-bottom:10px} .cs-grow:last-child{margin-bottom:0} .cs-g1{grid-template-columns:1fr} .cs-g2{grid-template-columns:1fr 1fr} .cs-g2r{grid-template-columns:1.6fr 1fr} .cs-gc{position:relative;overflow:hidden;border-radius:14px;background:#f4f3f1} .cs-gc img{width:100%;display:block;object-fit:cover;aspect-ratio:16/10;transition:transform .7s cubic-bezier(.16,1,.3,1)} .cs-gc.tall img{aspect-ratio:4/5} .cs-gc.wide img{aspect-ratio:21/9} .cs-gc:hover img{transform:scale(1.03)} /* Slider horizontal (scroll-snap nativo, sin JS) — "pasar imágenes" */ .cs-slider{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,560px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px;scrollbar-width:thin;scrollbar-color:rgba(17,19,25,.25) transparent} .cs-slider::-webkit-scrollbar{height:8px} .cs-slider::-webkit-scrollbar-thumb{background:rgba(17,19,25,.22);border-radius:99px} .cs-slider::-webkit-scrollbar-track{background:transparent} .cs-slide{scroll-snap-align:center;border-radius:14px;overflow:hidden;background:#f4f3f1} .cs-slide img{width:100%;height:clamp(300px,46vh,520px);object-fit:cover;display:block} .cs-slider-hint{margin-top:.8rem;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#9a9ca3} /* ── IMPACTO (cualitativo; sin cifras inventadas) ── */ .cs-impact{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(17,19,25,.08);border:1px solid rgba(17,19,25,.08);border-radius:14px;overflow:hidden;margin-top:2rem} .cs-ib{background:#fcfbfa;padding:1.9rem 1.6rem} .cs-ib-k{font-size:.78rem;font-weight:380;letter-spacing:-.01em;color:#7c5cd6;margin:0 0 .5rem} .cs-ib-t{font-size:.92rem;font-weight:380;color:#15171c;margin:0 0 .35rem} .cs-ib-d{font-size:.78rem;line-height:1.55;color:#6b6e76;margin:0} /* ── CTA STRIP ── */ .cs-cta{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding:clamp(3rem,6vw,5rem) 0} .cs-cta h2{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:380;letter-spacing:-.03em;color:#0b0c10;margin:0} .cs-cta p{margin:.5rem 0 0;max-width:420px;font-size:.9rem;line-height:1.65;color:#6b6e76} .cs-cta-actions{display:flex;gap:.7rem;flex-wrap:wrap;flex-shrink:0} /* ── SIGUIENTE PROYECTO ── */ .cs-next{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:2.6rem 24px;border-top:1px solid rgba(17,19,25,.1);text-decoration:none;color:#15171c;transition:background .25s} .cs-next:hover{background:#faf9f7} .cs-next-pre{font-size:.58rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#4a4d55;margin:0 0 .45rem} .cs-next-name{font-size:clamp(1.2rem,2.2vw,2rem);font-weight:380;letter-spacing:-.025em;margin:0;color:#0b0c10} .cs-next-arrow{font-size:1.5rem;color:#15171c;flex-shrink:0;transition:transform .3s,color .3s} .cs-next:hover .cs-next-arrow{transform:translateX(7px);color:#15171c} /* Reveal al hacer scroll */ .cs-rv{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)} .cs-rv.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .cs-rv{opacity:1;transform:none;transition:none} .cs-gc img,.cs-next-arrow{transition:none} } @media(max-width:860px){ .cs-brief{grid-template-columns:1fr;gap:1.4rem} .cs-cards{grid-template-columns:1fr} .cs-decision{grid-template-columns:36px 1fr;gap:1rem} .cs-d-a{grid-column:2} .cs-impact{grid-template-columns:1fr 1fr} .cs-meta{grid-template-columns:1fr 1fr} .cs-g2,.cs-g2r{grid-template-columns:1fr} .cs-cta{flex-direction:column;align-items:flex-start} .cs-slider{grid-auto-columns:88%} } /* =========================================================================== .case-light — header / footer / botones del sitio en versión clara (portado de proyectos-light.html; aplica a cualquier página clara) =========================================================================== */ .case-light .site-header{background:rgba(255,255,255,.82);border-bottom:1px solid rgba(17,19,25,.08)} .case-light .brand img{filter:invert(1)} .case-light .nav a:not(.btn){color:rgba(17,19,25,.62)} .case-light .nav a:not(.btn):hover{color:#15171c} .case-light .nav a[aria-current=page]{color:var(--violet)} .case-light .nav-toggle{color:#15171c;border-color:rgba(17,19,25,.2);background:rgba(17,19,25,.04)} .case-light .site-header .btn{background:#15171c;color:#fff;border-color:#15171c;box-shadow:0 8px 22px -10px rgba(17,19,25,.55)} .case-light .site-header .btn::before,.case-light .site-header .btn::after{display:none} .case-light .mobile-panel{background:rgba(255,255,255,.96);border-color:rgba(17,19,25,.1)} .case-light .mobile-panel a{color:#15171c} .case-light main .btn{background:#15171c;color:#fff;border-color:#15171c;box-shadow:0 12px 30px -14px rgba(17,19,25,.5)} .case-light main .btn::before,.case-light main .btn::after{display:none} .case-light main .btn:hover{background:#000} .case-light main .btn-plain{background:transparent;color:#15171c;border-color:rgba(17,19,25,.22);box-shadow:none} .case-light main .btn-plain:hover{background:rgba(17,19,25,.05)} .case-light .footer-v4{background:#f4f4f6;border-top:1px solid rgba(17,19,25,.1)} .case-light .foot-nav{border-bottom-color:rgba(17,19,25,.1)} .case-light .foot-nav a{color:rgba(17,19,25,.6)} .case-light .foot-nav a:hover{color:#15171c} .case-light .foot-nav a[href^="mailto"],.case-light .foot-nav a[href^="tel"]{color:rgba(17,19,25,.72)} .case-light .foot-l{color:rgba(17,19,25,.5)} .case-light .foot-links a{color:rgba(17,19,25,.5)} .case-light .foot-links a:hover{color:rgba(17,19,25,.8)} .case-light .fsoc{border-color:rgba(17,19,25,.18);color:rgba(17,19,25,.55)} .case-light .fsoc:hover{border-color:rgba(17,19,25,.4);color:rgba(17,19,25,.8)} /* =========================================================================== HEADER MINIMAL — solo logo (izq) + hamburguesa (der) en TODOS los anchos. Hamburguesa = 3 líneas limpias que se animan a una X al abrir. Activar con body class .hdr-minimal. El toggle usa body.nav-open (main.js). El icono requiere markup: =========================================================================== */ .hdr-minimal .site-header .nav{display:none} .hdr-minimal .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:0;background:transparent;color:#fff;cursor:pointer;font-size:0} .hdr-minimal .nav-toggle .ham{position:relative;display:block;width:26px;height:2px;background:currentColor;border-radius:2px;transition:background .2s} .hdr-minimal .nav-toggle .ham::before, .hdr-minimal .nav-toggle .ham::after{content:'';position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px;transition:transform .35s cubic-bezier(.16,1,.3,1),top .35s cubic-bezier(.16,1,.3,1)} .hdr-minimal .nav-toggle .ham::before{top:-8px} .hdr-minimal .nav-toggle .ham::after{top:8px} /* abierto → X */ .hdr-minimal.nav-open .nav-toggle .ham{background:transparent} .hdr-minimal.nav-open .nav-toggle .ham::before{top:0;transform:rotate(45deg)} .hdr-minimal.nav-open .nav-toggle .ham::after{top:0;transform:rotate(-45deg)} /* En páginas claras el icono es oscuro */ .case-light.hdr-minimal .nav-toggle{color:#15171c} /* Panel desplegable: fondo oscuro → texto blanco (legible) */ .hdr-minimal .mobile-panel{position:fixed;inset:86px 16px auto 16px;z-index:60;border-radius:24px;padding:18px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(6,7,12,.96);border:1px solid var(--line)} .hdr-minimal .mobile-panel a{color:#fff} .hdr-minimal.nav-open .mobile-panel{display:grid;gap:8px} /* En páginas claras el panel es blanco con texto oscuro */ .case-light.hdr-minimal .mobile-panel{background:rgba(255,255,255,.97);border-color:rgba(17,19,25,.1)} .case-light.hdr-minimal .mobile-panel a{color:#15171c} /* =========================================================================== HERO (single-project) — título (izq) + descriptivo (der, a su altura). Imagen enmarcada al ancho del header, 16:9 forzado. Control por líneas. Pulsar la imagen abre los materiales (sin overlay permanente). =========================================================================== */ .cs-stage{padding-top:calc(76px + clamp(20px,3vw,40px))} .cs-head{width:min(100% - 48px,1500px);margin:0 auto clamp(16px,2.4vw,26px);display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem 2.5rem;flex-wrap:wrap} .cs-head-title{margin:0;font-size:clamp(2.4rem,6vw,5rem);font-weight:380;letter-spacing:-.04em;line-height:.95;color:#0b0c10} .cs-head-sub{margin:0;max-width:380px;text-align:right;font-size:clamp(.95rem,1.2vw,1.1rem);line-height:1.5;color:#52555d} @media(max-width:720px){.cs-head{align-items:flex-start}.cs-head-sub{text-align:left;max-width:none}} .cs-frame{position:relative;width:min(100% - 48px,1500px);margin:0 auto;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#0b0c10;isolation:isolate;cursor:pointer} .cs-frame-track{display:flex;height:100%;width:100%;transition:transform .55s cubic-bezier(.4,0,.2,1)} .cs-story{flex:0 0 100%;height:100%} .cs-story img,.cs-story video{width:100%;height:100%;object-fit:cover;display:block} /* Pista de "ver materiales" (solo al pasar el ratón / foco) */ .cs-frame-hint{position:absolute;right:14px;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .85rem;border-radius:999px;background:rgba(8,9,13,.55);color:#fff;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;pointer-events:none} .cs-frame:hover .cs-frame-hint,.cs-frame:focus-visible .cs-frame-hint{opacity:1;transform:none} /* Control por líneas debajo de la imagen — con barra de progreso animada */ .cs-dots{width:min(100% - 48px,1500px);margin:.9rem auto 0;display:flex;gap:7px;justify-content:center} .cs-line{position:relative;overflow:hidden;width:30px;height:3px;border-radius:2px;border:0;padding:0;background:rgba(17,19,25,.18);cursor:pointer} .cs-line>i{position:absolute;inset:0;width:0;background:#15171c;display:block;border-radius:2px} .cs-line.past>i{width:100%} .cs-line.active>i{animation:cs-bar-fill var(--cs-dur,3.8s) linear forwards} @keyframes cs-bar-fill{from{width:0}to{width:100%}} @media(prefers-reduced-motion:reduce){ .cs-frame-track{transition:none} .cs-bar.active>i{animation:none;width:100%} } /* ── POP-UP tipo artículo (historia del proyecto) ── */ .cs-modal[hidden]{display:none} .cs-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:clamp(16px,5vh,80px) 16px;overflow-y:auto} .cs-modal-bg{position:fixed;inset:0;background:rgba(8,9,13,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .cs-article{position:relative;z-index:1;width:min(100%,720px);background:#fff;color:#15171c;border-radius:22px;padding:clamp(1.8rem,4vw,3.4rem);box-shadow:0 50px 130px -30px rgba(0,0,0,.55);animation:cs-modal-in .4s cubic-bezier(.16,1,.3,1)} @keyframes cs-modal-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .cs-modal-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:999px;border:1px solid rgba(17,19,25,.14);background:#fff;color:#15171c;font-size:1.3rem;line-height:1;cursor:pointer} .cs-modal-x:hover{background:#f2f1ef} body.cs-locked{overflow:hidden} /* ── CUERPO: ficha (izq · 2/5) + manifiesto (der · 3/5) ── */ .cs-body{width:min(100% - 48px,1500px);margin:clamp(2.6rem,5vw,4.4rem) auto 0;display:grid;grid-template-columns:2fr 3fr;gap:clamp(2rem,5vw,5rem);align-items:start} @media(max-width:860px){.cs-body{grid-template-columns:1fr;gap:2.4rem}} .cs-facts-label{font-size:.6rem;font-weight:380;letter-spacing:.18em;text-transform:uppercase;color:#9a9ca3;margin:0 0 1.3rem} .cs-facts{display:grid;grid-template-columns:1fr;gap:1.3rem} .cs-fact{border-top:1px solid rgba(17,19,25,.12);padding-top:.85rem} .cs-fact-k{font-size:.56rem;font-weight:380;letter-spacing:.14em;text-transform:uppercase;color:#9a9ca3;margin:0 0 .5rem} .cs-fact-v{font-size:clamp(1rem,1.1vw,1.12rem);font-weight:380;line-height:1.35;color:#15171c;margin:0} /* Manifiesto: lead 36px + cuerpo, con revelado gris→negro al hacer scroll */ .cs-mani-lead{display:block;font-size:clamp(1.7rem,3.6vw,2.25rem);font-weight:380;letter-spacing:-.03em;line-height:1.12;margin:0 0 1.1rem} .cs-mani-body{font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.7;margin:0} .cs-word{color:#cbccd2;transition:color .25s ease} .cs-word.on{color:#0b0c10} .cs-actions{margin-top:clamp(1.6rem,3vw,2.3rem);display:flex;gap:.8rem;flex-wrap:wrap} .cs-ico{width:1em;height:1em;display:inline-block;flex-shrink:0} /* Botón "Leer historia completa" */ .cs-readmore{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.45rem;border:1px solid rgba(17,19,25,.22);border-radius:999px;background:transparent;color:#15171c;font-size:.9rem;font-weight:380;cursor:pointer;transition:background .25s,border-color .25s,color .25s} .cs-readmore:hover{background:#15171c;color:#fff;border-color:#15171c} .cs-readmore .cs-ico{transition:transform .25s} .cs-readmore:hover .cs-ico{transform:translate(2px,-2px)} .cs-article .cs-art-h{font-size:.64rem;font-weight:380;letter-spacing:.16em;text-transform:uppercase;color:#9a9ca3;margin:1.9rem 0 .55rem} .cs-article .cs-art-h:first-of-type{margin-top:1.4rem} /* ── MODAL DE MATERIALES (sistema visual, scroll vertical inmersivo) ── */ .cs-gmodal[hidden]{display:none} .cs-gmodal{position:fixed;inset:0;z-index:210;background:#fff;overflow-y:auto;overscroll-behavior:contain} .cs-gmodal-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:13px clamp(16px,4vw,40px);background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(17,19,25,.08)} .cs-gmodal-title{font-size:.66rem;font-weight:380;letter-spacing:.14em;text-transform:uppercase;color:#6b6e76;margin:0} .cs-gmodal-x{width:40px;height:40px;border-radius:999px;border:1px solid rgba(17,19,25,.14);background:#fff;color:#15171c;font-size:1.3rem;line-height:1;cursor:pointer;flex-shrink:0} .cs-gmodal-x:hover{background:#f2f1ef} .cs-gmedia{width:min(100% - 40px,1300px);margin:0 auto;padding:clamp(16px,3vw,32px) 0 clamp(40px,8vw,90px);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.5vw,18px)} .cs-gm{border-radius:16px;overflow:hidden;background:#f4f3f1;grid-column:span 1} .cs-gm img,.cs-gm video{width:100%;height:100%;display:block;object-fit:cover} .cs-gm.cs-gm-full,.cs-gm.cs-gm-wide{grid-column:1 / -1} .cs-gm.cs-gm-tall{grid-row:span 2} .cs-gm.cs-gm-detail{aspect-ratio:4/3} .cs-gm-cap{grid-column:1 / -1;font-size:.7rem;letter-spacing:.04em;color:#9a9ca3;margin:-2px 2px 6px} @media(max-width:680px){.cs-gmedia{grid-template-columns:1fr}.cs-gm{grid-column:1 / -1!important;grid-row:auto!important}} @media(prefers-reduced-motion:reduce){ .cs-frame-track{transition:none} .cs-bar.active>i{animation:none;width:100%} .cs-article{animation:none} } /* =========================================================== IDEAS — DESACTIVADO TEMPORALMENTE (publicación 2026-06-15). Oculta los enlaces a Ideas en cabecera, panel móvil y footer de todo el sitio sin tocar los 74 archivos HTML. Para REACTIVAR Ideas, basta con borrar este bloque. Las páginas /ideas* además están marcadas noindex y fuera del sitemap mientras tanto. =========================================================== */ .nav a[href$="ideas.html"], .mobile-panel a[href$="ideas.html"], .foot-nav a[href$="ideas.html"], .nav a[href*="/ideas/"], .mobile-panel a[href*="/ideas/"], .foot-nav a[href*="/ideas/"]{display:none!important} /* =========================================================== PUBLICACIÓN EN PRUEBAS (2026-06-17) — ocultar secciones incompletas. Para reactivar, borrar este bloque y el