/* ============================================================
   VIRTÙ — Home Redesign (camada final)
   Corrige o redesign anterior: contraste do hero, cantos
   arredondados (anulando o "border-radius: 0" das camadas
   virtu-refinements/virtu-luxury), botões e tipografia.

   Carregado POR ÚLTIMO no index.html para vencer a cascata.
   Escopo: somente a homepage.
   ============================================================ */

/* ------------------------------------------------------------
   0. FALLBACK DE IMAGEM — nunca deixar buraco branco
   Acionado via onerror nas <img> externas (Supabase / lh3 Drive).
   ------------------------------------------------------------ */
.img-fallback {
  background:
    radial-gradient(120% 90% at 75% 0%, rgba(196,147,74,0.22) 0%, transparent 55%),
    linear-gradient(150deg, #243a4f 0%, #1a2a3c 55%, #16242f 100%);
}
.img-fallback::after {
  content: "VIRTÙ";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: 0.06em;
  color: rgba(232, 213, 181, 0.5);
  pointer-events: none;
}
/* Em cards de categoria o conteúdo/overlay ficam acima do ::after */
.categoria-card.img-fallback .categoria-card__overlay,
.categoria-card.img-fallback .categoria-card__content { z-index: 2; }

/* ------------------------------------------------------------
   1. TIPOGRAFIA — refino editorial de luxo
   ------------------------------------------------------------ */
/* Overlines e labels uppercase com respiro maior */
.overline {
  letter-spacing: 0.26em;
  font-weight: 500;
}
.hero__overline {
  letter-spacing: 0.32em;
  font-size: 11px;
  color: var(--color-gold);
}
.diferencial__label {
  letter-spacing: 0.18em;
}

/* ------------------------------------------------------------
   2. HERO — contraste correto sobre fundo claro + escala
   (anula branco forçado por virtu-luxury / virtu-refinements)
   ------------------------------------------------------------ */
.hero { background: var(--color-off-white); }

.hero__editorial-text .hero__title,
.hero__title {
  color: var(--color-navy);
  text-shadow: none;
  font-style: italic;            /* nome da coleção (Donna) em itálico */
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.04;
  font-size: clamp(2.85rem, 5.4vw, 4.85rem);
}
/* "– 2026" permanece reto (definido em home.css .hero__dash) */

.hero__editorial-text .hero__desc,
.hero__editorial .hero__desc {
  color: var(--color-gray-600);  /* cinza-escuro legível, não branco */
  font-size: var(--text-base);
  line-height: 1.85;
  letter-spacing: 0.2px;
  max-width: 380px;
}

/* Imagem vertical do hero — cantos arredondados, sombra difusa suave */
.hero__editorial-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(26, 42, 61, 0.13);
  margin: var(--space-8) clamp(var(--space-8), 5vw, var(--space-16)) var(--space-8) 0;
}
.hero__editorial-image img { border-radius: inherit; }

/* ------------------------------------------------------------
   3. BOTÕES — radius suave + hierarquia de CTA
   ------------------------------------------------------------ */
.btn { border-radius: var(--radius-sm); }

/* Primário dourado preenchido, com peso visual */
.btn--gold {
  background: var(--color-gold);
  border: 1px solid var(--color-gold);
  color: var(--color-white);
  box-shadow: 0 4px 14px rgba(196,147,74,0.22);
}
.btn--gold:hover {
  background: #b0833e;
  border-color: #b0833e;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(196,147,74,0.2);
}

/* Secundário com borda visível sobre fundo claro */
.btn--ghost {
  border: 1.5px solid var(--color-navy);
  color: var(--color-navy);
  background: transparent;
  border-radius: var(--radius-sm);
}
.btn--ghost:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

/* Secundário sobre fundos escuros (banner/feature): borda nítida + hover claro */
.btn--ghost-white {
  border: 1.5px solid rgba(255,255,255,0.85);
  color: var(--color-white);
  border-radius: var(--radius-sm);
}
.btn--ghost-white:hover {
  background: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-white);
}

/* ------------------------------------------------------------
   4. COLEÇÕES — grid assimétrico com cantos arredondados
   (anula border-radius:0 das camadas anteriores)
   ------------------------------------------------------------ */
.categoria-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(26, 42, 61, 0.08);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.categoria-card:hover {
  box-shadow: 0 16px 40px rgba(26, 42, 61, 0.14);
}
.categoria-card__img { border-radius: inherit; }

/* Tiles sólidos (categorias ainda sem foto de produto) — NUNCA paisagem,
   apenas fundo elegante da paleta + nome em serif via .categoria-card__content h3 */
.categoria-card--solid {
  transition: filter 0.25s ease, box-shadow 0.25s ease;
}
.categoria-card--solid:hover { filter: brightness(1.07); }
.categoria-card--solid-navy {
  background:
    radial-gradient(130% 100% at 80% 0%, rgba(196,147,74,0.16) 0%, transparent 55%),
    linear-gradient(155deg, #2f4660 0%, #243a4f 55%, #1c2c3c 100%);
}
.categoria-card--solid-stone {
  background:
    radial-gradient(130% 100% at 80% 0%, rgba(196,147,74,0.20) 0%, transparent 55%),
    linear-gradient(155deg, #3D5470 0%, #314A66 55%, #283C52 100%);
}
/* Nos tiles sólidos o overlay pode ser bem leve (não há foto a escurecer) */
.categoria-card--solid .categoria-card__overlay {
  background: linear-gradient(to top, rgba(20,32,45,0.28) 0%, transparent 70%);
}

/* Overlay um pouco mais profundo: garante leitura do texto
   sem depender da imagem externa */
.categoria-card__overlay {
  background: linear-gradient(
    to top,
    rgba(20,32,45,0.66) 0%,
    rgba(20,32,45,0.18) 50%,
    rgba(20,32,45,0.04) 100%
  );
}

/* Zoom suave no hover (motion contido) */
.categoria-card:hover .categoria-card__img {
  transform: scale(1.04);
}
.categoria-card__content h3 {
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

/* ------------------------------------------------------------
   5. TRUST BADGES — faixa horizontal, centrada, separadores finos
   (mantém os .diferencial__sep do markup; remove o ::before duplicado)
   ------------------------------------------------------------ */
.diferencial {
  text-align: center;
  align-items: center;
}
.diferencial + .diferencial::before { display: none; }
.diferencial__sep {
  width: 1px;
  height: 40px;
  background: var(--color-gray-200);
  align-self: center;          /* mantém o separador centralizado verticalmente */
}

/* Faixa de benefícios — layout responsivo autossuficiente.
   Desktop: 4 colunas iguais numa linha, separadores finos.
   ≤760px: 2×2 (separadores ocultos). ≤460px: empilhado.
   Título proporcional (24px, antes 42px) e alinhado ao topo. */
.diferenciais__grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
}
.diferencial {
  flex: 1 1 0;                 /* 4 colunas de largura igual */
  max-width: 240px;
}
.diferencial__stat {
  font-size: var(--text-lg);   /* 24px — antes 42px */
  line-height: 1.3;
  width: 100%;
  margin-bottom: var(--space-2);
  text-align: center;
}
.diferencial__label {
  text-align: center;
  font-size: var(--text-xs);
  line-height: 1.5;
}

/* Tablet/celular: grid 2 colunas (minmax 0 → nunca estoura), sem separadores */
@media (max-width: 760px) {
  .diferenciais__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-2);
    align-items: start;
  }
  .diferencial {
    flex: none;
    max-width: none;
    min-width: 0;
    padding: 0 var(--space-3);
  }
  .diferencial__sep { display: none; }
  .diferencial__stat { font-size: var(--text-md); }  /* 18px no mobile */
}
/* Celular pequeno: 1 coluna empilhada */
@media (max-width: 460px) {
  .diferenciais__grid { grid-template-columns: 1fr; }
}

/* Manifesto Virtù — primeira letra maiúscula (texto vem do Supabase) */
#editorialTitle::first-letter { text-transform: uppercase; }

/* ------------------------------------------------------------
   6. FEATURE SPOT — card de destaque com imagem arredondada
   ------------------------------------------------------------ */
.feature-spot__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--space-10);
  /* Retrato de produto consistente (4:5 ≈ formato da foto) que cabe na tela:
     a seção inteira fica em ~80vh no desktop, sem estourar o viewport. */
  aspect-ratio: 4 / 5;
  max-height: 76vh;
}
.feature-spot__image img { border-radius: inherit; }

/* Botão da peça da semana herda o gold preenchido (já aplicado acima) */

/* ------------------------------------------------------------
   7. INSTAGRAM — suavizar quadradinhos
   ------------------------------------------------------------ */
.insta-item { border-radius: var(--radius-md); }

/* ------------------------------------------------------------
   8. RESPONSIVO — colapso mobile mantém respiro e proporção
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .hero__editorial-image {
    margin: 0;
    border-radius: var(--radius-lg);
  }
  .hero__editorial-text .hero__desc,
  .hero__editorial .hero__desc { max-width: none; }
  .feature-spot__image {
    margin: var(--space-5);
  }
}

@media (max-width: 768px) {
  .categoria-card { border-radius: var(--radius-md); }
}

/* ------------------------------------------------------------
   9. CARDS DE PRODUTO — arredondamento e sombra difusa (home)
   ------------------------------------------------------------ */
.product-card__image-wrap,
.product-card__image-link {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.product-card__img,
.product-card__img--hover { border-radius: inherit; }
.product-card {
  border-radius: var(--radius-md);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(26, 42, 61, 0.10);
}
/* Nota PIX discreta */
/* ------------------------------------------------------------
   10. FAIXA DE CONFIANÇA — segurança / troca / pagamento
   Ícones de linha fina; dourado só no traço (parcimônia)
   ------------------------------------------------------------ */
.trust-bar {
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-10);
}
.trust-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-6), 5vw, var(--space-20));
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: 300px;
}
.trust-item__icon {
  width: 30px;
  height: 30px;
  color: var(--color-gold);
  flex-shrink: 0;
}
.trust-item__title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-navy);
  margin: 0;
}
.trust-item__desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-gray-600);
  margin: 2px 0 0;
}

/* ------------------------------------------------------------
   11. PROVA SOCIAL — depoimentos (estrutura pronta; só aparece
   quando há avaliações reais aprovadas no Supabase)
   ------------------------------------------------------------ */
.depoimentos {
  background: var(--color-gold-pale);
  padding-block: var(--space-20);
}
.depoimentos__header { text-align: center; margin-bottom: var(--space-12); }
.depoimentos__overline {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}
.depoimentos__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--color-navy);
}
.depoimentos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 1040px;
  margin-inline: auto;
}
.depoimento-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: 0 8px 24px rgba(26, 42, 61, 0.06);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.depoimento-card__estrelas { display: flex; gap: 3px; }
.depoimento-card__texto {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--color-navy);
  margin: 0;
}
.depoimento-card__cliente {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}
.depoimento-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-navy);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  overflow: hidden;
  flex-shrink: 0;
}
.depoimento-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.depoimento-card__nome {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-navy);
  margin: 0;
}

/* ------------------------------------------------------------
   12. RESPONSIVO dos novos componentes
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .depoimentos__grid { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 760px) {
  .trust-bar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    max-width: 360px;
    margin-inline: auto;
  }
  .trust-item { max-width: none; width: 100%; }
}