/* Ligasul — landing page de captação
   Tokens conforme "Design system do site". Erro e sucesso usam texto + ícone, sem verde/vermelho. */

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/playfair-700i-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
}

:root {
  --color-bg-dark: #211F1D;          /* Couro */
  --color-bg-light: #E4E2DE;         /* Zinco */
  --color-surface: #EFEEEC;          /* Zinco clareado 42% com branco */
  --color-accent: #BC7755;           /* Cobre — só sobre Couro */
  --color-accent-on-light: #8A4E32;  /* Cobre Oxidado — links, foco, erro sobre Zinco */
  --color-text-muted: #5F5B57;       /* Aço */
  --color-text: #211F1D;
  --color-text-on-dark: #E4E2DE;
  --color-white: #FFFFFF;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-text: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --text-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);   /* 36 → 56 px */
  --text-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);   /* 28 → 40 px */
  --text-body: 1.0625rem;                              /* 17 px */
  --text-small: 0.875rem;                              /* 14 px */

  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
  --space-5: 40px; --space-6: 64px; --space-7: 96px; --space-8: 144px;

  --radius-control: 3px;
  --motion-fast: 150ms ease-out;
  --motion-base: 240ms ease-out;

  --container: 1200px;
  --gutter: 16px;
  --sticky-h: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg-light);
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--sticky-h);
}
img, svg { display: block; max-width: 100%; height: auto; }
.icon { flex: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--color-accent-on-light); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; }

:focus-visible { outline: 2px solid var(--color-accent-on-light); outline-offset: 3px; }
.on-dark :focus-visible, .hero :focus-visible, .final-cta__text :focus-visible, .proof :focus-visible,
.site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--color-accent); }

.visually-hidden, .hp {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-3); top: -100px; z-index: 100;
  background: var(--color-white); color: var(--color-text); padding: var(--space-2) var(--space-3);
}
.skip-link:focus { top: var(--space-2); }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: calc(800px + 2 * var(--gutter)); }
@media (min-width: 768px) { :root { --gutter: 32px; } }

/* ---------- Tipografia ---------- */
.hero__title, .section__title, .page-title, .lead__title, .logo, .step__number, .proof__value, .testimonial__number strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
}
.hero__title { font-size: var(--text-h1); line-height: 1.08; letter-spacing: -0.01em; }
.section__title, .page-title { font-size: var(--text-h2); line-height: 1.15; }
.eyebrow {
  font-size: var(--text-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: var(--space-3);
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 12px var(--space-4);
  border: 2px solid transparent; border-radius: var(--radius-control);
  font-family: var(--font-text); font-size: 1rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled='true'] { cursor: not-allowed; opacity: 0.7; }
.btn--block { display: flex; width: 100%; }
.btn--small { min-height: 44px; padding: 8px var(--space-3); font-size: 0.9375rem; }

/* Principal sobre Couro: Cobre com texto Couro (4,6:1). Hover: Cobre Oxidado com texto branco */
.btn--primary { background: var(--color-accent); color: var(--color-bg-dark); }
.btn--primary:hover:not([disabled]) { background: var(--color-accent-on-light); color: var(--color-white); }

/* Principal sobre Zinco: Couro com texto Zinco (12,7:1) */
.lead .btn--primary, .btn--primary-light { background: var(--color-bg-dark); color: var(--color-bg-light); }
.lead .btn--primary:hover:not([disabled]), .btn--primary-light:hover { background: var(--color-accent-on-light); color: var(--color-white); }

/* WhatsApp: contorno com ícone */
.btn--whatsapp { background: transparent; color: var(--color-text-on-dark); border-color: currentColor; }
.btn--whatsapp:hover { background: var(--color-text-on-dark); color: var(--color-bg-dark); border-color: var(--color-text-on-dark); }
.section--light .btn--whatsapp, .section--surface .btn--whatsapp { color: var(--color-text); }
.btn--whatsapp-solid { background: var(--color-bg-dark); color: var(--color-bg-light); }
.btn--whatsapp-solid:hover { background: var(--color-accent-on-light); color: var(--color-white); }

.btn--link {
  background: none; border: 0; min-height: 48px; color: var(--color-accent-on-light);
  text-decoration: underline; text-underline-offset: 3px; font-weight: 600;
}
.btn--link:hover { text-decoration-thickness: 2px; }

/* ---------- Cabeçalho ---------- */
.site-header { background: var(--color-bg-dark); color: var(--color-text-on-dark); border-bottom: 1px solid rgba(228, 226, 222, 0.12); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 68px; }
.logo { font-size: 1.75rem; line-height: 1; color: var(--color-text-on-dark); text-decoration: none; letter-spacing: -0.01em; }
.logo::after { content: '.'; color: var(--color-accent); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-4); }
.header-link { display: none; align-items: center; gap: var(--space-2); color: var(--color-text-on-dark); text-decoration: none; font-weight: 600; }
.header-link:hover { color: var(--color-accent); }
@media (min-width: 768px) { .header-link { display: inline-flex; } }
@media (max-width: 480px) { .hide-sm { display: none; } }

/* ---------- Topo ---------- */
.hero { background: var(--color-bg-dark); color: var(--color-text-on-dark); padding: var(--space-5) 0 var(--space-6); }
.hero__grid { display: grid; gap: var(--space-5); grid-template-areas: 'lead' 'form' 'more'; }
.hero__lead { grid-area: lead; }
.hero__form { grid-area: form; }
.hero__more { grid-area: more; }
.hero__sub { margin-top: var(--space-4); font-size: 1.125rem; max-width: 36em; color: var(--color-text-on-dark); }
.hero__points { display: grid; gap: var(--space-3); }
.hero__points li { display: flex; gap: var(--space-3); align-items: flex-start; }
.hero__points .icon { color: var(--color-accent); margin-top: 3px; }
.hero__alt { margin-top: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.hero__alt p { font-weight: 600; }

@media (min-width: 1025px) {
  .hero { padding: var(--space-6) 0 var(--space-7); }
  .hero__grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
      'lead lead lead lead lead lead lead form form form form form'
      'more more more more more more more form form form form form';
    grid-template-rows: auto 1fr;
    column-gap: var(--space-4);
    row-gap: var(--space-5);
  }
  .hero__lead { padding-right: var(--space-5); padding-top: var(--space-4); }
  .hero__more { padding-right: var(--space-5); }
}

/* ---------- Formulário em etapas ---------- */
.lead {
  background: var(--color-bg-light); color: var(--color-text);
  border-radius: var(--radius-control); padding: var(--space-4);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 18px 40px -24px rgba(0,0,0,0.6);
}
@media (min-width: 768px) { .lead { padding: var(--space-5); } }
.lead--page { box-shadow: none; background: var(--color-surface); }
.lead__progress { font-size: var(--text-small); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.lead__progress span { font-weight: 600; color: var(--color-accent-on-light); }
.lead__title { font-size: 1.75rem; line-height: 1.15; }
.lead__title:focus { outline: none; }
.lead__intro { margin-top: var(--space-2); color: var(--color-text-muted); font-size: 1rem; }
.lead__form { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.lead__legal { font-size: var(--text-small); line-height: 1.45; color: var(--color-text-muted); }
.lead__alert {
  margin-top: var(--space-3); display: flex; gap: var(--space-2); align-items: flex-start;
  padding: 12px var(--space-3); border-left: 3px solid var(--color-accent-on-light);
  background: var(--color-surface); color: var(--color-text); font-weight: 600; font-size: 0.9375rem;
}
.lead__alert[hidden] { display: none; }
.lead__alert .icon { color: var(--color-accent-on-light); margin-top: 2px; }
.lead__alert a { font-weight: 600; }
.lead__done-icon {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-bg-dark); color: var(--color-accent); margin-bottom: var(--space-3);
}
.lead__step--done .btn { margin-top: var(--space-4); }
.lead__step[hidden] { display: none; }
.lead__step.is-entering { animation: step-in var(--motion-base) both; }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.field { display: grid; gap: var(--space-1); }
.field__label { font-weight: 600; font-size: 0.9375rem; }
.field__optional { font-weight: 400; color: var(--color-text-muted); }
.field__help { font-size: var(--text-small); line-height: 1.45; color: var(--color-text-muted); }
.field__input {
  width: 100%; min-height: 48px; padding: 11px 12px;
  font: inherit; font-size: 1rem; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-text-muted); border-radius: var(--radius-control);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
textarea.field__input { resize: vertical; min-height: 72px; }
.field__input::placeholder { color: #8c8781; }
.field__input:focus { outline: none; border-color: var(--color-accent-on-light); box-shadow: inset 0 0 0 1px var(--color-accent-on-light); }
.field--error .field__input { border-color: var(--color-accent-on-light); box-shadow: inset 0 0 0 1px var(--color-accent-on-light); }
.field__error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--text-small); line-height: 1.45; font-weight: 600; color: var(--color-accent-on-light); }
.field__error:empty { display: none; }
.field__error .icon { margin-top: 1px; }

.upload {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 56px; padding: var(--space-3); cursor: pointer;
  border: 1px dashed var(--color-text-muted); border-radius: var(--radius-control);
  background: var(--color-surface); font-weight: 600; color: var(--color-text);
  transition: border-color var(--motion-fast);
}
.upload:hover { border-color: var(--color-accent-on-light); }
.upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload__input:focus-visible + .upload, .upload:focus-within { outline: 2px solid var(--color-accent-on-light); outline-offset: 3px; }
.upload__list { display: grid; gap: var(--space-1); font-size: var(--text-small); color: var(--color-text-muted); }
.upload__list li { display: flex; align-items: center; gap: var(--space-2); }
.upload__list img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-control); }

/* ---------- Faixa de prova ---------- */
.proof { background: var(--color-bg-dark); color: var(--color-text-on-dark); padding: var(--space-5) 0; border-top: 1px solid rgba(228, 226, 222, 0.12); }
.proof__numbers { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .proof__numbers { grid-template-columns: repeat(3, 1fr); } }
.proof__item { display: flex; flex-direction: column; gap: var(--space-1); }
.proof__value { font-size: 2.25rem; line-height: 1.1; color: var(--color-accent); }
.proof__label { margin: 0; }
.proof__clients { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid rgba(228, 226, 222, 0.12); }
.proof__clients-title { font-size: var(--text-small); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.proof__logos { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); align-items: center; }
.proof__logo { max-height: 40px; width: auto; filter: grayscale(1) brightness(1.8); }
.proof__logo-text { font-weight: 600; font-size: 1.125rem; }

/* ---------- Seções ---------- */
.section { padding: var(--space-6) 0; }
@media (min-width: 1025px) { .section { padding: var(--space-7) 0; } }
.section--light { background: var(--color-bg-light); }
.section--surface { background: var(--color-surface); }
.section__head { max-width: 760px; margin-bottom: var(--space-5); }
.section__intro { margin-top: var(--space-3); color: var(--color-text); }
.section__intro p + p { margin-top: var(--space-3); }
.section__note { margin-top: var(--space-4); font-size: var(--text-small); color: var(--color-text-muted); max-width: 760px; }

/* Materiais */
.materials { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 768px) { .materials { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .materials { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
.material { background: var(--color-surface); border-radius: var(--radius-control); overflow: hidden; border-top: 3px solid var(--color-bg-dark); }
.material__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.material__body { padding: var(--space-4); }
.material__title { font-size: 1.1875rem; line-height: 1.3; font-weight: 600; }
.material__items { margin-top: var(--space-2); color: var(--color-text-muted); font-size: 1rem; }

/* Como funciona */
.steps { display: grid; gap: var(--space-4); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { background: var(--color-bg-light); padding: var(--space-4); border-radius: var(--radius-control); position: relative; }
.step__number { display: block; font-size: 3rem; line-height: 1; color: var(--color-accent-on-light); margin-bottom: var(--space-3); }
.step__title { font-size: 1.1875rem; line-height: 1.3; font-weight: 600; }
.step__text { margin-top: var(--space-2); font-size: 1rem; color: var(--color-text); }

/* Para redes e indústrias */
.split { display: grid; gap: var(--space-5); }
@media (min-width: 1025px) { .split { grid-template-columns: 5fr 7fr; gap: var(--space-6); align-items: start; } }
.split__text .btn { margin-top: var(--space-4); }
.checklist { display: grid; gap: var(--space-3); }
.checklist__item { display: flex; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface); border-radius: var(--radius-control); }
.checklist__icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--color-bg-dark); color: var(--color-accent); border-radius: var(--radius-control); }
.checklist__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.checklist__item p { margin-top: var(--space-1); font-size: 1rem; color: var(--color-text-muted); }

/* Depoimento */
.testimonial { max-width: 880px; }
.testimonial__number { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.testimonial__number strong { font-size: 3rem; line-height: 1; color: var(--color-accent-on-light); }
.testimonial__quote { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.3; }
.testimonial__quote::before { content: '“'; }
.testimonial__quote::after { content: '”'; }
.testimonial__who { margin-top: var(--space-4); color: var(--color-text-muted); }
.testimonial__who strong { color: var(--color-text); }

/* Perguntas frequentes */
.faq { border-top: 1px solid var(--color-text-muted); }
.faq__item { border-bottom: 1px solid var(--color-text-muted); }
.faq__q { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.faq__button {
  width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0; background: none; border: 0; text-align: left; color: var(--color-text); font-weight: 600; cursor: pointer;
}
.faq__button:hover { color: var(--color-accent-on-light); }
.faq__button .icon { transition: transform var(--motion-base); color: var(--color-accent-on-light); }
.faq__button[aria-expanded='true'] .icon { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 1fr; }
.faq__a > .faq__a-inner { overflow: hidden; }
.js .faq__a { grid-template-rows: 0fr; transition: grid-template-rows var(--motion-base); }
.js .faq__a.is-open { grid-template-rows: 1fr; }
.faq__a-inner p { padding-bottom: var(--space-3); max-width: 46em; }
.js .faq__a:not(.is-open) .faq__a-inner { visibility: hidden; }

/* Chamada final */
.final-cta { background: var(--color-bg-dark); color: var(--color-text-on-dark); padding: var(--space-6) 0; }
@media (min-width: 1025px) { .final-cta { padding: var(--space-7) 0; } }
.final-cta__grid { display: grid; gap: var(--space-5); }
@media (min-width: 1025px) { .final-cta__grid { grid-template-columns: 7fr 5fr; gap: var(--space-6); align-items: center; } }
.final-cta__intro { margin-top: var(--space-3); margin-bottom: var(--space-4); max-width: 34em; }
.final-cta__intro p + p { margin-top: var(--space-2); }

/* Páginas de texto */
.prose h2 { font-size: 1.375rem; margin-top: var(--space-5); margin-bottom: var(--space-2); }
.prose p, .prose ul { margin-top: var(--space-3); }
.prose ul { list-style: disc; padding-left: 1.25em; }
.prose .page-title { margin-bottom: var(--space-4); }
.prose .btn { margin-top: var(--space-5); }
.thanks__back { margin-top: var(--space-4); text-align: center; }
.thanks .lead__title { font-size: var(--text-h2); }
.thanks .lead__intro + .lead__progress { margin-top: var(--space-5); }
.thanks .lead > p:not([class]) { margin-top: var(--space-2); color: var(--color-text-muted); }

/* ---------- Rodapé ---------- */
.site-footer { background: var(--color-bg-dark); color: var(--color-text-on-dark); padding: var(--space-6) 0 var(--space-4); font-size: 0.9375rem; border-top: 1px solid rgba(228, 226, 222, 0.12); }
.site-footer a { color: var(--color-text-on-dark); }
.site-footer a:hover { color: var(--color-accent); }
.site-footer__grid { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } }
.site-footer__grid p + p { margin-top: var(--space-1); }
.site-footer__title { font-size: var(--text-small); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--color-accent); margin-bottom: var(--space-2); }
.logo--footer { font-size: 2rem; margin-bottom: var(--space-3); }
.site-footer__legal { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid rgba(228, 226, 222, 0.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); font-size: var(--text-small); color: #B9B5AF; }

/* ---------- Barra fixa do celular ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
  padding: var(--space-2) var(--gutter) calc(var(--space-2) + env(safe-area-inset-bottom));
  background: var(--color-bg-dark); border-top: 1px solid rgba(228, 226, 222, 0.16);
  transform: translateY(110%); transition: transform var(--motion-base); visibility: hidden;
}
.sticky-cta.is-visible { transform: none; visibility: visible; }
.sticky-cta .btn { padding-left: var(--space-2); padding-right: var(--space-2); }
.sticky-cta .btn--whatsapp-solid { background: transparent; color: var(--color-text-on-dark); border-color: var(--color-text-on-dark); }
@media (min-width: 768px) { .sticky-cta { display: none; } }

/* ---------- Em desenvolvimento ---------- */
.page-em-desenvolvimento { background: var(--color-bg-dark); color: var(--color-text-on-dark); }
.wip { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-5) var(--gutter); max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; }
.wip__inner { margin: auto 0; max-width: 760px; padding: var(--space-6) 0; }
.wip__logo { font-size: 2.25rem; margin-bottom: var(--space-6); }
.wip__title { margin-top: var(--space-2); }
.wip__text { margin-top: var(--space-4); font-size: 1.125rem; max-width: 34em; }
.wip__footer { font-size: var(--text-small); color: #B9B5AF; }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}