/* 3 · Dicas (di-) — pele noite */
.di-secao {
  --di-lima: #c3cc7c;
  --di-linha: rgb(251 244 232 / .14);
}
.di-malha i:nth-child(1) { --s: 90vmax; --x: 8%;  --y: 18%; --c: rgb(78 96 58 / .62);  --t: 30s; --dx: 7vmax; --dy: 5vmax; }
.di-malha i:nth-child(2) { --s: 70vmax; --x: 92%; --y: 55%; --c: rgb(150 104 52 / .32); --t: 26s; --dx: -8vmax; --dy: -4vmax; }
.di-malha i:nth-child(3) { --s: 60vmax; --x: 30%; --y: 92%; --c: rgb(180 90 51 / .22);  --t: 34s; --dx: 6vmax; --dy: -6vmax; }
.di-malha i:nth-child(4) { --s: 50vmax; --x: 70%; --y: 8%;  --c: rgb(14 22 18 / .55);   --t: 24s; --dx: -5vmax; --dy: 4vmax; }

.di-cab, .di-cesta, .di-escova, .di-fecho { max-width: 82rem; margin-inline: auto; }

/* cabeçalho */
.di-cab { display: grid; gap: 1.4rem 4rem; align-items: end; }
.di-titulo .wf-script { font-size: .98em; }
.di-intro { margin: 0; }
.di-intro strong { color: var(--d-creme); }
@media (min-width: 981px) {
  .di-cab { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .di-intro { padding-bottom: .9rem; }
}

/* cesta: foto + carrossel */
.di-cesta {
  display: grid;
  gap: 2.4rem clamp(2rem, 5vw, 5rem);
  margin-top: clamp(3rem, 6vw, 5.5rem);
  align-items: center;
}
@media (min-width: 981px) { .di-cesta { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); } }

.di-foto { margin: 0; position: relative; }
.di-foto::before {
  content: ""; position: absolute; inset: .7rem -.6rem -.7rem .7rem;
  border-radius: var(--d-raio);
  background: linear-gradient(160deg in oklab, #c77b52, #a9532e);
  transform: rotate(2.2deg);
}
.di-foto-quadro {
  position: relative; border-radius: var(--d-raio); overflow: hidden;
  aspect-ratio: 720 / 1140;
  box-shadow: 0 30px 50px -30px rgb(0 0 0 / .7);
}
.di-foto-quadro img { width: 100%; height: 100%; object-fit: cover; }

/* carrossel */
.di-carrossel { min-width: 0; position: relative; }
.di-trilha {
  position: relative;
  list-style: none; margin: 0; padding: 1.6rem 0 0;
  display: flex; gap: 1.2rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
  outline: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0 80%, transparent);
          mask-image: linear-gradient(90deg, #000 0 80%, transparent);
}
.di-trilha::-webkit-scrollbar { display: none; }
.di-trilha::after { content: ""; flex: 0 0 calc(100% - min(34rem, 86%) - 1.2rem); }
.di-placas { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.di-placas button {
  min-height: 3rem; padding: .55rem 1.05rem .5rem;
  border-radius: .55rem; border: 1px solid rgb(251 244 232 / .22);
  background: rgb(251 244 232 / .04); color: var(--d-tinta-2);
  font: 600 .95rem/1 var(--d-f-texto); letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: background-color .35s, color .35s, border-color .35s;
}
.di-placas button:hover { border-color: rgb(251 244 232 / .5); color: var(--d-creme); }
.di-placas button[aria-current="true"] { background: var(--d-creme); border-color: var(--d-creme); color: var(--d-musgo-noite); }
.di-card {
  position: relative;
  flex: 0 0 min(34rem, 86%);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  min-height: 0;
  padding: clamp(4.2rem, 6vw, 5.2rem) clamp(1.4rem, 3vw, 2.6rem) clamp(1.4rem, 2.6vw, 2.2rem);
  border-radius: var(--d-raio);
  background: linear-gradient(165deg in oklab, rgb(251 244 232 / .1), rgb(251 244 232 / .035));
  border: 1px solid var(--di-linha);
}
.di-selo {
  position: absolute; top: -1.1rem; left: clamp(1.1rem, 2.6vw, 2.2rem);
  margin: 0; transform: rotate(-4deg); transform-origin: 20% 80%;
}
.di-selo span {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .42em .7em .36em; border-radius: .42em;
  font-family: var(--d-f-forte); text-transform: uppercase; line-height: 1; letter-spacing: .01em;
  font-size: clamp(1.7rem, 2.3vw, 2.35rem);
  background: var(--di-cor); color: var(--di-tinta);
  box-shadow: 0 14px 24px -12px rgb(0 0 0 / .6), inset 0 -3px 0 rgb(0 0 0 / .08);
}
.di-check { width: .9em; height: .9em; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.js .di-card.is-atual .di-selo { animation: di-bate .6s cubic-bezier(.2, 1.4, .4, 1) .1s both; }
.js .di-carrossel:not(.is-vis) .di-selo { animation: none; opacity: 0; }
@keyframes di-bate {
  from { transform: rotate(-14deg) scale(1.45); opacity: 0; }
  to   { transform: rotate(-4deg) scale(1); opacity: 1; }
}
.di-prateleira {
  margin: 0 0 .8rem;
  font-size: .9rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--d-tinta-2);
}
.di-n { color: #eeb08a; font-variant-numeric: tabular-nums; margin-right: .6em; }
.di-produto {
  margin: 0;
  font-family: var(--d-f-forte); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.3rem, 3.3vw, 3.4rem); line-height: .98;
  color: var(--d-creme);
  text-wrap: balance;
}
.di-fio { display: block; width: 3rem; height: 3px; border-radius: 3px; margin: 1.3rem 0 0; background: var(--wf-terra-clara); }
.di-fala {
  margin: 1.1rem 0 0;
  font-size: clamp(1.2rem, .6vw + 1rem, 1.45rem); line-height: 1.45; font-weight: 500;
  color: #e9dfcf;
}
.di-assina {
  margin: auto 0 0; padding-top: .4rem; align-self: flex-end;
  font-family: var(--d-f-script); font-size: 2rem; line-height: 1.1; color: var(--wf-terra-clara);
  padding: 0 .28em 0 .06em;
}
[data-tom="lima"]     { --di-cor: var(--di-lima); --di-tinta: var(--d-musgo-noite); }
[data-tom="terra"]    { --di-cor: #a64f2b; --di-tinta: var(--d-creme); }
[data-tom="creme"]    { --di-cor: var(--d-creme); --di-tinta: var(--d-musgo-noite); }
[data-tom="caramelo"] { --di-cor: var(--d-caramelo); --di-tinta: var(--d-tinta); }

.di-nav { display: flex; align-items: center; gap: .6rem; margin-top: 1.4rem; }
.di-seta {
  width: 3rem; height: 3rem; flex: none;
  display: grid; place-items: center;
  border-radius: 999px; border: 1px solid rgb(251 244 232 / .3);
  background: none; color: var(--d-creme); cursor: pointer;
  transition: background-color .3s, border-color .3s;
}
.di-seta:disabled { opacity: .3; cursor: default; }
.di-seta:hover:not(:disabled) { background: rgb(251 244 232 / .1); border-color: var(--d-creme); }
.di-seta svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.di-pontos { display: flex; }
.di-pontos button {
  width: 2.75rem; height: 3rem; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.di-pontos button::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 999px;
  background: rgb(251 244 232 / .35);
  transition: width .45s var(--d-ease), background-color .45s;
}
.di-pontos button[aria-current="true"]::before { width: 1.45rem; background: var(--wf-terra-clara); }

/* escova ideal */
.di-escova {
  display: grid; gap: 2.4rem clamp(2rem, 5vw, 5rem);
  margin-top: clamp(4.5rem, 9vw, 8rem);
  align-items: center;
}
@media (min-width: 981px) {
  .di-escova { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; }
  .di-escova-foto { min-height: 34rem; }
  .di-escova .di-escova-foto img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 50% 70%; }
}
.di-escova-foto {
  position: relative; margin: 0;
  border-radius: var(--d-raio); overflow: hidden;
  box-shadow: 0 30px 50px -30px rgb(0 0 0 / .7);
}
.di-escova-foto img { width: 100%; height: auto; }
.di-anota {
  position: absolute; display: flex; flex-direction: column;
  font-family: var(--d-f-script); line-height: 1.05;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  color: var(--d-creme);
  text-shadow: 0 2px 10px rgb(0 0 0 / .45);
  white-space: nowrap;
}
.di-anota span { padding: 0 .28em 0 .06em; }
.di-anota-cerdas { left: 14%; top: 16%; transform: rotate(-5deg); }
.di-anota-cabo { left: 4%; bottom: 26%; transform: rotate(-3deg); }
.di-seta-mao {
  position: absolute; overflow: visible;
  fill: none; stroke: var(--d-creme); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.di-seta-mao path { stroke-dasharray: 600; }
.di-seta-cabo { left: 12%; top: 73%; width: 6%; }
.di-seta-cerdas { left: 47%; top: 54%; width: 8%; }

.di-escova-tit { margin: 0 0 1.6rem; font-weight: 400; font-size: clamp(2.2rem, 3.4vw, 3.4rem); line-height: 1; }
.di-escova-forte { display: block; font-family: var(--d-f-forte); text-transform: uppercase; }
.di-escova-script { display: block; font-family: var(--d-f-script); color: var(--wf-terra-clara); font-size: 1.1em; padding: 0 .28em 0 .06em; }
.di-lista { list-style: none; margin: 0; padding: 0; counter-reset: di; }
.di-lista li {
  counter-increment: di; align-items: baseline;
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr);
  padding: .9rem 0; border-top: 1px solid var(--di-linha);
  font-size: var(--d-t-corpo); line-height: 1.45; color: var(--d-tinta-2);
}
.di-lista li::before { content: counter(di, decimal-leading-zero); font-weight: 600; color: var(--wf-terra-clara); font-variant-numeric: tabular-nums; }
.di-lista strong { color: var(--d-creme); font-weight: 600; }
.di-troca {
  margin: 1.4rem 0 0; padding: 1.1rem 1.3rem;
  border-radius: 1rem; background: rgb(251 244 232 / .07);
  font-size: var(--d-t-corpo); line-height: 1.5; color: var(--d-tinta-2);
}
.di-troca strong { color: var(--d-creme); }

/* fecho */
.di-fecho { margin-top: clamp(4.5rem, 9vw, 8rem); text-align: center; display: grid; justify-items: center; gap: 2rem; }
.di-fecho-frase { margin: 0; font-size: clamp(2rem, 4.6vw + .4rem, 5.4rem); line-height: 1; max-width: 18ch; }
.di-nw { white-space: nowrap; }
.di-fecho-forte { display: block; font-family: var(--d-f-forte); text-transform: uppercase; }
.di-marca { position: relative; display: inline-block; }
.di-marca .wf-risco { position: absolute; left: 0; bottom: -.18em; }
.di-fecho-script { display: block; margin-top: .25em; font-family: var(--d-f-script); color: var(--wf-terra-clara); font-size: .9em; line-height: 1.15; text-wrap: balance; padding: 0 .28em 0 .06em; }

/* celular */
@media (max-width: 980px) {
  .di-foto { width: 100%; }
  .di-foto-quadro { aspect-ratio: 5 / 4; }
  .di-anota { font-size: clamp(1.75rem, 7.4vw, 2.4rem); }
  .di-foto-quadro img { object-position: 50% 42%; }
  .di-carrossel { margin-top: 2.2rem; }
  .di-cesta { gap: 0; }
  .di-trilha { padding-left: .9rem; scroll-padding-left: .9rem; -webkit-mask-image: none; mask-image: none; }
  .di-trilha::after { flex-basis: calc(12% - 1.2rem); }
  .di-placas { gap: .4rem; }
  .di-selo span { font-size: clamp(1.35rem, 6.2vw, 1.9rem); white-space: nowrap; }
  .di-nav { justify-content: center; }
  .di-placas button { padding-inline: .8rem; font-size: .875rem; }
  .di-card { flex-basis: 88%; min-height: 0; background: rgb(35 49 41 / .94); backdrop-filter: blur(8px); }
  .di-fecho-frase { font-size: clamp(2.1rem, 10.4vw, 3.4rem); }
  .di-fecho-script { font-size: 1.05em; }
  .di-escova-foto { aspect-ratio: 4 / 3; }
  .di-escova-foto img { height: 100%; object-fit: cover; }
}

/* entrada da cesta: os cards seguem o contêiner */

@media (max-width: 599px) { .di-seta { display: none; } }