:root {
     --bg: #f5f8fa;
     --card: #ffffff;
     --ink: #1c2b36;
     --muted: #5b6c78;
     --line: #dde6ec;
     --blue: #1d8fd1;
     --deep: #0f5e8e;
     --sky: #e3f2fb;
 }

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

 html {
     scroll-behavior: smooth
 }

 body {
     background: var(--bg);
     color: var(--ink);
     font: 16.5px/1.65 'Source Sans 3', Arial, sans-serif
 }

 h1,
 h2,
 h3 {
     font-family: 'Archivo', Arial, sans-serif;
     text-wrap: balance;
     line-height: 1.12
 }

 /* conteúdo traduzido vindo do banco: mostra só o idioma ativo */
 html:not([lang="en"]) [data-l="en"],
 html:not([lang="es"]) [data-l="es"],
 html[lang="en"] [data-l="pt"],
 html[lang="es"] [data-l="pt"] {
     display: none !important
 }

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

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

 .wrap {
     max-width: 1120px;
     margin: 0 auto;
     padding: 0 24px
 }

 .eyebrow {
     display: inline-block;
     font-size: 13px;
     font-weight: 600;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--blue);
     margin-bottom: 12px
 }

 .btn {
     display: inline-block;
     background: var(--blue);
     color: #fff;
     font-weight: 600;
     padding: 12px 26px;
     border-radius: 6px;
     font-size: 15.5px
 }

 .btn:hover {
     background: var(--deep)
 }

 .btn.o {
     background: transparent;
     color: var(--deep);
     border: 1.5px solid var(--deep)
 }

 .btn.o:hover {
     background: var(--sky)
 }

 a:focus-visible {
     outline: 2px solid var(--blue);
     outline-offset: 3px
 }

 /* utility bar + header */
 .util {
     background: var(--deep);
     color: #dceefa;
     font-size: 13.5px
 }

 .util .wrap {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 36px
 }

 .util a {
     color: #fff
 }

 .util .langs a {
     opacity: .75;
     margin-left: 10px
 }

.util .langs a.active {
  opacity: 1;
  font-weight: 600;
  text-decoration: underline;
}

 header.main {
     background: var(--card);
     border-bottom: 1px solid var(--line);
     position: sticky;
     top: 0;
     z-index: 50
 }

 header.main .wrap {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 78px
 }

 .logo img {
     height: 44px;
     width: auto
 }

 nav {
     display: flex;
     gap: 26px;
     align-items: center
 }

 nav a {
     font-weight: 600;
     font-size: 15px;
     color: var(--muted);
     padding: 6px 2px;
     border-bottom: 2px solid transparent
 }

 nav a:hover {
     color: var(--ink);
     border-color: var(--blue)
 }

 /* hero */
 .hero {
     background: var(--card);
     border-bottom: 1px solid var(--line)
 }

 .hero .wrap {
     display: grid;
     grid-template-columns: 1.05fr .95fr;
     gap: 56px;
     align-items: center;
     padding-top: 64px;
     padding-bottom: 64px
 }

 .hero h1 {
     font-size: clamp(34px, 4.6vw, 52px);
     font-weight: 700;
     margin-bottom: 18px
 }

 .hero h1 span {
     color: var(--blue)
 }

 .hero p {
     color: var(--muted);
     font-size: 18px;
     max-width: 54ch;
     margin-bottom: 28px
 }

 .hero-actions {
     display: flex;
     gap: 14px;
     flex-wrap: wrap;
     margin-bottom: 30px
 }

 .badges {
     display: flex;
     gap: 22px;
     flex-wrap: wrap;
     color: var(--muted);
     font-size: 14.5px
 }

 .badges span {
     display: flex;
     align-items: center;
     gap: 8px
 }

 .badges i {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--blue);
     flex: none
 }

 .hero-fig {
     position: relative
 }

 .hero-fig .frame {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 12px;
     box-shadow: 0 20px 50px rgba(15, 94, 142, .12);
     padding: 26px
 }

 .hero-fig .chip {
     position: absolute;
     left: -14px;
     bottom: 22px;
     background: var(--deep);
     color: #fff;
     border-radius: 8px;
     padding: 12px 18px;
     font-size: 14px;
     box-shadow: 0 10px 26px rgba(15, 94, 142, .3)
 }

 .hero-fig .chip b {
     display: block;
     font-family: 'Archivo';
     font-size: 17px
 }

 section {
     padding: 78px 0
 }

 .center {
     text-align: center;
     max-width: 62ch;
     margin: 0 auto 46px
 }

 .center h2 {
     font-size: clamp(28px, 3.6vw, 38px);
     margin-bottom: 12px
 }

 .center p {
     color: var(--muted);
     font-size: 17.5px
 }

 /* produtos */
 .prod-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 22px
 }

 .pcard {
     background: var(--card);
     border: 1px solid var(--line);
     border-radius: 12px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     transition: box-shadow .2s, transform .2s
 }

 .pcard:hover {
     box-shadow: 0 14px 34px rgba(15, 94, 142, .13);
     transform: translateY(-3px)
 }

 .pcard .ph {
     padding: 22px;
     height: 190px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #fff;
     border-bottom: 1px solid var(--line)
 }

 .pcard .ph img {
     max-height: 100%;
     object-fit: contain
 }

 .pcard .ph img.sem-foto {
     width: 55%;
     opacity: .18;
     filter: grayscale(1)
 }

 .center-cta {
     text-align: center;
     margin-top: 34px
 }

 .pcard .body {
     padding: 22px 24px 26px;
     display: flex;
     flex-direction: column;
     gap: 8px;
     flex: 1
 }

 .pcard h3 {
     font-size: 19px
 }

 .pcard p {
     font-size: 15px;
     color: var(--muted);
     flex: 1
 }

 .pcard .more {
     color: var(--blue);
     font-weight: 600;
     font-size: 14.5px
 }

 .pcard .more:hover {
     color: var(--deep)
 }

 /* empresa */
 .empresa {
     background: var(--card);
     border-top: 1px solid var(--line);
     border-bottom: 1px solid var(--line)
 }

 .empresa .wrap {
     display: grid;
     grid-template-columns: .95fr 1.05fr;
     gap: 56px;
     align-items: center
 }

 .empresa h2 {
     font-size: clamp(28px, 3.6vw, 38px);
     margin-bottom: 16px
 }

 .empresa .txt p {
     color: var(--muted);
     margin-bottom: 14px
 }

 .mvv {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
     margin-top: 26px
 }

 .mvv .box {
     background: var(--sky);
     border-radius: 10px;
     padding: 20px 22px
 }

 .mvv b {
     font-family: 'Archivo';
     color: var(--deep);
     display: block;
     margin-bottom: 6px
 }

 .mvv p {
     font-size: 14.5px;
     color: #33566d;
     margin: 0
 }

 .valores {
     background: var(--bg);
     border: 1px solid var(--line);
     border-radius: 12px;
     padding: 30px 32px
 }

 .valores h3 {
     font-size: 20px;
     margin-bottom: 18px
 }

 .valores ul {
     list-style: none;
     display: grid;
     grid-template-columns: 1fr;
     gap: 12px
 }

 .valores li {
     display: flex;
     gap: 12px;
     align-items: baseline;
     font-size: 15.5px
 }

 .valores li::before {
     content: "";
     width: 18px;
     height: 18px;
     flex: none;
     transform: translateY(3px);
     border-radius: 50%;
     background: var(--blue);
     clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 16%, 84% 4%, 38% 72%)
 }

 /* representantes */
 .rep .wrap {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 22px
 }

 .rep .tile {
     border-radius: 12px;
     padding: 38px 40px;
     color: #fff;
     background: linear-gradient(135deg, var(--deep), var(--blue))
 }

 .rep .tile.alt {
     background: var(--card);
     color: var(--ink);
     border: 1px solid var(--line)
 }

 .rep h3 {
     font-size: 24px;
     margin-bottom: 10px
 }

 .rep p {
     opacity: .92;
     margin-bottom: 22px;
     max-width: 44ch
 }

 .rep .tile.alt p {
     color: var(--muted)
 }

 .rep .tile .btn {
     background: #fff;
     color: var(--deep)
 }

 .rep .tile.alt .btn {
     background: var(--blue);
     color: #fff
 }

 /* contato */
 .contato .wrap {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 48px;
     align-items: start
 }

 .contato h2 {
     font-size: clamp(28px, 3.6vw, 38px);
     margin-bottom: 16px
 }

 .cinfo {
     display: grid;
     gap: 18px;
     margin-top: 8px
 }

 .cinfo .row {
     display: flex;
     gap: 16px;
     align-items: flex-start;
     background: var(--card);
     border: 1px solid var(--line);
     border-radius: 10px;
     padding: 16px 20px
 }

 .cinfo .ic {
     width: 42px;
     height: 42px;
     flex: none;
     border-radius: 9px;
     background: var(--sky);
     color: var(--deep);
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Archivo';
     font-weight: 700;
     font-size: 15px
 }

 .cinfo b {
     display: block;
     font-family: 'Archivo';
     font-size: 15px
 }

 .cinfo a,
 .cinfo p {
     color: var(--muted);
     font-size: 15px
 }

 .cinfo a:hover {
     color: var(--blue)
 }

 form {
     background: var(--card);
     border: 1px solid var(--line);
     border-radius: 12px;
     padding: 30px 32px;
     display: grid;
     gap: 14px
 }

 form h3 {
     font-size: 20px;
     margin-bottom: 4px
 }

 label {
     font-size: 13.5px;
     font-weight: 600;
     color: var(--muted)
 }

 input,
 textarea {
     width: 100%;
     border: 1px solid var(--line);
     border-radius: 7px;
     padding: 11px 13px;
     font: 15px 'Source Sans 3', Arial, sans-serif;
     background: #fbfdfe;
     color: var(--ink);
     margin-top: 5px
 }

 input:focus,
 textarea:focus {
     outline: 2px solid var(--blue);
     border-color: transparent
 }

 form .btn {
     border: 0;
     cursor: pointer;
     justify-self: start
 }

 footer {
     background: var(--deep);
     color: #cfe6f6;
     padding: 34px 0
 }

 footer .wrap {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     flex-wrap: wrap;
     font-size: 14px
 }

 footer a {
     color: #fff
 }

 /* crédito do desenvolvedor */
 footer .dev {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     font-family: 'Archivo', Arial, sans-serif;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: .14em;
     font-size: 11.5px;
     color: #9cc5e0;
     text-decoration: none
 }

 footer .dev img {
     height: 17px;
     width: auto
 }

 footer .dev b {
     color: #fff;
     font-weight: 600;
     transition: color .2s
 }

 footer .dev:hover b {
     color: #f0546e
 }

 .wa {
     position: fixed;
     right: 22px;
     bottom: 22px;
     z-index: 60;
     background: #25d366;
     color: #fff;
     width: 54px;
     height: 54px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 8px 24px rgba(0, 0, 0, .25)
 }

 .wa svg {
     width: 28px;
     height: 28px;
     fill: #fff
 }

 @media (max-width:920px) {

     .hero .wrap,
     .empresa .wrap,
     .contato .wrap,
     .rep .wrap {
         grid-template-columns: 1fr
     }

     .prod-grid {
         grid-template-columns: 1fr 1fr
     }

     nav {
         display: none
     }

     .util .contacts {
         display: none
     }
 }

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

     .mvv {
         grid-template-columns: 1fr
     }
 }

 @media (prefers-reduced-motion:reduce) {
     html {
         scroll-behavior: auto
     }

     .pcard,
     .pcard:hover {
         transition: none;
         transform: none
     }
 }
 /* hero com foto: a imagem preenche o quadro */
 .hero-fig .frame.foto {
     padding: 0;
     overflow: hidden
 }

 .hero-fig .frame.foto img {
     width: 100%;
     height: auto;
     aspect-ratio: 4 / 3;
     object-fit: cover
 }

 /* etiqueta no alto, para não cobrir o tubo que entra por baixo */
 .hero-fig .frame.foto+.chip {
     bottom: auto;
     top: 26px
 }

 /* foto da sede com os valores sobrepostos */
 .sede {
     position: relative
 }

 .sede img {
     width: 100%;
     height: auto;
     aspect-ratio: 4 / 3;
     object-fit: cover;
     border-radius: 14px;
     box-shadow: 0 20px 50px rgba(15, 94, 142, .16)
 }

 .sede .valores {
     position: relative;
     margin: -72px 28px 0 -28px;
     background: var(--card);
     box-shadow: 0 16px 40px rgba(15, 94, 142, .14);
     padding: 24px 28px
 }

 .sede .valores ul {
     grid-template-columns: 1fr 1fr;
     gap: 10px 22px
 }

 .sede .valores li {
     font-size: 14.5px;
     line-height: 1.45
 }

 /* estrutura: mosaico de fotos */
 .mosaico {
     display: grid;
     grid-template-columns: 1.15fr 1fr 1fr;
     grid-auto-rows: 290px;
     gap: 16px
 }

 .mosaico figure {
     position: relative;
     overflow: hidden;
     border-radius: 12px;
     background: var(--line)
 }

 .mosaico .m-grande,
 .mosaico .m-alta {
     grid-row: span 2
 }

 .mosaico img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s ease
 }

 .mosaico figure:hover img {
     transform: scale(1.04)
 }

 .mosaico figcaption {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     padding: 40px 18px 14px;
     background: linear-gradient(transparent, rgba(10, 40, 62, .82));
     color: #fff;
     font-family: 'Archivo', Arial, sans-serif;
     font-weight: 600;
     font-size: 16px;
     line-height: 1.3
 }

 @media (max-width:920px) {
     .sede .valores {
         margin: -60px 14px 0
     }

     .mosaico {
         grid-template-columns: 1fr 1fr;
         grid-auto-rows: 230px
     }

     .mosaico .m-grande {
         grid-column: span 2;
         grid-row: span 1
     }
 }

 @media (max-width:600px) {
     .sede .valores {
         margin: -40px 8px 0;
         padding: 20px
     }

     .sede .valores ul {
         grid-template-columns: 1fr
     }

     .mosaico {
         gap: 10px;
         grid-auto-rows: 170px
     }

     .mosaico .m-grande {
         grid-row: span 2
     }

     .mosaico figcaption {
         font-size: 14px;
         padding: 30px 12px 10px
     }
 }

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

     .mosaico img,
     .mosaico figure:hover img {
         transition: none;
         transform: none
     }
 }