/*

   VINGuide Presell — styles.css v20260305

   shop.amazoniaverdeshop.com

   Design: Clean Institutional | Mobile-First | Inter font

*/

/* ================================================

   1. DESIGN TOKENS

================================================ */

:root {

  --green-1:    #2d8a2d;

  --green-2:    #3aaa3a;

  --green-3:    #4dc94d;

  --green-bg:   #f0faf0;

  --red-warn:   #dc3545;

  --amber:      #f59e0b;

  --bg:         #ffffff;

  --bg-alt:     #f7f8fa;

  --bg-dark:    #0f2a0f;

  --text:       #111827;

  --text-mid:   #374151;

  --text-muted: #6b7280;

  --line:       #e5e7eb;

  --font:       'Inter', system-ui, -apple-system, sans-serif;

  --section-py: 64px;

  --container:  1140px;

  --radius:     12px;

  --radius-sm:  8px;

  --radius-lg:  20px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);

  --shadow-md:  0 4px 16px rgba(0,0,0,.10);

  --shadow-lg:  0 10px 32px rgba(0,0,0,.13);

}

/* ================================================

   2. RESET & BASE

================================================ */

*, *::before, *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

html { scroll-behavior: smooth; }

body {

  font-family: var(--font);

  font-size: 16px;

  line-height: 1.6;

  color: var(--text);

  background: var(--bg);

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  padding-bottom: 80px;

}

img { max-width: 100%; height: auto; display: block; }

a   { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 { line-height: 1.15; font-weight: 800; }

p   { color: var(--text-mid); }

details summary { cursor: pointer; }

details summary::-webkit-details-marker { display: none; }

/* ================================================

   3. LAYOUT

================================================ */

.container {

  width: min(var(--container), calc(100% - 40px));

  margin: 0 auto;

}

.section { padding: var(--section-py) 0; }

.section-alt {

  background: var(--bg-alt);

  border-top: 1px solid var(--line);

  border-bottom: 1px solid var(--line);

}

/* ================================================

   4. DISCLOSURE STRIP — MOVIDO PARA FOOTER

   (Removido do topo, agora em .disclosure-strip-footer)

================================================ */

.disclosure-strip-footer {

  background: #fffbeb;

  border-bottom: 1px solid #fde68a;

  padding: 8px 0;

}

.disclosure-text {

  font-size: 12px;

  color: #92400e;

  text-align: center;

  margin: 0;

}

.disclosure-link {

  color: #92400e;

  text-decoration: underline;

  font-weight: 600;

}

/* ================================================

   5. HEADER

================================================ */

.site-header {

  position: sticky;

  top: 0;

  z-index: 100;

  background: #fff;

  border-bottom: 1px solid var(--line);

  box-shadow: var(--shadow-sm);

}

.header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 14px 0;

}

.brand {

  display: flex;

  align-items: center;

  gap: 10px;

  flex-shrink: 0;

}

.brand-icon {

  width: 40px; height: 40px;

  border-radius: var(--radius-sm);

  background: var(--green-bg);

  border: 1px solid rgba(45,138,45,.20);

  display: grid;

  place-items: center;

  font-size: 18px;

}

.brand-text strong {

  display: block;

  font-size: 15px;

  font-weight: 800;

  color: var(--text);

}

.brand-text span {

  display: block;

  font-size: 11px;

  color: var(--text-muted);

  margin-top: 1px;

}

.header-nav {

  display: flex;

  gap: 4px;

}

.header-nav a {

  font-size: 14px;

  font-weight: 600;

  color: var(--text-mid);

  padding: 7px 12px;

  border-radius: var(--radius-sm);

  transition: background .15s ease, color .15s ease;

}

.header-nav a:hover {

  background: var(--bg-alt);

  color: var(--text);

}

/* ================================================

   6. BUTTONS

================================================ */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  font-family: var(--font);

  font-weight: 700;

  text-decoration: none;

  border: none;

  cursor: pointer;

  border-radius: var(--radius-sm);

  transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;

}

/* Header outline button */

.btn-outline {

  background: transparent;

  border: 2px solid var(--green-2);

  color: var(--green-1);

  font-size: 14px;

  padding: 8px 16px;

  font-weight: 700;

}

.btn-outline:hover { background: var(--green-bg); }

/* Primary CTA — verde sólido */

.btn-cta-primary {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, var(--green-1), var(--green-2));

  color: #fff;

  font-size: 16px;

  font-weight: 800;

  padding: 14px 28px;

  border-radius: var(--radius-sm);

  border: none;

  cursor: pointer;

  text-decoration: none;

  box-shadow: 0 4px 16px rgba(45,138,45,.30);

  transition: filter .2s ease, transform .1s ease, box-shadow .2s ease;

}

.btn-cta-primary:hover {

  filter: brightness(1.06);

  box-shadow: 0 6px 24px rgba(45,138,45,.45);

}

.btn-cta-primary:active { transform: translateY(1px); }

/* Hero CTA — grande pulsante */

.btn-cta-hero {

  display: block;

  width: 100%;

  text-align: center;

  background: linear-gradient(135deg, var(--green-1), var(--green-2));

  color: #fff;

  font-size: 17px;

  font-weight: 900;

  letter-spacing: .2px;

  padding: 18px 28px;

  border-radius: var(--radius-sm);

  border: none;

  cursor: pointer;

  text-decoration: none;

  text-transform: uppercase;

  box-shadow: 0 6px 24px rgba(45,138,45,.35);

  animation: pulse-green 2.6s ease-in-out infinite;

  transition: filter .2s ease, transform .1s ease;

}

.btn-cta-hero:hover {

  filter: brightness(1.06);

  box-shadow: 0 8px 32px rgba(45,138,45,.55);

}

.btn-cta-hero:active { transform: translateY(2px); }

.btn-cta-xl {

  font-size: 18px;

  padding: 22px 32px;

  max-width: 640px;

  margin: 0 auto;

}

@keyframes pulse-green {

  0%   { box-shadow: 0 6px 24px rgba(45,138,45,.35); }

  50%  { box-shadow: 0 6px 40px rgba(45,138,45,.65); }

  100% { box-shadow: 0 6px 24px rgba(45,138,45,.35); }

}

/* ================================================

   7. EYEBROW

================================================ */

.eyebrow {

  display: inline-block;

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .5px;

  color: var(--green-1);

  background: var(--green-bg);

  border: 1px solid rgba(45,138,45,.22);

  padding: 6px 12px;

  border-radius: 999px;

}

.eyebrow-wrap { margin-bottom: 14px; }

.eyebrow--light {

  color: rgba(255,255,255,.85);

  background: rgba(255,255,255,.15);

  border-color: rgba(255,255,255,.25);

}

/* ================================================

   8. SECTION HEADS

================================================ */

.section-head {

  text-align: center;

  margin-bottom: 40px;

}

.section-head .eyebrow { margin-bottom: 12px; }

.section-title {

  font-size: 32px;

  font-weight: 900;

  color: var(--text);

  margin-bottom: 12px;

}

.section-title em {

  font-style: normal;

  color: var(--red-warn);

}

.section-sub {

  font-size: 17px;

  color: var(--text-muted);

  max-width: 600px;

  margin: 0 auto;

}

/* ================================================

   9. HERO

================================================ */

.hero {

  padding: 48px 0 40px;

  background:

    radial-gradient(900px 400px at 15% 0%,

      rgba(45,138,45,.07), transparent 55%),

    radial-gradient(900px 400px at 85% 0%,

      rgba(58,170,58,.05), transparent 60%),

    #fff;

}

.hero-grid {

  display: grid;

  grid-template-columns: 1.15fr .85fr;

  gap: 40px;

  align-items: center;

}

.hero-title {

  font-size: 42px;

  font-weight: 900;

  line-height: 1.1;

  color: var(--text);

  margin: 0 0 16px;

}

.highlight { color: var(--red-warn); }

.hero-lead {

  font-size: 18px;

  line-height: 1.65;

  color: var(--text-mid);

  margin: 0 0 28px;

  max-width: 68ch;

}

.hero-cta-block { margin-bottom: 28px; }

.hero-cta-note {

  font-size: 13px;

  color: var(--text-muted);

  margin-top: 10px;

  text-align: center;

}

.trust-row {

  display: flex;

  flex-wrap: wrap;

  gap: 16px;

}

.trust-item {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 13px;

  font-weight: 600;

  color: var(--text-mid);

}

.trust-icon { font-size: 16px; }

/* Hero visual */

.hero-image-card {

  position: relative;

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-lg);

  border: 1px solid var(--line);

}

.hero-alert-badge {

  position: absolute;

  top: 14px;

  left: 50%;

  transform: translateX(-50%);

  background: var(--red-warn);

  color: #fff;

  font-size: 12px;

  font-weight: 700;

  padding: 6px 14px;

  border-radius: 999px;

  white-space: nowrap;

  z-index: 2;

  box-shadow: 0 4px 12px rgba(220,53,69,.40);

}

.hero-img {

  width: 100%;

  height: 360px;

  object-fit: cover;

  display: block;

}

/* ================================================

   10. RISK GRID

================================================ */

.risk-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;

  margin-bottom: 36px;

}

.risk-card {

  background: #fff;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  padding: 24px;

  box-shadow: var(--shadow-sm);

  transition: transform .2s ease, box-shadow .2s ease;

}

.risk-card:hover {

  transform: translateY(-3px);

  box-shadow: var(--shadow-md);

}

.risk-icon {

  font-size: 32px;

  margin-bottom: 12px;

}

.risk-card h3 {

  font-size: 17px;

  font-weight: 800;

  color: var(--text);

  margin-bottom: 8px;

}

.risk-card p {

  font-size: 14px;

  line-height: 1.65;

  color: var(--text-muted);

}

/* Bridge CTA */

.section-cta-bridge {

  text-align: center;

  padding: 32px 24px;

  background: linear-gradient(135deg,

    rgba(45,138,45,.06), rgba(58,170,58,.04));

  border: 2px solid rgba(45,138,45,.22);

  border-radius: var(--radius);

}

.bridge-label {

  font-size: 16px;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 16px;

}

/* ================================================

   11. FEATURES GRID

================================================ */

.features-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 16px;

  margin-bottom: 48px;

}

.feature-card {

  background: #fff;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  padding: 20px 16px;

  text-align: center;

  box-shadow: var(--shadow-sm);

  transition: transform .2s ease, box-shadow .2s ease;

}

.feature-card:hover {

  transform: translateY(-3px);

  box-shadow: var(--shadow-md);

}

.feature-icon {

  width: 52px; height: 52px;

  background: var(--green-bg);

  border-radius: var(--radius-sm);

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 12px;

}

.feature-icon img {

  width: 28px; height: 28px;

  object-fit: contain;

}

.feature-card h3 {

  font-size: 14px;

  font-weight: 700;

  color: var(--text);

  margin-bottom: 6px;

}

.feature-card p {

  font-size: 13px;

  line-height: 1.55;

  color: var(--text-muted);

}

/* ================================================

   12. STEPS

================================================ */

.steps-block {

  background: #fff;

  border: 1px solid var(--line);

  border-radius: var(--radius-lg);

  padding: 36px 32px;

  box-shadow: var(--shadow-sm);

}

.steps-title {

  font-size: 22px;

  font-weight: 800;

  text-align: center;

  margin-bottom: 28px;

  color: var(--text);

}

.steps-row {

  display: flex;

  align-items: flex-start;

  gap: 16px;

}

.step-item {

  flex: 1;

  text-align: center;

}

.step-number {

  width: 48px; height: 48px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--green-1), var(--green-2));

  color: #fff;

  font-size: 20px;

  font-weight: 900;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 12px;

  box-shadow: 0 4px 12px rgba(45,138,45,.35);

}

.step-item h4 {

  font-size: 15px;

  font-weight: 700;

  color: var(--text);

  margin-bottom: 6px;

}

.step-item p {

  font-size: 13px;

  color: var(--text-muted);

  line-height: 1.55;

}

.step-arrow {

  font-size: 28px;

  font-weight: 900;

  color: var(--green-2);

  flex-shrink: 0;

  margin-top: 12px;

}

/* ================================================

   13. REVIEWS

================================================ */

.reviews-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

}

.review-card {

  background: #fff;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  padding: 24px;

  box-shadow: var(--shadow-sm);

}

.review-stars {

  color: var(--amber);

  font-size: 18px;

  letter-spacing: 2px;

  margin-bottom: 12px;

}

.review-text {

  font-size: 15px;

  line-height: 1.65;

  color: var(--text-mid);

  font-style: italic;

  margin-bottom: 16px;

}

.review-author {

  display: flex;

  align-items: center;

  gap: 10px;

}

.review-avatar {

  width: 36px; height: 36px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--green-1), var(--green-2));

  color: #fff;

  font-size: 15px;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}

.review-author strong {

  display: block;

  font-size: 14px;

  color: var(--text);

}

.review-author span {

  font-size: 12px;

  color: var(--text-muted);

}

/* ================================================

   14. CTA SECTION (dark background)

================================================ */

.cta-section {

  background: linear-gradient(135deg, #0f2a0f, #1a4a1a);

}

.cta-block {

  text-align: center;

  max-width: 700px;

  margin: 0 auto;

}

.cta-title {

  font-size: 34px;

  font-weight: 900;

  color: #fff;

  line-height: 1.15;

  margin: 12px 0 14px;

}

.cta-sub {

  font-size: 17px;

  color: rgba(255,255,255,.75);

  margin-bottom: 28px;

}

.cta-note {

  font-size: 13px;

  color: rgba(255,255,255,.60);

  margin-top: 14px;

  display: block;

}

/* Trust seals */

.seal-row {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 12px;

  margin-top: 24px;

}

.seal {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 4px;

  background: rgba(255,255,255,.10);

  border: 1px solid rgba(255,255,255,.18);

  border-radius: var(--radius-sm);

  padding: 10px 16px;

  min-width: 90px;

}

.seal-icon { font-size: 22px; }

.seal-label {

  font-size: 11px;

  font-weight: 700;

  color: rgba(255,255,255,.80);

  text-align: center;

}

/* ================================================

   15. FAQ — Accordion nativo com <details>

================================================ */

.faq-list {

  max-width: 720px;

  margin: 0 auto;

  display: grid;

  gap: 10px;

}

.faq-item {

  background: #fff;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  padding: 16px 20px;

  transition: box-shadow .2s ease, border-color .2s ease;

}

.faq-item:hover { box-shadow: var(--shadow-sm); }

.faq-item[open] {

  border-color: rgba(45,138,45,.30);

  box-shadow: 0 4px 16px rgba(45,138,45,.08);

}

.faq-item summary {

  font-size: 16px;

  font-weight: 700;

  color: var(--text);

  list-style: none;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

}

.faq-item summary::after {

  content: "+";

  font-size: 22px;

  font-weight: 900;

  color: var(--green-1);

  transition: transform .2s ease;

  flex-shrink: 0;

}

.faq-item[open] summary::after { content: "−"; }

.faq-item p {

  margin-top: 12px;

  font-size: 15px;

  line-height: 1.65;

  color: var(--text-muted);

}

/* ================================================

   16. DISCLAIMER SECTION

================================================ */

.section-disclaimer {

  background: #fff8f0;

  border-top: 2px solid #fed7aa;

  border-bottom: 2px solid #fed7aa;

}

.disclaimer-box {

  max-width: 800px;

  margin: 0 auto;

}

.disclaimer-box h3 {

  font-size: 16px;

  font-weight: 800;

  color: #92400e;

  margin-bottom: 16px;

}

.disclaimer-box p {

  font-size: 13px;

  line-height: 1.70;

  color: #78350f;

  margin-bottom: 12px;

}

.disclaimer-box p:last-child { margin-bottom: 0; }

/* ================================================

   17. FOOTER

================================================ */

.site-footer {

  background: var(--bg-alt);

  border-top: 1px solid var(--line);

  padding: 32px 0;

}

.footer-inner {

  display: flex;

  flex-direction: column;

  gap: 16px;

}

.footer-brand strong {

  font-size: 15px;

  font-weight: 800;

  color: var(--text);

}

.footer-sub {

  font-size: 12px;

  color: var(--text-muted);

  margin-top: 4px;

}

.footer-legal p {

  font-size: 12px;

  line-height: 1.6;

  color: var(--text-muted);

  margin-bottom: 6px;

}

.footer-legal a {

  color: var(--green-1);

  text-decoration: underline;

}

.footer-tiny {

  font-size: 11px !important;

  color: #9ca3af !important;

}

/* ================================================

   18. STICKY MOBILE CTA

================================================ */

.sticky-cta {

  display: none;

  position: fixed;

  bottom: 0; left: 0; right: 0;

  z-index: 999;

  padding: 10px 16px 16px;

  background: linear-gradient(to top,

    rgba(0,0,0,.95), rgba(0,0,0,.80));

  border-top: 2px solid rgba(58,170,58,.50);

  box-shadow: 0 -4px 24px rgba(0,0,0,.30);

}

.sticky-cta-btn {

  display: block;

  width: 100%;

  text-align: center;

  text-decoration: none;

  padding: 15px 20px;

  border-radius: var(--radius-sm);

  font-size: 15px;

  font-weight: 900;

  letter-spacing: .2px;

  text-transform: uppercase;

  color: #fff;

  background: linear-gradient(135deg, var(--green-1), var(--green-2));

  border: 2px solid rgba(255,255,255,.15);

  box-shadow: 0 4px 16px rgba(45,138,45,.50);

  animation: pulse-green 2.6s ease-in-out infinite;

}

.sticky-cta-btn:active { transform: scale(.98); }

/* ================================================

   19. SCROLL TO TOP

================================================ */

.scroll-top {

  position: fixed;

  bottom: 100px; right: 20px;

  width: 42px; height: 42px;

  border-radius: 50%;

  background: var(--green-1);

  color: #fff;

  border: none;

  font-size: 18px;

  cursor: pointer;

  box-shadow: 0 4px 14px rgba(45,138,45,.45);

  z-index: 99;

  display: grid;

  place-items: center;

  transition: transform .2s ease;

}

.scroll-top:hover { transform: translateY(-3px); }

/* ================================================

   20. FADE-IN ANIMATION

================================================ */

.fade-in {

  opacity: 0;

  transform: translateY(20px);

  transition: opacity .55s ease, transform .55s ease;

}

.fade-in.visible {

  opacity: 1;

  transform: translateY(0);

}

/* ================================================

   21. RESPONSIVE

================================================ */

@media (max-width: 1024px) {

  .features-grid { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 860px) {

  .hero-grid          { grid-template-columns: 1fr; }

  .hero-title         { font-size: 32px; }

  .hero-img           { height: 260px; }

  .risk-grid          { grid-template-columns: 1fr; }

  .reviews-grid       { grid-template-columns: 1fr; }

  .steps-row          { flex-direction: column; align-items: center; }

  .step-arrow         { transform: rotate(90deg); margin: 4px 0; }

  .cta-title          { font-size: 26px; }

  .section-title      { font-size: 26px; }

}

@media (max-width: 620px) {

  :root { --section-py: 40px; }

  .header-nav         { display: none; }

  .header-cta         { display: none; }

  .hero-title         { font-size: 27px; }

  .features-grid      { grid-template-columns: repeat(2, 1fr); }

  .btn-cta-hero       { font-size: 14px; padding: 16px 18px; }

  .btn-cta-xl         { font-size: 15px; padding: 18px 20px; }

  .steps-block        { padding: 24px 20px; }

  .cta-title          { font-size: 22px; }

  /* Sticky CTA visível apenas no mobile */

  .sticky-cta         { display: block; }

  body                { padding-bottom: 90px; }

  .scroll-top         { bottom: 108px; right: 16px; }

}

@media (max-width: 400px) {

  .features-grid  { grid-template-columns: 1fr; }

  .trust-row      { flex-direction: column; gap: 8px; }

  .seal-row       { gap: 8px; }

  .seal           { min-width: 80px; padding: 8px 10px; }

}