/* Hero fotográfica full bleed: Home e /agende/. Todas as cores vêm de tokens.css. */

/* ---------- Hero (banner fotográfico full bleed) ----------
   Desktop (≥ 1101 px): a cena da hero (3168x1344) cobre a hero de borda a borda.
   O enquadramento é calculado para manter o grupo de produtos ancorado à direita com margem fixa;
   o texto em HTML ocupa a área livre da esquerda, sob um véu menta leve (legibilidade).
   Abaixo disso: texto no menta e, logo abaixo, o recorte 4:3 só com os produtos, numa peça contínua. */
.hero {
  --hero-inset: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  --hero-inset-v: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  --hero-h: clamp(620px, calc(100svh - var(--header-h)), 760px);
  /* Geometria da imagem 3168:1344 em object-fit: cover (mesma conta do object-position da foto):
     largura renderizada, deslocamento horizontal e fim da área livre (46% da composição;
     a fileira de produtos começa em 50,3%). */
  --hero-rw: max(100vw, calc(var(--hero-h) * 2.3571));
  --hero-x: clamp(calc(100vw - var(--hero-rw)), calc(100vw - 0.924 * var(--hero-rw) - 3.5vw), 0px);
  --hero-livre: calc(var(--hero-x) + 0.46 * var(--hero-rw));
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: calc(var(--header-h) + var(--hero-h));
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: var(--header-h);
  overflow: hidden;
  background: var(--color-mint-400);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(2.5rem, 6vh, 4.5rem) 0 clamp(3rem, 7vh, 5rem) var(--hero-inset);
}
.hero-panel {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.35rem;
  /* termina antes dos produtos: dentro da área livre da composição */
  max-width: min(40rem, calc(var(--hero-livre) - var(--hero-inset-v) - 1.5rem));
  color: var(--color-ink);
}
.hero-over {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  text-wrap: balance;
}
/* Home: título mais longo ("Alisamento e tratamento capilar profissional..."): corpo menor, para fechar
   em 4 linhas no desktop sem invadir os produtos. */
.hero-home .hero-title {
  font-size: clamp(1.9rem, 9.2cqi, 3.4rem);
  text-wrap: balance;
}
/* Home: a linha de abertura em rosé. Tom escuro de propósito: rosé claro some sobre a parede verde. */
.hero-home .hero-over {
  color: var(--color-rose-700);
}
.hero-title {
  /* proporcional à largura da coluna de texto: fecha em 3 linhas em qualquer desktop */
  font-size: clamp(2.25rem, 10.2cqi, 3.75rem);
  font-weight: var(--fw-bold);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--color-ink);
}
.hero-title em {
  color: var(--color-ink);
}
/* Home: título em preto com reflexo espelhado. As letras são pretas e uma faixa de luz quente (dourado
   claro, no tom dos rótulos) atravessa o texto na horizontal, como o brilho de uma superfície polida.
   A faixa passa da esquerda para a direita e descansa alguns segundos fora do texto; com
   prefers-reduced-motion ela fica parada sobre o título. Sem suporte a background-clip: text, preto sólido. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero-home .hero-title {
    color: transparent;
    background-image: linear-gradient(
      100deg,
      #000 0%,
      #000 45%,
      #2e251a 46.6%,
      #a88c5f 48.6%,
      #f3e4c4 50%,
      #a88c5f 51.4%,
      #2e251a 53.4%,
      #000 55%,
      #000 100%
    );
    background-size: 300% 100%;
    background-repeat: no-repeat;
    background-position: 40% 0; /* parado: faixa a ~70% da largura do título */
    -webkit-background-clip: text;
    background-clip: text;
  }
  .hero-home .hero-title em {
    /* transparente: o recorte do título (que inclui o texto dos filhos) mostra o mesmo reflexo */
    color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero-home .hero-title {
      animation: hero-reflexo 7s cubic-bezier(0.45, 0, 0.25, 1) 0.9s infinite both;
    }
  }
}
/* 100% → faixa fora do texto à esquerda; 0% → fora à direita. Atravessa em ~2,5 s e descansa. */
@keyframes hero-reflexo {
  0% { background-position: 100% 0; }
  36% { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}
.hero-sub {
  max-width: 38ch;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--color-ink);
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
/* Coluna de texto estreita: botões empilhados sempre (o resultado não depende da fonte já ter
   carregado, o que evitava deslocamento de layout na troca da fonte). */
@container (max-width: 520px) {
  .hero-ctas {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* Fio decorativo: só na junção texto/foto da versão empilhada (no desktop cruzaria a bancada da foto). */
.hero-fio {
  display: none;
}
.fio {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
}
.fio path {
  vector-effect: non-scaling-stroke;
}
.fio .fio-2 {
  opacity: 0.45;
  stroke-width: 1;
}
.hero-media {
  position: absolute;
  z-index: 1;
  inset: var(--header-h) 0 0 0;
  margin: 0;
  container-type: size;
  background: var(--color-mint-400);
}
.hero-media picture {
  position: absolute;
  inset: 0;
}
.hero-media picture,
.hero-img {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-img {
  object-fit: cover;
  /* produtos ancorados à direita (borda direita do pote a 92,4% da composição, margem 3,5%);
     vertical a 68%: em telas muito largas o corte sai do alto da parede, nunca da base dos produtos.
     Sem distorção: só recorte, nunca esticamento. */
  object-position: clamp(calc(100cqw - max(100cqw, 235.71cqh)), calc(100cqw - 0.924 * max(100cqw, 235.71cqh) - 3.5cqw), 0px) 68%;
}
/* Home: os produtos ocupam quase toda a altura da cena (topo dos frascos a 12%, bases a 88%);
   em telas muito largas o corte vertical se divide entre o alto e a base para preservar os dois. */
@media (min-width: 1101px) {
  /* Em telas muito largas a hero cresce com a largura (até 92% da altura da imagem): sem isso o corte
     comeria o topo das válvulas e as bases dos frascos. Até ~2000 px de largura nada muda. */
  .hero-home {
    --hero-h: clamp(620px, calc(100svh - var(--header-h)), max(760px, calc(100vw / 2.3571 * 0.92)));
  }
  .hero-home .hero-img {
    object-position: clamp(calc(100cqw - max(100cqw, 235.71cqh)), calc(100cqw - 0.924 * max(100cqw, 235.71cqh) - 3.5cqw), 0px) 45%;
  }
}
/* Véu menta sobre a área do texto: some antes dos produtos. */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-mint-100) 86%, transparent) 0,
    color-mix(in srgb, var(--color-mint-100) 80%, transparent) calc(var(--hero-livre) * 0.62),
    color-mix(in srgb, var(--color-mint-100) 55%, transparent) calc(var(--hero-livre) * 0.92),
    transparent calc(var(--hero-livre) + 5vw)
  );
}

/* Home: sem véu, a foto aparece inteira; o texto fica direto sobre a parede verde clara da cena. */
@media (min-width: 1101px) {
  .hero-home .hero-media::after {
    content: none;
  }
  /* Desktop: a linha de abertura vira selo com as cores do mobile (fundo linho, letras rosé);
     rosé solto, sem o selo, sumia na parede verde. */
  .hero-home .hero-over {
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    background: var(--color-linho-100);
    color: var(--color-rose-700);
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.12);
    letter-spacing: 0.1em;
  }
  /* Cabe numa linha: selo justo ao texto (quebrado em 2 linhas, a caixa ocuparia a coluna toda). */
  @container (min-width: 400px) {
    .hero-home .hero-over {
      white-space: nowrap;
    }
  }
  /* Subtítulo sobre a samambaia: um pouco mais de peso e halo claro rente às letras (não é caixa). */
  .hero-home .hero-sub {
    font-weight: var(--fw-medium);
    text-shadow: 0 0 2px rgb(255 255 255 / 0.9), 0 0 10px rgb(255 255 255 / 0.85), 0 0 22px rgb(255 255 255 / 0.6);
  }
  .hero-home .hero-ctas .btn-outline {
    --bg: rgb(255 255 255 / 0.4);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

/* Desktop: reflexo do título em dourado mais fechado (o creme do mobile sumia na parede clara da foto)
   e sombra curta que destaca as letras da folhagem. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  @media (min-width: 1101px) {
    .hero-home .hero-title {
      background-image: linear-gradient(
        100deg,
        #000 0%,
        #000 45%,
        #2a2012 46.6%,
        #7a5a26 48.6%,
        #b08640 50%,
        #7a5a26 51.4%,
        #2a2012 53.4%,
        #000 55%,
        #000 100%
      );
      filter: drop-shadow(0 0 10px rgb(255 255 255 / 0.55));
    }
  }
}

/* Tablet e celular: uma peça vertical contínua (texto no menta, recorte dos produtos logo abaixo). */
@media (max-width: 1100px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .hero-inner {
    padding: 2rem var(--gutter) 2.75rem;
    background: linear-gradient(180deg, var(--color-mint-100), var(--color-mint-400) 85%);
  }
  .hero-panel {
    gap: 1rem;
    max-width: 40rem;
  }
  .hero-title {
    font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3rem);
    /* longe do limiar entre 2 e 3 linhas: mesma quebra com a fonte de fallback e com a Manrope */
    max-width: 11.5em;
  }
  .hero-fio {
    display: block;
    position: relative;
    z-index: 3;
    width: 100%;
    height: 44px;
    margin-block: -22px;
    color: var(--color-green-500);
  }
  .hero-media {
    position: relative;
    inset: auto;
    container-type: normal;
    aspect-ratio: 4 / 3;
  }
  .hero-img {
    /* o recorte já é 4:3: aparece inteiro, sem corte */
    object-position: 50% 50%;
  }
  /* Topo da foto se funde ao menta: sem borda nem “segundo card”. */
  .hero-media::after {
    background: linear-gradient(
      180deg,
      var(--color-mint-400) 0%,
      color-mix(in srgb, var(--color-mint-400) 55%, transparent) 5%,
      color-mix(in srgb, var(--color-mint-400) 15%, transparent) 9%,
      transparent 12%
    );
  }
}
@media (max-width: 560px) {
  .hero-inner {
    padding-inline: 1.25rem;
  }
  .hero-ctas {
    display: grid;
    width: 100%;
  }
  .hero-ctas .btn {
    width: 100%;
    white-space: normal;
  }
}

/* ---------- /agende/: mesma hero, com trilha de navegação e foto retrato no celular ---------- */
.hero .crumbs {
  margin-bottom: 0;
  color: var(--color-ink);
}
.hero .crumbs a:hover {
  color: var(--color-green-900);
}
/* Home no celular/tablet: fundo do texto em linho claro (no lugar do menta), fundido ao topo da foto. */
@media (max-width: 1100px) {
  .hero-home .hero-title {
    font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.6rem);
    max-width: 13em;
  }
  .hero-home,
  .hero-home .hero-media {
    background: var(--color-linho-100);
  }
  .hero-home .hero-inner {
    background: var(--color-linho-100);
  }
  /* Fio em dois tons de dourado: o principal no dourado do monograma, um pouco mais fechado para
     aparecer sobre o linho; o segundo, mais claro, no brilho da estrela. */
  .hero-home .hero-fio {
    color: color-mix(in srgb, var(--color-ouro-logo) 82%, var(--color-ink));
  }
  .hero-home .hero-fio .fio-2 {
    stroke: var(--color-ouro-logo);
    opacity: 0.7;
  }
  .hero-home .hero-media::after {
    background: linear-gradient(
      180deg,
      var(--color-linho-100) 0%,
      color-mix(in srgb, var(--color-linho-100) 55%, transparent) 5%,
      color-mix(in srgb, var(--color-linho-100) 15%, transparent) 9%,
      transparent 12%
    );
  }
}
@media (max-width: 1100px) {
  /* foto original (928x1152); em tablet, limitada em altura, cortando só a base */
  .hero-agende .hero-media {
    aspect-ratio: 928 / 1152;
    max-height: min(85svh, 900px);
  }
  .hero-agende .hero-img {
    object-fit: cover;
    object-position: 50% 0;
  }
}