/* ===== Tokens ===== */
:root {
  /* Paleta oficial (palmipenovamedtec.com.br). --cor-marca (#009FE3) e o ciano
     da barra da marca: sobre ele so texto ESCURO passa (branco da 2.97:1,
     reprova AA) — por isso as duas variantes escurecidas abaixo existem para
     qualquer superficie que precise de texto branco. */
  --cor-marca: #009FE3;             /* ciano oficial: barra da marca, acentos, fundos com texto ESCURO */
  --cor-marca-escura: #00699A;      /* ciano escurecido: superficies com texto branco (6.02:1) */
  --cor-marca-mais-escura: #0E3178; /* azul-marinho oficial: rodape e faixas (12.14:1 com branco) */
  --cor-acento: #F78F23;            /* laranja oficial: detalhes decorativos, fundos com texto escuro */
  --cor-wpp: #0F7A39;               /* verde WhatsApp escurecido: branco 5.44:1 */
  --cor-wpp-escura: #0b5c2b;        /* hover e texto sobre branco: 8.14:1 */
  --cor-texto: #1c2529;
  --cor-texto-suave: #56646d;
  --cor-fundo: #ffffff;
  --cor-fundo-alt: #f4f7f9;
  --cor-borda: #dfe6ea;

  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --t-xs: 0.875rem;
  --t-sm: 1rem;
  --t-md: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  --t-lg: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --t-xl: clamp(1.9rem, 1.4rem + 2.4vw, 3.1rem);

  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 1.5rem;
  --esp-4: 2.5rem;
  --esp-5: 4rem;

  --raio: 12px;
  --sombra: 0 2px 10px rgba(15, 40, 55, 0.08);
  --sombra-alta: 0 8px 24px rgba(15, 40, 55, 0.14);
  --largura-max: 1200px;
  --altura-barra-mobile: 60px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-text-size-adjust: 100%;
  /* Reserva a barra fixa + a faixa do indicador de home do iOS. */
  padding-bottom: calc(var(--altura-barra-mobile) + env(safe-area-inset-bottom, 0px));
}

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

h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--esp-2); }
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); padding-bottom: var(--esp-1); }
h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: var(--esp-1);
  background: var(--cor-acento);
  border-radius: 2px;
}
h3 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cor-texto-suave); }
p { margin: 0 0 var(--esp-2); }

a { color: var(--cor-marca-escura); }

:focus-visible { outline: 3px solid var(--cor-marca-escura); outline-offset: 3px; border-radius: 4px; }

/* O cabecalho agora e pintado com --cor-marca (#009FE3) solido. Nem o anel
   padrao (--cor-marca-escura, 2.03:1 sobre o ciano) nem branco (2.97:1) batem
   3:1 (WCAG 1.4.11) ali — so texto quase-preto passa (5.25:1). Declarada ANTES
   do bloco de superficies escuras abaixo para que .btn--wpp:focus-visible
   (mesma especificidade) vença por ordem de origem no CTA de WhatsApp do menu,
   que fica dentro do cabecalho mas tem fundo verde proprio. */
.cabecalho :focus-visible { outline-color: var(--cor-texto); }

/* O anel de foco padrao (--cor-marca-escura) mede 6.02:1 sobre fundos claros,
   mas cai abaixo de 3:1 (WCAG 1.4.11) sobre as proprias superficies escuras da
   marca e sobre o verde do WhatsApp. Sobrescrevemos a cor do anel nessas
   superficies, auditadas individualmente — todas passam com branco:
   - marca escura/mais-escura: branco mede 6.02:1 e 12.14:1.
   - verde WhatsApp: branco mede 5.44:1 (#0F7A39) e 8.14:1 (#0b5c2b). */
.pular-para-conteudo:focus-visible,
.numeros :focus-visible,
.rodape :focus-visible,
.btn--contorno:hover:focus-visible,
.btn--wpp:focus-visible,
.barra-mobile__item--wpp:focus-visible {
  outline-color: #fff;
}

.container { width: min(100% - 2rem, var(--largura-max)); margin-inline: auto; }

section { padding-block: var(--esp-4); }

.seccao__intro { color: var(--cor-texto-suave); max-width: 62ch; }

.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--cor-marca-escura); color: #fff; padding: var(--esp-2);
}
.pular-para-conteudo:focus { left: 0; }

/* ===== Botões ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--esp-1);
  min-height: 46px;
  padding: 0.7rem 1.3rem;
  border-radius: var(--raio);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color .15s, color .15s, transform .15s, border-color .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn--grande { min-height: 54px; padding: 0.9rem 1.8rem; font-size: var(--t-md); }

.btn--wpp { background: var(--cor-wpp); color: #fff; }
.btn--wpp:hover { background: var(--cor-wpp-escura); }

.btn--contorno { border-color: var(--cor-marca-escura); color: var(--cor-marca-escura); background: transparent; }
.btn--contorno:hover { background: var(--cor-marca-mais-escura); border-color: var(--cor-marca-mais-escura); color: #fff; }

/* ===== Cabeçalho ===== */
/* Fundo solido de proposito: era translucido com blur, mas um ciano
   translucido sobre conteudo rolando por baixo derivaria de contraste em
   tempo real (a suite so mede o estado estatico). Solido mantem os 5.25:1
   do texto quase-preto sobre --cor-marca sempre estaveis. */
.cabecalho {
  position: sticky; top: 0; z-index: 50;
  background: var(--cor-marca);
  box-shadow: 0 1px 0 rgba(14, 49, 120, 0.25);
}
.cabecalho__interno {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-2); min-height: 68px;
}

/* Cor explicita: sem isso .logo herdava o link padrao (--cor-marca-escura,
   2.03:1 sobre o ciano do cabecalho). Hoje o anchor so contem a <img> da logo
   e o .logo__unidade (que define sua propria cor), entao nada renderiza com
   essa cor ainda — mas e uma armadilha para qualquer texto futuro dentro do
   link. --cor-texto mede 5.25:1 sobre --cor-marca. */
.logo { display: flex; align-items: center; gap: var(--esp-1); text-decoration: none; color: var(--cor-texto); }
.logo__img { display: block; height: 30px; width: auto; }
.logo__unidade {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cor-texto); /* 5.25:1 sobre --cor-marca */
  padding-left: var(--esp-1);
  border-left: 1px solid rgba(28, 37, 41, 0.3);
  line-height: 1.2; white-space: nowrap;
}

.nav-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 10px;
  background: transparent; border: 1px solid rgba(28, 37, 41, 0.3); border-radius: 10px;
  cursor: pointer;
}
.nav-toggle__barra { display: block; height: 2px; background: var(--cor-texto); border-radius: 2px; }

.nav {
  position: absolute; inset-inline: 0; top: 100%;
  display: none; flex-direction: column; gap: var(--esp-2);
  padding: var(--esp-3) 1rem;
  background: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda);
  box-shadow: var(--sombra);
}
.nav--aberto { display: flex; }

.nav__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-1); }
.nav__lista a {
  display: block; padding: 0.7rem 0.25rem; min-height: 44px;
  text-decoration: none; color: var(--cor-texto); font-weight: 600;
}
/* Sem troca de cor no hover: em telas >=1024px o menu fica sobre o proprio
   ciano do cabecalho, onde --cor-marca-escura da so 2.03:1 (reprova 1.4.11).
   --cor-texto passa em ambos os fundos possiveis (ciano e o branco do menu
   mobile aberto), entao o feedback de hover vem so do sublinhado. */
.nav__lista a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav__cta { width: 100%; }

/* ===== Hero ===== */
.hero { background: var(--cor-fundo-alt); padding-block: var(--esp-4); }
.hero__interno { display: grid; gap: var(--esp-3); }
.hero__sub { color: var(--cor-texto-suave); max-width: 56ch; }
.hero__marca {
  margin: 0 0 var(--esp-1);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cor-marca-mais-escura);
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.hero__midia img { border-radius: var(--raio); box-shadow: var(--sombra-alta); width: 100%; object-fit: cover; }

/* ===== Números ===== */
.numeros { background: var(--cor-marca-escura); color: #fff; padding-block: var(--esp-3); }
.numeros__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-3); text-align: center;
}
.numeros__lista li { display: flex; flex-direction: column; }
.numeros__lista strong { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); line-height: 1.1; }
/* Sem opacity: a 0.85 o branco compunha #daebea sobre a marca escura e caia
   para 4.22:1, abaixo de AA. A 100% mede 5.20:1 e visualmente e o mesmo rotulo. */
.numeros__lista span { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em; }

/* ===== Grade de produtos ===== */
.grade-produtos {
  list-style: none; margin: var(--esp-3) 0 0; padding: 0;
  display: grid; gap: var(--esp-2);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.card-produto {
  display: flex; flex-direction: column; height: 100%;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda); border-radius: var(--raio);
  overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: var(--sombra);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.card-produto:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: var(--cor-marca-escura); }
.card-produto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-produto__nome { display: block; padding: var(--esp-2) var(--esp-2) 0; font-weight: 700; }
.card-produto__cta {
  display: block; margin-top: auto; padding: var(--esp-1) var(--esp-2) var(--esp-2);
  font-size: var(--t-xs); font-weight: 700; color: var(--cor-wpp-escura);
}
.produtos__extra { margin-top: var(--esp-3); color: var(--cor-texto-suave); }

/* ===== Palmilhas / Sobre ===== */
.palmilhas { background: var(--cor-fundo-alt); }
.palmilhas__interno, .sobre__interno { display: grid; gap: var(--esp-3); align-items: center; }
.palmilhas__midia img, .sobre__midia img {
  width: 100%; border-radius: var(--raio); box-shadow: var(--sombra); object-fit: cover;
}

/* ===== Podologia ===== */
.podologia__interno {
  display: grid; gap: var(--esp-2); align-items: center;
  padding: var(--esp-3); border: 1px solid var(--cor-borda); border-left: 4px solid var(--cor-acento);
  border-radius: var(--raio);
  background: var(--cor-fundo);
}
.podologia h2 { font-size: var(--t-lg); }
.podologia p { margin-bottom: 0; color: var(--cor-texto-suave); }

/* ===== Contato ===== */
.contato { background: var(--cor-fundo-alt); }
.contato__dados { margin-top: var(--esp-3); }
.contato__dados h3 { margin-top: var(--esp-3); }
.contato__dados h3:first-child { margin-top: 0; }
.contato__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-3); }

/* ===== Rodapé ===== */
.rodape { background: var(--cor-marca-mais-escura); color: #fff; padding-block: var(--esp-4); }
.rodape a { color: #fff; }
.rodape__copy { margin: var(--esp-3) 0 0; font-size: var(--t-xs); opacity: 0.75; }

/* ===== Barra fixa mobile ===== */
/* A barra cresce para cobrir a faixa do indicador de home do iOS, mas o
   recuo vai nos itens, nao na barra: assim o verde do WhatsApp pinta ate a
   borda inferior da tela em vez de deixar uma faixa clara embaixo dele. */
.barra-mobile {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr;
  height: calc(var(--altura-barra-mobile) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
}
.barra-mobile__item {
  display: flex; align-items: center; justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-weight: 700; text-decoration: none; color: var(--cor-marca-escura);
}
.barra-mobile__item--wpp { background: var(--cor-wpp); color: #fff; }

/* ===== LP de podologia ===== */
/* Nada aqui pode vazar em index.html. Duas formas de garantir isso: ou a classe
   so existe na LP (.tratamos, .passo, .combo, .hero__nota), ou o seletor e
   estreitado por combinador de filho / modificador — .cabecalho__interno >
   .btn--wpp (no index o CTA do cabecalho e .nav__cta, dentro da <nav>) e
   .numeros--tres. Excecao consciente: .podologia__saiba mora aqui por assunto,
   mas e usada no index (o link para esta LP). */

/* O cabecalho da podologia nao tem nav: o logo fica a esquerda e o CTA a direita.
   O recuo horizontal menor e o que mantem "Agendar" em UMA linha a 390px — sem
   isso o cabecalho cresce de 68px para 80px e o scroll-padding-top (84px, medido
   para 68px) passa a errar o alvo das ancoras. O combinador de filho e o que
   segura a regra fora do index (la o CTA do cabecalho e .nav__cta, dentro da <nav>). */
.cabecalho__interno > .btn--wpp { margin-left: auto; padding-inline: var(--esp-2); }

/* Ressalva da oferta: pequena e discreta de proposito — e um esclarecimento,
   nao um muro de aviso legal. --cor-texto-suave sobre --cor-fundo-alt = 5.68:1. */
.hero__nota {
  margin: var(--esp-2) 0 0;
  max-width: 52ch;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--cor-texto-suave);
}

/* A faixa de numeros compartilhada e calibrada para os QUATRO numeros do index
   (2 colunas no mobile, 4 a partir de 768px). A LP de podologia tem tres itens:
   com a grade de 4, o terceiro ("1ª avaliacao gratuita" — a propria oferta)
   ficava sozinho numa meia-linha a 390px e sobrava uma coluna morta de 282px a
   1440px. Escopo por modificador em vez de afrouxar a regra compartilhada. */
.numeros--tres .numeros__lista { grid-template-columns: repeat(3, 1fr); gap: var(--esp-2); }

.tratamos__lista {
  list-style: none;
  margin: var(--esp-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--esp-2);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.tratamos__lista li {
  padding: var(--esp-2);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-marca);
  border-radius: var(--raio);
  font-weight: 700;
  color: var(--cor-texto);
}
.tratamos__obs { margin-top: var(--esp-3); color: var(--cor-texto-suave); }

.passos { background: var(--cor-fundo-alt); }
.passos__lista {
  list-style: none;
  margin: var(--esp-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--esp-3);
}
.passo {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num titulo" "num texto";
  gap: 0 var(--esp-2);
  align-items: start;
}
.passo__num {
  grid-area: num;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cor-marca-mais-escura);
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
}
.passo__titulo { grid-area: titulo; font-weight: 700; color: var(--cor-texto); }
.passo__texto { grid-area: texto; color: var(--cor-texto-suave); }

.combos__lista {
  list-style: none;
  margin: var(--esp-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--esp-2);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.combo {
  display: flex; flex-direction: column; height: 100%;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: var(--sombra);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.combo:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: var(--cor-marca-escura); }
.combo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.combo__nome { display: block; padding: var(--esp-2) var(--esp-2) 0; font-weight: 700; }
.combo__cta {
  display: block; margin-top: auto;
  padding: var(--esp-1) var(--esp-2) var(--esp-2);
  font-size: var(--t-xs); font-weight: 700;
  color: var(--cor-wpp-escura);
}

.podologia__saiba { display: inline-block; margin-top: var(--esp-2); font-weight: 700; }

/* ===== FAQ ===== */
/* Sempre visivel, sem acordeao: conteudo escondido atras de JS ou de <details>
   e menos confiavel de extrair por motores de resposta, e este bloco existe
   justamente para ser extraido. */
.faq { background: var(--cor-fundo-alt); }
.faq__lista { margin: var(--esp-3) 0 0; }
.faq__p {
  margin: 0;
  font-weight: 700;
  color: var(--cor-texto);
}
.faq__r {
  margin: var(--esp-1) 0 var(--esp-3);
  padding-left: var(--esp-2);
  border-left: 3px solid var(--cor-marca);
  color: var(--cor-texto-suave);
  max-width: 68ch;
}
.faq__r:last-child { margin-bottom: 0; }

.local__nota {
  margin-top: var(--esp-2);
  font-size: var(--t-xs);
  color: var(--cor-texto-suave);
}

/* ===== 768px ===== */
@media (min-width: 768px) {
  section { padding-block: var(--esp-5); }
  .logo__img { height: 36px; }
  .numeros__lista { grid-template-columns: repeat(4, 1fr); }
  /* Tres colunas em qualquer largura; aqui so a respiracao volta ao normal. */
  .numeros--tres .numeros__lista { gap: var(--esp-3); }
  .passos__lista { grid-template-columns: repeat(3, 1fr); }
  .grade-produtos { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .palmilhas__interno, .sobre__interno { grid-template-columns: 1fr 1fr; }
  .palmilhas__midia { order: -1; }
  .podologia__interno { grid-template-columns: 1fr auto; gap: var(--esp-4); }
  .contato__dados { max-width: 60ch; }
  .rodape__interno { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-2); }
}

/* ===== 1024px ===== */
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .barra-mobile { display: none; }
  .nav-toggle { display: none; }
  .logo__img { height: 42px; }

  .nav {
    position: static; display: flex; flex-direction: row; align-items: center;
    gap: var(--esp-3); padding: 0; background: none; border: 0; box-shadow: none;
  }
  .nav__lista { flex-direction: row; gap: var(--esp-3); }
  .nav__cta { width: auto; }

  .hero__interno { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: var(--esp-4); }
}

/* ===== Preferências do usuário ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .cabecalho, .barra-mobile { display: none; }
}