/* ==========================================================================
   Cristal Lifewear — página inicial (home da loja, #26)
   Só a página inicial carrega esta folha (front matter `estilos`).
   Referência visual: loja-mvp/mockups/home.html.
   ========================================================================== */

.inicio__dentro {
  max-width: var(--container);
  margin-inline: auto;
}

/* --- Faixa do topo ------------------------------------------------------ */
/* Fica em base.njk, antes do cabeçalho, mas só aparece na página inicial. */

.faixa-topo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px var(--gutter);
  background: var(--rosa-100);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  letter-spacing: .06em;
  text-align: center;
  color: var(--accent-primary-hover);
}
.faixa-topo svg { width: 16px; height: 16px; flex: none; }

/* --- Campanha ----------------------------------------------------------- */
/* Capas sangradas, na proporção da arte (2400 × 1260): o texto da campanha já
   vem escrito nelas, à direita, então por cima só vão os botões, embaixo à
   esquerda. Com mais de uma, campanha.js reveza com um esmaecer. */

.campanha {
  position: relative;
  /* Largura explícita: sem ela, o max-height passa pelo aspect-ratio e
     estreita a seção em telas largas, em vez de só cortar a capa. */
  width: 100%;
  aspect-ratio: 40 / 21;
  min-height: 420px;
  /* No máximo a primeira tela: abaixo da faixa (42px) e do cabeçalho. Um
     teto fixo (era 760px) cortava um quarto da arte num monitor de 24" e
     sobrava espaço numa tela de 1440p. */
  max-height: calc(100svh - var(--header-h) - 42px);
  overflow: hidden;
  background: var(--rosa-200);
}
.campanha__foto,
.campanha__capa,
.campanha__capa picture,
.campanha__capa img,
.campanha__capa .img-empty {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A capa que entra esmaece devagar e assenta de um leve zoom; a que sai só
   esmaece, e volta ao zoom depois de sumir (o atraso), pronta para a próxima. */
.campanha__capa {
  opacity: 0;
  transition: opacity 1.6s var(--ease-soft);
}
.campanha__capa.is-ativa { opacity: 1; }
.campanha__capa img {
  /* Quando a tela é mais larga que a arte, o corte é na altura: tira mais de
     baixo (vestido) que de cima (cabeça e texto, no terço de cima). */
  object-position: 50% 12%;
  transform: scale(1.06);
  transition: transform 0s linear 1.6s;
}
.campanha__capa.is-ativa img {
  transform: none;
  transition: transform 3s cubic-bezier(.2, .6, .2, 1);
}

.campanha__dentro {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(28px, 4vw, 52px);
  box-sizing: content-box;
}
.campanha__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.campanha__acoes .arrow { width: 18px; height: 10px; flex: none; transition: transform var(--dur-base) var(--ease-soft); }
.campanha__acoes a:hover .arrow,
.campanha__acoes a:focus-visible .arrow { transform: translateX(5px); }
/* Medidas do mockup: com o respiro do .btn--lg os dois não cabem lado a lado. */
.campanha__acoes .btn { min-height: 56px; padding: 0 34px; }
.campanha__acoes .campanha__loja { padding: 0 30px; background: rgba(255, 255, 255, .78); }

/* Pontos e pausa numa pílula clara: em cima de qualquer foto eles se leem.
   No centro, para não encostar no botão do WhatsApp, fixo no canto direito;
   na altura dos botões, e acima da faixa deles (que ocupa a largura toda). */
.campanha__controles {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(clamp(28px, 4vw, 52px) + 10px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(252, 247, 246, .82);
  backdrop-filter: blur(6px);
}
.campanha__controles[hidden] { display: none; }
.campanha__ponto,
.campanha__pausa {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-heading);
  cursor: pointer;
  transition: width .5s var(--ease-soft);
}
/* Cada ponto é um trilho (::before) com o preenchimento por cima (::after).
   No ponto da capa à vista o trilho se alonga e o preenchimento corre nele
   no tempo do intervalo: dá para ver quando vem a próxima. Pausado, fica cheio. */
.campanha__ponto::before,
.campanha__ponto::after {
  content: "";
  grid-area: 1 / 1;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}
.campanha__ponto::before {
  opacity: .3;
  transition: width .5s var(--ease-soft), opacity var(--dur-base) var(--ease-soft);
}
.campanha__ponto::after { visibility: hidden; }
.campanha__ponto:hover::before { opacity: .6; }
.campanha__ponto[aria-current="true"] { width: 44px; }
.campanha__ponto[aria-current="true"]::before { width: 28px; opacity: .25; }
.campanha__ponto[aria-current="true"]::after { visibility: visible; width: 28px; }
.campanha[data-rodando] .campanha__ponto[aria-current="true"]::after {
  animation: campanha-encher var(--intervalo, 8s) linear both;
}
@keyframes campanha-encher {
  from { clip-path: inset(0 100% 0 0 round 999px); }
  to   { clip-path: inset(0 0 0 0 round 999px); }
}

/* O toque: o botão afunda, volta e solta um anel rosa. */
.campanha__ponto.is-tocado,
.campanha__pausa.is-tocado { animation: campanha-toque .45s var(--ease-soft); }
@keyframes campanha-toque {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-primary) 45%, transparent); }
  35%  { transform: scale(.8); }
  70%  { transform: scale(1.12); }
  100% { transform: scale(1);    box-shadow: 0 0 0 9px transparent; }
}

.campanha__pausa svg { width: 11px; height: 11px; fill: currentColor; }
.campanha__icone-tocar,
.campanha__pausa[data-pausado] .campanha__icone-pausa { display: none; }
.campanha__pausa[data-pausado] .campanha__icone-tocar { display: inline; }
.campanha__ponto:focus-visible,
.campanha__pausa:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .campanha__capa,
  .campanha__capa img,
  .campanha__ponto,
  .campanha__ponto::before { transition: none; }
  .campanha__capa img { transform: none; }
  .campanha[data-rodando] .campanha__ponto[aria-current="true"]::after,
  .campanha__ponto.is-tocado,
  .campanha__pausa.is-tocado { animation: none; }
}

/* --- Categorias --------------------------------------------------------- */
/* Painéis de foto, dois por linha, separados por um fio claro e colados à
   capa. O nome em caixa alta e o botão ficam no centro da foto; um véu leve
   segura o contraste do branco em foto clara. Número ímpar: o último painel
   ocupa a linha inteira, na mesma altura dos outros. */

.categorias { padding: 8px 8px 0; }
.categorias__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.categoria:last-child:nth-child(odd) { grid-column: 1 / -1; }
.categoria__link {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 22px);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 24px;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
.categoria:last-child:nth-child(odd) .categoria__link { aspect-ratio: 32 / 10; }
.categoria__foto,
.categoria__foto picture,
.categoria__foto img,
.categoria__foto .img-empty {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Foto de produto é retrato: no painel deitado, o corte guarda o rosto e o
     busto, que é onde a peça aparece. */
  object-position: 50% 22%;
}
.categoria__foto { z-index: -1; }
.categoria__foto img { transition: transform var(--dur-slow) var(--ease-soft); }
.categoria__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(44, 24, 30, .16);
  transition: background var(--dur-base) var(--ease-soft);
}
.categoria__nome {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.375rem, 3.4vw, 3.25rem);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 2px 22px rgba(44, 24, 30, .35);
}
/* Branco sobre o rosa escuro da marca dá 5:1; o rosa claro da referência
   não chegaria a 3:1 com letra deste tamanho. */
.categoria__botao {
  display: inline-flex;
  align-items: center;
  min-height: clamp(42px, 4vw, 54px);
  padding: 0 clamp(24px, 3vw, 44px);
  background: var(--accent-primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: .24em;
  text-transform: uppercase;
  transition: background var(--dur-base) var(--ease-soft);
}
/* O `a:hover` de site.css pinta link de rosa e pesa mais que .categoria__link:
   sem repetir o branco aqui, o nome ficava rosa e o texto do botão sumia
   no fundo da mesma cor. */
.categoria__link:hover { color: #fff; }
.categoria__link:hover .categoria__foto img { transform: scale(1.04); }
.categoria__link:hover .categoria__foto::after { background: rgba(44, 24, 30, .26); }
.categoria__link:hover .categoria__botao { background: var(--accent-primary-hover); }
.categoria__link:focus-visible { outline: 3px solid #fff; outline-offset: -8px; }

/* --- Novidades ---------------------------------------------------------- */
/* Título no centro com um traço rosa embaixo, e a grade de fotos retas:
   nome discreto, preço em rosa. O card é o mesmo .card-peca da loja (site.css). */

.novidades { padding: clamp(64px, 8vw, 104px) var(--gutter); }
.novidades__topo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(36px, 4.5vw, 56px);
}
.novidades__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.125rem, 3.6vw, 2.875rem);
  line-height: 1.1;
  color: var(--accent-display);
}
.novidades__traco {
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background: var(--rosa-400);
}
.novidades__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(40px, 4vw, 56px) clamp(16px, 2.2vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.novidades__mais {
  display: flex;
  justify-content: center;
  margin: clamp(44px, 5vw, 64px) 0 0;
}

/* --- Manifesto ---------------------------------------------------------- */
/* Mesmos componentes da antiga landing, na ordem e no tamanho do mockup:
   frase, texto, e a assinatura por último, em rosa. */

#manifesto { padding-block: clamp(56px, 6vw, 76px); }
.manifesto--loja { gap: 22px; }
.manifesto--loja .manifesto__quote {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.24;
  text-wrap: balance;
}
.manifesto--loja .manifesto__text {
  margin: 0;
  max-width: 56ch;
  font-size: var(--fs-body);
}
.manifesto--loja .manifesto__by {
  margin-top: 0;
  letter-spacing: .26em;
  color: var(--accent-primary-hover);
}

/* --- Faixa de confiança ------------------------------------------------- */

.confianca { padding: 0 var(--gutter); }
.confianca__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--container);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--border-hairline);
}
.confianca__lista li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 30px 24px;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--text-body);
}
.confianca__lista li:first-child { padding-left: 0; }
.confianca__lista li:last-child { padding-right: 0; }
.confianca__lista svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--accent-primary);
}
.confianca__whatsapp svg { color: var(--whatsapp-glyph); }
.confianca__whatsapp a {
  /* Área de toque maior sem mudar o desenho (ver site.css). */
  display: inline-flex;
  align-items: center;
  padding-block: 7px;
  margin-block: -7px;
  color: inherit;
  text-decoration: none;
}
.confianca__whatsapp a:hover { color: var(--accent-primary); }
.confianca__whatsapp a:focus-visible { border-radius: var(--radius-sm); }

/* --- Responsivo --------------------------------------------------------- */

@media (max-width: 1040px) {
  .novidades__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Painel mais alto: em meia tela, 16/10 deixaria a foto numa fita. */
  .categoria__link { aspect-ratio: 4 / 3; }
  .categoria:last-child:nth-child(odd) .categoria__link { aspect-ratio: 8 / 3; }
  .confianca__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .confianca__lista li { padding: 22px 16px 22px 0; }
}

/* No celular a capa vem inteira, na proporção da arte, com os pontos sobre
   ela. Os dois botões ficam abaixo, lado a lado, dividindo a largura: por
   cima da capa cobririam o texto dela, e um embaixo do outro, no tamanho do
   desktop, tomavam a tela toda. */
@media (max-width: 900px) {
  .campanha { aspect-ratio: auto; min-height: 0; max-height: none; overflow: visible; background: var(--surface-page); }
  .campanha__foto { position: relative; aspect-ratio: 40 / 21; overflow: hidden; }
  .campanha__controles { bottom: 10px; }
  .campanha__dentro {
    position: static;
    display: block;
    padding: 20px var(--gutter) 4px;
  }
  .campanha__acoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .campanha__acoes .btn,
  .campanha__acoes .campanha__loja {
    min-height: 48px;
    padding: 0 10px;
    gap: 8px;
    font-size: clamp(11px, 3.2vw, 13px);
    letter-spacing: .12em;
  }
  .campanha__acoes .campanha__loja { background: transparent; }
  /* Meia largura não comporta a seta num celular de 320 px. */
  .campanha__acoes .arrow { display: none; }
}

@media (max-width: 560px) {
  .novidades__grade { gap: 32px 14px; }
  /* Um painel por linha, todos iguais. */
  .categorias__grade { grid-template-columns: 1fr; }
  .categoria__link,
  .categoria:last-child:nth-child(odd) .categoria__link { aspect-ratio: 4 / 3; }
  .categoria__nome { font-size: 1.75rem; }
  .confianca__lista { grid-template-columns: 1fr; }
  .confianca__lista li { padding: 18px 0; }
}