/* ==========================================================================
   Passo Certo, podologia, Salvador. Demo 03 da Caboco Web.
   Mobile-first: a base e o celular, os @media sobem com min-width.
   Cor so por custom property. Nenhuma literal de cor abaixo do :root,
   nem hexadecimal nem rgb()/rgba() com numero fixo.
   ========================================================================== */

:root {
  /* paleta contratada */
  --petroleo: #0E4C63;          --petroleo-rgb: 14, 76, 99;
  --petroleo-fundo: #0A3444;    --petroleo-fundo-rgb: 10, 52, 68;
  --ciano: #1FA8C9;             --ciano-rgb: 31, 168, 201;
  --ciano-claro: #7FD3E8;       --ciano-claro-rgb: 127, 211, 232;
  --claro: #F2F6F7;             --claro-rgb: 242, 246, 247;
  --texto: #10262E;             --texto-rgb: 16, 38, 46;
  --texto-claro: #57707C;       --texto-claro-rgb: 87, 112, 124;
  --branco: #FFFFFF;            --branco-rgb: 255, 255, 255;

  /* medidas */
  --env-max: 1080px;
  --env-pad: 18px;
  --raio: 14px;
  --raio-g: 22px;
}

/* --------------------------------------------------------------- base --- */

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

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

body {
  margin: 0;
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--texto);
  background-color: var(--claro);
}

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.2; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
/* height: auto e obrigatorio. Sem ele o atributo height="..." do HTML vira
   altura definida, o aspect-ratio da CSS e ignorado e o espaco de imagem
   estica ate a altura do arquivo final. */
img { max-width: 100%; height: auto; }
blockquote { margin: 0; }
address { font-style: normal; }

.env {
  width: 100%;
  max-width: var(--env-max);
  margin: 0 auto;
  padding: 0 var(--env-pad);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }
.ico-estrela { width: 15px; height: 15px; fill: var(--petroleo); flex: 0 0 auto; }
.ico-check { width: 19px; height: 19px; fill: var(--ciano-claro); flex: 0 0 auto; margin-top: 3px; }

/* botao de acao. Sobre ciano o texto e escuro, nunca branco: branco da 2,80:1
   e reprova, o --texto da 5,60:1. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  padding: 16px 22px;
  border-radius: 999px;
  background-color: var(--ciano);
  color: var(--texto);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(var(--petroleo-rgb), .24);
  transition: transform .18s ease, box-shadow .18s ease;
}

.botao:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(var(--petroleo-rgb), .32); }
.botao:active { transform: translateY(0); }

/* mesma cor de fundo, usado quando o botao cai sobre secao escura e precisa
   de um contorno para nao encostar no fundo */
.botao-claro { box-shadow: 0 0 0 4px rgba(var(--branco-rgb), .12), 0 10px 26px rgba(var(--texto-rgb), .3); }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--ciano);
  outline-offset: 3px;
}

/* fora da tela ate ganhar foco pelo teclado, unico link da pagina que leva
   a algum lugar dentro dela mesma */
.pular {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--raio);
  background-color: var(--branco);
  color: var(--petroleo);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}

.pular:focus { top: 12px; }

.sub {
  margin-top: 12px;
  color: var(--texto-claro);
  font-size: .96rem;
}

/* -------------------------------------------------------- topo de marca --- */

.topo-marca {
  background-color: var(--branco);
  border-bottom: 1px solid rgba(var(--petroleo-rgb), .12);
}

.topo-marca-int { padding-top: 9px; padding-bottom: 9px; }

.marca {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  color: var(--petroleo);
}

/* ------------------------------------------- 1. topo que ataca a dor ----- */

.dor {
  background-color: var(--claro);
  background-image: radial-gradient(130% 70% at 85% 0%,
                    rgba(var(--ciano-rgb), .26),
                    rgba(var(--ciano-rgb), 0) 68%);
}

.dor-int { padding-top: 34px; padding-bottom: 40px; }

.dor h1 {
  font-size: 1.62rem;
  letter-spacing: -.015em;
  color: var(--petroleo);
}

.dor h1 span { color: var(--texto); }

/* Aqui o texto de apoio e petroleo, nao --texto-claro como no resto da pagina.
   Motivo medido: o brilho ciano do fundo escurece o --claro ate #C4E5ED no
   canto mais forte, e ali o --texto-claro cai para 3,93:1. O petroleo no mesmo
   ponto da 6,80:1. Baixar a opacidade do brilho nao resolveria: mesmo com 8%
   de ciano o --texto-claro ja fica em 4,47:1. */
.dor-texto {
  margin-top: 18px;
  font-size: 1.02rem;
  color: var(--petroleo);
}

.dor .botao { margin-top: 26px; }

.cta-apoio {
  margin-top: 10px;
  font-size: .82rem;
  color: var(--petroleo);
}

.prova-social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  padding: 12px 14px;
  border-radius: var(--raio);
  background-color: var(--branco);
  border: 1px solid rgba(var(--petroleo-rgb), .14);
  font-size: .87rem;
  color: var(--texto-claro);
}

.prova-social strong { color: var(--petroleo); font-weight: 700; }

.dor-foto {
  position: relative;
  margin: 30px auto 0;
  width: 100%;
  max-width: 300px;
}

.dor-foto::before {
  content: "";
  position: absolute;
  inset: 14px -10px -14px 10px;
  border-radius: var(--raio-g);
  background-color: rgba(var(--ciano-rgb), .5);
}

.dor-foto img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 11;
  object-fit: cover;
  border-radius: var(--raio-g);
  background-color: var(--petroleo);
}

/* ------------------------------------ 2. barra rolante de condicoes ------ */
/* A rolagem horizontal vive dentro do .faixa-trilho, que e um contexto de
   rolagem proprio. Por isso ela nao entra no scrollWidth do documento e a
   pagina continua passando na checagem de 360px. Nada de overflow no body. */

.faixa {
  background-color: var(--ciano);
  border-top: 1px solid rgba(var(--petroleo-rgb), .18);
  border-bottom: 1px solid rgba(var(--petroleo-rgb), .18);
}

.faixa-trilho {
  display: flex;
  align-items: center;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.faixa-trilho::-webkit-scrollbar { display: none; }

.faixa-item {
  flex: 0 0 auto;
  scroll-snap-align: center;
  padding: 13px 16px;
  white-space: nowrap;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texto);
}

.faixa-item + .faixa-item { border-left: 1px solid rgba(var(--texto-rgb), .22); }

/* ------------------------------------- 3. grid de condicoes em foto ------ */

.condicoes {
  background-color: var(--claro);
  padding: 46px 0 48px;
}

.condicoes h2 {
  font-size: 1.44rem;
  color: var(--petroleo);
}

.grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 26px;
}

.cartao {
  background-color: var(--branco);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(var(--petroleo-rgb), .1);
}

.cartao-foto { position: relative; margin: 0; }

/* No celular a celula e quadrada, que e o desenho da peca de referencia e o
   que da ritmo ao grid de duas colunas. O arquivo continua 4:3 e o
   object-fit corta as laterais. De 600px para cima a celula volta a 4:3. */
.cartao-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  background-color: var(--petroleo);
}

/* min-height de duas linhas para que a barra do rotulo fique na mesma altura
   nos quatro cartoes, mesmo quando um nome cabe em uma linha so */
.rotulo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  min-height: 40px;
  padding: 7px 10px;
  background-color: var(--ciano);
  color: var(--texto);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cartao > p {
  padding: 12px 12px 15px;
  font-size: .8rem;
  color: var(--texto-claro);
}

.nota-grade {
  margin-top: 22px;
  font-size: .9rem;
  color: var(--texto-claro);
}

.condicoes .botao { margin-top: 20px; }

/* ------------------------------------------- 4. razoes para tratar ------- */

.razoes {
  background-color: var(--petroleo);
  background-image: linear-gradient(158deg, var(--petroleo) 0%, var(--petroleo-fundo) 100%);
  color: var(--branco);
  padding: 50px 0 54px;
}

.razoes h2 { font-size: 1.44rem; }

.razoes-abre {
  margin-top: 14px;
  font-size: .98rem;
  color: rgba(var(--branco-rgb), .88);
}

.lista-razoes { margin-top: 30px; display: grid; gap: 24px; }

.lista-razoes h3 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ciano-claro);
}

.lista-razoes p {
  margin-top: 8px;
  padding-left: 29px;
  font-size: .92rem;
  color: rgba(var(--branco-rgb), .86);
}

.razoes .botao { margin-top: 34px; }

/* ----------------------------------------------- 5. quem atende ---------- */

.quem {
  background-color: var(--branco);
  padding: 48px 0 50px;
}

.quem h2 { font-size: 1.44rem; color: var(--petroleo); }

.quem-cartao {
  margin-top: 24px;
  padding: 24px 20px;
  border-radius: var(--raio-g);
  background-color: var(--claro);
  border: 1px solid rgba(var(--petroleo-rgb), .12);
  text-align: center;
}

.quem-retrato {
  display: block;
  width: 132px;
  height: 132px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 50%;
  background-color: var(--petroleo);
  box-shadow: 0 0 0 5px rgba(var(--ciano-rgb), .38);
}

.quem-nome {
  margin-top: 16px;
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--petroleo);
}

.quem-credencial {
  margin-top: 6px;
  font-size: .86rem;
  color: var(--texto-claro);
}

.quem-fala { margin-top: 26px; display: grid; gap: 14px; }

.quem-fala p { font-size: .96rem; color: var(--texto-claro); }

.quem-fala p:first-child {
  padding-left: 14px;
  border-left: 3px solid var(--ciano);
  color: var(--texto);
}

/* ------------------------------------------------ 6. depoimentos --------- */

.depoimentos {
  background-color: var(--claro);
  padding: 46px 0 48px;
}

.depoimentos h2 { font-size: 1.44rem; color: var(--petroleo); }

.lista-depo { margin-top: 24px; display: grid; gap: 14px; }

.depo {
  padding: 20px 18px;
  border-radius: var(--raio);
  background-color: var(--branco);
  border: 1px solid rgba(var(--petroleo-rgb), .12);
  box-shadow: 0 6px 18px rgba(var(--petroleo-rgb), .07);
}

.estrelas { display: flex; gap: 3px; }

.depo blockquote {
  margin-top: 12px;
  font-size: .94rem;
  color: var(--texto);
}

.depo-quem {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--texto-claro);
}

.inicial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: var(--ciano);
  color: var(--texto);
  font-weight: 700;
  font-size: .9rem;
}

.depo-nota {
  margin-top: 20px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--petroleo);
}

/* -------------------------------------------------- 7. a objecao --------- */

.objecao {
  background-color: var(--branco);
  padding: 48px 0 50px;
}

.objecao h2 { font-size: 1.44rem; color: var(--petroleo); }

.obj-bloco {
  margin-top: 24px;
  padding: 20px 18px;
  border-radius: var(--raio);
  background-color: var(--claro);
  border-left: 4px solid var(--ciano);
}

.obj-bloco h3 { font-size: 1.04rem; color: var(--petroleo); }

.obj-bloco p { margin-top: 10px; font-size: .93rem; color: var(--texto-claro); }

.obj-foto { margin: 28px 0 0; }

.obj-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--raio);
  background-color: var(--petroleo);
}

.obj-foto figcaption {
  margin-top: 10px;
  font-size: .82rem;
  color: var(--texto-claro);
}

.objecao .botao { margin-top: 28px; }

/* -------------------------------------------------------- 8. FAQ --------- */

.faq {
  background-color: var(--claro);
  padding: 46px 0 50px;
}

.faq h2 { font-size: 1.44rem; color: var(--petroleo); }

.lista-faq { margin-top: 22px; display: grid; gap: 10px; }

.item-faq {
  border-radius: var(--raio);
  background-color: var(--branco);
  border: 1px solid rgba(var(--petroleo-rgb), .13);
  overflow: hidden;
}

.item-faq h3 { font-size: 1rem; font-weight: 600; }

.faq-botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 15px 16px;
  border: 0;
  background-color: rgba(var(--branco-rgb), 0);
  color: var(--petroleo);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.seta {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  margin-top: -4px;
  /* petroleo e nao ciano: a seta e componente de interface e indica estado,
     entao precisa de 3:1. Ciano sobre branco da 2,80 e reprova, petroleo da 9,41. */
  border-right: 2px solid var(--petroleo);
  border-bottom: 2px solid var(--petroleo);
  transform: rotate(45deg);
  transition: transform .25s ease, margin-top .25s ease;
}

.faq-botao[aria-expanded="true"] .seta { margin-top: 3px; transform: rotate(-135deg); }

.faq-caixa {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}

.faq-caixa.aberta { grid-template-rows: 1fr; }

.faq-texto { overflow: hidden; }

.faq-texto p {
  padding: 0 16px 16px;
  font-size: .91rem;
  color: var(--texto-claro);
}

/* ------------------------------------------- 9. onde fica e quando ------- */

.local {
  background-color: var(--branco);
  padding: 46px 0 50px;
}

.local h2 { font-size: 1.44rem; color: var(--petroleo); }

.local-dados { margin-top: 24px; display: grid; gap: 20px; }

.local-linha {
  padding: 18px;
  border-radius: var(--raio);
  background-color: var(--claro);
}

.local-rotulo {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-claro);
}

.endereco {
  margin-top: 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--texto);
}

.local-ref { margin-top: 8px; font-size: .86rem; color: var(--texto-claro); }

.horario {
  margin-top: 6px;
  font-size: .95rem;
  color: var(--texto);
}

.mapa {
  margin-top: 22px;
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid rgba(var(--petroleo-rgb), .16);
  background-color: var(--claro);
}

.mapa iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
}

/* ---------------------------------------------------- 10. acao final ----- */

.final {
  background-color: var(--petroleo);
  background-image: linear-gradient(158deg, var(--petroleo-fundo) 0%, var(--petroleo) 100%);
  color: var(--branco);
  padding: 50px 0 52px;
  text-align: center;
}

.final h2 { font-size: 1.42rem; }

.final > .env > p {
  margin-top: 14px;
  font-size: .98rem;
  color: rgba(var(--branco-rgb), .88);
}

.final .botao { margin: 26px auto 0; }

.final-apoio {
  margin-top: 14px;
  font-size: .84rem;
  color: rgba(var(--branco-rgb), .78);
}

/* --------------------------------------------------------- 11. rodape ---- */

.rodape {
  background-color: var(--texto);
  color: rgba(var(--branco-rgb), .82);
  padding: 34px 0 104px;
  font-size: .85rem;
}

.rodape-marca { font-size: 1.08rem; font-weight: 700; color: var(--branco); }

.rodape-linha { margin-top: 6px; }

.rodape-selo {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--branco-rgb), .2);
  font-size: .8rem;
  color: rgba(var(--branco-rgb), .72);
}

.rodape-assina { margin-top: 12px; font-weight: 600; color: var(--ciano-claro); }

/* ------------------------------------------------------ CTA flutuante ---- */

/* No celular ele e so o icone, num circulo de 54px. Um botao com texto fica
   parado por cima do paragrafo que a pessoa esta lendo o tempo todo, e o
   estrago e proporcional ao tamanho dele. A palavra volta a partir de 600px,
   onde sobra margem lateral e ele nao encosta em texto. */
.cta-flutuante {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 999px;
  background-color: var(--ciano);
  color: var(--texto);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(var(--texto-rgb), .34);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.cta-flutuante .ico { width: 26px; height: 26px; }

/* fica legivel para leitor de tela mesmo quando some da vista */
.cta-flutuante-texto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cta-flutuante.visivel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ------------------------------------------------------- 600px e acima --- */

@media (min-width: 600px) {
  :root { --env-pad: 26px; }

  .dor-int { padding-top: 46px; padding-bottom: 54px; }
  .dor h1 { font-size: 2.05rem; }
  .dor-texto { font-size: 1.08rem; max-width: 34em; }
  .dor-foto { max-width: 340px; }

  .grade { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .cartao-foto img { aspect-ratio: 4 / 3; }
  .rotulo { font-size: .74rem; padding: 9px 12px; }
  .cartao > p { font-size: .88rem; padding: 14px 14px 18px; }

  .condicoes h2, .razoes h2, .quem h2, .depoimentos h2,
  .objecao h2, .faq h2, .local h2, .final h2 { font-size: 1.72rem; }

  .lista-depo { grid-template-columns: repeat(2, 1fr); }
  .lista-razoes { grid-template-columns: repeat(2, 1fr); gap: 28px 26px; }

  .quem-cartao { display: grid; grid-template-columns: auto 1fr; gap: 22px; text-align: left; align-items: center; }
  .quem-retrato { margin: 0; }
  .quem-nome { margin-top: 0; }

  .local-dados { grid-template-columns: 1.4fr 1fr; }
  .mapa iframe { height: 320px; }

  .cta-flutuante { width: auto; height: auto; padding: 13px 20px; right: 18px; bottom: 18px; }
  .cta-flutuante .ico { width: 20px; height: 20px; }
  .cta-flutuante-texto { position: static; width: auto; height: auto; clip-path: none; overflow: visible; }
}

/* ------------------------------------------------------- 900px e acima --- */

@media (min-width: 900px) {
  .dor-int {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    grid-template-areas:
      "titulo foto"
      "texto  foto"
      "botao  foto"
      "apoio  foto"
      "prova  foto";
    column-gap: 44px;
    align-items: start;
    padding-top: 62px;
    padding-bottom: 68px;
  }

  .dor h1 { grid-area: titulo; font-size: 2.5rem; }
  .dor-texto { grid-area: texto; }
  .dor .botao { grid-area: botao; }
  .cta-apoio { grid-area: apoio; }
  .prova-social { grid-area: prova; justify-self: start; }
  .dor-foto { grid-area: foto; margin-top: 0; max-width: 100%; align-self: center; }

  .grade { grid-template-columns: repeat(4, 1fr); }
  .lista-depo { grid-template-columns: repeat(3, 1fr); }

  .condicoes, .depoimentos, .quem, .objecao, .faq, .local { padding: 72px 0 76px; }
  .razoes, .final { padding: 76px 0 80px; }

  .obj-bloco { margin-top: 18px; }
  .lista-faq { max-width: 780px; }
  .faq-texto p { font-size: .95rem; }

  .final .botao { max-width: 420px; }
  .cta-flutuante { right: 24px; bottom: 24px; padding: 14px 22px; }
  .rodape { padding-bottom: 44px; }
}

/* ------------------------------------------------- movimento reduzido ---- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}