/* ============================================================
   Página de vendas do Tô com Fome.

   Quem abre isto é dono de lanchonete, quase sempre no celular,
   entre um pedido e outro. Texto grande, uma ideia por bloco e
   o botão de WhatsApp nunca muito longe do dedo.
   ============================================================ */

:root{
  --bg:       #ffffff;
  --papel:    #ffffff;
  --tinta:    #12151a;
  --tinta-2:  #39414d;
  --apagado:  #6b7480;
  --linha:    #e4e7eb;
  --linha-2:  #cfd4da;
  --marca:    #e8590c;
  --marca-esc:#c9490a;
  --marca-fraca:rgba(232,89,12,.16);
  --verde:    #16a34a;
  --escuro:   #12151a;
  --raio:     13px;
  --raio-g:   18px;
}

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.6; -webkit-text-size-adjust:100%;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }

.cont{ width:100%; max-width:1080px; margin:0 auto; padding:0 20px; }
.cont.estreito{ max-width:760px; }

h1, h2, h3{ letter-spacing:-.025em; line-height:1.18; }
h2{ font-size:clamp(26px, 4.2vw, 36px); margin:0 0 10px; }
.sub-secao{ color:var(--apagado); font-size:18px; margin:0 0 30px; max-width:60ch; }

/* ---------------------------------------------------------- topo */
.topo{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--linha);
}
.topo-linha{ display:flex; align-items:center; justify-content:space-between; height:62px; gap:16px; }
.marca{ font-weight:800; font-size:18.5px; letter-spacing:-.03em; display:flex; align-items:center; gap:8px; }
.marca-icone{ font-size:21px; }
.topo nav{ display:flex; align-items:center; gap:8px; }
.link-topo{ color:var(--apagado); font-size:15.5px; font-weight:600; padding:8px 12px; }
.link-topo:hover{ color:var(--tinta); }

/* ---------------------------------------------------------- botões */
.botao{
  display:inline-flex; align-items:center; justify-content:center;
  font:inherit; font-weight:700; font-size:16px; cursor:pointer;
  border:1px solid transparent; padding:12px 22px; border-radius:var(--raio);
  background:var(--marca); color:#fff; white-space:nowrap;
  transition:background .15s, transform .1s, border-color .15s;
}
.botao:hover{ background:var(--marca-esc); }
.botao:active{ transform:translateY(1px); }
.botao.grande{ padding:16px 30px; font-size:17.5px; }
.botao.cheio{ width:100%; }
.botao.fantasma{
  background:transparent; color:var(--tinta); border-color:var(--linha-2); padding:9px 17px; font-size:15.5px;
}
.botao.fantasma:hover{ background:#f4f5f7; }
.botao.vazado{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.32);
}
.botao.vazado:hover{ background:rgba(255,255,255,.1); }

/* ---------------------------------------------------------- hero */
.hero{
  background:
    radial-gradient(900px 420px at 12% -8%, rgba(232,89,12,.30), transparent 62%),
    linear-gradient(160deg, #1b1f26 0%, #0e1116 100%);
  color:#fff; padding:74px 0 78px;
}
.etiqueta{
  display:inline-block; margin:0 0 18px; padding:6px 13px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
  font-size:13.5px; font-weight:700; letter-spacing:.02em; color:#e9ebee;
}
.hero h1{
  margin:0 0 18px; font-size:clamp(33px, 6.2vw, 55px); font-weight:800; max-width:16ch;
}
.hero h1 em{ font-style:normal; color:#ffa25f; }
.chamada{ margin:0 0 30px; font-size:clamp(17.5px, 2.3vw, 20.5px); color:#c8ced6; max-width:56ch; }
.chamada b{ color:#fff; }
.acoes{ display:flex; flex-wrap:wrap; gap:12px; }
.mio{ margin:20px 0 0; font-size:14.5px; color:#98a1ac; }
.mio.esquerda{ color:var(--apagado); }

/* ---------------------------------------------------------- faixas */
.faixa{ padding:66px 0; }
.faixa.clara{ background:#f6f7f9; border-block:1px solid var(--linha); }
.grade{ display:grid; gap:20px; margin-top:34px; }
.grade.tres{ grid-template-columns:repeat(auto-fit, minmax(272px, 1fr)); }

/* dores */
.dor{ padding:4px 0; }
.numero{
  display:block; font-size:13px; font-weight:800; letter-spacing:.12em;
  color:var(--marca); margin-bottom:10px;
}
.dor b{ display:block; font-size:19.5px; letter-spacing:-.02em; margin-bottom:8px; }
.dor p{ margin:0; color:var(--tinta-2); font-size:16.5px; }

/* cartões de produto */
.cartao-produto{
  position:relative; background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--raio-g); padding:26px 24px 24px;
}
.cartao-produto.destaque{
  border-color:var(--marca); box-shadow:0 10px 34px rgba(232,89,12,.13);
}
.selo-cartao{
  position:absolute; top:-11px; left:24px; padding:4px 11px; border-radius:999px;
  background:var(--marca); color:#fff; font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em;
}
.icone-produto{ font-size:29px; line-height:1; margin-bottom:12px; }
.cartao-produto h3{ margin:0 0 9px; font-size:21px; }
.cartao-produto p{ margin:0 0 15px; color:var(--tinta-2); font-size:16px; }
.cartao-produto ul{ margin:0; padding:0; list-style:none; border-top:1px solid var(--linha); }
.cartao-produto li{
  padding:9px 0 9px 25px; font-size:15.5px; border-bottom:1px solid var(--linha); position:relative;
}
.cartao-produto li:last-child{ border-bottom:0; padding-bottom:0; }
.cartao-produto li::before{
  content:'✓'; position:absolute; left:0; color:var(--verde); font-weight:800;
}

/* bloco de texto grande */
.texto-grande{ font-size:19px; color:var(--tinta-2); margin:0 0 18px; }
.assinatura{
  margin:26px 0 0; padding-left:18px; border-left:3px solid var(--marca);
  font-size:17px; color:var(--tinta); font-weight:600;
}

/* ---------------------------------------------------------- comparação */
.rolagem{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:26px; }
.comparacao{
  width:100%; min-width:560px; border-collapse:collapse;
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio-g);
  overflow:hidden;
}
.comparacao th, .comparacao td{
  padding:13px 15px; text-align:left; border-bottom:1px solid var(--linha); font-size:15.5px;
}
.comparacao thead th{
  font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--apagado);
  background:#fbfbfc; font-weight:800;
}
.comparacao td.n, .comparacao td.s{ text-align:center; width:150px; }
.comparacao td.n{ color:var(--apagado); }
.comparacao td.s{ color:var(--verde); font-weight:700; }
.comparacao .nossa{ background:var(--marca-fraca); }
.comparacao thead th.nossa{ color:var(--marca-esc); }
.comparacao tr:last-child td{ border-bottom:0; }

/* ---------------------------------------------------------- preço */
.faixa.preco{ background:#f6f7f9; border-block:1px solid var(--linha); }
.caixa-preco{
  background:var(--papel); border:1px solid var(--linha); border-radius:22px;
  padding:34px 30px; margin-top:28px; box-shadow:0 14px 40px rgba(18,21,26,.07);
}
.valor{ display:flex; align-items:baseline; gap:5px; }
.moeda{ font-size:24px; font-weight:700; color:var(--apagado); }
.numero-preco{ font-size:clamp(50px, 10vw, 72px); font-weight:800; letter-spacing:-.045em; line-height:1; }
.por{ font-size:20px; color:var(--apagado); font-weight:600; }
.por-loja{ margin:8px 0 22px; color:var(--apagado); font-size:15px; }
.lista-preco{ margin:0 0 26px; padding:0; list-style:none; }
.lista-preco li{ padding:10px 0 10px 27px; position:relative; border-top:1px solid var(--linha); font-size:16.5px; }
.lista-preco li::before{ content:'✓'; position:absolute; left:0; color:var(--verde); font-weight:800; }

/* ---------------------------------------------------------- dúvidas */
details{
  border-bottom:1px solid var(--linha); padding:4px 0;
}
details summary{
  cursor:pointer; list-style:none; padding:17px 30px 17px 0; position:relative;
  font-size:17.5px; font-weight:700; letter-spacing:-.01em;
}
details summary::-webkit-details-marker{ display:none; }
details summary::after{
  content:'+'; position:absolute; right:4px; top:14px;
  font-size:24px; font-weight:400; color:var(--marca); line-height:1;
}
details[open] summary::after{ content:'−'; }
details p{ margin:0 0 18px; color:var(--tinta-2); max-width:62ch; }

/* ---------------------------------------------------------- final */
.final{
  background:linear-gradient(160deg, #1b1f26 0%, #0e1116 100%);
  color:#fff; padding:72px 0; text-align:center;
}
.final h2{ margin-bottom:14px; }
.final p{ margin:0 auto 28px; color:#c8ced6; max-width:52ch; font-size:18px; }

.rodape{ padding:26px 0 34px; font-size:14.5px; color:var(--apagado); }
.rodape .cont{ display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; }
.rodape a{ color:var(--tinta-2); font-weight:600; }
.rodape a:hover{ color:var(--marca); }

@media(max-width:600px){
  .faixa{ padding:50px 0; }
  .hero{ padding:54px 0 58px; }
  .acoes .botao{ width:100%; }
  .caixa-preco{ padding:26px 20px; }
  .link-topo{ display:none; }
}