/* Nathalia Hauache — style.css | Aroma Comunicação */ /* Poppins (Black 900 / Bold 700 / Bold Italic 700i / Regular 400) via Google Fonts — link no . Para cravar 100/100: baixar os .woff2 e servir de /fonts/ (ver guia). */ /* ============ Branding (self-hosted em /fonts) ============ */ @font-face{font-family:'Branding';font-style:normal;font-weight:100;font-display:swap;src:url('../fonts/Branding_Thin.woff') format('woff')} @font-face{font-family:'Branding';font-style:italic;font-weight:100;font-display:swap;src:url('../fonts/Branding_Thin_Italic.woff') format('woff')} @font-face{font-family:'Branding';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/Branding_Light.woff') format('woff')} @font-face{font-family:'Branding';font-style:italic;font-weight:300;font-display:swap;src:url('../fonts/Branding_Light_Italic.woff') format('woff')} @font-face{font-family:'Branding';font-style:normal;font-weight:350;font-display:swap;src:url('../fonts/Branding_Semilight.woff') format('woff')} @font-face{font-family:'Branding';font-style:italic;font-weight:350;font-display:swap;src:url('../fonts/Branding_Semilight_Italic.woff') format('woff')} @font-face{font-family:'Branding';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Branding_Medium.woff') format('woff')} @font-face{font-family:'Branding';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/Branding_Medium_Italic.woff') format('woff')} @font-face{font-family:'Branding';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Branding_Semibold.woff') format('woff')} @font-face{font-family:'Branding';font-style:italic;font-weight:600;font-display:swap;src:url('../fonts/Branding_Semibold_Italic.woff') format('woff')} @font-face{font-family:'Branding';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Branding_Bold.woff') format('woff')} @font-face{font-family:'Branding';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/Branding_Bold_Italic.woff') format('woff')} @font-face{font-family:'Branding';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/Branding_Black.woff') format('woff')} @font-face{font-family:'Branding';font-style:italic;font-weight:900;font-display:swap;src:url('../fonts/Branding_Black_Italic.woff') format('woff')} /* Oooh Baby (script, Google Fonts) — palavra em destaque do hero */ /* ============ Design tokens ============ */ :root{ --ink:#09295A; /* azul institucional */ --ink-2:#0B2F68; --ink-3:#123A78; /* cards */ --ink-deep:#051A3D; /* footer */ --gold:#D4A24E; --gold-soft:#E5C58A; --steel:#7FA3C2; --paper:#F7F5F0; --white:#FFFFFF; --muted:#A9BBD6; --display:'Branding','Poppins',system-ui,sans-serif; --body:'Branding','Poppins',system-ui,-apple-system,sans-serif; --radius:14px; --maxw:1180px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:hidden} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}} body{font-family:var(--body);background:var(--ink);color:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .container{max-width:var(--maxw);margin:0 auto;padding:0 24px} .eyebrow{font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px} .eyebrow::before{content:"";width:34px;height:2px;background:var(--gold)} section{padding:96px 0} h2{font-family:var(--display);font-size:clamp(1.8rem,4vw,2.7rem);font-weight:900;line-height:1.15;margin:18px 0 14px} .lead{color:var(--muted);max-width:640px;font-size:1.06rem} :focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px} /* ============ Header ============ */ header{position:fixed;inset:0 0 auto 0;z-index:90;transition:background .3s,box-shadow .3s;padding:0 0 18px} header.scrolled{background:rgba(9,41,90,.93);backdrop-filter:blur(12px);box-shadow:0 4px 30px rgba(0,0,0,.35);padding:0 0 12px} /* ---- topbar creme: redes sociais + e-mail à direita ---- */ .topbar{background:var(--paper);max-height:44px;overflow:hidden;transition:max-height .3s,opacity .3s,margin .3s;margin-bottom:16px} header.scrolled .topbar{max-height:0;opacity:0;margin-bottom:12px} header.scrolled .logo img{height:42px} .topbar-in{display:flex !important;justify-content:flex-start !important;align-items:center;gap:16px;padding-top:8px;padding-bottom:8px} .topbar-in .tb-lang{margin-left:auto} .tb-mail{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:500;color:#46577A;transition:color .2s} .tb-mail:hover{color:#9a6f25} .tb-sep{width:1px;height:14px;background:#C9C4B6} .tb-soc{display:flex;align-items:center;gap:14px} .tb-soc a{color:#46577A;display:grid;place-items:center;transition:color .2s,transform .2s} .tb-soc a:hover{color:var(--gold);transform:translateY(-2px)} @media(max-width:480px){.tb-mail span{display:none}} .nav{display:flex;align-items:center;justify-content:space-between;gap:20px} .logo{font-family:var(--display);font-weight:900;font-size:1.18rem;letter-spacing:.02em;display:inline-flex;align-items:center} .logo img{height:55px;width:auto;display:block;transition:height .3s ease} .logo-foot img{height:55px !important;width:auto;opacity:.85;transition:opacity .25s} .logo-foot:hover img{opacity:1} @media(max-width:600px){.logo img{height:44px}header.scrolled .logo img{height:34px}.logo-foot img{height:44px !important}} .logo b{color:var(--gold);font-weight:900} .nav ul{display:flex;gap:30px;list-style:none} .nav ul a{font-size:.92rem;font-weight:500;color:var(--paper);opacity:.85;transition:opacity .2s,color .2s} .nav ul a:hover{opacity:1;color:var(--gold-soft)} .nav-cta{font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.04em;background:var(--gold);color:var(--ink);padding:11px 22px;border-radius:999px;transition:transform .2s,box-shadow .2s;white-space:nowrap} .nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,162,78,.35)} .burger{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;position:relative;z-index:101} .burger span{display:block;width:24px;height:2px;background:var(--paper);margin:5px auto;transition:.3s} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:980px){ .burger{display:block} .nav ul{position:fixed;inset:0;background:rgba(9,41,90,.98);flex-direction:column;justify-content:center;align-items:center;gap:30px;transform:translateX(100%);transition:transform .35s;z-index:100} .nav ul.open{transform:translateX(0)} .nav ul a{font-size:1.3rem} .nav-cta{display:none} } /* ============ Hero ============ */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:169px 0 80px;overflow:hidden} #heroCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0} .hero::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 70% 40%,transparent 0%,rgba(9,41,90,.55) 70%,var(--ink) 100%);z-index:1;pointer-events:none} .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center} .hero h1{font-family:var(--display);font-size:clamp(2.4rem,5.6vw,4.1rem);font-weight:900;line-height:1.07;letter-spacing:-.015em;margin:22px 0 20px} .hero h1 em{font-family:'Oooh Baby','Branding',cursive;font-style:normal;font-weight:400;font-size:2em;line-height:1;color:var(--gold);position:relative;white-space:nowrap;letter-spacing:.01em} /*.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.12em;background:linear-gradient(90deg,var(--gold),transparent);opacity:.45;border-radius:2px}*/ .hero p{color:var(--muted);max-width:540px} .hero-actions{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap} .btn{font-family:var(--display);font-weight:700;font-size:.95rem;padding:16px 32px;border-radius:999px;display:inline-flex;align-items:center;gap:10px;transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer;border:0} .btn-gold{background:var(--gold);color:var(--ink)} .btn-gold:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(212,162,78,.4)} .btn-ghost{background:transparent;color:var(--paper);border:1.5px solid rgba(247,245,240,.3)} .btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft);transform:translateY(-3px)} /* 3 indicadores sempre na mesma linha, em 3 colunas */ .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:54px;max-width:560px} .hero-stats .stat{text-align:center} .stat strong{font-family:var(--display);font-size:2.5rem;font-weight:900;color:var(--white);display:block;line-height:1} .stat strong i{font-style:normal;color:var(--gold);font-size:1.3rem;vertical-align:super} .stat span{font-size:.8rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;display:block;margin-top:6px;line-height:1.45} @media(max-width:880px){.hero-stats{max-width:480px;margin-left:auto;margin-right:auto;gap:18px}} @media(max-width:480px){.hero-stats .stat span{font-size:.7rem}.hero-stats .stat strong{font-size:1.5rem}} .hero-hash{font-family:var(--display);font-weight:900;font-style:italic;font-size:clamp(2rem,3.5vw,3.3rem);line-height:1.1;color:var(--gold);letter-spacing:0;margin-top:40px;white-space:nowrap} @media(max-width:880px){.hero-hash{text-align:center}} .hero-photo{position:relative;display:flex;justify-content:center} .hero-photo .arc{position:absolute;width:118%;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(212,162,78,.35);top:6%;animation:spin 60s linear infinite} .hero-photo .arc::before{content:"";position:absolute;top:-5px;left:50%;width:9px;height:9px;border-radius:50%;background:var(--gold)} @keyframes spin{to{transform:rotate(360deg)}} .hero-photo .glow{position:absolute;width:75%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(212,162,78,.22),transparent 65%);top:12%;filter:blur(10px)} .hero-photo img{position:relative;z-index:2;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))} @media(max-width:880px){ .hero-grid{grid-template-columns:1fr;text-align:center} .hero p,.lead{margin:40px auto} /* eyebrow em 1 linha: fonte fluida, tracking reduzido e sem o traço */ .hero .eyebrow{justify-content:center;white-space:nowrap;font-size:clamp(.5rem,2.2vw,.78rem);letter-spacing:.04em;gap:0} .hero .eyebrow::before{display:none} .hero-actions{justify-content:center} .hero-photo{display:none} /* foto da Nathalia oculta no mobile */ .hero-hash{font-size:7.2vw;margin-top:60px;white-space:nowrap} .cred{grid-template-columns:1fr 1fr;gap:14px} .cred-item{flex-direction:column;gap:10px;padding:18px 16px} .cred-item:hover{transform:none} } /* desktop: foto da Nathalia colada ao bottom, limitada à altura do hero (sem sobra em cima: o grid preenche o hero e o texto centraliza na altura toda) */ /* desktop: hero compacto — altura definida pelo conteúdo; foto preenche do nav ao chão da seção (absoluta, ancorada no bottom da coluna) */ @media(min-width:881px){ .hero{align-items:stretch;padding-bottom:0} .hero-grid{align-items:end;width:100%} .hero-grid>div:first-child{align-self:start;padding-bottom:54px} .hero-photo{align-self:stretch} .hero-photo img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:100%;width:auto;max-height:none} .hero-photo .arc{top:auto;bottom:-12%} .hero-photo .glow{top:auto;bottom:0} } /* ============ Sobre ============ */ .sobre{background:var(--paper);color:var(--ink)} .sobre .lead{color:#46577A} .sobre-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:stretch} .sobre-col{display:flex;flex-direction:column;justify-content:space-between} .sobre-col p:last-child{margin-bottom:0} .sobre-col .eyebrow{margin-bottom:10px} .sobre-col h2{margin:16px 0 28px} .sobre-col p{margin-bottom:26px;color:#32436B} .sobre-col p b{color:var(--ink)} .cred{display:grid;gap:22px} .cred-item{display:flex;gap:18px;align-items:flex-start;background:var(--white);border:1px solid #E5E1D6;border-radius:var(--radius);padding:26px 26px;transition:transform .25s,box-shadow .25s} .cred-item:hover{transform:translateX(6px);box-shadow:0 10px 30px rgba(9,41,90,.1)} .cred-item svg{flex:0 0 26px;margin-top:3px} .cred-item h3{font-family:var(--display);font-size:1rem;font-weight:700;margin-bottom:8px} .cred-item p{font-size:.9rem;color:#5A6A8E;margin:0} @media(max-width:880px){.sobre-grid{grid-template-columns:1fr}} .sobre-sub{font-family:var(--display);font-size:1.05rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:12px;margin:64px 0 24px} .sobre-sub::after{content:"";flex:1;height:1px;background:#E0DACB} .edu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px} .edu-item{background:var(--white);border:1px solid #E5E1D6;border-radius:var(--radius);padding:22px 22px 20px;transition:transform .25s,box-shadow .25s} .edu-item:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(9,41,90,.1)} .edu-logo{width:44px;height:44px;object-fit:contain;border-radius:10px;padding:4px;float:right;margin-left:10px} .edu-item .edu-anos{font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--gold);display:inline-block;border:1px solid #EAD9B8;background:#FBF6EC;padding:3px 10px;border-radius:999px;margin-bottom:12px} .edu-item h4{font-family:var(--display);font-size:.98rem;font-weight:700;color:var(--ink);margin-bottom:6px;line-height:1.3} .edu-item p{font-size:.86rem;color:#5A6A8E;margin:0;line-height:1.55} .gal{display:grid;grid-template-columns:repeat(6,1fr);gap:12px} /* fotos do Japão: P&B que ganham cor no hover */ .gal img{aspect-ratio:1;object-fit:cover;border-radius:12px;width:100%;filter:grayscale(.6);transition:filter .45s ease,transform .3s,box-shadow .3s;cursor:pointer} .gal img:hover{filter:grayscale(0);transform:scale(1.04);box-shadow:0 14px 34px rgba(9,41,90,.22)} @media(max-width:1000px){.gal{grid-template-columns:repeat(3,1fr)}} /* mobile: carrossel deslizante mostrando 2 fotos por vez */ @media(max-width:880px){ .gal{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px} .gal::-webkit-scrollbar{display:none} .gal img{flex:0 0 calc(50% - 6px);width:calc(50% - 6px);min-width:0;scroll-snap-align:start} } @media(hover:none){.gal img{filter:grayscale(0)}} /* touch: sem hover, mostra colorido */ .gal-nav{display:none;margin-top:20px} @media(max-width:880px){.gal-nav:not([hidden]){display:flex}} /* ============ Treinamentos (mesma animação do hero) ============ */ .trein{background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%);position:relative;overflow:hidden} #treinCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0} .trein::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 45%,transparent 0%,rgba(9,41,90,.32) 78%,var(--ink-2) 100%);z-index:0;pointer-events:none} .trein .container{position:relative;z-index:1} .trein-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:48px} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px} .card{background:var(--ink-3);border:1px solid rgba(127,163,194,.16);border-radius:var(--radius);padding:34px 30px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s} .card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--gold),transparent 70%);opacity:0;transition:opacity .3s} .card:hover{transform:translateY(-8px);border-color:rgba(212,162,78,.45);box-shadow:0 24px 50px rgba(0,0,0,.4)} .card:hover::before{opacity:1} .card-icon{width:52px;height:52px;border-radius:12px;background:rgba(212,162,78,.14);display:grid;place-items:center} .card h3{font-family:var(--display);font-size:1.22rem;font-weight:700;line-height:1.25} .card p{color:var(--muted);font-size:.95rem;flex:1} .card-link{font-family:var(--display);font-weight:700;font-size:.88rem;color:var(--gold);display:inline-flex;align-items:center;gap:8px;margin-top:6px} .card-link svg{transition:transform .25s} .card-link:hover svg{transform:translateX(5px)} .card .tag{position:absolute;top:22px;right:22px;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);border:1px solid rgba(127,163,194,.35);padding:4px 10px;border-radius:999px} /* ============ Depoimentos (carrossel) ============ */ .depo{background:var(--paper);color:var(--ink)} .carousel{position:relative;margin-top:44px;overflow:hidden} .car-track{display:flex;will-change:transform} .car-item{flex:0 0 50%;padding:0 12px} @media(max-width:760px){.car-item{flex:0 0 100%}} .depo-card{background:var(--white);border:1px solid #E5E1D6;border-radius:var(--radius);padding:32px 28px;display:flex;flex-direction:column;gap:18px;height:100%} .depo-card blockquote{font-size:.97rem;color:#32436B;flex:1} .depo-card blockquote::before{content:"“";font-family:var(--display);font-size:3rem;line-height:0;display:block;color:var(--gold);margin:14px 0 2px} .depo-author{display:flex;align-items:center;gap:14px} .depo-author .av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--steel));display:grid;place-items:center;font-family:var(--display);font-weight:900;color:var(--ink);font-size:1rem} .depo-author strong{display:block;font-size:.93rem} .depo-author span{font-size:.8rem;color:#7A8AA8} .car-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px} .car-btn{width:46px;height:46px;border-radius:50%;border:1.5px solid #C9C4B6;background:var(--white);cursor:pointer;display:grid;place-items:center;transition:border-color .2s,background .2s} .car-btn:hover{border-color:var(--gold);background:#FBF6EC} .car-dots{display:flex;gap:8px} .car-dot{width:9px;height:9px;border-radius:50%;background:#CFC9BB;border:0;cursor:pointer;padding:0;transition:background .25s,transform .25s} .car-dot.active{background:var(--gold);transform:scale(1.25)} /* ============ LinkedIn / Elfsight (seção clara) ============ */ .linkedin{background:var(--paper);color:var(--ink)} .linkedin .lead{color:#46577A} .elfsight-shell{margin-top:40px;min-height:320px} /* ============ Vídeos & Reels (azul royal, dois carrosséis) ============ */ .videos{background:linear-gradient(165deg,#0E3D8C 0%,#0A2F6E 45%,var(--ink) 100%)} .videos-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:40px} .videos-sub{font-family:var(--display);font-size:1.05rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:12px;margin:46px 0 22px} .videos-sub:first-of-type{margin-top:0} .videos-sub::after{content:"";flex:1;height:1px;background:rgba(169,196,230,.25)} .videos-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px} .videos-col .videos-sub{margin:0 0 22px} .vgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:880px){.videos-cols{grid-template-columns:1fr;gap:30px}} @media(max-width:420px){.vgrid{grid-template-columns:1fr}} .vcar{position:relative;overflow:hidden} .vcar-track{display:flex;will-change:transform} .vcar-item{flex:0 0 25%;padding:0 9px;box-sizing:border-box} @media(max-width:1200px){.vcar-item{flex:0 0 33.3333%}} @media(max-width:1000px){.vcar-item{flex:0 0 50%}} @media(max-width:640px){.vcar-item{flex:0 0 100%}} /* reels: cards verticais e mais estreitos */ .vcar.reels .vcar-item{flex:0 0 25%;padding:0 9px} @media(max-width:1000px){.vcar.reels .vcar-item{flex:0 0 33.3333%}} @media(max-width:640px){.vcar.reels .vcar-item{flex:0 0 50%}} /* grade: shorts no MESMO formato 16:9 dos vídeos (colunas uniformes) */ .vgrid.reels .yt-lite{aspect-ratio:16/9;background-position:center 22%} .yt-card{background:rgba(5,26,61,.55);border:1px solid rgba(169,196,230,.22);border-radius:var(--radius);overflow:hidden;transition:transform .3s,border-color .3s;height:100%;display:flex;flex-direction:column} .yt-card:hover{transform:translateY(-6px);border-color:rgba(212,162,78,.5)} .yt-lite{position:relative;aspect-ratio:16/9;background:#000 center/cover no-repeat;cursor:pointer;border:0;width:100%;display:block;padding:0} .reels .yt-lite{aspect-ratio:9/16} .yt-lite::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,26,61,.65))} .yt-play{position:absolute;inset:0;margin:auto;width:50px;height:36px;background:rgba(9,41,90,.85);border:1.5px solid rgba(212,162,78,.7);border-radius:10px;display:grid;place-items:center;transition:background .25s,transform .25s;z-index:2} .yt-lite:hover .yt-play{background:var(--gold);transform:scale(1.08)} .yt-lite:hover .yt-play svg path{fill:var(--ink)} .yt-title{padding:12px 14px;font-size:.82rem;font-weight:600;color:var(--paper);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .vcar-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:24px} .vcar-btn{width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(247,245,240,.35);background:transparent;cursor:pointer;display:grid;place-items:center;transition:border-color .2s,background .2s,opacity .2s;color:var(--paper)} .vcar-btn:hover{border-color:var(--gold);background:rgba(212,162,78,.12)} .vcar-btn:disabled{opacity:.3;cursor:default;border-color:rgba(247,245,240,.35);background:transparent} .vcar-nav .car-dots .car-dot{background:rgba(247,245,240,.3)} .vcar-nav .car-dots .car-dot.active{background:var(--gold)} .videos-cta{text-align:center;margin-top:46px} .videos-fallback{text-align:center;color:var(--muted);padding:50px 20px;border:1px dashed rgba(169,196,230,.35);border-radius:var(--radius)} .videos-fallback .btn{margin-top:18px} /* ============ Modal de vídeo ============ */ .video-overlay{position:fixed;inset:0;background:rgba(2,10,24,.88);backdrop-filter:blur(6px);z-index:135;display:none;align-items:center;justify-content:center;padding:24px} .video-overlay.show{display:flex;animation:lgpdIn .25s ease} .video-box{width:min(900px,94vw);position:relative} .video-box.vertical{width:min(390px,86vw)} .video-box .vframe{aspect-ratio:16/9;width:100%;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)} .video-box.vertical .vframe{aspect-ratio:9/16;max-height:84vh} .video-box iframe{width:100%;height:100%;border:0;display:block} .video-box .vtitle{margin-top:14px;color:var(--paper);font-family:var(--display);font-weight:600;font-size:.95rem;text-align:center} .video-close{position:absolute;top:-18px;right:-18px;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(247,245,240,.4);background:var(--ink-3);color:var(--paper);cursor:pointer;font-size:1.05rem;display:grid;place-items:center;transition:border-color .2s,background .2s;z-index:2} .video-close:hover{border-color:var(--gold);background:rgba(212,162,78,.18)} @media(max-width:640px){.video-close{top:-50px;right:0}} /* ============ Contato (brilho dourado) ============ */ .contato{background:radial-gradient(55% 70% at 88% 8%,rgba(212,162,78,.14),transparent 60%),radial-gradient(45% 60% at 5% 95%,rgba(127,163,194,.1),transparent 60%),linear-gradient(180deg,var(--ink) 0%,var(--ink-deep) 100%)} .contato-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;margin-top:30px} .contato-info p{color:var(--muted);margin-bottom:26px} .contato-meios{display:grid;gap:14px} .meio{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid rgba(127,163,194,.18);border-radius:12px;transition:border-color .25s,background .25s} .meio:hover{border-color:var(--gold);background:rgba(212,162,78,.07)} .meio svg{flex:0 0 22px} .meio span{font-size:.95rem} form{display:grid;gap:18px} .field{position:relative} .field input,.field textarea{width:100%;background:var(--ink-3);border:1.5px solid rgba(127,163,194,.2);border-radius:12px;padding:24px 18px 10px;color:var(--paper);font-family:var(--body);font-size:.98rem;transition:border-color .25s} .field textarea{min-height:140px;resize:vertical} .field label{position:absolute;left:18px;top:17px;color:var(--muted);font-size:.95rem;pointer-events:none;transition:.2s} .field input:focus,.field textarea:focus{outline:none;border-color:var(--gold)} .field input:focus+label,.field input:not(:placeholder-shown)+label, .field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{top:7px;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .form-msg{display:none;padding:14px 18px;border-radius:12px;font-size:.92rem} .form-msg.ok{display:block;background:rgba(74,180,110,.12);border:1px solid rgba(74,180,110,.4);color:#8FD9A8} .form-msg.err{display:block;background:rgba(214,70,70,.12);border:1px solid rgba(214,70,70,.4);color:#F0A0A0} #recaptchaV2{display:none;margin:4px 0} .form-lgpd{font-size:.78rem;color:var(--muted)} .form-lgpd a{color:var(--gold-soft);text-decoration:underline} @media(max-width:880px){.contato-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}} /* ============ Footer ============ */ footer{background:var(--ink-deep);padding:54px 0 30px;border-top:1px solid rgba(127,163,194,.12)} .footer-grid{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap} .footer-social{display:flex;gap:14px} .footer-social a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(127,163,194,.3);display:grid;place-items:center;transition:border-color .25s,background .25s} .footer-social a:hover{border-color:var(--gold);background:rgba(212,162,78,.12)} .footer-bottom{margin-top:34px;padding-top:24px;border-top:1px solid rgba(127,163,194,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)} .footer-bottom a{color:var(--gold-soft)} /* ============ FAB contato (direita) ============ */ .fab-wrap{position:fixed;right:22px;bottom:22px;z-index:95;display:flex;flex-direction:column;align-items:flex-end;gap:12px} .fab-menu{display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .25s} .fab-wrap.open .fab-menu{opacity:1;transform:translateY(0);pointer-events:auto} .fab-item{display:flex;align-items:center;gap:12px;background:var(--ink-3);border:1px solid rgba(127,163,194,.25);color:var(--paper);padding:11px 18px;border-radius:999px;font-size:.88rem;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .2s,border-color .2s} .fab-item:hover{transform:translateX(-5px);border-color:var(--gold)} .fab-main{width:62px;height:62px;border-radius:50%;background:var(--gold);border:0;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 30px rgba(212,162,78,.45);transition:transform .25s} .fab-main:hover{transform:scale(1.08)} .fab-wrap.open .fab-main svg.chat{display:none} .fab-main svg.close{display:none} .fab-wrap.open .fab-main svg.close{display:block} /* ============ Switcher de idiomas (flutuante à direita, estilo Lumina) ============ */ .lang{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:96} .lang-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(9,41,90,.85);backdrop-filter:blur(8px);border:1.5px solid rgba(247,245,240,.35);color:var(--paper);padding:10px 16px;border-radius:999px;font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.06em;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:border-color .2s,color .2s,transform .2s} .lang-btn:hover{border-color:var(--gold);color:var(--gold-soft);transform:scale(1.05)} .lang-btn svg.chev{transition:transform .25s} .lang.open .lang-btn svg.chev{transform:rotate(180deg)} .lang-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--ink-3);border:1px solid rgba(127,163,194,.3);border-radius:12px;padding:6px;min-width:170px;box-shadow:0 16px 40px rgba(0,0,0,.45);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .2s;z-index:120} .lang.open .lang-menu{opacity:1;transform:none;pointer-events:auto} .lang-opt{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;color:var(--paper);padding:10px 14px;border-radius:8px;font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.04em;cursor:pointer;text-align:left;transition:background .2s,color .2s} .lang-opt:hover{background:rgba(212,162,78,.12);color:var(--gold-soft)} .lang-opt.active{color:var(--gold)} .lang-opt small{font-family:var(--body);font-weight:500;color:var(--muted);font-size:.74rem;letter-spacing:0} @media(max-width:760px){ /* esquerda, meio vertical — longe do FAB de chat (direita) */ .lang{left:14px;right:auto;top:50%;bottom:auto;transform:translateY(-50%)} .lang-menu{left:0;right:auto;top:calc(100% + 10px);bottom:auto;transform:translateY(-6px)} .lang.open .lang-menu{transform:none} } /* ---- bandeiras SVG (idioma) ---- */ .flag{width:18px;height:18px;border-radius:50%;flex:0 0 18px;box-shadow:0 0 0 1px rgba(0,0,0,.08)} /* seletor de idioma na topbar */ .tb-lang{display:flex;align-items:center;gap:4px} .tb-lang-opt{display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;padding:4px 7px;border-radius:7px;font-family:var(--display);font-weight:600;font-size:.7rem;letter-spacing:.02em;color:#46577A;opacity:.55;transition:opacity .2s,background .2s} .tb-lang-opt .flag{width:15px;height:15px;flex-basis:15px} .tb-lang-opt:hover{opacity:1;background:#ECEFF3} .tb-lang-opt.active{opacity:1;color:#0a2f68} @media(max-width:600px){.tb-lang-opt span{display:none}.tb-lang-opt{padding:4px}} /* switcher flutuante: bandeira no botão e nas opções */ .lang-btn .flag-current{width:18px;height:18px} .lang-opt{justify-content:flex-start} .lang-opt .flag{margin-right:4px} .lang-opt span{font-weight:700;font-size:.82rem} /* ============ LGPD banner ============ */ .lgpd{position:fixed;left:22px;right:22px;bottom:22px;z-index:99;max-width:560px;margin:0 auto 0 0;background:var(--paper);color:var(--ink);border-radius:var(--radius);padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.5);display:none} @media(max-width:760px){.lgpd{margin:0}} .lgpd.show{display:block;animation:lgpdIn .4s ease} @keyframes lgpdIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} .lgpd p{font-size:.86rem;color:#32436B;margin-bottom:16px} .lgpd p a{color:var(--ink);text-decoration:underline} .lgpd-actions{display:flex;gap:10px;flex-wrap:wrap} .lgpd-actions .btn{padding:10px 22px;font-size:.82rem} .btn-ink{background:var(--ink);color:var(--paper)} .btn-outline{background:none;border:1.5px solid #C9C4B6;color:#32436B} /* ============ Modal de privacidade ============ */ .modal-overlay{position:fixed;inset:0;background:rgba(5,26,61,.72);backdrop-filter:blur(5px);z-index:130;display:none;align-items:center;justify-content:center;padding:24px} .modal-overlay.show{display:flex;animation:lgpdIn .3s ease} .modal{background:var(--paper);color:var(--ink);border-radius:16px;max-width:740px;width:100%;max-height:86vh;overflow-y:auto;padding:44px 40px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.5)} .modal h2{font-size:1.5rem;margin:0 0 6px;color:var(--ink)} .modal .modal-sub{font-size:.82rem;color:#7A8AA8;margin-bottom:26px} .modal h3{font-family:var(--display);font-size:1.02rem;color:var(--ink);margin:26px 0 8px} .modal p,.modal li{font-size:.92rem;color:#32436B;margin-bottom:10px;line-height:1.7} .modal ul{padding-left:20px;margin-bottom:10px} .modal a{color:#9a6f25;text-decoration:underline} .modal-close{position:sticky;float:right;top:0;margin:-20px -16px 0 0;width:40px;height:40px;border-radius:50%;border:1.5px solid #C9C4B6;background:var(--white);cursor:pointer;font-size:1.1rem;color:var(--ink);display:grid;place-items:center;transition:border-color .2s,background .2s;z-index:2} .modal-close:hover{border-color:var(--gold);background:#FBF6EC} @media(max-width:600px){.modal{padding:34px 22px}} /* ============ Reveal on scroll ============ */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}