/* ============================================================
   DISPOSTO CÁLCULOS TRABALHISTAS: estilo do site
   Cores e fontes saem do manual da marca (16/10/2026).
   Proporção: 70% marfim · 20% azul · 10% terracota.
   ============================================================ */
:root {
  --marca-azul: #26303B;
  --marca-terracota: #9A694E;
  --marca-marfim: #EBEBDD;
  --destaque: #C9906F;          /* texto em destaque sobre fundo azul */
  --azul-suave: rgba(38, 48, 59, .72);
  --linha: rgba(38, 48, 59, .16);
  --linha-escura: rgba(235, 235, 221, .18);
  /* Véus dos cartões do carrossel (17/10/2026, rodada "mais sutil"): a cor da
     marca com alfa baixo sobre o marfim, estilo vidro fosco.
     Composto sobre o marfim: azul .08 = #DBDCD0 · terracota .12 = #E1DBCC.
     Texto azul sobre os dois: 9,7:1. Rótulo #694636 (terroso): 6,0:1. */
  --veu-azul: rgba(38, 48, 59, .08);
  --veu-terroso: rgba(154, 105, 78, .12);
  --rotulo-cartao: #694636;
  /* Ritmo de fundos (rodada 24/10 c): claro, escuro, claro, escuro.
     Areia #DDD3BE: azul 9,0:1; azul a .85 6,2:1; #694636 5,6:1 (o terracota cai a 3,1:1 e não vai em texto ali).
     Terroso escuro #694636: marfim 6,9:1; #EDD3C0 5,8:1; marfim a .85 5,5:1. */
  --areia: #DDD3BE;
  --terroso-escuro: #694636;
  --terroso-claro: #EDD3C0;
  /* Botão: terracota escuro da família da marca (marfim 4,9:1); hover/foco azul (marfim 11:1) */
  --botao: #855A42;

  --fonte-titulo: 'Lora', Georgia, 'Times New Roman', serif;
  --fonte-texto: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --altura-aviso: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--marca-marfim);
  color: var(--marca-azul);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--marca-terracota); outline-offset: 3px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Tipografia ---------- */
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 400; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2.25rem, 5.4vw, 4rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.875rem, 3.6vw, 2.75rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); }

/* Rótulo espaçado: terracota, maiúsculas, negrito (contraste de texto grande) */
.rotulo {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--marca-terracota);
  margin: 0 0 14px;
}
.fundo-azul .rotulo { color: var(--destaque); }

/* Filete terracota: a assinatura da marca, só abaixo de título (manual) */
.filete { display: block; width: 120px; height: 4px; background: var(--marca-terracota); margin: 22px 0 0; border: 0; }

.lead { font-size: 1.1875rem; max-width: 640px; color: var(--azul-suave); margin: 24px 0 0; }
.fundo-azul .lead { color: rgba(235, 235, 221, .82); }

/* ---------- Botão de ação: pílula terracota, texto marfim negrito ---------- */
.botao {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--botao); color: var(--marca-marfim);
  font-family: var(--fonte-texto); font-weight: 700; font-size: 1.0625rem;
  text-decoration: none; padding: 16px 28px; border-radius: 999px;
  transition: background-color .25s ease, color .25s ease;
}
.botao:hover, .botao:focus-visible { background: var(--marca-azul); color: var(--marca-marfim); }
.botao svg { width: 20px; height: 20px; flex: none; }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(235, 235, 221, .96);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid transparent;
  transition: background-color .35s ease, border-color .35s ease;
}
/* Topo azul desde o carregamento (rodada 24/10 d, capa escura): texto marfim, símbolo na versão fundo azul */
.topo { background: rgba(38, 48, 59, .97); border-bottom-color: var(--linha-escura); }
.logo-nome, .logo-linha, .menu a { transition: color .35s ease; }
.logo .logo-escuro { display: none; }
.topo .logo-claro { display: none; }
.topo .logo-escuro { display: block; }
.topo .logo-nome, .topo .menu a { color: var(--marca-marfim); }
.topo .logo-linha { color: var(--destaque); }
.topo .container { display: flex; align-items: center; justify-content: space-between; height: 72px; }

.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo img { width: 40px; height: 40px; }
.logo-divisor { width: 1px; height: 34px; background: var(--marca-terracota); }
.logo-texto { display: flex; flex-direction: column; line-height: 1; }
.logo-nome { font-family: var(--fonte-titulo); font-size: 1.375rem; letter-spacing: .14em; }
.logo-linha { font-size: .625rem; font-weight: 600; letter-spacing: .2em; margin-top: 5px; color: var(--marca-terracota); }

.menu { display: none; gap: 32px; }
.menu a { position: relative; text-decoration: none; font-weight: 600; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; padding: 6px 0; }
/* Sublinhado funcional do link: cresce da esquerda para a direita */
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--marca-terracota); transform: scaleX(0); transform-origin: left center;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.menu a:hover::after, .menu a:focus-visible::after { transform: scaleX(1); }
.topo .menu a::after { background: var(--destaque); }
.topo a:focus-visible { outline-color: var(--destaque); }
@media (min-width: 860px) { .menu { display: flex; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 10vw, 128px) 0 0; }
.hero-grade { position: relative; z-index: 2; }
.hero-texto { max-width: 720px; }
.hero h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); max-width: 720px; }
.hero .lead { max-width: 560px; }
.hero .botao { margin-top: 36px; }
/* Capa só com a marca (rodada 24/10 a). Celular: faixa abaixo dos selos, símbolo médio.
   Desktop: painel à direita. Degradê do marfim para um marfim mais quente atrás do símbolo.
   Proteção: o espaço livre ao redor do símbolo é maior que a largura de um D (manual). */
.hero-marca {
  position: relative; margin-top: 40px; height: 300px;
  display: grid; place-items: center;
  background:
    linear-gradient(to bottom, var(--marca-marfim) 0%, rgba(235, 235, 221, 0) 30%),
    linear-gradient(to top, var(--marca-marfim) 0%, rgba(235, 235, 221, 0) 30%),
    radial-gradient(90% 85% at 50% 55%, #DDD3C1 0%, #E3DCCB 45%, var(--marca-marfim) 100%);
}
.hero-marca img { width: 140px; height: auto; }
@media (min-width: 960px) {
  .hero { padding-bottom: clamp(64px, 9vw, 112px); min-height: 640px; }
  .hero-texto { max-width: 640px; }
  .hero-marca {
    position: absolute; top: 0; right: 0; bottom: 0; width: 44%; height: auto; margin: 0; border-bottom: 0;
    background:
      linear-gradient(to right, var(--marca-marfim) 0%, rgba(235, 235, 221, 0) 34%),
      linear-gradient(to top, var(--marca-marfim) 0%, rgba(235, 235, 221, 0) 22%),
      radial-gradient(75% 70% at 60% 52%, #DACEBA 0%, #E2DACA 42%, var(--marca-marfim) 100%);
  }
  .hero-marca img { width: min(260px, 20vw); }
}
@media (min-width: 1280px) { .hero-texto, .hero h1 { max-width: 700px; } }

.selos {
  list-style: none; padding: 0; margin: 48px 0 0;
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  font-size: .9375rem; font-weight: 600;
}
.selos li { display: flex; align-items: center; gap: 10px; }
@media (min-width: 960px) { .selos { flex-wrap: nowrap; gap: 24px; } .selos li { white-space: nowrap; } }
.selos svg { width: 18px; height: 18px; color: var(--marca-terracota); flex: none; }

/* ---------- Ritmo de fundos (rodada 24/10 c) ----------
   Capa marfim → Serviços areia (degradê do marfim) → curva → Diferenciais terroso escuro → curva →
   Como pedir azul → curva → Quem é marfim → curva → Perguntas azul → curva → Contato areia → curva → rodapé azul. */
.fundo-marfim { background: var(--marca-marfim); }
.fundo-areia { background: var(--areia); }
.fundo-areia-de-marfim { background: linear-gradient(to bottom, var(--marca-marfim) 0, var(--areia) 260px); }
.fundo-areia, .fundo-areia-de-marfim { --azul-suave: rgba(38, 48, 59, .85); }
.fundo-areia .rotulo, .fundo-areia-de-marfim .secao-cabeca .rotulo { color: var(--rotulo-cartao); }
#contato { padding-top: clamp(32px, 5vw, 64px); }
.fundo-terroso-escuro { background: var(--terroso-escuro); color: var(--marca-marfim); }

/* Perguntas no azul (rodada 24/10 c): texto marfim, rótulo e sinal #C9906F (4,9:1) */
.fundo-azul .perguntas, .fundo-azul .pergunta { border-color: var(--linha-escura); }
.fundo-azul .pergunta summary { color: var(--marca-marfim); }
.fundo-azul .pergunta summary:hover { text-decoration-color: var(--destaque); }
.fundo-azul .pergunta summary:focus-visible { outline-color: var(--destaque); }
.fundo-azul .pergunta summary::before, .fundo-azul .pergunta summary::after { background: var(--destaque); }
.fundo-azul .pergunta p { color: rgba(235, 235, 221, .85); }

/* Horário de atendimento (Contato) */
.horario { display: flex; gap: 10px; align-items: flex-start; margin: 24px 0 0; max-width: 520px; font-size: 1rem; }
.horario svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--rotulo-cartao); }
.horario strong { font-weight: 700; }

/* Texto justificado nos parágrafos de leitura (rodada 24/10 b); títulos, rótulos, botões e listas não */
.lead, .cartao p, .passo p, .quem-texto p, .pergunta p {
  text-align: justify; -webkit-hyphens: auto; hyphens: auto;
}
#contato .lead { text-align: left; }   /* 2 linhas: justificar abre buracos */
/* Celular (< 480px): coluna estreita abria buracos entre palavras (visto a 375), volta à esquerda */
@media (max-width: 479px) { .lead, .cartao p, .passo p, .quem-texto p, .pergunta p { text-align: left; -webkit-hyphens: manual; hyphens: manual; } }

/* ---------- Seções ---------- */
.secao { padding: clamp(72px, 10vw, 128px) 0; }
.secao-cabeca { max-width: 1120px; margin-bottom: clamp(40px, 6vw, 64px); }
.secao-cabeca .lead { max-width: 640px; }
.fundo-azul { background: var(--marca-azul); color: var(--marca-marfim); }
#como-pedir { padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(32px, 5vw, 64px); }

/* ---------- Serviços: carrossel de retângulos (17/10/2026) ----------
   Scroll-snap nativo: arrasta no celular, roda/trackpad no desktop.
   Sem JS os controles ficam ocultos e a faixa continua rolável.
   ~2,3 cartões no desktop e ~1,15 no celular, para insinuar que tem mais. */
.carrossel { --gap: 20px; --visiveis: 1.15; position: relative; }
@media (min-width: 720px) { .carrossel { --gap: 24px; --visiveis: 1.6; } }
@media (min-width: 1040px) { .carrossel { --visiveis: 2.3; } }
.carrossel-trilho {
  display: flex; gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 10px 0 18px; margin: -10px 0 0;
  scrollbar-width: thin; scrollbar-color: var(--marca-terracota) transparent;
}
.carrossel-trilho:focus-visible { outline: 3px solid var(--marca-terracota); outline-offset: 6px; }
.js .carrossel-trilho { scrollbar-width: none; }
.js .carrossel-trilho::-webkit-scrollbar { display: none; }

.cartao {
  position: relative; overflow: hidden;
  flex: 0 0 calc((100% - (var(--gap) * (var(--visiveis) - .15))) / var(--visiveis));
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.6vw, 32px);
  color: var(--marca-azul);
  border: 1px solid rgba(38, 48, 59, .14);
  border-top: 3px solid var(--marca-terracota);   /* o filete da marca, no topo do retângulo */
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .3s ease, background-color .3s ease;
}
.cartao-azul { background-color: var(--veu-azul); border-top-color: var(--marca-azul); }
.cartao-terroso { background-color: var(--veu-terroso); border-color: rgba(154, 105, 78, .3); border-top-color: var(--marca-terracota); }
/* Marca d'água: o traço do símbolo, bem leve, no canto do retângulo */
.cartao::after {
  content: ""; position: absolute; right: -50px; bottom: -60px; width: 220px; height: 220px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none' stroke='%2326303B' stroke-width='2'%3E%3Cpath d='M20 290C60 210 130 170 190 120C240 78 250 30 230 4'/%3E%3Cpath d='M60 296C100 226 160 190 214 146C262 106 280 56 262 10'/%3E%3Cpath d='M104 298C140 238 190 210 238 172C282 136 302 90 292 40'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .07;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.cartao > * { position: relative; z-index: 1; }
.cartao .rotulo { color: var(--rotulo-cartao); font-size: .875rem; margin-bottom: 10px; }
.cartao h3 { font-size: clamp(1.375rem, 1.9vw, 1.625rem); max-width: 20ch; }
.cartao p { margin: 12px 0 0; color: var(--marca-azul); max-width: 50ch; font-size: 1rem; line-height: 1.55; }
.cartao .quando { font-weight: 600; }
/* Lista curta dentro do cartão (subtipos do serviço, itens da entrega). 17/10/2026 */
.cartao-lista { list-style: none; padding: 0; margin: 14px 0 0; max-width: 50ch; font-size: 1rem; line-height: 1.5; }
.cartao-lista li { position: relative; padding-left: 18px; margin-top: 8px; }
.cartao-lista li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--marca-terracota); }
.cartao-lista strong { font-weight: 700; }
.cartao .botao { align-self: flex-start; margin-top: auto; padding: 12px 22px; font-size: 1rem; }
.cartao p + .botao { margin-top: 18px; }
@media (min-width: 1040px) { .cartao p + .botao { margin-top: auto; } .cartao p:last-of-type { margin-bottom: 18px; } }
.cartao:hover { border-color: rgba(38, 48, 59, .28); }
.cartao-azul:hover { border-top-color: var(--marca-azul); }
.cartao-terroso:hover { border-top-color: var(--marca-terracota); }

/* O momento de movimento: o retângulo sobe um pouco e o traço desliza.
   Deslocamento, não sombra (manual: "sem cartões com sombra"). */
@media (hover: hover) {
  .cartao:hover { transform: translateY(-8px); }
  .cartao:hover::after { transform: translate(-14px, -10px); }
}
.cartao:focus-within { transform: translateY(-8px); }

/* Controles: pontos (posição) + setas */
.carrossel-controles { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.carrossel-controles[hidden] { display: none; }
.carrossel-pontos { display: flex; gap: 4px; }
.carrossel-ponto {
  width: 32px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.carrossel-ponto::before {
  content: ""; display: block; width: 10px; height: 4px; background: var(--linha);
  background: rgba(38, 48, 59, .28); transition: width .3s ease, background-color .3s ease;
}
.carrossel-ponto[aria-current="true"]::before { width: 26px; background: var(--marca-terracota); }
.carrossel-setas { display: flex; gap: 10px; }
.carrossel-seta {
  width: 48px; height: 48px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--marca-azul); background: transparent; color: var(--marca-azul);
  display: grid; place-items: center; transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.carrossel-seta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carrossel-seta:hover:not(:disabled) { background: var(--marca-azul); color: var(--marca-marfim); }
.carrossel-seta:disabled { opacity: .35; cursor: default; }

/* ---------- Faixa fixa de diferenciais (17/10/2026) ----------
   Abaixo do carrossel, sem cartão: 4 itens escaneáveis, separados por linha fina.
   Texto azul sobre marfim; terracota só no ícone (forma, não texto). */
.faixa-dif { padding: clamp(16px, 3vw, 32px) 0 clamp(40px, 5vw, 64px); }
.diferenciais { margin-top: 0; }
.diferenciais .rotulo { font-family: var(--fonte-texto); font-size: .875rem; margin-bottom: 4px; color: var(--terroso-claro); }
.diferenciais ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 32px; }
@media (min-width: 720px) { .diferenciais ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .diferenciais ul { grid-template-columns: repeat(4, 1fr); } }
.diferenciais li {
  display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-content: start;
  border-top: 1px solid rgba(237, 211, 192, .28); padding: 18px 0;
}
.diferenciais svg { width: 26px; height: 26px; color: var(--terroso-claro); margin-top: 3px; grid-row: span 2; }
.diferenciais strong { font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.25rem; line-height: 1.25; }
.diferenciais span { font-size: .96875rem; line-height: 1.5; color: rgba(235, 235, 221, .85); margin-top: 6px; }

/* ---------- Perguntas frequentes (17/10/2026) ----------
   <details>/<summary> nativo: abre e fecha por Enter/Espaço, sem JS. */
.perguntas-grade { display: grid; gap: 0; }
@media (min-width: 960px) { .perguntas-grade { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; } }
.perguntas { border-bottom: 1px solid var(--linha); }
.pergunta { border-top: 1px solid var(--linha); }
.pergunta summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 44px 20px 0;
  font-family: var(--fonte-titulo); font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.3;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary:hover { text-decoration: underline; text-decoration-color: var(--marca-terracota); text-underline-offset: 5px; }
.pergunta summary:focus-visible { outline: 3px solid var(--marca-terracota); outline-offset: 3px; }
/* Sinal de + que vira − ao abrir (ícone funcional, duas barras) */
.pergunta summary::before, .pergunta summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 2px;
  background: var(--marca-terracota); transition: transform .25s ease;
}
.pergunta summary::after { transform: rotate(90deg); }
.pergunta[open] summary::after { transform: rotate(0deg); }
.pergunta p { margin: 0 0 22px; max-width: 64ch; color: var(--marca-azul); }

/* Como pedir: 4 passos */
.passos { list-style: none; padding: 0; margin: 0; display: grid; gap: 40px; counter-reset: passo; }
@media (min-width: 720px) { .passos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .passos { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.passo { border-top: 1px solid var(--linha-escura); padding-top: 24px; }
.passo-num { font-family: var(--fonte-titulo); font-size: 2.75rem; line-height: 1; color: var(--destaque); }
.passo h3 { font-size: 1.5rem; margin: 18px 0 10px; }
.passo p { margin: 0; color: rgba(235, 235, 221, .82); max-width: 300px; }
.passos-nota { margin: 48px 0 0; font-size: .9375rem; color: rgba(235, 235, 221, .72); max-width: 640px; }

/* Quem é */
.quem { display: grid; gap: 40px; align-items: center; }
@media (min-width: 860px) { .quem { grid-template-columns: 5fr 7fr; gap: 80px; } }
.quem-foto {
  aspect-ratio: 4 / 5; width: 100%; max-width: 440px;
  background: transparent; color: var(--marca-azul);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.quem-foto > img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%;
}
/* Foto com fundo real: retângulo de cantos retos, base com a faixa terracota da marca */
.quem-foto:has(> img) { border-bottom: 4px solid var(--marca-terracota); }
.quem-foto .aguardando { text-align: center; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.quem-foto .aguardando img { width: 96px; height: auto; margin: 0 auto 16px; object-fit: contain; }
.quem-texto p { max-width: 560px; }
.quem-texto .lead + p { margin: 16px 0 0; }
.fatos { list-style: none; padding: 0; margin: 32px 0 0; max-width: 560px; }
.fatos li { border-top: 1px solid var(--linha); padding: 16px 0; display: flex; gap: 20px; }
.fatos li:last-child { border-bottom: 1px solid var(--linha); }
.fatos strong { font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.25rem; min-width: 90px; color: var(--marca-terracota); }
.link-discreto { display: inline-block; margin-top: 24px; font-weight: 600; text-underline-offset: 4px; }

/* Contato */
.contato { display: grid; gap: 48px; }
@media (min-width: 860px) { .contato { grid-template-columns: 7fr 5fr; gap: 80px; align-items: end; } }
.contato .botao { margin-top: 32px; }
.canais { list-style: none; padding: 0; margin: 0; }
.canais li { border-top: 1px solid var(--linha); padding: 14px 0; }
.canais li:last-child { border-bottom: 1px solid var(--linha); }
.canais span { display: block; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--azul-suave); }
.canais a { text-decoration: none; font-size: 1.0625rem; word-break: break-word; }
.canais a:hover { color: var(--marca-terracota); }

/* ---------- Textura leve (17/10/2026) ----------
   Grão: ruído SVG (feTurbulence) em data URI, numa camada fixa por cima
   de tudo, com opacidade bem baixa. Dá matéria ao marfim e ao azul sem
   pesar a leitura. Não recebe clique. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: .07;
}
/* Marca d'água: o traço do símbolo, muito discreto, em duas seções */
.com-marca-dagua { position: relative; overflow: hidden; }
.com-marca-dagua::before {
  content: ""; position: absolute; top: 24px; right: -120px; width: 560px; height: 560px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none' stroke='%2326303B' stroke-width='1.2'%3E%3Cpath d='M20 290C60 210 130 170 190 120C240 78 250 30 230 4'/%3E%3Cpath d='M60 296C100 226 160 190 214 146C262 106 280 56 262 10'/%3E%3Cpath d='M104 298C140 238 190 210 238 172C282 136 302 90 292 40'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
}
.com-marca-dagua > .container { position: relative; }
.marca-dagua-esquerda::before { top: auto; bottom: -140px; right: auto; left: -160px; transform: scaleX(-1); }
@media (max-width: 719px) { .com-marca-dagua::before { width: 340px; height: 340px; right: -110px; } .marca-dagua-esquerda::before { left: -140px; } }

/* ---------- Curvas entre seções ----------
   Vêm do traço do símbolo: a massa azul com a faixa terracota correndo ao lado. */
.curva { line-height: 0; margin-top: -1px; margin-bottom: -1px; }
.curva svg { display: block; width: 100%; height: clamp(56px, 9vw, 130px); }
.curva-azul { fill: var(--marca-azul); }
.curva-faixa { fill: none; stroke: var(--marca-terracota); stroke-width: 3; vector-effect: non-scaling-stroke; }
.curva-rodape { margin-top: 0; }
/* Fundo atrás das curvas = o tom da seção clara vizinha, para não sobrar faixa marfim */
.sobre-marfim { background: var(--marca-marfim); }
.sobre-areia { background: var(--areia); }
.sobre-terroso-escuro { background: var(--terroso-escuro); }
.curva-terrosa .curva-azul { fill: var(--terroso-escuro); }

/* ---------- Movimento único da página: cena sticky em "Como pedir" (rodada 17/10 k) ----------
   Base (celular, sem JS, movimento reduzido): a lista estática de 4 passos, como antes.
   .cena-ativa só entra pelo JS, a partir de 960px e sem prefers-reduced-motion.
   Anima só transform, opacity e stroke-dashoffset. A altura da seção é fixa (não anima). */
.cena-curva, .cena-marcas { display: none; }
#como-pedir.cena-ativa { padding: 0; }
#como-pedir.cena-ativa .cena-palco {
  position: sticky; top: 72px; height: calc(100vh - 72px); min-height: 560px;
  display: flex; align-items: center; overflow: hidden;
}
#como-pedir.cena-ativa { height: 420vh; }
#como-pedir.cena-ativa .container { position: relative; width: 100%; }
#como-pedir.cena-ativa .secao-cabeca { margin-bottom: clamp(32px, 4vh, 56px); }
#como-pedir.cena-ativa .passos { display: grid; grid-template-columns: 1fr; gap: 0; }
#como-pedir.cena-ativa .passo {
  grid-area: 1 / 1; border-top: 0; padding-top: 0;
  display: grid; grid-template-columns: 5fr 7fr; column-gap: 64px; align-items: start;
  opacity: 0; transform: translateY(28px); pointer-events: none;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
#como-pedir.cena-ativa .passo.ativo { opacity: 1; transform: none; pointer-events: auto; }
#como-pedir.cena-ativa .passo.antes { transform: translateY(-28px); }
#como-pedir.cena-ativa .passo-num { grid-column: 1; font-size: clamp(5.5rem, 11vw, 9rem); }
#como-pedir.cena-ativa .passo h3 { grid-column: 1; font-size: clamp(1.75rem, 2.6vw, 2.25rem); margin: 12px 0 0; }
#como-pedir.cena-ativa .passo p {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: 1.375rem; line-height: 1.55; max-width: 480px; position: relative; z-index: 1;
}
/* A curva do símbolo, atrás do texto do passo, se desenhando com o progresso */
#como-pedir.cena-ativa .cena-curva {
  display: block; position: absolute; right: calc(var(--gutter) - 90px); top: 50%;
  width: min(420px, 34vw); height: auto; transform: translateY(-46%); pointer-events: none;
}
.cena-curva path { stroke-width: 2; vector-effect: non-scaling-stroke; }
.cena-curva-base { stroke: rgba(235, 235, 221, .1); }
.cena-curva-traco { stroke: var(--marca-terracota); stroke-dasharray: 1; stroke-dashoffset: 1; }
/* Indicador discreto: 4 marcas */
#como-pedir.cena-ativa .cena-marcas {
  display: flex; gap: 8px; list-style: none; padding: 0; margin: clamp(32px, 5vh, 56px) 0 0;
}
.cena-marcas li { width: 28px; height: 3px; background: rgba(235, 235, 221, .22); transform-origin: left center; }
.cena-marcas li::after { content: ""; display: block; height: 100%; background: var(--destaque); transform: scaleX(0); transform-origin: left center; transition: transform .4s ease; }
.cena-marcas li.feito::after { transform: scaleX(1); }
#como-pedir.cena-ativa .passos-nota { margin-top: 20px; }

/* ---------- Rodapé ---------- */
.rodape { padding: 24px 0 calc(96px + var(--altura-aviso)); }
.rodape-grade { display: grid; gap: 40px; }
@media (min-width: 860px) { .rodape-grade { grid-template-columns: 1fr 1fr 1fr; } }
.logo-vertical { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 14px; text-decoration: none; }
.logo-vertical img { width: 64px; height: 64px; }
.logo-vertical .logo-linha { color: var(--destaque); }
.rodape p, .rodape li { font-size: .9375rem; color: rgba(235, 235, 221, .82); margin: 0 0 8px; }
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--destaque); }
.rodape-base { border-top: 1px solid var(--linha-escura); margin-top: 48px; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .875rem; color: rgba(235, 235, 221, .64); }

/* Ícones de contato no rodapé (rodada 24/10 a): marfim sobre azul, hover #C9906F, toque de 44px */
.rodape .rodape-icones { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.rodape .rodape-icones li { margin: 0; }
.rodape-icones a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  color: var(--marca-marfim); border: 1px solid var(--linha-escura); transition: color .2s ease, border-color .2s ease;
}
.rodape-icones a:hover { color: var(--destaque); border-color: var(--destaque); }
.rodape-icones a:focus-visible { outline: 3px solid var(--destaque); outline-offset: 3px; color: var(--destaque); }
.rodape-icones svg { width: 22px; height: 22px; }
.rodape .rodape-credito { margin: 16px 0 0; font-size: .8125rem; color: rgba(235, 235, 221, .64); }
.rodape .rodape-credito a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- WhatsApp flutuante ---------- */
.wa-flutuante {
  position: fixed; right: 16px; bottom: calc(16px + var(--altura-aviso)); z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--botao); color: var(--marca-marfim);
  font-weight: 700; font-size: .9375rem; text-decoration: none;
  padding: 14px 20px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(38, 48, 59, .25);
  transition: bottom .3s ease, background-color .25s ease;
}
.wa-flutuante:hover, .wa-flutuante:focus-visible { background: var(--marca-azul); }
.wa-flutuante svg { width: 22px; height: 22px; }
@media (max-width: 520px) { .wa-flutuante .wa-texto { display: none; } .wa-flutuante { padding: 15px; } }

/* ---------- Aviso de cookies ---------- */
.aviso-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--marca-azul); color: var(--marca-marfim);
  padding: 16px var(--gutter); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: center;
  transform: translateY(100%); transition: transform .35s ease;
}
.aviso-cookies.visivel { transform: none; }
.aviso-cookies p { margin: 0; font-size: .9375rem; max-width: 760px; }
.aviso-cookies a { color: var(--destaque); }
.aviso-cookies-btn {
  background: var(--marca-marfim); color: var(--marca-azul); border: 0; border-radius: 999px;
  font: 700 .9375rem var(--fonte-texto); padding: 10px 22px; cursor: pointer;
}

/* ---------- Página legal ---------- */
.legal { padding: clamp(56px, 8vw, 96px) 0; }
.legal-corpo { max-width: 720px; }
.legal-corpo h2 { font-size: 1.625rem; margin: 48px 0 12px; }
.legal-corpo p, .legal-corpo li { color: var(--marca-azul); }
.nota-rascunho, .legal-corpo .nota-rascunho { background: var(--marca-azul); color: var(--marca-marfim); padding: 14px 18px; font-size: .9375rem; margin: 32px 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .menu a::after { transition: none; }
  .cartao:hover, .cartao:focus-within { transform: none; }
  .cartao:hover::after { transform: none; }
  .carrossel-trilho { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* =====================================================================
   Rodada 24/10 d: capa escura, barra fina, destaques na divisa, ícones,
   fotos, "Quem é" no azul e Como pedir no claro.
   Ritmo: Capa azul → Serviços areia → Diferenciais terroso → Como pedir marfim →
   Quem é azul → Perguntas areia → Contato marfim → rodapé azul.
   ===================================================================== */

/* Ícones Lucide (ISC): traço fino, cor da marca herdada */
.ico { width: 28px; height: 28px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Barra fina acima do menu: rola junto (só o menu fica fixo) */
.barra-topo { background: #1E2730; color: var(--marca-marfim); font-size: .8125rem; border-bottom: 1px solid var(--linha-escura); }
.barra-topo .container { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 16px; }
.barra-horario { display: flex; align-items: center; gap: 8px; margin: 0; letter-spacing: .02em; }
.barra-horario .ico { width: 18px; height: 18px; color: var(--destaque); }
.barra-icones { display: flex; gap: 0; list-style: none; padding: 0; margin: 0; }
.barra-icones a { width: 44px; height: 44px; border-color: transparent; }
.barra-icones svg { width: 18px; height: 18px; }
@media (max-width: 599px) { .barra-icones { display: none; } }

/* Capa escura com o escritório real como textura */
.hero { background: var(--marca-azul); color: var(--marca-marfim); isolation: isolate; }
.hero .rotulo { color: var(--destaque); }
.hero .lead { color: rgba(235, 235, 221, .85); }
.hero-fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-fundo img { width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .18; filter: blur(2px); }
.hero-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--marca-azul) 0%, rgba(38, 48, 59, .55) 55%, rgba(38, 48, 59, .2) 100%); }
.hero .botao:hover, .hero .botao:focus-visible, .fundo-azul .botao:hover, .fundo-azul .botao:focus-visible { background: var(--marca-marfim); color: var(--marca-azul); }
.hero .botao:focus-visible { outline-color: var(--destaque); }
.hero { padding-bottom: clamp(56px, 8vw, 96px); }
.hero-marca { background: none; height: auto; margin: 0; display: none; }
@media (min-width: 960px) {
  .hero-marca { display: grid; background: none; }
  .hero-marca img { width: min(250px, 19vw); }
}

/* Os 3 destaques montam na divisa entre a capa e Serviços */
.destaques-faixa { position: relative; z-index: 3; margin-top: clamp(-120px, -9vw, -72px);
  background: linear-gradient(to bottom, transparent 0, transparent clamp(72px, 9vw, 120px), var(--areia) clamp(72px, 9vw, 120px)); }
.destaques { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
@media (min-width: 720px) { .destaques { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.destaques li {
  background: var(--marca-marfim); color: var(--marca-azul);
  border-top: 3px solid var(--marca-terracota);
  padding: 20px 22px; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center;
}
.destaques .ico { width: 34px; height: 34px; grid-row: span 2; color: var(--rotulo-cartao); }
.destaques strong { font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.1875rem; line-height: 1.25; }
.destaques span { font-size: .9375rem; color: rgba(38, 48, 59, .8); }
#servicos { padding-top: clamp(48px, 7vw, 88px); }

/* Cartões: foto no topo dos 2 serviços e ícone no rótulo */
.cartao-foto { margin: calc(-1 * clamp(22px, 2.4vw, 30px)) calc(-1 * clamp(22px, 2.6vw, 32px)) 18px; aspect-ratio: 2 / 1; overflow: hidden; }
.cartao-foto img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cartao .rotulo { display: flex; align-items: center; gap: 8px; }
.cartao .rotulo .ico { width: 30px; height: 30px; }
.cartao::after { z-index: 0; }

/* Como pedir no claro (marfim): números em terracota (texto grande, 3,9:1), texto azul */
#como-pedir.fundo-marfim .rotulo { color: var(--marca-terracota); }
#como-pedir.fundo-marfim .passo { border-top-color: var(--linha); }
#como-pedir.fundo-marfim .passo-num { color: var(--marca-terracota); }
#como-pedir.fundo-marfim .passo p { color: var(--azul-suave); }
#como-pedir.fundo-marfim .passos-nota { color: var(--azul-suave); }
#como-pedir.fundo-marfim .cena-curva-base { stroke: rgba(38, 48, 59, .12); }
#como-pedir.fundo-marfim .cena-marcas li { background: rgba(38, 48, 59, .18); }
#como-pedir.fundo-marfim .cena-marcas li::after { background: var(--marca-terracota); }

/* Quem é no azul, com a foto de estúdio (fundo escuro se funde no azul) */
#quem-e.fundo-azul .lead, #quem-e.fundo-azul .quem-texto p { color: rgba(235, 235, 221, .85); }
#quem-e.fundo-azul .fatos li { border-color: var(--linha-escura); align-items: center; }
#quem-e.fundo-azul .fatos strong { color: var(--destaque); }
#quem-e.fundo-azul .fatos .ico { width: 26px; height: 26px; color: var(--destaque); }
#quem-e.fundo-azul .link-discreto { color: var(--marca-marfim); }
#quem-e.fundo-azul a:focus-visible { outline-color: var(--destaque); }
.quem-foto-bloco { position: relative; max-width: 440px; }

/* Perguntas (rodada 24/10 e): lista padrão, título em cima e perguntas embaixo, em largura de leitura */
#perguntas .perguntas-grade { display: block; max-width: 760px; }
#perguntas .secao-cabeca { margin-bottom: clamp(24px, 4vw, 40px); }

/* Quem é: foto recortada (fundo transparente) direto sobre o azul, sem moldura */
.quem-foto.quem-recorte { border-bottom: 0; background: none; overflow: visible; }
.quem-foto.quem-recorte > img { object-fit: contain; object-position: 50% 100%; }

/* Rodapé: links das páginas legais */
.rodape-legal { display: inline-flex; gap: 20px; flex-wrap: wrap; }
.rodape-legal a { text-decoration: underline; text-underline-offset: 3px; }

/* Páginas legais: aviso discreto de versão */
.legal-versao { margin: 20px 0 0; font-size: .875rem; color: var(--rotulo-cartao); font-weight: 600; letter-spacing: .02em; }
.legal-corpo ul { padding-left: 20px; }
.legal-corpo li { margin-top: 6px; }

/* Contato: marfim, abrindo com degradê da areia */
.fundo-marfim-de-areia { background: linear-gradient(to bottom, var(--areia) 0, var(--marca-marfim) 220px); }
.horario .ico { width: 20px; height: 20px; margin-top: 2px; }
.fundo-marfim-de-areia .rotulo { color: var(--rotulo-cartao); }

/* =====================================================================
   Rodada 30/10/2026 (briefing da Amanda): Quem é sem foto e formulário de orçamento
   ===================================================================== */
/* Quem é: o símbolo DD nas cores oficiais sobre um quadro marfim (como no perfil),
   dentro da seção azul. Raio 0, sem sombra; a área de proteção é o próprio quadro. */
.quem-simbolo {
  background: var(--marca-marfim); aspect-ratio: 1 / 1; width: 100%; max-width: 400px;
  display: grid; place-items: center; border-bottom: 4px solid var(--marca-terracota);
}
.quem-simbolo img { width: 52%; height: auto; }
#quem-e .fatos strong { min-width: 150px; }
#quem-e .cursos { margin: 20px 0 0; font-size: .9375rem; color: rgba(235, 235, 221, .85); max-width: 560px; }
@media (max-width: 519px) { #quem-e .fatos li { flex-wrap: wrap; gap: 4px 12px; } #quem-e .fatos strong { min-width: 0; } }

/* Orçamento */
.orcamento { max-width: 880px; }
.sem-js { font-size: 1rem; }
.js .sem-js { display: none; }
.form-orcamento { display: none; }
.js .form-orcamento { display: grid; gap: 24px; }
.form-orcamento fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-orcamento legend, .form-orcamento .campo > label { display: block; font-weight: 700; font-size: 1rem; margin-bottom: 10px; color: var(--marca-azul); }
.opcoes { display: flex; flex-wrap: wrap; gap: 10px; }
.opcao { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 1rem; line-height: 1.4; }
.campo-opcoes .opcao { border: 1px solid rgba(38, 48, 59, .28); background: var(--marca-marfim); padding: 11px 14px; min-height: 44px; align-items: center; }
.campo-opcoes .opcao:has(input:checked) { border-color: var(--marca-azul); background: #fff; box-shadow: inset 0 0 0 1px var(--marca-azul); }
.opcao input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--marca-azul); flex: none; }
.campos-linha { display: grid; gap: 20px; }
@media (min-width: 720px) { .campos-linha { grid-template-columns: 1fr 1fr; } }
.form-orcamento input[type="text"], .form-orcamento input[type="tel"], .form-orcamento input[type="email"], .form-orcamento textarea {
  width: 100%; font: inherit; color: var(--marca-azul); background: #fff;
  border: 1px solid rgba(38, 48, 59, .45); border-radius: 0; padding: 12px 14px; min-height: 48px;
}
.form-orcamento textarea { resize: vertical; }
.form-orcamento input:focus-visible, .form-orcamento textarea:focus-visible, .opcao input:focus-visible { outline: 3px solid var(--marca-terracota); outline-offset: 2px; }
.opcional { font-weight: 400; color: var(--azul-suave); font-size: .9375rem; }
.obrig { color: #8A3B2E; margin-left: 2px; }
.dica { margin: 8px 0 0; font-size: .9375rem; color: var(--azul-suave); }
.erro { margin: 8px 0 0; font-size: .9375rem; font-weight: 700; color: #8A3B2E; }
.com-erro .opcao, .com-erro input[type="text"], .com-erro input[type="tel"], .com-erro input[type="email"] { border-color: #8A3B2E; }
.campo-lgpd .opcao { font-size: .9375rem; }
.campo-lgpd a { color: var(--marca-azul); text-underline-offset: 3px; }
.orcamento-aviso { margin: 0; font-size: .9375rem; color: var(--azul-suave); }
.erro-resumo { margin: 0; padding: 12px 16px; background: #F5E3DE; color: #6E2A20; font-weight: 700; border-left: 4px solid #8A3B2E; }
.form-orcamento .botao { justify-self: start; border: 0; cursor: pointer; }
@media (max-width: 519px) { .form-orcamento .botao { justify-self: stretch; justify-content: center; } }
.wa-flutuante .ico { width: 22px; height: 22px; }

/* Orçamento no layout da maquete da Amanda (28/10/2026): 2 colunas, azul à esquerda e campos à direita.
   Raio 0 (manual da marca), no lugar dos cantos arredondados da maquete. */
.orcamento-bloco { display: grid; border-top: 3px solid var(--marca-terracota); }
@media (min-width: 960px) { .orcamento-bloco { grid-template-columns: 5fr 7fr; } }
.orcamento-lado { padding: clamp(28px, 4vw, 48px); }
.orcamento-lado h2 { font-size: clamp(1.75rem, 2.8vw, 2.25rem); }
.orcamento-lado .lead { font-size: 1.0625rem; }
.orcamento-itens { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.orcamento-itens li { position: relative; padding-left: 24px; color: rgba(235, 235, 221, .9); }
.orcamento-itens li::before { content: ""; position: absolute; left: 0; top: .7em; width: 12px; height: 2px; background: var(--destaque); }
.orcamento-campos { background: #fff; padding: clamp(24px, 4vw, 44px); }
.form-orcamento select {
  width: 100%; font: inherit; color: var(--marca-azul); background: #F6F5EF; border: 1px solid rgba(38, 48, 59, .45);
  border-radius: 0; padding: 12px 40px 12px 14px; min-height: 48px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2326303B' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
.form-orcamento input[type="text"], .form-orcamento input[type="tel"], .form-orcamento input[type="email"], .form-orcamento textarea { background: #F6F5EF; }
.form-orcamento select:focus-visible { outline: 3px solid var(--marca-terracota); outline-offset: 2px; }
.com-erro select { border-color: #8A3B2E; }
.form-orcamento .campo > label { font-size: .9688rem; margin-bottom: 8px; }
.form-orcamento { gap: 20px; }
.dica-alerta { margin: 8px 0 0; font-size: .875rem; color: #8A3B2E; }
.form-orcamento .botao { justify-self: stretch; justify-content: center; }
.orcamento-lado .rotulo { color: var(--destaque); }

/* 30/10: ajustes do formulário pedidos pelo Daniel */
/* Campos lado a lado: a caixa de seleção alinha pela base, mesmo com rótulo em 2 linhas */
@media (min-width: 720px) { .form-orcamento .campos-linha { align-items: end; } }
/* Autorização LGPD: caixinha com respiro e texto em bloco ao lado (sem quebrar por baixo) */
.form-orcamento .campo-lgpd > label.opcao { display: flex; align-items: flex-start; gap: 14px; font-weight: 400; font-size: .9375rem; line-height: 1.5; margin-bottom: 0; }
.form-orcamento .campo-lgpd > label.opcao input { margin-top: 3px; }

/* =====================================================================
   Rodada 30/10/2026 (c): painel da marca no "Quem é" e mais vida com movimento.
   Exceção ao "um movimento por página" da skill, decidida pelo Daniel em 30/10.
   ===================================================================== */
/* Painel da marca: a composição da miniatura em HTML/SVG.
   Para se destacar da seção (também azul): fundo marinho mais escuro (#1E2730) com vinheta
   clara no centro, borda fina terracota e a faixa terracota na base. */
.quem-painel {
  position: relative; overflow: hidden; aspect-ratio: 1 / 1; width: 100%; max-width: 400px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: radial-gradient(70% 62% at 50% 44%, #33404F 0%, #26303B 52%, #1A222B 100%);
  border: 1px solid rgba(154, 105, 78, .55); border-bottom: 4px solid var(--marca-terracota);
  color: var(--marca-marfim);
}
.painel-curvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.painel-curvas path { stroke: var(--marca-terracota); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .85; }
.painel-curvas path.fraca { opacity: .35; }
.painel-simbolo { position: relative; width: 34%; height: auto; }
.painel-nome { position: relative; margin-top: 7%; font-family: var(--fonte-titulo); font-size: clamp(1.875rem, 4.6vw, 2.75rem); letter-spacing: .06em; line-height: 1; }
.painel-linha { position: relative; margin-top: 4%; font-size: clamp(.6875rem, 1.3vw, .8125rem); font-weight: 600; letter-spacing: .26em; color: var(--destaque); text-align: center; }
@media (max-width: 859px) { .quem-painel { max-width: 340px; margin: 0 auto; } }

/* (a) Revelação sóbria no scroll: fade + translate leve e escalonado */
.revela-on [data-revela] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease var(--atraso, 0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--atraso, 0ms); }
.revela-on [data-revela].revelado { opacity: 1; transform: none; }
@media (max-width: 719px) { .revela-on [data-revela] { transform: translateY(12px); } }

/* (b) Painel do Quem é: as curvas se desenham e o símbolo entra com fade e escala sutis */
.revela-on .quem-painel { transform: none; }
.revela-on .quem-painel .painel-curvas path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.4,.1,.2,1) .2s; }
.revela-on .quem-painel .painel-curvas path.fraca { transition-delay: .5s; }
.revela-on .quem-painel.revelado .painel-curvas path { stroke-dashoffset: 0; }
.revela-on .quem-painel .painel-simbolo, .revela-on .quem-painel .painel-nome, .revela-on .quem-painel .painel-linha { opacity: 0; transform: scale(.94); transition: opacity .9s ease .25s, transform 1s cubic-bezier(.2,.7,.2,1) .25s; }
.revela-on .quem-painel .painel-nome { transition-delay: .45s; transform: translateY(8px); }
.revela-on .quem-painel .painel-linha { transition-delay: .6s; transform: translateY(8px); }
.revela-on .quem-painel.revelado .painel-simbolo, .revela-on .quem-painel.revelado .painel-nome, .revela-on .quem-painel.revelado .painel-linha { opacity: 1; transform: none; }

/* (c) Capa: entrada suave no carregamento (curta, sem esconder o texto por completo) */
@keyframes capa-sobe { from { opacity: .25; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes capa-simbolo { from { opacity: 0; transform: translateX(24px) scale(.96); } to { opacity: 1; transform: none; } }
.js .hero h1 { animation: capa-sobe .7s cubic-bezier(.2,.7,.2,1) both; }
.js .hero .filete { animation: capa-sobe .7s cubic-bezier(.2,.7,.2,1) .08s both; }
.js .hero .lead { animation: capa-sobe .7s cubic-bezier(.2,.7,.2,1) .14s both; }
.js .hero .botao { animation: capa-sobe .7s cubic-bezier(.2,.7,.2,1) .2s both; }
.js .hero-marca img { animation: capa-simbolo 1.1s cubic-bezier(.2,.7,.2,1) .15s both; }

/* (d) Microinterações: um toque a mais, sem exagero */
.botao { transition: background-color .25s ease, color .25s ease, transform .25s ease; }
@media (hover: hover) {
  .botao:hover { transform: translateY(-2px); }
  .destaques li { transition: transform .3s ease; }
  .destaques li:hover { transform: translateY(-3px); }
  .diferenciais svg { transition: transform .3s ease; }
  .diferenciais li:hover svg { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero h1, .js .hero .filete, .js .hero .lead, .js .hero .botao, .js .hero-marca img { animation: none; }
  .revela-on [data-revela], .revela-on .quem-painel .painel-simbolo, .revela-on .quem-painel .painel-nome, .revela-on .quem-painel .painel-linha { opacity: 1; transform: none; }
  .revela-on .quem-painel .painel-curvas path { stroke-dashoffset: 0; }
  .botao:hover, .destaques li:hover { transform: none; }
}

/* Rodada 30/10 (d): "Quem é" sem quadro. A marca fica solta sobre o azul, grande,
   e as curvas finas terracota viram o fundo da seção inteira (atrás do conteúdo). */
#quem-e { position: relative; overflow: hidden; }
#quem-e > .container { position: relative; z-index: 1; }
.quem-curvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.quem-curvas path { stroke: var(--marca-terracota); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .55; }
.quem-curvas path.fraca { opacity: .25; }
.quem-marca { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; color: var(--marca-marfim); padding: 12px 0; }
.quem-marca .painel-simbolo { width: min(300px, 70%); height: auto; }
.quem-marca .painel-nome { margin-top: 28px; font-family: var(--fonte-titulo); font-size: clamp(2.25rem, 4.2vw, 3.25rem); letter-spacing: .07em; line-height: 1; }
.quem-marca .painel-linha { margin-top: 14px; font-size: clamp(.75rem, 1.1vw, .875rem); font-weight: 600; letter-spacing: .28em; color: var(--destaque); text-align: center; }
@media (max-width: 859px) {
  .quem-marca .painel-simbolo { width: 150px; }
  .quem-marca .painel-nome { margin-top: 18px; font-size: 2rem; }
}
/* Movimento: curvas se desenham quando a seção entra; marca com fade e escala escalonados */
.revela-on .quem-curvas[data-revela] { opacity: 1; transform: none; }
.revela-on .quem-curvas path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s cubic-bezier(.4,.1,.2,1) .1s; }
.revela-on .quem-curvas path.fraca { transition-delay: .45s; }
.revela-on .quem-curvas.revelado path { stroke-dashoffset: 0; }
.revela-on .quem-marca[data-revela] { transform: none; opacity: 1; }
.revela-on .quem-marca .painel-simbolo, .revela-on .quem-marca .painel-nome, .revela-on .quem-marca .painel-linha { opacity: 0; transform: scale(.94); transition: opacity .9s ease .2s, transform 1s cubic-bezier(.2,.7,.2,1) .2s; }
.revela-on .quem-marca .painel-nome { transition-delay: .4s; transform: translateY(8px); }
.revela-on .quem-marca .painel-linha { transition-delay: .55s; transform: translateY(8px); }
.revela-on .quem-marca.revelado .painel-simbolo, .revela-on .quem-marca.revelado .painel-nome, .revela-on .quem-marca.revelado .painel-linha { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revela-on .quem-curvas path { stroke-dashoffset: 0; }
  .revela-on .quem-marca .painel-simbolo, .revela-on .quem-marca .painel-nome, .revela-on .quem-marca .painel-linha { opacity: 1; transform: none; }
}
/* Curvas como TEXTURA de fundo da seção (pedido do Daniel, 30/10): ondas longas e paralelas
   bem sutis atravessando a largura, e as descidas laterais da miniatura um pouco mais marcadas.
   Vinheta clara atrás da marca para dar profundidade. Tudo atrás do conteúdo. */
#quem-e.fundo-azul { background: radial-gradient(38% 60% at 24% 50%, #33404F 0%, rgba(38, 48, 59, 0) 72%), var(--marca-azul); }
.quem-curvas path { opacity: .22; stroke-width: 1; }
.quem-curvas path.media { opacity: .4; stroke-width: 1.2; }
.quem-curvas path.forte { opacity: .62; stroke-width: 1.4; }
.quem-curvas path.sutil { opacity: .2; }
.revela-on .quem-curvas path.sutil { transition-delay: .5s; }
.revela-on .quem-curvas path.media { transition-delay: .3s; }
@media (max-width: 859px) {
  #quem-e.fundo-azul { background: radial-gradient(70% 30% at 50% 18%, #33404F 0%, rgba(38, 48, 59, 0) 75%), var(--marca-azul); }
  .quem-curvas path:nth-child(n+10) { display: none; }   /* no celular, só as ondas e a descida da esquerda */
  .quem-curvas path.forte { opacity: .32; } .quem-curvas path.media { opacity: .2; } .quem-curvas path.sutil, .quem-curvas path { opacity: .08; }
  .quem-curvas path.forte { opacity: .32; }
}

/* 30/10: as curvas de fundo do "Quem é" somem antes da coluna do texto (pedido do Daniel: não atrapalhar a leitura) */
@media (min-width: 860px) {
  .quem-curvas {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 40%, transparent 52%);
            mask-image: linear-gradient(to right, #000 0%, #000 40%, transparent 52%);
  }
}
@media (max-width: 859px) {
  /* no celular a marca fica em cima e o texto embaixo: as curvas somem antes do texto */
  .quem-curvas {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 42%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 42%);
  }
}