/* ==========================================================================
   LONGEVIDADE PRO — Colors & Type
   Identidade clara e luminosa: alabastro quente, verde-pinho profundo e
   um toque de latão herdado da Clínica Lorenci. Claro por padrão; sem tema
   escuro (o contraponto proposital ao Masculinidade Pro, que é escuro).

   TRÊS VOZES TIPOGRÁFICAS
   · Marcellus          — identidade e display: capitulares romanas, títulos.
   · Cormorant Garamond — a voz humana: itálico editorial, falas do médico.
   · DM Sans            — corpo e interface: parágrafos, rótulos, botões.
   ==========================================================================*/
@import url("https://fonts.googleapis.com/css2?family=Marcellus&family=Marcellus+SC&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:wght@300;400;500;600&display=swap");

:root {
  /* ---- Base clara — alabastro quente ---------------------------------- */
  --bg:      #FAF8F4;   /* fundo da página                                 */
  --bg2:     #FFFFFF;   /* superfície elevada — cartões                     */
  --bg3:     #F2EEE6;   /* faixa tingida — seções alternadas               */

  /* ---- Tinta ---------------------------------------------------------- */
  --ink:     #17251F;   /* títulos                                          */
  --body:    #3A4741;   /* texto corrido                                    */
  --muted:   #6F7C75;   /* apoio, legendas                                  */
  --faint:   #9AA49E;   /* rodapé, notas legais                             */

  /* ---- Verde-pinho — acento primário ---------------------------------- */
  --green:   #2E6152;
  --green-l: #3F8471;
  --green-d: #1D4437;
  --green-w: #EAF2EE;   /* lavagem clara para fundos de destaque            */

  /* ---- Latão — herança da Clínica Lorenci, usado com parcimônia ------- */
  --brass:   #A8823F;
  --brass-l: #C9A971;

  /* ---- Linhas e sombras ------------------------------------------------ */
  --line:    rgba(23, 37, 31, .10);
  --line-2:  rgba(23, 37, 31, .16);
  --shadow:  0 1px 2px rgba(23,37,31,.04), 0 8px 24px -12px rgba(23,37,31,.10);
  --shadow-l:0 2px 4px rgba(23,37,31,.05), 0 18px 48px -18px rgba(46,97,82,.28);
}

/* O brasão da clínica é dourado claro, desenhado para fundo escuro.
   Sobre alabastro ele precisa descer de luminosidade para não sumir. */
.crest { filter: saturate(1.12) brightness(.74) contrast(1.06); }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--body);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

em {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--green);
}

h1, h2, h3 { font-family: "Marcellus", serif; font-weight: 400; color: var(--ink); }

a { color: var(--green); }

input, select, textarea { font-family: inherit; }
input::placeholder, textarea::placeholder { color: #A7B0AA; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--green-l) !important;
  box-shadow: 0 0 0 3px rgba(46, 97, 82, .12);
}

button:disabled { opacity: .45; cursor: not-allowed; }
button[data-on="true"] {
  border-color: var(--green) !important;
  background: var(--green-w) !important;
  color: var(--green-d) !important;
}
input[type="checkbox"][data-on="true"] {
  background: var(--green) !important;
  border-color: var(--green) !important;
  box-shadow: inset 0 0 0 3px #fff;
}

/* Botão principal — verde profundo, brilho interno discreto */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; border: 0; border-radius: 5px;
  padding: 15px 30px;
  font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 15px;
  color: #fff; cursor: pointer;
  background: linear-gradient(180deg, var(--green-l), var(--green) 55%, var(--green-d));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--shadow-l);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn .frame { position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.16); border-radius: 3px; pointer-events: none; }

.eyebrow {
  font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .28em; color: var(--green); margin-bottom: 16px;
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }