/* Funil de aquisicao | Manual Anti-Sabotagem das Vendas.
   Carregado depois de style.css. A camada "funil" e declarada por ultimo,
   entao vence as camadas do site institucional sem precisar de !important. */
@layer funil {

  /* ---------- cabecalho enxuto ----------
     Pagina de captura nao tem menu: todo link de saida custa lead. */
  .lp-header {
    position: relative;
    z-index: 50;
    color: var(--white);
    background: var(--navy-black);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
  }
  .lp-header .nav { min-height: 66px; }
  .lp-back {
    color: var(--on-dark-faint);
    font: 600 .7rem/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: color 160ms ease;
  }
  .lp-back:hover { color: var(--bronze-light); }

  /* ---------- hero de captura ---------- */
  .lp-hero {
    position: relative;
    overflow: hidden;
    color: var(--white);
    background: var(--navy-black);
    padding-block: clamp(46px, 6vw, 84px);
  }
  .lp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 26% 18%, rgba(169, 121, 59, .17), transparent 52%);
    pointer-events: none;
  }
  .lp-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(40px, 5vw, 64px);
    align-items: start;
  }
  .lp-hero .eyebrow { color: var(--bronze-light); }
  .lp-hero h1 {
    margin-bottom: 20px;
    color: var(--white);
    font-size: clamp(2.35rem, 1.7rem + 3.1vw, 4rem);
    letter-spacing: -.042em;
  }
  .lp-hero .lead {
    max-width: 560px;
    margin-bottom: 32px;
    color: var(--on-dark-body);
    font-size: clamp(1.02rem, .93rem + .4vw, 1.18rem);
  }

  /* lista de entregaveis do hero */
  .lp-checks { display: grid; gap: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .13); }
  .lp-checks li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 12px;
    align-items: baseline;
    padding-block: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
    color: #c7d0da;
    font-size: .93rem;
  }
  .lp-checks li::before { content: "+"; color: var(--bronze-light); font: 700 .95rem/1.5 var(--mono); }

  .lp-hero-note {
    margin-top: 26px;
    color: var(--on-dark-faint);
    font: 500 .71rem/1.6 var(--mono);
    letter-spacing: .07em;
    text-transform: uppercase;
  }

  /* ---------- cartao de oferta: capa + formulario ---------- */
  .offer-card {
    border: 1px solid rgba(255, 255, 255, .14);
    background: var(--navy-deep);
  }
  /* A arte do ebook vem com fundo branco. O multiply sobre a placa clara
     dissolve esse fundo e preserva a sombra original do mockup. */
  .offer-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(28px, 4vw, 38px) 26px;
    background: var(--gray-warm);
    border-bottom: 1px solid var(--divider-warm);
  }
  /* height:auto e obrigatorio: sem ele o atributo height do <img> vira
     presentational hint e a arte estica na vertical. */
  .offer-plate img {
    width: min(100%, 300px);
    height: auto;
    border: 1px solid rgba(7, 21, 39, .16);
    box-shadow: 0 18px 34px -14px rgba(7, 21, 39, .42);
  }
  .offer-body { padding: clamp(22px, 3.4vw, 32px); }
  .offer-head { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .13); }
  .offer-head p:first-child {
    margin-bottom: 7px;
    color: var(--bronze-light);
    font: 700 .69rem/1.4 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .offer-head h2 { color: var(--white); font-size: clamp(1.28rem, 1.1rem + .7vw, 1.6rem); }
  .lead-form { display: grid; gap: 16px; }
  .lead-form .btn { width: 100%; margin-top: 4px; }
  .lead-form .btn:disabled { opacity: .55; cursor: wait; transform: none; }
  .form-fine { color: var(--on-dark-faint); font-size: .74rem; line-height: 1.55; }
  .form-fine a { color: var(--on-dark-soft); border-bottom: 1px solid rgba(201, 164, 100, .5); }
  .field .optional { color: var(--on-dark-faint); font-weight: 500; text-transform: none; letter-spacing: 0; }

  /* ---------- amostra do conteudo ---------- */
  .sample-section { padding-block: var(--section-space); background: var(--gray-warm); }
  .swap-list { display: grid; gap: 0; border-top: 1px solid var(--divider-warm); }
  .swap {
    display: grid;
    gap: 20px;
    padding-block: clamp(26px, 3.4vw, 36px);
    border-bottom: 1px solid var(--divider-warm);
  }
  .swap-num { color: var(--bronze-dark); font: 700 .71rem/1.4 var(--mono); letter-spacing: .07em; }
  .swap-pair { display: grid; gap: 18px; }
  .swap-col > span {
    display: block;
    margin-bottom: 9px;
    font: 700 .67rem/1.4 var(--mono);
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  .swap-col.bad > span { color: #9a6060; }
  .swap-col.good > span { color: var(--bronze-dark); }
  .swap-col q {
    display: block;
    padding-left: 15px;
    border-left: 2px solid var(--gray-line);
    color: var(--navy-black);
    font: 500 1.02rem/1.5 var(--serif);
    quotes: "\201C" "\201D";
  }
  .swap-col.good q { border-left-color: var(--bronze); }
  .swap-why { color: var(--ink-soft); font-size: .9rem; }
  .swap-why b { color: var(--navy-mid); font-weight: 700; }

  /* ---------- o que tem dentro ---------- */
  .inside-section { padding-block: var(--section-space); background: var(--white); }
  .inside-grid { display: grid; gap: 1px; background: var(--gray-line); border: 1px solid var(--gray-line); }
  .inside-card { padding: clamp(26px, 3.6vw, 36px); background: var(--white); }
  .inside-card span {
    display: block;
    margin-bottom: 14px;
    color: var(--bronze-dark);
    font: 700 .71rem/1.4 var(--mono);
    letter-spacing: .07em;
  }
  .inside-card h3 { margin-bottom: 9px; font-size: 1.15rem; }
  .inside-card p { font-size: .92rem; }

  /* ---------- chamada final ---------- */
  .final-cta { padding-block: var(--section-space); color: var(--white); background: var(--navy-black); }
  .final-cta .eyebrow { color: var(--bronze-light); }
  .final-cta h2 { max-width: 780px; margin-bottom: 18px; color: var(--white); }
  .final-cta p { max-width: 560px; margin-bottom: 32px; color: var(--on-dark-body); }

  /* ================= PAGINA DE ENTREGA ================= */

  /* Download discreto no topo, como pedido: presente e resolvido,
     sem competir com a oferta da comunidade no meio da pagina. */
  .delivery-top { padding-block: clamp(44px, 6vw, 76px); color: var(--white); background: var(--navy-black); }
  .delivery-top .eyebrow { color: var(--bronze-light); }
  .delivery-top h1 {
    max-width: 700px;
    margin-bottom: 16px;
    color: var(--white);
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(1.95rem, 1.5rem + 2.1vw, 3rem);
    line-height: 1.08;
    letter-spacing: -.035em;
    text-wrap: balance;
  }
  .delivery-top > .wrap > p { max-width: 560px; color: var(--on-dark-body); }
  .delivery-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .13);
  }
  .download-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--white);
    border-bottom: 1px solid var(--bronze);
    font-size: .93rem;
    font-weight: 600;
    transition: color 160ms ease, border-color 160ms ease;
  }
  .download-link:hover { color: var(--bronze-light); border-bottom-color: var(--bronze-light); }
  .download-link span { color: var(--bronze-light); }
  .delivery-actions > p { color: var(--on-dark-faint); font-size: .8rem; }

  /* ---------- primeiros passos ---------- */
  .steps-section { padding-block: var(--section-space); background: var(--white); }
  .steps-list { display: grid; gap: 0; padding: 0; list-style: none; border-top: 1px solid var(--gray-line); }
  .steps-list li {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    padding-block: 26px;
    border-bottom: 1px solid var(--gray-line);
  }
  .steps-list b { color: var(--bronze-dark); font: 700 .73rem/1.7 var(--mono); }
  .steps-list h3 { margin-bottom: 7px; font-size: 1.13rem; }
  .steps-list p { max-width: 620px; font-size: .92rem; }

  /* ---------- comunidade ---------- */
  .community-section { position: relative; overflow: hidden; padding-block: var(--section-space); color: var(--white); background: var(--navy-mid); }
  .community-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 78% 30%, rgba(169, 121, 59, .2), transparent 55%);
    pointer-events: none;
  }
  .community-grid { position: relative; z-index: 1; display: grid; gap: clamp(36px, 4.5vw, 56px); align-items: start; }
  .community-section .eyebrow { color: var(--bronze-light); }
  .community-section h2 { color: var(--white); margin-bottom: 18px; }
  .community-section p { color: var(--on-dark-body); }
  .community-card { padding: clamp(26px, 3.6vw, 38px); border: 1px solid rgba(201, 164, 100, .5); background: rgba(7, 21, 39, .42); }
  .community-card ul { display: grid; gap: 14px; margin-bottom: 30px; padding: 0; list-style: none; }
  .community-card li { position: relative; padding-left: 25px; color: #c6cfda; font-size: .93rem; }
  .community-card li::before { content: "+"; position: absolute; left: 0; color: var(--bronze-light); font-weight: 700; }
  .community-card .btn { width: 100%; }
  .community-card > p:last-child { margin-top: 16px; color: var(--on-dark-faint); font-size: .77rem; text-align: center; }

  /* ---------- responsivo ---------- */
  @media (min-width: 700px) {
    .swap-pair { grid-template-columns: 1fr 1fr; gap: 34px; }
    .inside-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 940px) {
    .lp-hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(400px, .94fr); align-items: start; }
    .swap { grid-template-columns: 74px 1fr; gap: 26px; }
    .community-grid { grid-template-columns: 1.04fr .96fr; align-items: center; }
  }

  @media (max-width: 639px) {
    .offer-plate img { width: min(100%, 230px); }
    .swap-col q { font-size: .98rem; }
    .steps-list li { grid-template-columns: 40px 1fr; gap: 12px; }
    .final-cta .btn, .delivery-actions .download-link { width: 100%; }
  }
}