/* =====================================================================
   Convcard · Design System
   Tokens, tipografia e componentes derivados do design system Trier
   adaptado à paleta da Convcard.
   ===================================================================== */

:root{
  /* ---------- COLOR TOKENS ---------- */
  /* Navy / Primary - Convcard */
  --navy-950:#050F1C;
  --navy-900:#0B2745;
  --navy-800:#08538D;
  --navy-700:#064270;
  --navy-600:#0A6AA3;

  /* Teal / Secondary - mid blues */
  --teal-500:#2A85B8;
  --teal-400:#5BA3CC;
  --teal-300:#8BC1DD;
  --teal-200:#B6D6E8;
  --teal-100:#DCE9F2;
  --teal-50 :#EDF4F9;

  /* Sky / Accent (CTA / highlight) */
  --sky-600:#0E7AAB;
  --sky-500:#1E9DD6;
  --sky-400:#4DB7E0;
  --sky-300:#7DCBE9;
  --sky-200:#B3DFEF;
  --sky-100:#DCEEF7;

  /* Neutrals */
  --white:#FFFFFF;
  --ink-900:#0B2745;
  --ink-700:#2E3F52;
  --ink-500:#5A6B7B;
  --ink-400:#8A99A8;
  --ink-300:#C0CAD4;
  --ink-200:#E1E8EF;
  --ink-100:#F0F4F8;
  --ink-50 :#F7FAFC;

  /* Semantic */
  --success:#3FA76A;
  --warning:#E9A23B;
  --danger :#D24B4B;
  --info   :#2A85B8;

  /* Brand alias - mantém compatibilidade com classes legadas */
  --brand:#08538D;
  --brand-dark:#064270;
  --brand-light:#0A6AA3;

  /* ---------- TYPE ---------- */
  --font-sans:"Plus Jakarta Sans","Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  /* ---------- SPACING ---------- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --s-9:96px; --s-10:128px;

  /* ---------- RADII ---------- */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:24px;
  --r-2xl:32px;
  --r-full:9999px;

  /* ---------- SHADOWS ---------- */
  --sh-xs:0 1px 2px rgba(11,39,69,.06);
  --sh-sm:0 2px 6px rgba(11,39,69,.08);
  --sh-md:0 8px 20px rgba(11,39,69,.08);
  --sh-lg:0 16px 40px rgba(11,39,69,.12);
  --sh-xl:0 24px 60px rgba(11,39,69,.16);

  /* ---------- MOTION ---------- */
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur-fast:120ms;
  --dur:200ms;
  --dur-slow:320ms;
}

/* ---------- BASE ---------- */
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.005em;
}

/* ---------- BRAND COMPATIBILIDADE (Tailwind classes legadas) ---------- */
.bg-brand{background-color:var(--brand)}
.text-brand{color:var(--sky-400)}
.border-brand{border-color:var(--brand)}
.hover\:bg-brand-dark:hover{background-color:var(--brand-dark)}
.focus\:ring-brand:focus{--tw-ring-color:var(--brand)}

/* ---------- HEADINGS DO DESIGN SYSTEM ---------- */
.ds-eyebrow{
  display:inline-block;font-size:.75rem;font-weight:600;
  color:var(--teal-500);text-transform:uppercase;letter-spacing:.1em;
}
.ds-title{
  font-weight:800;line-height:1.15;color:var(--ink-900);
  letter-spacing:-.02em;
}
.ds-title em{color:var(--sky-600);font-style:italic;font-weight:700}
.ds-lead{color:var(--ink-500);line-height:1.55}

/* ---------- HERO GRADIENT (replica o gradiente de marca) ---------- */
.hero-bg,
.hero-bg-empresa,
.hero-bg-contato,
.hero-bg-produtos{
  background:linear-gradient(120deg,var(--navy-900) 0%,var(--navy-800) 50%,var(--navy-600) 100%);
  position:relative;
  overflow:hidden;
}

.hero-bg::before,
.hero-bg-empresa::before,
.hero-bg-contato::before,
.hero-bg-produtos::before{
  content:"";
  position:absolute;
  inset:-30% -20% auto auto;
  width:60%;height:120%;
  background:linear-gradient(80deg,transparent,rgba(255,255,255,.10) 40%,transparent 60%);
  transform:rotate(-18deg);
  pointer-events:none;
  z-index:0;
}

.hero-bg::after,
.hero-bg-empresa::after,
.hero-bg-contato::after,
.hero-bg-produtos::after{
  content:"";
  position:absolute;
  inset:auto auto -40% -20%;
  width:80%;height:120%;
  background:radial-gradient(closest-side,rgba(139,193,221,.25),transparent 70%);
  pointer-events:none;
  z-index:0;
}

.hero-bg > *,
.hero-bg-empresa > *,
.hero-bg-contato > *,
.hero-bg-produtos > *{position:relative;z-index:1}

/* ---------- BOTÕES (pílula) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:var(--font-sans);font-weight:600;font-size:.875rem;
  padding:12px 22px;border-radius:var(--r-full);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;line-height:1;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-arrow::after{content:"→";font-weight:700;transition:transform var(--dur) var(--ease)}
.btn-arrow:hover::after{transform:translateX(3px)}

.btn-primary{
  background:var(--sky-500);color:var(--white);
  box-shadow:0 6px 18px rgba(30,157,214,.35);
}
.btn-primary:hover{
  background:var(--sky-600);
  box-shadow:0 10px 24px rgba(30,157,214,.45);
}

.btn-secondary{background:var(--navy-800);color:var(--white)}
.btn-secondary:hover{background:var(--navy-700)}

.btn-outline-dark{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)}
.btn-outline-dark:hover{background:rgba(255,255,255,.08);border-color:var(--white)}

.btn-outline{background:transparent;color:var(--navy-800);border-color:var(--ink-300)}
.btn-outline:hover{background:var(--white);border-color:var(--navy-800);box-shadow:var(--sh-sm)}

.btn-lg{padding:16px 28px;font-size:1rem}
.btn-sm{padding:8px 16px;font-size:.75rem}

/* CTA grande (substitui "bg-brand text-white px-8 py-4 rounded-lg") */
.btn-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  background:var(--sky-500);color:var(--white);
  font-weight:700;font-size:1.0625rem;
  padding:16px 32px;border-radius:var(--r-full);
  box-shadow:0 10px 25px rgba(30,157,214,.35);
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  text-decoration:none;
}
.btn-cta:hover{
  background:var(--sky-600);
  box-shadow:0 14px 32px rgba(30,157,214,.45);
  transform:translateY(-2px);
}
.btn-cta-light{
  background:var(--white);color:var(--navy-800);
  box-shadow:0 10px 25px rgba(11,39,69,.18);
}
.btn-cta-light:hover{
  background:var(--ink-100);color:var(--navy-900);
  box-shadow:0 14px 32px rgba(11,39,69,.25);
}

/* "Tipo de Usuário" pill no header */
.btn-user-type{
  background:linear-gradient(90deg,var(--navy-800),var(--navy-600));
  color:var(--white);font-weight:600;
  padding:10px 22px;border-radius:var(--r-full);
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 4px 14px rgba(8,83,141,.25);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
  border:none;cursor:pointer;
}
.btn-user-type:hover{
  box-shadow:0 6px 18px rgba(8,83,141,.4);
  transform:translateY(-1px);
}

/* "Saiba mais" sobre cards */
.btn-solution{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:6px;
  width:fit-content;
  padding:10px 22px;
  border:1.5px solid var(--navy-800);
  border-radius:var(--r-full);
  color:var(--navy-800);
  font-weight:600;font-size:.875rem;
  transition:all var(--dur-slow) var(--ease);
  z-index:1;
  background:transparent;
  text-decoration:none;
}
.btn-solution:hover{
  color:var(--white);
  background:var(--navy-800);
  box-shadow:0 6px 20px rgba(8,83,141,.35);
}
.btn-solution::before{
  content:'';
  position:absolute;
  top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-30deg);
  transition:left .8s cubic-bezier(.77,0,.175,1);
}
.btn-solution:hover::before{left:150%}

/* ---------- CARDS ---------- */
.ds-card{
  background:var(--white);
  border-radius:var(--r-xl);
  padding:var(--s-6);
  box-shadow:var(--sh-sm);
  border:1px solid var(--ink-200);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.ds-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}

.ds-card-icon{
  width:56px;height:56px;border-radius:var(--r-full);
  display:grid;place-items:center;margin-bottom:var(--s-4);
  background:var(--sky-100);color:var(--navy-800);
}

/* Card "solução" da home (substitui o pattern Tailwind) */
.solution-card{
  background:var(--white);
  border-radius:var(--r-xl);
  padding:var(--s-6) var(--s-5);
  box-shadow:var(--sh-sm);
  border:1px solid var(--ink-200);
  display:flex;flex-direction:column;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.solution-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-lg);
}
.solution-card .solution-icon-wrap{
  width:56px;height:56px;
  border-radius:var(--r-full);
  background:var(--sky-100);
  color:var(--navy-800);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--s-4);
}

/* ---------- TIMELINE (empresa) ---------- */
.timeline-line-wrapper{
  background-color:var(--ink-200);
}
.timeline-line-progress{
  background-color:var(--navy-800);
}
.timeline-item::before{
  background-color:var(--ink-200);
  border:3px solid var(--white);
  box-shadow:var(--sh-xs);
}
.timeline-item.visible::before{
  background-color:var(--navy-800);
  box-shadow:0 0 0 4px rgba(8,83,141,.15);
}

/* ---------- NAV LINKS (sublinhado animado) ---------- */
.nav-link::after{
  background-color:var(--navy-800) !important;
}

/* ---------- BADGES ---------- */
.ds-badge{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:6px 14px;border-radius:var(--r-full);
  font-size:.75rem;font-weight:600;line-height:1;
}
.ds-badge-sky{background:var(--sky-100);color:var(--sky-600)}
.ds-badge-navy{background:var(--navy-800);color:var(--white)}
.ds-badge-teal{background:var(--teal-100);color:var(--navy-800)}

/* ---------- INPUTS / FORMS ---------- */
.ds-input,
.ds-textarea,
.ds-select{
  font-family:var(--font-sans);font-size:.9375rem;
  padding:12px 16px;
  border:1.5px solid var(--ink-200);
  border-radius:var(--r-md);
  background:var(--white);
  color:var(--ink-900);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  width:100%;
}
.ds-input::placeholder,
.ds-textarea::placeholder{color:var(--ink-400)}
.ds-input:focus,
.ds-textarea:focus,
.ds-select:focus{
  outline:none;
  border-color:var(--navy-800);
  box-shadow:0 0 0 4px rgba(8,83,141,.18);
}

/* ---------- TIPOGRAFIA HELPERS ---------- */
.ds-h1{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:800;line-height:1.05;letter-spacing:-.025em}
.ds-h2{font-size:clamp(2rem,4vw,2.75rem);font-weight:800;line-height:1.15;letter-spacing:-.02em}
.ds-h3{font-size:1.5rem;font-weight:700;line-height:1.3;letter-spacing:-.01em}

/* ---------- ELEVATIONS / UTILS ---------- */
.ds-shadow-sm{box-shadow:var(--sh-sm)}
.ds-shadow-md{box-shadow:var(--sh-md)}
.ds-shadow-lg{box-shadow:var(--sh-lg)}

.ds-rounded-xl{border-radius:var(--r-xl)}
.ds-rounded-2xl{border-radius:var(--r-2xl)}
.ds-rounded-full{border-radius:var(--r-full)}

/* ---------- ANIMAÇÕES ---------- */
[data-animate]{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s cubic-bezier(.25,.46,.45,.94),transform .8s cubic-bezier(.25,.46,.45,.94);
}
[data-animate].visible{
  opacity:1;
  transform:translateY(0);
}

@keyframes float{
  0%{transform:translateY(0)}
  50%{transform:translateY(-15px)}
  100%{transform:translateY(0)}
}

@keyframes icon-jiggle{
  0%{transform:rotate(0) scale(1)}
  25%{transform:rotate(-8deg) scale(1.1)}
  50%{transform:rotate(8deg) scale(1.1)}
  75%{transform:rotate(-4deg) scale(1.1)}
  100%{transform:rotate(0) scale(1)}
}
.solution-card:hover .solution-icon{
  animation:icon-jiggle .5s ease-in-out;
}

/* ---------- SECTION DIVIDERS ---------- */
.ds-section{padding:var(--s-9) 0}
.ds-section-tight{padding:var(--s-8) 0}