/* =========================================================
   Elovida — Centro de saúde popular
   Landing Page  ·  CSS único, mobile-first, sem frameworks
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Marca (extraída da identidade visual oficial) */
  --azul:        #2F57C6;
  --azul-escuro: #23459E;
  --azul-claro:  #5698E9;
  --turquesa:    #17BFA6;
  --verde:       #00857D;

  /* Neutros */
  --ink:    #10233A;
  --ink-2:  #3D5168;
  --muted:  #64788D;
  --line:   #E4EBF2;
  --soft:   #F4F8FC;
  --white:  #FFFFFF;

  --whats:  #25D366;

  --radius:   16px;
  --radius-s: 12px;
  --radius-l: 24px;

  --shadow-s: 0 1px 2px rgba(16,35,58,.06), 0 4px 14px rgba(16,35,58,.05);
  --shadow-m: 0 10px 34px rgba(16,35,58,.09);
  --shadow-cta: 0 8px 22px rgba(47,87,198,.28);

  --wrap: 1140px;
  --sec-y: clamp(60px, 8.5vw, 108px);

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
h1,h2,h3{ margin:0; font-weight:600; line-height:1.15; letter-spacing:-.02em; color:var(--ink); }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:3px solid var(--azul-claro); outline-offset:3px; border-radius:6px; }

/* ---------- 3. Utilitários ---------- */
.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }
@media (max-width:480px){ .wrap{ width:calc(100% - 32px); } }

section{ padding-block:var(--sec-y); }

.eyebrow{
  display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--verde); margin-bottom:14px;
}
.h2{ font-size:clamp(1.65rem, 4.2vw, 2.6rem); }
.h3{ font-size:1.05rem; font-weight:600; }
.lead{ color:var(--ink-2); font-size:clamp(1rem,2.4vw,1.1rem); margin-top:14px; }
.center{ text-align:center; }
.sec-head{ max-width:640px; margin-inline:auto; }
.sec-head .lead{ margin-top:12px; }

/* Botões */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 28px; border-radius:999px; font-weight:600; font-size:1rem;
  line-height:1.2; text-align:center; transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
  min-height:56px;
}
.btn svg{ flex:none; }
.btn-primary{ background:var(--azul); color:#fff; box-shadow:var(--shadow-cta); }
.btn-primary:hover{ background:var(--azul-escuro); transform:translateY(-2px); }
.btn-ghost{ background:#fff; color:var(--azul); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--azul-claro); background:var(--soft); }
.btn-lg{ padding:20px 38px; font-size:1.06rem; min-height:64px; }
@media (max-width:480px){ .btn-lg{ padding:18px 22px; font-size:.95rem; min-height:58px; } }
.btn-block{ width:100%; }

/* ---------- 4. Header ---------- */
.header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.header.is-stuck{ border-color:var(--line); box-shadow:0 2px 14px rgba(16,35,58,.05); }
.header__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:72px; }
.brand img{ height:40px; width:auto; }
.nav{ display:none; }
.nav a{ font-size:.94rem; color:var(--ink-2); font-weight:500; padding:8px 2px; transition:color .15s; }
.nav a:hover{ color:var(--azul); }
.header .btn{ padding:12px 22px; min-height:46px; font-size:.92rem; box-shadow:none; }
.header__cta{ display:none; }
@media (min-width:900px){
  .nav{ display:flex; gap:30px; }
  .header__cta{ display:inline-flex; }
  .brand img{ height:46px; }
  .header__in{ height:84px; }
}

/* ---------- 5. Hero ---------- */
.hero{
  position:relative; padding-block:clamp(36px,6vw,74px) clamp(52px,7vw,96px);
  background:
    radial-gradient(1100px 520px at 88% -10%, #EAF6FB 0%, rgba(234,246,251,0) 62%),
    linear-gradient(180deg, #F7FBFE 0%, #FFFFFF 78%);
}
.hero__grid{ display:grid; gap:clamp(30px,5vw,60px); align-items:center; }
@media (min-width:940px){ .hero__grid{ grid-template-columns:1.04fr .96fr; } }

.hero h1{
  font-size:clamp(2.05rem, 5.6vw, 3.4rem); font-weight:700; line-height:1.08;
  max-width:14ch;
}
.hero h1 em{ font-style:normal; color:var(--azul); }
.hero__sub{ margin-top:20px; font-size:clamp(1.02rem,2.6vw,1.16rem); color:var(--ink-2); max-width:44ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero__actions .btn{ flex:1 1 240px; }

.trust{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 18px; margin-top:28px; max-width:470px; }
.trust li{ display:flex; align-items:center; gap:9px; font-size:.9rem; color:var(--ink-2); font-weight:500; }
.trust svg{ flex:none; color:var(--turquesa); }

.hero__media{ position:relative; }
.hero__media img{
  width:100%; border-radius:var(--radius-l); box-shadow:var(--shadow-m);
  aspect-ratio:4/3; object-fit:cover;
}
.hero__badge{
  position:absolute; left:14px; bottom:-18px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 16px; box-shadow:var(--shadow-m);
  display:flex; align-items:center; gap:11px; max-width:84%;
}
.hero__badge strong{ display:block; font-size:.9rem; font-weight:600; line-height:1.3; }
.hero__badge span{ font-size:.78rem; color:var(--muted); }
.hero__badge .dot{
  width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--azul),var(--turquesa)); color:#fff;
}
@media (min-width:940px){ .hero__badge{ left:-22px; bottom:26px; } }

/* ---------- 6. Especialidades ---------- */
.esp{ background:var(--white); }
.esp__grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:40px;
}
.esp__card{ flex:0 1 calc(50% - 6px); }
@media (min-width:640px){
  .esp__grid{ gap:14px; }
  .esp__card{ flex:0 1 calc(33.333% - 10px); }
}
@media (min-width:980px){ .esp__card{ flex:0 1 calc(25% - 11px); } }

.esp__card{
  display:flex; align-items:center; gap:12px; min-width:0; padding:18px 16px;
  border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.esp__card:hover{ border-color:#CFE0F5; transform:translateY(-3px); box-shadow:var(--shadow-s); }
.esp__ico{
  width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:var(--soft); color:var(--azul);
}
.esp__card span{ font-size:.93rem; font-weight:500; line-height:1.3; color:var(--ink); min-width:0; overflow-wrap:break-word; hyphens:auto; }
@media (max-width:480px){
  .esp__card{ padding:15px 12px; gap:9px; }
  .esp__card span{ font-size:.82rem; }
  .esp__ico{ width:34px; height:34px; border-radius:10px; }
}
.esp__foot{ margin-top:34px; text-align:center; }
.esp__note{ font-size:.88rem; color:var(--muted); margin-top:16px; }

/* ---------- 6b. Destaques (especialidades mais procuradas) ---------- */
.dest{ margin-top:clamp(56px,7vw,86px); }
.dest__head{ text-align:center; max-width:620px; margin:0 auto 34px; }
.dest__head h3{ font-size:clamp(1.35rem,3.2vw,1.9rem); }
.dest__head p{ margin-top:10px; color:var(--ink-2); font-size:.97rem; }

.dest__grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.dest__card{ flex:1 1 100%; }
@media (min-width:640px){ .dest__grid{ gap:20px; } .dest__card{ flex:0 1 calc(50% - 10px); } }
@media (min-width:980px){ .dest__card{ flex:0 1 calc(33.333% - 14px); } }

.dest__card{
  display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-l); padding:26px 24px 24px; box-shadow:var(--shadow-s);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.dest__card:hover{ border-color:#CFE0F5; transform:translateY(-3px); box-shadow:var(--shadow-m); }
.dest__top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.dest__ico{
  width:46px; height:46px; flex:none; border-radius:13px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg,var(--azul) 0%, var(--turquesa) 100%);
}
.dest__top h4{ margin:0; font-size:1.08rem; font-weight:600; letter-spacing:-.01em; }
.dest__card > p{ font-size:.92rem; color:var(--ink-2); }
.dest__card > p{ flex:1; margin-bottom:20px; }
.dest__acts{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.dest__acts .btn{ flex:1 1 auto; }
.dest__acts .btn{ min-height:48px; padding:12px 22px; font-size:.92rem; }
.dest__link{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-size:.88rem; font-weight:600; color:var(--azul); padding:6px;
}
.dest__link:hover{ color:var(--azul-escuro); }

/* ---------- 7. Benefícios ---------- */
.ben{ background:var(--soft); }
.ben__grid{ display:grid; gap:16px; margin-top:44px; }
@media (min-width:700px){ .ben__grid{ grid-template-columns:repeat(2,1fr); gap:20px; } }
@media (min-width:1040px){ .ben__grid{ grid-template-columns:repeat(4,1fr); } }
.ben__card{ background:#fff; border-radius:var(--radius-l); padding:28px 24px 30px; box-shadow:var(--shadow-s); }
.ben__ico{
  width:50px; height:50px; border-radius:14px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--azul) 0%, var(--turquesa) 100%); margin-bottom:18px;
}
.ben__card h3{ font-size:1.03rem; margin-bottom:8px; }
.ben__card p{ font-size:.92rem; color:var(--ink-2); }

/* ---------- 8. Como funciona ---------- */
.steps__grid{ display:grid; gap:14px; margin-top:44px; counter-reset:s; }
@media (min-width:820px){ .steps__grid{ grid-template-columns:repeat(3,1fr); gap:22px; } }
.step{
  position:relative; padding:30px 26px 32px; border-radius:var(--radius-l);
  border:1px solid var(--line); background:#fff;
}
.step__n{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--azul); color:#fff; font-weight:600; font-size:1.02rem; margin-bottom:18px;
}
.step h3{ font-size:1.02rem; margin-bottom:7px; }
.step p{ font-size:.92rem; color:var(--ink-2); }
.steps__cta{ margin-top:38px; text-align:center; }

/* ---------- 9. Estrutura ---------- */
.estrutura{ background:var(--white); }
.gal{ display:grid; gap:12px; margin-top:42px; grid-template-columns:repeat(2,1fr); }
.gal img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius); aspect-ratio:4/3; }
.gal figure{ margin:0; position:relative; overflow:hidden; border-radius:var(--radius); }
.gal figcaption{
  position:absolute; left:12px; bottom:12px; background:rgba(255,255,255,.93);
  color:var(--ink); font-size:.76rem; font-weight:500; padding:5px 11px; border-radius:999px;
  backdrop-filter:blur(4px);
}
@media (min-width:760px){
  .gal{ grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:14px; }
  .gal figure{ grid-column:span 1; }
  .gal figure:nth-child(1){ grid-column:span 2; grid-row:span 2; }
  .gal figure:nth-child(4){ grid-column:span 2; }
  .gal figure:nth-child(1) img{ aspect-ratio:auto; }
  .gal figure img{ aspect-ratio:auto; }
}

/* ---------- 10. Depoimentos ---------- */
.dep{ background:var(--soft); }
.dep__grid{ display:grid; gap:16px; margin-top:44px; }
@media (min-width:820px){ .dep__grid{ grid-template-columns:repeat(3,1fr); gap:20px; } }
.dep__card{ background:#fff; border-radius:var(--radius-l); padding:28px 26px; box-shadow:var(--shadow-s); display:flex; flex-direction:column; }
.stars{ display:flex; gap:3px; color:#F5A623; margin-bottom:14px; }
.dep__card p{ font-size:.95rem; color:var(--ink-2); flex:1; }
.dep__who{ margin-top:18px; font-size:.86rem; font-weight:600; color:var(--ink); }
.dep__foot{ margin-top:30px; text-align:center; font-size:.86rem; color:var(--muted); }
.gbadge{
  display:inline-flex; align-items:center; gap:10px; margin-top:20px;
  padding:9px 18px; border-radius:999px; background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-s); font-size:.87rem; color:var(--ink-2); font-weight:500;
  transition:border-color .16s ease, transform .16s ease;
}
.gbadge:hover{ border-color:#CFE0F5; transform:translateY(-2px); }
.gbadge .stars{ margin:0; }
.gbadge b{ color:var(--ink); font-weight:600; }

/* ---------- 11. Localização ---------- */
.local__grid{ display:grid; gap:26px; margin-top:42px; align-items:start; }
@media (min-width:920px){ .local__grid{ grid-template-columns:.92fr 1.08fr; gap:40px; } }
.local__info{ border:1px solid var(--line); border-radius:var(--radius-l); padding:clamp(24px,3vw,34px); }
.local__info h3{ font-size:1.18rem; margin-bottom:20px; }
.info-list li{ display:flex; gap:13px; padding:13px 0; border-top:1px solid var(--line); font-size:.93rem; color:var(--ink-2); }
.info-list li:first-child{ border-top:0; padding-top:0; }
.info-list svg{ flex:none; color:var(--azul); margin-top:3px; }
.info-list strong{ display:block; color:var(--ink); font-weight:600; font-size:.88rem; margin-bottom:2px; }
.local__actions{ display:grid; gap:10px; margin-top:24px; }
@media (min-width:520px){ .local__actions{ grid-template-columns:1fr 1fr; } }
.map{
  border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--line);
  background:var(--soft); min-height:330px; display:grid; place-items:center;
}
.map iframe{ width:100%; height:100%; min-height:420px; border:0; display:block; }
.map__ph{ text-align:center; color:var(--muted); font-size:.88rem; padding:30px; }

/* ---------- 12. CTA final ---------- */
.final{
  background:linear-gradient(130deg, var(--azul) 0%, #2A73C8 52%, var(--turquesa) 100%);
  color:#fff; text-align:center;
}
.final h2{ color:#fff; font-size:clamp(1.7rem,4.4vw,2.7rem); max-width:16ch; margin-inline:auto; }
.final p{ color:rgba(255,255,255,.92); margin-top:16px; max-width:46ch; margin-inline:auto; font-size:1.03rem; }
.final .btn{ margin-top:32px; background:#fff; color:var(--azul); box-shadow:0 10px 30px rgba(8,28,60,.22); }
.final .btn:hover{ background:#F2F7FF; }
.final small{ display:block; margin-top:18px; font-size:.84rem; color:rgba(255,255,255,.8); }

/* ---------- 13. Rodapé ---------- */
.footer{ background:#fff; border-top:1px solid var(--line); padding-block:clamp(40px,5vw,60px) 30px; }
.footer__grid{ display:grid; gap:28px; }
@media (min-width:780px){ .footer__grid{ grid-template-columns:1.3fr 1fr 1fr; gap:40px; } }
.footer img{ height:46px; width:auto; margin-bottom:16px; }
.footer p, .footer li{ font-size:.87rem; color:var(--muted); line-height:1.7; }
.footer h4{ font-size:.82rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink); margin:0 0 12px; }
.footer a:hover{ color:var(--azul); }
.footer__bottom{
  margin-top:34px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between;
  font-size:.79rem; color:var(--muted);
}
.footer__bottom a{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- 14. WhatsApp flutuante + barra mobile ---------- */
.wa-float{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:70;
  width:58px; height:58px; border-radius:50%; background:var(--whats); color:#fff;
  display:grid; place-items:center; box-shadow:0 8px 24px rgba(37,211,102,.4);
  transition:transform .18s ease;
}
.wa-float:hover{ transform:scale(1.06); }
@media (max-width:767px){ .wa-float{ bottom:calc(76px + env(safe-area-inset-bottom)); width:52px; height:52px; } }

.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:65; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line);
  display:block;
}
.sticky-bar .btn{ width:100%; min-height:52px; padding:14px 18px; font-size:.97rem; }
@media (min-width:768px){ .sticky-bar{ display:none; } }

/* ---------- 15. Cookies (LGPD) ---------- */
.cookies{
  position:fixed; left:14px; right:14px; bottom:14px; z-index:80;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-m); padding:16px 18px; display:none;
  gap:14px; align-items:center; flex-wrap:wrap;
}
.cookies.is-on{ display:flex; }
.cookies p{ font-size:.82rem; color:var(--ink-2); flex:1 1 280px; line-height:1.55; }
.cookies a{ color:var(--azul); text-decoration:underline; text-underline-offset:2px; }
.cookies__acts{ display:flex; gap:8px; flex:0 0 auto; }
.cookies button{
  padding:10px 18px; border-radius:999px; font-size:.84rem; font-weight:600; min-height:42px;
}
.cookies .ok{ background:var(--azul); color:#fff; }
.cookies .no{ background:var(--soft); color:var(--ink-2); }
@media (max-width:767px){
  .cookies{ bottom:calc(70px + env(safe-area-inset-bottom)); left:10px; right:10px; padding:13px 14px; gap:10px; }
  .cookies p{ font-size:.75rem; line-height:1.45; flex:1 1 100%; }
  .cookies__acts{ width:100%; }
  .cookies__acts button{ flex:1; min-height:38px; padding:8px 14px; font-size:.8rem; }
}

/* ---------- 15b. Página de especialidade ---------- */
.proc{
  display:grid; gap:10px; margin-top:36px;
  grid-template-columns:repeat(auto-fill, minmax(228px, 1fr));
}
.proc li{
  display:flex; align-items:flex-start; gap:10px; padding:15px 16px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-s);
  font-size:.9rem; line-height:1.4; color:var(--ink);
}
.proc svg{ flex:none; margin-top:3px; color:var(--turquesa); }

.texto{ max-width:660px; margin-inline:auto; }
.texto p{ color:var(--ink-2); font-size:1rem; margin-top:14px; }

.chips{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:30px; }
.chips a{
  padding:10px 17px; border:1px solid var(--line); border-radius:999px;
  font-size:.88rem; color:var(--ink-2); background:#fff; transition:border-color .16s, color .16s;
}
.chips a:hover{ border-color:#CFE0F5; color:var(--azul); }

.mini-local{ text-align:center; }
.mini-local p{ color:var(--ink-2); font-size:.97rem; margin-top:12px; }
.mini-local .local__actions{ max-width:470px; margin:26px auto 0; }

/* ---------- 16. Páginas de texto ---------- */
.doc{ padding-block:clamp(48px,6vw,80px); }
.doc__in{ width:min(100% - 40px, 760px); margin-inline:auto; }
.doc h1{ font-size:clamp(1.7rem,4vw,2.4rem); margin-bottom:8px; }
.doc .upd{ font-size:.84rem; color:var(--muted); margin-bottom:34px; }
.doc h2{ font-size:1.15rem; margin:34px 0 10px; }
.doc p, .doc li{ font-size:.95rem; color:var(--ink-2); margin-bottom:12px; }
.doc ul{ list-style:disc; padding-left:22px; margin-bottom:16px; }
.doc a{ color:var(--azul); text-decoration:underline; text-underline-offset:3px; }
.doc .back{ display:inline-block; margin-bottom:26px; font-size:.88rem; color:var(--azul); font-weight:500; }

/* ---------- 17. Reveal ---------- */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  *{ animation:none !important; }
}