/* ════════════════════════════════════════════════════
   LP — estilos específicos da landing page
   Importa css/style.css antes deste arquivo e só sobrescreve
   o que a LP precisa. A régua de medidas vem do benchmark
   validado (brunolamoglia.com.br/anuncio), medida em 390px
   e 1440px em 28/09: mesma hierarquia, alinhamento, pesos e
   tamanhos; cores e fonte de título seguem a marca Andressa.
   ════════════════════════════════════════════════════ */

:root {
  --font-serif:   'Lora', Georgia, serif;   /* títulos: marca */
  --lp-ink:       #3A2A22;   /* títulos, negritos, fundo escuro (= rodapé do site) */
  --lp-body:      #5C4D46;   /* texto corrido: escuro o bastante para ler, quente */
  --lp-muted:     #7D6E67;   /* rótulos e assinaturas */
  --lp-line:      rgba(107,76,59,.12);
  --lp-cta:       #25D366;   /* verde WhatsApp, o original da página */
  --lp-cta-hover: #25D366;
}

/* LP de anúncio não tem rota de fuga: sem menu. */
#navbar, .nav-drawer, .nav-toggle, .hamburger { display: none !important; }

/* Quebra de linha: o benchmark equilibra as linhas à mão.
   Aqui o navegador faz isso — títulos e textos centrados sem
   palavra órfã na última linha; corridos sem viúva. */
.hero-headline, .hero-subheadline, .credential-line span,
.section-title, .section-intro, .section-turn,
.andressa-headline, .cta-final-headline, .cta-final-body { text-wrap: balance; }
.signal-card p, .timeline-content p, .andressa-bio,
.accordion-body p, .accordion-trigger span:first-child { text-wrap: pretty; }
@media (max-width: 768px) {
  .signal-card p { text-wrap: balance; }
  .signal-grid--check .signal-card p { text-wrap: pretty; }
}


/* ─── BOTÃO — padrão do benchmark ─────────────────────
   Verde sólido, caixa-alta, 16px bold, pílula de 56px,
   sem ícone. Mobile: largura cheia. Desktop: centrado. */
.btn-whatsapp {
  background: var(--lp-cta);
  justify-content: center;
  text-align: center;
  min-height: 56px;
  padding: .9rem 1.6rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.25;
}
.btn-whatsapp svg { display: none; }
.btn-whatsapp:hover {
  background: var(--lp-cta-hover);
  box-shadow: 0 12px 32px rgba(37,211,102,.25);
}

#inventario > .btn-whatsapp,
#regua > .btn-whatsapp,
#nomeacao > .btn-whatsapp,
#mecanismo > .btn-whatsapp {
  display: flex;
  width: fit-content;
  min-width: 320px;
  margin: 0 auto;
}


/* ─── 1 · HERO ─────────────────────────────────────── */
#hero { background: var(--color-bg-primary); }

.lp-brand { margin-bottom: .4rem; }
.lp-brand-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--color-brown);
}
.lp-brand-sub {
  display: block;
  margin-top: .3rem;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-blue);
}

#hero .hero-content { gap: 1.25rem; }

#hero .hero-headline {
  font-size: clamp(1.625rem, 3.2vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--lp-ink);
  max-width: 24ch;
}

#hero .hero-subheadline {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--lp-ink);
  max-width: 46ch;
}

/* Anúncio: o CTA não pode esperar 2s para aparecer.
   Mantém a entrada suave, mas quase imediata. */
#hero .hero-subheadline   { animation-delay: .1s;  animation-duration: .6s; }
#hero .hero-cta-group     { animation-delay: .2s;  animation-duration: .6s; }
#hero .credential-line    { animation-delay: .3s;  animation-duration: .6s; }
#hero .hero-image-panel img { animation-delay: 0s; animation-duration: .8s; }

#hero .hero-cta-group { width: 100%; }

/* Assinatura: 14px, escura, CRM em negrito (benchmark) */
.credential-line {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--lp-ink);
  opacity: 0;
  animation: fadeUp .6s var(--ease-silk) .3s forwards;
}
.credential-line strong { font-weight: 700; }

/* Desktop: coluna de texto alinhada à esquerda, como o benchmark.
   Sem navbar, o respiro de 72px do topo sobrava como faixa vazia
   acima da foto. */
@media (min-width: 769px) {
  /* A dobra ocupa a tela inteira: a foto desce até o chão
     da janela e a próxima seção só começa depois do scroll. */
  #hero {
    padding-top: 0;
    height: 100vh;
    height: 100svh;
    min-height: 620px;
    align-items: stretch;
  }
  #hero .hero-content { justify-content: center; }
  #hero .hero-image-panel { height: 100%; }
  #hero .hero-content { text-align: left; align-items: flex-start; padding-top: 3rem; }
  #hero .hero-headline { font-size: clamp(2rem, 2.9vw, 2.9rem); max-width: 22ch; }
  #hero .hero-cta-group { justify-content: flex-start; }
  #hero .hero-cta-group .btn-whatsapp { min-width: 340px; }
}

/* Mobile: tudo centralizado; a foto fecha a dobra numa faixa
   curta em vez de se alongar (a exceção combinada ao benchmark). */
@media (max-width: 768px) {
  #hero {
    min-height: 0;
    grid-template-rows: auto auto;
    padding-bottom: 0;
  }
  #hero .hero-content {
    order: 1;
    text-align: center;
    align-items: center;
    padding-top: 2rem;
    padding-bottom: .75rem;
  }
  #hero .hero-headline,
  #hero .hero-subheadline { margin-left: auto; margin-right: auto; max-width: 100%; }
  #hero .hero-headline { font-size: 1.625rem; }
  #hero .hero-cta-group { justify-content: center; }

  #hero .hero-image-panel {
    order: 2;
    margin-top: 0;
    position: relative;
    height: 40svh;
    min-height: 210px;
    max-height: 340px;
    overflow: hidden;
  }
  #hero .hero-image-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%;   /* mantém o rosto no quadro */
  }
  /* a foto se funde com o fundo em vez de começar num corte */
  #hero .hero-image-panel::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 28%;
    background: linear-gradient(to bottom,
      var(--color-bg-primary) 0%,
      rgba(251,243,240,.70) 45%,
      transparent 100%);
    pointer-events: none;
    z-index: 2;
  }
  #hero .hero-image-panel::before { display: none; }
}


/* ─── SEÇÕES — ritmo e cabeçalho ──────────────────── */
#inventario  { background: var(--color-bg-secondary); }
#regua       { background: #6D4A4B; }
#nomeacao    { background: var(--color-bg-primary); }
#mecanismo   { background: var(--color-bg-secondary); }
#quem-conduz { background: var(--color-bg-primary); overflow: hidden; }
#faq         { background: var(--color-bg-secondary); }
#fecho       { background: var(--color-bg-primary); }

#inventario, #regua, #nomeacao, #mecanismo,
#quem-conduz, #faq, #fecho { padding: 5rem 8vw; }

.section-header { text-align: center; margin-bottom: 2.25rem; }

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--lp-ink);
  max-width: 30ch;
  margin: 0 auto;
}

.section-intro {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--lp-body);
  max-width: 62ch;
  margin: 1rem auto 0;
}

/* Linha de virada antes do CTA: texto comum, centrado,
   sem fio lateral (no benchmark só a régua é itálica). */
.section-turn {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  color: var(--lp-body);
  text-align: center;
  max-width: 62ch;
  margin: 2.5rem auto 2rem;
  padding: 0;
  border: 0;
}


/* ─── CARD DE SINAL (blocos 2, 3, 4) ──────────────────
   Mobile: ícone em cima, texto centrado.
   Desktop: ícone à esquerda, texto à esquerda.         */
.signal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 0;
}

.signal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  padding: 1.5rem 1.4rem;
}

.signal-icon {
  width: 48px;
  height: 48px;
  flex: none;
  margin: 0 0 1.1rem;
  border-radius: 8px;
  background: var(--color-brown);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.signal-icon svg { width: 22px; height: 22px; stroke-width: 1.7; }

.signal-card p {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--lp-body);
  margin: 0;
}
.signal-card p strong { font-weight: 700; color: var(--lp-ink); }

@media (min-width: 769px) {
  .signal-card {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 1rem;
    padding: 1.5rem;
  }
  .signal-icon { margin: 0; width: 44px; height: 44px; }
  .signal-card p { font-size: .95rem; }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .signal-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ─── 3 · A RÉGUA — fundo invertido ───────────────────
   Rótulo em linha própria, ícone redondo translúcido,
   virada em itálico (padrão do benchmark neste bloco). */
#regua {
  --regua-ink:   #F7EDEC;
  --regua-ink-2: #E6D3D2;
}
#regua .section-title        { color: #FFFFFF; }
#regua .section-intro        { color: var(--regua-ink); }
#regua .section-turn         { color: var(--regua-ink); font-style: italic; }

#regua .signal-card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
#regua .signal-icon {
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.24);
  color: #F3E3E1;
}
/* Pedido do operador: nesta seção o texto fica centrado
   também no desktop (ícone em cima, texto ao centro). */
@media (min-width: 769px) {
  #regua .signal-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #regua .signal-icon { margin: 0 0 1rem; }
}
#regua .signal-card p        { color: var(--regua-ink-2); }
#regua .signal-card p strong {
  display: block;
  margin-bottom: .25rem;
  color: #FFFFFF;
}


/* ─── 4 · CONDIÇÕES — lista de checagem ───────────────
   Benchmark: card horizontal, check à esquerda, fio
   escuro na borda esquerda, rótulo em negrito na linha. */
.signal-grid--check .signal-card {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: 1rem;
  padding: 1.25rem;
  border-left: 3px solid var(--lp-ink);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(58,42,34,.05);
}
.signal-grid--check .signal-icon {
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 6px;
  background: #E4F8EB;
  color: #1DA851;
}
.signal-grid--check .signal-icon svg { width: 18px; height: 18px; stroke-width: 2.4; }


/* ─── 6 · MAPA DO TRATAMENTO — timeline em card ───── */
.timeline-wrap {
  max-width: 880px;
  margin: 0 auto;
  background: var(--color-white);
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  padding: 2.5rem 2.5rem .75rem;
}
.timeline { padding-left: 0; }

#mecanismo .timeline-step {
  opacity: 1;
  transform: none;
  grid-template-columns: 48px 1fr;
  gap: 1.25rem;
}

.timeline-number {
  width: 44px;
  height: 44px;
  border: 2px solid #E6DCD8;
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-brown);
  letter-spacing: 0;
}
.timeline-line {
  width: 2px;
  background: #E6DCD8;
  opacity: 1;
}

.timeline-content { padding: .45rem 0 2rem; }
.timeline-content h4 {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-brown);
  margin-bottom: .6rem;
}
.timeline-step:hover .timeline-content h4 { color: var(--color-brown); }
.timeline-content p {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--lp-body);
  max-width: none;
}


/* ─── 7 · QUEM CONDUZ ─────────────────────────────────
   Ordem do benchmark: foto → rótulo em caixa-alta →
   nome → credencial (CRM em negrito) → fio → bio →
   citação em card com fio à esquerda.                  */
.andressa-inner { gap: 0 5rem; align-items: start; }

.andressa-eyebrow {
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--lp-muted);
  margin-bottom: .75rem;
}

.andressa-headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 2.8vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--lp-ink);
  margin-bottom: 1rem;
}

.andressa-credential {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--lp-body);
  margin-bottom: 1.5rem;
}
.andressa-credential strong { font-weight: 700; color: var(--lp-ink); }

.andressa-divider {
  width: 100%;
  height: 1px;
  background: var(--lp-line);
  margin: 0 0 1.5rem;
}

.andressa-bio {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--lp-body);
  margin-bottom: 1.1rem;
  max-width: 60ch;
}

.andressa-epigraph {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--lp-ink);
  max-width: 60ch;
  margin: 1.75rem 0 0;
  padding: 1.5rem 1.5rem 1.4rem;
  background: var(--color-white);
  border-left: 3px solid var(--lp-ink);
  border-radius: 0 8px 8px 0;
}
.andressa-epigraph cite {
  display: block;
  margin-top: .8rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: .875rem;
  font-weight: 400;
  color: var(--lp-muted);
}


/* ─── 9 · FAQ — cards, primeira aberta ────────────── */
.accordion {
  max-width: 860px;
  margin: 0 auto;
  gap: .9rem;
}
.accordion-item,
.accordion-item:first-child {
  background: var(--color-white);
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  padding: 0 1.5rem;
}

.accordion-trigger {
  list-style: none;
  padding: 1.25rem 0;
  gap: 1rem;
}
.accordion-trigger::-webkit-details-marker { display: none; }
.accordion-trigger::marker { content: ''; display: none; }

.accordion-trigger span:first-child {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--lp-ink);
}
.accordion-trigger:hover span:first-child { color: var(--color-brown); }

/* ícone: + fechado, − aberto, sem círculo */
.accordion-icon { width: 18px; height: 18px; border: 0; border-radius: 0; }
.accordion-icon span { background: var(--lp-ink); }
.accordion-icon span:first-child { width: 14px; height: 2px; }
.accordion-icon span:last-child  { width: 2px; height: 14px; }

.accordion-item[open] > .accordion-trigger .accordion-icon {
  background: none;
  border: 0;
  transform: none;
}
.accordion-item[open] > .accordion-trigger .accordion-icon span { background: var(--lp-ink); }
.accordion-item[open] > .accordion-trigger .accordion-icon span:last-child {
  transform: translate(-50%, -50%) scaleY(0);
}
.accordion-item[open] > .accordion-trigger span:first-child { color: var(--lp-ink); }

.accordion-body {
  max-height: none;
  overflow: visible;
  padding: 0 0 1.4rem;
}
.accordion-body p {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--lp-body);
  max-width: none;
}
.accordion-body p + p { margin-top: .75rem; }

/* aviso de urgência depois do FAQ: discreto, legível */
#faq .section-turn {
  font-size: .9rem;
  max-width: 60ch;
  margin: 2rem auto 0;
}


/* ─── 10 · FECHO — card escuro ────────────────────── */
.fecho-card {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  background: var(--lp-ink);
  border-radius: 16px;
  padding: 2.75rem 2.5rem;
  box-shadow: 0 18px 40px rgba(58,42,34,.18);
}
.fecho-card .cta-final-headline {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  color: #FFFFFF;
}
.fecho-card .cta-final-body {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255,255,255,.88);
  max-width: 46ch;
}
.fecho-card .cta-final-btn {
  align-self: center;
  width: 100%;
  max-width: 340px;
  margin-top: .5rem;
}


/* ─── RODAPÉ — padrão do benchmark ────────────────── */
.footer-inner {
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.footer-logo { margin-bottom: 0; }

.footer-credential {
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255,255,255,.7);
  margin-top: 1rem;
}
.footer-credential strong { color: #FFFFFF; font-weight: 700; }

.footer-tagline { margin-top: .9rem; }

.footer-col-title {
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 1rem;
}

.footer-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.footer-list li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 400;
  color: rgba(255,255,255,.7);
}
.footer-list svg { width: 16px; height: 16px; flex: none; }
.footer-list a { color: inherit; text-decoration: none; }
.footer-list a:hover { color: #FFFFFF; }

.footer-social-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  color: #FFFFFF;
  transition: background .3s;
}
.footer-social-btn:hover { background: rgba(255,255,255,.08); }
.footer-social-btn svg { width: 20px; height: 20px; }

.footer-cta { margin-top: 1.5rem; width: 100%; max-width: 320px; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-top: 1.5rem;
  font-family: var(--font-sans);
  font-size: .8125rem;
  color: rgba(255,255,255,.55);
}
.footer-legal .footer-copyright { color: inherit; font-size: inherit; }
.footer-legal p { margin: 0; }
.footer-legal .footer-link { color: rgba(255,255,255,.6); text-decoration: none; }
.footer-legal .footer-link:hover { color: #FFFFFF; }


/* ════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1100px) {
  /* tablet: 3 colunas espremiam o botão em duas linhas */
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; }
  .footer-social-col {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
  }
  .footer-social-col .footer-col-title { margin-bottom: 0; }
  .footer-cta { margin-top: 0; width: auto; min-width: 280px; }
}

@media (max-width: 768px) {
  #inventario, #regua, #nomeacao, #mecanismo,
  #quem-conduz, #faq, #fecho {
    padding: 3.25rem 5vw;
    width: 100%;
    box-sizing: border-box;
  }

  .section-title { font-size: 1.75rem; max-width: 100%; }
  .section-intro,
  .section-turn  { max-width: 100%; }

  .signal-grid { grid-template-columns: 1fr; gap: 1.25rem; }

  #inventario > .btn-whatsapp,
  #regua > .btn-whatsapp,
  #nomeacao > .btn-whatsapp,
  #mecanismo > .btn-whatsapp { width: 100%; min-width: 0; }

  .timeline-wrap { padding: 1.75rem 1rem .5rem; }
  #mecanismo .timeline-step { grid-template-columns: 44px 1fr; gap: 1rem; }

  /* quem conduz: foto primeiro, em largura cheia */
  .andressa-inner { gap: 0; }
  .andressa-photo-wrap  { order: 1; width: 100%; max-width: 100%; margin: 0 0 2rem; }
  .andressa-text-top    { order: 2; }
  .andressa-text-bottom { order: 3; }
  .andressa-headline    { font-size: 2rem; }

  .accordion-item,
  .accordion-item:first-child { padding: 0 1.25rem; }
  .accordion-trigger span:first-child { font-size: 1.0625rem; }
  .accordion-body p { font-size: 1rem; }

  .fecho-card { padding: 2.25rem 1.5rem; }
  .fecho-card .cta-final-btn { max-width: none; }

  /* rodapé: coluna única, tudo centrado */
  #footer { padding: 3rem 5vw 5rem; }   /* respiro p/ o botão flutuante */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    text-align: center;
    justify-items: center;
  }
  .footer-logo { align-items: center; }
  .footer-list li { justify-content: center; }
  .footer-social-col { align-items: center; width: 100%; }
  .footer-cta { max-width: none; }
  .footer-legal {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}


/* ════════════════════════════════════════════════════
   CAMADA FEMININA — rodada 28/09 (pedido do operador)
   Só acabamento: troca o marrom pesado por rosé suave e
   degradês claros. Nada aqui mexe em estrutura, tamanho de
   texto, contraste de leitura ou no botão — o que converte
   continua igual.
   ════════════════════════════════════════════════════ */
:root {
  --lp-rose:        #B98482;   /* rosé empoeirado: fios e acentos */
  --lp-rose-deep:   #8E5E5C;   /* ícones sobre fundo claro */
  --lp-blush:       #F6E4E0;
  --lp-blush-2:     #EFD4CF;
  --lp-soft-shadow: 0 10px 30px rgba(185,132,130,.12);
}

/* Botão sem a linha de virada antes: respiro próprio */
#nomeacao > .btn-whatsapp,
#mecanismo > .btn-whatsapp { margin-top: 2.75rem; }

/* Cards: cantos mais redondos, sombra rosada leve */
.signal-card,
.accordion-item,
.accordion-item:first-child { border-radius: 16px; border-color: rgba(185,132,130,.18); }
.signal-card { box-shadow: var(--lp-soft-shadow); }

/* Ícones: quadrado marrom sólido → degradê blush com traço rosé */
.signal-icon {
  border-radius: 14px;
  background: linear-gradient(135deg, var(--lp-blush) 0%, var(--lp-blush-2) 100%);
  color: var(--lp-rose-deep);
}

/* Régua: mesmo tom, mas em degradê em vez de chapado */
#regua { background: linear-gradient(165deg, #7A5557 0%, #6D4A4B 45%, #5C3F41 100%); }
#regua .signal-card { box-shadow: none; }
#regua .signal-icon { background: rgba(255,255,255,.10); color: #F6E4E1; }

/* Condições: fio escuro → fio rosé; ✓ em rosé */
.signal-grid--check .signal-card { border-left: 3px solid var(--lp-rose); border-radius: 14px; }
.signal-grid--check .signal-icon {
  border-radius: 10px;
  background: var(--lp-blush);
  color: var(--lp-rose-deep);
}

/* Timeline: card e marcadores em rosé */
.timeline-wrap { border-radius: 20px; border-color: rgba(185,132,130,.18); box-shadow: var(--lp-soft-shadow); }
.timeline-number { border-color: var(--lp-blush-2); color: var(--lp-rose-deep); }
.timeline-line   { background: linear-gradient(to bottom, var(--lp-blush-2), rgba(239,212,207,.35)); }

/* Quem conduz: fio da citação e divisória em rosé */
.andressa-epigraph { border-left-color: var(--lp-rose); border-radius: 0 16px 16px 0; box-shadow: var(--lp-soft-shadow); }
.andressa-divider  { background: rgba(185,132,130,.25); }
.andressa-photo    { border-radius: 24px; }

/* FAQ: ícone +/− em rosé */
.accordion-icon span,
.accordion-item[open] > .accordion-trigger .accordion-icon span { background: var(--lp-rose-deep); }

/* Fecho: card marrom grosso → card claro em degradê blush */
#fecho { background: var(--color-bg-secondary); }
.fecho-card {
  background: linear-gradient(145deg, #FBEDEA 0%, #F4DCD8 55%, #EDCFCB 100%);
  border: 1px solid rgba(185,132,130,.22);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(185,132,130,.20);
}
.fecho-card .cta-final-headline { color: var(--lp-ink); }
.fecho-card .cta-final-body     { color: var(--lp-body); }

/* Rodapé: marrom-café → ameixa-rosé escuro, em degradê */
#footer { background: linear-gradient(170deg, #4A3234 0%, #3D2A2C 100%); }


/* ════════════════════════════════════════════════════
   RESPONSIVO — ajustes do teste em 14 tamanhos (28/09)
   ════════════════════════════════════════════════════ */

/* Botão flutuante: some enquanto o CTA do hero está na tela
   (lá já existe um botão visível, então nada se perde) e
   aparece assim que ele sai. Evita cobrir a assinatura em
   telas estreitas. Sem JS, fica sempre visível. */
#float-whatsapp { transition: opacity .3s, transform .3s; }
#float-whatsapp.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* Qualquer tela de toque (tablet, celular deitado) mostra o
   flutuante — o style.css só mostrava abaixo de 768px. */
@media (hover: none) and (pointer: coarse) {
  #float-whatsapp { display: flex; }
}

/* Tablet em pé (600–768px): layout de celular, mas sem esticar
   tudo até a borda. */
@media (min-width: 600px) and (max-width: 768px) {
  #hero .hero-image-panel { height: 48svh; max-height: 520px; }
  #hero .hero-headline { font-size: 2rem; max-width: 26ch; }
  .btn-whatsapp { width: 100%; max-width: 460px; margin-left: auto; margin-right: auto; }
  #inventario > .btn-whatsapp, #regua > .btn-whatsapp,
  #nomeacao > .btn-whatsapp, #mecanismo > .btn-whatsapp { width: 100%; max-width: 460px; }
  .signal-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline-wrap, .accordion, .fecho-card { max-width: 620px; margin-left: auto; margin-right: auto; }
  .andressa-photo-wrap { max-width: 460px; margin-left: auto; margin-right: auto; }
}

/* Grade de 2 colunas com número ímpar de cards: o último vai
   para o centro em vez de ficar órfão à esquerda. */
@media (min-width: 600px) and (max-width: 1100px) {
  .signal-grid > .signal-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - .625rem);
  }
}

/* Celular deitado / telas baixas: o hero não força 620px de
   altura; título menor para o CTA caber na primeira tela. */
@media (min-width: 769px) and (max-height: 520px) {
  #hero { height: auto; min-height: 100svh; }
  #hero .hero-content { padding-top: 1.5rem; padding-bottom: 1.5rem; gap: .9rem; }
  #hero .hero-headline { font-size: 1.6rem; }
  .lp-brand { margin-bottom: 0; }
}