/* Theme Name: Gregorio Gualavisi Theme URI: https://gualavisi.com Author: Gregorio Gualavisi Description: Tema personal "Editorial · Tech" — Ing. en Software y Lic. en Comunicacion. Incluye campo de verificacion en el (Google Search Console / sitemap) y soporte de sitemap nativo de WordPress. Version: 1.0.0 Requires at least: 5.5 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: gualavisi */ /* ========================================================================= GREGORIO GUALAVISI — Identidad "Editorial · Tech" Sistema de diseño v2 ========================================================================= */ :root{ --bg:#070709; --bg-soft:#0d0d11; --paper:#f3efe7; --ink:#0a0a0c; --text:#ece9e2; --muted:#86837c; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --c1:#3056ff; /* azul royal */ --c2:#2e9bff; /* azul cielo */ --c3:#27d3f0; /* cian */ --grad:linear-gradient(100deg,var(--c1),var(--c2) 55%,var(--c3)); --wrap:1280px; --e:cubic-bezier(.19,1,.22,1); --e-out:cubic-bezier(.77,0,.175,1); --e-spring:cubic-bezier(.34,1.56,.64,1); --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden} body{ font-family:var(--sans);background:var(--bg);color:var(--text); line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden; letter-spacing:-.01em;width:100%;position:relative; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} ::selection{background:var(--c2);color:#fff} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px} .serif{font-family:var(--serif)} .mono{font-family:var(--mono)} /* ---------- fondos: aurora + grano ---------- */ #aurora{position:fixed;inset:0;z-index:-3;width:100%;height:100%; filter:blur(70px) saturate(150%);opacity:.55;pointer-events:none} .bg-base{position:fixed;inset:0;z-index:-4;background: radial-gradient(80% 60% at 80% -10%,rgba(48,86,255,.12),transparent 60%), radial-gradient(70% 60% at 0% 110%,rgba(39,211,240,.08),transparent 60%),var(--bg)} .grain{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.06;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ========================================================================= NAV ========================================================================= */ header.nav{position:fixed;inset:0 0 auto;z-index:60;transition:transform .65s var(--e),background .5s var(--e),border-color .5s var(--e)} body.page-home header.nav{transform:translateY(-110%)} body.page-home.gg-ready header.nav{transform:none;transition-delay:.85s} body.page-home header.nav.scrolled{background:rgba(7,7,9,.72);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)} .nav-in{display:flex;align-items:center;justify-content:space-between;height:84px} .brand{font-family:var(--serif);font-size:21px;font-weight:500;letter-spacing:-.02em;display:flex;align-items:center;gap:10px} .brand .gem{width:9px;height:9px;border-radius:50%;background:var(--grad)} .nav-links{display:flex;gap:6px;align-items:center;background:rgba(14,14,18,.55);backdrop-filter:blur(16px); border:1px solid var(--line);border-radius:40px;padding:6px} .nav-links a{font-size:13.5px;color:var(--muted);font-weight:500;padding:9px 18px;border-radius:30px;transition:.3s var(--e)} .nav-links a:hover{color:var(--text)} .nav-links a.active{color:var(--text);background:rgba(255,255,255,.07)} .nav-cta{font-size:13.5px;font-weight:500;display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:40px; background:var(--text);color:var(--ink)!important;transition:.35s var(--e)} .nav-cta:hover{filter:brightness(.9);transform:translateY(-1px)} .burger{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;flex-direction:column;gap:5px; align-items:center;justify-content:center;cursor:pointer;z-index:70;background:rgba(14,14,18,.6);backdrop-filter:blur(10px)} .burger span{width:18px;height:1.5px;background:var(--text);transition:.3s} /* ========================================================================= BOTONES ========================================================================= */ .btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-size:15px;font-weight:500; padding:16px 28px;border-radius:40px;background:var(--text);color:var(--ink);cursor:pointer;border:none; transition:.4s var(--e);will-change:transform} .btn:hover{filter:brightness(.92)} .btn .dot{width:7px;height:7px;border-radius:50%;background:var(--grad)} .btn-line{display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:var(--text); padding:16px 28px;border-radius:40px;border:1px solid var(--line-2);transition:.4s var(--e)} .btn-line:hover{border-color:var(--text)} .btn .arr,.btn-line .arr{transition:.4s var(--e)} .btn:hover .arr,.btn-line:hover .arr{transform:translateX(5px)} /* ========================================================================= TIPOGRAFÍA DE SECCIÓN ========================================================================= */ .eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px; letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .eyebrow::before{content:"";width:26px;height:1px;background:var(--c2)} .h-display{font-family:var(--serif);font-weight:400;letter-spacing:-.035em;line-height:1.0; font-size:clamp(40px,6.2vw,88px)} .h-display em{font-style:italic} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .lead{font-size:clamp(18px,2.1vw,23px);color:var(--muted);max-width:560px;line-height:1.5} section{position:relative;padding:120px 0} .sec-head{max-width:720px;margin-bottom:70px} .sec-head .h-display{margin:20px 0 18px} /* ========================================================================= HERO ========================================================================= */ .hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:140px 0 60px;position:relative;overflow:hidden} .hero--video{isolation:isolate} .hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;background:#070709} .hero-video video,.hero-video canvas#heroBg{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center; transform:scale(1.06); opacity:0;filter:blur(12px) brightness(.72); transition:opacity 1.8s var(--e),filter 2s var(--e); } .hero-video canvas#heroBg{display:none;transform:none;object-fit:unset} .hero-video.use-canvas video{display:none} .hero-video.use-canvas canvas#heroBg{display:block;transform:none;filter:blur(0) brightness(.72)} .hero-video.is-ready video,.hero-video.is-ready.use-canvas canvas#heroBg{opacity:.85;filter:blur(0) brightness(1.1)} .hero-video.is-ready:not(.use-canvas) video{opacity:.85;filter:blur(0) brightness(1.1)} .hero-video-veil{ position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(180deg,rgba(7,7,9,.65) 0%,rgba(7,7,9,.25) 45%,rgba(7,7,9,.8) 100%), linear-gradient(90deg,rgba(7,7,9,.5) 0%,rgba(7,7,9,.1) 50%,rgba(7,7,9,.2) 100%), radial-gradient(80% 70% at 50% 40%,rgba(48,86,255,.12),transparent 65%); } .hero-video-scan{display:none} .hero-content{position:relative;z-index:3} .hero-bridge{ position:absolute;left:0;right:0;bottom:-1px;height:160px;z-index:3;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(7,7,9,.55) 35%,var(--bg)); opacity:0;transform:translateY(24px); transition:opacity 1.2s var(--e) .65s,transform 1.2s var(--e) .65s; } body.gg-ready .hero-bridge{opacity:1;transform:none} .hero .eyebrow{margin-bottom:30px} .hero h1{font-family:var(--serif);font-weight:400;letter-spacing:-.045em;line-height:.9; font-size:clamp(58px,13.5vw,205px)} .hero h1 .ln{display:block;overflow:hidden} .hero h1 .ln span{display:block;will-change:transform} .hero h1 em{font-style:italic;color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text} .hero-foot{margin-top:46px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap} .hero-foot .lead{max-width:480px} .hero-meta{display:flex;gap:46px;flex-wrap:wrap} .hero-meta .m{font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.04em} .hero-meta .m b{display:block;color:var(--text);font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:-.01em;margin-top:6px} .scroll-cue{position:absolute;bottom:34px;left:50%;z-index:4;transform:translateX(-50%) translateY(20px);font-family:var(--mono);font-size:11px; letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px; opacity:0;filter:blur(8px);transition:opacity 1s var(--e),transform 1s var(--e),filter 1s var(--e)} .scroll-cue .bar{width:1px;height:46px;background:linear-gradient(var(--c2),transparent);animation:cue 2s var(--e) infinite} @keyframes cue{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}60%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* ========================================================================= MARQUEE ========================================================================= */ .marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;overflow:hidden;display:flex;gap:0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee--rise{opacity:0;transform:translateY(36px);transition:opacity 1s var(--e) .9s,transform 1s var(--e) .9s} body.gg-ready .marquee--rise{opacity:1;transform:none} .mq-track{display:flex;gap:60px;white-space:nowrap;animation:mq 32s linear infinite;padding-left:60px} .mq-track span{font-family:var(--serif);font-size:clamp(24px,3.4vw,42px);font-style:italic;color:var(--muted)} .mq-track span::after{content:"✦";font-style:normal;margin-left:60px;color:var(--c2);font-size:.5em;vertical-align:middle} @keyframes mq{to{transform:translateX(-50%)}} /* ========================================================================= PÁGINA INTERIOR — HEAD ========================================================================= */ .page-head{padding:180px 0 90px;border-bottom:1px solid var(--line)} .page-head .crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:26px} .page-head .crumbs span{color:var(--text)} .page-head h1{font-family:var(--serif);font-weight:400;letter-spacing:-.04em;line-height:.95;font-size:clamp(48px,9vw,128px)} /* ========================================================================= SOBRE / SPLIT ========================================================================= */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center} .split p{color:var(--muted);font-size:17px;margin-bottom:20px} .split p strong{color:var(--text);font-weight:500} .portrait{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;border:1px solid var(--line); background:linear-gradient(160deg,#15151b,#0b0b0e)} .portrait .ph{position:absolute;inset:0;display:grid;place-items:center;color:#3a3a44;font-family:var(--mono);font-size:12px;text-align:center;padding:24px} .portrait::after{content:"";position:absolute;inset:0;background:var(--grad);opacity:.10;mix-blend-mode:overlay} .portrait img{width:100%;height:100%;object-fit:cover} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:48px;padding-top:42px;border-top:1px solid var(--line)} .stat b{font-family:var(--serif);font-size:clamp(34px,4vw,52px);font-weight:400;display:block;letter-spacing:-.03em} .stat small{color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase} /* skills */ .skill{margin-bottom:30px} .skill .lbl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px} .skill .lbl span:first-child{font-size:16px} .skill .lbl span:last-child{font-family:var(--mono);color:var(--muted);font-size:13px} .bar{height:1px;background:var(--line);overflow:hidden} .bar i{display:block;height:100%;width:0;background:var(--grad);transition:width 1.3s var(--e)} /* ========================================================================= LISTA DE SERVICIOS (tipografía grande, hover expansivo) ========================================================================= */ .svc{border-top:1px solid var(--line)} .svc-row{display:grid;grid-template-columns:70px 1fr auto;gap:30px;align-items:center;padding:38px 0; border-bottom:1px solid var(--line);transition:.5s var(--e);cursor:pointer} .svc-row .n{font-family:var(--mono);font-size:13px;color:var(--muted)} .svc-row h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.4vw,42px);letter-spacing:-.03em;transition:.5s var(--e)} .svc-row p{color:var(--muted);font-size:15px;max-height:0;opacity:0;overflow:hidden;transition:.55s var(--e);max-width:560px} .svc-row .arr{color:var(--muted);font-size:22px;transition:.5s var(--e)} .svc-row:hover{padding-left:22px;background:linear-gradient(90deg,rgba(48,86,255,.06),transparent 55%)} .svc-row:hover h3{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .svc-row:hover p{max-height:60px;opacity:1;margin-top:10px} .svc-row:hover .arr{color:var(--text);transform:translateX(6px)} /* ========================================================================= TRABAJO / PROYECTOS ========================================================================= */ .work{display:grid;grid-template-columns:repeat(2,1fr);gap:34px} .work-card{display:block;position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--bg-soft);transition:.5s var(--e)} .work-card:hover{border-color:var(--line-2);transform:translateY(-6px)} .work-card .thumb{aspect-ratio:16/11;position:relative;overflow:hidden;background:linear-gradient(135deg,#191922,#0c0c10)} .work-card .thumb::after{content:"";position:absolute;inset:0;background:var(--grad);opacity:.14;mix-blend-mode:overlay;transition:.6s var(--e)} .work-card:hover .thumb::after{opacity:.28} .work-card .thumb .tg{position:absolute;inset:0;display:grid;place-items:center;color:#33333d;font-family:var(--mono);font-size:12px} .work-card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.7s var(--e)} .work-card:hover .thumb img{transform:scale(1.05)} .work-card .meta{display:flex;justify-content:space-between;align-items:center;padding:26px 28px} .work-card .meta small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px} .work-card .meta h3{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.02em} .work-card .meta .arr{font-size:20px;color:var(--muted);transition:.4s var(--e)} .work-card:hover .meta .arr{color:var(--text);transform:translate(4px,-4px)} /* ========================================================================= JOURNALS / KERNEL X ========================================================================= */ .jx{border-top:1px solid var(--line)} .jx a{display:grid;grid-template-columns:54px 1fr auto;gap:24px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);transition:.45s var(--e)} .jx a .n{font-family:var(--mono);font-size:12px;color:var(--muted)} .jx a h3{font-size:19px;font-weight:500;letter-spacing:-.01em;transition:.4s var(--e)} .jx a p{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:3px} .jx a .arr{color:var(--muted);transition:.4s var(--e)} .jx a:hover{padding-left:14px} .jx a:hover h3{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text} .jx a:hover .arr{color:var(--text);transform:translateX(5px)} /* ========================================================================= CONTACTO ========================================================================= */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start} .contact-info a{display:block;padding:24px 0;border-top:1px solid var(--line);transition:.4s var(--e)} .contact-info a:last-child{border-bottom:1px solid var(--line)} .contact-info a small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px} .contact-info a span{font-size:20px} .contact-info a:hover{padding-left:10px} .contact-info a:hover span{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text} form{display:flex;flex-direction:column;gap:24px} .field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} input,textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);padding:12px 0; color:var(--text);font-family:var(--sans);font-size:17px;transition:.4s var(--e)} input:focus,textarea:focus{outline:none;border-color:var(--c2)} input::placeholder,textarea::placeholder{color:#46464e} /* ========================================================================= CTA grande ========================================================================= */ .cta{text-align:center;padding:140px 0;border-top:1px solid var(--line)} .cta .eyebrow{justify-content:center;margin-bottom:26px} .cta h2{font-family:var(--serif);font-weight:400;letter-spacing:-.04em;line-height:.98;font-size:clamp(44px,8vw,120px);margin-bottom:42px} /* ========================================================================= FOOTER ========================================================================= */ footer{padding:90px 0 40px;border-top:1px solid var(--line);position:relative} .foot-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px;margin-bottom:80px} .foot-top p{color:var(--muted);font-size:15px;max-width:300px;margin-top:18px} .foot-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:22px} .foot-col a{display:block;margin-bottom:13px;color:var(--text);font-size:15px;transition:.3s var(--e)} .foot-col a:hover{color:var(--muted)} .foot-name{font-family:var(--serif);font-weight:400;letter-spacing:-.04em;line-height:.85; font-size:clamp(60px,17vw,260px);background:linear-gradient(180deg,var(--text),transparent 130%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:30px 0} .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap; font-family:var(--mono);font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:30px} .foot-bottom .socials{display:flex;gap:22px} .foot-bottom .socials a:hover{color:var(--text)} /* ========================================================================= REVEAL ========================================================================= */ .reveal{opacity:0;transform:translateY(44px) scale(.985);filter:blur(10px); transition:opacity 1.15s var(--e),transform 1.15s var(--e),filter 1.15s var(--e)} .reveal.show{opacity:1;transform:none;filter:none} .reveal-left{opacity:0;transform:translateX(-48px);filter:blur(8px); transition:opacity 1.1s var(--e),transform 1.1s var(--e),filter 1.1s var(--e)} .reveal-left.show{opacity:1;transform:none;filter:none} .reveal-scale{opacity:0;transform:scale(.94);filter:blur(6px); transition:opacity 1.2s var(--e),transform 1.2s var(--e),filter 1.2s var(--e)} .reveal-scale.show{opacity:1;transform:none;filter:none} section:not(.hero):not(.cta):not(.page-head)::before{ content:"";position:absolute;left:32px;right:32px;top:0;height:1px; background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent); opacity:0;transform:scaleX(.6);transition:opacity .9s var(--e),transform 1.1s var(--e); } section:not(.hero):not(.cta):not(.page-head).in-view::before{opacity:1;transform:scaleX(1)} body.page-home #aurora{opacity:.18} body.page-home .bg-base{opacity:.85} /* ========================================================================= PRELOADER (intro de lujo) ========================================================================= */ body.gg-loading{overflow:hidden} .gg-loader{position:fixed;inset:0;z-index:120;background:var(--bg);display:flex;align-items:center;justify-content:center; transition:1s var(--e);overflow:hidden} .gg-loader.done{transform:translateY(-100%)} .gg-loader canvas{position:absolute;inset:0;width:100%;height:100%;filter:blur(60px) saturate(150%);opacity:.6} .gg-loader .li{position:relative;z-index:2;text-align:center;padding:24px} .gg-loader .tag{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted); opacity:0;animation:gIn .9s var(--e) .2s forwards} .gg-loader .nm{font-family:var(--serif);font-weight:400;letter-spacing:-.04em;line-height:1;font-size:clamp(40px,8vw,98px);margin:18px 0} .gg-loader .nm .w{display:inline-block;overflow:hidden;vertical-align:top} .gg-loader .nm .w span{display:inline-block;transform:translateY(110%);animation:gUp 1s var(--e) forwards} .gg-loader .ro{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--muted);opacity:0;animation:gIn .9s var(--e) .9s forwards} .gg-counter{position:absolute;left:0;right:0;bottom:36px;text-align:center;z-index:2;font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.1em} .gg-line{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--grad);z-index:3;box-shadow:0 0 16px var(--c2)} @keyframes gIn{to{opacity:1}} @keyframes gUp{to{transform:translateY(0)}} /* ========================================================================= TRANSICIÓN ENTRE PÁGINAS ========================================================================= */ .gg-overlay{position:fixed;inset:0;z-index:110;pointer-events:none;clip-path:circle(0% at 50% 100%);overflow:hidden} .gg-overlay .pn{position:absolute;inset:0;background:var(--bg)} .gg-overlay canvas{position:absolute;inset:0;width:100%;height:100%;filter:blur(60px) saturate(150%);opacity:.55} .gg-overlay .ow{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2; font-family:var(--serif);font-style:italic;font-size:clamp(28px,5vw,54px);color:var(--text);opacity:0;transform:translateY(16px) scale(.96);transition:.65s var(--e)} .gg-overlay.cover{clip-path:circle(150% at 50% 100%);transition:clip-path .85s var(--e-out);pointer-events:all} .gg-overlay.cover .ow{opacity:1;transform:none;transition-delay:.18s} .gg-overlay.reveal-out{clip-path:circle(150% at 50% 0%);animation:gReveal 1.15s var(--e-out) forwards} @keyframes gReveal{to{clip-path:circle(0% at 50% 0%)}} /* ========================================================================= CURSOR ========================================================================= */ @media(pointer:fine){body{cursor:none}} .gg-cur{position:fixed;top:0;left:0;width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid var(--text);border-radius:50%; z-index:130;pointer-events:none;mix-blend-mode:difference;transition:width .3s var(--e),height .3s var(--e),margin .3s var(--e),background .3s} .gg-cur.hot{width:64px;height:64px;margin:-32px 0 0 -32px;background:var(--text)} .gg-dotc{position:fixed;top:0;left:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--text);border-radius:50%;z-index:131;pointer-events:none;mix-blend-mode:difference} /* ========================================================================= REVEAL HERO tras intro ========================================================================= */ .hero h1 .ln span{transform:translateY(115%) rotate(2deg);transition:transform 1.15s var(--e),opacity 1s var(--e);opacity:0} .hero .eyebrow,.hero-foot{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity 1s var(--e),transform 1s var(--e),filter 1s var(--e)} body.gg-ready .hero h1 .ln span{transform:translateY(0) rotate(0);opacity:1} body.gg-ready .hero h1 .ln:nth-child(2) span{transition-delay:.14s} body.gg-ready .hero .eyebrow{opacity:1;transform:none;filter:none;transition-delay:.08s} body.gg-ready .hero-foot{opacity:1;transform:none;filter:none;transition-delay:.52s} body.gg-ready .scroll-cue{opacity:1;transform:translateX(-50%) translateY(0);filter:none;transition-delay:.95s} /* ========================================================================= RESPONSIVE ========================================================================= */ @media(max-width:900px){ .wrap{padding:0 22px} .nav-links{position:fixed;inset:0 0 0 auto;width:80%;max-width:340px;flex-direction:column;justify-content:center; align-items:flex-start;gap:8px;border-radius:0;border:none;border-left:1px solid var(--line);background:rgba(10,10,13,.85); backdrop-filter:blur(20px);padding:40px;transform:translateX(100%);transition:.5s var(--e)} .nav-links.open{transform:none} .nav-links a{font-size:22px;font-family:var(--serif)} .nav-cta{display:none} .burger{display:flex} .split,.contact-grid{grid-template-columns:1fr;gap:50px} .portrait{order:-1} .work{grid-template-columns:1fr} .hero-foot{flex-direction:column;align-items:flex-start} .stats,.foot-top{grid-template-columns:1fr 1fr} .svc-row{grid-template-columns:auto 1fr auto;gap:18px} .svc-row p{display:none} } @media (prefers-reduced-motion:reduce){ .gg-overlay,.gg-cur,.gg-dotc{display:none!important} .hero-video canvas,.hero-video video{opacity:.4!important;filter:brightness(.7)!important} *{animation-duration:.01ms!important;transition-duration:.01ms!important} .hero h1 .ln span,.hero .eyebrow,.hero-foot,.scroll-cue,.marquee--rise{opacity:1;transform:none;filter:none} body.page-home header.nav{transform:none} body{cursor:auto} } /* ========================================================================= FONDO DEL HERO (imagen / video) — configurable desde el Personalizador ========================================================================= */ .hero{position:relative;z-index:0} .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-bg img,.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero-bg .hero-ov{position:absolute;inset:0;background: linear-gradient(180deg,rgba(7,7,9,.55),rgba(7,7,9,.35) 45%,var(--bg) 100%),#06060a} .hero > .wrap{position:relative;z-index:2} .hero .scroll-cue{z-index:2}