/* =========================================================
   Instituto EVVA — Saúde da Mulher · Porto Velho
   Protótipo. Mesma paleta do site da Dra. Talita Martinelli
   (sálvia, oliva, creme, blush) + a areia do fundo do logo.
   Tipografia dos posts do EVVA: Montserrat com destaques em
   Playfair Display itálico. Assinaturas: o arco (do círculo
   do logo) e a folha da palavra "evva".
   ========================================================= */

:root {
  --salvia: #8A9A84;          /* decorativo — não usar como cor de texto */
  --salvia-texto: #6B7C65;    /* sálvia para texto grande: 4:1 sobre creme */
  --salvia-claro: #DCE2D4;
  --salvia-linha: #C4CDBB;
  --oliva: #56644F;           /* botões e texto pequeno: 5,7:1 sobre creme */
  --oliva-esc: #43503D;       /* seções escuras: creme = 7,7:1 */
  --oliva-900: #353F31;
  --creme: #F7F3EC;
  --creme-2: #EFE9DE;
  --areia: #E3DEDB;           /* fundo do logo no Instagram */
  --blush: #E8D3CB;
  --branco: #FFFDF9;

  --tinta: #2E332C;
  --tinta-soft: #565D53;
  --on-esc: #F7F3EC;
  --on-esc-soft: rgba(247, 243, 236, 0.8);
  --linha: rgba(46, 51, 44, 0.14);
  --linha-esc: rgba(247, 243, 236, 0.2);

  --f-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-serif: "Playfair Display", Georgia, "Times New Roman", serif;

  /* arco: raio horizontal 50% + vertical 37,5% = semicírculo numa caixa 3:4 */
  --arco: 50% 50% 22px 22px / 37.5% 37.5% 22px 22px;
  --shell: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--f-sans); font-size: 16px; line-height: 1.75;
  color: var(--tinta); background: var(--creme);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* height:auto evita que o atributo height do HTML estique a imagem */
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
figure, blockquote { margin: 0; }
address { font-style: normal; }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 14px; top: 14px; z-index: 999; background: var(--oliva-esc); color: var(--on-esc); padding: 12px 20px; }
:focus-visible { outline: 2px solid var(--oliva); outline-offset: 3px; border-radius: 4px; }
.sop :focus-visible, .cuid-escuro :focus-visible, .rodape :focus-visible { outline-color: var(--blush); }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 28px; }
section[id] { scroll-margin-top: 90px; }

/* ---------- Tipografia ---------- */
h1, h2 {
  font-family: var(--f-sans); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em;
  margin: 0 0 0.5em; color: var(--oliva-esc);
}
h1 { font-size: clamp(2.5rem, 5.2vw, 4.3rem); }
h2 { font-size: clamp(1.85rem, 3.3vw, 2.8rem); }
h1 em, h2 em {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  letter-spacing: -0.01em; font-size: 1.08em; color: var(--salvia-texto);
}
h3 { font-family: var(--f-sans); font-size: 1.08rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; margin: 0 0 0.55em; color: var(--oliva-esc); }
p { margin: 0 0 1em; color: var(--tinta-soft); }

.rotulo {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--oliva); margin: 0 0 18px;
}
.rotulo::before { content: ""; width: 26px; height: 1px; background: currentColor; flex-shrink: 0; }
.rotulo.claro { color: var(--blush); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--f-sans); font-size: 0.9rem; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn-oliva { background: var(--oliva); color: var(--on-esc); }
.btn-oliva:hover { background: var(--oliva-esc); transform: translateY(-2px); }
.btn-creme { background: var(--creme); color: var(--oliva-esc); }
.btn-creme:hover { background: var(--blush); transform: translateY(-2px); }
.btn-linha { background: transparent; color: var(--oliva-esc); border-color: var(--salvia-linha); }
.btn-linha:hover { border-color: var(--oliva); background: var(--salvia-claro); }
.btn-lg { padding: 17px 32px; font-size: 0.95rem; }
.btn-sm { padding: 12px 22px; font-size: 0.84rem; }

.ico-wa {
  width: 18px; height: 18px; flex-shrink: 0; background: currentColor;
  -webkit-mask: var(--m); mask: var(--m);
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.6 6.32A8.86 8.86 0 0 0 12.05 4C7.5 4 3.78 7.72 3.78 12.27c0 1.6.47 3.1 1.28 4.4L4 20l3.44-1.02a8.83 8.83 0 0 0 4.6 1.28h.01c4.55 0 8.26-3.72 8.26-8.27a8.7 8.7 0 0 0-2.71-6.13ZM12.05 18.9a7.4 7.4 0 0 1-3.77-1.03l-.27-.16-2.8.82.85-2.72-.18-.28a7.42 7.42 0 0 1-1.13-3.96c0-4.1 3.34-7.44 7.45-7.44 1.99 0 3.86.78 5.26 2.19a7.36 7.36 0 0 1 2.18 5.26c0 4.1-3.34 7.32-7.59 7.32Zm4.07-5.5c-.22-.11-1.31-.65-1.51-.72-.2-.08-.35-.11-.5.11-.15.22-.57.72-.7.87-.13.15-.26.16-.48.05-.22-.11-.93-.34-1.77-1.09-.65-.58-1.1-1.3-1.22-1.52-.13-.22-.01-.34.1-.45.1-.1.22-.26.33-.39.11-.13.14-.22.22-.37.07-.15.04-.28-.02-.39-.06-.11-.5-1.2-.68-1.65-.18-.43-.36-.37-.5-.38h-.43c-.15 0-.39.06-.6.28-.2.22-.79.77-.79 1.88s.81 2.18.92 2.33c.11.15 1.59 2.43 3.85 3.4.54.23.96.37 1.29.47.54.17 1.03.15 1.42.09.43-.06 1.31-.54 1.5-1.06.19-.52.19-.96.13-1.06-.05-.09-.2-.15-.41-.26Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.86rem; font-weight: 600; color: var(--oliva-esc);
  padding-bottom: 4px; border-bottom: 1px solid currentColor; transition: gap 0.3s var(--ease);
}
.link i { width: 18px; height: 1px; background: currentColor; display: block; }
.link:hover { gap: 15px; }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 90;
  background: rgba(247, 243, 236, 0.92); backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--linha);
}
.topo-in { display: flex; align-items: center; gap: 30px; height: 84px; }
.marca { display: flex; align-items: center; gap: 14px; margin-right: auto; flex-shrink: 0; }
.marca img { height: 40px; width: auto; }
.marca span {
  font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; line-height: 1.55;
  color: var(--oliva); padding-left: 14px; border-left: 1px solid var(--salvia-linha); white-space: nowrap;
}

.menu { display: flex; gap: 26px; }
.menu a { position: relative; font-size: 0.86rem; font-weight: 500; color: var(--tinta-soft); padding: 6px 0; white-space: nowrap; transition: color 0.3s var(--ease); }
.menu a:hover { color: var(--oliva-esc); }
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--salvia); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
}
.menu a:hover::after { transform: scaleX(1); }

.cta-curto { display: none; }
.hamb { display: none; position: relative; width: 44px; height: 44px; flex-shrink: 0; background: none; border: none; }
.hamb span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--oliva-esc); transition: transform 0.3s var(--ease); }
.hamb span:first-child { top: 18px; }
.hamb span:last-child { top: 26px; }
.hamb[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.hamb[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero-in { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(40px, 6vw, 90px); align-items: center; padding-top: 64px; padding-bottom: 92px; }
.hero-sub { font-size: 1.08rem; max-width: 46ch; margin-bottom: 34px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-pilares { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; padding-top: 24px; border-top: 1px solid var(--linha); }
.hero-pilares li { display: flex; align-items: center; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oliva); }
.hero-pilares li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--salvia); margin: 0 16px; }

.hero-foto { position: relative; justify-self: end; width: 100%; max-width: 460px; }
.arco { position: relative; z-index: 1; }
.arco img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--arco); }
.hero-folha {
  position: absolute; z-index: 0; right: -78px; top: -34px; width: 230px; height: 230px;
  color: var(--salvia-linha); transform: rotate(16deg); pointer-events: none;
}
.selo-2anos {
  position: absolute; z-index: 2; left: -52px; bottom: 48px;
  display: flex; align-items: center; gap: 14px; padding: 14px 22px 14px 14px;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 18px;
  box-shadow: 0 24px 44px -24px rgba(53, 63, 49, 0.45);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.selo-2anos:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -24px rgba(53, 63, 49, 0.5); }
.selo-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--salvia-claro); color: var(--oliva); display: grid; place-items: center; flex-shrink: 0; }
.selo-ico svg { width: 26px; height: 26px; }
.selo-2anos strong { display: block; font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 1.2rem; line-height: 1.2; color: var(--oliva-esc); }
.selo-2anos small { display: block; font-size: 0.76rem; font-weight: 500; line-height: 1.4; color: var(--tinta-soft); }

/* ---------- Pilares ---------- */
.pilares { background: var(--salvia-claro); }
.pil-in { display: grid; grid-template-columns: repeat(3, 1fr); }
.pil { padding: 40px 36px; border-left: 1px solid var(--salvia-linha); }
.pil:first-child { border-left: 0; padding-left: 0; }
.pil:last-child { padding-right: 0; }
.pil-n { display: block; font-family: var(--f-serif); font-style: italic; font-size: 1.3rem; line-height: 1; color: var(--oliva); margin-bottom: 14px; }
.pil h3 { font-size: 1.14rem; }
.pil p { font-size: 0.93rem; margin: 0; }

/* ---------- Seções ---------- */
.secao { padding: 112px 0; }
.cab { max-width: 640px; margin-bottom: 56px; }
.cab > p:last-child { max-width: 58ch; margin-bottom: 0; }
.cab-centro { text-align: center; margin-left: auto; margin-right: auto; }
.cab-centro .rotulo { justify-content: center; }
.cab-centro > p:last-child { margin-left: auto; margin-right: auto; }

/* ---------- O Instituto ---------- */
.instituto { background: var(--creme); }
.inst-in { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.inst-foto { position: relative; }
/* bloco sálvia espiando por cima e à direita da foto (longe da legenda) */
.inst-foto::before {
  content: ""; position: absolute; right: -22px; top: -22px; width: 62%; height: 62%;
  border-radius: 28px; background: var(--salvia-claro); z-index: 0;
}
.inst-foto img { position: relative; z-index: 1; width: 100%; aspect-ratio: 900 / 732; object-fit: cover; border-radius: 28px; }
.inst-foto figcaption { position: relative; z-index: 1; margin-top: 16px; font-size: 0.84rem; color: var(--tinta-soft); }
.inst-txt > p { max-width: 54ch; }
.citacao { margin: 30px 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--salvia); }
.citacao p { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.18rem, 1.8vw, 1.4rem); line-height: 1.5; color: var(--oliva-esc); margin: 0; max-width: 40ch; }

.equipe { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 80px; }
.medica {
  display: flex; align-items: center; gap: 22px; padding: 26px 28px;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 24px;
}
.medica-ini {
  flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; background: var(--salvia-claro);
  display: grid; place-items: center; font-family: var(--f-serif); font-style: italic; font-size: 1.9rem; line-height: 1; color: var(--oliva-esc);
}
.medica h3 { font-size: 1.1rem; margin-bottom: 4px; }
.medica-area { font-size: 0.86rem; line-height: 1.5; margin: 0 0 6px; }
.medica-reg { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; color: var(--oliva); margin: 0; }

/* ---------- Cuidados ---------- */
.cuidados { background: var(--creme-2); }
.cuid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cuid {
  display: flex; flex-direction: column; background: var(--branco); border: 1px solid var(--linha);
  border-radius: 26px; padding: 32px 30px 30px;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.cuid:hover { transform: translateY(-4px); border-color: var(--salvia-linha); box-shadow: 0 22px 44px -28px rgba(67, 80, 61, 0.45); }
.cuid-ico { width: 40px; height: 40px; color: var(--salvia); margin-bottom: 22px; flex-shrink: 0; }
.cuid h3 { font-size: 1.1rem; }
.cuid p { font-size: 0.93rem; margin: 0 0 22px; }
.cuid .link { margin-top: auto; align-self: flex-start; }

.cuid-largo { grid-column: span 2; display: grid; grid-template-columns: 1.05fr 0.95fr; padding: 0; overflow: hidden; }
.cuid-largo-txt { display: flex; flex-direction: column; padding: 32px 30px 30px; }
.cuid-largo img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; object-position: 30% 50%; }

.cuid-escuro { background: var(--oliva-esc); border-color: transparent; }
.cuid-escuro:hover { border-color: transparent; }
.cuid-escuro h3 { color: var(--on-esc); }
.cuid-escuro p { color: var(--on-esc-soft); }
.cuid-escuro .cuid-ico, .cuid-escuro .link { color: var(--blush); }

.cuid-rodape { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin: 40px 0 0; font-size: 0.98rem; }

/* ---------- Fases da vida (assinatura) ---------- */
.fases { background: var(--creme); }
.curva {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 28px;
  padding: 34px 34px 18px; box-shadow: 0 34px 60px -48px rgba(67, 80, 61, 0.5);
}
.curva-svg { width: 100%; height: 230px; overflow: visible; }
.curva-faixa { fill: var(--salvia-claro); opacity: 0.6; display: none; }
.js .curva-faixa { display: block; }
.curva-faixa, #curva-janela { transition: transform 0.6s var(--ease); }
.curva-divisas line { stroke: var(--salvia-linha); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.curva-area { fill: url(#curva-grad); }
.curva-linha, .curva-ativa { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.curva-linha { stroke: var(--salvia); stroke-width: 2; }
.curva-ativa { stroke: var(--oliva); stroke-width: 3.5; }

.fases-tabs { display: grid; grid-template-columns: 210fr 350fr 240fr 200fr; margin-top: 12px; border-top: 1px solid var(--linha); }
.fases-tabs button {
  position: relative; background: none; border: 0; padding: 16px 6px 8px;
  font-size: 0.84rem; font-weight: 600; line-height: 1.3; color: var(--tinta-soft); transition: color 0.3s var(--ease);
}
.fases-tabs button::before {
  content: ""; position: absolute; top: -2px; left: 12%; right: 12%; height: 3px; border-radius: 3px;
  background: var(--oliva); transform: scaleX(0); transition: transform 0.4s var(--ease);
}
.fases-tabs button:hover { color: var(--oliva-esc); }
.fases-tabs button[aria-selected="true"] { color: var(--oliva-esc); }
.fases-tabs button[aria-selected="true"]::before { transform: scaleX(1); }
.curva-nota { margin: 10px 0 0; font-size: 0.74rem; text-align: center; color: var(--tinta-soft); }

.fases-paineis { margin-top: 44px; }
.fase { display: grid; grid-template-columns: 0.7fr 1fr 1fr; gap: clamp(24px, 4vw, 60px); padding: 8px 0 34px; border-bottom: 1px solid var(--linha); }
.fase + .fase { padding-top: 34px; }
.js .fase { border-bottom: 0; padding: 0; animation: surge 0.6s var(--ease); }
.fase[hidden] { display: none; }
.fase:focus-visible { outline-offset: 10px; }
.fase-nome { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--oliva-esc); margin: 0; }
.fase h4 { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--oliva); margin: 6px 0 12px; }
.fase-col p { margin: 0; }
.fase-col li { position: relative; padding: 0 0 10px 26px; color: var(--tinta-soft); line-height: 1.6; }
.fase-col li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 12px; height: 12px;
  border-radius: 12px 0 12px 0; background: var(--salvia);   /* mini-folha */
}
@keyframes surge { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- SOP / SOMP ---------- */
.sop { position: relative; overflow: hidden; background: var(--oliva-esc); color: var(--on-esc); padding: 112px 0; }
.sop-folha {
  position: absolute; right: -60px; top: -40px; width: 320px; height: 320px;
  color: var(--salvia); opacity: 0.22; transform: rotate(24deg); pointer-events: none;
}
.sop-in { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px clamp(40px, 6vw, 90px); align-items: center; }
.sop h2 { color: var(--on-esc); }
.sop h2 em { color: var(--blush); }
.sop-txt p { color: var(--on-esc-soft); max-width: 46ch; margin: 0; }
.sop-dados { margin: 0; border-top: 1px solid var(--linha-esc); }
.sop-dados div { display: grid; grid-template-columns: 13.5rem 1fr; gap: 26px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--linha-esc); }
.sop-dados dt { font-family: var(--f-serif); font-style: italic; font-size: clamp(2.6rem, 4.6vw, 3.8rem); line-height: 1; color: var(--blush); white-space: nowrap; }
.sop-dados dd { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--on-esc); }
.sop-rodape { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-top: 40px; border-top: 1px solid var(--linha-esc); }
.sop-rodape p { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.5; color: var(--on-esc); margin: 0; max-width: 48ch; }
.sop-fonte { grid-column: 1 / -1; margin: -30px 0 0; font-size: 0.76rem; color: var(--on-esc-soft); }

/* ---------- Dúvidas ---------- */
.duvidas { background: var(--creme); }
.duv-in { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.duv-in .cab { position: sticky; top: 124px; margin-bottom: 0; }
.faq { border-top: 1px solid var(--linha); }
.faq-item { border-bottom: 1px solid var(--linha); }
.faq-item summary {
  display: grid; grid-template-columns: 1fr 30px; gap: 20px; align-items: center;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-size: 1.02rem; font-weight: 600; line-height: 1.45; color: var(--oliva-esc);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--oliva); }
.faq-mais { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--salvia-linha); transition: background 0.3s var(--ease), border-color 0.3s var(--ease); }
.faq-mais::before, .faq-mais::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px;
  background: var(--oliva); transform: translate(-50%, -50%); transition: transform 0.3s var(--ease);
}
.faq-mais::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-mais { background: var(--salvia-claro); border-color: var(--salvia-claro); }
.faq-item[open] .faq-mais::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-resp { padding: 0 50px 26px 0; }
.faq-resp p { margin: 0; font-size: 0.95rem; }
.faq-resp a { color: var(--oliva-esc); font-weight: 600; border-bottom: 1px solid var(--salvia-linha); }
.faq-nota { margin: 24px 0 0; font-size: 0.8rem; }

/* ---------- Novo espaço + contato ---------- */
.contato { background: var(--creme-2); }
.cont-in { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.cont-txt > p { max-width: 50ch; }
.cont-lista { display: grid; grid-template-columns: 1fr 1fr; margin: 34px 0 36px; border-top: 1px solid var(--linha); }
.cont-item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px 20px 20px 0; border-bottom: 1px solid var(--linha); }
.cont-k { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--oliva); }
.cont-v { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.55; color: var(--tinta); }
a.cont-v { font-weight: 600; color: var(--oliva-esc); border-bottom: 1px solid var(--salvia-linha); transition: border-color 0.3s var(--ease); }
a.cont-v:hover { border-color: var(--oliva); }
.cont-obs { font-size: 0.82rem; color: var(--tinta-soft); }
.cont-item .link { margin-top: 8px; }

.cont-selo { position: relative; justify-self: center; width: min(400px, 100%); aspect-ratio: 1; }
.selo-anel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: girar 48s linear infinite; }
.selo-anel text { font-family: var(--f-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.3em; fill: var(--oliva); }
.selo-disco {
  position: absolute; inset: 13%; border-radius: 50%; background: var(--areia);
  display: grid; place-items: center; box-shadow: 0 40px 70px -46px rgba(53, 63, 49, 0.55);
}
.selo-disco img { width: 64%; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Rodapé ---------- */
.rodape { background: var(--oliva-900); color: var(--on-esc-soft); }
.rod-in { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 40px; padding-top: 68px; padding-bottom: 44px; }
.rod-marca img { width: 150px; margin-bottom: 18px; }
.rod-marca p { margin: 0; font-size: 0.86rem; color: var(--on-esc-soft); }
.rod-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.rod-k { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--blush); margin-bottom: 4px; }
.rod-col a { color: var(--on-esc); font-size: 0.9rem; transition: color 0.3s var(--ease); }
.rod-col a:hover { color: var(--blush); }
.rod-col address { font-size: 0.86rem; color: var(--on-esc-soft); line-height: 1.6; }
.rod-base { padding-top: 22px; padding-bottom: 32px; border-top: 1px solid var(--linha-esc); }
.rod-base p { margin: 0 0 4px; font-size: 0.78rem; color: var(--on-esc-soft); }
.rod-base strong { color: var(--on-esc); font-weight: 600; }

/* ---------- WhatsApp flutuante ---------- */
.wa {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--oliva); color: var(--on-esc);
  box-shadow: 0 14px 32px -12px rgba(53, 63, 49, 0.6);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.wa:hover { background: var(--oliva-esc); transform: translateY(-3px); }
.wa .ico-wa { width: 26px; height: 26px; }

/* ---------- Revelação ---------- */
.js [data-rv] { opacity: 0; transform: translateY(20px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
.js [data-rv].visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rv] { opacity: 1; transform: none; transition: none; }
  .btn, .cuid, .wa, .link, .selo-2anos, .curva-faixa, #curva-janela { transition: none; }
  .selo-anel, .js .fase { animation: none; }
}

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width: 1080px) {
  .menu {
    position: fixed; top: 84px; left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--creme); border-bottom: 1px solid var(--linha); padding: 12px 28px 26px;
    box-shadow: 0 24px 40px -30px rgba(53, 63, 49, 0.5);
    transform: translateY(-10px); opacity: 0; visibility: hidden;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }
  .menu.aberto { transform: translateY(0); opacity: 1; visibility: visible; }
  .menu a { padding: 15px 0; border-bottom: 1px solid var(--linha); font-size: 1rem; }
  .menu a::after { display: none; }
  .hamb { display: block; }
}

@media (max-width: 900px) {
  .hero-in, .inst-in, .sop-in, .duv-in, .cont-in { grid-template-columns: 1fr; }
  .cuid-grid { grid-template-columns: 1fr 1fr; }
  .cuid-largo { grid-column: 1 / -1; }
  .hero-in { gap: 64px; }
  .hero-foto { justify-self: start; max-width: 420px; margin-left: 52px; }
  .inst-foto { max-width: 560px; }
  .duv-in .cab { position: static; }
  .fase { grid-template-columns: 1fr 1fr; }
  .fase-nome { grid-column: 1 / -1; }
  .sop-fonte { margin-top: -16px; }
  .cont-selo { width: min(340px, 100%); justify-self: start; }
}

@media (max-width: 720px) {
  .secao, .sop { padding: 80px 0; }
  .pil-in { grid-template-columns: 1fr; }
  .pil, .pil:first-child, .pil:last-child { padding: 26px 0; border-left: 0; border-top: 1px solid var(--salvia-linha); }
  .pil:first-child { border-top: 0; }
  .equipe { grid-template-columns: 1fr; margin-top: 56px; }
  .cuid-grid { grid-template-columns: 1fr; }
  .cuid-largo { grid-template-columns: 1fr; }
  .cuid-largo img { min-height: 0; height: 200px; order: -1; }
  .curva { padding: 24px 18px 14px; border-radius: 22px; }
  .curva-svg { height: 170px; }
  .fase { grid-template-columns: 1fr; gap: 18px; }
  .sop-dados div { grid-template-columns: 1fr; gap: 8px; }
  .rod-in { grid-template-columns: 1fr; gap: 30px; }
  .hero-folha { width: 170px; height: 170px; right: -40px; }
}

/* Abas: abaixo de 640px deixam de acompanhar a largura das fases e viram 2 × 2 */
@media (max-width: 640px) {
  .fases-tabs { grid-template-columns: 1fr 1fr; gap: 8px; border-top: 0; margin-top: 18px; }
  .fases-tabs button { padding: 12px 8px; border: 1px solid var(--linha); border-radius: 999px; font-size: 0.82rem; }
  .fases-tabs button::before { display: none; }
  .fases-tabs button[aria-selected="true"] { background: var(--oliva); border-color: var(--oliva); color: var(--on-esc); }
}

@media (max-width: 560px) {
  .shell { padding: 0 20px; }
  .topo-in { height: 72px; gap: 12px; }
  .menu { top: 72px; padding: 10px 20px 24px; }
  .marca img { height: 34px; }
  .marca span { display: none; }
  .cta-longo { display: none; }
  .cta-curto { display: inline; }
  .topo .btn-sm { padding: 10px 16px; font-size: 0.82rem; }
  .hero-in { padding-top: 44px; padding-bottom: 80px; gap: 56px; }
  .hero-cta .btn, .sop-rodape .btn, .cont-acoes .btn { width: 100%; }
  .hero-foto { margin-left: 0; max-width: none; }
  .selo-2anos { left: 14px; right: 14px; bottom: -30px; }
  .hero-pilares li { font-size: 0.7rem; letter-spacing: 0.12em; }
  .hero-pilares li + li::before { margin: 0 10px; }
  .inst-foto::before { right: -12px; top: -12px; }
  .medica { padding: 22px; gap: 16px; }
  .medica-ini { width: 54px; height: 54px; font-size: 1.6rem; }
  .cuid { padding: 28px 24px 26px; }
  .cuid-largo { padding: 0; }
  .cuid-largo-txt { padding: 28px 24px 26px; }
  .faq-resp { padding-right: 0; }
  .cont-lista { grid-template-columns: 1fr; }
  .wa { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}

/* Em telas muito estreitas o WhatsApp flutuante assume o papel do botão do topo */
@media (max-width: 340px) {
  .topo .btn-sm { display: none; }
}

/* =========================================================
   Nova fase do EVVA: novo EVVA, trajetória, sócias, equipe,
   serviços, espaço, depoimentos, localização, encerramento e
   páginas internas (equipe/ e servicos/).
   Os blocos com dados são gerados por ferramentas/gerar-site.js
   ========================================================= */

/* ---------- Informação a confirmar ---------- */
.pendente { font-style: italic; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--tinta-soft); border-bottom: 1px dashed var(--salvia); }
.tag-pendente {
  display: inline-block; padding: 4px 10px; border: 1px dashed var(--salvia); border-radius: 999px; background: var(--branco);
  font-family: var(--f-sans); font-size: 0.6rem; font-weight: 600; font-style: normal; line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--oliva); vertical-align: middle; white-space: nowrap;
}
.pendente-bloco { margin: 0; padding: 22px 24px; border: 1px dashed var(--salvia); border-radius: 18px; background: rgba(255, 253, 249, 0.6); font-size: 0.92rem; color: var(--tinta-soft); }
.aviso { max-width: 54ch; margin: 30px 0 0; padding: 16px 20px; border: 1px dashed var(--salvia); border-radius: 16px; background: var(--branco); }
.aviso p { margin: 0; font-size: 0.84rem; line-height: 1.6; }
.aviso strong { color: var(--oliva-esc); }
.aviso ul { margin: 8px 0 0; padding-left: 18px; list-style: disc; font-size: 0.84rem; line-height: 1.6; color: var(--tinta-soft); }

/* ---------- Fotos e espaços reservados (arco do hero) ---------- */
.prof-foto img, .foto-ph, .perfil-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--arco); }
.foto-ph {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--creme-2); border: 1px solid var(--linha);
}
.foto-ph svg { position: absolute; width: 74%; right: -14%; bottom: -8%; color: var(--salvia-linha); transform: rotate(16deg); }
.foto-ph-ini { position: relative; padding-bottom: 0.2em; font-family: var(--f-serif); font-style: italic; font-size: clamp(3.2rem, 7vw, 5.4rem); line-height: 1; color: var(--salvia-texto); }   /* respiro para letras com perna (J) */
.foto-ph-nota { position: relative; padding: 0 12px; text-align: center; font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--tinta-soft); }
.foto-ph.paisagem, .foto-ph.livre { aspect-ratio: 4 / 3; border-radius: 28px; }
.foto-ph.paisagem svg, .foto-ph.livre svg { width: min(46%, 220px); }

/* ---------- Novo EVVA ---------- */
.novo { background: var(--creme-2); }
.novo-in { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.novo-txt > p { max-width: 56ch; }
.novo-txt > p:last-child { margin-bottom: 0; }
.novo-selo { width: min(320px, 100%); }
.novidades { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 72px; border-top: 1px solid var(--salvia-linha); }
.novidades li { display: flex; flex-direction: column; padding: 34px 28px 0; border-left: 1px solid var(--salvia-linha); }
.novidades li:first-child { border-left: 0; padding-left: 0; }
.novidades h3 { font-size: 1.1rem; }
.novidades p { font-size: 0.92rem; margin: 0 0 18px; }
.novidades .link { margin-top: auto; align-self: flex-start; }

/* ---------- Trajetória (dentro de "Nossa história") ---------- */
.instituto .trajetoria-tit { margin: 88px 0 26px; }
.trajetoria { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.trajetoria::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--salvia-linha); }
.trajetoria li { position: relative; padding: 34px 28px 0 0; }
.trajetoria li::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 15px 0 15px 0; background: var(--salvia); }
.trajetoria li:last-child::before { background: var(--oliva); }
.trajetoria-k { display: block; margin-bottom: 6px; font-family: var(--f-serif); font-style: italic; font-size: 1rem; color: var(--oliva); }
.trajetoria h4 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 600; line-height: 1.35; color: var(--oliva-esc); }
.trajetoria p { margin: 0; font-size: 0.92rem; }

/* ---------- Sócias ---------- */
.socias { background: var(--oliva-esc); }
.socias .cab h2 { color: var(--on-esc); }
.socias .cab h2 em { color: var(--blush); }
.socias .cab > p:last-child { color: var(--on-esc-soft); }
.socias :focus-visible { outline-color: var(--blush); }
.socias-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.socias-foto { position: sticky; top: 110px; margin: 0; }
.socias-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; }
.socias-foto .foto-ph { background: rgba(247, 243, 236, 0.08); border-color: var(--linha-esc); }
.socias-foto .foto-ph svg { color: rgba(247, 243, 236, 0.18); }
.socias-foto .foto-ph-nota { color: var(--on-esc-soft); }
.socias-lista { display: grid; gap: 16px; }
.socias .medica { align-items: flex-start; }
.socia-txt { margin: 10px 0 12px; font-size: 0.9rem; line-height: 1.6; }

/* ---------- Cuidados (complementos) ---------- */
.cuid-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.cuid .cuid-links .link { margin-top: 0; }
.cuid-pendente { position: relative; border-style: dashed; border-color: var(--salvia-linha); }
.cuid-pendente .tag-pendente { position: absolute; top: 30px; right: 28px; }

/* ---------- Equipe (cards) ---------- */
.time { background: var(--salvia-claro); }
.time-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.prof {
  position: relative; display: flex; flex-direction: column;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 24px; padding: 12px 12px 24px;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.prof:hover, .prof:focus-within { transform: translateY(-4px); border-color: var(--salvia-linha); box-shadow: 0 22px 44px -28px rgba(67, 80, 61, 0.45); }
.prof-foto { position: relative; margin-bottom: 20px; }
.selo-foto {
  position: absolute; left: 10px; bottom: 10px; z-index: 1; padding: 5px 11px; border-radius: 999px;
  background: var(--oliva-esc); color: var(--on-esc);
  font-size: 0.6rem; font-weight: 600; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.14em;
}
.prof-txt { display: flex; flex-direction: column; flex: 1; padding: 0 10px; }
.prof-esp { margin: 0 0 8px; font-size: 0.66rem; font-weight: 600; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.16em; color: var(--oliva); }
.prof h3 { font-size: 1.08rem; margin-bottom: 6px; }
.prof .medica-reg { margin-bottom: 18px; line-height: 1.6; }
.prof .medica-reg > span:not(.pendente) { white-space: nowrap; }
.prof .link { margin-top: auto; align-self: flex-start; }
.prof .link::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }   /* card inteiro clicável */

/* ---------- Serviços em destaque ---------- */
.servicos { background: var(--creme); }
.serv-in { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.serv-in .cab { position: sticky; top: 124px; margin-bottom: 0; }
.serv-lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linha); }
.serv-lista li { border-bottom: 1px solid var(--linha); }
.serv { display: grid; grid-template-columns: 3rem 1fr 44px; gap: 20px; align-items: center; padding: 26px 0; }
.serv-n { font-family: var(--f-serif); font-style: italic; font-size: 1.3rem; line-height: 1; color: var(--oliva); }
.serv-corpo { display: block; }
.serv-tit { margin: 0 0 4px; font-size: 1.12rem; font-weight: 600; line-height: 1.4; color: var(--oliva-esc); transition: color 0.3s var(--ease); }
.serv-tit .tag-pendente { margin-left: 6px; }
.serv-desc { display: block; font-size: 0.92rem; line-height: 1.6; color: var(--tinta-soft); }
.serv-seta { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--salvia-linha); transition: background 0.3s var(--ease), border-color 0.3s var(--ease); }
.serv-seta::before { content: ""; position: absolute; left: 13px; top: 50%; width: 16px; height: 1.5px; background: var(--oliva); transform: translateY(-50%); }
.serv-seta::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border-top: 1.5px solid var(--oliva); border-right: 1.5px solid var(--oliva); transform: translateY(-50%) rotate(45deg); }
.serv:hover .serv-tit { color: var(--oliva); }
.serv:hover .serv-seta { background: var(--oliva); border-color: var(--oliva); }
.serv:hover .serv-seta::before { background: var(--on-esc); }
.serv:hover .serv-seta::after { border-color: var(--on-esc); }

/* ---------- Conheça o novo EVVA ---------- */
.espaco { background: var(--creme-2); }
.espaco-grade { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px; height: clamp(440px, 52vw, 640px); }
.esp { position: relative; margin: 0; min-height: 0; }
.esp-destaque { grid-row: span 2; }
.esp:last-child { grid-column: span 2; }
.esp img, .esp .foto-ph { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 24px; }
.esp figcaption {
  position: absolute; left: 14px; bottom: 14px; z-index: 1; padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 253, 249, 0.94); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; color: var(--oliva-esc);
}

/* ---------- Depoimentos ---------- */
.depoimentos { background: var(--creme-2); }
.depo-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.depo { display: flex; flex-direction: column; margin: 0; padding: 32px 30px; background: var(--branco); border: 1px solid var(--linha); border-radius: 26px; }
.depo-nota { margin: 0 0 16px; font-size: 1rem; letter-spacing: 0.18em; color: var(--oliva); }
.depo blockquote p { margin: 0 0 22px; font-family: var(--f-serif); font-style: italic; font-size: 1.12rem; line-height: 1.55; color: var(--oliva-esc); }
.depo figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; color: var(--tinta-soft); }
.depo figcaption span:first-child { font-weight: 600; color: var(--oliva-esc); }
.depo-vazio { border-style: dashed; border-color: var(--salvia); background: rgba(255, 253, 249, 0.55); }
.depo-vazio .depo-nota { color: var(--salvia-linha); }
.depo-vazio blockquote p { font-size: 1rem; color: var(--tinta-soft); }
.depo-vazio figcaption span:first-child { font-weight: 500; color: var(--tinta-soft); }

/* ---------- Onde estamos ---------- */
.cont-item-largo { grid-column: 1 / -1; }
.cont-acoes { display: flex; flex-wrap: wrap; gap: 14px; }
.mapa {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 28px;
  background: var(--areia); border: 1px solid var(--linha); box-shadow: 0 34px 60px -48px rgba(67, 80, 61, 0.5);
}
.mapa iframe { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; border: 0; }

/* ---------- Encerramento + Max ---------- */
.final { padding: 96px 0; }
.final-in { position: relative; display: grid; grid-template-columns: 1fr auto; gap: clamp(40px, 6vw, 90px); align-items: center; }
.final-txt > p:not(.rotulo) { max-width: 46ch; margin: 0 0 30px; color: var(--on-esc-soft); }
.max { width: clamp(180px, 20vw, 240px); margin: 0; }
.max img, .max .foto-ph { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--arco); }
.max .foto-ph { background: rgba(247, 243, 236, 0.08); border-color: var(--linha-esc); }
.max .foto-ph svg { color: rgba(247, 243, 236, 0.18); }
.max .foto-ph-nota { color: var(--on-esc-soft); }
.max figcaption { margin-top: 12px; text-align: center; font-family: var(--f-serif); font-style: italic; color: var(--blush); }

/* ---------- Páginas internas: perfil e serviço ---------- */
.fundo-2 { background: var(--creme-2); }
.perfil { position: relative; overflow: hidden; background: var(--creme); }
.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 30px 0 0; list-style: none; font-size: 0.8rem; color: var(--tinta-soft); }
.migalhas li + li::before { content: "/"; margin-right: 10px; color: var(--salvia); }
.migalhas a { font-weight: 600; color: var(--oliva-esc); border-bottom: 1px solid var(--salvia-linha); transition: border-color 0.3s var(--ease); }
.migalhas a:hover { border-color: var(--oliva); }
.perfil-in { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 90px); align-items: center; padding: 44px 0 100px; }
.perfil-foto { position: relative; width: 100%; max-width: 440px; }
.perfil-foto > img, .perfil-foto > .foto-ph { position: relative; z-index: 1; }
.perfil-txt h1 { margin-bottom: 0.4em; }
.perfil-reg { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.perfil-reg span {
  padding: 7px 14px; border: 1px solid var(--salvia-linha); border-radius: 999px; background: var(--branco);
  font-size: 0.78rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.06em; color: var(--oliva);
}
.perfil-reg .pendente { padding: 0; border: 0; border-bottom: 1px dashed var(--salvia); border-radius: 0; background: none; }
.perfil-resumo { font-size: 1.08rem; max-width: 46ch; margin-bottom: 34px; }
.perfil .hero-cta { margin-bottom: 0; }
.serv-folha { position: absolute; right: -60px; top: 40px; width: 380px; height: 380px; color: var(--salvia-linha); opacity: 0.7; transform: rotate(16deg); pointer-events: none; }
.serv-topo-in { position: relative; max-width: 760px; padding: 44px 0 100px; }

.prosa p { font-size: 1.02rem; max-width: 60ch; }
.prosa .citacao { margin-bottom: 0; }
.lista-folha li { position: relative; padding: 0 0 14px 28px; font-size: 1.02rem; line-height: 1.6; color: var(--tinta-soft); }
.lista-folha li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 12px; height: 12px; border-radius: 12px 0 12px 0; background: var(--salvia); }

.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.area {
  display: flex; align-items: center; gap: 16px; padding: 22px 24px;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 20px;
  font-size: 0.98rem; font-weight: 600; line-height: 1.4; color: var(--oliva-esc);
}
.area svg { width: 34px; height: 34px; flex-shrink: 0; color: var(--salvia); }

.trat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.trat { display: flex; flex-direction: column; padding: 30px 28px; background: var(--branco); border: 1px solid var(--linha); border-radius: 26px; }
.trat h3 { font-size: 1.06rem; }
.trat p { font-size: 0.92rem; margin: 0; }
.trat .trat-txt { font-size: 0.98rem; font-weight: 500; line-height: 1.55; color: var(--oliva-esc); }

.form-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
.form-tit { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--oliva); margin: 0 0 8px; }
.trajeto { border-top: 1px solid var(--linha); }
.trajeto li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--linha); }
.trajeto-k { font-family: var(--f-serif); font-style: italic; font-size: 1.05rem; line-height: 1.5; color: var(--oliva); }
.trajeto strong { display: block; font-weight: 600; line-height: 1.45; color: var(--oliva-esc); }
.trajeto div span { display: block; margin-top: 2px; font-size: 0.88rem; line-height: 1.55; color: var(--tinta-soft); }

.agenda { position: relative; overflow: hidden; background: var(--oliva-esc); padding: 104px 0; }
.agenda-in { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 32px 60px; }
.agenda h2 { color: var(--on-esc); }
.agenda h2 em { color: var(--blush); }
.agenda-txt p:last-child { max-width: 48ch; margin: 0; color: var(--on-esc-soft); }
.agenda-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 28px; }
.agenda .sop-folha { right: -170px; }
.agenda .link { color: var(--blush); }
.agenda :focus-visible { outline-color: var(--blush); }

@media (prefers-reduced-motion: reduce) {
  .prof, .serv-tit, .serv-seta { transition: none; }
}

/* Menu em linha com 6 links: menos respiro logo acima do hambúrguer */
@media (min-width: 1081px) and (max-width: 1200px) {
  .menu { gap: 20px; }
}

@media (max-width: 1080px) {
  .time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .novidades { grid-template-columns: 1fr 1fr; }
  .novidades li { padding: 30px 24px 30px; }
  .novidades li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .novidades li:nth-child(n + 3) { border-top: 1px solid var(--salvia-linha); }
  .trajetoria { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .trajetoria::before { display: none; }
  .trajetoria li { padding-top: 30px; border-top: 1px solid var(--salvia-linha); }
  .trajetoria li::before { top: -8px; }
}

@media (max-width: 900px) {
  .novo-in, .socias-in, .serv-in { grid-template-columns: 1fr; }
  .novo-selo { justify-self: start; width: min(260px, 100%); }
  .socias-foto { position: static; max-width: 640px; }
  .serv-in .cab { position: static; margin-bottom: 8px; }
  .depo-grade { grid-template-columns: 1fr; }
  .mapa { aspect-ratio: 16 / 10; }
  .perfil-in { grid-template-columns: 1fr; gap: 56px; padding-top: 36px; }
  .perfil-foto { max-width: 380px; }
  .form-in { grid-template-columns: 1fr; }
  .serv-folha { display: none; }
}

@media (max-width: 720px) {
  .time-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .prof { padding: 8px 8px 18px; border-radius: 20px; }
  .prof .link::after { border-radius: 20px; }
  .prof-foto { margin-bottom: 14px; }
  .prof-txt { padding: 0 6px; }
  .prof h3 { font-size: 0.98rem; }
  .prof-esp { font-size: 0.6rem; letter-spacing: 0.12em; }
  .prof .medica-reg { font-size: 0.7rem; letter-spacing: 0.03em; }
  .prof .foto-ph-nota { display: none; }
  .prof .link { gap: 8px; font-size: 0.8rem; white-space: nowrap; }
  .prof .link i { width: 12px; }
  .selo-foto { left: 8px; bottom: 8px; padding: 4px 8px; font-size: 0.54rem; }
  .novidades { grid-template-columns: 1fr; margin-top: 48px; }
  .novidades li, .novidades li:first-child, .novidades li:nth-child(odd) { padding: 26px 0; border-left: 0; border-top: 1px solid var(--salvia-linha); }
  .novidades li:first-child { border-top: 0; }
  .instituto .trajetoria-tit { margin-top: 64px; }
  .trajetoria { grid-template-columns: 1fr; row-gap: 0; margin-left: 8px; }
  .trajetoria li { padding: 0 0 30px 28px; border-top: 0; border-left: 1px solid var(--salvia-linha); }
  .trajetoria li:last-child { padding-bottom: 0; }
  .trajetoria li::before { left: -8px; top: 2px; }
  .cuid-pendente .tag-pendente { position: static; align-self: flex-start; margin: -8px 0 14px; }
  .serv { grid-template-columns: 2.2rem 1fr 36px; gap: 14px; }
  .serv-seta { width: 36px; height: 36px; }
  .serv-seta::before { left: 10px; width: 13px; }
  .serv-seta::after { right: 11px; }
  .espaco-grade { grid-template-columns: 1fr 1fr; grid-template-rows: none; height: auto; gap: 12px; }
  .esp-destaque { grid-row: auto; grid-column: 1 / -1; }
  .esp:last-child { grid-column: 1 / -1; }
  .esp img, .esp .foto-ph { height: auto; aspect-ratio: 1; }
  .esp-destaque img, .esp-destaque .foto-ph, .esp:last-child img, .esp:last-child .foto-ph { aspect-ratio: 16 / 10; }
  .esp figcaption { left: 10px; bottom: 10px; padding: 5px 11px; font-size: 0.66rem; }
  .final-in { grid-template-columns: 1fr; }
  .max { width: 180px; }
  .trajeto li { grid-template-columns: 1fr; gap: 4px; }
  .agenda, .final { padding: 80px 0; }
}

@media (max-width: 560px) {
  /* .shell { padding: 0 20px } (acima) zerava o respiro vertical do rodapé no celular */
  .rod-in { padding-top: 56px; padding-bottom: 36px; }
  .rod-base { padding-top: 22px; padding-bottom: 28px; }
  .perfil-in { gap: 44px; padding-bottom: 80px; }
  .perfil-foto { max-width: 280px; }
  .serv-topo-in { padding-bottom: 80px; }
  .agenda-acoes, .agenda-acoes .btn { width: 100%; }
  .area { padding: 18px 20px; }
  .trat { padding: 26px 24px; }
  .depo { padding: 28px 24px; }
  .mapa { aspect-ratio: 4 / 5; }
}

/* Telas muito estreitas: "Agendar consulta" do card vira "Agendar" e botões longos podem quebrar linha */
@media (max-width: 400px) {
  .prof .link-extra { display: none; }
  .btn-lg { padding-left: 22px; padding-right: 22px; white-space: normal; line-height: 1.3; text-align: center; }
}

/* =========================================================
   Conteúdos recentes: os 3 artigos mais recentes do blog
   (Blogger), montados por assets/js/blog.js a partir do feed.
   data-qtd = quantos artigos chegaram (1, 2 ou 3).
   ========================================================= */
.conteudos { background: var(--salvia-claro); }
html:not(.js) .conteudos { display: none; }   /* os artigos dependem de JavaScript */

.blog-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.blog-grade[data-qtd="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-grade[data-qtd="1"] { grid-template-columns: minmax(0, 1fr); }

/* Carregando, sem artigos ou feed indisponível: aviso discreto */
.blog-status {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 180px; margin: 0; padding: 28px 24px; text-align: center;
  font-size: 0.92rem; line-height: 1.6; color: var(--tinta-soft);
}
.blog-status svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--salvia); }
.blog-grade[data-estado="carregando"] .blog-status svg { animation: blog-pulso 1.4s ease-in-out infinite alternate; }
.blog-grade[data-estado="vazio"] .blog-status,
.blog-grade[data-estado="erro"] .blog-status { border: 1px dashed var(--salvia); border-radius: 26px; background: rgba(255, 253, 249, 0.55); }
@keyframes blog-pulso { from { opacity: 0.3; } to { opacity: 1; } }

/* Card do artigo (mesma linguagem dos cards da equipe) */
.post {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 24px; padding: 12px 12px 26px;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
  animation: surge 0.6s var(--ease) backwards;
}
.post:hover, .post:focus-within { transform: translateY(-4px); border-color: var(--salvia-linha); box-shadow: 0 22px 44px -28px rgba(67, 80, 61, 0.45); }
.post-foto { position: relative; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 22px; border-radius: 16px; background: var(--creme-2); }
.post-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.post:hover .post-foto img { transform: scale(1.03); }
.post-ph { position: absolute; inset: 0; overflow: hidden; }
.post-ph svg { position: absolute; width: 46%; max-width: 190px; right: 6%; bottom: -10%; color: var(--salvia-linha); transform: rotate(16deg); }
.post-cat {
  position: absolute; left: 10px; bottom: 10px; z-index: 1; max-width: calc(100% - 20px); pointer-events: none;
  padding: 5px 11px; border-radius: 999px; background: var(--oliva-esc); color: var(--on-esc);
  font-size: 0.6rem; font-weight: 600; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.14em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.post-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 0 12px; }
.post-tit {
  margin: 0 0 8px; font-size: 1.1rem; line-height: 1.4; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.post-data { display: block; margin-bottom: 12px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; color: var(--oliva); }
.post-resumo {
  margin: 0 0 22px; font-size: 0.92rem; line-height: 1.65; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.post .link { margin-top: auto; align-self: flex-start; }
.post .link::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }   /* card inteiro clicável */

.blog-acoes { display: flex; justify-content: center; margin-top: 48px; }
.blog-acoes[hidden] { display: none; }
.conteudos .btn-linha { border-color: var(--oliva); }
.conteudos .btn-linha:hover { background: var(--oliva); color: var(--on-esc); }

/* Card largo (imagem ao lado do texto): 1 artigo, ou o mais recente no tablet */
@media (min-width: 641px) {
  .blog-grade[data-qtd="1"] .post { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 0 clamp(28px, 4vw, 56px); padding: 12px; }
  .blog-grade[data-qtd="1"] .post-foto { margin: 0; }
  .blog-grade[data-qtd="1"] .post-txt { padding: 20px 28px 20px 0; }
  .blog-grade[data-qtd="1"] .post-tit { font-size: clamp(1.2rem, 2vw, 1.5rem); -webkit-line-clamp: 4; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .blog-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-grade[data-qtd="3"] .post:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0 28px; padding: 12px; }
  .blog-grade[data-qtd="3"] .post:first-child .post-foto { margin: 0; }
  .blog-grade[data-qtd="3"] .post:first-child .post-txt { padding: 16px 20px 16px 0; }
  .blog-grade[data-qtd="1"] .post { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
  .blog-grade[data-qtd="1"] .post-txt { padding: 16px 20px 16px 0; }
}
/* Celular: uma coluna */
@media (max-width: 640px) {
  .blog-grade, .blog-grade[data-qtd="2"] { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .post { padding: 10px 10px 24px; border-radius: 22px; }
  .post .link::after { border-radius: 22px; }
  .post-foto { margin-bottom: 20px; border-radius: 14px; }
  .post-txt { padding: 0 10px; }
  .blog-acoes { margin-top: 36px; }
  .blog-acoes .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .post, .post-foto img { transition: none; animation: none; }
  .post:hover .post-foto img { transform: none; }
  .blog-grade[data-estado="carregando"] .blog-status svg { animation: none; }
}

/* ---------- Avaliações do Google (depoimentos reais) ---------- */
/* aspas tipográficas fora do texto: a avaliação continua literal em ferramentas/conteudo.js */
.depo:not(.depo-vazio) blockquote p::before { content: "“"; }
.depo:not(.depo-vazio) blockquote p::after { content: "”"; }
.depo-rodape { display: flex; justify-content: center; margin: 40px 0 0; }

/* ---------- Páginas de serviço: H1 em frase, seções informativas ---------- */
.serv-topo h1.h1-serv { font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.12; }
.prosa .citacao:not(:last-child) { margin-bottom: 30px; }
.trat-grid-apos { margin-top: 36px; }
.trat-pendente { border-style: dashed; border-color: var(--salvia); background: rgba(255, 253, 249, 0.6); }