/* [L5] Landing (/ e /contato). Usa os tokens e componentes de base.css.
 * O topo é sempre "lousa" (grafite com giz), nos dois temas; o resto segue o tema do sistema. */

.l-largura { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--espaco-4); }
.l-largura--texto { max-width: 46rem; }
@media (min-width: 48rem) { .l-largura { padding-inline: var(--espaco-6); } }

html { scroll-behavior: smooth; }
:target { scroll-margin-top: var(--espaco-4); }

/* Topo (lousa) ------------------------------------------------------------------------------ */
.l-topo-fundo {
  --lousa: #1c2226;
  background:
    radial-gradient(60rem 30rem at 85% 10%, rgb(127 209 174 / 0.09), transparent 60%),
    radial-gradient(40rem 26rem at 0% 100%, rgb(243 166 182 / 0.07), transparent 60%),
    var(--lousa);
  color: var(--giz);
}

.l-cabecalho__linha {
  display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-4);
  min-height: 4rem;
}
.l-cabecalho__marca { color: var(--giz); font-size: 1.5rem; }
.l-cabecalho__nav { display: none; gap: var(--espaco-1); }
.l-cabecalho__nav a, .l-cabecalho__whatsapp {
  display: inline-flex; align-items: center; gap: var(--espaco-2);
  min-height: var(--toque); padding: 0 var(--espaco-3); border-radius: var(--raio-pilula);
  color: var(--giz); text-decoration: none; font-weight: 600;
}
.l-cabecalho__nav a:hover { background: rgb(238 240 234 / 0.1); }
.l-cabecalho__whatsapp { border: 1px solid rgb(238 240 234 / 0.45); font-size: var(--texto-sm); }
.l-cabecalho__whatsapp:hover { background: rgb(238 240 234 / 0.1); }
.l-cabecalho__whatsapp .icone { width: 1.25rem; height: 1.25rem; }
.l-topo-fundo :focus-visible { outline-color: var(--giz-verde); }
/* No celular o WhatsApp do topo já está logo abaixo dos botões: o do cabeçalho some para não concorrer. */
.l-cabecalho__whatsapp { display: none; }
@media (min-width: 60rem) { .l-cabecalho__nav, .l-cabecalho__whatsapp { display: inline-flex; } }

.l-topo { padding: var(--espaco-3) 0 var(--espaco-7); }
.l-topo__grade {
  display: grid; gap: var(--espaco-4);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "titulo" "cena" "sub" "acoes";
}
.l-topo__titulo {
  grid-area: titulo; margin: 0;
  font-size: clamp(2rem, 1.25rem + 3.2vw, 3.75rem); line-height: 1.06; letter-spacing: -0.015em;
}
.l-topo__linha { display: block; }
.l-topo__linha + .l-topo__linha { color: var(--giz-verde); margin-top: 0.12em; }
.l-topo__linha .traco-giz { color: var(--giz); }
.l-topo__cena { grid-area: cena; }
.l-topo__sub { grid-area: sub; margin: 0; font-size: var(--texto-lg); color: #c9d0d4; max-width: 34rem; }
@media (max-width: 59.99rem) { .l-topo__sub { font-size: var(--texto-md); line-height: 1.45; } }
.l-topo__acoes { grid-area: acoes; display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: center; }
.l-topo__garantias { width: 100%; margin: 0; font-size: var(--texto-sm); color: #b4bdc2; font-weight: 600; }

.l-botao-grande { min-height: 3.25rem; padding-inline: var(--espaco-5); font-size: var(--texto-lg); }
.l-botao-grande .icone { width: 1.25rem; height: 1.25rem; }
.l-topo__acoes .botao { flex: 1 1 16rem; white-space: normal; text-align: center; line-height: 1.2; padding-block: var(--espaco-2); }
/* WhatsApp no topo: ação secundária (link), para não competir com o botão principal. */
.l-topo__whatsapp {
  display: inline-flex; align-items: center; gap: var(--espaco-2);
  min-height: var(--toque); padding-inline: var(--espaco-2);
  color: var(--giz); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em;
  text-decoration-color: rgb(238 240 234 / 0.45);
}
.l-topo__whatsapp:hover { text-decoration-color: currentColor; }
.l-topo__whatsapp .icone { width: 1.25rem; height: 1.25rem; }

.cena { width: 100%; max-width: 34rem; margin-inline: auto; overflow: hidden; }
.cena__t-titulo { font-family: var(--fonte-titulo); font-weight: 800; }
.cena__t-texto { font-family: var(--fonte-texto); }

@media (min-width: 60rem) {
  .l-topo { padding: var(--espaco-5) 0 var(--espaco-7); }
  .l-topo__grade {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: "titulo cena" "sub cena" "acoes cena";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--espaco-7); row-gap: var(--espaco-5);
    align-items: start;
  }
  .l-topo__titulo { align-self: end; padding-top: var(--espaco-6); }
  .l-topo__acoes .botao { flex: 0 1 auto; }
  .l-topo__cena { align-self: center; }
  .cena { max-width: 33rem; }
}

/* Seções ------------------------------------------------------------------------------------ */
.l-secao { padding: var(--espaco-7) 0; }
@media (min-width: 48rem) { .l-secao { padding: 5rem 0; } }
.l-secao--tom { background: var(--cor-superficie-2); }
.l-secao h2 { font-size: var(--texto-2xl); }
.l-secao__intro { font-size: var(--texto-lg); color: var(--cor-texto-suave); max-width: 40rem; }

/* Como funciona */
.l-passos {
  list-style: none; margin: var(--espaco-6) 0 0; padding: 0;
  display: grid; gap: var(--espaco-5); counter-reset: passo;
}
@media (min-width: 48rem) { .l-passos { grid-template-columns: repeat(3, 1fr); } }
.l-passo {
  position: relative; padding: var(--espaco-5); padding-top: var(--espaco-6);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio);
}
.l-passo h3 { font-size: var(--texto-xl); }
.l-passo p { margin: 0; color: var(--cor-texto-suave); }
.l-passo__numero {
  position: absolute; top: calc(-1 * var(--espaco-4)); left: var(--espaco-5);
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--grafite); color: var(--giz-verde);
  font: 800 1.375rem/1 var(--fonte-titulo);
}
.l-passo__icone {
  position: absolute; top: var(--espaco-5); right: var(--espaco-5);
  color: var(--cor-texto-suave);
}
.l-passo__icone .icone { width: 1.75rem; height: 1.75rem; }

/* Recursos */
.l-recursos {
  list-style: none; margin: var(--espaco-6) 0 0; padding: 0;
  display: grid; gap: var(--espaco-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.l-recurso {
  display: flex; gap: var(--espaco-4); align-items: flex-start;
  padding: var(--espaco-5); background: var(--cor-superficie);
  border: 1px solid var(--cor-borda); border-radius: var(--raio);
}
.l-recurso h3 { margin-bottom: var(--espaco-2); }
.l-recurso p { margin: 0; color: var(--cor-texto-suave); }
.l-recurso__icone {
  flex-shrink: 0; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--giz-verde-claro); color: var(--grafite);
}
.l-recurso:nth-child(2) .l-recurso__icone,
.l-recurso:nth-child(7) .l-recurso__icone { background: var(--giz-rosa-claro); }

/* Exemplo vivo */
.l-exemplo__grade { display: grid; gap: var(--espaco-6); align-items: center; }
@media (min-width: 52rem) { .l-exemplo__grade { grid-template-columns: 1fr minmax(0, 22rem); gap: var(--espaco-7); } }
.l-exemplo__qr {
  display: flex; align-items: center; gap: var(--espaco-4);
  margin: var(--espaco-6) 0 0; padding: var(--espaco-4);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio);
  max-width: 28rem;
}
.l-exemplo__qr svg { flex-shrink: 0; width: 6.5rem; height: 6.5rem; border-radius: var(--raio-sm); }
.l-exemplo__qr figcaption { font-weight: 700; overflow-wrap: anywhere; }
.l-exemplo__qr figcaption .texto-suave { font-weight: 400; font-size: var(--texto-sm); }

.l-moldura {
  width: min(100%, 20rem); margin-inline: auto;
  padding: 0.75rem; border-radius: 2.5rem;
  background: #0e1316; box-shadow: 0 1px 0 1px #46525a inset, 0 24px 48px -12px rgb(28 34 38 / 0.35);
}
.l-moldura__tela {
  position: relative; height: 37rem; overflow: hidden;
  border-radius: 1.9rem; background: #fbf8f2; color: #1c2226;
  font-size: 0.875rem; line-height: 1.35;
}
.l-moldura__tela::after { /* esmaece o fim da tela */
  content: ""; position: absolute; inset: auto 0 0; height: 3rem;
  background: linear-gradient(transparent, #fbf8f2);
}
.l-mock__capa {
  height: 6rem; position: relative;
  background: linear-gradient(135deg, #f7c99b, #f3a6b6);
}
.l-mock__idioma {
  position: absolute; top: 0.75rem; right: 0.75rem; padding: 0.125rem 0.625rem;
  background: rgb(255 255 255 / 0.85); border-radius: var(--raio-pilula); font-size: 0.75rem;
}
.l-mock__cabeca { display: grid; padding: 0 1rem; margin-top: -1.5rem; position: relative; }
.l-mock__logo {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: #1c2226; color: #f7c99b; border: 3px solid #fbf8f2;
  font: 800 1.375rem/1 var(--fonte-titulo);
}
.l-mock__nome { font: 800 1.5rem/1.2 var(--fonte-titulo); margin-top: 0.25rem; }
.l-mock__status { font-size: 0.8125rem; font-weight: 700; color: #2c6e52; }
.l-mock__status::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.375rem; border-radius: 50%; background: #2f9e6e; }
.l-mock__abas {
  display: flex; gap: 1rem; padding: 0.75rem 1rem 0; margin-top: 0.5rem;
  border-bottom: 1px solid #e7e1d6; color: #5d666c; white-space: nowrap; overflow: hidden;
}
.l-mock__abas span { padding-bottom: 0.5rem; }
.l-mock__abas .ativa { color: #1c2226; font-weight: 700; box-shadow: inset 0 -3px 0 #1c2226; }
.l-mock__secao { padding: 1rem 1rem 0.25rem; font: 800 1.125rem/1.2 var(--fonte-titulo); }
.l-mock__prato { display: flex; gap: 0.75rem; padding: 0.625rem 1rem; align-items: flex-start; }
.l-mock__prato + .l-mock__prato { border-top: 1px solid #efe9df; }
.l-mock__info { display: grid; gap: 0.125rem; min-width: 0; }
.l-mock__prato-nome { font-weight: 700; }
.l-mock__desc { font-size: 0.8125rem; color: #5d666c; }
.l-mock__preco { font-weight: 700; font-variant-numeric: tabular-nums; display: flex; gap: 0.5rem; align-items: center; }
.l-mock__info .selo { justify-self: start; }
.l-mock__prato--esgotado .l-mock__prato-nome, .l-mock__prato--esgotado .l-mock__desc { color: #5d666c; }
.l-mock__prato--esgotado .l-mock__foto { opacity: 0.5; }
.l-mock__foto {
  flex-shrink: 0; width: 3.5rem; height: 3.5rem; border-radius: 0.625rem;
  background: #e9d8c2;
}
.l-mock__foto--espresso { background: radial-gradient(circle, #5b3a22 0 32%, #fff 33% 46%, #e7e1d6 47%); }
.l-mock__foto--cappuccino { background: radial-gradient(circle, #ebdcc6 0 26%, #b88a5e 27% 40%, #fff 41% 50%, #d9cbb5 51%); }
.l-mock__foto--pao {
  background:
    radial-gradient(circle at 34% 38%, #e9b949 0 15%, transparent 16%),
    radial-gradient(circle at 64% 40%, #e2ac3b 0 15%, transparent 16%),
    radial-gradient(circle at 48% 66%, #edc25e 0 15%, transparent 16%),
    #f1ebe0;
}
.l-mock__foto--bolo { background: linear-gradient(160deg, #f3a6b6 0 30%, #e9b949 31% 75%, #c98a4b 76%); }
.l-mock__foto--torta { background: linear-gradient(180deg, #fff6e0 0 35%, #f2dd6e 36% 72%, #d9a35e 73%); }

/* Para quem é */
.l-tipos {
  list-style: none; margin: var(--espaco-5) 0 0; padding: 0;
  display: grid; gap: var(--espaco-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
}
.l-tipo {
  display: flex; align-items: center; gap: var(--espaco-3);
  min-height: 3.5rem; padding: var(--espaco-3) var(--espaco-4);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-pilula);
  font-weight: 700;
}
.l-tipo .icone { flex-shrink: 0; width: 1.5rem; height: 1.5rem; color: var(--cor-texto-suave); }

/* Perguntas */
.l-perguntas { margin-top: var(--espaco-5); border-top: 1px solid var(--cor-borda); }
.l-pergunta { border-bottom: 1px solid var(--cor-borda); }
.l-pergunta summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-4);
  min-height: var(--toque); padding: var(--espaco-4) 0;
  font-weight: 700; font-size: var(--texto-lg); cursor: pointer; list-style: none;
}
.l-pergunta summary::-webkit-details-marker { display: none; }
.l-pergunta summary::after {
  content: "+"; flex-shrink: 0; display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--cor-superficie-2); font: 700 1.25rem/1 var(--fonte-texto);
}
.l-pergunta[open] summary::after { content: "–"; background: var(--giz-verde); color: var(--grafite); }
.l-pergunta p { padding-bottom: var(--espaco-4); margin: 0; color: var(--cor-texto-suave); max-width: 40rem; }

/* Contato */
.l-contato { background: var(--grafite); color: var(--giz); }
.l-contato .l-secao__intro { color: #c9d0d4; }
.l-contato :focus-visible { outline-color: var(--giz-verde); }
.l-contato__grade { display: grid; gap: var(--espaco-6); align-items: start; }
@media (min-width: 52rem) { .l-contato__grade { grid-template-columns: 1fr minmax(0, 26rem); gap: var(--espaco-7); } }
.l-contato__whatsapp {
  margin-top: var(--espaco-5); padding: var(--espaco-5);
  border: 1px dashed rgb(238 240 234 / 0.4); border-radius: var(--raio);
}
.l-contato__whatsapp p { color: #c9d0d4; }
.l-contato__whatsapp .icone { width: 1.25rem; height: 1.25rem; }
.l-contato__cartao { color: var(--cor-texto); }
.l-contato__cartao :focus-visible { outline-color: var(--cor-foco); }
.l-form { margin-top: var(--espaco-4); }
.l-form__erros { margin: var(--espaco-1) 0 0; padding-left: 1.25rem; }
.l-form__armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.l-pagina-contato .l-contato { min-height: calc(100dvh - 4rem); }

/* Rodapé */
.l-rodape { padding: var(--espaco-6) 0 var(--espaco-7); border-top: 1px solid var(--cor-borda); }
.l-rodape__linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--espaco-5); }
.l-rodape__resumo { margin: var(--espaco-2) 0 0; max-width: 32rem; color: var(--cor-texto-suave); font-size: var(--texto-sm); }
.l-rodape__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-1); }
.l-rodape__links a { display: inline-flex; align-items: center; min-height: var(--toque); }