/*
Theme Name: Café com Coco
Theme URI: https://cafemagico.lovable.app
Author: Café com Coco
Author URI: https://cafemagico.lovable.app
Description: Tema de página de vendas premium para o produto digital "O Truque do Café com Coco". Otimizado para conversão, mobile-first, com gatilhos mentais (urgência, escassez, prova social, autoridade).
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cafe-com-coco
Tags: landing-page, sales-page, one-page, dark, custom-colors
*/

/* =========================
   DESIGN TOKENS
   ========================= */
:root{
  --bg:#ffffff;
  --fg:#0b1410;
  --muted:#6b7a74;
  --secondary:#f4f1ea;
  --border:#e6e1d6;

  --primary:#0f3a26;            /* deep green */
  --primary-foreground:#ffffff;

  --gold:#d4a73a;               /* soft gold */
  --gold-2:#f1c75b;
  --destructive:#c8261d;
  --destructive-fg:#ffffff;

  --dark:#08160f;
  --dark-2:#0f2418;

  --shadow-gold: 0 10px 40px -10px rgba(212,167,58,.6);
  --shadow-elegant: 0 20px 50px -20px rgba(0,0,0,.35);

  --radius: 14px;
}

/* =========================
   RESET / BASE
   ========================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--fg);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Poppins','Inter',sans-serif;font-weight:800;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,6vw,3.6rem)}
h2{font-size:clamp(1.6rem,4.5vw,2.8rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}
.max-3{max-width:780px;margin-left:auto;margin-right:auto}
.max-4{max-width:960px;margin-left:auto;margin-right:auto}
.max-5{max-width:1080px;margin-left:auto;margin-right:auto}
.text-center{text-align:center}
.gold{color:var(--gold)}
.red{color:var(--destructive)}

/* Hide Lovable branding (carryover) */
a[href*="lovable"]{display:none !important;}

/* =========================
   BUTTONS / CTA
   ========================= */
.btn-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:linear-gradient(135deg,#e0301d,#c8261d);
  color:#fff;font-weight:800;font-size:1.05rem;
  padding:1.05rem 1.6rem;border:none;border-radius:999px;cursor:pointer;
  text-transform:uppercase;letter-spacing:.5px;
  box-shadow:0 14px 30px -10px rgba(200,38,29,.55), inset 0 -3px 0 rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .2s ease;
  animation:pulse-cta 2s infinite;
}
.btn-cta:hover{transform:translateY(-2px) scale(1.02)}
.btn-cta.full{width:100%}
@keyframes pulse-cta{
  0%,100%{box-shadow:0 14px 30px -10px rgba(200,38,29,.55), 0 0 0 0 rgba(200,38,29,.55)}
  50%{box-shadow:0 14px 30px -10px rgba(200,38,29,.55), 0 0 0 14px rgba(200,38,29,0)}
}

/* =========================
   SECTIONS
   ========================= */
.topbar{
  background:var(--destructive);color:#fff;text-align:center;
  padding:.5rem 1rem;font-weight:700;font-size:.85rem;
}
section{padding:4rem 0}
@media(min-width:768px){section{padding:6rem 0}}

.bg-secondary{background:var(--secondary)}
.bg-dark{background:linear-gradient(180deg,var(--dark) 0%,var(--dark-2) 100%);color:#fff}
.bg-dark .muted,.bg-dark p{color:rgba(255,255,255,.8)}
.bg-black{background:#000;color:#fff}

/* HERO */
.hero{
  background:radial-gradient(circle at 50% 0%, #14422c 0%, #08160f 70%);
  color:#fff;text-align:center;padding:3rem 0 4rem;
}
.hero .badge-top{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(212,167,58,.15);border:1px solid rgba(212,167,58,.4);
  color:var(--gold);font-weight:700;font-size:.78rem;
  padding:.4rem .9rem;border-radius:999px;margin-bottom:1.4rem;
  text-transform:uppercase;letter-spacing:.6px;
}
.hero h1{max-width:780px;margin:0 auto 1rem}
.hero h1 .gold{color:var(--gold-2)}
.hero .sub{max-width:640px;margin:0 auto 2rem;font-size:1.05rem;color:rgba(255,255,255,.85)}
.hero .mockup{
  position:relative;max-width:380px;margin:0 auto;
  animation:float 4s ease-in-out infinite;
}
.hero .mockup::before{
  content:"";position:absolute;inset:-20%;
  background:radial-gradient(circle,rgba(212,167,58,.35),transparent 60%);
  filter:blur(20px);z-index:0;
}
.hero .mockup img{position:relative;z-index:1;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* SOCIAL STRIP */
.strip{background:#000;color:#fff;padding:1.4rem 0;border-top:1px solid rgba(212,167,58,.2);border-bottom:1px solid rgba(212,167,58,.2)}
.strip .row{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem 2.5rem;text-align:center}
.strip .num{color:var(--gold);font-size:1.6rem;font-weight:800;line-height:1}
.strip .lab{color:rgba(255,255,255,.6);font-size:.85rem}

/* PAIN GRID */
.grid-2{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:720px){.grid-2{grid-template-columns:1fr 1fr}}
.pain-item{display:flex;align-items:flex-start;gap:.7rem;background:#fff;border:1px solid var(--border);padding:1rem;border-radius:14px;font-weight:600}
.pain-item .ic{color:var(--destructive);font-size:1.2rem;line-height:1}

/* MECHANISM */
.mech{display:grid;gap:2.5rem;align-items:center}
@media(min-width:840px){.mech{grid-template-columns:1fr 1fr}}
.mech img{border-radius:18px;border:1px solid rgba(212,167,58,.25);box-shadow:var(--shadow-elegant)}
.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;font-weight:800}
.check-list{list-style:none;padding:0;margin:0 0 1.5rem}
.check-list li{display:flex;align-items:flex-start;gap:.6rem;margin:.6rem 0}
.check-list li::before{content:"✓";color:var(--gold);font-weight:900;margin-top:.05rem}

/* HOW IT WORKS */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem}
.step{background:#fff;border:2px solid var(--border);border-radius:16px;padding:1.4rem;transition:.2s}
.step:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:var(--shadow-elegant)}
.step .ic{
  width:48px;height:48px;border-radius:14px;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:1rem;font-weight:800;
}

/* TESTIMONIALS */
.test-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-bottom:2.5rem}
@media(min-width:840px){.test-grid{grid-template-columns:repeat(3,1fr)}}
.t-card{background:#fff;border:2px solid var(--border);border-radius:16px;overflow:hidden}
.t-card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.t-card .body{padding:1.1rem}
.t-card .stars{color:var(--gold);margin-bottom:.4rem}
.t-card .badge{display:inline-block;background:var(--primary);color:#fff;font-size:.72rem;font-weight:800;padding:.2rem .55rem;border-radius:6px;margin-bottom:.6rem}
.t-card .name{font-weight:800;margin-top:.5rem}
.t-card .city{font-size:.78rem;color:var(--muted)}
.t-mini{display:grid;gap:.8rem;grid-template-columns:1fr;max-width:780px;margin:0 auto}
@media(min-width:720px){.t-mini{grid-template-columns:1fr 1fr}}
.t-mini .card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.1rem;font-size:.92rem}

/* BENEFITS DARK */
.bens{display:grid;gap:.8rem;grid-template-columns:1fr}
@media(min-width:720px){.bens{grid-template-columns:1fr 1fr}}
.bens .b{display:flex;align-items:flex-start;gap:.7rem;background:rgba(255,255,255,.05);border:1px solid rgba(212,167,58,.2);padding:.9rem 1rem;border-radius:14px;transition:.2s}
.bens .b:hover{background:rgba(255,255,255,.1)}
.bens .b .dot{width:26px;height:26px;border-radius:999px;background:var(--gold);color:#000;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 26px}

/* OFFER */
.offer-card{border:2px solid var(--gold);border-radius:20px;background:#fff;overflow:hidden;box-shadow:var(--shadow-elegant)}
.offer-card .head{background:var(--primary);color:#fff;padding:1.4rem;text-align:center}
.offer-card .body{display:grid;gap:2rem;padding:1.6rem}
@media(min-width:840px){.offer-card .body{grid-template-columns:1fr 1fr;padding:2.4rem}}
.offer-card ul{list-style:none;padding:0;margin:0 0 1.2rem}
.offer-card ul li{display:flex;justify-content:space-between;gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.95rem}
.offer-card ul li span.lt{text-decoration:line-through;color:var(--muted)}
.price-box{background:var(--secondary);border-radius:14px;padding:1.2rem;margin-bottom:1rem;text-align:center}
.price-box .small{font-size:.85rem;color:var(--muted)}
.price-box .big{font-size:2.8rem;font-weight:900;color:var(--primary);margin:.2rem 0;line-height:1}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:.8rem;font-size:.78rem;color:var(--muted)}

/* COUNTDOWN */
.countdown{display:flex;justify-content:center;gap:.5rem;margin:1rem 0}
.countdown .box{background:rgba(0,0,0,.85);color:var(--gold);padding:.6rem .9rem;border-radius:10px;border:1px solid rgba(212,167,58,.3);min-width:70px;text-align:center;font-family:'Courier New',monospace}
.countdown .box .v{font-size:1.6rem;font-weight:900;line-height:1}
.countdown .box .l{font-size:.65rem;letter-spacing:.18em;color:rgba(255,255,255,.6);margin-top:.2rem}

/* BONUS */
.bonus-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.bonus{background:#fff;border:2px solid var(--border);border-radius:16px;padding:1.3rem;position:relative;transition:.2s}
.bonus:hover{border-color:var(--gold)}
.bonus .free{position:absolute;top:.7rem;right:.7rem;background:var(--destructive);color:#fff;font-size:.7rem;font-weight:800;padding:.18rem .5rem;border-radius:6px}
.bonus .ic{width:46px;height:46px;border-radius:12px;background:var(--gold);color:#000;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:800;margin-bottom:.8rem}

/* GUARANTEE */
.guarantee{display:flex;flex-direction:column;align-items:center;gap:1.4rem;text-align:center;border:2px solid var(--gold);background:#fff;border-radius:20px;padding:2rem}
@media(min-width:720px){.guarantee{flex-direction:row;text-align:left;padding:2.5rem}}
.guarantee .seal{width:120px;height:120px;border-radius:999px;background:var(--gold);display:flex;align-items:center;justify-content:center;color:#000;font-size:3rem;flex:0 0 120px;box-shadow:var(--shadow-gold)}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:.6rem;max-width:780px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--border);border-radius:14px;padding:.5rem 1.1rem}
.faq summary{cursor:pointer;font-weight:800;padding:.8rem 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--gold)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:.8rem;color:var(--muted)}

/* FOOTER */
footer{background:#000;color:rgba(255,255,255,.7);padding:3rem 0 5rem;font-size:.88rem}
footer .legal{font-size:.78rem;color:rgba(255,255,255,.55);margin-bottom:1rem}
footer .links{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;font-size:.8rem;margin:1rem 0}
footer .links a:hover{color:var(--gold)}

/* STICKY MOBILE CTA */
.sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:60;padding:.7rem;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);border-top:1px solid rgba(212,167,58,.3)}
.sticky-cta .btn-cta{width:100%;font-size:.95rem;padding:.95rem 1rem}
@media(min-width:768px){.sticky-cta{display:none}}

/* Final CTA */
.final{padding:5rem 0}
.final .alert-ic{font-size:2.2rem;color:var(--destructive);text-align:center;display:block;margin-bottom:1rem}

/* Animations */
.fade-up{opacity:0;transform:translateY(18px);animation:fadeUp .8s forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}