/* ==========================================================
   YANSIX — SITE.CSS
   Design system compartilhado
   Usado por: solucoes.html, cases.html, blog.html, contato2.html

   PERFORMANCE:
   - Sem dependência de Google Fonts
   - Fonte do sistema
   - Contraste AA reforçado
   - Acessibilidade aprimorada
   - Mantém identidade YANSIX
   ========================================================== */

:root{
  --purple:#5B3DF5;
  --purple-dark:#1a1533;
  --ink:#0d0a1f;
  --bg-soft:#eef0fb;
  --bg-soft-2:#f6f7fc;
  --text:#171326;
  --text-muted:#5f5b73;
  --white:#ffffff;

  /* Cores de acessibilidade no rodapé */
  --footer-text:#d4d1e5;
  --footer-muted:#b9b5d0;
  --footer-heading:#aaa5c5;

  --radius-lg:20px;
  --radius-md:14px;
}

/* ================= RESET ================= */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  color:var(--text);
  background:var(--bg-soft-2);

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  text-rendering:optimizeLegibility;
}

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

ul{
  list-style:none;
}

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

button,
input,
select,
textarea{
  font:inherit;
}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}


/* ==========================================================
   HEADER
   ========================================================== */

header.topbar{
  background:var(--purple-dark);
  padding:14px 24px;
}

.nav-wrap{
  max-width:1180px;
  margin:0 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;
}

.logo-card{
  background:var(--white);
  border-radius:16px;

  padding:10px 22px 10px 14px;

  display:flex;
  align-items:center;

  gap:10px;
}

.logo-card img{
  width:34px;
  height:34px;
}

.logo-card .logo-wordmark{
  width:auto;
  height:20px;
}

.logo-card span{
  font-weight:800;
  font-size:20px;
  letter-spacing:1px;
  color:var(--ink);
}

nav.main-nav ul{
  display:flex;
  align-items:center;
  gap:32px;
}

nav.main-nav a{
  color:#d8d5e8;
  font-size:15px;
  font-weight:500;

  transition:color .2s;

  position:relative;
  padding-bottom:6px;
}

nav.main-nav a:hover{
  color:var(--white);
}

nav.main-nav a.active{
  color:var(--white);
}

.nav-search-btn{
  display:flex;
  align-items:center;
  justify-content:center;

  opacity:.9;

  transition:opacity .2s;
}

.nav-search-btn:hover{
  opacity:1;
}

nav.main-nav a.active::after{
  content:"";

  position:absolute;

  bottom:0;
  left:50%;

  transform:translateX(-50%);

  width:5px;
  height:5px;

  border-radius:50%;

  background:var(--purple);
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.btn{
  display:inline-flex;
  align-items:center;

  gap:8px;

  font-weight:600;
  font-size:15px;

  border-radius:12px;

  padding:12px 22px;

  border:none;

  cursor:pointer;

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

  font-family:inherit;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  background:var(--purple);
  color:var(--white);

  box-shadow:0 8px 20px rgba(91,61,245,.35);
}

.btn-primary:hover{
  background:#4c2fe0;
}

.btn-primary:disabled{
  opacity:.65;
  cursor:not-allowed;
  transform:none;
}

.btn-outline{
  background:var(--white);
  color:var(--ink);

  border:1px solid #e3e1f0;
}

.btn-outline:hover{
  background:#f3f2fb;
}

.btn-ghost-dark{
  background:transparent;
  color:var(--white);

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


/* ==========================================================
   PAGE HERO
   ========================================================== */

section.page-hero{
  background:
    linear-gradient(
      135deg,
      var(--purple-dark) 0%,
      #241c47 60%,
      var(--purple-dark) 100%
    );

  padding:64px 24px 60px;

  position:relative;
  overflow:hidden;
}

section.page-hero::before{
  content:"";

  position:absolute;

  top:-120px;
  right:-120px;

  width:360px;
  height:360px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(91,61,245,.35),
      transparent 70%
    );

  pointer-events:none;
}

section.page-hero::after{
  content:"";

  position:absolute;

  bottom:-160px;
  left:-100px;

  width:320px;
  height:320px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(91,61,245,.22),
      transparent 70%
    );

  pointer-events:none;
}

.page-hero-wrap{
  max-width:1180px;

  margin:0 auto;

  position:relative;

  z-index:1;

  text-align:center;
}

.page-hero .eyebrow{
  font-size:13px;
  font-weight:700;

  letter-spacing:1.5px;

  color:#b8afff;

  margin-bottom:16px;
}

.page-hero h1{
  font-size:38px;
  line-height:1.2;

  font-weight:700;

  color:var(--white);

  margin-bottom:16px;

  letter-spacing:-0.5px;
}

.page-hero p.lead{
  font-size:16px;

  color:#d1cde5;

  line-height:1.6;

  max-width:600px;

  margin:0 auto;
}

.breadcrumb{
  display:flex;

  justify-content:center;

  gap:8px;

  font-size:13px;

  color:#b8b3d1;

  margin-bottom:18px;
}

.hero-location{
  font-size:13px;

  color:#c2bdd9;

  max-width:600px;

  margin:10px auto 0;

  line-height:1.5;
}

.hero-location a{
  color:#dedaf0;
  text-decoration:underline;
}

.hero-location a:hover{
  color:var(--white);
}

.breadcrumb a{
  color:#d1cde5;

  transition:color .2s;
}

.breadcrumb a:hover{
  color:var(--white);
}


/* ==========================================================
   SOLUTION DETAIL PAGES
   ========================================================== */

.detail-hero-icon{
  width:64px;
  height:64px;

  border-radius:16px;

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

  display:flex;
  align-items:center;
  justify-content:center;

  margin:0 auto 20px;
}

.detail-hero-icon svg{
  width:32px;
  height:32px;

  stroke:var(--white);
}

.page-hero .hero-ctas{
  display:flex;

  gap:16px;

  justify-content:center;

  flex-wrap:wrap;

  margin-top:28px;
}


/* ==========================================================
   BENEFITS
   ========================================================== */

.benefits-grid{
  display:grid;

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

  gap:16px;

  max-width:920px;

  margin:0 auto;
}

.benefit-card{
  display:flex;

  gap:14px;

  align-items:flex-start;

  background:var(--white);

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

  padding:22px;

  box-shadow:0 8px 20px rgba(30,20,80,.05);

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

.benefit-card:hover{
  transform:translateY(-3px);

  box-shadow:
    0 12px 26px rgba(30,20,80,.09);
}

.benefit-card .check-lg{
  flex:none;

  width:36px;
  height:36px;

  border-radius:10px;

  background:var(--bg-soft);

  color:var(--purple);

  display:flex;

  align-items:center;
  justify-content:center;

  font-weight:800;
  font-size:15px;
}

.benefit-card h4{
  font-size:14.5px;

  font-weight:700;

  color:var(--ink);

  margin-bottom:4px;
}

.benefit-card p{
  font-size:13px;

  color:var(--text-muted);

  line-height:1.55;
}


/* ==========================================================
   PROCESS
   ========================================================== */

.process-steps{
  display:grid;

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

  gap:20px;

  max-width:1180px;

  margin:0 auto;
}

.process-step{
  background:var(--white);

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

  padding:26px 22px;

  box-shadow:0 8px 20px rgba(30,20,80,.05);

  position:relative;

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

.process-step:hover{
  transform:translateY(-3px);

  box-shadow:
    0 12px 26px rgba(30,20,80,.09);
}

.process-step .step-num{
  width:36px;
  height:36px;

  border-radius:50%;

  background:var(--purple);

  color:var(--white);

  display:flex;

  align-items:center;
  justify-content:center;

  font-weight:800;

  font-size:14px;

  margin-bottom:14px;
}

.process-step h4{
  font-size:15px;

  font-weight:700;

  color:var(--ink);

  margin-bottom:6px;
}

.process-step p{
  font-size:13px;

  color:var(--text-muted);

  line-height:1.55;
}


/* ==========================================================
   TIMELINE
   ========================================================== */

.timeline{
  max-width:820px;

  margin:0 auto;

  display:flex;

  flex-direction:column;
}

.timeline-item{
  display:flex;

  gap:20px;

  position:relative;

  padding-bottom:32px;
}

.timeline-item:last-child{
  padding-bottom:0;
}

.timeline-marker{
  flex:none;

  display:flex;

  flex-direction:column;

  align-items:center;

  padding-top:4px;
}

.timeline-dot{
  width:14px;
  height:14px;

  border-radius:50%;

  background:var(--purple);

  border:3px solid var(--bg-soft);

  flex:none;
}

.timeline-line{
  flex-grow:1;

  width:2px;

  background:#e3e1f0;

  margin-top:4px;
}

.timeline-item:last-child .timeline-line{
  display:none;
}

.timeline-content{
  background:var(--white);

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

  padding:18px 22px;

  box-shadow:0 8px 20px rgba(30,20,80,.05);

  flex-grow:1;
}

.timeline-content .timeline-tag{
  font-size:11.5px;

  font-weight:700;

  letter-spacing:.5px;

  color:var(--purple);

  margin-bottom:4px;

  display:block;
}

.timeline-content h4{
  font-size:15.5px;

  font-weight:700;

  color:var(--ink);

  margin-bottom:6px;
}

.timeline-content p{
  font-size:13.5px;

  color:var(--text-muted);

  line-height:1.6;
}


/* ==========================================================
   AUDIENCE
   ========================================================== */

.audience-grid{
  display:grid;

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

  gap:20px;

  max-width:1180px;

  margin:0 auto;
}

.audience-card{
  background:var(--white);

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

  padding:28px 24px;

  text-align:center;

  box-shadow:0 8px 20px rgba(30,20,80,.05);

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

.audience-card:hover{
  transform:translateY(-3px);

  box-shadow:
    0 12px 26px rgba(30,20,80,.09);
}

.audience-card .icon-box{
  width:48px;
  height:48px;

  border-radius:12px;

  background:var(--bg-soft);

  display:flex;

  align-items:center;
  justify-content:center;

  margin:0 auto 16px;
}

.audience-card .icon-box svg{
  width:24px;
  height:24px;

  stroke:var(--purple);
}

.audience-card h4{
  font-size:15px;

  font-weight:700;

  color:var(--ink);

  margin-bottom:8px;
}

.audience-card p{
  font-size:13px;

  color:var(--text-muted);

  line-height:1.55;
}

.detail-intro{
  max-width:820px;

  margin:0 auto;

  text-align:center;

  font-size:15.5px;

  color:var(--text-muted);

  line-height:1.75;
}

.detail-intro strong{
  color:var(--ink);
}


/* ==========================================================
   SECTION TITLE
   ========================================================== */

.section-title{
  text-align:center;

  font-size:13px;

  font-weight:700;

  letter-spacing:2px;

  color:var(--purple);

  margin-bottom:12px;

  position:relative;
}

.section-title::after{
  content:"";

  display:block;

  width:36px;
  height:2px;

  background:var(--purple);

  margin:10px auto 0;

  opacity:.5;
}

.section-heading{
  text-align:center;

  font-size:28px;

  font-weight:700;

  color:var(--ink);

  max-width:640px;

  margin:0 auto 44px;

  letter-spacing:-0.3px;
}


/* ==========================================================
   GENERIC SECTION WRAPPERS
   ========================================================== */

section.block{
  padding:70px 24px;
}

section.block.alt{
  background:var(--bg-soft);
}


/* ==========================================================
   SOLUTION CARDS
   ========================================================== */

.solutions-grid{
  display:grid;

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

  gap:24px;

  max-width:1180px;

  margin:0 auto;
}

.solution-card-full{
  background:var(--white);

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

  padding:32px 28px;

  display:flex;

  flex-direction:column;

  gap:16px;

  box-shadow:0 10px 26px rgba(30,20,80,.06);

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

.solution-card-full:hover{
  transform:translateY(-4px);

  box-shadow:
    0 16px 34px rgba(30,20,80,.1);
}

.solution-visual{
  width:100%;
  height:150px;

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

  background:
    linear-gradient(
      135deg,
      var(--purple-dark),
      var(--purple) 130%
    );

  display:flex;

  align-items:center;
  justify-content:center;

  position:relative;

  overflow:hidden;
}

.solution-visual img.hex-pattern{
  position:absolute;

  right:-30px;
  bottom:-30px;

  width:150px;
  height:150px;

  opacity:.25;
}

.solution-visual .icon-box-lg{
  width:64px;
  height:64px;

  border-radius:16px;

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

  display:flex;

  align-items:center;
  justify-content:center;

  position:relative;

  z-index:1;
}

.solution-visual .icon-box-lg svg{
  width:32px;
  height:32px;

  stroke:var(--white);
}

.solution-card-full h3{
  font-size:19px;

  font-weight:700;

  color:var(--ink);
}

.solution-card-full p.desc{
  font-size:14px;

  color:var(--text-muted);

  line-height:1.6;
}

.benefit-list{
  display:flex;

  flex-direction:column;

  gap:8px;

  margin:4px 0 6px;
}

.benefit-list li{
  display:flex;

  align-items:flex-start;

  gap:8px;

  font-size:13.5px;

  color:var(--text);

  line-height:1.5;
}

.benefit-list li .check{
  flex:none;

  width:18px;
  height:18px;

  border-radius:50%;

  background:var(--bg-soft);

  color:var(--purple);

  display:flex;

  align-items:center;
  justify-content:center;

  font-size:11px;

  font-weight:800;

  margin-top:1px;
}

.solution-card-full .card-ctas{
  display:flex;

  gap:10px;

  margin-top:auto;

  padding-top:8px;

  flex-wrap:wrap;
}

.solution-card-full .card-ctas .btn{
  padding:10px 18px;

  font-size:13.5px;
}

.card-arrow{
  color:var(--purple);

  font-weight:700;

  font-size:16px;
}


/* ==========================================================
   CASES
   ========================================================== */

.cases-grid{
  display:grid;

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

  gap:24px;

  max-width:1180px;

  margin:0 auto;
}

.case-card{
  background:var(--white);

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

  overflow:hidden;

  box-shadow:0 10px 26px rgba(30,20,80,.06);

  transition:transform .2s;

  display:flex;

  flex-direction:column;
}

.case-card:hover{
  transform:translateY(-4px);
}

.case-card img{
  width:100%;

  height:190px;

  object-fit:cover;
}

.case-info{
  padding:20px 22px 24px;

  display:flex;

  flex-direction:column;

  gap:6px;

  flex-grow:1;
}

.case-info h3{
  font-size:16px;

  font-weight:700;
}

.case-info .case-tag{
  font-size:12px;

  font-weight:700;

  letter-spacing:.5px;

  color:var(--purple);
}

.case-info p{
  font-size:13.5px;

  color:var(--text-muted);

  line-height:1.55;

  margin-bottom:6px;
}

.case-metrics{
  display:flex;

  gap:14px;

  padding:14px 0 4px;

  border-top:1px solid #efeef8;

  margin-top:6px;
}

.case-metrics div{
  flex:1;
}

.case-metrics strong{
  display:block;

  font-size:18px;

  font-weight:800;

  color:var(--purple);
}

.case-metrics span{
  font-size:11.5px;

  color:var(--text-muted);
}

.case-link{
  font-size:13.5px;

  font-weight:700;

  color:var(--purple);

  display:inline-flex;

  align-items:center;

  gap:6px;

  margin-top:auto;
}


/* ==========================================================
   TESTIMONIALS
   ========================================================== */

.testimonials-grid{
  display:grid;

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

  gap:24px;

  max-width:1180px;

  margin:0 auto;
}

.testimonial-card{
  background:var(--white);

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

  padding:28px 24px;

  box-shadow:0 10px 26px rgba(30,20,80,.06);

  display:flex;

  flex-direction:column;

  gap:14px;
}

.testimonial-stars{
  color:var(--purple);

  font-size:14px;

  letter-spacing:2px;
}

.testimonial-card p{
  font-size:14px;

  color:var(--text);

  line-height:1.65;

  flex-grow:1;
}

.testimonial-author{
  display:flex;

  align-items:center;

  gap:12px;
}

.testimonial-avatar{
  width:42px;
  height:42px;

  border-radius:50%;

  background:var(--purple-dark);

  color:var(--white);

  display:flex;

  align-items:center;
  justify-content:center;

  font-weight:700;

  font-size:14px;
}

.testimonial-author strong{
  display:block;

  font-size:13.5px;

  color:var(--ink);
}

.testimonial-author span{
  font-size:12px;

  color:var(--text-muted);
}


/* ==========================================================
   BLOG
   ========================================================== */

.blog-toolbar{
  max-width:1180px;

  margin:0 auto 40px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  flex-wrap:wrap;
}

.blog-categories{
  display:flex;

  gap:10px;

  flex-wrap:wrap;
}

.pill{
  font-size:13px;

  font-weight:600;

  padding:9px 18px;

  border-radius:999px;

  background:var(--white);

  color:var(--text-muted);

  border:1px solid #e3e1f0;

  cursor:pointer;

  transition:
    all .2s ease;
}

.pill:hover{
  border-color:var(--purple);

  color:var(--purple);
}

.pill.active{
  background:var(--purple);

  color:var(--white);

  border-color:var(--purple);
}

.blog-search{
  display:flex;

  align-items:center;

  gap:10px;

  background:var(--white);

  border:1px solid #e3e1f0;

  border-radius:12px;

  padding:10px 16px;

  min-width:240px;
}

.blog-search svg{
  width:16px;
  height:16px;

  stroke:var(--text-muted);

  flex:none;
}

.blog-search input{
  border:none;

  outline:none;

  font-family:inherit;

  font-size:13.5px;

  color:var(--text);

  background:transparent;

  width:100%;
}

.blog-search input::placeholder{
  color:#77738b;
}

.blog-featured{
  max-width:1180px;

  margin:0 auto 50px;

  background:var(--white);

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

  overflow:hidden;

  box-shadow:
    0 14px 34px rgba(30,20,80,.08);

  display:grid;

  grid-template-columns:1.1fr 1fr;
}

.blog-featured img{
  width:100%;

  height:100%;

  min-height:280px;

  object-fit:cover;
}

.blog-featured-info{
  padding:36px 34px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  gap:14px;
}

.blog-featured-info .blog-date{
  font-size:12px;

  font-weight:700;

  letter-spacing:.5px;

  color:var(--purple);
}

.blog-featured-info h2{
  font-size:24px;

  font-weight:700;

  color:var(--ink);

  line-height:1.3;
}

.blog-featured-info p{
  font-size:14px;

  color:var(--text-muted);

  line-height:1.6;
}

.blog-grid{
  display:grid;

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

  gap:24px;

  max-width:1180px;

  margin:0 auto 50px;
}

.blog-card{
  background:var(--white);

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

  overflow:hidden;

  box-shadow:0 10px 26px rgba(30,20,80,.06);

  transition:transform .2s;

  display:flex;

  flex-direction:column;
}

.blog-card:hover{
  transform:translateY(-4px);
}

.blog-card img{
  width:100%;

  height:150px;

  object-fit:cover;
}

.blog-card .blog-visual-alt{
  width:100%;

  height:150px;

  background:
    linear-gradient(
      135deg,
      var(--purple-dark),
      var(--purple) 140%
    );

  display:flex;

  align-items:center;
  justify-content:center;
}

.blog-card .blog-visual-alt svg{
  width:44px;
  height:44px;

  stroke:rgba(255,255,255,.85);
}

.blog-info{
  padding:18px 20px 22px;

  display:flex;

  flex-direction:column;

  gap:4px;

  flex-grow:1;
}

.blog-category-tag{
  font-size:11px;

  font-weight:700;

  letter-spacing:.5px;

  color:var(--purple);

  margin-bottom:4px;
}

.blog-date{
  font-size:12px;

  font-weight:700;

  letter-spacing:.5px;

  color:var(--text-muted);

  margin-bottom:8px;

  display:block;
}

.blog-info h3{
  font-size:15.5px;

  font-weight:700;

  line-height:1.4;

  margin-bottom:14px;
}

.blog-link{
  font-size:13.5px;

  font-weight:700;

  color:var(--purple);

  display:inline-flex;

  align-items:center;

  gap:6px;

  margin-top:auto;
}


/* ==========================================================
   PAGINATION
   ========================================================== */

.pagination{
  display:flex;

  justify-content:center;

  align-items:center;

  gap:10px;

  max-width:1180px;

  margin:0 auto;
}

.page-btn{
  width:38px;
  height:38px;

  border-radius:10px;

  background:var(--white);

  border:1px solid #e3e1f0;

  color:var(--text-muted);

  font-size:13.5px;

  font-weight:600;

  display:flex;

  align-items:center;
  justify-content:center;

  cursor:pointer;

  transition:all .2s ease;
}

.page-btn:hover{
  border-color:var(--purple);

  color:var(--purple);
}

.page-btn.active{
  background:var(--purple);

  color:var(--white);

  border-color:var(--purple);
}

.page-btn.nav-arrow{
  width:auto;

  padding:0 14px;

  gap:6px;
}


/* ==========================================================
   FORM
   ========================================================== */

.form-card{
  max-width:760px;

  margin:0 auto;

  background:var(--white);

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

  padding:40px;

  box-shadow:
    0 14px 34px rgba(30,20,80,.08);
}

.form-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:18px;
}

.form-field{
  display:flex;

  flex-direction:column;

  gap:8px;
}

.form-field.full{
  grid-column:1 / -1;
}

.form-field label{
  font-size:13px;

  font-weight:700;

  color:var(--ink);
}

.form-field input,
.form-field select,
.form-field textarea{
  font-family:inherit;

  font-size:14px;

  color:var(--text);

  background:var(--bg-soft-2);

  border:1px solid #e3e1f0;

  border-radius:12px;

  padding:13px 16px;

  outline:none;

  transition:
    border-color .2s ease,
    background .2s ease;

  resize:vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:var(--purple);

  background:var(--white);
}

.form-field input::placeholder,
.form-field textarea::placeholder{
  color:#77738b;
}

.form-submit-row{
  display:flex;

  align-items:center;

  gap:18px;

  flex-wrap:wrap;

  margin-top:8px;
}

.form-section-title{
  font-size:11px;

  letter-spacing:1px;

  color:var(--purple);

  font-weight:700;

  text-transform:uppercase;

  margin:0 0 4px;
}

.form-section-heading{
  font-size:19px;

  font-weight:700;

  color:var(--ink);

  margin-bottom:22px;

  padding-bottom:14px;

  border-bottom:1px solid #ece9f7;
}

.form-card + .form-card{
  margin-top:24px;
}

.option-group{
  display:flex;

  flex-wrap:wrap;

  gap:10px;
}

.option-pill{
  display:flex;

  align-items:center;

  gap:8px;

  background:var(--bg-soft-2);

  border:1px solid #e3e1f0;

  border-radius:10px;

  padding:11px 16px;

  font-size:13.5px;

  color:var(--text);

  cursor:pointer;

  transition:
    border-color .2s ease,
    background .2s ease;
}

.option-pill:hover{
  border-color:var(--purple);
}

.option-pill input{
  accent-color:var(--purple);

  width:16px;
  height:16px;

  flex-shrink:0;
}

.form-hint{
  font-size:12.5px;

  color:var(--text-muted);

  margin-top:-8px;

  margin-bottom:4px;
}

.form-wait-msg{
  display:none;

  font-size:13px;

  color:var(--text-muted);

  background:var(--bg-soft);

  border-radius:10px;

  padding:12px 16px;

  line-height:1.5;
}

.form-wait-msg.show{
  display:block;
}

#formMensagem,
#obMensagem{
  margin-top:16px;
}

#formMensagem .success-message,
#obMensagem .success-message{
  background:#e8f8ef;

  color:#177a45;

  border-radius:12px;

  padding:14px 18px;

  font-size:13.5px;

  line-height:1.5;
}

#formMensagem .error-message,
#obMensagem .error-message{
  background:#fdeaea;

  color:#a3271f;

  border-radius:12px;

  padding:14px 18px;

  font-size:13.5px;

  line-height:1.5;
}


/* ==========================================================
   CONTACT
   ========================================================== */

.contact-info-grid{
  display:grid;

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

  gap:20px;

  max-width:1180px;

  margin:0 auto;
}

.contact-info-card{
  background:var(--white);

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

  padding:26px 24px;

  display:flex;

  flex-direction:column;

  gap:10px;

  box-shadow:
    0 10px 26px rgba(30,20,80,.06);
}

.contact-info-card .icon-box{
  width:44px;
  height:44px;

  border-radius:12px;

  background:var(--bg-soft);

  display:flex;

  align-items:center;
  justify-content:center;

  color:var(--purple);
}

.contact-info-card .icon-box svg{
  width:22px;
  height:22px;

  stroke:var(--purple);
}

.contact-info-card h4{
  font-size:15px;

  font-weight:700;

  color:var(--ink);
}

.contact-info-card p{
  font-size:13.5px;

  color:var(--text-muted);

  line-height:1.5;
}

.contact-info-card a{
  color:var(--purple);

  font-weight:600;

  font-size:13.5px;
}


/* ==========================================================
   FAQ
   ========================================================== */

.faq-list{
  max-width:820px;

  margin:0 auto;

  display:flex;

  flex-direction:column;

  gap:14px;
}

.faq-item{
  background:var(--white);

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

  box-shadow:0 8px 20px rgba(30,20,80,.05);

  overflow:hidden;
}

.faq-question{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:16px;

  padding:20px 24px;

  cursor:pointer;

  font-size:15px;

  font-weight:700;

  color:var(--ink);
}

.faq-question .faq-icon{
  flex:none;

  width:26px;
  height:26px;

  border-radius:50%;

  background:var(--bg-soft);

  color:var(--purple);

  display:flex;

  align-items:center;
  justify-content:center;

  font-size:16px;

  font-weight:700;

  transition:transform .25s ease;
}

.faq-item.open .faq-question .faq-icon{
  transform:rotate(45deg);
}

.faq-answer{
  max-height:0;

  overflow:hidden;

  transition:
    max-height .3s ease,
    padding .3s ease;

  padding:0 24px;
}

.faq-item.open .faq-answer{
  max-height:240px;

  padding:0 24px 22px;
}

.faq-answer p{
  font-size:13.5px;

  color:var(--text-muted);

  line-height:1.65;
}


/* ==========================================================
   CTA BAR
   ========================================================== */

section.cta-bar{
  background:var(--purple-dark);

  padding:36px 24px;
}

.cta-wrap{
  max-width:1180px;

  margin:0 auto;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:24px;

  flex-wrap:wrap;
}

.cta-left{
  display:flex;

  align-items:flex-start;

  gap:16px;

  max-width:420px;
}

.cta-quote{
  font-size:40px;

  line-height:1;

  color:var(--purple);

  font-weight:800;
}

.cta-left h3{
  color:var(--white);

  font-size:20px;

  font-weight:700;

  line-height:1.35;
}

.cta-mid p{
  color:#d0cce1;

  font-size:14px;

  line-height:1.6;

  max-width:340px;
}


/* ==========================================================
   FOOTER
   CONTRASTE AA REFORÇADO
   ========================================================== */

footer{
  background:var(--ink);

  padding:60px 24px 24px;

  color:var(--footer-text);
}

.footer-wrap{
  max-width:1180px;

  margin:0 auto;

  display:grid;

  grid-template-columns:
    1.2fr
    0.9fr
    1fr
    0.9fr
    1fr;

  gap:32px;

  padding-bottom:40px;

  border-bottom:
    1px solid rgba(255,255,255,.14);
}

.footer-logo{
  display:flex;

  align-items:center;

  gap:10px;

  margin-bottom:14px;
}

.footer-logo img{
  width:32px;
  height:32px;
}

.footer-logo span{
  font-weight:800;

  font-size:19px;

  color:var(--white);

  letter-spacing:1px;
}

footer h4{
  font-size:12px;

  font-weight:700;

  letter-spacing:1.5px;

  color:var(--footer-heading);

  margin-bottom:16px;
}

footer ul li{
  margin-bottom:10px;
}

footer ul li a{
  font-size:14px;

  color:var(--footer-text);

  transition:color .2s;
}

footer ul li a:hover{
  color:var(--white);
}

.footer-contact li{
  display:flex;

  align-items:center;

  gap:10px;

  font-size:14px;

  color:var(--footer-text);

  margin-bottom:12px;
}

.footer-contact a{
  color:var(--footer-text);
}

.footer-contact a:hover{
  color:var(--white);
}


/* ==========================================================
   FOOTER BOTTOM
   Corrige o contraste apontado pelo Lighthouse
   ========================================================== */

.footer-bottom{
  max-width:1180px;

  margin:0 auto;

  padding-top:22px;

  text-align:center;

  font-size:13px;

  color:var(--footer-muted);

  line-height:1.6;
}

.footer-bottom a{
  color:var(--footer-text);

  text-decoration:underline;

  text-decoration-color:rgba(255,255,255,.45);

  text-underline-offset:3px;
}

.footer-bottom a:hover{
  color:var(--white);
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

:focus-visible{
  outline:3px solid #9d8cff;

  outline-offset:3px;

  border-radius:4px;
}

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    transition:none !important;
    animation:none !important;
  }
}


/* ==========================================================
   RESPONSIVE — TABLET
   ========================================================== */

@media(max-width:900px){

  nav.main-nav{
    display:none;
  }

  .page-hero h1{
    font-size:28px;
  }

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

  .cases-grid,
  .blog-grid,
  .testimonials-grid,
  .contact-info-grid{
    grid-template-columns:1fr;
  }

  .blog-featured{
    grid-template-columns:1fr;
  }

  .blog-featured img{
    min-height:220px;
  }

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

  .footer-wrap{
    grid-template-columns:1fr 1fr;
  }

  .footer-wrap>div:first-child{
    grid-column:1 / -1;
  }

  .cta-wrap{
    flex-direction:column;

    align-items:flex-start;
  }

  .blog-toolbar{
    flex-direction:column;

    align-items:stretch;
  }

  .blog-search{
    min-width:0;
  }

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

  .process-steps{
    grid-template-columns:1fr 1fr;
  }

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


/* ==========================================================
   RESPONSIVE — MOBILE
   ========================================================== */

@media(max-width:600px){

  .container{
    padding-left:18px;
    padding-right:18px;
  }

  header.topbar{
    padding:12px 18px;
  }

  .logo-card{
    padding:8px 16px 8px 10px;
  }

  .logo-card img{
    width:30px;
    height:30px;
  }

  .logo-card span{
    font-size:18px;
  }

  section.page-hero{
    padding:48px 18px 46px;
  }

  .page-hero h1{
    font-size:26px;
  }

  section.block{
    padding:54px 18px;
  }

  .section-heading{
    font-size:24px;

    margin-bottom:32px;
  }

  .process-steps{
    grid-template-columns:1fr;
  }

  .form-card{
    padding:26px 20px;
  }

  .footer-wrap{
    grid-template-columns:1fr;
  }

  .footer-wrap>div:first-child{
    grid-column:auto;
  }

  .cta-left{
    max-width:none;
  }

  .cta-left h3{
    font-size:18px;
  }

  .blog-featured-info{
    padding:26px 22px;
  }

  .timeline-item{
    gap:14px;
  }

}