/* theme: confianca */
/* Confiança suave — branco, verde-azulado calmo e títulos em serifa elegante. A ousadia do tema:
   a foto em arco, com um arco fino desenhado atrás e o cartão da avaliação flutuando por cima.
   Ondas bem leves se espalham devagar a partir da foto. O resto da página é sereno e organizado.
   Fontes: Instrument Serif (títulos) e Figtree (texto).
   Blocos: TOKENS (cores em #RRGGBB, fontes, cantos...), EFEITOS (só var(--...)) e
   PERSONALIZAÇÃO DO CLIENTE (ajustes deste cliente). Não mude os comentários com =====. */

/* ===== TOKENS DO TEMA ===== */
:root {
  --color-primary: #0F766E;          /* verde-azulado: botões, links, números */
  --color-primary-strong: #0B5A54;
  --color-primary-soft: #E3F4F1;
  --color-primary-contrast: #FFFFFF;
  --color-accent: #99F6E4;           /* verde-água: estrelas e botão do CTA final */
  --color-accent-contrast: #0F2A2E;
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F2F8F7;
  --color-ink: #0F2A2E;              /* verde quase preto: CTA final e rodapé */
  --color-ink-contrast: #F2FBF9;
  --color-text: #0F2A2E;
  --color-muted: #4D6568;
  --color-border: #D5E4E1;
  --color-success: #1F7A4D;
  --color-error: #B42335;
  --color-whatsapp: #15803D;
  --color-whatsapp-contrast: #FFFFFF;
  --color-focus: #0F766E;
  --color-focus-on-dark: #99F6E4;
  --color-decor-1: #99F6E4;          /* verde-água do brilho atrás da foto */
  --color-decor-2: #CCFBF1;
  --color-decor-3: #0F766E;          /* linhas finas (arco e ondas) */

  --font-heading: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --weight-heading: 400;
  --weight-strong: 600;

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.5rem;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 42, 46, 0.06);
  --shadow-md: 0 14px 32px -16px rgba(15, 42, 46, 0.24);
  --shadow-lg: 0 30px 60px -30px rgba(15, 42, 46, 0.34);

  --gradient-hero: linear-gradient(180deg, var(--color-bg) 30%, var(--color-surface-alt));
  --hero-title-size: clamp(2.875rem, 1.9rem + 4.4vw, 5.25rem);
  --letter-spacing-heading: -0.01em;
  --duration-fast: 200ms;
  --duration-slow: 1100ms;
}

/* ===== EFEITOS DO TEMA ===== */
/* --breathe = quanto as ondas crescem (maior no nível "marcante") */
.hero { --breathe: 1.04; --wave-x: 50%; --wave-y: 80%; }
[data-motion="marcante"] .hero { --breathe: 1.1; }

/* Cabeçalho transparente: o topo sobe 8rem por trás dele, e as ondas passam por baixo */
.site-header {
  position: relative;
  z-index: 2;
  background: transparent;
  border-bottom-color: transparent;
}

/* o botão "pular para o conteúdo" fica escondido acima da tela: sem sombra, para não aparecer no topo */
.skip-link:not(:focus) { box-shadow: none; }

.hero {
  margin-top: -8rem;
  padding-top: calc(8rem - 1px + var(--space-6));
}

/* no layout "background" o topo não sobe atrás do cabeçalho: a foto começa embaixo dele */
.hero[data-hero="background"] { margin-top: 0; }

/* títulos em serifa só onde o texto é grande; os títulos pequenos usam a fonte do texto */
.feature__title,
.step__title,
.compare__title,
.faq__item summary {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
}

/* Ondas: círculos finos em volta da foto, que "respiram" devagar e somem nas bordas */
.hero__decor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(circle at var(--wave-x) var(--wave-y), transparent 0 54px, color-mix(in srgb, var(--color-decor-3) 12%, transparent) 55px 56px);
  -webkit-mask-image: radial-gradient(circle at var(--wave-x) var(--wave-y), var(--color-text) 15%, transparent 60%);
  mask-image: radial-gradient(circle at var(--wave-x) var(--wave-y), var(--color-text) 15%, transparent 60%);
  transform-origin: var(--wave-x) var(--wave-y);
  animation: confianca-breathe 9s ease-in-out infinite alternate;
}

@keyframes confianca-breathe { to { transform: scale(var(--breathe)); } }

.hero__place { color: var(--color-primary-strong); }

/* textos menores do topo: um tom mais escuro que o --color-muted, para ler bem sobre as ondas */
.hero__lead,
.hero__note { color: color-mix(in srgb, var(--color-text) 35%, var(--color-muted)); }

.hero__title {
  line-height: 1.02;
  max-width: 13ch;
}

/* A foto em arco: um brilho verde-água atrás e um arco fino deslocado, como um contorno desenhado */
.hero__media {
  isolation: isolate;
}

.hero__media::before,
.hero__media::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: var(--radius-full) var(--radius-full) var(--radius-lg) var(--radius-lg);
}

.hero__media::before {
  inset: -0.875rem 0.875rem 0.875rem -0.875rem;
  border: 1px solid color-mix(in srgb, var(--color-decor-3) 45%, transparent);
}

.hero__media::after {
  inset: 12% -10% -6% 10%;
  border-radius: 50%;
  background: var(--color-decor-1);
  filter: blur(50px);
  opacity: 0.55;
}

.hero__media img { box-shadow: var(--shadow-lg); }

/* O número flutuante: o cartão da avaliação, com a nota em serifa grande */
.hero__badge {
  gap: 0;
  padding: var(--space-3) var(--space-5) var(--space-4);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  animation: confianca-rise var(--duration-slow) var(--ease) 600ms both, confianca-float 6s ease-in-out 1.7s infinite alternate;
}

.hero__badge strong {
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.15;
}

.hero__badge .stars { color: var(--color-primary); font-size: var(--fs-sm); }

/* O momento do topo: tudo sobe com calma, em sequência */
.hero__place { animation: confianca-rise var(--duration-slow) var(--ease) both; }
.hero__title { animation: confianca-lift var(--duration-slow) var(--ease) 80ms both; }
.hero__lead { animation: confianca-rise var(--duration-slow) var(--ease) 200ms both; }
.hero__actions { animation: confianca-rise var(--duration-slow) var(--ease) 320ms both; }
.hero__media img { animation: confianca-lift 1.4s var(--ease) both; }

@keyframes confianca-rise { from { opacity: 0; transform: translateY(0.875rem); } }
@keyframes confianca-lift { from { transform: translateY(1.25rem); } }
@keyframes confianca-float { to { transform: translateY(-0.5rem); } }

/* Barra de números: continua o fundo do topo, com os números em serifa */
.proof {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.proof__list {
  border-top: 1px solid var(--color-border);
}

.proof__list strong {
  color: var(--color-primary);
  font-size: var(--fs-2xl);
  font-weight: 400;
}

.proof__list li > span { color: var(--color-muted); }

/* Botões: cantos suaves (não pílula), sem exagero */
.btn {
  border-radius: var(--radius-md);
  font-weight: 600;
}

.btn--primary { box-shadow: 0 12px 26px -14px var(--color-primary); }

.btn--primary:hover { transform: translateY(-1px); }

.btn--ghost {
  border-width: 1px;
  border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.section__title { line-height: 1.08; }

.compare__col--before {
  border: 0;
  background: var(--color-surface-alt);
}

.compare__col--after {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.feature__icon {
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  box-shadow: none;
}

.section--alt .feature__icon { background: var(--color-surface); }

.step::before {
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  font-size: var(--fs-2xl);
  font-weight: 400;
}

.step:not(:last-child)::after {
  border-style: solid;
  border-width: 1px;
}

.quote {
  border: 1px solid var(--color-border);
  box-shadow: none;
}

/* depoimento em destaque: fundo verde-água claro e a frase em serifa */
.quote--featured {
  border: 0;
  background: var(--color-primary-soft);
  color: var(--color-text);
  box-shadow: none;
}

.quote--featured blockquote {
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 1.15;
}

.quote--featured .quote__meta { color: var(--color-muted); opacity: 1; }

.offer__card {
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
}

.offer__price strong { font-weight: 400; }

.guarantee {
  border: 0;
  background: var(--color-primary-soft);
}

.guarantee__seal { color: var(--color-primary); }
.guarantee__check { stroke: var(--color-primary-contrast); }

.form {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.field input:not([type="checkbox"]) {
  border-width: 1px;
  border-radius: var(--radius-sm);
}

.field input:not([type="checkbox"]):focus-visible {
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}

.faq__item summary { font-size: var(--fs-base); }

/* CTA final escuro, com o arco fino repetido ao fundo */
.final-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.final-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -6rem;
  bottom: -14rem;
  width: 26rem;
  height: 34rem;
  border-radius: var(--radius-full) var(--radius-full) 0 0;
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  box-shadow: inset 0 0 0 2.5rem color-mix(in srgb, var(--color-accent) 5%, transparent);
}

.btn--accent { box-shadow: none; }

.site-footer { border-top-color: color-mix(in srgb, var(--color-ink-contrast) 10%, transparent); }

.sticky-cta { border-top-color: var(--color-border); }

@media (min-width: 768px) {
  .hero {
    --wave-x: 26%;
    --wave-y: 55%;
    padding-top: calc(8rem - 1px + var(--space-7));
  }

  .hero__media::before { inset: -1.25rem 1.25rem 1.25rem -1.25rem; }

  .final-cta::before {
    right: 6%;
    bottom: -18rem;
    width: 34rem;
    height: 44rem;
  }

  .proof__list li + li { border-left-color: var(--color-border); }
}

/* ===== PERSONALIZAÇÃO DO CLIENTE ===== */
/* Cores da marca Multi Clean (skill /design): azul royal do logo, azul-claro das gotas e marinho do fundo do logo */
:root {
  --color-primary: #1249A8;          /* azul royal da marca: botões, links, números */
  --color-primary-strong: #0D3780;   /* azul mais escuro (botão com o mouse em cima) */
  --color-primary-soft: #E6EEFA;     /* azul bem claro (fundos de ícones) */
  --color-primary-contrast: #FFFFFF;
  --color-accent: #7CC8FF;           /* azul-claro das gotas: estrelas e botão do CTA final */
  --color-accent-contrast: #0A1F44;
  --color-surface-alt: #F1F5FC;      /* fundo das seções alternadas, levemente azulado */
  --color-ink: #0A1F44;              /* marinho do fundo do logo: CTA final e rodapé */
  --color-ink-contrast: #F3F7FF;
  --color-text: #0B1B36;
  --color-muted: #4A5A75;
  --color-border: #D6E0F0;
  --color-focus: #1249A8;
  --color-focus-on-dark: #7CC8FF;
  --color-decor-1: #7CC8FF;          /* brilho atrás da foto */
  --color-decor-2: #D6EAFF;
  --color-decor-3: #1249A8;          /* linhas finas (arco e ondas) */
}