/* ===== Origem: <style> #0 ===== */
/* Scroll Dots (right side) */
.scroll-dots{position:fixed; right:14px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:10px; z-index:45}
.scroll-dots a{width:10px; height:10px; border-radius:999px; display:block;
  background:transparent; border:2px solid rgba(17,24,39,.65); position:relative; outline:none}
.scroll-dots a:hover,.scroll-dots a:focus{background:rgba(17,24,39,.85)}
.scroll-dots a.active{background:var(--brand-accent); border-color:var(--brand-accent)}
.scroll-dots a::after{
  content:attr(aria-label); position:absolute; right:140%; top:50%; transform:translateY(-50%);
  background:rgba(17,24,39,.92); color:#fff; font-size:.75rem; padding:4px 8px; border-radius:8px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s}
.scroll-dots a:hover::after, .scroll-dots a:focus::after{opacity:1; transform:translateY(-50%) translateX(-2px)}
@media (max-width: 900px){
  .scroll-dots{display:none}
}

    :root{--body:clamp(15px,1.6vw,16px); 
      --brand:#b71c1c; --brand-accent:#e53935; --brand-dark:#8e1414; --whatsapp:#25D366;
      --n900:#111827; --n800:#1f2937; --n700:#374151; --n600:#4B5563; --n500:#6B7280; --n300:#D1D5DB; --n200:#E5E7EB; --n100:#F3F4F6; --white:#fff;
      --title:'Sora', system-ui, -apple-system, sans-serif;
      --text:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
      --radius:16px; --radius-lg:20px; --shadow1:0 6px 24px rgba(0,0,0,.08);
      --maxw:1120px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0; font-family:var(--text); color:var(--n900); background:#fff}
    .container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
    h1,h2{font-family:var(--title)}
    h2{font-size:clamp(22px,3vw,30px); margin:0 0 16px}
    p{margin:0 0 8px}
    .lead{color:var(--n600)}
    .muted{color:var(--n600)}
    section{padding:64px 0}
    .gray{background:var(--n100)}

    /* Header */
    
    .topbar{display:flex; align-items:center; justify-content:space-between; padding:4px 0}
    .logo img{height:60px}
    nav ul{list-style:none; display:flex; gap:18px; padding:0; margin:0; align-items:center}
    nav a{color:#fff; text-decoration:none; font-weight:800}

    /* Header enhancements */
    header{position:sticky; top:0; z-index:40; background:linear-gradient(120deg, rgba(17,24,39,.96), rgba(15,23,42,.88)), repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0 12px, rgba(255,255,255,0) 12px 24px), #111827;}
    header::after{
      content:""; position:absolute; inset:0; pointer-events:none;
      background:
        repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 6px, rgba(255,255,255,0) 6px 14px);
      opacity:0.20;
    }
    /* Soft glow under logo only (no blur on logo) */
    .logo{position:relative}
    
    /* Nav states */
    nav a{color:#fff; text-decoration:none; font-weight:800; opacity:.95}
    nav a:hover, nav a:focus{opacity:1; text-decoration:underline}
    nav a[aria-current="page"]{text-decoration:underline; opacity:1}

    .cta-nav{background:#fff; color:var(--brand); padding:10px 14px; border-radius:12px}

    /* Buttons */
    .quick{display:flex; flex-wrap:wrap; gap:12px}
    .btn, a.btn{
      appearance:none; border:none; cursor:pointer;
      border-radius:16px; min-height:44px; padding:12px 18px; font-weight:800;
      transition:background .2s, transform .1s; outline:none; text-decoration:none;
      display:inline-flex; align-items:center; gap:10px; line-height:1;
    }
    .btn-primary{background:var(--brand-accent); color:#fff}
    .btn-primary:hover{background:var(--brand-dark)}
    .btn-gray{background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.4)}
    .btn-gray:hover{background:rgba(255,255,255,.28)}
    .btn-whatsapp{background:var(--whatsapp); color:#fff}

    /* Hero */
    .hero{color:#fff; background: linear-gradient(120deg, rgba(17,24,39,.85), rgba(183,28,28,.25)), url("/img/hero-zorza-tec.webp") center/cover no-repeat; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; padding:72px 0}
    .hero h1{font-size:clamp(30px,4.2vw,46px); margin:0 0 12px}
    .hero p{font-size:clamp(16px,2.2vw,18px); margin:0 0 20px}
    .hero-side{border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,0.36); color:var(--n900);
      border-radius:20px; padding:18px; backdrop-filter:blur(10px); box-shadow:var(--shadow1)}
    .t-item{display:none; opacity:0; transition:.25s}
    .t-item.active{display:block; opacity:1}
    .t-quote{font-style:italic; color:var(--n900)}
    .t-dots{display:flex; gap:8px; margin-top:8px}
    .t-dots button{width:8px;height:8px;border-radius:999px;border:none;background:#cbd5e1}
    .t-dots button[aria-current="true"]{background:var(--brand-accent)}

    /* Sobre badges */
    .badges{display:grid; gap:18px 28px; grid-template-columns:repeat(4,minmax(240px,1fr)); margin-top:18px}
    @media (max-width:1100px){.badges{grid-template-columns:repeat(3,minmax(220px,1fr))}}
    @media (max-width:860px){.badges{grid-template-columns:repeat(2,minmax(220px,1fr))}}
    @media (max-width:580px){.badges{grid-template-columns:1fr}}
    .badge{display:grid; grid-template-columns:36px 1fr; column-gap:12px}
    .badge .icon-dot{
      all:unset; display:grid; place-items:center; width:36px; height:36px; border-radius:12px;
      background:transparent !important; border:1.6px solid rgba(229,57,53,.28) !important; color:rgba(229,57,53,.82) !important;
    }
    .badge .icon-dot svg{width:20px; height:20px; display:block}
    .badge strong{margin-top:2px; font-size:15px}
    .badge .muted{margin-top:4px; display:block}

    /* Cards de serviços */
    .services{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
    .card{padding:18px; border:1px solid var(--n200); background:#fff; border-radius:20px; box-shadow:var(--shadow1)}
    .card .icon{width:42px; height:42px; border-radius:12px; background:rgba(183,28,28,.08); color:var(--brand-accent); display:grid; place-items:center; font-size:20px; margin-bottom:10px}
    details{border:1px solid var(--n200); border-radius:12px; padding:10px 12px; background:#fff}
    details+details{margin-top:10px}
    summary{cursor:pointer; font-weight:800; color:var(--n800)}
    
    details p{color:var(--n600); line-height:1.65; font-weight:400; font-size:var(--body)}

    
    /* === Footer com gradiente/textura igual ao topo === */
    
    /* === Footer com tarja idêntica ao topo (gradiente + listras diagonais + vinheta) === */
    footer{
      background:
        linear-gradient(120deg, rgba(17,24,39,.96), rgba(15,23,42,.88)),
        repeating-linear-gradient(135deg,
          rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 12px,
          rgba(255,255,255,0) 12px, rgba(255,255,255,0) 24px),
        radial-gradient(120% 180% at -20% -30%, rgba(255,255,255,.12), transparent 60%),
        radial-gradient(120% 180% at 120% 120%, rgba(0,0,0,.10), transparent 60%),
        #111827;
      color:#fff;
     position:relative; }

footer::after{
      content:""; position:absolute; inset:0; pointer-events:none;
      background:
        repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 6px, rgba(255,255,255,0) 6px 14px);
      opacity:.22;
    }


    .footer-inner{display:flex; flex-direction:column; gap:8px; align-items:center; padding:22px 0}

    @media (max-width:900px){
      .hero .inner{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; padding:72px 0}
      nav ul{display:none}
    }
  
    /* Cases slider */
    .cases{position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px}
    .cases-track{overflow:hidden; position:relative}
    .case{min-width:100%; transition:opacity .25s; display:none}
    .case.active{display:block}
    .cases-nav{background:#fff; border:1px solid var(--n200); border-radius:12px; width:40px; height:40px; display:grid; place-items:center; cursor:pointer}
    .cases-dots{display:flex; gap:8px; justify-content:center; margin-top:12px}
    .cases-dots button{width:8px;height:8px;border-radius:999px;border:none;background:#cbd5e1}
    .cases-dots button[aria-current="true"]{background:var(--brand-accent)}
    .case h3{margin:0 0 6px; font-size:clamp(16px,2.4vw,20px)}
    .case .lead{margin-bottom:8px}
    .case ul{margin:0; padding-left:18px; color:var(--n600)}
    
  
    /* === Footer (tarja com gradiente + logo grande + info comercial) === */
    
    /* === Footer com gradiente/textura igual ao topo === */
    
    /* === Footer com tarja idêntica ao topo (gradiente + listras diagonais + vinheta) === */
    


    .footer-wrap{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:18px;
      padding:28px 0 18px;
    }
    .footer-logo-big img{
      height:120px; /* conforme solicitado */
      width:auto;
      display:block;
    }
    .footer-info{
      width:100%;
      max-width:var(--maxw, 1120px);
      margin:0 auto;
      padding:6px 20px 8px;
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:14px 24px;
      align-items:start;
      justify-items:center;
      font-weight:600;
    }
    .footer-info .item{
      display:flex;
      align-items:center;
      gap:10px;
      text-align:center;
      line-height:1.4;
      white-space:normal;
    }
    .footer-info .item .ico{
      font-size:18px;
      opacity:.95;
    }
    .footer-copy{
      text-align:center;
      padding:10px 20px 24px;
      opacity:.92;
      font-size:.95rem;
      border-top:1px solid rgba(255,255,255,.18);
      width:100%;
    }
    @media (max-width: 900px){
      .footer-info{grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 18px;}
    }
    @media (max-width: 520px){
      .footer-info{grid-template-columns:1fr; gap:10px;}
      .footer-logo-big img{height:96px;}
    }

  
    /* === CTAs do Hero em linha única (desktop) === */
    @media (min-width: 900px){
      .hero .quick{display:flex; flex-wrap:wrap; gap:12px}
      .hero .quick .btn{ padding: 10px 12px; font-size: clamp(14px,1.6vw,16px); }
    }
    @media (max-width: 899.98px){
      .hero .quick{display:flex; flex-wrap:wrap; gap:12px}
    }

  
    /* Forçar layout: texto à esquerda, depoimentos à direita no Hero */
    .hero .inner{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; padding:72px 0}
    .hero .inner > div:first-child{grid-column:1}
    .hero .inner > .hero-side{grid-column:2}
    @media (max-width:900px){
      .hero .inner{grid-template-columns:1fr; padding:40px 0}
      .hero .inner > div:first-child,
      .hero .inner > .hero-side{grid-column:1 / -1}
    }

  
.hero-side strong{font-weight:800}

/* Refinos tipográficos — seção "O que fazemos" */
#servicos .lead{color:var(--n700)}
#servicos .services{gap:20px}
#servicos .card{padding:16px 18px}
#servicos .card strong{display:block; margin:6px 0 8px; font-family:var(--title); font-weight:700; font-size:18px; letter-spacing:-.15px; color:var(--n800)}
#servicos .card .icon{margin-bottom:8px}
#servicos .card details{background:#fff; border:1px solid var(--n200); border-radius:12px; padding:10px 12px}
#servicos .card details + details{margin-top:10px}
#servicos .card details summary{font-weight:600; color:var(--n900)}
#servicos .card p{margin-top:6px; color:var(--n700); line-height:1.6}


/* Refinos de espaçamento e efeitos — seção "O que fazemos" */
#servicos .services{gap:24px}
#servicos .card{padding:18px 20px}
#servicos .card details + details{margin-top:12px}

#servicos .card details{
  background:#fff; border:1px solid var(--n200);
  border-radius:12px; padding:10px 12px;
  transition:border-color .2s, box-shadow .2s;
}
#servicos .card details:hover{
  border-color:var(--n300);
  box-shadow:0 4px 16px rgba(0,0,0,.04);
}
#servicos .card details summary{
  list-style:none; cursor:pointer; font-weight:600; color:var(--n900);
}
#servicos .card details summary::-webkit-details-marker{display:none}
#servicos .card details summary{position:relative; padding-left:18px}
#servicos .card details summary::before{
  content:"▾"; position:absolute; left:0; top:0; line-height:1; color:var(--n700);
  transition:transform .2s ease;
}
#servicos .card details[open] summary::before{transform:rotate(180deg)}

#servicos .card details p{
  margin-top:8px; padding-top:8px; border-top:1px solid var(--n200);
  color:var(--n700); line-height:1.6;
}


/* Ícone em pílula suave — seção Serviços */
#servicos .card .icon{
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; font-size:18px;
  background:linear-gradient(#fff, #F9FAFB);
  border:1px solid var(--n200);
  box-shadow:0 6px 16px rgba(0,0,0,.04);
  margin-bottom:8px;
}


/* Ajustes finos solicitados (1, 2, 3) */
#servicos .card strong{ color:var(--n800); letter-spacing:-.15px }
#servicos .card details summary{ line-height:1.35 }
section{ scroll-margin-top: 90px }


/* === Casos de Sucesso — tipografia e respiro === */
#cases{padding:48px 0}
#cases .case h3{font-weight:700; letter-spacing:-.2px}
#cases .case ul li{line-height:1.6; color:var(--n700)}

/* === FAQ — hover/focus/chevron e leitura === */
#faq{padding:48px 0}
#faq details{
  border:1px solid var(--n200); border-radius:14px; background:#fff;
  transition:box-shadow .2s, border-color .2s;
}
#faq details + details{margin-top:12px}
#faq details:hover{border-color:var(--n300); box-shadow:0 6px 16px rgba(0,0,0,.05)}

#faq summary{
  font-weight:600; line-height:1.35; padding:14px 16px; cursor:pointer;
  position:relative; padding-left:28px;
}
#faq summary::-webkit-details-marker{display:none}
#faq summary:focus-visible{
  outline:2px solid var(--brand-accent); outline-offset:3px; border-radius:8px;
}
#faq summary::before{
  content:"▾"; position:absolute; left:10px; top:14px; color:var(--n700);
  transition:transform .2s; line-height:1;
}
#faq details[open] summary::before{transform:rotate(180deg)}

#faq details > *:not(summary){
  padding:0 16px 14px 16px; color:var(--n700); line-height:1.65;
}


/* === Casos de Sucesso — botões do slider + dots === */
#cases .cases-nav{
  width:44px; height:44px; border-radius:12px; border:1px solid var(--n200);
  background:#fff; color:var(--n800); display:grid; place-items:center;
  box-shadow:0 6px 16px rgba(0,0,0,.06); transition:transform .2s, border-color .2s, box-shadow .2s;
}
#cases .cases-nav:hover{ transform:translateY(-1px); border-color:var(--n300) }
#cases .cases-nav:focus-visible{ outline:2px solid var(--brand-accent); outline-offset:3px }
#cases .cases-nav:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none }

#cases .cases-dots button{
  width:10px; height:10px; border-radius:999px; background:transparent;
  border:2px solid rgba(17,24,39,.55); margin:0 6px; transition:background .2s, border-color .2s;
}
#cases .cases-dots button[aria-current="true"]{
  background:var(--brand-accent); border-color:var(--brand-accent);
}
#cases .cases-dots button:focus-visible{
  outline:2px solid var(--brand-accent); outline-offset:2px; border-radius:999px;
}


/* === Fale com a Zorzaneli — CTA final (Passo 1) === */
#contato{padding:56px 0 32px; scroll-margin-top:90px}
#contato .lead{max-width:640px; color:var(--n700)}
#contato .btn{min-height:48px; border-radius:16px; padding:.75rem 1.1rem}
#contato .btn-primary{
  box-shadow:0 8px 24px rgba(183,28,28,.18);
  transition:transform .12s, box-shadow .12s, background-color .12s;
}
#contato .btn-primary:hover{transform:translateY(-1px)}
#contato .btn-primary:active{transform:translateY(0); box-shadow:0 4px 14px rgba(183,28,28,.18)}
#contato .btn-primary:focus-visible{outline:2px solid var(--brand-accent); outline-offset:3px}


/* === Rodapé — refinamentos === */
footer{color:#E5E7EB; box-shadow:0 -1px 0 rgba(255,255,255,.06), 0 -12px 36px rgba(0,0,0,.18) inset}
footer a{color:#fff; text-decoration:none}
footer a:hover{text-decoration:underline}
.footer-logo-big{margin:18px 0 10px}
.footer-logo-big img{height:120px}
.footer-info{grid-template-columns:repeat(4, minmax(220px,1fr))}
.footer-info .item{justify-content:center}
.footer-info .ico{font-size:18px; line-height:1}
@media (max-width:900px){
  .footer-info{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .footer-info{grid-template-columns:1fr}
}
footer a:focus-visible{outline:2px solid var(--brand-accent); outline-offset:3px; border-radius:8px}


/* === Rodapé — alinhamento horizontal e nivelamento de texto === */
.footer-info{justify-items:start; text-align:left}
.footer-info .item{justify-content:flex-start; align-items:flex-start; gap:12px}
.footer-info .ico{width:20px; display:inline-flex; justify-content:center; margin-top:2px}
.footer-info .item > span:last-child{display:block}
.footer-info .item > span:last-child strong{display:block; line-height:1.2; margin-bottom:2px}


/* === Rodapé — suavidade de hierarquia e ritmo vertical === */
.footer-wrap{padding:18px 0 20px}
.footer-logo-big{margin:10px 0 8px}
.footer-info{row-gap:8px}
.f-item{line-height:1.35}
.f-item strong{color:#E2E8F0; font-weight:600}         /* label */
.footer-info .item > span:last-child{color:#fff; font-weight:700} /* valor */


/* === Rodapé — separadores verticais e copy refinado === */
@media (min-width:901px){
  .footer-info{position:relative}
  .footer-info .item{position:relative}
  .footer-info .item:not(:last-child)::after{
    content:""; position:absolute; right:-14px; top:4px; bottom:4px;
    width:1px; background:rgba(255,255,255,.08);
  }
}
.footer-copy{color:#CBD5E1; border-top:1px solid rgba(255,255,255,.10)}


/* === Rodapé — social + links rápidos + logo 110px === */
.footer-logo-big img{height:110px}
.footer-social{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin:6px 0 12px;
}
.footer-social a{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);
  color:#fff; text-decoration:none; font-size:.95rem; transition:background .15s, transform .12s, border-color .15s;
}
.footer-social a:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); transform:translateY(-1px)}
.footer-quick{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  margin:12px 0 4px;
}
.footer-quick a{color:#E5E7EB; text-decoration:none; padding:4px 8px; border-radius:8px}
.footer-quick a:hover{color:#fff; text-decoration:underline}


/* Social icon-only styling */
.footer-social{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:6px 0 12px}
.footer-social a{width:36px; height:36px; border-radius:999px; display:inline-grid; place-items:center;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); color:#fff;
  transition:background .15s, transform .12s, border-color .15s}
.footer-social a:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); transform:translateY(-1px)}
.footer-social svg{width:18px; height:18px}

/* Legal line */
.footer-legal{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; font-size:.95rem; margin:4px 0 4px}
.footer-legal a{color:#CBD5E1; text-decoration:none}
.footer-legal a:hover{color:#fff; text-decoration:underline}
.footer-legal a + a::before{content:"•"; opacity:.45; margin:0 6px 0 2px}


/* Quick links with separators */
.footer-quick{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:12px 0 6px}
.footer-quick a{color:#E5E7EB; text-decoration:none; padding:4px 6px; border-radius:8px; opacity:.92}
.footer-quick a:hover{color:#fff; text-decoration:underline}
.footer-quick a + a::before{content:"•"; opacity:.45; margin:0 6px 0 2px}


/* Footer alignment/readability refinements */
.footer-info{justify-items:start}
.footer-info .item{justify-content:flex-start; align-items:flex-start; text-align:left}
.footer-info .ico{width:20px; display:inline-flex; justify-content:center; margin-top:2px}
.footer-info .item > span:last-child strong{display:block; line-height:1.2; margin-bottom:2px; color:#E2E8F0; font-weight:600}
.footer-info .item > span:last-child span{display:block; color:#fff; font-weight:700}
.footer-social{margin:4px 0 10px}
.footer-quick{margin:10px 0 6px}
.footer-legal{margin:4px 0 6px}


/* Center logo + social inside footer-logo-big */
.footer-logo-big{display:flex; flex-direction:column; align-items:center; gap:8px}
.footer-logo-big img{display:block; margin:0 auto}


/* === Header refinements: CTA dinâmico + underline ativo/hover === */
.cta-nav{
  background:transparent; color:#fff; border:1px solid var(--brand-accent);
  min-height:44px; border-radius:16px; padding:.55rem .9rem; box-shadow:none;
  transition:background .15s, transform .12s, border-color .15s;
}
.cta-nav:hover{ background:var(--brand-accent); border-color:var(--brand-accent); transform:translateY(-1px) }

header{ transition:background-color .18s, backdrop-filter .18s, height .18s }
header.scrolled{ background:rgba(17,24,39,.96); backdrop-filter:saturate(140%) blur(6px) }
header.scrolled .cta-nav{ background:var(--brand-accent); border-color:var(--brand-accent) }

/* Menu underline elegante */
.topbar nav a{ position:relative }
.topbar nav a::after{
  content:""; position:absolute; left:8px; right:8px; bottom:-10px; height:2px;
  background:transparent; transform:scaleX(0); transform-origin:left; transition:transform .15s, background-color .15s;
}
.topbar nav a:hover::after{ background:var(--brand-accent); transform:scaleX(1) }
.topbar nav a.is-active::after{ background:var(--brand-accent); transform:scaleX(1) }


/* Mobile-only collapse for 'Sobre' section (non-intrusive to desktop) */
@media (max-width: 580px){
  #sobre .see-more{
    display:inline-block; margin-top:8px; font-size:14px; font-weight:500; color:rgba(255,255,255,.7);
    background:none; border:none; text-decoration:none; padding:6px 0;
  }
  #sobre .see-more:focus{outline:2px solid rgba(255,255,255,.2); outline-offset:2px; border-radius:6px}
  #sobre .badges .badge{display:none}
  /* Show selected 3 badges on mobile (1=Atendimento, 3=Tudo essencial, 4=Flexibilidade) */
  #sobre .badges .badge:nth-child(1),
  #sobre .badges .badge:nth-child(3),
  #sobre .badges .badge:nth-child(4){display:grid}
  /* Expand all when anchor is targeted */
  #sobre-mais:target + .badges .badge{display:grid}
  /* Change label text on expand using pseudo-elements */
  #sobre .see-more::after{content:' \2193'; opacity:.8}
  #sobre-mais:target ~ .see-more::after{content:' \2191'}
  #sobre-mais:target ~ .see-more{opacity:.8}
}
@media (min-width: 581px){
  #sobre .see-more{display:none !important}
  /* Ensure desktop always shows all */
  #sobre .badges .badge{display:grid !important}
}


/* ===== Origem: <style> #1 ===== */
summary {display:flex; align-items:center; justify-content:space-between;}
summary .chevron {
  font-size: .8em;
  color: #9CA3AF; /* neutro */
  margin-left: 6px;
  transition: transform .2s ease, color .2s ease;
}
details[open] summary .chevron {
  transform: rotate(180deg);
  color: #6B7280; /* cinza um pouco mais forte quando aberto */
}


/* ===== Origem: <style> #2 ===== */
/* Chevron ultra-sutil apenas na seção de Serviços */
#servicos summary {display:flex; align-items:center; justify-content:space-between;}
#servicos summary .chevron {
  font-size: .7em;
  color: #6B7280; /* cinza discreto */
  opacity: .5;
  margin-left: 6px;
  transition: transform .2s ease;
}
#servicos details[open] summary .chevron {
  transform: rotate(180deg);
}


/* ===== Origem: <style> #3 ===== */
/* Override suave: chevron ainda mais discreto apenas em Serviços (sem remover estilos anteriores) */
#servicos summary .chevron {
  font-size: .7em;
  color: var(--n300); /* cinza claro da paleta */
  opacity: .35;      /* mais transparente */
  margin-left: 6px;
  transition: transform .2s ease;
}
#servicos details[open] summary .chevron { transform: rotate(180deg); }


/* ===== Origem: <style> #4 ===== */
/* Botões translúcidos — APENAS no Hero (sobre imagem de fundo) */
.hero button.btn.btn-primary, .hero a.btn.btn-primary {
  background-color: rgba(255, 26, 26, 0.22) !important;
  border: 1px solid rgba(255, 26, 26, 0.55) !important;
  color: #fff !important;
  backdrop-filter: blur(3px) saturate(160%);
  transition: background-color .25s ease, border-color .25s ease;
}
.hero button.btn.btn-primary:hover, .hero a.btn.btn-primary:hover {
  background-color: rgba(255, 26, 26, 0.48) !important;
  border-color: rgba(255, 26, 26, 0.75) !important;
}

/* Botão primário sólido — fora do Hero (ex: #contato) */
button.btn.btn-primary:not(.hero *), a.btn.btn-primary:not(.hero *) {
  background-color: var(--brand-accent) !important;
  border: none !important;
  color: #fff !important;
  backdrop-filter: none;
  box-shadow: 0 8px 24px rgba(183,28,28,.22);
  transition: background-color .2s, transform .1s, box-shadow .2s;
}
button.btn.btn-primary:not(.hero *):hover, a.btn.btn-primary:not(.hero *):hover {
  background-color: var(--brand-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(183,28,28,.28) !important;
}
button.btn.btn-gray, a.btn.btn-gray {
  background-color: rgba(229, 231, 235, 0.20) !important;
  border: 1px solid rgba(229, 231, 235, 0.45) !important;
  color: #111827 !important;
  backdrop-filter: blur(3px) saturate(160%);
  transition: background-color .25s ease, border-color .25s ease;
}
button.btn.btn-gray:hover, a.btn.btn-gray:hover {
  background-color: rgba(229, 231, 235, 0.40) !important;
  border-color: rgba(229, 231, 235, 0.65) !important;
}
button.btn.btn-whatsapp, a.btn.btn-whatsapp {
  background-color: rgba(0, 210, 106, 0.22) !important;
  border: 1px solid rgba(0, 210, 106, 0.55) !important;
  color: #fff !important;
  backdrop-filter: blur(3px) saturate(160%);
  transition: background-color .25s ease, border-color .25s ease;
}
button.btn.btn-whatsapp:hover, a.btn.btn-whatsapp:hover {
  background-color: rgba(0, 210, 106, 0.48) !important;
  border-color: rgba(0, 210, 106, 0.75) !important;
}

/* Footer polido */
footer .footer-info,
footer .footer-info .item,
footer .footer-info .item span {
  color: #9CA3AF !important;
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 400 !important;
}
footer .footer-info .item strong {
  color: #A3A9B3 !important;
  font-weight: 500 !important;
  letter-spacing: .01em;
}
footer .footer-info .item a {
  color: #A7AFB8 !important;
  text-decoration: none;
  font-weight: 400 !important;
}
footer .footer-info .item a:hover,
footer .footer-info .item a:focus {
  color: #C3C9D1 !important;
  text-decoration: underline;
}
footer .footer-info .ico { opacity: .6 !important; }
footer .footer-info .item::after { content: none !important; display: none !important; }
footer .footer-legal,
footer .footer-legal a {
  color: #8B94A1 !important;
  font-size: 0.9rem;
}
footer .footer-legal a:hover,
footer .footer-legal a:focus {
  color: #B5BCC6 !important;
  text-decoration: underline;
}


/* ===== Origem: <style> #5 ===== */
/* === Etapa 1: Navegação mobile (hambúrguer + drawer) === */
.menu-toggle{
  display:none; margin-left:auto; margin-right:8px; background:transparent; border:0; padding:8px;
  width:44px; height:44px; border-radius:10px; cursor:pointer; align-items:center; justify-content:center;
}
.menu-toggle:focus-visible{ outline:2px solid var(--brand-accent); outline-offset:3px }
.menu-toggle .bar{ display:block; width:22px; height:2px; background:#fff; margin:3px 0; transition:transform .18s, opacity .18s }
@media (max-width:900px){
  .menu-toggle{ display:inline-flex }
  .topbar  /* já estava, aqui garantimos */
}

.backdrop{
  position:fixed; inset:0; background:rgba(17,24,39,.5); backdrop-filter:saturate(140%) blur(2px);
  z-index:70; opacity:0; transition:opacity .18s; 
}
.backdrop[data-open="true"]{ opacity:1 }

.drawer{
  position:fixed; top:0; right:0; height:100dvh; width:min(86%, 360px);
  background:#0F172A; color:#fff; z-index:80; transform:translateX(100%);
  transition:transform .18s ease-out; display:flex; flex-direction:column; padding:14px;
  box-shadow:-8px 0 24px rgba(0,0,0,.18);
}
.drawer[data-open="true"]{ transform:translateX(0) }
@media (prefers-reduced-motion: reduce){
  .drawer, .backdrop{ transition:none }
}

.drawer-header{ display:flex; align-items:center; justify-content:space-between; padding:6px 2px 10px }
.drawer-title{ font-family:var(--title); font-weight:800 }
.drawer-close{
  background:transparent; border:1px solid rgba(255,255,255,.28); color:#fff; width:36px; height:36px; border-radius:10px; cursor:pointer;
}
.drawer-close:focus-visible{ outline:2px solid var(--brand-accent); outline-offset:3px }

.drawer-list{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; overflow:auto }
.drawer-list a{
  display:block; padding:12px 10px; border-radius:12px; color:#fff; text-decoration:none; font-weight:800; line-height:1;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
}
.drawer-list a:hover{ background:rgba(255,255,255,.10) }
.drawer-list .cta-nav{ border-color:var(--brand-accent); background:var(--brand-accent); color:#fff; text-align:center }

/* Evitar rolagem do body quando drawer aberto */
.body-lock{ overflow:hidden; touch-action:none; overscroll-behavior:contain }


/* ===== Origem: <style> #6 ===== */
/* === Etapa 2: Hero & CTAs no mobile (sem alterar desktop) === */
@media (max-width:900px){
  /* 1) Remover "Baixar Suporte" apenas no mobile */
  .hero .quick a[href*="/suporte"]{ display:none !important; }

  /* 2) Empilhar CTAs em largura total + ordem (WhatsApp primeiro) */
  .hero .quick{ display:flex; flex-direction:column; gap:12px; }
  .hero .quick .btn{ width:100%; min-height:48px; justify-content:center; }

  /* WhatsApp no topo */
  .hero .quick .btn.btn-whatsapp{ order:-1; }

  /* 3) Contraste um pouco maior para o btn cinza no mobile */
  .hero .quick .btn.btn-gray{
    background-color: rgba(229,231,235,0.28) !important;
    border-color: rgba(229,231,235,0.65) !important;
  }

  /* 4) Respiro do Hero no mobile (mantendo impacto) */
  .hero{ padding: 48px 0; }

  /* 5) Depoimentos: margem superior para respirar sob os CTAs */
  .hero .hero-side{ margin-top: 10px; }
}


/* ===== Origem: <style> #7 ===== */
/* === Etapa 3: Ritmo das seções & tipografia (mobile) === */
@media (max-width:900px){

  /* 1) Tipografia-base e leitura */
  body{ font-size: 16.5px; line-height: 1.6; }
  h1, h2{ letter-spacing: -.005em; }
  p, li{ margin-bottom: 12px; }

  /* 2) Respiro de seções (menos espaço sem perder ar) */
  section{ padding: 44px 0; }
  #cases, #faq{ padding: 44px 0; }
  /* Hero já tratado na Etapa 2 */

  /* 3) Grades e blocos */
  /* Badges (Sobre) */
  .badges{ gap: 16px; }
  .badge{ padding: 8px 4px; min-height: 44px; }
  .badge .icon-dot{ width: 34px; height: 34px; }
  .badge strong{ font-size: 15.5px; }
  .badge .muted{ font-size: 14.5px; }

  /* Cards Serviços */
  #servicos .services{ gap: 16px; }
  #servicos .card{ padding: 14px 16px; }
  #servicos .card strong{ font-size: 17px; }
  #servicos .card details{ padding: 10px 12px; }
  #servicos .card details + details{ margin-top: 10px; }

  /* Details/summary (Serviços & FAQ): ampliar hit-area */
  details summary{
    padding: 14px 12px;
    min-height: 44px;
    align-items: center;
  }
  #faq summary{ padding: 14px 14px 14px 30px; }

  /* Casos de sucesso */
  .cases{ gap: 10px; }
  .cases-nav{ width: 40px; height: 40px; }
  .cases-dots{ margin-top: 10px; }
  .case .lead{ margin-bottom: 8px; }

  /* Contato */
  #contato .lead{ margin-bottom: 12px; }

  /* 4) Âncoras com header fixo (titulo não fica escondido) */
  section{ scroll-margin-top: 76px; }

  /* 5) Acessibilidade & contraste sutis */
  .muted{ color: #485163; } /* um pouco mais legível em telas densas */
  #faq details, #servicos .card details{ border-color: var(--n300); }

  /* 6) Área de toque 44px garantida em links-chave */
  a.btn{ min-height: 48px; }
}


/* ===== Origem: <style> #8 ===== */
/* === Etapa 4: Serviços/accordions (MOBILE-ONLY) === */
@media (max-width:900px){
/* === Etapa 4: Serviços/accordions (área de toque, setas, animação) === */
/* Válido para todo o site, com foco em #servicos e #faq, sem alterar conteúdo */
details{ transition: box-shadow .18s, border-color .18s; }
details:hover{ border-color: var(--n300); box-shadow: 0 4px 16px rgba(0,0,0,.04); }
summary{ position: relative; user-select: none; }
summary:focus-visible{ outline:2px solid var(--brand-accent); outline-offset:3px; border-radius:10px; }

/* Chevron visual mais legível no mobile e desktop */
summary .chevron{
  font-size: .85em;
  opacity: .6;
  transition: transform .18s ease, opacity .18s ease;
}
details[open] summary .chevron{ transform: rotate(180deg); opacity: .9; }

/* Animação sutil ao abrir/fechar (fade + slide) */
details > *:not(summary){
  animation: none;
}
details[open] > *:not(summary){
  animation: accFade .22s ease-out;
}
@keyframes accFade{
  from{ opacity:0; transform: translateY(-2px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Hit-area consistente para sumários nos cards e FAQ */
#servicos summary, #faq summary{
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Ajuste fino da seta em Serviços (mantendo seu estilo base) */
#servicos summary .chevron{ opacity:.55; }
#servicos details[open] summary .chevron{ opacity:.9; }


}


/* ===== Origem: <style> #9 ===== */
/* === Etapa 5: Ação persistente — Voltar ao topo (sem WhatsApp FAB) === */
.back-to-top{
  position: fixed;
  right: 16px; bottom: 18px;
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(17,24,39,.86);
  color: #fff; border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  z-index: 85;
  cursor: pointer;
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s, transform .18s, background-color .18s, border-color .18s;
}
.back-to-top[data-show="true"]{ opacity: 1; transform: translateY(0); }
.back-to-top:hover{ background: rgba(17,24,39,.94); border-color: rgba(255,255,255,.35); }
.back-to-top:focus-visible{ outline: 2px solid var(--brand-accent); outline-offset: 3px; }

@media (max-width: 900px){
  .back-to-top{ right: 12px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce){
  .back-to-top{ transition: none; }
}


/* ===== Origem: <style> #10 ===== */
/* === Etapa 6: Rodapé no mobile (empilhamento, tap targets, tel:) === */
@media (max-width:900px){
  /* Mostrar link "Ligar" apenas no mobile */
  .link-tel{ display:inline !important; }
  .sep-mob{ display:inline !important; opacity:.45; margin: 0 6px; }
}
@media (min-width:901px){
  .link-tel, .sep-mob{ display:none !important; }
}

/* Tap target maior nas redes sociais em mobile */
@media (max-width:900px){
  .footer-social a{ width:40px; height:40px; }
  .footer-info{ row-gap: 10px; }
  .footer-legal{ gap: 6px; }
}

/* Contraste sutil melhorado para links no footer em telas pequenas */
@media (max-width:900px){
  footer .footer-info .item a{ color:#CDD3DB !important; }
  footer .footer-info .item a:hover{ color:#FFFFFF !important; }
}


/* ===== Origem: <style> #11 ===== */



/* ===== Origem: <style> #12 ===== */
/* === Mobile-only hero background override (uses new image set v2) === */
@media (max-width: 900px){
  .hero{
    /* Fallback */
    background: url("/img/hero-mobile4-1080x1920.webp") center / cover no-repeat;
    /* Responsive candidates by device pixel ratio */
    background-image: image-set(
      url("/img/hero-mobile4-720x1280.webp") 1x,
      url("/img/hero-mobile4-1080x1920.webp") 2x,
      url("/img/hero-mobile4-1440x2560.webp") 3x
    ) 1x,
      url("/img/hero-mobile4-1080x1920.webp") 2x,
      url("/img/hero-mobile4-1080x1920.webp") 3x
    ) 1x,
      url("/img/hero-mobile4-1080x1920.webp") 2x,
      url("/img/hero-mobile4-1080x1920.webp") 3x
    );
  }
}

@media (max-width:900px){ .hero{ background-position: center 10% !important; } }


/* ===== Origem: <style> #13 ===== */
/* === Mobile-only: fine-tune Hero background position (no fixed) === */
@media (max-width: 900px){
  :root{ --hero-mobile-y: 18%; }
  .hero{
    background-position: center var(--hero-mobile-y);
    background-attachment: scroll; /* ensure not fixed */
  }
  /* Shorter screens (bring image a bit further up) */
  @media (max-height: 720px){
    :root{ --hero-mobile-y: 14%; }
  }
  /* Taller screens (show a little more grid) */
  @media (min-height: 900px){
    :root{ --hero-mobile-y: 24%; }
  }
}