/* v20 — transição suave entre foto e fundo, sem escurecer a fotografia
   -------------------------------------------------------------------
   Por que as tentativas anteriores falhavam:

   A fusão era feita com mask-image no ELEMENTO, cujas porcentagens são
   relativas ao hero — mas a foto não começa na borda do hero. Ela é
   `auto 100%` encostada à direita, então sua borda esquerda cai em 59,3%
   num viewport de 1440px e em 65,6% num de 1900px. A rampa da máscara era
   gasta em área vazia e, no ponto onde a foto realmente começa, a máscara
   já estava em ~55% — a foto surgia de uma vez, contra um grafite
   absolutamente chapado. Nenhuma porcentagem fixa resolve isso.

   Solução: o degradê vira uma CAMADA DE BACKGROUND com o mesmo
   background-size e background-position da foto. Assim seus 0% e 100%
   coincidem com as bordas da própria imagem, em qualquer viewport, e a
   transição acontece dentro da faixa escura da foto — sem véu sobre a
   Jéssica. */

/* ---------------- Desktop e tablet ---------------- */

/* O elemento passa a ter EXATAMENTE as dimensões da foto renderizada.
   aspect-ratio 1920/2880 com top/bottom fixos faz o navegador calcular
   largura = altura x 2/3, que é a largura natural da imagem. A partir daí
   as porcentagens da máscara são coordenadas da própria foto: 0% é a borda
   esquerda dela, 100% a direita. O alinhamento deixa de ser adivinhação. */
.hero .photo-layer{
  top:0;
  right:0;
  bottom:0;
  left:auto;
  width:auto;
  aspect-ratio:1920/2880;
  background-image:url('/files/hero-v13.webp');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  opacity:1;
  filter:saturate(.9) contrast(1.02) brightness(1.12);
  mask-image:linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.04) 6%,
    rgba(0,0,0,.16) 14%,
    rgba(0,0,0,.38) 22%,
    rgba(0,0,0,.62) 30%,
    rgba(0,0,0,.84) 38%,
    rgba(0,0,0,.95) 44%,
    #000 52%);
}

.hero .photo-soft{
  top:-4%;
  right:-2%;
  bottom:-4%;
  left:auto;
  width:auto;
  aspect-ratio:1920/2880;
  background-image:url('/files/hero-v13.webp');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform:none;
  opacity:.4;
  filter:blur(52px) saturate(.66) brightness(1.06);
  mask-image:linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.08) 10%,
    rgba(0,0,0,.3) 26%,
    rgba(0,0,0,.66) 44%,
    #000 62%);
}

/* Sem radial: era ele que somava mais 22% de grafite sobre o rosto.
   Densidade só onde mora o texto; zerado antes de chegar na Jéssica. */
.hero .overlay{
  background:linear-gradient(90deg,
    #1b2021 0%,
    rgba(27,32,33,.99) 30%,
    rgba(27,32,33,.94) 46%,
    rgba(27,32,33,.7) 56%,
    rgba(27,32,33,.32) 66%,
    rgba(27,32,33,.08) 75%,
    rgba(27,32,33,0) 84%);
}

/* ---------------- Carrossel de tratamentos ---------------- */

/* O scroll terminava com a borda do último card exatamente colada na borda
   da viewport — folga zero — e qualquer arredondamento sub-pixel o cortava.
   Medido: offsetLeft+offsetWidth do último card == scrollWidth do contêiner.

   Nem padding-right da viewport nem margin-right no card resolvem: ambos são
   descartados do scrollWidth quando o conteúdo transborda. Um item de flex
   real conta. Usar ::after porque pseudo-elemento não aparece em
   carouselTrack.children, então a contagem de cards no JS não muda. */
.treatment-track::after{
  content:"";
  flex:0 0 clamp(28px,5vw,76px);
  align-self:stretch;
}

/* ---------------- Mobile ---------------- */

@media(max-width:800px){
  /* A foto ocupa a largura inteira (cover): não há emenda lateral.
     O degradê ancorado dissolve a borda de baixo dentro da própria foto. */
  .hero .photo-layer{
    inset:0 0 auto;
    width:100%;
    height:64%;
    aspect-ratio:auto;
    background-image:
      linear-gradient(180deg,
        rgba(27,32,33,0) 46%,
        rgba(27,32,33,.18) 64%,
        rgba(27,32,33,.55) 80%,
        rgba(27,32,33,.88) 92%,
        #1b2021 100%),
      url('/files/hero-v13.webp');
    background-size:cover,cover;
    background-position:50% 12%,50% 12%;
    background-repeat:no-repeat,no-repeat;
    opacity:1;
    filter:saturate(.92) contrast(1.02) brightness(1.16);
    mask-image:none;
    -webkit-mask-image:none;
  }

  .hero .photo-soft{opacity:0}

  /* Tag "Estética & Cosmetologia" sai no mobile: a headline abre a capa. */
  .hero .eyebrow{display:none}

  /* Headline 4px menor (46px -> 42px). */
  .hero h1{font-size:42px}

  .hero .overlay{
    background:linear-gradient(180deg,
      rgba(27,32,33,0) 0%,
      rgba(27,32,33,.04) 20%,
      rgba(27,32,33,.20) 29%,
      rgba(27,32,33,.56) 36%,
      rgba(27,32,33,.86) 45%,
      rgba(27,32,33,.97) 56%,
      #1b2021 66%,
      #1b2021 100%);
  }
}

@media(max-width:430px){
  .hero .photo-layer{background-position:50% 10%,50% 10%}

  /* Headline 4px menor (43px -> 39px). */
  .hero h1{font-size:39px}
}