/* Home do redesign: hero, trilho de categorias, vitrine de ofertas, destaques,
   como funciona e banner de locacao.
   Consome so os tokens de tokens.css e os componentes de componentes.css.
   Nada aqui vaza para o markup do Journal 2: todo seletor comeca em .xara-
   ou esta dentro de um. */

/* --- hero ---
   Celular: texto e depois a arte, na ordem do DOM (a foto fica abaixo do
   CTA, decisao do layout B). Nada de `order`. */
.xara-hero {
  background: var(--xara-surface-dark);
  color: var(--xara-ink-on-dark);
  padding: 32px 0;
  overflow: hidden;
}
.xara-hero .xara-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
.xara-hero__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.xara-hero .xara-eyebrow { color: var(--xara-gold); }
.xara-hero .xara-lead { color: var(--xara-muted-on-dark); max-width: 44ch; margin: 0; }
.xara-hero__texto .xara-btn { margin-top: 8px; }
/* Faixa de provas: so o que a Xara confirmou (11/09/2026). No celular fica
   entre o CTA e a arte (ordem do DOM); no desktop, dentro da coluna de texto. */
.xara-hero__provas {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.xara-hero__provas li {
  position: relative;
  padding-left: 16px;
  font-size: .9rem;
  line-height: 1.35;
}
.xara-hero__provas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--xara-gold);
}
.xara-hero__provas strong { color: var(--xara-ink-on-dark); font-weight: 600; }
.xara-hero__provas small { display: block; font-size: .78rem; color: var(--xara-muted-on-dark); }
.xara-hero__arte {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
/* Forma organica da arte: mascara SVG responsiva (e nao clip-path: path(),
   que nao escala com a caixa). Sem o produto do hero, o gradiente e a arte. */
.xara-blob {
  aspect-ratio: 1 / 1.02;
  background: linear-gradient(160deg, #2C4433, var(--xara-surface-dark-2));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 566 568' preserveAspectRatio='none'%3E%3Cpath d='M431 42c92 63 135 196 112 310s-128 177-243 196S58 545 22 449 40 183 133 95 339-21 431 42Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 566 568' preserveAspectRatio='none'%3E%3Cpath d='M431 42c92 63 135 196 112 310s-128 177-243 196S58 545 22 449 40 183 133 95 339-21 431 42Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* Com foto (Cesta com 20 Rosas, como no prototipo): fundo branco, a foto de
   catalogo preenche a forma. O blob inteiro e link para o produto. */
.xara-blob--foto {
  display: block;
  background: var(--xara-surface-panel);
}
.xara-blob--foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Selo "Entrega no mesmo dia": pilula magenta encostada na borda superior
   direita do blob. */
.xara-hero__selo {
  position: absolute;
  top: 6%;
  right: 0;
  background: var(--xara-accent);
  color: #FFF;
  border-radius: var(--xara-raio-pill);
  padding: 8px 16px;
  font-family: var(--xara-fonte-corpo);
  font-weight: 700;
  font-size: .82rem;
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
}
/* Etiqueta de preco: cartao creme levemente girado, sobrepondo o canto
   inferior esquerdo do blob, com o "mais pedida" na manuscrita. */
.xara-hero__etiqueta {
  position: absolute;
  left: 0;
  bottom: 4%;
  max-width: 200px;
  background: var(--xara-surface);
  color: var(--xara-ink);
  border-radius: 10px;
  padding: 12px 16px;
  transform: rotate(-6deg);
  transform-origin: bottom left;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .55);
}
.xara-hero__etiqueta:hover,
.xara-hero__etiqueta:focus-visible { text-decoration: none; color: var(--xara-ink); }
.xara-hero__etiqueta:focus-visible,
.xara-blob--foto:focus-visible { outline: 3px solid var(--xara-gold); outline-offset: 3px; }
.xara-hero__etiqueta-titulo {
  font-family: var(--xara-fonte-script);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--xara-accent-texto);
}
.xara-hero__etiqueta strong {
  font-family: var(--xara-fonte-corpo);
  font-weight: 700;
  font-size: .82rem;
  line-height: 1.3;
}
.xara-hero__etiqueta-preco {
  font-family: var(--xara-fonte-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--xara-gold-escuro);
}

/* --- trilho de categorias ---
   Celular: rolagem horizontal com snap, sangrando ate a borda da tela.
   Acima de 980px vira grade de 5 colunas (4 do banco + Locacao). */
.xara-trilho {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--xara-gutter));
  padding: 0 var(--xara-gutter) 8px;
}
.xara-trilho::-webkit-scrollbar { display: none; }
.xara-trilho > .xara-card-categoria {
  flex: 0 0 min(42vw, 200px);
  min-width: 148px;
  scroll-snap-align: start;
}
/* Mais gradiente atras do rotulo: com nome de duas linhas ("ARRANJOS &
   VASOS") a contagem subia para a parte clara da foto. */
.xara-trilho .xara-card-categoria__rotulo {
  padding-top: 56px;
  background: linear-gradient(to top, var(--xara-surface-dark) 30%, transparent);
}

/* Card de icone (Locacao de Materiais): sem foto, sobre --xara-sage-tint. */
.xara-card-categoria--icone {
  background: var(--xara-sage-tint);
  color: var(--xara-ink);
}
.xara-card-categoria__icone {
  position: absolute;
  inset: 0 0 22% 0;
  display: grid;
  place-items: center;
  color: var(--xara-sage);
}
.xara-card-categoria__icone svg { width: 42%; max-width: 76px; height: auto; }
.xara-card-categoria--icone .xara-card-categoria__rotulo { background: none; }
.xara-card-categoria--icone .xara-card-categoria__total { color: var(--xara-ink); opacity: .72; }

/* --- vitrine de ofertas --- */
.xara-grade-produtos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.xara-secao--colada { padding-top: 0; }

/* --- destaques (modulo custom_sections do Journal 2) ---
   O modulo continua escolhido no admin; so a casca dele muda. O Journal 2 da
   aos wrappers largura por classe (.xs-50, .md-33...), flex, margem negativa e
   padding: aqui tudo isso e zerado e a grade passa a ser a mesma de
   .xara-grade-produtos. O Isotope nao roda mais (ver o template do modulo). */
.xara-destaques .box-content { margin: 0; }
.xara-destaques .product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
}
.xara-destaques .product-grid-item {
  display: flex;
  flex-direction: column;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
}
.xara-destaques .product-grid-item > .xara-card-produto { flex: 1; }

/* --- como funciona --- */
.xara-passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.xara-passo {
  background: rgba(243, 236, 221, .05);
  border: 1px solid var(--xara-border-dark);
  border-radius: var(--xara-raio);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.xara-passo .xara-h3 { font-size: 1.25rem; }
.xara-passo p { margin: 0; color: var(--xara-muted-on-dark); line-height: 1.6; }
.xara-passo__numero {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--xara-gold);
  color: #2A1C08;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--xara-fonte-display);
  font-weight: 700;
  font-size: 1.15rem;
}

/* --- depoimentos ---
   Cards brancos sobre o creme; citacao em Caveat (a manuscrita e para
   etiquetas e depoimentos, spec secao 4). Estrelas em dourado escuro,
   que e o dourado com contraste para texto sobre fundo claro. */
.xara-depoimentos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.xara-depoimento {
  background: var(--xara-surface-panel);
  border: 1px solid var(--xara-border);
  border-radius: var(--xara-raio);
  box-shadow: var(--xara-shadow);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.xara-depoimento__estrelas {
  color: var(--xara-gold-escuro);
  font-size: .95rem;
  letter-spacing: .12em;
}
/* Zera o blockquote do Journal 2 (barra vermelha a esquerda, padding e
   italico), que vale para todo blockquote da pagina. */
.xara-depoimento__texto {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-style: normal;
  font-family: var(--xara-fonte-script);
  font-size: 1.45rem;
  line-height: 1.3;
  color: var(--xara-ink);
  flex: 1;
}
.xara-depoimento__quem {
  margin: 0;
  font-size: .9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}
.xara-depoimento__quem strong { font-weight: 600; }
.xara-depoimento__quem span { color: var(--xara-ink); opacity: .64; }

/* --- banner de locacao --- */
.xara-banner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  background: var(--xara-surface-dark);
  color: var(--xara-ink-on-dark);
  border-radius: 26px;
  padding: 32px 24px;
  overflow: hidden;
}
.xara-banner__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.xara-banner .xara-eyebrow { color: var(--xara-gold); }
.xara-banner .xara-lead { color: var(--xara-muted-on-dark); max-width: 44ch; margin: 0; }
.xara-banner__texto .xara-btn { margin-top: 8px; }
/* Foto do banner de locacao do site antigo (1920x410, com texto gravado na
   metade esquerda). Preenche a caixa enquadrando a parte direita da mesa, onde
   nao ha texto. Sem a foto, fica o gradiente. */
.xara-banner__arte {
  min-height: 160px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--xara-sage), var(--xara-surface-dark-2));
}
.xara-banner__arte img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  object-position: 92% 50%;
}

@media (min-width: 768px) {
  .xara-grade-produtos,
  .xara-destaques .product-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (min-width: 980px) {
  .xara-hero { padding: 56px 0; }
  .xara-hero .xara-container {
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
  }
  .xara-hero__arte { margin: 0 0 0 auto; }
  .xara-trilho {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    overflow: visible;
    scroll-snap-type: none;
    margin: 0;
    padding: 0;
  }
  .xara-trilho > .xara-card-categoria { min-width: 0; }
  .xara-passos { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .xara-passo { padding: 32px; }
  .xara-depoimentos { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .xara-depoimento { padding: 32px; }
  .xara-banner {
    grid-template-columns: 1.1fr .9fr;
    gap: 48px;
    padding: 56px;
    align-items: center;
  }
  .xara-banner__arte,
  .xara-banner__arte img { min-height: 280px; }
}
@media (min-width: 1220px) {
  .xara-grade-produtos,
  .xara-destaques .product-grid { grid-template-columns: repeat(4, 1fr); }
}