/* Nichos: três tiles de foto com larguras desiguais (4 / 5 / 3 colunas, mesma altura) e dois cartões sem foto (Delivery e
   Serviços Gerais, "menos provados", mas com o mesmo cartão sólido dos demais; a borda tracejada saiu em 2026-09-26).
   Celular: carrossel com scroll-snap. As três fotos levam o mesmo tratamento
   (.foto-azul, em componentes.css) e retratos diferentes por ESCALA e RECORTE: o salão é o tile largo (a partir de
   1280 px troca para o recorte 16:9, com o rosto no terço esquerdo e a moldura de LED à direita), a clínica é o tile
   estreito e "de perto" (4:5), e a barbearia usa o 4:5 (moldura de neon, cadeira e espelho). */

.nichos {
  padding-block: 88px 56px;
}

/* padding-block: o carrossel é um contêiner de rolagem e cortaria a sombra e a elevação dos tiles; a margem negativa devolve
   o espaço para o layout não crescer */
.nichos__tiles {
  display: flex;
  gap: 14px;
  margin-block: calc(var(--sp-6) - 10px) -18px;
  margin-inline: calc(var(--pad-x) * -1);
  padding-block: 10px 28px;
  padding-inline: var(--pad-x);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad-x);
  scrollbar-width: none;
}

.nichos__tiles::-webkit-scrollbar {
  display: none;
}

.nicho-tile {
  position: relative;
  flex: 0 0 78%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--s2);
  border-radius: var(--r-page);
  box-shadow: var(--sombra-card);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}

.nicho-tile picture,
.nicho-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.nicho-tile img {
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

/* Gradiente inferior (sob o texto) e borda fina, iguais nos três tiles */
.nicho-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg) 0, rgba(5, 7, 15, 0.82) 35%, transparent 70%);
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(139, 148, 167, 0.26);
  pointer-events: none;
}

/* Botões do tratamento por tile. As fotos regeneradas em 2026-09-26 (gente real, já com a luz azul da marca) pedem um véu
   mais leve que as antigas: --lift menor (o preto sobe menos para azul-marinho), grão mais fino e luz azul contida. Antes o
   véu pesado e o hue-rotate que compensava o LED ciano da foto antiga deixavam a pele arroxeada. */
.nicho-tile {
  --lift: 0.5;
  --grao: 0.4;
}

.nicho-tile--barbearia {
  --tom-b: 1.12;
  --tom-s: 1;
  --luz: 0.14;
}

.nicho-tile--salao {
  --tom-b: 1.1;
  --tom-s: 1;
  --luz: 0.2;
}

.nicho-tile--estetica {
  --tom-b: 1.12;
  --tom-s: 1;
  --luz: 0.22;
}

.nicho-tile__txt {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding: var(--sp-5);
}

.nicho-tile__txt h3 {
  margin-top: var(--sp-3);
  font-size: 1.625rem;
}

.nicho-tile__txt p {
  margin-top: var(--sp-1);
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* Foco visível no carrossel (região rolável por teclado) */
.nichos__tiles:focus-visible {
  outline-offset: -3px;
}

/* Ícone do nicho no canto superior esquerdo do tile */
.nicho-tile__ic {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 1;
}

/* ---------- Linhas sem foto ---------- */
.nichos__linhas {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* Mesmo cartão sólido dos demais: fundo de superfície, borda contínua, raio e sombra do sistema */
.nicho-linha {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r-page);
  box-shadow: var(--sombra-card);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.nicho-linha h3 {
  font-size: 1.375rem;
}

.nicho-linha p {
  margin-top: var(--sp-1);
  max-width: 44ch;
  font-size: 0.9375rem;
}

@media (min-width: 768px) {
  .nichos {
    padding-block: 120px 96px;
  }

  .nichos__tiles {
    margin: var(--sp-6) 0 0;
    padding: 0;
    overflow: visible;
    gap: var(--gutter);
  }

  .nicho-tile {
    aspect-ratio: auto;
    height: 400px;
  }

  .nicho-tile--barbearia {
    flex: 33 1 0;
  }

  .nicho-tile--barbearia img {
    object-position: 72% 0;
  }

  .nicho-tile--salao {
    flex: 40 1 0;
  }

  .nicho-tile--salao img {
    object-position: 65% 0;
  }

  .nicho-tile--estetica {
    flex: 27 1 0;
  }

  .nicho-tile--estetica img {
    object-position: 80% 0;
  }

  /* Altura fixa do bloco de texto e conteúdo a partir do topo: os três títulos ficam na mesma linha de base, mesmo que o
     parágrafo de um tile quebre em mais linhas que o dos outros */
  .nicho-tile__txt {
    height: var(--txt-h, 232px);
    padding: var(--sp-5) var(--sp-5) 0;
  }

  .nicho-tile__txt p {
    font-size: 0.875rem;
  }

  .nichos__linhas {
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter);
  }
}

@media (min-width: 1024px) {
  .nicho-tile {
    height: 440px;
    --txt-h: 216px;
  }

  .nicho-tile--barbearia {
    flex: 4 1 0;
  }

  .nicho-tile--barbearia img {
    object-position: 62% 0;
  }

  .nicho-tile--salao {
    flex: 5 1 0;
  }

  .nicho-tile--estetica {
    flex: 3 1 0;
  }

  .nicho-tile__txt h3 {
    font-size: 1.625rem;
  }

  .nicho-tile__txt p {
    font-size: 0.9375rem;
  }
}

@media (min-width: 1280px) {
  /* 180 px e não 160: com a fonte do WebKit o parágrafo da clínica quebra em 4 linhas em vez de 3 e passava 9 px do tile (texto cortado) */
  .nicho-tile {
    --txt-h: 180px;
  }

  .nicho-tile--salao img {
    object-position: 87% 50%;
  }
}

@media (hover: hover) {
  .nicho-tile:hover {
    box-shadow: var(--sombra-card-hover);
    transform: translateY(-4px);
  }

  .nicho-tile:hover img {
    transform: scale(1.04);
  }

  .nicho-tile:hover .icone-box {
    box-shadow: var(--glow-1);
  }

  .nicho-linha:hover {
    border-color: var(--line-2);
    box-shadow: var(--sombra-card-hover);
    transform: translateY(-3px);
  }

  .nicho-linha:hover .icone-box {
    box-shadow: var(--glow-1);
  }
}