/*
Theme Name: Meu Site Original
Author: Seu Nome
Description: Tema migrado de HTML estático
Version: 1.0
*/

:root{
  --bg:#1a1c2e;
  --fg:#fafaf7;
  --card:#252840;
  --card-2:#2d3050;
  --border:#3a3d5c;
  --muted:#a8aac4;
  --orange:#f08a3e;
  --orange-strong:#e5732a;
  --red:#ff4d4d;
  --green:#2ecc71;
  --light-bg:#ffffff;
  --light-fg:#171717;
  --light-muted:#525252;
  --light-border:#e5e5e5;
  --soft-bg:#1f2236;
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0;border-color:var(--border)}
html,body{font-family:'Montserrat',system-ui,sans-serif;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.01em;line-height:1.15}

/* layout */
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.container.narrow{max-width:760px}
.container.wide{max-width:1200px}
.section{padding:32px 0}
@media(min-width:768px){.section{padding:48px 0}}
.section-light{background:var(--light-bg);color:var(--light-fg)}
.section-light .muted{color:var(--light-muted)}
.section-light h1,.section-light h2,.section-light h3{color:var(--light-fg)}
.section-light.bordered{border-top:1px solid var(--light-border);border-bottom:1px solid var(--light-border)}
.section-soft{background:rgba(37,40,64,.4);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section-card{background:var(--card)}
.section-card.bordered{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

.center{text-align:center}
.mt{margin-top:20px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mt5{margin-top:20px}.mt6{margin-top:24px}
.small{font-size:14px}.small-md{font-size:15px}.xsmall{font-size:12px}
.bold{font-weight:800}
.muted{color:var(--muted)}
.text-orange{color:var(--orange)}
.text-green{color:var(--green)}
.strike{text-decoration:line-through;color:var(--red) !important}
.narrow-p{max-width:640px;margin-left:auto;margin-right:auto}

/* topbar */
.topbar{background:var(--orange);color:#fff;text-align:center;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.06em;padding:10px 16px}

/* HERO */
.hero{padding-top:24px;padding-bottom:32px}
.h1{font-size:clamp(24px,4.5vw,48px);padding-top:5px}
.h2{font-size:clamp(22px,3.4vw,36px)}
.lead{margin-top:20px;font-size:17px}
.underline-orange{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:4px;text-underline-offset:6px}
.hero-img-wrap{position:relative;margin-top:40px}
.hero-glow{position:absolute;inset:0;background:rgba(240,138,62,.1);filter:blur(60px);border-radius:9999px}
.hero-img{position:relative;margin:0 auto;max-width:640px;width:100%}
.cta-wrap{margin-top:40px;text-align:center}

/* checklist */
.checklist{list-style:none;max-width:560px;margin:40px auto 0;text-align:left;display:flex;flex-direction:column;gap:10px;font-size:15px}
.checklist.tight{margin-top:40px}
.checklist li{display:flex;gap:12px;align-items:flex-start}
.check{flex:0 0 auto;width:18px;height:18px;margin-top:3px;border-radius:4px;background:transparent;position:relative}
.check::before{content:"";position:absolute;left:1px;top:3px;width:14px;height:8px;border-left:3px solid var(--orange);border-bottom:3px solid var(--orange);transform:rotate(-45deg)}

/* CTA */
.cta{display:inline-flex;align-items:center;justify-content:center;background:var(--orange);color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:14px;padding:16px 26px;box-shadow:0 14px 30px -10px rgba(240,138,62,.6);transition:transform .15s}
.cta:hover{transform:scale(1.02)}
.cta-lg{padding:20px 32px;font-size:16px}
.cta.full{display:flex;width:100%}

/* video */
.video-wrap{margin:32px auto 0;max-width:340px;width:100%}

/* grid */
.grid{display:grid;gap:20px}
.g-3{grid-template-columns:1fr}
@media(min-width:640px){.g-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.g-3{grid-template-columns:repeat(3,1fr)}}

/* cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px;height:100%}
.card h3{font-size:18px;margin-bottom:10px}
.card.light{background:#fff;border-color:var(--light-border)}
.card.light p{color:var(--light-muted)}

/* eyebrow */
.eyebrow{color:var(--orange);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}

/* bonus */
.bonus{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;height:100%}
.bonus-img{background:rgba(240,138,62,.15);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:16px}
.bonus-img img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 14px 24px rgba(0,0,0,.4))}
.bonus-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.bonus-body h3{font-size:18px;line-height:1.3}
.bonus-body p{font-size:14px;color:var(--muted);flex:1}

/* plans */
.plans{display:grid;gap:32px;margin-top:28px;align-items:start}
@media(min-width:768px){.plans{grid-template-columns:1fr 1fr;gap:40px}}
.plan{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:28px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.plan-featured{border:2px solid var(--orange);position:relative}
.plan-badge{position:absolute;top:-16px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:8px 16px;border-radius:9999px;white-space:nowrap}
.plan-img{margin:20px auto 0;max-height:220px;object-fit:contain}
.save-box{margin-top:24px;background:rgba(240,138,62,.15);border:1px solid var(--orange);border-radius:12px;padding:12px;text-align:center;font-weight:700;font-size:14px}
.price-value{font-size:44px;font-weight:800;color:var(--green) !important;margin-top:4px}
.plans .cta{font-size:14px;padding:14px 20px}

/* seal */
.seal{display:inline-flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:9999px;background:var(--orange);color:#fff;font-weight:800;font-size:24px}
.seal span{font-size:14px;margin-left:4px;font-weight:600}

/* steps */
.step-num{margin:0 auto;width:56px;height:56px;border-radius:9999px;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px}
.step h3{margin-top:18px;font-size:17px;text-transform:uppercase}
.step p{margin-top:8px;font-size:14px}

/* faq */
.faq{margin-top:40px}
.faq details{border-bottom:1px solid var(--border);padding:0}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq .plus{color:var(--orange);font-size:24px;font-weight:300;transition:transform .2s}
.faq details[open] .plus{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--muted);font-size:14px;line-height:1.7}

/* footer */
.footer{background:var(--card);border-top:1px solid var(--border);padding:20px}
.footer p{margin-top:14px}
.footer-links a{margin:0 8px}
.footer-links a:hover{color:var(--orange)}

/* Modal de Desconto */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 11, 20, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: modalFadeIn 0.3s ease-out forwards;
}

.modal-container {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  max-width: 540px;
  width: 100%;
  padding: 32px;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  animation: modalScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  max-height: 90vh;
  overflow-y: auto;
}

/* Close Button */
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color 0.15s;
}
.modal-close:hover {
  color: var(--fg);
}

/* Modal Header & Badge */
.modal-header {
  text-align: center;
  margin-bottom: 16px;
}
.modal-badge {
  display: inline-block;
  background: rgba(240, 138, 62, 0.15);
  border: 1px solid var(--orange);
  color: var(--orange);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 6px 14px;
  border-radius: 9999px;
}

/* Modal Body */
.modal-body {
  text-align: center;
}
.modal-title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.25;
  margin-bottom: 12px;
  color: var(--fg);
}
.modal-subtitle {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 20px;
}
.highlight-orange {
  color: var(--orange);
  font-weight: 800;
}

/* Mockup image inside modal */
.modal-img-wrap {
  margin: 16px auto;
  max-width: 220px;
  width: 100%;
}
.modal-img {
  margin: 0 auto;
  max-height: 140px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
}

/* Scarcity styling */
.modal-scarcity {
  margin-top: 16px;
  padding: 14px;
  background: rgba(37, 40, 64, 0.6);
  border: 1px dashed var(--border);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.scarcity-vagas {
  color: #fff;
  font-weight: 700;
  margin-bottom: 6px;
}
.scarcity-desc {
  font-size: 13px;
}

/* Modal Action buttons */
.modal-actions {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: 100%;
}
.modal-actions .cta {
  width: 100%;
  text-align: center;
  font-size: 15px;
  padding: 16px 20px;
}
.modal-btn-secondary {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.15s;
  padding: 8px;
  text-align: center;
}
.modal-btn-secondary:hover {
  color: var(--fg);
}

/* Animations */
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* Premium Urgency Box */
.urgency-box {
  background: linear-gradient(135deg, #ff334b 0%, #d60c26 100%);
  color: #ffffff;
  padding: 48px 32px;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(214, 12, 38, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  margin: 20px 0;
  position: relative;
  overflow: hidden;
}

/* Subtle glow animation for the urgency box to make it feel alive */
.urgency-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.urgency-box h2 {
  color: #ffffff !important;
  font-size: clamp(20px, 3.2vw, 30px);
  line-height: 1.3;
  margin-bottom: 16px;
}

.urgency-box h2 span.text-yellow {
  color: #ffe082 !important;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
}

.urgency-box p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.urgency-box p strong {
  color: #ffffff;
}

.urgency-box .cta-wrap {
  margin-top: 32px;
}

.urgency-box .cta {
  background: #ffffff;
  color: #d60c26;
  box-shadow: 0 10px 25px rgba(214, 12, 38, 0.4);
}

.urgency-box .cta:hover {
  background: #fff0f2;
  transform: scale(1.03);
}

/* Section Dark Premium ("Para quem é") */
.section-dark-premium {
  background: linear-gradient(180deg, #121424 0%, #1a1c2e 100%);
  color: var(--fg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-dark-premium h2 {
  color: var(--fg) !important;
}

.card-dark-premium {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-dark-premium:hover {
  transform: translateY(-4px);
  border-color: var(--orange);
  box-shadow: 0 10px 25px rgba(240, 138, 62, 0.15);
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .modal-container {
    padding: 24px 16px;
    border-radius: 20px;
  }
  .modal-title {
    font-size: 19px;
  }
  .modal-subtitle {
    font-size: 14px;
  }
  .modal-scarcity {
    font-size: 13px;
    padding: 10px;
  }
  .urgency-box {
    padding: 32px 20px;
  }
}