/* ════════════════════════════════════════════════════════════════════════
   AMIRA — home  (tokens e componentes em base.css)
   Componentes de produto, coleções e pausas da home. A campanha principal
   e o ritmo editorial estão em campaign.css.
   ════════════════════════════════════════════════════════════════════════ */

/* Máscaras das palavras animadas pelo GSAP na campanha principal. */
.palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.palavra__dentro { display: inline-block; will-change: transform; }

/* ── Vitrine (novidades): variação de escala editorial ─────────────────── */
.vitrine-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-7) var(--s-5);
}
.vitrine-grid > .catalogo-card { grid-column: span 3; }
.vitrine-grid > .catalogo-card:nth-child(1),
.vitrine-grid > .catalogo-card:nth-child(2) { grid-column: span 6; }
.vitrine-grid > .catalogo-card:nth-child(-n + 2) .catalogo-card-img { aspect-ratio: 5 / 4; }
.vitrine-grid > .esqueleto, .vitrine-grid > .catalogo-vazio { grid-column: 1 / -1; }

/* ── Produto da estação — editorial ────────────────────────────────────── */
.highlight { padding-block: var(--secao); background: var(--pedestal); }
.highlight-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(var(--s-6), 6vw, var(--s-10));
  min-height: 560px;
}
.highlight-visual { position: relative; }
.highlight-circle {
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: var(--porcelana);
}
.highlight-circle img {
  position: absolute; inset: -8% 0;
  width: 100%; height: 116%;
  object-fit: contain;
  padding: 10%;
  mix-blend-mode: multiply;
}
body[data-theme="dark"] .highlight-circle img { mix-blend-mode: normal; }
.highlight-tag {
  position: absolute; top: var(--s-5); left: var(--s-5);
  padding: var(--s-1) var(--s-3);
  background: var(--tinta); color: var(--porcelana);
  font-size: var(--t-micro); letter-spacing: var(--track-micro); text-transform: uppercase;
}
.highlight-content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }
.section-eyebrow2 {
  font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--tinta-3);
}
.highlight-title { font-size: var(--t-1); }
.highlight-text {
  font-size: var(--t-4); line-height: 1.7; color: var(--tinta-2); max-width: 44ch;
  /* descrição extensa permanece na página do produto */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.highlight-notes { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.note-pill {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pilula);
  font-size: var(--t-pp);
  color: var(--tinta-2);
}
.highlight-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ouro);
  font-family: var(--f-display);
  font-size: var(--t-3);
  font-variant-numeric: lining-nums tabular-nums;
}
.highlight-price small { font-family: var(--f-texto); font-size: var(--t-micro); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--tinta-3); }
.highlight-nav {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s-4);
  margin-top: var(--s-6);
}
.highlight-nav-btn, .trilho-seta, .carousel-btn {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pilula);
  color: var(--tinta);
  transition: background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease), border-color var(--t-ui);
}
.highlight-nav-btn svg, .trilho-seta svg, .carousel-btn svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .highlight-nav-btn:hover, .trilho-seta:hover { background: var(--tinta); color: var(--porcelana); border-color: var(--tinta); }
}
.highlight-nav-contador { min-width: 4ch; text-align: center; font-size: var(--t-pp); color: var(--tinta-2); letter-spacing: 0.1em; }

/* ── Sua essência (frasco 3D) ──────────────────────────────────────────── */
.essencia {
  position: relative;
  min-height: 78svh;
  display: flex; align-items: center;
  padding-block: var(--secao);
  overflow: hidden;
  background: var(--porcelana);
}
/* O brilho de "nascer do sol" mora no palco: na versão 3D ele vem da
   própria cena; sem 3D, este gradiente faz o papel. */
.essencia__palco::before {
  content: "";
  position: absolute; inset: -10%;
  background: radial-gradient(50% 45% at 50% 62%, rgba(226, 184, 79, 0.28), rgba(236, 193, 160, 0.12) 45%, transparent 72%);
  z-index: -1;
}
.essencia__palco.com-3d::before { display: none; }
.essencia__interno {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-8);
}
.essencia__palco {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 68svh;
  width: 100%;
}
.essencia__palco canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
/* Reserva sem 3D (celular, economia de dados, movimento reduzido): a foto
   tem fundo preto, então vira um quadro escuro de vitrine — não dá para
   "dissolver" o preto no fundo claro. */
.essencia__palco:not(.com-3d) { background: var(--iphone-fundo); overflow: hidden; }
.essencia__reserva {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 6% 0;
  transition: opacity 800ms var(--ease);
}
.essencia__palco.com-3d .essencia__reserva { opacity: 0; }
/* o sol atrás do frasco: um semicírculo de luz que "nasce" */
.essencia__sol {
  position: absolute; left: 50%; bottom: 14%;
  width: 70%; aspect-ratio: 2 / 1;
  translate: -50% 0;
  border-radius: 999px 999px 0 0;
  border: 1px solid var(--ouro);
  border-bottom: 0;
  opacity: 0.45;
  pointer-events: none;
  z-index: -1;
}
.essencia__texto { display: flex; flex-direction: column; gap: var(--s-6); }
.essencia__texto .titulo-1 { display: flex; flex-direction: column; font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5.25rem); line-height: 1.02; }
.essencia__frase { display: block; }
.essencia__acao { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }

/* ── Categorias: grade assimétrica de 12 colunas ───────────────────────── */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(220px, 18vw, 320px);
  gap: var(--s-4);
}
.cat-card { position: relative; overflow: hidden; background: var(--pedestal); color: var(--campanha-texto); grid-column: span 4; }
.cat-card:nth-child(5n + 1) { grid-column: span 7; grid-row: span 2; }
.cat-card:nth-child(5n + 2) { grid-column: span 5; }
.cat-card:nth-child(5n + 3) { grid-column: span 5; }
.cat-card:nth-child(5n + 4) { grid-column: span 6; }
.cat-card:nth-child(5n + 5) { grid-column: span 6; }
.cat-imagem-generica { position: absolute; inset: 0; }
.cat-imagem-generica img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.cat-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18, 13, 11, 0.62), rgba(18, 13, 11, 0) 55%); transition: opacity var(--t-ui); }
.cat-label { position: absolute; left: var(--s-5); bottom: var(--s-5); right: var(--s-8); }
.cat-name { font-family: var(--f-display); font-size: var(--t-3); line-height: 1.1; }
.cat-arrow {
  position: absolute; right: var(--s-5); bottom: var(--s-5);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(251, 248, 245, 0.45);
  border-radius: var(--raio-pilula);
  font-size: 1rem;
  transition: background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}
@media (hover: hover) {
  .cat-card:hover .cat-imagem-generica img { transform: scale(1.06); }
  .cat-card:hover .cat-arrow { background: var(--campanha-texto); color: var(--produto-tinta); transform: translateX(4px); }
}

/* ── Os mais amados: trilho horizontal com encaixe ─────────────────────── */
.featured-acoes { display: flex; align-items: center; gap: var(--s-6); }
.trilho-setas { display: flex; gap: var(--s-2); }
.trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 23vw, 320px);
  gap: var(--s-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margem);
  padding: 0 max(var(--margem), calc((100vw - var(--largura)) / 2 + var(--margem))) var(--s-4);
  scrollbar-width: none;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho > * { scroll-snap-align: start; }
.trilho .catalogo-loading, .trilho .catalogo-vazio, .trilho .esqueleto { grid-column: auto; }

/* ── iPhones: bloco escuro, o aparelho em destaque ─────────────────────── */
.carousel-section {
  padding-block: var(--secao);
  background: var(--iphone-fundo);
  color: var(--iphone-texto);
  overflow: hidden;
}
.carousel-cabecalho { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); margin-bottom: var(--s-8); }
.carousel-cabecalho .rotulo { color: rgba(245, 237, 231, 0.6); }
.carousel-cabecalho .titulo-1 { color: var(--iphone-texto); }
.carousel-cabecalho .titulo-1 em { color: var(--ouro-claro); }
.carousel-cabecalho .texto-apoio { color: rgba(245, 237, 231, 0.72); }
.carousel-track-wrapper {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.carousel-track {
  display: flex; gap: 20px;
  width: max-content;
  animation: carrossel-desliza 48s linear infinite;
}
.carousel-track:hover { animation-play-state: paused; }
@keyframes carrossel-desliza { to { transform: translateX(-50%); } }
/* Cards claros sobre o preto (como a Apple): as fotos dos aparelhos têm
   fundo branco e virariam caixas num card escuro. */
.carousel-card {
  position: relative;
  flex: none;
  width: 280px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--produto-pedestal);
  color: var(--produto-tinta);
}
.carousel-card img { width: 100%; height: 100%; object-fit: contain; padding: 12%; mix-blend-mode: multiply; transition: transform 1s var(--ease); }
@media (hover: hover) { .carousel-card:hover img { transform: scale(1.05); } }
.carousel-card--produto img { padding: 14% 14% 30%; }
.carousel-card-info {
  position: absolute; left: var(--s-4); right: var(--s-4); bottom: var(--s-4);
  display: flex; flex-direction: column; gap: 2px;
}
.carousel-card-nome { font-size: var(--t-p); line-height: 1.35; }
.carousel-card-preco { font-family: var(--f-display); font-size: 1.1rem; color: var(--produto-tinta); }
.carousel-card-selo { background: var(--produto-tinta); color: var(--produto-pedestal); }
.carousel-controls { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-6); }
.carousel-btn { border-color: var(--campanha-linha); color: var(--iphone-texto); }
@media (hover: hover) { .carousel-btn:hover { background: var(--iphone-texto); color: var(--iphone-fundo); border-color: var(--iphone-texto); } }

/* ── Depoimentos ───────────────────────────────────────────────────────── */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}
.review-card {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--linha);
}
.review-text { font-family: var(--f-display); font-size: var(--t-4); line-height: 1.55; font-style: italic; }
.estrelas { display: inline-flex; gap: 3px; }
.estrela svg { width: 14px; height: 14px; fill: var(--linha-forte); }
.estrela.cheia svg { fill: var(--ouro); }
.reviewer { display: flex; align-items: center; gap: var(--s-3); margin-top: auto; }
.reviewer-avatar {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--raio-pilula);
  background: var(--pedestal);
  font-size: var(--t-pp); letter-spacing: 0.06em;
}
.reviewer-name { font-size: var(--t-p); }
.reviewer-city { font-size: var(--t-pp); color: var(--tinta-3); }

/* ── Lista (WhatsApp) ──────────────────────────────────────────────────── */
.newsletter { border-top: 1px solid var(--linha); }
.newsletter-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-5); }
.newsletter-title { max-width: 18ch; }
.newsletter-text { margin-inline: auto; }
.newsletter-form {
  display: flex; gap: var(--s-3);
  width: min(100%, 560px);
  margin-top: var(--s-3);
}
.newsletter-form .newsletter-input { flex: 1; }

/* ── Responsivo ────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .vitrine-grid > .catalogo-card { grid-column: span 4; }
  .vitrine-grid > .catalogo-card:nth-child(-n + 2) { grid-column: span 6; }
  .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .highlight-inner, .essencia__interno { grid-template-columns: 1fr; }
  .highlight-inner { min-height: 0; }
  .essencia { min-height: 0; }
  .essencia__palco { max-height: 60svh; aspect-ratio: 1; }
  .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; }
  .cat-card, .cat-card:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .cat-card:nth-child(3n + 1) { grid-column: span 2; }
}
@media (max-width: 640px) {
  .vitrine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-3); }
  .vitrine-grid > .catalogo-card,
  .vitrine-grid > .catalogo-card:nth-child(-n + 2) { grid-column: span 1; }
  .vitrine-grid > .catalogo-card:nth-child(-n + 2) .catalogo-card-img { aspect-ratio: 4 / 5; }
  .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 58vw, 320px); gap: var(--s-3); }
  .cat-card:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .cat-card:first-child { grid-column: span 2; grid-row: span 1; }
  .cat-label { left: var(--s-4); bottom: var(--s-4); right: var(--s-5); }
  .cat-name { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  .cat-arrow { right: var(--s-3); bottom: var(--s-3); width: 36px; height: 36px; }
  .essencia__palco { max-height: 45svh; aspect-ratio: 4 / 3; }
  .reviews-grid { grid-template-columns: 1fr; }
  .newsletter-form { flex-direction: column; }
  .trilho { grid-auto-columns: 62vw; gap: var(--s-3); }
  .trilho-setas { display: none; }
  .featured-acoes { width: 100%; justify-content: flex-start; }
  .carousel-card { width: 220px; }
}