/* =====================================================================
   APSELA · camada rosa da marca (todas as páginas)
   Carregada em todas as páginas, depois de apsela-premium.css.
   Ideia: o rosa do pote vira luz (sombras), contorno (bordas em degradê)
   e detalhe (filetes, brilhos), nunca bloco chapado.
   Para voltar: remova o <link> deste arquivo (backup em
   backups/oferta-antes-rosa-2026-10-15 e antes-rosa-geral-2026-10-15).
   ===================================================================== */

:root {
  --pink: #D23A6C;            /* rosa do pote */
  --pink-l: #F2A7BE;
  --pink-xl: #FBE3EA;
  --sh-pink: 0 1px 2px rgba(210, 58, 108, .06), 0 26px 50px -26px rgba(210, 58, 108, .42);
  --sh-pink-2: 0 2px 4px rgba(210, 58, 108, .06), 0 40px 80px -36px rgba(210, 58, 108, .5);
  --glow-pink: 0 0 0 4px rgba(210, 58, 108, .1), 0 22px 44px -22px rgba(210, 58, 108, .6);
  /* borda em degradê: rosa → quase branco → rosa-claro */
  --edge-pink: linear-gradient(140deg, rgba(210, 58, 108, .55) 0%, rgba(242, 167, 190, .35) 35%, rgba(255, 255, 255, .6) 60%, rgba(210, 58, 108, .35) 100%);
  /* filete superior da marca */
  --stripe: linear-gradient(90deg, #B8325C 0%, #D23A6C 30%, #F2A7BE 62%, #C29A68 100%);
}
::selection { background: var(--pink-l); color: var(--vinho); }

/* ---------- faixa de anúncio no rosa da marca ---------- */
.tick { background: linear-gradient(90deg, #A92A52 0%, var(--pink) 50%, #A92A52 100%); color: #FFF4F7; }
.tick span::after { background: #FFE0EA; }

/* ---------- utilitário: cartão com borda em degradê rosa ---------- */
.of2-box, .cmp-l .cmp-t, .qx-card, .rit-c, .faqx .faq-i, .rv, .kit, .stat-row > div {
  border: 1px solid transparent !important;
}
.of2-box, .cmp-l .cmp-t, .rit-c, .faqx .faq-i, .rv, .kit {
  background: linear-gradient(var(--porc), var(--porc)) padding-box, var(--edge-pink) border-box !important;
}

/* ---------- primeira dobra ---------- */
.pdp { background: radial-gradient(60% 50% at 18% 20%, rgba(242, 167, 190, .35) 0%, rgba(242, 167, 190, 0) 70%), radial-gradient(70% 60% at 92% 4%, rgba(210, 58, 108, .14) 0%, rgba(210, 58, 108, 0) 60%); }
@media (min-width: 768px) {
  .pdp-info { position: relative; box-shadow: var(--sh-pink-2) !important; overflow: hidden; border: 1px solid transparent !important;
    background: linear-gradient(var(--porc), var(--porc)) padding-box, var(--edge-pink) border-box !important; }
  .pdp-info::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--stripe); }
}
.gal .rot { box-shadow: var(--sh-pink-2); background: linear-gradient(#fff, #fff) padding-box, var(--edge-pink) border-box; border: 1px solid transparent; }
.gal-tag { background: var(--pink) !important; box-shadow: 0 8px 18px -8px rgba(210, 58, 108, .8); }
.gal-th button.on { outline-color: var(--pink); }
.proof { border-color: rgba(210, 58, 108, .3); box-shadow: 0 10px 22px -16px rgba(210, 58, 108, .6); }
.proof b { color: var(--pink); }
.pdp-info > .three { color: var(--pink); }
.pdp-info > .three i { background: var(--pink-l); }
.spec { border-color: rgba(210, 58, 108, .18); box-shadow: var(--sh-pink); }
.spec dt { color: var(--pink); }

/* kits: o selecionado acende em rosa */
.kit { box-shadow: 0 1px 2px rgba(210, 58, 108, .05); }
.kit:hover { box-shadow: 0 16px 30px -22px rgba(210, 58, 108, .55); }
.kit.on { background: linear-gradient(180deg, #fff 0%, var(--pink-xl) 100%) padding-box, linear-gradient(140deg, var(--pink), var(--pink-l) 55%, var(--pink)) border-box !important; border-width: 1.5px !important; box-shadow: var(--glow-pink) !important; }
.kit.on .kit-r { border-color: var(--pink); background: radial-gradient(circle, var(--pink) 0 40%, #fff 46%); }
.kit-flag { background: var(--pink); box-shadow: 0 8px 16px -8px rgba(210, 58, 108, .9); }
.kit-s b { color: var(--pink); }
.gift.on { border-color: rgba(210, 58, 108, .4); background: var(--pink-xl); box-shadow: 0 10px 20px -16px rgba(210, 58, 108, .7); }
.gift.on .ico { color: var(--pink); }
.price-off { background: var(--pink); box-shadow: 0 6px 14px -6px rgba(210, 58, 108, .8); }
.price-big small, .price-r b.eco { color: var(--pink); }

/* CTA: vinho com brilho rosa por baixo */
.btn:not(.btn-light) { box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 20px 36px -16px rgba(210, 58, 108, .65); }
.btn:not(.btn-light):hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 26px 44px -16px rgba(210, 58, 108, .8); }
.btn::after { background-color: var(--pink); box-shadow: 0 0 0 4px rgba(242, 167, 190, .22); }
.dark .btn, .bar .btn { box-shadow: 0 18px 34px -18px rgba(242, 167, 190, .55); }
.gar-mini { border-color: rgba(210, 58, 108, .2) !important; }
.gar-mini b.n { color: var(--pink) !important; }
.acc summary::after { background: linear-gradient(var(--pink), var(--pink)) center / 12px 1.4px no-repeat, linear-gradient(var(--pink), var(--pink)) center / 1.4px 12px no-repeat; }

/* ---------- peles reais ---------- */
#prova { background: radial-gradient(50% 60% at 100% 0%, rgba(242, 167, 190, .32) 0%, rgba(242, 167, 190, 0) 70%), radial-gradient(40% 50% at 0% 100%, rgba(210, 58, 108, .1) 0%, rgba(210, 58, 108, 0) 70%), var(--papel); }
.mq .cba { box-shadow: var(--sh-pink-2); background: linear-gradient(#fff, #fff) padding-box, var(--edge-pink) border-box; border: 1px solid transparent; }
.mq .cba .rot-c span:last-child { color: var(--pink); }
.ba-t-b { background: var(--pink); }
.stat-row > div { background: linear-gradient(150deg, #6A1230 0%, #44091C 100%) padding-box, linear-gradient(140deg, var(--pink), rgba(242, 167, 190, .2) 60%, var(--pink)) border-box !important; box-shadow: 0 30px 50px -28px rgba(210, 58, 108, .55) !important; }

/* ---------- pad check ---------- */
.pcs-full .pink { background: radial-gradient(60% 80% at 100% 0%, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 60%), radial-gradient(50% 70% at 0% 100%, rgba(210, 58, 108, .22) 0%, rgba(210, 58, 108, 0) 70%), linear-gradient(160deg, #F8E2E8 0%, #F2CFDA 55%, #EBBDCC 100%); }
.pc-box { box-shadow: 0 0 0 1px rgba(210, 58, 108, .14), var(--sh-pink-2); }
.pc-ring { border-color: rgba(210, 58, 108, .3); }
.pc-range::-webkit-slider-thumb { background-color: var(--pink); box-shadow: 0 0 0 5px rgba(210, 58, 108, .14), 0 12px 22px -8px rgba(210, 58, 108, .8); }
.pc-meter b { color: var(--pink); }

/* ---------- tabela ---------- */
.cmp-l .cmp-t { box-shadow: var(--sh-pink-2) !important; }
.cmp-l .cmp-t thead .me { box-shadow: inset 0 3px 0 var(--pink); }
.cmp-l .cmp-t .me { background: linear-gradient(180deg, #5E0F28 0%, #4A0A1F 100%); }
.cmp-l .cmp-t td:not(.me) .cmp-y { background-color: var(--pink-xl); box-shadow: 0 0 0 1px rgba(210, 58, 108, .25); }

/* ---------- fórmula ---------- */
.ing-halo { background: radial-gradient(circle, rgba(242, 167, 190, .5) 0%, rgba(210, 58, 108, .26) 38%, rgba(210, 58, 108, 0) 70%); }
.ing-ring.r1 { border-color: rgba(242, 167, 190, .32); }
.ing-col li::after { background: var(--pink-l); box-shadow: 0 0 0 4px rgba(242, 167, 190, .16), 0 0 12px 1px rgba(210, 58, 108, .55); }
.ing-l li::before { background: linear-gradient(90deg, rgba(242, 167, 190, .05), rgba(242, 167, 190, .85)); }
.ing-r li::before { background: linear-gradient(270deg, rgba(242, 167, 190, .05), rgba(242, 167, 190, .85)); }
.ing-b li::before { background: linear-gradient(180deg, rgba(242, 167, 190, .85), rgba(242, 167, 190, .05)) !important; }
.ing-t { border-color: rgba(242, 167, 190, .45); color: var(--pink-l); }
.badges > div { border-color: rgba(242, 167, 190, .2); box-shadow: inset 0 1px 0 rgba(242, 167, 190, .12); }
.badges svg { color: var(--pink-l); }

/* ---------- ritual ---------- */
.rit { background: radial-gradient(45% 55% at 50% 0%, rgba(242, 167, 190, .28) 0%, rgba(242, 167, 190, 0) 70%); }
.rit-c { box-shadow: var(--sh-pink) !important; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.rit-c:hover { transform: translateY(-4px); box-shadow: var(--sh-pink-2) !important; }
.rit-n { background: var(--pink); color: #fff; box-shadow: 0 8px 16px -6px rgba(210, 58, 108, .8); }
.rit-tl p { border-color: rgba(210, 58, 108, .22); box-shadow: 0 12px 24px -18px rgba(210, 58, 108, .55); }
.rit-tl p b { color: var(--pink); }
.rit-tl i { background: linear-gradient(90deg, var(--pink-l), var(--pink)); }

/* ---------- depoimentos e carrossel ---------- */
.rv { box-shadow: var(--sh-pink) !important; }
.rv::after { color: var(--pink-xl); }
.rv-av { background: linear-gradient(135deg, var(--pink-l) 0%, var(--pink) 100%); color: #fff; }
.rv-t b { background: linear-gradient(transparent 62%, rgba(242, 167, 190, .55) 62%); }
.ugc-c { box-shadow: var(--sh-pink-2); }
.ugc-c::before { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(242, 167, 190, .45); }
.ugc-nav button { border-color: rgba(210, 58, 108, .35); }
.ugc-nav button:hover { background: var(--pink); border-color: var(--pink); }
.dots i.on { background: var(--pink); }

/* ---------- pra quem é ---------- */
.qx-bg::after { background: linear-gradient(180deg, rgba(120, 18, 52, .5) 0%, rgba(74, 10, 28, .72) 100%); }
.qx-card { background: linear-gradient(rgba(252, 248, 244, .95), rgba(252, 248, 244, .95)) padding-box, var(--edge-pink) border-box !important; box-shadow: 0 50px 90px -40px rgba(20, 2, 8, .7), 0 0 0 6px rgba(242, 167, 190, .12) !important; }
.qx-card .quem .sim { box-shadow: 0 30px 50px -30px rgba(210, 58, 108, .7); }
.qx-card .quem .sim li::before { color: var(--pink-l); }

/* ---------- oferta final ---------- */
#oferta2 { background: radial-gradient(45% 40% at 85% 30%, rgba(242, 167, 190, .3) 0%, rgba(242, 167, 190, 0) 70%), linear-gradient(180deg, var(--papel) 0%, var(--papel) 35%, var(--creme) 100%); }
.of2-box { box-shadow: var(--sh-pink-2) !important; }
.of2-hd { background: linear-gradient(90deg, #8E1F45 0%, var(--pink) 50%, #8E1F45 100%); }
.of2-vis { box-shadow: 0 40px 70px -40px rgba(210, 58, 108, .6); }
.of2-pills span { border-color: rgba(242, 167, 190, .22); }

/* ---------- garantia ---------- */
.gar-v { box-shadow: 0 30px 60px -30px rgba(210, 58, 108, .7); }
.gar-seal { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 6px rgba(242, 167, 190, .35), 0 20px 30px -14px rgba(210, 58, 108, .6); }
.gar-seal b { color: var(--pink); }

/* ---------- faq ---------- */
.faqx { background: radial-gradient(40% 50% at 0% 50%, rgba(242, 167, 190, .2) 0%, rgba(242, 167, 190, 0) 70%); }
.faqx .faq-i { box-shadow: 0 10px 22px -20px rgba(210, 58, 108, .6); }
.faqx .faq-i.on { box-shadow: var(--sh-pink) !important; }
.faq-ico { border-color: rgba(210, 58, 108, .35); color: var(--pink); }
.faq-i.on .faq-ico { background: var(--pink); border-color: var(--pink); }

/* ---------- fechamento, rodapé e barra ---------- */
.fim { box-shadow: 0 40px 80px -40px rgba(210, 58, 108, .55); }
.foot-pills span { border-color: rgba(210, 58, 108, .22); }
.bar { box-shadow: inset 0 0 0 1px rgba(242, 167, 190, .35), inset 0 1px 0 rgba(255, 255, 255, .08), 0 28px 50px -22px rgba(210, 58, 108, .55); }
.bar-m { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 3px rgba(242, 167, 190, .25); }

/* carrossel antes/depois: espaço para a sombra rosa não ser cortada */
.mq { padding-bottom: 90px; margin-bottom: -46px; }

/* =====================================================================
   Componentes das outras páginas (vendas, advertorial, quiz)
   ===================================================================== */
/* oferta das outras páginas: mesma luz rosa da #oferta2 */
.of-grad { background: radial-gradient(45% 40% at 85% 30%, rgba(242, 167, 190, .3) 0%, rgba(242, 167, 190, 0) 70%), linear-gradient(180deg, var(--papel) 0%, var(--papel) 35%, var(--creme) 100%); }

/* topo escuro (vendas e advertorial) */
.hero > .panel { box-shadow: 0 40px 80px -40px rgba(210, 58, 108, .55); }
.hero .rot { background: linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)) padding-box, linear-gradient(140deg, rgba(242, 167, 190, .7), rgba(242, 167, 190, .1) 50%, rgba(210, 58, 108, .6)) border-box; border: 1px solid transparent; box-shadow: 0 40px 70px -36px rgba(210, 58, 108, .55); }
.hero .rot-c span:last-child { color: var(--pink-l); }
.dark .proof { border-color: rgba(242, 167, 190, .35); box-shadow: 0 10px 24px -14px rgba(210, 58, 108, .7); }
.dark .proof b { color: var(--pink-l); }
.hero .kb { box-shadow: 0 0 0 1px rgba(242, 167, 190, .6), 0 0 0 7px rgba(242, 167, 190, .18), 0 24px 40px -18px rgba(210, 58, 108, .7); }

/* vendas: dor, virada e comparador */
.dor li { border: 1px solid transparent !important; background: linear-gradient(var(--porc), var(--porc)) padding-box, var(--edge-pink) border-box !important; box-shadow: 0 12px 24px -20px rgba(210, 58, 108, .55); }
.dor li:hover { box-shadow: var(--sh-pink); }
.dor li::before { background: var(--pink-xl); color: var(--pink); }
.quote { border-left-color: var(--pink) !important; }
.lupa-s { box-shadow: var(--sh-pink); }
.lupa-t-b { background: var(--pink); }
.lupa-z { box-shadow: 0 0 0 1px rgba(242, 167, 190, .8), 0 18px 30px -12px rgba(210, 58, 108, .6); }
.rot { box-shadow: var(--sh-pink); }
.s7x .rot { box-shadow: var(--sh-pink-2); background: linear-gradient(#fff, #fff) padding-box, var(--edge-pink) border-box; border: 1px solid transparent; }
.pick button { border-color: rgba(210, 58, 108, .28) !important; }
.pick button.on { background: var(--pink) !important; border-color: var(--pink) !important; box-shadow: 0 10px 20px -10px rgba(210, 58, 108, .8); }
.ba-knob { box-shadow: 0 0 0 3px rgba(242, 167, 190, .55), 0 14px 26px -10px rgba(210, 58, 108, .6); }
.ba-knob::before { background: var(--pink); }
.s3, .s2 { background-image: radial-gradient(40% 50% at 100% 20%, rgba(242, 167, 190, .22) 0%, rgba(242, 167, 190, 0) 70%); }
.refrao b { color: var(--pink); }

/* advertorial: os 7 motivos */
.mot-n { color: var(--pink) !important; text-shadow: 0 14px 30px rgba(210, 58, 108, .25); }
.mot-alt { background: radial-gradient(45% 60% at 0% 0%, rgba(242, 167, 190, .26) 0%, rgba(242, 167, 190, 0) 70%), var(--papel); }
.mot-tags span { border-color: rgba(210, 58, 108, .3) !important; color: var(--pink) !important; background: rgba(255, 255, 255, .6); }
.mot .pc-box { box-shadow: 0 0 0 1px rgba(210, 58, 108, .14), var(--sh-pink-2); }
.mot .rot, .mot .lupa-s { box-shadow: var(--sh-pink-2); }
.mot-form2 { box-shadow: 0 40px 70px -40px rgba(210, 58, 108, .6); }
.mf-list .ing-n { color: var(--pink-l); }

/* quiz */
.q { background: radial-gradient(70% 40% at 50% 0%, rgba(242, 167, 190, .3) 0%, rgba(242, 167, 190, 0) 70%); }
.q-top { border-bottom-color: rgba(210, 58, 108, .14) !important; }
.q-back { color: var(--pink) !important; }
.q-bar { background: var(--pink-xl) !important; }
.q-fill { background: linear-gradient(90deg, var(--pink-l), var(--pink) 60%, #A92A52) !important; box-shadow: 0 0 10px rgba(210, 58, 108, .5); }
.q-q em { color: var(--pink) !important; }
.q .q-opt { border: 1px solid transparent !important; background: linear-gradient(var(--porc), var(--porc)) padding-box, var(--edge-pink) border-box !important; box-shadow: 0 10px 22px -18px rgba(210, 58, 108, .55); }
.q .q-opt:hover { box-shadow: var(--sh-pink); }
.q .q-opt.on { background: linear-gradient(180deg, #fff, var(--pink-xl)) padding-box, linear-gradient(140deg, var(--pink), var(--pink-l) 55%, var(--pink)) border-box !important; box-shadow: var(--glow-pink) !important; }
.q .q-ico { border-color: rgba(210, 58, 108, .35) !important; color: var(--pink); }
.q .q-opt.on .q-ico { background: var(--pink) !important; border-color: var(--pink) !important; color: #fff; }
.q .q-card { box-shadow: var(--sh-pink); border-color: rgba(210, 58, 108, .2) !important; }
.q .q-card.on { border: 2px solid var(--pink) !important; box-shadow: var(--glow-pink) !important; }
.q .q-card.on .q-tick { background: var(--pink); }
.q .q-media .ba, .q .q-media .arch { box-shadow: var(--sh-pink-2); }
.q .q-load .seal { box-shadow: 0 0 0 1px rgba(242, 167, 190, .7), 0 0 0 8px rgba(242, 167, 190, .16), var(--sh-pink-2) !important; }
.q .q-load .seal b { color: var(--pink) !important; }
.q .q-load-ring { border-color: var(--pink-l) !important; }
.q .q-load-fill { background: linear-gradient(90deg, var(--pink-l), var(--pink)) !important; }
.q .q-load-list li.ok::before { color: var(--pink); }
.q .q-res2 { box-shadow: 0 40px 70px -36px rgba(210, 58, 108, .65), inset 0 0 0 1px rgba(242, 167, 190, .2); }
.q-res2 .q-tag { background: var(--pink); box-shadow: 0 8px 18px -8px rgba(210, 58, 108, .9); }
.q-res2 .qr-n span, .q-res2 .q-tag-l { color: var(--pink-l); }
.q-res2 .q-tag-l { border-color: rgba(242, 167, 190, .45); }
.qr-safe i { background: var(--pink); }
.q-res2 .q-tag.q-tag-l { background: transparent; box-shadow: none; }

/* =====================================================================
   Sombras sem corte: cada contêiner que corta conteúdo ganha espaço
   interno para a sombra, compensado por margem negativa (o layout não muda)
   ===================================================================== */
.rail { padding-top: 10px; padding-bottom: 44px; margin-top: -6px; margin-bottom: -30px; }
.ugc-rail { padding-top: 10px; padding-bottom: 70px; margin-bottom: -48px; }
.pick { padding-top: 4px; padding-bottom: 20px; margin-bottom: -10px !important; }
.q-bar { overflow: visible !important; }
.gar-seal { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 6px rgba(242, 167, 190, .35), 0 12px 20px -12px rgba(210, 58, 108, .55); bottom: 26px; right: 26px; }
@media (max-width: 767px) {
  .pcs-full > .panel { padding-bottom: 84px !important; }
  .cmp-l .cmp-wrap { padding-bottom: 34px; margin-bottom: -28px; }
  .cmp-l .cmp-t { box-shadow: 0 14px 22px -16px rgba(210, 58, 108, .45) !important; }
  .qx { padding-bottom: 100px; }
  .hero-in { padding-bottom: 60px !important; }
}
/* desktop: carrosséis vão até a borda direita da tela (sem corte vertical no meio da página) */
@media (min-width: 768px) {
  .rail { margin-right: calc((100% - 100vw) / 2); padding-right: calc((100vw - 100%) / 2); scroll-padding-right: calc((100vw - 100%) / 2); }
}

/* =====================================================================
   tabela comparativa no mobile: pergunta + Apsela + Sabonete mais forte
   numa tela só, sem rolagem lateral (as outras colunas voltam no desktop)
   ===================================================================== */
@media (max-width: 767px) {
  .cmp-wrap { overflow-x: visible; }
  .cmp-t { min-width: 0; table-layout: fixed; }
  .cmp-t .cmp-x { display: none; }
  .cmp-t th, .cmp-t td { padding: 14px 6px; font-size: 12.5px; line-height: 1.3; }
  .cmp-t th:first-child, .cmp-t td:first-child { position: static; width: 42%; min-width: 0; padding-left: 14px; font-size: 13px; box-shadow: none; }
  .cmp-t thead th { padding-top: 18px; padding-bottom: 14px; font-size: 9.5px; letter-spacing: .08em; }
  .cmp-t thead .me svg { width: 58px; }
  .cmp-hint { display: none; }
}

/* =====================================================================
   pote 3D: o WebGL corta tudo que sai do canvas (os discos giram em volta do
   pote e chegavam a ser cortados na borda). O canvas fica 1,6x maior em cada
   dimensão e a câmera abre 1,6x (camera.zoom em jar3d.js): o pote mantém o
   tamanho e a órbita ganha espaço.
   ===================================================================== */
.ing-3d [data-jar3d] { inset: -39.6%; transform: scale(.8); transform-origin: 50% 50%; }
@media (max-width: 959px) {
  .ing-3d [data-jar3d] { inset: -30% -40%; transform: scale(.72); }
}