/* =========================================================
   PROBEL — Antecipa Black Friday (V2)
   Complemento de style.css. Só o que é novo nesta versão:
   carrossel de modelos, cards de modelo e blocos de tamanho.
   Carregado DEPOIS de style.css, sem sobrescrever nada dela.
   ========================================================= */

/* ---------- Carrossel ---------- */
.carrossel{ position:relative; }

.carrossel__pista{
  display:flex; gap:18px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:2px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* respiro nas pontas para o card não colar na borda da tela */
  padding:4px 2px 10px;
}
.carrossel__pista::-webkit-scrollbar{ display:none; }
.carrossel__pista:focus-visible{ outline:2px solid var(--azul); outline-offset:6px; }

.carrossel__seta{
  position:absolute; top:38%; z-index:3;
  width:46px; height:46px; display:none; place-items:center;
  border:1px solid rgba(13,23,32,.14); border-radius:100px;
  background:rgba(255,255,255,.94); color:var(--noite);
  cursor:pointer; backdrop-filter:blur(6px);
  box-shadow:0 14px 34px -18px rgba(4,28,51,.5);
  transition:transform .4s var(--ease-out), opacity .3s, background .3s;
}
.carrossel__seta svg{ width:20px; height:20px; }
.carrossel__seta--ant{  left:calc(var(--gut) * -1 + 6px); }
.carrossel__seta--prox{ right:calc(var(--gut) * -1 + 6px); }
.carrossel__seta:hover{ background:var(--ouro); transform:scale(1.07); }
.carrossel__seta:disabled{ opacity:.26; pointer-events:none; }
@media (min-width:1000px){ .carrossel__seta{ display:grid; } }

.carrossel__barra{
  height:2px; margin-top:22px; border-radius:2px;
  background:rgba(13,23,32,.1); overflow:hidden;
}
.carrossel__barra i{
  display:block; height:100%; width:0;
  background:var(--azul); border-radius:inherit;
  transition:width .18s linear;
}

.hint-swipe{
  display:flex; align-items:center; gap:.7em; justify-content:center;
  margin:16px 0 0; font-size:.78rem; letter-spacing:.08em;
  color:var(--tinta-mid); text-transform:none;
}
.hint-swipe i{
  width:26px; height:1px; background:currentColor; opacity:.5;
  animation:swipeHint 1.9s var(--ease) infinite;
}
@keyframes swipeHint{
  0%,100%{ transform:translateX(-5px); opacity:.25; }
  50%    { transform:translateX(5px);  opacity:.7; }
}
@media (min-width:1000px){ .hint-swipe{ display:none; } }
@media (prefers-reduced-motion:reduce){ .hint-swipe i{ animation:none; } }

/* ---------- Card de modelo ---------- */
.mcard{
  flex:0 0 auto; scroll-snap-align:start;
  width:clamp(228px, 74vw, 282px);
  display:flex; flex-direction:column;
  background:var(--branco); border:1px solid rgba(13,23,32,.08);
  border-radius:var(--r); overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
}
@media (min-width:700px){ .mcard{ width:282px; } }
.mcard:hover{
  transform:translateY(-5px); border-color:rgba(206,176,110,.55);
  box-shadow:0 26px 50px -26px rgba(4,28,51,.34);
}

.mcard__img{
  /* As 15 fotos sao geradas em branco puro (#fff), entao o card nao precisa
     de fundo proprio nem de blend: a foto encosta no card sem emenda. */
  position:relative; aspect-ratio:4/3;
  background:var(--branco);
  display:grid; place-items:center; overflow:hidden;
}
.mcard__img img{
  width:100%; height:100%; object-fit:contain; padding:10px;
  transition:transform .7s var(--ease-out);
}
.mcard:hover .mcard__img img{ transform:scale(1.045); }

.mcard__tag{
  position:absolute; top:10px; left:10px; z-index:2;
  padding:.42em .85em; border-radius:100px;
  background:var(--azul); color:#fff;
  font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}

.mcard__body{
  display:flex; flex-direction:column; gap:6px;
  padding:18px 18px 20px; flex:1;
}
.mcard__tipo{
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--azul);
}
.mcard__nome{
  margin:2px 0 0; font-family:var(--sans);
  font-size:1.14rem; font-weight:500; line-height:1.25;
  color:var(--tinta); letter-spacing:-.01em;
}
.mcard__alt{ font-size:.86rem; color:var(--tinta-mid); }
.mcard__btn{
  margin-top:auto; align-self:stretch; padding-top:1em; padding-bottom:1em;
  font-size:.66rem; letter-spacing:.11em;
}

/* ---------- Blocos de tamanho (seção escura) ---------- */
.tamanhos{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}
.tcard{
  display:flex; flex-direction:column; gap:4px;
  padding:26px 24px 22px;
  border:1px solid rgba(206,176,110,.26); border-radius:var(--r);
  background:linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  transition:transform .5s var(--ease-out), border-color .4s, background .4s;
}
.tcard:hover{
  transform:translateY(-4px);
  border-color:rgba(206,176,110,.7);
  background:linear-gradient(170deg, rgba(206,176,110,.12), rgba(255,255,255,.02));
}
.tcard__nome{
  font-size:1.5rem; font-weight:400; line-height:1.1;
  color:var(--creme); letter-spacing:-.015em;
}
.tcard__medida{ font-size:.9rem; color:rgba(247,243,236,.62); }
.tcard__cta{
  display:inline-flex; align-items:center; gap:.5em; margin-top:16px;
  font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ouro);
}
.tcard__cta svg{ width:1.1em; height:1.1em; transition:transform .45s var(--ease-out); }
.tcard:hover .tcard__cta svg{ transform:translateX(4px); }

/* ---------- Seção de tecnologia sobre o creme ----------
   Na versão anterior essa seção vivia sobre o azul-noite, então .layer e
   .btn--ghost foram desenhados com texto claro. Aqui ela está sobre o creme:
   sem estas regras o texto fica claro sobre claro. */
.sec--creme .layer{
  background:rgba(255,255,255,.72);
  border-color:rgba(0,90,152,.14);
}
.sec--creme .layer:hover{
  background:var(--branco);
  border-color:rgba(206,176,110,.75);
}
.sec--creme .layer em{ color:var(--azul); opacity:.4; }
.sec--creme .layer h4{ color:var(--tinta); }
.sec--creme .layer p{ color:var(--tinta-mid); }

.sec--creme .btn--ghost{
  --fg:var(--noite);
  border-color:rgba(0,90,152,.35);
}
.sec--creme .btn--ghost:hover{ color:var(--noite); border-color:var(--ouro); }