:root{
  --overlay: rgba(0,0,0,.8);
  --text: #fff;
  --btn-grad: linear-gradient(45deg,#833ab4,#fd1d1d,#fcb045);
  --radius: 10px;
}

/* Inter variável local */
@font-face{
  font-family:"Inter";
  src:
    url("../fonts/Inter-VariableFont_opsz,wght.woff2") format("woff2"),
    url("../fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Inter";
  src:
    url("../fonts/Inter-Italic-VariableFont_opsz,wght.woff2") format("woff2"),
    url("../fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  height:100%;
  overflow-x:hidden;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-color:#000;
}

.shade{
  position:fixed;
  inset:0;
  background:var(--overlay);
  z-index:-1;
}

.wrap{
  /* min-height:100svh; */
  display:grid;
  place-items:center;
  padding:clamp(16px,3vw,32px);
  text-align:center;
  padding-top: 4rem;
}

.card{
  width:100%;
  max-width:500px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:clamp(16px,2.5vw,28px);
}

h1{
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
  font-size:clamp(28px,3.8vw,48px);
}

.lead{
  color:#9e9e9e;
  line-height:1.6;
  font-size:clamp(14px,1.3vw,18px);
  max-width:60ch;
  margin:0 auto;
}

.cta{
  display:inline-block;
  align-self:center;
  background:var(--btn-grad);
  color:#fff;
  font-weight:800;
  font-size:clamp(14px,1.2vw,18px);
  padding:16px 28px;
  border-radius:var(--radius);
  text-decoration:none;
  box-shadow:0 10px 30px rgba(229,46,113,.25);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  white-space:nowrap;
}

.cta:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 34px rgba(229,46,113,.32);
}

.cta:active{
  transform:translateY(0);
  opacity:.95;
}

.support{
  color:#9e9e9e;
  line-height:1.6;
  font-size:clamp(12px,1.1vw,16px);
  max-width:70ch;
  margin:3rem auto 0;
}

.support a{
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.25);
  padding-bottom:1px;
  word-break:break-word;
}

@media (min-width:1200px){
  .card{ gap:24px; }
}

:root{
  --star:#ffd166;
  --price-new:#ff3b30;
  --price-old:#9e9e9e;
  --save-bg:#2a2a2a;
  --btn:#33c085;         /* cor solicitada */
  --btn-text:#111;       /* texto do botão sobre o verde */
}

/* HERO */
.hero{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center;
  text-align:left;
  width:100%;
}

.hero__mockup img{
  width: 100%;
  height: auto;
  max-width: 380px;   /* ajusta para o mobile */
  max-height: 60vh;   /* nunca passa de 60% da altura da tela */
  margin: 0 auto;
}

.hero__rating{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
}

.stars{
  display:inline-flex;
  gap:2px;
  color:var(--star);
}
.star{
  width:18px;
  height:18px;
  fill:currentColor;
  display:block;
}

.hero__reviews{
  color:#cfcfcf;
  font-weight:600;
  font-size:14px;
}

.hero__title{
  font-size:clamp(22px,5.8vw,30px);
  line-height:1.2;
  letter-spacing:-.01em;
  font-weight:800;
}

.hero__prices{
  display:flex;
  align-items:center;
  gap:12px;
}

.price-new{
  color:var(--price-new);
  font-weight:800;
  font-size:clamp(18px,5vw,22px);
}

.price-old{
  color:var(--price-old);
  text-decoration:line-through;
  font-weight:700;
  opacity:.9;
  font-size:clamp(14px,4.2vw,18px);
}

.save-badge{
  background:var(--save-bg);
  color:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-weight:700;
  font-size:12px;
  white-space:nowrap;
}

/* Botão pagar */
.btn-pay{
  margin-top:14px;
  width:100%;
  max-width:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 20px;
  border-radius:999px;
  background:var(--btn);
  color:var(--btn-text);
  text-decoration:none;
  font-weight:800;
  font-size:clamp(15px,4.6vw,18px);
  box-shadow:0 10px 30px rgba(51,192,133,.35);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.btn-pay__icon{
  width:20px;
  height:20px;
  fill:currentColor;
}

.btn-pay:hover{ transform:translateY(-4px); box-shadow:0 14px 36px rgba(51,192,133,.45); }
.btn-pay:active{ transform:translateY(0); opacity:.95; }

.hero__rating {
  margin-top: -6rem; /* ajusta o valor até ficar bom */
}


/* ACORDION */

.accordion {
  width: 100%;
  max-width: 520px;
  margin: 32px auto 0;
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 4rem;
}

.accordion-item {
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.accordion-header {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 18px 12px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.accordion-header .icon {
  transition: transform .3s ease;
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 12px;
  font-size: 14px;
  color: #cfcfcf;
  line-height: 1.6;
  transition: max-height .3s ease, padding .3s ease;
  text-align: left;
}

.accordion-item.active .accordion-body {
  max-height: 200px; /* ajusta se quiser mais */
  padding: 12px;
}

.accordion-item.active .accordion-header .icon {
  transform: rotate(180deg);
}



/* INCLUIDO NO BUNDLE */


.bundle-includes {
  width: 100%;
  max-width: 520px;
  margin: 48px auto;
  text-align: center;
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 28px;
  color: #fff;
}

.bundle-item {
  margin-bottom: 40px;
}

.bundle-highlight {
  font-size: clamp(28px, 7vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 8px;
  background: linear-gradient(45deg, #3ab46d, #2bcc9e, #86fd1d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.bundle-text {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}

.bundle-text span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #cfcfcf;
  margin-top: 4px;
}



/* ===== GALERIA BA ===== */
.ba-gallery{
  width:100%;
  max-width:520px;
  margin:auto;
  text-align:center;
}

.ba-title{
  font-weight:800;
  font-size:clamp(20px,6vw,28px);
  line-height:1.2;
  color:#fff;
}

.ba-sub{
  color:#cfcfcf;
  margin-top:6px;
  font-size:14px;
  margin-bottom: 2rem;
}

/* Card do slider 1:1 */
.ba{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:16px;
  overflow:hidden;
  background:#111;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  touch-action:none;
}

/* Imagens base */
.ba-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  user-select:none; -webkit-user-drag:none;
}

.ba-before{ z-index:1; }
.ba-after{
  z-index:2;
  clip-path: polygon(0 0, var(--pos,50%) 0, var(--pos,50%) 100%, 0 100%);
}

/* Nome do preset: acima das imagens, tamanho natural (sem esticar) */
.ba-overlay-title{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:40%;          /* mantém proporção original */
  max-width:80%; max-height:80%;    /* evita estourar o card */
  z-index:3;
  pointer-events:none;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.6));
}

/* Slider UI por cima do nome */
.ba-divider{
  position:absolute; top:0; bottom:0;
  left:var(--pos,50%);
  width:2px; transform:translateX(-1px);
  background:rgba(255,255,255,.85);
  z-index:4;
  pointer-events:none;
}
.ba-handle{
  position:absolute; top:50%;
  left:var(--pos,50%);
  transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:#fff;
  border:2px solid rgba(0,0,0,.18);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  z-index:5;
  cursor:ew-resize;
  display:flex;                /* para centralizar as setinhas */
  align-items:center;
  justify-content:space-between;
  padding:0 8px;               /* espaço lateral para as setinhas */
  box-sizing:border-box;
}

/* As setas internas */
.ba-handle::before,
.ba-handle::after{
  content:"";
  display:block;
  width:0; height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}

.ba-handle::before{
  border-right:8px solid #111;   /* seta para a esquerda */
}
.ba-handle::after{
  border-left:8px solid #111;    /* seta para a direita */
}