/* ==========================================================================
   FUNDAÇÃO — Pant Sites
   Este arquivo garante o piso de qualidade de TODO site: respiro lateral,
   ritmo entre seções, botões com toque confortável, grids, superfícies e
   heróis testados.

   ⛔ NÃO EDITE E NÃO REESCREVA ESTE ARQUIVO.
   A personalização de cada cliente acontece só em `tema.css` (cores, fontes,
   raio, personalidade) e na composição das seções no HTML.

   Regra de ouro: todo conteúdo de texto vive dentro de `.wrap`. É isso que
   impede texto colado na borda da tela.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens padrão (o tema sobrescreve os que quiser)
   -------------------------------------------------------------------------- */
:root {
  /* superfícies e cores (neutras por padrão) */
  --cor-fundo: #ffffff;
  --cor-superficie: #f5f6f8;
  --cor-escuro: #1b1d21;
  --cor-texto: #1d2025;
  --cor-texto-suave: #5d6470;
  --cor-texto-inverso: #ffffff;
  --cor-texto-inverso-suave: rgba(255, 255, 255, 0.72);
  --cor-borda: #e3e6ec;
  --cor-borda-inversa: rgba(255, 255, 255, 0.16);
  --cor-marca: #1d4ed8;
  --cor-marca-escura: #17369b;
  --cor-destaque: #b06d00;        /* usada sobre fundo CLARO: precisa passar 4.5:1 */
  --cor-destaque-escura: #8a5500;
  --cor-destaque-clara: #ffc24d;  /* usada sobre fundo ESCURO */
  --cor-whats: #25d366;

  /* tipografia */
  --fonte-titulo: system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-corpo: system-ui, -apple-system, "Segoe UI", sans-serif;
  --peso-titulo: 700;

  /* escala fluida: corpo nunca abaixo de 16px */
  --t-corpo: 1rem;
  --t-corpo-g: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --t-pequeno: 0.9rem;
  --t-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  --t-h2: clamp(1.85rem, 1.4rem + 2.2vw, 3rem);
  --t-h1: clamp(2.2rem, 1.6rem + 3.2vw, 3.9rem);

  /* espaçamento (escala única para o site inteiro) */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 2.75rem;
  --e-8: 3.5rem;

  /* respiro lateral garantido: mínimo 20px em qualquer tela */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --largura: 1160px;
  --largura-texto: 68ch;

  /* ritmo vertical de seção: mínimo 56px no mobile */
  --ritmo-secao: clamp(3.5rem, 8vw, 7rem);

  /* forma e profundidade */
  --raio: 8px;
  --raio-g: 14px;
  --sombra: 0 8px 24px rgba(20, 24, 32, 0.08);
  --sombra-g: 0 24px 60px rgba(20, 24, 32, 0.16);

  /* header fixo: usado para as âncoras não ficarem cortadas */
  --altura-header: 72px;

  /* movimento */
  --rapido: 180ms;
  --normal: 300ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset enxuto
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  line-height: 1.65;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
  /* trava qualquer vazamento horizontal acidental */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { text-wrap: pretty; }

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

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

input, button, textarea, select { font: inherit; color: inherit; }

/* foco sempre visível (acessibilidade) */
:focus-visible {
  outline: 3px solid var(--cor-destaque);
  outline-offset: 3px;
  border-radius: 2px;
}

/* âncoras não ficam escondidas atrás do header fixo */
[id] { scroll-margin-top: calc(var(--altura-header) + 1.5rem); }

/* --------------------------------------------------------------------------
   3. Container e ritmo  ← o coração da fundação
   -------------------------------------------------------------------------- */

/* TODO conteúdo de texto usa .wrap. Garante o respiro lateral mínimo. */
.wrap {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-estreito {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* seção com ritmo vertical consistente */
.secao { padding-block: var(--ritmo-secao); }
.secao-curta { padding-block: calc(var(--ritmo-secao) * 0.6); }

/* faixa fina (números, selos). O conteúdo continua dentro do .wrap. */
.faixa { padding-block: var(--e-5); }

/* cabeçalho de seção */
.cab-secao { max-width: 640px; margin-bottom: var(--e-7); }
.cab-secao > * + * { margin-top: var(--e-4); }
.centro { text-align: center; }
.centro.cab-secao { margin-inline: auto; }

.eyebrow {
  display: block;
  font-family: var(--fonte-corpo);
  font-size: 0.875rem; /* 14px: mínimo legível */
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cor-destaque);
}

.texto-apoio {
  color: var(--cor-texto-suave);
  font-size: var(--t-corpo-g);
  max-width: var(--largura-texto);
}
.centro .texto-apoio { margin-inline: auto; }

/* pilha vertical com respiro garantido entre filhos */
.pilha > * + * { margin-top: var(--e-4); }
.pilha-g > * + * { margin-top: var(--e-6); }

/* --------------------------------------------------------------------------
   4. Superfícies (ritmo por cor, sem "caixa dentro de caixa")
   -------------------------------------------------------------------------- */
.superficie-clara  { background: var(--cor-fundo); color: var(--cor-texto); }
.superficie-suave  { background: var(--cor-superficie); color: var(--cor-texto); }

.superficie-escura { background: var(--cor-escuro); color: var(--cor-texto-inverso); }
.superficie-escura h1,
.superficie-escura h2,
.superficie-escura h3 { color: var(--cor-texto-inverso); }
.superficie-escura .texto-apoio { color: var(--cor-texto-inverso-suave); }
/* sobre fundo escuro o destaque precisa ser a versão clara, senão perde contraste */
.superficie-escura .eyebrow { color: var(--cor-destaque-clara); }

/* Card: só para conteúdo ESTREITO (formulário, depoimento, preço).
   ⛔ Nunca use card largo com borda+sombra dentro de seção tingida:
   vira "caixa dentro de caixa" e parece um iframe embutido na página. */
.card {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-g);
  padding: clamp(1.5rem, 1rem + 3vw, 2.5rem);
  /* o card é uma ilha clara: reseta a cor mesmo dentro de seção escura */
  color: var(--cor-texto);
}
.card h1, .card h2, .card h3, .card strong, .card label { color: var(--cor-texto); }
.card .texto-apoio, .card p { color: var(--cor-texto-suave); }
.card-sombra { box-shadow: var(--sombra); }

/* --------------------------------------------------------------------------
   5. Botões (toque confortável e nunca colados)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;          /* alvo de toque confortável */
  padding: 0.85rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--normal) var(--ease),
              color var(--normal) var(--ease),
              border-color var(--normal) var(--ease),
              transform var(--normal) var(--ease);
}

.btn-principal { background: var(--cor-destaque); color: #fff; }
.btn-principal:hover { background: var(--cor-destaque-escura); transform: translateY(-2px); }

.btn-marca { background: var(--cor-marca); color: #fff; }
.btn-marca:hover { background: var(--cor-marca-escura); transform: translateY(-2px); }

.btn-contorno { background: transparent; border-color: var(--cor-borda); color: var(--cor-texto); }
.btn-contorno:hover { border-color: currentColor; }

.superficie-escura .btn-contorno { border-color: var(--cor-borda-inversa); color: var(--cor-texto-inverso); }

.btn-claro { background: #fff; color: var(--cor-texto); }
.btn-claro:hover { transform: translateY(-2px); }

/* grupo de botões: gap garantido, nunca colados */
.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: center;
}
/* no celular estreito, botões ocupam a linha inteira (dentro do .wrap) */
@media (max-width: 400px) {
  .acoes .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   6. Grids com gap garantido
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1rem, 3vw, 2rem); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: clamp(1rem, 3vw, 2rem); }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   7. Mídia e galeria (a obra como protagonista)
   -------------------------------------------------------------------------- */
.figura {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio-g);
  background: var(--cor-superficie);
}
.figura img { width: 100%; height: 100%; object-fit: cover; }

.figura-3x2 img { aspect-ratio: 3 / 2; }
.figura-4x3 img { aspect-ratio: 4 / 3; }
.figura-1x1 img { aspect-ratio: 1 / 1; }

.figura-zoom img { transition: transform 700ms var(--ease); }
.figura-zoom:hover img { transform: scale(1.04); }

/* legenda sobre a foto, com gradiente só na base (não sobre o conteúdo) */
.figura figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--e-5);
  color: #fff;
  background: linear-gradient(0deg, rgba(15, 17, 20, 0.85), transparent);
}
.figura figcaption strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
}
.figura figcaption span { font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); }

/* --------------------------------------------------------------------------
   8. Heróis testados
   -------------------------------------------------------------------------- */

/* 8.1 Editorial: painel de texto + foto edge-to-edge na outra metade.
   O padding do painel garante que o texto NUNCA encoste na imagem nem na borda. */
.hero-editorial { display: grid; }

.hero-editorial .hero-midia { position: relative; min-height: 52vh; }
.hero-editorial .hero-midia img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-editorial .hero-painel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* respiro garantido dos dois lados, sempre */
  padding: clamp(2.5rem, 2rem + 4vw, 5rem) var(--gutter);
}
.hero-editorial .hero-conteudo {
  width: 100%;
  max-width: 34rem;
}
.hero-editorial .hero-conteudo > * + * { margin-top: var(--e-5); }
.hero-editorial h1 { max-width: 16ch; }
.hero-editorial .hero-conteudo p { max-width: 42ch; color: var(--cor-texto-suave); font-size: var(--t-corpo-g); }

@media (min-width: 860px) {
  .hero-editorial { grid-template-columns: 1fr 1fr; min-height: min(88vh, 820px); }
  .hero-editorial .hero-midia { min-height: 100%; }
  /* folga extra entre a foto e o texto no desktop (mínimo 40px) */
  .hero-editorial .hero-painel { padding-inline: clamp(2.5rem, 4vw, 4.5rem); }
}

/* 8.2 Tipográfico: sem foto no topo, o título conduz. */
.hero-tipografico { padding-block: clamp(4rem, 3rem + 6vw, 8rem); }
.hero-tipografico .hero-conteudo { max-width: 46rem; }
.hero-tipografico .hero-conteudo > * + * { margin-top: var(--e-5); }
.hero-tipografico p { max-width: 46ch; color: var(--cor-texto-suave); font-size: var(--t-corpo-g); }

/* --------------------------------------------------------------------------
   9. Cabeçalho e rodapé
   -------------------------------------------------------------------------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--cor-fundo) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cor-borda);
}
.cabecalho .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--altura-header);
}
.cabecalho nav { display: none; gap: var(--e-6); font-size: 0.95rem; font-weight: 500; }
.cabecalho nav a { color: var(--cor-texto-suave); transition: color var(--rapido); }
.cabecalho nav a:hover { color: var(--cor-texto); }
.cabecalho .btn { min-height: 44px; padding: 0.55rem 1.2rem; font-size: 0.92rem; }

@media (min-width: 960px) { .cabecalho nav { display: flex; } }

/* Nome de marca comprido não pode empurrar o botão para fora da tela.
   Vale para qualquer tema que use .marca-nome no cabeçalho. */
.cabecalho .wrap > :first-child { min-width: 0; }
@media (max-width: 460px) {
  .cabecalho .marca-nome { font-size: 1.05rem; }
  .cabecalho .btn { padding-inline: 0.9rem; }
}

.rodape { background: var(--cor-escuro); color: var(--cor-texto-inverso-suave); }
.rodape a { transition: color var(--rapido); }
.rodape a:hover { color: #fff; }
.rodape strong { display: block; color: #fff; font-family: var(--fonte-titulo); margin-bottom: var(--e-3); }
.rodape .rodape-grid { display: grid; gap: var(--e-6); padding-block: var(--e-8) var(--e-6); }
.rodape .links { display: flex; flex-direction: column; gap: var(--e-2); font-size: 0.95rem; }
.rodape .rodape-base {
  border-top: 1px solid var(--cor-borda-inversa);
  padding-block: var(--e-5);
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-3);
}
@media (min-width: 760px) { .rodape .rodape-grid { grid-template-columns: 2fr 1fr 1fr; } }

/* --------------------------------------------------------------------------
   10. FAQ, formulário e WhatsApp flutuante
   -------------------------------------------------------------------------- */
.faq-item { border-bottom: 1px solid var(--cor-borda); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-4);
  min-height: 56px;
  padding-block: var(--e-4);
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .sinal { color: var(--cor-destaque); font-size: 1.5rem; line-height: 1; transition: transform var(--normal) var(--ease); }
.faq-item[open] .sinal { transform: rotate(45deg); }
.faq-item p { padding-bottom: var(--e-5); color: var(--cor-texto-suave); }

.campo { display: block; }
.campo + .campo { margin-top: var(--e-4); }
.campo > span { display: block; font-size: 0.92rem; font-weight: 600; margin-bottom: var(--e-2); }
.campo input,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.8rem 1rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-fundo);
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--cor-marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-marca) 20%, transparent); }
.hp { position: absolute; left: -9999px; }

.whats-flutuante {
  position: fixed;
  right: clamp(1rem, 3vw, 1.5rem);
  bottom: clamp(1rem, 3vw, 1.5rem);
  z-index: 50;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cor-whats);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
  transition: transform var(--normal) var(--ease);
}
.whats-flutuante:hover { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   11. Movimento (entra suave, respeita quem pediu menos animação)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}