/* A proposta usa a paleta da SAAT: quem abre já vê a cara que o site vai ter.
   Osso de um lado, preto do outro, e mais nenhuma cor (ver ../CORES.md). */
:root{
  --tinta:#1D1D1D; --preto:#000; --grafite:#49494B; --osso:#D5CCC3;
  --linha:rgba(29,29,29,.18); --texto-2:rgba(29,29,29,.78); --texto-3:rgba(29,29,29,.56);
  --display:'Inter','Helvetica Neue',Arial,sans-serif; --sans:'IBM Plex Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--grafite);color:var(--tinta);font-family:var(--sans);-webkit-font-smoothing:antialiased;
  display:grid;place-items:center;min-height:100vh;padding:24px}
a{color:inherit;text-decoration:none}

/* o slide: 16:9, cabe inteiro na tela */
.slide{width:min(1280px,calc((100vh - 48px) * 16 / 9),100%);aspect-ratio:16/9;background:var(--osso);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6);display:grid;grid-template-columns:1.16fr .84fr;overflow:hidden;container-type:inline-size}
.esq,.dir{font-size:clamp(8px,1.12cqi,14.5px)}
.esq{padding:3.4em 4em 3em;display:flex;flex-direction:column}
.dir{background:var(--preto);color:var(--osso);padding:3.4em 3.4em 3em;display:flex;flex-direction:column;position:relative;overflow:hidden}
/* o monograma AA, grande e apagado, no canto do lado escuro */
.dir .mono{position:absolute;right:-3em;top:-2.4em;width:17em;height:auto;fill:var(--osso);opacity:.09}

.topo{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:.78em;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3)}
.topo b{color:var(--tinta);font-weight:500}
h1{font-family:var(--display);font-weight:500;font-size:2.9em;line-height:1;letter-spacing:-.035em;margin:.6em 0 .4em}
h1 em{font-style:normal;color:var(--texto-3)}
.lead{color:var(--texto-2);font-size:1.04em;line-height:1.5;max-width:38em}
.lead b{color:var(--tinta);font-weight:500}

/* a tira de fotos da casa, entre o texto e o diagnóstico */
.tira{display:grid;grid-template-columns:repeat(5,1fr);gap:.5em;margin-top:1.2em}
.tira img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;background:var(--tinta)}

/* o diagnóstico: o que aparece hoje quando procuram a barbearia */
.hoje{margin:1.1em 0 1.3em;border:1px solid var(--tinta);padding:1em 1.4em 1.1em}
.hoje small{display:block;font-size:.74em;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3);font-weight:500;margin-bottom:.8em}
.hoje ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.9em 1.6em}
.hoje li{display:flex;flex-direction:column;gap:.2em;line-height:1.35}
.hoje b{font-family:var(--display);font-size:1em;font-weight:600;letter-spacing:-.01em}
.hoje span{font-size:.88em;color:var(--texto-2)}
.hoje code{font-family:var(--display);font-weight:600}

.inclui{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.55em 1.6em;margin-top:auto}
.inclui li{display:flex;gap:.7em;font-size:.93em;line-height:1.35;color:var(--texto-2)}
.inclui li::before{content:"";flex:none;width:.42em;height:.42em;margin-top:.46em;background:var(--tinta)}

.dir .topo{color:rgba(213,204,195,.5)}
.dir .topo b{color:var(--osso)}
.preco{position:relative;margin-top:2em;padding-bottom:1.3em;border-bottom:1px solid rgba(213,204,195,.2)}
.preco small{display:block;font-size:.76em;letter-spacing:.16em;text-transform:uppercase;color:rgba(213,204,195,.56)}
.preco b{display:block;font-family:var(--display);font-weight:500;font-size:4em;line-height:1;margin:.14em 0 .12em;letter-spacing:-.05em}
.preco b sup{font-family:var(--sans);font-weight:400;font-size:.26em;vertical-align:top;margin-right:.3em;position:relative;top:.6em;letter-spacing:0}
.preco b span{font-family:var(--sans);font-weight:400;font-size:.26em;color:rgba(213,204,195,.6);letter-spacing:0}
.preco p{font-size:.9em;color:rgba(213,204,195,.74);line-height:1.45}
.preco + .preco{margin-top:1.2em}
.preco.mes b{font-size:2.6em}

.garantias{list-style:none;display:grid;gap:.5em;margin:1.3em 0 0;font-size:.9em;color:rgba(213,204,195,.8)}
.garantias li{display:flex;gap:.7em;line-height:1.38}
.garantias li::before{content:"";flex:none;width:.42em;height:.42em;margin-top:.46em;background:var(--osso)}

.cta{margin-top:auto;padding-top:1.4em;display:flex;flex-direction:column;gap:.6em}
.btn{display:flex;justify-content:center;align-items:center;gap:.6em;padding:1.05em 1.4em;
  font-size:.86em;font-weight:500;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--osso);transition:.2s}
.btn-claro{background:var(--osso);color:#000}
.btn-claro:hover{background:transparent;color:var(--osso)}
.btn-linha{color:var(--osso);border-color:rgba(213,204,195,.4)}
.btn-linha:hover{border-color:var(--osso)}
.validade{text-align:center;font-size:.8em;color:rgba(213,204,195,.5)}

/* no computador os invólucros do celular não existem para o layout */
.abre,.resolve{display:contents}
.resolve > small,.role,.passos,.barra-m{display:none}

/* ─── celular: quatro telas cheias, como stories ───
   1 abertura · 2 o que aparece hoje · 3 o que o site resolve · 4 investimento.
   Cada uma tem a altura da janela (svh, para a barra do Safari não cortar o fim). Rolagem livre,
   sem encaixe. Em cima, a barra de progresso dos stories; embaixo, o valor e o botão do site. */
@media (max-width:820px),(max-aspect-ratio:1/1){
  body{padding:0;display:block;background:var(--osso)}
  .slide{display:block;width:100%;aspect-ratio:auto;box-shadow:none;overflow:visible}
  .esq{display:block;padding:0;font-size:16px}
  .dir{font-size:16px}
  .abre,.hoje,.resolve,.dir{display:flex;flex-direction:column;justify-content:center;
    min-height:100svh;padding:54px 22px 96px;margin:0;border:0}
  .resolve > small{display:block}

  /* 1 · abertura */
  .abre{justify-content:flex-start}
  .abre .topo{margin-bottom:auto;font-size:11px}
  h1{font-size:clamp(38px,11.6vw,54px);line-height:.98;margin:.5em 0 .4em}
  .lead{font-size:16.5px;line-height:1.5}
  .tira{grid-template-columns:repeat(3,1fr);gap:6px;margin-top:22px}
  .tira img{aspect-ratio:3/4}
  .tira img:nth-child(n+4){display:none}
  .role{display:block;margin-top:auto;padding-top:20px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--texto-3)}
  .role::after{content:" ↓"}

  /* 2 · o que aparece hoje, e 3 · o que o site resolve: o mesmo desenho de lista */
  .hoje{background:var(--tinta);color:var(--osso)}
  .hoje small,.resolve > small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;margin-bottom:18px;color:rgba(213,204,195,.56)}
  .resolve > small{color:var(--texto-3)}
  .hoje ul{grid-template-columns:1fr;gap:0}
  .hoje li{gap:5px;padding:16px 0;border-top:1px solid rgba(213,204,195,.2)}
  .hoje li:last-child{border-bottom:1px solid rgba(213,204,195,.2)}
  .hoje b{font-size:20px;line-height:1.15;letter-spacing:-.02em;font-weight:500}
  .hoje span{font-size:15px;line-height:1.45;color:rgba(213,204,195,.74)}
  .hoje code{font-weight:500}
  .inclui{grid-template-columns:1fr;gap:0;margin-top:0}
  .inclui li{display:block;padding:18px 0;border-top:1px solid var(--linha);
    font-family:var(--display);font-weight:500;font-size:21px;line-height:1.18;letter-spacing:-.02em;color:var(--tinta)}
  .inclui li:last-child{border-bottom:1px solid var(--linha)}
  .inclui li::before{display:none}

  /* 4 · investimento */
  .dir{padding-top:50px;padding-bottom:28px}
  .dir .topo{font-size:11px}
  .dir .mono{width:15em;right:-3.4em;top:1em}
  .preco{margin-top:20px;padding-bottom:16px}
  .preco + .preco{margin-top:14px}
  .preco b{font-size:66px}
  .preco.mes b{font-size:42px}
  .garantias{margin-top:16px}
  .preco p,.garantias{font-size:15px}
  .cta{margin-top:auto;padding-top:22px}
  .btn{padding:17px 18px;font-size:13px}

  /* a barra de progresso dos stories: fica legível sobre qualquer fundo (mix-blend-mode inverte) */
  .passos{display:flex;gap:4px;position:fixed;z-index:6;top:0;left:0;right:0;padding:12px 22px 0;mix-blend-mode:difference}
  .passos i{flex:1;height:2px;background:rgba(255,255,255,.3);transition:background .3s}
  .passos i.feito{background:#fff}

  /* a barra de baixo: o valor e o site, sempre à mão; some na última tela, que já tem os botões */
  .barra-m{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;z-index:6;left:0;right:0;bottom:0;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom)) 22px;background:#000;color:var(--osso);
    font-size:13.5px;border-top:1px solid rgba(213,204,195,.18);transition:transform .3s}
  .barra-m b{font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:-.02em;margin-right:.2em}
  .barra-m .btn{padding:13px 16px;font-size:12px;white-space:nowrap}
  .na-ultima .barra-m{transform:translateY(110%)}
}
@media (prefers-reduced-motion:reduce){.barra-m,.passos i{transition:none}}
@media print{
  body{background:#fff;padding:0}
  .passos,.barra-m{display:none}
  .slide{box-shadow:none;width:100%}
  @page{size:landscape;margin:0}
}