/* Cartão Cuida Bem: página "Em breve" */

/* Poppins (SIL Open Font License), servida pelo próprio site */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-latin-600-normal.woff2) format('woff2')}

:root{
  --roxo:#5C4770;
  --roxo-escuro:#4E3B60;
  --amarelo:#F9F900;
  --laranja:#EF7823;
  --lilas:#E4DEEA;
  --lilas-2:#CFC5DA;
  --branco:#FFFFFF;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100dvh;
  background:var(--roxo);color:var(--branco);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  line-height:1.5;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}

/* Tela dividida: texto à esquerda, foto ocupando toda a metade direita */
.pagina{min-height:100vh;min-height:100dvh;display:flex;flex-wrap:wrap;position:relative;overflow:hidden}

.coluna-texto{flex:1 1 560px;min-width:0;display:flex;justify-content:flex-end;position:relative}
.conteudo{
  position:relative;width:100%;max-width:680px;min-height:100vh;min-height:100dvh;
  padding:40px 64px 32px 24px;display:flex;flex-direction:column;gap:40px;
}

.forma{position:absolute;pointer-events:none;transform:rotate(45deg)}
.forma--solida{width:420px;height:420px;left:-260px;bottom:-240px;background:var(--roxo-escuro);border-radius:72px}

.topo img{height:44px;width:auto}

.texto{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:28px}

.selo{
  margin:0;display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.1);color:var(--amarelo);font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
}
.selo__ponto{width:8px;height:8px;border-radius:50%;background:var(--amarelo);animation:pulso 1.8s ease-in-out infinite}

h1{margin:0;font-size:clamp(36px,4.2vw,60px);line-height:1.08;font-weight:600;letter-spacing:-1.5px}
h1 em{font-style:normal;color:var(--amarelo)}

.apoio{margin:0;max-width:540px;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--lilas)}

.atributos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.atributos li{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:10px;
  border:1px solid rgba(255,255,255,.22);font-size:15px;font-weight:500;
}
.atributos svg{flex:none;stroke:var(--amarelo)}

.rodape{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;font-size:13px;color:var(--lilas-2)}
.rodape p{margin:0}

.coluna-imagem{flex:1 1 480px;min-width:0;position:relative;min-height:440px}
.coluna-imagem picture,.coluna-imagem img{position:absolute;inset:0;width:100%;height:100%}
.coluna-imagem img{object-fit:cover;object-position:55% center}

.losango{position:absolute;transform:rotate(45deg);animation:flutua 6s ease-in-out infinite}
.losango--laranja{left:-44px;top:72px;width:88px;height:88px;border-radius:20px;background:var(--laranja)}
.losango--contorno{right:48px;top:48px;width:56px;height:56px;border-radius:12px;border:3px solid var(--amarelo);animation-delay:-3s}

@keyframes flutua{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(-10px) rotate(45deg)}}
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.35}}

/* Abaixo de 1040px as colunas empilham: texto e, em seguida, a foto */
@media (max-width:1039px){
  .conteudo{min-height:auto;max-width:none;padding:32px 24px 40px}
  .pagina{flex-direction:column;flex-wrap:nowrap}
  .coluna-texto,.coluna-imagem{flex:none}
  .coluna-imagem{order:-1;min-height:0;height:clamp(300px,62vw,560px)}
  .forma--solida{display:none}
  .losango--laranja{left:auto;right:28px;top:auto;bottom:-32px;width:64px;height:64px;border-radius:14px}
  .losango--contorno{right:auto;left:24px;top:24px;width:44px;height:44px}
}
@media (max-width:640px){
  .topo img{height:36px}
}

@media (prefers-reduced-motion:reduce){
  .selo__ponto,.losango{animation:none}
}

/* Página 404 */
.voltar{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:10px;background:var(--amarelo);color:#2E2238;font-weight:600;text-decoration:none}
.voltar:hover{background:var(--branco)}
.voltar:focus-visible{outline:3px solid var(--branco);outline-offset:3px}