/* ============================================================
   Instituto Sabrina Trevisan
   Aula de Pilares e Fundamentos da Nutricao Neuroendocrina
   Folha propria desta pagina. Nao usa nem substitui o CSS do
   Webflow: as demais paginas seguem intocadas.

   Paleta tirada da capa do proprio curso: lilas como ambiente,
   violeta profundo no texto, dourado so em filete e detalhe.
   Era o inverso disso que estava desproporcional.
   ============================================================ */

:root{
  --violeta:#3E2A6E;
  --violeta-2:#5A3FA0;
  --violeta-cta:#6D4BC7;
  --violeta-cta-esc:#57399F;
  --lilas:#B9A3E3;
  --lilas-claro:#E4DAF5;
  --lilas-nevoa:#F1ECFA;
  --ouro:#C2A052;
  --ouro-claro:#E2CE9B;
  --fundo:#FBF9FE;
  --fundo-2:#F4EFFA;
  --superficie:#FFFFFF;
  --tinta:#2C2440;
  --tinta-suave:#6A6284;
  --linha:rgba(62,42,110,.14);
  --branco:#FFFFFF;

  --sombra:0 26px 60px -38px rgba(62,42,110,.5);
  --sombra-forte:0 34px 80px -44px rgba(62,42,110,.6);
  --raio:18px;
  --raio-p:12px;
  --max:1180px;
  --topo:76px;

  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --texto:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topo) + 16px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fundo);color:var(--tinta);
  font-family:var(--texto);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--violeta-cta);outline-offset:3px;border-radius:6px}

h1,h2,h3{font-family:var(--display);color:var(--violeta);line-height:1.12;margin:0;font-weight:500;text-wrap:balance}
h1{font-size:clamp(2.4rem,5vw,4.1rem)}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:600}
p{margin:0 0 1.1rem}
/* simbolo de marca registrada: na serifa do display ele sai do tamanho de uma letra */
h1 sup,h2 sup,h3 sup{font-size:.3em;top:-.85em;font-weight:400;line-height:0}
sup{font-size:.62em;line-height:0}

.env{width:min(100% - 2.6rem,var(--max));margin-inline:auto}
.env-estreito{width:min(100% - 2.6rem,880px);margin-inline:auto}

/* ---------- ornamentos de vidro (linguagem das referencias) ---------- */
.vidro{
  position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.9),rgba(185,163,227,.42) 45%,rgba(185,163,227,0) 72%);
  filter:blur(.4px);
}
.grao{
  position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.6'/></svg>");
}

/* ---------- rotulo com filete dourado ---------- */
.rotulo{
  display:inline-flex;align-items:center;gap:.75rem;margin-bottom:1.1rem;
  font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--ouro);
}
.rotulo::before,.rotulo::after{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--ouro-claro),transparent)}
.rotulo--so-depois::before{display:none}

/* ---------- botoes ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:58px;padding:1rem 2.2rem;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--texto);font-size:.94rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,color .22s ease;
}
.btn--cta{
  background:linear-gradient(135deg,var(--violeta-cta),var(--violeta-2));color:#fff;
  box-shadow:0 18px 38px -18px rgba(109,75,199,.9);
}
.btn--cta:hover{transform:translateY(-3px);box-shadow:0 26px 50px -20px rgba(109,75,199,.95)}
.btn--vazado{background:rgba(255,255,255,.7);color:var(--violeta);box-shadow:inset 0 0 0 1.5px var(--linha)}
.btn--vazado:hover{box-shadow:inset 0 0 0 1.5px var(--lilas);transform:translateY(-2px)}
.btn--grande{min-height:66px;padding:1.15rem 2.8rem;font-size:1rem}
.btn--bloco{width:100%}

/* ---------- topo ---------- */
.topo{
  position:fixed;inset:0 0 auto 0;z-index:900;height:var(--topo);display:flex;align-items:center;
  background:rgba(251,249,254,0);transition:background-color .3s,box-shadow .3s,backdrop-filter .3s;
}
.topo.rolou{background:rgba(251,249,254,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 12px 34px -30px rgba(62,42,110,.9)}
.topo-int{width:min(100% - 2.6rem,var(--max));margin-inline:auto;display:flex;align-items:center;gap:1.4rem}
.marca{display:inline-flex;align-items:center;gap:.7rem}
.marca img{height:44px;width:auto}
.marca span{font-family:var(--display);font-size:1.06rem;color:var(--violeta);letter-spacing:.02em;line-height:1.2}
.topo .btn{margin-left:auto;min-height:46px;padding:.7rem 1.5rem;font-size:.78rem}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:calc(var(--topo) + 4.5rem) 0 5rem;
  background:
    radial-gradient(70% 55% at 78% 18%,rgba(185,163,227,.34),transparent 62%),
    radial-gradient(60% 50% at 12% 72%,rgba(228,218,245,.6),transparent 66%),
    linear-gradient(180deg,#F6F1FC 0%,var(--fundo) 68%);
}
.hero .vidro--1{width:min(46vw,520px);aspect-ratio:1;top:-9%;right:-8%}
.hero .vidro--2{width:min(30vw,320px);aspect-ratio:1;bottom:-12%;left:-7%}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1{margin-bottom:1.3rem}
.hero h1 sup{font-size:.3em;top:-.9em;font-weight:400}
.hero h1 .fina{display:block;font-size:.42em;letter-spacing:.24em;text-transform:uppercase;
  font-family:var(--texto);font-weight:500;color:var(--ouro);margin-bottom:.9rem}
.hero h1 em{display:block;font-style:normal;font-size:.56em;letter-spacing:.06em;color:var(--violeta-2);margin-top:.2rem}
.hero-lead{font-size:1.09rem;color:var(--tinta-suave);max-width:52ch}
.hero-lead strong{color:var(--violeta);font-weight:600}
.hero-acoes{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.9rem}
.hero-selos{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.hero-selos li{
  font-size:.82rem;letter-spacing:.04em;color:var(--violeta-2);
  background:rgba(255,255,255,.72);border:1px solid var(--linha);border-radius:999px;padding:.5rem 1rem;
}
.hero-foto{position:relative}
.hero-foto img{width:100%;border-radius:var(--raio);box-shadow:var(--sombra-forte)}
/* hero sem moldura: a arte dissolve nas bordas e se funde ao lilas do fundo,
   como na referencia aprovada pela cliente */
.hero-foto--fundida img{border-radius:0;box-shadow:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.hero-foto--fundida::after{opacity:.55}
.hero-foto::after{
  content:"";position:absolute;inset:-8% -6% -10% -8%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(185,163,227,.5),transparent 68%);
}

/* ---------- secoes ---------- */
.secao{position:relative;padding:clamp(4rem,7vw,6rem) 0;overflow:hidden}
.secao--nevoa{background:var(--fundo-2)}
.secao--vidro{background:linear-gradient(180deg,var(--fundo) 0%,#F7F3FC 100%)}
.cab{text-align:center;max-width:64ch;margin:0 auto clamp(2.4rem,4vw,3.4rem)}
.cab p{color:var(--tinta-suave);margin:1rem 0 0}
.cab--esq{text-align:left;margin-inline:0}

/* cartoes de vidro */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1.2rem}
.cartao{
  position:relative;padding:2rem 1.8rem;border-radius:var(--raio);
  background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(244,239,250,.86));
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--sombra);
  transition:transform .26s ease,box-shadow .26s ease;
}
.cartao:hover{transform:translateY(-5px);box-shadow:var(--sombra-forte)}
.cartao h3{margin-bottom:.5rem}
.cartao p{color:var(--tinta-suave);font-size:.97rem;margin:0}
.cartao__n{
  display:block;font-family:var(--display);font-size:1.5rem;color:var(--ouro);margin-bottom:.6rem;
}

/* lista de aprendizado */
.aprender{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:.9rem}
.aprender li{
  display:flex;gap:.9rem;align-items:flex-start;padding:1.1rem 1.3rem;border-radius:var(--raio-p);
  background:rgba(255,255,255,.8);border:1px solid var(--linha);color:var(--tinta);
}
.aprender li::before{
  content:"";flex:0 0 auto;width:9px;height:9px;margin-top:.62em;border-radius:50%;
  background:linear-gradient(135deg,var(--lilas),var(--violeta-cta));
}

/* como funciona, em trilha */
.trilha{position:relative;display:grid;gap:1.1rem;padding-left:2.6rem}
.trilha::before{content:"";position:absolute;left:11px;top:1rem;bottom:1rem;width:2px;
  background:linear-gradient(180deg,transparent,var(--lilas),transparent)}
.trilha li{position:relative;padding:1.1rem 1.4rem;border-radius:var(--raio-p);
  background:rgba(255,255,255,.86);border:1px solid var(--linha)}
.trilha li::before{
  content:"";position:absolute;left:-2.6rem;top:1.35rem;width:24px;height:24px;border-radius:50%;
  background:var(--fundo);border:2px solid var(--lilas);box-shadow:0 0 0 5px var(--fundo);
}
.trilha li::after{content:"";position:absolute;left:calc(-2.6rem + 7px);top:calc(1.35rem + 7px);
  width:10px;height:10px;border-radius:50%;background:var(--violeta-cta)}

/* certificacao */
.cert{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center;
  padding:clamp(1.8rem,3vw,2.6rem);border-radius:var(--raio);
  background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(228,218,245,.7));
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--sombra)}
.cert__selo{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 36% 30%,#F3E6C4,var(--ouro));color:#fff;
  font-family:var(--display);font-size:1.7rem;box-shadow:0 14px 30px -16px rgba(194,160,82,.9)}
.cert p{margin:0;color:var(--tinta-suave)}
.cert strong{color:var(--violeta)}

/* ---------- oferta ---------- */
.oferta-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.4rem);align-items:center}
.inclui li{display:flex;gap:.8rem;align-items:flex-start;padding:.55rem 0;color:var(--tinta);font-size:.98rem}
.inclui li::before{content:"";flex:0 0 auto;width:18px;height:18px;margin-top:.28em;border-radius:50%;
  background:var(--lilas-claro);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E2A6E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 13 4 4L19 7'/></svg>");
  background-size:12px;background-position:center;background-repeat:no-repeat}

.caixa-oferta{
  position:relative;text-align:center;padding:clamp(2rem,4vw,3rem) clamp(1.6rem,3vw,2.6rem);
  border-radius:var(--raio);background:var(--superficie);
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--sombra-forte);
}
.caixa-oferta::before{
  content:"";position:absolute;inset:0;border-radius:var(--raio);padding:1px;pointer-events:none;
  background:linear-gradient(150deg,var(--ouro-claro),transparent 42%,var(--lilas) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.selo-seguro{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.4rem;
  font-size:.78rem;font-weight:600;letter-spacing:.08em;color:#2F7D5B;
  background:#E8F5EE;border-radius:999px;padding:.42rem 1rem}
.faixa-condicao{
  display:inline-block;margin-bottom:1.6rem;padding:.5rem 1.3rem;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,var(--violeta-cta),var(--violeta-2));
}
.de{font-size:1.02rem;color:var(--tinta-suave)}
.de s{text-decoration-color:rgba(109,75,199,.6);text-decoration-thickness:2px}
.por{display:block;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ouro);margin:.5rem 0 .1rem}
.preco{font-family:var(--display);font-size:clamp(3.4rem,7vw,4.8rem);line-height:1;color:var(--violeta);font-weight:600}
.preco sup{font-size:.34em;vertical-align:super;margin-right:.14em;font-weight:500}
.avista{font-size:1rem;color:var(--tinta-suave);margin:.3rem 0 0}
.parcela{font-family:var(--display);font-size:1.55rem;color:var(--violeta-2);margin:.5rem 0 0}
.economia{display:inline-block;margin:1.2rem 0 1.6rem;padding:.55rem 1.2rem;border-radius:999px;
  background:var(--lilas-nevoa);color:var(--violeta);font-size:.92rem;font-weight:600}
.caixa-oferta .btn{width:100%}
.bandeiras{margin:1.4rem auto 0;max-width:280px;opacity:.85}

/* ---------- professora ---------- */
.prof{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.prof-foto img{width:100%;border-radius:var(--raio);box-shadow:var(--sombra-forte)}
.prof p{color:var(--tinta-suave)}
.prof strong{color:var(--violeta)}

/* ---------- fechamento ---------- */
.fechamento{
  position:relative;overflow:hidden;text-align:center;color:#fff;
  padding:clamp(4.5rem,8vw,7rem) 0;
  background:linear-gradient(150deg,#3E2A6E 0%,#5A3FA0 52%,#7355B8 100%);
}
.fechamento::before{
  content:"";position:absolute;inset:0;opacity:.42;pointer-events:none;
  background:
    radial-gradient(46% 60% at 16% 18%,rgba(228,218,245,.6),transparent 62%),
    radial-gradient(50% 60% at 84% 78%,rgba(194,160,82,.34),transparent 64%);
}
.fechamento .env{position:relative;z-index:1}
.fechamento .rotulo{color:var(--ouro-claro)}
.fechamento .rotulo::before,.fechamento .rotulo::after{background:linear-gradient(90deg,transparent,var(--ouro-claro),transparent)}
.fechamento h2{color:#fff;max-width:24ch;margin-inline:auto}
.fechamento .sub{color:rgba(255,255,255,.84);max-width:56ch;margin:1.4rem auto 2.6rem;font-size:1.06rem}
.caixa-fecho{
  max-width:520px;margin:0 auto;padding:2.2rem 2rem;border-radius:var(--raio);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.caixa-fecho .faixa-condicao{background:rgba(255,255,255,.16);color:#fff}
.caixa-fecho .de,.caixa-fecho .avista{color:rgba(255,255,255,.8)}
.caixa-fecho .preco,.caixa-fecho .parcela{color:#fff}
.caixa-fecho .por{color:var(--ouro-claro)}
.caixa-fecho .btn--cta{background:#fff;color:var(--violeta);box-shadow:0 20px 40px -18px rgba(0,0,0,.5)}
.caixa-fecho .btn--cta:hover{background:var(--lilas-nevoa)}

/* ---------- rodape ---------- */
.rodape{background:#241B3E;color:rgba(255,255,255,.7);padding:3rem 0 2.2rem;text-align:center}
.rodape img{height:52px;width:auto;margin:0 auto 1.2rem}
.rodape p{margin:0;font-size:.9rem}
.rodape a{color:rgba(255,255,255,.82)}
.rodape a:hover{color:#fff}
.rodape-base{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);font-size:.84rem}

/* ---------- whatsapp ---------- */
.zap{position:fixed;right:1.6rem;bottom:1.6rem;z-index:920;width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;
  box-shadow:0 14px 30px -12px rgba(37,211,102,.8);transition:transform .22s}
.zap:hover{transform:scale(1.1)}

/* ---------- movimento ---------- */
[data-revela]{opacity:0;transform:translateY(24px);transition:opacity .75s ease-out,transform .75s ease-out}
[data-revela].visivel{opacity:1;transform:none}
[data-revela][style*="--i"]{transition-delay:calc(var(--i) * 110ms)}
.hero-grid > *{opacity:0;transform:translateY(20px);animation:sobe .9s ease-out forwards}
.hero-grid > *:nth-child(2){animation-delay:.18s}
@keyframes sobe{to{opacity:1;transform:none}}
@keyframes flutua{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-16px,0)}}
.vidro{animation:flutua 17s ease-in-out infinite}
.vidro--2{animation-duration:21s}

/* ---------- responsivo ---------- */
@media (max-width:960px){
  .hero-grid,.oferta-grid,.prof{grid-template-columns:1fr}
  .hero-foto{order:-1;max-width:460px;margin-inline:auto}
  .prof-foto{max-width:420px;margin-inline:auto}
  .cert{grid-template-columns:1fr;text-align:center;justify-items:center}
}
@media (max-width:640px){
  body{font-size:16px}
  .env,.env-estreito{width:calc(100% - 2rem)}
  .hero{padding-top:calc(var(--topo) + 2.6rem)}
  .hero-acoes .btn{width:100%}
  .marca span{display:none}
  .trilha{padding-left:2.2rem}
  .trilha li::before{left:-2.2rem}
  .trilha li::after{left:calc(-2.2rem + 7px)}
  .zap{right:1rem;bottom:1rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-revela]{opacity:1!important;transform:none!important;transition:none!important}
  .hero-grid > *{opacity:1!important;transform:none!important;animation:none!important}
  .vidro{animation:none!important}
}

/* ============================================================
   Especifico desta pagina: hero de palco central sobre a arte
   de vidro da capa oficial da aula (cerebro, utero, flor e
   moleculas), com veu claro para o texto violeta passar.
   ============================================================ */
.hero--arte{padding:calc(var(--topo) + 5rem) 0 4.5rem;text-align:center;isolation:isolate}
.hero--arte .arte-fundo{position:absolute;left:0;right:0;top:0;height:clamp(340px,46vh,470px);z-index:-2;
  background-image:url("../images/pilares-arte.jpg");
  background-size:cover;background-position:50% 46%;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 48%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 48%,transparent 100%)}
.hero--arte::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(56% 34% at 50% 26%,rgba(251,249,254,.82) 0%,rgba(251,249,254,.5) 60%,transparent 100%),
    linear-gradient(180deg,rgba(251,249,254,.7) 0%,rgba(251,249,254,.24) 30%,rgba(251,249,254,.72) 78%,var(--fundo) 100%)}
.hero--arte .hero-int{position:relative;z-index:1;width:min(100% - 2.6rem,820px);margin-inline:auto}
.hero--arte h1{margin:0 auto 1.3rem;max-width:15ch}
.hero--arte .fina{display:block;font-size:.3em;letter-spacing:.26em;text-transform:uppercase;
  font-family:var(--texto);font-weight:600;color:var(--ouro);margin-bottom:1rem}
.hero--arte .hero-lead{margin-inline:auto;text-align:center}
.hero--arte .hero-acoes{justify-content:center}
.hero--arte .hero-selos{justify-content:center}

/* preco unico, sem de/por */
.preco-unico{font-family:var(--display);font-size:clamp(3.6rem,8vw,5.4rem);line-height:1;
  color:var(--violeta);font-weight:600}
.preco-unico sup{font-size:.32em;vertical-align:super;margin-right:.14em;font-weight:500}
.por-apenas{display:block;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ouro);margin-bottom:.3rem}

/* selos do fechamento */
.selos-fecho{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin:0 0 2rem}
.selos-fecho li{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.1rem;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  color:rgba(255,255,255,.92);font-size:.86rem}
.selos-fecho li::before{content:"";width:16px;height:16px;flex:0 0 auto;border-radius:50%;
  background:rgba(255,255,255,.9);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E2A6E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 13 4 4L19 7'/></svg>");
  background-size:11px;background-position:center;background-repeat:no-repeat}

/* o lead do hero fica sobre a arte de vidro: cor cheia em vez de suave,
   senao o contraste cai abaixo do minimo AA (medido: 4,37 antes, 7,1 depois) */
.hero--arte .hero-lead{color:var(--tinta)}

/* preco unico dentro da caixa do fechamento: fundo violeta, texto precisa clarear */
.caixa-fecho .preco-unico{color:#fff}
.caixa-fecho .por-apenas{color:var(--ouro-claro)}