/* =============================================
   LP — Sell in Brazil / Venda no Brasil
   Nasceu do importacao-carne-suina/lp.css, sem as regras de menu:
   esta pagina e de conversao e nao tem navegacao.
   Layout PRÓPRIO da landing page.
   Consome os fundamentos (variables + foundations);
   NÃO usa css/main.css nem css/responsive.css (home).
   ============================================= */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
section[id], div[id] { scroll-margin-top: 90px; }
img { max-width: 100%; display: block; }

/* ---------- HEADER ---------- */
.lp-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid #f0f0f0;
}
.lp-nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.lp-logo img { height: 50px; width: auto; }
.lp-nav-actions { display: flex; align-items: center; gap: 12px; }

/* ---------- HERO ---------- */
.lp-hero { position: relative; background: var(--color-bg-dark); overflow: hidden; }
.lp-hero-bg { position: absolute; inset: 0; }
.lp-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* Duas camadas SEPARADAS, e nao dois gradientes no mesmo background:
   ::before escurece a foto; ::after poe a brasa laranja em cima do escuro.
   Com os dois no mesmo background a ordem forcava escolher entre laranja
   lavado (escuro por cima) ou paragrafo ilegivel (laranja por cima). */
.lp-hero-bg::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(14,17,22,0.93) 0%, rgba(14,17,22,0.86) 45%, rgba(14,17,22,0.80) 100%);
}
.lp-hero-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(78% 118% at 103% 0%, rgba(252,80,0,0.96) 0%, rgba(252,80,0,0.70) 24%, rgba(252,80,0,0.34) 46%, rgba(252,80,0,0.10) 62%, rgba(252,80,0,0) 75%);
}
.lp-hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center;
  min-height: 520px;
  /* var(--container-px) e nao 0: o shorthand anulava o recuo lateral do
     .container e no telefone o texto encostava na borda. */
  padding: 96px var(--container-px) 104px;
}
/* A coluna da direita comeca alinhada ao corpo do titulo, nao ao topo dele */
.lp-hero-aside { padding-top: 6px; }
.lp-hero-copy .eyebrow { color: #ff7a3d; margin-bottom: 18px; }
.lp-hero-title { font-size: var(--fs-2xl); font-weight: var(--fw-light); color: #fff; line-height: 1.12; }
.lp-hero-sub { font-size: var(--fs-md); color: rgba(255,255,255,0.88); line-height: 1.7; margin: 0 0 24px; max-width: 520px; }
.lp-hero-sub strong { color: #fff; font-weight: var(--fw-semibold); }
.lp-benes { list-style: none; display: grid; gap: 11px; margin-bottom: 28px; }
.lp-benes li { display: flex; align-items: center; gap: 11px; font-size: var(--fs-sm); color: #fff; }
.lp-close-copy .lp-benes { margin: 24px 0 0; }
.lp-benes svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; }
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.lp-trust-mini { display: flex; flex-wrap: wrap; gap: 18px 24px; }
.lp-trust-mini span { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: rgba(255,255,255,0.75); }
.lp-trust-mini svg { width: 16px; height: 16px; color: var(--color-primary); }

/* Form card (acima da dobra) */
.lp-formcard { background: #fff; border-radius: var(--radius-xl); box-shadow: 0 30px 70px rgba(0,0,0,0.35); padding: 30px; }
.lp-formcard h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin-bottom: 4px; }
.lp-formcard .lp-form-sub { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: 20px; }
.lp-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lp-fgrid .full { grid-column: 1 / -1; }
.lp-formcard .btn { width: 100%; margin-top: 8px; }
.lp-form-note { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 13px; }
.lp-form-note svg { width: 14px; height: 14px; color: #16A34A; }
.lp-form-success { display: none; text-align: center; padding: 26px 6px; }
.lp-form-success.show { display: block; }
.lp-form-success .ok { width: 66px; height: 66px; border-radius: 50%; background: #E9F9EF; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.lp-form-success .ok svg { width: 32px; height: 32px; color: #16A34A; }
.lp-form-success h3 { margin-bottom: 8px; }
.lp-form-success p { font-size: var(--fs-sm); color: var(--color-text-dark); line-height: 1.6; }

/* ---------- TRUST BAR ---------- */
.lp-trustbar { background: #fff; border-bottom: 1px solid #f0f0f0; }
.lp-trustbar .container { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; padding: 36px var(--container-px); }
.lp-tb-item { text-align: center; }
.lp-tb-item .n { font-size: 40px; font-weight: var(--fw-semibold); color: var(--color-text-dark); line-height: 1; }
.lp-tb-item .n span { color: var(--color-primary); }
.lp-tb-item .c { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: 8px; }

/* ---------- SEÇÕES ---------- */
.lp-section { padding: var(--section-py) 0; }
.lp-section--light { background: var(--color-bg-light); }
.lp-section--dark { background: var(--color-bg-dark); color: #fff; }
.lp-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.lp-head .eyebrow { margin-bottom: 14px; }
.lp-head h2 { font-size: var(--fs-xl); font-weight: var(--fw-light); margin-bottom: 12px; }
.lp-head.on-dark h2 { color: #fff; }
.lp-head p { font-size: var(--fs-base); color: var(--color-text-muted); line-height: 1.7; }
.lp-head--left { text-align: left; margin-left: 0; }

/* ---------- GRID DE CARDS ---------- */
.lp-grid { display: grid; gap: 18px; }
.lp-grid.c3 { grid-template-columns: repeat(3,1fr); }
.lp-grid.c4 { grid-template-columns: repeat(4,1fr); }
.lp-card {
  position: relative;
  background: #fff; border: 1px solid #efefef; border-radius: var(--radius-lg);
  padding: 28px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lp-section--light .lp-card { background: #fff; }
.lp-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: #fff; }
.lp-card .ico-badge { margin-bottom: 18px; transition: transform .3s ease; }
.lp-card:hover .ico-badge { transform: scale(1.06); }
.lp-card h3 { font-size: var(--fs-base); font-weight: var(--fw-semibold); margin-bottom: 8px; }
.lp-card p { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.65; }
.lp-card .num { position: absolute; top: 22px; right: 24px; font-size: var(--fs-xl); font-weight: var(--fw-light); color: rgba(252,80,0,0.14); }

/* ---------- PROCESSO (timeline) ---------- */
.lp-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.lp-step { position: relative; background: #fff; border: 1px solid #efefef; border-radius: var(--radius-lg); padding: 26px 22px; transition: transform .3s ease, box-shadow .3s ease; }
.lp-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.lp-step .sn { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: #fff; font-weight: var(--fw-semibold); font-size: var(--fs-md); border-radius: var(--radius-md); margin-bottom: 16px; }
.lp-step h3 { font-size: var(--fs-base); font-weight: var(--fw-semibold); margin-bottom: 6px; }
.lp-step p { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.6; }

/* ---------- SPLIT (produto) ---------- */
.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.lp-media { position: relative; border-radius: var(--radius-xl); overflow: hidden; min-height: 400px; }
.lp-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.lp-media > * { position: relative; z-index: 1; }
/* Sem veu escuro: ele existia so para o texto que ficava sobre a foto, e
   que saiu — a foto agora aparece limpa. */
.lp-pills { position: absolute; top: 28px; left: 28px; right: 28px; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; }
.lp-pill { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); color: #fff; padding: 7px 14px; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-medium); backdrop-filter: blur(4px); }
.lp-stat .big { font-size: var(--fs-3xl); font-weight: var(--fw-light); color: #fff; line-height: 1; }
.lp-stat .big span { color: var(--color-primary); }
.lp-stat .cap { color: rgba(255,255,255,0.82); font-size: var(--fs-sm); margin-top: 10px; max-width: 340px; }
.lp-split-copy .eyebrow { margin-bottom: 14px; }
.lp-split-copy h2 { font-size: var(--fs-xl); font-weight: var(--fw-light); margin-bottom: 16px; }
.lp-split-copy p { font-size: var(--fs-sm); color: var(--color-text-dark); line-height: 1.75; margin-bottom: 14px; }
.lp-coldstrip { display: flex; gap: 12px; margin-top: 22px; }
.lp-coldstrip .seg { flex: 1; text-align: center; background: var(--color-bg-light); border: 1px solid #efefef; border-radius: var(--radius-md); padding: 12px 8px; }
.lp-coldstrip .seg b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.lp-coldstrip .seg span { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---------- MERCADOS (dark) ---------- */
.lp-markets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.lp-markets-copy h2 { font-size: var(--fs-xl); font-weight: var(--fw-light); color: #fff; margin-bottom: 16px; }
.lp-markets-copy .eyebrow { margin-bottom: 14px; }
.lp-markets-copy p { font-size: var(--fs-sm); color: rgba(255,255,255,0.72); line-height: 1.75; margin-bottom: 14px; }
.lp-markets-copy strong { color: #fff; }
.lp-markets-visual { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.lp-markets-visual img { width: 100%; display: block; }
.lp-market-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 40px; }
.lp-ms { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 22px; }
.lp-ms .v { font-size: 34px; font-weight: var(--fw-semibold); color: #fff; line-height: 1; }
.lp-ms .v span { color: var(--color-primary); }
.lp-ms .l { font-size: var(--fs-xs); color: rgba(255,255,255,0.65); margin-top: 8px; }

/* ---------- PROVA SOCIAL ---------- */

/* ---------- FAQ ---------- */
.lp-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; max-width: 1000px; margin: 0 auto; }
.lp-faq-item { border-bottom: 1px solid #e8e8e8; }
.lp-faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-family: var(--font-primary); font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--color-text-dark); line-height: 1.4; }
.lp-faq-q::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 300; color: var(--color-primary); transition: transform .3s ease; }
.lp-faq-item.open .lp-faq-q::after { transform: translateY(-50%) rotate(45deg); }
.lp-faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.lp-faq-a p { padding: 0 24px 22px 0; font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.7; }

/* ---------- CTA FINAL ---------- */
.lp-cta { position: relative; background: var(--color-primary); padding: var(--section-py) 0; overflow: hidden; text-align: center; }
.lp-cta-deco { position: absolute; bottom: 0; left: 0; right: 0; height: 80px; opacity: 0.22; }
.lp-cta .container { position: relative; z-index: 1; max-width: 760px; }
.lp-cta h2 { font-size: var(--fs-xl); font-weight: var(--fw-light); color: #fff; margin-bottom: 14px; }
.lp-cta p { font-size: var(--fs-base); color: rgba(255,255,255,0.92); line-height: 1.7; margin-bottom: 28px; }
.lp-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- FOOTER ---------- */
.lp-footer { background: var(--color-bg-dark); color: rgba(255,255,255,0.7); padding: 60px 0 26px; }
.lp-foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 36px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.lp-footer .flogo { height: 44px; margin-bottom: 16px; }
.lp-footer .fabout { font-size: var(--fs-sm); color: rgba(255,255,255,0.6); line-height: 1.7; max-width: 320px; }
.lp-footer h4 { color: #fff; font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; }
.lp-footer ul { list-style: none; display: grid; gap: 10px; }
.lp-footer ul a { font-size: var(--fs-sm); color: rgba(255,255,255,0.66); transition: color var(--transition); }
.lp-footer ul a:hover { color: var(--color-primary); }
.lp-foot-contact li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-sm); color: rgba(255,255,255,0.7); }
.lp-foot-contact svg { width: 16px; height: 16px; color: var(--color-primary); flex-shrink: 0; margin-top: 3px; }
.lp-foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 22px; font-size: var(--fs-xs); color: rgba(255,255,255,0.5); }
.lp-foot-social { display: flex; gap: 10px; }
.lp-foot-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; transition: background var(--transition); }
.lp-foot-social a:hover { background: var(--color-primary); }
.lp-foot-social svg { width: 16px; height: 16px; fill: #fff; }

/* ---------- FLUTUANTES ----------
   O botao de WhatsApp nao esta aqui: vem do js/whatsapp-popup.js, que captura
   o lead antes de abrir a conversa. Duas bolinhas no mesmo canto seria erro. */
/* A barra fixa de baixo foi removida: no telefone ela dividia o canto com o
   webchat e com o botao de WhatsApp. O cabecalho e sticky e ja leva o CTA. */

/* ---------- RESPONSIVO ---------- */
@media (max-width: 1024px) {
  :root { --container-px: 40px; }
  .lp-hero-grid { grid-template-columns: 1fr; gap: 32px; min-height: 0; }
  .lp-grid.c4 { grid-template-columns: repeat(2,1fr); }
  .lp-grid.c3 { grid-template-columns: repeat(2,1fr); }
  .lp-steps { grid-template-columns: repeat(2,1fr); }
  .lp-split, .lp-markets-grid { grid-template-columns: 1fr; gap: 36px; }
  .lp-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  :root { --container-px: 20px; --section-py: 56px; --fs-2xl: 34px; --fs-xl: 26px; --fs-lg: 22px; }
  .lp-grid.c3, .lp-grid.c4, .lp-steps, .lp-faq-grid, .lp-market-stats { grid-template-columns: 1fr; }
  .lp-trustbar .container { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .lp-market-stats { grid-template-columns: 1fr 1fr; }
  .lp-fgrid { grid-template-columns: 1fr; }
  .lp-foot-grid { grid-template-columns: 1fr; gap: 28px; }
  /* O CTA do cabecalho FICA no telefone (era a barra fixa que o substituia).
     Compacto para caber ao lado do logo e do seletor de idioma. */
  .lp-nav-actions .btn { font-size: 12px; padding: 10px 14px; }
  .lp-lang a { padding: 6px 10px; }
  .lp-logo img { height: 40px; }
  .lp-nav { gap: 10px; }
  .lp-media { min-height: 300px; }
}

/* Aceite LGPD no formulario da LP */
.lp-check{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.5;color:#666;cursor:pointer;font-weight:400;}
/* width:auto e obrigatorio. O .field input do foundations.css manda
   width:100% e alcanca tambem a caixinha de aceite: ela virava 483px de
   largura e empurrava o texto da LGPD para uma coluna de 70px FORA do
   cartao. Ficou assim no ar na LP de carne suina ate 24/09/2026. */
.lp-check input[type="checkbox"]{width:auto;margin-top:3px;flex-shrink:0;accent-color:#FC5000;}
.lp-check a{color:#FC5000;text-decoration:underline;}

/* ═══════════ EXCLUSIVO DESTA LP ═══════════ */

/* Troca de idioma — o unico link que sai da pagina alem da politica de
   privacidade. Uma LP de conversao nao tem menu, mas obrigar um fabricante
   estrangeiro a ler em portugues (ou o contrario) custa mais do que o link. */
.lp-lang { display: flex; gap: 4px; background: var(--color-bg-light); border-radius: var(--radius-full); padding: 4px; }
.lp-lang a { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-text-muted); padding: 6px 13px; border-radius: var(--radius-full); transition: all var(--transition); }
.lp-lang a[aria-current="true"] { background: var(--color-primary); color: #fff; }
.lp-lang a:not([aria-current="true"]):hover { color: var(--color-text-dark); }

/* Lista de entregas — os 9 itens do folder */
.lp-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lp-checks li { display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid #efefef; border-radius: var(--radius-md); padding: 16px 18px; font-size: var(--fs-sm); line-height: 1.5; transition: transform .25s ease, box-shadow .25s ease; }
.lp-checks li:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.lp-checks svg { width: 20px; height: 20px; color: var(--color-primary); flex-shrink: 0; margin-top: 1px; }

/* Door-to-door — trilho continuo, no molde entregue em wm-processo-ponta-a-ponta
   Sem cartao: o icone fica em cima de uma linha que atravessa as quatro
   colunas, vira na direita e volta pela fileira de baixo. O caminho desenhado
   e o que torna a serpentina legivel — foi o que faltou na versao so com
   setas soltas. */
.lp-flow { position: relative; padding-right: 48px; }
/* As duas fileiras com a MESMA altura (repeat(2, 1fr)): e o que permite
   calcular a altura da curva da volta sem numero magico. */
.lp-flow { --lp-flow-gap: 74px; }
.lp-flow-grade {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  column-gap: 46px; row-gap: var(--lp-flow-gap);
}
.lp-flow-step { position: relative; min-width: 0; }

/* A ordem do HTML e 1..8; quem faz a serpentina e o CSS. Leitor de tela e
   teclado continuam recebendo a sequencia certa. */
.lp-flow-step:nth-child(1) { grid-column: 1; grid-row: 1; }
.lp-flow-step:nth-child(2) { grid-column: 2; grid-row: 1; }
.lp-flow-step:nth-child(3) { grid-column: 3; grid-row: 1; }
.lp-flow-step:nth-child(4) { grid-column: 4; grid-row: 1; }
.lp-flow-step:nth-child(5) { grid-column: 4; grid-row: 2; }
.lp-flow-step:nth-child(6) { grid-column: 3; grid-row: 2; }
.lp-flow-step:nth-child(7) { grid-column: 2; grid-row: 2; }
.lp-flow-step:nth-child(8) { grid-column: 1; grid-row: 2; }

/* o icone fica POR CIMA da linha, com fundo, para a linha nao cruza-lo */
.lp-flow-marca { position: relative; height: 48px; margin-bottom: 18px; }
.lp-flow-ico-box {
  position: absolute; left: 0; top: 0; width: 60px; height: 48px; z-index: 3;
  display: flex; align-items: center; justify-content: flex-start;
  /* a mesma cor da secao: e este retangulo que abre espaco na linha para o
     icone. Com o cinza do bg-light ficava um quadrado visivel no fundo branco. */
  background: #fff;
}
.lp-flow-ico { width: auto; display: block; }
/* Altura por arquivo: igualar a ALTURA deixa o navio e o galpao (bem mais
   largos que altos) parecendo menores. O olho compara AREA, entao
   h = sqrt(A * H/W), a partir do viewBox de cada arquivo. */
.lp-flow-step:nth-child(1) .lp-flow-ico { height: 34px; }  /* navio     286x181 */
.lp-flow-step:nth-child(2) .lp-flow-ico { height: 44px; }  /* guindaste 278x289 */
.lp-flow-step:nth-child(3) .lp-flow-ico { height: 46px; }  /* documento 256x298 */
.lp-flow-step:nth-child(4) .lp-flow-ico { height: 45px; }  /* caminhao  264x296 */
.lp-flow-step:nth-child(5) .lp-flow-ico { height: 35px; }  /* galpao    278x178 */
.lp-flow-step:nth-child(6) .lp-flow-ico { height: 46px; }  /* caixas    209x240 */
.lp-flow-step:nth-child(7) .lp-flow-ico { height: 43px; }  /* aperto    278x278 */
.lp-flow-step:nth-child(8) .lp-flow-ico { height: 44px; }  /* pessoas   287x294 */

/* o trilho entre um icone e o proximo */
.lp-flow-marca::after {
  content: ''; position: absolute; left: 72px; right: -26px; top: 23px;
  height: 1.5px; background: #b4b4b4;
}
/* a seta: a fileira de cima aponta para a direita, a de baixo para a esquerda */
.lp-flow-step.topo:not(.ponta) .lp-flow-marca::before {
  content: ''; position: absolute; right: -32px; top: 19px; z-index: 2;
  border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
  border-left: 7px solid #b4b4b4;
}
.lp-flow-step.baixo:not(.ponta) .lp-flow-marca::before {
  content: ''; position: absolute; left: 63px; top: 19px; z-index: 2;
  border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
  border-right: 7px solid #b4b4b4;
}
/* as duas pontas da direita encostam na curva */
.lp-flow-step.ponta .lp-flow-marca::after { right: -4px; z-index: 2; }

/* A volta: uma caixa vazia com tres bordas e raio na direita. Fica FORA da
   grade (absoluta) — dentro dela empurraria a segunda fileira para baixo. */
.lp-flow-volta {
  position: absolute; right: 0; top: 23px; width: 48px;
  /* do trilho de cima ao de baixo: uma fileira + o vao. Com as fileiras
     iguais, isso e metade da altura total mais metade do vao. */
  /* + a espessura do traco: a borda e desenhada DENTRO da caixa, entao sem
     isso a curva fecha 1,5px acima do trilho da fileira de baixo e fica
     um degrau visivel na emenda. */
  height: calc(50% + var(--lp-flow-gap) / 2 + 1.5px);
  border: 1.5px solid #b4b4b4; border-left: 0;
  border-radius: 0 30px 30px 0; pointer-events: none;
}

.lp-flow-step h3 { font-size: var(--fs-base); font-weight: var(--fw-semibold); line-height: 1.35; margin-bottom: 10px; max-width: 280px; }
.lp-flow-step p { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.6; max-width: 280px; }
.lp-flow-fim h3 { color: var(--color-primary); }

/* Motivos — cartoes sobre o fundo escuro */
.lp-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.lp-why-item { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 24px; }
.lp-why-item h3 { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: #fff; margin-bottom: 8px; }
.lp-why-item p { font-size: var(--fs-sm); color: rgba(255,255,255,0.68); line-height: 1.6; }
.lp-quote { margin-top: 44px; text-align: center; font-size: var(--fs-lg); font-weight: var(--fw-light); color: #fff; line-height: 1.5; }
.lp-quote strong { color: var(--color-primary); font-weight: var(--fw-semibold); }

@media (max-width: 1024px) {
  .lp-checks { grid-template-columns: repeat(2, 1fr); }
  /* Em tela media a serpentina de quatro nao cabe: viram duas colunas em
     ordem normal, e o trilho sai — em duas colunas ele ligaria etapas que nao
     se seguem. */
  .lp-flow { padding-right: 0; }
  .lp-flow-grade { grid-template-columns: repeat(2, 1fr); column-gap: 30px; row-gap: 40px; }
  .lp-flow-step:nth-child(n) { grid-column: auto; grid-row: auto; }
  .lp-flow-marca::after, .lp-flow-marca::before, .lp-flow-volta { display: none; }
  .lp-why { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .lp-checks { grid-template-columns: 1fr; }
  /* No telefone vira lista com o trilho na vertical: e ele que mostra que as
     etapas sao uma sequencia, e nao oito itens soltos. */
  .lp-flow-grade { display: block; }
  .lp-flow-step { position: relative; padding: 0 0 30px 62px; }
  .lp-flow-marca { position: absolute; left: 0; top: 0; width: 48px; height: 100%; margin: 0; }
  .lp-flow-ico-box { width: 46px; height: 46px; }
  .lp-flow-ico { height: 38px !important; }
  .lp-flow-marca::after {
    display: block; content: ''; left: 21px; right: auto; top: 50px;
    width: 1.5px; height: calc(100% - 34px); background: #b4b4b4;
  }
  .lp-flow-step:last-child .lp-flow-marca::after { display: none; }
  .lp-flow-marca::before, .lp-flow-volta { display: none; }
  .lp-flow-step h3, .lp-flow-step p { max-width: none; }
  .lp-why { grid-template-columns: 1fr; }
  .lp-quote { font-size: var(--fs-base); }
}


/* ---------- FECHAMENTO: CTA + FORMULÁRIO ----------
   O formulario deixou o hero e virou a ultima secao. O CTA laranja separado
   saiu junto: com o formulario logo abaixo, ele so repetia o pedido. */
.lp-close { position: relative; background: var(--color-bg-dark); padding: var(--section-py) 0; overflow: hidden; }
.lp-close::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 90% at 12% 15%, rgba(252,80,0,0.20) 0%, rgba(252,80,0,0) 62%);
}
.lp-close-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.lp-close-copy .eyebrow { margin-bottom: 14px; }
.lp-close-copy h2 { font-size: var(--fs-xl); font-weight: var(--fw-light); color: #fff; margin-bottom: 16px; }
.lp-close-copy p { font-size: var(--fs-base); color: rgba(255,255,255,0.72); line-height: 1.75; }
.lp-close-extra { margin-top: 26px; }

@media (max-width: 1024px) {
  .lp-close-grid { grid-template-columns: 1fr; gap: 36px; }
}


/* ---------- BARRA DE CONTATO FIXA (só no telefone) ----------
   Existe fora do @media para ficar escondida em tudo que nao for telefone. */
.lp-barra { display: none; }

@media (max-width: 768px) {
  .lp-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 995;
    display: flex; align-items: center; gap: 10px;
    /* 96px a esquerda: e onde mora o botao de cookies do AdOpt, que tem
       z-index 2147483647 — nao ha como passar por cima dele, entao a barra
       abre espaco em vez de brigar. */
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)) 96px;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid #ececec;
    box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.12);
    /* visibility junto com o transform: so deslocada, a barra continuaria
       recebendo foco por teclado mesmo fora da tela */
    visibility: hidden; transform: translateY(112%);
    transition: transform .34s ease, visibility .34s;
  }
  .lp-barra.mostra { visibility: visible; transform: translateY(0); }
  .lp-barra .btn { flex: 1; padding: 14px 8px; font-size: 14px; }
  .lp-barra-wa {
    width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%;
    background: #25D366; display: flex; align-items: center; justify-content: center;
  }
  .lp-barra-wa svg { width: 27px; height: 27px; fill: #fff; }

  /* O botao redondo do whatsapp-popup.js sai: a barra ja leva o WhatsApp, e
     o proprio popup intercepta links wa.me, entao a captura antes da conversa
     continua acontecendo. */
  .wm-wa-fab { display: none !important; }

  /* O webchat sai NESTA LP. E um <div> sem classe que embrulha o iframe do
     Botmaker; o :has() casa pelo iframe, que tem name estavel.
     ATENCAO: isto so ESCONDE — o GTM continua carregando o widget. O corte de
     verdade e uma excecao de acionador no GTM para estas duas URLs. */
  body > div:has(> iframe[name="Botmaker"]) { display: none !important; }

  /* espaco para a barra nao cobrir o fim do rodape */
  .lp-footer { padding-bottom: 104px; }
}