/* Clínica Dr. Enio Lima · folha de estilo do site
   Layout: coluna calma e alinhada à esquerda; faixas claras alternadas; foto de ambiente no topo;
   uma única ênfase de cor (o azul do sorriso da logo) nos pontos de ação. */
@font-face{font-family:"Zilla Slab";src:url("../fonts/zilla-slab-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Zilla Slab";src:url("../fonts/zilla-slab-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  /* Cor: marinho e azul-claro da logo; neutros levemente azulados */
  --marinho:#243456;
  --marinho-2:#2f4370;
  --sorriso:#60AAC3;
  --sorriso-escuro:#2e7f9c;   /* azul-claro com contraste suficiente para texto */
  --papel:#ffffff;
  --nevoa:#f2f5f9;
  --linha:#dde4ee;
  --texto:#1c2436;
  --texto-suave:#55617a;
  --whats:#1f7a4d;
  /* Tipo */
  --f-display:"Zilla Slab", "Rockwell", Georgia, serif;
  --f-texto:"Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-1:clamp(2.1rem, 1.5rem + 2.6vw, 3.3rem);
  --t-2:clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  --t-3:1.25rem;
  --raio:10px;
  --largura:1120px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--papel);color:var(--texto);font-family:var(--f-texto);font-size:1.075rem;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--marinho-2)}
a:focus-visible,button:focus-visible{outline:3px solid var(--sorriso);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--f-display);color:var(--marinho);line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:var(--t-1);font-weight:600;letter-spacing:-.01em}
h2{font-size:var(--t-2);font-weight:600}
h3{font-size:var(--t-3);font-weight:600}
p{margin:0}
.wrap{max-width:var(--largura);margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.faixa{padding-block:clamp(48px, 7vw, 88px)}
.faixa.nevoa{background:var(--nevoa)}
.pilha{display:flex;flex-direction:column;gap:16px}
.leitura{max-width:65ch}
.rotulo{font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sorriso-escuro)}

/* Cabeçalho */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:10;background:var(--papel)}
.topo{position:sticky;top:env(safe-area-inset-top, 0px);z-index:9;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--linha)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.marca img{height:48px;width:auto}
.menu{display:flex;align-items:center;gap:22px;font-weight:600;font-size:.98rem}
.menu a{text-decoration:none;color:var(--marinho)}
.menu a:hover{color:var(--sorriso-escuro)}
.menu a[aria-current="page"]{color:var(--sorriso-escuro)}
@media (max-width:860px){.menu .so-largo{display:none}}
@media (max-width:560px){.menu{gap:14px;font-size:.92rem}.menu .botao{display:none}.marca img{height:40px}}

/* Botões */
.botoes{display:flex;flex-wrap:wrap;gap:12px}
.botao{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;font-weight:600;text-decoration:none;border:2px solid var(--marinho);color:var(--marinho);background:var(--papel);line-height:1.2}
.botao:hover{background:var(--nevoa)}
.botao.principal{background:var(--whats);border-color:var(--whats);color:#fff}
.botao.principal:hover{background:#196642}
.botao svg{width:18px;height:18px;flex:none}
.menu .botao{padding:8px 14px;font-size:.92rem}

/* Topo da página principal */
.abertura{position:relative;background:var(--marinho);color:#fff}
.abertura picture img{width:100%;height:clamp(260px, 42vw, 520px);object-fit:cover;opacity:.9}
.abertura .texto{padding-block:32px 40px}
.abertura h1{color:#fff}
.abertura .apoio{font-size:1.2rem;max-width:52ch;color:#e6ecf5}
.abertura .botao{border-color:#fff;color:var(--marinho)}
.abertura .botao.principal{border-color:var(--whats);color:#fff}
.nota{display:inline-flex;align-items:center;gap:8px;font-size:1rem;color:#e6ecf5}
.nota a{color:#fff}
.estrela{color:#f4c542;font-size:1.2rem;line-height:1}

/* Tratamentos */
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px;background:var(--linha);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden}
.grade > div{background:var(--papel);padding:20px 22px;display:flex;flex-direction:column;gap:6px;min-width:0}
.grade > div.destaque{background:#eef6fa}
.grade p{color:var(--texto-suave);font-size:1rem}
.grade a{font-weight:600;font-size:.98rem;margin-top:auto}

/* Duas colunas */
.duas{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,64px);align-items:center}
.duas > *{min-width:0}
.duas.inversa{grid-template-columns:.9fr 1.1fr}
@media (max-width:820px){.duas,.duas.inversa{grid-template-columns:1fr}.duas.inversa .foto{order:-1}}
.foto img{border-radius:var(--raio);width:100%;object-fit:cover}
.foto.retrato img{aspect-ratio:4/5;max-height:560px;object-position:top}
.legenda{font-size:.92rem;color:var(--texto-suave);margin-top:8px}

/* Linha do tempo da família: é uma sequência real (1950 → 1978 → hoje) */
.tempo{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:14px;border-left:2px solid var(--sorriso);padding-left:18px}
.tempo li{display:grid;grid-template-columns:5.2rem 1fr;gap:12px;align-items:baseline}
.tempo b{font-family:var(--f-display);font-size:1.3rem;color:var(--marinho);font-variant-numeric:tabular-nums}
.rt{font-size:.98rem;color:var(--texto-suave);border-top:1px solid var(--linha);padding-top:12px}

/* Idiomas */
.idiomas{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.idiomas li{border:1px solid var(--linha);border-radius:999px;padding:6px 14px;background:var(--papel);font-size:.98rem}
.idiomas span{color:var(--texto-suave)}

/* Passos numerados (sequências reais) */
.passos{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:p}
.passos li{counter-increment:p;display:grid;grid-template-columns:2.4rem 1fr;gap:14px;align-items:start}
.passos li::before{content:counter(p);font-family:var(--f-display);font-weight:600;font-size:1.1rem;color:#fff;background:var(--marinho);width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center}
.passos h3{font-size:1.12rem;margin-bottom:2px}
.passos p{color:var(--texto-suave)}

.lista{margin:0;padding-left:1.1rem;display:grid;gap:10px}
.lista b{color:var(--marinho)}

/* Perguntas frequentes */
.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--linha);border-radius:var(--raio);background:var(--papel);padding:4px 18px}
.faq summary{cursor:pointer;font-weight:600;color:var(--marinho);padding:12px 0;list-style-position:outside}
.faq details p{padding-bottom:14px;color:var(--texto)}

/* Convênios */
.planos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.planos li{border:1px solid var(--linha);border-radius:8px;padding:12px 14px;font-weight:600;color:var(--marinho);background:var(--papel)}
.miudo{font-size:.95rem;color:var(--texto-suave)}

/* Como chegar */
.endereco{font-style:normal;display:grid;gap:4px}
.endereco strong{font-size:1.15rem;color:var(--marinho)}
.dados{display:grid;gap:10px;margin:0}
.dados div{display:grid;grid-template-columns:7.5rem 1fr;gap:10px}
.dados dt{font-weight:600;color:var(--marinho)}
.dados dd{margin:0}
@media (max-width:420px){.dados div{grid-template-columns:1fr;gap:0}}

/* Rodapé */
.rodape{background:var(--marinho);color:#dfe6f1;font-size:.98rem}
.rodape .wrap{display:grid;grid-template-columns:auto 1fr 1fr;gap:32px;padding-block:44px 28px}
.rodape img{height:64px;width:auto}
.rodape a{color:#fff}
.rodape strong{color:#fff}
.rodape .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.2);padding-top:16px;font-size:.92rem;color:#c3cde0}
@media (max-width:820px){.rodape .wrap{grid-template-columns:1fr}}

/* Barra fixa de contato no celular */
.barra{display:none}
@media (max-width:720px){
  .barra{display:grid;grid-template-columns:1.3fr 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--papel);border-top:1px solid var(--linha);gap:8px;padding:8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px))}
  .barra a{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 6px;border-radius:999px;font-weight:600;text-decoration:none;font-size:.95rem;border:2px solid var(--marinho);color:var(--marinho)}
  .barra a.principal{background:var(--whats);border-color:var(--whats);color:#fff}
  .barra svg{width:18px;height:18px}
  body{padding-bottom:76px}
}

/* Aviso de cookies (só aparece se o GA4 estiver configurado) */
.cookies{position:fixed;left:max(12px, env(safe-area-inset-left, 0px));right:max(12px, env(safe-area-inset-right, 0px));bottom:calc(12px + env(safe-area-inset-bottom, 0px));z-index:30;max-width:560px;margin:0 auto;background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:0 8px 30px rgba(20,30,50,.18);padding:16px 18px;display:grid;gap:12px;font-size:.98rem}
@media (max-width:720px){.cookies{bottom:calc(84px + env(safe-area-inset-bottom, 0px))}}
.cookies button{font:inherit;font-weight:600;padding:9px 16px;border-radius:999px;border:2px solid var(--marinho);background:var(--papel);color:var(--marinho);cursor:pointer}
.cookies button.ok{background:var(--marinho);color:#fff}

.cabeca{background:var(--nevoa);border-bottom:1px solid var(--linha)}
.cabeca .wrap{padding-block:40px 36px}
.cabeca .apoio{font-size:1.18rem;max-width:58ch;color:var(--texto-suave)}
/* 11 tratamentos: o primeiro ocupa duas colunas para fechar a grade sem buraco */
@media (min-width:560px){.grade > div:first-child{grid-column:span 2}}