/* =============================================
   NERVOCURE — ESTILOS PRINCIPAIS
   Paleta: fundo creme, laranja degradê, botões verdes, alertas amarelos
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&family=Playfair+Display:wght@700;900&display=swap');

/* ── VARIÁVEIS DE COR ── */
:root {
  /* Laranja — cor principal */
  --orange:        #e8820a;
  --orange-mid:    #d4700a;
  --orange-dark:   #b85d05;
  --orange-light:  #f59e3a;
  --orange-grad:   linear-gradient(135deg, #f5a03a 0%, #e8820a 40%, #c06010 100%);

  /* Fundo creme/bege */
  --bg:            #fdf6ec;
  --bg-cream:      #faf3e8;
  --bg-section:    #fff8f0;

  /* Alerta / urgência */
  --yellow:        #f5e300;
  --yellow-dark:   #d4c400;
  --yellow-text:   #1a1a00;

  /* Botões verdes */
  --green:         #3aad3a;
  --green-mid:     #2e9a2e;
  --green-dark:    #1e7a1e;
  --green-grad:    linear-gradient(135deg, #4ec34e 0%, #2d9a2d 100%);

  /* Texto */
  --text:          #3a2000;
  --text-dark:     #2a1500;
  --text-muted:    #7a6040;
  --text-orange:   #8b4500;

  /* Neutros */
  --white:         #ffffff;
  --border:        rgba(232,130,10,.2);
  --shadow-sm:     0 4px 16px rgba(180,80,0,.09);
  --shadow-md:     0 8px 32px rgba(180,80,0,.14);
  --shadow-lg:     0 20px 60px rgba(180,80,0,.22);

  /* Raios */
  --radius-sm:     10px;
  --radius-md:     16px;
  --radius-lg:     22px;
  --radius-pill:   50px;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior: smooth; }
body  {
  font-family: 'Montserrat', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  padding-bottom: 64px;
}
img { max-width:100%; height:auto; display:block; }
a   { text-decoration:none; }

/* ── UTILITÁRIOS ── */
.container   { max-width:960px; margin:0 auto; padding:0 20px; }
.text-center { text-align:center; }
section      { padding:70px 20px; }

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.9rem;
  font-weight: 900;
  text-align: center;
  line-height: 1.25;
  margin-bottom: 36px;
  color: var(--text-dark);
}
.section-title span      { color: var(--orange); }
.section-title.on-orange { color: var(--white); }
.section-title.on-orange span { color: var(--yellow); }

/* ── ANIMAÇÕES ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0);    }
}
@keyframes pulse-green {
  0%,100% { box-shadow: 0 6px 28px rgba(46,154,46,.45); }
  50%      { box-shadow: 0 6px 48px rgba(46,154,46,.75); }
}
@keyframes blink {
  0%,100% { opacity:1; }
  50%      { opacity:.6; }
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-10px); }
}

/* =============================================
   URGENCY BAR — AMARELO
   ============================================= */
.urgency-bar {
  background: var(--yellow);
  color: var(--yellow-text);
  text-align: center;
  padding: 11px 16px;
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: .3px;
  line-height: 1.5;
}

/* =============================================
   HEADER / HERO — FUNDO CREME + PRODUTO À ESQ.
   ============================================= */
header {
  background: var(--bg-cream);
  padding: 36px 20px 56px;
  position: relative;
}

.header-logo-wrap {
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(180,100,0,.15);
}

.header-logo {
  max-width: 200px;
  width: 55%;
  margin: 0 auto;
}

/* Hero dois-colunas */
.hero-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}

.hero-heading {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--orange-dark);
  text-align: center;
  margin-bottom: 30px;
  grid-column: 1 / -1;
}

.hero-product {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  animation: float 4s ease-in-out infinite;
  filter: drop-shadow(0 20px 40px rgba(180,80,0,.2));
}

.hero-right { display:flex; flex-direction:column; gap:14px; }

.hero-subtitle {
  font-size: .88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.hero-benefits { list-style:none; }

.hero-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  font-size: .92rem;
  color: var(--text);
  line-height: 1.5;
  border-bottom: 1px solid rgba(180,100,0,.1);
}

.hero-benefits li:last-child { border-bottom:none; }

.hero-check {
  width: 22px;
  height: 22px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .8rem;
  margin-top: 1px;
}

/* Trust badges abaixo do botão */
.hero-badges {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

.hero-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
}

.hero-badge .badge-icon { font-size: 1.1rem; }

/* Prova social */
.social-proof-bar {
  background: var(--orange);
  color: var(--white);
  text-align: center;
  padding: 12px 16px;
  font-weight: 700;
  font-size: .88rem;
}

/* =============================================
   BOTÕES
   ============================================= */
.btn-cta {
  display: inline-block;
  background: var(--green-grad);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 18px 44px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: pulse-green 2.5s infinite;
  transition: transform .2s;
  text-align: center;
}

.btn-cta:hover { transform: translateY(-3px); }

.btn-cta.block { display:block; width:100%; }

.btn-buy {
  display: block;
  background: var(--green-grad);
  color: var(--white);
  font-weight: 800;
  padding: 15px;
  border-radius: var(--radius-pill);
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: opacity .2s, transform .2s;
  text-align: center;
}

.btn-buy:hover { opacity:.88; transform:translateY(-2px); }

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: var(--white);
  font-weight: 800;
  padding: 16px 36px;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: opacity .2s, transform .2s;
}
.btn-whatsapp:hover { opacity:.9; transform:translateY(-2px); }

/* =============================================
   CAUSES SECTION — FUNDO BRANCO
   ============================================= */
.causes-section { background: var(--white); }

.causes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
  margin-bottom: 40px;
}

.cause-card {
  background: var(--bg-section);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: transform .2s, box-shadow .2s;
}

.cause-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.cause-card img  { width:100%; height:160px; object-fit:cover; }

.cause-card h3 {
  padding: 14px 14px 18px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.45;
}

/* =============================================
   PAIN SECTION — GRADIENTE LARANJA
   ============================================= */
.pain-section {
  background: var(--orange-grad);
  color: var(--white);
}

.pain-section .section-title.on-orange { margin-bottom: 22px; }

.pain-intro {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  max-width: 700px;
  margin: 0 auto 32px;
  line-height: 1.75;
  color: rgba(255,255,255,.9);
}

.pain-list { list-style:none; max-width:700px; margin:0 auto 36px; }

.pain-list li {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 10px;
  font-size: .95rem;
  color: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  gap: 12px;
}

.pain-list li::before { content:'😔'; font-size:1.1rem; flex-shrink:0; }

.pain-product {
  max-width: 300px;
  width: 70%;
  margin: 0 auto 30px;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.25));
  animation: float 4s ease-in-out infinite;
}

/* =============================================
   BENEFITS SECTION — GRADIENTE LARANJA
   ============================================= */
.benefits-section {
  background: var(--orange-grad);
  color: var(--white);
}

.benefits-section .section-title {
  font-size: 1.5rem;
  color: var(--white);
  font-family: 'Montserrat', serif;
  font-weight: 900;
}

/* Layout: benefícios ladeando produto central */
.benefits-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: center;
  margin-bottom: 36px;
}

.benefits-col { display:flex; flex-direction:column; gap:14px; }

.benefit-item {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}

.benefit-item .b-check {
  width: 26px;
  height: 26px;
  background: var(--orange);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .85rem;
}

.benefit-item p {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.45;
}

.benefits-center-img {
  max-width: 260px;
  width: 100%;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,.3));
  animation: float 4s ease-in-out infinite;
}

/* =============================================
   TESTIMONIALS — FUNDO CREME
   ============================================= */
.testimonials-section { background: var(--bg-cream); }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 36px;
}

.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.thumb-wrap {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 16px;
}

.thumb-wrap img { width:100%; height:170px; object-fit:cover; }

.play-btn {
  position: absolute;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  width:52px; height:52px;
  background: rgba(232,130,10,.88);
  border-radius: 50%;
  display: flex; align-items:center; justify-content:center;
  font-size: 1.3rem;
  color: #fff;
}

.author-photo {
  width:64px; height:64px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 10px;
  border:3px solid var(--orange);
}

.author-name { font-weight:800; font-size:.95rem; color:var(--orange-dark); margin-bottom:6px; }
.stars       { color: var(--orange); font-size:.95rem; margin-bottom:8px; }
.testimonial-card p { font-size:.85rem; color:var(--text-muted); line-height:1.65; }

/* =============================================
   DOCTOR SECTION — FUNDO BRANCO
   ============================================= */
.doctor-section { background: var(--white); }

.doctor-box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: center;
  max-width: 820px;
  margin: 0 auto;
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow-md);
}

.doctor-photo {
  width:180px; height:180px;
  border-radius:50%;
  object-fit:cover;
  border:5px solid var(--orange);
  flex-shrink:0;
}

.doctor-content h2 {
  font-size:1.1rem;
  font-weight:800;
  color:var(--orange-dark);
  margin-bottom:14px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.doctor-content blockquote {
  font-size:.92rem;
  color:var(--text-muted);
  line-height:1.78;
  font-style:italic;
  border-left:4px solid var(--orange);
  padding-left:16px;
  margin-bottom:16px;
}

.doctor-signature { max-width:160px; margin-top:10px; }

/* =============================================
   INGREDIENTS — GRADIENTE LARANJA
   ============================================= */
.ingredients-section { background: var(--orange-grad); color:var(--white); }

.ingredients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 22px;
  margin-bottom: 36px;
}

.ingredient-card {
  /* make cards transparent to avoid white circles over the orange gradient */
  background: transparent;
  /* keep a subtle border for structure, adjust color if needed */
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius-lg);
  padding: 30px 22px;
  text-align: center;
  transition: transform .2s, background .2s;
}

.ingredient-card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,.2);
}

.ingredient-card img {
  width:80px; height:80px;
  object-fit:contain;
  margin:0 auto 16px;
  /* remove color inversion so transparent backgrounds stay transparent */
  filter: none;
  background: transparent;
}

.ingredient-card h3 {
  font-size:.9rem;
  font-weight:800;
  color:var(--yellow);
  margin-bottom:10px;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.ingredient-card p {
  font-size:.87rem;
  color:rgba(255,255,255,.88);
  line-height:1.68;
}

/* =============================================
   ANVISA — FUNDO CREME
   ============================================= */
.anvisa-section { background: var(--bg-cream); }

.anvisa-box {
  max-width:740px;
  margin:0 auto;
  text-align:center;
}

.anvisa-box p {
  font-size:.97rem;
  color:var(--text-muted);
  line-height:1.82;
  margin-bottom:30px;
}

.anvisa-product {
  max-width:280px;
  width:72%;
  margin:0 auto 30px;
  filter:drop-shadow(0 16px 36px rgba(180,80,0,.2));
  animation:float 4s ease-in-out infinite;
}

/* =============================================
   GUARANTEE — GRADIENTE LARANJA
   ============================================= */
.guarantee-section {
  background: var(--orange-grad);
  color: var(--white);
  text-align:center;
}

.guarantee-badge {
  max-width:220px;
  width:56%;
  margin:0 auto 28px;
}

.guarantee-text {
  max-width:650px;
  margin:0 auto 30px;
  font-size:.97rem;
  line-height:1.82;
  color:rgba(255,255,255,.9);
}

/* =============================================
   PRICING — FUNDO BRANCO
   ============================================= */
.pricing-section { background: var(--white); }

.stock-alert {
  background: var(--yellow);
  color: var(--yellow-text);
  text-align:center;
  padding:14px 20px;
  border-radius:var(--radius-sm);
  font-weight:800;
  font-size:1.05rem;
  margin-bottom:36px;
  animation:blink 2s infinite;
}

.pricing-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:20px;
  margin-bottom:36px;
}

.pricing-card {
  background: var(--bg-section);
  border-radius: var(--radius-lg);
  padding: 28px 18px 24px;
  text-align:center;
  box-shadow: var(--shadow-md);
  border: 2px solid var(--border);
  position:relative;
  transition: transform .22s, border-color .22s;
  display:flex; flex-direction:column; gap:6px;
}

.pricing-card:hover {
  transform:translateY(-5px);
  border-color:var(--orange);
}

.pricing-card.featured {
  border-color: var(--orange);
  background: linear-gradient(160deg, #fff8f0 0%, #fdf0e0 100%);
  transform:scale(1.03);
  z-index:1;
}

.pricing-card.featured::before {
  content:'⭐ MAIS VENDIDO';
  position:absolute;
  top:-15px; left:50%;
  transform:translateX(-50%);
  background: var(--orange-grad);
  color:var(--white);
  font-size:.68rem;
  font-weight:900;
  padding:5px 16px;
  border-radius:50px;
  white-space:nowrap;
}

.pricing-card .plan-label   { font-size:.72rem; font-weight:700; text-transform:uppercase; color:#bbb; letter-spacing:.5px; }
.pricing-card .plan-extra   { font-size:.82rem; font-weight:800; color:var(--orange); }
.pricing-card .plan-img     { max-width:130px; width:78%; margin:10px auto; }
.pricing-card .plan-desc    { font-size:.87rem; color:var(--text-muted); font-weight:600; }
.pricing-card .plan-installments { font-size:.82rem; color:#bbb; }
.pricing-card .plan-price   { font-size:1.5rem; font-weight:900; color:var(--text-dark); }
.pricing-card .plan-price strong { color:var(--orange-dark); }
.pricing-card .plan-full    { font-size:.78rem; color:#bbb; }
.pricing-card .plan-shipping.free { font-size:.82rem; font-weight:700; color:var(--green); }
.pricing-card .plan-shipping.paid { font-size:.82rem; font-weight:700; color:#c00; }
.pricing-card .frete-img    { max-width:100px; margin:2px auto; }
.pricing-card .arrival      { font-size:.76rem; color:var(--text-muted); font-weight:600; margin-bottom:10px; }

.pricing-note {
  text-align:center;
  font-size:.8rem;
  color:var(--text-muted);
  margin-top:10px;
}

.safe-img {
  max-width:420px;
  width:90%;
  margin:28px auto 0;
}

/* =============================================
   SUPORTE — FUNDO CREME
   ============================================= */
.support-section { background:var(--bg-cream); text-align:center; }

.support-section .wa-img { max-width:120px; margin:0 auto 20px; }

.support-section p {
  max-width:640px;
  margin:0 auto 28px;
  font-size:.97rem;
  color:var(--text-muted);
  line-height:1.82;
}

/* =============================================
   FAQ — FUNDO BRANCO
   ============================================= */
.faq-section { background:var(--white); }

.faq-item {
  background:var(--bg-section);
  border-radius:var(--radius-md);
  margin-bottom:12px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
}

.faq-question {
  padding:18px 22px;
  cursor:pointer;
  font-weight:700;
  font-size:.97rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--text-dark);
  user-select:none;
}

.faq-icon {
  font-size:1.4rem;
  color:var(--orange);
  transition:transform .3s;
  flex-shrink:0;
  margin-left:10px;
}

.faq-item.open .faq-icon { transform:rotate(45deg); }

.faq-answer {
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease, padding .3s;
  padding:0 22px;
  color:var(--text-muted);
  font-size:.92rem;
  line-height:1.78;
}

.faq-item.open .faq-answer { max-height:400px; padding:0 22px 20px; }

/* =============================================
   WARNING — FUNDO AMARELO SUAVE
   ============================================= */
.warning-section {
  background:#fffde7;
  border-top:4px solid var(--orange);
  border-bottom:4px solid var(--orange);
  padding:28px 20px;
  text-align:center;
}

.warning-section .warn-img {
  max-width:320px; width:80%;
  margin:0 auto 16px;
}

.warning-section p {
  font-size:.95rem;
  font-weight:700;
  color:var(--text-dark);
  max-width:700px;
  margin:0 auto 8px;
  line-height:1.65;
}

.warning-section .anvisa-cert {
  font-size:.82rem;
  color:var(--text-muted);
  max-width:700px;
  margin:0 auto;
}

/* =============================================
   FOOTER — MARROM ESCURO
   ============================================= */
footer {
  background: #1a0d00;
  color:rgba(255,255,255,.5);
  text-align:center;
  padding:48px 20px;
  font-size:.78rem;
  line-height:1.9;
}

.footer-payment-img  { max-width:320px; margin:10px auto 18px; }
.footer-secure-img   { max-width:180px; margin:0 auto 18px; }
.footer-correios-img { max-width:140px; margin:0 auto 14px; }

.footer-links {
  display:flex; flex-wrap:wrap;
  justify-content:center; gap:12px; margin:14px 0;
}

.footer-links a { color:var(--orange-light); font-size:.78rem; }
.footer-links a:hover { text-decoration:underline; }

.footer-brand { color:var(--orange-light); font-weight:700; }
.footer-legal {
  max-width:740px; margin:16px auto 0;
  font-size:.7rem; color:rgba(255,255,255,.3);
}

/* =============================================
   STICKY CTA — LARANJA
   ============================================= */
.sticky-cta {
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:999;
  background: var(--orange-grad);
  text-align:center;
  padding:14px 20px;
  box-shadow:0 -4px 20px rgba(180,80,0,.4);
  display:none;
}

.sticky-cta a {
  color:var(--white);
  font-weight:900;
  font-size:.97rem;
  text-transform:uppercase;
  letter-spacing:.8px;
}

/* =============================================
   RESPONSIVE — TABLET (≤ 768px)
   ============================================= */
@media (max-width:768px) {
  .section-title { font-size:1.55rem; }
  .hero-heading  { font-size:1.65rem; }

  .hero-cols {
    grid-template-columns:1fr;
    text-align:center;
  }

  .hero-heading { grid-column:1; }

  .hero-benefits li { text-align:left; }

  .benefits-layout {
    grid-template-columns: 1fr;
  }

  .benefits-center-img { max-width:220px; margin:0 auto; }

  .doctor-box {
    grid-template-columns:1fr;
    text-align:center;
    padding:28px 20px;
  }

  .doctor-photo       { margin:0 auto; }
  .doctor-content blockquote { text-align:left; }

  .causes-grid       { grid-template-columns:repeat(2,1fr); }
  .testimonials-grid { grid-template-columns:1fr; }
  .ingredients-grid  { grid-template-columns:1fr; }
  .pricing-grid      { grid-template-columns:repeat(2,1fr); }
  .pricing-card.featured { transform:none; }
}

/* =============================================
   RESPONSIVE — MOBILE (≤ 480px)
   ============================================= */
@media (max-width:480px) {
  section { padding:48px 16px; }

  .hero-heading  { font-size:1.4rem; }
  .section-title { font-size:1.3rem; margin-bottom:22px; }

  .btn-cta  { font-size:.9rem; padding:15px 26px; }
  .btn-buy  { font-size:.88rem; }

  .causes-grid       { grid-template-columns:1fr 1fr; }
  .benefits-layout   { grid-template-columns:1fr; }
  .pricing-grid      { grid-template-columns:1fr; }
  .pricing-card.featured { transform:none; }

  .doctor-photo      { width:120px; height:120px; }
  .hero-badges       { gap:10px; }
}