/* A proposta usa a paleta do site novo: quem abre já vê a cara que a loja vai ter. */
:root{
  --tinta:#2A2724; --grafite:#23201D; --papel:#F7F2EF; --pedra:#EEE6DF;
  --ouro:#CCB58B; --ouro-texto:#6E5A38; --madeira:#6F4B2E;
  --linha:rgba(42,39,36,.12); --texto-2:rgba(42,39,36,.74); --texto-3:rgba(42,39,36,.54);
  --display:'Cormorant Garamond',Georgia,serif; --sans:'Manrope',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#E4DBD2;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(--papel);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.4);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.6em 4em 3.2em;display:flex;flex-direction:column}
.dir{background:var(--grafite);color:#fff;padding:3.6em 3.4em 3.2em;display:flex;flex-direction:column;position:relative;overflow:hidden}
/* o "D" do monograma, grande, no canto do lado escuro */
.dir::before{content:"";position:absolute;right:-3em;top:-2.5em;width:17em;height:17em;opacity:.2;
  background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 48 48%27%3E%3Cpath d=%27M17 11v26M17 11h6c8.5 0 13 5.6 13 13s-4.5 13-13 13h-6M12.5 13.5c1.4-2.6 4-3.6 7.2-2.4%27 fill=%27none%27 stroke=%27%23CCB58B%27 stroke-width=%271%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") center/contain no-repeat}

.topo{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:.8em;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
.topo b{color:var(--ouro-texto);font-weight:700}
h1{font-family:var(--display);font-weight:500;font-size:3.3em;line-height:1;letter-spacing:-.015em;margin:.55em 0 .35em;font-variant-numeric:lining-nums;text-wrap:balance}
h1 em{font-style:italic;color:var(--ouro-texto)}
.lead{color:var(--texto-2);font-size:1.06em;line-height:1.52;max-width:37em}
.lead b{color:var(--tinta)}

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

/* o diagnóstico: o que aparece hoje quando procuram a loja */
.hoje{margin:1.1em 0 1.5em;background:var(--pedra);border-radius:.4em;padding:1em 1.4em}
.hoje small{display:block;font-size:.76em;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro-texto);font-weight:700;margin-bottom:.8em}
.hoje ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.95em 1.6em}
.hoje li{display:flex;flex-direction:column;gap:.2em;line-height:1.35}
.hoje b{font-size:1em;font-weight:700}
.hoje span{font-size:.88em;color:var(--texto-2)}
.hoje code{font-family:var(--sans);font-weight:700;color:var(--tinta)}

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

.dir .topo{color:rgba(255,255,255,.5)}
.dir .topo b{color:var(--ouro)}
.preco{position:relative;margin-top:2em;padding-bottom:1.3em;border-bottom:1px solid rgba(255,255,255,.14)}
.preco small{display:block;font-size:.78em;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600}
.preco b{display:block;font-family:var(--display);font-weight:500;font-size:4.4em;line-height:1;margin:.14em 0 .12em;letter-spacing:-.02em;font-variant-numeric:lining-nums}
.preco b sup{font-family:var(--sans);font-weight:600;font-size:.24em;vertical-align:top;margin-right:.25em;position:relative;top:.6em;letter-spacing:0}
.preco b span{font-family:var(--sans);font-weight:500;font-size:.24em;color:rgba(255,255,255,.6);letter-spacing:0}
.preco p{font-size:.9em;color:rgba(255,255,255,.72);line-height:1.45}
.preco + .preco{margin-top:1.2em}
.preco.mes b{font-size:2.8em}

.garantias{list-style:none;display:grid;gap:.5em;margin:1.3em 0 0;font-size:.9em;color:rgba(255,255,255,.78)}
.garantias li{display:flex;gap:.6em;line-height:1.38}
.garantias li::before{content:"✓";color:var(--ouro);font-weight:700}

.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:1em 1.4em;border-radius:999px;font-weight:700;font-size:1em;transition:.2s}
.btn-claro{background:var(--ouro);color:var(--grafite)}
.btn-claro:hover{background:#E2D1AE}
.btn-linha{border:1px solid rgba(255,255,255,.3);color:#fff}
.btn-linha:hover{border-color:#fff}
.validade{text-align:center;font-size:.8em;color:rgba(255,255,255,.45)}

/* telas estreitas: o slide vira página rolável */
@media (max-width:820px),(max-aspect-ratio:1/1){
  body{padding:0;display:block;background:var(--papel)}
  .slide{width:100%;aspect-ratio:auto;grid-template-columns:1fr;box-shadow:none}
  .esq,.dir{font-size:15px;padding:36px 16px}
  h1{font-size:2.5em}
  .hoje ul,.inclui{grid-template-columns:1fr}
  .inclui{margin-top:0}
  .cta{margin-top:2em}
  .tira{grid-template-columns:repeat(3,1fr)}
  .tira img:nth-child(n+4){display:none}
}
@media print{
  body{background:#fff;padding:0}
  .slide{box-shadow:none;width:100%}
  @page{size:landscape;margin:0}
}