/* Site público e página de entrada, na identidade Pipa Psi: verde #00412F,
   laranja #FF6A00 (só gráfico; texto laranja usa #B84900) e a fonte Prompt,
   servida pelo próprio site porque a CSP não deixa carregar fonte de fora. */
@font-face{font-family:"Prompt";font-style:normal;font-weight:300;font-display:swap;src:url("fontes/Prompt-Light.ttf") format("truetype")}
@font-face{font-family:"Prompt";font-style:normal;font-weight:400;font-display:swap;src:url("fontes/Prompt-Regular.ttf") format("truetype")}
@font-face{font-family:"Prompt";font-style:normal;font-weight:500;font-display:swap;src:url("fontes/Prompt-Medium.ttf") format("truetype")}
@font-face{font-family:"Prompt";font-style:normal;font-weight:600;font-display:swap;src:url("fontes/Prompt-SemiBold.ttf") format("truetype")}
@font-face{font-family:"Prompt";font-style:normal;font-weight:700;font-display:swap;src:url("fontes/Prompt-Bold.ttf") format("truetype")}
:root{
  --papel:#f3f6f4;
  --folha:#ffffff;
  --tinta:#0f211a;
  --fraco:#56675f;
  --linha:#dde6e1;
  --marca:#00412f;
  --marca-escuro:#002b1f;
  --marca-claro:#d6f2e6;
  --laranja:#ff6a00;
  --laranja-titulo:#d45500;
  --ambar:#b84900;
  --ambar-claro:#fff1e6;
  --ardosia:#4a6178;
  --ardosia-claro:#e6ecf2;
  --verde:#2f7a55;
  --verde-claro:#e1efe7;
  --vermelho:#a3261d;
  --vermelho-claro:#f7e2df;
  --sans:"Prompt",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:var(--sans);
  --raio:10px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:16px/1.6 var(--sans)}
a{color:var(--marca);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--marca);outline-offset:3px;border-radius:4px}
.envelope{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---- topo ---- */
.topo{border-bottom:1px solid var(--linha);background:var(--papel)}
.topo .envelope{display:flex;align-items:center;gap:24px;min-height:72px}
.marca{display:flex;flex-direction:column;text-decoration:none;color:var(--tinta);margin-right:auto}
.marca img{display:block;height:38px;width:auto}
.marca span{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--fraco)}
.topo nav{display:flex;align-items:center;gap:22px;font-size:15px}
.topo nav a{color:var(--tinta);text-decoration:none}
.topo nav a:hover{color:var(--marca);text-decoration:underline}
.topo nav a.botao,.topo nav a.botao:hover{color:#fff;text-decoration:none}
@media (max-width:720px){.topo nav a.secundario{display:none}}

/* ---- botões ---- */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;
  border-radius:var(--raio);border:1.5px solid var(--marca);background:var(--marca);color:#fff;
  font:600 15.5px/1 var(--sans);text-decoration:none;cursor:pointer}
.botao:hover{background:var(--marca-escuro);border-color:var(--marca-escuro)}
.botao.claro{background:transparent;color:var(--marca)}
.botao.claro:hover{background:var(--marca-claro)}
.botao[disabled]{opacity:.6;cursor:progress}
.topo .botao{min-height:40px;padding:0 18px}

/* ---- abertura ---- */
.abertura .envelope{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:64px;padding-bottom:72px}
.selo{display:inline-block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ambar);
  border:1px solid #ffd2b0;background:var(--ambar-claro);padding:6px 12px;border-radius:999px;margin-bottom:22px}
h1{font:600 clamp(38px,5.2vw,62px)/1.04 var(--serif);letter-spacing:-.02em;margin:0 0 20px;text-wrap:balance}
h1 em{font-style:normal;color:var(--laranja-titulo)}
.lede{font-size:18.5px;line-height:1.6;color:#33443d;max-width:34em;margin:0 0 30px}
.acoes{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){.abertura .envelope{grid-template-columns:1fr;gap:40px;padding-top:40px}}

/* ---- prévia da semana (exemplo) ---- */
.previa{background:var(--folha);border:1px solid var(--linha);border-radius:16px;box-shadow:0 18px 40px -24px rgba(0,43,31,.35);overflow:hidden}
.previa-topo{display:flex;justify-content:space-between;align-items:baseline;padding:18px 20px 12px;border-bottom:1px solid var(--linha)}
.previa-topo b{font:600 17px/1.2 var(--serif)}
.previa-topo small{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--fraco)}
.dia{padding:10px 20px 4px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--fraco)}
.sessao{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:9px 20px;border-left:3px solid transparent}
.sessao .hora{font-variant-numeric:tabular-nums;color:var(--fraco);font-size:14px}
.sessao .quem{font-size:15px}
.sessao .quem small{display:block;color:var(--fraco);font-size:12.5px}
.chip{font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:999px;white-space:nowrap}
.chip.ok{color:var(--verde);background:var(--verde-claro)}
.chip.aviso{color:var(--ambar);background:var(--ambar-claro)}
.chip.falta{color:var(--vermelho);background:var(--vermelho-claro)}
.chip.agenda{color:var(--ardosia);background:var(--ardosia-claro)}
.sessao.vaga{border-left-color:var(--laranja)}
.sessao.vaga .quem{color:var(--ambar)}
.previa-rodape{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--linha);margin-top:8px}
.previa-rodape div{padding:14px 20px}
.previa-rodape div+div{border-left:1px solid var(--linha)}
.previa-rodape small{display:block;font-size:12px;color:var(--fraco)}
.previa-rodape b{font:600 20px/1.3 var(--serif);font-variant-numeric:tabular-nums}
.legenda-exemplo{font-size:12.5px;color:var(--fraco);margin:10px 4px 0}

/* ---- seções ---- */
section.bloco{padding:72px 0;border-top:1px solid var(--linha)}
section.bloco h2{font:600 clamp(28px,3.4vw,38px)/1.15 var(--serif);letter-spacing:-.01em;margin:0 0 12px;text-wrap:balance}
section.bloco .sub{color:var(--fraco);max-width:40em;margin:0 0 36px;font-size:17px}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.tres article{display:grid;gap:10px;align-content:start}
.tres h3{font:600 20px/1.3 var(--serif);margin:0}
.tres p{margin:0;color:#33443d}
.tres ul{margin:4px 0 0;padding-left:18px;color:#33443d;display:grid;gap:4px;font-size:15px}
@media (max-width:860px){.tres{grid-template-columns:1fr}}
.nota-destaque{margin-top:32px;padding:16px 18px;border:1px solid #bfe3d2;border-left:4px solid var(--marca);border-radius:var(--raio);background:#eaf7f1;color:var(--marca);font-size:15px}

.normas{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;margin:0;padding:0;list-style:none}
.normas li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--linha)}
.normas .ref{font:600 13px/1.5 var(--sans);letter-spacing:.02em;color:var(--marca)}
.normas p{margin:0}
@media (max-width:860px){.normas{grid-template-columns:1fr}.normas li{grid-template-columns:1fr;gap:4px}}

.chamada{background:var(--marca);color:#fff;position:relative;overflow:hidden}
/* a "seta" da marca: barra no topo e perna à direita */
.chamada::after{content:"";position:absolute;right:-24px;top:-24px;width:132px;height:132px;background:var(--laranja);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,50% 50%,0 50%)}
.chamada .envelope{position:relative;z-index:1}
.chamada .envelope{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-top:48px;padding-bottom:48px}
.chamada h2{font:600 clamp(26px,3vw,34px)/1.2 var(--serif);margin:0;color:#fff}
.chamada .botao{background:#fff;color:var(--marca);border-color:#fff}
.chamada .botao:hover{background:var(--marca-claro);border-color:var(--marca-claro)}

footer.pe{padding:28px 0 40px;color:var(--fraco);font-size:14px}
footer.pe .envelope{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

/* ---- página de entrada ---- */
.entrada{min-height:100dvh;display:grid;grid-template-columns:1fr minmax(360px,460px);}
.entrada-lado{padding:48px;display:flex;flex-direction:column;justify-content:space-between;background:var(--marca);color:#fff;position:relative;overflow:hidden}
.entrada-lado::after{content:"";position:absolute;right:48px;bottom:48px;width:96px;height:96px;background:var(--laranja);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,50% 50%,0 50%)}
.entrada-lado .marca img{height:44px}
.entrada-lado blockquote{margin:0;font:300 clamp(26px,2.8vw,36px)/1.3 var(--sans);max-width:17em;color:#fff;text-wrap:balance}
.entrada-lado p{color:#b9d6ca;max-width:30em;margin-right:150px}
.entrada-form{display:flex;align-items:center;justify-content:center;padding:40px 28px;background:var(--folha)}
.cartao-entrada{width:100%;max-width:380px}
.cartao-entrada h1{font-size:34px;margin:0 0 6px}
.cartao-entrada .explica{color:var(--fraco);margin:0 0 24px;font-size:15px}
.campo{display:grid;gap:6px;margin-bottom:14px}
.campo label{font-size:13.5px;font-weight:600;color:#33443d}
.campo input{font:inherit;font-size:16px;min-height:48px;padding:0 14px;border:1.5px solid var(--linha);border-radius:var(--raio);background:#fff;color:var(--tinta)}
.campo input:focus{border-color:var(--marca);outline:none;box-shadow:0 0 0 3px var(--marca-claro)}
.campo small{color:var(--fraco);font-size:12.5px}
.cartao-entrada .botao{width:100%;margin-top:6px}
.trocas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:18px;font-size:14.5px}
.trocas button{background:none;border:0;padding:4px 0;font:inherit;color:var(--marca);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mensagem{padding:12px 14px;border-radius:var(--raio);font-size:14.5px;margin-bottom:14px}
.mensagem.erro{background:var(--vermelho-claro);color:#7c1c15}
.mensagem.ok{background:var(--verde-claro);color:#1f5a3d}
.marca-celular{display:none;margin:0 0 28px}
.marca-celular img{height:40px;width:auto}
@media (max-width:860px){.entrada{grid-template-columns:1fr}.entrada-lado{display:none}.marca-celular{display:inline-block}}