:root {
          --alabaster-grey: #e9e7e2ff;
          --graphite: #3b3635ff;
          --shadow-grey: #2f2a2bff;
          --onyx: #181516ff;
          --concrete-grey: #797777;
          --led-green: #10b981;
          --nav-h: 96px;
          --hairline: rgba(255, 255, 255, .12);
        }

        /* Acessível a leitores de tela e crawlers, oculto visualmente */
        .sr-only {
          position: absolute;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          white-space: nowrap;
          border: 0;
        }

        /* Base e Tipografia */
        html {
          scroll-behavior: smooth;
          scroll-padding-top: var(--nav-h);
        }

        body {
          margin: 0;
          background: var(--alabaster-grey);
        }

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

        a:hover {
          opacity: .75;
        }

        .text-mono {
          font-family: 'IBM Plex Mono', monospace;
        }

        .main-container {
          display: flex;
          flex-direction: column;
          font-family: 'Aldrich', Archivo, Helvetica, sans-serif;
        }

        /* Cabeçalho */
        .top-bar {
          position: sticky;
          top: 0;
          z-index: 100;
          height: var(--nav-h);
          box-sizing: border-box;
          background: var(--onyx);
          display: flex;
          align-items: stretch;
          justify-content: space-between;
          border-bottom: 1px solid var(--hairline);
        }

        .top-bar-logo {
          display: flex;
          align-items: center;
          padding: 8px 22px;
          border-right: 1px solid var(--hairline);
        }

        .top-bar-logo img {
          height: 40px;
          width: auto;
          flex-shrink: 0;
          filter: invert(1);
        }

        .top-bar-menu {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 16px;
          padding: 0 16px;
          font-size: 13.5px;
          font-weight: 600;
          letter-spacing: .05em;
          text-transform: uppercase;
        }

        .menu-link {
          position: relative;
          padding: 8px 0;
          color: var(--alabaster-grey);
          transition: opacity 0.2s;
        }

        .menu-link::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 0%;
          height: 2px;
          background: var(--alabaster-grey);
          transition: width 0.2s ease;
        }

        .menu-link:hover::after {
          width: 100%;
        }

        .menu-link:hover {
          opacity: 0.8;
        }

        .top-bar-contacts {
          display: flex;
          flex-direction: row-reverse;
          align-items: center;
          justify-content: flex-start;
          gap: 16px;
          font-size: 11.5px;
          letter-spacing: .12em;
          text-transform: uppercase;
          border-left: 1px solid var(--hairline);
          padding: 10px 24px;
        }

        /* Base compartilhada dos botões (SOS, Orçamento, Contato) */
        .top-bar-sos,
        .hero-quote-btn,
        .footer-whatsapp {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          line-height: 1;
          font-family: 'Aldrich', Archivo, Helvetica, sans-serif;
          font-weight: 600;
          font-size: 16px;
          text-transform: none;
          padding: 16px 28px;
          border-radius: 8px;
          box-sizing: border-box;
        }

        .top-bar-sos {
          background: var(--concrete-grey);
          color: var(--onyx);
          padding: 12px 22px;
        }

        .top-bar-phone {
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 600;
          font-size: 12px;
          color: var(--alabaster-grey);
        }

        /* Primeira Dobra (Hero + Etapas) */
        .first-fold-container {
          display: flex;
          flex-direction: column;
          height: calc(100vh - var(--nav-h));
        }

        /* Grid Principal (Hero) */
        .hero-grid {
          display: grid;
          grid-template-columns: repeat(6, minmax(0, 1fr));
          grid-template-rows: repeat(3, 1fr);
          flex: 1;
          gap: 1px;
          background: var(--onyx);
        }

        .hero-grid>div {
          box-sizing: border-box;
        }

        /* Hero: Bloco Logo (só wordmark) */
        .hero-logo-box {
          grid-column: 2 / 4;
          grid-row: 1 / 3;
          background: var(--onyx);
          color: #ffffff;
          padding: 32px 40px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .hero-logo-img {
          width: 190px;
          max-width: 100%;
          height: auto;
          filter: invert(1);
        }

        /* Hero: Bloco Atendimento (faixa 1c-2c) */
        .hero-atendimento {
          grid-column: 1 / 3;
          grid-row: 3 / 4;
          background: var(--graphite);
          color: #ffffff;
          padding: 24px 40px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 8px;
          position: relative;
          overflow: hidden;
        }

        /* Mapa real de SP (contorno IBGE) — marca d'água sutil no fundo da célula */
        .hero-map {
          position: absolute;
          top: 50%;
          right: -4%;
          height: 168%;
          width: auto;
          transform: translateY(-50%);
          pointer-events: none;
          color: #ffffff;
          /* dissolve a borda esquerda para não competir com o texto */
          -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 42%, #000 100%);
        }

        .hero-atendimento>span {
          position: relative;
          z-index: 1;
        }

        .hero-map-region {
          fill: currentColor;
          fill-opacity: .05;
          stroke: currentColor;
          stroke-width: 1.25;
          stroke-opacity: .28;
          vector-effect: non-scaling-stroke;
        }

        /* Capital pulsante (efeito "energia") */
        .hero-map-dot {
          fill: currentColor;
          fill-opacity: .5;
          transform-box: fill-box;
          transform-origin: center;
          animation: hero-dot-pulse 2.4s ease-in-out infinite;
        }

        .hero-map-ping {
          fill: none;
          stroke: currentColor;
          stroke-width: 2;
          transform-box: fill-box;
          transform-origin: center;
          animation: hero-dot-ping 2.4s ease-out infinite;
        }

        @keyframes hero-dot-pulse {
          0%, 100% { fill-opacity: .45; transform: scale(1); }
          50%      { fill-opacity: .9; transform: scale(1.3); }
        }

        @keyframes hero-dot-ping {
          0%   { transform: scale(.6); stroke-opacity: .55; }
          70%  { stroke-opacity: 0; }
          100% { transform: scale(8); stroke-opacity: 0; }
        }

        @media (prefers-reduced-motion: reduce) {
          .hero-map-dot, .hero-map-ping { animation: none; }
          .hero-map-ping { display: none; }
        }

        .hero-atendimento .hero-logo-label {
          color: rgba(255, 255, 255, .55);
        }

        .hero-atendimento .hero-logo-desc {
          color: rgba(255, 255, 255, .7);
        }

        .hero-logo-label {
          font-size: 10.5px;
          letter-spacing: .14em;
          text-transform: uppercase;
          color: rgba(255, 255, 255, .55);
        }

        .hero-logo-title {
          font-size: 24px;
          font-weight: 600;
          letter-spacing: -.025em;
          line-height: 1.15;
          word-wrap: break-word;
          white-space: normal;
        }

        .hero-logo-desc {
          font-size: 11px;
          line-height: 1.6;
          color: rgba(255, 255, 255, .6);
        }

        /* Hero: Bloco Orçamento (Quote) */
        .hero-quote-box {
          grid-column: 5 / 7;
          grid-row: 2 / 4;
          background: #ffffff;
          padding: 24px 32px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 16px;
          align-items: flex-start;
        }

        .hero-quote-label {
          font-size: 11px;
          letter-spacing: .14em;
          text-transform: uppercase;
          color: var(--shadow-grey);
        }

        .hero-quote-title {
          margin: 0;
          font-size: 38px;
          line-height: 1.03;
          font-weight: 600;
          letter-spacing: -.03em;
          text-wrap: pretty;
        }

        .hero-quote-desc {
          margin: 0;
          font-size: 16px;
          line-height: 1.5;
          color: var(--graphite);
        }

        .hero-quote-btn {
          background: var(--onyx);
          color: #ffffff;
          align-self: flex-end;
        }

        .top-bar-sos i,
        .hero-quote-btn i,
        .footer-whatsapp i {
          font-size: 1em;
          position: relative;
          top: -2px;
        }

        /* Hero: Tijolos de imagem (posição + foto por modificador) */
        .hero-brick {
          background-color: var(--concrete-grey);
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
        }

        .hero-brick--tomada    { grid-column: 1 / 2; grid-row: 1 / 3; background-image: url('../assets/tomada.jpeg'); }
        .hero-brick--solar     { grid-column: 4 / 5; grid-row: 1 / 3; background-image: url('../assets/solar.jpg'); }
        .hero-brick--wallbox   { grid-column: 5 / 7; grid-row: 1 / 2; background-image: url('../assets/wallbox.png'); }
        .hero-brick--quadro    { grid-column: 3 / 4; grid-row: 3 / 4; background-image: url('../assets/quadro.jpg'); }
        .hero-brick--projeto   {
          grid-column: 4 / 5;
          grid-row: 3 / 4;
          background-color: #ece9e2;
          background-image: url('../assets/projeto-eletrico.svg');
          background-position: center bottom;
        }

        /* Grid Etapas */
        .steps-grid {
          display: grid;
          grid-template-columns: repeat(5, minmax(0, 1fr));
          gap: 1px;
          background: var(--onyx);
          border-top: 1px solid var(--onyx);
        }

        .step-card {
          background: #ffffff;
          padding: 26px 24px;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .step-num {
          font-size: 11.5px;
          letter-spacing: .14em;
          color: var(--shadow-grey);
        }

        .step-title {
          font-size: 19px;
          font-weight: 600;
          letter-spacing: -.015em;
        }

        .step-desc {
          font-size: 14.5px;
          line-height: 1.5;
          color: var(--graphite);
        }

        /* Seção Serviços */
        .section-header {
          padding: 56px 34px 10px;
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: 24px;
        }

        .section-title {
          margin: 0;
          font-size: 32px;
          font-weight: 600;
          letter-spacing: -.025em;
        }

        .services-wrapper {
          background: var(--alabaster-grey);
          border-top: 1px solid var(--onyx);
        }

        .services-container {
          padding: 0 34px 56px;
        }

        /* Acordeão de Serviços */
        details>summary::-webkit-details-marker {
          display: none;
        }

        .service-details {
          border-top: 1px solid var(--onyx);
        }

        .service-summary {
          display: grid;
          grid-template-columns: 1fr 24px;
          gap: 28px;
          align-items: center;
          padding: 22px 0;
          cursor: pointer;
          list-style: none;
        }

        .service-title {
          margin: 0;
          font-size: 21px;
          font-weight: 600;
          letter-spacing: -.015em;
        }

        .service-list {
          margin-left: 0;
          padding-bottom: 32px;
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .service-item-desc {
          margin: 0;
          font-size: 15.5px;
          line-height: 1.55;
          color: var(--graphite);
        }

        .service-item-strong {
          color: var(--onyx);
        }

        /* Ícone do Interruptor (Acordeão) */
        .accordion-icon-wrap {
          font-size: 24px;
          font-weight: 400;
          color: var(--onyx);
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .accordion-icon {
          width: 24px;
          height: 44px;
          border: 2px solid var(--onyx);
          border-radius: 6px;
          position: relative;
          background: var(--onyx);
        }

        .accordion-icon::before {
          content: '';
          position: absolute;
          width: 100%;
          height: calc(100% - 4px);
          left: 0;
          top: 4px;
          background: linear-gradient(to bottom, #ebebeb 50%, #ffffff 50%);
          border-radius: 3px;
        }

        .accordion-icon::after {
          content: '';
          position: absolute;
          width: 4px;
          height: 4px;
          border-radius: 50%;
          right: 4px;
          top: 6px;
          background: #d4d4d4;
        }

        details[open] summary .accordion-icon::before {
          top: 0;
          background: linear-gradient(to bottom, #ffffff 50%, #ebebeb 50%);
        }

        details[open] summary .accordion-icon::after {
          top: 6px;
          background: var(--led-green);
          box-shadow: 0 0 6px 1px rgba(16, 185, 129, 0.6);
        }

        /* Ícone de Disjuntor unipolar (Acordeão da FAQ) — herda dimensões/borda/posição da
           base .accordion-icon; só troca o fundo e usa border-box */
        #faq .accordion-icon {
          background: #f4f4f4;
          box-sizing: border-box;
        }

        /* Dois terminais: um em cima, um embaixo */
        #faq .accordion-icon::before {
          content: '';
          position: absolute;
          left: 50%;
          top: 4px;
          transform: translateX(-50%);
          width: 3px;
          height: 3px;
          border-radius: 50%;
          background: var(--onyx);
          box-shadow: 0 29px 0 var(--onyx);
        }

        /* Alavanca fininha: sobe (ON) acima do botão / desce (OFF) abaixo dele */
        #faq .accordion-icon::after {
          content: '';
          position: absolute;
          left: 50%;
          right: auto;
          top: 26px;
          transform: translateX(-50%);
          width: 10px;
          height: 3px;
          border-radius: 1.5px;
          background: var(--onyx);
          box-shadow: none;
          z-index: 2;
          transition: top .18s ease;
        }

        #faq details[open] summary .accordion-icon::after {
          top: 11px;
        }

        /* Botão central: quadrado cinza com padding calibrado pro O/I */
        #faq .accordion-icon-wrap {
          position: relative;
        }

        /* Quadrado: cinza (desligado) / verde (ligado) */
        #faq .accordion-icon-wrap::after {
          content: '';
          position: absolute;
          left: 50%;
          top: 13px;
          transform: translateX(-50%);
          width: 16px;
          height: 18px;
          background: #c7c4be;
          border-radius: 0;
          z-index: 0;
          pointer-events: none;
          transition: background .18s ease;
        }

        #faq details[open] summary .accordion-icon-wrap::after {
          background: var(--led-green);
        }

        /* Serviços — ocupa a dobra (igual à hero), com o accordion centralizado */
        .svc-fold {
          min-height: calc(100vh - var(--nav-h));
          display: flex;
          flex-direction: column;
        }

        .svc-fold .services-container {
          flex: 1;
          display: flex;
          flex-direction: column;
          padding-bottom: 0;
        }

        /* As 3 linhas dividem a altura da dobra (preenche 100% mesmo fechado) */
        .svc-fold .service-details {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        /* Sobre nós — ocupa a dobra, fundo branco (igual aos cards dos diferenciais);
           título/intro no topo, cards ancorados na base (sem vazio no meio) */
        #sobre {
          background: #ffffff;
          min-height: calc(100vh - var(--nav-h));
          display: grid;
          grid-template-rows: 1fr 1fr;
        }

        /* Metade de cima (50%): título + intro + destaques, centralizados */
        .about-top {
          display: flex;
          flex-direction: column;
          justify-content: center;
          min-height: 0;
        }

        /* Metade de baixo (50%): os 3 diferenciais como 3 linhas iguais */
        #sobre .diffs-grid {
          grid-template-columns: 1fr;
          grid-template-rows: repeat(3, 1fr);
          min-height: 0;
          border-bottom: 0;
        }

        .about-container {
          padding: 0 34px 40px;
        }

        .about-lead {
          margin: 0;
          max-width: 75ch;
          font-size: 18px;
          line-height: 1.6;
          color: var(--graphite);
        }

        .about-highlights {
          list-style: none;
          margin: 28px 0 0;
          padding: 0;
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
        }

        .about-highlights li {
          font-size: 13px;
          letter-spacing: .02em;
          color: var(--onyx);
          border: 1px solid var(--onyx);
          border-radius: 999px;
          padding: 9px 16px;
        }

        /* Cada diferencial vira uma linha: título à esquerda, descrição à direita */
        #sobre .diff-card {
          display: grid;
          grid-template-columns: 260px 1fr;
          gap: 28px;
          align-items: center;
          padding: 20px 34px;
        }

        #sobre .diff-title {
          font-size: 20px;
        }

        /* Diferenciais (pilares do "Sobre nós") */
        .diffs-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 1px;
          background: var(--onyx);
          border-top: 1px solid var(--onyx);
          border-bottom: 1px solid var(--onyx);
        }

        .diff-card {
          background: #ffffff;
          padding: 24px;
          display: flex;
          flex-direction: column;
          gap: 7px;
        }

        .diff-title {
          font-size: 17px;
          font-weight: 600;
          letter-spacing: -.01em;
        }

        .diff-desc {
          font-size: 14.5px;
          line-height: 1.5;
          color: var(--graphite);
        }

        /* Rodapé (Footer) */
        .footer-container {
          background: var(--onyx);
          color: #ffffff;
          padding: 19px 34px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 40px;
        }

        .footer-left {
          display: flex;
          gap: 32px;
          align-items: center;
        }

        .footer-logo {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 88px;
          height: 88px;
          border-radius: 20px;
          background: linear-gradient(135deg, #2a2a2a, #111111);
          border: 1px solid rgba(255, 255, 255, 0.1);
          box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -2px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.5);
          flex-shrink: 0;
          transition: transform 0.2s ease;
        }

        .footer-logo img {
          width: 40px;
          height: auto;
          filter: invert(1);
        }

        .footer-company-info {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .footer-company-name {
          font-size: 22px;
          font-weight: 700;
          letter-spacing: 0.02em;
          text-transform: uppercase;
        }

        .footer-divider {
          width: 100%;
          height: 1px;
          background: rgba(255, 255, 255, 0.15);
          margin: 2px 0;
        }

        .footer-company-cnpj {
          font-size: 12.5px;
          color: rgba(255, 255, 255, 0.8);
          line-height: 1.4;
        }

        .footer-socials {
          display: flex;
          gap: 20px;
          font-size: 12.5px;
          color: rgba(255, 255, 255, 0.9);
          margin-top: 2px;
        }

        /* Link de política: discreto, não compete com os CTAs */
        .footer-policy {
          color: rgba(255, 255, 255, 0.5);
        }

        .footer-right {
          display: flex;
          flex-direction: column;
          gap: 12px;
          align-items: center;
          text-align: center;
        }

        .footer-whatsapp {
          background: var(--led-green);
          color: #ffffff;
          white-space: nowrap;
        }

        .footer-areas {
          font-size: 11.5px;
          letter-spacing: .1em;
          text-transform: uppercase;
          color: rgba(255, 255, 255, .55);
        }

        /* Mobile Menu Button */
        .mobile-menu-toggle {
          display: none;
          background: none;
          border: none;
          border-left: 1px solid var(--hairline);
          font-size: 22px;
          color: var(--alabaster-grey);
          cursor: pointer;
          padding: 0 24px;
        }

        /* Aviso de cookies (LGPD) — barra fina full-width fixa no rodapé (desktop) */
        .cookie-banner {
          position: fixed;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 200;
          background: var(--onyx);
          color: var(--alabaster-grey);
          border-top: 1px solid var(--hairline);
          box-shadow: 0 -4px 16px rgba(0, 0, 0, .25);
          padding: 12px 24px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          gap: 20px;
        }

        .cookie-banner[hidden] {
          display: none;
        }

        .cookie-text {
          margin: 0;
          font-size: 13px;
          line-height: 1.4;
          color: rgba(255, 255, 255, .8);
        }

        .cookie-text a {
          color: #ffffff;
          text-decoration: underline;
        }

        .cookie-actions {
          display: flex;
          gap: 8px;
          justify-content: flex-end;
        }

        .cookie-btn {
          font-family: inherit;
          font-size: 13px;
          font-weight: 600;
          padding: 8px 16px;
          border-radius: 6px;
          border: 1px solid var(--hairline);
          cursor: pointer;
        }

        .cookie-btn--ghost {
          background: transparent;
          color: var(--alabaster-grey);
        }

        .cookie-btn--solid {
          background: var(--led-green);
          color: #ffffff;
          border-color: var(--led-green);
        }

        /* Responsividade (Mobile) */
        @media (max-width: 768px) {

          /* Cookies: sai do modo flutuante e fica estático logo acima do rodapé */
          .cookie-banner {
            position: static;
            box-shadow: none;
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
            padding: 18px 24px;
          }

          .cookie-btn {
            flex: 1;
          }

          /* Nav mobile é mais alta (logo + linha de contatos), então o
             offset das âncoras acompanha via a mesma variável. */
          :root {
            --nav-h: 116px;
          }

          /* Top Bar & Menu */
          .top-bar {
            flex-wrap: wrap;
            height: auto;
          }

          .top-bar-logo {
            padding: 8px 16px;
            order: 1;
            min-height: 58px;
            box-sizing: border-box;
          }

          .top-bar-logo img {
            height: 36px;
            width: auto;
          }

          .mobile-menu-toggle {
            display: flex;
            align-items: center;
            padding: 0 16px;
            font-size: 20px;
            order: 2;
          }

          .mobile-menu-toggle i {
            pointer-events: none;
          }

          .top-bar-menu {
            display: none;
            order: 4;
            flex-basis: 100%;
            flex-direction: column;
            background: var(--onyx);
            padding: 24px 16px;
            gap: 24px;
            text-align: center;
            border-top: 1px solid var(--hairline);
          }

          .top-bar-menu.open {
            display: flex !important;
          }

          /* Contatos: linha fixa (SOS + telefone) logo abaixo do logo */
          .top-bar-contacts {
            display: flex;
            order: 3;
            flex-basis: 100%;
            flex-direction: row-reverse;
            align-items: center;
            gap: 12px;
            min-width: 0;
            padding: 9px 14px;
            border-left: none;
            border-top: 1px solid var(--hairline);
            background: var(--onyx);
          }

          .top-bar-sos {
            flex: 1;
            min-width: 0;
            width: auto;
            padding: 13px 10px;
            font-size: 13.5px;
          }

          .top-bar-phone {
            flex: 1;
            min-width: 0;
            justify-content: center;
            white-space: nowrap;
            padding: 0;
            font-size: 12.5px;
            color: var(--alabaster-grey);
            border-left: none;
          }

          /* Primeira Dobra */
          .first-fold-container {
            height: auto;
            display: block;
          }

          /* Hero Grid */
          .hero-grid {
            display: flex;
            flex-direction: column;
            height: auto;
          }

          .hero-logo-box {
            padding: 24px 20px;
            align-items: center;
            text-align: center;
          }

          .hero-logo-title {
            font-size: 22px;
          }

          .hero-logo-desc {
            font-size: 14px;
          }

          .hero-logo-img {
            width: 160px;
            margin: 8px 0;
          }

          .hero-atendimento {
            padding: 24px 20px;
            align-items: center;
            text-align: center;
          }

          .hero-quote-box {
            padding: 24px 20px;
            gap: 20px;
          }

          .hero-quote-title {
            font-size: 26px;
          }

          .hero-brick {
            min-height: 220px;
          }

          /* Steps Grid */
          .steps-grid {
            grid-template-columns: 1fr;
          }

          /* Services */
          .section-header {
            padding: 40px 24px 10px;
            flex-direction: column;
            gap: 8px;
          }

          .services-container {
            padding: 0 24px 40px;
          }

          .about-container {
            padding: 0 24px 32px;
          }

          /* Serviços e Sobre: altura natural no mobile (sem forçar tela cheia) */
          .svc-fold,
          #sobre {
            min-height: 0;
            display: block;
          }

          .svc-fold .services-container,
          .svc-fold .service-details,
          .about-top {
            display: block;
          }

          #sobre .diffs-grid {
            grid-template-rows: auto;
          }

          #sobre .diff-card {
            grid-template-columns: 1fr;
            gap: 7px;
            padding: 24px;
          }

          .service-summary {
            grid-template-columns: 1fr 24px;
            gap: 16px;
            padding: 18px 0;
          }

          .service-title {
            font-size: 19px;
          }

          .service-list {
            margin-left: 0;
            padding-bottom: 24px;
          }

          /* Diffs */
          .diffs-grid {
            grid-template-columns: 1fr;
          }

          /* Footer */
          .footer-container {
            flex-direction: column;
            align-items: flex-start;
            padding: 32px 24px;
            gap: 32px;
          }

          .footer-left {
            flex-direction: row;
            align-items: flex-start;
            gap: 20px;
            width: 100%;
          }

          .footer-company-info {
            flex: 1;
            min-width: 0;
          }

          .footer-company-name {
            font-size: 18px;
          }

          .footer-socials {
            flex-direction: column;
            gap: 12px;
            margin-top: 12px;
          }

          .footer-right {
            align-items: center;
            text-align: center;
            width: 100%;
          }

          .footer-whatsapp {
            width: 100%;
            text-align: center;
            box-sizing: border-box;
          }
        }