/* ============================================================
       LIMÃO CRAVO — Design, Marketing & Tecnologia
       Versão estratégica — todos os pilares
       ============================================================ */

    /* --- VARIÁVEIS --- */
    :root {
      --cream:      #FAF6EE;
      --espresso:   #1E1409;
      --citrus:     #F4B03A;
      --gold:       #E7AE01;
      --gold-dark:  #C29200;
      --terra:      #D4652F;
      --green:      #2E8B57;
      --green-lt:   #D6EFE0;
      --blue:       #1A5276;
      --blue-lt:    #D0E8F5;
      --orange-lt:  #FDE9D0;
      --white:      #FFFFFF;
      --gray:       #6B5E4E;
    }

    /* --- RESET --- */
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--gold) var(--cream); }

    /* --- SCROLLBAR CUSTOMIZADA --- */
    ::-webkit-scrollbar { width:10px; height:10px; }
    ::-webkit-scrollbar-track { background:var(--cream); }
    ::-webkit-scrollbar-thumb {
      background:var(--gold); border-radius:999px;
      border:2px solid var(--cream); background-clip:padding-box;
    }
    ::-webkit-scrollbar-thumb:hover { background:var(--gold-dark); background-clip:padding-box; }
    body {
      font-family: Arial, sans-serif;
      background: var(--cream);
      color: var(--espresso);
      overflow-x: hidden;
    }
    a { text-decoration: none; color: inherit; }
    img { display:block; max-width:100%; }
    h1,h2,h3 { font-weight:800; line-height:1; letter-spacing:-0.02em; }

    /* --- ANIMAÇÕES --- */
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(32px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes float {
      0%,100% { transform:translateY(0); }
      50%      { transform:translateY(-14px); }
    }
    .reveal { opacity:0; transform:translateY(32px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }

    /* ======================================================
       HEADER
       ====================================================== */
    header {
      position: fixed; top:0; left:0; right:0; z-index:200;
      display: flex; align-items:center; justify-content:space-between;
      padding: 16px 5%;
      background: rgba(250,246,238,.92);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(212,101,47,.1);
      transition: box-shadow .3s, transform .3s ease;
    }
    header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.08); }

    .logo img { height:42px; width:auto; display:block; }

    nav { display:flex; align-items:center; gap:28px; }
    nav a { font-size:13px; font-weight:600; opacity:.8; transition:opacity .2s, color .2s; }
    nav a:hover { opacity:1; color:var(--terra); }

    /* Dropdown "Serviços" */
    .nav-dropdown { position:relative; }
    .nav-dropdown > a { display:flex; align-items:center; gap:5px; }
    .nav-dropdown > a::after {
      content:"▾"; font-size:10px; opacity:.7;
    }
    .dropdown-menu {
      /* Caixa "ponte" invisível: o padding-top cobre o vão até o painel
         visual, mantendo o hover contínuo (sem zona morta ao mover o
         mouse do link até a lista). */
      position:absolute; top:100%; left:0; padding-top:14px;
      opacity:0; visibility:hidden; pointer-events:none;
      transition:opacity .2s ease .22s, visibility .2s .22s;
      z-index:300;
    }
    .nav-dropdown:hover .dropdown-menu,
    .nav-dropdown:focus-within .dropdown-menu {
      opacity:1; visibility:visible; pointer-events:auto;
      transition:opacity .2s ease, visibility .2s;
    }
    .dropdown-panel {
      display:flex; gap:26px;
      background:var(--white); border-radius:16px;
      padding:26px 30px;
      box-shadow:0 20px 48px rgba(43,26,13,.16);
      border:1px solid rgba(43,26,13,.06);
      transform:translateY(6px);
      transition:transform .2s ease .22s;
    }
    .nav-dropdown:hover .dropdown-panel,
    .nav-dropdown:focus-within .dropdown-panel {
      transform:translateY(0);
      transition:transform .2s ease;
    }
    .dropdown-col { display:flex; flex-direction:column; gap:10px; min-width:170px; }
    .dropdown-col-title {
      font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
      color:var(--terra); margin-bottom:2px; opacity:1;
    }
    .dropdown-col a {
      font-size:13px; font-weight:500; color:var(--espresso); opacity:.85;
      white-space:nowrap;
    }
    .dropdown-col a:hover { opacity:1; color:var(--terra); }

    /* Botão hambúrguer (só aparece no mobile) */
    .nav-toggle {
      display:none; flex-direction:column; justify-content:center; gap:5px;
      width:34px; height:34px; border:none; background:transparent; cursor:pointer; padding:0;
    }
    .nav-toggle span {
      display:block; width:100%; height:2px; background:var(--espresso); border-radius:2px;
      transition:transform .25s ease, opacity .25s ease;
    }
    .nav-toggle.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .nav-toggle.active span:nth-child(2) { opacity:0; }
    .nav-toggle.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

    .header-right { display:flex; align-items:center; gap:12px; }
    .lang-toggle { display:flex; gap:3px; background:rgba(43,26,13,.07); border-radius:999px; padding:3px; }
    .lang-toggle button {
      border:none; background:transparent; cursor:pointer;
      font-family:Helvetica,Arial,sans-serif; font-size:12px; font-weight:700;
      padding:5px 12px; border-radius:999px; color:var(--espresso); opacity:.5; transition:all .2s;
    }
    .lang-toggle button.active { background:var(--espresso); color:var(--cream); opacity:1; }
    .btn-cta-header {
      background:var(--gold); color:var(--espresso);
      padding:10px 20px; border-radius:10px; font-size:13px; font-weight:700;
      transition: background .2s, transform .2s;
    }
    .btn-cta-header:hover { background:var(--gold-dark); transform:translateY(-1px); }

    /* ======================================================
       HERO FIXO
       ====================================================== */
.hero-wrap {
    position: relative;
    height: 200vh;
}

.hero {
    height: 100vh;

    position: sticky;
    top: 0;
    z-index: 1;

    padding: 180px 5% 0;

    background: var(--espresso);

    overflow: hidden;

    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 40px;
}

/* SEÇÃO QUE SOBE E COBRE TODO O HERO (efeito cortina) */

.cases {
  position: relative;
  z-index: 20;

  /* Puxa a seção para cima em exatamente 1 viewport: enquanto o usuário
     rola pelo "espaço extra" do .hero-wrap (a segunda metade dos 200vh),
     o Hero permanece fixo (sticky) e esta seção desliza por cima dele
     até cobri-lo por completo. */
  margin-top: -100vh;

  border-radius: 50px 50px 0 0;

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

.services {
  position: relative;
  z-index: 30;
}

.processo {
  position: relative;
  z-index: 40;
}

.quem {
  position: relative;
  z-index: 50;
}

.blog {
  position: relative;
  z-index: 60;
}

.cta-final {
  position: relative;
  z-index: 70;
}

footer {
  position: relative;
  z-index: 80;
}

    /* Background decorativo */
    .hero::before {
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(ellipse at 70% 50%, rgba(244,176,58,.12) 0%, transparent 60%),
                  radial-gradient(ellipse at 20% 80%, rgba(212,101,47,.1) 0%, transparent 50%),
                  radial-gradient(ellipse at 85% 15%, rgba(231,174,1,.14) 0%, transparent 45%);
    }

    .hero-text { position:relative; z-index:2; padding-bottom:80px; max-width:680px; }
    .hero-tag {
      display:inline-flex; align-items:center; gap:8px;
      background:rgba(244,176,58,.15); border:1px solid rgba(244,176,58,.3);
      color:var(--citrus); font-size:11px; font-weight:700;
      letter-spacing:.16em; text-transform:uppercase;
      padding:7px 16px; border-radius:999px; margin-bottom:28px;
    }
    .hero-tag span { width:6px; height:6px; border-radius:50%; background:var(--citrus); }

    .hero h1 {
      font-size: clamp(34px, 4.4vw, 44px);
      color: var(--white);
      text-transform: uppercase;
      margin-bottom: 24px;
    }

    /* Palavra rotativa dentro do H1 (troca entre os 3 pilares) */
    .rotor-line { display:inline-flex; align-items:center; gap:12px; }
    .rotor-inline {
      position: relative;
      display: inline-block;
      vertical-align: top;
      overflow: hidden;
      height: 1.15em;
      min-width: 140px;
      color: var(--citrus);
      transition: color .3s ease, width .3s cubic-bezier(.65,0,.35,1);
    }
    .rotor-track {
      display: flex;
      flex-direction: column;
      transition: transform .35s cubic-bezier(.65,0,.35,1);
    }
    .rotor-word {
      height: 1.15em;
      display: flex;
      align-items: flex-start;
      white-space: nowrap;
      color: inherit;
    }
    .rotor-measure {
      position: absolute; left: 0; top: 0; visibility: hidden;
      white-space: nowrap; pointer-events: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .rotor-track { transition: none; }
    }

    .hero-sub {
      font-size: 17px; line-height:1.7; color:rgba(255,255,255,.7);
      max-width: 480px; margin-bottom: 36px;
    }

    .hero-btns { display:flex; gap:14px; flex-wrap:wrap; }
    .btn-primary {
      background:var(--gold); color:var(--espresso);
      padding:15px 30px; border-radius:12px; font-weight:700; font-size:14px;
      box-shadow:0 8px 28px rgba(231,174,1,.35);
      transition:background .2s, transform .2s;
    }
    .btn-primary:hover { background:var(--gold-dark); transform:translateY(-2px); }
    .btn-ghost {
      color:var(--white); font-weight:600; font-size:14px;
      border:1px solid rgba(255,255,255,.25); padding:15px 26px; border-radius:12px;
      transition:background .2s;
    }
    .btn-ghost:hover { background:rgba(255,255,255,.08); }

    /* ======================================================
       ESTATÍSTICAS DO HERO (antes era a seção .numbers, separada)
       ====================================================== */
    .hero-stats {
      display:flex; flex-wrap:wrap; gap:24px;
      margin-top:36px; position:relative; z-index:2;
    }
    .hero-stat { display:flex; align-items:center; gap:12px; }
    .hero-stat-icon {
      width:42px; height:42px; border-radius:11px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      background:rgba(244,176,58,.15);
    }
    .hero-stat-icon img { width:20px; height:20px; object-fit:contain; }
    .hero-stat-num { font-size:19px; font-weight:800; color:var(--white); line-height:1.15; }
    .hero-stat-lbl { font-size:12px; color:rgba(255,255,255,.6); margin-top:1px; }

    /* ======================================================
       CASES
       ====================================================== */
    .cases {
      background:var(--cream);
      padding:70px 5% 100px;
    }
    .sec-header {
      display:flex; justify-content:space-between; align-items:flex-end;
      margin-bottom:40px; flex-wrap:wrap; gap:16px;
    }
    .sec-label {
      font-size:11px; font-weight:700; letter-spacing:.18em;
      text-transform:uppercase; color:var(--terra); margin-bottom:10px;
    }
    .sec-title { font-size:clamp(26px,3.6vw,42px); text-transform:uppercase; }
    .sec-link { font-size:13px; font-weight:700; color:var(--terra); border-bottom:2px solid var(--terra); padding-bottom:3px; }

    /* Tabs */
    .case-tabs { display:flex; gap:8px; margin-bottom:32px; flex-wrap:wrap; }
    .cases-cta-btn { display:inline-block; margin-top:20px; }
    .case-tab {
      padding:8px 18px; border-radius:999px; font-size:13px; font-weight:700;
      border:2px solid transparent; cursor:pointer; transition:all .2s;
      background:var(--white); color:var(--gray);
      border-color:rgba(43,26,13,.1);
    }
    .case-tab.active-design  { background:var(--orange-lt); color:var(--terra); border-color:var(--terra); }
    .case-tab.active-mkt     { background:var(--green-lt);  color:var(--green); border-color:var(--green); }
    .case-tab.active-tech    { background:var(--blue-lt);   color:var(--blue);  border-color:var(--blue); }
    .case-tab.active-all     { background:var(--espresso);  color:var(--white); border-color:var(--espresso); }
    .case-tab.active-video   { background:rgba(212,101,47,.14); color:var(--terra); border-color:var(--terra); }

    .cases-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
    .case-card {
      background:var(--white); border-radius:18px; overflow:hidden;
      border:1px solid rgba(43,26,13,.07);
      transition:transform .3s, box-shadow .3s;
      display:none;
    }
    .case-card.show { display:block; }
    .case-card:hover { transform:translateY(-6px); box-shadow:0 20px 48px rgba(43,26,13,.12); }
    .case-card:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
    .case-img { position:relative; overflow:hidden; }
    .case-img img { width:100%; height:200px; object-fit:cover; transition:transform .4s; }
    .case-card:hover .case-img img { transform:scale(1.05); }
    .case-badge {
      position:absolute; top:12px; left:12px;
      font-size:10px; font-weight:700; letter-spacing:.1em;
      text-transform:uppercase; padding:5px 12px; border-radius:999px;
    }
    .badge-design { background:var(--orange-lt); color:var(--terra); }
    .badge-mkt    { background:var(--green-lt);  color:var(--green); }
    .badge-tech   { background:var(--blue-lt);   color:var(--blue); }
    .case-info { padding:20px; }
    .case-info h3 { font-size:16px; text-transform:none; letter-spacing:0; margin-bottom:6px; }
    .case-info p  { font-size:13px; color:var(--gray); line-height:1.5; }

    /* Página "Todos os Cases" */
    .cases-page { max-width:1200px; margin:0 auto; padding:60px 5% 90px; }

    /* Seção de case em destaque nas páginas de serviço */
    .service-case { padding:20px 5% 10px; max-width:1200px; margin:0 auto; text-align:center; }
    .service-case .sec-label { color:var(--terra); }
    .service-case h2 { font-size:clamp(26px,3vw,34px); margin-bottom:30px; }
    .service-case .case-card { max-width:460px; margin:0 auto; text-align:left; }
    /* Quando o serviço tem mais de um case, mostra todos lado a lado em vez do card único centralizado */
    .service-case-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:24px; }
    .service-case-grid .case-card { max-width:none; margin:0; }

    /* ── Modal de case (reaproveitado por qualquer .case-card) ── */
    .case-card { cursor:pointer; }
    .case-modal {
      position:fixed; inset:0; z-index:1000;
      display:none; align-items:center; justify-content:center; padding:24px;
    }
    .case-modal.open { display:flex; }
    .case-modal-overlay {
      position:absolute; inset:0; background:rgba(30,20,9,.62);
      -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
      animation:caseFade .2s ease;
    }
    .case-modal-box {
      position:relative; z-index:1; background:var(--white);
      border-radius:20px; overflow:hidden; width:100%; max-width:640px;
      max-height:90vh; overflow-y:auto;
      box-shadow:0 30px 80px rgba(0,0,0,.4);
      animation:caseUp .25s ease;
    }
    .case-modal-close {
      position:absolute; top:14px; right:14px; z-index:2;
      width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
      background:rgba(255,255,255,.92); color:var(--espresso);
      font-size:26px; line-height:1; display:flex; align-items:center; justify-content:center;
      box-shadow:0 2px 12px rgba(0,0,0,.18); transition:background .2s;
    }
    .case-modal-close:hover { background:var(--white); }
    .case-modal-img img { width:100%; max-height:58vh; object-fit:contain; background:var(--cream); display:block; }
    .case-modal-gallery {
      display:none; gap:10px; padding:14px 28px 0; overflow-x:auto;
    }
    .case-modal-gallery.show { display:flex; }
    .case-modal-gallery img {
      width:60px; height:60px; flex-shrink:0; object-fit:cover; border-radius:8px;
      cursor:pointer; opacity:.55; border:2px solid transparent; transition:opacity .2s, border-color .2s;
    }
    .case-modal-gallery img:hover { opacity:.85; }
    .case-modal-gallery img.active { opacity:1; border-color:var(--gold); }
    .case-modal-gallery img:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
    .case-modal-close:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
    .case-modal-info { padding:26px 28px 30px; }
    .case-modal-badge { position:static; display:inline-block; margin-bottom:14px; }
    .case-modal-title { font-size:22px; text-transform:none; letter-spacing:0; margin-bottom:10px; }
    .case-modal-desc { font-size:14px; line-height:1.7; color:var(--gray); }
    @keyframes caseFade { from{opacity:0} to{opacity:1} }
    @keyframes caseUp { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)} }

    /* ======================================================
       SERVIÇOS — 3 PILARES
       ====================================================== */
    .services {
      padding:100px 5%;
      background:var(--espresso);
      position:relative; overflow:hidden;
    }
    .services::before {
      content:"";position:absolute;inset:0;
      background:radial-gradient(ellipse at 80% 20%,rgba(244,176,58,.07),transparent 50%),
                 radial-gradient(ellipse at 10% 90%,rgba(46,139,87,.07),transparent 50%);
    }
    .services .sec-label { color:var(--citrus); }
    .services .sec-title { color:var(--white); }
    .services-grid {
      margin-top:50px;
      display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
      position:relative; z-index:2;
    }
    .serv-pillar {
      border-radius:24px; padding:36px 28px;
      position:relative; overflow:hidden;
      backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
      box-shadow:0 8px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
      transition:transform .3s, box-shadow .3s, background .3s;
    }
    .serv-pillar:hover {
      transform:translateY(-6px);
      box-shadow:0 20px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.1);
    }
    .sp-design { background:rgba(244,176,58,.12); border:1px solid rgba(244,176,58,.28); }
    .sp-mkt    { background:rgba(46,139,87,.12);  border:1px solid rgba(46,139,87,.28); }
    .sp-tech   { background:rgba(26,82,118,.22);  border:1px solid rgba(26,82,118,.4); }
    .sp-design:hover { background:rgba(244,176,58,.17); }
    .sp-mkt:hover    { background:rgba(46,139,87,.17); }
    .sp-tech:hover   { background:rgba(26,82,118,.28); }

    .sp-icon {
      width:56px; height:56px; border-radius:16px;
      display:flex; align-items:center; justify-content:center;
      margin-bottom:22px;
      backdrop-filter:blur(8px);
    }
    .sp-icon img { width:26px; height:26px; object-fit:contain; }
    .sp-design .sp-icon { background:rgba(244,176,58,.25); }
    .sp-mkt    .sp-icon { background:rgba(46,139,87,.25); }
    .sp-tech   .sp-icon { background:rgba(26,82,118,.4); }

    .sp-name {
      font-size:22px; font-weight:800; text-transform:uppercase;
      margin-bottom:14px;
    }
    .sp-design .sp-name { color:var(--citrus); }
    .sp-mkt    .sp-name { color:#4ade80; }
    .sp-tech   .sp-name { color:#7dd3fc; }

    .sp-desc { font-size:14px; line-height:1.65; color:rgba(255,255,255,.65); margin-bottom:22px; }

    .sp-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
    .sp-list li {
      display:flex; align-items:center; gap:10px;
      font-size:14px; color:rgba(255,255,255,.8); font-weight:500;
    }
    .sp-list li::before {
      content:""; width:6px; height:6px; border-radius:50%; flex-shrink:0;
    }
    .sp-list li a:hover { text-decoration:underline; }
    .sp-design .sp-list li::before { background:var(--citrus); }
    .sp-mkt    .sp-list li::before { background:#4ade80; }
    .sp-tech   .sp-list li::before { background:#7dd3fc; }

    /* Pilar Audiovisual (terra/laranja) */
    .sp-video { background:rgba(212,101,47,.12); border:1px solid rgba(212,101,47,.3); }
    .sp-video:hover { background:rgba(212,101,47,.18); }
    .sp-video .sp-icon { background:rgba(212,101,47,.28); }
    .sp-video .sp-icon img { filter:brightness(0) invert(1); } /* força branco (ícone é a versão escura) */
    .sp-video .sp-name { color:#f2a97f; }
    .sp-video .sp-list li::before { background:#f2a97f; }

    /* ======================================================
       PROCESSO
       ====================================================== */
    .processo { padding:100px 5%; background:var(--cream); }
    .processo-steps {
      margin-top:56px;
      display:grid; grid-template-columns:repeat(5,1fr); gap:0;
      position:relative;
    }
    .processo-steps::before {
      content:"";position:absolute;top:28px;left:10%;right:10%;height:2px;
      background:linear-gradient(90deg,var(--terra),var(--citrus));
      z-index:0;
    }
    .step { text-align:center; position:relative; z-index:1; padding:0 12px; }
    .step-num {
      width:56px; height:56px; border-radius:50%;
      background:var(--white); border:3px solid var(--terra);
      display:flex; align-items:center; justify-content:center;
      font-weight:800; font-size:18px; color:var(--terra);
      margin:0 auto 18px;
      box-shadow:0 4px 16px rgba(212,101,47,.2);
    }
    .step h3 { font-size:15px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
    .step p  { font-size:13px; color:var(--gray); line-height:1.5; }

    /* ======================================================
       QUEM SOMOS
       ====================================================== */
    .quem {
      padding:100px 5%;
      background:var(--white);
      display:grid; grid-template-columns:0.95fr 1.05fr; gap:70px; align-items:center;
    }
    .quem-img { position:relative; }
    .quem-img img { width:100%; height:520px; object-fit:cover; border-radius:24px; }
    .quem-ring {
      position:absolute; top:-24px; right:-24px;
      width:130px; height:130px; border-radius:50%;
      border:12px solid var(--citrus);
    }

    /* Círculos decorativos presos ao fundo de uma seção (atrás do conteúdo) */
    .deco-ring { position:absolute; border-radius:50%; }

    .cases-deco {
      position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;
    }
    .dr-cases-1 { top:6%;   right:-50px; width:150px; height:150px; border:14px solid var(--citrus); }
    .dr-cases-2 { top:52%;  left:-40px;  width:100px; height:100px; border:10px solid var(--terra); }
    .dr-cases-3 { bottom:4%; right:18%;  width:70px;  height:70px;  border:8px  solid var(--gold); }

    .blog-deco {
      position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;
    }
    .dr-blog-1 { top:32%;   left:-45px;  width:120px; height:120px; border:12px solid var(--terra); }
    .dr-blog-2 { bottom:6%; right:-35px; width:140px; height:140px; border:13px solid var(--citrus); }

    /* Garante que o conteúdo real fique sempre acima da camada decorativa
       (por padrão do CSS, um elemento posicionado fica acima de conteúdo
       estático mesmo com z-index:0 — por isso este reforço é necessário) */
    .cases > *:not(.cases-deco),
    .blog > *:not(.blog-deco) {
      position: relative;
      z-index: 1;
    }

    @media (max-width: 900px) {
      .cases-deco, .blog-deco { display:none; }
    }
    .quem-badge {
      position:absolute; bottom:28px; left:-20px;
      background:var(--espresso); color:var(--white);
      border-radius:18px; padding:18px 22px;
      box-shadow:0 12px 32px rgba(0,0,0,.2);
      min-width:170px;
    }
    .quem-badge .qb-num { font-size:32px; font-weight:800; color:var(--citrus); }
    .quem-badge .qb-lbl { font-size:12px; color:rgba(255,255,255,.7); margin-top:2px; }

    .quem-text .sec-label { color:var(--terra); }
    .quem-text h2 { font-size:clamp(26px,3.4vw,40px); text-transform:uppercase; margin-bottom:22px; }
    .quem-text p { font-size:16px; line-height:1.75; color:#4a3c2c; margin-bottom:16px; max-width:520px; }

    .quem-quote {
      position:relative;
      max-width:520px;
      margin:8px 0 26px;
      padding:22px 24px 20px 30px;
      background:var(--orange-lt);
      border-left:4px solid var(--terra);
      border-radius:0 18px 18px 0;
    }
    .quem-quote-mark {
      position:absolute; top:2px; left:10px;
      font-size:44px; line-height:1; font-weight:800;
      color:rgba(212,101,47,.3);
      font-family:Georgia, 'Times New Roman', serif;
    }
    .quem-quote p {
      font-size:15px; line-height:1.65; font-style:italic;
      color:var(--espresso); max-width:none; margin-bottom:12px;
    }
    .quem-quote p:last-of-type { margin-bottom:10px; }
    .quem-quote cite {
      display:block; font-style:normal; font-size:12px; font-weight:700;
      letter-spacing:.04em; color:var(--terra);
    }

    .quem-stats { display:flex; gap:36px; margin-top:30px; flex-wrap:wrap; }
    .qs { }
    .qs .n { font-size:34px; font-weight:800; color:var(--terra); }
    .qs .l { font-size:12px; color:var(--gray); margin-top:2px; }

    /* ======================================================
       BLOG
       ====================================================== */
    .blog h2 {
    font-size:clamp(26px,3.4vw,30px);
    text-transform:uppercase;
    margin-bottom:22px;
    }

    .blog p {
    font-size:16px;
    line-height:1.75;
    color:#4a3c2c;
    margin-bottom:16px;
    max-width:520px;
    }

    .blog { padding:100px 5%; background:var(--cream); }
    .blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:50px; }
    .blog-card {
      background:var(--white); border-radius:18px; overflow:hidden;
      border:1px solid rgba(43,26,13,.07);
      transition:transform .3s, box-shadow .3s;
    }
    .blog-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(43,26,13,.1); }
    .blog-card img { width:100%; height:190px; object-fit:cover; }
    .blog-info { padding:22px 20px; }
    .blog-cat {
      font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
      padding:4px 10px; border-radius:999px; display:inline-block; margin-bottom:12px;
    }
    .cat-design { background:var(--orange-lt); color:var(--terra); }
    .cat-mkt    { background:var(--green-lt);  color:var(--green); }
    .cat-tech   { background:var(--blue-lt);   color:var(--blue); }
    .blog-date {
      display:block; font-size:11px; font-weight:700; letter-spacing:.08em;
      text-transform:uppercase; color:var(--terra); margin-bottom:10px;
    }
    .blog-info h3 { font-size:15px; text-transform:none; letter-spacing:0; line-height:1.45; margin-bottom:10px; font-weight:700; }
    .blog-excerpt { font-size:13px; color:var(--gray); line-height:1.6; margin-bottom:14px; max-width:none; }
    .blog-info a  { font-size:13px; font-weight:700; color:var(--terra); }
    .blog-info a:hover { text-decoration:underline; }
    .blog-error {
      grid-column: 1 / -1; text-align:center;
      font-size:14px; color:var(--gray);
      background:var(--white); border:1px dashed rgba(43,26,13,.15);
      border-radius:16px; padding:32px; max-width:none;
    }

    /* ======================================================
       CTA FINAL
       ====================================================== */
    .cta-final {
      padding:120px 5%;
      background:var(--espresso);
      text-align:center;
      position:relative; overflow:hidden;
    }
    .cta-final::before {
      content:"";position:absolute;inset:0;
      background:radial-gradient(ellipse at 50% 100%,rgba(244,176,58,.12),transparent 60%);
    }
    .cta-final h2 {
      font-size:clamp(28px,4.5vw,58px); text-transform:uppercase;
      color:var(--white); max-width:720px; margin:0 auto 22px;
      position:relative; z-index:1;
    }
    .cta-final h2 em { font-style:normal; color:var(--citrus); }
    .cta-final p {
      font-size:17px; color:rgba(255,255,255,.7);
      max-width:480px; margin:0 auto 40px; line-height:1.65;
      position:relative; z-index:1;
    }
    .cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }
    .btn-cta-main {
      background:var(--gold); color:var(--espresso);
      padding:18px 36px; border-radius:12px; font-weight:700; font-size:15px;
      box-shadow:0 10px 32px rgba(231,174,1,.35);
      transition:background .2s, transform .2s;
    }
    .btn-cta-main:hover { background:var(--gold-dark); transform:translateY(-2px); }
    .btn-cta-sec {
      border:2px solid rgba(255,255,255,.25); color:var(--white);
      padding:18px 32px; border-radius:12px; font-weight:700; font-size:15px;
      transition:background .2s;
    }
    .btn-cta-sec:hover { background:rgba(255,255,255,.08); }

    /* ======================================================
       FOOTER
       ====================================================== */
    footer {
      background:#120d06;
      color:rgba(250,246,238,.55);
      padding:64px 5% 32px;
    }
    .footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; margin-bottom:56px; }
    .footer-badge { display:flex; align-items:flex-start; justify-content:center; }
    .footer-copy { font-size:12px; color:rgba(250,246,238,.5); }
    .footer-brand img { height:44px; width:auto; margin-bottom:16px; }
    .footer-brand p  { font-size:13px; line-height:1.65; max-width:220px; }
    .footer-brand .social-row { display:flex; gap:10px; margin-top:20px; }
    .social-btn { position:relative; width:36px; height:36px; display:block; }
    .social-btn img {
      position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
      transition:opacity .2s ease;
    }
    .social-btn img.social-icon-hover { opacity:0; }
    .social-btn:hover img.social-icon-default { opacity:0; }
    .social-btn:hover img.social-icon-hover { opacity:1; }

    .footer-col h4 {
      font-size:11px; font-weight:700; letter-spacing:.14em;
      text-transform:uppercase; color:rgba(250,246,238,.85);
      margin-bottom:18px;
    }
    .footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
    .footer-col ul li a { font-size:13px; transition:color .2s; }
    .footer-col ul li a:hover { color:var(--citrus); }

    .footer-contact p { font-size:13px; margin-bottom:10px; }
    .footer-contact strong { color:rgba(250,246,238,.8); font-size:11px; letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:3px; }
    .footer-contact a { transition:color .2s; }
    .footer-contact a:hover { color:var(--citrus); }

    .footer-bottom {
      border-top:1px solid rgba(255,255,255,.06);
      padding-top:28px;
      display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
      font-size:12px;
    }
    .footer-legal-links { list-style:none; display:flex; gap:24px; }
    .footer-legal-links a { font-size:12px; transition:color .2s; }
    .footer-legal-links a:hover { color:var(--citrus); }
    .footer-credit { font-size:12px; color:rgba(250,246,238,.4); text-align:center; }
    .footer-credit a { color:rgba(250,246,238,.72); }
    .footer-credit a:hover { color:var(--citrus); }

    /* --- Botão voltar ao topo --- */
    .to-top {
      position:fixed; bottom:24px; right:24px; z-index:300;
      width:46px; height:46px; border-radius:50%;
      background:var(--gold); color:var(--espresso);
      border:none; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 6px 20px rgba(0,0,0,.25);
      opacity:0; visibility:hidden; transform:translateY(10px);
      transition:opacity .3s, transform .3s, visibility .3s, background .2s;
    }
    .to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
    .to-top:hover { background:var(--gold-dark); }
    .to-top svg { width:22px; height:22px; }
    .cert-badges { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
    .cert { font-size:10px; font-weight:700; padding:4px 10px; border-radius:6px; background:rgba(255,255,255,.06); color:rgba(255,255,255,.5); }
    .cert-badge-img { height:56px; width:auto; border-radius:6px; }

    /* ======================================================
       PÁGINAS DE SERVIÇO (servicos/*.html)
       ====================================================== */
    .service-hero {
      padding:150px 5% 70px;
      background:var(--espresso);
      position:relative; overflow:hidden;
    }
    .service-hero::before {
      content:"";position:absolute;inset:0;
      background:radial-gradient(ellipse at 80% 10%,rgba(244,176,58,.14),transparent 55%),
                 radial-gradient(ellipse at 10% 90%,rgba(212,101,47,.1),transparent 50%);
    }
    .service-hero-inner { position:relative; z-index:2; max-width:760px; }
    .service-breadcrumb {
      display:flex; align-items:center; gap:8px; margin-bottom:18px;
      font-size:12px; font-weight:600; color:rgba(255,255,255,.5);
    }
    .service-breadcrumb a { color:rgba(255,255,255,.5); transition:color .2s; }
    .service-breadcrumb a:hover { color:var(--citrus); }
    .service-hero .sec-label { margin-bottom:14px; }
    .service-hero h1 {
      font-size:clamp(32px,4.4vw,52px); color:var(--white);
      text-transform:uppercase; margin-bottom:22px;
    }
    .service-hero-sub {
      font-size:17px; line-height:1.7; color:rgba(255,255,255,.7);
      max-width:560px; margin-bottom:36px;
    }
    .shero-design .sec-label { color:var(--citrus); }
    .shero-mkt    .sec-label { color:#4ade80; }
    .shero-tech   .sec-label { color:#7dd3fc; }

    .service-body { padding:90px 5% 0; background:var(--cream); }
    .service-intro { max-width:720px; margin-bottom:52px; }
    .service-intro h2 { font-size:clamp(24px,3vw,34px); text-transform:uppercase; margin-bottom:18px; }
    .service-intro p { font-size:16px; line-height:1.75; color:#4a3c2c; }

    .deliverables-grid {
      display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:30px;
    }
    .deliverable-card {
      background:var(--white); border:1px solid rgba(43,26,13,.07);
      border-radius:18px; padding:26px 24px;
      transition:transform .3s, box-shadow .3s;
    }
    .deliverable-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(43,26,13,.1); }
    .dc-icon { font-size:24px; margin-bottom:14px; }
    .dc-icon img { width:24px; height:24px; object-fit:contain; }
    .deliverable-card h3 { font-size:15px; text-transform:none; letter-spacing:0; margin-bottom:8px; font-weight:700; }
    .deliverable-card p { font-size:13px; color:var(--gray); line-height:1.6; }

    .service-sub {
      padding:56px 0; border-top:1px solid rgba(43,26,13,.08);
    }
    .service-sub:first-of-type { border-top:none; }
    .service-sub h2 { font-size:clamp(22px,2.8vw,30px); text-transform:uppercase; margin-bottom:14px; }
    .service-sub > p { font-size:15px; line-height:1.7; color:#4a3c2c; max-width:640px; margin-bottom:24px; }

    .service-steps {
      margin:70px 0 90px;
      display:grid; grid-template-columns:repeat(3,1fr); gap:0;
      position:relative;
    }
    .service-steps::before {
      content:"";position:absolute;top:28px;left:12%;right:12%;height:2px;
      background:linear-gradient(90deg,var(--terra),var(--citrus));
      z-index:0;
    }

    .service-cta {
      padding:100px 5%; background:var(--espresso); text-align:center;
      position:relative; overflow:hidden;
    }
    .service-cta::before {
      content:"";position:absolute;inset:0;
      background:radial-gradient(ellipse at 50% 100%,rgba(244,176,58,.12),transparent 60%);
    }
    .service-cta h2 {
      font-size:clamp(26px,3.6vw,42px); text-transform:uppercase; color:var(--white);
      max-width:640px; margin:0 auto 18px; position:relative; z-index:1;
    }
    .service-cta p {
      font-size:16px; color:rgba(255,255,255,.7); max-width:460px;
      margin:0 auto 34px; line-height:1.65; position:relative; z-index:1;
    }

    @media (max-width: 900px) {
      .deliverables-grid { grid-template-columns:1fr 1fr; }
      .service-steps { grid-template-columns:1fr; gap:32px; }
      .service-steps::before { display:none; }
    }
    @media (max-width: 600px) {
      .deliverables-grid { grid-template-columns:1fr; }
    }

    /* ======================================================
       SOBRE NÓS — LINHA DO TEMPO (sobre-nos.html)
       ====================================================== */
    .about-hero { padding:150px 5% 90px; background:var(--espresso); position:relative; overflow:hidden; text-align:center; }
    .about-hero::before {
      content:"";position:absolute;inset:0;
      background:radial-gradient(ellipse at 80% 10%,rgba(244,176,58,.14),transparent 55%),
                 radial-gradient(ellipse at 10% 90%,rgba(212,101,47,.1),transparent 50%);
    }
    .about-hero-inner { position:relative; z-index:2; max-width:680px; margin:0 auto; }
    .about-hero .sec-label { color:var(--citrus); justify-content:center; display:flex; }

    /* Página de erro (404) */
    .erro-hero { padding-top:170px; padding-bottom:120px; }
    .erro-code { font-size:clamp(72px,14vw,150px); font-weight:800; line-height:.9; color:var(--gold); letter-spacing:-.03em; margin-bottom:6px; }
    .erro-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
    .about-hero h1 { font-size:clamp(32px,4.4vw,52px); color:var(--white); text-transform:uppercase; margin-bottom:22px; }
    .about-hero-sub { font-size:17px; line-height:1.7; color:rgba(255,255,255,.7); }

    .timeline-section { padding:100px 5%; background:var(--cream); }

    .timeline { position:relative; max-width:760px; margin:0 auto; }
    .timeline-item { position:relative; padding-left:80px; padding-bottom:64px; }
    .timeline-item:last-child { padding-bottom:0; }
    .timeline-item::before {
      content:""; position:absolute; left:27px; top:58px; bottom:-6px; width:2px;
      background:rgba(212,101,47,.22);
    }
    .timeline-item:last-child::before { display:none; }
    .timeline-dot {
      position:absolute; left:0; top:0; width:56px; height:56px; border-radius:50%;
      background:var(--white); border:3px solid var(--terra);
      display:flex; align-items:center; justify-content:center;
      font-weight:800; font-size:17px; color:var(--terra);
      box-shadow:0 4px 16px rgba(212,101,47,.2);
    }
    .timeline-year {
      font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
      color:var(--terra); margin-bottom:8px;
    }
    .timeline-content h3 { font-size:19px; text-transform:none; letter-spacing:0; margin-bottom:10px; }
    .timeline-content p { font-size:15px; line-height:1.7; color:var(--gray); max-width:560px; }
    .timeline-media {
      margin-top:16px; max-width:360px; border-radius:14px; overflow:hidden;
      border:1px solid rgba(43,26,13,.08);
    }
    .timeline-media img,
    .timeline-media video { width:100%; height:auto; display:block; }

    @media (max-width: 600px) {
      .timeline-item { padding-left:64px; }
      .timeline-dot { width:46px; height:46px; font-size:14px; }
      .timeline-item::before { left:22px; top:48px; }
    }

    /* ======================================================
       FORMULÁRIO DE ORÇAMENTO (orcamento.html)
       ====================================================== */
    .quote-section { padding:70px 5% 110px; background:var(--cream); }
    .quote-card {
      max-width:640px; margin:0 auto;
      background:var(--white); border-radius:24px;
      padding:48px 40px;
      border:1px solid rgba(43,26,13,.07);
      box-shadow:0 20px 60px rgba(43,26,13,.08);
    }
    .form-alert {
      padding:14px 18px; border-radius:12px; margin-bottom:24px;
      font-size:14px; font-weight:600; line-height:1.5;
    }
    .form-alert-ok  { background:var(--green-lt); color:#1b6b43; border:1px solid rgba(46,139,87,.35); }
    .form-alert-err { background:var(--orange-lt); color:#a8341a; border:1px solid rgba(212,101,47,.4); }
    /* Honeypot anti-spam: fora da tela, mas presente no DOM para bots preencherem */
    .hp-field { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
    .form-group { margin-bottom:22px; }
    .form-group label {
      display:block; font-size:13px; font-weight:700; margin-bottom:8px; color:var(--espresso);
    }
    .form-group .required { color:var(--terra); }
    .form-group input,
    .form-group textarea {
      width:100%; padding:13px 16px; border-radius:12px;
      border:1.5px solid rgba(43,26,13,.15); background:var(--cream);
      font-family:inherit; font-size:14px; color:var(--espresso);
      transition:border-color .2s, background .2s;
    }
    .form-group input:focus,
    .form-group textarea:focus {
      outline:none; border-color:var(--terra); background:var(--white);
    }
    .form-group textarea { min-height:140px; resize:vertical; }
    .quote-form button.btn-primary {
      width:100%; text-align:center; border:none; cursor:pointer; font-family:inherit;
    }
    .quote-note {
      text-align:center; font-size:13px; color:var(--gray); margin-top:18px;
    }
    .quote-note a { color:var(--terra); font-weight:700; }
    .quote-note a:hover { text-decoration:underline; }

    /* ======================================================
       POLÍTICA DE PRIVACIDADE (politica-privacidade.php)
       ====================================================== */
    .policy-section { padding:80px 5% 110px; background:var(--cream); }
    .policy-content { max-width:760px; margin:0 auto; }
    .policy-updated { font-size:13px; color:var(--gray); margin-bottom:36px; }
    .policy-content h2 {
      font-size:20px; text-transform:none; letter-spacing:0; color:var(--espresso);
      margin:40px 0 14px;
    }
    .policy-content h2:first-of-type { margin-top:0; }
    .policy-content p { font-size:15px; line-height:1.75; color:var(--gray); }
    .policy-content p a { color:var(--terra); font-weight:700; }
    .policy-content p a:hover { text-decoration:underline; }

    /* ======================================================
       AVISO DE PRIVACIDADE / COOKIES (LGPD)
       ====================================================== */
    .cookie-banner {
      position:fixed; left:20px; right:20px; bottom:20px; z-index:400;
      max-width:580px; margin:0 auto;
      background:var(--espresso); color:rgba(250,246,238,.9);
      border-radius:14px; padding:14px 18px;
      border:1px solid rgba(255,255,255,.1);
      display:flex; align-items:center; gap:16px; flex-wrap:wrap;
      transform:translateY(140%); opacity:0; pointer-events:none;
      transition:transform .35s ease, opacity .35s ease;
    }
    .cookie-banner.show { transform:translateY(0); opacity:1; pointer-events:auto; }
    .cookie-banner p { font-size:12px; line-height:1.5; margin:0; flex:1 1 200px; color:rgba(250,246,238,.85); }
    .cookie-banner p a { color:var(--citrus); text-decoration:underline; }
    .cookie-actions {
      display:flex; gap:3px; background:rgba(255,255,255,.08); border-radius:999px;
      padding:3px; flex-shrink:0;
    }
    .cookie-btn {
      border:none; background:transparent; cursor:pointer; white-space:nowrap;
      font-family:inherit; font-size:12px; font-weight:700;
      padding:8px 14px; border-radius:999px; color:rgba(250,246,238,.6);
      transition:all .2s;
    }
    .cookie-btn:hover { color:rgba(250,246,238,.9); }
    .cookie-btn-accept { background:var(--gold); color:var(--espresso); }
    .cookie-btn-accept:hover { background:var(--gold-dark); color:var(--espresso); }
    @media (max-width:600px) {
      .cookie-banner { left:12px; right:12px; bottom:12px; flex-direction:column; text-align:center; padding:16px; }
      .cookie-actions { width:100%; justify-content:center; }
      .cookie-btn { flex:1; text-align:center; }
    }

    /* ======================================================
       FAQ (perguntas-frequentes.html)
       ====================================================== */
    .faq-section { padding:80px 5% 110px; background:var(--cream); }
    .faq-list { max-width:820px; margin:0 auto; }
    .faq-item { border-bottom:1px solid rgba(43,26,13,.12); }
    .faq-item:first-child { border-top:1px solid rgba(43,26,13,.12); }
    .faq-question {
      width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
      padding:24px 0; background:none; border:none; cursor:pointer; text-align:left;
      font-size:16px; font-weight:700; color:var(--espresso); font-family:inherit;
    }
    .faq-question:hover { color:var(--terra); }
    .faq-icon {
      font-size:22px; font-weight:400; color:var(--terra); flex-shrink:0; line-height:1;
      transition:transform .25s ease;
    }
    .faq-item.open .faq-icon { transform:rotate(45deg); }
    .faq-answer { max-height:0; overflow:hidden; transition:max-height .3s ease; }
    .faq-item.open .faq-answer { max-height:400px; }
    .faq-answer-inner { padding:0 0 26px; }
    .faq-answer-inner p { font-size:15px; line-height:1.75; color:var(--gray); max-width:680px; }

    /* ======================================================
       RESPONSIVO
       ====================================================== */
    @media (max-width: 1024px) {
      /* Em telas menores o conteúdo do Hero empilha (pilares abaixo do texto)
         e fica mais alto que 100vh — por isso o efeito de cortina (sticky)
         é desativado aqui, evitando cortar conteúdo. */
      .hero-wrap { height:auto; }
      .hero {
        grid-template-columns:1fr; padding-bottom:40px;
        position:relative; top:auto; height:auto; min-height:100vh;
        overflow:visible;
      }
      .cases { margin-top:0; border-radius:0; box-shadow:none; }
      .services-grid { grid-template-columns:1fr; }
      .processo-steps { grid-template-columns:1fr; }
      .processo-steps::before { display:none; }
      .quem { grid-template-columns:1fr; }
    }
    @media (max-width: 768px) {
      .nav-toggle { display:flex; }
      .btn-cta-header { display:none; }

      /* Hambúrguer no canto direito, troca de idioma centralizada no header */
      .header-right {
        position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
      }

      /* Header some ao rolar para baixo, volta ao rolar para cima */
      header.header-hidden { transform:translateY(-100%); }

      nav {
        display:none;
        position:absolute; top:100%; left:0; right:0;
        flex-direction:column; align-items:stretch; gap:0;
        background:var(--cream);
        padding:8px 5% 20px;
        box-shadow:0 16px 32px rgba(0,0,0,.14);
        border-top:1px solid rgba(43,26,13,.08);
        max-height:calc(100vh - 100%);
        overflow-y:auto;
      }
      header.nav-open nav { display:flex; }
      nav > a {
        padding:15px 0; border-bottom:1px solid rgba(43,26,13,.06);
        opacity:1; font-size:14px;
      }

      .nav-dropdown { width:100%; }
      .nav-dropdown > a {
        justify-content:space-between;
        padding:15px 0; border-bottom:1px solid rgba(43,26,13,.06);
        font-size:14px;
      }
      .nav-dropdown.dropdown-open > a::after { transform:rotate(180deg); }
      .dropdown-menu {
        position:static; padding-top:0;
        opacity:1; visibility:visible; pointer-events:auto;
        transition:none;
        max-height:0; overflow:hidden;
      }
      .nav-dropdown.dropdown-open .dropdown-menu { max-height:2000px; }
      .dropdown-panel {
        background:transparent; border:none; box-shadow:none; transform:none;
        flex-direction:column; gap:20px; padding:6px 0 16px;
      }
      .dropdown-col { min-width:0; gap:10px; }
      .dropdown-col a { white-space:normal; }

      .hero h1 { font-size:32px; }
      .cases-grid { grid-template-columns:1fr; }
      .cases .case-card:nth-child(n+4) { display:none; }
      .blog-grid { grid-template-columns:1fr; }
      .footer-grid { grid-template-columns:1fr; }
      .processo { display:none; }
    }