/* ══════════════════════════════════════════════════════
   Hero Carousel — banner editorial
   - Imagem inteira (object-fit: contain) com fundo preto
   - Sem render progressivo (decoding=sync no primeiro slide)
   - Alinhamento de texto distinto por slide (--perfil, --wood, --milano)
   - Setas limpas (só o ícone, sem caixa)
   - Dots circulares
   ══════════════════════════════════════════════════════ */

.hero-carousel {
  position: relative;
  overflow: hidden;
  background: var(--bg-hero);
  /* Aspect 3:1 bate exato com a imagem servida pelo Wix (2400x800).
     Em 1440 viewport a altura vira ~480px; cap em 720px em telas grandes. */
  aspect-ratio: 3 / 1;
  max-height: 720px;
  min-height: 360px;
}

/* Todos os slides absolute (stack). Apenas o ativo fica visivel via opacity.
   A altura do carousel nao depende do slide — evita colapso pra height:0
   IMPORTANTE: NAO usar visibility — ela troca instantaneamente e quebra o
   crossfade (aparece flash preto entre slides). Manter so opacity + pointer-events. */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  pointer-events: all;
}

/* Fundo: imagem inteira, sem corte, sem distorcer */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg-hero);
}
.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* preenche todo o banner; Wix ja serviu com aspect certo */
  object-position: center;
  display: block;
}

/* Milano: meio-baixo (70%) — refletor dos pendentes visivel por inteiro,
   sem mostrar chao em excesso. Perfil LED: bottom (base do perfil). */
.hero-slide--milano .hero-bg img {
  object-position: 50% 85%; /* +20pp em relação ao original 65% — mostra ainda mais da parte inferior */
}
.hero-slide--perfil .hero-bg img {
  object-position: center bottom;
}

/* ══════════════════════════════════════════════════════
   Carrossel infinito horizontal — base (categorias e produtos)
   - Auto-scroll direita -> esquerda em loop continuo
   - Pausa no :hover
   - Continuo via 2 copias dos cards no DOM (ver PHP)
   - Tipografia: Inter (font-body), padrao do site
   ══════════════════════════════════════════════════════ */

.categorias-section,
.produtos-destaque-section { overflow: hidden; }
.categorias-section .section-header { margin-bottom: var(--space-4); }
/* Mais distância entre h2 "Produtos em Destaque" e o carrossel (2026-04-28) */
.produtos-destaque-section .section-header { margin-bottom: var(--space-8); }

/* -20% no padding-top da Seção 2 mosaico (2026-04-28) */
.mosaico-section { padding-top: var(--space-16); }

/* Utility: padding-bottom reduzido (igual ao --tight-top) — usado na produtos-destaque-section */
.section--tight-bottom { padding-bottom: var(--space-10) !important; }

/* Utility: padding-top reduzido (50%) — usado na seção logo após o hero */
.section--tight-top { padding-top: var(--space-10) !important; }

/* ══ Carrossel de PRODUTOS em destaque (Seção 1 da home — usa product-card unificado) ══ */
.products-carousel-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0 0 var(--space-3);
  mask-image: linear-gradient(90deg, transparent 0, black 48px, black calc(100% - 48px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 48px, black calc(100% - 48px), transparent 100%);
}
.products-carousel-track {
  display: flex;
  align-items: stretch; /* rc444: cards esticam pra altura do tallest no carrossel */
  gap: var(--space-4);
  width: max-content;
  animation: products-scroll 60s linear infinite;
  will-change: transform;
}
/* rc444: força altura uniforme em TODOS os cards do carrossel (tallest define a row) */
.products-carousel-track > .product-card {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  align-self: stretch !important;
}
.products-carousel-track > .product-card .product-card-bottom {
  flex: 1 1 auto !important;
}
.products-carousel-wrap:hover .products-carousel-track {
  animation-play-state: paused;
}
@keyframes products-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* DOM tem 2 copias */
}
.products-carousel-track > .product-card {
  flex: 0 0 260px;
  width: 260px;
}
@media (max-width: 768px) {
  .products-carousel-track > .product-card { flex: 0 0 200px; width: 200px; }
  .products-carousel-track { gap: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .products-carousel-track { animation: none; }
  .products-carousel-wrap { overflow-x: auto; }
}

/* ══ Mosaico de CATEGORIAS (Seção 2 da home — grid 4×2 com 8 tiles) ══ */
.mosaico-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.mosaico-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--cor-cinza-050);
}
.mosaico-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.mosaico-tile:hover img { transform: scale(1.05); }
.mosaico-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 55%, transparent 80%);
  pointer-events: none;
}
.mosaico-tile-name {
  position: absolute;
  left: var(--space-5);
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 2;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cor-branco);
  margin: 0;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4);
}
@media (max-width: 1024px) {
  .mosaico-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .mosaico-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .mosaico-tile-name { font-size: 14px; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }
}

/* ══ Serviços na home (gestor 2026-09-03) ══ */
.servicos-home { padding-top: var(--space-16); }
.servicos-home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.servico-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--cor-cinza-050);
  transition: transform var(--transition-base);
}
.servico-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.servico-card h3 {
  font: 600 16px/1.25 var(--font-body);
  letter-spacing: 0.01em;
  margin: 18px 20px 6px;
  transition: color var(--transition-fast);
}
.servico-card p {
  font: 300 13.5px/1.6 var(--font-body);
  color: var(--cor-cinza-500);
  margin: 0 20px 22px;
}
.servico-card:hover { transform: translateY(-3px); }
.servico-card:hover h3 { color: var(--cor-vermelho); }
@media (max-width: 1024px) { .servicos-home-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .servicos-home-grid { grid-template-columns: 1fr; } }

/* ══ (Legado) Carrossel de categorias — mantido caso volte a ser usado ══ */

.categorias-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0 0 var(--space-2);
  /* Fade lateral suave */
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    black 48px,
    black calc(100% - 48px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    black 48px,
    black calc(100% - 48px),
    transparent 100%
  );
}

.categorias-track {
  display: flex;
  gap: var(--space-4);
  width: max-content;
  animation: cat-scroll 45s linear infinite;
  will-change: transform;
}
.categorias-carousel:hover .categorias-track {
  animation-play-state: paused;
}

@keyframes cat-scroll {
  from { transform: translateX(0); }
  /* -50% porque DOM tem 2 copias; o fim da 1a copia = comeco do visivel */
  to   { transform: translateX(-50%); }
}

.categoria-card {
  flex: 0 0 300px;
  width: 300px;
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--transition-base);
}
.categoria-card:hover { transform: translateY(-4px); }

.categoria-card-img {
  width: 300px;
  height: 300px;
  overflow: hidden;
  background: var(--cor-cinza-050);
  position: relative;
}
.categoria-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}
.categoria-card:hover .categoria-card-img img {
  transform: scale(1.04);
}
/* Overlay sutil para destacar o texto que vem por cima */
.categoria-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.15) 45%,
    transparent 75%
  );
  pointer-events: none;
}

.categoria-card-info {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-5);
  color: var(--cor-branco);
  z-index: 2;
  text-align: left;
}
.categoria-card-title {
  font-family: var(--font-body);    /* Inter — padrao do site */
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0;
  text-transform: none;
  line-height: 1.15;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
}

@media (max-width: 768px) {
  .categoria-card,
  .categoria-card-img { width: 240px; height: auto; }
  .categoria-card-img { height: 240px; }
  .categoria-card-title { font-size: 14px; }
  .categoria-card-count { font-size: 10px; }
  .categorias-track { gap: var(--space-3); }
}

/* Respeita prefers-reduced-motion: sem animacao para quem pede acessibilidade */
@media (prefers-reduced-motion: reduce) {
  .categorias-track { animation: none; }
  .categorias-carousel { overflow-x: auto; }
}
/* Overlay suave e direcional — reforca contraste sem apagar a foto.
   Gradiente depende do alinhamento do texto (definido por slide abaixo).
   Opacidades calibradas em 2026-04-28 (-20pp p/ deixar foto mais visivel) */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.50) 0%,
    rgba(0,0,0,0.30) 40%,
    rgba(0,0,0,0.50) 100%);
}

/* Conteúdo texto: posicionamento absoluto, varia por slide */
.hero-content {
  position: absolute;
  z-index: 3;
  color: var(--cor-branco);
  max-width: min(560px, 42vw);
  padding: 0 var(--space-6);
}
.hero-slide h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 400;
  color: var(--cor-branco);
  margin: 0 0 var(--space-5);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.8), 0 1px 4px rgba(0,0,0,0.4);
}
.hero-description {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  color: rgba(255,255,255,0.96);
  margin: 0;
  line-height: 1.65;
  text-shadow: 0 1px 12px rgba(0,0,0,0.75), 0 1px 2px rgba(0,0,0,0.4);
}

/* ── Alinhamentos por slide ── */

/* Perfil de Led → direita, centro vertical (afastado da seta) */
.hero-slide--perfil .hero-content {
  top: 50%;
  right: var(--space-16);
  transform: translateY(-50%);
  text-align: right;
}

/* Linha Wood → esquerda, centro vertical (afastado da seta) */
.hero-slide--wood .hero-content {
  top: 50%;
  left: var(--space-16);
  transform: translateY(-50%);
  text-align: left;
}

/* Milano → esquerda, inferior (afastado da seta) */
.hero-slide--milano .hero-content {
  bottom: var(--space-12);
  left: var(--space-16);
  text-align: left;
}

/* ── Dots — circulares, aparecem abaixo do hero ── */
.carousel-dots {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
  z-index: 5;
}
.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.carousel-dot:hover { background: rgba(255,255,255,0.75); }
.carousel-dot.is-active {
  background: var(--cor-branco);
  transform: scale(1.25);
}

/* ── Setas prev/next — só o ícone (sem caixa) ── */
.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 56px;
  height: 56px;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--cor-branco);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.7));
  transition: transform var(--transition-fast), color var(--transition-fast);
}
.carousel-prev:hover,
.carousel-next:hover {
  color: var(--cor-branco);
  transform: translateY(-50%) scale(1.12);
}
.carousel-prev { left: var(--space-4); }
.carousel-next { right: var(--space-4); }

@media (max-width: 768px) {
  /* rc1097 — regra "celular impecável" (gestor 16/09): a proporção 3:1 com altura mínima de 360px
     fazia o hero medir 1080px de largura numa tela de 360 — só o terço esquerdo aparecia, dois terços
     do banner e os pontinhos ficavam fora da tela (medido: .hero-carousel 0–1080, dots 517–563).
     No celular o hero tem a largura da tela e altura fixa; a imagem preenche com cover. */
  .hero-carousel {
    width: 100%;
    aspect-ratio: auto;
    height: 360px;
    min-height: 0;
    max-height: none;
  }
  .hero-content { max-width: 86vw; }
  .hero-slide--perfil .hero-content,
  .hero-slide--wood .hero-content,
  .hero-slide--milano .hero-content {
    top: auto;
    bottom: var(--space-16);
    left: var(--container-padding);
    right: auto;
    transform: none;
    text-align: left;
  }
  .carousel-prev, .carousel-next { display: none; }
}

/* ── Barra de diferenciais — off-white, texto preto ── */
.features-bar {
  background: var(--cor-cinza-050);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}
.features-bar .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-primary);
}
.feature-icon {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-vermelho);
  flex-shrink: 0;
}
.feature-text strong {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.feature-text span {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* ── Seções ── */
.section { padding: var(--space-20) 0; }
.section-header { text-align: center; margin-bottom: var(--space-12); }
.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.section-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: 400;
  color: var(--text-primary);
}
.section-subtitle {
  font-family: var(--font-body);
  color: var(--text-secondary);
  margin-top: var(--space-3);
  font-size: var(--font-size-base);
  line-height: 1.65;
}

/* ── Categorias — cards retos, overlay com gradiente ── */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.category-card {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0;  /* reto — padrão premium */
  display: flex;
  align-items: flex-end;
  text-decoration: none;
}
.category-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.category-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.10) 60%);
}
.category-card:hover img { transform: scale(1.04); }
.category-card-info {
  position: relative;
  z-index: 1;
  padding: var(--space-6);
  color: var(--cor-branco);
}
.category-card-info h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 400;
  color: var(--cor-branco);
  margin-bottom: var(--space-1);
  letter-spacing: 0;
}
.category-card-info span {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* .products-grid vive em base.css — reutilizado pela loja e produtos relacionados */

/* ── Por que Ark Lamps ── */
.why-section { background: var(--cor-cinza-050); }
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  align-items: center;
}
.why-content .section-label { text-align: left; }
.why-content h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: 400;
  margin-bottom: var(--space-6);
}
.why-items { display: flex; flex-direction: column; gap: var(--space-6); }
.why-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.why-item-icon {
  width: 44px; height: 44px;
  background: transparent;
  color: var(--cor-vermelho);
  border: 1.5px solid var(--border-default);
  border-radius: 0;  /* reto */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.why-item-text h4 {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
  color: var(--text-primary);
}
.why-item-text p {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.65;
}
.why-image { overflow: hidden; border-radius: 0; }  /* reto */
.why-image img { width: 100%; height: 520px; object-fit: cover; }

/* ── CTA Banner — fundo preto puro ── */
.cta-banner {
  background: var(--cor-preto);
  padding: var(--space-20) 0;
  text-align: center;
}
.cta-banner h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: 400;
  color: var(--cor-branco);
  margin-bottom: var(--space-4);
}
.cta-banner p {
  font-family: var(--font-body);
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-8);
  font-size: var(--font-size-lg);
  line-height: 1.65;
}
.cta-banner .btn-primary {
  background: var(--cor-vermelho);  /* único lugar fora do padrão: vermelho no fundo preto é acento */
  color: var(--cor-branco);
  font-size: var(--font-size-sm);
  padding: 1rem 2.5rem;
  letter-spacing: 0.12em;
}
.cta-banner .btn-primary:hover { background: var(--cor-verm-esc); }

/* ── Responsivo ── */
@media (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .features-bar .container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .hero { min-height: 75vh; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .categories-grid { grid-template-columns: 1fr 1fr; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .why-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .why-image { display: none; }
}
@media (max-width: 480px) {
  .categories-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .features-bar .container { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ═══ Navegue por tipo (SEO interno — todas as subcategorias) ═══ */
.navegue-section {
  padding: var(--space-12) 0;
  background: var(--color-gray-50, #fafafa);
}
.navegue-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6) var(--space-5);
  margin-top: var(--space-8);
}
.navegue-col {
  display: block;
  text-align: left;
}
.navegue-mae {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-preto);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--cor-cinza-200, #e5e5e5);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.navegue-mae:hover { color: var(--cor-vermelho); }
.navegue-subs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.navegue-subs li { margin: 0; padding: 0; }
.navegue-subs a {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--cor-cinza-600, #595959);
  padding: 4px 0;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.navegue-subs a:hover { color: var(--cor-preto); }

@media (max-width: 1024px) {
  .navegue-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .navegue-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (max-width: 480px) {
  .navegue-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ── Linhas Stella (16/10/2026, mockup mockup/linhas-stella/home-linhas-v1.html aprovado): mesmo desenho de "Todas as categorias";
   o nome do grupo não é link ── */
.navegue-section--linhas { padding-top: 0; }
span.navegue-mae { display: block; cursor: default; }
span.navegue-mae:hover { color: inherit; }