/* HoneyKiss, seções específicas da home.
   Se algo daqui passar a ser usado em outra página, mova para components.css. */


/* ============================================================ HERO
   Slider de altura total. Só a foto e um botão pill centralizado a 72px
   do rodapé, sem nenhum texto, como na referência. */
.hero{position:relative;height:100vh;min-height:520px;overflow:hidden}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease);
  pointer-events:none}
.hero__slide[data-active="true"]{opacity:1;pointer-events:auto}
.hero__slide .frame{position:absolute;inset:0;border-radius:0}
.hero__slide .frame img{width:100%;height:100%;object-fit:cover}
.hero__cta{position:absolute;left:0;right:0;bottom:72px;z-index:2;display:flex;justify-content:center;
  padding-inline:var(--gutter)}
.hero__dots{position:absolute;left:0;right:0;bottom:28px;z-index:3;display:flex;justify-content:center;gap:8px}
.hero__dots button{width:9px;height:9px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.55);transition:background-color var(--dur) var(--ease)}
.hero__dots button[aria-current="true"]{background:#fff}
/* Placeholder do hero: bloco de marca legível enquanto a foto real não existe */
.hero__slide .frame.is-empty{background:var(--color-blush)}
.hero__slide .frame.is-empty::after{align-items:flex-start;justify-content:flex-end;padding:1.5rem}

/* ============================================================ GALERIA FOCADA
   Carrossel em arco: o slide central sobe e revela o conteúdo, os laterais
   descem progressivamente. Offsets e tempos espelham a referência. */
.fgal{position:relative;padding-block:clamp(3.5rem,9vw,150px)}
.fgal__stage{position:relative}
.fgal__viewport{overflow:hidden}
.fgal__track{display:flex;align-items:flex-start}
.fgal__track.is-animating{transition:transform .4s ease-in-out}
.fgal__slide{flex:0 0 auto;padding-inline:calc(var(--fgal-gap,15px) / 2);cursor:pointer}
.fgal__slide[data-pos="0"]{cursor:default}
.fgal__slide[data-pos="0"] .btn{cursor:pointer}

/* Arco vertical, por distância até o slide ativo: quanto mais longe do centro,
   mais baixo o card fica.

   Antes o arco começava só em 768px, porque no mobile havia um card por tela e
   ele não tinha vizinho para escalonar: virava só um solavanco de 120px a cada
   troca. Agora que o mobile mostra os vizinhos espiando, o arco volta a ter
   função ali, com deslocamento menor por serem cards menores. */
.fgal__item{transition:transform .4s ease-in-out;transform:translateY(55px)}
.fgal__slide[data-pos="0"] .fgal__item{transform:translateY(0);transition-delay:.1s}
@media (min-width:768px){
  .fgal__item{transform:translateY(120px)}
  .fgal__slide[data-pos="2"] .fgal__item{transform:translateY(90px)}
  .fgal__slide[data-pos="1"] .fgal__item{transform:translateY(60px)}
  .fgal__slide[data-pos="0"] .fgal__item{transform:translateY(0)}
}

/* Elevação interna da imagem: sobe devagar ao virar ativa */
.fgal__media{position:relative;transform:translateY(20px);transition:transform .4s ease}
.fgal__slide[data-pos="0"] .fgal__media{transform:translateY(0);transition:transform 2s ease}
.fgal__media .frame{aspect-ratio:4/3}

/* Conteúdo aparece apenas no slide ativo */
.fgal__content{visibility:hidden;min-height:90px;padding:15px 10px;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.fgal__slide[data-pos="0"] .fgal__content{visibility:visible}

/* Entrada escalonada do texto, reproduzindo o blockFadeIn da referência:
   sobe 20px com fade, 0.5s de duração e 0.15s entre cada bloco.
   Fica dentro de no-preference para que, com movimento reduzido, o texto
   apareça imediatamente em vez de ficar preso em opacity 0. */
@keyframes fgalBlockFadeIn{
  0%{opacity:.001;transform:translateY(var(--fgal-anim-y,20px))}
  100%{opacity:1;transform:none}
}
@media (prefers-reduced-motion:no-preference){
  .fgal__content [data-animate-order]{opacity:.001}
  /* A classe is-revealing é retirada e devolvida a cada troca de slide, com um
     reflow no meio. É isso que faz animation-name sair de none e voltar, que é
     o que o navegador exige para reiniciar a animação. */
  .fgal__slide[data-pos="0"] .fgal__content.is-revealing [data-animate-order]{
    animation-name:fgalBlockFadeIn;
    animation-duration:.5s;
    animation-fill-mode:both;
  }
  .fgal__content [data-animate-order="1"]{animation-delay:calc(0 * .15s + var(--fgal-anim-offset,.18s))}
  .fgal__content [data-animate-order="2"]{animation-delay:calc(1 * .15s + var(--fgal-anim-offset,.18s))}
  .fgal__content [data-animate-order="3"]{animation-delay:calc(2 * .15s + var(--fgal-anim-offset,.18s))}
  .fgal__content [data-animate-order="4"]{animation-delay:calc(3 * .15s + var(--fgal-anim-offset,.18s))}
}
.fgal__name{font-family:var(--font-btn);font-size:clamp(1.375rem,1.1rem + 1.1vw,30px);
  font-weight:700;line-height:1.2;margin-bottom:5px}
.fgal__price{font-family:var(--font-btn);font-weight:700;margin-bottom:5px}
.fgal__text{color:var(--color-muted);font-size:var(--fs-small);max-width:40ch;margin-bottom:5px}
.fgal__content .btn{margin-top:5px}

/* Setas circulares sobre a faixa de imagens */
.fgal__arrow{position:absolute;top:var(--fgal-arrow-top,40%);transform:translateY(-50%);
  width:32px;height:32px;border-radius:var(--radius-pill);background:var(--color-ink);color:#fff;
  display:grid;place-items:center;z-index:9;transition:background-color var(--dur) var(--ease)}
.fgal__arrow:hover{background:var(--color-primary)}
/* Alvo de clique de 44px, invisível. O círculo continua com 32px.
   Sem isso, um clique poucos pixels fora da seta acertava o card atrás dela,
   que fica a 2 posições do centro, e uma única interação pulava duas. */
.fgal__arrow::before{content:"";position:absolute;inset:-6px;border-radius:50%}
.fgal__arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fgal__arrow--prev{left:clamp(.5rem,2vw,32px)}
.fgal__arrow--next{right:clamp(.5rem,2vw,32px)}
/* Setas do mobile: traço fino sem círculo, como na referência. O botão segue
   com 44px de área de toque, apenas sem fundo: encolher o alvo junto com o
   desenho deixaria o clique difícil de acertar no dedo. */
.fgal__arrows-mobile{display:none;justify-content:center;align-items:center;gap:22px;margin-top:1.25rem}
.fgal__arrows-mobile button{display:grid;place-items:center;width:44px;height:44px;
  background:transparent;color:var(--color-ink);transition:color var(--dur) var(--ease)}
.fgal__arrows-mobile button:hover{color:var(--color-primary)}
.fgal__arrows-mobile svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* Usada só no instante do reposicionamento do loop. O track pula sem
   transição, mas o arco vertical dos cards tem transition de .4s: sem
   silenciá-lo, os cards que passam a ser visíveis partem de 120px e sobem
   animando, e a fileira inteira parece recarregar. */
.fgal--sem-transicao .fgal__item,
.fgal--sem-transicao .fgal__media,
.fgal--sem-transicao .fgal__track{transition:none !important}

@media (prefers-reduced-motion:reduce){
  .fgal__item,.fgal__media{transform:none !important;transition:none !important}
}

/* ============================================================ VALUE PROPS */
/* Seção branca; a cor quem carrega é o card, como na referência. */
.props{background:var(--color-background)}
.props__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.prop{background:var(--color-surface);border-radius:10px;padding:30px 20px;text-align:center}
/* Ícone escuro e solto, sem círculo atrás: na referência ele é um desenho
   de 50px direto sobre o card. */
.prop__ico{width:50px;height:50px;margin:0 auto 1rem;display:grid;place-items:center}
.prop__ico svg{width:50px;height:50px;fill:none;stroke:var(--color-ink-deep);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.prop h3{font-family:var(--font-ui);font-size:20px;font-weight:500;
  color:var(--color-ink-deep);margin-bottom:.75rem}
.prop p{font-size:16px;line-height:1.7;color:var(--color-muted)}