/*
 * Tema — Dia dos Professores 2026
 *
 * Paleta derivada da capa original e hero editorial composto com as imagens 26 e 36
 * fornecidas para a campanha. As cores foram harmonizadas com o rose da A.R.
 *
 * Tudo que e identidade de campanha vive neste arquivo e nos SVGs do index.html.
 * O layout em ../_base/ nao conhece Dia dos Professores: outra campanha troca este
 * tema e as cenas, e a estrutura continua a mesma.
 */

:root {
  /* --- amostradas da capa --- */
  --blush: #fdf6f3;          /* creme rosado bem claro */
  --blush-medio: #fae7e8;
  --blush-forte: #f5dcde;
  --azul-papel: #e4f1f2;     /* xadrez e listras */
  --azul-medio: #cfe0e3;
  --azul-forte: #bcd9dd;
  --creme: #f7e2bd;          /* livros e lapis */
  --creme-claro: #f5e9d6;
  --salvia: #cfdccd;         /* folhas */
  --navy: #97a5bd;           /* livro escuro */
  --terracota-capa: #c0564a; /* asteriscos desenhados */

  /* --- identidade A.R, o fio condutor --- */
  --marca: #c47c8c;
  --marca-forte: #a15b6c;
  --marca-clara: #f3dfe4;

  --fundo: #fdf8f4;          /* creme off-white da identidade A.R */
  --fundo-alt: #f7ede6;
  --papel: #ffffff;

  --tinta: #3a2a27;
  --tinta-suave: #6e534c;
  --tinta-fraca: #9b847d;

  --apoio: #cf8a76;          /* rose-terracota da base do globo */
  --quadro: #35594a;
  --acento: var(--quadro);
  --acento-claro: var(--azul-papel);

  --linha: rgba(110, 83, 76, .12);
  --linha-forte: rgba(110, 83, 76, .2);

  /* --- ganchos do layout base --- */

  /* poa branco da capa, discretissimo: o contraste com o blush e minimo de proposito */
  --pagina-textura: none;    /* sem padrao: o fundo do catalogo e creme liso */

  /* termina mais profundo que a pagina para a borda ondulada ter o que recortar */
  /* mudanca de tom minima entre hero e pagina: a transicao e so um respiro */
  --hero-fundo: linear-gradient(180deg, #fbf1ec 0%, #fdf7f3 72%, var(--fundo) 100%);
  --hero-eyebrow-cor: #b8705f;
  --hero-eyebrow-borda: rgba(184, 112, 95, .38);

  --artes-fundo: var(--quadro);
  --artes-texto: #eef3ef;
  --artes-realce: #e8b04b;
}

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

/*
 * A imagem 26 forma o plano panoramico da esquerda; a 36 entra como um recorte
 * vertical em primeiro plano, pela direita. O halo central nao e uma caixa: e uma
 * transicao de luz que preserva a hierarquia tipografica entre as duas imagens.
 */
.hero {
  min-height: 404px;
  isolation: isolate;
  border-bottom: 1px solid rgba(196, 124, 140, .15);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 31% 82% at 50% 48%, rgba(253, 247, 243, .99) 0 42%, rgba(253, 247, 243, .88) 62%, transparent 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 28% 76%, rgba(253, 248, 244, .44));
}

.hero-visual {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-visual-26 {
  left: -2.5vw;
  top: -18px;
  bottom: -6px;
  width: min(55vw, 930px);
  opacity: .9;
  border-radius: 0 44% 52% 0 / 0 34% 58% 0;
  filter: drop-shadow(14px 12px 24px rgba(91, 58, 50, .05));
  mask-image: linear-gradient(90deg, #000 0 54%, rgba(0, 0, 0, .84) 70%, rgba(0, 0, 0, .24) 89%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0 54%, rgba(0, 0, 0, .84) 70%, rgba(0, 0, 0, .24) 89%, transparent 100%);
}

.hero-visual-26 img {
  object-position: 45% 52%;
  filter: saturate(.92) contrast(.96) brightness(1.035);
}

.hero-visual-36 {
  z-index: 3;
  right: -1.5vw;
  top: -32px;
  bottom: -30px;
  width: clamp(305px, 29vw, 530px);
  opacity: .91;
  border-radius: 56% 0 0 43% / 31% 0 0 64%;
  filter: drop-shadow(-14px 12px 25px rgba(91, 58, 50, .075));
  mask-image: linear-gradient(270deg, #000 0 55%, rgba(0, 0, 0, .86) 70%, rgba(0, 0, 0, .22) 91%, transparent 100%);
  -webkit-mask-image: linear-gradient(270deg, #000 0 55%, rgba(0, 0, 0, .86) 70%, rgba(0, 0, 0, .22) 91%, transparent 100%);
}

.hero-visual-36 img {
  object-position: 51% 58%;
  filter: saturate(.91) contrast(.97) brightness(1.02);
}

.hero-conteudo {
  z-index: 4;
  max-width: 610px;
  padding: 48px 28px 54px;
}

.hero h1 { color: var(--tinta); }
.hero-ano { color: var(--marca); }
.hero-frase { max-width: 430px; }

@media (min-width: 1600px) {
  .hero { min-height: 430px; }
  .hero-visual-26 { width: min(54vw, 1010px); }
  .hero-visual-36 { width: clamp(380px, 28vw, 560px); }
  .hero-conteudo { padding-top: 57px; }
}

@media (min-width: 700px) and (max-width: 1039px) {
  .hero { min-height: 452px; }
  .hero::before {
    background:
      radial-gradient(ellipse 48% 70% at 50% 39%, rgba(253, 247, 243, .99) 0 40%, rgba(253, 247, 243, .9) 65%, transparent 100%),
      linear-gradient(180deg, transparent 50%, rgba(253, 247, 243, .28));
  }
  .hero-visual-26 {
    left: -6%;
    top: auto;
    bottom: -22px;
    width: 78%;
    height: 235px;
    border-radius: 0 55% 18% 0 / 0 52% 18% 0;
    mask-image: linear-gradient(90deg, #000 0 60%, rgba(0, 0, 0, .54) 84%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0 60%, rgba(0, 0, 0, .54) 84%, transparent 100%);
  }
  .hero-visual-26 img { object-position: 48% 55%; }
  .hero-visual-36 {
    right: -34px;
    top: auto;
    bottom: -32px;
    width: 248px;
    height: 315px;
  }
  .hero-conteudo {
    max-width: 590px;
    padding: 36px 28px 142px;
  }
}

@media (max-width: 699px) {
  .hero { min-height: 392px; }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(253, 247, 243, .99) 0 49%, rgba(253, 247, 243, .86) 62%, rgba(253, 247, 243, .12) 84%, transparent 100%),
      radial-gradient(ellipse 78% 58% at 50% 33%, rgba(253, 247, 243, .99) 0 54%, transparent 100%);
  }
  .hero-visual-26 {
    left: -6%;
    right: auto;
    top: auto;
    bottom: -14px;
    width: 112%;
    height: 174px;
    opacity: .94;
    border-radius: 0;
    filter: none;
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .42) 20%, #000 47% 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .42) 20%, #000 47% 100%);
  }
  .hero-visual-26 img { object-position: 48% 55%; }
  .hero-visual-36 {
    right: -14px;
    top: auto;
    bottom: -22px;
    width: 146px;
    height: 182px;
    opacity: .95;
    border-radius: 62% 0 0 46% / 38% 0 0 65%;
    filter: drop-shadow(-8px 8px 15px rgba(91, 58, 50, .09));
    mask-image: linear-gradient(270deg, #000 0 62%, rgba(0, 0, 0, .65) 82%, transparent 100%);
    -webkit-mask-image: linear-gradient(270deg, #000 0 62%, rgba(0, 0, 0, .65) 82%, transparent 100%);
  }
  .hero-visual-36 img { object-position: 50% 61%; }
  .hero-conteudo {
    max-width: 470px;
    padding: 20px 18px 168px;
  }
  .hero-eyebrow { margin-bottom: 9px; }
  .hero-frase { margin-top: 9px; max-width: 360px; }
}

@media (max-width: 380px) {
  .hero { min-height: 396px; }
  .hero-conteudo { padding-inline: 14px; padding-bottom: 170px; }
  .hero-visual-26 { left: -10%; width: 120%; height: 170px; }
  .hero-visual-36 { right: -18px; width: 132px; height: 174px; }
}


/* ---------------------------------------------------------- ambientacao */

/*
 * Fundo da campanha em tres camadas, todas muito leves:
 *   1. manchas organicas em creme, rose e azul — dao variacao sem padrao visivel;
 *   2. gra de papel (ruido SVG em data URI, sem requisicao externa);
 *   3. a cor de base.
 * Nada e "fixed": rolagem com background fixo custa caro no celular.
 */
body {
  background-image:
    radial-gradient(760px 540px at 8% 4%, rgba(228, 241, 242, .5) 0, transparent 62%),
    radial-gradient(680px 520px at 96% 18%, rgba(244, 215, 217, .42) 0, transparent 64%),
    radial-gradient(820px 600px at 12% 48%, rgba(247, 226, 189, .24) 0, transparent 60%),
    radial-gradient(700px 560px at 92% 72%, rgba(228, 241, 242, .38) 0, transparent 62%),
    radial-gradient(760px 620px at 26% 92%, rgba(244, 215, 217, .34) 0, transparent 64%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)' opacity='.32'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size: auto, auto, auto, auto, auto, 180px 180px;
  background-attachment: scroll;
}

/* Variacao sutil de tom entre blocos, para a pagina nao virar uma lista continua. */
.secao:nth-of-type(even) { background: rgba(255, 255, 255, .38); }

/* Divisoria das secoes na cor da campanha. */
.secao + .secao::before {
  background: linear-gradient(90deg, transparent, rgba(196, 124, 140, .34), transparent);
}

/* Barra de filtros: mais presenca, e vidro quando fixa. */
.nav-categorias {
  border-color: rgba(196, 124, 140, .2);
  box-shadow: 0 2px 10px rgba(91, 58, 50, .05);
}
.nav-categorias .nav-barra {
  background: rgba(255, 255, 255, .84);
  transition: background-color .25s ease;
}
.nav-categorias .nav-item {
  letter-spacing: .01em;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease;
}
.nav-categorias.fixada { background: rgba(253, 248, 244, .82); }
.nav-categorias.fixada .nav-barra { background: rgba(255, 255, 255, .68); }
.nav-categorias .nav-item.ativo {
  background: linear-gradient(180deg, #f7e5e9 0%, #f1d8de 100%);
  border-color: rgba(161, 91, 108, .26);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset,
              0 5px 14px rgba(161, 91, 108, .11);
}
@media (hover: hover) and (pointer: fine) {
  .nav-categorias .nav-item:hover { transform: translateY(-1px); }
}

/* Cards: moldura e sombra um grau acima, ainda delicadas. */
.produto { box-shadow: 0 1px 2px rgba(91, 58, 50, .05); }
.produto.revelado:hover { box-shadow: 0 16px 40px rgba(91, 58, 50, .13); }

/* Faixa de destaque com fundo proprio: separa a vitrine editorial da grade. */
.produto-destaque { background: linear-gradient(180deg, #fffdfb 0%, #fdf6f2 100%); }

/* Bloco das artes: respiro maior, para nao colar na grade. */
.artes { margin-top: 6px; }

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

.secao-cabeca h2 { color: var(--tinta); }

/* selo de destaque no azul da capa, para nao deixar tudo rose */
.produto-selo { background: var(--azul-papel); color: #4d7078; }

/* a foto e a protagonista: fundo neutro e claro atras dela */
.produto-foto { background: #f4f7f7; }
/* fundo das fotos exibidas inteiras: creme quente da campanha, nao o azulado */
.produto-destaque { --foto-fundo: linear-gradient(180deg, #fdf7f2 0%, #f8ece4 100%); }

/* cards brancos sobre o poa: e o contraste que mantem a leitura */
.produto { background: var(--papel); }

/* faixa listrada da capa separando a vitrine das condicoes comerciais */
.regras {
  position: relative;
  background: var(--blush-medio);
  border-top: 0;
}
.regras::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 10px;
  background: repeating-linear-gradient(90deg, var(--azul-papel) 0 18px, transparent 18px 36px);
  opacity: .85;
}

/* ------------------------------------------------------------------ artes */

.artes::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .07) 0, transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(255, 255, 255, .05) 0, transparent 38%);
  pointer-events: none;
}
.artes > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------- fechamento */

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

/* O catálogo ganha largura de vitrine em desktop sem encostar nas bordas. A quarta
   coluna mantém os cards na mesma escala visual da versão anterior, em vez de apenas
   esticá-los quando o container cresce. */
@media (min-width: 1200px) {
  :root { --max: 1480px; }
  .container { padding-inline: 40px; }
  .topo { padding-inline: 40px; }
  .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}

/* No mobile, cada card acompanha o proprio conteudo. A grade continua com duas
   colunas, mas deixa de esticar o item mais curto ate a altura do vizinho. Precos
   e CTA seguem o fluxo natural, sem margens automaticas abrindo vazios internos. */
@media (max-width: 600px) {
  .grade { align-items: start; }
  .grade .produto { align-self: start; height: auto; min-height: 0; }
  .grade .produto-corpo { flex: 0 0 auto; }
  .grade .preco,
  .grade .preco-opcoes { margin-top: 0; }
  .grade .produto-corpo .preco-grupos + .btn { margin-top: 8px; }

  /* respiro lateral util: a coluna estreita ganha alguns pixels de texto */
  .grade .produto-corpo { padding-inline: 8px; }

  /* Informacoes comerciais precisam de largura de leitura, nao de densidade. */
  .regras-grade {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }
  .regra,
  .regra:last-child:nth-child(odd) { grid-column: auto; }
  .regra { padding: 15px 16px 16px; }
  .regra strong {
    margin-bottom: 6px;
    font-size: .66rem;
    letter-spacing: 1.1px;
  }
  .regra p {
    margin-bottom: 8px;
    font-size: .77rem;
    line-height: 1.52;
    hyphens: none;
    -webkit-hyphens: none;
  }

  /* Filtros em faixa rolavel: fonte legivel e todos os itens em uma linha. */
  .nav-categorias {
    width: calc(100% + 28px);
    margin-inline: -14px;
  }
  .nav-trilho {
    justify-content: flex-start;
    gap: 6px;
    padding: 7px 14px;
    overflow-x: auto;
    white-space: nowrap;
    scroll-padding-inline: 14px;
  }
  .nav-item {
    flex: 0 0 auto;
    min-height: 36px;
    padding-inline: 10px;
    font-size: .72rem;
    letter-spacing: 0;
  }
  .nav-barra::before,
  .nav-barra::after { width: 18px; }
}