/* =========================================================
   Dr. Daniel Consul — Urologista
   Estilos globais · mobile-first · HTML/CSS/JS estático
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Marca (calibrada pelas logos) */
  --verde:        #04D9A1;   /* menta vivo — destaques/decoração */
  --verde-claro:  #ADFCB9;   /* menta claro — fundos sutis/ícones */
  --verde-escuro: #0B8A66;   /* teal legível — texto sobre branco */
  --verde-hover:  #0FBF8F;
  --navy:         #0D172B;   /* navy principal — seções escuras/CTA */
  --navy-2:       #1D1B46;   /* degradê de cards */
  --navy-3:       #222054;
  --navy-4:       #282568;
  --tinta:        #0E0345;   /* títulos/texto forte */
  --texto:        #2b2d42;   /* corpo */
  --texto-suave:  #5b6472;
  --branco:       #ffffff;
  --cinza-bg:     #f6f7fb;   /* fundos claros alternados */
  --lavanda:      #f4f4ff;
  --borda:        #e6e8f0;

  /* Tipografia */
  --f-titulo: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-corpo:  "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Espaçamento / forma */
  --container: 1180px;
  --radius: 16px;
  --radius-lg: 28px;
  --pill: 999px;
  --sombra: 0 18px 50px rgba(13,23,43,.10);
  --sombra-sm: 0 8px 24px rgba(13,23,43,.07);
  --transicao: .25s ease;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:90px; }
body{
  font-family:var(--f-corpo);
  color:var(--texto);
  background:var(--branco);
  line-height:1.7;
  font-weight:400;
  overflow-x:hidden;
}
img,svg,picture{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; padding:0; }
:focus-visible{ outline:3px solid var(--verde); outline-offset:3px; border-radius:4px; }

h1,h2,h3,h4,h5,h6{ font-family:var(--f-titulo); color:var(--tinta); line-height:1.15; font-weight:500; }
h1{ font-size:clamp(2.4rem,6vw,4.2rem); letter-spacing:-.5px; }
h2{ font-size:clamp(1.8rem,3.6vw,2.6rem); }
h3{ font-size:clamp(1.3rem,2.4vw,1.7rem); }
p{ color:var(--texto-suave); }

/* ---------- Utilitários ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:22px; }
.section{ padding-block:clamp(3.5rem,8vw,6.5rem); }
.kicker{
  font-family:var(--f-titulo);
  font-size:.8rem; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--verde-escuro); margin-bottom:14px; display:inline-block;
}
.section--dark .kicker{ color:var(--verde); }
.lead{ font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--texto-suave); max-width:60ch; }
.center{ text-align:center; }
.mt-2{ margin-top:1.2rem; } .mt-3{ margin-top:2rem; }
.muted{ color:var(--texto-suave); }

/* Fundos de seção */
.section--dark{ background:var(--navy); color:#dfe5f0; }
.section--dark h1,.section--dark h2,.section--dark h3{ color:#fff; }
.section--dark p{ color:#aeb6c9; }
.section--soft{ background:var(--cinza-bg); }
.section--lav{ background:var(--lavanda); }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--f-titulo); font-size:1rem; font-weight:500; line-height:1;
  padding:15px 32px; border-radius:var(--pill); border:2px solid transparent;
  cursor:pointer; transition:var(--transicao); text-align:center; white-space:nowrap;
}
.btn--primary{ background:var(--navy); color:#fff; }
.btn--primary:hover{ background:#13213d; transform:translateY(-2px); box-shadow:var(--sombra-sm); }
.btn--mint{ background:var(--verde); color:var(--navy); }
.btn--mint:hover{ background:var(--verde-hover); transform:translateY(-2px); box-shadow:var(--sombra-sm); }
.btn--ghost{ background:transparent; color:var(--navy); border-color:var(--borda); }
.btn--ghost:hover{ border-color:var(--navy); transform:translateY(-2px); }
.btn--wpp{ background:#25D366; color:#fff; }
.btn--wpp:hover{ background:#1ebe5b; transform:translateY(-2px); box-shadow:var(--sombra-sm); }
.section--dark .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.25); }
.section--dark .btn--ghost:hover{ border-color:#fff; }
.hero .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.3); }
.hero .btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.btn svg{ width:18px; height:18px; flex:none; }

.linkmore{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-titulo);
  font-weight:500; color:var(--verde-escuro); transition:var(--transicao);
}
.section--dark .linkmore{ color:var(--verde); }
.linkmore::before{ content:"+"; display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  border:1.5px solid currentColor; font-size:1rem; transition:var(--transicao); }
.linkmore:hover::before{ background:var(--verde); border-color:var(--verde); color:var(--navy); }

/* Lista com marcador de check */
.ticklist{ display:grid; gap:.7rem; margin-top:1rem; }
.ticklist li{ position:relative; padding-left:2rem; color:var(--texto-suave); }
.ticklist li::before{ content:""; position:absolute; left:0; top:.35em; width:18px; height:18px; border-radius:50%;
  background:var(--verde-claro); }
.ticklist li::after{ content:""; position:absolute; left:6px; top:.55em; width:5px; height:9px;
  border:solid var(--verde-escuro); border-width:0 2px 2px 0; transform:rotate(45deg); }
.section--dark .ticklist li{ color:#c4cbdd; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--borda);
  transition:box-shadow var(--transicao);
}
.site-header.scrolled{ box-shadow:0 6px 24px rgba(13,23,43,.07); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:74px; }
.brand img{ height:50px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:1.6rem; }
.nav-links > li > a{
  font-family:var(--f-titulo); font-weight:500; font-size:.97rem; color:var(--tinta);
  padding:8px 0; position:relative; transition:color var(--transicao); white-space:nowrap;
}
.nav-links > li > a:hover{ color:var(--verde-escuro); }
.nav-links > li > a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--verde);
  transition:width var(--transicao);
}
.nav-links > li > a:hover::after{ width:100%; }

/* Dropdown */
.has-sub{ position:relative; }
.has-sub > a::after{ content:none; }
.submenu{
  position:absolute; left:0; top:calc(100% + 12px); min-width:300px;
  background:#fff; border:1px solid var(--borda); border-radius:14px; box-shadow:var(--sombra);
  padding:10px; opacity:0; visibility:hidden; transform:translateY(8px); transition:var(--transicao);
}
.has-sub:hover .submenu, .has-sub:focus-within .submenu{ opacity:1; visibility:visible; transform:translateY(0); }
.submenu a{ display:block; padding:9px 14px; border-radius:9px; font-size:.92rem; color:var(--texto); transition:var(--transicao); }
.submenu a:hover{ background:var(--cinza-bg); color:var(--verde-escuro); }

.nav-cta{ display:flex; align-items:center; gap:.8rem; }
.nav-menu .nav-cta{ display:none; } /* CTA dentro do menu só aparece no mobile */
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:26px; height:2px; background:var(--navy); margin:5px 0; transition:var(--transicao); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; background:radial-gradient(120% 120% at 80% 0%, #16224a 0%, var(--navy) 55%);
  color:#fff; overflow:hidden;
}
.hero::after{ /* forma orgânica de "rim" sutil */
  content:""; position:absolute; right:-8%; top:-10%; width:520px; height:520px;
  background:radial-gradient(circle at center, rgba(4,217,161,.22), transparent 62%); filter:blur(10px);
}
.hero .hero-top{ position:relative; z-index:2; display:grid; gap:2.5rem;
  padding-block:clamp(3rem,7vw,5rem) clamp(1.6rem,3vw,2.4rem);
  grid-template-columns:1fr; align-items:center; }
.hero h1{ color:#fff; }
.hero .crm{ font-family:var(--f-titulo); letter-spacing:2px; font-size:.8rem; color:var(--verde);
  text-transform:uppercase; margin-bottom:18px; display:inline-block; }
.hero p{ color:#c4cbdd; font-size:1.15rem; max-width:52ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }

/* Foto do hero */
.hero-photo{ position:relative; }
.hero-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 12%;
  border-radius:var(--radius-lg); border-top-right-radius:6px; box-shadow:var(--sombra);
  border:1px solid rgba(255,255,255,.10); }
.hero-photo::after{ content:""; position:absolute; inset:auto -14px -14px auto; width:150px; height:150px;
  background:radial-gradient(circle at center, rgba(4,217,161,.35), transparent 65%); filter:blur(6px); z-index:-1; }

/* Faixa de destaques */
.hero-stats-band{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,1fr);
  gap:1.4rem 1rem; padding-top:1.6rem; padding-bottom:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid rgba(255,255,255,.12); }
.hero-stats-band .hstat .num{ font-family:var(--f-titulo); font-weight:500; display:block;
  font-size:clamp(1.45rem,3vw,2rem); color:var(--verde); line-height:1.1; }
.hero-stats-band .hstat span:last-child{ display:block; font-size:.85rem; color:#aeb6c9; margin-top:.25rem; }

.hero-card{
  background:linear-gradient(160deg,#1a2342,#141d38); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg); border-top-right-radius:4px; padding:2rem; box-shadow:var(--sombra);
}
.hero-card h3{ color:#fff; font-size:1.15rem; }
.hero-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; margin-top:1.2rem; }
.hero-stats .num{ font-family:var(--f-titulo); font-size:1.9rem; color:var(--verde); font-weight:500; }
.hero-stats span{ display:block; font-size:.85rem; color:#aeb6c9; }

/* =========================================================
   SPLIT (imagem + texto)
   ========================================================= */
.split{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }
.split .media{
  border-radius:var(--radius-lg); border-top-right-radius:4px; overflow:hidden; min-height:300px;
  background:linear-gradient(160deg,#16224a,var(--navy)); box-shadow:var(--sombra); position:relative;
}
.split .media img{ width:100%; height:100%; object-fit:cover; }
.split .media .ph{ position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.5); font-family:var(--f-titulo); }

/* =========================================================
   CARDS — valores (degradê)
   ========================================================= */
.values{ display:grid; gap:0; grid-template-columns:1fr; }
.value{ padding:clamp(2rem,4vw,3rem); color:#fff; }
.value:nth-child(1){ background:var(--navy); }
.value:nth-child(2){ background:var(--navy-2); }
.value:nth-child(3){ background:var(--navy-3); }
.value:nth-child(4){ background:var(--navy-4); }
.value .n{ display:grid; place-items:center; width:64px; height:64px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4); font-family:var(--f-titulo); font-size:1.5rem; margin-bottom:1.4rem;
  transition:var(--transicao); }
.value:hover .n{ background:var(--verde-claro); border-color:var(--verde-claro); color:var(--navy); }
.value h3{ color:#fff; font-size:1.15rem; margin-bottom:.6rem; }
.value p{ color:#b9c0d4; font-size:.95rem; }

/* =========================================================
   CARDS — tratamentos
   ========================================================= */
.grid-cards{ display:grid; gap:1.4rem; grid-template-columns:1fr; }
.card{
  background:#fff; border:1px solid var(--borda); border-radius:var(--radius); padding:1.8rem;
  transition:var(--transicao);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--sombra); border-color:transparent; }
.card .ico{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:var(--verde-claro); color:var(--navy); margin-bottom:1.1rem; }
.card .ico svg{ width:26px; height:26px; }
.card h3{ font-size:1.1rem; margin-bottom:.5rem; }
.card p{ font-size:.95rem; }

/* =========================================================
   DEPOIMENTO
   ========================================================= */
.quote{ max-width:820px; margin-inline:auto; text-align:center; }
.quote .mark{ font-family:var(--f-titulo); font-size:5rem; line-height:.5; color:var(--verde); }
.quote h2{ font-weight:500; }
.quote .who{ margin-top:1.5rem; font-family:var(--f-titulo); color:var(--tinta); font-weight:500; }
.quote .who span{ display:block; font-family:var(--f-corpo); font-weight:400; color:var(--texto-suave); font-size:.9rem; }

/* =========================================================
   AGENDAMENTO / CONTATO
   ========================================================= */
.book{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:start; }
.info-list{ display:grid; gap:1.1rem; margin-top:1.5rem; }
.info-list li{ display:flex; gap:.9rem; align-items:flex-start; }
.info-list .ico{ flex:none; width:42px; height:42px; border-radius:12px; background:var(--verde-claro);
  color:var(--navy); display:grid; place-items:center; }
.info-list .ico svg{ width:20px; height:20px; }
.info-list strong{ color:var(--tinta); font-family:var(--f-titulo); font-weight:500; display:block; }
.info-list a{ color:var(--texto-suave); }
.info-list a:hover{ color:var(--verde-escuro); }

.formbox{ background:#fff; border:1px solid var(--borda); border-radius:var(--radius-lg); padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--sombra-sm); }
.formbox label{ display:block; font-family:var(--f-titulo); font-weight:500; color:var(--tinta); font-size:.9rem; margin:0 0 6px; }
.formbox input,.formbox textarea{
  width:100%; padding:13px 16px; border:2px solid var(--borda); border-radius:14px; font:inherit;
  color:var(--tinta); background:#fff; margin-bottom:1rem; transition:var(--transicao); resize:vertical;
}
.formbox input:focus,.formbox textarea:focus{ outline:none; border-color:var(--verde); }
.map-frame{ border:0; width:100%; height:280px; border-radius:var(--radius); }

.clinic-grid{ display:grid; gap:1.4rem; grid-template-columns:1fr; }
.clinic{ background:#fff; border:1px solid var(--borda); border-radius:var(--radius); overflow:hidden; }
.clinic .body{ padding:1.4rem; }
.clinic h3{ font-size:1.1rem; }
.clinic p{ font-size:.92rem; margin-top:.3rem; }

/* Convênios */
.conv{ display:flex; flex-wrap:wrap; gap:.7rem; }
.conv span{ background:#fff; border:1px solid var(--borda); border-radius:var(--pill); padding:9px 18px;
  font-size:.9rem; color:var(--texto); font-family:var(--f-titulo); }

/* Blog */
.posts{ display:grid; gap:1.6rem; grid-template-columns:1fr; }
.post{ background:#fff; border:1px solid var(--borda); border-radius:var(--radius); overflow:hidden; transition:var(--transicao); }
.post:hover{ transform:translateY(-5px); box-shadow:var(--sombra); }
.post .thumb{ aspect-ratio:16/10; background:linear-gradient(160deg,#16224a,var(--navy)); display:grid; place-items:center; color:rgba(255,255,255,.55); font-family:var(--f-titulo); }
.post .body{ padding:1.4rem; }
.post .tag{ font-size:.75rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--verde-escuro); font-family:var(--f-titulo); font-weight:700; }
.post h3{ font-size:1.15rem; margin:.4rem 0 .5rem; }

/* Page header (interna) */
.page-hero{ background:radial-gradient(120% 120% at 80% 0%, #16224a 0%, var(--navy) 60%); color:#fff; padding-block:clamp(3rem,7vw,5rem); }
.page-hero h1{ color:#fff; }
.crumbs{ font-size:.85rem; color:#aeb6c9; margin-bottom:14px; }
.crumbs a{ color:var(--verde); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--navy); color:#aeb6c9; padding-block:clamp(3rem,6vw,4.5rem) 0; }
.footer-grid{ display:grid; gap:2.2rem; grid-template-columns:1fr; }
.footer-brand .wordmark{ font-family:var(--f-titulo); font-weight:500; color:#fff; font-size:1.4rem; }
.footer-brand .wordmark b{ font-weight:700; }
.footer-brand .crm{ color:var(--verde); font-family:var(--f-titulo); letter-spacing:1px; font-size:.8rem; text-transform:uppercase; margin-top:.4rem; display:block; }
.footer-brand .socials{ display:flex; gap:.7rem; margin-top:1.2rem; }
.footer-brand .socials a{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.15);
  display:grid; place-items:center; color:#fff; transition:var(--transicao); }
.footer-brand .socials a:hover{ background:var(--verde); border-color:var(--verde); color:var(--navy); }
.footer-col h4{ color:#fff; font-size:1rem; margin-bottom:1rem; }
.footer-col a{ display:block; padding:5px 0; color:#aeb6c9; font-size:.93rem; transition:var(--transicao); }
.footer-col a:hover{ color:var(--verde); }
.footer-col address{ font-style:normal; font-size:.9rem; line-height:1.8; }
.footer-col address strong{ color:#fff; font-family:var(--f-titulo); font-weight:500; }
.footer-bottom{ margin-top:2.5rem; border-top:1px solid rgba(255,255,255,.1); padding:1.5rem 0;
  font-size:.85rem; color:#8c95ab; text-align:center; }
.footer-bottom a{ color:var(--verde); }
.disclaimer{ font-size:.78rem; color:#717a91; max-width:75ch; margin:1rem auto 0; text-align:center; }

/* =========================================================
   WhatsApp flutuante
   ========================================================= */
.wpp-float{ position:fixed; right:18px; bottom:18px; z-index:200; display:flex; align-items:center; gap:10px;
  background:#25D366; color:#fff; border-radius:var(--pill); padding:12px 18px 12px 14px; box-shadow:0 12px 30px rgba(37,211,102,.4);
  font-family:var(--f-titulo); font-weight:500; transition:var(--transicao); }
.wpp-float:hover{ transform:translateY(-3px) scale(1.03); }
.wpp-float svg{ width:26px; height:26px; fill:#fff; }
.wpp-float .lbl{ font-size:.95rem; }

/* =========================================================
   Reveal
   ========================================================= */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (min-width:680px){
  .grid-cards{ grid-template-columns:repeat(2,1fr); }
  .values{ grid-template-columns:repeat(2,1fr); }
  .clinic-grid{ grid-template-columns:repeat(2,1fr); }
  .posts{ grid-template-columns:repeat(2,1fr); }
  .hero-actions .btn{ min-width:auto; }
}
@media (min-width:768px){
  .hero-stats-band{ grid-template-columns:repeat(4,1fr); gap:1.5rem; }
}
@media (min-width:960px){
  .hero .hero-top{ grid-template-columns:1.15fr .85fr; }
  .split{ grid-template-columns:1fr 1fr; }
  .split.reverse .media{ order:2; }
  .values{ grid-template-columns:repeat(4,1fr); }
  .grid-cards.cols-3{ grid-template-columns:repeat(3,1fr); }
  .book{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1.3fr; }
  .posts{ grid-template-columns:repeat(3,1fr); }
}

/* Menu mobile (até 959px) */
@media (max-width:959px){
  .nav-toggle{ display:block; }
  .nav > .nav-cta{ display:none; }        /* esconde o CTA solto da barra no mobile */
  .nav-menu .nav-cta{ display:flex; }     /* mostra o CTA dentro do menu */
  .nav-menu{
    position:fixed; inset:74px 0 auto 0; background:#fff; border-bottom:1px solid var(--borda);
    flex-direction:column; align-items:stretch; gap:0; padding:12px 22px 22px;
    transform:translateY(-130%); transition:transform .35s ease; box-shadow:var(--sombra); max-height:calc(100vh - 74px); overflow-y:auto;
  }
  .nav-menu.open{ transform:translateY(0); }
  .nav-links{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-links > li{ border-bottom:1px solid var(--borda); }
  .nav-links > li > a{ display:block; padding:14px 4px; }
  .nav-links > li > a::after{ content:none; }
  .submenu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0 0 10px 12px; min-width:0; }
  .submenu a{ padding:8px 10px; }
  .has-sub > a::after{ content:"›"; float:right; color:var(--verde-escuro); }
  .wpp-float .lbl{ display:none; }
}
@media (max-width:420px){
  .hero-stats{ grid-template-columns:1fr; }
  .btn{ width:100%; }
  .hero-actions{ flex-direction:column; }
}