/* =========================================================================
   LP Endoscopia Digestiva Alta — Instituto de Saúde Assistida
   V0.1 — direção: Accessible & Ethical + Minimalism & Swiss Style

   Projeto independente. Paleta e tipografia reaproveitadas do site
   institucional (commit 93c47b7) por identidade visual — sem acoplamento
   de código com aquele repositório.

   Princípio da V0.1: branco predominante, hierarquia por tipografia e
   espaço (não por cor de fundo), teal em faixas pontuais.
   Mobile-first. Breakpoints: 640px, 900px, 1200px.
   ========================================================================= */

:root{
  /* ---- paleta herdada da identidade ISA ---- */
  --teal:#1FA9A0;
  --teal-dark:#15837C;
  --teal-deep:#0F6862;
  --teal-soft:#E4F5F4;
  --navy:#123C56;
  --ink:#1C3240;
  --muted:#4A6272;          /* escurecido vs. site (#5A7383) para contraste AA */
  --bg:#FFFFFF;             /* V0.1: branco puro predomina */
  --bg-alt:#F7FBFB;         /* alternância sutil, substitui faixas de teal */
  --card:#FFFFFF;
  --line:#E3EEED;
  --wa:#15803D;             /* verde WhatsApp: 5.02:1 com texto branco */
  --wa-hover:#116A32;

  /* ---- escala tipográfica: 12 / 14 / 16 / 18 / 22 / 28 / 36 / 48 ---- */
  --t-12:.75rem;
  --t-14:.875rem;
  --t-16:1rem;
  --t-18:1.125rem;
  --t-22:1.375rem;
  --t-28:1.75rem;
  --t-36:2.25rem;
  --t-48:3rem;

  /* ---- ritmo vertical: varia conforme a importância da seção ---- */
  --s-compacto:40px;
  --s-texto:52px;           /* seções de leitura: menos respiro que as de ação */
  --s-padrao:64px;
  --s-amplo:76px;

  --radius:16px;
  --shadow:0 6px 20px rgba(18,60,86,.06);
  --shadow-lg:0 16px 44px rgba(18,60,86,.12);

  --wrap:1120px;
  --medida:720px;           /* medida de linha das seções de texto (~66ch) */
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:'Nunito Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:var(--t-16);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Quicksand',system-ui,sans-serif;
  color:var(--navy);
  line-height:1.18;
  font-weight:700;
  margin:0 0 .55em;
  letter-spacing:-.01em;
}
h1{font-size:var(--t-36)}
h2{font-size:var(--t-28)}
h3{font-size:var(--t-22)}   /* claramente acima do corpo (16px) */
p{margin:0 0 1em}

@media (min-width:900px){
  h1{font-size:var(--t-48)}
  h2{font-size:var(--t-36)}
}

img{max-width:100%;height:auto;display:block}
a{color:var(--teal-deep)}

/* ---- foco visível: obrigatório, nunca removido ---- */
:focus-visible{
  outline:3px solid var(--teal-deep);
  outline-offset:3px;
  border-radius:6px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--navy);color:#fff;
  padding:12px 20px;z-index:200;border-radius:0 0 10px 0;
  font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* Seções de leitura compartilham o MESMO eixo esquerdo do contêiner
   principal. A caixa continua com 1120px; quem encolhe é o conteúdo.
   Antes, `.estreito` centralizava uma caixa de 660px, então cada seção
   começava numa margem esquerda diferente — o "efeito sanfona". */
.wrap.estreito > *{max-width:var(--medida)}

/* Única seção deliberadamente centralizada: o CTA final. */
.wrap.centrado{max-width:var(--medida);text-align:center}
.centro{text-align:center}

/* =========================== BOTÕES =========================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Nunito Sans',sans-serif;
  font-weight:700;font-size:var(--t-16);
  border-radius:999px;
  padding:14px 26px;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .2s ease,transform .2s ease,border-color .2s ease;
  min-height:48px;
}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} }

.btn .ico{width:20px;height:20px;flex:0 0 auto}

.btn-wa{background:var(--wa);color:#fff;box-shadow:0 6px 16px rgba(21,128,61,.20)}
.btn-wa:hover{background:var(--wa-hover)}

.btn-tel{background:#fff;color:var(--teal-deep);border:2px solid var(--teal-deep)}
.btn-tel:hover{background:var(--teal-soft)}

.btn-g{padding:16px 30px;width:100%}
@media (min-width:640px){ .btn-g{width:auto} }

.btn:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){ .btn:hover{transform:none} }

/* =========================== CABEÇALHO =========================== */
.topo{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.topo-int{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:66px;
}
/* min-height de 44px porque a marca virou link (para o site institucional) e
   passou a ser alvo de toque. A imagem tem 36px; sem isso o alvo ficaria
   abaixo do mínimo recomendado. Não desloca nada: o cabeçalho já tem 66px e
   o conteúdo é centralizado verticalmente. */
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;min-height:44px}
.marca img{width:36px;height:36px}
.marca-txt{
  font-family:'Quicksand',sans-serif;font-weight:700;
  color:var(--navy);font-size:var(--t-14);line-height:1.15;
}
.btn-topo{padding:9px 18px;font-size:var(--t-14);min-height:44px}
.btn-topo .ico{width:17px;height:17px}
@media (max-width:400px){
  .btn-topo span{display:none}
  .btn-topo{padding:9px 14px}
}

/* =========================== HERO =========================== */
/* Sem cor de fundo cheia: o hero se define por composição e espaço.
   Uma linha inferior sutil marca o fim da seção. */
.hero{
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:38px 0 44px;
}
@media (min-width:900px){ .hero{padding:52px 0 56px} }

.hero-grid{display:grid;gap:30px;align-items:center}
@media (min-width:900px){
  .hero-grid{grid-template-columns:1.02fr .98fr;gap:52px}
}

.olho{
  text-transform:uppercase;letter-spacing:.10em;
  font-size:var(--t-12);font-weight:700;color:var(--teal-deep);
  margin:0 0 14px;line-height:1.4;
}
.hero h1{margin-bottom:.4em}
.hero-sub{
  font-size:var(--t-18);color:var(--muted);
  max-width:34ch;margin-bottom:28px;
}
.cta-par{display:flex;flex-direction:column;gap:12px}
@media (min-width:640px){
  .cta-par{flex-direction:row;flex-wrap:wrap;align-items:center}
}
.cta-centro{align-items:center;justify-content:center}

/* CTAs do hero: empilhados de propósito, também no desktop.
   O rótulo primário é longo e, lado a lado, o par ficava desalinhado e
   apertado na coluna. Empilhado, a hierarquia fica explícita — WhatsApp
   primário acima, telefone secundário abaixo — com larguras iguais. */
.hero .cta-par{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
.hero .cta-par .btn-g{width:100%}
@media (min-width:640px){
  .hero .cta-par{max-width:420px}
}
.hero-nota{
  margin:18px 0 0;font-size:var(--t-14);color:var(--muted);
}

/* imagem do hero: proporção controlada para não estourar a dobra */
.hero-fig{margin:0}
/* 15/8 é a proporção nativa da foto da fachada. Fixá-la aqui reserva o
   espaço antes do download (sem CLS) e, principalmente, evita corte: o
   logo do ISA fica na borda esquerda e o mosaico "Centro Gastro
   Endoscópico" na direita — qualquer recorte lateral apaga um dos dois. */
.hero-fig img{
  width:100%;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  object-fit:cover;
  aspect-ratio:15/8;
  background:var(--bg-alt);
}
.hero-fig figcaption{
  margin-top:10px;font-size:var(--t-12);color:var(--muted);
  text-align:center;
}

/* =========================== SEÇÕES =========================== */
.secao{padding:var(--s-padrao) 0}
.secao-alt{background:var(--bg-alt);border-block:1px solid var(--line)}
.secao-enxuta{padding:var(--s-compacto) 0}
.secao-texto{padding:var(--s-texto) 0}   /* leitura: mais compacta que ação */
/* separa duas seções de fundo branco sem recorrer a mais uma faixa cinza */
.secao-linha{border-top:1px solid var(--line)}
.secao-sub{color:var(--muted);max-width:var(--medida);margin-bottom:24px}

/* frase central da explicação do exame: peso maior, sem virar título */
.destaque{
  font-size:var(--t-18);
  color:var(--ink);
  margin-bottom:26px;
}

/* Nota clínica. Identidade: é o único bloco com fundo colorido na área de
   leitura — o fundo já sinaliza "leia isto". O filete lateral era redundante
   e repetia o mesmo recurso de outros três componentes. */
.aviso{
  background:var(--teal-soft);
  border-radius:12px;
  padding:18px 22px;
  font-size:var(--t-14);
  color:var(--ink);
  line-height:1.6;
}

/* ---- passos ---- */
.passos{
  list-style:none;margin:0 0 34px;padding:0;
  display:grid;gap:18px;
  counter-reset:none;
}
@media (min-width:768px){ .passos{grid-template-columns:repeat(3,1fr);gap:20px} }

.passo{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 24px;
}
.passo-n{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--teal-dark);color:#fff;
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:var(--t-18);
  margin-bottom:14px;
}
.passo h3{margin-bottom:.4em}
.passo p{margin:0;color:var(--muted);font-size:var(--t-16)}

/* ---- preparo ----
   Não usa os cards numerados de "Como solicitar": aquilo é uma sequência de
   ação, isto é uma lista de condições. Filete à esquerda, mesma linguagem do
   endereço e das credenciais, para ler rápido sem virar mais um bloco de
   cards. */
.preparo{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:20px}
@media (min-width:768px){ .preparo{grid-template-columns:repeat(3,1fr);gap:24px} }

/* Identidade: regra horizontal no topo, não filete lateral. Alinha os três
   blocos pela mesma linha e produz a grade horizontal característica do
   Minimalism/Swiss — vocabulário diferente do usado no aviso e no endereço. */
.preparo li{
  padding-top:14px;
  border-top:2px solid var(--navy);
}
.preparo h3{margin-bottom:.35em;font-size:var(--t-18)}
.preparo p{margin:0;color:var(--muted);font-size:var(--t-16)}

/* Aviso de medicamento: precisa ser lido, não decorado. Sem caixa colorida
   que o transforme em "banner" e faça o olho pular. */
.nota-medicamentos{
  margin:0;
  padding:14px 0 0;
  border-top:1px solid var(--line);
  font-size:var(--t-14);
  color:var(--ink);
  max-width:var(--medida);
}

/* ---- endereço (composição tipográfica, sem repetir a fachada) ---- */
/* Identidade: só tipografia. Sem moldura, sem fundo, sem filete — a
   hierarquia entre rua, bairro e CEP basta para o bloco se ler como
   endereço. É o tratamento mais Swiss dos quatro. */
.endereco{
  font-style:normal;
  display:flex;flex-direction:column;gap:5px;
  margin:0 0 28px;
}
.endereco-rua{
  font-family:'Quicksand',sans-serif;font-weight:700;
  font-size:var(--t-22);color:var(--navy);line-height:1.25;
}
.endereco-bairro{font-size:var(--t-16);color:var(--ink)}
.endereco-cep{font-size:var(--t-14);color:var(--muted)}

/* ---- estrutura: destaque horizontal + grade ----
   A recepção principal (foto real, horizontal por natureza) vira o destaque
   de largura total em 3:2. As outras três, retrato 3:4, formam a grade
   abaixo — sem carrossel, tudo visível de uma vez. Proporção fixa no CSS
   reserva o espaço antes da imagem chegar (evita CLS). */
.galeria-destaque{margin:0 0 20px}
.galeria-destaque img{
  width:100%;height:auto;
  aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  background:var(--bg-alt);
}
.galeria-destaque figcaption{
  margin-top:12px;font-size:var(--t-14);color:var(--muted);line-height:1.5;
}
@media (min-width:640px){ .galeria-destaque{margin-bottom:24px} }

/* 2 colunas em TODAS as larguras, inclusive 375px, para as três fotos da
   grade — em coluna única elas somavam altura demais no mobile. A partir de
   640px passam a 3 colunas, já que agora são só três itens. */
.galeria{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px 12px;
}
@media (min-width:640px){ .galeria{grid-template-columns:repeat(3,1fr);gap:24px} }

.galeria figure{margin:0}
.galeria img{
  width:100%;height:auto;
  aspect-ratio:3/4;object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  background:var(--bg-alt);
}
.galeria figcaption{
  margin-top:12px;
  font-size:var(--t-14);color:var(--muted);line-height:1.5;
}

/* ---- FAQ ---- */
.faq{display:grid;gap:10px}
.qa{
  background:var(--card);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;
}
.qa summary{
  cursor:pointer;list-style:none;
  padding:16px 46px 16px 20px;
  font-family:'Quicksand',sans-serif;font-weight:700;
  color:var(--navy);font-size:var(--t-16);
  position:relative;min-height:48px;
  display:flex;align-items:center;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:20px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--teal-deep);
  border-bottom:2px solid var(--teal-deep);
  transform:rotate(45deg);transition:transform .2s ease;
}
.qa[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
@media (prefers-reduced-motion:reduce){ .qa summary::after{transition:none} }
.qa summary:hover{background:var(--teal-soft)}
.qa-corpo{padding:0 20px 18px}
.qa-corpo p{margin:0;color:var(--muted);font-size:var(--t-16)}

/* ---- fecho: transição para o CTA ----
   Substitui a antiga faixa de credenciais, que repetia no meio da página os
   mesmos registros já presentes no rodapé. Aqui não há dado institucional:
   só uma frase que fecha a leitura e entrega o visitante ao CTA. */
.h-fecho{
  font-size:var(--t-22);
  color:var(--navy);
  margin-bottom:.4em;
}
@media (min-width:900px){ .h-fecho{font-size:var(--t-28)} }
.p-fecho{
  margin:0;
  color:var(--muted);
  font-size:var(--t-18);
  max-width:var(--medida);
}

/* ---- CTA final: única faixa de cor da página ---- */
.contato{background:var(--teal-soft);padding:var(--s-amplo) 0}
.contato-sub{color:var(--muted);margin-bottom:26px}

/* =========================== RODAPÉ =========================== */
/* O rodapé concentra a informação legal e é o bloco mais lido por quem
   está conferindo se a clínica é séria. Nada aqui desce de 14px, e cada
   bloco (empresa / endereço / responsável técnico / aviso) fica separado
   em vez de formar um parágrafo denso. */
.rodape{
  background:var(--navy);color:#DCE8F0;
  padding:44px 0 36px;font-size:var(--t-14);line-height:1.75;
}
.rodape-marca{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.rodape-marca img{width:38px;height:38px}
.rodape-marca b{font-family:'Quicksand',sans-serif;color:#fff;font-size:var(--t-18)}

.rodape-legal{
  margin:0 0 18px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.10);
  color:#DCE8F0;
  max-width:var(--medida);
}
.rodape-legal:last-of-type{border-bottom:0}
.rodape-nota{
  display:block;color:#B7CCDA;font-size:var(--t-14);
  margin-top:8px;line-height:1.65;
}
.rodape-copy{
  margin:24px 0 0;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16);
  color:#B7CCDA;font-size:var(--t-14);
}