/*
 * Ovos de Ouro — identidade visual
 * Carregado DEPOIS de index.B9A2UvhE.css (Tailwind compilado).
 * Regras fora de @layer têm prioridade sobre as camadas do Tailwind,
 * então aqui apenas redefinimos os tokens de cor e adicionamos
 * os poucos componentes novos (prefixo .oo-).
 */

/* ---------- Tokens ---------- */
:root {
  --color-primary: #2f5d3a;        /* verde agrícola escuro */
  --color-secondary: #5b3f28;      /* marrom terroso */
  --color-surface: #ffffff;
  --color-surface-alt: #faf5ea;    /* creme */
  --color-foreground: #262626;     /* grafite */
  --color-special: #f2b705;        /* dourado — CTAs */
  --color-special-alt: #1f2a1c;    /* texto sobre dourado */
  --color-orange-800: rgba(242, 183, 5, .45);

  --oo-green-dark: #1f3f28;
  --oo-gold: #e2a908;
  --oo-gold-soft: #fff3cc;
  --oo-cream-deep: #efe4cc;
  --oo-brown-soft: #8a6a4a;
  --oo-radius: 16px;

  --default-font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --oo-font-title: "Montserrat", "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* ---------- Base ---------- */
html, body { max-width: 100%; overflow-x: clip; }
body { background: var(--color-surface-alt); color: var(--color-foreground); }
h1, h2, h3, h4 { font-family: var(--oo-font-title); letter-spacing: -.01em; }
img { max-width: 100%; height: auto; }

/* Cores com transparência (o CSS compilado tinha o roxo antigo como fallback) */
.bg-primary\/60 { background-color: rgba(47, 93, 58, .6); }
.border-secondary\/50 { border-color: rgba(91, 63, 40, .25); }
.fill-\[\#F15700\] { fill: var(--oo-gold); }
.text-\[\#F15700\] { color: var(--oo-gold); }

/* Caixa de preço da oferta final: texto secundário legível sobre o verde */
.bg-primary.text-surface\/50 { color: rgba(255, 255, 255, .85); }

/* Textura discreta de madeira nos blocos marrons */
.bg-secondary {
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 11px);
}

/* ---------- Barra / selos de oferta (dourado) ---------- */
.oo-offer {
  background: var(--color-special) !important;
  color: var(--color-special-alt) !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.08);
  text-align: center;
  line-height: 1.35;
}
.oo-offer-pill { border-radius: 14px !important; max-width: 100%; }
@media (min-width: 40rem) { .oo-offer-pill { border-radius: 999px !important; } }

/* ---------- Hero ---------- */
.oo-hero {
  background:
    radial-gradient(38rem 22rem at 100% 0%, rgba(242,183,5,.14), transparent 70%),
    radial-gradient(30rem 20rem at 0% 100%, rgba(47,93,58,.08), transparent 70%),
    var(--color-surface-alt) !important;
}
.oo-eyebrow {
  display: block;
  margin: 0 0 .75rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--oo-brown-soft); text-align: center;
}
.oo-eyebrow svg { display: inline-block; width: .95rem; height: .95rem; margin: 0 .35rem .15rem 0; vertical-align: middle; color: var(--oo-gold); }
.oo-h1 { font-size: clamp(1.6rem, 5.4vw, 2.35rem); line-height: 1.15; font-weight: 800; }
.oo-highlight {
  color: var(--color-primary);
  background: linear-gradient(transparent 62%, rgba(242,183,5,.45) 62%);
  padding: 0 .1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.oo-sub { color: #3d3d3d; font-weight: 500; line-height: 1.55; }

.oo-benefits { display: grid; gap: .65rem; }
@media (min-width: 40rem) { .oo-benefits { grid-template-columns: 1fr 1fr; column-gap: 1.25rem; } }
.oo-benefits > div { font-weight: 500; }

.oo-price-note { margin-top: .75rem; text-align: center; font-weight: 700; font-size: 1rem; }

/* ---------- CTA ---------- */
.bg-special {
  box-shadow: 0 5px 0 #b78a00, 0 14px 24px -10px rgba(0,0,0,.35) !important;
  font-family: var(--oo-font-title);
  letter-spacing: .01em;
  line-height: 1.25;
  min-height: 3.5rem;
}
.bg-special:hover { filter: brightness(1.05); }
.bg-special:active { translate: 0 3px; box-shadow: 0 2px 0 #b78a00 !important; }
.oo-cta { font-size: clamp(1.05rem, 4.2vw, 1.25rem); padding: 1.1rem 1rem; }
.oo-cta-note {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1rem;
  margin-top: 1rem; font-size: .8rem; font-weight: 600; color: #4a4a4a;
}
.oo-cta-note span { display: inline-flex; align-items: center; gap: .35rem; }
.oo-cta-note svg { width: 1rem; height: 1rem; color: var(--color-primary); }

/* ---------- Títulos de seção ---------- */
.oo-section-pill { line-height: 1.3; max-width: 100%; }
.oo-lead { color: #454545; }

/* ---------- Cards "Por que" ---------- */
.oo-card {
  background: var(--color-surface);
  border: 1px solid var(--oo-cream-deep);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--oo-radius);
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow: 0 10px 24px -18px rgba(47,93,58,.45);
}
.oo-card h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: .6rem; color: var(--oo-green-dark); }
.oo-card p { font-size: .98rem; line-height: 1.6; color: #444; }
.oo-icon {
  width: 3.25rem; height: 3.25rem; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--oo-gold-soft); color: var(--color-primary);
}
.oo-icon svg { width: 1.6rem; height: 1.6rem; }
.oo-closing {
  margin-top: 2rem; padding: 1.25rem; border-radius: var(--oo-radius);
  background: var(--color-surface); border: 1px dashed var(--oo-cream-deep);
}

/* ---------- Conteúdo: destaque + cards extras ---------- */
.oo-tag {
  display: inline-block; margin-top: .9rem; padding: .45rem .8rem;
  border-radius: 10px; background: var(--oo-gold-soft); color: var(--oo-green-dark);
  font-size: .8rem; font-weight: 800; letter-spacing: .02em; line-height: 1.35;
}
.oo-extra { max-width: 80rem; margin: 2.5rem auto 0; }
.oo-extra-title {
  text-align: center; font-size: 1.15rem; font-weight: 800; margin-bottom: 1.25rem; color: var(--oo-green-dark);
}
.oo-grid-5 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .oo-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .oo-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.oo-mini {
  display: flex; gap: .85rem; align-items: flex-start;
  background: var(--color-surface); border: 1px solid var(--oo-cream-deep);
  border-radius: 14px; padding: 1rem;
}
@media (min-width: 64rem) { .oo-mini { flex-direction: column; align-items: center; text-align: center; } }
.oo-mini .oo-icon { width: 2.6rem; height: 2.6rem; margin: 0; flex-shrink: 0; }
.oo-mini .oo-icon svg { width: 1.3rem; height: 1.3rem; }
.oo-mini h4 { font-size: .9rem; font-weight: 800; margin-bottom: .25rem; color: var(--oo-green-dark); }
.oo-mini p { font-size: .9rem; line-height: 1.5; color: #4a4a4a; }

/* ---------- Bônus ---------- */
.oo-bonus-desc { margin-top: .5rem; font-size: .95rem; line-height: 1.55; color: #4a4a4a; }

/* ---------- Depoimentos (espaço reservado) ---------- */
.oo-dep-placeholder {
  aspect-ratio: 345 / 188; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  border: 2px dashed var(--oo-cream-deep); border-radius: 12px;
  background: var(--color-surface-alt); color: var(--oo-brown-soft);
  font-size: .85rem; font-weight: 600; text-align: center; padding: 1rem;
}
.oo-dep-placeholder svg { width: 1.75rem; height: 1.75rem; color: var(--oo-gold); }
.oo-dep-placeholder img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 10px; }
.oo-dep-placeholder::after { content: "Espaço reservado para depoimento real"; }
.oo-dep-placeholder.has-photo::after { display: none; }
.lucide-quote { color: var(--oo-cream-deep); }

/* ---------- Oferta final ---------- */
.oo-checklist { display: grid; gap: .7rem; text-align: left; }
.oo-checklist > div { display: flex; align-items: flex-start; gap: .6rem; font-size: 1.05rem; line-height: 1.4; }
.oo-check {
  width: 1.5rem; height: 1.5rem; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-special); color: var(--color-special-alt);
}
.oo-check svg { width: .85rem; height: .85rem; stroke-width: 3; }
.oo-micro { font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: .7rem; }
.oo-micro span { display: inline-flex; align-items: center; gap: .3rem; }
.oo-micro svg { width: .95rem; height: .95rem; flex-shrink: 0; }

/* ---------- FAQ ---------- */
.faq-button { font-family: var(--oo-font-title); gap: 1rem; }
.faq-icon { flex-shrink: 0; }

/* ---------- Mobile ---------- */
@media (max-width: 39.99rem) {
  .text-5xl { font-size: 2.4rem; }
  .oo-price-main { font-size: 1.9rem !important; line-height: 1.15 !important; }
}