/* =========================================================
   PROBEL — ESQUENTA BLACK FRIDAY 2026
   Repele a identidade da campanha oficial (MATERIAL BF26)
   sobre a estrutura de style.css + bf.css.

   Cores oficiais, medidas nos vetores da agencia:
     pink    #EF236C
     laranja #F47518
     preto   #000000
     claro   #F2F1EF

   A campanha na web (ver mockup do e-commerce da Probel no
   material) e preto-dominante com pink de destaque. Por isso
   aqui so troco a paleta: a alternancia escuro/claro das
   secoes continua valendo.
   ========================================================= */

:root{
  --noite:      #000000;
  --noite-2:    #140910;
  --azul:       #f47518;   /* laranja da campanha */
  --azul-luz:   #ff8c33;
  --ouro:       #ef236c;   /* pink da campanha  */
  --ouro-luz:   #ff5c92;
  --ouro-fumo:  rgba(239,35,108,.18);
  --creme:      #f2f1ef;
  --creme-2:    #e4e2df;
  --tinta:      #0a0a0a;
  --tinta-mid:  #55555a;

  --pink:    #ef236c;
  --laranja: #f47518;
}

/* ---------- Correcoes dos valores que style.css cravou ----------
   Esses rgba() nasceram do azul-noite e do dourado. Sem reescrever,
   a pagina fica com fantasmas da paleta antiga. */
body{ background:#000; color:var(--creme); }

.header.stuck{ background:rgba(0,0,0,.92); border-bottom:1px solid rgba(239,35,108,.22); }
.hero__bg::after{
  background:
    linear-gradient(100deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.86) 38%, rgba(0,0,0,.5) 68%, rgba(0,0,0,.8) 100%),
    radial-gradient(120% 80% at 18% 28%, rgba(239,35,108,.34), transparent 62%);
}
.loja__bg::after{
  background:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.82) 45%,rgba(0,0,0,.96));
}
.strip{ border-block:1px solid rgba(239,35,108,.2); background:var(--noite-2); }
.tech__media figure{ border-color:rgba(239,35,108,.3); }
.tech__media figcaption{ background:linear-gradient(transparent,rgba(0,0,0,.9)); }
.tech__fig figcaption{ background:linear-gradient(transparent,rgba(0,0,0,.85)); }
.footer{ background:#000; border-top:1px solid rgba(239,35,108,.22); }

/* O botao principal: pill pink de texto branco, como no e-commerce */
.btn{ --bg:var(--pink); --fg:#fff; box-shadow:0 10px 30px -12px rgba(239,35,108,.8); }
.btn::after{ background:linear-gradient(100deg,var(--laranja),#ff9d4d 45%,var(--laranja)); }
.btn:hover{ color:#fff; box-shadow:0 18px 40px -14px rgba(239,35,108,.9); }
.btn--ghost{ --bg:transparent; --fg:#fff; border:1px solid rgba(255,255,255,.4); }
.btn--ghost::after{ background:var(--pink); }
.btn--ghost:hover{ color:#fff; border-color:var(--pink); }
.sec--creme .btn--ghost{ --fg:#000; border-color:rgba(0,0,0,.28); }
.sec--creme .btn--ghost:hover{ color:#fff; border-color:var(--pink); }

/* ---------- Lockups oficiais da campanha ----------
   Sao imagens porque a fonte display da marca nao existe em web font.
   Nunca redesenhar com fonte parecida: o lockup e ativo de marca. */
.lockup{ display:block; height:auto; }
.lockup--hero{ width:min(460px, 78%); margin-bottom:26px; }
.lockup--rodape{ width:170px; opacity:.9; }
.lockup--cta{ width:min(360px, 70%); margin:0 auto 22px; }

/* ---------- Asterisco da campanha, como elemento grafico ---------- */
.aster{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  opacity:.9; will-change:transform;
}
.aster--gira{ animation:asterGira 28s linear infinite; }
@keyframes asterGira{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .aster--gira{ animation:none; } }

.hero .aster--1{ width:clamp(120px,17vw,260px); top:7%;  right:-4%; }
.hero .aster--2{ width:clamp(70px,9vw,140px);   bottom:14%; left:-3%; opacity:.75; }
.cta-final .aster--1{ width:clamp(90px,12vw,180px); top:8%; left:4%; opacity:.5; }
.cta-final .aster--2{ width:clamp(70px,9vw,130px); bottom:10%; right:6%; opacity:.5; }
@media (max-width:700px){
  .hero .aster--1{ width:120px; top:4%; right:-8%; }
  .hero .aster--2{ display:none; }
}

/* ---------- Faixa de condicoes comerciais ----------
   Cada item so aparece se estiver ligado no config. Enquanto o cliente
   nao confirmar as condicoes, a faixa inteira fica fora do ar. */
.condicoes{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(26px,5vw,70px); justify-content:center;
  padding:clamp(18px,2.4vw,26px) var(--gut); background:var(--pink);
}
.condicoes img{ height:clamp(30px,4.4vw,46px); width:auto; }

/* Selo tipografico: numeral didone + rotulo grotesco, que e a receita
   dos selos da campanha. Numero vem do config, nunca do arquivo grafico. */
.cond{ display:flex; align-items:center; gap:.5em; color:#000; }
.cond__n{
  font-family:var(--serif);
  font-variation-settings:"opsz" 96;
  font-size:clamp(2.5rem,5.6vw,3.9rem);
  font-weight:500; line-height:.86; letter-spacing:-.02em;
  display:inline-flex; align-items:flex-start;
}
.cond__n i{
  font-style:normal; font-size:.46em; line-height:1;
  margin-top:.16em; margin-left:.04em;
}
.cond__t{
  font-size:clamp(.72rem,1.1vw,.86rem); font-weight:700; line-height:1.08;
  letter-spacing:.04em; text-transform:uppercase;
}
@media (max-width:560px){
  .condicoes{ gap:30px; }
  .cond__n{ font-size:2.6rem; }
}
.condicoes__nota{
  flex-basis:100%; text-align:center; margin:0;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
}

/* ---------- Selo de desconto do hero ---------- */
.off{ display:flex; align-items:center; gap:18px; margin:0 0 20px; }
.off img{ width:clamp(150px,21vw,250px); height:auto; }

/* ---------- Blocos de foto da campanha ----------
   Recorte reto dentro de um retangulo de cor, que e como a propria
   campanha monta as pecas. Nada de silhueta recortada. */
.fotobloco{ position:relative; isolation:isolate; }
.fotobloco::before{
  content:""; position:absolute; z-index:-1; border-radius:2px;
  inset:auto -14px -14px 22%; aspect-ratio:1; background:var(--laranja);
}
.fotobloco img{ width:100%; height:100%; object-fit:cover; border-radius:2px; }

/* ---------- Ajustes de cor nos componentes herdados ---------- */
.mcard{ border-color:rgba(0,0,0,.1); }
.mcard:hover{ border-color:var(--pink); box-shadow:0 26px 50px -26px rgba(239,35,108,.4); }
.mcard__tag{ background:var(--pink); }
.mcard__tipo{ color:var(--laranja); }
.carrossel__barra i{ background:var(--pink); }
.carrossel__seta:hover{ background:var(--pink); color:#fff; }
.sec--creme .layer{ background:#fff; border-color:rgba(0,0,0,.1); }
.sec--creme .layer:hover{ border-color:var(--pink); }
.sec--creme .layer em{ color:var(--pink); opacity:.55; }

.tcard{ border-color:rgba(239,35,108,.3); }
.tcard:hover{ border-color:var(--pink); background:linear-gradient(170deg, rgba(239,35,108,.16), rgba(255,255,255,.02)); }
.tcard__cta{ color:var(--pink); }

.selos li::before{
  border-color:rgba(239,35,108,.6);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.8 8.4l2.7 2.7L12.2 5.4' fill='none' stroke='%23ef236c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px 11px no-repeat;
}

/* A onda dourada da marca institucional nao pertence a esta campanha */
.wave-deco{ display:none; }

/* ---------- Modal ---------- */
.modal__caixa{ background:#0b0b0b; border:1px solid rgba(239,35,108,.3); }
.field input:focus{ border-color:var(--pink); }

/* ---------- CTA final: bloco pink cheio, como as pecas ---------- */
/* Preto sobre o pink, que e como a campanha assina as pecas.
   Branco sobre #EF236C da so 4.1:1; preto da 5.9:1. */
.cta-final{ background:var(--pink); color:#000; position:relative; overflow:hidden; }
.cta-final h2, .cta-final .h-lg{ color:#000; }
.cta-final .eyebrow{ color:#000; }
.cta-final .eyebrow::before{ background:#000; }
.cta-final .lead{ color:rgba(0,0,0,.78); }
.cta-final .btn{ --bg:#000; --fg:#fff; box-shadow:0 10px 30px -12px rgba(0,0,0,.6); }
.cta-final .btn::after{ background:#fff; }
.cta-final .btn:hover{ color:#000; }

/* Selo de Pix sem percentual: o asterisco da campanha segura o peso
   visual que o numeral segurava no selo de parcelamento. */
.cond--texto{ gap:.6em; }
.cond__aster{ width:clamp(30px,3.6vw,42px); height:auto; flex:none; }
.cond__t--grande{ font-size:clamp(.82rem,1.3vw,1rem); line-height:1.12; }

/* ---------- Hero em duas colunas no desktop ----------
   Em coluna unica o lockup empurrava o hero para a altura inteira da
   tela e sobrava metade vazia a direita. Aqui a marca fica a esquerda
   e o discurso com os botoes a direita, e o hero encolhe junto.
   No celular nada muda: continua empilhado na mesma ordem. */
@media (min-width:960px){
  .hero{
    min-height:auto;
    padding-block:clamp(130px,15vh,170px) clamp(70px,9vh,100px);
  }
  .hero__grid{
    grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    align-items:center;
    gap:clamp(36px,4.4vw,74px);
  }
  .hero__marca{ display:flex; flex-direction:column; align-items:flex-start; }
  .lockup--hero{ width:min(420px,94%); margin-bottom:0; }
  .hero__texto .h-xl{ font-size:clamp(2.2rem,3.6vw,3.3rem); max-width:none; }
  .hero__texto .selos{ gap:10px 20px; }
  /* Com o selo de 70% no topo, o pe da coluna ficou livre de novo. */
  /* Deslocamento em px, nao em %: com % o asterisco bate no "F" de
     FRIDAY nas telas grandes e some de vez nas muito largas. */
  .hero .aster--2{ width:clamp(110px,9vw,150px); left:-90px; bottom:4%; opacity:.85; }
}

/* Telas largas: o lockup pode respirar mais sem esticar o hero */
@media (min-width:1280px){
  .lockup--hero{ width:min(470px,94%); }
  .hero__texto .h-xl{ font-size:clamp(2.6rem,3.1vw,3.6rem); }
}