/* ==========================================================================
   WeRetail — Tokens de Design System e Componentes da Landing Page
   Integrado com as variáveis de tema do WordPress (light/dark mode)
   ========================================================================== */
#wr-plataforma, #wr-plataforma[data-theme="dark"], [data-theme="dark"] #wr-plataforma, html:not(.light):not(.light-mode):not([data-theme="light"]) #wr-plataforma, html[data-theme="dark"] #wr-plataforma {
  --wr-gold-50:  #FCF3D4;
  --wr-gold-200: #F4E0A0;
  --wr-gold-300: #E9BA41;
  --wr-gold-400: #F1B90A;
  --wr-gold-500: #F4C73B;
  --wr-gold-600: #AB8B29;
  --wr-gold-700: #7A641E;
  --wr-gold-900: #493C12;

  --wr-bg-canvas:    var(--theme-background, #000000);
  --wr-bg-surface-1: var(--theme-elevation, rgba(255, 255, 255, 0.06));
  --wr-bg-surface-2: var(--theme-elevation-double, rgba(255, 255, 255, 0.09));
  --wr-bg-surface-3: rgba(255, 255, 255, 0.10);
  --wr-bg-surface-4: rgba(255, 255, 255, 0.12);

  --wr-border-subtle: 1px solid var(--theme-border-default, rgba(255, 255, 255, 0.09));
  --wr-border-strong: 1px solid rgba(255, 255, 255, 0.18);
  --wr-border-accent: 1px solid #AB8B29;

  --wr-text-primary:   var(--theme-text-primary, #FFFFFF);
  --wr-text-secondary: var(--theme-text-secondary, rgba(255, 255, 255, 0.80));
  --wr-text-tertiary:  rgba(255, 255, 255, 0.50);
  --wr-text-disabled:  rgba(255, 255, 255, 0.30);
  --wr-text-accent:    #F4C73B;
  --wr-fill-accent:    #AB8B29;
  --wr-color-primary:  var(--theme-primary, #F4C73B);

  --wr-button-primary-bg:       #AB8B29;
  --wr-button-primary-text:     #000000;
  --wr-button-primary-bg-hover: #F4C73B;

  --wr-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --wr-space-2:  2px;
  --wr-space-4:  4px;
  --wr-space-6:  6px;
  --wr-space-8:  8px;
  --wr-space-12: 12px;
  --wr-space-16: 16px;
  --wr-space-22: 22px;
  --wr-space-32: 32px;
  --wr-space-40: 40px;
  --wr-space-64: 64px;
  --wr-space-80: 80px;

  --wr-radius-card:       2px;
  --wr-radius-button:     4px;
  --wr-radius-button-new: 6px;
  --wr-radius-input:      8px;
  --wr-radius-tag:        4px;
  --wr-radius-pill:       16px;
  --wr-radius-max:        22px;
}

#wr-plataforma[data-theme="light"], [data-theme="light"] #wr-plataforma, .light-mode #wr-plataforma, body.light-mode #wr-plataforma, .site-theme-light #wr-plataforma, html.light #wr-plataforma, body.light #wr-plataforma {
  --wr-bg-canvas:    var(--theme-background, #FFFFFF);
  --wr-bg-surface-1: var(--theme-elevation, #F9F9F9);
  --wr-bg-surface-2: var(--theme-elevation-double, #F1F1F1);
  --wr-bg-surface-3: #E5E5E5;
  --wr-bg-surface-4: #D9D9D9;

  --wr-border-subtle: 1px solid var(--theme-border-default, rgba(0, 0, 0, 0.12));
  --wr-border-strong: 1px solid rgba(0, 0, 0, 0.22);
  --wr-border-accent: 1px solid #99781B;

  --wr-text-primary:   var(--theme-text-primary, #111111);
  --wr-text-secondary: var(--theme-text-secondary, #333333);
  --wr-text-tertiary:  #555555;
  --wr-text-disabled:  rgba(0, 0, 0, 0.40);
  --wr-text-accent:    #856B1A;
  --wr-fill-accent:    #99781B;
  --wr-color-primary:  var(--theme-primary, #856B1A);

  --wr-button-primary-bg:       #111111;
  --wr-button-primary-text:     #FFFFFF;
  --wr-button-primary-bg-hover: #333333;
}

/* Reset encapsulado para o bloco WordPress */
#wr-plataforma {
  background-color: var(--wr-bg-canvas);
  color: var(--wr-text-primary);
  font-family: var(--wr-font-sans);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
#wr-plataforma *, #wr-plataforma *::before, #wr-plataforma *::after {
  box-sizing: inherit;
}

/* Layout Geral */
#wr-plataforma .wr-container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--wr-space-22);
}
#wr-plataforma .wr-section {
  padding: var(--wr-space-64) 0;
  border-bottom: var(--wr-border-subtle);
}
#wr-plataforma .wr-section:last-of-type {
  border-bottom: none;
}

/* Tipografia */
#wr-plataforma .wr-h1 {
  font-size: 32px;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 var(--wr-space-16);
  color: var(--wr-text-primary);
}
#wr-plataforma .wr-h2 {
  font-size: 25px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 var(--wr-space-8);
  color: var(--wr-text-primary);
}
#wr-plataforma .wr-h3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 var(--wr-space-6);
  color: var(--wr-text-primary);
}
#wr-plataforma .wr-body {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--wr-text-secondary);
}
#wr-plataforma .wr-caption {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wr-text-tertiary);
}
#wr-plataforma .wr-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--wr-color-primary);
}

/* Divisor dourado de bloco */
#wr-plataforma .wr-divider-gold {
  width: 40px;
  height: 2px;
  background-color: var(--wr-fill-accent);
  margin: var(--wr-space-12) 0 var(--wr-space-22);
}

/* Botões */
#wr-plataforma .wr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wr-font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: var(--wr-space-12) var(--wr-space-22);
  border-radius: var(--wr-radius-button-new);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  border: none;
}
#wr-plataforma .wr-btn--primary {
  background-color: var(--wr-button-primary-bg);
  color: var(--wr-button-primary-text);
  font-weight: 600;
}
#wr-plataforma .wr-btn--primary:hover {
  background-color: var(--wr-button-primary-bg-hover);
}
#wr-plataforma .wr-btn--ghost {
  background-color: transparent;
  color: var(--wr-text-secondary);
  border: var(--wr-border-strong);
}
#wr-plataforma .wr-btn--ghost:hover {
  background-color: var(--wr-bg-surface-2);
  color: var(--wr-text-primary);
}
#wr-plataforma .wr-btn--link {
  background: none;
  border: none;
  padding: 0;
  color: var(--wr-text-accent);
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
}

/* Tags e Pills */
#wr-plataforma .wr-pill {
  display: inline-block;
  padding: var(--wr-space-4) var(--wr-space-12);
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--wr-radius-pill);
  background-color: var(--wr-bg-surface-2);
  border: var(--wr-border-subtle);
  color: var(--wr-text-accent);
  margin-bottom: var(--wr-space-12);
}

/* Cards */
#wr-plataforma .wr-card {
  background-color: var(--wr-bg-surface-1);
  border: var(--wr-border-subtle);
  border-radius: var(--wr-radius-card);
  padding: var(--wr-space-22);
}



/* Hero Section */
#wr-plataforma .wr-hero {
  padding: var(--wr-space-80) 0 var(--wr-space-64);
  text-align: left;
}
#wr-plataforma .wr-hero__sub {
  font-size: 16px;
  color: var(--wr-text-secondary);
  line-height: 1.6;
  max-width: 680px;
  margin-bottom: var(--wr-space-22);
}
#wr-plataforma .wr-hero__cta-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wr-space-12);
}

/* Grid de Dores */
#wr-plataforma .wr-grid-pain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--wr-space-16);
  margin: var(--wr-space-22) 0;
}
#wr-plataforma .wr-pain-item {
  background: var(--wr-bg-surface-1);
  border: var(--wr-border-subtle);
  border-radius: var(--wr-radius-card);
  padding: var(--wr-space-16);
}
#wr-plataforma .wr-pain-item__icon {
  width: 24px;
  height: 24px;
  margin-bottom: var(--wr-space-8);
  color: var(--wr-color-primary);
}

/* Diagrama dos Dois Caminhos */
#wr-plataforma .wr-diagram-box {
  background: var(--wr-bg-surface-1);
  border: var(--wr-border-subtle);
  border-radius: var(--wr-radius-card);
  padding: var(--wr-space-22);
  margin: var(--wr-space-22) 0;
}
#wr-plataforma .wr-diagram-cols {
  display: grid;
  grid-template-columns: 1fr auto 1.2fr auto 1fr;
  align-items: center;
  gap: var(--wr-space-12);
}
#wr-plataforma .wr-diagram-node {
  background: var(--wr-bg-surface-2);
  border: var(--wr-border-subtle);
  padding: var(--wr-space-16);
  text-align: center;
  border-radius: var(--wr-radius-card);
}
#wr-plataforma .wr-diagram-arrow {
  color: var(--wr-fill-accent);
  font-weight: bold;
  font-size: 20px;
}
#wr-plataforma .wr-grid-2cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--wr-space-22);
  margin-top: var(--wr-space-22);
}

/* 11 Ferramentas */
#wr-plataforma .wr-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--wr-space-16);
  margin-top: var(--wr-space-22);
}
#wr-plataforma .wr-tool-card {
  background: var(--wr-bg-surface-1);
  border: var(--wr-border-subtle);
  border-radius: var(--wr-radius-card);
  padding: var(--wr-space-16);
}
#wr-plataforma .wr-tool-card__group {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wr-color-primary);
  margin-bottom: var(--wr-space-4);
}
#wr-plataforma .wr-tool-card__names {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: var(--wr-space-6);
  color: var(--wr-text-primary);
}

/* Depoimentos e Casos */
#wr-plataforma .wr-quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--wr-space-22);
  margin-top: var(--wr-space-22);
}
#wr-plataforma .wr-quote-card {
  background: var(--wr-bg-surface-2);
  border-left: 3px solid var(--wr-fill-accent);
  border-radius: var(--wr-radius-card);
  padding: var(--wr-space-22);
}
#wr-plataforma .wr-quote-text {
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
  color: var(--wr-text-primary);
  margin-bottom: var(--wr-space-12);
}
#wr-plataforma .wr-quote-author {
  font-size: 13px;
  color: var(--wr-text-secondary);
}

/* Casos da Tabela de Prova */
#wr-plataforma .wr-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--wr-space-16);
  margin-top: var(--wr-space-22);
}
#wr-plataforma .wr-case-card {
  background: var(--wr-bg-surface-1);
  border: var(--wr-border-subtle);
  border-radius: var(--wr-radius-card);
  padding: var(--wr-space-16);
}
#wr-plataforma .wr-case-tag {
  font-size: 11px;
  color: var(--wr-color-primary);
  font-weight: 600;
  margin-bottom: var(--wr-space-6);
}

/* Formulário de Prova de Conceito */
#wr-plataforma .wr-form-box {
  background: var(--wr-bg-surface-2);
  border: var(--wr-border-strong);
  border-radius: var(--wr-radius-card);
  padding: var(--wr-space-32);
  max-width: 640px;
  margin: var(--wr-space-32) auto 0;
}
#wr-plataforma .wr-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--wr-space-22);
  padding-bottom: var(--wr-space-12);
  border-bottom: var(--wr-border-subtle);
}
#wr-plataforma .wr-step-item {
  font-size: 12px;
  color: var(--wr-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--wr-space-6);
}
#wr-plataforma .wr-step-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wr-fill-accent);
}
#wr-plataforma .wr-field {
  margin-bottom: var(--wr-space-16);
}
#wr-plataforma .wr-field__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: var(--wr-space-6);
  color: var(--wr-text-secondary);
}
#wr-plataforma .wr-input {
  width: 100%;
  background: var(--wr-bg-canvas);
  border: var(--wr-border-subtle);
  border-radius: var(--wr-radius-input);
  padding: 10px 14px;
  color: var(--wr-text-primary);
  font-family: var(--wr-font-sans);
  font-size: 14px;
}
#wr-plataforma .wr-input:focus {
  outline: none;
  border-color: var(--wr-fill-accent);
}

/* FAQ Acordeão */
#wr-plataforma .wr-faq-list {
  max-width: 800px;
  margin-top: var(--wr-space-22);
}
#wr-plataforma .wr-faq-item {
  border-bottom: var(--wr-border-subtle);
  padding: var(--wr-space-16) 0;
}
#wr-plataforma .wr-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  color: var(--wr-text-primary);
  cursor: pointer;
  padding: 0;
}
#wr-plataforma .wr-faq-question::after {
  content: "+";
  font-size: 20px;
  color: var(--wr-color-primary);
}
#wr-plataforma .wr-faq-item.is-open .wr-faq-question::after {
  content: "−";
}
#wr-plataforma .wr-faq-answer {
  display: none;
  padding-top: var(--wr-space-12);
  font-size: 14px;
  color: var(--wr-text-secondary);
  line-height: 1.5;
}
#wr-plataforma .wr-faq-item.is-open .wr-faq-answer {
  display: block;
}

#wr-plataforma #lp-captura-box.is-open {
  display: block;
}

@media (max-width: 768px) {
  #wr-plataforma .wr-diagram-cols {
    grid-template-columns: 1fr;
    text-align: center;
  }
  #wr-plataforma .wr-diagram-arrow {
    transform: rotate(90deg);
    margin: var(--wr-space-8) 0;
  }
  #wr-plataforma .wr-form-box {
    padding: var(--wr-space-16);
  }
}

/* Converted from the original inline declarations. */
#wr-plataforma .wr-lp-inline-01 { max-width: 760px; }
#wr-plataforma .wr-lp-inline-02 { color: var(--wr-text-primary); font-size: 13px; }
#wr-plataforma .wr-lp-inline-03 { margin-top: var(--wr-space-22); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--wr-space-12); }
#wr-plataforma .wr-lp-inline-04 { font-weight: 500; color: var(--wr-text-primary); }
#wr-plataforma .wr-lp-inline-05 { font-size: 11px; color: var(--wr-text-tertiary); text-transform: uppercase; }
#wr-plataforma .wr-lp-inline-06 { font-weight: 600; margin-top: 4px; color: var(--wr-text-primary); }
#wr-plataforma .wr-lp-inline-07 { border: 1px solid var(--wr-fill-accent); }
#wr-plataforma .wr-lp-inline-08 { font-size: 11px; color: var(--wr-color-primary); text-transform: uppercase; }
#wr-plataforma .wr-lp-inline-09 { margin-top: var(--wr-space-16); font-size: 13px; font-weight: 600; color: var(--wr-color-primary); }
#wr-plataforma .wr-lp-inline-10 { margin-top: var(--wr-space-22); padding: var(--wr-space-16); background: var(--wr-bg-surface-2); border-radius: var(--wr-radius-card); }
#wr-plataforma .wr-lp-inline-11 { margin: 0 0 var(--wr-space-6); }
#wr-plataforma .wr-lp-inline-12 { font-weight: 600; color: var(--wr-color-primary); font-size: 14px; }
#wr-plataforma .wr-lp-inline-13 { font-size: 13px; margin: 0; }
#wr-plataforma .wr-lp-inline-14 { margin-top: var(--wr-space-16); }
#wr-plataforma .wr-lp-inline-15 { text-align: center; max-width: 680px; margin: 0 auto var(--wr-space-32); }
#wr-plataforma .wr-lp-inline-16 { font-size: 28px; }
#wr-plataforma .wr-lp-inline-17 { background: var(--wr-bg-surface-1); border: var(--wr-border-subtle); border-radius: var(--wr-radius-card); padding: var(--wr-space-22); max-width: 820px; margin: 0 auto; }
#wr-plataforma .wr-lp-inline-18 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--wr-space-16); margin-bottom: var(--wr-space-22); }
#wr-plataforma .wr-lp-inline-19 { background: var(--wr-bg-surface-2); border-radius: var(--wr-radius-card); padding: var(--wr-space-16); }
#wr-plataforma .wr-lp-inline-20 { margin-bottom: var(--wr-space-8); }
#wr-plataforma .wr-lp-inline-21 { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: var(--wr-border-subtle); }
#wr-plataforma .wr-lp-inline-22 { margin-top: var(--wr-space-12); padding: var(--wr-space-12); background: var(--wr-bg-surface-3); border: 1px solid var(--wr-fill-accent); border-radius: var(--wr-radius-card); }
#wr-plataforma .wr-lp-inline-23 { font-size: 22px; font-weight: 700; color: var(--wr-color-primary); margin-top: 4px; }
#wr-plataforma .wr-lp-inline-24 { margin-top: var(--wr-space-8); }
#wr-plataforma .wr-lp-inline-25 { display: flex; flex-wrap: wrap; gap: var(--wr-space-12); margin-top: var(--wr-space-16); align-items: center; }
#wr-plataforma .wr-lp-inline-26 { display: none; margin-top: var(--wr-space-22); padding: var(--wr-space-16); background: var(--wr-bg-surface-3); border-radius: var(--wr-radius-card); }
#wr-plataforma .wr-lp-inline-27 { font-size: 13px; }
#wr-plataforma .wr-lp-inline-28 { margin-top: var(--wr-space-12); }
#wr-plataforma .wr-lp-inline-29 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--wr-space-12); margin-bottom: var(--wr-space-12); }
#wr-plataforma .wr-lp-inline-30 { display: none; margin-top: var(--wr-space-12); color: var(--wr-color-primary); font-size: 14px; }
#wr-plataforma .wr-lp-inline-31 { text-align: center; max-width: 640px; margin: 0 auto; }
#wr-plataforma .wr-lp-inline-32 { margin: var(--wr-space-12) auto var(--wr-space-16); }
#wr-plataforma .wr-lp-inline-33 { text-align: center; }
#wr-plataforma .wr-lp-inline-34 { margin-top: var(--wr-space-24); }
#wr-plataforma .wr-lp-inline-35 { display: inline-block; width: 100%; max-width: 480px; font-size: 16px; padding: 16px 24px; text-decoration: none; }
#wr-plataforma .wr-lp-inline-36 { text-align: center; margin-top: var(--wr-space-12); }