/* A proposta usa a paleta do site novo: quem abre já vê a cara que a loja vai ter. */
:root{
  --tinta:#3B1D2B; --grafite:#3B1D2B; --papel:#FFF8F5; --pedra:#FCE3EE;
  --ouro:#EF8DBE; --ouro-texto:#A23B6D; --madeira:#E2689F;
  --linha:rgba(59,29,43,.12); --texto-2:rgba(59,29,43,.72); --texto-3:rgba(59,29,43,.52);
  --display:'Fraunces',Georgia,serif; --sans:'Nunito Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#F4D3E1;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 coração do letreiro, grande, no canto do lado escuro */
.dir::before{content:"";position:absolute;right:-4em;top:-3.5em;width:17em;height:17em;opacity:.22;
  background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 48 48%27%3E%3Cpath d=%27M24 41S7 30.5 7 18.5C7 12.6 11.4 8.5 16.5 8.5c3.4 0 6 1.8 7.5 4.3 1.5-2.5 4.1-4.3 7.5-4.3C36.6 8.5 41 12.6 41 18.5 41 30.5 24 41 24 41Z%27 fill=%27none%27 stroke=%27%23EF8DBE%27 stroke-width=%271.6%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.1em;line-height:1.02;letter-spacing:-.015em;font-variation-settings:"SOFT" 100,"opsz" 96;margin:.6em 0 .35em}
h1 em{font-style:italic;color:var(--madeira)}
.lead{color:var(--texto-2);font-size:1.06em;line-height:1.52;max-width:37em}
.lead b{color:var(--tinta)}

/* o diagnóstico: o que aparece hoje quando buscam a clínica */
.hoje{margin:1.6em 0 1.5em;background:var(--pedra);border-radius:.9em;padding:1.25em 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:4em;line-height:1;margin:.14em 0 .12em;letter-spacing:-.03em}
.preco b sup{font-family:var(--sans);font-weight:600;font-size:.26em;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:.26em;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.6em}

.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:#F5B3D3}
.btn-claro:hover{background:#E8C98A}
.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.4em}
  .hoje ul,.inclui{grid-template-columns:1fr}
  .inclui{margin-top:0}
  .cta{margin-top:2em}
}
@media print{
  body{background:#fff;padding:0}
  .slide{box-shadow:none;width:100%}
  @page{size:landscape;margin:0}
}

/* a tira de fotos da loja, 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:.8em;background:var(--pedra)}
.tira img:nth-child(odd){transform:rotate(-2deg)}
.tira img:nth-child(even){transform:rotate(2deg)}
.slide .hoje{margin-top:1.1em;padding-top:1em;padding-bottom:1em}
.slide h1{font-size:2.8em}
@media (max-width:820px),(max-aspect-ratio:1/1){.tira{grid-template-columns:repeat(3,1fr)}.tira img:nth-child(n+4){display:none}}