/* ==========================================
   Hotsite — Saúde (Crisoft)
   Performance-first · Mobile-first
   ========================================== */

:root{
  /* Tema (saúde) */
  --bg:#ffffff;
  --fg:#1d2430;
  --muted:#5f6b7a;
  --line:#e8edf3;

  --brand:#1c9f7d;       /* cor principal (saúde) */
  --brand-2:#22c4a0;     /* nuance para gradientes e hovers */
  --cta:#2563eb;         /* CTA secundário (links/botões) */
  --cta-2:#0ea5e9;

  --radius:14px;
  --radius-lg:18px;
  --shadow:0 10px 30px rgba(9, 30, 66, .08);

  --maxw:1120px;
  --pad:clamp(16px, 2.5vw, 28px);
  --pad-lg:clamp(24px, 4vw, 48px);

  --fs:16px;

  /* Hero */
  --hero-overlay: linear-gradient(
  90deg, 
  rgba(0,0,0,.75) 0%, 
  rgba(0,0,0,.55) 55%, 
  rgba(0,0,0,.35) 100%
);

}

*{box-sizing:border-box}
html{font-size:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:var(--fs)/1.55 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Acessibilidade básica */
a{color:var(--cta-2); text-decoration:none}
a:hover{text-decoration:underline}
:focus{outline:2px solid var(--cta); outline-offset:2px}
:focus:not(:focus-visible){outline:none}

/* Utilitárias */
.center{text-align:center}
.container{width:min(100%, var(--maxw)); margin-inline:auto; padding-inline:var(--pad)}

/* =========================
   WhatsApp flutuante
   ========================= */
.whats-float{
  position:fixed; right:16px; bottom:16px; z-index:40;
  display:inline-flex; gap:10px; align-items:center;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#ffffff; font-weight:800; letter-spacing:.2px;
  padding:12px 16px; border-radius:999px; box-shadow:var(--shadow);
  transform:translateY(0);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
  text-decoration:none;
}
.whats-float img{width:20px; height:20px; filter:drop-shadow(0 1px 0 rgba(0,0,0,.18))}
.whats-float:hover{transform:translateY(-1px); text-decoration:none; filter:brightness(1.05)}

/* =========================
   Brand (topo)
   ========================= */
.brand{ padding: clamp(16px, 3vw, 28px) var(--pad) }
.brand-logo{ display:block; margin:0 auto 8px; width:min(220px, 60vw); height:auto }
.brand-sub{ color:var(--muted); margin:0 }

/* =========================
   HERO (banner)
   - Desktop: copy sobreposto
   - Mobile (≤1024px): imagem em cima e copy abaixo
   ========================= */
.hero{ position:relative; isolation:isolate; background:#f8fafc }
.hero-inner{ position:relative; width:100%; max-width:1800px; margin:0 auto; overflow:hidden }
.hero picture, .hero img{ display:block; width:100% }
.hero img{
  aspect-ratio:16/9;                /* reserva espaço (evita CLS) */
  object-fit:cover; object-position:center;
  filter:contrast(1.03) saturate(1.02);
}

/* Copy sobre o banner (desktop) */
.hero-copy{
  position:absolute; inset:auto 6% 8% 6%;
  background:var(--hero-overlay);
  color:#fff;
  padding:20px clamp(16px, 3vw, 28px);
  border-radius:var(--radius-lg);
  max-width:min(860px, 92%);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  animation:fadeUp .45s ease both .05s;
}
.hero-copy h1{ margin:0 0 .5rem; font-size:clamp(28px, 4.6vw, 48px); line-height:1.12 }
.hero-copy p{ margin:.35rem 0 .9rem; color:#eef3f7 }
.bullets{ display:flex; gap:10px; flex-wrap:wrap; margin:.25rem 0 0; padding:0 }
.bullets li{
  list-style:none; padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.14); color:#eef3f7; font-size:.95rem
}

/* Mobile-first: hero-copy vira bloco abaixo do banner */
@media (max-width: 1024px){
  .hero-copy{
    position:static; margin: clamp(10px, 2vw, 14px) var(--pad);
    color:var(--fg);
    background:#ffffff;
    box-shadow:var(--shadow);
  }
  .hero-copy p{ color:var(--muted) }
  .bullets li{ background:#f0f4f9; color:#415063 }
}

/* =========================
   Botões
   ========================= */
.btn-primary,.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:12px 18px; border-radius:12px; font-weight:800; text-decoration:none;
  border:0; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primary{
  background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff;
  box-shadow:var(--shadow);
}
.btn-primary:hover{ filter:brightness(1.06); text-decoration:none; transform:translateY(-1px) }

.btn-ghost{
  border:1px solid var(--line); color:var(--fg); background:#ffffff;
}
.btn-ghost:hover{ background:#f6f9fc; text-decoration:none; transform:translateY(-1px) }

.cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin:.7rem 0 .25rem }

/* =========================
   CTA strip (banner inferior)
   ========================= */
.cta-strip{
  background:linear-gradient(90deg, #f0fbf7 0%, #eff6ff 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top: var(--pad-lg);
}
.cta-strip-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px var(--pad);
}
.cta-strip strong{ font-size:clamp(16px, 2.2vw, 20px); color:#0f172a }

/* Stack no mobile */
@media (max-width: 640px){
  .cta-strip-inner{ flex-direction:column; align-items:stretch }
  .cta-strip .btn-primary{ width:100% }
}

/* =========================
   Destaques (5 diferenciais)
   ========================= */
.highlights{ padding: var(--pad-lg) var(--pad) }
.highlights h2{
  margin:0 0 1.2rem; font-size:clamp(22px, 3.2vw, 32px)
}
.highlights-grid{
  width:min(100%, var(--maxw)); margin:0 auto;
  display:grid; gap:18px;
  grid-template-columns: repeat(5, minmax(0,1fr));
}
.highlight{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; text-align:left; box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.highlight:hover{ transform:translateY(-2px); box-shadow:0 12px 36px rgba(9,30,66,.10) }
.highlight img{
  width:100%; height:140px; object-fit:cover; border-radius:10px; display:block; margin:0 0 10px;
}
.highlight h3{ margin:.35rem 0 .25rem; font-size:1.05rem }
.highlight p{ margin:0; color:var(--muted) }

/* Responsivo grid dos diferenciais */
@media (max-width: 1100px){
  .highlights-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) }
}
@media (max-width: 720px){
  .highlights-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) }
}
@media (max-width: 480px){
  .highlights-grid{ grid-template-columns: 1fr }
}

/* =========================
   Cidades (chips)
   ========================= */
.cities{
  padding: var(--pad-lg) var(--pad);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)
}
.cities h2{ margin:0 0 .6rem }
.city-list{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  padding:0; margin:0
}
.city-list li{
  list-style:none; padding:10px 14px; border-radius:999px;
  background:#f0f5ff; color:#0f2b6b; border:1px dashed #cfe0ff;
  font-weight:600;
}

/* =========================
   FAQ
   ========================= */
.faq{ padding: var(--pad-lg) var(--pad); background:#fafcff }
.faq h2{ margin:0 0 .9rem; font-size:clamp(20px, 2.8vw, 28px) }
.faq details{
  width:min(100%, var(--maxw)); margin:10px auto; padding:12px 14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow)
}
.faq summary{ cursor:pointer; font-weight:800; color:#0f172a }
.faq p{ margin:.6rem 0 0; color:var(--muted) }

/* =========================
   Rodapé
   ========================= */
.footer{
  padding:20px var(--pad);
  border-top:1px solid var(--line);
  color:#415063; text-align:center;
  background:#f7fafc;
}
.footer a{ color:#0f4cc6; font-weight:700 }
.footer a:hover{ text-decoration:underline }
address{ font-style:normal; margin-bottom:.45rem }

/* =========================
   Animações leves
   ========================= */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(8px) }
  to  { opacity:1; transform:translateY(0) }
}

/* =========================
   Preferências de movimento
   ========================= */
@media (prefers-reduced-motion: reduce){
  .whats-float, .btn-primary, .btn-ghost, .highlight{ transition:none }
  .hero-copy{ animation:none }
}