/* ============================================================
   Clínica Vertuo — Design System v2 (editorial / premium)
   ============================================================ */
:root {
  /* Marca — cores oficiais do Manual da Marca */
  --petroleo: #102B45;          /* Azul Vertuo */
  --petroleo-600: #1B3A5C;
  --petroleo-700: #0B1F33;
  --petroleo-800: #071726;
  --cinza-vert: #90A0A0;
  --cinza-vert-claro: #D0E0E0;
  --cinza-vert-suave: #C0D0D0;
  --madeira: #4A2B17;           /* Marrom Madeira */
  --madeira-claro: #8A6A4F;
  --areia: #F8ECDB;             /* Areia Textil */
  --prata: #D9D9D9;             /* Prata Premium — acento sobre fundos escuros */
  --acento: #4A2B17;            /* acento institucional sobre fundos claros */

  /* Neutros */
  --branco: #FFFFFF; --offwhite: #F8F7F4;
  --cinza-100: #F5F7F7;
  --cinza-200: #E6EBEB;
  --cinza-300: #C9D2D2;
  --cinza-500: #708090;
  --cinza-700: #3A4750;
  --texto: #1A2A30;
  --texto-suave: #4B5A60;

  /* Acento de ação */
  --acao: #1FA463;
  --acao-hover: #188a53;

  /* Tipografia — display serifada para títulos (editorial premium) */
  --font-display: 'EB Garamond', Georgia, serif;   /* titulos oficiais (Garamond) */
  --font-titulo: 'Montserrat', system-ui, sans-serif; /* UI / textos funcionais */
  --font-caps: 'Cinzel', Georgia, serif;            /* acentos institucionais (eyebrows) */
  --font-corpo: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* Layout */
  --maxw: 1180px;
  --raio: 16px;
  --hairline: 1px solid var(--cinza-200);
  --sombra: 0 10px 30px rgba(16, 43, 69, 0.08);
  --sombra-forte: 0 18px 50px rgba(16, 43, 69, 0.16);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-corpo);
  color: var(--texto);
  background: var(--offwhite);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--petroleo);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.01em;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--cinza-vert-claro); color: var(--petroleo); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Eyebrow editorial: linha + texto espaçado */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-caps); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; font-size: .7rem;
  color: var(--acento); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--acento); }

/* Botões — linha editorial refinada (small caps + anel dourado) */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 32px; border-radius: 999px;
  font-family: var(--font-titulo); font-weight: 500; font-size: 0.8rem;
  letter-spacing: .16em; text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  cursor: pointer; border: none; position: relative;
}
.btn .arw { letter-spacing: 0; transition: transform .25s ease; }
.btn:hover .arw { transform: translateX(5px); }
.btn-primary { background: var(--petroleo); color: #fff; box-shadow: inset 0 0 0 1px rgba(185,150,89,.5); }
.btn-primary:hover { background: var(--petroleo-700); transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--acento), var(--sombra); }
.btn-acao { background: var(--acao); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.btn-acao:hover { background: var(--acao-hover); transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), var(--sombra); }
.btn-ghost { background: transparent; color: var(--petroleo); box-shadow: inset 0 0 0 1px var(--cinza-300); }
.btn-ghost:hover { background: var(--petroleo); color: #fff; box-shadow: inset 0 0 0 1px var(--acento); }
.btn-light { background: #fff; color: var(--petroleo); }
.btn-light:hover { background: var(--areia); transform: translateY(-2px); }

/* Listas editoriais compartilhadas */
.numlist { list-style: none; border-top: var(--hairline); }
.numlist > li { position: relative; display: grid; grid-template-columns: 70px 1fr 40px; gap: 24px; align-items: baseline; padding: 26px 8px; border-bottom: var(--hairline); }
.numlist > li::before {
  content: ""; position: absolute; inset: 6px 10px; border-radius: 18px;
  background: var(--areia); opacity: 0; transform: scale(.985);
  transition: opacity .3s ease, transform .3s ease; z-index: 0;
}
.numlist > li:hover::before { opacity: 1; transform: scale(1); }
.numlist > li > *, .numlist > li a > * { position: relative; z-index: 1; }
.numlist a { display: contents; }
.numlist .n { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--acento); }
.numlist h3 { font-size: 1.25rem; margin-bottom: 4px; }
.numlist p { color: var(--texto-suave); font-size: 0.95rem; max-width: 660px; }
.numlist .arw { color: var(--acento); font-size: 1.1rem; transition: transform .2s ease; }
.numlist > li:hover .arw { transform: translateX(6px); }
@media (max-width: 640px) { .numlist > li { grid-template-columns: 44px 1fr; } .numlist .arw { display: none; } }

.rowlist { list-style: none; border-top: var(--hairline); }
.rowlist > li { position: relative; border-bottom: var(--hairline); }
.rowlist > li::before {
  content: ""; position: absolute; inset: 4px 8px; border-radius: 14px;
  background: var(--areia); opacity: 0; transform: scale(.99);
  transition: opacity .3s ease, transform .3s ease; z-index: 0;
}
.rowlist > li:hover::before { opacity: 1; transform: scale(1); }
.rowlist a { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 18px; padding: 15px 6px; }
.rowlist .t { font-family: var(--font-display); font-size: 1.06rem; color: var(--petroleo); position: relative; z-index: 1; }
.rowlist a:hover .t { color: var(--acento); }
.rowlist .arw { color: var(--acento); opacity: 0; transform: translateX(-6px); transition: all .2s ease; }
.rowlist a:hover .arw { opacity: 1; transform: translateX(0); }
.rowlist--2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
@media (max-width: 820px) { .rowlist--2 { grid-template-columns: 1fr; } }

/* Nota editorial (substitui caixas de alerta) */
.note { border-left: 2px solid var(--acento); background: var(--areia); padding: 18px 22px; color: var(--texto-suave); font-size: 0.95rem; }
.note strong { color: var(--petroleo); }

/* Link-texto elegante */
.link-refined {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-titulo); font-weight: 500; font-size: 0.92rem;
  color: var(--petroleo); padding-bottom: 3px;
  border-bottom: 1px solid var(--cinza-300); transition: border-color .18s, gap .18s;
}
.link-refined:hover { border-color: var(--acento); gap: 12px; }

/* Ícones sociais circulares (WhatsApp / Instagram) */
.soc {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; color: var(--petroleo);
  border: 1px solid var(--cinza-300); background: #fff;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  flex-shrink: 0;
}
.soc:hover { transform: translateY(-2px); }
.soc--lg { width: 48px; height: 48px; }
.soc--wa:hover { background: #25D366; border-color: #25D366; color: #fff; }
.soc--ig:hover { background: linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7); border-color: transparent; color: #fff; }
.soc--onDark { border-color: rgba(255,255,255,.3); color: #fff; background: transparent; }
.soc--onDark:hover { border-color: transparent; }

/* Seções — respiro maior */
.section { padding: 110px 0; }
.section--alt { background: var(--areia); }
.section__head { max-width: 680px; margin: 0 auto 64px; text-align: center; }
.section__head .eyebrow { justify-content: center; }
.section__head .eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--acento); }
.section__head h2 { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 16px; }
.section__head p { color: var(--texto-suave); font-size: 1.05rem; }

/* Utilities */
.grid { display: grid; gap: 26px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }