/*
 * Tema — Mini Colecao Outubro Rosa 2026
 *
 * Carregado depois de ../../campanhas/_base/campanha.css e vale so para esta pagina.
 * Paleta tirada das fotos: rosa pink do laco, blush dos fundos e o marrom da tipografia
 * "Outubro" impressa nos cards.
 */

:root {
  --blush: #fdf4f5;
  --blush-medio: #fbe6ea;
  --blush-forte: #f7d6de;
  --pink: #d23a78;           /* laco e "ROSA" dos cards */
  --pink-forte: #a82a5e;

  --marca: #c2386f;
  --marca-forte: #9e2a59;
  --marca-clara: #f8dbe5;

  --fundo: #fdf8f6;
  --fundo-alt: #faeef0;
  --papel: #ffffff;

  --tinta: #3d2a27;          /* marrom do lettering "Outubro" */
  --tinta-suave: #6d5049;
  --tinta-fraca: #9a807a;

  --apoio: #c46a86;
  --acento: #7a2b48;

  --linha: rgba(125, 60, 80, .12);
  --linha-forte: rgba(125, 60, 80, .22);

  --hero-fundo: linear-gradient(180deg, #fbe9ee 0%, #fdf3f5 70%, var(--fundo) 100%);
  --hero-eyebrow-cor: var(--marca-forte);
  --hero-eyebrow-borda: rgba(194, 56, 111, .32);

  --artes-fundo: #7a2b48;
  --artes-texto: #fbeef2;
  --artes-realce: #f4a7c1;
}

/* --------------------------------------------------------------------- hero */

.hero { border-bottom: 1px solid rgba(194, 56, 111, .12); }
.hero-conteudo { padding-top: 34px; padding-bottom: 50px; }
.hero h1 { color: var(--tinta); }
.hero-ano { color: var(--marca); }

/* laco decorativo: nos cantos, atras do texto, nunca sobre ele */
.hero-cena { color: var(--pink); opacity: .13; }
.hero-cena svg { display: block; width: 100%; height: auto; }
.hero-cena-esq { left: -34px; bottom: -40px; width: 170px; transform: rotate(-14deg); }
.hero-cena-dir { right: -26px; top: -26px; width: 130px; transform: rotate(16deg); opacity: .09; }

@media (min-width: 700px) {
  .hero-cena-esq { left: 4vw; bottom: -54px; width: 220px; }
  .hero-cena-dir { right: 5vw; top: -18px; width: 170px; }
}

@media (max-width: 430px) {
  .hero-cena-esq { width: 120px; left: -40px; }
  .hero-cena-dir { width: 96px; right: -30px; }
}

/* ------------------------------------------------------------ compartilhar */

/* CTA secundario: contorno rosé, menor que os botoes de pedido. Verde fica para o WhatsApp. */
.compartilhar { margin-top: 18px; }
.btn-compartilhar {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 18px;
  border: 1px solid rgba(194, 56, 111, .34); border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--marca-forte);
  font: 600 .78rem/1 var(--texto); letter-spacing: .2px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.btn-compartilhar:hover { background: var(--marca-clara); border-color: var(--marca); }
.btn-compartilhar svg { flex: 0 0 auto; }

/* confirmacao discreta; nunca alert() */
.compartilhar-aviso {
  position: fixed; left: 50%; z-index: 60;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100% - 32px); margin: 0;
  padding: 10px 18px; border-radius: 999px;
  background: var(--tinta); color: #fff;
  font-size: .8rem; text-align: center; overflow-wrap: anywhere;
  box-shadow: 0 10px 26px rgba(61, 42, 39, .22);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .25s ease, transform .25s ease;
}
.compartilhar-aviso.visivel { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 600px) {
  .btn-compartilhar { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .compartilhar-aviso { transition: none; }
}

/* ------------------------------------------------------------------ vitrine */

/* CTA dos produtos: mesmo reconhecimento visual do WhatsApp usado na home. */
.grade .btn-principal,
.destaques .btn-principal {
  width: 84%;
  min-height: 42px;
  align-self: center;
  background: #25d366;
  color: #fff;
}
.grade .btn-principal:hover,
.destaques .btn-principal:hover { background: #1fb855; }
.grade .btn-principal::before,
.destaques .btn-principal::before {
  content: "";
  width: 17px; height: 17px; flex: 0 0 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.grade .btn-principal .btn-seta,
.destaques .btn-principal .btn-seta { display: none; }

/*
 * Grade: quatro colunas no desktop, duas no tablet e no celular.
 * A grade de tres colunas da base deixaria um card sozinho na segunda linha.
 */
@media (min-width: 700px) {
  .grade { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grade { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/*
 * Palco quadrado em todas as larguras. A foto da mascara ja e quadrada, e nas tres em
 * retrato o card fotografado cabe inteiro no recorte — em 3:4 a mascara perderia as
 * laterais do card.
 */
.grade .foto-palco { aspect-ratio: 1 / 1; }

.produto-foto { background: var(--blush); }

/*
 * Informacoes do card: tamanho e acabamento como selos discretos ("observacoes" no
 * colecao.js) e a lista quantidade -> valor ("opcoes"). A base empurra precos e botao
 * para o pe do card, entao cards de descricao mais curta continuam alinhados.
 */
.grade .detalhes,
.destaques .detalhes {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 2px 0 14px;
}
.grade .detalhes li,
.destaques .detalhes li {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0; padding: 3px 10px 3px 8px;
  border: 1px solid rgba(194, 56, 111, .16); border-radius: 999px;
  background: var(--blush);
  color: var(--tinta-suave);
  font-size: .72rem; line-height: 1.3; white-space: nowrap;
}
.grade .detalhes li:nth-child(1),
.destaques .detalhes li:nth-child(1) { font-variant-numeric: tabular-nums; }
.grade .detalhes li::before,
.destaques .detalhes li::before {
  position: static; flex: 0 0 auto;
  width: 12px; height: 12px; border-radius: 0;
  background: var(--marca);
  -webkit-mask: var(--selo-icone) center / contain no-repeat;
  mask: var(--selo-icone) center / contain no-repeat;
}
/* regua (tamanho) e brilho (laminacao em glitter) */
.grade .detalhes li:nth-child(1),
.destaques .detalhes li:nth-child(1) {
  --selo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17 17 3l4 4L7 21z'/%3E%3Cpath d='m7 13 2 2M10 10l2 2M13 7l2 2'/%3E%3C/svg%3E");
}
.grade .detalhes li:nth-child(2),
.destaques .detalhes li:nth-child(2) {
  --selo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l2.2 6.3L20.5 10.5l-6.3 2.2L12 19l-2.2-6.3L3.5 10.5l6.3-2.2z'/%3E%3Cpath d='M19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9z'/%3E%3C/svg%3E");
}

.grade .preco-opcoes {
  margin-top: auto; padding-top: 6px;
  border-top: 1px solid var(--linha);
}
.grade .preco-opcoes li { padding: 5px 0; }
.grade .preco-opcoes span { font-size: .8rem; color: var(--tinta-suave); white-space: nowrap; }
.grade .preco-opcoes strong { font-size: 1.1rem; font-weight: 700; white-space: nowrap; }

/* A base encolhe tudo na grade estreita; aqui a leitura dos valores vem primeiro. */
/* As 4 linhas da grade com a mesma altura: no celular (2 x 2) a segunda linha nao
   fica mais baixa que a primeira. */
.grade { grid-auto-rows: 1fr; }

@media (max-width: 699px) {
  /* a base corta a descricao em 4 linhas no celular; aqui ela aparece inteira */
  .grade .produto-descricao { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .grade .detalhes { gap: 5px; margin-bottom: 11px; }
  .grade .detalhes li { font-size: .7rem; padding: 3px 8px 3px 7px; }
  .grade .preco-opcoes li { padding: 4px 0; gap: 6px; }
  .grade .preco-opcoes span { font-size: .76rem; }
  .grade .preco-opcoes strong { font-size: 1.02rem; }
  .grade .btn { padding: 0 8px; gap: 5px; }
  .grade .btn-principal { min-height: 44px; }
}

@media (max-width: 440px) {
  /* "Laminacao em glitter" pode quebrar em duas linhas em vez de estourar o card */
  .grade .detalhes li { font-size: .66rem; max-width: 100%; white-space: normal; }
  .grade .preco-opcoes span { font-size: .72rem; }
  .grade .preco-opcoes strong { font-size: .98rem; }
  .grade .btn { font-size: .7rem; }
}
.produto { background: var(--papel); box-shadow: 0 1px 2px rgba(91, 40, 55, .05); }
.produto.revelado:hover { box-shadow: 0 16px 40px rgba(91, 40, 55, .12); }

/* ------------------------------------------------------ vitrine editorial
   Mesma linguagem da landing: fotografia quadrada em destaque, informacoes ao lado
   e alternancia de leitura. O bloco externo fica limpo; foto e linha divisoria fazem
   a separacao sem transformar cada produto numa caixa pesada. */
.destaques {
  display: block;
  margin-top: 28px;
}

.destaques .produto-destaque,
.destaques .produto-destaque.invertido {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.destaques .produto-destaque:hover,
.destaques .produto-destaque.revelado:hover {
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.destaques .produto-destaque + .produto-destaque {
  margin-top: clamp(52px, 7vw, 84px);
  padding-top: clamp(52px, 7vw, 84px);
  border-top: 1px solid var(--linha);
}

.destaques .produto-foto {
  position: relative;
  flex: none;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--linha-forte);
  border-radius: 24px;
  background: var(--blush);
  box-shadow: 0 18px 44px rgba(91, 40, 55, .12);
}

.destaques .foto-palco {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

/* A galeria usa somente crossfade; o hover nao amplia a fotografia. */
.destaques .produto-foto:hover .foto-camada.ativa { transform: none; }

/* Foto de uso da Tag Adesiva (retrato 3:4): no palco quadrado o cover ampliava a cena e
   cortava a embalagem. So ela aparece inteira, centralizada, com respiro e fundo no tom
   das bordas da propria foto. A miniatura e o palco nao mudam de tamanho. */
.foto-camada[src$="tag-adesiva-outubro-rosa-uso.png"] {
  object-fit: contain;
  object-position: center !important;
  padding: 5%;
  background: linear-gradient(180deg, #f5d6cf 0%, #f8e0d2 100%);
}

.destaques .produto-corpo,
.destaques .produto-destaque.invertido .produto-corpo {
  justify-content: center;
  min-width: 0;
  padding: 26px 2px 0;
}

.destaques .produto-selo { display: none; }

.destaques .produto-corpo h3 {
  margin-bottom: 10px;
  color: var(--tinta);
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  line-height: 1.14;
}

.destaques .produto-descricao {
  max-width: 470px;
  margin-bottom: 18px;
  color: var(--tinta-suave);
  font-size: .92rem;
  line-height: 1.65;
}

.destaques .detalhes {
  gap: 8px;
  margin: 0 0 22px;
}

.destaques .detalhes li {
  padding: 5px 12px 5px 9px;
  font-size: .75rem;
}

.destaques .preco-opcoes {
  width: 100%;
  max-width: 390px;
  margin: 0 0 8px;
  padding: 0;
  border-top: 0;
  font-variant-numeric: tabular-nums;
}

.destaques .preco-opcoes li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  align-items: baseline;
  column-gap: 24px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(125, 60, 80, .2);
}

.destaques .preco-opcoes li > span { text-align: left; }

.destaques .preco-opcoes li > strong {
  width: 116px;
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

.destaques .preco-opcoes li:not(.preco-opcoes-cabecalho) span {
  color: var(--tinta);
  font-size: .9rem;
}

.destaques .preco-opcoes li:not(.preco-opcoes-cabecalho) strong {
  color: var(--marca-forte);
  font-size: 1.08rem;
}

.destaques .preco-opcoes-cabecalho {
  align-items: end;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--linha-forte);
}

.destaques .preco-opcoes-cabecalho span,
.destaques .preco-opcoes-cabecalho strong {
  color: var(--tinta-suave);
  font-family: var(--texto);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.destaques .btn-principal {
  width: auto;
  min-height: 44px;
  align-self: flex-start;
  margin-top: 16px;
  padding-inline: 20px;
  white-space: nowrap;
}

@media (min-width: 900px) {
  .destaques .produto-destaque {
    flex-direction: row;
    align-items: center;
    gap: clamp(36px, 5vw, 64px);
  }

  .destaques .produto-destaque.invertido { flex-direction: row-reverse; }
  .destaques .produto-foto { flex: 0 0 47%; }
  .destaques .produto-corpo,
  .destaques .produto-destaque.invertido .produto-corpo { padding: 30px 0; }
}

@media (max-width: 600px) {
  .destaques { margin-top: 18px; }
  .destaques .produto-foto { border-radius: 18px; }
  .destaques .produto-corpo,
  .destaques .produto-destaque.invertido .produto-corpo { padding: 24px 2px 0; }
  .destaques .produto-corpo h3 { font-size: 1.55rem; }
  .destaques .produto-descricao { font-size: .88rem; }
  .destaques .preco-opcoes { max-width: none; }
  .destaques .preco-opcoes li {
    grid-template-columns: minmax(0, 1fr) 108px;
    column-gap: 16px;
    padding: 9px 0;
  }
  .destaques .preco-opcoes li > strong { width: 108px; }
  .destaques .btn-principal { min-height: 44px; }
  .destaques .produto-destaque .galeria-thumbs { gap: 6px; padding: 7px 10px 2px; }
  .destaques .produto-destaque .galeria-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
  }
}

/* ----------------------------------------------------------------- secoes */

.secao + .secao::before {
  background: linear-gradient(90deg, transparent, rgba(194, 56, 111, .3), transparent);
}

.regras { background: var(--blush-medio); border-top: 0; }

.artes { margin-top: 6px; }
.artes::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 255, 255, .08) 0, transparent 42%),
    radial-gradient(circle at 84% 80%, rgba(244, 167, 193, .1) 0, transparent 40%);
  pointer-events: none;
}
.artes > * { position: relative; z-index: 1; }

.fechamento { background: var(--blush-forte); border-top: 1px solid var(--linha); }
.fechamento h2 { color: var(--tinta); }

/* Celular de 360px: rotulo e valor precisam caber lado a lado sem encolher a fonte;
   o espaco vem da margem lateral (16px) e do vao entre os cards, so nesta secao. */
@media (max-width: 380px) {
  #colecao .container { padding-inline: 16px; }
  .grade { gap: 8px; }
  .grade .preco-opcoes span { font-size: .7rem; }
  .grade .preco-opcoes strong { font-size: .95rem; }
}

/* ------------------------------------------------ atalhos flutuantes (celular)
   Um pouco menores e mais assentados nos cantos; recolhem enquanto estao sobre
   texto, preco, botao ou miniatura (atalhos-seguros.js) e voltam logo depois.
   Desktop intacto: tudo aqui vale ate 600px, a faixa em que os dois existem. */
@media (max-width: 600px) {
  .atalho { width: 42px; height: 42px; }
  .atalho-topo { left: 10px; }
  .atalho-zap { right: 10px; }
  .atalho-topo,
  .atalho-zap { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .atalho-zap svg { width: 22px; height: 22px; }
  .atalho.visivel.atalho-recolhido {
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(8px) scale(.92);
  }
}

/* ----------------------------------------------------------- celular compacto
   Ate 600px: hero, abertura da vitrine e cards de produto mais proporcionais,
   para cada produto caber em pouco mais de uma tela. Desktop e tablet intactos.
   Fica no fim do arquivo para vencer as regras anteriores de mesma especificidade. */
@media (max-width: 600px) {
  /* hero */
  .hero-conteudo { padding: 20px 18px 24px; }
  .hero-eyebrow { margin-bottom: 8px; }
  .hero-ano { font-size: 2.25rem; margin-top: 0; }
  .hero-frase { margin-top: 8px; font-size: .84rem; line-height: 1.5; }
  .compartilhar { margin-top: 12px; }
  .btn-compartilhar { min-height: 40px; padding: 0 16px; }

  /* abertura da vitrine: a primeira foto chega mais cedo */
  #colecao { padding-top: 12px; }
  #colecao .secao-cabeca { margin-bottom: 4px; }
  #colecao .secao-intro { font-size: .94rem; line-height: 1.45; }
  .colecao-contagem { margin: 4px 0 8px; }
  .destaques { margin-top: 8px; }

  /* separacao entre produtos */
  .destaques .produto-destaque + .produto-destaque { margin-top: 30px; padding-top: 30px; }

  /* foto: continua quadrada e inteira, so mais contida */
  .destaques .produto-foto { width: min(100%, 300px); margin-inline: auto; border-radius: 16px; }

  /* texto do produto */
  .destaques .produto-corpo,
  .destaques .produto-destaque.invertido .produto-corpo { padding: 14px 2px 0; }
  .destaques .produto-corpo h3 { margin-bottom: 6px; font-size: 1.3rem; line-height: 1.2; }
  .destaques .produto-descricao { margin-bottom: 10px; font-size: .84rem; line-height: 1.5; }

  /* selos */
  .destaques .detalhes { gap: 6px; margin: 0 0 12px; }
  .destaques .detalhes li { padding: 3px 9px 3px 7px; font-size: .7rem; }
  .destaques .detalhes li::before { width: 10px; height: 10px; }

  /* tabela */
  .destaques .preco-opcoes { margin: 0 0 4px; }
  .destaques .preco-opcoes li { padding: 6px 0; }
  .destaques .preco-opcoes-cabecalho { padding: 0 0 6px; }
  .destaques .preco-opcoes li:not(.preco-opcoes-cabecalho) span { font-size: .86rem; }
  .destaques .preco-opcoes li:not(.preco-opcoes-cabecalho) strong { font-size: 1rem; }

  /* CTA */
  .destaques .btn-principal { min-height: 46px; margin-top: 12px; }
}

/* 320-360px: marca e "Catalogo completo" chegavam a se tocar no cabecalho. */
@media (max-width: 360px) {
  .topo { gap: 8px; padding-inline: 12px; }
  .topo-marca { gap: 7px; }
  .topo-marca img { width: 32px; height: 32px; }
  .topo-marca strong { font-size: .84rem; }
  .topo-marca small { font-size: .5rem; letter-spacing: 1.4px; }
  .topo-link { font-size: .68rem; }
}