/* ==============================================================
   OlharWeb — Landing Clínicas
   Mobile first: os estilos base valem para o celular e os blocos
   @media no fim ajustam para telas maiores.
   ============================================================== */

/* ---------- Cores e medidas da marca ---------- */
:root {
  --laranja: #FF4700;        /* botões e destaques */
  --laranja-texto: #C93800;  /* laranja mais escuro para textos pequenos (contraste AA) */
  --preto: #1A1A1A;
  --cinza: #555555;
  --linha: #E4E4E4;
  --fundo: #F7F7F7;
  --branco: #FFFFFF;
  --raio: 20px;
  --raio-pequeno: 12px;
  --sombra: 0 10px 30px rgba(26, 26, 26, .07);
  --sombra-forte: 0 18px 50px rgba(26, 26, 26, .14);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--preto);
  background: var(--fundo);
}

img, video, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 800; text-wrap: balance; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--laranja-texto); font-weight: 600; }

/* Foco sempre visível para quem navega pelo teclado */
:focus-visible { outline: 3px solid var(--laranja-texto); outline-offset: 3px; border-radius: 4px; }
.secao--escura :focus-visible { outline-color: var(--laranja); }

/* Link "pular para o conteúdo" (aparece só com Tab) */
.pular {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 8px;
  background: var(--preto); color: var(--branco);
}
.pular:focus { top: 12px; }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.container--estreito { max-width: 760px; }
.centro { text-align: center; margin: 0; }

/* ---------- Cabeçalho ---------- */
.topo { background: var(--branco); border-bottom: 1px solid var(--linha); }
.topo__linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.logo { height: 36px; width: auto; }
.topo__slogan { display: none; margin: 0; font-size: .875rem; color: var(--cinza); }

/* ---------- Botões ---------- */
/* Texto branco sobre laranja exige letra grande e pesada para manter o contraste */
.botao {
  display: inline-block;
  padding: 16px 28px;
  border: 0; border-radius: 999px;
  background: var(--laranja); color: var(--branco);
  font-family: inherit; font-size: 1.1875rem; font-weight: 800; line-height: 1.25;
  text-align: center; text-decoration: none; text-wrap: balance;
  box-shadow: 0 10px 24px rgba(255, 71, 0, .28);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.botao:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255, 71, 0, .36); }
.botao:active { transform: translateY(0); }
.botao[disabled] { opacity: .7; cursor: wait; transform: none; }
.botao--cheio { width: 100%; }
.botao--contorno {
  background: transparent; color: var(--preto);
  box-shadow: inset 0 0 0 2px var(--preto);
  font-size: 1rem; padding: 12px 24px;
}
.botao--contorno:hover { box-shadow: inset 0 0 0 2px var(--preto); }

/* ---------- Textos de apoio ---------- */
.etiqueta {
  margin: 0 0 12px;
  font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--laranja-texto);
}
.etiqueta--clara { color: #FF7A45; }
.titulo { font-size: 1.625rem; margin-bottom: 28px; text-align: center; }
.titulo--esquerda { text-align: left; }
.secao > .container > .etiqueta { text-align: center; }

/* ---------- 1. Hero ---------- */
.hero {
  padding: 36px 0 48px;
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(255, 71, 0, .10), transparent 70%),
    var(--fundo);
}
.hero__grade { display: grid; gap: 36px; }
.hero h1 { font-size: 2.125rem; letter-spacing: -.02em; margin-bottom: 16px; }
.destaque { color: var(--laranja); }
.hero__sub { font-size: 1.0625rem; color: var(--cinza); margin-bottom: 24px; }
.hero .botao { width: 100%; }
.hero__nota { margin: 14px 0 0; font-size: .875rem; color: var(--cinza); text-align: center; }

/* Moldura do vídeo vertical (9:16) */
.hero__video {
  width: 100%; max-width: 300px; margin: 0 auto;
  border-radius: 28px; overflow: hidden;
  background: var(--preto);
  box-shadow: var(--sombra-forte);
  border: 6px solid var(--branco);
}
.hero__video video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }

/* ---------- Seções ---------- */
.secao { padding: 56px 0; }
.secao--branca { background: var(--branco); }
.secao--escura { background: var(--preto); color: var(--branco); }

/* ---------- Cartões (dor e serviços) ---------- */
.cartoes { display: grid; gap: 16px; }
.cartao {
  padding: 24px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.secao--branca .cartao { background: var(--fundo); border-color: transparent; box-shadow: none; }
.cartao p { margin: 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
.cartao h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }

.icone {
  width: 44px; height: 44px; padding: 10px; margin-bottom: 16px;
  border-radius: 14px;
  background: rgba(255, 71, 0, .10);
  fill: none; stroke: var(--laranja-texto); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- 4. Passos ---------- */
.passos { display: grid; gap: 16px; margin-bottom: 32px; }
.passo { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--fundo); border-radius: var(--raio); }
.passo p { margin: 0; font-weight: 600; line-height: 1.4; }
.passo__numero {
  flex: none; width: 52px; height: 52px; /* largura e altura fixas: o círculo não deforma */
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--laranja); color: var(--branco);
  font-size: 1.5rem; font-weight: 800;
}

/* ---------- 5. Sobre ---------- */
.sobre { display: grid; gap: 28px; align-items: center; }
.sobre__foto {
  width: 100%; max-width: 280px; margin: 0 auto;
  aspect-ratio: 1; object-fit: cover;
  border-radius: var(--raio);
  background: var(--linha);
  box-shadow: var(--sombra);
}
.sobre p:not(.etiqueta) { color: var(--cinza); }
.sobre p:last-child { margin-bottom: 0; }
/* Marcadores de texto a preencher: ficam bem visíveis de propósito */
.marcador {
  margin: 0; padding: 16px;
  border: 2px dashed var(--laranja-texto); border-radius: var(--raio-pequeno);
  background: rgba(255, 71, 0, .06);
  font-weight: 600;
}

/* ---------- 6. Depoimentos (bloco comentado no HTML) ---------- */
.depoimento blockquote { margin: 0 0 16px; }
.depoimento blockquote p { font-weight: 400; }
.depoimento__autor { font-size: .9375rem; font-weight: 400 !important; color: var(--cinza); }

/* ---------- 7. Formulário ---------- */
#diagnostico { scroll-margin-top: 8px; }
.form__grade { display: grid; gap: 28px; }
.form__chamada .titulo { margin-bottom: 12px; }
.form__chamada p:last-child { margin: 0; color: #D6D6D6; }

.form {
  padding: 24px 20px;
  background: var(--branco); color: var(--preto);
  border-radius: var(--raio);
  box-shadow: var(--sombra-forte);
}
.campo { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.campo > label, .opcoes legend { display: block; margin-bottom: 6px; padding: 0; font-size: .9375rem; font-weight: 600; }

.campo input[type="text"], .campo input[type="tel"] {
  width: 100%; height: 52px; padding: 0 16px;
  border: 1.5px solid #8A8A8A; border-radius: var(--raio-pequeno);
  background: var(--branco); color: var(--preto);
  font-family: inherit; font-size: 1rem; /* 16px evita o zoom automático do iPhone */
}
.campo input::placeholder { color: #767676; }
.campo input[type="text"]:focus, .campo input[type="tel"]:focus {
  outline: 0; border-color: var(--laranja-texto);
  box-shadow: 0 0 0 3px rgba(255, 71, 0, .25);
}
.campo input[aria-invalid="true"] { border-color: #B3261E; }
.campo__erro { margin: 6px 0 0; font-size: .875rem; font-weight: 600; color: #B3261E; }

/* Opções em formato de "pílula" (rádios) */
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes legend, .opcoes .campo__erro { flex: 0 0 100%; width: 100%; }
.opcao { position: relative; cursor: pointer; }
.opcao input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcao span {
  display: block; padding: 12px 18px;
  border: 1.5px solid #8A8A8A; border-radius: 999px;
  font-size: .9375rem; font-weight: 600;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.opcao input:checked + span { background: var(--preto); border-color: var(--preto); color: var(--branco); }
.opcao input:focus-visible + span { outline: 3px solid var(--laranja-texto); outline-offset: 3px; }

/* Aceite LGPD */
.aceite { display: flex; align-items: flex-start; gap: 12px; font-size: .9375rem; font-weight: 400 !important; line-height: 1.45; cursor: pointer; }
.aceite input { flex: 0 0 22px; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--laranja-texto); }

.form__alerta {
  margin: 0 0 18px; padding: 12px 16px;
  border-radius: var(--raio-pequeno);
  background: #FDECEA; color: #8C1D18;
  font-size: .9375rem; font-weight: 600;
}
.form__nota { margin: 14px 0 0; font-size: .8125rem; color: var(--cinza); text-align: center; }

/* Honeypot: fora da tela, invisível para pessoas e leitores de tela */
.pote { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 8. Perguntas frequentes ---------- */
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0;
  font-weight: 600; font-size: 1.0625rem; line-height: 1.35;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; flex: 0 0 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 71, 0, .10); color: var(--laranja-texto);
  font-size: 1.375rem; font-weight: 600; line-height: 1;
}
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 0 0 20px; color: var(--cinza); }

/* ---------- 9. Rodapé ---------- */
.rodape { padding: 32px 0 104px; background: var(--fundo); border-top: 1px solid var(--linha); font-size: .875rem; color: var(--cinza); }
.rodape__linha { display: grid; gap: 16px; justify-items: center; text-align: center; }
.rodape p { margin: 0; }

/* ---------- Botão flutuante de WhatsApp ---------- */
.whats {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #1FAF54;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
  transition: transform .15s ease;
}
.whats:hover { transform: scale(1.06); }
.whats svg { width: 34px; height: 34px; }
.whats__balao { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linejoin: round; }
.whats__fone { fill: #fff; }

/* ---------- Página de obrigado ---------- */
.obrigado { padding: 48px 0 64px; }
.obrigado__cartao {
  padding: 40px 24px;
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  text-align: center;
}
.obrigado__icone { width: 72px; height: 72px; margin: 0 auto 20px; fill: none; stroke: var(--laranja); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.obrigado h1 { font-size: 1.875rem; margin-bottom: 12px; }
.obrigado p { font-size: 1.0625rem; color: var(--cinza); margin-bottom: 28px; }

/* ---------- Página de privacidade ---------- */
.texto h1 { font-size: 1.875rem; margin-bottom: 12px; }
.texto h2 { font-size: 1.25rem; margin: 32px 0 12px; }
.texto ul { padding-left: 20px; margin-bottom: 1em; list-style: disc; }
.texto li { margin-bottom: 8px; }
.texto .botao { margin-top: 24px; }

/* ---------- Respeita quem prefere menos animação ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ==============================================================
   Tablet (a partir de 640px)
   ============================================================== */
@media (min-width: 640px) {
  .topo__slogan { display: block; }
  .cartoes--3 { grid-template-columns: repeat(3, 1fr); }
  .cartoes--4 { grid-template-columns: repeat(2, 1fr); }
  .passos { grid-template-columns: repeat(3, 1fr); }
  .passo { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px; }
  .passo p { font-size: 1.0625rem; }
  .hero .botao { width: auto; }
  .hero__nota { text-align: left; }
  .form { padding: 32px; }
  .rodape { padding-bottom: 40px; }
}

/* ==============================================================
   Desktop (a partir de 960px)
   ============================================================== */
@media (min-width: 960px) {
  .secao { padding: 88px 0; }
  .titulo { font-size: 2.25rem; margin-bottom: 40px; }
  .logo { height: 44px; }

  .hero { padding: 72px 0 88px; }
  .hero__grade { grid-template-columns: 1.25fr .75fr; align-items: center; gap: 64px; }
  .hero h1 { font-size: 3.5rem; }
  .hero__sub { font-size: 1.25rem; max-width: 34em; }
  .hero__video { max-width: 340px; }

  .cartoes--4 { grid-template-columns: repeat(4, 1fr); }
  .cartao { padding: 28px; }

  .sobre { grid-template-columns: 320px 1fr; gap: 56px; }
  .sobre__foto { max-width: none; }

  .form__grade { grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
  .form__chamada { position: sticky; top: 40px; }
  .form__chamada p:last-child { font-size: 1.125rem; }

  .rodape__linha { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; text-align: left; gap: 32px; }
  .whats { right: 24px; bottom: 24px; }
}