/* =========================================================
   KOVIRA — TEMA DE HALLOWEEN (temporário)
   Noite roxa da marca + laranja de abóbora + luz de vela.
   Para voltar ao site normal: suba de novo a versão original.
   ========================================================= */

:root {
  --night: #0E0922;
  --night-2: #150E31;
  --pumpkin: #FF7A1A;
  --pumpkin-deep: #E0560A;
  --candle: #FFC861;
  --witch: #B48CFF;
  --dark-on-orange: #1A0B2E;

  /* os tokens da base passam a ser noturnos */
  --indigo: var(--pumpkin);
  --indigo-deep: var(--pumpkin-deep);
  --violet: var(--witch);
  --violet-soft: #D4BEFF;
  --paper: var(--night);
  --paper-2: var(--night-2);
  --card: #1B1340;
  --ink: #F6EEDF;
  --muted: #BDB3D1;
  --lavender: #1E1546;
  --lavender-2: #2E2266;
  --line: rgba(246, 238, 223, 0.12);
  --line-strong: rgba(246, 238, 223, 0.22);
  --danger: #FF8A80;
  color-scheme: dark;
}

body { background: var(--night); color: var(--ink); }
::selection { background: var(--pumpkin); color: var(--dark-on-orange); }

/* ---------- botões e elementos que tinham texto branco sobre a cor principal ---------- */
.btn--primary { --fg: var(--dark-on-orange); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 26px -10px rgba(255,122,26,.75); }
.btn--primary:hover { --bg: var(--candle); --fg: var(--dark-on-orange); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 12px 30px -10px rgba(255,200,97,.8); }
.btn--ghost:hover { --fg: var(--dark-on-orange); }
.btn--light { --bg: #F6EEDF; --fg: var(--dark-on-orange); }
.btn--light:hover { --bg: var(--candle); }
.skip { color: var(--dark-on-orange); }
.chip input:checked + span { color: var(--dark-on-orange); }
.chip input:checked + span .ico { color: var(--dark-on-orange); }
.chip:hover span { background: #251A52; }
.view-toggle__btn[aria-pressed="true"] { color: var(--dark-on-orange); }
.seg:hover .seg__ico { color: var(--dark-on-orange); }
.step.is-on .step__num { color: var(--dark-on-orange); box-shadow: 0 0 18px rgba(255,122,26,.55); }
.acc__btn[aria-expanded="true"] .ico { color: var(--dark-on-orange); }
.req-note { color: var(--dark-on-orange); }
.form-done__ico { color: var(--dark-on-orange); }
.hero-proof .ico { color: var(--dark-on-orange); }
.timeline::after { background: linear-gradient(var(--pumpkin), var(--candle)); }
@media (min-width: 900px) { .timeline::after { background: linear-gradient(90deg, var(--pumpkin), var(--candle)); } }
.plan__list .pro::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%231A0B2E' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plan__list .con::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12h11' fill='none' stroke='%23BDB3D1' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.input::placeholder { color: #8F86AA; }
.dots i { background: #3A2F5E; }
.doc p, .doc li { color: #D9D0E6; }

/* ---------- cabeçalho e logo de Halloween ---------- */
.site-header.is-scrolled { background: var(--night); box-shadow: 0 8px 30px -18px rgba(0,0,0,.9); }
.brand img { height: 44px; }
@media (min-width: 1040px) { .brand img { height: 50px; } }
.menu-mobile { background: radial-gradient(120% 60% at 100% 0%, rgba(123,63,228,.35), transparent 60%), var(--night); }
.menu-mobile__top img { height: 42px; }
.footer-brand img { height: 52px; }

/* ---------- faixas de seção ---------- */
.band--lavender { background: #1A1240; }
.band--paper2 { background: #120C2B; }
.band--indigo { background: radial-gradient(90% 120% at 100% 0%, rgba(255,122,26,.16), transparent 55%), #2A1259; }
.site-footer { background: #07041A; }

/* =========================================================
   HERO: céu, lua, morcegos, cemitério e abóboras
   ========================================================= */
.hero {
  position: relative; isolation: isolate;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px at 28% 42%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 47% 12%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 63% 33%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 82% 8%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 91% 46%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 6% 64%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 70%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(120% 70% at 50% 0%, #1D1145 0%, var(--night) 70%);
  padding-top: clamp(3.5rem, 6vw, 4.5rem);
  padding-bottom: calc(var(--cut) + clamp(7rem, 12vw, 9.5rem));
}
.hero > .wrap { position: relative; z-index: 2; }
.hw-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hw-moon {
  position: absolute; right: max(-60px, calc(50% - 720px)); top: clamp(250px, 30vw, 220px);
  width: clamp(190px, 30vw, 360px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 34%, rgba(214,180,110,.55) 0 7%, transparent 7.5%),
    radial-gradient(circle at 62% 58%, rgba(214,180,110,.45) 0 10%, transparent 10.5%),
    radial-gradient(circle at 70% 26%, rgba(214,180,110,.35) 0 5%, transparent 5.5%),
    radial-gradient(circle at 40% 72%, rgba(214,180,110,.3) 0 4%, transparent 4.5%),
    radial-gradient(circle at 38% 36%, #FFF6DC, #F6DD9A 70%, #E9C772);
  box-shadow: 0 0 60px 10px rgba(255,214,140,.28), 0 0 160px 40px rgba(255,170,80,.14);
  opacity: .92;
}
@media (min-width: 1040px) { .hw-moon { top: 330px; } }
@media (max-width: 1039px) { .hw-moon { top: auto; bottom: calc(var(--cut) + 200px); right: -36px; width: clamp(150px, 40vw, 240px); opacity: .85; } }

.hw-bat { position: absolute; width: 54px; height: 26px; color: #07041A; filter: drop-shadow(0 0 1px rgba(255,214,140,.35)); }
.hw-bat--1 { top: 23%; right: 18%; animation: batFly 14s linear infinite, flap .28s ease-in-out infinite alternate; }
.hw-bat--2 { top: 34%; right: 9%; width: 36px; height: 18px; animation: batFly 18s -6s linear infinite, flap .24s ease-in-out infinite alternate; }
.hw-bat--3 { top: 14%; left: 8%; width: 30px; height: 15px; animation: batFly2 20s -3s linear infinite, flap .3s ease-in-out infinite alternate; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
@keyframes batFly { 0% { translate: 0 0; } 25% { translate: -60px -24px; } 50% { translate: -20px 18px; } 75% { translate: 40px -10px; } 100% { translate: 0 0; } }
@keyframes batFly2 { 0% { translate: 0 0; } 33% { translate: 70px 20px; } 66% { translate: 30px -18px; } 100% { translate: 0 0; } }

.hw-ground { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--cut) + 150px); z-index: 1; pointer-events: none; }
.hw-hill { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
.hw-fog { position: absolute; bottom: calc(var(--cut) + 10px); height: 90px; width: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(190,170,230,.22), transparent); filter: blur(6px); }
.hw-fog--1 { left: -10%; animation: fog 26s ease-in-out infinite alternate; }
.hw-fog--2 { right: -15%; bottom: calc(var(--cut) + 30px); animation: fog 32s -8s ease-in-out infinite alternate-reverse; }
@keyframes fog { to { transform: translateX(14%); } }

/* abóboras acesas */
.hw-pk, .hw-onphone, .hw-final-pk span { display: block; position: absolute; }
.hw-pk svg, .hw-onphone svg, .hw-final-pk svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hw-pk { bottom: calc(var(--cut) + 40px); width: 64px; height: 60px; animation: glow 2.6s ease-in-out infinite; }
.hw-pk--1 { left: 7%; width: 76px; height: 71px; bottom: calc(var(--cut) + 46px); }
.hw-pk--2 { left: 15%; width: 48px; height: 45px; bottom: calc(var(--cut) + 50px); animation-delay: -1.1s; }
.hw-pk--3 { right: 30%; width: 56px; height: 52px; bottom: calc(var(--cut) + 58px); animation-delay: -.6s; }
.hw-pk--4 { right: 6%; width: 70px; height: 66px; bottom: calc(var(--cut) + 66px); animation-delay: -1.8s; }
@media (max-width: 680px) {
  .hw-pk--2, .hw-pk--3 { display: none; }
  .hw-pk--1 { left: 4%; width: 60px; height: 56px; bottom: calc(var(--cut) + 34px); }
  .hw-pk--4 { right: 5%; width: 54px; height: 50px; bottom: calc(var(--cut) + 46px); }
}
@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255,150,40,.55)); }
  45% { filter: drop-shadow(0 0 16px rgba(255,170,60,.8)); }
  55% { filter: drop-shadow(0 0 8px rgba(255,140,30,.45)); }
}

/* lua atrás dos mockups + detalhes neles */
.hv-cut { display: none; }
.hv-browser { position: relative; }
.hw-corner-web { position: absolute; z-index: 3; top: -8px; right: -8px; width: 96px; height: 96px; color: rgba(246,238,223,.4); pointer-events: none; }
.hw-onphone { z-index: 4; top: -26px; right: -10px; width: 46px; height: 43px; transform: rotate(10deg); animation: glow 2.8s ease-in-out infinite; pointer-events: none; }
.hw-onphone--lg { top: -30px; right: -14px; width: 64px; height: 60px; }
.stage__phone { position: relative; }
.hv-phone .phone, .stage__phone .phone { box-shadow: 0 30px 50px -24px rgba(0,0,0,.8), 0 0 0 1.5px rgba(246,238,223,.14), 0 0 40px -10px rgba(255,122,26,.35); }
.browser { box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(246,238,223,.08); }
.search-pill { box-shadow: 0 0 0 1px rgba(255,122,26,.25), 0 10px 30px -18px rgba(255,122,26,.6); }

/* =========================================================
   FAIXA DA OFERTA COM CONTADOR
   ========================================================= */
.promo {
  position: relative; display: grid; gap: 1.1rem 2rem; align-items: center;
  margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
  padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.1rem, 3vw, 2rem);
  border-radius: 24px;
  background:
    radial-gradient(70% 140% at 0% 100%, rgba(255,122,26,.30), transparent 60%),
    radial-gradient(60% 120% at 100% 0%, rgba(123,63,228,.35), transparent 60%),
    #1A1040;
  border: 1px solid rgba(255,140,40,.38);
  box-shadow: 0 30px 70px -35px rgba(255,122,26,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.promo__web { position: absolute; top: 0; right: 0; width: 120px; height: 120px; color: rgba(246,238,223,.28); pointer-events: none; border-top-right-radius: 24px; }
.promo__text { min-width: 0; }
.promo__kicker { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: var(--pumpkin); }
.promo__pk { width: 26px; height: 24px; filter: drop-shadow(0 0 6px rgba(255,150,40,.6)); }
.promo__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.35rem, 2.3vw, 1.6rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin-top: .35rem; text-wrap: balance; }
.promo__sub { color: var(--muted); margin-top: .4rem; font-size: .98rem; }
.promo__sub strong { color: var(--candle); font-weight: 600; }
.promo__clock { min-width: 0; }
.promo__label { font-weight: 600; font-size: .92rem; color: var(--ink); margin-bottom: .5rem; }

.clock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; perspective: 500px; }
.clock__sep { display: none; }
.clock__unit { display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 0; }
.clock__num {
  position: relative; width: 100%; text-align: center; overflow: hidden;
  font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
  font-size: clamp(2.3rem, 11vw, 4rem); letter-spacing: -0.02em;
  padding: .2em .1em .18em; border-radius: 14px;
  color: #FFB347; background: linear-gradient(#170C33 0 50%, #120929 50% 100%);
  border: 1px solid rgba(255,140,40,.3);
  text-shadow: 0 0 18px rgba(255,140,30,.65), 0 0 2px rgba(255,200,120,.8);
  animation: candle 3.4s ease-in-out infinite;
}
.clock__num::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.55); box-shadow: 0 1px 0 rgba(255,255,255,.05); }
.clock__num.is-tick { animation: tick .42s cubic-bezier(.2,.8,.2,1), candle 3.4s ease-in-out infinite; }
@keyframes tick { from { transform: rotateX(-75deg); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes candle {
  0%, 100% { text-shadow: 0 0 18px rgba(255,140,30,.65), 0 0 2px rgba(255,200,120,.8); }
  40% { text-shadow: 0 0 24px rgba(255,150,40,.85), 0 0 2px rgba(255,210,130,.9); }
  60% { text-shadow: 0 0 14px rgba(255,130,25,.5), 0 0 2px rgba(255,200,120,.7); }
}
.clock__lbl { font-size: .82rem; font-weight: 500; color: var(--muted); }
.promo__cta { width: 100%; }

@media (min-width: 720px) {
  .promo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .promo__cta { grid-column: 1 / -1; }
  .clock { display: flex; align-items: flex-start; gap: .4rem; }
  .clock__unit { flex: 1; }
  .clock__sep { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); color: rgba(255,140,40,.55); padding-top: .25em; line-height: 1; }
  .clock__num { font-size: clamp(2.6rem, 5.4vw, 4.2rem); }
}
@media (min-width: 1100px) {
  .promo { grid-template-columns: minmax(0, 1fr) auto auto; padding: 1.6rem 2rem; }
  .promo__clock { width: 470px; }
  .promo__cta { grid-column: auto; width: auto; align-self: end; margin-bottom: 1.9rem; }
}

/* destaque dos 50% off */
.promo__title { margin-top: .5rem; }
.promo__off {
  display: inline-block; margin-right: .15em; white-space: nowrap;
  font-size: clamp(2.6rem, 9vw, 3.6rem); line-height: .95; letter-spacing: -0.03em;
  color: #FFB347; text-shadow: 0 0 22px rgba(255,140,30,.6), 0 0 2px rgba(255,210,130,.9);
  animation: candle 3.4s ease-in-out infinite;
}
.promo__what { display: inline-block; font-size: clamp(1.2rem, 4.4vw, 1.5rem); line-height: 1.15; }
@media (min-width: 1100px) { .promo__off { display: block; margin-bottom: .1em; } }
.promo--fim .promo__off { display: none; }

/* oferta encerrada */
.promo--fim .clock__num { color: var(--muted); text-shadow: none; animation: none; border-color: var(--line); }
.promo--fim { border-color: var(--line-strong); box-shadow: none; }

/* aranha pendurada */
.hw-spider { position: absolute; z-index: 3; top: -58px; right: 70px; width: 30px; height: 88px; pointer-events: none; transform-origin: 50% 0; animation: dangle 4.5s ease-in-out infinite; }
.hw-spider i { position: absolute; left: 50%; top: 0; width: 1px; height: 62px; background: rgba(246,238,223,.45); }
.hw-spider svg { position: absolute; left: 0; bottom: 0; width: 30px; height: 30px; }
@keyframes dangle { 0%, 100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(6px); } }
.hw-spider--plan { top: -2px; right: 26%; height: 70px; }
.hw-spider--plan i { height: 44px; }

/* =========================================================
   RESTO DO SITE
   ========================================================= */
/* bala de milho (candy corn) como marcador da lista de dores */
.pain-list li::before {
  width: 16px; height: 18px; top: 1.35rem; clip-path: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3CclipPath id='c'%3E%3Cpath d='M10 1C12 1 19 15 19 18c0 3.5-18 3.5-18 0C1 15 8 1 10 1z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='20' height='22' fill='%23FFD23F'/%3E%3Crect width='20' height='15' fill='%23FF7A1A'/%3E%3Crect width='20' height='8' fill='%23FFF6E5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-12deg);
}

/* fantasma flutuando */
.why-grid { position: relative; }
.hw-ghost { position: absolute; z-index: 1; width: 62px; height: 74px; right: max(var(--gutter), 2%); top: -1.5rem; opacity: .95; animation: boo 5s ease-in-out infinite; filter: drop-shadow(0 12px 18px rgba(0,0,0,.45)); pointer-events: none; }
@media (min-width: 1000px) { .hw-ghost { right: auto; left: 38%; top: -2.5rem; width: 78px; height: 94px; } }
@keyframes boo { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }

/* teias nos cartões */
.plan, .quote-card { position: relative; }
.hw-card-web { position: absolute; top: 0; right: 0; width: 92px; height: 92px; color: rgba(246,238,223,.22); pointer-events: none; border-top-right-radius: var(--r-xl); }
.quote-card { box-shadow: 0 30px 60px -40px rgba(255,122,26,.4); }

/* CTA final: laranja de abóbora acesa */
.band--violet {
  background:
    radial-gradient(60% 90% at 85% 110%, rgba(255,214,120,.55), transparent 60%),
    radial-gradient(50% 80% at 0% 0%, rgba(160,50,0,.35), transparent 60%),
    var(--pumpkin);
  color: var(--dark-on-orange);
}
.final { position: relative; }
.final-title { color: var(--dark-on-orange); }
.final-side p { color: #2A1530; }
.final .btn--light { --bg: var(--dark-on-orange); --fg: #FFE2BF; box-shadow: 0 18px 30px -16px rgba(26,11,46,.8); }
.final .btn--light:hover { --bg: #2E1A57; --fg: #FFF1DD; }
.final-timer { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: 12px; background: rgba(26,11,46,.14); font-weight: 600; font-size: .98rem; color: var(--dark-on-orange) !important; }
/* o tempo fica numa linha própria, com largura fixa: os números mudam sem mexer na página */
.final-timer { align-items: flex-start; }
.final-timer > span { display: flex; flex-direction: column; gap: .15rem; }
.final-timer b { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; min-width: 16ch; font-size: 1.15rem; letter-spacing: .01em; }
.final-timer .ico { color: var(--dark-on-orange); }
.final .wrap { position: relative; z-index: 1; }
.hw-final-pk { position: absolute; z-index: 0; right: max(16px, 4%); bottom: calc(var(--cut) + 10px); width: 220px; height: 70px; pointer-events: none; --pk-a: #3A1606; --pk-b: #4A1C08; --pk-rib: #2A0F03; --pk-stem: #2A3A12; opacity: .55; }
.hw-final-pk span { bottom: 0; width: 70px; height: 66px; }
.hw-final-pk span:nth-child(1) { left: 0; }
.hw-final-pk span:nth-child(2) { left: 64px; width: 54px; height: 50px; }
.hw-final-pk span:nth-child(3) { left: 116px; width: 84px; height: 78px; }
@media (max-width: 959px) { .hw-final-pk { display: none; } }

/* espaço do aviso de cookies fica dentro do rodapé (mesma cor) */
body { padding-bottom: 0; }
.site-footer { padding-bottom: calc(max(2rem, env(safe-area-inset-bottom, 0px)) + var(--cookie-space, 0px)); }

/* chapéu de bruxa no botão flutuante */
.wa-float { position: fixed; }
.hw-float-hat { position: absolute; right: 2px; top: -26px; width: 52px; height: 40px; transform: rotate(14deg); pointer-events: none; z-index: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }

/* movimento reduzido: tudo parado */
@media (prefers-reduced-motion: reduce) {
  .hw-bat, .hw-fog, .hw-pk, .hw-onphone, .hw-spider, .hw-ghost, .clock__num { animation: none !important; }
}