/* Landing page de exemplo — Esmalteria Rosa Chá (marca inventada).
   Uma página só, feita para levar ao WhatsApp. */
:root{--rosa:#B0476B;--rosa-2:#8E3354;--rosa-claro:#FBEFF3;--tinta:#2D1A22;--tinta-2:#6E5560;--linha:#F1DCE4;
--texto:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--titulo:Georgia,"Times New Roman",serif}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--texto);color:var(--tinta);background:#fff;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;
background:var(--rosa);color:#fff;font-weight:700;text-decoration:none;font-size:16px;box-shadow:0 10px 24px -12px var(--rosa)}
.btn.claro{background:#fff;color:var(--rosa-2);box-shadow:none}

.capa{position:relative;min-height:88vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.capa-foto{position:absolute;inset:0;background:linear-gradient(180deg,rgba(45,26,34,.1),rgba(45,26,34,.85) 72%),
url("/exemplos/foto/3997381.jpg") center 30%/cover}
.capa-txt{position:relative;padding:28px 20px 40px;max-width:600px}
.marca{font-weight:700;letter-spacing:.02em;margin-bottom:12px;opacity:.95}
.capa h1{font-family:var(--titulo);font-size:40px;line-height:1.08;margin-bottom:12px}
.capa-txt>p{font-size:17px;margin-bottom:22px;opacity:.95}
.capa .nota{font-size:13.5px;margin:12px 0 0;opacity:.8}

.faixa{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;padding:14px 16px;background:var(--rosa-claro);
color:var(--rosa-2);font-weight:600;font-size:14px}

.sec{padding:44px 20px;max-width:980px;margin:0 auto}
.sec h2{font-family:var(--titulo);font-size:29px;margin-bottom:18px;color:var(--rosa-2)}
.servicos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.serv{background:#fff;border:1px solid var(--linha);border-radius:16px;overflow:hidden}
.serv img{width:100%;height:120px;object-fit:cover}
.serv b{display:block;padding:10px 12px 0;font-size:15px}
.serv span{display:block;padding:0 12px 12px;color:var(--rosa);font-weight:800;font-size:17px}

.oferta{margin:0 20px;padding:24px 20px;border-radius:20px;background:linear-gradient(140deg,var(--rosa-2),var(--rosa));
color:#fff;max-width:940px}
.oferta b{font-family:var(--titulo);font-size:24px}
.oferta p{margin:6px 0 16px;opacity:.95}

.passos{list-style:none;counter-reset:p;display:grid;gap:12px}
.passos li{counter-increment:p;position:relative;padding:14px 14px 14px 58px;background:var(--rosa-claro);border-radius:16px;color:var(--tinta-2)}
.passos li::before{content:counter(p);position:absolute;left:14px;top:14px;width:32px;height:32px;border-radius:50%;
background:var(--rosa);color:#fff;font-weight:800;display:grid;place-items:center}
.passos b{display:block;color:var(--tinta)}

.rodape{text-align:center;padding:36px 20px 44px;background:var(--tinta);color:#F1DCE4;display:grid;gap:6px;justify-items:center}
.rodape .btn{margin:12px 0 4px}
.rodape .feito{opacity:.55;font-size:12.5px}

/* Modo exemplo da vitrine (app-demo.js) */
.faixa-demo{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;padding:9px 14px;
background:#FCF0DB;color:#633806;font-size:13.5px}
.faixa-demo span{flex:1}
.faixa-demo a{color:#633806;font-weight:700;text-decoration:none;white-space:nowrap}
.faixa-demo a.quero{background:var(--rosa);color:#fff;border-radius:999px;padding:7px 12px}
.no-celular .faixa-demo,.no-celular #as-raiz{display:none!important}
.aviso-demo{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:60;background:var(--tinta);color:#fff;
padding:11px 18px;border-radius:12px;font-size:14.5px;box-shadow:0 6px 20px rgba(0,0,0,.25);opacity:0;transition:opacity .2s;pointer-events:none}
.aviso-demo.on{opacity:1}

@media (min-width:860px){
  .capa{min-height:82vh}
  .capa-txt{padding:60px 8vw}
  .capa h1{font-size:62px}
  .servicos{grid-template-columns:repeat(3,1fr);gap:18px}
  .serv img{height:200px}
  .oferta{margin:0 auto;padding:30px 36px}
  .passos{grid-template-columns:repeat(3,1fr)}
}

/* O Entrar (25/10/2026, SITE.md): a landing não tem barra no topo, então
   ele fica no canto da capa. Leva à porta da gestão; na vitrine o servidor
   troca o /entrar pela gestão do exemplo. */
.capa .entrar{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:2;
background:rgba(255,255,255,.94);color:var(--rosa-2);border-radius:999px;padding:8px 16px;font-weight:700;
font-size:14.5px;text-decoration:none;box-shadow:0 6px 18px -8px rgba(0,0,0,.4)}