/* ============================================================
       SEÇÃO: DIFERENCIAIS (v3.1 — 4 cards)
    ============================================================ */
    .diferenciais {
      background: var(--preto-sp);
      padding: var(--section-py) 0;
    }

    .diferenciais-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--s-5);
    }

    @media (min-width: 1100px) {
      .diferenciais-grid { grid-template-columns: repeat(4, 1fr); }
    }

    .card-dif {
      padding: 48px 40px;
      border-radius: 16px;
      border: 1px solid rgba(232,113,10,0.10);
      transition: var(--transition);
      background: rgba(232,113,10,0.04);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      position: relative;
      overflow: hidden;
    }

    .card-dif::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 4px;
      background: var(--aluminio);
      transition: var(--transition);
    }

    .card-dif:hover { border-color: var(--laranja-sp); box-shadow: var(--shadow); transform: translateY(-4px); }
    .card-dif:hover::before { background: var(--laranja-sp); }

    .card-dif-num {
      font-family: var(--font-mono);
      font-weight: 800;
      font-size: 26px;
      color: var(--aluminio);
      letter-spacing: 1px;
      margin-bottom: var(--s-3);
      transition: var(--transition);
    }
    .card-dif:hover .card-dif-num { color: var(--laranja-sp); }

    .card-dif-icon {
      width: 56px;
      height: 56px;
      background: rgba(232,113,10,0.10);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--s-3);
      color: var(--laranja-sp);
      font-size: 24px;
      transition: var(--transition);
    }

    .card-dif:hover .card-dif-icon { background: var(--laranja-sp); color: var(--branco); }

    .card-dif h3 {
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: 20px;
      color: var(--branco);
      margin-bottom: var(--s-2);
      line-height: 1.25;
      letter-spacing: -0.3px;
    }

    .card-dif p {
      font-size: 15px;
      color: var(--cinza-escuro);
      line-height: 1.7;
    }

    /* ============================================================
       PROVA SOCIAL (nova seção)
    ============================================================ */
    .prova-social {
      padding: var(--section-py) 0;
      background: var(--cinza-bg);
      border-top: 1px solid var(--cinza-borda);
      border-bottom: 1px solid var(--cinza-borda);
    }

    .prova-social-header {
      text-align: center;
      max-width: 760px;
      margin: 0 auto var(--s-7);
    }

    .prova-social-header .eyebrow {
      justify-content: center;
    }

    .prova-social-header h2 {
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: clamp(26px, 3vw, 38px);
      color: var(--branco);
      line-height: 1.2;
      margin-bottom: var(--s-2);
      letter-spacing: -0.5px;
    }

    .prova-social-header p {
      font-size: 16.5px;
      color: var(--cinza-medio);
      line-height: 1.6;
    }

    .prova-numeros {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--s-3);
    }

    .prova-num {
      background: rgba(232,113,10,0.04);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(232,113,10,0.10);
      border-left: 4px solid var(--laranja-sp);
      padding: var(--s-4) var(--s-3);
      border-radius: 16px;
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
    }

    .prova-num:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow);
    }

    .prova-num-valor {
      font-family: var(--font-titulo);
      font-weight: 800;
      font-size: clamp(34px, 4vw, 48px);
      color: var(--branco);
      line-height: 1;
      margin-bottom: 8px;
      letter-spacing: -1px;
    }

    .prova-num-valor .unidade {
      font-size: 0.45em;
      color: var(--laranja-sp);
      font-weight: 700;
      margin-left: 6px;
    }

    .prova-num-label {
      font-family: var(--font-corpo);
      font-size: 14px;
      color: var(--cinza-escuro);
      line-height: 1.45;
    }

    .prova-num-label strong {
      display: block;
      font-weight: 700;
      color: var(--branco);
      margin-bottom: 4px;
      font-size: 14.5px;
    }

    .prova-disclaimer {
      margin-top: var(--s-5);
      text-align: center;
      font-size: 13.5px;
      color: var(--cinza-medio);
      font-style: italic;
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
      padding: var(--s-2) var(--s-3);
      border-top: 1px solid var(--cinza-claro);
    }

    .prova-disclaimer strong {
      color: var(--branco);
      font-weight: 700;
      font-style: normal;
    }

    @media (max-width: 1024px) {
      .prova-numeros { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 600px) {
      .prova-numeros { grid-template-columns: 1fr; }
    }

    /* ============================================================
       SEÇÃO: SEGMENTOS
    ============================================================ */
    .segmentos {
      background: var(--cinza-bg);
      padding: var(--section-py) 0;
      position: relative;
    }

    /* Quando segue a seção de dores, reduz o respiro superior (ritmo padrão) */
    .dor + .segmentos {
      padding-top: var(--s-7);
    }

    .segmentos-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: var(--s-7);
      gap: var(--s-5);
      flex-wrap: wrap;
    }

    .segmentos-header-text {
      flex: 1;
      min-width: 320px;
    }

    .segmentos-header-stats {
      display: flex;
      gap: var(--s-5);
      align-items: flex-end;
    }

    .seg-stat {
      text-align: right;
    }

    .seg-stat-num {
      font-family: var(--font-titulo);
      font-weight: 800;
      font-size: 36px;
      color: var(--branco);
      line-height: 1;
      letter-spacing: -1px;
    }

    .seg-stat-label {
      font-size: 11px;
      color: var(--cinza-medio);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-top: 4px;
    }

    /* Layout zigzag para linhas de atuação */
    .linha-bloco {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s-7);
      align-items: center;
      margin-bottom: var(--s-10);
    }

    .linha-bloco:last-of-type { margin-bottom: var(--s-7); }

    .linha-bloco.invertido {
      direction: rtl;
    }

    .linha-bloco.invertido > * {
      direction: ltr;
    }

    .linha-foto {
      width: 100%;
      aspect-ratio: 4 / 3;
      border-radius: 2px;
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      position: relative;
      background: linear-gradient(135deg, var(--cinza-bg) 0%, var(--cinza-claro) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .linha-foto img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transition: transform 0.5s ease;
    }

    .linha-foto:hover img {
      transform: scale(1.03);
    }

    .linha-conteudo {
      padding: var(--s-3) 0;
    }

    .linha-num {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 500;
      color: var(--aluminio-dark);
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: var(--s-2);
    }

    .linha-titulo {
      font-family: var(--font-titulo);
      font-weight: 800;
      font-size: clamp(24px, 2.5vw, 34px);
      color: var(--branco);
      line-height: 1.15;
      letter-spacing: -0.5px;
      margin-bottom: var(--s-2);
    }

    .linha-desc {
      font-size: 16px;
      color: var(--cinza-escuro);
      line-height: 1.7;
      margin-bottom: var(--s-3);
    }

    .linha-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: 14px;
      color: var(--laranja-dark);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      transition: var(--transition);
      text-decoration: none;
    }

    .linha-cta:hover {
      color: var(--laranja-dark);
      transform: translateX(4px);
    }

    /* Destaque para linha principal (Móveis) */
    .linha-destaque {
      border: 2px solid var(--laranja-sp);
      border-radius: 16px;
      padding: var(--s-5);
      background: rgba(232,113,10,0.06);
      box-shadow: 0 8px 32px rgba(232,113,10,0.12);
    }

    .linha-badge-pioneiro {
      display: inline-block;
      background: var(--laranja-sp);
      color: var(--branco);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 6px 14px;
      border-radius: 2px;
      margin-bottom: var(--s-2);
    }

    .linha-actions {
      display: flex;
      align-items: center;
      gap: var(--s-3);
      flex-wrap: wrap;
    }

    .linha-pdf {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-titulo);
      font-weight: 600;
      font-size: 13px;
      color: var(--branco);
      border: 1px solid var(--cinza-borda);
      padding: 8px 16px;
      border-radius: 2px;
      transition: var(--transition);
      text-decoration: none;
    }

    .linha-pdf:hover {
      border-color: var(--laranja-sp);
      color: var(--laranja-sp);
      background: var(--laranja-sutil);
    }

    .linha-pdf--consulta {
      border-style: dashed;
      color: var(--cinza-medio);
    }

    .linha-pdf--consulta:hover {
      border-color: var(--azul-metal);
      color: var(--azul-metal);
      background: rgba(46,90,114,0.05);
    }

    .seg-especiais {
      position: relative;
      background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
      color: #fff;
      border-radius: 6px;
      border-top: 3px solid var(--laranja-sp);
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 0;
      align-items: stretch;
      overflow: hidden;
    }

    .seg-especiais-left {
      padding: clamp(36px, 4.5vw, 56px);
    }

    .seg-especiais-kicker {
      font-family: 'Roboto Mono', monospace;
      font-size: 12px;
      color: var(--laranja-sp);
      letter-spacing: 2.5px;
      text-transform: uppercase;
      margin-bottom: var(--s-2);
      display: inline-block;
    }

    .seg-especiais h3 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: clamp(24px, 2.8vw, 34px);
      color: #fff;
      line-height: 1.15;
      letter-spacing: -0.5px;
      margin-bottom: var(--s-3);
    }

    .seg-especiais-accent { color: var(--laranja-sp); display: block; }

    .seg-especiais p {
      font-family: 'Open Sans', sans-serif;
      font-size: 15px;
      color: #C0C0C0;
      line-height: 1.65;
      max-width: 560px;
      margin-bottom: var(--s-2);
    }

    .seg-especiais-lista {
      list-style: none;
      margin: var(--s-4) 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .seg-especiais-lista li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-family: 'Open Sans', sans-serif;
      font-size: 15px;
      color: #E0E0E0;
      line-height: 1.5;
    }

    .seg-especiais-lista svg {
      flex-shrink: 0;
      color: var(--laranja-sp);
      margin-top: 1px;
    }

    .seg-especiais-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: var(--s-4);
    }

    .btn-especiais-outline {
      background: transparent;
      color: #fff;
      padding: 15px 28px;
      border-radius: 2px;
      border: 1.5px solid rgba(255,255,255,0.35);
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: var(--transition);
    }
    .btn-especiais-outline:hover {
      border-color: var(--laranja-sp);
      color: var(--laranja-sp);
    }

    .seg-especiais-foto {
      position: relative;
      min-height: 100%;
    }
    .seg-especiais-foto picture,
    .seg-especiais-foto img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    /* Fade da imagem para o fundo escuro do card (lado esquerdo) */
    .seg-especiais-foto::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(90deg, #0d0d0d 0%, rgba(13,13,13,0.55) 22%, rgba(13,13,13,0) 55%);
      pointer-events: none;
    }

    /* ============================================================
       SEÇÃO: NOSSA HISTÓRIA (Timeline)
    ============================================================ */
    .historia {
      background: var(--bg-secondary);
      padding: var(--section-py) 0;
    }

    .historia-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s-8);
      align-items: start;
      margin-bottom: var(--s-12);
    }

    .historia-texto h2 {
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: clamp(30px, 3.2vw, 44px);
      color: var(--branco);
      line-height: 1.12;
      margin-bottom: var(--s-1);
      letter-spacing: -0.8px;
    }

    .historia-texto .historia-sub {
      font-family: var(--font-corpo);
      font-size: 17px;
      color: var(--laranja-sp);
      font-style: italic;
      margin-bottom: var(--s-4);
      font-weight: 500;
    }

    .historia-texto p {
      font-size: 15px;
      color: var(--cinza-escuro);
      line-height: 1.8;
      margin-bottom: var(--s-3);
    }

    .historia-texto p strong {
      color: var(--branco);
      font-weight: 700;
    }

    .historia-foto {
      position: relative;
    }

    .historia-foto-placeholder {
      width: 100%;
      height: 520px;
      background:
        linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.50) 100%),
        url('../assets/fabrica-cabreuva.jpg') center/cover;
      border-radius: var(--radius-md);
      display: flex;
      align-items: flex-end;
      padding: var(--s-5);
      box-shadow: var(--shadow-lg);
      position: relative;
    }

    .historia-foto-caption {
      color: var(--branco);
      font-family: var(--font-titulo);
      font-weight: 600;
      font-size: 13px;
      letter-spacing: 1px;
      text-transform: uppercase;
      border-left: 3px solid var(--laranja-sp);
      padding-left: 14px;
    }

    .historia-foto-badge {
      position: absolute;
      bottom: -28px;
      right: -28px;
      width: 130px;
      height: 130px;
      background: var(--laranja-sp);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--branco);
      font-family: var(--font-titulo);
      box-shadow: 0 8px 32px var(--laranja-glow);
      border: 4px solid var(--preto-sp);
    }

    .historia-foto-badge .numero {
      font-weight: 800;
      font-size: 42px;
      line-height: 1;
      letter-spacing: -1.5px;
    }

    .historia-foto-badge .texto {
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 1.5px;
      text-align: center;
      margin-top: 4px;
      text-transform: uppercase;
    }

    .btn-link-dark {
      color: var(--branco);
      border: 2px solid rgba(232,113,10,0.30);
      padding: 14px 24px;
      border-radius: var(--radius);
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      transition: var(--transition);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .btn-link-dark:hover { background: var(--laranja-sp); color: var(--branco); border-color: var(--laranja-sp); }

    .timeline {
      margin-top: var(--s-7);
      padding: var(--s-7) 0;
      background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
      border-radius: var(--radius-md);
      position: relative;
    }

    /* Timeline v2 — Cards visuais com fotos */
    .timeline-v2 { margin-top: var(--s-7); }

    .timeline-v2-header { text-align: center; margin-bottom: var(--s-6); }

    .timeline-v2-title {
      font-family: var(--font-titulo);
      font-weight: 800;
      font-size: 24px;
      color: var(--branco);
      margin-bottom: var(--s-1);
      letter-spacing: -0.3px;
    }

    .timeline-v2-sub {
      font-size: 14px;
      color: var(--cinza-medio);
      letter-spacing: 1px;
      text-transform: uppercase;
      font-weight: 600;
    }

    .timeline-v2-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: var(--s-3);
    }

    .tl-card {
      border: 1px solid rgba(232,113,10,0.10);
      border-radius: 16px;
      overflow: hidden;
      background: rgba(232,113,10,0.04);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      transition: var(--transition);
      position: relative;
    }

    .tl-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; width: 100%; height: 3px;
      background: var(--aluminio);
      transition: var(--transition);
      z-index: 1;
    }

    .tl-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
    .tl-card:hover::before { background: var(--laranja-sp); }

    .tl-card--hoje { border-color: var(--laranja-sp); border-width: 2px; }
    .tl-card--hoje::before { background: var(--laranja-sp); height: 4px; }

    .tl-card-img { position: relative; height: 140px; overflow: hidden; }
    .tl-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
    .tl-card:hover .tl-card-img img { transform: scale(1.05); }

    .tl-card-year {
      position: absolute; bottom: 8px; left: 8px;
      background: var(--preto-sp); color: var(--branco);
      font-family: var(--font-mono); font-weight: 700; font-size: 13px;
      padding: 4px 10px; border-radius: 2px;
    }

    .tl-card-year--hoje { background: var(--laranja-sp); }

    .tl-card-body { padding: 16px; }
    .tl-card-body h4 {
      font-family: var(--font-titulo); font-weight: 700; font-size: 15px;
      color: var(--branco); margin-bottom: 6px; letter-spacing: -0.3px;
    }
    .tl-card-body p { font-size: 13px; color: var(--cinza-medio); line-height: 1.55; }














    /* ============================================================
       NÚMEROS (fundo preto — mega typography)
    ============================================================ */
    .numeros-strip {
      background: var(--preto-sp);
      padding: var(--s-12) 0;
      position: relative;
      overflow: hidden;
    }

    .numeros-strip::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, transparent 0%, var(--laranja-sp) 50%, transparent 100%);
    }

    .numeros-header {
      text-align: center;
      margin-bottom: var(--s-7);
    }

    .numeros-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--laranja-sp);
      margin-bottom: var(--s-2);
    }

    .numeros-eyebrow::before,
    .numeros-eyebrow::after {
      content: '';
      width: 32px;
      height: 2px;
      background: var(--laranja-sp);
      display: inline-block;
    }

    .numeros-title {
      font-family: var(--font-titulo);
      font-weight: 800;
      font-size: clamp(24px, 2.8vw, 34px);
      color: var(--branco);
      letter-spacing: -0.5px;
    }

    .numeros-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
    }

    .numero-item {
      padding: var(--s-5) var(--s-3);
      text-align: center;
      position: relative;
      transition: var(--transition);
    }

    .numero-item:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 20%;
      right: 0;
      height: 60%;
      width: 1px;
      background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
    }

    .numero-item:hover {
      transform: translateY(-4px);
    }

    .numero-valor {
      font-family: var(--font-titulo);
      font-weight: 800;
      font-size: clamp(56px, 7vw, 88px);
      color: var(--branco);
      line-height: 1;
      margin-bottom: var(--s-1);
      letter-spacing: -3px;
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
    }

    .numero-valor .plus {
      font-size: 0.5em;
      color: var(--laranja-sp);
    }

    .numero-valor.com-destaque {
      color: var(--laranja-sp);
    }

    .numero-unidade {
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: 12px;
      color: var(--laranja-sp);
      margin-bottom: var(--s-2);
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .numero-label {
      font-family: var(--font-corpo);
      font-size: 13px;
      color: rgba(255,255,255,0.65);
      line-height: 1.5;
      font-weight: 500;
    }

    .numero-label strong {
      color: var(--branco);
      font-weight: 700;
    }

    /* ============================================================
       PÁTIO — Bullets + Citações (v3.1 — placeholders nomeados)
    ============================================================ */
    .patio {
      background: var(--cinza-bg);
      padding: var(--section-py) 0;
    }

    .patio-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s-8);
      align-items: start;
    }

    .patio-texto h3 {
      font-family: var(--font-titulo);
      font-weight: 800;
      font-size: 28px;
      color: var(--branco);
      margin-bottom: var(--s-5);
      line-height: 1.2;
      letter-spacing: -0.5px;
    }

    .patio-list {
      list-style: none;
    }

    .patio-list li {
      display: flex;
      align-items: flex-start;
      gap: var(--s-2);
      padding: var(--s-2) 0;
      border-bottom: 1px solid var(--cinza-claro);
      font-size: 15px;
      color: var(--cinza-escuro);
      line-height: 1.6;
    }

    .patio-list li:last-child { border-bottom: none; }

    .patio-list li .icon {
      width: 36px;
      height: 36px;
      background: rgba(232,113,10,0.10);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 15px;
      color: var(--laranja-sp);
      transition: var(--transition);
    }

    .patio-list li:hover .icon {
      background: var(--laranja-sp);
      color: var(--branco);
    }

    .patio-list li strong {
      color: var(--branco);
      font-weight: 700;
    }

    .patio-citas {
      display: flex;
      flex-direction: column;
      gap: var(--s-2);
    }

    .cita {
      background: rgba(232,113,10,0.04);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-left: 4px solid var(--laranja-sp);
      padding: var(--s-3) var(--s-4);
      border-radius: 0 16px 16px 0;
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
    }

    .cita:hover {
      box-shadow: var(--shadow);
      transform: translateX(4px);
    }

    .cita p {
      font-size: 15px;
      color: var(--cinza-escuro);
      line-height: 1.7;
      font-style: italic;
      margin-bottom: 10px;
    }

    .cita-fonte {
      font-family: var(--font-titulo);
      font-size: 12px;
      font-weight: 700;
      color: var(--cinza-medio);
      font-style: normal;
      text-transform: uppercase;
      letter-spacing: 1.2px;
    }

    .cita-placeholder-badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 500;
      color: var(--laranja-sp);
      background: rgba(232,113,10,0.10);
      border: 1px dashed var(--laranja-sp);
      padding: 3px 8px;
      border-radius: 3px;
      margin-top: 8px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }



    /* ============================================================
       SEÇÃO: CATÁLOGO INTERATIVO — 3 níveis de navegação
    ============================================================ */
    .catalogos {
      background: var(--preto-sp);
      padding: var(--section-py) 0;
    }

    /* Busca */
    .cat-search-wrap {
      max-width: 520px;
      margin: 0 auto var(--s-6) auto;
      position: relative;
    }

    .cat-search-wrap svg {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--aluminio-dark);
      pointer-events: none;
    }

    .cat-search {
      width: 100%;
      padding: 14px 16px 14px 48px;
      border: 1px solid var(--cinza-borda);
      border-radius: 2px;
      font-family: var(--font-mono);
      font-size: 14px;
      color: var(--branco);
      background: var(--bg-tertiary);
      outline: none;
      transition: var(--transition);
    }

    .cat-search::placeholder {
      color: var(--aluminio-dark);
    }

    /* AC11: focus visible com outline laranja (Story 1.1) */
    .cat-search:focus {
      border-color: var(--laranja-sp);
      outline: 2px solid var(--laranja-sp);
      outline-offset: 2px;
      box-shadow: 0 0 0 3px rgba(232,113,10,0.12);
    }

    .cat-search-clear {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: var(--cinza-medio);
      font-size: 18px;
      line-height: 1;
      padding: 4px;
      display: none;
    }

    .cat-search-clear.visible {
      display: block;
    }

    /* Breadcrumb */
    .cat-breadcrumb {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--aluminio-dark);
      margin-bottom: var(--s-3);
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .cat-breadcrumb span {
      cursor: pointer;
      transition: color 0.2s;
    }

    .cat-breadcrumb span:hover {
      color: var(--laranja-sp);
    }

    .cat-breadcrumb .sep {
      cursor: default;
      color: var(--cinza-claro);
    }

    .cat-breadcrumb .sep:hover {
      color: var(--cinza-claro);
    }

    .cat-breadcrumb .current {
      color: var(--branco);
      font-weight: 500;
      cursor: default;
    }

    .cat-breadcrumb .current:hover {
      color: var(--branco);
    }

    .cat-back-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-titulo);
      font-weight: 600;
      font-size: 13px;
      color: var(--cinza-medio);
      background: none;
      border: 1px solid var(--cinza-borda);
      border-radius: 2px;
      padding: 8px 16px;
      cursor: pointer;
      transition: var(--transition);
      margin-bottom: var(--s-3);
    }

    .cat-back-btn:hover {
      color: var(--branco);
      border-color: var(--laranja-sp);
    }

    /* Grid de linhas (nível 1) */
    .cat-lines-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-3);
    }

    .cat-line-card {
      background: rgba(232,113,10,0.04);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(232,113,10,0.10);
      border-radius: 16px;
      padding: var(--s-4);
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
      overflow: hidden;
    }

    .cat-line-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 3px;
      background: var(--aluminio);
      transition: var(--transition);
    }

    .cat-line-card:hover {
      border-color: var(--laranja-sp);
      box-shadow: 0 0 30px rgba(232,113,10,0.15);
      transform: translateY(-4px);
    }

    .cat-line-card:hover::before {
      background: var(--laranja-sp);
    }

    .cat-line-card--destaque {
      border-color: var(--laranja-sp);
      box-shadow: 0 4px 20px rgba(232,113,10,0.15);
    }

    .cat-line-card--destaque::before {
      background: var(--laranja-sp);
      height: 4px;
    }

    .cat-line-card-badge {
      position: absolute;
      top: 12px; right: 12px;
      background: var(--laranja-sp);
      color: var(--branco);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 2px;
    }

    .cat-line-card h3 {
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: 20px;
      color: var(--branco);
      letter-spacing: -0.3px;
    }

    .cat-line-card-stats {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--aluminio-dark);
      display: flex;
      gap: 12px;
    }

    .cat-line-card-actions {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-top: auto;
      padding-top: 8px;
      flex-wrap: wrap;
    }

    .cat-line-card-btn {
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: 13px;
      color: var(--laranja-dark);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: color 0.2s;
    }

    .cat-line-card:hover .cat-line-card-btn {
      color: var(--laranja-dark);
    }

    .cat-line-pdf,
    .cat-line-btn {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 500;
      color: var(--cinza-medio);
      background: none;
      border: 1px solid var(--cinza-borda);
      border-radius: 2px;
      padding: 4px 10px;
      text-decoration: none;
      transition: var(--transition);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-height: 32px;
      cursor: pointer;
    }

    .cat-line-pdf:hover,
    .cat-line-btn:hover {
      color: var(--laranja-sp);
      border-color: var(--laranja-sp);
    }

    /* Grid de subcategorias (nível 2) */
    .cat-subcats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--s-3);
    }

    .cat-subcat-card {
      background: rgba(232,113,10,0.04);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(232,113,10,0.10);
      border-radius: 16px;
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    }

    .cat-subcat-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 3px;
      background: var(--aluminio);
      transition: var(--transition);
    }

    .cat-subcat-card:hover {
      border-color: var(--laranja-sp);
      box-shadow: 0 0 30px rgba(232,113,10,0.15);
      transform: translateY(-4px);
    }

    .cat-subcat-card:hover::before {
      background: var(--laranja-sp);
    }

    .cat-subcat-thumb {
      width: 100%;
      aspect-ratio: 16/10;
      object-fit: contain;
      background: var(--bg-tertiary);
      border-bottom: 1px solid rgba(232,113,10,0.08);
      padding: 8px;
    }

    .cat-subcat-info {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .cat-subcat-info h4 {
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: 15px;
      color: var(--branco);
      letter-spacing: -0.2px;
    }

    .cat-subcat-info span {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--aluminio-dark);
    }

    /* Grid de produtos (nível 3 e busca) */
    .cat-products-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--s-5);
    }

    .cat-product-card {
      background: rgba(232,113,10,0.04);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(232,113,10,0.10);
      border-radius: 16px;
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    }

    .cat-product-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 3px;
      background: var(--aluminio);
      transition: var(--transition);
    }

    .cat-product-card:hover {
      border-color: var(--laranja-sp);
      box-shadow: var(--shadow);
      transform: translateY(-3px);
    }

    .cat-product-card:hover::before {
      background: var(--laranja-sp);
    }

    .cat-product-thumb {
      width: 100%;
      aspect-ratio: 5/3;
      object-fit: contain;
      background: var(--bg-tertiary);
      border-bottom: 1px solid var(--cinza-borda);
      padding: 12px;
    }

    /* Imagens do catálogo via picImg() */
    .cat-product-img {
      background: var(--bg-tertiary);
      border-bottom: 1px solid var(--cinza-borda);
      padding: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 280px;
      cursor: zoom-in;
      position: relative;
    }

    /* Destaque Curva A (perfis mais procurados) */
    .cat-badge-a {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 2;
      background: var(--laranja-sp);
      color: #fff;
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 5px 10px;
      border-radius: 3px;
      box-shadow: 0 2px 8px rgba(232,113,10,0.35);
    }
    .cat-product-card--a {
      border-color: rgba(232,113,10,0.45);
      box-shadow: 0 0 0 1px rgba(232,113,10,0.25);
    }
    .prod-badge-a {
      display: inline-block;
      vertical-align: middle;
      margin-left: 10px;
      background: var(--laranja-sp);
      color: #fff;
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 3px;
    }

    .cat-product-img picture {
      width: 100%;
    }

    .cat-product-img img {
      width: 100%;
      height: auto;
      object-fit: contain;
      transition: transform 0.3s ease;
    }

    /* Zoom overlay ao clicar na imagem */
    .img-zoom-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(27,36,48,0.92);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: zoom-out;
      padding: var(--s-4);
    }

    .img-zoom-overlay img {
      max-width: 95vw;
      max-height: 90vh;
      object-fit: contain;
      background: var(--bg-tertiary);
      border-radius: var(--radius-md);
      padding: var(--s-4);
      box-shadow: 0 16px 64px rgba(0,0,0,0.4);
    }

    .img-zoom-close {
      position: absolute;
      top: 20px;
      right: 24px;
      font-size: 32px;
      color: var(--branco);
      cursor: pointer;
      font-family: var(--font-titulo);
      font-weight: 700;
      line-height: 1;
      opacity: 0.8;
      transition: opacity 0.2s;
    }

    .img-zoom-close:hover { opacity: 1; }

    /* ============================================================
       COLOR SWATCHES — acabamentos disponíveis
    ============================================================ */
    .color-swatches {
      display: flex;
      gap: 4px;
      padding: 8px 12px;
      flex-wrap: wrap;
      align-items: center;
    }

    .color-swatch {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid var(--cinza-claro);
      cursor: default;
      transition: transform 0.15s, border-color 0.15s;
      flex-shrink: 0;
    }

    .color-swatch:hover {
      transform: scale(1.4);
      border-color: var(--preto-sp);
    }

    .color-swatch[title]::after { content: none; }

    /* Cores dos acabamentos SP Alumínio */
    .sw-natural       { background: #C0C0C0; }
    .sw-fosco         { background: #A8A8A8; }
    .sw-bronze-1001   { background: #5C3D2E; }
    .sw-bronze-1002   { background: #4A3228; }
    .sw-bronze-1003   { background: #3D2B22; }
    .sw-preto         { background: #1A1A1A; }
    .sw-perita        { background: #8B7D6B; }
    .sw-jateado       { background: #B0B0B0; border-style: dashed; }
    .sw-branco        { background: #FFFFFF; }
    .sw-amendoa       { background: #C4A265; }
    .sw-nogueira      { background: #3E2723; }
    .sw-ral           { background: linear-gradient(135deg, #E8710A 25%, #2E5A72 25%, #2E5A72 50%, #1B2430 50%, #1B2430 75%, #B8C4CE 75%); }
    .sw-madeira       { background: linear-gradient(135deg, #8B6914 0%, #A0522D 50%, #6B4226 100%); }

    /* Swatches na ficha do produto */
    .prod-swatches {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: var(--s-1);
    }

    .prod-swatch {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid var(--cinza-claro);
      cursor: pointer;
      transition: all 0.15s;
      flex-shrink: 0;
    }

    .prod-swatch:hover, .prod-swatch.active {
      transform: scale(1.2);
      border-color: var(--laranja-sp);
      box-shadow: 0 0 0 2px rgba(232,113,10,0.3);
    }

    .prod-swatch-label {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--cinza-medio);
      margin-top: 4px;
    }

    /* ============================================================
       TILT 3D — efeito de profundidade no hover dos cards
    ============================================================ */
    .cat-product-card {
      perspective: 800px;
    }

    .cat-product-img {
      transition: transform 0.4s ease;
      transform-style: preserve-3d;
    }

    .cat-product-card:hover .cat-product-img {
      transform: rotateY(-5deg) rotateX(3deg) scale(1.02);
    }

    .cat-product-info {
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
    }

    .cat-product-info h4 {
      font-family: var(--font-mono);
      font-weight: 500;
      font-size: 13px;
      color: var(--branco);
    }

    .cat-product-info .cat-product-peso {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--aluminio-dark);
    }

    .cat-product-wa {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-family: var(--font-titulo);
      font-weight: 600;
      font-size: 11px;
      color: var(--branco);
      background: #25D366;
      border: none;
      border-radius: 2px;
      padding: 6px 10px;
      cursor: pointer;
      margin-top: auto;
      text-decoration: none;
      transition: background 0.2s;
    }

    .cat-product-wa:hover {
      background: #1DA851;
    }

    /* Contagem de resultados */
    .cat-results-count {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--aluminio-dark);
      margin-bottom: var(--s-2);
    }

    /* Estado vazio */
    .cat-empty {
      text-align: center;
      padding: var(--s-8) var(--s-4);
      color: var(--cinza-medio);
    }

    .cat-empty h3 {
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: 20px;
      color: var(--branco);
      margin-bottom: 8px;
    }

    .cat-empty p {
      font-size: 14px;
      max-width: 400px;
      margin: 0 auto;
    }

    .btn-laranja {
      background: var(--laranja-sp);
      /* Texto escuro sobre o laranja de marca: contraste 6,41:1 (WCAG AA).
         Preserva o --laranja-sp original; texto branco dava apenas 2,84:1. */
      color: var(--preto-sp);
      padding: 16px 32px;
      border-radius: 2px;
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: var(--transition);
    }
    .btn-laranja:hover { background: var(--laranja-dark); }

    /* Modal de produto */
    /* Ficha do produto — layout 2 colunas (imagem + info) */
    .prod-ficha {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: var(--s-7);
      align-items: start;
      margin-bottom: var(--s-8);
    }

    .prod-ficha-img {
      background: var(--bg-tertiary);
      border: 1px solid var(--cinza-borda);
      border-radius: 2px;
      padding: var(--s-4);
      display: flex;
      min-height: 400px;
      align-items: center;
      justify-content: center;
      aspect-ratio: 4/3;
    }

    .prod-ficha-img picture {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .prod-ficha-img img {
      width: 100%;
      height: auto;
      max-height: 600px;
      object-fit: contain;
    }

    .prod-ficha-img {
      cursor: zoom-in;
    }

    .prod-ficha-info {
      padding: var(--s-3) 0;
    }

    .prod-ficha-breadcrumb {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--aluminio-dark);
      letter-spacing: 1px;
      margin-bottom: var(--s-2);
    }

    .prod-ficha-code {
      font-family: var(--font-mono);
      font-weight: 800;
      font-size: clamp(28px, 3vw, 38px);
      color: var(--branco);
      letter-spacing: -0.5px;
      margin-bottom: var(--s-1);
    }

    .prod-ficha-weight {
      font-family: var(--font-mono);
      font-size: 16px;
      color: var(--cinza-medio);
      margin-bottom: var(--s-5);
      padding-bottom: var(--s-3);
      border-bottom: 1px solid var(--cinza-claro);
    }

    /* SEO: Ficha técnica enriquecida */
    .prod-ficha-desc {
      font-size: 15px;
      color: var(--cinza-escuro);
      line-height: 1.6;
      margin-bottom: var(--s-3);
    }

    .prod-ficha-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: var(--s-4);
      font-size: 14px;
    }

    .prod-ficha-table th {
      text-align: left;
      font-family: var(--font-titulo);
      font-weight: 600;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--aluminio-dark);
      padding: 10px 12px;
      width: 35%;
      border-bottom: 1px solid var(--cinza-claro);
      vertical-align: top;
    }

    .prod-ficha-table td {
      font-family: var(--font-corpo);
      font-size: 14px;
      color: var(--cinza-escuro);
      padding: 10px 12px;
      border-bottom: 1px solid var(--cinza-claro);
    }

    .prod-ficha-table tr:last-child th,
    .prod-ficha-table tr:last-child td {
      border-bottom: none;
    }

    .prod-ficha-acab {
      margin-bottom: var(--s-4);
    }

    .prod-ficha-acab strong {
      display: block;
      font-family: var(--font-titulo);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--aluminio-dark);
      margin-bottom: var(--s-1);
    }

    .prod-acab-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .prod-acab-tag {
      display: inline-block;
      font-family: var(--font-corpo);
      font-size: 12px;
      color: var(--cinza-escuro);
      background: var(--cinza-bg);
      border: 1px solid var(--cinza-claro);
      border-radius: 2px;
      padding: 4px 10px;
    }

    .prod-ficha-blog {
      display: inline-block;
      margin-top: var(--s-3);
      font-family: var(--font-corpo);
      font-size: 14px;
      font-weight: 500;
      color: var(--laranja-dark);
      transition: var(--transition);
    }

    .prod-ficha-blog:hover {
      color: var(--laranja-dark);
    }

    .prod-ficha-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .prod-ficha-wa {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: 15px;
      color: var(--branco);
      background: #25D366;
      border: none;
      border-radius: 2px;
      padding: 18px 32px;
      cursor: pointer;
      text-decoration: none;
      transition: var(--transition);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .prod-ficha-wa:hover {
      background: #1DA851;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(37,211,102,0.3);
    }

    /* Produtos relacionados */
    .prod-related {
      border-top: 1px solid var(--cinza-claro);
      padding-top: var(--s-5);
    }

    .prod-related-title {
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: 20px;
      color: var(--branco);
      margin-bottom: var(--s-4);
    }

    .prod-related-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--s-3);
    }

    /* Loading */
    .cat-loading {
      text-align: center;
      padding: var(--s-8) 0;
    }

    .cat-spinner {
      width: 40px;
      height: 40px;
      border: 3px solid var(--cinza-borda);
      border-top-color: var(--laranja-sp);
      border-radius: 50%;
      animation: cat-spin 0.8s linear infinite;
      margin: 0 auto var(--s-2);
    }

    @keyframes cat-spin {
      to { transform: rotate(360deg); }
    }

    .cat-loading p {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--aluminio-dark);
    }

    /* ============================================================
       CTA FINAL (fundo laranja) — v3.1 reescrita
    ============================================================ */
    .cta-final {
      background: linear-gradient(135deg, var(--preto-sp) 0%, var(--preto-soft) 50%, var(--preto-sp) 100%);
      padding: var(--section-py-lg) 0;
      position: relative;
      overflow: hidden;
      border-top: 4px solid var(--laranja-sp);
    }

    .cta-final::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background:
        radial-gradient(circle at 10% 20%, rgba(232,113,10,0.08) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(0,0,0,0.2) 0%, transparent 40%);
      pointer-events: none;
    }

    .cta-final-inner {
      text-align: center;
      position: relative;
      z-index: 2;
    }

    .cta-final h2 {
      font-family: var(--font-titulo);
      font-weight: 800;
      font-size: clamp(28px, 3.8vw, 46px);
      color: var(--branco);
      line-height: 1.15;
      margin-bottom: var(--s-2);
      letter-spacing: -0.8px;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }

    .cta-final p {
      font-size: 18px;
      color: rgba(255,255,255,0.92);
      margin-bottom: var(--s-3);
      max-width: 680px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.65;
    }

    /* CTA Deliverables — v3.1 */
    .cta-deliverables {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px var(--s-4);
      margin: var(--s-5) auto var(--s-6);
      text-align: left;
      max-width: 760px;
    }

    .cta-deliverable {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 15px;
      line-height: 1.5;
      color: rgba(255,255,255,0.95);
    }

    .cta-deliverable::before {
      content: '';
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      background: var(--preto-sp);
      border-radius: 50%;
      margin-top: 2px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E8710A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 12px;
    }

    .cta-deliverable strong {
      color: var(--branco);
      font-weight: 700;
      display: block;
      margin-bottom: 2px;
      font-size: 15.5px;
    }

    .cta-final-btns {
      display: flex;
      gap: var(--s-2);
      justify-content: center;
      flex-wrap: wrap;
    }

        .btn-dark {
      background: var(--preto-sp);
      color: var(--branco);
      padding: 20px 40px;
      border-radius: var(--radius);
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      transition: var(--transition);
      border: 2px solid rgba(232,113,10,0.45);
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .btn-dark:hover { background: transparent; color: var(--laranja-sp); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,113,10,0.3); }

    .btn-outline-dark {
      border: 2px solid rgba(232,113,10,0.3);
      color: var(--branco);
      padding: 18px 36px;
      border-radius: var(--radius);
      font-family: var(--font-titulo);
      font-weight: 600;
      font-size: 16px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      transition: var(--transition);
    }

    .btn-outline-dark:hover { border-color: var(--laranja-sp); background: rgba(232,113,10,0.08); }

    .cta-final-micro {
      margin-top: var(--s-3);
      font-size: 13px;
      color: rgba(255,255,255,0.85);
      letter-spacing: 0.3px;
    }

    .cta-final-horario {
      margin-top: 6px;
      font-size: 12.5px;
      color: rgba(255, 255, 255, 0.75);
      font-family: var(--font-mono);
      letter-spacing: 0.3px;
      font-weight: 600;
    }

    /* ============================================================
       FOOTER
    ============================================================ */
    .footer {
      background: var(--preto-sp);
      padding: var(--s-10) 0 0;
      border-top: 3px solid var(--laranja-sp);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
      gap: var(--s-6);
      margin-bottom: var(--s-7);
    }

    .footer-brand .footer-logo {
      width: auto;
      height: 90px;
      margin-bottom: var(--s-3);
      opacity: 0.95;
    }

    .footer-brand h3 {
      font-family: var(--font-titulo);
      font-weight: 800;
      font-size: 20px;
      color: var(--branco);
      margin-bottom: 4px;
      letter-spacing: -0.3px;
    }

    .footer-brand .footer-tagline {
      font-size: 13px;
      color: var(--laranja-sp);
      font-style: italic;
      font-weight: 600;
      margin-bottom: var(--s-3);
    }

    .footer-brand p {
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      line-height: 1.7;
      margin-bottom: var(--s-2);
    }

    .footer-col h4 {
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--aluminio);
      margin-bottom: var(--s-3);
      padding-bottom: var(--s-1);
      border-bottom: 2px solid rgba(232,113,10,0.4);
    }

    .footer-col ul { list-style: none; }

    .footer-col ul li {
      margin-bottom: 12px;
    }

    .footer-col ul li a {
      font-size: 14px;
      color: rgba(255,255,255,0.6);
      transition: var(--transition);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .footer-col ul li a:hover { color: var(--laranja-sp); transform: translateX(3px); }

    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.08);
      padding: var(--s-3) 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }

    .footer-bottom p {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.55);
    }

    .footer-bottom-tagline {
      font-size: 12px;
      color: var(--aluminio);
      font-style: italic;
      font-weight: 500;
    }

    /* ============================================================
       WHATSAPP FLUTUANTE — v3.1 (com tooltip de horário)
    ============================================================ */
    .whatsapp-float {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 999;
      width: 60px;
      height: 60px;
      background: #25D366;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 24px rgba(37,211,102,0.45);
      transition: var(--transition);
      color: white;
    }

    .whatsapp-float:hover { transform: scale(1.1) rotate(-5deg); box-shadow: 0 8px 28px rgba(37,211,102,0.55); }

    /* Ícone flutuante de Catálogos — acima do WhatsApp */
    .catalog-float {
      position: fixed;
      top: 50%;
      right: 28px;
      transform: translateY(-50%);
      z-index: 999;
      width: 54px;
      height: 54px;
      background: rgba(10,10,10,0.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1.5px solid var(--laranja-sp);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition);
      color: var(--laranja-sp);
    }
    .catalog-float:hover { transform: translateY(-50%) scale(1.08); background: var(--laranja-sp); color: #fff; box-shadow: 0 6px 20px rgba(232,113,10,0.4); }
    .catalog-tooltip {
      position: fixed;
      bottom: calc(50% + 42px);
      right: 28px;
      z-index: 998;
      background: var(--preto-sp);
      color: var(--branco);
      padding: 10px 16px;
      border-radius: var(--radius);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.5px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.25);
      max-width: 220px;
      text-align: right;
      line-height: 1.5;
      opacity: 0;
      transform: translateY(8px);
      transition: var(--transition);
      pointer-events: none;
    }
    .catalog-tooltip strong {
      color: var(--laranja-sp);
      display: block;
      font-weight: 700;
      margin-bottom: 2px;
      font-family: var(--font-titulo);
      font-size: 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    .catalog-float:hover + .catalog-tooltip { opacity: 1; transform: translateY(0); }
    @media (max-width: 600px) {
      .catalog-float { width: 52px; height: 52px; right: 20px; }
      .catalog-tooltip { display: none; }
    }

    .whatsapp-tooltip {
      position: fixed;
      bottom: 98px;
      right: 28px;
      z-index: 998;
      background: var(--preto-sp);
      color: var(--branco);
      padding: 10px 16px;
      border-radius: var(--radius);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.5px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.25);
      max-width: 220px;
      text-align: right;
      line-height: 1.5;
      opacity: 0;
      transform: translateY(8px);
      transition: var(--transition);
      pointer-events: none;
    }

    .whatsapp-tooltip strong {
      color: var(--laranja-sp);
      display: block;
      font-weight: 700;
      margin-bottom: 2px;
      font-family: var(--font-titulo);
      font-size: 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .whatsapp-float:hover + .whatsapp-tooltip,
    .whatsapp-tooltip:hover {
      opacity: 1;
      transform: translateY(0);
    }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 1024px) {
      .diferenciais-grid { grid-template-columns: 1fr 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
      .numeros-grid { grid-template-columns: 1fr 1fr; }
      .numero-item:nth-child(2)::after { display: none; }
      .linha-bloco { grid-template-columns: 1fr; gap: var(--s-4); }
      .linha-bloco.invertido { direction: ltr; }
      .seg-especiais { grid-template-columns: 1fr; }
      .seg-especiais-foto { min-height: 220px; order: -1; }
      .seg-especiais-foto::before {
        background: linear-gradient(0deg, #0d0d0d 0%, rgba(13,13,13,0.4) 45%, rgba(13,13,13,0) 100%);
      }
      .seg-especiais-ctas { flex-direction: column; align-items: stretch; }
      .seg-especiais-ctas .btn-laranja,
      .seg-especiais-ctas .btn-especiais-outline { justify-content: center; }
      .cat-especiais { grid-template-columns: 1fr; gap: var(--s-3); }
      .cta-deliverables { grid-template-columns: 1fr; }
      .cat-lines-grid { grid-template-columns: repeat(2, 1fr); }
      .cat-subcats-grid { grid-template-columns: repeat(2, 1fr); }
      .cat-products-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 768px) {
      .navbar-nav { display: none; }
      /* Auditoria Mobile Deep: font-size < 16px em input causa auto-zoom no iOS Safari ao focar */
      .cat-search { font-size: 16px; }
      .diferenciais-grid { grid-template-columns: 1fr; }
      .cat-lines-grid { grid-template-columns: 1fr; }
      .cat-subcats-grid { grid-template-columns: repeat(2, 1fr); }
      .cat-products-grid { grid-template-columns: repeat(2, 1fr); }
      .prod-ficha { grid-template-columns: 1fr; gap: var(--s-4); }
      .prod-related-grid { grid-template-columns: repeat(2, 1fr); }
      .timeline-v2-grid { grid-template-columns: repeat(2, 1fr); }
      .tl-card--hoje { grid-column: 1 / -1; }
      .historia-inner { grid-template-columns: 1fr; gap: var(--s-6); }
      .historia-foto-badge { bottom: -10px; right: 10px; width: 110px; height: 110px; }
      .historia-foto-badge .numero { font-size: 36px; }
      .patio-inner { grid-template-columns: 1fr; gap: var(--s-5); }
      .footer-grid { grid-template-columns: 1fr; }
      .segmentos-header { flex-direction: column; align-items: flex-start; }
      .segmentos-header-stats { align-self: stretch; justify-content: space-between; }
      .seg-stat { text-align: left; }
      .hero-stripe-inner { justify-content: center; }
      .linha-foto { aspect-ratio: 16 / 10; }
    }

    @media (max-width: 480px) {
      :root { --section-py: 64px; }
      .container { padding: 0 var(--s-2); }
      .cat-subcats-grid { grid-template-columns: 1fr; }
      .cat-products-grid { grid-template-columns: repeat(2, 1fr); }
      .cat-modal { max-width: 100%; }
      .numeros-grid { grid-template-columns: 1fr 1fr; }
      .numero-item::after { display: none !important; }
      .hero-ctas { flex-direction: column; align-items: stretch; }
      .btn-primary, .btn-secondary { width: 100%; text-align: center; justify-content: center; }
      .cta-final-btns { flex-direction: column; align-items: stretch; }
      .btn-dark, .btn-outline-dark { text-align: center; }
      .numero-valor { font-size: 48px; letter-spacing: -1.5px; }
    }

    /* ============================================================
       PROCESSOS — v3.1.13 (NOVA seção substituindo Pátio)
       Layout zigzag: foto + texto alternados, prova material da
       verticalização declarada no Card 01 dos Diferenciais.
    ============================================================ */
    .processos {
      background: var(--bg-secondary);
      padding: var(--section-py) 0;
    }

    .processos-header {
      text-align: center;
      max-width: 760px;
      margin: 0 auto var(--s-9);
    }

    .processos-header .eyebrow { justify-content: center; }

    .processos-header h2 {
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: clamp(28px, 3.4vw, 42px);
      color: var(--branco);
      line-height: 1.15;
      margin-bottom: var(--s-2);
      letter-spacing: -0.5px;
    }

    .processos-header p {
      font-size: 17px;
      color: var(--cinza-medio);
      line-height: 1.6;
    }

    .processo-bloco {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s-7);
      align-items: center;
      margin-bottom: var(--s-10);
    }

    .processo-bloco:last-of-type { margin-bottom: 0; }

    /* Layout zigzag: blocos pares têm foto à direita */
    .processo-bloco.invertido {
      direction: rtl;
    }

    .processo-bloco.invertido > * {
      direction: ltr;
    }

    .processo-foto-wrap {
      width: 100%;
      aspect-ratio: 4 / 3;
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      position: relative;
    }

    /* Foto real do processo — renderiza dentro do wrapper preservando aspect-ratio */
    .processo-foto-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transition: transform 0.5s ease;
    }

    .processo-foto-wrap:hover img {
      transform: scale(1.03);
    }

    /* Placeholder elegante para foto a inserir */
    .placeholder-foto {
      width: 100%;
      height: 100%;
      background:
        linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--s-2);
      color: rgba(255,255,255,0.7);
      text-align: center;
      padding: var(--s-5);
    }

    .placeholder-foto::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 6px;
      height: 100%;
      background: var(--laranja-sp);
    }

    .placeholder-foto .icone {
      font-size: 48px;
      color: var(--laranja-sp);
      opacity: 0.6;
      margin-bottom: var(--s-1);
    }

    .placeholder-foto .titulo {
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: 15px;
      color: var(--branco);
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .placeholder-foto .nota {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--aluminio);
      letter-spacing: 0.5px;
      max-width: 220px;
      line-height: 1.5;
    }

    .processo-conteudo {
      display: flex;
      flex-direction: column;
      gap: var(--s-3);
    }

    .processo-num {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--laranja-sp);
      letter-spacing: 2.5px;
      font-weight: 500;
      text-transform: uppercase;
    }

    .processo-titulo {
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: clamp(24px, 2.6vw, 32px);
      color: var(--branco);
      line-height: 1.2;
      letter-spacing: -0.5px;
      margin: 0;
    }

    .processo-texto {
      font-size: 16px;
      color: var(--cinza-escuro);
      line-height: 1.75;
    }

    .processo-prova {
      border-left: 3px solid var(--laranja-sp);
      padding: 14px 18px;
      background: var(--cinza-bg);
      font-family: var(--font-mono);
      font-size: 12.5px;
      color: var(--cinza-escuro);
      border-radius: 0 4px 4px 0;
      line-height: 1.6;
      letter-spacing: 0.2px;
    }

    .processo-prova strong {
      color: var(--branco);
      font-weight: 700;
      letter-spacing: 0;
    }

    /* Bloco de conformidade técnica e ambiental no rodapé da seção */
    .processos-conformidade {
      margin-top: var(--s-12);
      padding: var(--s-7);
      background: var(--preto-sp);
      color: var(--branco);
      border-radius: var(--radius-md);
      border-left: 4px solid var(--laranja-sp);
    }

    .processos-conformidade .titulo-conformidade {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--laranja-sp);
      margin-bottom: var(--s-2);
      font-weight: 500;
    }

    .processos-conformidade h3 {
      font-family: var(--font-titulo);
      font-weight: 700;
      font-size: clamp(22px, 2.4vw, 28px);
      color: var(--branco);
      line-height: 1.25;
      margin-bottom: var(--s-3);
      letter-spacing: -0.3px;
    }

    .processos-conformidade p {
      font-size: 15.5px;
      color: rgba(255,255,255,0.88);
      line-height: 1.75;
      margin-bottom: var(--s-2);
    }

    .processos-conformidade p:last-child { margin-bottom: 0; }

    .processos-conformidade strong {
      color: var(--laranja-sp);
      font-weight: 700;
    }

    @media (max-width: 900px) {
      .processo-bloco {
        grid-template-columns: 1fr;
        gap: var(--s-4);
      }
      .processo-bloco.invertido { direction: ltr; }
      .processo-foto-wrap { aspect-ratio: 16 / 10; }
      .processos-conformidade { padding: var(--s-5); }
    }

    /* Grid de testimonials na Prova Social (movidos do Pátio v3.1.13) */
    @media (max-width: 900px) {
      .prova-social .patio-citas {
        grid-template-columns: 1fr !important;
      }
    }

    /* ============================================================
       PREMIUM DARK EFFECTS — Tier Maximum
    ============================================================ */

    /* Scroll Progress Bar */
    .scroll-progress {
      position: fixed;
      top: 0; left: 0;
      z-index: 9998;
      height: 2px;
      width: 0%;
      background: linear-gradient(90deg, var(--laranja-sp), var(--laranja-dark));
    }

    /* Cinematic Scroll Reveals */
    .reveal {
      opacity: 0;
      transform: translateY(24px) scale(0.98);
      filter: blur(4px);
      transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
    .reveal-d1 { transition-delay: 0.1s; }
    .reveal-d2 { transition-delay: 0.2s; }
    .reveal-d3 { transition-delay: 0.3s; }
    .reveal-d4 { transition-delay: 0.4s; }

    /* Animated Grain Texture */
    .grain {
      position: fixed;
      inset: 0;
      z-index: 9990;
      pointer-events: none;
      opacity: 0.03;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 200px;
      animation: grain-shift 0.5s steps(4) infinite;
    }
    @keyframes grain-shift {
      0%   { background-position: 0 0; }
      25%  { background-position: -80px 40px; }
      50%  { background-position: 40px -60px; }
      75%  { background-position: -40px 80px; }
    }

    /* Custom Cursor */
    .cursor-ring {
      position: fixed;
      top: 0; left: 0;
      z-index: 9999;
      width: 40px; height: 40px;
      border-radius: 50%;
      border: 1.5px solid var(--laranja-sp);
      pointer-events: none;
      opacity: 0.5;
      transition: width 0.2s, height 0.2s, opacity 0.2s;
      mix-blend-mode: difference;
    }
    .cursor-dot {
      position: fixed;
      top: 0; left: 0;
      z-index: 10000;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--laranja-sp);
      pointer-events: none;
    }
    .cursor-ring.hover {
      width: 56px; height: 56px;
      opacity: 0.8;
    }
    @media (hover: none) {
      .cursor-ring, .cursor-dot { display: none; }
    }

    /* Background Mesh Follow */
    .mesh-bg {
      position: fixed;
      inset: 0;
      z-index: -1;
      background: radial-gradient(
        ellipse 600px 400px at var(--mx, 50%) var(--my, 50%),
        rgba(232,113,10,0.04) 0%, transparent 70%
      );
      pointer-events: none;
    }

    /* Gradient Text */
    .gradient-text {
      background: linear-gradient(135deg, var(--laranja-sp), #FF8C2A);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* FAQ — accordion nativo <details>/<summary>, mesmo conteúdo do FAQPage schema (Story 2.4)
       Padrão dark premium do site: fundo preto, cards glassmorphism laranja (ver .card-dif) */
    .faq {
      padding: var(--s-12) 0;
      background: var(--preto-sp);
    }
    .faq-list {
      max-width: 820px;
      margin: var(--s-8) auto 0;
      display: flex;
      flex-direction: column;
      gap: var(--s-2);
    }
    .faq-item {
      border: 1px solid rgba(232,113,10,0.10);
      border-radius: 16px;
      background: rgba(232,113,10,0.04);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      overflow: hidden;
      transition: var(--transition);
    }
    .faq-item[open],
    .faq-item:hover {
      border-color: var(--laranja-sp);
    }
    .faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: var(--s-3) var(--s-4);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--s-3);
      font-weight: 600;
      color: var(--branco);
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: '+';
      flex-shrink: 0;
      font-size: 22px;
      line-height: 1;
      color: var(--laranja-sp);
      transition: transform 0.2s;
    }
    .faq-item[open] summary::after { transform: rotate(45deg); }
    .faq-item summary:focus-visible {
      outline: 2px solid var(--laranja-sp);
      outline-offset: -2px;
    }
    .faq-answer {
      padding: 0 var(--s-4) var(--s-4);
      color: var(--cinza-medio);
      line-height: 1.6;
    }