/* Começar de Novo — site institucional
   Paleta e tipografia: design-projeto-comecar-de-novo.md (Cambria + Calibri, verdes da marca).
   Público 40+: corpo nunca abaixo de 17px, contraste AA, botões grandes. */

:root{
  --profundo:#0A3B36;
  --escuro:#0D4A44;
  --marca:#167A6E;
  --medio:#BFE0DA;
  --claro:#D8E6E3;
  --nevoa:#E9F3F1;
  --grafite:#1F2D2B;
  --cinza:#5B6E6A;
  --dourado:#D9A441;
  --ambar:#9A6B10;
  --branco:#FFFFFF;
  --zap:#1FA855;

  --t:Cambria,Georgia,"Times New Roman",serif;
  --c:Calibri,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --raio:14px;
  --sombra:0 10px 28px rgba(10,59,54,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--c);font-size:18px;line-height:1.6;color:var(--grafite);background:var(--branco)}
img{max-width:100%;height:auto;display:block}
a{color:var(--marca)}
h1,h2,h3{font-family:var(--t);font-weight:700;line-height:1.15;margin:0;text-wrap:balance}
p{margin:0}
.container{max-width:1160px;margin:0 auto;padding:0 20px}
.pular{position:absolute;left:-9999px}
.pular:focus{left:12px;top:12px;z-index:100;background:#fff;padding:10px 14px}
:focus-visible{outline:3px solid var(--dourado);outline-offset:3px}

/* ---------- topo ---------- */
.topo{background:var(--profundo);position:sticky;top:0;z-index:50}
.topo .container{display:flex;align-items:center;gap:20px;min-height:68px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--t);font-size:22px;margin-right:auto}
.logo img{width:30px;height:30px}
.menu{display:flex;align-items:center;gap:6px}
.menu a,.menu summary{color:var(--medio);text-decoration:none;font-size:17px;padding:8px 12px;border-radius:8px;cursor:pointer;list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";display:inline-block;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 0 4px 9px}
.menu a:hover,.menu summary:hover{color:#fff;background:rgba(255,255,255,.08)}
.menu a[aria-current="page"],.menu details.ativo>summary{color:#fff;font-weight:700}
.menu details{position:relative}
.menu details>div{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border-radius:10px;box-shadow:var(--sombra);padding:8px;min-width:220px;display:flex;flex-direction:column}
.menu details>div a{color:var(--grafite);padding:10px 12px}
.menu details>div a:hover{background:var(--nevoa);color:var(--escuro)}
.menu details>div a[aria-current="page"]{color:var(--marca)}
.abre-menu{display:none;background:none;border:2px solid var(--medio);color:#fff;border-radius:8px;font:inherit;font-size:16px;padding:6px 12px;cursor:pointer}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;text-align:center;
     font-family:var(--c);font-weight:700;font-size:18px;line-height:1.25;padding:15px 26px;min-height:56px;border-radius:10px;border:2px solid transparent;cursor:pointer}
.btn svg{width:22px;height:22px;flex:none}
.btn-ouro{background:var(--dourado);color:var(--profundo)}
.btn-ouro:hover{background:#c99536}
.btn-verde{background:var(--marca);color:#fff}
.btn-verde:hover{background:#12655b}
.btn-zap{background:var(--zap);color:#fff}
.btn-zap:hover{background:#198f48}
.btn-contorno{background:#fff;color:var(--escuro);border-color:var(--marca)}
.btn-contorno:hover{background:var(--nevoa)}
.btn-claro{background:transparent;color:#fff;border-color:var(--medio)}
.btn-claro:hover{background:rgba(255,255,255,.1)}
.btn[aria-disabled="true"]{background:var(--claro);color:var(--cinza);cursor:default;border-color:transparent}

/* ---------- topo de página com foto ---------- */
.hero{position:relative;color:#fff;background:var(--profundo) center/cover no-repeat;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,59,54,.92) 0%,rgba(10,59,54,.78) 45%,rgba(10,59,54,.25) 100%)}
.hero.lado-direito::before{background:linear-gradient(270deg,rgba(10,59,54,.94) 0%,rgba(10,59,54,.8) 45%,rgba(10,59,54,.2) 100%)}
.hero .container{position:relative;padding-top:72px;padding-bottom:72px}
.hero.lado-direito .conteudo{margin-left:auto}
.hero .conteudo{max-width:600px}
.hero h1{font-size:clamp(32px,4.6vw,52px);margin-bottom:14px}
.hero h1 .ouro{color:var(--dourado)}
.hero p{font-size:20px;color:#E4F1EE}
.hero .acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* fotos de fundo ficam aqui, não em style="", para a política de segurança (CSP) não precisar liberar estilo inline */
.foto-home{background-image:url(/img/hero-home.webp)}

.hero-home{text-align:center}
.hero-home::before{background:rgba(10,59,54,.72)}
.hero-home .container{padding-top:84px;padding-bottom:84px;display:flex;flex-direction:column;align-items:center}
.hero-home img.folha{width:110px;height:auto;margin-bottom:18px}
.hero-home h1{font-size:clamp(40px,6vw,64px)}
.hero-home .frase{font-style:italic;font-size:21px;color:#E4F1EE;margin-top:6px}
.hero-home .chamada{font-style:italic;font-weight:700;font-size:22px;color:var(--dourado);margin-top:18px}

/* ---------- seções ---------- */
.sec{padding:64px 0}
.sec.nevoa{background:var(--nevoa)}
.sec.verde{background:var(--marca);color:#fff}
.sec.profundo{background:var(--profundo);color:#fff}
.sec h2{font-size:clamp(28px,3.6vw,40px);color:var(--escuro);margin-bottom:14px}
.sec.verde h2,.sec.profundo h2{color:#fff}
.sec .destaque{color:var(--marca);font-family:var(--t);font-weight:700;font-size:clamp(24px,3vw,32px);margin-bottom:18px}
.sec .ouro-it{color:var(--dourado);font-style:italic;font-weight:700;font-size:22px;margin:4px 0 22px}
.texto{font-size:18.5px;color:var(--grafite)}
.texto p+p{margin-top:14px}
.sec.verde .texto,.sec.profundo .texto{color:#E4F1EE}

.duas{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.duas.inverte{grid-template-columns:.8fr 1.2fr}
/* sem isso, o trilho do carrossel estica a coluna e a página vaza para o lado no celular */
.duas>*,.carrossel{min-width:0}
.mt{margin-top:28px}
.foto{border-radius:var(--raio);box-shadow:var(--sombra);width:100%;object-fit:cover}

/* benefícios */
.beneficios{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.beneficio{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--claro);border-radius:var(--raio);padding:18px}
.beneficio .ic{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.beneficio .ic svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.beneficio:nth-child(1) .ic{background:#ECE7F6;color:#5B4B8A}
.beneficio:nth-child(2) .ic{background:#FBF1DC;color:var(--ambar)}
.beneficio:nth-child(3) .ic{background:var(--nevoa);color:var(--marca)}
.beneficio h3{font-size:20px;color:var(--escuro)}
.beneficio p{font-size:16.5px;color:var(--cinza)}

/* ---------- carrossel ---------- */
.carrossel{position:relative}
.trilho{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--raio);box-shadow:var(--sombra)}
.trilho::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;margin:0;background:#fff}
.slide img{width:100%;aspect-ratio:16/9;object-fit:cover}
.slide figcaption{padding:12px 16px;font-size:16.5px;color:var(--grafite);background:#fff}
.pontos{display:flex;justify-content:center;gap:10px;margin-top:14px}
.pontos button{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;background:transparent;padding:0;cursor:pointer;color:inherit;opacity:.7}
.pontos button[aria-current="true"]{background:currentColor;opacity:1}
/* setas na mesma linha dos pontos, nas pontas: em cima da imagem elas cobriam o título do banner */
.setas{position:absolute;left:0;right:0;bottom:-8px;display:flex;justify-content:space-between;pointer-events:none}
.setas button{pointer-events:auto;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--escuro);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2)}

/* ---------- cartões de curso ---------- */
.cursos{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.cursos.dois{grid-template-columns:repeat(2,minmax(0,360px));justify-content:center}
.curso{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.curso img{border-radius:var(--raio);box-shadow:0 8px 24px rgba(0,0,0,.25);width:100%;max-width:300px;aspect-ratio:447/546;object-fit:cover;background:#fff}
/* o título já está desenhado no cartão; fica em texto só para leitor de tela e buscador */
.curso h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.curso p{color:#E4F1EE;font-size:17px;flex:1}
.curso .btn{min-width:200px}

/* ---------- contato ---------- */
.contato-hero{background:var(--profundo);color:#fff;text-align:center;padding:64px 20px 120px}
.contato-hero h1{font-size:clamp(32px,4.6vw,46px);margin-bottom:10px}
.contato-hero p{color:var(--medio);font-size:19px}
.cartoes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:-80px;position:relative}
.cartao{background:#fff;border-radius:var(--raio);box-shadow:var(--sombra);padding:28px 24px;display:flex;flex-direction:column;gap:12px;border-top:5px solid var(--marca)}
.cartao.empresa{border-top-color:var(--dourado)}
.cartao img{width:60px;height:60px}
.cartao h2{font-size:23px;color:var(--grafite)}
.cartao p{color:var(--cinza);flex:1}
.cartoes{margin-bottom:64px}

/* ---------- rodapé ---------- */
.rodape{background:#F2F4F3;color:var(--cinza);padding:28px 0;font-size:14.5px}
.rodape .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.redes{display:flex;gap:14px}
.redes a{width:46px;height:46px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.redes a:hover{box-shadow:0 3px 10px rgba(0,0,0,.15)}
.redes svg,.redes img{width:26px;height:26px}
.rodape p{max-width:620px}

/* ============================================================
   HOME EM TELAS — cada seção ocupa a janela e a seta leva à próxima.
   O encaixe (scroll-snap) só vale em tela grande: no celular o conteúdo
   passa da altura da janela e o encaixe prenderia a rolagem.
   ============================================================ */
html.home-telas{scroll-padding-top:68px}
.tela{position:relative;display:flex;align-items:center;padding:56px 0 88px}
.tela>.container{width:100%}
.tela-titulo{text-align:center;margin-bottom:28px}
.tela-titulo h2{font-size:clamp(28px,3.4vw,40px);color:var(--escuro)}
.tela-titulo p{color:var(--cinza);margin-top:6px}

.seta-baixo{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:52px;height:52px;border-radius:50%;
            display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.95);box-shadow:0 4px 14px rgba(10,59,54,.25)}
.seta-baixo svg{width:26px;height:26px;fill:none;stroke:var(--escuro);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.seta-baixo:hover{transform:translateX(-50%) translateY(3px)}

.indice-telas{position:fixed;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:40}
.indice-telas a{width:13px;height:13px;border-radius:50%;border:2px solid var(--marca);background:rgba(255,255,255,.8)}
.indice-telas a[aria-current="true"]{background:var(--marca)}

/* tela 1 */
/* propriedades separadas: o atalho "background:" apagaria a foto que vem da classe .foto-home */
.tela-inicio{position:relative;color:#fff;background-color:var(--profundo);background-position:center;background-size:cover;background-repeat:no-repeat}
.tela-inicio::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,59,54,.9),rgba(10,59,54,.72))}
.tela-inicio .container{position:relative}
.tela-grade{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.marca-bloco{text-align:center}
.marca-bloco .folha{width:120px;margin:0 auto 14px}
.marca-bloco h1{font-size:clamp(40px,5vw,60px)}
.marca-bloco .frase{font-style:italic;font-size:20px;color:#E4F1EE;margin-top:8px}
.marca-bloco .chamada{font-style:italic;font-weight:700;font-size:21px;color:var(--dourado);margin-top:16px}
.proposito{background:#fff;color:var(--grafite);border-radius:18px;padding:32px 34px;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.proposito h2{font-size:clamp(24px,2.6vw,32px);color:var(--escuro)}
.proposito .destaque{font-family:var(--t);font-weight:700;font-size:clamp(22px,2.2vw,27px);color:var(--marca);margin:6px 0 12px}
.proposito p{font-size:17.5px}
.selos{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.selos li{display:flex;align-items:center;gap:8px;background:var(--nevoa);color:var(--escuro);font-weight:700;font-size:16px;padding:8px 14px;border-radius:999px}
.selos svg{width:20px;height:20px;fill:none;stroke:var(--marca);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* tela 2 */
.tela-cursos{background:var(--nevoa)}
.grade-cursos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.item-curso{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:14px;overflow:hidden;text-decoration:none;color:var(--grafite);
            box-shadow:0 4px 14px rgba(10,59,54,.08);transition:transform .15s,box-shadow .15s}
.item-curso:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(10,59,54,.16)}
.item-curso img{width:100%;aspect-ratio:16/9;object-fit:cover}
.item-curso b{font-family:var(--t);font-size:18px;padding:12px 14px 2px;line-height:1.2}
.item-curso .saiba{padding:4px 14px 14px;color:var(--marca);font-weight:700;font-size:15.5px;margin-top:auto}
.item-curso .saiba::after{content:" →"}
.selo-curso{position:absolute;top:10px;left:10px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.selo-curso.gratis{background:var(--marca);color:#fff}
.selo-curso.exclusivo{background:var(--dourado);color:var(--profundo)}
.selo-curso.breve{background:#fff;color:var(--cinza);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.item-curso.todos{background:var(--profundo);color:#fff;justify-content:center;padding:20px}
.item-curso.todos b{padding:0 0 6px;font-size:22px}
.item-curso.todos span{color:var(--medio);font-size:15.5px}
.item-curso.todos .saiba{padding:12px 0 0;color:var(--dourado);margin-top:0}

/* vitrines de Cursos Gratuitos e Cursos Pagos: mesma grade da Home, com descrição e botão */
.tela-vitrine{background:var(--nevoa)}
.tela-vitrine.escura{background:var(--profundo)}
.tela-titulo h1{font-size:clamp(28px,4.4vh,42px);color:var(--escuro)}
.tela-vitrine.escura .tela-titulo h1{color:#fff}
.tela-vitrine.escura .tela-titulo p{color:var(--medio)}
.tela-titulo .ouro{color:var(--marca)}
.tela-vitrine.escura .tela-titulo .ouro{color:var(--dourado)}
.item-curso h2{font-size:clamp(16px,2.4vh,19px);padding:clamp(8px,1.3vh,12px) 14px 0;color:var(--grafite);line-height:1.2}
.item-curso.chamada-exclusivos h2{color:#fff;font-size:clamp(20px,3vh,25px);padding:0 0 8px}
.vitrine{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.8vh,18px)}
/* nas vitrines o banner aparece inteiro: o nome do curso está desenhado nele e não pode ser cortado */
.vitrine .item-curso img{aspect-ratio:16/9;height:auto}
.vitrine .item-curso:hover{transform:none}
/* seis cursos: cartão deitado (banner inteiro à esquerda, texto à direita), 2 colunas x 3 linhas */
.vitrine.seis{grid-template-columns:repeat(2,1fr)}
.vitrine.seis .item-curso{display:grid;grid-template-columns:clamp(150px,29vh,250px) 1fr;grid-template-rows:1fr auto;align-items:start}
.vitrine.seis .item-curso img{grid-row:1/3;grid-column:1;width:100%}
.vitrine.seis .item-curso h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vitrine.seis .item-curso .desc{grid-column:2;padding:clamp(8px,1.4vh,12px) 14px 0}
.vitrine.seis .item-curso .acao{grid-column:2;padding:8px 14px clamp(8px,1.4vh,12px)}
.vitrine.seis .btn-sm{min-height:38px;padding:6px 14px;font-size:15.5px}
.item-curso .desc{padding:4px 14px 0;font-size:clamp(14.5px,2.1vh,16px);color:var(--cinza);line-height:1.4}
.item-curso .acao{padding:clamp(8px,1.4vh,12px) 14px clamp(10px,1.6vh,14px);margin-top:auto}
.btn-sm{min-height:42px;padding:8px 18px;font-size:16px;width:100%}
.item-curso.chamada-exclusivos{background:var(--profundo);color:#fff;justify-content:center;padding:22px}
.item-curso.chamada-exclusivos b{font-size:clamp(20px,3vh,24px);padding:0 0 6px}
.item-curso.chamada-exclusivos .desc{color:var(--dourado);font-style:italic;font-weight:700;padding:0 0 14px}
.item-curso.chamada-exclusivos .acao{padding:0;margin-top:0}

/* Quem ensina: cartão grande por pessoa. Sem foto, o retrato mostra as iniciais;
   quando a foto chegar, troque o <span> por <img> dentro de .retrato. */
.professores{display:grid;grid-template-columns:repeat(2,minmax(0,520px));justify-content:center;gap:24px}
.professor{background:#fff;border-radius:18px;box-shadow:0 6px 20px rgba(10,59,54,.1);padding:clamp(20px,3.4vh,32px);display:flex;gap:24px;align-items:flex-start}
.retrato{width:clamp(96px,17vh,150px);aspect-ratio:1;border-radius:50%;flex:none;overflow:hidden;
         background:var(--marca);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px var(--nevoa)}
.retrato.ouro{background:var(--dourado)}
.retrato span{font-family:var(--t);font-weight:700;font-size:clamp(34px,6vh,54px);color:#fff;letter-spacing:.02em}
.retrato.ouro span{color:var(--profundo)}
.retrato img{width:100%;height:100%;object-fit:cover}
.professor h2{font-size:clamp(24px,3.4vh,30px);color:var(--escuro);margin-bottom:10px}
.professor .papel{color:var(--marca);font-weight:700;margin:2px 0 10px}
.professor p{font-size:clamp(15.5px,2.2vh,17.5px)}
.professor .aulas{margin-top:12px;font-size:16px;color:var(--cinza)}
.professor .aulas a{font-weight:700}
.obj-texto .conheca{display:inline-block;margin-top:12px;font-weight:700}
.obj-texto .conheca::after{content:" →"}

/* tela 3 */
.obj-grade{display:grid;grid-template-columns:.8fr 1.1fr 1.1fr;gap:36px;align-items:start}
.obj-foto{border-radius:var(--raio);box-shadow:var(--sombra);width:100%;aspect-ratio:4/5;object-fit:cover}
.obj-texto h3{font-size:24px;color:var(--marca);margin-bottom:10px}
.obj-texto p{font-size:16.5px;line-height:1.55}
.obj-texto p+p{margin-top:10px}
.obj-texto .btn{margin-top:20px}
.obj-texto.missao{background:var(--nevoa);border-radius:var(--raio);padding:24px}

/* Computador: cada tela ocupa a janela, e os tamanhos acompanham a ALTURA da janela (vh).
   Assim cabe tanto num monitor grande quanto num notebook com zoom de 125% e barra do navegador. */
@media (min-width:1000px){
  html.home-telas{scroll-snap-type:y proximity}
  .tela{min-height:calc(100vh - 68px);min-height:calc(100svh - 68px);scroll-snap-align:start;
        padding:clamp(14px,3vh,44px) 0 clamp(66px,9.5vh,84px)}
  .tela.sem-seta{padding-bottom:clamp(14px,3vh,44px)}
  .tela-titulo{margin-bottom:clamp(10px,2.2vh,26px)}
  .tela-titulo h2{font-size:clamp(25px,4vh,40px)}
  .tela-titulo p{font-size:clamp(15.5px,2.2vh,18px)}
  .grade-cursos{gap:clamp(10px,1.8vh,18px)}
  .grade-cursos .item-curso img{aspect-ratio:auto;height:clamp(78px,14.5vh,170px);object-position:center 45%}
  .item-curso b{font-size:clamp(15.5px,2.3vh,18px);padding-top:clamp(6px,1.2vh,12px)}
  .item-curso .saiba{padding-bottom:clamp(8px,1.4vh,14px)}
  .proposito{padding:clamp(20px,3.6vh,32px) 34px}
  .proposito p{font-size:clamp(15.5px,2.25vh,17.5px)}
  .marca-bloco .folha{width:clamp(70px,14vh,120px)}
  .obj-foto{max-height:calc(100svh - 230px)}
  .obj-texto h3{font-size:clamp(20px,3vh,24px)}
  .obj-texto p{font-size:clamp(14.5px,2.15vh,16.5px);line-height:1.45}
  .obj-texto p+p{margin-top:clamp(5px,1vh,10px)}
  .obj-texto.missao{padding:clamp(14px,2.6vh,24px)}
}
@media (max-width:999px){
  .indice-telas{display:none}
  .grade-cursos,.vitrine{grid-template-columns:repeat(3,1fr)}
  .obj-grade{grid-template-columns:1fr 1fr}
  .obj-foto{display:none}
}
@media (max-width:860px){
  .tela{padding:40px 0 84px}
  .tela-grade{grid-template-columns:1fr;gap:28px}
  .marca-bloco .folha{width:84px}
  .proposito{padding:24px 20px}
  .grade-cursos{grid-template-columns:repeat(2,1fr);gap:12px}
  .vitrine,.vitrine.seis{grid-template-columns:1fr;gap:14px}
  /* celular: cartão deitado e compacto, para os dois professores caberem juntos na tela */
  .professores{grid-template-columns:1fr;gap:14px}
  .professor{flex-direction:row;align-items:center;gap:16px;padding:16px}
  .retrato{width:84px;box-shadow:0 0 0 4px var(--nevoa)}
  .retrato span{font-size:30px}
  .professor h2{font-size:21px;margin-bottom:4px}
  .professor p{font-size:15.5px;line-height:1.45}
  .vitrine.seis .item-curso{grid-template-columns:42% 1fr}
  .item-curso b{font-size:16px;padding:10px 10px 2px}
  .item-curso .saiba{padding:2px 10px 12px;font-size:14.5px}
  .obj-grade{grid-template-columns:1fr;gap:20px}
}

/* ---------- celular ---------- */
@media (max-width:860px){
  .abre-menu{display:inline-block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--profundo);flex-direction:column;align-items:stretch;padding:8px 16px 16px;gap:2px}
  .menu.aberto{display:flex}
  .menu details>div{position:static;box-shadow:none;background:rgba(255,255,255,.06);margin-top:4px}
  .menu details>div a{color:var(--medio)}
  .duas,.duas.inverte,.beneficios,.cursos,.cartoes{grid-template-columns:1fr}
  .cursos.dois{grid-template-columns:minmax(0,360px)}
  .duas.inverte .foto{order:-1}
  .hero::before,.hero.lado-direito::before{background:rgba(10,59,54,.84)}
  .hero .container{padding-top:52px;padding-bottom:52px}
  .sec{padding:48px 0}
  .btn{width:100%}
  .curso .btn{width:100%}
  .cartoes{margin-top:-70px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.trilho{scroll-behavior:auto}}