/* ========================================================= MARIN AUTOMAÇÃO — Design System v3 Direção: tech premium (Stripe / Linear / Vercel / Framer), adaptado à identidade Marin (azul/teal do logo, precisão gravimétrica). ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root{ /* --- superfícies --- */ --bg:#05070A; --bg-1:#090C11; --bg-2:#0D1117; --glass:rgba(255,255,255,.045); --glass-strong:rgba(255,255,255,.07); --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.16); /* --- texto --- */ --text-1:#F4F6F8; --text-2:#A7B0BB; --text-3:#6B7480; /* --- marca --- */ --blue:#4C8DFF; --blue-soft:#2B4C82; --teal:#2FE0C9; --teal-soft:#12483F; --amber:#F2A900; --grad-brand: linear-gradient(90deg, var(--teal), var(--blue)); --glow-blue: rgba(76,141,255,.28); --glow-teal: rgba(47,224,201,.24); --font-display:'Sora', 'Inter', sans-serif; --font-body:'Inter', -apple-system, Segoe UI, sans-serif; --font-mono:'IBM Plex Mono', ui-monospace, 'Courier New', monospace; --container:1360px; --r-s:12px; --r-m:20px; --r-l:28px; --ease: cubic-bezier(.16,1,.3,1); } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;} } html{overflow-x:hidden;} body{ margin:0; overflow-x:hidden; font-family:var(--font-body); color:var(--text-1); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.6; font-size:16px; } img{max-width:100%;display:block;} a{color:inherit;} h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;margin:0 0 .4em;letter-spacing:-.015em;color:var(--text-1);} p{margin:0 0 1em;color:var(--text-2);} ul{margin:0;padding:0;} button{font-family:inherit;} svg{display:block;} :focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px;} .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:32px;} @media (max-width:640px){ .container{padding-inline:20px;} } section{padding-block:150px;position:relative;} @media (max-width:1100px){ section{padding-block:104px;} } @media (max-width:640px){ section{padding-block:72px;} } .section-tight{padding-block:80px;} @media (max-width:640px){ .section-tight{padding-block:56px;} } .section-1, .section-soft{background:var(--bg-1);} .section-2{background:var(--bg-2);} /* ---------- glow blobs (fundo ambiente) ---------- */ .glow-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;} .glow-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;} .glow-blob.blue{background:var(--glow-blue);} .glow-blob.teal{background:var(--glow-teal);} /* ---------- scroll reveal ---------- Só esconde conteúdo se a classe "js" existir no (ver script inline no ) e o JS realmente rodar. Sem JS, tudo fica visível por padrão — isso evita conteúdo invisível caso o IntersectionObserver falhe. */ .js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease), transform .8s var(--ease);} [data-reveal].is-visible{opacity:1;transform:translateY(0);} [data-reveal="fade"]{transform:none;} [data-reveal-delay="1"]{transition-delay:.08s;} [data-reveal-delay="2"]{transition-delay:.16s;} [data-reveal-delay="3"]{transition-delay:.24s;} [data-reveal-delay="4"]{transition-delay:.32s;} /* ---------- eyebrow ---------- */ .eyebrow{ font-family:var(--font-mono);font-size:.76rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase; color:var(--teal);display:inline-flex;align-items:center;gap:.7em;margin-bottom:1.3em; padding:.5em 1em;border:1px solid var(--border-strong);border-radius:99px;background:var(--glass); } .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--teal);display:inline-block;box-shadow:0 0 8px var(--teal);animation:pulse 2s ease-in-out infinite;} @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}} /* ---------- type scale ---------- */ h1{font-size:clamp(2.6rem,6.4vw,5.6rem);letter-spacing:-.02em;} h2{font-size:clamp(2rem,4vw,3rem);} h3{font-size:clamp(1.2rem,2vw,1.5rem);} .gradient-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;} .lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--text-2);max-width:58ch;font-weight:400;line-height:1.65;} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.6em;font-weight:600;font-size:.94rem; padding:1em 1.7em;border-radius:99px;border:1px solid transparent;text-decoration:none;cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); white-space:nowrap; } .btn-primary{background:var(--grad-brand);color:#04110E;box-shadow:0 8px 30px -8px var(--glow-teal);} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px -8px var(--glow-teal);} .btn-dark{background:var(--text-1);color:var(--bg);} .btn-dark:hover{transform:translateY(-2px);} .btn-whatsapp{background:#1E9E5A;color:#fff;} .btn-whatsapp:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(30,158,90,.55);} .btn-outline{border-color:var(--border-strong);color:var(--text-1);background:var(--glass);} .btn-outline:hover{border-color:var(--teal);background:var(--glass-strong);} .btn-arrow{transition:transform .2s var(--ease);} .btn:hover .btn-arrow{transform:translateX(3px);} .btn svg{width:18px;height:18px;} .btn-row{display:flex;gap:1rem;flex-wrap:wrap;} .icon-btn{ width:42px;height:42px;border-radius:50%;border:1px solid var(--border-strong); display:flex;align-items:center;justify-content:center;color:var(--text-2);background:var(--glass); transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .icon-btn:hover{background:var(--glass-strong);border-color:var(--teal);color:var(--teal);} .icon-btn svg{width:18px;height:18px;} /* ========================================================= HEADER ========================================================= */ .util-bar{background:var(--bg-1);color:var(--text-3);font-family:var(--font-mono);font-size:.74rem;letter-spacing:.03em;border-bottom:1px solid var(--border);} .util-bar .container{display:flex;justify-content:space-between;align-items:center;height:38px;} .util-bar a{color:var(--text-3);text-decoration:none;display:flex;align-items:center;gap:.5em;transition:color .2s var(--ease);} .util-bar a:hover{color:var(--teal);} .util-bar svg{width:13px;height:13px;} @media (max-width:700px){ .util-bar .util-hide{display:none;} } .site-header{position:sticky;top:0;z-index:100;background:rgba(5,7,10,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);} .site-header .container{display:flex;align-items:center;justify-content:space-between;height:78px;} .brand{display:flex;align-items:center;gap:.7em;text-decoration:none;} .brand img{height:32px;width:auto;filter:brightness(0) invert(1);} .brand-name{display:none;font-family:var(--font-display);font-weight:700;color:var(--text-1);} .nav-toggle{display:none;background:none;border:none;cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center;} .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{content:'';display:block;width:22px;height:2px;background:var(--text-1);position:relative;transition:transform .2s var(--ease), opacity .2s var(--ease);} .nav-toggle span::before{position:absolute;top:-7px;} .nav-toggle span::after{position:absolute;top:7px;} .main-nav ul{display:flex;align-items:center;gap:2.1rem;list-style:none;} .main-nav a{text-decoration:none;font-size:.88rem;font-weight:500;color:var(--text-2);position:relative;padding:.3em 0;transition:color .2s var(--ease);} .main-nav a:hover{color:var(--text-1);} .main-nav li.active > a{color:var(--teal);} .nav-cta{background:var(--grad-brand);color:#04110E !important;padding:.7em 1.4em;border-radius:99px;font-weight:700;font-size:.85rem;box-shadow:0 6px 24px -8px var(--glow-teal);} .header-actions{display:flex;align-items:center;gap:1.6rem;} @media (max-width:960px){ .brand-name{display:block;} .nav-toggle{display:flex;} .main-nav{position:fixed;top:78px;right:0;bottom:0;width:min(380px,88vw);background:var(--bg-1);transform:translateX(100%);transition:transform .32s var(--ease);overflow-y:auto;padding:2rem 1.5rem;border-left:1px solid var(--border);} .main-nav[data-open="true"]{transform:translateX(0);} .main-nav ul{flex-direction:column;align-items:flex-start;gap:0;width:100%;} .main-nav li{width:100%;border-bottom:1px solid var(--border);} .main-nav a{display:block;padding:1.1em 0;font-size:1.05rem;} .header-actions .nav-cta{display:none;} .nav-toggle[aria-expanded="true"] span{background:transparent;} .nav-toggle[aria-expanded="true"] span::before{transform:rotate(45deg);top:0;background:var(--text-1);} .nav-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg);top:0;background:var(--text-1);} } /* ========================================================= HERO ========================================================= */ .hero{position:relative;padding-top:88px;padding-bottom:0;overflow:hidden;} .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:2rem;padding-bottom:80px;text-align:center;align-items:center;justify-items:center;} .hero-copy{max-width:900px;} .hero-copy .lede{margin-inline:auto;text-align:center;} .hero-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:2.2rem;} .hero-stage{position:relative;z-index:1;width:100%;max-width:1180px;margin-inline:auto;padding-bottom:120px;} .hero-stage-inner{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:2rem;min-height:520px;} .hero-product{position:relative;display:flex;align-items:center;justify-content:center;} .hero-product img{ max-height:560px;filter:drop-shadow(0 40px 60px rgba(0,0,0,.65)) drop-shadow(0 0 90px var(--glow-blue)); animation:float 6s ease-in-out infinite; } @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}} .hero-ring{position:absolute;border:1px solid var(--border);border-radius:50%;inset:6%;animation:spin 40s linear infinite;} .hero-ring::before{content:'';position:absolute;top:-1px;left:50%;width:8px;height:8px;margin-left:-4px;background:var(--teal);border-radius:50%;box-shadow:0 0 12px var(--teal);} @keyframes spin{to{transform:rotate(360deg);}} @media (max-width:960px){ .hero-stage-inner{grid-template-columns:1fr;gap:3rem;min-height:auto;} .hero-product img{max-height:340px;} } /* --- signature element: painel de dosagem (dashboard) --- */ .dash{ position:relative; background:linear-gradient(180deg, var(--glass-strong), var(--glass)); backdrop-filter:blur(20px); border:1px solid var(--border-strong); border-radius:var(--r-l); box-shadow:0 40px 80px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); overflow:hidden; } .dash-head{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;border-bottom:1px solid var(--border);} .dash-head .dots{display:flex;gap:.4rem;} .dash-head .dots i{width:9px;height:9px;border-radius:50%;background:var(--border-strong);display:block;} .dash-head .title{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);} .dash-head .led{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono);font-size:.7rem;color:var(--teal);} .dash-head .led i{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);animation:pulse 1.8s ease-in-out infinite;} .dash-body{padding:1.6rem;} .dash-ring-row{display:flex;align-items:center;gap:1.6rem;margin-bottom:1.4rem;} .dash-ring{position:relative;width:110px;height:110px;flex-shrink:0;} .dash-ring svg{transform:rotate(-90deg);} .dash-ring circle{fill:none;stroke-width:9;} .dash-ring .track{stroke:rgba(255,255,255,.08);} .dash-ring .seg1{stroke:var(--blue);stroke-linecap:round;} .dash-ring .seg2{stroke:var(--teal);stroke-linecap:round;} .dash-ring .seg3{stroke:var(--amber);stroke-linecap:round;} .dash-ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;} .dash-ring-label .n{font-family:var(--font-mono);font-weight:600;font-size:1.3rem;color:var(--text-1);} .dash-ring-label .u{font-size:.62rem;color:var(--text-3);letter-spacing:.05em;text-transform:uppercase;} .dash-legend{display:flex;flex-direction:column;gap:.6rem;flex:1;} .dash-legend .row{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;} .dash-legend .row span:first-child{display:flex;align-items:center;gap:.6em;color:var(--text-2);} .dash-legend .row i{width:8px;height:8px;border-radius:2px;display:inline-block;} .dash-legend .row .val{font-family:var(--font-mono);color:var(--text-1);font-weight:600;} .dash-legend .c1{background:var(--blue);} .dash-legend .c2{background:var(--teal);} .dash-legend .c3{background:var(--amber);} .dash-wave{height:64px;position:relative;border-top:1px solid var(--border);padding-top:1rem;} .dash-wave svg{width:100%;height:100%;overflow:visible;} .dash-wave path{fill:none;stroke:url(#waveGrad);stroke-width:2;} .dash-foot{display:flex;justify-content:space-between;padding:1rem 1.5rem;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:.68rem;color:var(--text-3);} /* --- variante: captura de tela real dentro da moldura --- */ .dash-shot{padding:0;line-height:0;background:#0A0E13;} .dash-shot img{width:100%;display:block;} /* ---------- stats / proof band ---------- */ .stats-band{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-1);} .stats-band .container{display:grid;grid-template-columns:repeat(4,1fr);} .stat-cell{padding:2.6rem 2rem;border-right:1px solid var(--border);} .stat-cell:last-child{border-right:none;} .stat-cell .num{font-family:var(--font-mono);font-weight:600;font-size:clamp(1.7rem,3vw,2.4rem);color:var(--text-1);display:block;line-height:1;margin-bottom:.4em;} .stat-cell .num.grad{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;} .stat-cell .cap{font-size:.85rem;color:var(--text-2);} @media (max-width:900px){ .stats-band .container{grid-template-columns:1fr 1fr;} .stat-cell:nth-child(2n){border-right:none;} .stat-cell{border-bottom:1px solid var(--border);} } @media (max-width:520px){ .stats-band .container{grid-template-columns:1fr;} } /* ========================================================= BENTO GRID ========================================================= */ .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1.25rem;} .bento-tile{ grid-column:span 2;background:var(--glass);border:1px solid var(--border);border-radius:var(--r-m); padding:2.2rem;position:relative;overflow:hidden;transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); } .bento-tile:hover{transform:translateY(-4px);border-color:var(--border-strong);background:var(--glass-strong);} .bento-tile.big{grid-column:span 3;} .bento-tile.wide{grid-column:span 4;} .bento-tile .ico{width:44px;height:44px;border-radius:12px;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;margin-bottom:1.4rem;color:#04110E;} .bento-tile .ico svg{width:22px;height:22px;} .bento-tile h3{margin-bottom:.5em;font-size:1.15rem;} .bento-tile p{font-size:.92rem;margin:0;} @media (max-width:1000px){ .bento{grid-template-columns:repeat(2,1fr);} .bento-tile, .bento-tile.big, .bento-tile.wide{grid-column:span 1;} } /* ========================================================= GLASS CARDS (produtos) ========================================================= */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;} .grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem;} @media (max-width:900px){ .grid-3, .grid-4, .grid-5{grid-template-columns:1fr 1fr;} } @media (max-width:560px){ .grid-3, .grid-2, .grid-4, .grid-5{grid-template-columns:1fr;} } .card{ background:var(--glass);border:1px solid var(--border);border-radius:var(--r-m);overflow:hidden; display:flex;flex-direction:column;transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .card:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);} .card-media{ background:radial-gradient(circle at 50% 30%, rgba(76,141,255,.14), transparent 70%), var(--bg-1); padding:2.4rem 1.6rem 1.2rem;display:flex;align-items:center;justify-content:center;min-height:230px; } .card-media img{max-height:200px;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5));} .card-body{padding:1.8rem 1.8rem 2.1rem;flex:1;display:flex;flex-direction:column;} .card-tag{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--teal);margin-bottom:.7em;} .card-body h3{margin-bottom:.5em;} .card-body p{font-size:.94rem;flex:1;} .card-link{margin-top:1.1em;display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.9rem;color:var(--text-1);text-decoration:none;} .card-link:hover{color:var(--teal);} /* ========================================================= PROCESS STEPS ========================================================= */ .process{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;counter-reset:proc;} @media (max-width:900px){ .process{grid-template-columns:1fr 1fr;} } @media (max-width:560px){ .process{grid-template-columns:1fr;} } .process-step{background:var(--glass);border:1px solid var(--border);border-radius:var(--r-m);padding:2rem 1.7rem;position:relative;transition:border-color .3s var(--ease), transform .3s var(--ease);} .process-step:hover{border-color:var(--teal);transform:translateY(-4px);} .process-step::before{counter-increment:proc;content:counter(proc,decimal-leading-zero);font-family:var(--font-mono);color:var(--teal);font-size:.8rem;display:block;margin-bottom:1.4em;} .process-step h3{font-size:1.05rem;margin-bottom:.5em;} .process-step p{font-size:.88rem;margin:0;} /* ========================================================= WHY MARIN (stat list) ========================================================= */ .split{display:grid;grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:start;} @media (max-width:1000px){ .split{grid-template-columns:1fr;gap:2.6rem;} } .stat-list{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;} @media (max-width:520px){ .stat-list{grid-template-columns:1fr;} } .stat{background:var(--glass);border:1px solid var(--border);border-radius:var(--r-m);padding:1.8rem;transition:border-color .3s var(--ease);} .stat:hover{border-color:var(--border-strong);} .stat .num{font-family:var(--font-mono);font-size:2.1rem;font-weight:600;color:var(--text-1);display:block;line-height:1;} .stat .cap{font-size:.85rem;color:var(--text-2);margin-top:.6em;display:block;} .retrofit-card{border:1px solid var(--border);border-radius:var(--r-m);background:var(--glass);padding:1.6rem 1.2rem;text-align:center;font-family:var(--font-mono);color:var(--text-1);font-size:.92rem;line-height:1.4;transition:border-color .2s var(--ease), background .2s var(--ease);} .retrofit-card:hover{border-color:var(--teal);background:var(--glass-strong);} /* ========================================================= TIMELINE (serviços / história) ========================================================= */ .timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;counter-reset:step;} @media (max-width:900px){ .timeline{grid-template-columns:1fr 1fr;} } @media (max-width:560px){ .timeline{grid-template-columns:1fr;} } .timeline-step{background:var(--glass);border:1px solid var(--border);border-radius:var(--r-m);padding:2rem 1.7rem;position:relative;transition:border-color .3s var(--ease), transform .3s var(--ease);} .timeline-step:hover{border-color:var(--teal);transform:translateY(-4px);} .timeline-step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--font-mono);color:var(--amber);font-size:.8rem;display:block;margin-bottom:1.3em;} .timeline-step h3{font-size:1.05rem;margin-bottom:.5em;} .timeline-step p{font-size:.88rem;margin:0;} /* ========================================================= APPLICATIONS ========================================================= */ .apps-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.25rem;} @media (max-width:1000px){ .apps-grid{grid-template-columns:repeat(3,1fr);} } @media (max-width:640px){ .apps-grid{grid-template-columns:repeat(2,1fr);} } .app-cell{background:var(--glass);border:1px solid var(--border);border-radius:var(--r-m);padding:2.2rem 1.3rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem;transition:border-color .3s var(--ease), transform .3s var(--ease);} .app-cell:hover{border-color:var(--teal);transform:translateY(-4px);} .app-cell svg{width:28px;height:28px;color:var(--teal);} .app-cell span{font-size:.85rem;font-weight:500;color:var(--text-1);line-height:1.35;} /* ========================================================= SPEC TABLE ========================================================= */ .spec-table{width:100%;border-collapse:collapse;font-size:.94rem;} .spec-table tr{border-bottom:1px solid var(--border);} .spec-table td{padding:.95em .4em;} .spec-table td:first-child{color:var(--text-2);width:46%;} .spec-table td:last-child{font-family:var(--font-mono);color:var(--text-1);font-weight:500;} .applications-list{list-style:none;margin-top:1em;} .applications-list li{padding:.7em 0;border-bottom:1px solid var(--border);display:flex;align-items:baseline;gap:.7em;color:var(--text-2);} .applications-list li::before{content:'';width:6px;height:6px;background:var(--teal);flex-shrink:0;transform:translateY(-2px);display:inline-block;border-radius:1px;} /* ========================================================= CTA band ========================================================= */ .cta-band{position:relative;overflow:hidden;} .cta-band .container{text-align:center;position:relative;z-index:1;} .cta-band .eyebrow{margin-inline:auto;} .cta-band .lede{margin-inline:auto;} .cta-split{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center;text-align:left;} @media (max-width:900px){ .cta-split{grid-template-columns:1fr;gap:2rem;} } .cta-split .eyebrow, .cta-split .lede{margin-inline:0;} .cta-panel{background:var(--glass);border:1px solid var(--border-strong);border-radius:var(--r-m);padding:2.2rem;backdrop-filter:blur(20px);} .cta-panel h3{font-size:1.05rem;margin-bottom:1.2em;} .cta-panel .btn-row{flex-direction:column;align-items:stretch;} .cta-panel .btn{justify-content:center;} /* ========================================================= FOOTER ========================================================= */ .site-footer{background:var(--bg-1);color:var(--text-2);border-top:1px solid var(--border);} .footer-cta{padding-block:90px;border-bottom:1px solid var(--border);position:relative;overflow:hidden;} .footer-cta-grid{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;} .footer-cta h2{max-width:16ch;margin-bottom:0;} .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2.5rem;padding-block:56px;border-bottom:1px solid var(--border);} @media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} } @media (max-width:560px){ .footer-grid{grid-template-columns:1fr;} } .footer-grid h4{color:var(--text-1);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;margin-bottom:1.3em;} .footer-grid ul{list-style:none;display:flex;flex-direction:column;gap:.8em;} .footer-grid a{color:var(--text-2);text-decoration:none;font-size:.92rem;transition:color .2s var(--ease);} .footer-grid a:hover{color:var(--text-1);} .footer-brand img{height:28px;margin-bottom:1.2em;filter:brightness(0) invert(1);} .footer-brand p{font-size:.88rem;color:var(--text-3);max-width:34ch;} .footer-social{display:flex;gap:.7rem;margin-top:1.3em;} .footer-bottom{padding-block:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1em;font-size:.78rem;color:var(--text-3);font-family:var(--font-mono);} /* ========================================================= PAGE HEADER ========================================================= */ .page-header{padding-block:76px 60px;position:relative;overflow:hidden;} .page-header h1{margin-bottom:.35em;font-size:clamp(2.3rem,5vw,3.4rem);} .breadcrumb{font-family:var(--font-mono);font-size:.76rem;color:var(--text-3);display:flex;gap:.6em;margin-bottom:1.4em;flex-wrap:wrap;position:relative;z-index:1;} .breadcrumb a{color:var(--text-3);text-decoration:none;} .breadcrumb a:hover{color:var(--text-1);} .page-header .container{position:relative;z-index:1;} /* ========================================================= FORM ========================================================= */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;} @media (max-width:640px){ .form-grid{grid-template-columns:1fr;} } .field{display:flex;flex-direction:column;gap:.5em;margin-bottom:1.4rem;} .field.full{grid-column:1 / -1;} .field label{font-size:.82rem;font-weight:600;color:var(--text-1);} .field input,.field select,.field textarea{ font-family:var(--font-body);font-size:1rem;padding:.9em 1em;border:1px solid var(--border-strong);border-radius:var(--r-s); background:var(--glass);color:var(--text-1);transition:border-color .2s var(--ease), box-shadow .2s var(--ease); } .field input::placeholder,.field textarea::placeholder{color:var(--text-3);} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(47,224,201,.15);outline:none;} .field select option{background:var(--bg-1);color:var(--text-1);} .field textarea{resize:vertical;min-height:130px;} .field .hint, p.hint{font-size:.85rem;color:var(--text-3);font-style:italic;} .form-note{margin-top:1rem;font-size:.84rem;color:var(--text-3);background:var(--glass);border:1px solid var(--border);padding:1em 1.2em;border-radius:var(--r-s);} .contact-card{background:var(--glass);border:1px solid var(--border);border-radius:var(--r-m);padding:2rem;margin-bottom:1.4rem;} .contact-card h3{font-size:1.05rem;margin-bottom:.7em;} .contact-card p{margin:0 0 .3em;font-size:.95rem;} .contact-card a{color:var(--teal);text-decoration:none;font-weight:500;} .contact-card a:hover{text-decoration:underline;} .contact-row{display:flex;align-items:center;gap:.9em;margin-bottom:.9em;} .contact-row .ico{width:38px;height:38px;border-radius:10px;background:var(--grad-brand);color:#04110E;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .contact-row .ico svg{width:17px;height:17px;} /* ---------- gallery ---------- */ .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;} @media (max-width:900px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:560px){ .gallery-grid{grid-template-columns:1fr;} } .gallery-item{background:var(--glass);border:1px solid var(--border);border-radius:var(--r-m);padding:1.6rem;display:flex;flex-direction:column;transition:border-color .3s var(--ease), transform .3s var(--ease);} .gallery-item:hover{border-color:var(--border-strong);transform:translateY(-4px);} .gallery-item img{margin-inline:auto;max-height:250px;filter:drop-shadow(0 16px 24px rgba(0,0,0,.5));} .gallery-cap{margin-top:1.2em;font-family:var(--font-mono);font-size:.78rem;color:var(--text-3);} /* ---------- muro de logos de clientes ---------- */ .logo-wall{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;} @media (max-width:900px){ .logo-wall{grid-template-columns:repeat(3,1fr);} } @media (max-width:560px){ .logo-wall{grid-template-columns:repeat(2,1fr);} } .logo-card{ background:#F4F5F6;border-radius:var(--r-s); display:flex;align-items:center;justify-content:center; padding:1.4rem 1.2rem;min-height:96px; filter:grayscale(1) opacity(.72); transition:filter .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); } .logo-card:hover{filter:grayscale(0) opacity(1);transform:translateY(-3px);box-shadow:0 16px 32px -12px rgba(0,0,0,.5);} .logo-card img{max-width:100%;max-height:44px;object-fit:contain;display:block;} /* ---------- instalações em destaque (clientes com detalhe técnico) ---------- */ .client-feature{ background:var(--glass);border:1px solid var(--border);border-radius:var(--r-m); padding:2rem;display:flex;flex-direction:column;gap:1.2rem; transition:border-color .3s var(--ease), transform .3s var(--ease); } .client-feature:hover{border-color:var(--border-strong);transform:translateY(-4px);} .client-feature .logo-card{align-self:flex-start;min-height:0;padding:1rem 1.3rem;} .client-feature .cf-mark{ width:52px;height:52px;border-radius:12px;background:var(--grad-brand);color:#04110E; display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.2rem; } .client-feature h3{margin-bottom:0;font-size:1.1rem;} .client-feature .cf-loc{font-family:var(--font-mono);font-size:.76rem;color:var(--text-3);letter-spacing:.03em;} .client-feature .cf-systems{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem;} /* ---------- video card (real, link para o canal) ---------- */ .video-card{ position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--border-strong); background:linear-gradient(160deg, rgba(76,141,255,.14), rgba(47,224,201,.08)); padding:3.5rem 2rem;text-align:center;text-decoration:none;display:block; transition:transform .3s var(--ease), border-color .3s var(--ease); } .video-card:hover{transform:translateY(-4px);border-color:var(--teal);} .video-card .play{ width:72px;height:72px;border-radius:50%;background:var(--grad-brand);color:#04110E; display:flex;align-items:center;justify-content:center;margin:0 auto 1.4rem;box-shadow:0 10px 40px -8px var(--glow-teal); } .video-card .play svg{width:26px;height:26px;} .video-card h3{margin-bottom:.4em;} .video-card p{margin:0;color:var(--text-2);} /* ---------- utility ---------- */ .text-center{text-align:center;} .mx-auto{margin-inline:auto;} .mt-lg{margin-top:3.2rem;} .badge{display:inline-block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;background:var(--glass);border:1px solid var(--border-strong);color:var(--text-1);padding:.4em .9em;border-radius:99px;} /* sticky mobile CTA */ .mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;background:var(--bg-1);border-top:1px solid var(--border);} .mobile-cta .row{display:grid;grid-template-columns:1fr 1fr;} .mobile-cta a{display:flex;align-items:center;justify-content:center;gap:.5em;padding:1rem;font-weight:700;font-size:.86rem;text-decoration:none;} .mobile-cta .wa{background:#1E9E5A;color:#fff;} .mobile-cta .quote{background:var(--grad-brand);color:#04110E;} .mobile-cta svg{width:16px;height:16px;} @media (max-width:720px){ .mobile-cta{display:block;} body{padding-bottom:56px;} }