﻿/* ============================================================
   RESET
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}

/* ============================================================
   DESIGN TOKENS — GREEN FOOTBALL THEME
   ============================================================ */
:root{
  /* cores principais */
  --green:      #16A34A;
  --green-dark: #15803D;
  --green-deep: #0D2B12;
  --green-mid:  #1A3D1A;
  --lime:       #A3D132;
  --lime-dark:  #8ABF1C;
  --yellow:     #FFD600;

  /* backgrounds */
  --bg:   #FFFFFF;
  --s1:   #F7FAF7;
  --s2:   #EEF4EE;
  --s3:   #E2EDE2;
  --accent-bg: #F0FDF4;

  /* texto */
  --text: #0C1A0C;
  --t2:   rgba(12,26,12,.52);
  --t3:   rgba(12,26,12,.28);
  --bd:   rgba(12,26,12,.08);
  --bd2:  rgba(12,26,12,.14);

  /* legado */
  --muted: rgba(12,26,12,.52);
  --amber: #16A34A;
  --amber-dark: #15803D;
  --amber-bg: #F0FDF4;
}

/* ============================================================
   BASE
   ============================================================ */
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);color:var(--text);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body::before{display:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4rem 1.5rem 6rem;overflow:hidden;text-align:center;
  background:var(--bg);
}
.hero::after{
  content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(22,163,74,.08) 0%,transparent 65%);
  pointer-events:none;z-index:0;
}
.hero-glow,.hero-glow2,.hexbg{display:none}

/* PILL */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-bg);border:1px solid rgba(22,163,74,.3);
  border-radius:999px;padding:7px 18px;
  font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--green-dark);margin-bottom:2.5rem;position:relative;z-index:1;
}
.pill-dot{width:5px;height:5px;background:var(--green);border-radius:50%;animation:blink 1.8s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}

/* TITLE */
.hero-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(4rem,19vw,8rem);
  line-height:.88;letter-spacing:2px;
  margin-bottom:1.2rem;position:relative;z-index:1;
}
.hero-title .t1{display:block;color:var(--text)}
.hero-title .t2{display:block;color:var(--green)}
.hero-title .t3{
  display:block;color:rgba(12,26,12,.55);
  font-size:.32em;letter-spacing:4px;
  font-family:'Inter',sans-serif;font-weight:700;
  margin-top:.5em;text-transform:uppercase;
}

/* SUB */
.hero-sub{
  font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--t2);margin-bottom:2.5rem;text-align:center;position:relative;z-index:1;
}
.hero-hook{display:none}

/* PRICE */
.price-row{
  display:flex;align-items:baseline;gap:10px;justify-content:center;
  margin-bottom:1.4rem;position:relative;z-index:1;
}
.price-old{font-size:14px;color:var(--t3);text-decoration:line-through;font-weight:500}
.price-new{font-family:'Bebas Neue',sans-serif;font-size:4.2rem;color:var(--text);line-height:1}
.price-tag{font-size:11px;color:var(--t2);font-weight:600;letter-spacing:.3px}

/* ============================================================
   URGENCY BOX — FOOTBALL CARD
   ============================================================ */
.urgency-box{
  width:100%;max-width:340px;margin:0 auto 1.4rem;
  background:var(--bg);
  border:1.5px solid rgba(22,163,74,.22);
  border-radius:20px;overflow:hidden;
  position:relative;z-index:1;
  box-shadow:0 4px 20px rgba(22,163,74,.08);
}

/* corpo principal */
.urgency-body{
  display:flex;align-items:center;gap:.8rem;
  padding:1.4rem 1.3rem 1.2rem;
  background:var(--bg);
}

/* esquerda */
.urgency-left{flex:1;min-width:0}
.urgency-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--accent-bg);color:var(--green-dark);border:1px solid rgba(22,163,74,.25);
  font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  padding:4px 12px;border-radius:999px;margin-bottom:.9rem;
}
.urgency-desc{
  font-size:15px;font-weight:600;color:var(--text);line-height:1.4;margin-bottom:.6rem;
}
.urgency-old-pill{
  display:inline-block;
  background:var(--s2);color:var(--t2);
  font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:1px;
  padding:1px 14px;border-radius:8px;margin-bottom:.6rem;
  text-decoration:line-through;
}
.urgency-today{font-size:12px;font-weight:600;color:var(--t2);margin-bottom:.2rem}
.urgency-new-price{
  font-family:'Bebas Neue',sans-serif;font-size:2.8rem;
  color:var(--green-dark);line-height:1;letter-spacing:1px;
}

/* escudo */
.urgency-shield{
  width:86px;height:100px;flex-shrink:0;
  background:linear-gradient(180deg,var(--green) 0%,var(--green-dark) 100%);
  clip-path:polygon(50% 0%,100% 22%,100% 68%,50% 100%,0% 68%,0% 22%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;padding:.5rem .3rem;
}
.shield-ball{font-size:1.2rem;line-height:1}
.shield-label{font-size:7.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.8);line-height:1}
.shield-pct{font-family:'Bebas Neue',sans-serif;font-size:2rem;color:#fff;line-height:1}
.shield-star{font-size:.75rem;color:rgba(255,255,255,.7);line-height:1}

/* botão CTA dentro do card */
.urgency-cta-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;
  background:var(--lime);color:#0D2B12;
  font-weight:800;font-size:14px;letter-spacing:1px;text-transform:uppercase;
  padding:17px 16px;
  text-decoration:none;border:none;cursor:pointer;
  transition:background .15s;
}
.urgency-cta-btn:hover{background:var(--lime-dark)}

/* rodapé do card */
.urgency-footer{
  background:var(--s1);border-top:1px solid var(--bd);
  padding:.9rem 1.2rem;
  display:flex;align-items:center;gap:1rem;
}
.urgency-footer-pdf{
  display:flex;align-items:center;gap:10px;flex:1;
}
.pdf-icon{
  background:#fff;color:#e53935;
  font-size:9px;font-weight:900;letter-spacing:.5px;
  padding:4px 6px;border-radius:4px;flex-shrink:0;
  border-bottom:2px solid #e53935;
}
.urgency-footer-pdf strong{display:block;font-size:12px;color:var(--green-dark);font-weight:700}
.urgency-footer-pdf span{font-size:11px;color:var(--t2);line-height:1.4}
.urgency-footer-dl{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.dl-circle{
  width:32px;height:32px;border-radius:50%;
  border:2px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  color:var(--green);font-size:14px;font-weight:700;flex-shrink:0;
}
.urgency-footer-dl span{font-size:11px;color:var(--t2);line-height:1.5}

/* ============================================================
   PRINT BANNER
   ============================================================ */
.print-banner{
  background:var(--accent-bg);border:1px solid rgba(22,163,74,.25);
  border-radius:14px;padding:13px 16px;
  display:flex;align-items:center;gap:12px;
  margin:0 auto 1.6rem;max-width:340px;text-align:left;position:relative;z-index:1;
}
.print-banner-icon{font-size:1.4rem;flex-shrink:0}
.print-banner-text strong{display:block;font-size:13px;color:var(--green-dark);font-weight:700;margin-bottom:2px}
.print-banner-text{font-size:12px;color:var(--t2);line-height:1.5}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-main{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;max-width:340px;margin:0 auto;
  background:var(--green);color:#fff;
  font-family:'Inter',sans-serif;font-weight:700;
  font-size:16px;letter-spacing:.2px;
  padding:18px 24px;border-radius:16px;border:none;cursor:pointer;
  text-decoration:none;position:relative;z-index:1;
  transition:transform .12s,background .15s,box-shadow .15s;
  box-shadow:0 4px 20px rgba(22,163,74,.3);
}
.btn-main::before{display:none}
.btn-main:active{transform:scale(.97)}
.btn-main:hover{background:var(--green-dark);box-shadow:0 6px 28px rgba(22,163,74,.4)}

.btn-ghost{
  display:block;width:100%;max-width:340px;margin:.75rem auto 0;
  background:transparent;border:1px solid var(--bd2);
  color:var(--t2);font-size:13px;font-weight:500;letter-spacing:.3px;
  padding:14px;border-radius:14px;cursor:pointer;
  text-decoration:none;text-align:center;
  transition:border-color .2s,color .2s;position:relative;z-index:1;
}
.btn-ghost:hover{border-color:rgba(22,163,74,.4);color:var(--green)}

/* BADGES */
.badges{
  display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
  margin-top:1.8rem;position:relative;z-index:1;
}
.badge{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--t3)}

/* SCROLL HINT */
.scroll-ind{
  position:absolute;bottom:1.8rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  opacity:.2;animation:fadeDown 2.2s ease-in-out infinite;z-index:1;
}
@keyframes fadeDown{
  0%,100%{opacity:.2;transform:translateX(-50%) translateY(0)}
  50%{opacity:.45;transform:translateX(-50%) translateY(5px)}
}
.scroll-ind span{font-size:9px;letter-spacing:2px;text-transform:uppercase}
.scroll-chevron{width:14px;height:14px;border-right:1.5px solid var(--text);border-bottom:1.5px solid var(--text);transform:rotate(45deg)}

/* ============================================================
   CAROUSEL
   ============================================================ */
.carousel-wrap{
  width:100vw;margin-left:calc(-50vw + 50%);overflow:hidden;position:relative;
  margin-top:2.2rem;margin-bottom:2.2rem;
}
.carousel-track{display:flex;gap:10px;animation:scroll 36s linear infinite;width:max-content;padding:6px 0 10px}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-33.333%)}}
.carousel-wrap::before,.carousel-wrap::after{content:'';position:absolute;top:0;bottom:0;width:72px;z-index:2}
.carousel-wrap::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.carousel-wrap::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.sticker{flex-shrink:0;width:94px;height:120px;border-radius:10px;overflow:hidden;border:1px solid var(--bd)}
.sticker img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar{
  padding:2.5rem 1.5rem;
  background:var(--green-deep);
}
.stats-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  max-width:400px;margin:0 auto;text-align:center;
}
.stats-grid>div{padding:.4rem 0}
.stats-grid>div+div{border-left:1px solid rgba(255,255,255,.15)}
.stat-num{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.2rem,9vw,3rem);line-height:1;
  color:var(--lime);
}
.stat-sub{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:5px}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding:4rem 1.5rem}
.sec-label{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--green);margin-bottom:.6rem}
.sec-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,8vw,3rem);line-height:1;margin-bottom:1rem;color:var(--text)}
.accent{color:var(--green);-webkit-text-fill-color:var(--green);background:none}
.accent-green{color:var(--green-dark);-webkit-text-fill-color:var(--green-dark);background:none}

/* ============================================================
   PLAYERS
   ============================================================ */
.players-sec{
  background:var(--s1);padding:4rem 0;
  border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);
}
.players-sec .inner{padding:0 1.5rem;margin-bottom:2rem}
.players-scroll{overflow-x:auto;padding:0 1.5rem 1rem;scrollbar-width:none;-ms-overflow-style:none}
.players-scroll::-webkit-scrollbar{display:none}
.players-row{display:flex;gap:12px;width:max-content}
.player-card{
  width:140px;flex-shrink:0;background:var(--bg);
  border:1px solid var(--bd);border-radius:16px;overflow:hidden;position:relative;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.player-card:hover{transform:translateY(-4px);border-color:rgba(22,163,74,.35);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.player-card img{width:100%;height:165px;object-fit:cover;display:block}
.card-bar{padding:10px 12px 14px;background:var(--bg)}
.card-name{font-weight:700;font-size:12px;color:var(--text);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-club{font-size:11px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-flag{position:absolute;top:8px;right:8px;font-size:1rem}
.player-card.featured{border-color:rgba(22,163,74,.3);box-shadow:0 2px 12px rgba(22,163,74,.1)}
.feat-star{
  position:absolute;top:8px;left:8px;
  background:var(--green);color:#fff;
  font-size:8px;font-weight:800;letter-spacing:.5px;
  padding:3px 8px;border-radius:5px;z-index:2;text-transform:uppercase;
}

/* ============================================================
   FEATURES
   ============================================================ */
.features-sec{background:var(--bg);padding:4rem 1.5rem;border-top:1px solid var(--bd)}
.feat-grid{
  display:flex;flex-direction:column;gap:1px;
  margin-top:2rem;border:1px solid var(--bd);border-radius:20px;overflow:hidden;background:var(--bd);
}
.feat-item{
  background:var(--bg);padding:1.3rem 1.2rem;
  display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;
  column-gap:14px;row-gap:3px;transition:background .15s;
}
.feat-item::before{display:none}
.feat-item:hover{background:var(--s1)}
.feat-icon{
  grid-column:1;grid-row:1/3;width:42px;height:42px;border-radius:12px;
  background:var(--accent-bg);border:1px solid rgba(22,163,74,.2);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  align-self:center;
}
.feat-title{grid-column:2;grid-row:1;font-weight:700;font-size:14px;color:var(--text);align-self:end;font-family:'Inter',sans-serif}
.feat-desc{grid-column:2;grid-row:2;font-size:12.5px;color:var(--t2);line-height:1.6;align-self:start}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-sec{background:var(--s1);padding:4rem 1.5rem;border-top:1px solid var(--bd)}
.testi-cards{display:flex;flex-direction:column;gap:10px;max-width:520px;margin:1.8rem auto 0}
.testi-card{background:var(--bg);border:1px solid var(--bd);border-radius:16px;padding:1.2rem}
.testi-stars{display:flex;gap:3px;margin-bottom:10px}
.star{width:13px;height:13px;background:var(--green);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.testi-text{font-size:13px;color:var(--t2);line-height:1.75;margin-bottom:10px}
.testi-author{font-size:11px;font-weight:600;letter-spacing:.3px;color:var(--t3)}

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final{
  position:relative;overflow:hidden;
  padding:5rem 1.5rem 8rem;text-align:center;
  background:var(--s1);border-top:1px solid var(--bd);
}
.cta-glow{
  position:absolute;top:-100px;left:50%;transform:translateX(-50%);
  width:360px;height:360px;
  background:radial-gradient(circle,rgba(22,163,74,.07) 0%,transparent 70%);
  pointer-events:none;
}
.urgency-chip{
  display:inline-flex;align-items:center;gap:7px;
  background:#FEF2F2;border:1px solid rgba(220,38,38,.2);
  border-radius:999px;padding:6px 16px;
  font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:#DC2626;margin-bottom:2rem;
}
.urgency-dot{width:5px;height:5px;background:#DC2626;border-radius:50%;animation:blink 1.2s infinite}
.cta-price{display:flex;align-items:baseline;gap:12px;justify-content:center;margin-bottom:1.8rem}
.safe-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}
.safe-item{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:500;color:var(--t2);
  background:var(--bg);border:1px solid var(--bd);
  border-radius:10px;padding:8px 14px;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:var(--green-deep);text-align:center;
  padding:2rem 1.5rem;font-size:11px;color:rgba(255,255,255,.35);
  border-top:1px solid rgba(255,255,255,.06);line-height:1.9;
}

/* ============================================================
   STICKY BAR
   ============================================================ */
.sticky{
  position:fixed;bottom:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--bd);
  padding:12px 16px;display:flex;align-items:center;gap:12px;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.sticky.visible{transform:translateY(0)}
.sticky-info{flex:1}
.sticky-info small{display:block;font-size:10px;color:var(--t2);font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.sticky-price{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;color:var(--text);line-height:1}
.sticky-btn{
  background:var(--green);color:#fff;font-weight:700;font-size:14px;
  padding:13px 22px;border-radius:12px;text-decoration:none;
  white-space:nowrap;flex-shrink:0;border:none;transition:background .15s;
}
.sticky-btn:hover{background:var(--green-dark)}

/* ============================================================
   JS ANIMATIONS
   ============================================================ */
.fade-ready{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.fade-ready.fade-in{opacity:1;transform:translateY(0)}

/* ============================================================
   MOBILE
   ============================================================ */
@media(max-width:390px){
  .hero{padding:3.5rem 1.2rem 5.5rem}
  .hero-title{font-size:18vw}
  .btn-main,.btn-ghost,.urgency-box,.print-banner{max-width:100%}
  .feat-item{padding:1.1rem 1rem}
  .sec,.features-sec{padding:3.5rem 1.2rem}
  .players-sec .inner{padding:0 1.2rem}
  .urgency-body{gap:.6rem}
  .urgency-shield{width:76px;height:88px}
}

