:root{
  --noite:#141013;      /* fundo escuro dos closes do feed */
  --noite-2:#1E171B;
  --rosa:#F8CED8;       /* rosa do logo */
  --malva:#8A6E79;      /* cinza-malva do logo [CONFIRMAR hex] */
  --texto:#F3E9EC;
  --apoio:#C4B1B9;
  --fio:#3A2E34;
  --g:20px;
  --titulo:"Syne",system-ui,sans-serif;
  --corpo:"Instrument Sans",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--noite);color:var(--texto);font:400 18px/1.55 var(--corpo);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,.grande,.nota-num,.aval-dest,.nomes button{font-family:var(--titulo);font-weight:700;letter-spacing:-.025em}
h2{font-size:34px;line-height:1.08}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--rosa);outline-offset:3px}

/* botões: cor chapada, enche de baixo pra cima no hover */
.botao{position:relative;display:flex;align-items:center;justify-content:center;min-height:58px;padding:0 24px;background:var(--rosa);color:var(--noite);font-weight:600;font-size:18px;text-decoration:none;overflow:hidden;isolation:isolate}
.botao::before{content:"";position:absolute;inset:0;background:#fff;transform:translateY(101%);transition:transform .35s cubic-bezier(.3,.7,.2,1);z-index:-1}
.botao:hover::before{transform:none}
.botao.escuro{background:var(--noite);color:#fff}
.botao.escuro::before{background:#3a2c33}

/* topo */
.topo{display:flex;justify-content:space-between;align-items:center;padding:16px var(--g);font-weight:600}
.marca{font-family:var(--titulo);font-size:19px;text-decoration:none;letter-spacing:-.01em}
.marca span{font-family:var(--corpo);font-weight:500;color:var(--apoio);letter-spacing:0}
.topo-zap{color:var(--rosa);text-decoration:none}

/* abertura */
.abre{padding:10px var(--g) 0}
h1{font-size:40px;line-height:1.02;letter-spacing:-.03em;padding-top:.06em}
.lead{margin-top:14px;color:var(--apoio);max-width:34em}

/* ===== o olho ===== */
.efeito{margin-top:26px}
.olho{position:relative;aspect-ratio:4/3;overflow:hidden;background:#000;touch-action:pan-y}
.olho img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.palp{position:absolute;top:0;left:-1%;width:102%;height:100%;z-index:2;transition:transform .26s cubic-bezier(.55,0,.75,.3)}
.palp svg{display:block;width:100%;height:100%;overflow:visible}
.pele{fill:var(--noite-2)}
.borda{fill:none;stroke:var(--rosa);stroke-width:1.6;vector-effect:non-scaling-stroke}
.palp.cima{z-index:3}
.cilios path{fill:none;stroke:var(--rosa);stroke-width:1.3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.palp.cima{transform:translateY(-100%)}
.palp.baixo{transform:translateY(100%)}
.olho.fechado .palp{transform:translateY(0)}
.olho:not(.fechado) .palp{transition:transform .38s cubic-bezier(.2,.75,.3,1)}
.real{position:absolute;right:12px;bottom:10px;z-index:1;font-size:15px;color:#fff;background:rgba(20,16,19,.55);padding:2px 8px}

.painel{padding:0 var(--g)}
.nomes{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--g);margin:0 calc(-1*var(--g));padding:20px var(--g) 2px;scrollbar-width:none}
.nomes::-webkit-scrollbar{display:none}
.nomes button{flex:none;scroll-snap-align:start;font-size:26px;line-height:1.2;color:#7d6c74;padding:4px 0 6px;border-bottom:3px solid transparent;transition:color .2s}
.nomes button[aria-selected=true]{color:var(--texto);border-color:var(--rosa)}
.sobre{margin-top:18px;min-height:9.5em}
.ef{font-size:20px;line-height:1.45}
.fio{margin-top:12px;color:var(--rosa)}
.agendar{margin-top:8px}
.periodo{color:var(--apoio)}
.periodo button{font-weight:600;color:var(--texto);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:2px;padding:4px 0}
.periodo button[aria-pressed=true]{color:var(--rosa);text-decoration-color:var(--rosa)}
.agendar .botao{margin-top:16px}
.obs{margin-top:12px;font-size:16px;color:var(--apoio)}

/* ===== além dos cílios ===== */
.tambem{padding:88px var(--g) 0}
.grande{font-size:28px;line-height:1.18;margin-top:14px}
.tambem p:not(.grande){margin-top:16px;color:var(--apoio);max-width:34em}

/* ===== espaço ===== */
.espaco{padding:88px 0 0}
.espaco h2{padding:0 var(--g)}
.fotos{display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:auto auto;gap:3px;margin-top:20px}
.fotos img{width:100%;height:100%;object-fit:cover}
.fotos .f1{grid-column:1/-1;aspect-ratio:4/3}
.fotos .f2{aspect-ratio:3/4}
.fotos .f3{aspect-ratio:3/4}
.onde{padding:0 var(--g)}
.onde p:not(.grande){margin-top:12px;color:var(--apoio)}
.link{display:inline-block;margin-top:14px;font-weight:600;color:var(--rosa);text-underline-offset:5px}

/* ===== avaliações ===== */
.quem{padding:88px 0 0}
.quem-topo{padding:0 var(--g)}
.nota-g{display:flex;align-items:center;gap:16px;margin-top:18px}
.nota-num{font-size:96px;line-height:.9;letter-spacing:-.05em;color:var(--rosa)}
.nota-lado{display:grid;gap:6px;color:var(--apoio);font-size:17px;line-height:1.3}
.estrelas{position:relative;display:inline-block;width:150px;height:28px}
.estrelas span{position:absolute;inset:0;background-size:30px 28px;background-repeat:repeat-x}
.estrelas .vazias{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 28'%3E%3Cpath d='M15 2.5l3.6 7.7 8.3 1-6.1 5.8 1.6 8.3L15 21.2l-7.4 4.1 1.6-8.3-6.1-5.8 8.3-1z' fill='%233A2E34'/%3E%3C/svg%3E")}
.estrelas .cheias{width:calc(var(--n)*100%);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 28'%3E%3Cpath d='M15 2.5l3.6 7.7 8.3 1-6.1 5.8 1.6 8.3L15 21.2l-7.4 4.1 1.6-8.3-6.1-5.8 8.3-1z' fill='%23F8CED8'/%3E%3C/svg%3E")}

/* mural: duas faixas andando em sentidos opostos, param no toque ou com o mouse em cima */
.mural{display:grid;gap:14px;margin-top:34px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.faixa{overflow:hidden;cursor:pointer}
.trilho{display:flex;gap:14px;width:max-content;align-items:stretch;animation:anda 80s linear infinite}
.faixa.volta .trilho{animation-direction:reverse;animation-duration:95s}
.faixa:hover .trilho,.faixa.parada .trilho{animation-play-state:paused}
@keyframes anda{to{transform:translateX(calc(-50% - 7px))}}
.aval{flex:none;width:min(78vw,330px);display:flex;flex-direction:column;padding:22px 22px 20px;background:var(--noite-2);margin:0}
.aval.rosa{background:var(--rosa);color:var(--noite)}
.aval blockquote{margin:12px 0 0;flex:1}
.aval-dest{font-size:25px;line-height:1.12}
.aval-trecho{margin-top:10px;font-size:16px;line-height:1.5;color:var(--apoio)}
.aval.rosa .aval-trecho{color:#4a3a42}
.aval figcaption{margin-top:16px;font-weight:600;font-size:16px}
.aval figcaption span,.aluna figcaption span{font-weight:400;color:var(--apoio)}
.aval.rosa figcaption span{color:#6b5560}
.mini-estrelas{display:flex;gap:3px}
.mini-estrelas svg{width:16px;height:16px;fill:var(--rosa)}
.aval.rosa .mini-estrelas svg{fill:var(--noite)}
.quem-pe{padding:18px var(--g) 0}

/* alunas, dentro do bloco do curso */
.alunas{display:grid;gap:22px;margin-top:36px;padding-top:28px;border-top:1px solid rgba(20,16,19,.18)}
.aluna{margin:0}
.aluna .mini-estrelas svg{fill:var(--noite);width:14px;height:14px}
.aluna blockquote{margin:8px 0 0}
.aluna p{margin:0;font-size:19px;line-height:1.4;font-weight:500}
.aluna figcaption{margin-top:6px;font-size:16px;font-weight:600}
.aluna figcaption span{color:#6b5560}

/* ===== curso ===== */
.curso{margin-top:96px;background:var(--rosa);color:var(--noite);padding:56px var(--g) 0;display:grid;gap:28px}
.curso p{margin-top:14px}
.preco{font-size:20px}
.preco s{color:var(--malva)}
.preco strong{font-family:var(--titulo);font-size:44px;letter-spacing:-.03em;display:block;line-height:1.05;margin:2px 0 4px}
.curso .botao{margin-top:22px}
.curso-fotos{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:0 calc(-1*var(--g))}
.curso-fotos img{width:100%;aspect-ratio:3/4;object-fit:cover}

/* ===== fim ===== */
.fim{padding:72px var(--g) 110px}
.fim .grande{margin:0 0 20px;font-size:32px}
.contato{margin-top:16px;color:var(--apoio);font-size:16px}
.contato a{text-underline-offset:4px}

/* barra fixa no celular quando o botão principal sai da tela */
.barra-zap{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;justify-content:center;min-height:54px;background:var(--rosa);color:var(--noite);font-weight:600;text-decoration:none;transform:translateY(150%);transition:transform .3s}
.barra-zap.on{transform:none}
.barra-zap{transition:transform .3s,background .2s,color .2s;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.barra-zap.escura{background:var(--noite);color:#fff}

/* entrada suave dos blocos */
.js .sobe{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .sobe.visto{opacity:1;transform:none}

/* ===== desktop: olho fixo à esquerda, escolha à direita ===== */
@media (min-width:900px){
  :root{--g:48px}
  .topo{padding:24px var(--g)}
  .abre{padding-top:24px}
  h1{font-size:88px;max-width:11em}
  .lead{font-size:21px}
  .efeito{display:grid;grid-template-columns:52fr 48fr;align-items:start;margin-top:48px}
  .olho{position:sticky;top:0;aspect-ratio:1/1;max-height:100vh}
  .painel{padding:0 var(--g) 0 56px}
  .nomes{flex-direction:column;gap:2px;overflow:visible;margin:0;padding:0}
  .nomes button{font-size:40px;text-align:left;align-self:flex-start}
  .sobre{margin-top:28px;max-width:30em}
  .tambem{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;padding-top:140px}
  .tambem h2,.espaco h2,.quem h2{font-size:48px}
  .tambem .grande{margin-top:0;font-size:40px}
  .tambem p:not(.grande){grid-column:2}
  .espaco{display:grid;grid-template-columns:1.5fr 1fr;gap:0 48px;padding:140px var(--g) 0}
  .espaco h2{grid-column:1/-1;padding:0}
  .fotos{margin-top:28px}
  .onde{padding:28px 0 0;align-self:end}
  .quem{padding-top:140px}
  .quem-topo{display:flex;justify-content:space-between;align-items:end;gap:40px}
  .nota-g{margin-top:0}
  .nota-num{font-size:140px}
  .mural{gap:18px;margin-top:48px}
  .trilho{gap:18px}
  @keyframes anda{to{transform:translateX(calc(-50% - 9px))}}
  .aval{width:380px;padding:28px}
  .aval-dest{font-size:30px}
  .curso{margin-top:140px;grid-template-columns:1fr 1fr;gap:56px;padding:88px var(--g)}
  .curso h2{font-size:48px}
  .curso-fotos{margin:0}
  .fim{padding:120px var(--g) 90px;max-width:900px}
  .fim .grande{font-size:48px}
  .fim .botao{display:inline-flex}
  .barra-zap{display:none}
}
@media (prefers-reduced-motion:reduce){
  .trilho{animation:none}
  .faixa{overflow-x:auto}

  html{scroll-behavior:auto}
  *,*::before{transition:none!important}
  .js .sobe{opacity:1;transform:none}
}