:root{--navy:#061b27;--navy2:#0d3140;--cyan:#18c6ea;--teal:#25cbbb;--green:#8dcb2a;--paper:#f4f7f8;--muted:#64727a;--line:#d8e2e5;--white:#fff;--container:min(1190px,calc(100% - 42px));--shadow:0 22px 64px rgba(5,29,41,.11)} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Manrope,Arial,sans-serif;color:var(--navy);background:#fff;line-height:1.65;overflow-x:hidden}a{text-decoration:none;color:inherit}img{display:block;max-width:100%}.container{width:var(--container);margin:auto}.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--cyan),var(--teal));z-index:5000} .site-header{position:fixed;top:0;left:0;right:0;z-index:2500;background:linear-gradient(180deg,rgba(1,14,20,.72),transparent);transition:.3s}.site-header.scrolled{background:rgba(6,27,39,.9);backdrop-filter:blur(16px);box-shadow:0 8px 26px rgba(0,0,0,.12)}.nav-wrap{height:82px;display:flex;align-items:center;justify-content:space-between}.brand-logo img{width:175px}.desktop-nav{display:flex;gap:28px;color:#fff;font-size:13px}.desktop-nav a{position:relative;opacity:.9}.desktop-nav a:after{content:"";position:absolute;bottom:-9px;left:0;width:0;height:2px;background:var(--cyan);transition:.28s}.desktop-nav a:hover:after{width:100%}.nav-actions{display:flex;gap:12px;align-items:center}.lang-switch{color:#fff;font-size:11px;font-weight:800;letter-spacing:.14em}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;padding:13px 20px;border:1px solid transparent;font-size:13px;font-weight:800;transition:.25s;cursor:pointer}.btn-small{padding:10px 16px}.btn-outline{color:#fff;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.04)}.btn-outline:hover{background:#fff;color:var(--navy)}.btn-primary{background:var(--cyan);color:#06232c}.btn-primary:hover{background:#28d4f3;transform:translateY(-2px);box-shadow:0 12px 28px rgba(24,198,234,.24)}.btn-light{background:#fff;color:#0b4b61}.btn-light:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.16)}.menu-toggle{display:none;background:none;border:0;width:42px}.menu-toggle span{display:block;height:1px;background:#fff;margin:7px}.mobile-menu{display:none} .hero-formal{position:relative;min-height:790px;height:100svh;display:flex;align-items:center;overflow:hidden;color:#fff;background:#0a2532}.hero-bg-photo{position:absolute;inset:0;background:url('../img/hero-valia-lapaz.png') center 62%/cover no-repeat;transform:scale(1.025);animation:heroZoom 18s ease-in-out infinite alternate}.hero-overlay-formal{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,15,22,.42),rgba(3,15,22,.52)),linear-gradient(90deg,rgba(3,15,22,.25),rgba(3,15,22,.08))}#heroCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.3}.hero-content-formal{position:relative;z-index:2;padding-top:86px;display:flex;flex-direction:column;align-items:center;text-align:center}.hero-center{max-width:900px}.hero-services{display:block;font-size:17px;font-weight:700;text-shadow:0 2px 12px rgba(0,0,0,.35)}.hero-center h1{font-size:clamp(64px,7.2vw,104px);line-height:.98;letter-spacing:-.055em;margin:20px 0 28px;color:var(--cyan);font-weight:800;text-shadow:0 4px 24px rgba(0,0,0,.25)}.hero-center p{max-width:760px;margin:0 auto;color:rgba(255,255,255,.92);font-size:19px;line-height:1.55;text-shadow:0 2px 12px rgba(0,0,0,.38)}.hero-actions{display:flex;justify-content:center;gap:16px;margin-top:33px}.hero-service-icons{margin-top:58px;display:grid;grid-template-columns:repeat(4,1fr);width:min(720px,100%);border-top:1px solid rgba(255,255,255,.24);padding-top:20px}.hero-service-item{position:relative;color:#fff;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 18px;transition:.25s}.hero-service-item:not(:last-child):after{content:"";position:absolute;right:0;top:4px;bottom:4px;width:1px;background:rgba(255,255,255,.28)}.hero-service-item:hover{color:var(--cyan);transform:translateY(-3px)}.hero-icon{width:45px;height:45px;display:grid;place-items:center;color:var(--cyan)}.hero-icon svg{width:44px;height:44px}.hero-service-item strong{font-size:10px;text-transform:uppercase;letter-spacing:.04em}.hero-seq{opacity:0;transform:translateY(14px);animation:fadeUp .7s forwards}.hero-center h1{animation-delay:.12s}.hero-center p{animation-delay:.24s}.hero-actions{animation-delay:.36s}.hero-service-icons{animation-delay:.48s}@keyframes fadeUp{to{opacity:1;transform:none}}@keyframes heroZoom{to{transform:scale(1.06)}}.hero-divider{position:absolute;left:0;right:0;bottom:-1px;height:32px;background:#fff;clip-path:polygon(0 35%,27% 35%,29% 0,100% 0,100% 100%,0 100%)}.hero-divider span{position:absolute;top:10px;left:0;width:33%;height:2px;background:linear-gradient(90deg,transparent,var(--cyan))} .section{padding:105px 0;position:relative}.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:10px;font-weight:800;color:#367d70}.section h2,.page-hero h1{font-size:clamp(40px,4.7vw,67px);line-height:1.03;letter-spacing:-.05em;margin:12px 0;font-weight:800}.reveal{opacity:0;transform:translateY(18px);transition:.7s cubic-bezier(.2,.75,.2,1)}.reveal.in{opacity:1;transform:none} .about-editorial{background:#fff}.about-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:74px;align-items:center}.about-photo{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);min-height:470px}.about-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.photo-accent{position:absolute;right:0;bottom:0;width:80px;height:5px;background:linear-gradient(90deg,var(--cyan),var(--green))}.about-copy h2{font-size:56px;margin-bottom:0}.about-copy h3{font-size:27px;color:var(--cyan);margin:2px 0 10px;font-weight:500}.title-rule{width:100%;max-width:500px;border-top:3px dotted var(--cyan);margin:14px 0 28px}.about-copy p{color:#4d5b62;font-size:15px}.trust-pill{display:inline-block;margin-top:18px;padding:11px 17px;border:1px solid rgba(24,198,234,.35);border-radius:999px;background:#f0fbfd;color:#21404a;font-size:11px;font-weight:800;text-align:center} .services-formal{background:#f5f8f9}.section-heading-centered{text-align:center;max-width:800px;margin:0 auto 54px}.section-heading-centered p{color:var(--muted);font-size:16px}.service-formal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.service-formal-card{background:#fff;border:1px solid #e0e7e8;border-radius:18px;padding:28px;min-height:335px;position:relative;transition:.3s;box-shadow:0 12px 34px rgba(5,29,41,.05)}.service-formal-card:before{content:"";position:absolute;top:0;left:24px;right:24px;height:3px;background:linear-gradient(90deg,var(--cyan),var(--teal));transform:scaleX(0);transition:.35s}.service-formal-card:hover{transform:translateY(-5px);box-shadow:0 24px 60px rgba(5,29,41,.10)}.service-formal-card:hover:before{transform:scaleX(1)}.service-formal-num{font-size:10px;color:#849398;letter-spacing:.14em}.service-formal-icon{display:block;font-size:31px;color:var(--cyan);margin:42px 0 18px}.service-formal-card h3{font-size:24px;margin:0 0 13px}.service-formal-card p{color:var(--muted);font-size:13px}.service-link{position:absolute;left:28px;bottom:24px;font-size:11px;font-weight:800;color:#276879}.formal-divider{position:absolute;left:0;right:0;bottom:-28px;height:30px;background:#fff;clip-path:polygon(0 0,30% 0,32% 100%,100% 100%,100% 0)} .tailored-formal{padding-top:130px;background:#fff}.tailored-formal-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center}.tailored-formal-grid p{font-size:19px;color:#4e5e64}.text-link{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;margin-top:14px}.text-link span{transition:.25s}.text-link:hover span{transform:translateX(4px)} .process-formal{background:#fff}.process-formal-line{display:grid;grid-template-columns:repeat(4,1fr);position:relative;border-top:1px solid #cfdadc;margin-top:75px}.process-progress{position:absolute;top:-1px;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--cyan),var(--teal));transition:1.4s}.process-formal-line.active .process-progress{width:100%}.process-formal-step{padding:28px 12px 0;position:relative}.process-formal-step i{position:absolute;top:-6px;left:10px;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid var(--cyan)}.process-formal-step span{font-size:9px;color:#7c898e;letter-spacing:.18em}.process-formal-step strong{display:block;font-size:23px;margin-top:6px}.process-note{max-width:650px;margin:42px auto 0;text-align:center;color:var(--muted)} .team-formal{background:#f5f8f9}.flip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.flip-card{height:470px;perspective:1200px;outline:none}.flip-inner{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.75,.2,1);transform-style:preserve-3d}.flip-card:hover .flip-inner,.flip-card.is-flipped .flip-inner,.flip-card:focus .flip-inner{transform:rotateY(180deg)}.flip-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:20px;overflow:hidden;box-shadow:0 18px 50px rgba(5,29,41,.11)}.flip-front img{width:100%;height:100%;object-fit:cover}.flip-front-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,25,36,.82),transparent 55%)}.flip-front-copy{position:absolute;left:24px;right:24px;bottom:23px;color:#fff}.flip-front-copy>span{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#9fe9e2}.flip-front-copy h3{font-size:27px;margin:5px 0 4px}.flip-front-copy p{margin:0;color:rgba(255,255,255,.8);font-size:12px}.flip-front-copy small{display:block;margin-top:14px;font-size:10px;color:#c7edf2}.flip-back{transform:rotateY(180deg);background:linear-gradient(145deg,#092b39,#071c27);color:#fff;padding:34px;display:flex;flex-direction:column}.flip-mark{font-size:10px;letter-spacing:.28em;color:var(--cyan)}.flip-back h3{font-size:29px;margin:45px 0 8px}.flip-back>p{font-size:12px;color:#a8c2c9}.flip-back ul{padding-left:18px;color:#d8e5e8;font-size:13px;line-height:2}.flip-back a{margin-top:auto;font-size:12px;font-weight:800;color:var(--cyan)} .alliance-formal{background:#071d29;color:#fff}.alliance-formal-grid{display:grid;grid-template-columns:1fr 1fr;gap:86px;align-items:center}.alliance-brand-pair{display:flex;align-items:center;gap:20px}.alliance-brand-pair>div{background:#fff;border-radius:14px;padding:20px;width:220px;height:135px;display:flex;align-items:center;justify-content:center}.alliance-brand-pair .esi-wrap{width:280px}.alliance-brand-pair img{max-height:100%;object-fit:contain}.alliance-brand-pair>span{font-size:26px;color:#a9bcc1}.alliance-formal h2{font-size:50px}.alliance-formal p{color:#b2c4c9}.light-link{color:#fff} .contact-section{background:#fff}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:86px}.contact-copy h2{font-size:58px}.contact-copy p{color:var(--muted);font-size:16px}.contact-direct{display:flex;flex-direction:column;gap:8px;margin-top:27px;font-weight:800;font-size:12px}.glass-form{background:#f7f9fa;border:1px solid #dfe6e7;border-radius:18px;padding:30px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}label{display:grid;gap:7px;font-size:11px;font-weight:800;color:#4c5c63}input,select,textarea{width:100%;border:1px solid #d7e0e1;background:#fff;border-radius:8px;padding:13px 14px;font:inherit;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(24,198,234,.08)}.check{display:flex;align-items:flex-start;gap:8px}.check input{width:auto;margin-top:4px}.hp-field{position:absolute!important;left:-9999px!important} .faq-ribbon{background:#edf3f4;border-top:1px solid #dbe4e5}.faq-ribbon-inner{min-height:100px;display:flex;justify-content:space-between;align-items:center;gap:30px}.faq-ribbon span{font-size:18px;font-weight:800}.faq-ribbon p{margin:2px 0;color:var(--muted);font-size:12px}.footer{background:#061923;color:#fff;padding:65px 0 22px}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:45px}.footer-grid>div{display:flex;flex-direction:column;gap:8px}.footer-brand img{width:200px}.footer-grid p,.footer-grid a,.footer-grid span{color:rgba(255,255,255,.6);font-size:12px}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;margin-top:45px;color:rgba(255,255,255,.4);font-size:10px} .drawer-backdrop{position:fixed;inset:0;background:rgba(1,12,18,.45);z-index:3000;opacity:0;pointer-events:none;transition:.3s}.drawer-backdrop.open{opacity:1;pointer-events:auto}.faq-drawer{position:fixed;top:0;right:0;width:min(500px,100%);height:100%;z-index:3001;background:#fff;padding:72px 35px 35px;transform:translateX(100%);transition:.35s;overflow:auto}.faq-drawer.open{transform:none}.drawer-close{position:absolute;right:20px;top:18px;border:1px solid #d6dfe0;background:#fff;width:40px;height:40px;border-radius:50%;font-size:22px}.faq-drawer h2{font-size:38px}.faq-item{border-top:1px solid #e0e7e8}.faq-q{width:100%;display:flex;justify-content:space-between;padding:18px 0;border:0;background:none;text-align:left;font-weight:800}.faq-a{display:grid;grid-template-rows:0fr;transition:.3s}.faq-a p{overflow:hidden;margin:0;color:var(--muted)}.faq-item.open .faq-a{grid-template-rows:1fr}.faq-item.open .faq-a p{padding-bottom:18px} .assistant-pill{position:fixed;right:22px;bottom:22px;z-index:2800;border:1px solid rgba(255,255,255,.35);background:#071d29;color:#fff;border-radius:999px;min-width:165px;height:52px;padding:0 18px;display:flex;gap:10px;align-items:center;justify-content:center;box-shadow:0 15px 38px rgba(2,19,27,.24)}.assistant-symbol{color:var(--cyan);font-size:18px}.assistant-label{font-size:11px;font-weight:800}.assistant-teaser{position:fixed;right:195px;bottom:28px;z-index:2799;background:#fff;border:1px solid #dce4e5;border-radius:10px;padding:10px 13px;font-size:10px;box-shadow:var(--shadow);transition:.3s}.assistant-teaser.hide{opacity:0;pointer-events:none}.assistant-panel{position:fixed;right:22px;bottom:84px;width:min(350px,calc(100% - 35px));background:#fff;border:1px solid #dfe6e7;border-radius:16px;box-shadow:var(--shadow);padding:20px;z-index:2800;opacity:0;transform:translateY(8px);pointer-events:none;transition:.25s}.assistant-panel.open{opacity:1;transform:none;pointer-events:auto}.assistant-head{display:flex;justify-content:space-between}.assistant-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal);margin-right:8px}.assistant-options{display:grid;gap:8px}.assistant-options a{padding:10px 11px;border:1px solid #e0e7e8;border-radius:8px;font-size:11px;font-weight:800} .page-hero{padding:180px 0 95px;background:linear-gradient(135deg,#061923,#0d3544);color:#fff}.page-hero h1{font-size:clamp(50px,6.5vw,86px)}.page-hero p{max-width:710px;color:#bfd0d5}.profile-hero-formal{padding:155px 0 100px;background:linear-gradient(135deg,#eff6f5,#fff)}.back-link{display:inline-block;margin-bottom:38px;font-size:11px;font-weight:800;color:#47736b}.profile-grid-formal{display:grid;grid-template-columns:290px 1fr;gap:72px;align-items:center}.profile-photo-wrap{width:290px;aspect-ratio:1;border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}.profile-photo{width:100%;height:100%;object-fit:cover}.profile-main-copy h1{font-size:clamp(50px,6vw,82px);line-height:1;letter-spacing:-.06em;margin:9px 0}.profile-role{color:#3f776d;font-weight:800}.profile-main-copy>p:not(.profile-role){color:#4c5d64}.profile-details{background:#fff}.profile-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.profile-area-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}.profile-area-list li{padding:18px 0;border-bottom:1px solid var(--line);font-weight:700}.digital-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.digital-page-item{padding:32px;border:1px solid #e0e7e8;border-radius:16px}.digital-page-item>span{font-size:10px;color:var(--cyan)}.digital-page-item h2{font-size:28px}.digital-page-item p{color:var(--muted)}.selected-work{background:#f5f8f9}.selected-work-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.work-card{background:#fff;border:1px solid #dfe7e8;padding:28px;border-radius:14px}.work-card>span{font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:#507b72}.work-card h3{font-size:25px}.work-card p{color:var(--muted);font-size:13px}.work-card a{font-size:11px;font-weight:800;color:#1a7188} @media(max-width:980px){.desktop-nav,.btn-small{display:none}.menu-toggle{display:block}.mobile-menu{position:absolute;top:74px;left:18px;right:18px;display:none;flex-direction:column;background:rgba(6,27,39,.97);border-radius:12px;padding:10px}.mobile-menu.open{display:flex}.mobile-menu a{padding:11px;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}.about-grid,.tailored-formal-grid,.alliance-formal-grid,.contact-grid,.profile-details-grid{grid-template-columns:1fr}.service-formal-grid{grid-template-columns:1fr 1fr}.flip-grid{grid-template-columns:1fr 1fr}.process-formal-line{grid-template-columns:1fr 1fr;gap:28px}.alliance-brand-pair{justify-content:flex-start}.footer-grid{grid-template-columns:1fr 1fr}.profile-grid-formal{grid-template-columns:1fr}.profile-photo-wrap{width:220px}} @media(max-width:650px){:root{--container:min(100% - 28px,1190px)}.nav-wrap{height:70px}.brand-logo img{width:145px}.hero-formal{min-height:760px}.hero-bg-photo{background-position:62% 62%}.hero-center h1{font-size:57px}.hero-services{font-size:13px}.hero-center p{font-size:16px}.hero-actions{flex-direction:column;align-items:center}.hero-service-icons{grid-template-columns:1fr 1fr;gap:16px;border-top:0;margin-top:36px}.hero-service-item{border-top:1px solid rgba(255,255,255,.22);padding-top:12px}.hero-service-item:not(:last-child):after{display:none}.section{padding:78px 0}.about-photo{min-height:350px}.about-copy h2{font-size:43px}.about-copy h3{font-size:22px}.service-formal-grid{grid-template-columns:1fr}.tailored-formal{padding-top:100px}.process-formal-line{grid-template-columns:1fr}.flip-grid{grid-template-columns:1fr}.flip-card{height:450px}.alliance-brand-pair{flex-direction:column}.alliance-brand-pair>div,.alliance-brand-pair .esi-wrap{width:100%;height:115px}.form-row{grid-template-columns:1fr}.faq-ribbon-inner{padding:22px 0;flex-direction:column;align-items:flex-start}.footer-grid{grid-template-columns:1fr}.assistant-pill{min-width:54px;width:54px;padding:0}.assistant-label{display:none}.assistant-teaser{right:84px}.profile-photo-wrap{width:180px}.digital-page-grid,.selected-work-grid{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal,.hero-seq{opacity:1!important;transform:none!important}} /* ========================================================= V8 FINAL REFINEMENTS — formal, responsive, interactive ========================================================= */ /* Hero: clean transition + premium interactive canvas */ .hero-formal{overflow:hidden} .hero-formal:after{display:none!important}.hero-divider{display:none!important} .hero-cursor-glow{position:absolute;z-index:1;width:260px;height:260px;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(55,224,214,.12) 0%,rgba(24,198,234,.06) 36%,transparent 72%);filter:blur(4px);transform:translate(-50%,-50%);transition:opacity .35s;mix-blend-mode:screen} .hero-formal:hover .hero-cursor-glow{opacity:1} .about-editorial{margin-top:0!important;padding-top:110px} /* Conoce VALIA */ .about-photo img{object-fit:cover!important;object-position:center!important} .trust-pill-link{display:inline-flex!important;align-items:center;gap:9px;transition:transform .26s,box-shadow .26s,background .26s,border-color .26s,color .26s} .trust-pill-link span{transition:transform .26s} .trust-pill-link:hover{transform:translateY(-2px);background:#e9faff;border-color:rgba(24,198,234,.72);box-shadow:0 10px 24px rgba(20,109,133,.10);color:#0b5569} .trust-pill-link:hover span{transform:translateX(4px)} /* Services: less empty, same visual language as Hero */ .services-formal{background:linear-gradient(180deg,#f7fafb 0%,#eef4f5 100%)} .service-formal-grid{align-items:stretch} .service-formal-card{min-height:315px;padding:28px 28px 25px;background:linear-gradient(145deg,#ffffff 0%,#fbfdfd 65%,#f1fafa 100%);overflow:hidden} .service-formal-card:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-90px;top:-90px;background:radial-gradient(circle,rgba(24,198,234,.10),transparent 68%);opacity:.55;transition:.35s} .service-formal-card:hover:after{opacity:1;transform:scale(1.08)} .service-formal-card:hover{border-color:rgba(24,198,234,.36);transform:translateY(-6px)} .service-card-icon{display:grid!important;place-items:center;width:58px;height:58px;margin:32px 0 18px;color:var(--cyan);border-radius:16px;background:linear-gradient(145deg,rgba(24,198,234,.06),rgba(37,203,187,.08));border:1px solid rgba(24,198,234,.18);transition:.3s} .service-card-icon svg{width:40px;height:40px} .service-formal-card:hover .service-card-icon{transform:translateY(-2px) scale(1.04);background:linear-gradient(145deg,rgba(24,198,234,.12),rgba(37,203,187,.13));box-shadow:0 10px 24px rgba(24,198,234,.10)} .service-formal-card h3{font-size:25px;line-height:1.16;margin-bottom:12px} .service-formal-card p{font-size:13.5px;line-height:1.7;margin-bottom:44px} .service-link{bottom:24px;display:inline-flex;gap:6px;align-items:center} .service-link b{font-weight:800;transition:transform .25s}.service-formal-card:hover .service-link b{transform:translateX(4px)} /* Generic animated links */ .link-animated,.contact-link,.footer-menu a,.footer-contact a,.footer-legal a{position:relative;transition:color .25s,transform .25s} .link-animated:after,.contact-link:after,.footer-menu a:after,.footer-contact a:after,.footer-legal a:after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;background:var(--cyan);transition:width .28s} .link-animated:hover:after,.contact-link:hover:after,.footer-menu a:hover:after,.footer-contact a:hover:after,.footer-legal a:hover:after{width:100%} .link-animated:hover,.contact-link:hover,.footer-menu a:hover,.footer-contact a:hover,.footer-legal a:hover{color:var(--cyan)} .link-animated:hover span{transform:translateX(4px)} /* Interactive process */ .process-interactive{position:relative;margin-top:76px} .process-track{position:absolute;left:0;right:0;top:32px;height:2px;background:#d7e2e4;z-index:0} .process-active-line{height:2px;width:0;background:linear-gradient(90deg,var(--cyan),var(--teal));transition:width .48s cubic-bezier(.2,.75,.2,1);box-shadow:0 0 10px rgba(24,198,234,.22)} .process-steps{display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:1} .process-step-interactive{appearance:none;border:0;background:transparent;text-align:left;padding:0 12px 18px 12px;cursor:pointer;color:var(--navy);font-family:inherit;min-height:95px;position:relative} .process-step-interactive:first-child{padding-left:0}.process-step-interactive:last-child{padding-right:0} .process-step-interactive i{position:absolute;top:27px;left:12px;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid #9cb5bc;transition:.3s;transform:translate(-50%,-50%)} .process-step-interactive:first-child i{left:0} .process-step-number{display:block;color:#849499;font-size:9px;letter-spacing:.18em;margin:0 0 38px} .process-step-interactive strong{font-size:22px;transition:color .25s,transform .25s;display:block} .process-step-interactive:hover strong,.process-step-interactive.active strong{color:#087c99;transform:translateY(-1px)} .process-step-interactive.active i,.process-step-interactive.passed i{border-color:var(--cyan);background:var(--cyan);box-shadow:0 0 0 5px rgba(24,198,234,.09)} .process-description{max-width:720px;min-height:76px;margin:24px auto 0;text-align:center;color:#53656c;font-size:16px;line-height:1.65;padding:18px 28px;border-radius:14px;background:linear-gradient(145deg,#fbfdfd,#f4f8f8);border:1px solid #e0e8e9;transition:opacity .22s,transform .22s} .process-description.changing{opacity:0;transform:translateY(5px)} /* Team flip cards: real copy */ .flip-back{padding:31px!important} .flip-back h3{margin:27px 0 6px!important;font-size:26px!important;line-height:1.15} .flip-role{font-size:12px!important;color:#9fe9e2!important;font-weight:800!important;margin:0 0 18px!important} .flip-bio{font-size:12.5px!important;line-height:1.72!important;color:#d7e4e8!important;margin:0!important} .flip-back a{margin-top:auto!important;display:inline-flex;align-items:center;gap:7px} /* Alliance: stronger VALIA logo, balanced cards */ .alliance-brand-pair .brand-panel{background:#fff;border-radius:16px;padding:18px;width:240px;height:132px;display:flex;align-items:center;justify-content:center;transition:transform .28s,box-shadow .28s} .alliance-brand-pair .brand-panel:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(0,0,0,.20)} .alliance-brand-pair .valia-panel img{width:100%;height:100%;object-fit:contain} .alliance-brand-pair .esi-wrap{width:285px} /* Contact: cleaner left column, interactive links */ .contact-note{margin-top:14px!important;color:#52636a!important;font-size:14px!important;max-width:430px} .contact-direct{gap:13px!important;margin-top:30px!important;align-items:flex-start} .contact-link{display:grid!important;grid-template-columns:32px auto 20px;align-items:center;gap:10px;padding:9px 0;font-size:12px!important} .contact-link .contact-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#eef8fa;color:#0c89a6;border:1px solid rgba(24,198,234,.20)} .contact-link b{color:var(--cyan);transition:transform .25s}.contact-link:hover b{transform:translateX(4px)} .contact-orbit{display:none!important} /* FAQ ribbon */ .faq-ribbon{background:linear-gradient(90deg,#eef5f6,#f8fbfb);border-top:1px solid #dbe6e8;border-bottom:1px solid #dbe6e8;position:relative;overflow:hidden} .faq-ribbon:before{content:"";position:absolute;left:0;top:0;width:180px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--teal),transparent)} .faq-ribbon-copy{display:flex;align-items:center;gap:14px} .faq-ribbon-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid rgba(24,198,234,.26);color:#0a7892;font-weight:800;font-size:18px;box-shadow:0 8px 22px rgba(5,29,41,.06)} .faq-ribbon-copy strong{display:block;font-size:17px}.faq-ribbon-copy p{margin:2px 0 0;color:var(--muted);font-size:12px} .faq-ribbon-button{border:1px solid rgba(7,63,78,.22);background:#fff;color:var(--navy);border-radius:9px;padding:12px 17px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;display:inline-flex;gap:9px;align-items:center;transition:.25s} .faq-ribbon-button span{transition:transform .25s}.faq-ribbon-button:hover{transform:translateY(-2px);border-color:rgba(24,198,234,.55);box-shadow:0 10px 26px rgba(5,29,41,.08);color:#087c99}.faq-ribbon-button:hover span{transform:translate(3px,-2px)} .faq-contact-box{margin-top:34px;padding:26px;border-radius:16px;background:linear-gradient(145deg,#071d29,#0d3340);color:#fff} .faq-contact-box>span{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#8fded6}.faq-contact-box h3{font-size:25px;margin:7px 0}.faq-contact-box p{font-size:12px;color:#b7cbd0;margin-bottom:17px}.faq-contact-primary,.faq-contact-secondary{display:inline-flex;align-items:center;justify-content:center;padding:10px 13px;border-radius:8px;font-size:11px;font-weight:800;margin-right:8px;transition:.25s}.faq-contact-primary{background:var(--cyan);color:#06252e}.faq-contact-secondary{border:1px solid rgba(255,255,255,.25);color:#fff}.faq-contact-primary:hover,.faq-contact-secondary:hover{transform:translateY(-2px)} /* Footer: 3 clear zones, legal at bottom */ .footer-main{display:grid;grid-template-columns:1.15fr .8fr 1fr;gap:80px;align-items:start} .footer-brand-block img{width:205px}.footer-brand-block strong{display:block;margin-top:15px;color:#d8e6e9;font-size:14px;font-weight:600;letter-spacing:.02em} .footer-menu,.footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:10px} .footer-menu>strong,.footer-contact>strong{color:#fff;font-size:13px;margin-bottom:2px}.footer-menu a,.footer-contact a,.footer-contact>span{color:rgba(255,255,255,.62);font-size:12px} .footer-contact a,.footer-contact>span{display:flex;align-items:center;gap:9px}.footer-contact a>span,.footer-contact>span>i{font-style:normal;width:18px;color:var(--cyan);text-align:center} .footer-bottom{display:flex!important;justify-content:space-between;align-items:center;gap:25px;margin-top:52px!important;padding-top:20px!important}.footer-legal{display:flex;gap:18px;flex-wrap:wrap}.footer-legal a{color:rgba(255,255,255,.46);font-size:10px} /* Responsive polish */ @media(max-width:980px){ .process-steps{grid-template-columns:repeat(2,1fr);gap:28px 0}.process-track{display:none}.process-step-interactive{border-top:1px solid #d9e4e5;padding-top:18px}.process-step-interactive i{top:16px}.process-step-number{margin-bottom:20px}.process-description{margin-top:14px} .footer-main{grid-template-columns:1fr 1fr;gap:45px}.footer-brand-block{grid-column:1/-1}.footer-contact{grid-column:2}.footer-menu{grid-column:1}.footer-bottom{align-items:flex-start;flex-direction:column} } @media(max-width:650px){ .hero-cursor-glow{display:none}.about-editorial{padding-top:76px}.about-photo{min-height:0!important;aspect-ratio:4/5}.about-photo img{position:relative!important;height:100%!important} .service-formal-card{min-height:290px}.service-card-icon{margin-top:26px}.service-formal-card p{margin-bottom:38px} .process-steps{grid-template-columns:1fr}.process-step-interactive{min-height:82px}.process-description{text-align:left;padding:16px 18px;font-size:14px} .flip-back{padding:26px!important}.flip-back h3{font-size:23px!important}.flip-bio{font-size:12px!important} .alliance-brand-pair .brand-panel,.alliance-brand-pair .esi-wrap{width:100%!important;height:112px!important} .faq-ribbon-inner{gap:18px!important}.faq-ribbon-copy{align-items:flex-start}.faq-ribbon-button{width:100%;justify-content:center} .faq-contact-primary,.faq-contact-secondary{width:100%;margin:0 0 8px} .footer-main{grid-template-columns:1fr;gap:34px}.footer-brand-block,.footer-menu,.footer-contact{grid-column:auto}.footer-bottom{gap:14px}.footer-legal{gap:12px 16px} .assistant-pill{min-width:54px!important;width:54px!important}.assistant-label{display:none!important} } /* === Production polish / audit fixes === */ .eyebrow{ font-size:13px!important; letter-spacing:.15em!important; font-weight:800!important; display:inline-flex;align-items:center;gap:10px; } .eyebrow:before{content:"";width:28px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--teal));border-radius:2px} .section-heading-centered .eyebrow{justify-content:center} .section-heading-centered .eyebrow:before{display:none} .section-heading-centered .eyebrow:after{content:"";width:28px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--teal));border-radius:2px} /* Premium CTA system */ .btn{position:relative;overflow:hidden;isolation:isolate} .btn:before{content:"";position:absolute;top:-70%;left:-35%;width:22%;height:240%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-22deg) translateX(-500%);transition:transform .72s cubic-bezier(.2,.8,.2,1);z-index:-1} .btn:hover:before{transform:skewX(-22deg) translateX(750%)} .btn:hover{transform:translateY(-2px)} .btn span,.btn b{transition:transform .25s} .btn:hover span,.btn:hover b{transform:translateX(3px)} .link-animated,.contact-link,.footer-menu a,.footer-contact a,.legal-open{position:relative} .link-animated:after,.contact-link:after,.footer-menu a:after,.footer-contact a:after,.legal-open:after{ content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;background:var(--cyan);transition:width .28s } .link-animated:hover:after,.contact-link:hover:after,.footer-menu a:hover:after,.footer-contact a:hover:after,.legal-open:hover:after{width:100%} /* Tailored section: identity / need / goal */ .tailored-lead{font-size:16px!important;font-weight:700;color:#26444f!important;max-width:560px} .tailored-concepts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px 0 24px;position:relative} .tailored-concepts:before{content:"";position:absolute;top:15px;left:16%;right:16%;height:1px;background:linear-gradient(90deg,var(--cyan),var(--teal),var(--green));opacity:.45} .tailored-concepts span{position:relative;z-index:1;background:#fff;border:1px solid #dfe7e8;border-radius:14px;padding:28px 16px 16px;text-align:center;transition:.3s} .tailored-concepts span:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(5,29,41,.08);border-color:rgba(24,198,234,.5)} .tailored-concepts i{position:absolute;top:10px;left:50%;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--cyan);transform:translateX(-50%);box-shadow:0 0 0 5px rgba(24,198,234,.07)} .tailored-concepts strong{display:block;font-size:13px;margin-top:4px} .tailored-concepts small{display:block;color:var(--muted);font-size:10px;margin-top:5px} /* Larger flip-card back body */ .flip-bio{font-size:15px!important;line-height:1.65!important;color:#e4eef0!important} .flip-role{font-size:13px!important;font-weight:800!important;color:#9fdce5!important} /* Responsive production image */ .hero-bg-photo{background-image:url('../img/hero-valia-desktop.webp')!important} /* Legal modal */ .legal-open{border:0;background:none;color:rgba(255,255,255,.62);font:inherit;font-size:11px;cursor:pointer;padding:0} .legal-backdrop{position:fixed;inset:0;background:rgba(2,15,22,.55);backdrop-filter:blur(4px);z-index:3200;opacity:0;pointer-events:none;transition:.28s} .legal-backdrop.open{opacity:1;pointer-events:auto} .legal-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-47%) scale(.98);width:min(680px,calc(100% - 34px));max-height:min(720px,88vh);overflow:auto;background:#fff;border-radius:20px;padding:42px;z-index:3201;box-shadow:0 36px 110px rgba(3,22,31,.26);opacity:0;pointer-events:none;transition:.3s} .legal-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)} .legal-close{position:absolute;right:18px;top:18px;width:40px;height:40px;border-radius:50%;border:1px solid #d9e2e3;background:#fff;font-size:23px;cursor:pointer} .legal-modal h2{font-size:42px;letter-spacing:-.045em;margin:10px 0} .legal-intro{color:var(--muted)} .legal-modal-links{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0} .legal-modal-links a{display:flex;justify-content:space-between;align-items:center;border:1px solid #dfe7e8;border-radius:13px;padding:18px;transition:.25s} .legal-modal-links a:hover{border-color:var(--cyan);background:#f4fbfc;transform:translateY(-2px)} .legal-modal-links span{color:var(--cyan)} .legal-contact{font-size:12px;color:var(--muted);border-top:1px solid #e1e8e9;padding-top:20px} .legal-contact a{font-weight:800;color:#236a7b} /* Error page */ .error-hero{min-height:70vh;display:flex;align-items:center} .error-actions{display:flex;gap:12px;margin-top:28px} /* Focus visibility */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(24,198,234,.48);outline-offset:3px} /* Mobile audit refinements */ @media(max-width:650px){ .eyebrow{font-size:11px!important} .hero-bg-photo{background-image:url('../img/hero-valia-mobile.webp')!important;background-position:center 50%!important} .tailored-concepts{grid-template-columns:1fr} .tailored-concepts:before{display:none} .legal-modal{padding:34px 22px} .legal-modal-links{grid-template-columns:1fr} .legal-modal h2{font-size:34px} .error-actions{flex-direction:column;align-items:flex-start} } /* ========================================================== SERVICE PAGES — premium formal system ========================================================== */ .service-hero{ min-height:680px;background:linear-gradient(135deg,#061b27,#0c3442);color:#fff; padding:150px 0 92px;position:relative;overflow:hidden; } .service-hero:after{content:"";position:absolute;inset:auto -8% -35% auto;width:620px;height:620px;border-radius:50%; background:radial-gradient(circle,rgba(24,198,234,.10),transparent 67%);pointer-events:none} .service-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:90px;align-items:center;position:relative;z-index:2} .service-back{display:inline-flex;color:#a9c4ca;font-size:11px;font-weight:800;margin-bottom:35px;transition:.25s} .service-back:hover{color:#fff;transform:translateX(-3px)} .service-hero-copy h1{font-size:clamp(56px,6vw,90px);line-height:.98;letter-spacing:-.065em;margin:16px 0 24px;max-width:900px} .service-hero-copy>p{font-size:18px;color:#c4d6da;max-width:760px} .service-hero-actions{display:flex;align-items:center;gap:24px;margin-top:30px} .service-hero-actions .text-link{color:#fff} /* Service conceptual visual */ .service-visual{position:relative;width:min(460px,100%);aspect-ratio:1;margin-left:auto} .sv-orbit{position:absolute;border-radius:50%;border:1px solid rgba(105,226,218,.20);left:50%;top:50%;transform:translate(-50%,-50%)} .sv-orbit-a{width:78%;height:78%;animation:svspin 22s linear infinite}.sv-orbit-b{width:54%;height:54%;border-style:dashed;animation:svspinReverse 18s linear infinite} .sv-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:112px;height:112px;border-radius:50%; display:grid;place-items:center;background:rgba(255,255,255,.055);border:1px solid rgba(24,198,234,.42);box-shadow:0 0 45px rgba(24,198,234,.11)} .sv-core span{font-size:30px;font-weight:800;color:var(--cyan)} .sv-node{position:absolute;display:flex;align-items:center;gap:8px;color:#c4d7db;font-size:11px;font-weight:800;letter-spacing:.06em} .sv-node i{width:10px;height:10px;border-radius:50%;background:#071b27;border:2px solid var(--teal);box-shadow:0 0 0 6px rgba(37,203,187,.07)} .sv-n1{left:2%;top:30%}.sv-n2{right:0;top:47%}.sv-n3{left:18%;bottom:12%} .sv-line{position:absolute;height:1px;background:linear-gradient(90deg,rgba(24,198,234,.06),rgba(24,198,234,.42),rgba(37,203,187,.07));transform-origin:left} .sv-line-1{left:17%;top:34%;width:36%;transform:rotate(18deg)}.sv-line-2{left:53%;top:51%;width:31%;transform:rotate(-4deg)}.sv-line-3{left:29%;top:68%;width:28%;transform:rotate(-40deg)} @keyframes svspin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes svspinReverse{to{transform:translate(-50%,-50%) rotate(-360deg)}} /* subtle personality per service */ .service-hero-training .sv-core{border-radius:26px;transform:translate(-50%,-50%) rotate(45deg)}.service-hero-training .sv-core span{transform:rotate(-45deg)} .service-hero-digital .sv-orbit-a{border-radius:24px}.service-hero-digital .sv-orbit-b{border-radius:16px} .service-hero-ai .sv-core{box-shadow:0 0 55px rgba(24,198,234,.18)}.service-hero-ai .sv-node i{animation:nodePulse 2.4s infinite} @keyframes nodePulse{50%{box-shadow:0 0 0 11px rgba(37,203,187,.02),0 0 18px rgba(37,203,187,.3)}} .service-intro{background:#fff}.service-intro-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px}.service-intro-copy{padding-top:8px;color:#54656b}.service-lead{font-size:21px;color:#173944;font-weight:600} .service-capabilities{background:#f5f8f9}.service-cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .service-cap-card{background:linear-gradient(145deg,#fff,#fbfdfd);border:1px solid #dfe7e8;border-radius:18px;padding:27px;min-height:315px;position:relative;transition:.3s;box-shadow:0 12px 35px rgba(4,28,39,.045)} .service-cap-card:after{content:"";position:absolute;inset:0;border-radius:18px;background:radial-gradient(circle at 85% 0%,rgba(24,198,234,.07),transparent 35%);opacity:.45;transition:.3s;pointer-events:none} .service-cap-card:hover{transform:translateY(-5px);border-color:rgba(24,198,234,.42);box-shadow:0 22px 56px rgba(4,28,39,.09)} .service-cap-card:hover:after{opacity:1}.service-cap-num{font-size:9px;letter-spacing:.16em;color:#84989d}.service-cap-icon{font-size:35px;color:var(--cyan);margin:38px 0 19px} .service-cap-card h3{font-size:22px;line-height:1.18;margin:0 0 13px}.service-cap-card p{color:var(--muted);font-size:13px} .service-value{background:#fff}.service-value-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:start}.service-value-grid>div:first-child>p{color:var(--muted);font-size:17px} .service-value-list{border-top:1px solid var(--line)}.service-value-item{display:grid;grid-template-columns:54px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);transition:.25s} .service-value-item:hover{padding-left:8px;background:linear-gradient(90deg,rgba(24,198,234,.035),transparent)}.service-value-item>span{font-size:9px;color:var(--cyan);letter-spacing:.16em;padding-top:3px} .service-value-item strong{font-size:17px}.service-value-item p{margin:5px 0 0;color:var(--muted);font-size:13px} /* Digital projects as applied case studies */ .digital-projects-premium{background:#f5f8f9} .featured-projects{display:grid;gap:90px} .featured-project{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center} .featured-project:nth-child(even){grid-template-columns:.85fr 1.15fr}.featured-project:nth-child(even) .featured-project-art{order:2} .featured-project-art{position:relative;padding:20px;perspective:1000px} .fp-window{background:#fff;border:1px solid #dce5e6;border-radius:18px;overflow:hidden;box-shadow:0 30px 75px rgba(5,29,41,.14);transform:rotateY(-2deg);transition:.45s} .featured-project:hover .fp-window{transform:rotateY(0) translateY(-5px)} .fp-bar{height:38px;display:flex;align-items:center;gap:5px;padding:0 12px;border-bottom:1px solid #edf1f2}.fp-bar i{width:7px;height:7px;border-radius:50%;background:#d1d9db}.fp-bar span{margin-left:9px;color:#8a989d;font-size:9px} .fp-screen{aspect-ratio:16/9;background:linear-gradient(145deg,#0a2734,#15657a);padding:32px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end}.fp-art-2 .fp-screen{background:linear-gradient(145deg,#173743,#22aebe)} .fp-screen>span{font-size:9px;color:#73e1e9;letter-spacing:.16em}.fp-screen strong{font-size:clamp(29px,3.2vw,49px);letter-spacing:-.05em}.fp-screen small{opacity:.65;margin-top:5px} .fp-phone{position:absolute;right:0;bottom:0;width:92px;aspect-ratio:9/18;border:6px solid #061b27;background:linear-gradient(160deg,#0b3545,#1fc8d7);border-radius:21px;box-shadow:0 18px 45px rgba(4,28,39,.2);display:flex;align-items:flex-end;padding:8px;color:#fff;font-size:7px;transition:.35s} .featured-project:hover .fp-phone{transform:translateY(-7px) rotate(2deg)}.featured-project-copy h3{font-size:clamp(37px,4vw,57px);letter-spacing:-.05em;margin:10px 0}.featured-project-copy p{color:var(--muted)} .project-tags{display:block;color:#668087;font-size:11px;margin:18px 0} .compact-projects{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:75px}.compact-project{background:#fff;border:1px solid #dce5e6;border-radius:15px;padding:25px;display:grid;grid-template-columns:.7fr 1.3fr auto;gap:24px;align-items:start;transition:.3s}.compact-project:hover{transform:translateY(-3px);border-color:rgba(24,198,234,.45);box-shadow:0 16px 38px rgba(5,29,41,.07)} .compact-project span{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#39796f}.compact-project h3{margin:5px 0;font-size:22px}.compact-project p{margin:0;color:var(--muted);font-size:12px}.compact-project>a{font-size:11px;font-weight:800;color:#16667a;white-space:nowrap} .service-final-cta{background:#071d29;color:#fff}.service-final-inner{display:flex;align-items:center;justify-content:space-between;gap:60px}.service-final-inner h2{font-size:clamp(38px,4.5vw,62px);max-width:760px}.service-final-inner p{color:#b3c6cb;max-width:720px} @media(max-width:980px){ .service-hero-grid,.service-intro-grid,.service-value-grid{grid-template-columns:1fr} .service-visual{margin:10px auto 0;width:min(420px,80%)} .service-cap-grid{grid-template-columns:1fr 1fr} .featured-project,.featured-project:nth-child(even){grid-template-columns:1fr}.featured-project:nth-child(even) .featured-project-art{order:0} .compact-projects{grid-template-columns:1fr} .service-final-inner{align-items:flex-start;flex-direction:column} } @media(max-width:650px){ .service-hero{min-height:auto;padding:125px 0 70px} .service-hero-copy h1{font-size:50px} .service-hero-copy>p{font-size:16px} .service-hero-actions{align-items:flex-start;flex-direction:column} .service-visual{width:280px;margin-top:25px} .service-cap-grid{grid-template-columns:1fr} .service-cap-card{min-height:auto} .compact-project{grid-template-columns:1fr} .fp-phone{width:70px} .featured-project-copy h3{font-size:39px} } /* ========================================================== SERVICES HUB ========================================================== */ .services-hub-hero{min-height:680px;padding:150px 0 90px;background:linear-gradient(135deg,#061b27,#0d3442);color:#fff;position:relative;overflow:hidden} .services-hub-hero:after{content:"";position:absolute;width:680px;height:680px;border-radius:50%;right:-220px;bottom:-340px;background:radial-gradient(circle,rgba(24,198,234,.1),transparent 66%)} .services-hub-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:85px;align-items:center;position:relative;z-index:2} .services-hub-copy h1{font-size:clamp(55px,6vw,88px);line-height:.98;letter-spacing:-.06em;margin:15px 0 25px} .services-hub-copy>p{font-size:18px;color:#bfd1d6;max-width:720px}.services-hub-actions{display:flex;gap:14px;margin-top:30px} .services-hub-visual{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative} .services-hub-mini{position:relative;min-height:170px;padding:22px;border:1px solid rgba(255,255,255,.15);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));backdrop-filter:blur(8px);transition:.3s;display:flex;flex-direction:column} .services-hub-mini:hover{transform:translateY(-4px);border-color:rgba(24,198,234,.5);background:rgba(255,255,255,.075);box-shadow:0 20px 45px rgba(0,0,0,.16)} .services-hub-num{font-size:9px;color:#91afb6;letter-spacing:.16em}.services-hub-icon{font-size:28px;color:var(--cyan);margin:23px 0 10px}.services-hub-mini strong{font-size:18px}.services-hub-mini small{color:#9eb6bc;font-size:10px;margin-top:5px} .services-hub-connector{position:absolute;background:linear-gradient(90deg,var(--cyan),transparent);height:1px;opacity:.28}.services-hub-connector.c1{width:80px;left:46%;top:49%;transform:rotate(18deg)}.services-hub-connector.c2{width:80px;left:39%;top:50%;transform:rotate(-22deg)} .services-hub-main{background:#f5f8f9}.service-hub-card{min-height:350px} .services-integral{background:#fff}.services-integral-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:85px;align-items:center}.services-integral-grid>div:first-child>p{font-size:17px;color:var(--muted)} .services-integral-flow{display:flex;align-items:center;justify-content:space-between;gap:10px}.services-integral-flow>div{border:1px solid #dde6e7;border-radius:14px;padding:18px 14px;min-width:145px;background:#fff;box-shadow:0 10px 30px rgba(5,29,41,.045);transition:.25s} .services-integral-flow>div:hover{transform:translateY(-3px);border-color:rgba(24,198,234,.45)}.services-integral-flow span{display:block;font-size:9px;color:var(--cyan);letter-spacing:.15em}.services-integral-flow strong{display:block;margin:7px 0 4px;font-size:14px}.services-integral-flow small{color:var(--muted);font-size:9px}.services-integral-flow>i{font-style:normal;color:#8ba3a9} .services-digital-preview{background:#f5f8f9}.services-digital-preview-head{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;margin-bottom:42px}.services-digital-preview-head>p{color:var(--muted);font-size:17px}.services-digital-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.services-digital-mini{background:#fff;border:1px solid #dde6e7;border-radius:14px;padding:22px;transition:.25s}.services-digital-mini:hover{transform:translateY(-4px);border-color:rgba(24,198,234,.45);box-shadow:0 15px 35px rgba(5,29,41,.07)}.services-digital-mini>span{font-size:9px;color:var(--cyan)}.services-digital-mini h3{font-size:18px;margin:14px 0 8px}.services-digital-mini p{color:var(--muted);font-size:11px}.services-digital-preview-cta{text-align:center;margin-top:35px} .services-help{background:#fff}.services-help-inner{display:flex;justify-content:space-between;align-items:center;gap:60px;border-top:1px solid var(--line);padding-top:50px}.services-help-inner h2{font-size:clamp(38px,4.3vw,58px)}.services-help-inner p{color:var(--muted)} /* ========================================================== ABOUT / NOSOTROS ========================================================== */ .about-hero-premium{min-height:680px;padding:150px 0 90px;background:linear-gradient(135deg,#061b27,#0c3442);color:#fff;position:relative;overflow:hidden} .about-hero-premium:after{content:"";position:absolute;inset:auto -15% -48% auto;width:780px;height:780px;border-radius:50%;background:radial-gradient(circle,rgba(24,198,234,.09),transparent 65%)} .about-hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:80px;align-items:center;position:relative;z-index:2} .about-hero-copy h1{font-size:clamp(58px,6vw,88px);line-height:.98;letter-spacing:-.06em;margin:15px 0 25px}.about-hero-copy>p{font-size:18px;color:#bed1d5;max-width:720px}.about-hero-actions{display:flex;gap:14px;margin-top:30px} .about-hero-visual{position:relative;min-height:420px;display:grid;place-items:center}.about-hero-visual>img{width:260px;opacity:.09;filter:grayscale(1) brightness(2)} .about-topo-line{position:absolute;border:1px solid rgba(24,198,234,.14);border-radius:50%}.about-topo-line.l1{width:390px;height:250px;transform:rotate(13deg)}.about-topo-line.l2{width:330px;height:320px;transform:rotate(-24deg)}.about-topo-line.l3{width:250px;height:390px;transform:rotate(36deg)} .about-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 20px rgba(37,203,187,.4);animation:nodePulse 2.5s infinite}.about-dot.d1{left:18%;top:25%}.about-dot.d2{right:18%;top:50%;animation-delay:.7s}.about-dot.d3{left:38%;bottom:13%;animation-delay:1.2s} .about-hero-words{position:absolute;bottom:8%;left:10%;right:10%;display:flex;justify-content:space-between;color:#93adb4;font-size:10px;letter-spacing:.16em;text-transform:uppercase} .about-essence{background:#fff}.about-essence-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:90px;align-items:start}.about-essence-copy .lead{font-size:20px;color:#1a3a45}.about-essence-copy p{color:var(--muted)} .about-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:65px}.about-pillar{border:1px solid #dfe7e8;border-radius:16px;padding:27px;background:#fff;transition:.25s}.about-pillar:hover{transform:translateY(-4px);border-color:rgba(24,198,234,.45);box-shadow:0 16px 38px rgba(5,29,41,.07)}.about-pillar>span{font-size:9px;color:var(--cyan)}.about-pillar h3{font-size:21px;margin:25px 0 10px}.about-pillar p{font-size:12px;color:var(--muted)} .about-method{background:#f5f8f9}.about-method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.about-method-step{padding:25px 22px;border-top:2px solid #d9e4e5;background:#fff;transition:.25s}.about-method-step:hover{border-top-color:var(--cyan);transform:translateY(-3px)}.about-method-step>span{font-size:9px;color:var(--cyan);letter-spacing:.14em}.about-method-step strong{display:block;font-size:18px;margin:12px 0 7px}.about-method-step p{font-size:11px;color:var(--muted)} .about-team-compact{background:#fff}.about-team-head{display:grid;grid-template-columns:1fr .8fr;gap:70px;align-items:end;margin-bottom:45px}.about-team-head>p{color:var(--muted)} .about-team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.about-team-card{border:1px solid #dfe7e8;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 12px 32px rgba(5,29,41,.05);transition:.28s}.about-team-card:hover{transform:translateY(-5px);box-shadow:0 22px 52px rgba(5,29,41,.09)}.about-team-card>img{width:100%;aspect-ratio:4/3;object-fit:cover}.about-team-card-copy{padding:22px}.about-team-card-copy>span{font-size:9px;letter-spacing:.12em;color:#3b7e72;text-transform:uppercase}.about-team-card-copy h3{font-size:24px;margin:8px 0}.about-team-card-copy p{font-size:12px;color:var(--muted);min-height:60px} .about-alliance{background:#071d29;color:#fff}.about-alliance-grid{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center}.about-alliance-logos{display:flex;align-items:center;gap:18px}.about-alliance-logos>div{width:230px;height:135px;border-radius:14px;background:#fff;padding:18px;display:flex;align-items:center;justify-content:center}.about-alliance-logos>div:last-child{width:280px}.about-alliance-logos img{max-height:100%;object-fit:contain}.about-alliance-logos>span{font-size:25px;color:#afc1c5}.about-alliance h2{font-size:clamp(42px,4.8vw,66px)}.about-alliance p{color:#b6c7cb} .about-final-cta{background:#fff}.about-final-inner{display:flex;align-items:center;justify-content:space-between;gap:70px}.about-final-inner h2{font-size:clamp(40px,4.6vw,62px)}.about-final-inner p{color:var(--muted)}.about-final-actions{display:flex;gap:12px;flex-shrink:0} @media(max-width:980px){ .services-hub-grid,.services-integral-grid,.services-digital-preview-head,.about-hero-grid,.about-essence-grid,.about-alliance-grid{grid-template-columns:1fr} .services-hub-visual{max-width:650px} .services-integral-flow{flex-wrap:wrap}.services-integral-flow>i{display:none} .services-digital-mini-grid,.about-method-grid{grid-template-columns:1fr 1fr} .about-hero-visual{min-height:310px} .about-team-head{grid-template-columns:1fr} .about-team-grid{grid-template-columns:1fr 1fr} .about-final-inner{align-items:flex-start;flex-direction:column} } @media(max-width:650px){ .services-hub-hero,.about-hero-premium{min-height:auto;padding:125px 0 70px} .services-hub-copy h1,.about-hero-copy h1{font-size:49px} .services-hub-actions,.about-hero-actions{flex-direction:column;align-items:flex-start} .services-hub-visual{grid-template-columns:1fr 1fr}.services-hub-mini{min-height:145px;padding:18px} .services-integral-flow{display:grid;grid-template-columns:1fr 1fr}.services-integral-flow>div{min-width:0} .services-digital-mini-grid,.about-method-grid,.about-team-grid{grid-template-columns:1fr} .services-help-inner{flex-direction:column;align-items:flex-start} .about-pillars{grid-template-columns:1fr} .about-hero-visual{min-height:260px}.about-hero-visual>img{width:190px} .about-topo-line.l1{width:290px;height:190px}.about-topo-line.l2{width:250px;height:230px}.about-topo-line.l3{width:190px;height:280px} .about-alliance-logos{flex-direction:column}.about-alliance-logos>div,.about-alliance-logos>div:last-child{width:100%;height:120px} .about-final-actions{flex-direction:column;width:100%}.about-final-actions .btn{width:100%} } /* ========================================================== REAL PROJECT SHOWCASE ========================================================== */ .digital-projects-real{background:#f5f8f9} .real-projects-list{display:grid;gap:120px} .real-project{display:grid;grid-template-columns:1.22fr .78fr;gap:78px;align-items:center} .real-project-reverse{grid-template-columns:.78fr 1.22fr} .real-project-reverse .real-project-media{order:2} .real-project-media{position:relative;padding:18px 28px 30px 0;min-width:0} .real-desktop-frame{position:relative;background:#fff;border:1px solid #d9e3e5;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(4,29,40,.15);transition:.42s} .real-project:hover .real-desktop-frame{transform:translateY(-6px);box-shadow:0 36px 90px rgba(4,29,40,.19)} .real-browser-bar{height:38px;display:flex;align-items:center;gap:6px;padding:0 13px;border-bottom:1px solid #edf1f2;background:#fff} .real-browser-bar i{width:7px;height:7px;border-radius:50%;background:#d0d9db} .real-browser-bar span{font-size:9px;color:#839299;margin-left:8px} .real-desktop-frame>img{display:block;width:100%;height:auto} .real-mobile-frame{position:absolute;right:0;bottom:0;width:22%;min-width:94px;background:#111;border:6px solid #071d29;border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(4,29,40,.25);transition:.38s} .real-project:hover .real-mobile-frame{transform:translateY(-8px) rotate(1.5deg)} .real-mobile-frame img{width:100%;height:auto;display:block} .real-project-copy h3,.real-project-copy h2{font-size:clamp(40px,4.8vw,66px);letter-spacing:-.055em;line-height:1.03;margin:12px 0 18px} .real-project-copy p{font-size:16px;color:var(--muted);line-height:1.8} .real-project-tags{display:inline-block;margin:14px 0 8px;padding:8px 12px;border:1px solid #d9e4e6;border-radius:999px;color:#506b73;font-size:10px;letter-spacing:.04em;background:rgba(255,255,255,.6)} .projects-hero{background:linear-gradient(135deg,#061b27,#0d3442)} .projects-hero p{max-width:780px} @media(max-width:980px){ .real-project,.real-project-reverse{grid-template-columns:1fr;gap:42px} .real-project-reverse .real-project-media{order:0} .real-project-media{max-width:840px} } @media(max-width:650px){ .real-projects-list{gap:82px} .real-project-media{padding:8px 16px 22px 0} .real-mobile-frame{width:25%;min-width:70px;border-width:4px;border-radius:16px} .real-project-copy h3,.real-project-copy h2{font-size:40px} .real-project-copy p{font-size:14px} .real-project-tags{font-size:9px} } /* ========================================================== v13 refinements ========================================================== */ /* Service hub hero cards — subtle premium motion */ .services-hub-mini{ overflow:hidden; isolation:isolate; } .services-hub-mini:before{ content:""; position:absolute; width:150%; height:55%; left:-125%; top:-5%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent); transform:rotate(-16deg); transition:left .75s cubic-bezier(.2,.8,.2,1); z-index:-1; } .services-hub-mini:hover:before{left:75%} .services-hub-mini:hover .services-hub-icon{ transform:translateY(-2px) scale(1.08); text-shadow:0 0 18px rgba(24,198,234,.34); } .services-hub-icon{transition:.32s cubic-bezier(.2,.8,.2,1)} .services-hub-mini:nth-child(1){animation:hubFloat 5.5s ease-in-out infinite} .services-hub-mini:nth-child(2){animation:hubFloat 6s ease-in-out .6s infinite} .services-hub-mini:nth-child(3){animation:hubFloat 5.8s ease-in-out 1.1s infinite} .services-hub-mini:nth-child(4){animation:hubFloat 6.2s ease-in-out 1.7s infinite} @keyframes hubFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} .services-hub-mini:hover{animation-play-state:paused;transform:translateY(-6px)} /* Individual service heroes — unique but coherent animation language */ .service-hero-consulting .sv-line{ animation:consultingTrace 3.6s ease-in-out infinite; } .service-hero-consulting .sv-line-2{animation-delay:.6s} .service-hero-consulting .sv-line-3{animation-delay:1.15s} .service-hero-consulting .sv-node i{animation:consultingPulse 2.6s ease-in-out infinite} @keyframes consultingTrace{0%,100%{opacity:.18;transform-origin:left}50%{opacity:.9}} @keyframes consultingPulse{50%{box-shadow:0 0 0 9px rgba(37,203,187,.04),0 0 18px rgba(37,203,187,.32)}} .service-hero-training .service-visual:before, .service-hero-training .service-visual:after{ content:""; position:absolute; width:68px;height:68px; border:1px solid rgba(24,198,234,.24); border-radius:14px; animation:trainingFloat 5s ease-in-out infinite; } .service-hero-training .service-visual:before{left:7%;top:16%;transform:rotate(10deg)} .service-hero-training .service-visual:after{right:6%;bottom:12%;animation-delay:1.1s;transform:rotate(-13deg)} @keyframes trainingFloat{0%,100%{translate:0 0;opacity:.34}50%{translate:0 -10px;opacity:.85}} .service-hero-ai .sv-orbit-a{animation-duration:13s} .service-hero-ai .sv-orbit-b{animation-duration:9s} .service-hero-ai .sv-line{animation:aiGlow 2.8s ease-in-out infinite} .service-hero-ai .sv-line-2{animation-delay:.7s}.service-hero-ai .sv-line-3{animation-delay:1.35s} @keyframes aiGlow{0%,100%{opacity:.16;filter:drop-shadow(0 0 0 transparent)}50%{opacity:.9;filter:drop-shadow(0 0 5px rgba(24,198,234,.45))}} /* About — purpose, values and compact team reference */ .about-purpose{background:#fff} .about-purpose-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .about-purpose-card{ border:1px solid #dfe7e8;border-radius:18px;padding:34px; background:linear-gradient(145deg,#fff,#fbfdfd); box-shadow:0 12px 32px rgba(5,29,41,.045); transition:.28s; } .about-purpose-card:hover{transform:translateY(-4px);border-color:rgba(24,198,234,.42);box-shadow:0 20px 48px rgba(5,29,41,.08)} .about-purpose-card>span{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#397a70} .about-purpose-card h3{font-size:28px;line-height:1.17;margin:18px 0 12px} .about-purpose-card p{color:var(--muted);font-size:14px} .about-values{margin-top:32px;padding-top:26px;border-top:1px solid var(--line)} .about-values-title{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#3c776f;font-weight:800;margin-bottom:14px} .about-values-list{display:flex;gap:10px;flex-wrap:wrap} .about-values-list span{padding:8px 13px;border:1px solid #dce6e6;border-radius:999px;font-size:11px;background:#fff;color:#28454e} .about-team-reference{background:#f5f8f9} .about-team-reference-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:start} .about-team-reference-grid>div:first-child>p{color:var(--muted);font-size:17px} .about-team-names{border-top:1px solid var(--line)} .about-team-names>div{display:flex;justify-content:space-between;gap:25px;padding:17px 0;border-bottom:1px solid var(--line)} .about-team-names strong{font-size:15px}.about-team-names span{font-size:12px;color:var(--muted);text-align:right} .about-team-names .btn{margin-top:24px} /* services hub no duplicate area cards — tighten rhythm */ .services-integral{padding-top:125px} /* responsive */ @media(max-width:980px){ .about-purpose-grid,.about-team-reference-grid{grid-template-columns:1fr} } @media(max-width:650px){ .services-hub-mini:nth-child(n){animation:none} .about-purpose-grid{grid-template-columns:1fr} .about-team-names>div{flex-direction:column;gap:4px} .about-team-names span{text-align:left} } @media(prefers-reduced-motion:reduce){ .services-hub-mini:nth-child(n),.service-hero-consulting .sv-line,.service-hero-consulting .sv-node i, .service-hero-training .service-visual:before,.service-hero-training .service-visual:after, .service-hero-ai .sv-line{animation:none!important} } /* ========================================================== v14 — team architecture + integrated services interaction ========================================================== */ /* Home team: visual only, no duplicated biographies */ .home-team-simple{background:#fff} .home-team-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .home-team-photo{position:relative;margin:0;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:#eef3f3;box-shadow:0 16px 44px rgba(5,29,41,.08)} .home-team-photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .45s} .home-team-photo-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,26,36,.72),transparent 48%);opacity:.52;transition:.4s} .home-team-photo figcaption{position:absolute;left:22px;right:22px;bottom:20px;color:#fff;transform:translateY(6px);transition:.38s} .home-team-photo figcaption strong{display:block;font-size:23px;line-height:1.15} .home-team-photo figcaption small{display:block;margin-top:7px;font-size:11px;color:#c9d8dc} .home-team-photo:hover img{transform:scale(1.04);filter:saturate(1.04)} .home-team-photo:hover .home-team-photo-shade{opacity:.78} .home-team-photo:hover figcaption{transform:none} .home-team-photo:after{content:"";position:absolute;left:22px;bottom:0;width:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--teal));transition:width .45s} .home-team-photo:hover:after{width:72px} .home-team-cta{text-align:center;margin-top:34px} /* About: flip cards now live here */ .about-team-flip{background:#f5f8f9} .about-flip-grid{margin-top:20px} /* Services integrated interactive section */ .services-integral-interactive{background:#f7f9f9;padding-top:115px;padding-bottom:115px} .services-integral-heading{max-width:900px;margin:0 auto 70px;text-align:center} .services-integral-heading .eyebrow{justify-content:center} .services-integral-heading .eyebrow:before{display:none} .services-integral-heading .eyebrow:after{content:"";width:28px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--teal));border-radius:2px} .services-integral-heading h2{font-size:clamp(45px,5.2vw,72px);max-width:900px;margin:14px auto 20px} .services-integral-heading>p{font-size:17px;color:var(--muted);max-width:760px;margin:0 auto} .integral-experience{position:relative;max-width:1080px;margin:0 auto} .integral-track{position:absolute;left:8%;right:8%;top:34px;height:1px;background:#cfdbdd} .integral-progress{height:3px;width:0;background:linear-gradient(90deg,var(--cyan),var(--teal),var(--green));transform:translateY(-1px);transition:width .55s cubic-bezier(.2,.8,.2,1)} .integral-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .integral-step{border:0;background:none;text-align:center;padding:0 10px 20px;cursor:pointer;color:#718389;font:inherit;transition:.3s} .integral-step>span{display:block;font-size:9px;letter-spacing:.15em;margin-bottom:12px} .integral-step>i{display:block;width:13px;height:13px;border-radius:50%;margin:0 auto 18px;background:#fff;border:2px solid #b8cacd;box-shadow:0 0 0 6px #f7f9f9;transition:.3s} .integral-step>strong{display:block;font-size:16px;color:#718389;transition:.3s} .integral-step.active>i,.integral-step.passed>i{border-color:var(--cyan);background:var(--cyan);box-shadow:0 0 0 6px rgba(24,198,234,.08)} .integral-step.active>strong,.integral-step.passed>strong{color:var(--navy)} .integral-step.active{transform:translateY(-2px)} .integral-description{max-width:720px;margin:35px auto 0;text-align:center;font-size:18px;line-height:1.7;color:#24434d;min-height:62px;opacity:1;transform:none;transition:.26s} .integral-description.changing{opacity:0;transform:translateY(5px)} .integral-note{text-align:center;color:#7a898e;font-size:11px;margin:20px auto 0} /* More visible but still formal motion on service heroes */ .service-hero-consulting .sv-core{ animation:consultingCore 4.5s ease-in-out infinite; } .service-hero-consulting .sv-node{ animation:consultingNodeFloat 4.2s ease-in-out infinite; } .service-hero-consulting .sv-n2{animation-delay:.65s} .service-hero-consulting .sv-n3{animation-delay:1.2s} @keyframes consultingCore{0%,100%{box-shadow:0 0 35px rgba(24,198,234,.08)}50%{box-shadow:0 0 58px rgba(24,198,234,.20)}} @keyframes consultingNodeFloat{0%,100%{translate:0 0}50%{translate:0 -5px}} .service-hero-training .sv-core{ animation:trainingCore 4.8s ease-in-out infinite; } .service-hero-training .sv-node{ animation:trainingNode 4.6s ease-in-out infinite; } .service-hero-training .sv-n2{animation-delay:.9s} .service-hero-training .sv-n3{animation-delay:1.7s} @keyframes trainingCore{0%,100%{scale:1}50%{scale:1.035}} @keyframes trainingNode{0%,100%{translate:0 0;opacity:.78}50%{translate:0 -7px;opacity:1}} .service-hero-ai .sv-core{ animation:aiCorePulse 3.3s ease-in-out infinite; } .service-hero-ai .sv-node{ animation:aiNodeOrbit 4.4s ease-in-out infinite; } .service-hero-ai .sv-n2{animation-delay:.75s} .service-hero-ai .sv-n3{animation-delay:1.45s} @keyframes aiCorePulse{0%,100%{scale:1;box-shadow:0 0 40px rgba(24,198,234,.11)}50%{scale:1.045;box-shadow:0 0 70px rgba(24,198,234,.25)}} @keyframes aiNodeOrbit{0%,100%{translate:0 0}50%{translate:4px -5px}} @media(max-width:980px){ .home-team-gallery{grid-template-columns:repeat(3,1fr)} } @media(max-width:650px){ .home-team-gallery{grid-template-columns:1fr} .home-team-photo{aspect-ratio:1/1.05} .integral-track{left:26px;right:auto;top:10px;bottom:10px;width:1px;height:auto} .integral-progress{width:3px!important;height:0;transition:height .5s} .integral-steps{grid-template-columns:1fr;gap:0} .integral-step{display:grid;grid-template-columns:34px 28px 1fr;align-items:center;text-align:left;padding:13px 0} .integral-step>span{margin:0}.integral-step>i{margin:0}.integral-step>strong{font-size:15px} .integral-description{text-align:left;margin:25px 0 0;padding-left:0;font-size:16px} .integral-note{text-align:left} } @media(prefers-reduced-motion:reduce){ .service-hero-consulting .sv-core,.service-hero-consulting .sv-node, .service-hero-training .sv-core,.service-hero-training .sv-node, .service-hero-ai .sv-core,.service-hero-ai .sv-node{animation:none!important} } /* ========================================================== v15 — partner hover, premium secondary CTA, values ========================================================== */ /* Strategic partner cards */ .about-alliance-logos>div, .alliance-brand-pair>div, .brand-panel{ transition:transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s, border-color .32s; border:1px solid rgba(255,255,255,.08); } .about-alliance-logos>div:hover, .alliance-brand-pair>div:hover, .brand-panel:hover{ transform:translateY(-5px); box-shadow:0 22px 55px rgba(0,0,0,.18),0 0 0 1px rgba(24,198,234,.16); border-color:rgba(24,198,234,.4); } .about-alliance-logos>div img, .alliance-brand-pair>div img, .brand-panel img{ transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s; } .about-alliance-logos>div:hover img, .alliance-brand-pair>div:hover img, .brand-panel:hover img{ transform:scale(1.018); filter:contrast(1.02) saturate(1.03); } /* Premium secondary button */ .btn-outline-dark{ position:relative; overflow:hidden; border:1px solid #aebdc1!important; background:#fff!important; color:var(--navy)!important; min-width:150px; gap:9px; } .btn-outline-dark:after{ content:""; position:absolute; inset:auto 12px 7px 12px; height:1px; background:linear-gradient(90deg,var(--cyan),var(--teal)); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; } .btn-outline-dark:hover{ background:#f8fbfb!important; border-color:rgba(24,198,234,.75)!important; box-shadow:0 12px 30px rgba(5,29,41,.08); } .btn-outline-dark:hover:after{transform:scaleX(1)} .btn-outline-dark:hover span{transform:translateX(4px)} /* Values: replace simple chips with editorial cards */ .about-values-list{ display:grid!important; grid-template-columns:repeat(4,1fr); gap:14px; } .about-values-list .value-card{ position:relative; min-height:150px; padding:22px 18px 18px; border:1px solid #dce6e7; border-radius:14px; background:linear-gradient(145deg,#fff,#fbfdfd); transition:.28s; overflow:hidden; } .about-values-list .value-card:before{ content:""; position:absolute; left:18px;top:0;width:38px;height:3px; background:linear-gradient(90deg,var(--cyan),var(--teal)); } .about-values-list .value-card:hover{ transform:translateY(-4px); border-color:rgba(24,198,234,.45); box-shadow:0 16px 38px rgba(5,29,41,.075); } .value-card .value-num{ display:block; font-size:9px; color:#86a0a6; letter-spacing:.16em; margin-bottom:22px; } .value-card strong{ display:block; font-size:17px; color:var(--navy); margin-bottom:7px; } .value-card small{ display:block; color:var(--muted); font-size:11px; line-height:1.55; } /* Crypto education section */ .crypto-training{ background:linear-gradient(135deg,#071d29,#0c3442); color:#fff; } .crypto-training-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:80px; align-items:center; } .crypto-training-copy h2{ font-size:clamp(42px,5vw,68px); line-height:1.02; } .crypto-training-copy>p{ color:#b9cbd0; font-size:16px; } .crypto-groups{ display:grid; gap:14px; margin-top:28px; } .crypto-group{ border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:18px; background:rgba(255,255,255,.035); transition:.25s; } .crypto-group:hover{ border-color:rgba(24,198,234,.45); background:rgba(255,255,255,.06); transform:translateY(-2px); } .crypto-group span{ display:block; color:var(--cyan); font-size:10px; text-transform:uppercase; letter-spacing:.14em; margin-bottom:6px; } .crypto-group strong{ display:block; font-size:17px; margin-bottom:5px; } .crypto-group p{ margin:0; color:#aac0c6; font-size:12px; } .crypto-coach{ margin-top:22px; padding:18px 20px; border-left:3px solid var(--cyan); background:rgba(255,255,255,.035); } .crypto-coach strong{ display:block; font-size:16px; margin-bottom:4px; } .crypto-coach p{ margin:0; color:#b5c8cd; font-size:12px; } .crypto-book{ position:relative; display:grid; grid-template-columns:.72fr 1fr; gap:24px; align-items:end; } .crypto-book-cover{ position:relative; z-index:2; border-radius:14px; overflow:hidden; box-shadow:0 28px 75px rgba(0,0,0,.32); transform:rotate(-2deg); transition:.35s; } .crypto-book-cover:hover{transform:rotate(0deg) translateY(-5px)} .crypto-book-cover img{width:100%;display:block} .crypto-book-copy{ padding:22px 0 12px; } .crypto-book-copy .eyebrow{color:#92e9df} .crypto-book-copy h3{ font-size:32px; margin:12px 0 10px; } .crypto-book-copy p{ color:#afc3c8; font-size:13px; line-height:1.7; } .crypto-disclaimer{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12); color:#8fa7ad!important; font-size:10px!important; } @media(max-width:980px){ .about-values-list{grid-template-columns:repeat(2,1fr)!important} .crypto-training-grid{grid-template-columns:1fr} .crypto-book{max-width:720px} } @media(max-width:650px){ .about-values-list{grid-template-columns:1fr!important} .crypto-book{grid-template-columns:1fr} .crypto-book-cover{max-width:320px;margin:auto} } /* v16 legal index */ .legal-index-hero{background:linear-gradient(135deg,#061b27,#0d3442)} .legal-index-section{background:#f7f9f9} .legal-index-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .legal-index-card{display:block;background:#fff;border:1px solid #dce6e7;border-radius:18px;padding:30px;transition:.28s;box-shadow:0 12px 30px rgba(5,29,41,.045)} .legal-index-card:hover{transform:translateY(-4px);border-color:rgba(24,198,234,.45);box-shadow:0 20px 48px rgba(5,29,41,.08)} .legal-index-card>span{font-size:9px;letter-spacing:.16em;color:var(--cyan)} .legal-index-card h2{font-size:28px;margin:22px 0 10px} .legal-index-card p{color:var(--muted);font-size:13px;min-height:62px} .legal-index-card strong{font-size:11px;color:#176b7f} .legal-copy h2{margin-top:34px;font-size:27px;letter-spacing:-.025em} .legal-copy p,.legal-copy li{font-size:15px;line-height:1.8;color:#465960} @media(max-width:650px){.legal-index-grid{grid-template-columns:1fr}} /* v16.3 — Contact form polish */ .contact-form .check{ margin-top:16px; margin-bottom:3px; padding:2px 0; gap:10px; align-items:flex-start; line-height:1.45; } .contact-form .check input[type="checkbox"]{ width:17px; height:17px; min-width:17px; margin:1px 0 0; accent-color:var(--cyan); cursor:pointer; } .contact-form .check span{ padding-top:0; } .contact-form .btn[type="submit"]{ margin-top:4px; } .contact-form .btn[type="submit"]:disabled{ opacity:.68; cursor:wait; transform:none; } .form-status{ display:none; margin-top:14px; border-radius:14px; padding:14px 16px; gap:12px; align-items:flex-start; font-size:13px; line-height:1.5; border:1px solid transparent; } .form-status.is-loading, .form-status.is-success, .form-status.is-error{ display:flex; } .form-status.is-loading{ background:#f2f7f8; border-color:#d8e5e7; color:#42565e; } .form-status.is-success{ background:#f1faf8; border-color:#bfe5dc; color:#183f39; box-shadow:0 10px 24px rgba(24,99,87,.06); } .form-status.is-error{ background:#fff7f5; border-color:#efcec6; color:#6f342a; } .form-status-icon{ display:grid; place-items:center; width:27px; height:27px; min-width:27px; border-radius:50%; font-size:15px; font-weight:900; } .form-status.is-loading .form-status-icon{ background:#e1ecee; color:#49656d; } .form-status.is-success .form-status-icon{ background:#d7f1ea; color:#176b5c; } .form-status.is-error .form-status-icon{ background:#f9ded8; color:#a34232; } .form-status-copy{ display:grid; gap:2px; padding-top:1px; } .form-status-copy strong{ font-size:13px; font-weight:800; color:inherit; } .form-status-copy>span{ font-size:12px; color:inherit; opacity:.86; } @media(max-width:650px){ .contact-form .check{margin-top:14px} .form-status{padding:13px 14px} } /* v16.4 — Compact alliance trust seal on Home */ .home-alliance-seal{ padding:18px 0 24px; background:#f6f9f9; } .home-alliance-seal-inner{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:18px; min-height:74px; padding:17px 22px; background:#fff; border:1px solid #dbe7e9; border-radius:16px; box-shadow:0 10px 30px rgba(5,29,41,.045); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; } .home-alliance-seal-inner:hover{ transform:translateY(-2px); border-color:rgba(24,198,234,.42); box-shadow:0 16px 38px rgba(5,29,41,.075); } .home-alliance-kicker{ font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:#698087; } .home-alliance-copy{ display:flex; align-items:center; gap:10px; color:#082a37; font-size:15px; } .home-alliance-copy>span{ color:var(--cyan); font-weight:800; } .home-alliance-note{ font-size:12px; color:var(--muted); } .home-alliance-arrow{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#eef8fa; color:#11788f; transition:transform .25s ease; } .home-alliance-seal-inner:hover .home-alliance-arrow{transform:translateX(3px)} @media(max-width:760px){ .home-alliance-seal-inner{ grid-template-columns:1fr auto; gap:7px 12px; } .home-alliance-kicker,.home-alliance-copy,.home-alliance-note{grid-column:1} .home-alliance-arrow{grid-column:2;grid-row:1/4} .home-alliance-copy{font-size:13px;flex-wrap:wrap} } /* ========================================================== v16.5 — differentiated service heroes + institutional About ========================================================== */ /* Shared visual stage */ .service-visual{ isolation:isolate; } /* CONSULTING — decision map / strategic clarity */ .service-hero-consulting .service-visual{ min-height:430px; display:grid; place-items:center; } .consult-map{ position:relative; width:min(100%,500px); height:390px; border:1px solid rgba(153,190,198,.17); border-radius:26px; background: linear-gradient(rgba(157,194,201,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(157,194,201,.055) 1px,transparent 1px), linear-gradient(145deg,rgba(255,255,255,.018),rgba(24,198,234,.025)); background-size:44px 44px,44px 44px,auto; box-shadow:inset 0 0 60px rgba(0,0,0,.08); } .consult-axis{position:absolute;background:rgba(24,198,234,.18)} .consult-axis.axis-x{left:8%;right:8%;top:50%;height:1px} .consult-axis.axis-y{top:8%;bottom:8%;left:50%;width:1px} .consult-core{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:118px;height:118px;border-radius:50%; display:grid;place-items:center;align-content:center;gap:2px; border:1px solid rgba(24,198,234,.48); background:#0a2c38; box-shadow:0 0 0 12px rgba(24,198,234,.035),0 16px 50px rgba(0,0,0,.16); } .consult-core small{font-size:8px;letter-spacing:.16em;color:#8caeb5} .consult-core strong{font-size:32px;font-weight:500;color:#fff} .consult-path{ position:absolute;height:1px; background:linear-gradient(90deg,transparent,rgba(24,198,234,.7),transparent); transform-origin:left center; animation:consultPath 4.5s ease-in-out infinite; } .consult-path.path-a{width:145px;left:52%;top:48%;transform:rotate(-30deg)} .consult-path.path-b{width:150px;left:24%;top:63%;transform:rotate(-24deg);animation-delay:.7s} .consult-path.path-c{width:150px;left:47%;top:67%;transform:rotate(34deg);animation-delay:1.35s} .consult-node{ position:absolute;display:flex;align-items:center;gap:9px; font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#a9c2c7; } .consult-node i{width:10px;height:10px;border-radius:50%;background:#17c6ea;box-shadow:0 0 0 5px rgba(24,198,234,.08)} .consult-node.sv-n1{left:12%;top:25%} .consult-node.sv-n2{right:9%;top:24%} .consult-node.sv-n3{right:12%;bottom:17%} .consult-caption{position:absolute;left:22px;bottom:17px;font-size:8px;letter-spacing:.19em;color:#6f9198} @keyframes consultPath{0%,100%{opacity:.16;filter:none}50%{opacity:.95;filter:drop-shadow(0 0 5px rgba(24,198,234,.35))}} /* TRAINING — visible progression / learning path */ .service-hero-training .service-visual{ min-height:430px;display:grid;place-items:center; } .training-path{ position:relative;width:min(100%,500px);height:390px; } .training-stage{ position:absolute;width:175px;min-height:82px;padding:17px 18px; border:1px solid rgba(157,194,201,.20);border-radius:16px; background:rgba(9,42,54,.86);backdrop-filter:blur(5px); box-shadow:0 14px 38px rgba(0,0,0,.13); transition:.3s; } .training-stage small{display:block;font-size:8px;letter-spacing:.16em;color:#41c8e5;margin-bottom:9px} .training-stage strong{font-size:15px;color:#eef8f9} .training-stage.st1{left:3%;bottom:12%} .training-stage.st2{left:31%;top:39%} .training-stage.st3{right:3%;top:9%} .training-stage:after{ content:"";position:absolute;left:18px;right:18px;bottom:10px;height:2px; background:linear-gradient(90deg,var(--cyan),rgba(24,198,234,.08)); transform-origin:left;animation:learnFill 5s ease-in-out infinite; } .training-stage.st2:after{animation-delay:.7s}.training-stage.st3:after{animation-delay:1.4s} .training-progress{ position:absolute;left:19%;right:18%;top:51%;height:1px; background:linear-gradient(90deg,rgba(24,198,234,.1),rgba(24,198,234,.7),rgba(24,198,234,.12)); transform:rotate(-31deg); } .training-progress i{ position:absolute;width:8px;height:8px;border-radius:50%;background:#22c8e6;top:-4px;left:0; box-shadow:0 0 15px rgba(24,198,234,.5);animation:learnDot 5s ease-in-out infinite; } .training-core{ position:absolute;right:19%;bottom:8%;width:92px;height:92px;border-radius:22px; border:1px solid rgba(34,198,230,.36);display:grid;place-items:center;align-content:center; background:#092b37;transform:rotate(4deg); } .training-core span{font-size:28px;color:#fff} .training-core small{font-size:7px;letter-spacing:.13em;color:#84a9b1} @keyframes learnFill{0%,100%{transform:scaleX(.2);opacity:.25}50%{transform:scaleX(1);opacity:1}} @keyframes learnDot{0%{left:0}50%,100%{left:100%}} /* DIGITAL — preserve the current visual identity, only sharpen hierarchy */ .service-hero-digital .service-visual{ filter:saturate(1.02); } .service-hero-digital .sv-core{ box-shadow:0 0 0 10px rgba(24,198,234,.025),0 0 55px rgba(24,198,234,.13); } /* AI — controlled system / practical intelligence, less sci-fi */ .service-hero-ai .service-visual{ min-height:430px;display:grid;place-items:center; } .ai-system{position:relative;width:min(100%,500px);height:390px} .ai-core{ position:absolute;left:50%;top:48%;transform:translate(-50%,-50%); width:125px;height:125px;border-radius:30px; display:grid;place-items:center;align-content:center; background:linear-gradient(145deg,#0b3341,#082733); border:1px solid rgba(24,198,234,.42); box-shadow:0 18px 55px rgba(0,0,0,.15),0 0 35px rgba(24,198,234,.08); animation:aiBreath 4.8s ease-in-out infinite; } .ai-core span{font-size:32px;color:#fff;font-weight:500} .ai-core small{font-size:7px;letter-spacing:.16em;color:#8db0b8;margin-top:2px} .ai-ring{position:absolute;left:50%;top:48%;border:1px solid rgba(24,198,234,.13);border-radius:50%;transform:translate(-50%,-50%)} .ai-ring.ring-1{width:240px;height:240px} .ai-ring.ring-2{width:350px;height:350px;border-style:dashed;animation:aiSlowSpin 26s linear infinite} .ai-link{position:absolute;height:1px;background:linear-gradient(90deg,rgba(24,198,234,.08),rgba(24,198,234,.68));transform-origin:right center} .ai-link.link-1{width:130px;left:11%;top:29%;transform:rotate(25deg)} .ai-link.link-2{width:125px;right:10%;top:31%;transform:rotate(-26deg)} .ai-link.link-3{width:115px;right:14%;bottom:22%;transform:rotate(27deg)} .ai-node{ position:absolute;display:flex;align-items:center;gap:8px;padding:8px 10px; border:1px solid rgba(157,194,201,.17);border-radius:9px;background:rgba(7,34,45,.75); font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#a9c3c8; } .ai-node i{width:7px;height:7px;border-radius:50%;background:#19c6e7} .ai-node.sv-n1{left:5%;top:18%}.ai-node.sv-n2{right:2%;top:19%}.ai-node.sv-n3{right:5%;bottom:13%} .ai-status{ position:absolute;left:5%;bottom:13%;display:flex;align-items:center;gap:8px; font-size:9px;color:#8faeb5; } .ai-status i{width:7px;height:7px;border-radius:50%;background:#64c8a9;box-shadow:0 0 0 5px rgba(100,200,169,.07)} @keyframes aiBreath{50%{box-shadow:0 18px 55px rgba(0,0,0,.15),0 0 55px rgba(24,198,234,.16)}} @keyframes aiSlowSpin{to{transform:translate(-50%,-50%) rotate(360deg)}} /* ABOUT — institutional confidence / origin + international outlook */ .about-institutional{ min-height:430px; border-left:1px solid rgba(255,255,255,.08); } .about-institutional:before{ content:"";position:absolute;inset:8% 3%; background: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent); } .about-contour{ position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-8deg); border:1px solid rgba(160,197,204,.10);border-radius:47% 53% 46% 54%; } .about-contour.contour-1{width:360px;height:270px} .about-contour.contour-2{width:300px;height:225px;transform:translate(-50%,-50%) rotate(8deg)} .about-contour.contour-3{width:245px;height:182px;transform:translate(-50%,-50%) rotate(-14deg)} .about-brand-seal{ position:absolute;left:50%;top:47%;transform:translate(-50%,-50%); width:145px;height:145px;border-radius:50%; display:grid;place-items:center;align-content:center;gap:6px; background:rgba(7,34,45,.82);border:1px solid rgba(255,255,255,.12); box-shadow:0 22px 70px rgba(0,0,0,.18); } .about-brand-seal img{width:74px!important;opacity:.72!important;filter:grayscale(1) brightness(2)!important} .about-brand-seal span{font-size:9px;letter-spacing:.24em;color:#9eb9bf} .about-origin,.about-reach{ position:absolute;padding:12px 14px;border-left:2px solid rgba(24,198,234,.55); background:rgba(8,39,50,.50); } .about-origin{left:4%;top:18%}.about-reach{right:3%;bottom:17%} .about-origin small,.about-reach small{display:block;font-size:7px;letter-spacing:.18em;color:#779aa2;margin-bottom:5px} .about-origin strong,.about-reach strong{font-size:11px;color:#d4e3e6;font-weight:700} .about-institutional .about-hero-words{ left:4%;right:4%;bottom:3%; color:#78979e; } .about-institutional .about-hero-words span:nth-child(2){color:#b5c9cd} @media(max-width:980px){ .consult-map,.training-path,.ai-system{width:min(100%,520px)} .about-institutional{border-left:0;border-top:1px solid rgba(255,255,255,.08)} } @media(max-width:650px){ .service-hero-consulting .service-visual, .service-hero-training .service-visual, .service-hero-ai .service-visual{min-height:330px} .consult-map,.training-path,.ai-system{height:310px} .consult-map{transform:scale(.86)} .training-path{transform:scale(.87)} .ai-system{transform:scale(.86)} .about-institutional{min-height:300px} .about-brand-seal{width:118px;height:118px} .about-brand-seal img{width:60px!important} .about-contour.contour-1{width:280px;height:205px} .about-contour.contour-2{width:235px;height:172px} .about-contour.contour-3{width:190px;height:140px} .about-origin{left:1%;top:12%}.about-reach{right:1%;bottom:18%} } @media(prefers-reduced-motion:reduce){ .consult-path,.training-stage:after,.training-progress i,.ai-core,.ai-ring.ring-2{animation:none!important} } /* ========================================================== v16.6 — Premium mobile rhythm, controlled carousels & depth ========================================================== */ /* Anchor/header compensation */ [id]{scroll-margin-top:96px} /* ---------- HERO DEPTH: individual services ---------- */ .service-hero{ position:relative; overflow:hidden; isolation:isolate; background: radial-gradient(circle at 82% 28%,rgba(26,191,220,.075),transparent 26%), linear-gradient(135deg,#061f2a 0%,#082b37 54%,#082632 100%); } .service-hero-atmosphere{ position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none; } .service-hero-grid{position:relative;z-index:2} .hero-depth-grid{ position:absolute;inset:-10%; background: linear-gradient(rgba(128,193,203,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(128,193,203,.045) 1px,transparent 1px); background-size:54px 54px; mask-image:linear-gradient(90deg,transparent,black 25%,black 92%,transparent); transform:perspective(800px) rotateX(63deg) translateY(26%); transform-origin:center bottom; opacity:.45; } .hero-depth-glow{ position:absolute;width:440px;height:440px;border-radius:50%; background:radial-gradient(circle,rgba(28,204,229,.46),rgba(28,204,229,0) 66%); filter:blur(42px);opacity:.18; animation:heroGlowDrift 10s ease-in-out infinite alternate; } .hero-depth-glow.glow-a{right:-125px;top:-150px} .hero-depth-glow.glow-b{left:28%;bottom:-330px;opacity:.08;animation-delay:-4s} .hero-depth-beam{ position:absolute;width:820px;height:1px;right:-140px;top:39%; transform:rotate(-23deg); background:linear-gradient(90deg,transparent,rgba(70,224,235,.42),transparent); box-shadow:0 0 22px rgba(70,224,235,.18); } .hero-depth-line{ position:absolute;width:260px;height:260px;border:1px solid rgba(75,209,226,.08); border-radius:50%; } .hero-depth-line.line-a{right:11%;top:13%;animation:heroRingFloat 9s ease-in-out infinite} .hero-depth-line.line-b{right:7%;top:8%;width:360px;height:360px;border-style:dashed;opacity:.55;animation:heroRingSpin 34s linear infinite} .service-hero-copy{ position:relative; text-shadow:0 1px 24px rgba(0,0,0,.12); } .service-hero-copy:before{ content:"";position:absolute;left:-22px;top:48px;width:2px;height:78px; background:linear-gradient(var(--cyan),transparent); opacity:.8; } .service-visual{ position:relative; border-radius:30px; } .service-visual:before{ content:"";position:absolute;inset:8% 4%;z-index:-1; border-radius:34px; background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(22,198,231,.025)); border:1px solid rgba(154,201,209,.08); box-shadow:inset 0 1px rgba(255,255,255,.025),0 30px 80px rgba(0,0,0,.14); } @keyframes heroGlowDrift{to{transform:translate(-36px,28px) scale(1.08)}} @keyframes heroRingFloat{50%{transform:translateY(12px) scale(1.04)}} @keyframes heroRingSpin{to{transform:rotate(360deg)}} /* Different ambient personality by service */ .service-hero-consulting .hero-depth-glow.glow-a{background:radial-gradient(circle,rgba(49,197,219,.38),transparent 68%)} .service-hero-training .hero-depth-glow.glow-a{background:radial-gradient(circle,rgba(65,210,183,.28),transparent 68%)} .service-hero-digital .hero-depth-glow.glow-a{background:radial-gradient(circle,rgba(30,201,235,.48),transparent 68%)} .service-hero-ai .hero-depth-glow.glow-a{background:radial-gradient(circle,rgba(86,188,224,.36),transparent 68%)} /* ---------- SERVICES HUB HERO DEPTH ---------- */ .services-hub-hero{position:relative;overflow:hidden;isolation:isolate} .services-hub-grid{position:relative;z-index:2} .services-hub-atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .services-depth-grid{ position:absolute;inset:0; background: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:58px 58px; mask-image:linear-gradient(to right,transparent,black 35%,black); } .services-depth-orb{position:absolute;border-radius:50%;filter:blur(52px)} .services-depth-orb.orb-a{width:420px;height:420px;right:-90px;top:-120px;background:rgba(25,196,226,.11)} .services-depth-orb.orb-b{width:330px;height:330px;left:40%;bottom:-240px;background:rgba(54,204,183,.065)} .services-depth-ray{ position:absolute;right:-100px;top:44%;width:650px;height:1px; transform:rotate(-19deg);background:linear-gradient(90deg,transparent,rgba(39,211,231,.30),transparent) } /* ---------- MOBILE CAROUSEL BASE ---------- */ .mobile-carousel-controls{display:none} @media(max-width:760px){ body{overflow-x:hidden} .section{padding-top:68px;padding-bottom:68px} .section-heading-centered{margin-bottom:30px} .section-heading-centered h2{font-size:34px;line-height:1.03} .section-heading-centered p{font-size:15px;line-height:1.65} /* Less flat / more cinematic mobile hero */ .service-hero{min-height:auto;padding:104px 0 46px} .service-hero-grid{gap:22px} .service-hero-copy:before{left:0;top:-10px;height:36px} .service-hero-copy h1{font-size:44px;line-height:.98;max-width:10ch} .service-hero-copy p{font-size:16px;line-height:1.66;max-width:34ch} .service-hero-actions{margin-top:24px} .service-visual{min-height:285px!important;margin-top:2px} .service-visual:before{inset:3% 0;border-radius:22px} .hero-depth-grid{opacity:.28;background-size:42px 42px} .hero-depth-line.line-b{width:275px;height:275px;right:-70px} .hero-depth-line.line-a{width:205px;height:205px;right:-35px} .hero-depth-glow{width:300px;height:300px} .hero-depth-beam{top:53%;right:-230px} /* General services hero */ .services-hub-hero{padding-top:104px;padding-bottom:54px} .services-hub-copy h1{font-size:42px;line-height:1} .services-hub-visual{margin-top:10px} .services-hub-mini{min-height:142px;padding:18px} .services-depth-grid{background-size:44px 44px} /* Generic premium carousel: only elements explicitly marked */ .premium-mobile-carousel{ display:flex!important; grid-template-columns:none!important; gap:14px!important; overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory; scroll-padding-left:18px; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; padding:4px 18px 16px!important; margin-left:-18px!important; margin-right:-18px!important; scrollbar-width:none; } .premium-mobile-carousel::-webkit-scrollbar{display:none} .premium-mobile-carousel>*{ flex:0 0 86%; width:86%; scroll-snap-align:start; margin:0!important; } .mobile-carousel-controls{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; } .mobile-carousel-counter{ font-size:10px;font-weight:800;letter-spacing:.14em;color:#728990;text-transform:uppercase } .mobile-carousel-actions{display:flex;gap:8px} .mobile-carousel-btn{ width:38px;height:38px;border-radius:50%;border:1px solid #cbdadd;background:#fff; display:grid;place-items:center;color:#123d48;font-size:16px;cursor:pointer; box-shadow:0 8px 18px rgba(6,40,52,.05) } .mobile-carousel-btn:disabled{opacity:.28} /* Individual service page: compress long sections */ .service-intro-grid{gap:24px} .service-intro-grid h2{font-size:34px;line-height:1.03} .service-capabilities{padding-top:58px;padding-bottom:58px} .service-cap-card{min-height:270px;padding:25px} .service-value{padding-top:56px;padding-bottom:64px} .service-value-grid{gap:24px} .service-value-list{gap:0} .service-value-item{padding:18px 0} .service-value-item p{font-size:12px;line-height:1.55} /* Digital portfolio becomes horizontally browsable */ .real-projects-list.premium-mobile-carousel>*{flex-basis:92%;width:92%} .real-project{display:block!important;padding:0!important;border-radius:20px;overflow:hidden;background:#fff} .real-project-media{min-height:260px} .real-project-copy{padding:22px!important} /* About: improve rhythm */ .about-hero{padding-top:100px} .about-hero-grid{gap:24px} .about-hero-copy h1{font-size:43px;line-height:.98} .about-hero-visual{min-height:276px!important} .about-institutional .about-origin, .about-institutional .about-reach{padding:9px 10px} .about-institutional .about-hero-words{font-size:8px} .about-essence,.about-thinking,.about-purpose,.about-team-flip,.about-alliance,.about-final-cta{ padding-top:66px!important;padding-bottom:66px!important } .about-purpose-grid{gap:14px} .about-purpose-card{padding:26px 22px;min-height:auto} .about-values{margin-top:34px} .about-values-list{margin-top:18px} .about-values-list.premium-mobile-carousel>*{ flex-basis:78%;width:78%;min-height:170px;padding:22px!important } /* Team: one elegant card per viewport, not a huge vertical stack */ .about-flip-grid.premium-mobile-carousel>*{flex-basis:90%;width:90%} .about-flip-grid .flip-card{height:480px} .flip-front-copy h3{font-size:29px} .flip-front-copy p{font-size:13px} /* Alliance: compact and integrated */ .about-alliance-grid{gap:30px} .about-alliance-logos{ display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px; padding:0!important } .about-alliance-logos>div{ min-height:112px!important;padding:18px!important;border-radius:15px!important } .about-alliance-logos img{max-height:62px!important;width:auto!important} .about-alliance-logos>span{font-size:20px} .about-alliance h2{font-size:39px;line-height:1} .about-final-inner{gap:28px} .about-final-actions{gap:10px} .about-final-actions .btn{min-height:50px} /* General services page: only digital preview becomes carousel */ .services-digital-mini-grid.premium-mobile-carousel>*{flex-basis:84%;width:84%;min-height:240px} .services-integral{padding-top:62px;padding-bottom:62px} .integral-experience{margin-top:34px} } /* Small phones */ @media(max-width:390px){ .service-hero-copy h1,.about-hero-copy h1,.services-hub-copy h1{font-size:39px} .about-flip-grid .flip-card{height:440px} .premium-mobile-carousel>*{flex-basis:90%;width:90%} } /* Motion remains subtle and optional */ @media(prefers-reduced-motion:reduce){ .hero-depth-glow,.hero-depth-line{animation:none!important} } /* ========================================================== v16.7 — Values + process + services refinement ========================================================== */ /* ABOUT — process becomes a connected methodology, not stacked cards */ .about-method-timeline{ position:relative; max-width:980px; margin:46px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; } .about-method-timeline:before{ content:""; position:absolute; left:7%; right:7%; top:28px; height:1px; background:linear-gradient(90deg,rgba(24,198,234,.18),rgba(24,198,234,.72),rgba(24,198,234,.18)); } .about-method-timeline .about-method-step{ position:relative; display:grid; justify-items:center; text-align:center; gap:10px; padding:0 18px; background:transparent; border:0; box-shadow:none; } .about-method-timeline .about-method-num{ order:0; font-size:9px; letter-spacing:.14em; color:#6f8c93; } .about-method-timeline .about-method-step>i{ order:1; position:relative; z-index:2; width:16px; height:16px; border-radius:50%; background:#fff; border:2px solid var(--cyan); box-shadow:0 0 0 7px rgba(24,198,234,.07); } .about-method-timeline .about-method-step>div{ order:2; padding-top:10px; } .about-method-timeline strong{ display:block; font-size:20px; margin-bottom:8px; } .about-method-timeline p{ margin:0 auto; max-width:22ch; font-size:12px; line-height:1.6; color:var(--muted); } /* ABOUT — premium values */ .about-values{ margin-top:44px; padding-top:38px; border-top:1px solid #dbe6e8; } .about-values-heading{ max-width:680px; margin-bottom:26px; } .about-values-heading h3{ margin:8px 0 9px; font-size:31px; line-height:1.06; letter-spacing:-.035em; } .about-values-heading p{ margin:0; color:var(--muted); font-size:14px; line-height:1.65; } .about-values-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .about-values-list .value-card{ position:relative; min-height:205px; padding:22px; border:1px solid #dce7e9; border-radius:18px; background:linear-gradient(155deg,#fff 0%,#fbfdfd 100%); box-shadow:0 10px 28px rgba(7,39,50,.035); overflow:hidden; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; } .about-values-list .value-card:before{ content:""; position:absolute; left:0; top:0; width:52px; height:3px; background:linear-gradient(90deg,var(--cyan),rgba(24,198,234,.15)); } .about-values-list .value-card:hover{ transform:translateY(-3px); border-color:rgba(24,198,234,.42); box-shadow:0 18px 38px rgba(7,39,50,.07); } .value-icon{ display:grid; place-items:center; width:39px; height:39px; border-radius:12px; margin-bottom:28px; background:#eff9fa; color:#1190a9; font-size:18px; } .about-values-list .value-num{ position:absolute; top:23px; right:20px; font-size:9px; letter-spacing:.16em; color:#9aafb4; border:0!important; padding:0!important; width:auto!important; } .about-values-list .value-card strong{ display:block; font-size:18px; margin-bottom:8px; color:#092934; } .about-values-list .value-card small{ display:block; font-size:12px; line-height:1.55; color:#667d84; } /* SERVICES — integrated vision reads like one system */ .integral-step small{ display:none; } .services-integral-interactive .integral-experience{ border-radius:22px; border:1px solid #dce7e9; background:linear-gradient(145deg,#fff,#f8fbfb); padding:34px 34px 28px; box-shadow:0 16px 42px rgba(7,39,50,.045); } .services-integral-interactive .integral-description{ margin-top:28px; font-size:18px; font-weight:650; color:#133b46; } .services-integral-interactive .integral-note{ margin-top:9px; font-size:12px; color:#778b90; } /* Individual services — avoid card-after-card fatigue */ .service-intro{ background:#fff; } .service-capabilities{ background:#f6f9f9; } .service-value-item{ position:relative; } .service-value-item:before{ content:""; position:absolute; left:16px; top:42px; bottom:-18px; width:1px; background:#d7e5e7; } .service-value-item:last-child:before{display:none} .service-value-item>span{ position:relative; z-index:1; background:#fff; } /* Mobile refinements */ @media(max-width:760px){ /* About process: compact vertical timeline */ .about-method-timeline{ display:block; margin-top:28px; padding-left:8px; } .about-method-timeline:before{ left:22px; right:auto; top:17px; bottom:20px; width:1px; height:auto; background:linear-gradient(180deg,var(--cyan),rgba(24,198,234,.14)); } .about-method-timeline .about-method-step{ display:grid; grid-template-columns:30px 18px 1fr; justify-items:stretch; text-align:left; gap:0 12px; min-height:112px; padding:0 0 18px; } .about-method-timeline .about-method-num{ grid-column:1; grid-row:1; align-self:start; padding-top:2px; } .about-method-timeline .about-method-step>i{ grid-column:2; grid-row:1; margin-top:0; width:14px; height:14px; background:#fff; } .about-method-timeline .about-method-step>div{ grid-column:3; grid-row:1; padding:0 2px 0 0; } .about-method-timeline strong{ font-size:19px; margin-bottom:6px; } .about-method-timeline p{ max-width:none; margin:0; font-size:12px; line-height:1.55; } /* Values: true premium slider card */ .about-values{ margin-top:30px; padding-top:30px; } .about-values-heading{ margin-bottom:18px; } .about-values-heading h3{ font-size:29px; } .about-values-heading p{ font-size:13px; } .about-values-list.premium-mobile-carousel{ padding-top:3px!important; } .about-values-list.premium-mobile-carousel>*{ flex-basis:82%!important; width:82%!important; min-height:205px!important; padding:22px!important; } .about-values-list .value-icon{ margin-bottom:30px; } .about-values-list .value-card strong{ font-size:20px; } .about-values-list .value-card small{ font-size:12px; } /* Services general: integrated vision is a vertical, compact interactive timeline */ .services-integral-interactive .integral-experience{ padding:24px 20px; border-radius:18px; } .services-integral-interactive .integral-track, .services-integral-interactive .integral-progress, .services-integral-interactive .integral-description{ display:none!important; } .services-integral-interactive .integral-steps{ display:grid; gap:0; position:relative; } .services-integral-interactive .integral-steps:before{ content:""; position:absolute; left:15px; top:18px; bottom:18px; width:1px; background:#cfe1e4; } .services-integral-interactive .integral-step{ position:relative; display:grid; grid-template-columns:30px 18px 1fr; grid-template-rows:auto auto; align-items:start; gap:2px 10px; width:100%; padding:0 0 24px; text-align:left; background:none; border:0; } .services-integral-interactive .integral-step:last-child{padding-bottom:2px} .services-integral-interactive .integral-step>span{ grid-column:1; grid-row:1/3; padding-top:1px; font-size:9px; color:#80969b; } .services-integral-interactive .integral-step>i{ grid-column:2; grid-row:1; position:relative; z-index:2; width:13px; height:13px; margin-top:2px; border-radius:50%; border:2px solid var(--cyan); background:#fff; } .services-integral-interactive .integral-step>strong{ grid-column:3; grid-row:1; font-size:17px; color:#0b303b; } .services-integral-interactive .integral-step>small{ display:block; grid-column:3; grid-row:2; margin-top:4px; font-size:11px; line-height:1.5; color:#71868c; } .services-integral-interactive .integral-step.active>i{ background:var(--cyan); box-shadow:0 0 0 6px rgba(24,198,234,.09); } .services-integral-interactive .integral-note{ padding-top:18px; margin-top:18px; border-top:1px solid #dfebed; } /* Service pages: capabilities carousel + vertical value narrative */ .service-cap-card{ min-height:245px!important; } .service-value-grid{ display:block; } .service-value-grid>div:first-child{ margin-bottom:24px; } .service-value-item{ display:grid; grid-template-columns:34px 1fr; gap:14px; padding:0 0 24px!important; border:0!important; } .service-value-item:before{ left:16px; top:31px; bottom:-2px; } .service-value-item>span{ width:32px; height:32px; display:grid; place-items:center; border-radius:50%; border:1px solid #bfd7dc; font-size:9px; color:#1597ae; } .service-value-item strong{ font-size:17px; } .service-value-item p{ margin-top:5px; } /* General services hero cards: compact 2x2 instead of long vertical stack */ .services-hub-visual{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; } .services-hub-mini{ min-height:136px!important; padding:15px!important; border-radius:15px!important; } .services-hub-mini strong{ font-size:14px!important; line-height:1.15; } .services-hub-mini small{ font-size:10px!important; line-height:1.4; } .services-hub-connector{display:none!important} } @media(max-width:390px){ .services-hub-mini{min-height:128px!important} .about-values-list.premium-mobile-carousel>*{flex-basis:86%!important;width:86%!important} } /* ========================================================== v16.8 — compact Values accordion + exclusive team flip ========================================================== */ .values-accordion{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .values-accordion .value-card{ min-height:154px; padding:0; border:1px solid #dce7e9; border-radius:16px; background:#fff; overflow:hidden; box-shadow:0 8px 24px rgba(7,39,50,.035); } .value-toggle{ width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:20px 20px 10px; background:none; border:0; text-align:left; color:#092934; font-family:inherit; } .value-toggle .value-num{ position:static!important; width:auto!important; padding:0!important; border:0!important; font-size:9px; letter-spacing:.14em; color:#45a9bb; } .value-toggle strong{ margin:0!important; font-size:17px!important; } .value-plus{ display:none; width:28px; height:28px; border-radius:50%; place-items:center; color:#0d7d92; background:#edf8fa; font-size:19px; font-weight:300; transition:transform .25s ease,background .25s ease; } .value-detail{ padding:0 20px 20px; } .value-detail p{ margin:0; color:#667d84; font-size:12px; line-height:1.55; } @media(max-width:760px){ .about-values{ margin-top:26px!important; padding-top:26px!important; } .about-values-heading{ margin-bottom:14px!important; } .about-values-heading h3{ font-size:27px!important; margin-bottom:6px!important; } .about-values-heading p{ font-size:12px!important; line-height:1.5!important; } .values-accordion{ display:block!important; margin:0!important; padding:0!important; overflow:visible!important; } .values-accordion .value-card{ width:100%!important; min-height:0!important; margin:0 0 9px!important; border-radius:13px!important; box-shadow:none!important; scroll-snap-align:none!important; } .values-accordion .value-card:before{display:none!important} .value-toggle{ min-height:56px; padding:13px 14px; grid-template-columns:28px 1fr 28px; cursor:pointer; } .value-toggle strong{ font-size:15px!important; } .value-plus{ display:grid; } .value-detail{ max-height:0; opacity:0; overflow:hidden; padding:0 14px; transition:max-height .3s ease,opacity .22s ease,padding .3s ease; } .value-detail p{ font-size:11px; line-height:1.5; padding-left:40px; } .value-card.is-open{ border-color:rgba(24,198,234,.42); background:linear-gradient(145deg,#fff,#f8fcfc); } .value-card.is-open .value-plus{ transform:rotate(45deg); background:#dff5f8; } .value-card.is-open .value-detail{ max-height:110px; opacity:1; padding:0 14px 14px; } /* Values no longer use generic carousel controls */ [data-values-accordion] + .mobile-carousel-controls, .values-accordion + .mobile-carousel-controls{ display:none!important; } } /* ========================================================== v16.9 — Fix: Piensa como Trader mobile overflow ========================================================== */ .crypto-training, .crypto-training .container, .crypto-training-grid, .crypto-training-copy, .crypto-book, .crypto-book-copy{ min-width:0; max-width:100%; box-sizing:border-box; } .crypto-book-copy{ overflow:hidden; } .crypto-book-copy h3, .crypto-book-copy p{ max-width:100%; overflow-wrap:anywhere; word-break:normal; } .crypto-book-cover img{ max-width:100%; height:auto; } @media(max-width:650px){ .crypto-book{ width:100%; max-width:100%; gap:20px; overflow:hidden; } .crypto-book-cover{ width:min(82%,280px); max-width:280px; margin:0 auto; } .crypto-book-copy{ width:100%; padding:8px 2px 4px; } .crypto-book-copy h3{ font-size:28px; line-height:1.06; margin:10px 0 12px; } .crypto-book-copy p{ font-size:12px; line-height:1.65; margin:0 0 12px; } .crypto-disclaimer{ font-size:9px!important; line-height:1.55!important; padding-top:13px; margin-top:14px; } }