/* ========================================================= COMPONENTES · Unicive — Polo Pinhais Tudo que se repete entre páginas. Depende de base.css. Extraído da LP 01 (design aprovado). ========================================================= */ /* ========================================================= NAV — pílula flutuante fixa ========================================================= */ .nav{ position:fixed;top:14px;left:0;right:0;margin:0 auto;z-index:100; /* sem transform: senão o menu mobile (position:fixed) se prende à nav, não à tela */ width:calc(100% - 32px);max-width:1140px;display:flex;align-items:center;gap:16px; padding:10px 10px 10px 22px;background:rgba(251,249,244,.82);backdrop-filter:blur(14px); border:1px solid var(--line);border-radius:var(--r); transition:box-shadow .3s ease,background-color .3s ease /* NÃO usar 'all': no mobile a viewport oscila com a barra de endereço e 'all' anima o recálculo de largura/posição, criando a tremedeira */ } .nav.scrolled{box-shadow:0 10px 34px rgba(21,40,35,.09)} .logo{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none} .logo img{height:23px;width:auto} .logo span{color:var(--muted);font-weight:700;font-size:.72rem;letter-spacing:.02em; padding-left:10px;border-left:1px solid var(--line);white-space:nowrap} .nav-links{display:flex;gap:4px;margin-left:auto;align-items:center} .nav-links > a{font-size:.86rem;font-weight:600;color:var(--muted);text-decoration:none; padding:9px 13px;border-radius:var(--r);transition:.2s;white-space:nowrap} .nav-links > a:hover{color:var(--forest);background:rgba(23,94,77,.07)} /* página atual */ .nav-links > a[aria-current="page"]{color:var(--forest);background:rgba(23,94,77,.09)} .nav .btn{padding:12px 20px;font-size:.86rem} .nav-m-zap{display:none} /* botão WhatsApp do menu: só no mobile */ /* dropdown de Cursos */ .nav-drop{position:relative} .nav-drop > button{ display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:.86rem;font-weight:600; color:var(--muted);background:none;border:0;cursor:pointer;padding:9px 13px;border-radius:var(--r);transition:.2s } .nav-drop > button:hover,.nav-drop.open > button{color:var(--forest);background:rgba(23,94,77,.07)} .nav-drop > button svg{width:13px;height:13px;transition:.25s} .nav-drop.open > button svg{transform:rotate(180deg)} .nav-drop-menu{ position:absolute;top:calc(100% + 10px);left:0;min-width:266px;background:var(--white); border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:0 20px 50px -14px rgba(21,40,35,.24); opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s } .nav-drop.open .nav-drop-menu{opacity:1;visibility:visible;transform:none} .nav-drop-menu a{ display:block;padding:11px 14px;border-radius:12px;text-decoration:none;color:var(--ink); font-size:.88rem;font-weight:600;transition:.18s } .nav-drop-menu a:hover{background:var(--cream);color:var(--forest)} .nav-drop-menu a small{display:block;font-size:.74rem;font-weight:500;color:var(--muted);margin-top:2px} .nav-drop-menu a.feat{background:rgba(98,218,150,.14)} .nav-drop-menu a.feat:hover{background:rgba(98,218,150,.24)} .nav-drop-menu hr{border:0;border-top:1px solid var(--line);margin:6px 10px} /* botão hambúrguer (só mobile) */ .nav-burger{ display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:transparent; cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;transition:.2s } .nav-burger:hover{border-color:var(--forest)} .nav-burger svg{width:18px;height:18px;color:var(--ink)} /* alterna hambúrguer / X conforme o menu abre (JS troca aria-expanded) */ .nav-burger .ic-close{display:none} .nav-burger[aria-expanded="true"] .ic-menu{display:none} .nav-burger[aria-expanded="true"] .ic-close{display:block} .nav-burger[aria-expanded="true"]{position:relative;z-index:2;background:var(--white);border-color:var(--forest)} @media(max-width:980px){ .nav-links{ position:fixed;inset:0;flex-direction:column;justify-content:center;gap:6px; background:var(--cream);padding:90px 24px 32px;margin:0; opacity:0;visibility:hidden;transition:.3s;overflow-y:auto } .nav-links.open{opacity:1;visibility:visible} .nav-links > a{font-size:1.28rem;font-weight:700;color:var(--ink);padding:14px 18px;text-align:center} .nav-burger{display:inline-flex} .nav > .btn{display:none} /* "Falar agora" sai do mobile — o botão flutuante do WhatsApp cobre */ /* backdrop-filter também prende o menu fixed à nav: desliga no mobile p/ o overlay preencher a tela */ .nav{padding-left:18px;backdrop-filter:none;background:var(--cream)} .logo{position:relative;z-index:2} /* logo fica visível por cima do menu aberto */ .nav-m-zap{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-size:1rem} .nav-m-zap svg{width:20px;height:20px} /* dropdown vira lista aberta no mobile */ .nav-drop{width:100%;text-align:center} .nav-drop > button{font-size:1.28rem;font-weight:700;color:var(--ink);justify-content:center;width:100%;padding:14px 18px} .nav-drop-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none; border:0;background:transparent;padding:0;min-width:0;display:none} .nav-drop.open .nav-drop-menu{display:block} .nav-drop-menu a{text-align:center;font-size:1rem} .nav-drop-menu a small{display:none} } /* ========================================================= WHATSAPP FLUTUANTE ========================================================= */ /* O botão NÃO tem animação de entrada, de propósito. Antes ele usava "animation:pop .5s 1.2s both": com fill-mode "both" e 1,2s de atraso, ele ficava invisível e deslocado durante o primeiro segundo de CADA carregamento e só então deslizava pra posição. Dava a sensação de página travando e "consertando" sozinha. Nunca reintroduzir animação de entrada aqui. Também não usar 'transition:all': no mobile a barra de endereço faz a viewport oscilar e o 'all' anima o recálculo de posição, criando tremedeira. */ .float{ position:fixed;right:20px;bottom:20px;z-index:99;display:flex;align-items:center;gap:10px; background:var(--mint);color:var(--ink);padding:15px 22px;border-radius:var(--r);text-decoration:none; font-weight:700;font-size:.92rem;box-shadow:0 12px 36px rgba(98,218,150,.5); transition:box-shadow .25s ease } /* o "levantar" só onde existe mouse de verdade: no touch o :hover gruda depois do toque e o botão fica deslocado até a pessoa tocar em outro lugar. */ @media(hover:hover){ .float{transition:transform .25s ease,box-shadow .25s ease} .float:hover{transform:translateY(-3px) scale(1.03)} } .float svg{width:20px;height:20px;flex-shrink:0} @media(max-width:600px){.float span{display:none}.float{padding:16px;right:16px;bottom:16px}} /* ========================================================= HERO DA HOME ========================================================= */ /* z-index 2: mantém o hero (e a sobra do card do Google) acima da seção seguinte */ .hero{padding:150px 0 80px;z-index:2;background: radial-gradient(60% 50% at 85% 15%,rgba(98,218,150,.18),transparent 60%), radial-gradient(50% 40% at 0% 90%,rgba(23,94,77,.08),transparent 60%),var(--cream)} .hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center} @media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:44px}.hero{padding:128px 0 60px}} .mec-badge{display:inline-flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line); padding:8px 8px 8px 16px;border-radius:var(--r);margin-bottom:24px;font-size:.8rem;font-weight:700;color:var(--forest)} .mec-badge b{background:var(--forest);color:var(--cream);padding:5px 11px;border-radius:var(--r);font-size:.72rem;letter-spacing:.04em} /* teto 3.5rem (56px): acima disso o título quebra em 4 linhas, porque a coluna para de crescer no max-width do .wrap enquanto o vw continua subindo */ .hero h1{font-size:clamp(2.2rem,4.3vw,3.5rem);margin-bottom:22px} .hero h1 .ital{color:var(--forest)} .hero-cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap} .hero-loc{margin-top:26px;display:flex;align-items:center;gap:8px;font-size:.87rem;color:var(--muted);font-weight:600} .hero-loc svg{width:16px;height:16px;color:var(--forest)} /* visual do hero */ .hv{position:relative} .hv-photo{aspect-ratio:4/3.4;border-radius:26px;background:var(--forest); position:relative;overflow:hidden;box-shadow:0 30px 70px -18px rgba(21,40,35,.4)} .hv-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%} /* leve fade só para dar profundidade à foto (o texto sobreposto foi removido) */ .hv-photo::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(15,72,58,.28) 0%,rgba(15,72,58,.05) 26%,transparent 46%)} .ph-label{position:absolute;left:0;right:0;bottom:0;padding:26px;color:var(--cream);z-index:2;max-width:60%} .ph-label .t{font-size:1.15rem;font-weight:700;letter-spacing:-.02em} .ph-label .d{font-size:.84rem;opacity:.75;margin-top:2px} .ph-tag{position:absolute;top:20px;left:20px;z-index:2;background:rgba(251,249,244,.16);backdrop-filter:blur(8px); border:1px solid rgba(251,249,244,.24);color:var(--cream);font-size:.72rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;padding:8px 13px;border-radius:var(--r)} /* card do Google flutuando sobre a foto */ /* z-index 5: precisa ficar acima do gradiente (1) e da legenda (2) da foto */ .gcard{position:absolute;right:-14px;bottom:-26px;width:270px;background:var(--white);border:1px solid var(--line);z-index:5; border-radius:20px;padding:20px;box-shadow:0 24px 60px -12px rgba(21,40,35,.3);animation:float 6s ease-in-out infinite alternate} @keyframes float{to{transform:translateY(-11px)}} @media(prefers-reduced-motion:reduce){.gcard{animation:none}} .gcard-h{display:flex;align-items:center;gap:9px;margin-bottom:14px} .g-ic{width:26px;height:26px;border-radius:50%;background:var(--cream-2);display:flex;align-items:center;justify-content:center; font-weight:800;font-size:.85rem;color:var(--forest)} .gcard-h .n{font-size:.8rem;font-weight:700} .gcard-h .s{font-size:.68rem;color:var(--muted)} .gscore{display:flex;align-items:baseline;gap:10px} .gscore .num{font-size:2.5rem;font-weight:800;letter-spacing:-.04em;color:var(--forest);line-height:1} .gstars{color:var(--amber);font-size:.95rem;letter-spacing:1px} .gcount{font-size:.72rem;color:var(--muted);margin-top:2px;font-weight:600} /* abaixo de 960px o card sai do absoluto e entra no fluxo: evita colidir com o botão flutuante do WhatsApp */ @media(max-width:960px){ .gcard{position:relative;right:auto;bottom:auto;width:100%;margin-top:14px;animation:none} .ph-label{max-width:100%} } /* ========================================================= CARD COMPARATIVO — Técnico → Tecnólogo ========================================================= */ .f1-card{display:grid;grid-template-columns:1fr 1fr;background:var(--white);border:1px solid var(--line); border-radius:30px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(21,40,35,.18)} @media(max-width:920px){.f1-card{grid-template-columns:1fr}} /* fluxo vertical com gap único + imagem absorvendo a sobra: substitui o space-between, que criava vãos irregulares */ .f1-visual{background:linear-gradient(135deg,var(--forest-d) 0%,#082820 100%); padding:44px; /* igual ao .f1-body para as colunas alinharem */ color:var(--cream);display:flex;flex-direction:column;gap:22px; position:relative;overflow:hidden} .f1-visual::before{content:"";position:absolute;top:-20%;right:-20%;width:350px;height:350px;border-radius:50%; background:radial-gradient(circle,rgba(98,218,150,.15) 0%,transparent 70%);pointer-events:none} /* bloco título + comparativo + selo, com ritmo próprio */ .f1-block{display:flex;flex-direction:column;gap:18px;z-index:2} .f1-tag{align-self:flex-start;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase; background:rgba(251,249,244,.12);backdrop-filter:blur(8px);border:1px solid rgba(251,249,244,.2); color:var(--cream);padding:8px 14px;border-radius:var(--r);z-index:2} .compare-title{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;margin-top:0;line-height:1.25;max-width:26ch} .compare-container{margin:0;display:flex;flex-direction:column;gap:16px;z-index:2} .compare-row{display:flex;flex-direction:column;gap:8px} .compare-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em; color:rgba(251,249,244,.6);display:flex;justify-content:space-between;align-items:baseline;gap:12px} .compare-label.mint{color:var(--mint)} .compare-label .dur{opacity:.75;font-variant-numeric:tabular-nums} .compare-label.mint .dur{opacity:1} .compare-bar-wrap{width:100%;height:42px;background:rgba(251,249,244,.06);border:1px solid rgba(251,249,244,.1); border-radius:12px;position:relative;overflow:hidden;display:flex;align-items:center} .compare-bar-wrap.acel-wrap{border-color:rgba(98,218,150,.35)} .compare-bar{height:100%;display:flex;align-items:center;padding-left:16px;font-size:.85rem;font-weight:700;border-radius:11px} .compare-bar.trad{width:100%;background:rgba(251,249,244,.12);color:rgba(251,249,244,.8);border-right:3px solid rgba(251,249,244,.3)} .compare-bar.acel{width:50%;background:linear-gradient(90deg,var(--mint-s) 0%,var(--mint) 100%);color:var(--ink); box-shadow:0 0 25px rgba(98,218,150,.35);border-right:3px solid var(--white); animation:growBar 1.8s cubic-bezier(.2,.8,.2,1) forwards} @keyframes growBar{from{width:0%}to{width:50%}} @media(prefers-reduced-motion:reduce){.compare-bar.acel{animation:none}} .saving-badge{align-self:flex-start;background:rgba(98,218,150,.14);border:1px solid rgba(98,218,150,.3); color:var(--mint);padding:10px 16px;border-radius:14px;font-size:.82rem;font-weight:800; display:inline-flex;align-items:center;gap:8px;margin-top:0;backdrop-filter:blur(8px); box-shadow:0 4px 15px rgba(0,0,0,.15);z-index:2} .saving-badge svg{width:16px;height:16px;flex-shrink:0} .f1-price-box{background:rgba(251,249,244,.06);border:1px solid rgba(251,249,244,.12);border-radius:20px; padding:18px 22px;backdrop-filter:blur(10px);margin-top:auto;z-index:2} .f1-price-box small{font-size:.65rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase; color:rgba(251,249,244,.65);display:block} .f1-price-box .v{display:flex;align-items:baseline;gap:3px;margin:4px 0} .f1-price-box .v i{font-style:normal;font-size:1.1rem;font-weight:800;color:var(--mint)} .f1-price-box .v b{font-size:2.8rem;font-weight:800;letter-spacing:-.05em;color:var(--mint);line-height:.95} .f1-price-box .v span{font-size:.95rem;font-weight:700;color:rgba(251,249,244,.9)} .f1-price-box em{font-style:normal;font-size:.78rem;color:rgba(251,249,244,.7);display:block;margin-top:4px} /* flex:1 -> a imagem estica e absorve o espaço que sobra, em vez de deixar um vão morto entre ela e o preço */ .f1-image-card{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(251,249,244,.15); box-shadow:0 16px 36px rgba(0,0,0,.25);margin:0;flex:1;min-height:170px;z-index:2; transition:transform .3s ease,box-shadow .3s ease} .f1-image-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,.35)} .f1-image-card img{width:100%;height:100%;min-height:170px;object-fit:cover;display:block} .f1-image-caption{position:absolute;bottom:0;left:0;right:0;background:rgba(15,72,58,.88);backdrop-filter:blur(6px); padding:10px 14px;font-size:.8rem;font-weight:700;text-align:center;color:var(--cream); border-top:1px solid rgba(251,249,244,.1)} .f1-body{padding:44px} /* igual ao .f1-visual: alinha o topo das duas colunas */ @media(max-width:600px){.f1-body,.f1-visual{padding:30px 22px}} .f1-body h3{font-size:clamp(1.5rem,2.5vw,2.05rem);font-weight:700;line-height:1.07;margin-bottom:14px} .f1-body .chips span{background:rgba(23,94,77,.05);border-color:rgba(23,94,77,.12);color:var(--forest-d); font-size:.82rem;font-weight:600;padding:8px 14px;display:inline-flex;align-items:center;gap:6px;transition:all .2s} .f1-body .chips span:hover{background:rgba(23,94,77,.09);transform:translateY(-1px)} /* ========================================================= FAIXA DE NÚMEROS (prova social) ========================================================= */ .stats{background:var(--ink);color:var(--cream);padding:76px 0;position:relative;overflow:hidden} .stats::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(58% 90% at 50% -12%,rgba(98,218,150,.15),transparent 62%), radial-gradient(42% 75% at 94% 112%,rgba(230,143,55,.09),transparent 62%)} .stats .wrap{position:relative;z-index:2} .stats-top{text-align:center;margin-bottom:36px} .stats-top .sk{display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:800; letter-spacing:.18em;text-transform:uppercase;color:var(--mint)} .stats-top .sk::before,.stats-top .sk::after{content:"";width:30px;height:1px;background:rgba(98,218,150,.4)} /* gap:1px sobre um fundo = fios de 1px perfeitos em qualquer breakpoint */ .stats-g{display:grid;grid-template-columns:repeat(6,1fr);gap:1px; background:rgba(251,249,244,.1);border:1px solid rgba(251,249,244,.1); border-radius:24px;overflow:hidden} @media(max-width:900px){.stats-g{grid-template-columns:repeat(3,1fr)}} @media(max-width:480px){.stats-g{grid-template-columns:repeat(2,1fr)}} .stat{background:var(--ink);padding:30px 14px 26px;display:flex;flex-direction:column; align-items:center;gap:11px;transition:background .35s;text-align:center} .stat:hover{background:#1A322A} .stat .ic{width:34px;height:34px;border-radius:10px;background:rgba(98,218,150,.12); display:flex;align-items:center;justify-content:center;transition:.35s;flex-shrink:0} .stat:hover .ic{background:var(--mint);transform:translateY(-2px)} .stat .ic svg{width:17px;height:17px;color:var(--mint);transition:.35s} .stat:hover .ic svg{color:var(--ink)} .stat .v{font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:800;letter-spacing:-.045em; color:var(--mint);line-height:1;font-variant-numeric:tabular-nums} .stat .stars{color:var(--amber);font-size:.68rem;letter-spacing:1.5px;line-height:1;margin-top:-4px} .stat .l{font-size:.74rem;color:rgba(251,249,244,.55);font-weight:600;line-height:1.4;max-width:17ch} /* ========================================================= CARDS DE CAMINHO (as 4 frentes) ========================================================= */ .paths{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:1000px){.paths{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.paths{grid-template-columns:1fr}} .path{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:28px 24px;transition:.3s; display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative;overflow:hidden} .path:hover{transform:translateY(-6px);box-shadow:0 22px 50px -14px rgba(21,40,35,.18);border-color:rgba(23,94,77,.35)} .path.feat{background:var(--forest);color:var(--cream);border-color:var(--forest)} .path .cat{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px} .path.feat .cat{color:var(--mint)} .path h3{font-size:1.32rem;margin-bottom:10px} .path p{font-size:.9rem;color:var(--muted);flex:1;line-height:1.5} .path.feat p{color:rgba(251,249,244,.72)} .path .go{margin-top:20px;font-size:.85rem;font-weight:700;color:var(--forest);display:flex;align-items:center;gap:7px} .path.feat .go{color:var(--mint)} .path .go svg{width:15px;height:15px;transition:.25s} .path:hover .go svg{transform:translateX(4px)} .path .star{position:absolute;top:16px;right:16px;font-size:.6rem;font-weight:800;letter-spacing:.1em; background:var(--mint);color:var(--ink);padding:5px 9px;border-radius:var(--r)} /* ========================================================= GRADE DE VALORES / DIFERENCIAIS ========================================================= */ .vals{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:24px;overflow:hidden;margin-top:48px} @media(max-width:860px){.vals{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.vals{grid-template-columns:1fr}} .val{background:var(--cream-2);padding:32px 26px;transition:.3s} .val:hover{background:var(--white)} .val .n{font-size:.76rem;font-weight:800;color:var(--forest);letter-spacing:.06em;margin-bottom:14px} .val h4{font-size:1.1rem;font-weight:700;margin-bottom:8px;letter-spacing:-.02em} .val p{font-size:.89rem;color:var(--muted);line-height:1.5} /* quando a grade está sobre fundo --cream (e não --cream-2) */ .bg-cream .val{background:var(--cream)} .bg-cream .val:hover{background:var(--white)} /* ========================================================= PASSOS (numerados e timeline) ========================================================= */ .steps{margin-top:28px;display:flex;flex-direction:column;gap:14px} .step{display:flex;gap:14px;align-items:flex-start} .step .sn{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--forest);color:var(--cream); font-size:.74rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px} .step p{font-size:.94rem;color:var(--muted)} .step p b{color:var(--ink);font-weight:700} /* seção "3 passos": passos à esquerda + card lateral, usando a largura toda */ .steps-2c{display:grid;grid-template-columns:1.4fr .85fr;gap:48px;align-items:center;margin-top:8px} @media(max-width:860px){.steps-2c{grid-template-columns:1fr;gap:30px}} .steps-2c .timeline-steps{margin:0} .steps-aside{background:var(--cream-2);border:1px solid var(--line);border-radius:22px; padding:28px;display:flex;flex-direction:column;gap:18px;align-items:flex-start} .steps-aside-note{display:flex;align-items:flex-start;gap:11px;color:var(--forest-d);font-weight:700;font-size:.95rem;line-height:1.45} .steps-aside-note svg{width:20px;height:20px;flex-shrink:0;margin-top:1px} .steps-aside-note b{color:var(--forest-d)} .steps-aside-tx{color:var(--muted);font-size:.9rem;line-height:1.55} .steps-aside .btn{width:100%;justify-content:center} /* seção objeção (fundo verde): texto à esquerda + card/CTA à direita */ .obj-2c{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} @media(max-width:860px){.obj-2c{grid-template-columns:1fr;gap:28px}} .obj-side{display:flex;flex-direction:column;gap:20px} /* "Como entrar" (graduação): cabeçalho à esquerda + card de ingresso à direita */ .ingresso-2c{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} @media(max-width:860px){.ingresso-2c{grid-template-columns:1fr;gap:28px}} /* "Já dá aula" (2ª graduação): texto+CTA à esquerda + cards de destaque à direita */ .prof-2c{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start} @media(max-width:860px){.prof-2c{grid-template-columns:1fr;gap:28px}} .prof-cards{display:flex;flex-direction:column;gap:14px} /* jornada de 8 passos (como-funciona): duas colunas de timeline (4+4) */ .journey-2c{display:grid;grid-template-columns:1fr 1fr;gap:20px 44px;align-items:start} @media(max-width:760px){.journey-2c{grid-template-columns:1fr;gap:0}} .journey-2c .timeline-steps{margin:0} /* plataforma/suporte (fundo verde): texto à esquerda + card garantia/CTA à direita */ .plat-2c{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center} @media(max-width:860px){.plat-2c{grid-template-columns:1fr;gap:26px}} .plat-2c p{color:rgba(251,249,244,.82);font-size:1rem;line-height:1.7} .plat-2c b{color:var(--mint)} .plat-eyebrow{color:var(--mint);font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-bottom:12px} .plat-card{background:rgba(251,249,244,.07);border:1px solid rgba(251,249,244,.16);border-radius:20px; padding:28px 30px;display:flex;flex-direction:column;gap:18px} .plat-card .btn{align-self:flex-start} /* ===== player de vídeo personalizado (home) ===== */ .vid-2c{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center} @media(max-width:860px){.vid-2c{grid-template-columns:1fr;gap:34px;justify-items:center}} .vid-tx{max-width:460px} @media(max-width:860px){.vid-tx{text-align:center}.vid-tx .hero-cta{justify-content:center}} .vplayer{position:relative;width:320px;max-width:100%;aspect-ratio:9/16;border-radius:26px;overflow:hidden; background:var(--forest-d);box-shadow:0 30px 70px -20px rgba(21,40,35,.45);user-select:none} .vplayer-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000} .vplayer-cover{position:absolute;inset:0;z-index:2;border:0;cursor:pointer;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:16px;color:var(--cream);transition:opacity .3s; background:linear-gradient(160deg,var(--forest) 0%,var(--forest-d) 72%)} .vplayer-cover::after{content:"";position:absolute;top:-25%;right:-25%;width:70%;height:70%;border-radius:50%; background:radial-gradient(circle,rgba(98,218,150,.28),transparent 68%);pointer-events:none} .vplayer.started .vplayer-cover{opacity:0;pointer-events:none} .vplayer-play{width:76px;height:76px;border-radius:50%;background:var(--mint);color:var(--ink);z-index:2; display:flex;align-items:center;justify-content:center;box-shadow:0 12px 32px rgba(98,218,150,.5);transition:transform .2s} .vplayer-cover:hover .vplayer-play{transform:scale(1.08)} .vplayer-play svg{width:34px;height:34px;margin-left:5px} .vplayer-cover-tx{z-index:2;font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.92} .vplayer-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:9px; padding:14px 12px 12px;background:linear-gradient(to top,rgba(8,40,32,.9),transparent); opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s} .vplayer.started .vplayer-bar{opacity:1;transform:none} .vplayer-bar button{background:none;border:0;color:var(--cream);cursor:pointer;display:flex;padding:3px;transition:.2s} .vplayer-bar button:hover{color:var(--mint)} .vplayer-bar svg{width:20px;height:20px} .vp-seek{flex:1;height:5px;border-radius:99px;background:rgba(251,249,244,.28);cursor:pointer;position:relative} .vp-seek-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--mint);border-radius:99px} .vp-time{font-size:.72rem;font-weight:700;color:var(--cream);font-variant-numeric:tabular-nums;min-width:32px;text-align:center} .vp-ic-pause,.vp-ic-muted{display:none} .vplayer.playing .vp-ic-play{display:none} .vplayer.playing .vp-ic-pause{display:block} .vplayer.muted .vp-ic-sound{display:none} .vplayer.muted .vp-ic-muted{display:block} .timeline-steps{position:relative;margin:32px 0;display:flex;flex-direction:column;gap:24px} .timeline-steps::before{content:"";position:absolute;left:20px;top:15px;bottom:15px;width:2px; background:repeating-linear-gradient(to bottom,var(--line) 0px,var(--line) 4px,transparent 4px,transparent 8px)} .t-step{display:flex;gap:20px;position:relative;transition:transform .25s ease} .t-step:hover{transform:translateX(6px)} .t-icon{width:40px;height:40px;border-radius:50%;background:var(--cream-2);border:2px solid var(--line); color:var(--forest);display:flex;align-items:center;justify-content:center;z-index:2;flex-shrink:0; transition:all .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 3px 8px rgba(0,0,0,.03);font-weight:800;font-size:.82rem} .t-icon svg{width:18px;height:18px} .t-step:hover .t-icon{background:var(--forest);border-color:var(--forest);color:var(--cream); box-shadow:0 8px 20px rgba(23,94,77,.25);transform:scale(1.05)} .t-content{display:flex;flex-direction:column;gap:4px;justify-content:center} .t-content h4{font-size:1.02rem;font-weight:800;color:var(--ink);letter-spacing:-.01em} .t-content p{font-size:.9rem;color:var(--muted);line-height:1.5} .t-content p b{color:var(--ink)} /* ========================================================= CHIPS ========================================================= */ .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px} .chips span{font-size:.8rem;font-weight:600;background:var(--white);border:1px solid var(--line); padding:9px 15px;border-radius:var(--r);color:var(--muted)} /* ========================================================= CARD DE PREÇO ========================================================= */ .price-box{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:32px; box-shadow:0 20px 50px -18px rgba(21,40,35,.16)} .price-box .pl{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .price-box .pv{display:flex;align-items:baseline;gap:3px;margin:8px 0 4px} .price-box .pv .c{font-size:1.2rem;font-weight:700;color:var(--forest)} .price-box .pv .n{font-size:3.4rem;font-weight:800;letter-spacing:-.045em;color:var(--forest);line-height:1} .price-box .pv .m{font-size:1rem;color:var(--muted);font-weight:600} .price-box .pd{font-size:.84rem;color:var(--muted);margin-bottom:22px} .price-box .btn{width:100%} .price-box hr{border:0;border-top:1px solid var(--line);margin:22px 0} .pay{display:flex;gap:8px;flex-wrap:wrap} .pay span{font-size:.72rem;font-weight:700;color:var(--muted);background:var(--cream-2);padding:7px 12px;border-radius:var(--r)} /* ========================================================= CARD EDITORIAL COM IMAGEM (frentes de curso) ========================================================= */ .fcard{display:grid;grid-template-columns:.86fr 1.14fr;background:var(--white);border:1px solid var(--line); border-radius:30px;overflow:hidden;box-shadow:0 26px 66px -26px rgba(21,40,35,.24)} .fcard.rev .fc-media{order:2} @media(max-width:920px){.fcard{grid-template-columns:1fr}.fcard.rev .fc-media{order:0}} /* painel da marca (sem foto): degradê verde + conteúdo distribuído na altura */ .fc-media{position:relative;overflow:hidden;min-height:100%; display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:34px 32px; background:linear-gradient(150deg,var(--forest) 0%,var(--forest-d) 58%,#0a3327 100%)} @media(max-width:920px){.fc-media{min-height:auto;padding:30px 26px;gap:26px}} .fc-media::before{content:"";position:absolute;top:-22%;right:-18%;width:340px;height:340px;border-radius:50%; pointer-events:none;background:radial-gradient(circle,rgba(98,218,150,.26),transparent 68%)} .fc-media > *{position:relative;z-index:2} .fc-tag{align-self:flex-start;font-size:.62rem;font-weight:800;letter-spacing:.13em; text-transform:uppercase;background:rgba(251,249,244,.15);backdrop-filter:blur(10px); border:1px solid rgba(251,249,244,.32);color:var(--cream);padding:8px 13px;border-radius:var(--r)} .fc-price{color:var(--cream)} .fc-price small{font-size:.62rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;opacity:.72;display:block} .fc-price .v{display:flex;align-items:baseline;gap:3px;margin:6px 0 5px} .fc-price .v i{font-style:normal;font-size:1.15rem;font-weight:800;opacity:.82} .fc-price .v b{font-size:3.1rem;font-weight:800;letter-spacing:-.055em;line-height:.9} .fc-price .v span{font-size:.95rem;font-weight:700;opacity:.8} .fc-price em{font-style:normal;font-size:.78rem;opacity:.75;line-height:1.45;display:block;max-width:32ch} .fc-media .btn{align-self:stretch;justify-content:center} .fc-body{padding:46px 44px} @media(max-width:600px){.fc-body{padding:30px 22px}} .fc-body h3{font-size:clamp(1.5rem,2.5vw,2.05rem);font-weight:700;line-height:1.07;margin-bottom:14px} .fc-lead{color:var(--muted);font-size:.98rem;line-height:1.62} .fc-note{display:inline-flex;align-items:center;gap:7px;font-size:.79rem;font-weight:700;color:var(--forest-d); background:rgba(98,218,150,.18);padding:8px 13px;border-radius:var(--r);margin-bottom:16px} /* dentro do card branco os chips precisam de fundo creme p/ contrastar */ .fc-body .chips span{background:var(--cream)} .fc-pay{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)} .fc-pay .pl2{font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} /* ===== modificadores de coluna ===== Estilo inline (style="grid-template-columns:…") VENCE media query e trava o grid em N colunas no celular. Usar estas classes no lugar do inline. */ .vals.cols-2{grid-template-columns:repeat(2,1fr)} @media(max-width:700px){.vals.cols-2{grid-template-columns:1fr}} .paths.cols-3{grid-template-columns:repeat(3,1fr)} @media(max-width:1000px){.paths.cols-3{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.paths.cols-3{grid-template-columns:1fr}} .stats-g.cols-4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.stats-g.cols-4{grid-template-columns:repeat(2,1fr)}} .gal.cols-3{grid-template-columns:1fr 1fr 1fr} @media(max-width:760px){.gal.cols-3{grid-template-columns:1fr 1fr}} @media(max-width:520px){.gal.cols-3{grid-template-columns:1fr}} /* dupla texto + mídia */ .duo{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center} .duo-w{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center} @media(max-width:860px){.duo,.duo-w{grid-template-columns:1fr;gap:26px}} /* ===== card de destaque em cor única: cabeçalho + 2 colunas equilibradas ===== */ .fbox{background:var(--white);border:1px solid var(--line);border-radius:28px;padding:46px 44px; box-shadow:0 26px 66px -26px rgba(21,40,35,.16)} @media(max-width:600px){.fbox{padding:30px 22px}} .fbox-head{max-width:720px} .fbox-head h3{font-size:clamp(1.5rem,2.5vw,2.05rem);font-weight:700;line-height:1.08;margin:0 0 14px} .fbox-lead{color:var(--muted);font-size:1rem;line-height:1.65} .fbox-lead + .fbox-lead{margin-top:14px} .fbox-cols{display:grid;grid-template-columns:1fr 1fr;margin-top:32px;padding-top:32px;border-top:1px solid var(--line)} @media(max-width:860px){.fbox-cols{grid-template-columns:1fr}} .fbox-list{padding-right:46px} .fbox-list .timeline-steps,.fbox-list .steps{margin:0} @media(max-width:860px){.fbox-list{padding-right:0}} .fbox-offer{padding-left:46px;border-left:1px solid var(--line); display:flex;flex-direction:column;gap:20px;justify-content:center} @media(max-width:860px){.fbox-offer{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:28px;padding-top:28px}} .fbox-price small{font-size:.62rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);display:block} .fbox-price .v{display:flex;align-items:baseline;gap:3px;margin:5px 0} .fbox-price .v i{font-style:normal;font-size:1.15rem;font-weight:800;color:var(--forest)} .fbox-price .v b{font-size:3rem;font-weight:800;letter-spacing:-.055em;line-height:.9;color:var(--forest)} .fbox-price .v span{font-size:.95rem;font-weight:700;color:var(--forest)} .fbox-price em{font-style:normal;font-size:.84rem;color:var(--muted);line-height:1.5;display:block} .fbox-hl{background:var(--cream-2);border:1px solid var(--line);border-radius:16px;padding:18px 20px} .fbox-hl .pl2{font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .fbox-hl p{font-size:.9rem;color:var(--muted);line-height:1.6} .fbox-stat{display:flex;gap:22px} .fbox-stat div b{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:var(--forest-d);line-height:1} .fbox-stat div span{font-size:.78rem;color:var(--muted)} .fbox-offer .btn{align-self:flex-start} @media(max-width:860px){.fbox-offer .btn{align-self:stretch;justify-content:center}} /* ========================================================= EXPLORADOR DE CURSOS (68 tecnólogos) ========================================================= */ .exp{margin-top:44px;background:var(--white);border:1px solid var(--line);border-radius:26px;overflow:hidden; box-shadow:0 20px 50px -20px rgba(21,40,35,.14);transition:box-shadow .4s} .exp.open{box-shadow:0 28px 70px -22px rgba(21,40,35,.24)} .exp-bar{display:flex;align-items:center;gap:18px;padding:24px 28px;cursor:pointer;background:none;border:0; width:100%;font-family:inherit;text-align:left;transition:background .3s} .exp-bar:hover{background:var(--cream)} .exp-ic{width:46px;height:46px;border-radius:14px;background:rgba(98,218,150,.2);display:flex;align-items:center; justify-content:center;flex-shrink:0;transition:.35s} .exp.open .exp-ic{background:var(--forest)} .exp-ic svg{width:22px;height:22px;color:var(--forest-d);transition:.35s} .exp.open .exp-ic svg{color:var(--mint)} .exp-tx{flex:1;min-width:0} .exp-tt{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .exp-tt b{font-size:1.08rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)} .exp-tt .cnt{font-size:.66rem;font-weight:800;letter-spacing:.1em;background:var(--forest);color:var(--cream); padding:5px 10px;border-radius:var(--r)} .exp-tx p{font-size:.87rem;color:var(--muted);margin-top:3px} .exp-cta{display:inline-flex;align-items:center;gap:9px;background:var(--mint);color:var(--ink);font-weight:800; font-size:.78rem;letter-spacing:.06em;padding:11px 17px;border-radius:var(--r);flex-shrink:0;transition:.3s} .exp-bar:hover .exp-cta{background:var(--mint-s)} .exp-chev{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center; justify-content:center;flex-shrink:0;transition:.4s cubic-bezier(.2,.7,.2,1)} .exp.open .exp-chev{transform:rotate(180deg);background:var(--forest);border-color:var(--forest)} .exp-chev svg{width:16px;height:16px;color:var(--forest);transition:.3s} .exp.open .exp-chev svg{color:var(--mint)} @media(max-width:760px){.exp-bar{padding:20px;gap:13px;flex-wrap:wrap}.exp-cta{display:none}} /* painel que abre. NÃO usar o truque grid-template-rows:0fr→1fr: a transition não interpola (testado no Chrome 148, trava em 0px). Altura é animada via JS com scrollHeight. */ .exp-panel{height:0;overflow:hidden;transition:height .5s cubic-bezier(.2,.7,.2,1)} @media(prefers-reduced-motion:reduce){.exp-panel{transition:none}} .exp-body{padding:6px 28px 28px;border-top:1px solid var(--line)} @media(max-width:760px){.exp-body{padding:6px 18px 22px}} .exp-tools{display:flex;gap:12px;align-items:center;padding:22px 0 16px;flex-wrap:wrap} .srch{position:relative;flex:1;min-width:230px} .srch svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px; color:var(--muted);pointer-events:none} .srch input{width:100%;background:var(--cream);border:1px solid var(--line);border-radius:var(--r); padding:13px 16px 13px 42px;font-family:inherit;font-size:.94rem;color:var(--ink);transition:.2s;-webkit-appearance:none} .srch input:focus{outline:none;border-color:var(--forest);background:var(--white);box-shadow:0 0 0 3px rgba(23,94,77,.13)} .srch input::placeholder{color:#a3ada7} .res-n{font-size:.8rem;font-weight:700;color:var(--muted);white-space:nowrap} .res-n b{color:var(--forest)} .cats{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line)} /* .fcat e não .cat: a classe .cat já é usada nos cards de curso (.path .cat) */ .fcat{font-size:.78rem;font-weight:700;padding:9px 14px;border-radius:var(--r);border:1px solid var(--line); background:var(--cream);color:var(--muted);cursor:pointer;font-family:inherit;transition:.2s; display:inline-flex;align-items:center;gap:7px} .fcat:hover{border-color:var(--forest);color:var(--forest)} .fcat i{font-style:normal;font-size:.66rem;opacity:.6;font-weight:800} .fcat.on{background:var(--forest);border-color:var(--forest);color:var(--cream)} .fcat.on i{opacity:.75} .clist{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:20px; max-height:396px;overflow-y:auto;padding-right:6px;scrollbar-width:thin} @media(max-width:900px){.clist{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.clist{grid-template-columns:1fr;max-height:340px}} .clist::-webkit-scrollbar{width:6px} .clist::-webkit-scrollbar-thumb{background:rgba(23,94,77,.35);border-radius:9px} .clist:hover::-webkit-scrollbar-thumb{background:rgba(23,94,77,.55)} .ci{display:flex;align-items:center;gap:11px;padding:13px 14px;border:1px solid var(--line);border-radius:12px; background:var(--cream);text-decoration:none;color:inherit;transition:.2s} .ci:hover{background:var(--forest);border-color:var(--forest);transform:translateX(3px)} .ci .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--mint)} .ci .nm{font-size:.86rem;font-weight:700;line-height:1.3;flex:1;letter-spacing:-.01em} .ci:hover .nm{color:var(--cream)} .ci .nm mark{background:rgba(230,143,55,.35);color:inherit;border-radius:3px;padding:0 1px} .ci .ca{font-size:.66rem;color:var(--muted);font-weight:700;white-space:nowrap} .ci:hover .ca{color:var(--mint)} .ci .go{width:14px;height:14px;flex-shrink:0;opacity:0;transform:translateX(-4px);transition:.2s;color:var(--mint)} .ci:hover .go{opacity:1;transform:none} @media(max-width:900px){.ci .ca{display:none}} .empty{grid-column:1/-1;text-align:center;padding:34px 20px} .empty p{font-size:.94rem;color:var(--muted);margin-bottom:16px} .empty b{color:var(--ink)} .exp-foot{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center; justify-content:space-between;gap:14px;flex-wrap:wrap} .exp-foot p{font-size:.85rem;color:var(--muted);max-width:52ch} .exp-foot p b{color:var(--ink)} .badge-count{display:inline-flex;align-items:center;gap:8px;background:rgba(98,218,150,.16);color:var(--forest-d); font-size:.78rem;font-weight:800;padding:9px 15px;border-radius:var(--r);margin-bottom:18px} /* ========================================================= TABELA COMPARATIVA Grade em vez de : empilha no mobile sem scroll horizontal, que é onde a maior parte do público está. ========================================================= */ .tbl-comp{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--white)} .tc-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;border-bottom:1px solid var(--line)} .tc-row:last-child{border-bottom:0} .tc-row > div{padding:15px 18px;font-size:.92rem;display:flex;align-items:center} .tc-row > div:first-child{color:var(--ink);font-weight:700;background:var(--cream);border-right:1px solid var(--line)} .tc-row > div:nth-child(2){color:var(--muted);border-right:1px solid var(--line)} .tc-head > div{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; background:var(--cream-2);color:var(--muted);padding:13px 18px} .tc-head > div:first-child{background:var(--cream-2)} .tc-head > div:last-child{color:var(--forest)} .tc-row .win{font-weight:700;color:var(--forest-d);background:rgba(98,218,150,.09)} @media(max-width:640px){ .tc-row{grid-template-columns:1fr 1fr} .tc-row > div:first-child{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line); font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:10px 14px} .tc-head{display:none} /* sem cabeçalho no mobile, cada célula precisa se identificar */ .tc-row > div:nth-child(2)::before{content:"Técnico: ";font-weight:700;color:var(--ink);margin-right:5px} .tc-row > div:nth-child(3)::before{content:"Tecnólogo: ";font-weight:700;margin-right:5px} .tc-row > div:nth-child(2),.tc-row > div:nth-child(3){font-size:.82rem;padding:12px 14px;align-items:flex-start;flex-direction:column;gap:2px} } /* ---------- tabela das 4 modalidades (5 colunas) ---------- */ .tbl-mod{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--white)} .tm-row{display:grid;grid-template-columns:1.15fr repeat(4,1fr);border-bottom:1px solid var(--line)} .tm-row:last-child{border-bottom:0} .tm-row > div{padding:14px 16px;font-size:.86rem;color:var(--muted);border-right:1px solid var(--line); display:flex;align-items:center} .tm-row > div:last-child{border-right:0} .tm-row > div:first-child{color:var(--ink);font-weight:700;background:var(--cream)} .tm-head > div{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase; background:var(--cream-2);color:var(--forest);padding:13px 16px} .tm-row .hi{color:var(--forest-d);font-weight:700;background:rgba(98,218,150,.08)} /* no mobile a tabela vira cartões empilhados: 5 colunas em 360px é ilegível */ @media(max-width:860px){ .tm-head{display:none} .tm-row{grid-template-columns:1fr;border-bottom:0;padding:6px 0} .tm-row > div{border-right:0;border-bottom:1px solid var(--line);justify-content:space-between;gap:14px;text-align:right} .tm-row > div:first-child{background:var(--forest);color:var(--cream);font-size:.72rem; text-transform:uppercase;letter-spacing:.1em;justify-content:flex-start;text-align:left} .tm-row > div:not(:first-child)::before{font-weight:700;color:var(--ink);text-align:left} .tm-row > div:nth-child(2)::before{content:"Técnico→Tecnólogo"} .tm-row > div:nth-child(3)::before{content:"Graduação"} .tm-row > div:nth-child(4)::before{content:"2ª Graduação"} .tm-row > div:nth-child(5)::before{content:"Pós"} .tm-row > div:last-child{border-bottom:0} } /* ========================================================= QUALIFICADOR DE APROVEITAMENTO (aproveitamento.js) ========================================================= */ .apro{background:var(--white);border:1px solid var(--line);border-radius:30px;padding:44px; box-shadow:0 26px 66px -26px rgba(21,40,35,.24);margin-top:44px} @media(max-width:600px){.apro{padding:28px 20px;border-radius:24px}} .apro-h{max-width:56ch;margin-bottom:28px} .apro-h h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:10px} .apro-h p{color:var(--muted);font-size:.96rem;line-height:1.6} .apro-passo{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--mint-s);margin-bottom:14px} .apro-ops{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} @media(max-width:860px){.apro-ops{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.apro-ops{grid-template-columns:1fr}} .apro-op{display:flex;align-items:flex-start;gap:13px;text-align:left;padding:16px 17px;border-radius:16px; border:1px solid var(--line);background:var(--cream);cursor:pointer;font-family:inherit;transition:.2s;width:100%} .apro-op:hover{border-color:var(--forest);background:var(--white);transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(21,40,35,.16)} .apro-op.on{border-color:var(--forest);background:var(--forest);box-shadow:0 12px 30px -10px rgba(23,94,77,.5)} .apro-ic{font-size:1.3rem;line-height:1;flex-shrink:0;margin-top:1px} .apro-tx{min-width:0} .apro-tx b{display:block;font-size:.94rem;font-weight:700;letter-spacing:-.015em;color:var(--ink)} .apro-tx em{display:block;font-style:normal;font-size:.76rem;color:var(--muted);margin-top:3px;line-height:1.45} .apro-op.on .apro-tx b{color:var(--cream)} .apro-op.on .apro-tx em{color:rgba(251,249,244,.66)} .apro-saida{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,.2,1)} .apro-saida.show{max-height:1200px} @media(prefers-reduced-motion:reduce){.apro-saida{transition:none}} .apro-res{margin-top:26px;padding-top:26px;border-top:1px solid var(--line)} .apro-res h4{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;margin-bottom:8px} .apro-res h4 .ital{color:var(--forest)} .apro-res > p{color:var(--muted);font-size:.93rem;line-height:1.6;max-width:62ch} .apro-res > .btn{margin-top:20px} .apro-lista{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:20px} @media(max-width:660px){.apro-lista{grid-template-columns:1fr}} .apro-curso{display:flex;align-items:center;justify-content:space-between;gap:11px;padding:14px 16px; border:1px solid var(--line);border-radius:12px;background:var(--cream);text-decoration:none; color:var(--ink);font-size:.88rem;font-weight:700;letter-spacing:-.01em;transition:.2s} .apro-curso:hover{background:var(--forest);border-color:var(--forest);color:var(--cream);transform:translateX(3px)} .apro-curso svg{width:14px;height:14px;flex-shrink:0;opacity:.35;transition:.2s} .apro-curso:hover svg{opacity:1;color:var(--mint)} .apro-nota{margin-top:18px;font-size:.84rem;color:var(--muted);line-height:1.55;background:var(--cream-2); border-radius:12px;padding:14px 16px;max-width:66ch} .apro-nota b{color:var(--ink)} /* ========================================================= CATÁLOGO ESTÁTICO (/cursos/tecnologos.html) A lista vem no HTML por SEO; o catalogo.js só mostra/esconde. ========================================================= */ .cat-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px} .cat-tools .srch{flex:1;min-width:240px} .cat-wrap{margin-top:30px} .cat-bloco{margin-bottom:44px;scroll-margin-top:100px} .cat-bloco:last-child{margin-bottom:0} .cat-h{display:flex;align-items:center;gap:11px;margin-bottom:6px} .cat-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0} .cat-h h3{font-size:1.3rem;letter-spacing:-.025em} .cat-n{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted); background:var(--cream-2);padding:5px 10px;border-radius:var(--r);white-space:nowrap} .cat-d{font-size:.92rem;color:var(--muted);line-height:1.55;max-width:64ch;margin-bottom:18px} .cat-lista{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} @media(max-width:900px){.cat-lista{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.cat-lista{grid-template-columns:1fr}} /* o .ci já vem estilizado no bloco do explorador; aqui muda só o hover do link direto */ .cat-lista .ci .go{color:var(--mint)} /* ========================================================= SELO MEC NOTA 5 ========================================================= */ .mec{background:var(--forest);color:var(--cream)} .mec h2{margin-bottom:16px} .mec .lead{color:rgba(251,249,244,.72)} .mec-g{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center} @media(max-width:860px){.mec-g{grid-template-columns:1fr;gap:34px}} .mec-card{display:flex;flex-direction:column;align-items:center;gap:22px} .seal{position:relative;width:min(320px,78vw);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center; background:var(--cream);border-radius:50%;box-shadow:0 26px 64px -18px rgba(0,0,0,.5)} .seal-ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 26s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .seal-ring text{font-family:var(--sans);font-size:9.4px;font-weight:700;letter-spacing:.42px;fill:var(--forest)} .seal-core{display:flex;align-items:center;gap:9px;position:relative;z-index:2} .seal-core .five{font-family:var(--sans);font-size:5.2rem;font-weight:800;color:var(--forest);line-height:.82;letter-spacing:-.06em} .seal-core .lab{text-align:left} .seal-core .lab b{display:block;font-size:1.06rem;font-weight:800;color:var(--forest);line-height:1.06;letter-spacing:-.02em} .seal-core .lab .stars{color:var(--amber);font-size:.82rem;letter-spacing:2.5px;margin-top:5px} .seal-sub{font-size:.78rem;color:rgba(251,249,244,.55);text-align:center;max-width:30ch} @media(prefers-reduced-motion:reduce){.seal-ring{animation:none}} @media(max-width:520px){.seal-core .five{font-size:4.1rem}.seal-core .lab b{font-size:.86rem}} /* ========================================================= EQUIPE O quadrado da foto usa o truque padding-top:100% (não `aspect-ratio`) de propósito: funciona em qualquer navegador, sem depender de nenhuma feature CSS mais nova carregar certo. ========================================================= */ .team-g{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px} @media(max-width:900px){.team-g{grid-template-columns:repeat(2,1fr)}} .tm{background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden; transition:transform .3s,box-shadow .3s} .tm:hover{transform:translateY(-5px);box-shadow:0 20px 44px -14px rgba(21,40,35,.18)} .tm-ph{position:relative;width:100%;padding-top:125%;overflow:hidden;background:var(--forest-d)} .tm-ph .av{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%; display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)} .tm:hover .tm-ph .av{transform:scale(1.045)} .tm .info{padding:16px 18px 18px} .tm .info .nm{font-weight:700;font-size:.98rem;letter-spacing:-.01em} .tm .info .rl{font-size:.79rem;color:var(--muted);margin-top:3px} /* nome/função ainda não confirmados pela direção — sinaliza "em breve" sem parecer card quebrado (itálico + opacidade, não um texto de erro) */ .tm .info .nm.pendente{font-style:italic;color:var(--muted);font-weight:600} .tm .info .rl.pendente{opacity:.7} /* card em destaque (contador da equipe, último item da grade) */ .tm.tm-count{display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:28px 20px;background:var(--forest);border-color:var(--forest)} .tm.tm-count:hover{transform:translateY(-5px);box-shadow:0 20px 44px -14px rgba(23,94,77,.4)} .tm.tm-count .num{color:var(--mint);font-size:2.4rem;font-weight:800;letter-spacing:-.04em;line-height:1} .tm.tm-count .lbl{color:var(--cream);font-weight:700;font-size:.96rem;margin-top:8px} .tm.tm-count .sub{color:rgba(251,249,244,.65);font-size:.8rem;margin-top:8px;line-height:1.5} /* ========================================================= BLOCO DA DIREÇÃO (página O Polo) Duas figuras empilhadas em fluxo normal (sem position:absolute escapando do container) — a foto de prêmios é uma segunda figura abaixo do retrato, não sobreposta. É mais simples e nunca "escapa" pra cima do texto se algo no layout mudar de tamanho. ========================================================= */ .dir{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} @media(max-width:860px){.dir{grid-template-columns:1fr;gap:32px}} .dir-visual{display:flex;flex-direction:column;gap:14px} .dir-photo{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:var(--forest); box-shadow:0 26px 60px -20px rgba(21,40,35,.36)} .dir-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block} .dir-photo::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(15,72,58,.82) 0%,rgba(15,72,58,.15) 34%,transparent 55%)} .dir-photo-tag{position:absolute;left:22px;right:22px;bottom:18px;z-index:2;color:var(--cream); font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .dir-proof{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/10} .dir-proof img{width:100%;height:100%;object-fit:cover;display:block} .dir-proof::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(15,72,58,.9) 0%,transparent 48%)} .dir-proof figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;font-size:.72rem; font-weight:700;color:var(--cream);z-index:2} .dir-tx{padding-top:6px} .dir-eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase; color:var(--mint-s);margin-bottom:10px} .dir-nome{font-size:1.7rem;font-weight:700;letter-spacing:-.025em;line-height:1.1} .dir-cargo{font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--forest);margin-top:6px} .dir-fala{border-left:3px solid var(--mint);padding:2px 0 2px 24px;margin:28px 0} .dir-fala p{font-family:var(--serif);font-size:1.45rem;line-height:1.38;color:var(--ink);letter-spacing:-.01em} .dir-sub{color:var(--muted);font-size:.98rem;line-height:1.65;margin-bottom:26px;max-width:52ch} /* ========================================================= GALERIA DA UNIDADE ========================================================= */ .gal{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-top:44px} @media(max-width:760px){.gal{grid-template-columns:1fr}} .gal .col{display:grid;gap:14px} .gal figure{position:relative;border-radius:20px;overflow:hidden;background:var(--forest)} .gal .big{aspect-ratio:4/3.2} .gal .sm{aspect-ratio:16/9} .gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)} .gal figure:hover img{transform:scale(1.06)} .gal figcaption{position:absolute;left:0;bottom:0;width:100%;padding:16px 18px;color:var(--cream);font-size:.86rem; font-weight:700;background:linear-gradient(to top,rgba(15,72,58,.9),transparent)} @media(prefers-reduced-motion:reduce){.gal figure:hover img{transform:none}} /* ========================================================= DEPOIMENTOS (estilo conversa de WhatsApp) ========================================================= */ .deps{background:var(--ink);color:var(--cream)} .deps h2{color:var(--cream)} .deps .lead{color:rgba(251,249,244,.6)} .chat-g{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px} @media(max-width:900px){.chat-g{grid-template-columns:1fr}} .chat{background:rgba(251,249,244,.05);border:1px solid rgba(251,249,244,.12);border-radius:22px;padding:24px} .chat-top{display:flex;align-items:center;gap:11px;margin-bottom:16px} .chat-av{width:36px;height:36px;border-radius:50%;background:var(--mint);color:var(--ink);display:flex; align-items:center;justify-content:center;font-weight:800;font-size:.85rem;flex-shrink:0} .chat-top .nm{font-size:.88rem;font-weight:700} .chat-top .tm2{font-size:.7rem;color:rgba(251,249,244,.45)} .bub{background:rgba(98,218,150,.14);border-radius:4px 16px 16px 16px;padding:14px 16px;font-size:.9rem; color:rgba(251,249,244,.9);line-height:1.5;margin-bottom:9px} .bub:last-of-type{margin-bottom:0} .chat .stars2{color:var(--amber);font-size:.8rem;letter-spacing:2px;margin-top:14px} /* ========================================================= CARD GRANDE DO GOOGLE (página de depoimentos) ========================================================= */ .gbig{display:grid;grid-template-columns:.55fr 1.45fr;gap:0;background:var(--white);border:1px solid var(--line); border-radius:26px;overflow:hidden;box-shadow:0 24px 60px -24px rgba(21,40,35,.24)} @media(max-width:760px){.gbig{grid-template-columns:1fr}} .gbig-nota{background:var(--forest);color:var(--cream);padding:44px 32px;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center} .gbig-num{font-size:4.6rem;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--mint)} .gbig-stars{color:var(--amber);font-size:1.15rem;letter-spacing:3px;margin-top:8px} .gbig-qtd{font-size:.8rem;font-weight:700;color:rgba(251,249,244,.6);margin-top:10px} .gbig-tx{padding:38px 40px} @media(max-width:600px){.gbig-tx{padding:26px 22px}.gbig-nota{padding:32px 22px}} .gbig-h{display:flex;align-items:center;gap:11px;margin-bottom:18px} .gbig-h .n{font-size:.95rem;font-weight:700} .gbig-h .s{font-size:.76rem;color:var(--muted)} .gbig-tx p{color:var(--muted);font-size:.98rem;line-height:1.65;max-width:58ch} .gbig-tx p b{color:var(--ink)} .gbig-tx .btn{margin-top:22px} /* ========================================================= FAQ ========================================================= */ .faq-list{max-width:820px;margin:44px auto 0} .fq{background:var(--white);border:1px solid var(--line);border-radius:18px;margin-bottom:12px;overflow:hidden;transition:.25s} .fq[open]{border-color:rgba(23,94,77,.4);box-shadow:0 14px 34px -12px rgba(21,40,35,.14)} .fq summary{padding:22px 26px;cursor:pointer;font-weight:700;font-size:1.02rem;display:flex;align-items:center; justify-content:space-between;gap:16px;list-style:none;letter-spacing:-.015em} .fq summary::-webkit-details-marker{display:none} .fq summary::after{content:"+";font-size:1.5rem;font-weight:400;color:var(--forest);transition:.25s;flex-shrink:0;line-height:1} .fq[open] summary::after{transform:rotate(45deg)} .fq .fa{padding:0 26px 24px;color:var(--muted);font-size:.95rem;line-height:1.6} .fq .fa b{color:var(--ink)} .fq .fa p + p{margin-top:10px} .fq .fa a{color:var(--forest);font-weight:700} /* ========================================================= LOCALIZAÇÃO ========================================================= */ .local{background:var(--cream-2)} .loc-g{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center} @media(max-width:860px){.loc-g{grid-template-columns:1fr;gap:32px}} .map{aspect-ratio:16/11;border-radius:24px;position:relative;overflow:hidden; box-shadow:0 24px 54px -16px rgba(21,40,35,.3);background:var(--forest)} .map img,.map iframe{width:100%;height:100%;object-fit:cover;border:0;display:block} .addr{list-style:none;margin:26px 0} .addr li{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.94rem;align-items:flex-start} .addr li:last-child{border-bottom:0} .addr li svg{width:17px;height:17px;color:var(--forest);flex-shrink:0;margin-top:3px} .addr li b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:2px} /* ========================================================= CANAIS DE CONTATO ========================================================= */ .canais{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} @media(max-width:760px){.canais{grid-template-columns:1fr}} .canal{display:flex;align-items:center;gap:18px;padding:26px;border:1px solid var(--line);border-radius:22px; background:var(--white);text-decoration:none;color:inherit;transition:.3s;position:relative} a.canal:hover{transform:translateY(-4px);box-shadow:0 22px 50px -16px rgba(21,40,35,.2);border-color:rgba(23,94,77,.35)} .canal-ic{width:52px;height:52px;border-radius:15px;background:rgba(23,94,77,.08);color:var(--forest); display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.3s} .canal-ic svg{width:24px;height:24px} a.canal:hover .canal-ic{background:var(--forest);color:var(--cream)} .canal-tx{min-width:0;flex:1} .canal-tx b{display:block;font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)} .canal-tx strong{display:block;font-size:1.14rem;font-weight:700;letter-spacing:-.02em;margin:4px 0 3px} .canal-tx em{display:block;font-style:normal;font-size:.82rem;color:var(--muted);line-height:1.45} .canal-go{position:absolute;right:26px;bottom:22px;font-size:.76rem;font-weight:700;color:var(--forest); opacity:0;transform:translateX(-6px);transition:.25s} a.canal:hover .canal-go{opacity:1;transform:none} @media(max-width:520px){.canal-go{display:none}} /* o WhatsApp é o canal que converte: ganha destaque */ .canal-zap{background:var(--forest);border-color:var(--forest);color:var(--cream)} .canal-zap .canal-ic{background:rgba(98,218,150,.2);color:var(--mint)} a.canal-zap:hover .canal-ic{background:var(--mint);color:var(--ink)} .canal-zap .canal-tx b{color:var(--mint)} .canal-zap .canal-tx em{color:rgba(251,249,244,.62)} .canal-zap .canal-go{color:var(--mint)} .canal-info{background:var(--cream-2);border-style:dashed} /* Linhas de atendimento (todos os números, cada um com WhatsApp + Ligar) */ .fones{margin-top:14px;border:1px solid var(--line);border-radius:22px;padding:22px 26px;background:var(--white)} .fones-h{font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .fones-list{list-style:none} .fone{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; padding:14px 0;border-bottom:1px solid var(--line)} .fone:last-child{padding-bottom:0;border-bottom:0} .fone-num{font-size:1.14rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)} .fone-acts{display:flex;gap:8px} .fone-acts a{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700; padding:9px 16px;border-radius:999px;text-decoration:none;transition:transform .2s ease,background .2s ease} .fone-acts svg{width:16px;height:16px} .fone-acts a[data-cta="linha-zap"]{background:var(--forest);color:var(--cream)} .fone-acts a[data-cta="linha-zap"]:hover{background:var(--forest-d);transform:translateY(-2px)} .fone-acts a[data-cta="linha-call"]{background:rgba(23,94,77,.08);color:var(--forest)} .fone-acts a[data-cta="linha-call"]:hover{background:rgba(23,94,77,.15);transform:translateY(-2px)} @media(max-width:420px){.fone{justify-content:flex-start}.fone-acts{width:100%}.fone-acts a{flex:1;justify-content:center}} /* ========================================================= GRADE DE LINKS (portal do aluno) ========================================================= */ .links-g{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} @media(max-width:860px){.links-g{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.links-g{grid-template-columns:1fr}} .lk{display:block;padding:20px 22px;background:var(--white);border:1px solid var(--line);border-radius:16px; text-decoration:none;color:inherit;transition:.22s;position:relative} .lk:hover{border-color:var(--forest);transform:translateY(-3px);box-shadow:0 16px 34px -12px rgba(21,40,35,.18)} .lk::after{content:"↗";position:absolute;top:18px;right:20px;font-size:.86rem;color:var(--muted);transition:.22s} .lk:hover::after{color:var(--forest);transform:translate(2px,-2px)} .lk-n{display:block;font-weight:700;font-size:.98rem;letter-spacing:-.015em;padding-right:22px} .lk-d{display:block;font-size:.82rem;color:var(--muted);margin-top:4px;line-height:1.45} /* o e-MEC ganha destaque: é o link que prova o que o site inteiro afirma */ .lk-mec{background:rgba(98,218,150,.12);border-color:rgba(98,218,150,.4)} .lk-mec:hover{background:rgba(98,218,150,.2)} /* ========================================================= FORMULÁRIO ========================================================= */ .form-g{display:grid;grid-template-columns:.95fr 1.05fr;gap:50px;align-items:start} @media(max-width:900px){.form-g{grid-template-columns:1fr;gap:36px}} .form-card{background:var(--white);border:1px solid var(--line);border-radius:26px;padding:38px; box-shadow:0 24px 60px -22px rgba(21,40,35,.22)} @media(max-width:600px){.form-card{padding:26px 20px}} .hp{position:absolute!important;left:-9999px!important;opacity:0!important;pointer-events:none} .fld{margin-bottom:18px} .fld label{display:block;font-weight:700;font-size:.9rem;margin-bottom:7px} .fld .req{color:var(--mint-s)} .fld .opt{font-weight:500;color:var(--muted);font-size:.78rem} .fld input,.fld select,.fld textarea{ width:100%;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:13px 15px; font-family:inherit;font-size:.96rem;color:var(--ink);transition:.18s;-webkit-appearance:none} .fld select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526F69' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:15px;padding-right:40px} .fld textarea{resize:vertical;line-height:1.55;min-height:96px} .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--forest); background:var(--white);box-shadow:0 0 0 3px rgba(23,94,77,.13)} .fld input::placeholder,.fld textarea::placeholder{color:#a3ada7} .lgpd{display:flex;gap:11px;align-items:flex-start;margin:22px 0;font-size:.85rem; color:var(--muted);line-height:1.5;cursor:pointer} .lgpd input{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--forest);cursor:pointer} .lgpd a{color:var(--forest);font-weight:700} .form-card .btn{width:100%} .form-erro{background:rgba(230,143,55,.12);border:1px solid rgba(230,143,55,.4);color:#8a4d0b; border-radius:12px;padding:12px 14px;font-size:.86rem;font-weight:600;margin-bottom:14px} .form-nota{margin-top:14px;text-align:center;font-size:.83rem;color:var(--muted)} .form-nota a{color:var(--forest);font-weight:700} /* ========================================================= CTA FINAL ========================================================= */ .cta{background:var(--forest);color:var(--cream);text-align:center;padding:110px 0} .cta h2{font-size:clamp(2.1rem,5vw,3.6rem);max-width:17ch;margin:0 auto 20px} .cta h2 .ital{color:var(--mint)} .cta .lead{color:rgba(251,249,244,.72);margin:0 auto 34px;text-align:center} .cta-b{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ========================================================= RODAPÉ ========================================================= */ footer{background:var(--ink);color:rgba(251,249,244,.6);padding:60px 0 30px;font-size:.88rem} .f-g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px; border-bottom:1px solid rgba(251,249,244,.1)} @media(max-width:900px){.f-g{grid-template-columns:1fr 1fr;gap:32px}} @media(max-width:560px){.f-g{grid-template-columns:1fr;gap:28px}} footer .logo{margin-bottom:12px} footer .logo img{filter:brightness(0) invert(1);height:22px} footer .logo span{color:rgba(251,249,244,.5);border-left-color:rgba(251,249,244,.2)} footer h5{color:var(--cream);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px;font-weight:800} footer a{color:rgba(251,249,244,.6);text-decoration:none;display:block;padding:5px 0;transition:.2s} footer a:hover{color:var(--mint)} .f-about p{max-width:34ch;line-height:1.6;margin-bottom:14px} .f-social{display:flex;gap:10px;margin-top:6px} .f-social a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(251,249,244,.18); display:flex;align-items:center;justify-content:center;padding:0} .f-social a:hover{background:var(--mint);border-color:var(--mint)} .f-social svg{width:16px;height:16px} .f-social a:hover svg{color:var(--ink)} .f-bot{padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-size:.78rem;color:rgba(251,249,244,.4)} .f-made{display:inline-flex;align-items:center;gap:6px} .f-heart{color:#ff5a5f;display:inline-flex;align-items:center} .f-heart svg{width:13px;height:13px} .f-made .f-weezy{display:inline-flex;align-items:center;padding:0} .f-made .f-weezy img{display:block;border-radius:5px;transition:transform .2s ease} .f-made .f-weezy:hover img{transform:translateY(-1px) scale(1.08)} .f-legal{max-width:none;line-height:1.6} /* em tela larga, reserva a faixa da direita (crédito "desenvolvido por") para o texto legal quebrar antes de chegar embaixo dele */ @media(min-width:820px){.f-legal{max-width:calc(100% - 210px)}} /* ========================================================= ÍCONE DE SUCESSO (página /obrigado) ========================================================= */ .ok-ic{width:78px;height:78px;border-radius:50%;background:var(--mint);color:var(--ink); display:flex;align-items:center;justify-content:center;margin:0 auto 26px; box-shadow:0 18px 44px -10px rgba(98,218,150,.7);animation:okPop .5s cubic-bezier(.2,1.4,.4,1) both} .ok-ic svg{width:36px;height:36px} @keyframes okPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}} @media(prefers-reduced-motion:reduce){.ok-ic{animation:none}} /* ========================================================= BANNER DE COOKIES (LGPD) Fica acima do WhatsApp flutuante (z-index 101 > 99) e some depois da escolha. Recusar é tão fácil quanto aceitar — a LGPD exige, e banner com "recusar" escondido é multa esperando acontecer. ========================================================= */ .ck{ position:fixed;left:20px;bottom:20px;z-index:101;max-width:440px; background:var(--white);border:1px solid var(--line);border-radius:20px;padding:24px; box-shadow:0 24px 60px -14px rgba(21,40,35,.34); transform:translateY(140%);transition:transform .5s cubic-bezier(.2,.7,.2,1) } .ck.show{transform:none} .ck h4{font-size:1rem;font-weight:800;letter-spacing:-.02em;margin-bottom:8px} .ck p{font-size:.86rem;color:var(--muted);line-height:1.55} .ck p a{color:var(--forest);font-weight:700} .ck-b{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap} .ck-b .btn{padding:12px 20px;font-size:.85rem;flex:1;min-width:128px} @media(max-width:600px){ .ck{left:12px;right:12px;bottom:12px;max-width:none;padding:20px} /* com o banner aberto, o flutuante do WhatsApp sai da frente */ body:has(.ck.show) .float{opacity:0;pointer-events:none} } /* ========================================================= BREADCRUMB ========================================================= */ /* o breadcrumb vive DENTRO do .hero-in agora (ver nota abaixo) — por isso não carrega padding-top próprio: quem afasta tudo da nav fixa é o hero-in */ .crumb{font-size:.8rem;color:var(--muted);font-weight:600;margin-bottom:28px} /* Posts do blog não têm .hero-in: o breadcrumb é filho direto do e ficaria atrás da nav fixa. Aqui ele ganha a folga da nav; nas outras páginas o crumb vive dentro de .hero-in (que já compensa) e não é atingido. */ body > .crumb{padding-top:calc(var(--nav-h) + 26px)} .crumb ol{list-style:none;display:flex;gap:8px;flex-wrap:wrap;align-items:center} .crumb a{color:var(--muted);text-decoration:none} .crumb a:hover{color:var(--forest)} .crumb li + li::before{content:"/";margin-right:8px;opacity:.45} .crumb [aria-current="page"]{color:var(--ink)} /* ========================================================= HERO INTERNO (páginas que não são a home) O breadcrumb (.crumb) é o primeiro filho de dentro de .hero-in .wrap — NÃO um