:root {
  --petroleo-900: #0d414c;
  --petroleo-700: #17636b;
  --petroleo-600: #1d6f74;
  --petroleo-500: #247c7d;
  --menta-300: #9de4c9;
  --menta-100: #e8f2ef;
  --fundo: #edf4f3;
  --tinta: #17353d;
  --tinta-suave: #52676d;
  --linha: #d7e3e5;
  --branco: #fff;
  --vermelho: #a3261f;
  --vermelho-fundo: #fdecea;
  --ambar: #8a5a00;
  --ambar-fundo: #fff4d6;
  --verde: #1f7a4d;
  --verde-fundo: #e3f4ea;
  --raio: 18px;
  --sombra: 0 18px 48px #123f4914, 0 2px 6px #123f490d;
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  color: var(--tinta);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); }
a { color: var(--petroleo-700); }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--menta-300); outline-offset: 2px; }

/* ---------- Fundo com microrganismos ---------- */
.clinical-shell {
  overflow-x: hidden;
  position: relative; isolation: isolate; min-height: 100vh; padding: 18px 22px 40px;
  background:
    radial-gradient(ellipse at 8% 8%, #cce7e2, transparent 50%),
    radial-gradient(ellipse at 96% 92%, #c5dddf, transparent 50%),
    var(--fundo);
}
.microbios { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: .45; }
.microbios i {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(circle at 28% 23%, #cff6dfaa 0, #71c3b86b 22%, #287a7c88 55%, #083741aa 80%);
  box-shadow: inset -12px -15px 25px #002d4660, inset 6px 6px 15px #b7ffe633, 12px 20px 28px #032a3d33;
  border: 1px solid #a0d9cd35; animation: flutua 18s ease-in-out infinite alternate;
}
.microbios i::after { content: ""; position: absolute; inset: 20%; border-radius: inherit; border: 4px dotted #c3f6d62b; transform: rotate(-25deg); }
.microbios i:nth-child(1) { width: 160px; height: 68px; right: 2%; top: 16%; border-radius: 60px; transform: rotate(-38deg); }
.microbios i:nth-child(2) { width: 125px; height: 125px; right: 4%; bottom: 8%; animation-delay: -4s; }
.microbios i:nth-child(3) { width: 70px; height: 70px; left: 1%; top: 46%; animation-delay: -8s; }
.microbios i:nth-child(4) { width: 105px; height: 45px; left: 5%; bottom: 4%; border-radius: 40px; transform: rotate(30deg); animation-delay: -12s; }
.microbios i:nth-child(5) { width: 38px; height: 38px; right: 16%; top: 6%; animation-delay: -2s; }
@keyframes flutua { to { translate: 0 -18px; } }
@media (prefers-reduced-motion: reduce) { .microbios i { animation: none; } }

.hero__selo { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: #ccece6; }
.hero__selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--menta-300); box-shadow: 0 0 16px var(--menta-300); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.etiquetas span { border: 1px solid #ffffff30; background: #ffffff10; border-radius: 30px; padding: 6px 12px; font-size: 12px; color: #e0f3ed; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 20px;
  border-radius: 12px; border: 0; cursor: pointer; font-weight: 700; letter-spacing: .01em; text-decoration: none;
  background: linear-gradient(135deg, var(--petroleo-700), var(--petroleo-500)); color: #fff; box-shadow: 0 6px 16px #17636b30;
  transition: filter .15s ease, transform .1s ease;
}
.botao:hover { filter: brightness(1.08); } .botao:active { transform: translateY(1px); }
.botao--claro { background: var(--branco); color: var(--petroleo-700); border: 1px solid #b7d4ce; box-shadow: none; }
.aviso { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; line-height: 1.5; margin: 0 0 18px; border: 1px solid; }
.aviso--teste { background: var(--ambar-fundo); border-color: #f0d58c; color: #6a4700; }
/* ---------- Porta de entrada / cadastro (pública) ---------- */
.porta { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px;
  background: radial-gradient(ellipse at 10% 10%, #cce7e2, transparent 50%), radial-gradient(ellipse at 95% 90%, #c5dddf, transparent 50%), var(--fundo); }
.porta__cartao { width: 100%; max-width: 1100px; display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; border-radius: 30px; background: #fff;
  border: 1px solid #fff; box-shadow: 0 28px 80px #123f4924, 0 4px 12px #123f490b; }
.porta__apresentacao { position: relative; isolation: isolate; overflow: hidden; padding: 52px 44px; color: #fff; display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(145deg, var(--petroleo-900), var(--petroleo-700) 60%, var(--petroleo-500)); }
.porta__apresentacao::after { content: ""; position: absolute; inset: 16px; border: 1px solid #ffffff19; border-radius: 20px; pointer-events: none; z-index: -1; }
.porta__apresentacao .microbios { position: absolute; opacity: .9; }
.porta__apresentacao h1 { font-size: clamp(46px, 5.4vw, 66px); letter-spacing: -.045em; margin: 12px 0 14px; text-shadow: 0 4px 18px #002d4550; }
.porta__apresentacao p { color: #d4e8e7; line-height: 1.65; max-width: 400px; margin: 0 0 10px; }
.porta__marca { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #bfe2dc !important; margin-top: 22px !important; }
.porta__chamada { font-size: 26px; color: #fff !important; font-weight: 500; line-height: 1.25 !important; }
.porta__como { border-top: 1px solid #ffffff30; border-bottom: 1px solid #ffffff30; margin: 18px 0 8px; color: #edf9f7; }
.porta__como summary { font-weight: 700; padding: 13px 0; cursor: pointer; }
.porta__como li, .porta__como p { font-size: 14px; color: #d4e8e7; line-height: 1.6; margin-bottom: 8px; }
.porta__lado { padding: 40px 40px 34px; background: linear-gradient(160deg, #fff, #f8fbfa); display: flex; flex-direction: column; }
.porta__topo { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--petroleo-900); margin-bottom: 26px; }
.porta__form { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.porta__form h2 { font-size: 34px; margin: 6px 0 8px; }
.porta__acesso { color: var(--petroleo-700); font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.auth-dica { font-size: 13px; color: var(--tinta-suave); line-height: 1.6; margin-top: 16px; }
@media (max-width: 820px) {
  .porta { padding: 14px 10px; }
  .porta__cartao { grid-template-columns: 1fr; border-radius: 22px; }
  .porta__apresentacao { padding: 34px 26px; }
  .porta__lado { padding: 28px 24px; }
}