.elementor-436 .elementor-element.elementor-element-867cdf3{width:100%;max-width:100%;top:0px;}body:not(.rtl) .elementor-436 .elementor-element.elementor-element-867cdf3{left:0px;}body.rtl .elementor-436 .elementor-element.elementor-element-867cdf3{right:0px;}/* Start custom CSS for html, class: .elementor-element-867cdf3 */@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500;font-display:swap;src:url("https://beauty-school-pg.vercel.app/assets/fonts/playfair-500.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;src:url("https://beauty-school-pg.vercel.app/assets/fonts/playfair-600.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:500;font-display:swap;src:url("https://beauty-school-pg.vercel.app/assets/fonts/playfair-italic-500.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:600;font-display:swap;src:url("https://beauty-school-pg.vercel.app/assets/fonts/playfair-italic-600.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("https://beauty-school-pg.vercel.app/assets/fonts/source-sans-400.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("https://beauty-school-pg.vercel.app/assets/fonts/source-sans-600.woff2") format("woff2")}

.bslp{
  --bordo:#773142;--deep:#4E1F2B;--noir:#2B1319;--rose:#EADADD;--off:#FAF7F5;
  --gold:#C6A15B;--gold-lt:#DCBD84;--nude:#E7D6C4;--ink:#3D2F35;--gray:#5e5458;--whats:#25D366;

  --fp:"Playfair Display",serif;
  --ft:"Source Sans 3",sans-serif;

  --h1:clamp(2.4rem, 1.4rem + 4.2vw, 4rem);
  --h2:clamp(1.85rem, 1.4rem + 1.9vw, 2.75rem);
  --h3:clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
  --lead:clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
  --body:1.0625rem;

  --secy:clamp(3rem, 2.2rem + 3.4vw, 6rem);
  --gap:clamp(1.4rem, 2.4vw, 2.8rem);
  --r:16px;--rb:10px;--wrap:1200px;

  font-family:var(--ft);font-size:var(--body);line-height:1.65;color:var(--ink);
  background:var(--off);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.bslp *,.bslp *::before,.bslp *::after{box-sizing:border-box;margin:0;padding:0}
.bslp img{max-width:100%;height:auto;display:block}
.bslp ul,.bslp ol{list-style:none}
/* Reset mínimo: não zera background, color nem border aqui, senão
   `.bslp button` (0,1,1) venceria as variantes `.bslp-btn--*` (0,1,0)
   e os botões ficariam sem fundo, sem cor e sem borda. */
.bslp button{font:inherit;cursor:pointer}
.bslp a{color:var(--bordo);text-decoration:none}
.bslp :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.bslp-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.bslp-center{text-align:center}
/* Bloco de CTA no fim de uma secao. Sem isso o botao encosta no conteudo
   de cima: a regra existia so em duas secoes, e nas outras o vao era zero.
   Vale para div, nao para o <p class="bslp-micro bslp-center">, que tem
   espacamento proprio. */
.bslp-sec div.bslp-center{margin-top:clamp(2rem,3vw,3rem)}

/* ── bordas brancas: o navegador dá 8px de margem ao body ── */
body:has(.bslp){margin:0;background:var(--noir,#2B1319)}

/* ── tipografia ──
   Sem `color` nos seletores de elemento: `.bslp h1` (0,1,1) venceria
   `.bslp-hero__title` (0,1,0) e o H1 do hero sairia bordô sobre o noir.
   A cor vem das classes de contexto, logo abaixo. */
.bslp h1,.bslp h2,.bslp h3{font-family:var(--fp);font-weight:500}
.bslp h1{font-size:var(--h1);font-weight:600;line-height:1.06;letter-spacing:-.015em}
.bslp h2{font-size:var(--h2);line-height:1.14;letter-spacing:-.005em}
.bslp h3{font-size:var(--h3);line-height:1.25}
/* padrão claro; as seções escuras sobrescrevem mais adiante */
.bslp-sec--light h1,.bslp-sec--light h2,.bslp-sec--light h3,
.bslp-sec--rose h1,.bslp-sec--rose h2,.bslp-sec--rose h3,
.bslp-sec--nude h1,.bslp-sec--nude h2,.bslp-sec--nude h3{color:var(--bordo)}
.bslp-lead{font-size:var(--lead);line-height:1.6}
.bslp-eyebrow{font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--bordo);margin-bottom:1rem;display:inline-flex;align-items:center;gap:.65rem}
.bslp-eyebrow::before{content:"";width:26px;height:1px;background:var(--gold)}
.bslp-eyebrow--gold{color:var(--gold-lt)}
.bslp-support{color:var(--gray);margin-top:.9rem}
.bslp-micro{font-size:.875rem;color:var(--gray);line-height:1.5;display:flex;align-items:center;gap:.5rem}
.bslp-micro--light{color:rgba(234,218,221,.72)}
.bslp-micro--lg{font-size:1.05rem}
.bslp-micro .bslp-i{width:16px;height:16px}
.bslp-quote{font-family:var(--fp);font-style:italic;font-size:clamp(1.3rem,1.1rem+.9vw,1.75rem);color:var(--bordo);line-height:1.4;border-top:2px solid var(--gold);padding-top:1.1rem;margin-top:2rem;display:inline-block}

/* ── ícones ── */
.bslp-i{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--bordo)}
.bslp-i--lg{width:32px;height:32px}

/* ── botões ── */
.bslp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:56px;padding:.95rem 2.2rem;border:0;border-radius:var(--rb);font-weight:600;font-size:1.05rem;letter-spacing:.01em;text-align:center;transition:background-color .25s,color .25s,transform .2s,box-shadow .3s,border-color .25s}
.bslp-btn:active{transform:translateY(1px)}
.bslp-btn--lg{min-height:64px;padding:1.15rem 2.7rem;font-size:1.12rem}
.bslp-btn--full{width:100%}
.bslp-btn .bslp-i{width:20px;height:20px}
.bslp-arrow{transition:transform .25s}
.bslp-btn:hover .bslp-arrow{transform:translateX(4px)}
/* CTA dourado: mais presença. Brilho pulsante discreto, brilho que
   atravessa no hover e leve elevação. */
.bslp-btn--gold{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,#E9CE9B,var(--gold-lt) 45%,var(--gold));
  color:var(--ink);font-weight:600;letter-spacing:.02em;
  box-shadow:0 14px 34px -10px rgba(198,161,91,.6),0 0 0 1px rgba(233,206,155,.5) inset;
  animation:bslpPulse 3.4s ease-in-out infinite;
}
.bslp-btn--gold::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .65s ease;
}
.bslp-btn--gold:hover::after{left:130%}
.bslp-btn--gold:hover{
  transform:translateY(-3px);animation-play-state:paused;
  box-shadow:0 22px 48px -10px rgba(198,161,91,.85),0 0 0 1px rgba(255,255,255,.6) inset;
}
.bslp-btn--gold .bslp-i{stroke:var(--ink)}
@keyframes bslpPulse{
  0%,100%{box-shadow:0 14px 34px -10px rgba(198,161,91,.6),0 0 0 1px rgba(233,206,155,.5) inset}
  50%    {box-shadow:0 18px 44px -10px rgba(198,161,91,.9),0 0 0 1px rgba(255,255,255,.6) inset}
}
.bslp-btn--primary{background:var(--bordo);color:var(--off);box-shadow:0 14px 32px -12px rgba(119,49,66,.6)}
.bslp-btn--primary:hover{background:var(--deep);transform:translateY(-3px);box-shadow:0 22px 46px -12px rgba(119,49,66,.75)}
.bslp-btn--outline{background:transparent;color:var(--bordo);border:2px solid var(--bordo)}
.bslp-btn--outline:hover{background:var(--bordo);color:var(--off);transform:translateY(-3px);box-shadow:0 18px 38px -14px rgba(119,49,66,.55)}
.bslp-btn--ghost{background:rgba(250,247,245,.04);color:var(--off);border:2px solid rgba(198,161,91,.6)}
.bslp-btn--ghost:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);transform:translateY(-3px);box-shadow:0 18px 38px -14px rgba(198,161,91,.6)}

/* ── seções ── */
.bslp-sec{position:relative;padding-block:var(--secy);overflow:hidden}
.bslp-sec--light{background:var(--off)}
.bslp-sec--rose{background:var(--rose)}
.bslp-sec--nude{background:#F3E9DD}
.bslp-sec--dark{
  background:
    radial-gradient(80% 60% at 82% 8%, rgba(198,161,91,.14), transparent 55%),
    radial-gradient(70% 60% at 10% 100%, rgba(119,49,66,.4), transparent 60%),
    linear-gradient(160deg,#23100F,var(--noir) 45%,var(--deep));
  color:var(--off);
}
.bslp-sec--dark h2,.bslp-sec--dark h3{color:var(--off)}
.bslp-sec--dark .bslp-lead{color:var(--rose)}
.bslp-sec--dark p:not(.bslp-lead):not(.bslp-eyebrow):not(.bslp-micro):not(.bslp-plan__note):not(.bslp-plan__rot):not(.bslp-bullets__intro){color:rgba(250,247,245,.84)}
.bslp-grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.3;mix-blend-mode:soft-light;background:url("https://beautyschoolteresopolis.com.br/wp-content/uploads/2026/07/gold-grain.webp") center/cover}
.bslp-sec--dark .bslp-wrap{position:relative;z-index:1}
.bslp-watermark{position:absolute;right:-6%;bottom:-14%;width:min(460px,48vw);opacity:.05;pointer-events:none;filter:brightness(3);z-index:0}
.bslp-watermark--big{left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(640px,88vw);opacity:.06}
.bslp-head{max-width:760px;margin-bottom:clamp(2.2rem,3.6vw,3.4rem)}
.bslp-head--center{margin-inline:auto;text-align:center}
.bslp-head--center .bslp-eyebrow{justify-content:center}
.bslp-head .bslp-lead{margin-top:1rem}
.bslp-sec--light .bslp-head .bslp-lead,.bslp-sec--rose .bslp-head .bslp-lead,.bslp-sec--nude .bslp-head .bslp-lead{color:var(--gray)}

/* ═════════ HEADER ═════════ */
.bslp-header{position:fixed;top:0;left:0;right:0;z-index:90;background:rgba(43,19,25,.97);box-shadow:0 4px 20px -12px rgba(0,0,0,.5)}
.bslp-header__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.65rem}
/* 44px e o minimo confortavel para o dedo; a logo tinha 40. */
.bslp-logo{display:inline-flex;align-items:center;gap:.6rem;min-height:44px}
.bslp-logo img{width:40px;height:40px}
.bslp-logo span{display:flex;flex-direction:column;line-height:1.05}
.bslp-logo strong{font-family:var(--fp);font-weight:600;font-size:1.22rem;color:var(--off)}
.bslp-logo small{font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);margin-top:2px}
.bslp-header__cta{min-height:42px;padding:.5rem 1.25rem;font-size:.9rem}

/* ═════════ HERO PARALLAX ═════════ */
.bslp-hero{
  position:relative;isolation:isolate;overflow:hidden;color:var(--off);
  /* luz contida: o noir domina, o dourado só insinua o canto superior direito */
  background:
    radial-gradient(100% 80% at 80% 6%, rgba(198,161,91,.13), transparent 52%),
    radial-gradient(85% 65% at 88% 26%, rgba(119,49,66,.34), transparent 62%),
    linear-gradient(158deg,#1E0D12 0%,var(--noir) 46%,#3A1721 100%);
  padding-top:calc(clamp(1.5rem,3vw,3rem) + 68px);padding-bottom:0;
}
.bslp-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:4;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold-lt) 50%,var(--gold) 80%,transparent);opacity:.7}
/* camada 1 — fundo. Máscara radial evita que o bokeh forme um retângulo
   claro visível atrás da cena; ele desvanece nas bordas. */
.bslp-hero__bg{
  position:absolute;inset:-6% 0;z-index:-3;
  /* O gradiente fica atrás da foto de fundo. Enquanto a arte P01 nao for
     gerada, ele sustenta a profundidade do hero sozinho. */
  background:
    url("https://beautyschoolteresopolis.com.br/wp-content/uploads/2026/10/estudio-sobrancelhas-hero-bg-desktop.webp") center/cover no-repeat,
    radial-gradient(70% 60% at 72% 26%, rgba(198,161,91,.5), transparent 62%),
    radial-gradient(60% 55% at 18% 88%, rgba(119,49,66,.6), transparent 68%);
  opacity:.26;will-change:transform;
  -webkit-mask-image:radial-gradient(120% 85% at 70% 30%,#000 25%,rgba(0,0,0,.35) 62%,transparent 88%);
          mask-image:radial-gradient(120% 85% at 70% 30%,#000 25%,rgba(0,0,0,.35) 62%,transparent 88%);
}
/* camada 2 — grão */
.bslp-hero__grain{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.35;mix-blend-mode:soft-light;background:url("https://beautyschoolteresopolis.com.br/wp-content/uploads/2026/07/gold-grain.webp") center/cover}
/* camada 3 — pétalas e partículas */
.bslp-fx{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
/* Pétalas: queda longa e sem pressa. O balanço lateral em keyframes
   intermediários evita a linha reta, que é o que denuncia "animação". */
.bslp-petal{
  position:absolute;top:-8%;width:22px;height:22px;
  background:radial-gradient(circle at 32% 28%,rgba(155,66,86,.85),rgba(78,31,43,.9) 72%);
  border-radius:70% 30% 65% 35%/60% 40% 60% 40%;
  filter:blur(.4px);
  animation:bslpFall cubic-bezier(.42,0,.58,1) infinite;
  will-change:transform,opacity;
}
.bslp-fx .bslp-petal:nth-child(1){left:8%;width:24px;height:24px;animation-duration:34s;animation-delay:-6s}
.bslp-fx .bslp-petal:nth-child(2){left:21%;width:13px;height:13px;animation-duration:52s;animation-delay:-21s}
.bslp-fx .bslp-petal:nth-child(3){left:33%;width:18px;height:18px;animation-duration:43s;animation-delay:-33s}
.bslp-fx .bslp-petal:nth-child(4){left:46%;width:11px;height:11px;animation-duration:58s;animation-delay:-12s}
.bslp-fx .bslp-petal:nth-child(5){left:60%;width:25px;height:25px;animation-duration:38s;animation-delay:-26s}
.bslp-fx .bslp-petal:nth-child(6){left:72%;width:14px;height:14px;animation-duration:49s;animation-delay:-4s}
.bslp-fx .bslp-petal:nth-child(7){left:84%;width:21px;height:21px;animation-duration:36s;animation-delay:-16s}
.bslp-fx .bslp-petal:nth-child(8){left:93%;width:12px;height:12px;animation-duration:61s;animation-delay:-44s}
.bslp-spark{
  position:absolute;top:-4%;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,rgba(220,189,132,.8),rgba(198,161,91,0) 72%);
  animation:bslpSpark linear infinite;will-change:transform,opacity;
}
.bslp-fx .bslp-spark:nth-child(9){left:14%;width:4px;height:4px;animation-duration:46s;animation-delay:-13s}
.bslp-fx .bslp-spark:nth-child(10){left:29%;width:5px;height:5px;animation-duration:62s;animation-delay:-31s}
.bslp-fx .bslp-spark:nth-child(11){left:43%;width:3px;height:3px;animation-duration:55s;animation-delay:-7s}
.bslp-fx .bslp-spark:nth-child(12){left:58%;width:6px;height:6px;animation-duration:70s;animation-delay:-42s}
.bslp-fx .bslp-spark:nth-child(13){left:71%;width:4px;height:4px;animation-duration:58s;animation-delay:-22s}
.bslp-fx .bslp-spark:nth-child(14){left:88%;width:5px;height:5px;animation-duration:66s;animation-delay:-53s}
@keyframes bslpFall{
  0%   {transform:translate3d(0,0,0) rotate(0deg);opacity:0}
  8%   {opacity:.42}
  25%  {transform:translate3d(14px,30vh,0) rotate(72deg)}
  50%  {transform:translate3d(-10px,60vh,0) rotate(150deg)}
  75%  {transform:translate3d(12px,90vh,0) rotate(232deg)}
  92%  {opacity:.34}
  100% {transform:translate3d(-6px,124vh,0) rotate(300deg);opacity:0}
}
@keyframes bslpSpark{
  0%   {transform:translate3d(0,0,0);opacity:0}
  14%  {opacity:.55}
  50%  {transform:translate3d(10px,60vh,0)}
  86%  {opacity:.45}
  100% {transform:translate3d(-8px,124vh,0);opacity:0}
}

.bslp-hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.5rem,3vw,3.5rem);align-items:end}
.bslp-hero__copy{padding-bottom:clamp(2.5rem,5vw,5rem);align-self:center}
.bslp-hero__title,.bslp-hero h1{color:var(--off);margin-bottom:1.3rem}
/* O H1 desta LP e o do briefing de SEO, palavra por palavra, e tem quase o
   dobro de caracteres do titulo curto das outras paginas. Na escala herdada
   ele quebrava em cinco linhas e comia o hero inteiro. `.bslp-hero h1` para
   vencer `.bslp h1`, que tambem e (0,1,1). */
.bslp-hero h1{font-size:clamp(2.1rem,1.5rem + 2.1vw,3.2rem);line-height:1.08}
.bslp-hero__title em{font-style:italic;font-weight:600;background:linear-gradient(100deg,var(--gold-lt),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.bslp-hero__copy .bslp-lead{color:var(--rose);max-width:34em}
.bslp-hero__copy .bslp-lead strong{color:var(--off);font-weight:600}
.bslp-hero__copy .bslp-support{color:rgba(234,218,221,.68)}

.bslp-hero__seals{display:flex;flex-wrap:wrap;gap:1.1rem clamp(1rem,2vw,1.9rem);margin-top:1.9rem}
.bslp-hero__seals li{display:flex;flex-direction:column;gap:.55rem;font-size:.82rem;line-height:1.3;color:var(--rose);position:relative;padding-right:clamp(1rem,2vw,1.9rem)}
.bslp-hero__seals li:not(:last-child)::after{content:"";position:absolute;right:0;top:4px;bottom:4px;width:1px;background:linear-gradient(var(--gold),transparent)}
.bslp-hero__seals strong{color:var(--off);font-weight:600}
.bslp-hero__seals .bslp-i{width:26px;height:26px;color:var(--gold-lt)}
/* Desktop: os 4 selos ficam sempre na mesma linha. Com wrap, a soma
   dos itens mais o gap passava da largura da coluna de texto e o
   quarto caia sozinho embaixo. */
@media(min-width:1180px){
  .bslp-hero__seals{flex-wrap:nowrap;gap:.9rem}
  .bslp-hero__seals li{min-width:0;padding-right:.9rem}
}
/* Abaixo de 1180 a coluna de texto do hero fica estreita demais para os
   quatro lado a lado sem espremer as palavras. Duas fileiras de dois. */
@media(min-width:901px) and (max-width:1179px){
  .bslp-hero__seals{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;gap:1.1rem 1.4rem}
  .bslp-hero__seals li:nth-child(2n)::after{display:none}
}

.bslp-hero__cta{margin-top:2rem;display:grid;gap:.85rem;justify-items:start}
.bslp-hero__cta .bslp-btn{width:100%;max-width:430px}

/* camada 4 — cena recortada. Fixa: sem parallax de rolagem nem de ponteiro. */
.bslp-hero__media{position:relative;align-self:end;justify-self:center;display:flex;align-items:flex-end}
/* Halo: luz por trás da cena, não uma mancha. Bem difuso e discreto,
   senão vira um "fundo" visível atrás do recorte. */
.bslp-hero__halo{
  position:absolute;inset:4% -16% 0 -16%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(198,161,91,.12),rgba(119,49,66,.06) 58%,transparent 80%);
  filter:blur(60px);
}
/* Sem máscara na base: a imagem encosta no fim do hero, sem esfumado. */
/* A cena do hero e um PNG recortado, entao nao leva moldura nem canto
   arredondado: so a sombra, que a descola do fundo escuro. */
.bslp-hero__img{
  width:100%;max-width:560px;height:auto;display:block;vertical-align:bottom;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.34)) drop-shadow(0 42px 70px rgba(0,0,0,.26));
}
.bslp-badge{position:absolute;left:-2%;top:12%;display:flex;flex-direction:column;align-items:center;justify-content:center;width:104px;height:104px;border-radius:50%;text-align:center;background:linear-gradient(135deg,var(--gold-lt),var(--gold));color:var(--ink);box-shadow:0 16px 36px -10px rgba(198,161,91,.6)}
.bslp-badge__n{font-family:var(--fp);font-weight:600;font-size:1.7rem;line-height:1}
.bslp-badge__l{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-top:3px;line-height:1.2}

/* camada 5 — bokeh de primeiro plano, 100% CSS */
.bslp-hero__front{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;will-change:transform}
/* Bokeh de primeiro plano: desfoque alto e opacidade baixa. Ele existe
   para dar profundidade, não para ser notado. */
.bslp-hero__front span{position:absolute;border-radius:50%;filter:blur(22px);opacity:.34}
.bslp-hero__front span:nth-child(1){width:170px;height:170px;left:-4%;bottom:6%;background:radial-gradient(circle,rgba(220,189,132,.34),transparent 72%)}
.bslp-hero__front span:nth-child(2){width:104px;height:104px;left:13%;bottom:-4%;background:radial-gradient(circle,rgba(198,161,91,.3),transparent 72%);filter:blur(17px)}
.bslp-hero__front span:nth-child(3){width:210px;height:210px;right:-5%;top:5%;background:radial-gradient(circle,rgba(220,189,132,.22),transparent 74%);filter:blur(30px)}
.bslp-hero__front span:nth-child(4){width:82px;height:82px;right:15%;bottom:3%;background:radial-gradient(circle,rgba(143,58,77,.34),transparent 72%);filter:blur(15px)}
.bslp-hero__front span:nth-child(5){width:132px;height:132px;left:33%;top:-5%;background:radial-gradient(circle,rgba(198,161,91,.18),transparent 74%);filter:blur(26px)}
.bslp-hero__front span:nth-child(6){width:62px;height:62px;left:56%;bottom:11%;background:radial-gradient(circle,rgba(220,189,132,.3),transparent 72%);filter:blur(13px)}
.bslp-hero__front span:nth-child(7){width:96px;height:96px;right:33%;top:19%;background:radial-gradient(circle,rgba(143,58,77,.24),transparent 74%);filter:blur(18px)}

/* ═════════ LETREIRO ═════════ */
.bslp-marquee-wrap{background:linear-gradient(90deg,var(--deep),var(--bordo),var(--deep));padding-block:.95rem}
.bslp-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.bslp-marquee__track{display:flex;width:max-content;animation:bslpMq 36s linear infinite}
.bslp-marquee:hover .bslp-marquee__track{animation-play-state:paused}
.bslp-marquee__grp{display:flex;align-items:center;flex:none}
@keyframes bslpMq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bslp-tag{padding-inline:clamp(1.1rem,2.6vw,2.2rem);white-space:nowrap;font-weight:600;font-size:.9rem;color:var(--off)}
.bslp-marquee__grp i{width:5px;height:5px;flex:none;border-radius:50%;background:var(--gold)}

/* ═════════ POR QUE ═════════ */
.bslp-why__in{max-width:760px;text-align:center;margin-inline:auto}
.bslp-why .bslp-eyebrow{justify-content:center}
.bslp-why__text{margin-top:1.6rem;display:grid;gap:1rem;color:var(--gray);font-size:var(--lead)}
.bslp-why__text p:first-child{font-family:var(--fp);font-size:1.4em;color:var(--bordo);line-height:1.3}

/* ═════════ PLAYER DE VÍDEO ═════════ */
.bslp-video{margin-top:clamp(1.8rem,3.2vw,2.6rem)}
.bslp-video__frame{
  position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:var(--noir);cursor:pointer;
  box-shadow:0 30px 60px -28px rgba(119,49,66,.5),0 0 0 1px rgba(198,161,91,.3);
  transition:box-shadow .35s,transform .35s;
}
.bslp-video__frame:hover{transform:translateY(-3px);box-shadow:0 38px 74px -28px rgba(119,49,66,.6),0 0 0 1px rgba(198,161,91,.55)}
.bslp-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bslp-video__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* véu escuro só enquanto está no modo silencioso */
.bslp-video__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(43,19,25,.15),rgba(43,19,25,.55));
  transition:opacity .4s;
}
.bslp-video.is-live .bslp-video__frame{cursor:default}
.bslp-video.is-live .bslp-video__frame::after,
.bslp-video.is-live .bslp-video__btn,
.bslp-video.is-live .bslp-video__hint{opacity:0;pointer-events:none}

.bslp-video__btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:88px;height:88px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold));
  box-shadow:0 18px 40px -12px rgba(198,161,91,.7);
  transition:transform .3s,box-shadow .3s,opacity .4s;
}
.bslp-video__btn svg{width:34px;height:34px;fill:var(--ink);margin-left:4px}
.bslp-video__frame:hover .bslp-video__btn{transform:translate(-50%,-50%) scale(1.08)}
/* anel pulsante: sinaliza que dá para tocar, sem poluir */
.bslp-video__ring{
  position:absolute;inset:-10px;border-radius:50%;
  border:2px solid rgba(220,189,132,.75);
  animation:bslpRing 2.6s ease-out infinite;
}
@keyframes bslpRing{
  0%{transform:scale(.9);opacity:.75}
  70%{transform:scale(1.35);opacity:0}
  100%{transform:scale(1.35);opacity:0}
}
.bslp-video__hint{
  position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:2;
  padding:.4rem 1rem;border-radius:100px;
  background:rgba(43,19,25,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(198,161,91,.35);
  color:var(--off);font-size:.82rem;font-weight:600;letter-spacing:.04em;
  transition:opacity .4s;
}
.bslp-video__cta{margin-top:clamp(1.4rem,2.4vw,2rem);display:grid;gap:.7rem;justify-items:center}

/* ═════════ MÉTODO ═════════ */
.bslp-method__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.bslp-method__media img{width:100%;border-radius:var(--r);box-shadow:0 30px 60px -25px rgba(0,0,0,.7);border:1px solid rgba(198,161,91,.25)}
.bslp-method__copy .bslp-lead{margin-block:1rem}

/* ═════════ GRADE ═════════ */
.bslp-grade__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.8rem,3.4vw,3.4rem);align-items:start}
/* Faixa panoramica entre o titulo e o conteudo da secao. O recorte 16:5 e
   proposital: em altura cheia a imagem virava o assunto da secao, e o
   assunto sao os cards logo abaixo. */
/* Mesma margem do .bslp-head logo acima, para o espaço antes e depois da
   imagem ficar parelho. Cada um tinha seu proprio valor de clamp, um pouco
   diferente do outro, e o resultado media 54px em cima contra 23px embaixo. */
/* A faixa acompanha a largura da grade de cards, e o respiro entre
   titulo, faixa e cards vem do `gap` desta coluna — nao de `margin`.
   No WordPress o tema zera margem de `figure`, e ai os cards encostam na
   imagem; `gap` nenhum tema anula. */
.bslp-perks .bslp-wrap{display:grid;gap:clamp(2.2rem,3.6vw,3.4rem)}
.bslp-perks .bslp-head{margin-bottom:0}
.bslp-perks .bslp-faixa{width:100%;margin:0;border-radius:var(--r);overflow:hidden;box-shadow:0 20px 44px -26px rgba(0,0,0,.4)}
.bslp-faixa img{width:100%;height:auto;display:block;aspect-ratio:16/5;object-fit:cover;object-position:center 42%}
.bslp-mods{display:grid;gap:.6rem}
.bslp-mod{border:1px solid rgba(119,49,66,.14);border-radius:var(--r);background:#fff;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.bslp-mod[open]{border-color:rgba(198,161,91,.6);box-shadow:0 10px 26px -18px rgba(119,49,66,.4)}
.bslp-mod summary{display:flex;align-items:center;gap:.85rem;padding:1rem 1.2rem;font-weight:600;font-size:1.02rem;color:var(--ink);cursor:pointer;list-style:none;min-height:52px}
.bslp-mod summary::-webkit-details-marker{display:none}
.bslp-mod summary:hover{color:var(--bordo)}
.bslp-mod summary span{font-family:var(--fp);font-weight:600;font-size:1.15rem;color:var(--gold);min-width:2.2ch}
.bslp-mod summary i{margin-left:auto;position:relative;width:18px;height:18px;flex:none}
.bslp-mod summary i::before,.bslp-mod summary i::after{content:"";position:absolute;inset:0;margin:auto;background:var(--bordo);transition:transform .3s}
.bslp-mod summary i::before{width:14px;height:1.5px}
.bslp-mod summary i::after{width:1.5px;height:14px}
.bslp-mod[open] summary i::after{transform:rotate(90deg)}
.bslp-mod p,.bslp-mod__list{padding:0 1.2rem 1.1rem 3.4rem;color:var(--gray);font-size:.97rem}
.bslp-mod__list li{position:relative;padding-left:1rem;line-height:1.55}
.bslp-mod__list li+li{margin-top:.3rem}
.bslp-mod__list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.bslp-grade__vis{display:grid;gap:1rem;position:sticky;top:96px}
.bslp-grade__vis figure{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 16px 40px -22px rgba(119,49,66,.4)}
.bslp-grade__vis img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s}
.bslp-grade__vis figure:hover img{transform:scale(1.05)}
.bslp-grade__vis figcaption{text-shadow:0 1px 3px rgba(43,19,25,.85);position:absolute;left:0;right:0;bottom:0;padding:.7rem 1rem;font-family:var(--fp);font-size:1.05rem;color:var(--off);background:linear-gradient(transparent,rgba(43,19,25,.85))}
.bslp-grade .bslp-center{margin-top:clamp(2rem,3vw,3rem);display:grid;gap:.7rem;justify-items:center}

/* ═════════ DIFERENCIAIS ═════════ */
.bslp-perks__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.bslp-perk{background:var(--off);border:1px solid rgba(198,161,91,.28);border-radius:var(--r);padding:clamp(1.5rem,2.4vw,2rem);transition:transform .3s,box-shadow .3s}
.bslp-perk:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(119,49,66,.45)}
.bslp-perk .bslp-i{color:var(--gold)}
.bslp-perk h3{margin-block:.9rem .5rem}
.bslp-perk p{color:var(--gray);font-size:.97rem}
/* Sao 7 diferenciais numa grade de 3 colunas: sem isto o setimo card fica
   sozinho na ultima linha, com um terco da largura dos de cima. */
.bslp-porque .bslp-perk:last-child:nth-child(3n+1){grid-column:1/-1}

/* ═════════ INVESTIMENTO ═════════ */
.bslp-price__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);align-items:stretch}
.bslp-plan{position:relative;display:flex;flex-direction:column;background:rgba(250,247,245,.05);border:1px solid rgba(198,161,91,.32);border-radius:var(--r);padding:clamp(1.8rem,3vw,2.4rem);text-align:center}
.bslp-plan--hot{border-color:rgba(198,161,91,.85);box-shadow:0 0 0 1px rgba(198,161,91,.3),0 28px 60px -30px rgba(198,161,91,.5);background:rgba(250,247,245,.08)}
.bslp-plan__flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold-lt),var(--gold));color:var(--ink);font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.34rem 1rem;border-radius:100px;white-space:nowrap}
.bslp-plan__flag--alt{background:var(--noir);border:1px solid rgba(198,161,91,.6);color:var(--gold-lt)}
.bslp-plan h3{color:var(--off);font-size:1.35rem}
/* Preço fora dos cards de investimento, nas seções de turma e de VIP.
   Precisa do mesmo peso do valor do card e de respiro antes do botão: sem
   a margem inferior ele encostava no CTA e os dois viravam um bloco só. */
.bslp-plan__note{
  font-family:var(--fp);font-weight:600;line-height:1.05;
  font-size:clamp(1.7rem,1.2rem + 1.7vw,2.4rem);
  color:var(--gold-lt);
  margin-top:1.8rem;margin-bottom:1.5rem;
}
.bslp-plan__note + .bslp-micro{margin-top:-1.1rem;margin-bottom:1.5rem}
.bslp-sec--light .bslp-plan__note{color:var(--bordo)}
/* Rotulo do preco. Come a margem de cima do .bslp-plan__note para os dois
   lerem como um bloco so, em vez de rotulo solto acima do valor. */
.bslp-plan__rot{font-weight:700;color:var(--ink);margin-top:1.8rem;margin-bottom:.2rem}
.bslp-plan__rot + .bslp-plan__note{margin-top:0}
.bslp-sec--dark .bslp-plan__rot{color:var(--off)}
/* O `+` do clamp precisa de espaco dos dois lados. Sem ele a expressao e
   invalida, o navegador descarta a DECLARACAO INTEIRA e o valor caia para
   17px, sem serifa e sem peso, virando o texto menos visivel do card. */
.bslp-plan__val{font-family:var(--fp);font-weight:600;font-size:clamp(2.1rem,1.5rem + 2vw,2.9rem);line-height:1.05;color:var(--off);margin-top:.9rem;white-space:nowrap}
.bslp-plan__val span{display:block;font-family:var(--ft);font-weight:400;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,247,245,.6);margin-bottom:.35rem}
.bslp-plan__cash{font-size:.95rem;color:rgba(250,247,245,.7) !important;margin-top:.45rem}
.bslp-plan ul{display:grid;gap:.6rem;margin-block:1.5rem;text-align:left}
.bslp-plan li{position:relative;padding-left:1.6rem;font-size:.97rem;color:rgba(250,247,245,.86)}
.bslp-plan li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:5px;border-left:1.6px solid var(--gold-lt);border-bottom:1.6px solid var(--gold-lt);transform:rotate(-45deg)}
/* margin-top:auto encosta os dois CTAs na base do card. A altura minima
   igual impede que um texto de duas linhas deixe um botao mais alto que o
   do card vizinho, que era o que desalinhava a dupla. */
.bslp-plan .bslp-btn{margin-top:auto;min-height:64px}
/* Ressalva do VIP, dentro do card. margin-top:auto sobe para ca (em vez de
   ficar no botao) para que a linha e o CTA fiquem colados na base juntos. */
.bslp-plan__extra{font-size:.9rem;color:rgba(250,247,245,.66) !important;text-align:left;margin-top:auto;margin-bottom:1rem}
.bslp-plan__extra + .bslp-btn{margin-top:0}
.bslp-price .bslp-micro{justify-content:center;margin-top:1.5rem}

/* ═════════ CERTIFICADO ═════════ */
.bslp-cert__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.bslp-cert__copy .bslp-lead{margin-block:1rem;color:var(--bordo);font-family:var(--fp);font-size:1.4rem}
.bslp-cert__copy p:not(.bslp-lead):not(.bslp-eyebrow):not(.bslp-plan__note):not(.bslp-plan__rot):not(.bslp-bullets__intro){color:var(--gray);margin-top:.85rem}
/* Este bloco nasceu para secao clara. Em secao escura o bordo e o cinza
   ficam praticamente invisiveis: o lead dava 1.9:1 sobre o noir. */
.bslp-sec--dark .bslp-cert__copy .bslp-lead{color:var(--rose)}
.bslp-sec--dark .bslp-cert__copy p:not(.bslp-lead):not(.bslp-eyebrow):not(.bslp-plan__note){color:rgba(250,247,245,.84)}
.bslp-cert__media img{width:100%;border-radius:var(--r);box-shadow:0 26px 55px -28px rgba(119,49,66,.5)}

/* ═════════ PARA QUEM ═════════ */
/* Lista de marcador, para os itens curtos que vem depois de "Isso
   proporciona:" / "E uma otima opcao para quem:". Antes eram linhas
   divisorias, que so funcionam quando cada item e um beneficio de peso;
   nesses dois blocos aquilo virava uma tabela sem cabecalho. */
/* Abre a lista: precisa de respiro acima (esta depois do lead) e de quase
   nenhum abaixo, senao nao le como cabecalho dos itens que vem em seguida. */
.bslp-bullets__intro{font-size:clamp(1.15rem,1rem + .5vw,1.4rem);font-weight:600;margin-top:2.6rem;margin-bottom:.9rem}
.bslp-sec--dark .bslp-bullets__intro{color:var(--off)}
.bslp-bullets{display:grid;gap:.55rem;margin-block:0 1.5rem}
.bslp-bullets li{position:relative;padding-left:1.2rem;font-size:var(--lead);line-height:1.5;color:var(--off)}
.bslp-bullets li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.bslp-bullets--ink li{color:var(--ink)}
.bslp-bullets--ink li::before{background:var(--bordo)}
.bslp-for__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);align-items:stretch}
/* Sao cinco itens numa grade de duas colunas: sem isso o ultimo card
   fica sozinho na linha, com metade da largura dos de cima. */
.bslp-for__grid>:last-child:nth-child(odd){grid-column:1/-1}
.bslp-for__intro{font-size:var(--lead);color:var(--ink);font-weight:600;margin-bottom:1rem}
.bslp-for__nota{font-size:var(--lead);color:var(--ink);margin-bottom:1.5rem}
/* Card sem <h3>: aqui o proprio texto e o titulo, entao herda o espaco
   e o contraste que o h3 teria — com --gray ele lia como legenda solta. */
.bslp-perk--solo p{margin-top:.9rem;color:var(--ink);font-size:1.05rem;line-height:1.5}

/* ═════════ MERCADO ═════════ */
.bslp-market__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.4rem);align-items:center}
.bslp-market__media img{width:100%;border-radius:var(--r);box-shadow:0 24px 50px -28px rgba(119,49,66,.45)}
.bslp-paths{display:grid;gap:.9rem}
.bslp-paths article{background:var(--off);border:1px solid rgba(198,161,91,.35);border-left:3px solid var(--gold);border-radius:12px;padding:1rem 1.2rem}
.bslp-paths strong{display:block;color:var(--bordo);font-family:var(--fp);font-size:1.15rem;margin-bottom:.2rem}
.bslp-paths p{color:var(--gray);font-size:.95rem}
.bslp-disclaimer{margin-top:clamp(2rem,3vw,2.8rem);padding:1.1rem 1.3rem;border-radius:12px;background:rgba(119,49,66,.06);border:1px solid rgba(119,49,66,.14);color:var(--gray);font-size:.92rem;max-width:900px}

/* ═════════ DEPOIMENTOS ═════════ */
.bslp-tst__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.bslp-tst figure{display:flex;flex-direction:column;background:var(--off);border-radius:var(--r);padding:clamp(1.6rem,2.6vw,2.1rem);box-shadow:0 14px 34px -22px rgba(119,49,66,.4)}
.bslp-tst__q{font-family:var(--fp);font-size:3.4rem;line-height:.6;color:var(--gold);margin-bottom:1rem}
.bslp-tst blockquote{font-family:var(--fp);font-style:italic;font-weight:500;font-size:1.16rem;line-height:1.45;color:var(--bordo);flex:1}
.bslp-tst figcaption{display:flex;align-items:center;gap:.8rem;margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--rose);font-size:.92rem;color:var(--gray)}
.bslp-tst figcaption strong{color:var(--ink)}
.bslp-tst figcaption span{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--rose);font-family:var(--fp);font-weight:600;font-size:1.2rem;color:var(--bordo);flex:none}
.bslp-tst .bslp-center{margin-top:clamp(2rem,3vw,3rem)}

/* ═════════ FAQ ═════════ */
.bslp-faq__wrap{max-width:800px}
.bslp-q{border-bottom:1px solid var(--nude)}
.bslp-q summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.15rem;font-weight:600;font-size:1.08rem;color:var(--ink);cursor:pointer;list-style:none;min-height:48px}
.bslp-q summary::-webkit-details-marker{display:none}
.bslp-q summary:hover{color:var(--bordo)}
.bslp-q summary i{position:relative;width:20px;height:20px;flex:none}
.bslp-q summary i::before,.bslp-q summary i::after{content:"";position:absolute;inset:0;margin:auto;background:var(--bordo);transition:transform .3s}
.bslp-q summary i::before{width:14px;height:1.5px}
.bslp-q summary i::after{width:1.5px;height:14px}
.bslp-q[open] summary i::after{transform:rotate(90deg)}
.bslp-q p{padding-bottom:1.3rem;color:var(--gray);max-width:64ch}

/* ═════════ ONDE VOCÊ VAI ESTUDAR ═════════ */
.bslp-local__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.8rem,3.4vw,3.2rem);align-items:center}
.bslp-map{position:relative;aspect-ratio:4/3.2;border-radius:var(--r);overflow:hidden;box-shadow:0 24px 50px -28px rgba(119,49,66,.45);border:1px solid rgba(198,161,91,.35)}
.bslp-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.9)}
.bslp-map__fb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;text-align:center;padding:1.4rem;background:linear-gradient(150deg,var(--rose),#F1E4E0 45%,var(--nude))}
.bslp-map__fb strong{font-size:1.1rem;color:var(--ink)}
.bslp-map__fb span{color:var(--gray);font-size:.92rem}
.bslp-map__fb .bslp-i--lg{margin-bottom:.4rem;color:var(--bordo)}
.bslp-map__cta{margin-top:.8rem;font-weight:600;color:var(--bordo) !important;border-bottom:1.5px solid var(--gold);padding-bottom:2px}
.bslp-map__open{position:absolute;top:.85rem;left:.85rem;z-index:2;display:inline-flex;align-items:center;gap:.4rem;min-height:42px;padding:.45rem .95rem;background:#fff;border-radius:var(--rb);box-shadow:0 8px 24px -8px rgba(43,34,38,.35);font-weight:600;font-size:.92rem;color:var(--bordo)}
.bslp-map__open .bslp-i{width:17px;height:17px}
.bslp-map__card{position:absolute;bottom:.85rem;left:.85rem;z-index:2;display:flex;align-items:center;gap:.7rem;max-width:calc(100% - 1.7rem);padding:.8rem 1.05rem;background:#fff;border-radius:var(--rb);box-shadow:0 10px 30px -10px rgba(43,34,38,.4);pointer-events:none}
.bslp-map__card strong{display:block;font-size:.94rem;color:var(--ink)}
.bslp-map__card span{font-size:.84rem;color:var(--gray)}
.bslp-local__list{display:grid;gap:1rem}
.bslp-local__list li{display:flex;gap:.9rem;align-items:flex-start}
.bslp-local__list .bslp-i{color:var(--gold);margin-top:3px}
.bslp-local__list strong{display:block;color:var(--bordo);font-family:var(--fp);font-size:1.15rem;margin-bottom:.15rem}
.bslp-local__list p{color:var(--gray);font-size:.95rem}
.bslp-local__end{display:flex;gap:.8rem;align-items:flex-start;margin-block:1.5rem;padding:1rem 1.2rem;background:var(--rose);border-radius:12px;font-weight:600;color:var(--ink)}
.bslp-local__end .bslp-i{color:var(--bordo)}
.bslp-local__acoes{display:flex;flex-wrap:wrap;gap:.8rem}

/* ═════════ CTA FINAL ═════════ */
.bslp-final{text-align:center}
.bslp-final__bg{position:absolute;inset:0;z-index:0;opacity:.26;background-image:url("https://beautyschoolteresopolis.com.br/wp-content/uploads/2026/10/estudio-sobrancelhas-hero-bg-desktop.webp")}
.bslp-final__in{position:relative;z-index:1;max-width:760px;display:grid;justify-items:center;gap:1.15rem}
.bslp-final .bslp-eyebrow{justify-content:center}
/* Selos do fecho: linha unica de itens curtos, nao lista empilhada — a
   secao inteira e centrada e uma coluna de 8 bullets empurraria o botao
   para fora da primeira olhada. */
.bslp-final__checks{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.1rem;max-width:620px}
.bslp-final__checks li{display:flex;align-items:center;gap:.4rem;font-size:.95rem;color:rgba(250,247,245,.88)}
.bslp-final__checks li::before{content:"✓";color:var(--gold-lt);font-weight:700}
.bslp-final .bslp-micro{justify-content:center}
.bslp-final .bslp-btn{margin-top:.4rem}

/* ═════════ WHATSAPP ═════════ */
.bslp-wa{position:fixed;right:clamp(1rem,3vw,1.6rem);bottom:clamp(1rem,3vw,1.6rem);z-index:80;display:flex;align-items:center;gap:.55rem;background:var(--whats);color:#fff;border:0;border-radius:100px;padding:.8rem 1.35rem;font-weight:600;font-size:.94rem;box-shadow:0 12px 30px -10px rgba(37,211,102,.55);transition:transform .25s}
.bslp-wa:hover{transform:translateY(-3px)}
.bslp-wa svg{width:23px;height:23px;flex:none}

/* ═════════ MODAL ═════════ */
.bslp-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1rem}
.bslp-modal[hidden]{display:none}
.bslp-modal__bg{position:absolute;inset:0;background:rgba(43,19,25,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.bslp-modal__card{position:relative;width:100%;max-width:460px;max-height:calc(100dvh - 2rem);overflow-y:auto;background:var(--off);border-radius:var(--r);padding:clamp(1.7rem,4vw,2.4rem);box-shadow:0 30px 80px -20px rgba(0,0,0,.6);animation:bslpIn .35s cubic-bezier(.2,.9,.3,1)}
@keyframes bslpIn{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
.bslp-modal__x{position:absolute;top:.9rem;right:.9rem;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ink);transition:background-color .2s}
.bslp-modal__x:hover{background:var(--rose)}
.bslp-modal__rose{width:40px;margin-bottom:.8rem}
.bslp-modal__card h3{margin-bottom:.25rem}
.bslp-modal__card>p{color:var(--gray);margin-bottom:1.4rem}
.bslp-modal__card form{display:grid;gap:1rem}
.bslp-modal__card .bslp-micro{justify-content:center;text-align:center}
.bslp-f{display:grid;gap:.35rem}
.bslp-f label{font-weight:600;font-size:.9rem}
.bslp-f input,.bslp-f select{min-height:48px;padding:.6rem .9rem;border:1px solid rgba(119,49,66,.25);border-radius:var(--rb);background:#fff;font:inherit;color:var(--ink);width:100%}
.bslp-f input:focus-visible,.bslp-f select:focus-visible{outline:2px solid var(--bordo);outline-offset:0;border-color:var(--bordo)}
.bslp-f--chk{grid-template-columns:auto 1fr;align-items:start;gap:.55rem;font-size:.86rem}
.bslp-f--chk input{min-height:0;width:18px;height:18px;margin-top:3px;accent-color:var(--bordo)}
.bslp-f--chk label{font-weight:400;color:var(--gray)}
.bslp-f__err{color:#A13030;font-size:.875rem}
/* campo-armadilha: fora da tela, mas não `display:none`, que alguns robôs detectam */
.bslp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ═════════ REVEAL ═════════ */
.bslp-rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.bslp-rv.is-in{opacity:1;transform:none}
/* O reveal esconde 41 blocos ate o JS marcar `is-in`. Onde o script nao
   roda, a pagina fica praticamente vazia. Dois casos reais:

   1. O editor do Elementor. O Custom Code so executa no site publicado,
      nunca dentro do editor, entao quem esta montando a pagina via um
      hero e mais nada.
   2. JavaScript bloqueado ou com erro antes desta parte.

   Em qualquer um dos dois o conteudo aparece inteiro, sem animacao. */
.elementor-editor-active .bslp-rv,
.elementor-editor-preview .bslp-rv,
.elementor-html .bslp-rv{opacity:1;transform:none;transition:none}
@media (scripting: none){
  .bslp-rv{opacity:1;transform:none;transition:none}
}

@media(prefers-reduced-motion:reduce){
  .bslp *,.bslp *::before,.bslp *::after{animation:none !important;transition:none !important}
  .bslp-rv{opacity:1;transform:none}
  .bslp-fx,.bslp-hero__front,.bslp-video__ring{display:none}
  /* sem o pulse, o CTA fica com a sombra forte fixa */
  .bslp-btn--gold{box-shadow:0 18px 44px -10px rgba(198,161,91,.9),0 0 0 1px rgba(255,255,255,.6) inset}
}

/* ═══════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════ */
@media(max-width:1024px){
  .bslp-perks__grid{grid-template-columns:repeat(2,1fr)}
  .bslp-grade__grid{grid-template-columns:1fr}
  .bslp-grade__vis{position:static;grid-template-columns:repeat(3,1fr)}
}


@media(max-width:900px){
  .bslp-hero{padding-top:calc(.75rem + 64px)}
  .bslp-hero__bg{background-image:url("https://beautyschoolteresopolis.com.br/wp-content/uploads/2026/10/estudio-sobrancelhas-hero-bg-mobile.webp")}
  /* `display:contents` promove os filhos do copy a filhos do grid,
     e aí o `order` intercala a foto logo depois da promessa.
     `align-items:center` é obrigatório: o valor `end` do desktop ancora
     a foto na base, mas em coluna ele jogaria tudo para a direita. */
  .bslp-hero__grid{display:flex;flex-direction:column;align-items:center;text-align:center}
  .bslp-hero__copy{display:contents}
  .bslp-hero__copy > .bslp-hero__title{order:2}
  .bslp-hero__copy > .bslp-lead{order:3;margin-inline:auto}
  /* Aqui a foto fica no meio do fluxo e não encosta na base da seção.
     Em vez de esfumar, ela pousa sobre um filete dourado: some o corte
     flutuante e ganha um "chão". Sem halo e sem sombra, que ao redor de
     um recorte pequeno passam a impressão de fundo. */
  .bslp-hero__media{order:4;max-width:400px;margin:.6rem auto 1.4rem;padding-bottom:2px}
  .bslp-hero__media::after{
    content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    width:min(340px,92%);height:2px;border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--gold) 16%,var(--gold-lt) 50%,var(--gold) 84%,transparent);
  }
  .bslp-hero__halo{display:none}
  .bslp-hero__img{-webkit-mask-image:none;mask-image:none;filter:none}
  .bslp-hero__copy > .bslp-support{order:5;margin-inline:auto}
  .bslp-hero__seals{order:6;justify-content:center}
  .bslp-hero__seals li{align-items:center;text-align:center}
  /* O selo de preco herda order 6 e, com o mesmo valor, o flex respeita a
     ordem do HTML: ele cai depois dos selos e antes do CTA. Sem isso
     ficaria com order 0 e subiria para cima do H1. */
  .bslp-hero__copy > .bslp-duo{order:6;justify-content:center;max-width:560px;width:100%}
  .bslp-hero__cta{order:7;justify-items:center;width:100%;margin-bottom:1.6rem}
  .bslp-hero__cta .bslp-btn{max-width:none}
  .bslp-hero__cta .bslp-micro{justify-content:center}
  .bslp-hero__img{max-width:100%}

  .bslp-method__grid,.bslp-cert__grid,.bslp-for__grid,.bslp-market__grid,.bslp-local__grid{grid-template-columns:1fr}
  .bslp-map{aspect-ratio:16/11}
  .bslp-local__list li{text-align:left}
  .bslp-local__acoes{justify-content:center}
  .bslp-local__acoes .bslp-btn{width:100%}
  .bslp-cert__media{order:-1}
  .bslp-market__media{order:-1}
  .bslp-price__grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}

  /* mobile: textos, ícones e botões centralizados */
  .bslp-head{margin-inline:auto;text-align:center}
  .bslp-eyebrow{justify-content:center}
  .bslp-method__copy,.bslp-cert__copy,
  .bslp-market__grid>div:first-child{text-align:center}
  .bslp-method__copy>*,.bslp-cert__copy>*,.bslp-market__grid>div:first-child>*{margin-inline:auto}
  .bslp-perk{text-align:center}
  .bslp-perk .bslp-i{margin-inline:auto}
  .bslp-paths article{text-align:center;border-left:none;border-top:3px solid var(--gold)}
  .bslp-bullets li{text-align:left}
  .bslp-for__intro{text-align:center}
  .bslp-disclaimer{margin-inline:auto;text-align:center}

  /* Um CTA por vez, sempre do mesmo tamanho. Antes eles variavam de 62% a
     100% da largura conforme o texto, e o da seção de turma ainda saía
     encostado à esquerda enquanto o resto da página ficava centrado. */
  .bslp-sec .bslp-btn,.bslp-hero__cta .bslp-btn{
    width:100%;max-width:360px;margin-inline:auto;
  }
  .bslp-plan .bslp-btn{max-width:none}
}

@media(max-width:768px){
  /* Sem o filete dourado: com ele o texto fica visualmente fora do eixo. */
  .bslp-eyebrow::before{display:none}
  .bslp-eyebrow{gap:0;justify-content:center;text-align:center}

  .bslp-tst__grid{grid-template-columns:1fr}
  .bslp-header__cta{display:none}
  .bslp-perks__grid{grid-template-columns:1fr}
  .bslp-grade__vis{grid-template-columns:1fr}
  .bslp-hero__seals{gap:.9rem}
  .bslp-hero__seals li{padding-right:.9rem;font-size:.82rem}
  .bslp-hero__seals .bslp-i{width:22px;height:22px}
  .bslp-badge{width:88px;height:88px;left:0;top:8%}
  .bslp-badge__n{font-size:1.4rem}
  .bslp-badge__l{font-size:.72rem}
  .bslp-arrow{display:none}
  .bslp-wa{padding:.85rem}
  .bslp-wa span{display:none}
  .bslp-mod p,.bslp-mod__list{padding-left:1.2rem}
}

/* ═══════════════════════════════════════════════
   TABLET (769px a 1024px)
   Fica por último de propósito: precisa vencer o bloco de 900px,
   que também casa nessa faixa e tem a mesma especificidade.
   ═══════════════════════════════════════════════ */
@media(min-width:769px) and (max-width:1024px){
  /* `.bslp-hero h1` para vencer `.bslp h1`, que também é (0,1,1):
     com `.bslp-hero__title` (0,1,0) o tamanho não mudaria. */
  .bslp-hero h1{font-size:clamp(2.4rem,1.9rem + 1.8vw,3.05rem)}
  .bslp-hero__copy > .bslp-lead{max-width:32em}
  .bslp-hero__media{max-width:430px}

  /* 2 colunas onde 1 só deixaria o bloco largo demais para ler */
  .bslp-tst__grid{grid-template-columns:repeat(2,1fr)}
  .bslp-tst figure:last-child{grid-column:1/-1;max-width:calc(50% - var(--gap)/2);margin-inline:auto}
  .bslp-price__grid{grid-template-columns:repeat(2,1fr);max-width:none}
  .bslp-local__grid{grid-template-columns:repeat(2,1fr)}
  .bslp-map{aspect-ratio:4/3.4}
  .bslp-perks__grid{grid-template-columns:repeat(3,1fr)}

  /* medida de leitura confortável nos blocos de texto corrido */
  .bslp-why__in,.bslp-faq__wrap{max-width:660px}
  .bslp-video{max-width:760px;margin-inline:auto}
  .bslp-disclaimer{max-width:660px}
}

/* ═══════════════════════════════════════════════════════════════
   ICONE NA FRENTE DO TEXTO — SO NO DESKTOP
   Os cards nasceram com o icone empilhado acima do titulo. Da 1025px
   para cima ele passa para a lateral: a grade tem duas colunas e o
   icone ocupa as duas linhas (titulo em cima, texto embaixo), entao
   ancora o bloco pelo lado em vez de alongar o cartao.
   As linhas sao declaradas explicitamente porque `grid-row:1/-1` num
   grid sem linhas explicitas resolve para uma linha so, e o titulo
   era empurrado para fora da coluna.
   Abaixo de 1025px nada muda: icone em cima, como sempre foi.
   ═══════════════════════════════════════════════════════════════ */
@media(min-width:1025px){
  .bslp-perk{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:1rem;align-items:start}
  .bslp-perk > .bslp-i{grid-column:1;grid-row:1/span 2;margin-top:.15rem}
  .bslp-perk h3{grid-column:2;grid-row:1;margin-block:0 .35rem}
  .bslp-perk p{grid-column:2;grid-row:2;margin:0}
  /* Card de frase unica: sem <h3>, o texto sobe para a primeira linha. */
  .bslp-perk--solo p{grid-row:1/span 2;align-self:center}
}

/* Bloco de bullets centralizado na coluna, itens alinhados entre si.
   Os modulos de "O que voce vai aprender" ficam de fora: la a lista
   mora dentro do accordion e segue o recuo do proprio card. */
.bslp-bullets{width:fit-content;max-width:100%;margin-inline:auto}
.bslp-bullets li{text-align:left}
.bslp-bullets__intro{text-align:center}

/* ═══════════════════════════════════════════════════════════════
   BLOCOS DAS LPs DE CURSO COM DUAS MODALIDADES
   Vieram da LP de manicure. Blocos que a LP de limpeza de pele nao tem: as duas modalidades lado a
   lado no hero e no CTA final, a sequencia de fotos da pratica, a tabela
   comparativa turma x VIP e a galeria de trabalhos das alunas.
   ═══════════════════════════════════════════════════════════════ */

/* ── duas modalidades no hero ──
   Dois selos de preco em vez de uma linha de texto: preco/valor e um dos
   maiores clusters da pesquisa, e a diferenca de R$ 20 entre turma e VIP
   e o argumento comercial mais forte da pagina. */
/* Uma modalidade so: o selo fica com largura de selo, nao de faixa. Sem
   o teto ele esticava pela coluna inteira do hero e sobrava vazio a
   direita do preco. */
.bslp-duo{display:flex;flex-wrap:wrap;align-items:stretch;gap:.7rem;margin-top:1.6rem;max-width:420px}
.bslp-duo__item{
  flex:1 1 170px;min-width:0;padding:.85rem 1.1rem;border-radius:var(--rb);
  background:rgba(250,247,245,.06);border:1px solid rgba(198,161,91,.34);
  /* Texto centrado dentro do selo. No celular o hero inteiro ja e
     centralizado e o selo acompanhava; no desktop ele ficava alinhado a
     esquerda, com o preco descolado da borda direita da caixa. */
  text-align:center;
}
.bslp-duo__item--destaque{border-color:rgba(198,161,91,.6);background:rgba(198,161,91,.1)}
.bslp-duo__rot{display:block;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt)}
.bslp-duo__sub{display:block;font-size:.78rem;color:rgba(234,218,221,.8);margin-top:.1rem}
.bslp-duo__val{display:block;font-family:var(--fp);font-size:1.5rem;font-weight:600;color:var(--off);margin-top:.35rem;line-height:1.1}
.bslp-duo__val small{font-family:var(--ft);font-size:.72rem;font-weight:600;letter-spacing:.06em;color:rgba(234,218,221,.75);display:block}
.bslp-duo__ou{align-self:center;font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(234,218,221,.6)}
@media(max-width:480px){
  .bslp-duo__ou{display:none}
  .bslp-duo__item{flex-basis:100%}
}

/* ── sequencia da pratica: demonstracao → maquina → degrade → resultado ── */
/* auto-fit, e nao um numero fixo de colunas: a sequencia nasceu com
   quatro quadros e hoje esta com tres, porque uma arte ainda nao foi
   gerada. Com coluna fixa sobrava um buraco no fim da linha. */
.bslp-seq{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem;margin-top:clamp(2rem,3vw,3rem)}
.bslp-seq figure{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 18px 42px -24px rgba(0,0,0,.6)}
.bslp-seq img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .6s}
.bslp-seq figure:hover img{transform:scale(1.05)}
.bslp-seq figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.65rem .85rem;
  font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--off);
  text-shadow:0 1px 3px rgba(43,19,25,.9);
  background:linear-gradient(transparent,rgba(30,13,18,.88));
}
.bslp-seq__n{display:block;font-family:var(--fp);font-size:1.05rem;color:var(--gold-lt);line-height:1}
@media(max-width:900px){.bslp-seq{grid-template-columns:repeat(2,1fr)}}



/* ── galeria de resultados dos alunos ── */
.bslp-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.bslp-gal figure{border-radius:var(--r);overflow:hidden;box-shadow:0 16px 40px -24px rgba(119,49,66,.45)}
.bslp-gal img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s}
.bslp-gal figure:hover img{transform:scale(1.05)}
@media(max-width:760px){.bslp-gal{grid-template-columns:repeat(2,1fr)}}

/* Bloco de texto que vem DEPOIS da sequencia de fotos, dentro da mesma
   secao escura do metodo. Sem isso ele encostava nas fotos. */
.bslp-method__extra{margin-top:clamp(2.4rem,4vw,3.6rem);max-width:760px}
.bslp-method__extra h3{color:var(--off);margin-bottom:.9rem}
/* Os dois selos de preco no CTA final, que e centralizado. */
.bslp-duo--center{justify-content:center;margin-inline:auto;max-width:560px}
/* A grade de planos vem logo abaixo da tabela comparativa. */
.bslp-price__grid--cmp{margin-top:clamp(2rem,3vw,3rem)}

/* Secao de duas colunas que ficou com um filho so (a foto ainda nao
   existe): vira coluna unica e centralizada, em vez de deixar metade da
   largura vazia. Quando a foto entrar, a regra deixa de valer sozinha. */
.bslp-cert__grid:has(> :only-child){grid-template-columns:1fr;max-width:820px;margin-inline:auto}



/* ═══════════════════════════════════════════════════════════════
   RESPIRO DOS BOTOES
   Nas secoes em que o CTA e irmao direto do texto (apresentacao,
   cabeleireiro feminino, formacao profissional), ele nascia colado no
   ultimo paragrafo: o vao media zero. As secoes com .bslp-center ja
   tinham 32px, entao a pagina ficava com dois comportamentos.
   ═══════════════════════════════════════════════════════════════ */
.bslp-sec :is(p, ul, h2, h3) + .bslp-btn{margin-top:clamp(1.5rem,2.6vw,2.2rem)}
.bslp-hero__cta{margin-top:clamp(1.5rem,2.6vw,2.2rem)}

/* ═══════════════════════════════════════════════════════════════
   BOTAO EM TELA PEQUENA
   O padding lateral de 2.7rem comia 86px dos 290px disponiveis, e o
   rotulo quebrava em duas linhas com o botao chegando a 93px de altura.
   Abaixo de 520px o padding encolhe e a fonte cede um ponto.
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:520px){
  .bslp-btn{padding:.9rem 1.1rem;font-size:1rem;min-height:54px;gap:.45rem}
  .bslp-btn--lg{padding:1rem 1.2rem;font-size:1.04rem;min-height:58px}
  .bslp-btn .bslp-i{width:18px;height:18px}
  /* o icone de cadeado e a seta somem: em 290px eles roubam o espaco do
     rotulo, que e o que a pessoa precisa ler */
  .bslp-btn--lg > .bslp-i:first-child,.bslp-btn--lg .bslp-arrow{display:none}
}

/* ── tabela comparativa turma x VIP ──
   Tabela de verdade, nao grade de divs: sao dados comparaveis, e o
   leitor de tela precisa anunciar a linha e a coluna. No celular ela
   rola na horizontal em vez de quebrar a comparacao. */
.bslp-cmp{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);border:1px solid rgba(198,161,91,.32)}
.bslp-cmp table{width:100%;min-width:520px;border-collapse:collapse;font-size:.95rem}
.bslp-cmp th,.bslp-cmp td{padding:.85rem 1.1rem;text-align:center;border-bottom:1px solid rgba(198,161,91,.18)}
.bslp-cmp tbody tr:last-child th,.bslp-cmp tbody tr:last-child td{border-bottom:0}
.bslp-cmp thead th{
  font-family:var(--fp);font-size:1.05rem;font-weight:600;color:var(--off);
  background:rgba(198,161,91,.14);border-bottom:1px solid rgba(198,161,91,.38);
}
.bslp-cmp tbody th{
  text-align:left;font-family:var(--ft);font-size:.82rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-lt);white-space:nowrap;
}
.bslp-cmp td{color:rgba(250,247,245,.88)}
.bslp-cmp .bslp-cmp__val{font-family:var(--fp);font-size:1.2rem;color:var(--off)}
.bslp-cmp col.is-vip,.bslp-cmp td.is-vip{background:rgba(198,161,91,.07)}
.bslp-cmp__nota{margin-top:1.1rem;text-align:center}
/* A grade de planos vem logo abaixo da tabela comparativa. */
.bslp-price__grid--cmp{margin-top:clamp(2rem,3vw,3rem)}

/* ── continuidade: cards que levam para outras paginas ──
   A secao esta comentada no HTML ate as LPs de especializacao
   existirem. O estilo fica pronto para quando ela entrar. */
a.bslp-perk{display:block;color:inherit}
a.bslp-perk:hover{border-color:rgba(198,161,91,.6)}
a.bslp-perk h3{color:var(--bordo)}
.bslp-next__mais{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;
  font-size:.85rem;font-weight:600;letter-spacing:.04em;color:var(--gold)
}

/* ═══════════════════════════════════════════════════════════════
   HERO — AJUSTE FINO DE LAYOUT
   O hero media 1700px no celular e 932px no desktop: alto demais nos
   dois. O conteudo nao mudou; o que sobrava era espacamento, somado
   duas vezes (o gap da coluna mais a margem de cada bloco).
   ═══════════════════════════════════════════════════════════════ */

/* O selo sai de cima da cabeca da aluna e desce para o canto, sobre a
   cadeira bordo — dourado sobre bordo tem contraste, e ali ele nao
   cobre rosto nenhum. */
.bslp-badge{top:auto;bottom:12%;left:-3%}

@media(min-width:901px){
  /* No desktop quem dita o respiro passa a ser um gap unico na coluna
     do texto, em vez da margem de cada bloco. Tira ~90px da altura e
     faz o hero caber numa tela de 900px. */
  .bslp-hero__copy{
    display:flex;flex-direction:column;gap:1.15rem;
    /* O respiro da base era de 5rem, pensado para um hero sem preco. Com
       os dois selos e o CTA na coluna, ele so empurrava o hero para fora
       da primeira tela. */
    padding-bottom:clamp(1.5rem,2.4vw,2.5rem);
  }
  /* Zera a margem de todos os blocos da coluna de uma vez: quem espaca e
     o gap. Antes, cada bloco somava a sua propria margem ao gap e os
     vaos saiam diferentes entre si. */
  .bslp-hero__copy > *{margin-block:0}
}

@media(max-width:900px){
  /* Mesma ideia no celular: as margens zeram e o gap da coluna manda
     sozinho. Antes os vaos variavam de 34px a 61px entre blocos, sem
     criterio — agora sao todos iguais. */
  .bslp-hero__grid{gap:1.4rem}
  .bslp-hero__copy > .bslp-hero__title{margin-bottom:0}
  .bslp-hero__copy > .bslp-support{margin-top:0;font-size:.98rem}
  .bslp-hero__seals{margin-top:0}
  .bslp-hero__copy > .bslp-duo{margin-top:0}
  .bslp-hero__cta{margin-top:0;margin-bottom:1.2rem}
  .bslp-hero__media{margin:0 auto}

  /* Os dois selos de preco ficam lado a lado tambem no celular: um
     embaixo do outro ocupava 213px de altura para dizer dois numeros,
     e separava a turma do VIP, que precisam ser comparados. */
  .bslp-duo__item{flex:1 1 calc(50% - .35rem);padding:.75rem .6rem}
  .bslp-duo__rot{font-size:.62rem}
  .bslp-duo__sub{font-size:.72rem}
  .bslp-duo__val{font-size:1.25rem}
  .bslp-badge{bottom:8%;left:0}
}


/* ═══════════════════════════════════════════════════════════════
   CARD DOS DOIS FORMATOS (secao "90% de aulas praticas")
   O texto de turma reduzida x VIP vinha solto sobre o fundo escuro,
   sem cartao e sem borda — era o unico bloco da pagina nessa
   condicao, e no desktop ele esticava por 760px de linha corrida.
   Agora sao dois cartoes lado a lado, que e o que o conteudo pede:
   duas modalidades para comparar.
   ═══════════════════════════════════════════════════════════════ */
.bslp-method__extra{
  max-width:1000px;margin-inline:auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:var(--gap);align-items:stretch;
}
.bslp-method__card{
  display:flex;flex-direction:column;text-align:left;
  background:rgba(250,247,245,.05);
  border:1px solid rgba(198,161,91,.32);
  border-radius:var(--r);
  padding:clamp(1.6rem,2.6vw,2.2rem);
  box-shadow:0 24px 54px -34px rgba(0,0,0,.6);
}
/* O VIP e a modalidade que a secao esta vendendo: ganha a borda viva,
   igual ao selo de preco do hero. */
.bslp-method__card--vip{border-color:rgba(198,161,91,.6);background:rgba(198,161,91,.09)}
.bslp-method__card h3{margin-top:0;margin-bottom:.75rem}
/* A lista e global-mente centralizada na coluna; dentro do cartao ela
   volta a encostar na borda esquerda, junto do titulo. */
.bslp-method__card .bslp-bullets{width:auto;margin-inline:0;margin-bottom:0}
/* `margin-top:auto` cola o preco no rodape do cartao, entao os dois
   cartoes terminam na mesma altura mesmo com textos de tamanhos
   diferentes. */
.bslp-method__card .bslp-plan__rot{
  margin-top:auto;padding-top:1.4rem;
  border-top:1px solid rgba(198,161,91,.25);
}
.bslp-method__card .bslp-plan__note{margin-bottom:0}

/* ═══════════════════════════════════════════════════════════════
   ULTIMA LINHA DA GRADE DE CARDS — DESKTOP
   A grade e de 3 colunas e as secoes tem 4 e 8 cards: sobrava 1 card
   com um terco da largura ("Unhas Posticas") e 2 cards encostados a
   esquerda ("SPA dos Pes" e "Formacao completa"), com um buraco a
   direita nos dois casos.
   A grade passa a ter 6 colunas com cada card ocupando 2. Isso da
   meias-colunas para deslocar a sobra: 1 card sozinho vira faixa de
   largura inteira, 2 cards comecam na coluna 2 e ficam centrados.
   ═══════════════════════════════════════════════════════════════ */
@media(min-width:769px){
  .bslp-perks__grid{grid-template-columns:repeat(6,1fr)}
  .bslp-perks__grid > *{grid-column:span 2}
  .bslp-perks__grid > :last-child:nth-child(3n+1){grid-column:1/-1}
  .bslp-perks__grid > :nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}
  /* O card que vira faixa tem 1120px de largura: sem teto, a frase
     corre a linha inteira e fica dificil de ler. */
  .bslp-perks__grid > :last-child:nth-child(3n+1) p{max-width:62ch}
}

/* ═══════════════════════════════════════════════════════════════
   CHECKS DO CTA FINAL — CELULAR
   Centralizados e em linha, cada item comecava num ponto diferente da
   tela e a lista virava um bloco de texto irregular. Em coluna, com
   todos os "✓" no mesmo eixo, da para correr o olho pela lista.
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .bslp-final__checks{
    flex-direction:column;flex-wrap:nowrap;
    align-items:flex-start;justify-content:flex-start;
    justify-self:stretch;width:100%;max-width:none;gap:.55rem;
  }
  .bslp-final__checks li{text-align:left;align-items:flex-start}
  .bslp-final__checks li::before{line-height:1.5}
}


/* ═══════════════════════════════════════════════════════════════
   "CURSO PROFISSIONAL" — LEITURA
   Eram quatro paragrafos corridos sobre fundo escuro, e no celular
   ainda vinham centralizados: cada linha comecava num ponto diferente
   e o olho perdia o inicio da proxima. Agora a coluna inteira alinha
   a esquerda e os tres fatos viram lista.
   ═══════════════════════════════════════════════════════════════ */
.bslp-bullets--flush{width:auto;max-width:52ch;margin-inline:0}
.bslp-bullets--flush li{padding-left:1.5rem}
.bslp-bullets--flush li + li{margin-top:.2rem}
.bslp-market__grid > div:first-child > .bslp-lead{max-width:52ch}

@media(max-width:900px){
  /* Vence a regra generica que centraliza as colunas de texto das
     secoes de duas colunas abaixo de 900px. */
  .bslp-market__grid > div:first-child{text-align:left}
  .bslp-market__grid > div:first-child > *{margin-inline:0}
  .bslp-market__grid > div:first-child > .bslp-eyebrow{justify-content:flex-start;text-align:left}
  .bslp-market__grid > div:first-child > .bslp-btn{margin-inline:0}
}


/* ═══════════════════════════════════════════════════════════════
   HERO NO DESKTOP — CENA MAIOR E SELO NO ALTO
   A arte tem 18% do topo transparente: era altura cobrada no layout
   sem nada aparecendo. Puxando a imagem para cima por essa faixa e
   deixando ela avancar na calha da direita, a cena cresce de 552px
   para 672px de largura (+22%) com o hero na MESMA altura de 881px —
   a coluna de texto nao perde um pixel.
   O selo sai da base e vai para o alto a direita, na faixa em que a
   arte so ocupa o centro (x 49%-60%): fica acima das alunas sentadas
   e nao encosta em ninguem.
   ═══════════════════════════════════════════════════════════════ */
@media(min-width:1180px){
  /* A margem negativa fica no .bslp-hero__media, nao na <img>: assim a
     caixa do selo (que e `position:absolute` nela) continua coincidindo
     com a arte, e os percentuais do selo seguem a imagem. */
  .bslp-hero__media{width:calc(100% + 120px);margin-right:-120px;margin-top:-150px}
  .bslp-hero__img{max-width:760px}
}
@media(min-width:1180px){
  .bslp-badge{top:13%;bottom:auto;left:auto;right:1%}
}
/* Entre 901 e 1179 a cena nao cresce, e o selo passa a ocupar uma fatia
   maior da altura dela: com os mesmos 13% ele descia ate a linha dos
   ombros das alunas. Encolhe e sobe para a faixa vazia do topo. */
@media(min-width:901px) and (max-width:1179px){
  .bslp-badge{top:6%;bottom:auto;left:auto;right:1%;width:88px;height:88px}
  .bslp-badge__n{font-size:1.4rem}
  .bslp-badge__l{font-size:.7rem}
}


/* O player entrou no lugar da foto da secao de apresentacao: ali ele e
   coluna do grid, nao um bloco que vem depois de um texto, entao perde
   a margem de cima — e acompanha a foto na inversao do celular, em que
   a midia sobe para antes do texto. */
.bslp-video--media{margin-top:0}
@media(max-width:900px){.bslp-video--media{order:-1}}


/* ═══════════════════════════════════════════════════════════════
   EXCLUSIVO DA LP DE DESIGN DE SOBRANCELHAS
   ═══════════════════════════════════════════════════════════════ */

/* ── tecnicas da formacao como etiquetas (apresentacao) ──
   O documento lista as cinco tecnicas numa linha separada por "•". Em
   paragrafo elas sumiam no meio do texto; como etiquetas o olho conta
   as cinco de uma vez. */
.bslp-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:.9rem 1.6rem}
.bslp-chips li{
  padding:.45rem .95rem;border-radius:999px;font-size:.9rem;font-weight:600;line-height:1.2;
  color:var(--bordo);background:var(--off);border:1px solid rgba(198,161,91,.45);
}
.bslp-chips li:first-child{background:var(--bordo);border-color:var(--bordo);color:var(--off)}
@media(max-width:900px){.bslp-chips{justify-content:center}}

/* ── "Aprenda a ser Designer de Sobrancelhas" ──
   O segundo paragrafo do cabecalho e texto de apoio, nao lead. */
.bslp-designer .bslp-head > p:not(.bslp-lead):not(.bslp-eyebrow){margin-top:.8rem;color:var(--gray)}

/* ── "Muito mais que Design de Sobrancelhas" ──
   A secao visual propria que o documento pede para as tecnicas. Quatro
   cartoes com foto: no desktop ficam os quatro numa linha, sem sobra; no
   tablet viram 2x2; no celular, um por linha com a foto mais baixa para
   nao virar uma parede de imagens. */
.bslp-tec__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.bslp-tec__card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--off);border:1px solid rgba(198,161,91,.28);border-radius:var(--r);
  transition:transform .3s,box-shadow .3s;
}
.bslp-tec__card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(119,49,66,.5)}
.bslp-tec__card figure{margin:0;overflow:hidden}
.bslp-tec__card img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform .6s}
.bslp-tec__card:hover img{transform:scale(1.05)}
.bslp-tec__txt{padding:clamp(1.2rem,2vw,1.6rem);display:grid;gap:.45rem}
.bslp-tec__n{font-family:var(--fp);font-size:.95rem;font-weight:600;letter-spacing:.08em;color:var(--gold)}
.bslp-tec__txt h3{margin:0}
.bslp-tec__txt p{margin:0;color:var(--gray);font-size:.97rem}
@media(max-width:1024px){.bslp-tec__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  .bslp-tec__grid{grid-template-columns:1fr}
  .bslp-tec__card img{aspect-ratio:16/10}
  .bslp-tec__txt{text-align:center}
}


/* Botao que quebra em duas linhas no celular ("Falar com a Beauty School
   pelo WhatsApp") herdava o line-height 1.65 do texto corrido e chegava a
   85px de altura. Em botao a entrelinha e de rotulo, nao de paragrafo. O
   min-height segura a altura dos botoes de uma linha so.
   `.bslp .bslp-btn` porque `.bslp button{font:inherit}` (0,1,1) traz o
   line-height junto no atalho `font` e venceria um `.bslp-btn` sozinho. */
@media(max-width:520px){.bslp .bslp-btn{line-height:1.25}}


/* H1 desta LP e mais longo que o da manicure ("...Design de Sobrancelhas
   Profissional em Teresopolis"): no tamanho herdado ele quebrava em 4
   linhas e o hero ia a 971px, passando de uma tela de 900px. Com 2.75rem
   fica em 3 linhas e o hero volta a caber. */
@media(min-width:1180px){.bslp-hero h1{font-size:2.75rem}}


/* Selo "90%" no celular. Herdado da manicure ele ficava embaixo a
   esquerda, sobre a poltrona; nesta arte ali esta a ponta da chaise e os
   pes da cliente. O canto de cima a direita e vazio em todos os tamanhos,
   entao o selo fica la tambem no celular. */
@media(max-width:900px){.bslp-badge{top:3%;bottom:auto;left:auto;right:0}}


/* ═══════════════════════════════════════════════════════════════
   HERO DESTA ARTE
   A cena do hero tem 27% do topo transparente.
   - Celular: esse ar virava um vao de 144px entre o texto e a cabeca da
     professora. A imagem sobe 72px e o selo desce para a faixa vazia a
     direita (x > 74% esta livre ate 36% da altura).
   - Desktop: a imagem cresce de 672px para 762px de largura (+13%),
     avancando 80px no vao entre as colunas e 130px na calha da direita;
     a margem negativa maior come o ar do topo e o hero fica na mesma
     altura. Selo conferido por pixel contra a arte.
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .bslp-hero__media{margin-top:-72px}
  .bslp-badge{top:16%}
}
@media(min-width:1180px){
  .bslp-hero__media{width:calc(100% + 210px);margin-left:-80px;margin-right:-130px;margin-top:-275px}
  .bslp-hero__img{max-width:840px}
  .bslp-badge{top:23%}
}/* End custom CSS */