/* ============================================================
   FAIXA PROMOCIONAL — PROMO DO HEXA (atualização temporária)
   Bloco autocontido. Para remover: apague o <link> deste arquivo,
   o <section class="promo"> do index.html e o <script> do promo-hexa.js.
   ============================================================ */
.promo{
  --hq-orange:#FF5100;
  --ink:#0E1216;
  --muted:#5A6470;
  --br-green:#009C3B;
  --br-green-light:#22B14C;
  --br-yellow:#FFDF00;
  --br-yellow-warm:#FFC400;

  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
  padding:64px 56px 72px;
  background-color:#005a23;
  background-image:
    linear-gradient(180deg, rgba(0,60,22,.35) 0%, rgba(0,60,22,.0) 30%, rgba(0,60,22,.0) 70%, rgba(0,40,15,.55) 100%),
    url('assets/grass-horizontal.png');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border-top:6px solid var(--br-yellow);
  border-bottom:6px solid var(--br-yellow);
}
.promo *{box-sizing:border-box}
.promo img{display:block;max-width:100%}
.promo a{text-decoration:none}
.promo button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

.promo::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 80% 110%, rgba(255,223,0,.28), transparent 55%),
    radial-gradient(ellipse at 15% -20%, rgba(34,177,76,.35), transparent 55%);
}
.promo::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,0) 0 100px,
    rgba(255,255,255,.05) 100px 200px);
}
.promo > *{position:relative;z-index:1}

/* Ribbon bar — "promoção válida" */
.promo-ribbon{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,223,0,.45);
  color:#FFE57A;
  padding:7px 14px;border-radius:999px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:18px;
  align-self:flex-start;
}
.promo-ribbon .dot{
  width:7px;height:7px;border-radius:50%;background:#FFE57A;
  box-shadow:0 0 0 0 rgba(255,229,122,.6);
  animation:promo-pulse 1.6s infinite;
}
@keyframes promo-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,229,122,.6)}
  70%{box-shadow:0 0 0 10px rgba(255,229,122,0)}
  100%{box-shadow:0 0 0 0 rgba(255,229,122,0)}
}

.promo-grid{
  display:grid;grid-template-columns: 1fr 1.3fr;gap:64px;
  align-items:center;
  max-width:1320px;margin:0 auto;
}

/* ===== Left side: Logo + headline ===== */
.promo-left{position:relative;display:flex;flex-direction:column;gap:20px}
.promo-logo-wrap{
  position:relative;
  align-self:flex-start;
  max-width:540px;
  animation: promo-logo-float 3.6s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.promo-logo-wrap img{
  width:100%;display:block;
  filter:drop-shadow(0 22px 36px rgba(0,0,0,.55));
}
.promo-logo-wrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(115deg,
    transparent 38%,
    rgba(255,255,255,.85) 50%,
    transparent 62%);
  background-size: 220% 100%;
  background-position: -120% 0;
  background-repeat: no-repeat;
  -webkit-mask: url('assets/promo-hexa-logo.png') center/contain no-repeat;
          mask: url('assets/promo-hexa-logo.png') center/contain no-repeat;
  animation: promo-logo-shine 4.2s ease-in-out infinite;
}
@keyframes promo-logo-float{
  0%,100%{transform: translateY(0) rotate(-1deg) scale(1)}
  50%    {transform: translateY(-10px) rotate(1deg) scale(1.02)}
}
@keyframes promo-logo-shine{
  0%   {background-position: -120% 0}
  55%  {background-position: 220% 0}
  100% {background-position: 220% 0}
}
@media (prefers-reduced-motion: reduce){
  .promo-logo-wrap{animation:none}
  .promo-logo-wrap::after{animation:none;display:none}
}
.promo-kicker{
  color:var(--br-yellow);
  font-family:'Archivo Black','Anton',sans-serif;
  font-size:34px;letter-spacing:.01em;line-height:1;
  text-shadow:0 3px 0 rgba(0,0,0,.35), 0 8px 22px rgba(0,0,0,.4);
  margin-top:4px;
}
.promo-sub{
  font-size:16px;line-height:1.5;color:#E8F2EA;max-width:480px;font-weight:500;
}
.promo-sub b{color:#fff;font-weight:800}

.promo-brandstrip{
  display:flex;align-items:center;gap:18px;margin-top:6px;
  padding-top:18px;border-top:1px dashed rgba(255,255,255,.25);
}
.promo-brandstrip .lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#B8D4BD;font-weight:700}
.promo-brandstrip .by{display:flex;align-items:center;gap:14px;color:#fff;font-weight:700;font-size:14px}
.promo-brandstrip .by .pill{
  background:#fff;color:var(--ink);
  padding:8px 14px;border-radius:8px;
  display:inline-flex;align-items:center;
}
.promo-brandstrip .pill img{display:block;width:auto}
.promo-brandstrip .logo-tn{height:30px}
.promo-brandstrip .logo-hq{height:40px}

/* ===== Right side: Tier cards ===== */
.tiers{display:grid;grid-template-columns:1fr;gap:22px;position:relative;padding-top:14px}
.tier{
  --c1:#FFFFFF;
  --c2:#F4F7F4;
  position:relative;
  display:grid;grid-template-columns: 140px 1fr auto;align-items:center;gap:28px;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  color:var(--ink);
  border-radius:18px;
  padding:26px 28px;
  box-shadow:0 22px 48px -22px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.5);
  overflow:visible;
  transition:transform .25s ease, box-shadow .25s ease;
}
.tier:hover{transform:translateY(-2px);box-shadow:0 28px 58px -22px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.5)}
.tier::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:7px;
  background:var(--accent,var(--br-green));
  border-radius:18px 0 0 18px;
}
.tier-num{
  font-family:'Archivo Black','Anton',sans-serif;
  font-size:78px;line-height:.85;
  color:var(--accent,var(--br-green));
  position:relative;
  letter-spacing:-.02em;
}
.tier-num .pct{font-size:42px;vertical-align:top;margin-left:2px}
.tier-num .off{
  display:block;font-family:'Inter',sans-serif;
  font-size:11px;letter-spacing:.22em;color:var(--ink);
  font-weight:800;margin-top:8px;
}
.tier-body .label{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:6px;
}
.tier-body .terms{
  font-family:'Archivo Black','Inter',sans-serif;
  font-weight:900;font-size:26px;line-height:1.05;color:var(--ink);
}
.tier-body .terms em{font-style:normal;color:var(--accent,var(--br-green))}
.tier-body .sub{font-size:14px;color:var(--muted);margin-top:8px;font-weight:500}
.tier-cta{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--accent,var(--br-green));color:#fff;
  padding:14px 20px;border-radius:11px;font-weight:700;font-size:14.5px;
  box-shadow:0 12px 28px -10px rgba(0,156,59,.7);
  white-space:nowrap;
}
.tier-cta:hover{filter:brightness(1.05)}
.tier-cta svg{width:18px;height:18px}

/* Featured tier */
.tier.featured{
  --c1:#fff8d4;--c2:#FFD84A;
  grid-template-columns: 150px 1fr auto;
  transform: scale(1.03);
  box-shadow:0 28px 60px -20px rgba(0,0,0,.6),
             inset 0 0 0 2px #0A3D17,
             inset 0 0 0 5px rgba(255,255,255,.9);
}
.tier.featured:hover{transform:scale(1.03) translateY(-2px)}
.tier.featured .tier-num{color:#0A3D17}
.tier.featured .tier-num .off{color:#0A3D17}
.tier.featured .tier-body .terms{color:#0A3D17}
.tier.featured .tier-body .terms em{color:#0A3D17}
.tier.featured::before{display:none}

/* Overlapping "MELHOR OFERTA" ribbon */
.tier.featured::after{
  content:"\2605 MELHOR OFERTA \2605";
  position:absolute;
  top:-18px;right:-14px;
  background:linear-gradient(180deg,#FF5100,#D03A00);
  color:#fff;
  font-family:'Archivo Black','Inter',sans-serif;
  font-size:13px;font-weight:900;letter-spacing:.16em;
  padding:10px 18px;
  border-radius:8px;
  box-shadow:0 12px 24px -6px rgba(0,0,0,.55),
             inset 0 -3px 0 rgba(0,0,0,.18),
             inset 0 2px 0 rgba(255,255,255,.25);
  transform: rotate(6deg);
  z-index:3;
  border:2px solid #fff;
  animation: promo-badge-wiggle 2.8s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes promo-badge-wiggle{
  0%,100%{transform: rotate(6deg) scale(1)}
  50%    {transform: rotate(4deg) scale(1.06)}
}
.tier.featured .tier-cta{background:#0A3D17;box-shadow:0 12px 28px -10px rgba(10,61,23,.7)}

/* Stars row */
.stars-row{
  display:flex;align-items:center;gap:6px;margin-bottom:14px;
  color:var(--br-yellow);
}
.stars-row .star{font-size:18px;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.stars-row .star.dim{opacity:.4;font-size:14px}
.stars-row .stars-label{
  color:#fff;font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-left:6px;
}

/* ===== Product showcase ===== */
.showcase-head{
  max-width:1320px;margin:48px auto 18px;
  display:flex;align-items:center;gap:18px;
  color:#fff;
}
.showcase-head .line{flex:1;height:1px;background:linear-gradient(90deg, transparent, rgba(255,223,0,.55), transparent)}
.showcase-head .lbl{
  font-family:'Archivo Black','Inter',sans-serif;
  font-size:18px;letter-spacing:.18em;color:var(--br-yellow);
  text-shadow:0 2px 0 rgba(0,0,0,.35);
  white-space:nowrap;
}
.showcase-head .lbl small{
  display:block;font-family:'Inter',sans-serif;
  font-weight:600;font-size:11px;letter-spacing:.22em;
  color:#E8F2EA;margin-top:4px;
}

.showcase{
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  position:relative;
}
.pcard{
  --accent:#0E7A3D;
  position:relative;
  background:#FFFFFF;
  border-radius:20px;
  padding:22px 22px 24px;
  box-shadow:
    0 26px 48px -22px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(10,61,23,.10);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
  min-height:420px;
}
.pcard:hover{transform:translateY(-4px);box-shadow:0 34px 60px -22px rgba(0,0,0,.6)}
.pcard::after{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:linear-gradient(90deg, #009C3B 0%, #009C3B 50%, #FFDF00 50%, #FFDF00 100%);
  z-index:2;
}
.pcard::before{
  content:"";position:absolute;left:8%;right:8%;top:55%;height:60px;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.12), transparent 70%);
  pointer-events:none;
  z-index:0;
}
.pcard .pcard-badge{
  align-self:flex-start;
  background:#0A3D17;color:var(--br-yellow);
  font-family:'Archivo Black','Inter',sans-serif;
  font-size:12px;letter-spacing:.16em;
  padding:7px 11px;border-radius:7px;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.4);
  margin-bottom:6px;
}
.pcard .pcard-image{
  flex:1;
  display:grid;place-items:center;
  margin:6px -6px 8px;
  min-height:170px;
  position:relative;
  z-index:1;
}
.pcard .pcard-image img{
  max-width:100%;max-height:200px;width:auto;height:auto;
  filter:drop-shadow(0 16px 16px rgba(0,0,0,.28));
}
.pcard .pcard-name{
  font-family:'Archivo Black','Inter',sans-serif;
  font-weight:900;font-size:22px;letter-spacing:.04em;
  color:#0A3D17;text-align:center;
  line-height:1.05;
  text-transform:uppercase;
  margin-bottom:10px;
  position:relative;z-index:1;
}
.pcard .pcard-price{
  text-align:center;
  color:#0A3D17;
  position:relative;z-index:1;
}
.pcard .pcard-price .apenas{
  font-size:11px;letter-spacing:.32em;font-weight:700;
  color:#0A3D17;opacity:.7;
}
.pcard .pcard-price .orig{
  font-size:12.5px;font-weight:600;color:#5A6470;
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
  margin-top:4px;letter-spacing:.04em;
  min-height:18px;
}
.pcard .pcard-price .orig em{font-style:normal;font-weight:700;color:#0A3D17;opacity:.55;margin-right:2px}
.pcard .pcard-price .row{
  display:flex;align-items:baseline;justify-content:center;gap:6px;
  margin-top:2px;
}
.pcard .pcard-price .x{
  font-family:'Archivo Black','Inter',sans-serif;
  font-weight:900;font-size:24px;
}
.pcard .pcard-price .rs{
  font-family:'Archivo Black','Inter',sans-serif;
  font-weight:900;font-size:16px;
}
.pcard .pcard-price .val{
  font-family:'Archivo Black','Inter',sans-serif;
  font-weight:900;font-size:46px;line-height:1;
  letter-spacing:-.01em;
}
.pcard .pcard-price .cents{
  font-family:'Archivo Black','Inter',sans-serif;
  font-weight:900;font-size:22px;
  align-self:flex-start;margin-top:4px;
}
.pcard .pcard-price .sub{
  margin-top:6px;font-size:12px;font-weight:700;color:#0A3D17;
  letter-spacing:.04em;
}
.pcard .pcard-price .saving{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:10px;
  background:linear-gradient(180deg, #FFE57A, #FFC400);
  color:#0A3D17;
  font-family:'Archivo Black','Inter',sans-serif;
  font-size:12px;font-weight:900;letter-spacing:.08em;
  padding:6px 12px;border-radius:999px;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.35),
             inset 0 0 0 1.5px rgba(10,61,23,.25);
}
.pcard .pcard-price .saving::before{
  content:"\2193";font-size:13px;line-height:1;
}
.pcard .pcard-cta{
  margin-top:14px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#0A3D17;color:#fff;
  padding:12px 14px;border-radius:10px;
  font-weight:800;font-size:13px;letter-spacing:.04em;
  box-shadow:0 10px 22px -10px rgba(10,61,23,.7);
  transition:transform .15s ease, background .15s ease;
}
.pcard .pcard-cta:hover{background:#0E5A22;transform:translateY(-1px)}
.pcard .pcard-cta svg{width:16px;height:16px}

/* Payment plan switcher */
.pay-switch{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:#F2F4F2;
  border:1px solid rgba(10,61,23,.12);
  border-radius:10px;
  padding:3px;
  gap:2px;
  margin-top:14px;
  position:relative;z-index:1;
}
.pay-switch button{
  font:inherit;cursor:pointer;border:0;background:transparent;
  padding:8px 6px;border-radius:7px;
  font-family:'Inter',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.04em;
  color:#0A3D17;
  transition:background .18s ease, color .18s ease, transform .15s ease;
  line-height:1.1;
}
.pay-switch button .small{display:block;font-size:9.5px;letter-spacing:.16em;font-weight:700;opacity:.6;margin-top:1px}
.pay-switch button[aria-pressed="true"]{
  background:#0A3D17;color:#fff;
  box-shadow:0 6px 14px -6px rgba(10,61,23,.55);
}
.pay-switch button[aria-pressed="true"] .small{opacity:.85;color:var(--br-yellow)}
.pay-switch button:hover:not([aria-pressed="true"]){background:rgba(10,61,23,.08)}

/* Tiny balloons in card corners */
.pcard .balloon{
  position:absolute;bottom:-14px;width:42px;height:54px;
  z-index:0;opacity:.85;
  pointer-events:none;
}
.pcard .balloon.l{left:-10px;transform:rotate(-8deg)}
.pcard .balloon.r{right:-10px;transform:rotate(8deg)}

/* Footer of banner */
.promo-foot{
  max-width:1320px;margin:38px auto 0;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:22px;border-top:1px dashed rgba(255,255,255,.25);
}
.promo-foot .legal{
  color:#CFE6D3;font-size:12.5px;line-height:1.5;max-width:680px;
}
.promo-foot .legal b{color:#fff}
.promo-foot-ctas{display:flex;gap:12px;flex-wrap:wrap}
.whats-cta{
  background:#25D366;color:#053D1A;font-weight:800;
  padding:14px 22px;border-radius:12px;font-size:15px;
  display:inline-flex;align-items:center;gap:10px;
  box-shadow:0 16px 36px -14px rgba(37,211,102,.6), inset 0 0 0 1px rgba(255,255,255,.3);
  transition:transform .15s ease;
}
.whats-cta:hover{transform:translateY(-2px)}
.whats-cta svg{width:22px;height:22px}

/* Decorations */
.promo .confetti{position:absolute;pointer-events:none;z-index:0}
.promo .vuvu{position:absolute;pointer-events:none;z-index:0;filter:drop-shadow(0 12px 18px rgba(0,0,0,.35))}

/* Responsive */
@media (max-width:1100px){
  .promo-grid{grid-template-columns:1fr;gap:30px}
  .promo{padding:40px 28px 44px}
  .showcase{grid-template-columns:1fr 1fr;gap:18px}
}
@media (max-width:680px){
  .tier, .tier.featured{
    grid-template-columns:1fr;
    gap:6px;
    padding:22px 20px;
    transform:none;
  }
  .tier:hover, .tier.featured:hover{transform:none}
  .tier-num{font-size:52px;line-height:.9}
  .tier-num .pct{font-size:28px}
  .tier-num .off{margin-top:4px}
  .tier-body .terms{font-size:22px}
  .tier-cta{grid-column:auto;justify-content:center;margin-top:6px}
  .tier.featured::after{display:none}
  .stars-row{flex-wrap:wrap}
  .promo-kicker{font-size:24px}
  .promo-foot{flex-direction:column;align-items:flex-start}
  .promo-foot-ctas{width:100%;flex-direction:column}
  .whats-cta{width:100%;justify-content:center}
  .showcase{grid-template-columns:1fr}
  .showcase-head .lbl{font-size:14px}
}