/* ── css/titillium.css ── */
/* Titillium Web — auto-hospedada. Substitui a requisição ao Google Fonts;
   os unicode-range são os mesmos, então o browser só baixa o subset que usar.
   Arquivos originais: fonts.gstatic.com (SIL Open Font License 1.1). */

@font-face {
    font-family: 'Titillium Web';
    font-style: italic;
    font-weight: 200;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-200italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: italic;
    font-weight: 200;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-200italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-300italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-300italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-400italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-400italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-600italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-600italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-700italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-700italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-200-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-200-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-300-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-300-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-900-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/TitilliumWeb/TitilliumWeb-900-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── css/bootstrap-icons-sub-426557527ada.css ── */
/* Bootstrap Icons 1.13.1 (MIT) — auto-hospedado.
   Substitui o link ao cdn.jsdelivr.net, que bloqueava a renderização por ~900 ms.
   Fonte completa de propósito: as telas de /admin montam classes em runtime
   ('bi bi-' + icon), então um subset quebraria ícones que não dá para prever. */
/*!
 * Bootstrap Icons v1.13.1 (https://icons.getbootstrap.com/)
 * Copyright 2019-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE)
 */

@font-face {
  font-display: swap; /* era block: segurava os ícones por até 3 s */
  font-family: "bootstrap-icons";
  src: url("../fonts/bootstrap-icons/bootstrap-icons.woff2?e34853135f9e39acf64315236852cd5a") format("woff2"),
url("../fonts/bootstrap-icons/bootstrap-icons.woff?e34853135f9e39acf64315236852cd5a") format("woff");
}

.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subset: 90 de 2078 ícones, só os usados no site público.
   Regenerado automaticamente quando uma view muda (ver iconSubsetCss).
   Fonte: COMPLETA (131 KiB) — rode scripts/gerar-icones.sh */
.bi-arrow-left::before { content: "\f12f"; }
.bi-arrow-right::before { content: "\f138"; }
.bi-whatsapp::before { content: "\f618"; }
.bi-play-fill::before { content: "\f4f4"; }
.bi-instagram::before { content: "\f437"; }
.bi-facebook::before { content: "\f344"; }
.bi-youtube::before { content: "\f62b"; }
.bi-check::before { content: "\f26e"; }
.bi-x-lg::before { content: "\f659"; }
.bi-robot::before { content: "\f6b1"; }
.bi-hand-thumbs-up::before { content: "\f407"; }
.bi-hand-thumbs-down::before { content: "\f405"; }
.bi-arrows-angle-expand::before { content: "\f14a"; }
.bi-three-dots::before { content: "\f5d4"; }
.bi-sun::before { content: "\f5a2"; }
.bi-moon-stars::before { content: "\f496"; }
.bi-calendar3::before { content: "\f214"; }
.bi-currency-dollar::before { content: "\f636"; }
.bi-question-circle::before { content: "\f505"; }
.bi-upload::before { content: "\f603"; }
.bi-image::before { content: "\f42a"; }
.bi-file-earmark-pdf::before { content: "\f63e"; }
.bi-file-earmark-word::before { content: "\f38d"; }
.bi-file-earmark-zip::before { content: "\f391"; }
.bi-paperclip::before { content: "\f4b3"; }
.bi-check-lg::before { content: "\f633"; }
.bi-plus::before { content: "\f4fe"; }
.bi-emoji-smile::before { content: "\f327"; }
.bi-mic::before { content: "\f490"; }
.bi-arrow-up::before { content: "\f148"; }
.bi-chevron-left::before { content: "\f284"; }
.bi-chevron-right::before { content: "\f285"; }
.bi-arrows-angle-contract::before { content: "\f149"; }
.bi-person-fill::before { content: "\f4da"; }
.bi-file-earmark::before { content: "\f392"; }
.bi-cloud-download::before { content: "\f29b"; }
.bi-info-circle::before { content: "\f431"; }
.bi-google::before { content: "\f3f0"; }
.bi-arrow-left-short::before { content: "\f12c"; }
.bi-arrow-right-short::before { content: "\f135"; }
.bi-list::before { content: "\f479"; }
.bi-chevron-down::before { content: "\f282"; }
.bi-clock-history::before { content: "\f292"; }
.bi-telephone-outbound::before { content: "\f5bc"; }
.bi-calendar3-week::before { content: "\f213"; }
.bi-circle-fill::before { content: "\f287"; }
.bi-shield-lock::before { content: "\f538"; }
.bi-triangle-half::before { content: "\f5e4"; }
.bi-cpu::before { content: "\f2d6"; }
.bi-brush::before { content: "\f1d8"; }
.bi-house::before { content: "\f425"; }
.bi-building::before { content: "\f1dd"; }
.bi-shop::before { content: "\f543"; }
.bi-compass::before { content: "\f2d1"; }
.bi-tools::before { content: "\f5db"; }
.bi-gear::before { content: "\f3e5"; }
.bi-file-pdf::before { content: "\f640"; }
.bi-patch-exclamation-fill::before { content: "\f4b7"; }
.bi-geo-alt::before { content: "\f3e8"; }
.bi-fullscreen::before { content: "\f3df"; }
.bi-box-seam::before { content: "\f1c7"; }
.bi-link-45deg::before { content: "\f470"; }
.bi-award::before { content: "\f154"; }
.bi-headset::before { content: "\f414"; }
.bi-calendar-check::before { content: "\f1e2"; }
.bi-eye::before { content: "\f341"; }
.bi-eye-slash::before { content: "\f340"; }
.bi-check2-circle::before { content: "\f270"; }
.bi-cloud-sun::before { content: "\f2be"; }
.bi-rulers::before { content: "\f523"; }
.bi-plug::before { content: "\f4f7"; }
.bi-vector-pen::before { content: "\f604"; }
.bi-slash-square::before { content: "\f569"; }
.bi-lock::before { content: "\f47b"; }
.bi-shield-check::before { content: "\f52f"; }
.bi-exclamation-circle::before { content: "\f333"; }
.bi-stars::before { content: "\f589"; }
.bi-bounding-box-circles::before { content: "\f1b5"; }
.bi-stack::before { content: "\f585"; }
.bi-hr::before { content: "\f426"; }
.bi-aspect-ratio::before { content: "\f150"; }
.bi-soundwave::before { content: "\f57c"; }
.bi-lightning-fill::before { content: "\f46e"; }
.bi-shield-shaded::before { content: "\f53b"; }
.bi-phone-vibrate::before { content: "\f4e6"; }
.bi-trophy::before { content: "\f5e7"; }
.bi-speedometer::before { content: "\f57f"; }
.bi-safe2::before { content: "\f653"; }
.bi-volume-mute::before { content: "\f60d"; }
.bi-palette2::before { content: "\f4b2"; }

/* ── css/globals.css ── */
/* Inter — variable font, auto-hospedada.
   Era o .ttf cru de 856 KB (itálico 884 KB), que a partir de /revendedores/cadastro
   passou a pesar numa página pública de conversão. Agora é woff2 com subset
   latin + latin-ext: 204 KB e 228 KB, mesmos eixos variáveis (opsz 14-32,
   wght 100-900). O .ttf original segue no repositório como fonte da conversão. */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Italic-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {

    /* Cores */
    --color-misteryBlue: 29, 44, 93;
    --color-darkBlue: 7, 35, 94;
    --color-laranBlue: 26, 75, 169;
    --color-lightBlue: 87, 161, 216;
    --color-lightestBlue: 201, 232, 255;
    --color-blueishGray: 237, 241, 246;
    --color-grayshBlue: 211, 221, 234;
    --color-almostWhite: 248, 250, 249;
    --color-white: 245, 247, 250;
    --color-totalWhite: 255, 255, 255;
    --color-panelGray: 241, 241, 241;
    /* Neutro #F1F1F1 — painéis / chat (vizinho: --color-blueishGray 237,241,246) */
    --color-lightGray: 217, 217, 217;
    --color-darkGray: 201, 201, 201;
    --color-darkestGray: 68, 68, 68;
    --color-almostBlack: 17, 23, 31;
    --color-black: 29, 29, 27;
    --color-red: 230, 50, 18;
    --color-green: 0, 162, 0;

    /* Font family */
    --fontFamily-titillium: 'Titillium Web', sans-serif;
    --fontFamily-inter: 'Inter', sans-serif;

    /* Font styles - Escala tipográfica profissional */
    --fontStyle-h1: clamp(1.75rem, 3vw, 2.5rem);
    --fontStyle-h2: clamp(1.5rem, 2.5vw, 2rem);
    --fontStyle-h3: clamp(1.25rem, 2vw, 1.5rem);
    --fontStyle-h4: clamp(1.125rem, 1.5vw, 1.25rem);
    --fontStyle-h5: clamp(1rem, 1vw, 1.125rem);
    --fontStyle-h6: 1rem;
    --fontStyle-body: clamp(1rem, 1.2vw, 1.125rem);
    --fontStyle-lead: clamp(1.125rem, 1.5vw, 1.25rem);
    --fontStyle-small: clamp(0.875rem, 1vw, 0.875rem);

    /* Font weight - Hierarquia otimizada */
    --fontWeight-light: 300;
    /* Para títulos grandes (H1, H2) */
    --fontWeight-normal: 400;
    /* Para H3 e texto normal */
    --fontWeight-medium: 500;
    /* Para H4 */
    --fontWeight-semibold: 600;
    /* Para H5 */
    --fontWeight-bold: 700;
    /* Para H6 e destaques */

    /* Line height - Otimizado para legibilidade */
    --lineHeight-tight: 1.1;
    /* Títulos grandes */
    --lineHeight-snug: 1.2;
    /* Títulos médios */
    --lineHeight-normal: 1.3;
    /* Subtítulos */
    --lineHeight-relaxed: 1.4;
    /* Títulos pequenos */
    --lineHeight-loose: 1.6;
    /* Texto do corpo */

    /* Size */

    --widthHeight-big: 2rem;
    --widthHeight-medium: 1.5rem;
    --widthHeight-small: 1rem;


    /* Spacing */
    --spacing-superSpacing: 10rem;
    --spacing-bigger: 2rem;
    --spacing-double: 1.5rem;
    --spacing-big: 1rem;
    --spacing-medium: 0.7rem;
    --spacing-small: 0.5rem;
    --spacing-zero: 0rem;

    /* Align */

    --align-center: center;
    --align-flexStart: flex-start;
    --align-flexEnd: flex-end;

    /* Borders */

    --border-radiusRound: 10rem;
    --border-radiusMedium: 1rem;
    --border-radiusSmall: 0.5rem;


    /* Transition */
    --transition-default: all 0.3s ease;

    /* Display */
    --display-flex: flex;
    --display-inlineFlex: inline-flex;
    --display-block: block;
    --display-grid: grid;

    /* Justify content */
    --justifyContent-spaceBetween: space-between;
    --justifyContent-center: center;

    /* background Blur */
    --backdropFilter-big: 2rem;
    --backdropFilter-medium: 1rem;
    --backdropFilter-small: 0.5rem;

    /* Cursor */

    --cursor-pointer: pointer;
    --cursor-none: none;
}

/* ===== VISIBILIDADE GERAL ===== */
.desktopView { display: block; }
.mobileView { display: none; }

/* ===== LOGOTIPO ===== */
.mainLogo {
    width: clamp(8rem, 10vw, 10rem);
    padding-left: var(--spacing-big);
    transition: filter 0.2s ease;
}
.whiteLogo { filter: brightness(100%); }
.blackLogo { filter: brightness(0%); }

*,
*::before,
*::after {
    box-sizing: border-box;
    transition: all 0.2s ease;
    scroll-behavior: smooth;
    padding: 0;
    margin: 0;
}

[id] {
    scroll-margin-top: 10rem
}

i {
    display: flex;
    line-height: 1;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    flex-direction: column;
}

img {
    width: 100%;
    height: 100%;
}

/* <picture> serve só para o browser escolher entre AVIF/WebP/original — ele não
   deve existir para o layout. Sem isso o <img> acima passaria a medir 100% do
   <picture> (inline) em vez do container real, quebrando todo flex/grid e os
   height:100% do slider. `display: contents` remove a caixa intermediária. */
picture {
    display: contents;
}

a {
    text-decoration: none;
    margin: 0;
    padding: 0;
}

/* ===== TIPOGRAFIA PROFISSIONAL - ESCALA OTIMIZADA ===== */

h1 {
    font-size: clamp(2.25rem, 3.50vw, 3rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -1.5%;
}

h2 {
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -1%;
}

h3 {
    font-size: clamp(1.75rem, 2.5vw, 2rem);
    font-weight: 400;
    line-height: 1.3;
}

h4 {
    font-size: clamp(1.625rem, 2vw, 1.75rem);
    font-weight: 500;
    line-height: 1.4;
}

h5 {
    font-size: clamp(1.25rem, 1.25vw, 1.125rem);
    font-weight: 600;
    line-height: 1.4;
}

h6 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Texto do corpo otimizado */
p {
    font-size: clamp(1rem, 1vw, 1.125rem);
    color: rgba(var(--color-almostBlack), 1);
    line-height: 1.6;
}

/* Texto pequeno para legendas e metadados */
small,
.caption,
.metadata {
    font-size: clamp(0.875rem, 1vw, 0.875rem);
    color: rgba(var(--color-darkestGray), 1);
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

/* Lead text - texto de destaque */
.lead {
    font-size: clamp(1.125rem, 1.5vw, 1.25rem);
    font-weight: 300;
    line-height: 1.5;
    color: rgba(var(--color-darkestGray), 1);
    margin-bottom: 1.5rem;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background-color: rgba(var(--color-almostWhite), 1);
    font-family: 'Titillium Web', sans-serif;
    line-height: 1.2;
    overflow-x: hidden;
}

.paddingSmall {
    padding: var(--spacing-small);
}

.paddingMedium {
    padding: var(--spacing-medium);
}

.paddingBig {
    padding: var(--spacing-big);
}

.paddingBottomDouble {
    padding-bottom: var(--spacing-double);
}

.marginLeftDouble {
    margin-left: var(--spacing-double);
}

.marginLeftMedium {
    margin-left: var(--spacing-medium);
}

.marginTopBig {
    margin-top: var(--spacing-big);
}

.marginTop-2rem {
    margin-top: 2rem;
}

.marginTopMedium {
    margin-top: var(--spacing-medium);
}

.marginBottomBigger {
    margin-bottom: var(--spacing-bigger);
}

.topSuperSpacing {
    padding-top: var(--spacing-superSpacing);
}


/* Classes de alinhamento */

.displayFlex {
    display: var(--display-flex);
    justify-content: var(--justifyContent-spaceBetween);
}

/* ARRUMAR OS DE BAIXO //
// Não deve sobrar nada */

.gap3rem {
    gap: 3rem;
}

.titleBig {
    font-size: 3rem;
    font-weight: 300;
}

.paddingLeft5rem {
    padding-left: 5rem;
}

.backgroundLaranBlue {
    background-color: rgba(var(--color-laranBlue), 1);
}

.paddingRight5rem {
    padding-right: 5rem;
}

.paddingTop-10rem {
    padding-top: 10rem;
}

.marginTop-2rem {
    margin-top: 2rem;
}

.imgWidth-10 {
    width: 10%;
}

.font-size-08rem {
    font-size: 0.8rem;
}
/* ── css/identidadeVisual.css ── */
/* Cores de fundo */
.bgColor-blueishGray {
    background-color: rgba(var(--color-blueishGray), 1);
}

.bgColor-laranBlue {
    background-color: rgba(var(--color-laranBlue), 1);
}

.bgColor-darkBlue {
    background-color: rgba(var(--color-darkBlue), 1);
}

.bgColor-almostWhite {
    background-color: rgba(var(--color-almostWhite), 1);
}

.bgColor-almostBlack {
    background-color: rgba(var(--color-almostBlack), 1);
}

.linkInativo {
    opacity: 0.65;
}

.solucoesHeaderWrapper-02 {
    width: 83.33%;
    margin: 0 auto;
    padding-top: 10rem;
    max-width: 1600px;
}
/* ── css/miscellanea.css ── */
/* Estilos para Termos de compromisso */

.termosPage {
    width: 100%;
    height: auto;
    margin: 0;
    padding-top: 12.5rem;
    background-color: rgba(var(--color-lightGray), 1);
}

.termosWrapper {
    width: 83.33%;
    margin: 0 auto;
    padding-bottom: 10rem;
    overflow: hidden;
}

.termosHeader {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    justify-content: space-between;
    align-items: flex-start;
    margin: 0;
    padding: 0 0 3rem 0;
}

.termosTitulo h1 {
    font-weight: 300;
    color: rgba(var(--color-laranBlue), 1);
    margin: 0;
    padding: 0;
}

.termosAtualizacao {
    width: 100%;
    text-align: left;
}

.menuTermos {
    display: none;
}

.menuTermos ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menuTermos ul li {
    padding: 0.5rem 0;
    color: rgba(var(--color-almostBlack), 0.7);
}

.menuTermos ul li a {
    color: rgba(var(--color-almostBlack), 0.7);
}

.menuTermos ul li a:hover {
    color: rgba(var(--color-lightBlue), 0.7);
}

.termosContainer {
    display: grid;
    grid-template-columns: 100%;
    justify-content: space-between;
    gap: 3rem;
}

.termosContent {
    overflow-y: scroll;
}

@media (min-width: 1200px) {

    .menuTermos {
        display: block;
    }

    .termosContainer {
        grid-template-columns: 20% 65%;
    }

    .termosAtualizacao {
        width: 100%;
        text-align: right;
    }
}
/* ── css/pages.css ── */
/* Arquivo dedicado aos estilos específicos de cada página */

/* Páginas de produtos */

/* Seção aplicações */

/*
produtosAplicacoes img h3 p h2 p
produtosAplicacoesWrapper
produtosAplicacoesTitle
produtosAplicacoesIcons
produtosAplicacoesIconsContainer
produtosAplicacao
*/

.produtosAplicacoes {
    width: 100%;
    padding: 8rem 0;
    background-color: rgba(var(--color-darkBlue), 1);
}

.produtosAplicacoes h3 {
    color: rgba(var(--color-almostWhite), 0.9);
    font-weight: 300;
    margin: 0;
    padding: 0;
}

.produtosAplicacoes h2 {
    color: rgba(var(--color-almostWhite), 0.9);
    font-weight: 300;
    font-size: 2.5rem;
    margin: 0;
    padding: 0;
}

.produtosAplicacoes p {
    color: rgba(var(--color-almostWhite), 0.65);
    font-weight: 300;
    margin: 0;
    padding: 2rem 0;
}

.produtosAplicacoes img {
    width: 5rem;
    height: auto;
    padding-bottom: 2rem;
}

.produtosAplicacoesWrapper {
    width: 83.33%;
    margin: 0 auto;
    max-width: 1600px;
}

.produtosAplicacoesTitle {
    width: 80%;
}

@media (min-width: 1200px) {
    .produtosAplicacoesTitle {
        width: 50%;
    }
}

.produtosAplicacoesIcons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.produtosAplicacao {
    background-color: rgba(var(--color-laranBlue), 1);
    border-radius: 1.5rem;
    padding: 0 3rem;
}

.produtosAplicacaoContainer {
    width: 80%;
    padding: 6rem 0 1rem 0;
}

.solucoesOferecidasSection {
    width: 100%;
    height: auto;
    padding: 8rem 0;
}

.solucoesOferecidasSection h4 {
    border-bottom: 1px solid rgba(var(--color-laranBlue), 1);
    padding-bottom: 0.5rem;
}

.solucoesOferecidasSection h3 {
    padding: 2rem 0;
    color: rgba(var(--color-laranBlue), 1);
}

.solucoesOferecidasSection span {
    font-size: 1.2rem;
    color: rgba(var(--color-almostBlack), 0.8);
}

.solucoesOferecidasSection p {
    padding: 1rem 0;
    color: rgba(var(--color-almostBlack), 0.6);
}

.solucoesOferecidasSection img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
}

.solucoesOferecidasWrapper {
    width: 83.33%;
    margin: 0 auto;
}

.solucoesOferecidasCardsWrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.solucoesOferecidasCard {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: rgba(var(--color-blueishGray), 1);
    padding: 1rem;
    border: 1px solid rgba(var(--color-laranBlue), 0.1);
    border-radius: 1.5rem;
    line-height: 1.4;
}

/* ======================== */
/* solutionFeatures         */
/* ======================== */

.solutionFeatures {
    display: flex;
    flex-direction: column;
}

.solutionFeaturesItem {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
}

.solutionFeatures-CheckCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.2rem;
    height: 1.2rem;
    padding-top: 1px;
    background-color: rgba(var(--color-laranBlue), 1);
    border-radius: 2rem;
}

.solutionFeatures-CheckCircle i {
    color: rgba(var(--color-almostWhite), 0.65);
}

.solutionApplications {
    display: flex;
    flex-direction: column;
    width: fill;
}

.solutionApplicationsItems {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.solutionApplicationsItem {
    background-color: rgba(var(--color-almostWhite), 0.5);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(var(--color-laranBlue), 0.1);
}

.solutionApplicationsItem img {
    width: 10%;
    background-color: rgba(var(--color-almostWhite), 1);
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(var(--color-laranBlue), 0.1);
}

.solutionButton {
    width: 100%;
    background-color: rgba(var(--color-lightBlue), 0.15);
    border: 1px solid rgba(var(--color-lightBlue), 0.25);
    border-radius: 0.5rem;
    align-items: center;
    line-height: 1;
}

.solutionButton i {
    background-color: aliceblue;
}

/* ============================================================= */
/* Páginas específicas de soluções                               */
/* ============================================================= */

.productInfoSection {
    width: 100%;
}

.productInfoWrapper {
    width: 83.33%;
    margin: 0 auto;
    padding: 0;
    max-width: 1600px;
}

.productInfoTitle {
    width: 100%;
    border-bottom: 1px solid rgba(var(--color-laranBlue), 0.5);
    padding: 0;
    margin: 0 0 1rem 0;
}

.productInfoTitle h2 {
    font-size: 2rem;
    font-weight: 300;
    color: rgba(var(--color-laranBlue), 1);
    padding: 0 0 0.5rem 0;
    margin: 0;
}

.productInfoContent {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.productInfoContent p {
    line-height: 1.6;
    color: rgba(var(--color-almostBlack), 0.6);
}

.productFeaturesSection {
    width: 100%;
    padding: 10rem 0;
}

.productFeaturesWrapper {
    width: 83.33%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin: 0 auto;
    max-width: 1600px;
}

.productFeaturesContent {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-direction: column;
}

.productFeaturesContentImg {
    width: 100%;
    overflow: hidden;
}

.productFeaturesContentImg img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
}

.productFeaturesContentFeatures {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    height: 100%;
}

.productFeaturesItem {
    background-color: rgba(var(--color-laranBlue), 0.1);
    border: 1px solid rgba(var(--color-laranBlue), 0.2);
    padding: 1rem;
    border-radius: 1rem;
    display: flex;
    gap: 1rem;
}

.productBenefitsSection {
    background-color: rgba(var(--color-darkBlue), 1);
    width: 100%;
    padding: 10rem 0;
}

.productBenefitsWrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
    width: 83.33%;
    margin: 0 auto;
    max-width: 1600px;
}

.productBenefitsCard {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: rgba(var(--color-laranBlue), 0.9);
    padding: 2rem;
    border-radius: 1rem;
}

.productBenefitsCard i {
    font-size: 3rem;
    height: auto;
    color: rgba(var(--color-lightBlue), 1);
}

.productBenefitsCard p {
    color: rgba(var(--color-almostWhite), 0.65);
}

/* ============================================================= */
/* Características gerais                                        */
/* ============================================================= */


.caracteristicasGeraisSection {
    width: 100%;
    padding: 10rem 0;
    background-color: rgba(var(--color-black), 1);
}

.caracteristicasGeraisWrapper {
    width: 83.33%;
    margin: 0 auto;
    max-width: 1600px;
}

.caracteristicasGeraisHeader {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
}

.caracteristicasGeraisHeaderContent .subtitle {
    font-size: 0.7rem;
    color: rgba(var(--color-lightBlue), 1);
    letter-spacing: 3px;
    font-weight: 300;
}

.caracteristicasGeraisHeaderContent h3 {
    font-size: 2.5rem;
    color: rgba(var(--color-almostWhite), 1);
    margin: 0;
}

.caracteristicasGeraisHeaderContentLinks {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

.caracteristicasGeraisHeaderContentLinks p {
    color: rgba(var(--color-almostWhite), 0.3);
}

.caracteristicasGeraisHeaderContentLinks a {
    color: rgba(var(--color-lightBlue), 0.6);
}

.caracteristicasGeraisHeaderContentLinks a:hover {
    color: rgba(var(--color-lightBlue), 1);
}

.caracteristicasGeraisGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    padding: 3rem 0;
    gap: 2rem;
}

.caracteristicasGeraisColumn h4 {
    color: rgba(var(--color-almostWhite), 0.8);
    padding: 0 0 0.5rem 0;
}

.caracteristicasGeraisColumn-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.caracteristicasGeraisColumn-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(var(--color-almostWhite), 0.1);
}

.caracteristicasGeraisColumn-item p {
    color: rgba(var(--color-almostWhite), 0.4);
}

.caracteristicasGeraisColumn-AvisoCentral {
    background-color: rgba(var(--color-lightBlue), 0.25);
    border: 1px solid rgba(var(--color-lightBlue), 0.5);
    color: rgba(var(--color-lightBlue), 0.8);
    padding: 1rem;
    border-radius: 1rem;
    margin-top: 1rem;
}


/* ============================================================= */
/* sobre-empresa-header                                          */
/* ============================================================= */

.sobre-empresa-header {
    width: 100%;
    background-color: rgba(var(--color-almostWhite), 1);
    padding: 10rem 0 5rem 0;
}

.sobre-empresa-header-wrapper {
    width: 83.33%;
    max-width: 100rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.header-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    width: 100%;
}

.header-container h1 {
    color: rgba(var(--color-laranBlue), 1);
}

.header-container img {
    border-radius: 1rem;
}

.sobre-empresa-numbers {
    padding: 5rem 0;
    background-color: rgba(var(--color-almostWhite), 1);
}

.sobre-empresa-numbers-wrapper {
    width: 83.33%;
    max-width: 100rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sobre-empresa-numbers-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 2rem;
    background-color: rgba(var(--color-laranBlue), 0.1);
    border: 1px solid rgba(var(--color-laranBlue), 0.25);
    border-radius: 1rem;
    gap: 3rem;
}

.sobre-empresa-numbers-item h2 {
    color: rgba(var(--color-lightBlue), 1);
}

.sobre-empresa-numbers-item p {
    font-size: 1.6rem;
    font-weight: 300;
}

.sobre-empresa-numbers-item sup {
    font-size: 0.8rem;
}

.sobre-empresa-calltoaction {
    width: 100%;
    background-color: rgba(var(--color-almostWhite), 1);
    padding: 5rem 0;
}

.sobre-empresa-calltoaction-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 83.33%;
    padding: 5rem 5rem;
    margin: 0 auto;
    max-width: 100rem;
    border-radius: 1rem;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-image: url('/public/assets/img/sustentabilidade.avif');
    background-size: cover;
    background-position: center;
}

.sobre-empresa-calltoaction-wrapper::before {
    position: absolute;
    content: '';
    display: flex;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color-almostBlack), 0.75);
    z-index: 10;
}

.sobre-empresa-calltoaction-wrapper h3 {
    color: rgba(var(--color-lightBlue), 0.8);
    font-size: 3rem;
    font-weight: 300;
    z-index: 20;
}

.sobre-empresa-calltoaction-wrapper p {
    color: rgba(var(--color-almostWhite), 0.65);
    z-index: 19;
}

.sobre-empresa-calltoaction-wrapper .btnWrapper {
    z-index: 18;
    margin-top: 2rem;
}

.sobre-empresa-calltoaction-wrapper .tag-subtitle {
    background-color: rgba(var(--color-almostWhite), 0.9);
    z-index: 17;
}

.sobre-empresa-clients-carousel {
    padding: 2rem 0;
    background-color: rgba(var(--color-almostWhite), 1);
}

.sobre-empresa-why {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 5rem 0;
}

.sobre-empresa-why-wrapper {
    display: flex;
    flex-direction: column;
    width: 83.33%;
    margin: 0 auto;
    max-width: 100rem;
    gap: 5rem;
}

.sobre-empresa-why-header {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1rem;
}

.sobre-empresa-why-header span {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.sobre-empresa-why-header h2 {
    color: rgba(var(--color-lightBlue), 1);
}

.sobre-empresa-why-header p {
    color: rgba(var(--color-almostBlack), 0.65);
    font-size: 1rem;
}

.sobre-empresa-why-brandpilars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    height: 100%;
}

.sobre-empresa-why-brandpilars img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
}

.sobre-empresa-why-pilars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1rem;
    width: 100%;
}

.sobre-empresa-why-pilar {
    padding: 5rem 2rem 2rem 2rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sobre-empresa-why-pilar h5 {
    font-weight: 600;
}

.sobre-empresa-why-pilar:nth-child(1) {
    background-color: rgba(var(--color-almostBlack), 0.1);
}

/* 2º pilar - light blue */
.sobre-empresa-why-pilar:nth-child(2) {
    background-color: rgba(var(--color-lightBlue), 1);
    color: rgba(var(--color-almostWhite), 1);
}

/* 3º pilar - laran blue */
.sobre-empresa-why-pilar:nth-child(3) {
    background-color: rgba(var(--color-laranBlue), 1);
    color: rgba(var(--color-almostWhite), 1);
}

/* 4º pilar - almost-black 0.1 */
.sobre-empresa-why-pilar:nth-child(4) {
    background-color: rgba(var(--color-almostBlack), 0.1);
}

.sobre-empresa-why-pilar:nth-child(3) p,
.sobre-empresa-why-pilar:nth-child(2) p {
    color: rgba(var(--color-almostWhite), 0.65)
}

.sobre-empresa-historia {
    width: 100%;
    padding: 5rem 0;
}

.sobre-empresa-historia-wrapper {
    width: 83.33%;
    max-width: 100rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sobre-empresa-historia-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.sobre-empresa-historia-header h3 {
    color: rgba(var(--color-laranBlue), 1);
    text-align: center;
}

.TabbedSection-tabs {
    display: flex;
    flex: row;
    gap: 0.25rem;
    justify-content: center;
    border-radius: 100rem;
}

.tab-button {
    background-color: rgba(var(--color-laranBlue), 0.1);
    border: 2px solid rgba(var(--color-almostBlack), 0.10);
    border-radius: 2rem;
    padding: 0.50rem 1rem;
    width: max-content;
    cursor: pointer;
    font-size: 0.9rem;
    color: rgba(var(--color-almostBlack), 0.7);
}

.tab-button:hover {
    border-color: rgba(var(--color-laranBlue), 0.5);
    color: rgba(var(--color-laranBlue), 1);
}

.tab-button.active {
    background-color: rgba(var(--color-laranBlue), 1);
    border-color: rgba(var(--color-laranBlue), 1);
    color: rgba(var(--color-almostWhite), 1);
}

.TabbedSection-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: stretch;
}

.TabbedSection-content {
    display: none;
    flex-direction: column;
    background-color: rgba(var(--color-almostBlack), 0.1);
    padding: 2rem;
    border-radius: 1rem;
    gap: 1rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    height: 20rem;
    overflow-y: auto;
}

.TabbedSection-content.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.TabbedSection-content h4 {
    font-size: 1.5rem;
    font-weight: 600;
    color: rgba(var(--color-almostBlack), 1);
    margin-bottom: 0.5rem;
}

.TabbedSection-content p {
    font-size: 1rem;
    color: rgba(var(--color-almostBlack), 0.65);
    line-height: 1.6;
}

.TabbedSection-image {
    border-radius: 1rem;
    overflow: hidden;
    height: 20rem;
}

.tab-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
    opacity: 0;
    transform: scale(1.1);
    transition: all 0.3s ease;
    display: none;
}

.tab-image.active {
    opacity: 1;
    transform: scale(1);
    display: block;
}

.callAction-default {
    width: 100%;
    padding: 0 0 5rem 0;
}

.callAction-wrapper {
    display: flex;
    flex-direction: column;
    width: 83.33%;
    margin: 0 auto;
    border-radius: 1rem;
    background-color: rgba(var(--color-laranBlue), 1);
    max-width: 100rem;
    align-items: flex-end;
}

.callAction-content {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    width: 100%;
    gap: 1rem;
}

.callAction-content:last-child {
    align-items: flex-start;
}

.callAction-content h3 {
    color: rgba(var(--color-almostWhite), 1);
}

.callAction-content p {
    color: rgba(var(--color-almostWhite), 0.65);
}


/* ============================================================= */
/* Ajustes de responsibilidade                                   */
/* ============================================================= */

@media (min-width: 1200px) {
    .productInfoContent {
        flex-direction: row;
        gap: 3rem;
    }

    .productFeaturesContent {
        display: flex;
        flex-direction: row;
    }

    .caracteristicasGeraisHeader {
        flex-direction: row;
    }

    .caracteristicasGeraisGrid {
        gap: 3rem;
    }

    .sobre-empresa-header-wrapper {
        flex-direction: row;
        gap: 5rem;
    }

    .sobre-empresa-numbers-wrapper {
        flex-direction: row;
    }

    .sobre-empresa-why-header {
        flex-direction: row;
    }

    .sobre-empresa-why-brandpilars {
        grid-template-columns: 30% 70%;
    }

    .TabbedSection-container {
        flex-direction: row;
    }

    .TabbedSection-container {
        grid-template-columns: 1fr 1fr;
    }

    .callAction-wrapper {
        flex-direction: row;
    }

    .callAction-content {
        flex-direction: column;
    }

    .callAction-content:last-child {
        align-items: flex-end;
    }
}

/* Estilos do blog movidos para Blog.module.css */
/* Estilos da galeria movidos para Galeria.module.css */
/* ── css/productPage.css ── */
.productPage-Section {
    width: 100%;
    padding: 0;
}

.productPage-Section-02 {
    width: 100%;
    padding: 0;
}

/* ================================================ */
/* Estilos para seção header                        */
/* ================================================ */

.productPage-Header-Section {
    background-color: rgba(var(--color-blueishGray), 1);
    padding: 0;
}

.productPage-Header-Wrapper {
    width: 83.33%;
    margin: 0 auto;
    padding: 5rem 0 0 0;
    display: flex;
    max-width: 100rem;
    flex-direction: column;
}

.productPage-Header {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

/* Hero da página /revendedores: primeiro elemento da página, sem carrossel acima.
   O nav é fixed (~5.5rem de altura útil), então o padding-top compensa o nav + 5rem de respiro. */
.productPage-Header-Wrapper.revendedores-Hero {
    padding: 11rem 0 5rem 0;
}

.productPage-Header-CallToAction {
    display: flex;
    flex-direction: column;
    margin-top: 2.5rem;
    gap: 2rem;
    justify-content: space-between;
}

.productPage-Header-CallToAction-Links {
    display: flex;
    flex-direction: column;
}

.productPage-Header-CallToAction-Links ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    gap: 1rem;
    padding: 0;
}

.productPage-Header-CallToAction-Links ul li a {
    color: rgba(var(--color-laranBlue), 0.65);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background-color: rgba(var(--color-lightBlue), 0);
    border: 1px solid rgba(var(--color-lightBlue), 0);
    border-radius: 5rem;
    width: max-content;
    overflow: hidden;
}

.productPage-Header-CallToAction-Links ul li a:hover {
    background-color: rgba(var(--color-lightBlue), 0.1);
    border: 1px solid rgba(var(--color-lightBlue), 0.25);
    color: rgba(var(--color-lightBlue), 0.85);
}

.productPage-Header-CallToAction-Links i {
    width: 1rem;
    height: 1rem;
}

.productPage-Header-CallToAction-Links ul li a:hover i {
    animation: btnAnimation 0.2s ease-in-out forwards;
}

/* ================================================ */
/* Estilos para seção do carrossel                  */
/* ================================================ */

.productPage-Carousel-Wrapper {
    position: relative;
    width: 100%;
    max-height: 50rem;
    min-height: 31.25rem;
    max-width: 2400px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}

.productPage-Carousel-Container {
    aspect-ratio: 16 / 7;
    overflow: hidden;
    width: 100%;
    max-height: 50rem;
    min-height: 31.25rem;
    position: relative;
}

.productPage-Carousel-Items {
    display: flex;
    width: 100%;
    height: 100%;
}

.productPage-Carousel-Items img {
    object-fit: cover;
    object-position: center;
    overflow: hidden;
}

.productPage-Carousel-Controls {
    display: none;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.5rem;
    background-color: rgba(var(--color-almostWhite), 0.5);
    border: 1px solid rgba(var(--color-almostWhite), 0.35);
    border-radius: 10rem;
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    z-index: 10;
}

.productPage-Carousel-Controls-Previous,
.productPage-Carousel-Controls-Next {
    background-color: rgba(var(--color-almostWhite), 0.5);
    border-radius: 50%;
    padding: 0.5rem;
    border: 1px solid rgba(var(--color-almostWhite), 0.65);
    cursor: pointer;
    font-size: 1.5rem;
    overflow: hidden;
}

.productPage-Carousel-Controls-Previous:hover,
.productPage-Carousel-Controls-Next:hover {
    background-color: rgba(var(--color-almostWhite), 0.75);
    border: 1px solid rgba(var(--color-lightBlue), 0.25);
    color: rgba(var(--color-lightBlue), 1);
}

.productPage-Carousel-Indicators {
    display: none;
    gap: 0.5rem;
    align-items: center;
}

.productPage-Carousel-Indicator {
    width: 16px;
    height: 16px;
    background-color: rgba(var(--color-almostWhite), 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.productPage-Carousel-Indicator.active {
    background-color: rgba(var(--color-almostWhite), 1);
    border: 1px solid rgba(var(--color-lightBlue), 0.25);
}

.productPage-Carousel-Indicator:hover {
    background-color: rgba(var(--color-almostWhite), 0.8);
}

/* ================================================ */
/* Estilos para seção info                          */
/* ================================================ */

.productPage-Info {
    display: flex;
    width: 83.33%;
    max-width: 100rem;
    margin: 0 auto;
    flex-direction: column;
    gap: 5rem;
    padding: 5rem 0 10rem 0;
}

.productPage-Container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.productPage-ApplicationsItems {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    width: 100%;
    gap: 0.5rem;
}

.productPage-Container h4 {
    color: rgba(var(--color-laranBlue), 0.65);
    border-bottom: 1px solid rgba(var(--color-almostBlack), 0.25);
    display: flex;
    padding: 0.5rem;
}

.productPage-ApplicationsItem {
    background-color: rgba(var(--color-laranBlue), 0.05);
    border: 1px solid rgba(var(--color-laranBlue), 0.1);
    border-radius: 0.5rem;
    display: flex;
    width: 100%;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
}

.productPage-ApplicationsItem img {
    width: 2.5rem;
    height: auto;
}

/* ================================================ */
/* Seção diferenciais                               */
/* ================================================ */

.productPage-Diferenciais {
    width: 100%;
    background-color: rgba(var(--color-misteryBlue), 1);
    padding: 10rem 0;
}

.productPage-Diferenciais-Wrapper {
    width: 83.33%;
    margin: 0 auto;
    display: flex;
    max-width: 100rem;
    flex-direction: column;
}

.productPage-Diferenciais-Container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.productPage-Diferenciais-Items {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.productPage-Diferenciais-Item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.productPage-Diferenciais-Container h2 {
    color: rgba(var(--color-almostWhite), 1);
    width: 100%;
}

.productPage-Diferenciais-lightBlue-h2 {
    color: rgba(var(--color-lightBlue), 1);
    width: 100%;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 300;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

.color-lightBlue {
    color: rgba(var(--color-lightBlue), 1)
}

.productPage-Diferenciais-Container i {
    font-size: 3rem;
    width: 3rem;
    height: auto;
    color: rgba(var(--color-lightBlue), 0.5);
}

.productPage-Diferenciais-Container h4 {
    color: rgba(var(--color-lightBlue), 1);
}

.productPage-Diferenciais-Container p {
    color: rgba(var(--color-almostWhite), 0.65);
}

/* ================================================ */
/* Seção benefícios                                 */
/* ================================================ */

.productPage-Benefits-Section {
    width: 100%;
    background-color: rgba(var(--color-blueishGray), 1);
}

.productPage-Benefits-Wrapper {
    width: 83.33%;
    max-width: 100rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    padding: 5rem 0;
}

.productPage-Benefits-Header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.productPage-Benefits-Header h2 {
    color: rgba(var(--color-misteryBlue), 1);
    width: 100%;
}

.productPage-Benefits-Header p {
    color: rgba(var(--color-almostBlack), 0.65);
    width: 100%;
}

.productPage-Benefits-Grid {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.productPage-Benefits-Container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5rem;
}

.productPage-Benefits-Content {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    width: 100%;
}

.text-content {
    width: 100%;
}

.text-content h4 {
    color: rgba(var(--color-laranBlue), 1);
}

.productPage-Benefits-CheckList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.5rem;
}

.productPage-Benefits-CheckItem {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    padding: 1rem;
    background-color: rgba(var(--color-lightBlue), 0.05);
    border: 1px solid rgba(var(--color-lightBlue), 0.10);
    align-items: center;
    border-radius: 0.5rem;
}

.productPage-Benefits-Checkmark {
    display: flex;
    align-items: center;
    width: 1rem;
    height: 1rem;
    line-height: 1;
    gap: 1rem;
    background-color: rgba(var(--color-laranBlue), 1);
    color: rgba(var(--color-almostWhite), 1);
    border-radius: 10rem;
}

.image-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-content img {
    height: auto;
    border-radius: 1rem;
}

.productPage-Benefits-Personalization {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.productPage-Benefits-Personalization img,
.color-swatch {
    border-radius: 0.5rem;
    width: 3.5rem;
    aspect-ratio: 1 / 1;
}

.personalization-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: rgba(var(--color-lightBlue), 0.05);
    border: 1px solid rgba(var(--color-lightBlue), 0.25);
    padding: 1rem;
    border-radius: 1rem;
}

.personalization-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
    gap: 0.5rem;
}

.blade-option {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    width: max-content;
}


/* =============================================== */
/* Seção Componentes - 3D expandido                */
/* =============================================== */

.productPage-3D-Section {
    width: 100%;
    background-color: rgba(var(--color-blueishGray), 1);
    padding: 5rem 0 0 0;
}

.productPage-3D-Wrapper {
    width: 83.33%;
    margin: 0 auto;
    display: flex;
    max-width: 100rem;
    flex-direction: column;
    gap: 2rem;
}

.productPage-3D-Wrapper h2 {
    color: rgba(var(--color-laranBlue), 1);
    padding: 0;
    margin: 0;
}

.productPage-3D-Wrapper p {
    width: 100%;
    font-size: 1rem;
    padding: 0;
    margin: 0;
}

.productPage-3D-Wrapper img {
    width: 100%;
    margin-top: 2rem;
    height: auto;
}

.productPage-Components-GridWrapper {
    width: 83.33%;
    max-width: 100rem;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
    padding: 5rem 0;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.productPage-Components-GridCard {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    background-color: rgba(var(--color-laranBlue), 0.025);
    border: 1px solid rgba(var(--color-lightBlue), 0.10);
    padding: 1rem;
    border-radius: 2rem;
}

.productPage-Components-GridCard h4 {
    color: rgba(var(--color-laranBlue), 1);
}

.productPage-Components-GridCard p {
    font-size: 1rem;
}

.productPage-Components-GridCard img {
    display: flex;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 1rem;
}

/* ============================================================= */
/* Características gerais / Specs                                */
/* ============================================================= */


.productPage-Specs-Section {
    width: 100%;
    padding: 10rem 0;
    background-color: rgba(var(--color-black), 1);
}

.productPage-Specs-Wrapper {
    flex-direction: column;
    width: 83.33%;
    margin: 0 auto;
    max-width: 100rem;
    display: flex;
    gap: 3rem;
}

.productPage-Specs-Header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.productPage-Specs-Header .subtitle {
    font-size: 1rem;
    color: rgba(var(--color-lightBlue), 1);
    letter-spacing: 2px;
}

.productPage-Specs-Header h3 {
    color: rgba(var(--color-almostWhite), 1);
    font-size: 2rem;
}

.productPage-Specs-Header-Buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.productPage-Specs-Header-Buttons span {
    color: rgba(var(--color-almostWhite), 0.65);
    display: flex;
    gap: 0.5rem;
    flex-direction: row;
    align-items: center;
}

.productPage-Specs-Header-Buttons a {
    color: rgba(var(--color-lightBlue), 0.85);
    padding: 0.5rem;
    border-radius: 5rem;
    background-color: rgba(var(--color-lightBlue), 0);
    border: 1px solid rgba(var(--color-lightBlue), 0);
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    overflow: hidden;
}

.productPage-Specs-Header-Buttons a:hover {
    color: rgba(var(--color-lightBlue), 1);
    background-color: rgba(var(--color-lightBlue), 0.15);
    border: 1px solid rgba(var(--color-lightBlue), 0.25);
}

.productPage-Specs-Header-Buttons a:hover i {
    animation: btnAnimation 0.2s ease forwards;
}

.productPage-Specs-Header-Buttons i {
    width: 1rem;
    height: 1rem;
}

.productPage-Specs-Grid {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.productPage-Specs-Container {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.productPage-Specs-Container h3 {
    color: rgba(var(--color-almostWhite), 0.75);
}

.productPageSpecs-Info {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    justify-content: space-between;
    border-bottom: 1px solid rgba(var(--color-almostWhite), 0.15);
}

.productPage-Specs-Container span {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    color: rgba(var(--color-almostWhite), 0.45);
    font-size: 1.2rem;
    font-weight: 200;
    padding: 1.5rem 0;
}

.productPage-Specs-Aviso {
    width: max-content;
    padding: 1rem;
    background-color: rgba(var(--color-lightBlue), 0.15);
    border: 1px solid rgba(var(--color-lightBlue), 0.25);
    margin: 0 auto;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.productPage-Specs-Aviso i {
    color: rgba(var(--color-lightBlue), 1);
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

.productPage-Specs-Aviso span {
    color: rgba(var(--color-lightBlue), 0.75);
}

.productPage-Specs-Aviso span a {
    color: rgba(var(--color-lightBlue), 1);
    border-bottom: 1px solid rgba(var(--color-lightBlue), 0);
}

.productPage-Specs-Aviso span a:hover {
    color: rgba(var(--color-lightBlue), 0.5);
    border-bottom: 1px solid rgba(var(--color-lightBlue), 1);
}

/* ================================================ */
/* Seção Funcionamento                              */
/* ================================================ */

.productPage-Funcionamento-Section {
    width: 100%;
    background-color: rgba(var(--color-blueishGray), 1);
    padding: 10rem 0;
}

.productPage-Funcionamento-Wrapper {
    width: 83.33%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    max-width: 100rem;
}

.productPage-Funcionamento-Video {
    display: flex;
    width: 100%;
}

.productPage-Funcionamento-Video video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 2rem;
}

.productPage-Funcionamento-Preview {
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

/* ================================================ */
/* Linhas de aplicação                              */
/* ================================================ */

.productPage-LinhasAplicacao-Section {
    width: 100%;
    background-color: rgba(var(--color-blueishGray), 1);
    padding: 10rem 0;
}

.productPage-LinhasAplicacao-Wrapper {
    width: 83.33%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    max-width: 100rem;
}

.productPage-LinhasAplicacao-Container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.productPage-LinhasAplicacao-Content,
.productPage-LinhasAplicacao-Image {
    width: 100%;
}

.productPage-LinhasAplicacao-Container img {
    border-radius: 1rem;
    overflow: hidden;
}

/* ================================================ */
/* About product - updated september 2025           */
/* ================================================ */

.product-page-aboutProduct-section {
    width: 100%;
    padding: 5rem 0;
    background-color: rgba(var(--color-blueishGray), 1);
}

.product-page-aboutProduct-wrapper {
    width: 83.33%;
    margin: 0 auto;
    max-width: 100rem;
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.product-page-aboutProduct-wrapper h2 {
    width: 100%;
    margin: 0;
    color: rgba(var(--color-laranBlue), 1);
}

.product-page-aboutProduct-wrapper p {
    width: 100%;
    margin: 0;
    color: rgba(var(--color-almostBlack), 0.65);
}

.product-page-aboutProduct-wrapper span {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


/* ================================================ */
/* Linhas de aplicação - updated september 2025     */
/* ================================================ */

.product-page-applications-section {
    background-color: rgba(var(--color-almostWhite), 1);
    width: 100%;
    padding: 5rem 0;
    background-color: rgba(var(--color-blueishGray), 1);
}

.product-page-applications-wrapper {
    width: 83.33%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 100rem;
}

.product-page-applications-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    gap: 5rem;
    background-color: rgba(var(--color-laranBlue), 0.05);
    border: 1px solid rgba(var(--color-laranBlue), 0.1);
    border-radius: 1.2rem;
}

.product-page-applications-item h4 {
    color: rgba(var(--color-lightBlue), 1);
    width: 90%;
}

.product-page-applications-item p {
    color: rgba(var(--color-almostBlack), 0.65)
}

.product-page-applications-item span {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.product-page-applications-wrapper img {
    width: 25%;
    height: auto;
}

/* =========================================================== */
/* Opções da categoria de produto - updated september 2025     */
/* =========================================================== */

.product-page-options-section {
    width: 100%;
    padding: 5rem 0;
}

.product-page-options-wrapper {
    width: 83.33%;
    margin: 0 auto;
    max-width: 100rem;
}

.product-page-options-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
}

.product-page-options-header h3 {
    color: rgba(var(--color-laranBlue), 1);
    border-bottom: 1px solid rgba(var(--color-laranBlue), 0.35);
    padding-bottom: 0.5rem;
}

.product-page-options-header p {
    color: rgba(var(--color-almostBlack), 0.65);
    width: 100%;
}

.product-page-options-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

/* Grid 3 itens por linha - Linha de Acessórios */
.product-page-options-items--grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 600px) {
    .product-page-options-items--grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .product-page-options-items--grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.product-page-options-items--grid-3 .product-page-options-item img {
    aspect-ratio: 1;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Niveladores de docas: imagens dos cards 1:1 e opcionais em coluna */
.productPage--niveladores-docas .product-page-options-item img {
    aspect-ratio: 1;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.productPage--niveladores-docas .product-page-optionals-items {
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
}

/* Reduz espaço entre cards de acessórios e próxima seção (10rem → 5rem) */
.product-page-options-section:has(.product-page-options-items--grid-3) {
    padding-bottom: 2.5rem;
}
.product-page-options-section:has(.product-page-options-items--grid-3) + .product-page-benefits-section {
    padding-top: 2.5rem;
}
/* Reduz espaço entre benefícios e parceria Metaro (10rem → 5rem) */
.product-page-options-section:has(.product-page-options-items--grid-3) ~ .product-page-benefits-section {
    padding-bottom: 2.5rem;
}
.product-page-options-section:has(.product-page-options-items--grid-3) ~ .product-page-partner-section {
    padding-top: 2.5rem;
}

.product-page-options-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: fill;
    align-items: flex-start;
    gap: 2rem;
    border-radius: 1.6rem;
    background-color: rgba(var(--color-laranBlue), 0.05);
    border: 1px solid rgba(var(--color-laranBlue), 0.1);
    padding: 1rem;
}

.product-page-options-item span {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.product-page-options-item span h4 {
    color: rgba(var(--color-lightBlue), 1);
    font-size: 1.2rem;
}

.product-page-options-item span p {
    color: rgba(var(--color-almostBlack), 0.65);
    font-size: 1rem;
    line-height: 1.4;
}

.product-page-options-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    line-height: 1.6;
}

.product-page-options-applications {
    margin-top: 1rem;
}

.product-page-options-applications h5 {
    color: rgba(var(--color-lightBlue), 1);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.product-page-optionals-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

@media (min-width: 480px) {
    .product-page-optionals-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .product-page-optionals-items {
        grid-template-columns: repeat(3, 1fr);
    }
}

.product-page-optionals-item {
    background-color: rgba(var(--color-laranBlue), 0.05);
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(var(--color-laranBlue), 0.1);
    align-items: center;
    line-height: 1;
}

.product-page-optionals-item span {
    background-color: rgba(var(--color-laranBlue), 0.1);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--color-laranBlue), 1);
}

.product-page-options-item img {
    border-radius: 1rem;
    margin-bottom: 1rem;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

/* Card de modelos com 1 produto: imagem à esquerda, textos à direita (desktop) */
.product-page-options-items--single-model .product-page-options-item--single {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.product-page-options-items--single-model .product-page-options-item-image {
    width: 100%;
}

.product-page-options-items--single-model .product-page-options-item-image img {
    margin-bottom: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.product-page-options-items--single-model .product-page-options-item-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.product-page-options-items--single-model .product-page-options-item-content h4,
.product-page-options-items--single-model .product-page-options-item-content h5 {
    color: rgba(var(--color-lightBlue), 1);
    font-size: 1.2rem;
}

.product-page-options-items--single-model .product-page-options-item-content h5 {
    font-size: 1rem;
    margin-top: 0.5rem;
}

.product-page-options-items--single-model .product-page-options-item-content p {
    color: rgba(var(--color-almostBlack), 0.65);
    font-size: 1rem;
    line-height: 1.4;
}

@media (min-width: 900px) {
    .product-page-options-items--single-model .product-page-options-item--single {
        flex-direction: row;
        align-items: flex-start;
        gap: 2.5rem;
    }

    .product-page-options-items--single-model .product-page-options-item-image {
        flex: 0 0 42%;
        max-width: 42%;
    }

    .product-page-options-items--single-model .product-page-options-item-content {
        flex: 1;
        min-width: 0;
    }
}

.product-page-colors {
    display: flex;
    gap: 2rem;
}

.product-page-colors-group {
    display: flex;
    flex-direction: column;
    width: max-content;
    gap: 0.5rem;
}

.product-page-colors-swatches {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.5rem;
}

.product-page-color-box {
    content: '';
    width: 10vw;
    aspect-ratio: 1 / 1;
    border-radius: 0.5rem;
}

.product-page-colors-label {
    color: rgba(var(--color-almostBlack), 0.65);
}

.product-page-color--cinza {
    background: #546E7A;
}

.product-page-color--amarelo {
    background: #FBC02D;
}

.product-page-color--laranja {
    background: #F57C00;
}

.product-page-color--vermelho {
    background: #D32F2F;
}

.product-page-color--azul {
    background: #1976D2;
}

.product-page-color--preto {
    background: #000000;
}

/* ================================================== */
/* Benefícios do produto - updated september 2025     */
/* ================================================== */

.product-page-benefits-section {
    width: 100%;
    padding: 5rem 0;
}

.product-page-benefits-wrapper {
    width: 83.33%;
    margin: 0 auto;
    max-width: 100rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-page-benefits-header h4 {
    color: rgba(var(--color-lightBlue), 1);
    font-size: 1.4rem;
}

.product-page-benefits-header p {
    font-size: 1rem;
    color: rgba(var(--color-almostBlack), 0.65);
    width: 100%;
}

.product-page-benefits-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-page-benefits-item {
    padding: 2rem;
    background-color: rgba(var(--color-totalWhite), 0.50);
    border: 1px solid rgba(var(--color-laranBlue), 0.1);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-page-benefits-item h5 {
    color: rgba(var(--color-lightBlue), 1);
    font-size: 1.2rem;
    margin: 0;
    font-weight: 300;
}

.product-page-benefits-item p {
    color: rgba(var(--color-almostBlack), 0.65);
    font-size: 1rem;
    line-height: 1.4;
}

/* ================================================== */
/* Seção parceiros - updated september 2025           */
/* ================================================== */

.product-page-partner-section {
    width: 100%;
    padding: 5rem 0;
}

.product-page-partner-wrapper {
    width: 83.33%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    max-width: 100rem;
    gap: 2rem;
    background-color: rgba(var(--color-laranBlue), 0.05);
    border: 1px solid rgba(var(--color-laranBlue), 0.1);
    padding: 2rem;
    border-radius: 1rem;
}

.product-page-partner-wrapper span {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: fill;
    justify-content: space-between;
    gap: 1rem;
}

.product-page-partner-wrapper span h3 {
    color: rgba(var(--color-lightBlue), 1);
    font-weight: 300;
    width: 100%;
}

.product-page-partner-wrapper span p {
    color: rgba(var(--color-almostBlack), 0.65);
    font-size: 1rem;
    line-height: 1.4;
}

.product-page-partner-wrapper img {
    width: 15rem;
    height: auto;
    mix-blend-mode: multiply;
}


/* ================================================ */
/* Características                                  */
/* ================================================ */

.productPage-Caracteristicas-Section {
    width: 100%;
    background-color: rgba(var(--color-almostWhite), 1);
    padding: 10rem 0;
}

.productPage-Caracteristicas-Wrapper {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    width: 83.33%;
    margin: 0 auto;
    max-width: 100rem;
}

.productPage-Caracteristicas-Items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 3rem;
}

.productPage-Caracteristicas-Items h4 {
    color: rgba(var(--color-laranBlue), 1);
}

.productPage-Caracteristicas-Items p {
    color: rgba(var(--color-almostBlack), 0.65);
}

/* ================================================ */
/* Personalização                                   */
/* ================================================ */

.productPage-Personalizacao-Section {
    width: 100%;
    padding: 10rem 0;
    background-color: rgba(var(--color-almostWhite), 1);
}

.productPage-Personalizacao-Wrapper {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    width: 83.33%;
    margin: 0 auto;
    max-width: 100rem;
}

.productPage-Personalizacao-Acessorios h4 {
    display: flex;
    border-bottom: 1px solid rgba(var(--color-laranBlue), 0.35);
}

.productPage-Personalizacao-Acessorios-Items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
    gap: 1rem;
}

.productPage-Personalizacao-Acessorios-Item {
    padding: 1rem;
    border-radius: 1.5rem;
    background-color: rgba(var(--color-blueishGray), 1);
    border: 1px solid rgba(var(--color-laranBlue), 0.05);
}

.productPage-Personalizacao-Acessorios-Item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 0.5rem;
}

.productPage-Paineis-Texturas-Cores {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.productPage-Paineis,
.productPage-Texturas,
.productPage-Cores {
    width: 100%;
}

.productPage-Paineis-List,
.productPage-Texturas-List {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;
}

.productPage-Cores-List {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 15rem;
    /* 3rem * 3 + gaps = ~15rem */
}

.productPage-Cor-Item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.productPage-Cor-Item .color-swatch {
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
}

.productPage-Cor-Item p {
    margin: 0.5rem 0 0 0;
    text-align: center;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ================================================ */
/* Tipos de aplicação                               */
/* ================================================ */

.productPage-Aplicacoes-Section {
    width: 100%;
    background-color: rgba(var(--color-almostWhite), 1);
    padding: 5rem 0;
}

.productPage-Aplicacoes-Wrapper {
    width: 83.33%;
    max-width: 100rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.productPage-Aplicacao-Items {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.productPage-Aplicacao-Item p {
    width: 100%;
    text-align: center;
}

.productPage-Aplicacoes-List img {
    width: 100%;
    border-radius: 1rem;
}

.produtosAplicacaoContainer i {
    width: 3rem;
    height: 3rem;
    font-size: 3rem;
    color: rgba(var(--color-lightBlue), 1);
    margin-bottom: 2rem;
}

/* ================================================ */
/* Seção Opções                                     */
/* ================================================ */

.productPage-Options-Section {
    width: 100%;
    padding: 10rem 0;
    background-color: rgba(var(--color-blueishGray), 1);
}

.productPage-Options-Wrapper {
    width: 75%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1440px;
}

.productPage-Options-Wrapper h4 {
    color: rgba(var(--color-laranBlue), 1);
    width: 100%;
    border-bottom: 1px solid rgba(var(--color-laranBlue), 0.25);
}

.productPage-Options-Container {
    display: flex;
    flex-direction: column;
}

.productPage-Options-Container-Items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    width: 100%;
}

.productPage-Options-Container-Item {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    background-color: rgba(var(--color-laranBlue), 0.05);
    border: 1px solid rgba(var(--color-laranBlue), 0.10);
}

.productPage-Options-Container-Items img {
    border-radius: 0.5rem;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.productPage-Options-Applications-Item {
    display: flex;
    background-color: rgba(var(--color-almostWhite), 0.1);
    border: 1px solid rgba(var(--color-lightBlue), 0.25);
    padding: 1rem;
    gap: 0.5rem;
    align-items: center;
    border-radius: 0.5rem;
}

.productPage-Options-Applications-Items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.productPage-Options-Applications-Item img {
    width: 3rem;
}

/* ================================================ */
/* Seção parceiros (Daiken / Assa Abloy             */
/* ================================================ */

/* ================================================ */
/* Media queries para responsividade                */
/* ================================================ */

@media (min-width:1200px) {
    .productPage-Header-CallToAction {
        display: flex;
        flex-direction: row;
        gap: 2rem;
    }

    .productPage-Header-CallToAction-Links ul {
        display: flex;
        flex-direction: row;
    }

    .productPage-Carousel-Controls {
        display: flex;
    }

    .productPage-Info {
        flex-direction: row;
    }

    .width50 {
        width: 65%;
    }

    .width45 {
        width: 35%;
    }

    .productPage-ApplicationsItems {
        flex-direction: column;
    }

    .productPage-Diferenciais-Items {
        flex-direction: row;
        gap: 3rem;
    }

    .productPage-Diferenciais-Container {
        gap: 10rem;
    }

    .productPage-Diferenciais-lightBlue-h2,
    .productPage-Diferenciais-Container h2 {
        width: 65%;
    }

    .productPage-Benefits-Wrapper {
        max-width: 100rem;
    }

    .productPage-Benefits-Container {
        flex-direction: row;
    }

    .productPage-Benefits-Container.image-right .text-content {
        order: 1;
    }

    .productPage-Benefits-Container.image-right .image-content {
        order: 2;
    }

    .productPage-Benefits-Container.image-left .text-content {
        order: 2;
    }

    .productPage-Benefits-Container.image-left .image-content {
        order: 1;
    }

    .productPage-3D-Wrapper p {
        width: 50%;
    }

    .productPage-Specs-Grid {
        flex-direction: row;
    }

    .productPage-Specs-Header,
    .productPage-Specs-Header-Buttons {
        flex-direction: row;
    }

    .productPage-LinhasAplicacao-Container {
        flex-direction: row;
    }

    .productPage-Personalizacao-Wrapper h2 {
        width: 50%;
    }

    .productPage-Paineis-Texturas-Cores {
        flex-direction: row;
    }

    .product-page-applications-wrapper {
        flex-direction: row;
    }

    .product-page-applications-wrapper img {
        width: 3.5vw;
        height: auto;
    }

    .product-page-aboutProduct-wrapper {
        flex-direction: row;
    }

    .product-page-options-header p {
        width: 50%;
    }

    .product-page-options-items {
        flex-direction: row;
    }

    .product-page-color-box {
        width: 2vw;
    }

    .product-page-benefits-header p {
        width: 50%;
    }

    .product-page-benefits-items {
        flex-direction: row;
    }

    .product-page-partner-wrapper span h3 {
        width: 50%;
    }

    .product-page-partner-wrapper {
        flex-direction: row;
        gap: 2rem;
        padding: 5rem;
    }

    .product-page-partner-wrapper:first-child p {
        width: 80%;
    }

    .product-page-partner-wrapper span {
        width: max-content;
    }

    .product-page-partner-wrapper span img {
        width: 15rem;
    }
}
/* ── css/components.css ── */
/* ================================================= */
/* Componente: 404.php                               */
/* ================================================= */

.page-404 {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color-laranBlue), 1);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.page-404 h1 {
    padding-top: 10rem;
    margin-bottom: 1rem;
    color: rgba(var(--color-lightBlue), 1);
}

.page-404 p {
    margin-bottom: 2rem;
    color: rgba(var(--color-almostWhite), 0.7);
}

.page-404 .btn {
    background-color: rgba(var(--color-laranBlue), 0.8);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
}

.page-404 .btn:hover {
    background-color: rgba(var(--color-laranBlue), 1);
}


/* ================================================= */
/* Componente: headerSlider.php                      */
/* ================================================= */

/* Só o hero do headerSlider — evita afetar <header> de outros componentes (ex.: chatbot) */
header.header-slider-main {
    width: 100%;
    height: 120vw;
    max-height: 700px;
    position: relative;
    overflow: hidden;
}

.slider {
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color-laranBlue), 0.1);
    position: relative;
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}

.slideBackground {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.slide.active {
    opacity: 1;
    z-index: 1;
}

.slide.previous {
    opacity: 0;
    z-index: 995;
}

.slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: rgba(var(--color-black), 0.5);
    z-index: 1;
    pointer-events: none;
}

.slide.active::before {
    height: 100%;
}

.slide::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 10, 0.2);
    pointer-events: none;
    z-index: 1005;
}

.slide-content-wrapper {
    position: absolute;
    width: 83.33%;
    max-width: 100rem;
    display: flex;
    z-index: 2;
    gap: 2rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: flex-start;
}

.slide h1 {
    color: rgba(var(--color-almostWhite), 1);
}

@media (min-width: 768px) {
    header.header-slider-main {
        height: 65vw;
        max-height: 850px;
    }

    .slide-content-wrapper {
        top: auto;
        bottom: 8rem;
        transform: translateX(-50%);
    }
}

@media (min-width: 1200px) {
    header.header-slider-main {
        height: 50vw;
        max-height: 1000px;
    }

    .slide-content-wrapper {
        bottom: 10rem;
    }
}

/* ================================================= */
/* Componente: callAction.php                        */
/* ================================================= */

.callAction-Section {
    width: 100%;
    padding: 5rem 0;
    background-color: rgba(var(--color-almostBlack), 0.05);
    overflow: hidden;
}

.callAction-Wrapper {
    width: 83.33%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    max-width: 1600px;
    gap: 2rem;
}

.callAction-Container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

.callAction-Container img {
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 0.5rem 0.8rem rgba(var(--color-black), 0.2);
    border-radius: 1rem;
}

.callAction-Container h3 {
    color: rgba(var(--color-laranBlue), 1);
}

.callAction-Container h3,
.callAction-Container p {
    width: 75%;
}

@media (min-width:1200px) {
    .callAction-Wrapper {
        flex-direction: row;
    }

    .callAction-Container img {
        width: 50%;
    }
}

/* ================================================= */
/* Componente: bannerDownload.php                    */
/* ================================================= */

.bannerDownload {
    position: fixed;
    top: 0;
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: hidden;
}

.bannerDownloadWrapper {
    background-color: rgba(var(--color-almostBlack), 0.9);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    padding: 10rem 0;
    width: 100%;
    height: 100%;
}

.bannerDownloadContainer {
    width: 83.33%;
    margin: 0 auto;
    display: flex;
    max-width: 600px;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
    background-color: rgba(var(--color-almostBlack), 0.5);
    border: 1px solid rgba(var(--color-almostWhite), 0.1);
    border-radius: 1rem;
}

.bannerDownloadContainer h3 {
    color: rgba(var(--color-almostWhite), 0.85);
}

.bannerDownloadContainer p {
    color: rgba(var(--color-almostWhite), 0.65);
}

.bannerDownloadContainerGroup {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.downloadBannerForm input {
    background-color: rgba(var(--color-almostWhite), 0.02);
    border: 1px solid rgba(var(--color-lightBlue), 0.2);
    color: rgba(var(--color-almostWhite), 0.5);
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    display: flex;
    width: 100%;
    max-width: 100%;
}

.downloadBannerForm input:hover {
    color: rgba(var(--color-lightBlue), 1);
    background-color: rgba(var(--color-laranBlue), 0.15);
    border: 1px solid rgba(var(--color-lightBlue), 0.35);
}

.downloadBannerForm input:filled {
    color: rgba(var(--color-almostWhite), 1);
    background-color: rgba(var(--color-laranBlue), 0.15);
    border: 1px solid rgba(var(--color-lightBlue), 0.35);
}

.bannerDownloadAcceptTerms {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 1rem 0;
}

.customCheckbox {
    display: flex;
    align-items: center;
}

.AcceptTerms-Text {
    height: 100%;
    align-items: center;
}

.bannerDownloadAcceptTerms label p {
    padding: 0;
    margin: 0;
}

.bannerDownloadAcceptTerms label a {
    color: rgba(var(--color-lightBlue), 0.75);
}

.bannerDownloadAcceptTerms label a:hover {
    color: rgba(var(--color-lightBlue), 1);
}


.downloadLogo {
    position: fixed;
    top: 3rem;
    left: 8.45%;
    width: 12rem;
}

/* Estilização do botão de fechar */
.closeBannerBtn {
    display: flex;
    width: 2.4rem;
    height: 2.4rem;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--color-almostWhite), 0.05);
    border: 1px solid rgba(var(--color-almostWhite), 0.1);
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
    border-radius: 5rem;
    color: rgba(var(--color-almostWhite), 0.5);
    cursor: pointer;
    position: absolute;
    top: 3rem;
    right: 8.45%;
}

.closeBannerBtn:hover {
    color: rgba(var(--color-lightBlue), 1);
    background-color: rgba(var(--color-laranBlue), 0.15);
    border: 1px solid rgba(var(--color-lightBlue), 0.35);
}

.centralAtendimento {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.centralAtendimento a {
    padding: 0.5rem;
    background-color: rgba(var(--color-lightBlue), 0.0);
    border: 1px solid rgba(var(--color-lightBlue), 0);
    border-radius: 5rem;
    color: rgba(var(--color-laranBlue), 1);
    overflow: hidden;
}

.centralAtendimento a:hover {
    background-color: rgba(var(--color-lightBlue), 0.1);
    border: 1px solid rgba(var(--color-lightBlue), 0.25);
    color: rgba(var(--color-lightBlue), 1);
}

.centralAtendimento a:hover i {
    animation: btnAnimation 0.2s ease forwards;
}

.central-info,
.whatsapp-contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.central-info i,
.whatsapp-contact i {
    width: 1rem;
    height: 1rem;
}

@media (min-width:1200px) {
    .downloadLogo {
        position: relative;
        top: 0;
        left: 0;
    }
}

/* ================================================= */
/* Componente: downloadEmergencia.php                */
/* ================================================= */

.downloadEmergencia {
    width: 100%;
    background-color: rgba(var(--color-almostWhite), 1);
    padding: 0 0 10rem 0;
}

.downloadEmergenciaWrapper {
    display: flex;
    width: 83.33%;
    max-width: 100rem;
    flex-direction: column;
    margin: 0 auto;
    gap: 3rem;
    justify-content: center;
}

.downloadEmergenciaContainer {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem;
    border-radius: 2rem;
    box-shadow: 0 2rem 3rem rgba(var(--color-black), 0.2);
}

.downloadEmergenciaContent {
    display: flex;
    width: 100%;
    gap: 1rem;
    flex-direction: column;
}

.downloadEmergenciaContent img {
    border-radius: 1rem;
    width: 100%;
    height: auto;
}

.downloadContent h3 {
    color: rgba(var(--color-almostWhite), 0.85);
}

.downloadContent p,
.downloadContent a {
    color: rgba(var(--color-almostWhite), 0.65);
}

/* Botões dos downloads */

.downloadButtons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.downloadBtn {
    display: flex;
    width: 100%;
    background-color: rgba(var(--color-almostWhite), 0.1);
    border: 1px solid rgba(var(--color-almostWhite), 0.1);
    box-shadow: 0px 1rem 1rem rgba(var(--color-almostBlack), 0);
    padding: 1rem;
    border-radius: 1rem;
    justify-content: space-between;
}

.downloadBtnContent {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.downloadBtn:hover {
    background-color: rgba(var(--color-almostWhite), 0.25);
    border: 1px solid rgba(var(--color-almostWhite), 0.25);
    box-shadow: 0px 0.5rem 1rem rgba(var(--color-almostBlack), 0.3);
}

@media (min-width:1200px) {

    .downloadEmergenciaWrapper,
    .downloadEmergenciaContainer {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* ================================================= */
/* Componente: nossaHistoria.php                     */
/* ================================================= */

.historia {
    width: 100%;
    background-color: rgba(var(--color-blueishGray), 1);
    padding: 5rem 0;
}

.historiaWrapper {
    display: flex;
    flex-direction: column;
    width: 83.33%;
    max-width: 100rem;
    justify-content: space-between;
    gap: 10rem;
    margin: 0 auto;
}

.historiaContent {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 2rem;
}

.client-carousel-historia {
    padding: 3rem 0 0 0;
}

@media (min-width:1200px) {
    .historiaWrapper {
        flex-direction: row
    }
}

/* ================================================= */
/* Componente: trust.php                             */
/* ================================================= */

.trustSection {
    width: 100%;
    background-color: rgba(var(--color-blueishGray), 1);
}

.trustWrapper {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    width: 83.33%;
    max-width: 1600px;
    background-color: rgba(var(--color-misteryBlue), 1);
    border-radius: 2rem;
    margin: 0 auto;
    padding: 2.5rem;
}

.trustReasons {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.trustReason {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.trustReason i {
    color: rgba(var(--color-lightBlue), 1);
    font-size: 3rem;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    text-align: left;
    justify-content: flex-start;
}

.trustReason h3 {
    color: rgba(var(--color-lightBlue), 1);
    font-weight: 200;
}

.trustReason p {
    color: rgba(var(--color-almostWhite), 0.75);
}

.trustNumbers {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    width: 100%;
}

.trustNumbers h2 {
    color: rgba(var(--color-almostWhite), 1);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.trustNumber {
    width: 100%;
    height: 100%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    background-color: rgba(var(--color-laranBlue), 0.75);
    border-radius: 1rem;
    border: 1px solid rgba(var(--color-lightBlue), 0.25);
}

.trustNumber h3 {
    font-size: 2.4rem;
    color: rgba(var(--color-lightBlue), 1);
}

.trustNumber p {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.2;
    color: rgba(var(--color-almostWhite), 0.75);
}

@media (min-width:1200px) {
    .trustWrapper {
        padding: 5rem;
    }

    .trustReasons {
        flex-direction: row;
    }

    .trustNumbers {
        flex-direction: row;
    }

    .trustNumbers h2 {
        font-size: 2rem;
    }
}

/* ================================================= */
/* Componente: clientsCarousel.php                   */
/* ================================================= */

.carrossel-clientes {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.carrossel-clientes-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.carrossel-clientes-wrapper p {
    display: flex;
    justify-content: center;
    color: rgba(var(--color-almostBlack), 0.5);
}

.carrossel-clientes-wrapper ul {
    list-style: none;
    white-space: normal;
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    animation: animacao-carrossel 30s linear infinite;
    width: max-content;
}

.carrossel-clientes-wrapper ul li {
    display: inline-block;
    width: auto;
    margin: 0 2rem;
}

.carrossel-clientes-wrapper ul li:last-child {
    margin-right: 0;
}

.carrossel-clientes-wrapper ul li img {
    width: 10rem;
    height: auto;
}

@keyframes animacao-carrossel {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-35%);
    }
}

/* ================================================= */
/* Componente: youtubeReviews.php                    */
/* ================================================= */

.reviewsVideosSection {
    width: 100%;
    background-color: rgba(var(--color-blueishGray), 1);
    overflow: hidden;
    padding: 5rem 0;
}

.reviewsVideosWrapper {
    width: 83.33%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}

.reviewsVideosCard {
    background-color: rgba(var(--color-almostWhite), 1);
    border: 1px solid rgba(var(--color-laranBlue), 0.1);
    width: 100%;
    padding: 1rem;
    border-radius: 2rem;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
}

.reviewsVideosLazy {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reviewsVideosLazy img {
    border-radius: 1rem 1rem 0 0;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    aspect-ratio: 16 / 9;
}

.reviewsVideosCardWrapper {
    border: 1px solid rgba(var(--color-almostBlack), 0.1);
    border-radius: 1rem;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.reviewsVideosColumnContent {
    display: flex;
    list-style: none;
    flex-direction: column;
    padding: 2rem;
    gap: 0.5rem;
}

.reviewsVideosMedia {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.reviewsVideosName {
    font-size: 1.2rem;
    font-weight: 500;
    color: rgba(var(--color-laranBlue), 1);
    padding-bottom: 1rem;
    margin: 0;
}

.reviewsVideosItem {
    display: flex;
    gap: 0.5rem;
    color: rgba(var(--color-almostBlack), 0.5);
}

.reviewsVideosItem i {
    padding: 0;
    margin: 0;
    width: 1rem;
    height: 1rem;
    line-height: 1;
}

@media (min-width:1200px) {
    .reviewsVideosWrapper {
        flex-direction: row;
    }

    /* Definindo largura específica para cada card no desktop */
    .reviewsVideosCard {
        flex: 1 1 calc(25% - 0.75rem);
        /* 4 cards por linha com gap */
        max-width: calc(25% - 0.75rem);
    }
}

/* ================================================= */
/* Componente: contacts.php                          */
/* ================================================= */

.nossosEnderecos {
    width: 100%;
    background-color: rgba(var(--color-darkBlue), 1);
    padding: 10rem 0;
}

.nossosEnderecosWrapper {
    width: 83.33%;
    max-width: 1600px;
    margin: 0 auto;
}

.nossosEnderecosWrapper h3 {
    color: rgba(var(--color-almostWhite), 1);
    margin-bottom: 3rem;
}

.nossosEnderecosWrapper h4 {
    color: rgba(var(--color-almostWhite), 0.5);
}

.nossosEnderecosWrapper p {
    color: rgba(var(--color-almostWhite), 0.75);
}

.nossosEnderecosWrapper a {
    color: rgba(var(--color-almostWhite), 0.75);
    text-decoration: underline;
}

.nossosEnderecosWrapper a:hover {
    text-decoration: none;
}

.nossosEnderecosColumns {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    width: 100%;
}

.nossosEnderecosColumn {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

.nossosEnderecosColumn iframe {
    width: 100%;
    height: 350px;
    border-radius: 1rem;
}

.nossosEnderecosColumn span {
    color: rgba(var(--color-almostWhite), 0.75);
}

.mapPlaceholderFoz {
    /* A primeira declaração é o fallback de quem não entende image-set(). */
    background-image: url('../img/mapThumbFoz.png');
    background-image: image-set(url('../img/mapThumbFoz.avif') type('image/avif'),
            url('../img/mapThumbFoz.webp') type('image/webp'),
            url('../img/mapThumbFoz.png') type('image/png'));
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 19rem;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    overflow: hidden;
    align-items: center;
    transition: all 0.3s ease;
    margin: 0 0 3rem 0;
}

.mapPlaceholderCascavel {
    background-image: url('../img/mapThumbCascavel.png');
    background-image: image-set(url('../img/mapThumbCascavel.avif') type('image/avif'),
            url('../img/mapThumbCascavel.webp') type('image/webp'),
            url('../img/mapThumbCascavel.png') type('image/png'));
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 19rem;
    overflow: hidden;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    margin: 0 0 3rem 0;
}

.mapPlaceholderFoz:hover {
    opacity: 0.9;
}

@media (min-width:1200px) {
    .nossosEnderecosColumns {
        flex-direction: row;
    }
}

/* ================================================= */
/* Componente: mainForm.php                          */
/* ================================================= */

.formSection {
    width: 100%;
    background-color: rgba(var(--color-blueishGray), 1);
    padding: 10rem 0;
}

.formWrapper {
    width: 90%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    font-weight: 300;
}

.formContainer {
    width: 100%;
}

.formContainerColumn,
.formContainerContent {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.formContainerColumn i {
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    color: rgba(var(--color-laranBlue), 1);
}

.mainForm {
    background-color: rgba(var(--color-almostWhite), 0.75);
    border: 1px solid rgba(var(--color-laranBlue), 0.15);
    padding: 2rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.formInput {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form input,
.form select {
    padding: 1rem;
    background-color: rgba(var(--color-almostWhite), 0.5);
    border: 1px solid rgba(var(--color-almostBlack), 0.1);
    border-radius: 0.5rem;
    gap: 0.5rem;
}

.formRadios,
.formRadiosTitle {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
}

.preferenciaContatoLigacaoRadios {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    justify-content: space-between;
}

/* Estilização para a caixa de resposta do formulário */
#formResponse {
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid transparent;
    margin-top: 1rem;
    display: none;
    /* Oculto por padrão */
}

/* Estado de sucesso (verde) */
#formResponse.success {
    background-color: rgba(34, 197, 94, 0.1);
    /* Verde com 10% opacidade */
    border-color: rgba(34, 197, 94, 0.2);
    /* Verde com 20% opacidade */
    color: rgb(34, 197, 94);
    /* Verde sólido para o texto */
    display: block;
}

/* Estado de erro (vermelho) */
#formResponse.error {
    background-color: rgba(239, 68, 68, 0.1);
    /* Vermelho com 10% opacidade */
    border-color: rgba(239, 68, 68, 0.2);
    /* Vermelho com 20% opacidade */
    color: rgb(239, 68, 68);
    /* Vermelho sólido para o texto */
    display: block;
}

/* Estado de carregamento (azul) */
#formResponse.loading {
    background-color: rgba(59, 130, 246, 0.1);
    /* Azul com 10% opacidade */
    border-color: rgba(59, 130, 246, 0.2);
    /* Azul com 20% opacidade */
    color: rgb(59, 130, 246);
    /* Azul sólido para o texto */
    display: block;
}

.error-message {
    display: none;
}

@media (min-width:1200px) {

    .formWrapper {
        flex-direction: row;
        width: 83.33%;
    }

    .formContainerContent,
    .formInput {
        flex-direction: row;
    }
}

/* ================================== */
/* Componente: footer.php             */
/* ================================== */

footer {
    background-color: rgba(var(--color-black), 1);
    display: flex;
    flex-direction: column;
    padding: 5rem 0;
    font-size: 1rem;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    color: rgba(var(--color-almostWhite), 0.5);
    line-height: 1.6;
}

footer ul a {
    color: rgba(var(--color-almostWhite), 0.75);
}

footer ul a:hover {
    color: rgba(var(--color-lightBlue), 0.85);
}

footer img {
    max-width: 12rem;
    height: auto;
}

.footerWrapper {
    width: 83.33%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footerWrapper p,
.footerWrapper span {
    color: rgba(var(--color-almostWhite), 0.65);
}

.footerHelp {
    text-align: center;
    padding: 1rem 0;
    border-top: 1px solid rgba(var(--color-almostWhite), 0.1);
}

.footerHelp a {
    color: rgba(var(--color-almostWhite), 0.85);
}

.footerHelp a:hover {
    color: rgba(var(--color-lightBlue), 0.85);
}

.footerGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem;
    box-sizing: border-box;
}

.footerColumn {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footerColumnTitle {
    color: rgba(var(--color-almostWhite), 0.15);
}
/* ── css/Blog.module.css ── */
/*
 * Blog.module.css
 * Estilos públicos do blog — componente homepage (blogLatest) + página de listagem (/blog).
 *
 * Convenção .module.css adotada agora para facilitar a migração para Next.js.
 * No Next.js: import styles from '@/styles/Blog.module.css'
 * No PHP atual: carregado como CSS global via header.php
 */

/* ============================================================
   Fonte base — Inter aplicada em todo o escopo do blog público
   ============================================================ */

.blog-listing,
.blog-post {
    font-family: var(--fontFamily-inter);
}

/* ============================================================
   Card compartilhado — usado em blogLatest.php e blog.php
   ============================================================ */

.blog-latest__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.blog-latest__card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.blog-latest__img-wrap {
    display: block;
    border-radius: 0.75rem;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: rgba(var(--color-blueishGray), 1);
}

.blog-latest__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.blog-latest__img-wrap:hover .blog-latest__img {
    transform: scale(1.04);
}

.blog-latest__img-placeholder {
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color-blueishGray), 1);
}

.blog-latest__body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.blog-latest__tag {
    display: inline-block;
    padding: 0.2rem 0.85rem;
    border-radius: 999px;
    background-color: rgba(var(--color-laranBlue), 0.08);
    color: rgba(var(--color-laranBlue), 1);
    font-size: var(--fontStyle-small);
    font-weight: var(--fontWeight-semibold);
    width: fit-content;
    text-decoration: none;
}

.blog-latest__card-title {
    font-size: var(--fontStyle-h4);
    font-weight: var(--fontWeight-bold);
    color: rgba(var(--color-almostBlack), 1);
    line-height: var(--lineHeight-normal);
    margin: 0;
}

.blog-latest__card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.blog-latest__card-title a:hover {
    color: rgba(var(--color-laranBlue), 1);
}

.blog-latest__desc {
    font-size: var(--fontStyle-small);
    color: rgba(var(--color-darkestGray), 0.9);
    line-height: var(--lineHeight-loose);
    margin: 0;
}

/* ============================================================
   Componente homepage — blogLatest.php
   ============================================================ */

.blog-latest {
    width: 100%;
    background-color: rgba(var(--color-totalWhite), 1);
    padding: 5rem 0;
}

.blog-latest__wrapper {
    width: 83.33%;
    max-width: 100rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.blog-latest__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.blog-latest__title {
    font-size: var(--fontStyle-h2);
    font-weight: var(--fontWeight-bold);
    color: rgba(var(--color-misteryBlue), 1);
    line-height: var(--lineHeight-snug);
    margin: 0;
}

/* ============================================================
   Página /blog — listagem pública
   ============================================================ */

.blog-listing {
    width: 100%;
    background-color: rgba(var(--color-totalWhite), 1);
    padding: 10rem 0 5rem;
}

.blog-listing__wrapper {
    width: 83.33%;
    max-width: 100rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.blog-listing__title {
    font-size: var(--fontStyle-h2);
    font-weight: var(--fontWeight-bold);
    color: rgba(var(--color-laranBlue), 1);
    line-height: var(--lineHeight-snug);
    margin: 0;
}

.blog-listing__empty {
    color: rgba(var(--color-darkestGray), 0.7);
    font-size: var(--fontStyle-body);
}

.blog-listing__pagination {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding-top: 1rem;
}

.blog-listing__page-btn {
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(var(--color-grayshBlue), 1);
    border-radius: 6px;
    text-decoration: none;
    color: rgba(var(--color-almostBlack), 0.8);
    font-size: var(--fontStyle-small);
    transition: background 0.2s, color 0.2s;
}

.blog-listing__page-btn:hover {
    background: rgba(var(--color-laranBlue), 0.08);
    color: rgba(var(--color-laranBlue), 1);
    border-color: rgba(var(--color-laranBlue), 0.3);
}

.blog-listing__page-btn.active {
    background: rgba(var(--color-laranBlue), 1);
    color: rgba(var(--color-totalWhite), 1);
    border-color: rgba(var(--color-laranBlue), 1);
    font-weight: var(--fontWeight-semibold);
}

/* ============================================================
   Página /blog/{slug} — post individual
   ============================================================ */

.blog-post {
    width: 83.33%;
    max-width: 100rem;
    margin: 0 auto;
    padding: 10rem 0 5rem;
    display: flex;
    flex-direction: column;
}

.blog-post__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    margin-bottom: 2rem;
}

.blog-post__cover-wrap {
    margin-bottom: 3rem;
}

.blog-post__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fontStyle-small);
}

.blog-post__cat-link {
    color: rgba(var(--color-laranBlue), 1);
    font-weight: var(--fontWeight-semibold);
    text-decoration: none;
}

.blog-post__cat-link:hover {
    text-decoration: underline;
}

.blog-post__meta-sep {
    color: rgba(var(--color-darkestGray), 0.5);
}

.blog-post__date {
    color: rgba(var(--color-darkestGray), 0.7);
}

.blog-post__title {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: var(--fontWeight-bold);
    color: rgba(var(--color-almostBlack), 1);
    line-height: var(--lineHeight-tight);
    margin: 0;
}

.blog-post__subtitle {
    font-size: var(--fontStyle-lead);
    color: rgba(var(--color-darkestGray), 0.8);
    line-height: var(--lineHeight-relaxed);
    margin: 0;
}

.blog-post__cover-wrap {
    width: 100%;
    border-radius: 0.75rem;
    overflow: hidden;
    /* margin-bottom definido acima no bloco de espaçamentos */
}

.blog-post__cover {
    width: 100%;
    height: auto;
    display: block;
}

.blog-post__content {
    font-size: var(--fontStyle-body);
    line-height: var(--lineHeight-loose);
    color: rgba(var(--color-almostBlack), 0.85);
}

.blog-post__content h2 {
    font-size: var(--fontStyle-h3);
    font-weight: var(--fontWeight-bold);
    color: rgba(var(--color-almostBlack), 1);
    margin: 2rem 0 0.75rem;
}

.blog-post__content h3 {
    font-size: var(--fontStyle-h4);
    font-weight: var(--fontWeight-semibold);
    margin: 1.5rem 0 0.5rem;
}

.blog-post__content p {
    margin: 0 0 1.25rem;
}

.blog-post__content ul,
.blog-post__content ol {
    padding-left: 1.5rem;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.blog-post__content strong {
    font-weight: var(--fontWeight-semibold);
    color: rgba(var(--color-almostBlack), 1);
}

.blog-post__content a {
    color: rgba(var(--color-laranBlue), 1);
    text-decoration: underline;
}

.blog-post__content blockquote {
    border-left: 3px solid rgba(var(--color-laranBlue), 0.4);
    padding-left: 1.25rem;
    color: rgba(var(--color-darkestGray), 0.8);
    font-style: italic;
    margin: 1.5rem 0;
}

.blog-post__content img {
    max-width: 100%;
    border-radius: 0.5rem;
}

.blog-post__footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(var(--color-grayshBlue), 1);
    flex-wrap: wrap;
}

.blog-post__share-label {
    font-size: var(--fontStyle-small);
    font-weight: var(--fontWeight-semibold);
    color: rgba(var(--color-darkestGray), 0.8);
}

.blog-post__share-btn {
    padding: 0.4rem 1rem;
    border-radius: 6px;
    font-size: var(--fontStyle-small);
    font-weight: var(--fontWeight-semibold);
    text-decoration: none;
    color: rgba(var(--color-totalWhite), 1);
}

.blog-post__share-btn--whatsapp { background: #25d366; }
.blog-post__share-btn--linkedin  { background: #0077b5; }

.blog-post__back {
    margin-top: 1.5rem;
    font-size: var(--fontStyle-small);
}

.blog-post__back a {
    color: rgba(var(--color-laranBlue), 1);
    text-decoration: none;
}

.blog-post__back a:hover {
    text-decoration: underline;
}

/* ============================================================
   Responsivo
   ============================================================ */

@media (min-width: 800px) {
    .blog-latest__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── css/Galeria.module.css ── */
/*
 * Galeria.module.css
 * Estilos da página /galeria — header, grid, cards, overlay, lightbox.
 *
 * Convenção .module.css adotada para facilitar a migração para Next.js.
 * No Next.js: import styles from '@/styles/Galeria.module.css'
 * No PHP atual: carregado como CSS global via header.php
 */

/* ── Header ── */

.galeria-header {
    width: 100%;
    padding: 6rem 0 5rem;
    background-color: rgba(var(--color-darkBlue), 1);
}

.galeria-header-wrapper {
    width: 83.33%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.galeria-header .tag-subtitle {
    color: rgba(var(--color-almostWhite), 0.9);
}

.galeria-header h1 {
    color: rgba(var(--color-almostWhite), 1);
    font-size: var(--fontStyle-h1);
    font-weight: var(--fontWeight-light);
    line-height: var(--lineHeight-snug);
    max-width: 42rem;
    margin: 0;
}

.galeria-header p {
    color: rgba(var(--color-almostWhite), 0.6);
    font-size: var(--fontStyle-body);
    font-weight: var(--fontWeight-light);
    max-width: 36rem;
    margin: 0;
}

/* ── Section ── */

.galeria-section {
    width: 100%;
    padding: 5rem 0 6rem;
    background-color: rgba(var(--color-almostWhite), 1);
}

.galeria-wrapper {
    width: 83.33%;
    max-width: 1600px;
    margin: 0 auto;
}

/* ── Filter buttons ── */

.galeria-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 3rem;
}

.galeria-filter-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 99px;
    border: 1.5px solid rgba(var(--color-laranBlue), 0.3);
    background: transparent;
    color: rgba(var(--color-almostBlack), 0.7);
    font-family: var(--fontFamily-titillium);
    font-size: 0.9rem;
    font-weight: var(--fontWeight-medium);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.galeria-filter-btn:hover {
    border-color: rgba(var(--color-laranBlue), 1);
    color: rgba(var(--color-laranBlue), 1);
}

.galeria-filter-btn.active {
    background-color: rgba(var(--color-laranBlue), 1);
    border-color: rgba(var(--color-laranBlue), 1);
    color: rgba(var(--color-totalWhite), 1);
}

/* ── Grid ── */

.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem;
}

/* ── Card ── */

.galeria-card {
    position: relative;
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    border-radius: 0.75rem;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.galeria-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.galeria-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(var(--color-darkBlue), 0.85) 0%, transparent 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.galeria-card:hover .galeria-card-overlay,
.galeria-card:focus-visible .galeria-card-overlay {
    opacity: 1;
}

.galeria-card:hover img,
.galeria-card:focus-visible img {
    transform: scale(1.04);
}

.galeria-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
}

.galeria-card-title {
    color: rgba(var(--color-totalWhite), 1);
    font-size: 0.95rem;
    font-weight: var(--fontWeight-semibold);
    font-family: var(--fontFamily-titillium);
    line-height: 1.3;
}

.galeria-card-local {
    color: rgba(var(--color-lightestBlue), 0.85);
    font-size: 0.8rem;
    font-family: var(--fontFamily-titillium);
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Override global i { width:100%; height:100% } so the icon stays small */
.galeria-card-local i {
    width: auto;
    height: auto;
    flex-shrink: 0;
}

.galeria-card-zoom {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1.25rem;
    height: 1.25rem;
    color: rgba(var(--color-totalWhite), 0.85);
    font-size: 1rem;
    overflow: visible;
}

.galeria-empty {
    text-align: center;
    color: rgba(var(--color-almostBlack), 0.4);
    font-size: var(--fontStyle-body);
    padding: 3rem 0;
    width: 100%;
}

/* ── Lightbox ── */

body.lightbox-open {
    overflow: hidden;
}

.galeria-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(var(--color-almostBlack), 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
}

.galeria-lightbox[hidden] {
    display: none;
}

.galeria-lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
    gap: 1rem;
}

.galeria-lightbox-content img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 0.5rem;
    display: block;
}

.galeria-lightbox-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
}

#galeriaLightboxTitle {
    color: rgba(var(--color-almostWhite), 1);
    font-family: var(--fontFamily-titillium);
    font-size: 1rem;
    font-weight: var(--fontWeight-semibold);
}

#galeriaLightboxLocal {
    color: rgba(var(--color-lightestBlue), 0.75);
    font-family: var(--fontFamily-titillium);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

#galeriaLightboxLocal i {
    width: auto;
    height: auto;
    flex-shrink: 0;
}

.galeria-lightbox-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(var(--color-totalWhite), 0.1);
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--color-almostWhite), 1);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.galeria-lightbox-close:hover {
    background: rgba(var(--color-totalWhite), 0.2);
}

.galeria-lightbox-nav {
    background: rgba(var(--color-totalWhite), 0.1);
    border: none;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--color-almostWhite), 1);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.galeria-lightbox-nav:hover {
    background: rgba(var(--color-totalWhite), 0.2);
}

/* ── Responsivo ── */

@media (min-width: 800px) {
    .galeria-grid {
        grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    }
}

@media (min-width: 1200px) {
    .galeria-header {
        padding: 8rem 0 6rem;
    }

    .galeria-header h1 {
        max-width: 52rem;
    }
}

/* ── css/UI.css ── */
/* ================================================= */
/* Componente: Botões                                */
/* ================================================= */

.btnWrapper {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(var(--color-almostWhite), 0);
    border-radius: 10rem;
    text-decoration: none;
    cursor: pointer;
    gap: 0.5rem;
    white-space: nowrap;
    font-weight: 300;
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    overflow: hidden;
}

/* Wrapper do ícone - controle independente do fundo */
.button__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    border-radius: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.button__label {
    padding: 0;
    margin: 0;
}

.button--small {
    padding: 0.5rem 0.5rem 1rem 0.5rem;
    font-size: 0.8rem;
    max-height: 3rem;
}

.button--medium {
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    font-size: 1rem;
    max-height: 3.5rem;
}

.button--almostSquare {
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    font-size: 1rem;
    max-height: 3.5rem;
    border-radius: 0.5rem;
}

.button--big {
    padding: 1.5rem 0.5rem 1.5rem 1rem;
    font-size: 1rem;
    max-height: 4rem;
}

.button--big .button__icon {
    padding: 1rem;
    border-radius: 100%;
}

.button--medium .button__icon {
    padding: 0;
    border-radius: 100%;
}

.button--almostWhite {
    background-color: rgba(var(--color-almostWhite), 0.75);
    color: rgba(var(--color-almostBlack), 0.6);
    border-color: rgba(var(--color-almostWhite), 0.25);
}

.button--almostWhite:hover {
    background-color: rgba(var(--color-almostWhite), 1);
    color: rgba(var(--color-almostBlack), 1);
    border-color: rgba(var(--color-almostWhite), 1);
}

.button--almostWhite .button__icon {
    background-color: rgba(var(--color-almostBlack), 0.8);
    color: rgba(var(--color-almostWhite), 0.8);
}

.button--almostBlack {
    background-color: rgba(var(--color-almostBlack), 0.8);
    color: rgba(var(--color-almostWhite), 0.65);
    border-color: rgba(var(--color-almostWhite), 0.25);
}

.button--almostBlack:hover {
    background-color: rgba(var(--color-almostBlack), 1);
    color: rgba(var(--color-almostWhite), 1);
    border-color: rgba(var(--color-almostWhite), 0.5);
}

.button--almostBlack .button__icon {
    background-color: rgba(var(--color-almostWhite), 0.8);
    color: rgba(var(--color-almostBlack), 0.8);
    width: 2rem;
    height: 2rem;
    border-radius: 5rem;
}

.button--almostBlack.active {
    background-color: #1A4BA9;
    cursor: pointer;
    color: #F8FAF9;
}

.button--blue {
    background-color: rgba(var(--color-laranBlue), 0.8);
    color: rgba(var(--color-almostWhite), 0.8);
}

.button--blue:hover {
    background-color: rgba(var(--color-laranBlue), 1);
    color: rgba(var(--color-almostWhite), 1);
}

.button--blue .button__icon {
    background-color: rgba(var(--color-almostWhite), 0.8);
    color: rgba(var(--color-almostBlack), 0.8);
    width: 2rem;
    height: 2rem;
    border-radius: 5rem;
}

.button--blue:hover .button__icon {
    background-color: rgba(var(--color-almostWhite), 1);
    color: rgba(var(--color-almostBlack), 1);
}

.button--secondary {
    background-color: rgba(var(--color-lightGray), 0.1);
    color: rgba(var(--color-almostWhite), 0.6);
    border-color: rgba(var(--color-lightGray), 0.3);
}

.button--secondary:hover {
    background-color: rgba(var(--color-lightGray), 0.2);
    color: rgba(var(--color-almostWhite), 1);
    border-color: rgba(var(--color-lightGray), 0.5);
}

.button--options {
    background-color: rgba(var(--color-lightBlue), 0.1);
    color: rgba(var(--color-lightBlue), 0.6);
    border-color: rgba(var(--color-lightBlue), 0.3);
}

.button--options:hover {
    background-color: rgba(var(--color-lightBlue), 0.2);
    color: rgba(var(--color-lightBlue), 1);
    border-color: rgba(var(--color-lightBlue), 0.5);
}

.button--options .button__icon {
    background-color: rgba(var(--color-almostWhite), 0);
    color: rgba(var(--color-lightBlue), 0.75);
}

/* ======================================== */
/* Animação dos botões   */
/* ======================================== */

.sliderCarouselControlPrevious:hover .button__icon {
    animation: btnAnimation-03 0.2s ease-in-out forwards;
}

.sliderCarouselControlNext:hover .button__icon {
    animation: btnAnimation-02 0.2s ease-in-out forwards;
}

.button:hover .button__icon i {
    animation: btnAnimation-02 0.2s ease-in-out forwards;
}

.btnAnimation-01:hover i {
    animation: btnAnimation-01 0.2s ease-in-out forwards;
}

.btnAnimation-02:hover i {
    animation: btnAnimation-02 0.2s ease-in-out forwards;
}

.btnAnimation-03:hover i {
    animation: btnAnimation-03 0.2s ease-in-out forwards;
}

@keyframes btnAnimation {
    0% {
        transform: translateX(0%);
        opacity: 1;
    }

    50% {
        transform: translateY(200%);
        opacity: 0;
    }

    51% {
        transform: translateY(-200%);
        opacity: 0;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes btnAnimation-02 {
    0% {
        transform: translateX(0%);
        opacity: 1;
    }

    50% {
        transform: translateX(200%);
        opacity: 0;
    }

    51% {
        transform: translateX(-200%);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes btnAnimation-03 {
    0% {
        transform: translateX(0%);
        opacity: 1;
    }

    50% {
        transform: translateX(-200%);
        opacity: 0;
    }

    51% {
        transform: translateX(200%);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

/* ================================================= */
/* Componente: TagSubtitle.php                       */
/* ================================================= */

.tag-subtitle {
    padding: 0.5rem 1rem;
    background-color: rgba(var(--color-lightBlue), 0.05);
    border: 1px solid rgba(var(--color-lightBlue), 0.25);
    border-radius: 10rem;
    width: max-content;
    max-width: max-content;
    height: max-content;
    font-size: 0.8rem;
}

/* ================================================= */
/* Componente: solutionFloat.php                     */
/* ================================================= */

.solutionFloatBannerSection {
    width: 100%;
    padding: 0 0 10rem 0;
    background-color: rgba(var(--color-blueishGray), 1);
}

.solutionFloatBannerWrapper {
    width: 70%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background-color: rgba(var(--color-laranBlue), 0.02);
    border: 1px solid rgba(var(--color-laranBlue), 0.1);
    border-radius: 1rem;
    padding: 1rem;
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
}

.solutionFloatBannerTitle {
    display: flex;
    border-bottom: 1px solid rgba(var(--color-laranBlue), 0.15);
    padding: 0.2rem 0;
}

.solutionFloatBannerTitle h4 {
    font-size: 1.2rem;
    color: rgba(var(--color-laranBlue), 0.8);
}

.solutionFloatBannerCarousel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.solutionFloatBannerItem {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    justify-content: space-between;
    background-color: rgba(var(--color-almostWhite), 0.10);
    border: 1px solid rgba(var(--color-laranBlue), 0.15);
    border-radius: 1rem;
}

.solutionFloatBannerImg img {
    border-radius: 0.75rem;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.solutionFloatBannerContent {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.solutionFloatBannerContent h4 {
    font-size: 1.4rem;
    width: 100%;
    color: rgba(var(--color-laranBlue), 0.8);
}


@media (min-width: 1200px) {
    .solutionFloatBannerWrapper {
        width: 83.33%;
    }

    .solutionFloatBannerCarousel {
        flex-direction: row;
    }

    .solutionFloatBannerItem {
        flex-direction: row;
        gap: 1rem;
    }

    .solutionFloatBannerContent {
        width: 50%;
    }

    .solutionFloatBannerImg {
        width: 50%;
    }
}

/* ================================================= */
/* Componente: floaterWhatsapp.php                   */
/* ================================================= */

.floaterWhatsapp {
    position: fixed;
    display: flex;
    z-index: 9980;
    bottom: 1rem;
    right: 1rem;
    padding: 1rem;
}

.icnGreenWhatsApp {
    background-color: rgba(var(--color-laranBlue), 1);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    font-size: 2rem;
    margin-left: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d0d0cf;
    box-shadow: 0 0.5rem 0.8rem rgba(var(--color-black), 0.5);
    transition: all 0.3s ease;
}

.icnGreenWhatsApp:hover {
    background-color: #33a26b;
}

@media screen and (min-width: 1201px) {
    .floaterWhatsapp {
        display: none;
    }
}

/* ================================================= */
/* Componente: floatSocial.php                       */
/* ================================================= */

.floatSocial {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgba(var(--color-blueishGray), 1);
    padding: 0 0 2.5rem 0;
}

.floatSocialWrapper {
    display: flex;
    flex-shrink: 1;
    padding: 1rem;
    color: rgba(var(--color-almostBlack), 0.50);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    margin: 0 auto;
    border-radius: 10rem;
    gap: 0.5rem;
    align-items: center;
    line-height: 1.2;
}

.floatSocialWrapper p {
    font-size: 0.8rem;
}

.floatSocialWrapper:hover {
    color: rgba(var(--color-almostBlack), 1);
}

.floatSocialIcn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    border-radius: 50rem;
    padding: 0.75rem;
    overflow: hidden;
    background-color: rgba(var(--color-almostWhite), 0.5);
    border: 1px solid rgba(var(--color-lightBlue), 0.10);
    color: rgba(var(--color-almostBlack), 0.50);
}

.floatSocialIcn:hover {
    color: rgba(var(--color-lightBlue), 1);
    background-color: rgba(var(--color-lightBlue), 0.15);
    border-color: rgba(var(--color-lightBlue), 0.25);
}

.floatSocialIcn:hover i {
    animation: btnAnimation-02 0.2s ease-in-out forwards;
}

/* ================================================= */
/* Componente: sliderControls.php                    */
/* ================================================= */

.sliderControls {
    position: absolute;
    display: flex;
    width: 100%;
    padding: 0 10rem;
    max-width: 1600px;
    left: 50%;
    transform: translateX(-50%);
    max-height: 3.5rem;
    bottom: 5rem;
    z-index: 10;
    justify-content: flex-end;
}

.sliderControlsWrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    background-color: rgba(var(--color-almostWhite), 0.15);
    border: 1px solid rgba(var(--color-almostWhite), 0.25);
    padding: 0.5rem;
    border-radius: 10rem;
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
}

.sliderControlsWrapper:hover {
    background-color: rgba(var(--color-almostWhite), 0.5);
    border: 1px solid rgba(var(--color-almostWhite), 0.6);
}

.slider-next-btn,
.slider-prev-btn {
    background-color: rgba(var(--color-almostWhite), 0.75);
    color: rgba(var(--color-almostBlack), 0.75);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10rem;
    border: 1px solid rgba(var(--color-almostWhite), 0.90);
    overflow: hidden;
}

.slider-next-btn:hover,
.slider-prev-btn:hover {
    cursor: pointer;
    background-color: rgba(var(--color-almostWhite), 0.90);
    border: 1px solid rgba(var(--color-almostWhite), 1);
    color: rgba(var(--color-lightBlue), 1);
}

.slider-next-btn:hover i {
    animation: btnAnimation-02 0.2s ease-in-out forwards;
}

.slider-prev-btn:hover i {
    animation: btnAnimation-03 0.2s ease-in-out forwards;
}

.sliderControlsIndicators {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    height: 100%;
    justify-content: space-between;
}

.sliderControlsIndicators .slider-indicator {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 100%;
    background-color: rgba(var(--color-almostBlack), 0.4);
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.sliderControlsIndicators .slider-indicator.active {
    background-color: rgba(var(--color-almostBlack), 0.8);
}

/* ================================================= */
/* Componente: floatOrcamento.php                    */
/* ================================================= */

.floatOrcamento {
    position: fixed;
    display: flex;
    left: 50%;
    bottom: -5rem;
    transform: translateX(-50%);
    z-index: 9998;
    background-color: rgba(17, 23, 31, 0.35);
    border: 1px solid rgba(0, 123, 255, 0.2);
    color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    padding: 0.75rem;
    align-items: center;
    border-radius: 5rem;
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.notificationCta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notificationIcn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 123, 255, 0.25);
    color: rgba(255, 255, 255, 0.50);
    border: 1px solid rgba(0, 123, 255, 0.15);
    border-radius: 10rem;
    padding: 0.75rem;
    overflow: hidden;
}

.floatOrcamento:hover {
    background-color: rgba(17, 23, 31, 0.5);
    border: 1px solid rgba(0, 123, 255, 0.5);
    color: rgba(255, 255, 255, 1);
}

.floatOrcamento:hover .notificationIcn {
    background-color: rgba(0, 123, 255, 0.75);
    color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 123, 255, 0.5);
}

.floatOrcamento:hover .notificationIcn i {
    animation: btnAnimation-02 0.2s ease-in-out forwards;
}

/* ================================================= */
/* Componente: playButton.php                        */
/* ================================================= */

.playButton {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 5rem;
    height: 5rem;
    background-color: rgba(var(--color-almostBlack), 0.65);
    color: rgba(var(--color-almostWhite), 0.9);
    border: 1px solid rgba(var(--color-almostWhite), 0.1);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    border-radius: 10rem;
    font-size: 2.5rem;
    cursor: pointer;
    overflow: hidden;
}

.playButton:hover {
    width: 7rem;
    height: 7rem;
    font-size: 2rem;
    border: none;
    color: rgba(var(--color-almostBlack), 0.8);
    background-color: rgba(var(--color-almostWhite), 0.3);
    border: 1px solid rgba(var(--color-almostBlack), 0.25);
}

.playButton:hover i {
    animation: btnAnimation-02 0.2s ease forwards;
}

/* ================================================= */
/* Componente: lazyVideo.php                         */
/* ================================================= */

.lazyVideo {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    border-radius: 1rem;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    aspect-ratio: 16 / 9;
}

.lazyVideo img {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
}

/* ================================================= */
/* Componente: customCheckbox.php                    */
/* ================================================= */

.customCheckbox {
    display: flex;
    gap: 0.5rem;
    flex-direction: row;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.customCheckbox input[type="checkbox"] {
    display: none;
}

.customCheckbox .checkVisual {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 0.25rem;
    background-color: rgba(var(--color-almostWhite), 0.05);
    border: 1px solid rgba(var(--color-lightBlue), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.customCheckbox:hover .checkVisual {
    background-color: rgba(var(--color-laranBlue), 0.15);
    border: 1px solid rgba(var(--color-lightBlue), 0.35);
}

.customCheckbox .checkVisual i {
    line-height: 1;
    color: rgba(var(--color-lightBlue), 0);
}

.customCheckbox input[type="checkbox"]:checked+.checkVisual {
    background-color: rgba(var(--color-lightBlue), 0.25);
    border-color: rgba(var(--color-lightBlue), 1);
}

.customCheckbox input[type="checkbox"]:checked+.checkVisual i {
    color: rgba(var(--color-lightBlue), 1);
}

/* ================================================= */
/* Componente: customRadio.php                       */
/* ================================================= */

.customRadio {
    display: flex;
    gap: 0.5rem;
    flex-direction: row;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.customRadio input[type="radio"] {
    display: none;
}

.customRadio .radioCircle {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 5rem;
    background-color: rgba(var(--color-almostWhite), 0.05);
    border: 1px solid rgba(var(--color-lightBlue), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.customRadio:hover .radioCircle {
    background-color: rgba(var(--color-laranBlue), 0.15);
    border: 1px solid rgba(var(--color-lightBlue), 0.35);
}

.customRadio .radioCircle i {
    line-height: 0;
    font-size: 0.4rem;
    margin: 0;
    color: rgba(var(--color-lightBlue), 0);
}

.customRadio input[type="radio"]:checked+.radioCircle {
    background-color: rgba(var(--color-lightBlue), 0.25);
    border-color: rgba(var(--color-lightBlue), 1);
}

.customRadio input[type="radio"]:checked+.radioCircle i {
    color: rgba(var(--color-lightBlue), 1);
}

/* ================================================= */
/* Componente: socialMediaFloat.php                  */
/* ================================================= */

.socialMediaFloatWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.socialMediaFloatWrapper p {
    font-size: 1rem;
}

.socialMediaFloatItems {
    display: flex;
    flex-direction: row;
    background-color: rgba(var(--color-laranBlue), 0.15);
    border: 1px solid rgba(var(--color-laranBlue), 0.20);
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
    border-radius: 10rem;

}

.socialMediaFloatItem {
    padding: 0.5rem;
    line-height: 1;
    background-color: rgba(var(--color-laranBlue), 0.25);
    border: 1px solid rgba(var(--color-laranBlue), 0.30);
    border-radius: 5rem;
    overflow: hidden;
}

.socialMediaFloatItem:hover {
    background-color: rgba(var(--color-laranBlue), 0.40);
    border: 1px solid rgba(var(--color-laranBlue), 0.50);
}

.socialMediaFloatItem a {
    color: rgba(var(--color-almostWhite), 0.65);
}

.socialMediaFloatItem:hover i {
    animation: btnAnimation-02 0.2s ease-in-out forwards;
    color: rgba(var(--color-lightBlue), 1);
}

/* ============================================ */
/* Estilos para as tags de aplicação            */
/* ============================================ */

.productTags {
    display: flex;
    margin: 1rem 0;
    gap: 0.5rem;
}

.productTag {
    padding: 0.5rem;
    background-color: rgba(var(--color-lightBlue), 0.10);
    border: 1px solid rgba(var(--color-lightBlue), 0.15);
    border-radius: 5rem;
}

/* ============================================ */
/* Estilos para botões download catalogo        */
/* ============================================ */

.baixarCatalogo {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    flex: 1;
    align-items: center;
    font-size: var(--fontStyle-body);
}

.baixarCatalogo a {
    display: inline-flex;
    background-color: rgba(var(--color-lightBlue), 0);
    border: 1px solid rgba(var(--color-lightBlue), 0);
    height: max-content;
    align-items: center;
    text-decoration: none;
    padding: 0.5rem;
    border-radius: 5rem;
    white-space: nowrap;
    overflow: hidden;
}

.baixarCatalogo a:hover {
    background-color: rgba(var(--color-lightBlue), 0.10);
    border: 1px solid rgba(var(--color-lightBlue), 0.15);
}

.baixarCatalogo a:hover i {
    animation: btnAnimation 0.2s ease forwards;
}

.baixarCatalogo a p {
    display: inline-flex;
    align-items: center;
    margin: 0;
    white-space: nowrap;
}

.baixarCatalogo a p i {
    margin-left: 0.5rem;
}
/* ── css/gridsSolucoes.css ── */
.solucoesSection {
    padding: 0;
}

.solucoesWrapper {
    width: 83.33%;
    margin: 0 auto;
    max-width: 100rem;
}

.solucoesHeader {
    width: 100%;
    padding: 5rem 0;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.gray-text {
    color: rgba(var(--color-almostBlack), 0.35);
}

.solucoesHeaderActions {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.solucoesHeaderLinks ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    gap: 1rem;
}

.solucoesHeaderLinks ul a {
    color: rgba(var(--color-almostBlack), 0.75);
    background-color: rgba(var(--color-lightBlue), 0);
    border: 1px solid rgba(var(--color-lightBlue), 0);
    border-radius: 5rem;
    padding: 0.5rem 1rem;
}

.solucoesHeaderLinks ul a:hover {
    color: rgba(var(--color-lightBlue), 0.75);
    background-color: rgba(var(--color-lightBlue), 0.15);
    border: 1px solid rgba(var(--color-lightBlue), 0.25);
}



@media (min-width: 1200px) {

    .solucoesHeaderActions,
    .solucoesHeaderLinks ul {
        flex-direction: row;
    }
}


/* ============================================= */
/* Grid de soluções remodelado - 02 / 10 / 2025  */
/* ============================================= */

.solucoes-grid-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 0 0 5rem 0;
}

.solucoes-grid-category {
    display: flex;
    border-bottom: 1px solid rgba(var(--color-laranBlue), 1);
    margin-bottom: 1rem;
}

a.solucoes-grid-category {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

a.solucoes-grid-category:hover {
    opacity: 0.85;
}

a.solucoes-grid-category p {
    margin: 0;
}

.solucoes-grid-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
}

.solucoes-grid-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 2rem;
    padding: 1rem 1rem 2rem 1rem;
    gap: 1rem;
    background-color: rgba(var(--color-blueishGray), 1);
    border: 1px solid rgba(var(--color-blueishGray), 0);
}

.solucoes-grid-item-inativo {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 2rem;
    padding: 1rem 1rem 2rem 1rem;
    gap: 1rem;
    background-color: rgba(var(--color-blueishGray), 1);
    border: 1px solid rgba(var(--color-blueishGray), 0);
    opacity: 0.5;
}

.solucoes-grid-item img,
.solucoes-grid-item-inativo img {
    display: flex;
    width: 100%;
    object-fit: cover;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 1rem;
    overflow: hidden;
}

.solucoes-grid-item h4,
.solucoes-grid-item .landing-hub-card-title,
.solucoes-grid-item-inativo h4 {
    color: rgba(var(--color-laranBlue), 1);
    line-height: 120%;
}

.solucoes-grid-item .landing-hub-card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.solucoes-grid-item p,
.solucoes-grid-item-inativo p {
    color: rgba(var(--color-almostBlack), 0.65);
    font-size: 1rem;
}

.solucoes-grid-item:hover {
    background-color: rgba(var(--color-laranBlue), 0.10);
    border-color: rgba(var(--color-laranBlue), 0.25);
    box-shadow: 0rem 1rem 5rem rgba(var(--color-almostBlack), 0.35);
}

.solucoes-grid-item-inativo:hover {
    background-color: rgba(var(--color-grayshBlue), 1);
    border: 1px solid rgba(var(--color-red), 0.5);
    cursor: not-allowed;
}

/* Landing hubs (aberturas, elevadores, logística) */
.landing-hub .solucoesHeader {
	padding: 10rem 0 5rem;
}

/* Faixa dos cards: branco nas hubs; em /solucoes mantém o cinza-azulado global (.pgSolucoesCards) */
.landing-hub-pgSolucoes {
	background-color: rgba(var(--color-almostWhite), 1);
}

.landing-hub-copy {
	max-width: 52rem;
	margin-left: 0;
	margin-right: auto;
	padding: 0 0.75rem;
	text-align: left;
}

.landing-hub-copy--before {
	margin-bottom: 3rem;
}

/* Espaço no fim da hub (antes era no bloco de texto pós-cards) */
.landing-hub {
	padding-bottom: 5rem;
}

.landing-hub-copy p {
	margin: 0 0 1.35rem;
	font-size: 1.125rem;
	line-height: 1.75;
	color: rgba(var(--color-almostBlack), 0.78);
	text-align: left;
}

.landing-hub-copy p:last-child {
	margin-bottom: 0;
}

@media (min-width: 1200px) {
	.landing-hub-copy p {
		font-size: 1.1875rem;
		line-height: 1.72;
	}
}

/* ── css/menus.css ── */
/* ================================================= */
/* Componente: Menu Desktop (default.php)            */
/* ================================================= */

/* Visibilidade específica de menus */
.headerMobile,
.menuMobile {
    display: none;
}

/* Barra de navegação (desktop) */
nav {
    z-index: 9998;
    width: 100%;
    padding: 0;
    position: fixed;
    margin: 0;
}

.nav-wrapper {
    display: flex;
    width: 83.33%;
    max-width: 1600px;
    margin: 0 auto;
    margin-top: 1rem;
    align-items: center;
    padding: var(--spacing-medium);
    background-color: rgba(var(--color-almostBlack), 0.6);
    border: 1px solid rgba(var(--color-almostWhite), 0);
    justify-content: space-between;
    border-radius: 10rem;
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
}

.nav-wrapper:hover {
    background-color: rgba(var(--color-almostBlack), 0.9);
    border: 1px solid rgba(var(--color-almostWhite), 0.1);
}

/* Itens do menu principal */
.nav-items ul {
    display: inline-flex;
    list-style: none;
    padding: 0;
    width: 100%;
    gap: 3rem;
    margin: 0;
    align-items: center;
}

.nav-items ul li {
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
}

.nav-items ul li a {
    color: rgba(var(--color-almostWhite), 1);
    text-decoration: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-items ul li a:hover {
    color: rgba(var(--color-lightBlue), 1);
}

.nav-items ul li a:hover i {
    color: rgba(var(--color-lightBlue), 1);
}

/* Ícone de dropdown */
.bi-chevron-down {
    font-size: 0.8rem;
    color: white;
    line-height: 1;
}

/* ================================================= */
/* Componente: Submenu Contatos                      */
/* ================================================= */

.submenuContatos { 
    display: none;
    position: absolute;
    width: max-content;
    left: 50%;
    transform: translateX(70%);
}

.submenuContatos.show {
    display: block;
}

.submenuContatosWrapper {
    display: flex;
    max-width: max-content;
    background-color: rgba(var(--color-almostBlack), 0.7);
    border: 1px solid rgba(var(--color-almostWhite), 0);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 1rem;
}

.submenuContatosWrapper:hover { 
    background-color: rgba(var(--color-almostBlack), 0.9); 
    border: 1px solid rgba(var(--color-almostWhite), 0.1); 
}

.submenuContatos ul { 
    display: block; 
    list-style: none; 
    line-height: 2; 
    margin: 0; 
    padding: 0; 
    color: rgba(var(--color-almostWhite), 1); 
}

.submenuContatos a { 
    color: rgba(var(--color-almostWhite), 1); 
}

/* ================================================= */
/* Componente: Submenu Soluções                      */
/* ================================================= */

.submenuSolucoes { 
    display: none; 
    padding: 0; 
    position: fixed; 
    left: 50%; 
    transform: translateX(-53%); 
    margin-top: 1rem; 
}

.submenuSolucoes.show { 
    display: block; 
}

.submenuSolucoesColumnsWrapper {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    background-color: rgba(var(--color-almostBlack), 0.7);
    border: 1px solid rgba(var(--color-almostWhite), 0.1);
    padding: 2rem 4rem;
    border-radius: 1rem;
    gap: 3rem;
    z-index: 9999;
    max-width: max-content;
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
}

.submenuSolucoesColumnsWrapper:hover { 
    background-color: rgba(var(--color-almostBlack), 0.9); 
    border: 1px solid rgba(var(--color-almostWhite), 0.1); 
}

/* Listas dos submenus */
.submenuSolucoesColumnsWrapper ul,
.submenuContatosWrapper ul { 
    list-style: none; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
}

.submenuSolucoesColumnsWrapper ul li,
.submenuContatosWrapper ul li { 
    color: rgba(var(--color-darkGray), 1); 
    display: flex; 
    width: 100%; 
    flex-direction: row; 
    margin: 0; 
    padding: 0.5rem 0; 
}

/* Títulos dos submenus */
.submenuTitle { 
    color: rgba(var(--color-lightBlue), 0.5); 
    padding: 1rem 0; 
    margin: 0; 
    font-size: 1rem; 
}

a.submenuTitle {
    text-decoration: none;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

a.submenuTitle:hover {
    color: rgba(var(--color-lightBlue), 0.85);
}

/* Links dos submenus */
.submenuList a,
.submenuContatosList a { 
    color: rgba(var(--color-almostWhite), 1); 
    text-decoration: none; 
    display: flex; 
    flex-direction: row; 
    width: 100%; 
    gap: 0.5rem; 
    line-height: 1; 
    overflow: hidden; 
}

.submenuList a:hover,
.submenuContatosList a:hover { 
    color: rgba(var(--color-almostWhite), 0.65); 
}

.submenuList a:hover i,
.submenuContatosList a:hover i { 
    animation: linkArrow 0.5s ease-out forwards; 
}

/* Seta animada dos links */
.linkArrow { 
    display: flex; 
    width: 100%; 
    justify-content: space-between; 
}

.linkArrow i { 
    display: flex; 
    color: rgba(var(--color-lightBlue), 1); 
    opacity: 0; 
    width: 1rem; 
    height: 1rem; 
    line-height: 1; 
    transform: rotate(-45deg); 
}

/* Animação da seta */
@keyframes linkArrow { 
    50% { 
        opacity: 1; 
    } 
    100% { 
        transform: rotate(0); 
        opacity: 1; 
    } 
}

/* ================================================= */
/* Componente: Correções Específicas                 */
/* ================================================= */

.menu-contato { 
    position: relative !important; 
}

.menu-contato .submenuContatos { 
    left: 50% !important; 
    top: 100% !important; 
    transform: translateX(-50%) !important; 
    margin-top: 2rem !important; 
    position: absolute !important; 
    z-index: 1000 !important; 
    display: none !important; 
}

.menu-contato:hover .submenuContatos,
.menu-contato:focus-within .submenuContatos,
.menu-contato .submenuContatos:hover { 
    display: block !important; 
}

/* ================================================= */
/* Componente: Menu Mobile (mobile.php)              */
/* ================================================= */

@media (max-width: 1200px) {
    .headerMobile {
        position: fixed;
        display: block; 
        width: 100%;
        padding: 1rem 0;
        background-color: rgba(21, 21, 21, 0.6); 
        z-index: 9999; 
    }
    
    .headerMobile:hover { 
        background-color: rgba(21, 21, 21, 0.9); 
    }

    .menuMobile { 
        position: fixed; 
        width: 100%; 
        height: 100%; 
        background-color: rgba(17, 23, 31, 0.95); 
        display: flex;
        flex-direction: column;
        z-index: 9998; 
    }
    
    .menuMobileContent { 
        width: 83.33%;
        padding: 7.5rem 0;
        margin: 0 auto;
    }
    
    .menuMobileHeader { 
        display: flex; 
        align-items: center; 
        justify-content: space-between; 
        padding: 1rem 0; 
    }
    
    .menuMobileContent ul { 
        list-style: none; 
        font-size: 2rem; 
        line-height: 2; 
        margin: 0; 
        padding: 0; 
    }
    
    .menuMobileContent a { 
        color: #F8FAF9; 
        text-decoration: none; 
    }
    
    .menuMobileContent a:hover { 
        text-decoration: underline; 
    }
    
    .menuMobileContent span { 
        color: #7A99AC; 
    }
    
    .menuMobileContent { 
        padding-bottom: 5vh; 
    }

    .menuMobile { 
        display: flex; 
    }
    
    .menuMobile img { 
        filter: brightness(0) invert(1); 
    }

    .menuMobileCta {
        width: 83.33%;
        margin: 0 auto;
    }
    
    .menuMobileHidden { 
        display: none; 
    }
    
    .headerMobileWrapper { 
        display: flex; 
        align-items: center; 
        width: 90%;
        margin: 0 auto;
        justify-content: space-between; 
    }
    
    .headerMobileMenu { 
        display: flex; 
        align-items: center; 
        gap: 0.5rem; 
        background-color: rgba(var(--color-laranBlue), 1);
        padding: 0.5rem 0.5rem 0.5rem 0.75rem;
        border-radius: 100rem;
        cursor: pointer;
    }
    
    .headerMobileMenu p { 
        color: rgba(var(--color-almostWhite), 0.75);
    }
    
    .menuMobileAbrir { 
        position: relative; 
        display: flex;
        background-color: rgba(var(--color-almostWhite), 1);
        padding: 0.5rem;
        border-radius: 100rem;
    }

    .mobileMenuClose {
        background-color: rgba(var(--color-almostWhite), 1);
        padding: 0.5rem;
        border-radius: 100rem;
        display: flex;
        color: rgba(var(--color-almostBlack), 1);
        border: none;
        cursor: pointer;
    }
}


/* ================================================= */
/* Componente: Menu Desktop V2 (nav-02)             */
/* ================================================= */

.nav-02-section {
    width: 100%;
    display: none;
    background-color: rgba(var(--color-almostBlack), 0.85);
    backdrop-filter: blur(1rem);
    padding: 0.8rem;
    -webkit-backdrop-filter: blur(1rem);
}

.nav-02-wrapper {
    display: flex;
    width: 83.33%;
    max-width: 100rem;
    margin: 0 auto;
    padding: 0;
    justify-content: space-between;
    gap: 1rem;
}

.nav-02-menu {
    display: flex;
    width: 100%;
}

.nav-02-menu ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 5rem;
    width: 100%;
    align-items: center;
}

.nav-02-menu ul li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(var(--color-almostWhite), 0.75);
}

.nav-02-menu ul li:hover a,
.nav-02-menu ul li:hover a i {
    color: rgba(var(--color-lightBlue), 1.00);
}

.nav-02-menu ul li a i {
    width: 0.5rem;
    line-height: 1;
}

/* ================================================= */
/* Componente: Submenu Soluções V2 (nav-02)          */
/* ================================================= */

.nav-02-submenuSolucoes.show { 
    display: block; 
    animation: slideDownGate 0.4s ease-out forwards;
}

.nav-02-submenuSolucoes {
    display: none;
    width: 100%;
    background-color: rgba(var(--color-almostBlack), 0.80);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    position: relative;
    z-index: 10000;
}

/* Animação do portão descendo */
@keyframes slideDownGate {
    0% {
        max-height: 0;
        opacity: 0;
    }
    100% {
        max-height: 500px;
        opacity: 1;
    }
}

.nav-02-submenuSolucoesColumnsWrapper {
    display: flex;
    width: 83.33%;
    max-width: 90rem;
    padding: 1rem 0 3rem 0;
    margin: 0 auto;
    justify-content: space-between;
    position: relative;
    z-index: 10001;
}

.nav-02-submenuSolucoesColumn {
    display: flex;
    flex-direction: column;
}

/* Alinhamento dos títulos no nav-02 */
.nav-02-submenuSolucoes .submenuTitle {
    display: flex;
    margin-left: -0.75rem;
}

/* Reset inicial - esconder todos os elementos */
.nav-02-submenuSolucoes .submenuTitle,
.nav-02-submenuSolucoes .submenuList li {
    opacity: 0;
    visibility: hidden;
}

/* Quando o submenu abre, mostrar os elementos com delays */
.nav-02-submenuSolucoes.show .submenuTitle {
    opacity: 1 !important;
    visibility: visible !important;
    animation: fadeInUp 0.3s ease-out 0.1s forwards;
}

.nav-02-submenuSolucoes.show .submenuList li {
    opacity: 1 !important;
    visibility: visible !important;
    animation: slideInLeft 0.3s ease-out forwards;
}

/* Delays específicos para cada item */
.nav-02-submenuSolucoes.show .submenuList li:nth-child(1) {
    animation-delay: 0.3s;
}

.nav-02-submenuSolucoes.show .submenuList li:nth-child(2) {
    animation-delay: 0.4s;
}

.nav-02-submenuSolucoes.show .submenuList li:nth-child(3) {
    animation-delay: 0.5s;
}

.nav-02-submenuSolucoes.show .submenuList li:nth-child(4) {
    animation-delay: 0.6s;
}

.nav-02-submenuSolucoes.show .submenuList li:nth-child(5) {
    animation-delay: 0.7s;
}

/* ================================================= */
/* Componente: Animações do Menu V2                   */
/* ================================================= */

/* Keyframes para as animações */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ================================================= */
/* Componente: Estilos Específicos V2                */
/* ================================================= */

.nav-02-submenuSolucoesColumn .linkInativo {
    color: rgba(var(--color-almostWhite), 0.40);
}

.nav-02-submenuSolucoesColumn ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-02-submenuSolucoesColumn ul li {
    line-height: 1.8;
}

.nav-02-submenuSolucoesColumn ul li a {
    display: flex;
    color: rgba(var(--color-almostWhite), 0.65);
    line-height: 1.8;
    align-items: center;
}

.nav-02-submenuContatos {
    display: none;
}

/* ================================================= */
/* Nav intro animation (triggered after loader)      */
/* ================================================= */

@keyframes navBgSlideDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

@keyframes navItemFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

nav.nav-loading {
    opacity: 0;
    pointer-events: none;
}

nav.nav-intro .nav-02-section {
    animation: navBgSlideDown 0.5s ease-out both;
}

nav.nav-intro .nav-02-wrapper > a,
nav.nav-intro .nav-02-menu ul li,
nav.nav-intro .nav-02-wrapper > .btnWrapper {
    animation: navItemFadeIn 0.35s ease both;
}

nav.nav-intro .nav-02-wrapper > a             { animation-delay: 0.35s; }
nav.nav-intro .nav-02-menu ul li:nth-child(1) { animation-delay: 0.50s; }
nav.nav-intro .nav-02-menu ul li:nth-child(2) { animation-delay: 0.63s; }
nav.nav-intro .nav-02-menu ul li:nth-child(3) { animation-delay: 0.76s; }
nav.nav-intro .nav-02-menu ul li:nth-child(4) { animation-delay: 0.89s; }
nav.nav-intro .nav-02-menu ul li:nth-child(5) { animation-delay: 1.02s; }
nav.nav-intro .nav-02-wrapper > .btnWrapper   { animation-delay: 1.15s; }

/* ================================================= */
/* Componente: Media Queries                         */
/* ================================================= */

@media (min-width:1200px) {
    .nav-02-section {
        display: flex;
    }
}
/* ── css/MetalLaran_css-1920px.css ── */
/* desktopView movido para estilosGerais.css */


#loadingScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: rgba(var(--color-laranBlue), 1);
}

.loadingBarWrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-5rem);
    width: 10rem;
    height: 5rem;
}

@media screen and (max-width: 1199px) {
    .loadingBarWrapper {
        transform: translateY(-2rem);
    }
}

#loadingBar {
    position: absolute;
    top: 0%;
    left: 0;
    height: 5%;
    width: 0%;
    background-color: rgba(var(--color-lightBlue), 1);
}

#loadingText {
    position: absolute;
    color: rgba(var(--color-white), 1);
    font-size: clamp(1.4rem, 2vw, 2rem);
    right: 17%;
}

#loadingLogo {
    position: absolute;
    left: 20%;
}

.wrapper {
    width: 50%;
    margin: 0 auto;
    padding-top: 200px;
}

/* Estilos para o logotipo (movido para menus.css) */

/* Estilos de navegação (movidos para menus.css) */

/* submenuContatos (movido para menus.css) */

/* Submenu Soluções (movido para menus.css) */

/* Estilos para seção reviews */

.googleReviews {
    width: 100%;
    background-color: rgba(var(--color-blueishGray), 1);
    padding-bottom: 0px;
    margin: 0 auto;
    overflow: hidden;
}

.googleReviewsTop {
    display: flex;
    width: 83.33%;
    max-width: 1600px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
}

.googleReviewsWrapper {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.googleReviewsTitle h2 {
    font-size: 30px;
    font-weight: 300;
    color: #11171F;
}

.reviewsCardsWrapper {
    width: 83.33%;
    max-width: 1920px;
    display: flex;
    padding-left: 160px;
    padding-right: 160px;
    overflow: hidden;
}

.reviewsCards {
    display: flex;
    gap: 3vh;
    user-select: none;
    transition: transform 0.3s ease-in-out;
}

.reviewsCards h4 {
    color: #07235E;
    font-weight: 300;
    font-size: 20px;
    margin-top: 0px;
}

.reviewsLinkMobile {
    display: none;
}

.reviewsLink {
    font-size: 18px;
}

.reviewsLink a {
    text-decoration: none;
    color: #1A4BA9;
}

.reviewsLink a:hover {
    color: #57A1D8;
}

.reviewCard {
    width: 17rem;
    background-color: #F8FAF9;
    border-radius: 1rem;
    flex-shrink: 0;
    padding: 2rem;
    opacity: 1;
}

.reviewCard p {
    font-size: 1rem;
}

.reviewsData {
    font-size: 0.8rem;
}

.reviewStars {
    color: #FFD700;
}

.reviewStars i {
    margin-right: 0.2rem;
}

/* Estilos para a versão mobile */
@media (max-width: 800px) {
    .googleReviewsWrapper {
        width: 100%;
    }

    .reviewsCardsWrapper {
        width: 100%;
        overflow-x: auto;
    }

    .googleReviewsTop {
        flex-direction: column;
    }

    .reviewCard {
        max-width: 200px;
    }

    .reviewsCards:last-child {
        margin-right: 100px;
    }
}



/* Estilos para a página Soluções */

.subpage-header {
    width: 100%;
    padding-top: 250px;
    font-size: 65px;
    font-weight: 300;
    background-color: #007BFF;
}

.btnWrapperbaixarCatalogo {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    max-width: max-content;
}

.downloadBtn3 p {
    color: rgba(var(--color-almostBlack), 0.65);
}

.downloadBtn3:hover p {
    color: rgba(var(--color-lightBlue), 1);
}


/* ================================================ */
/* Estilos para página de soluções                  */
/* ================================================ */

.pgSolucoesHeader {
    width: 100%;
    padding: 5rem 0;
}

.pgSolucoesHeaderWrapper {
    width: 83.33%;
    margin: 0 auto;
    padding: 0;
}

.pgSolucoesTitleWrapper {
    width: 100%;
    margin: 0 auto;
    background-color: rgba(var(--color-lightBlue), 1);
}

.pgSolucoesHeader h2 {
    color: #444444;
}

/* Estilos para os links rápidos */

.quickLinks-Section {
    width: 100%;
    background-color: rgba(var(--color-darkGray), 0.25);
    padding: 5rem 0;
}

.quickLinks-Wrapper {
    width: 83.33%;
    display: flex;
    margin: 0 auto;
    max-width: 1600px;
    flex-direction: column;
    gap: 1rem;
}

.quicklinks-Title {
    font-size: 1.2rem;
    font-weight: 500;
    color: rgba(var(--color-almostBlack), 0.50);
}

.quicklinks-TitleLink {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.quicklinks-TitleLink:hover {
    color: rgba(var(--color-laranBlue), 1);
    border-bottom-color: rgba(var(--color-laranBlue), 0.35);
}

.quicklinks-Grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 3rem;
}

.quicklinks-Grid ul {
    width: 100%;
    padding: 0;
    list-style: none;
    padding: 1rem 0 0 0;
}

.quicklinks-Grid i {
    width: 1rem;
    height: 1rem;
    line-height: 1;
}

.quicklinks-Grid ul li {
    padding: 1.5rem 0;
    border-top: 1px solid rgba(var(--color-almostBlack), 0.2);
}

.quicklinks-Grid ul li:last-child {
    border-bottom: 1px solid rgba(var(--color-almostBlack), 0.2);
}

.quicklinks-Grid ul li:hover a {
    width: 90%;
    margin: 0 auto;
    color: rgba(var(--color-lightBlue), 1);
}

.quicklinks-Grid ul li,
.quicklinks-Grid ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    color: rgba(var(--color-almostBlack), 0.5);
}

.quicklinks-Inativo {
    opacity: 0.40;
}



/* Estilos para os cards das soluções */

.pgSolucoesCards {
    width: 100%;
    background-color: rgba(var(--color-blueishGray), 1);
    padding-top: 5rem;
    margin: 0;
}

/* Mesmo enquadramento em todos os cards (ficheiros com rácios diferentes, ex. JPG vs webp 865×655) */
.pgSolucoesCardsImg,
.pgSolucoesCardsImgDesktop,
.pgSolucoesCardsImgMobile {
    width: 100%;
    overflow: hidden;
    border-radius: 1rem;
}

.pgSolucoesCardsImg img,
.pgSolucoesCardsImgDesktop img,
.pgSolucoesCardsImgMobile img {
    display: block;
    width: 100%;
    aspect-ratio: 865 / 655;
    object-fit: cover;
    object-position: center;
    border-radius: 1rem;
}

.pgSolucoesCardsWrapper {
    width: 83.33%;
    margin: 0 auto;
    max-width: 1600px;
    /* Limita o tamanho máximo */
}

.pgSolucoesCard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    width: 100%;
    gap: 5rem;
    align-items: start;
    justify-content: space-between;
    padding-bottom: 5rem;
}

.pgSolucoesCardsContent h3,
.pgSolucoesCardsContent p {
    width: 100%;
}

.pgSolucoesCardsImgMobile {
    display: none;
}

.pgSolucoesCardsImgDesktop {
    display: block;
}

@media (max-width: 1200px) {
    .pgSolucoesCardsImgMobile {
        display: block;
    }

    .pgSolucoesCardsImgDesktop {
        display: none;
    }

    .pgSolucoesCard {
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
        /* Ajuste para mobile */
    }
}


/* Estilos para a página Portas de Enrolar */

.productPageHeader {
    background-color: rgba(var(--color-almostWhite), 1);
    display: flex;
    width: 100%;
}

.productPageHeaderWrapper {
    width: 83.33%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.productPageHeaderCTA {
    background-color: #F8FAF9;
    padding-top: 100px;
    padding-bottom: 100px;
    margin: 0 auto;
}

.productPageHeaderCTAWrapper {
    width: 83.33%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.productPageHeaderCTALinks ul {
    list-style: none;
    display: flex;
    gap: 50px;
}

.productPageHeaderCTALinks ul li a {
    font-family: 'Titillium Web', sans-serif;
    color: #11171F;
    text-decoration: none;
}

.productPageHeaderCTALinks ul li a:hover {
    color: #57A1D8;
}


/* Estilos para o banner */


.sliderCarouselSection {
    width: 100%;
    position: relative;
    padding-bottom: 10vh;
}

.sliderCarouselWrapper {
    width: 83.33%;
    height: auto;
    border-radius: 50px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.sliderCarouselSlides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    height: auto;
}

.sliderCarouselSlides img {
    width: 100%;
    height: auto;
    flex-shrink: 0;
}

/* Estilos para o controlador dos slides */
.sliderCarouselControls {
    position: absolute;
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 50px;
    padding: 10px;
    gap: 10px;
    z-index: 9001;
    transition: background-color 0.3s ease;
}

.sliderCarouselControls:hover {
    background-color: rgba(255, 255, 255, 0.6);

}

.sliderCarouselControls button {
    display: flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50px;
    border: none;
    transition: background-color 0.3s ease-in-out;
    cursor: pointer;
    overflow: hidden;
}

.sliderCarouselControls button:hover {
    background-color: rgba(255, 255, 255, 1);
}

.sliderCarouselControls i {
    font-size: 30px;
    color: rgba(0, 0, 0, 1);
}

.sliderCarouselControlIndicators {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.sliderCarouselControlDots {
    width: 10px;
    height: 10px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.sliderCarouselControlDots:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.sliderCarouselControlDots.active {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Estilos para o controlador dos carrosseis */

.portfolioCarouselCard {
    flex: 0 0 300px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.carouselControlPanel {
    display: flex;
    width: max-content;
    margin: 0 auto;
    align-items: center;
    gap: 20px;
    background: rgba(200, 200, 200, 0.2);
    justify-content: center;
    margin-top: 20px;
    padding: 0.5rem;
    border-radius: 50px;
    transition: background-color 0.3s ease;
}

.carouselControlPanel:hover {
    background: rgba(200, 200, 200, 0.5);
}

.carouselControlPanel button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.6);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.carouselControlPanel button:hover {
    background-color: rgba(255, 255, 255, 1);
}

.carouselControlPanel button i {
    font-size: 24px;
    color: black;
}


/* */

.productPageHeaderCall {
    width: 100%;
    background-color: #F8FAF9;
    padding: 0;
    margin: 0;
    padding-bottom: 100px;
}

.productPageHeaderCallWrapper {
    width: 83.33%;
    margin: 0 auto;
    padding-top: 0px;
    gap: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.productPageHeaderCallLeft {
    width: 45%;
}

.productPageHeaderCallLeft h2 {
    font-weight: 300;
    line-height: 1.2;
    font-size: 2.5rem;
    margin: 0;
    padding: 0;
}

.productPageHeaderCallRight {
    width: 35%;
}

.productPageHeaderCallRightTitle {
    width: 100%;
    border-bottom: 1px solid rgba(var(--color-laranBlue), 1);
    margin: 0;
    padding: 0;
    margin-bottom: 1.5rem;
}

.productPageHeaderCallRightTitle p {
    margin: 0;
    padding: 0;
    padding-bottom: 5px;
}

.productPageHeaderCallRightAplication {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 1rem 0 1rem 0;
    margin-bottom: 1rem;
    background-color: rgba(var(--color-blueishGray), 1);
    border: 1px solid rgba(var(--color-laranBlue), 0.1);
    border-radius: 1.4rem;
}

.aplicationsIcnBackground {
    padding: 1rem;
    margin: 0 1rem;
    display: flex;
    background-color: rgba(var(--color-laranBlue), 0.1);
    border-radius: 1rem;
}

.productPageHeaderCallRightAplication img {
    width: 3rem;
}

.productPageHeaderCallRightAplication p {
    font-size: 1.4rem;
    font-weight: 300;
    color: rgba(var(--color-laranBlue), 1);
}

.productPageSection2 {
    width: 100%;
    background-color: rgba(var(--color-laranBlue), 1);
    padding: 10rem 0
}

.productPageSection2Wrapper {
    width: 83.33%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.productPageSection2Title h2 {
    color: #CDCDCD;
    width: 75%;
}

.productPageSection2TopSpecs {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: rgba(var(--color-lightBlue), 1);
    border-radius: 1rem;
    padding: 2rem;
    gap: 3rem
}

@media (min-width:1200px) {
    .productPageSection2TopSpecs {
        flex-direction: row;
    }
}

.productPageSection2Spec {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.productPageSection2Spec i {
    font-size: 2rem;
    color: rgba(var(--color-almostWhite), 1);
    margin: 0;
    padding: 0;
}

.productPageSection2Spec h4 {
    color: rgba(var(--color-almostWhite), 1);
}

.productPageSection2Spec p {
    color: rgba(var(--color-almostWhite), 0.65);
}

.blue-text {
    color: #57A1D8;
}

/* Estilos para seção benefícios product page */

.productPageBenefits {
    width: 100%;
    background-color: rgba(var(--color-blueishGray), 1);
    margin: 0;
    padding: 0;
    padding-top: 100px;
    padding-bottom: 100px;
}

.productPageBenefitsWrapper {
    width: 83.33%;
    margin: 0 auto;
}

.productPageBenefitsTitle {
    padding-bottom: 3rem;
    margin: 0;
}

.productPageBenefitsTitle h2 {
    font-size: 3rem;
    max-width: 60%;
    font-weight: 300;
    color: #57A1D8;
    line-height: 1.2;
    padding: 0;
    margin: 0;
}

.productPageBenefitsItem {
    width: 100%;
    display: flex;
    margin: 0 auto;
    padding: 0;
    margin-top: 2rem;
    margin-bottom: 5rem;
    justify-content: space-between;
    gap: 50px;
}

.productPageBenefitsItemsDescription {
    width: 50%;
    margin: 0 auto;
}

.productPageBenefitsItemsDescription h4 {
    font-size: 32px;
    font-weight: 300;
    color: #11171F;
    line-height: 1.2;
    padding: 0;
    margin: 0;
}

.productPageBenefitsItemsDescription p {
    font-weight: 300;
    font-size: 18px;
    margin: 0;
    padding-top: 20px;
    padding-bottom: 30px;
    max-width: 90%;
}

.productPageBenefitsItemsDescriptionDetails {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.ItemsDescriptionDetailsContainer {
    padding: 0;
    margin: 0;
    width: 200px;
    display: flex;
    padding-bottom: 20px;
}

.ItemsDescriptionDetailsContainer i {
    padding-right: 20px;
    margin: 0;
    font-size: 24px;
    color: #7A99AC;
}

.ItemsDescriptionDetailsContainer p {
    padding: 0;
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
}

.ItemsDescriptionDetailsContainer img {
    width: 100px;
    padding-top: 10px;
    margin: 0;
}

.ItemsDescriptionDetailsContainer .remoteControlIcn {
    width: 24px;
    height: 24px;
    margin: 0;
    padding-right: 20px;
    padding-top: 0px;
}

.productPageBenefitsItemsImg {
    width: 50%;
    margin: 0 auto;
    text-align: center;
}

.productPageBenefitsItemsImg img {
    border-radius: 20px;
    width: 100%;
}

.productPagenBenefitsPersonalizationTitle p {
    margin-bottom: 10px;
    padding: 0;
}

.productPageBenefitsPersonalizationOptions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.productPageBenefitsPersonalizationOptions p {
    margin: 0;
    padding: 0;
}

.colorChooseFechado {
    display: block;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    background: url('../img/produtos/enrolar/iconesPersonalizacao/texturaMetalInteiro.webp');
    background-size: 48px;
}

.colorChooseMicroperfurado {
    display: block;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    background: url('../img/produtos/enrolar/iconesPersonalizacao/texturaMetalFurado.webp');
    background-size: 48px;
}

.colorChooseMadeira01 {
    display: block;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    background: url('../img/produtos/enrolar/iconesPersonalizacao/texturaMadeira001.webp');
    background-size: 48px;
}

.colorChooseMadeira02 {
    display: block;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    background: url('../img/produtos/enrolar/iconesPersonalizacao/texturaMadeira002.webp');
    background-size: 48px;
}

.colorChooseMadeira03 {
    display: block;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    background: url('../img/produtos/enrolar/iconesPersonalizacao/texturaMadeira003.webp');
    background-size: 48px;
}

.colorChooseMadeira04 {
    display: block;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    background: url('../img/produtos/enrolar/iconesPersonalizacao/texturaMadeira004.webp');
    background-size: 48px;
}

.colorChooseMadeira05 {
    display: block;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    background: url('../img/produtos/enrolar/iconesPersonalizacao/texturaMadeira005.webp');
    background-size: 48px;
}

.colorChooseMadeira06 {
    display: block;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    background: url('../img/produtos/enrolar/iconesPersonalizacao/texturaMadeira006.webp');
    background-size: 48px;
}

.colorChooseAcoGalvanizao {
    display: block;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    background: url('../img/produtos/enrolar/iconesPersonalizacao/texturaAcoGalvanizado.webp');
    background-size: 48px;
}

.colorChooseACM {
    display: block;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    background: url('../img/produtos/enrolar/iconesPersonalizacao/texturaAcm.webp');
    background-size: 48px;
}

.colorChooseBranco {
    display: block;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    background-color: #FFFFFF;
}

.colorChooseAmarelo {
    display: block;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    background-color: #e8d315;
}

.colorChooseVermelho {
    display: block;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    background-color: #dc0303;
}

.colorChooseAzul {
    display: block;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    background-color: #0513d6;
}

.colorChooseVerde {
    display: block;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    background-color: #045c09;
}

.colorChooseCinza {
    display: block;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    background-color: #c5c5c5;
}

.colorChooseChumbo {
    display: block;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    background-color: #3d3d3d;
}

.colorChooseMarrom {
    display: block;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    background-color: #432c2c;
}

.colorChoosePreto {
    display: block;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    background-color: #11171F;
}

/* Estilos para seção alto fluxo */

.altoFluxoSection {
    width: 100%;
    background-color: rgba(var(--color-almostWhite), 1);
    padding: 10rem 0 0 0;
}

.altoFluxoSectionWrapper {
    width: 83.33%;
    margin: 0 auto;
    display: flex;
    max-width: 1600px;
    flex-direction: column;
    gap: 5rem;
}

.altoFluxoSectionTitle h2 {
    font-weight: 300;
    font-size: 3rem;
    padding-bottom: 5rem;
}

.altoFluxoSectionSpecs {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin: 0 auto;
    justify-content: space-between;
    background-color: rgba(var(--color-blueishGray), 0.85);
    border: 1px solid rgba(var(--color-lightBlue), 0.5);
    border-radius: 1rem;
    padding: 3rem;
}

.altoFluxoSectionSpec {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.altoFluxoSectionSpec i {
    font-size: 2rem;
    width: 2rem;
    height: auto;
    color: rgba(var(--color-lightBlue), 1);
    margin: 0;
    padding: 0;
}

.altoFluxoSectionSpec h4 {
    font-size: 1.5rem;
    color: rgba(var(--color-laranBlue), 1);
    line-height: 1;
    font-weight: 300;
    margin: 0;
    padding: 0;
}

.altoFluxoSectionSpec p {
    font-size: 1rem;
    color: rgba(var(--color-almostBlack), 0.65);
    line-height: 1.4;
    font-weight: 300;
}


.chamadaCondominiosWrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5rem;
}

.chamadaCondominiosContainer {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 2rem;
}

.altoFluxoSectionContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin: 2rem 0;
}

.chamadaCondominiosContainer img {
    border-radius: 1rem;
    width: 100%;
}

@media (min-width: 1200px) {
    .altoFluxoSectionSpecs {
        flex-direction: row;
    }

    .altoFluxoSectionContainer {
        flex-direction: row;
    }

    .chamadaCondominiosWrapper {
        flex-direction: row;
    }

    .chamadaCondominiosContainer {
        flex-direction: column;
    }
}


/* Estilos para páginas das cidades */

.cidadesHeader {
    width: 100%;
    height: auto;
    background-color: rgba(var(--color-almostWhite), 1);
}

.cidadesHeaderBannerCascavel {
    width: 100%;
    height: 50vw;
    /* A primeira declaração é o fallback de quem não entende image-set(). */
    background-image: url('../img/portoeseletronicosemcascavel.png');
    background-image: image-set(url('../img/portoeseletronicosemcascavel.avif') type('image/avif'),
            url('../img/portoeseletronicosemcascavel.webp') type('image/webp'),
            url('../img/portoeseletronicosemcascavel.png') type('image/png'));
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.cidadesHeaderBannerFoz {
    width: 100%;
    height: 50vw;
    background-image: url('../img/metalurgicaemfozdoiguacu.jpg');
    background-image: image-set(url('../img/metalurgicaemfozdoiguacu.avif') type('image/avif'),
            url('../img/metalurgicaemfozdoiguacu.webp') type('image/webp'),
            url('../img/metalurgicaemfozdoiguacu.jpg') type('image/jpeg'));
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.cidadesDescription {
    background-color: rgba(var(--color-darkBlue), 1);
    width: 100%;
    padding: 5rem 0;
}

.cidadesDescriptionWrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    width: 83.33%;
    margin: 0 auto;
}

.cidadesDescriptionText h3 {
    font-weight: 300;
    width: 75%;
    color: rgba(var(--color-almostWhite), 1);
    font-size: clamp(1.2rem, 1.6vw, 2rem);
    line-height: 1.2;
    padding: 0;
    margin-bottom: 3rem;
}

.cidadesDirectionsWrapper {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    font-size: clamp(0.8rem, 1vw, 1.4rem);
    color: rgba(var(--color-almostWhite), 1);
}

.cidadesDirectionsWrapper p {
    color: rgba(var(--color-almostWhite), 1);
    font-weight: 200;
}

.cidadesDirectionsWrapper a {
    color: rgba(var(--color-almostWhite), 1);
    text-decoration: underline;
}

.cidadesDirectionsWrapper a:hover {
    text-decoration: none;
}

/* Ajustes menu-contato (movidos para menus.css) */
/* ── css/MetalLaran_css-1440px.css ── */
@media (max-width: 1440px) {
    body {
        background-color: var(--color-misteryBlue);
    }

    .historiaContent iframe {
        width: 100%;
        height: 280px;
    }

    .historiaContent h2 {
        font-size: 3rem;
    }

    .historiaContent p {
        font-size: 1.4rem;
    }

    .pgsolucoes-cards-100-content h3,
    .chamadaCondominiosContainer h2 {
        font-size: 2rem;
    }

    .productPageHeaderCallLeft h2,
    .productPageSection2Title h2,
    .productPageBenefitsTitle h2,
    .altoFluxoSectionTitleWrapper h2 {
        font-size: 2.4rem;
        line-height: 1.4;
    }

    .pgsolucoes-cards-100-content p {
        font-size: 1rem;
    }

    .productPageBenefitsItemsDescription p {
        font-size: 1rem;
    }

    .seccionadasAcessoriosList {
        display: flex;
        gap: 2rem;
    }

    .seccionadasAcessoriosList img {
        width: 170px;
    }

    .vidrosAplicacoesIcons {
        grid-template-columns: repeat(3, 1fr);
    }


}
/* ── css/MetalLaran_css-1200px.css ── */
@media (max-width: 1200px) {
    body {
        background-color: var(--color-almostBlack);
    }

    nav {
        display: none;
    }

    /* Menu mobile movido para menus.css */

    /* Estilos do menu mobile movidos para menus.css */

    .no-scroll {
        overflow: hidden;
    }

    .displayFlex {
        display: block;
    }
}
/* ── css/MetalLaran_css-800px.css ── */
@media (max-width: 768px) {
    html {
        scroll-behavior: smooth;
    }

    body {
        background-color: var(--color-lightBlue);
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Display block para tornar visualização vertical */

    .googleReviewsTop,
    .indexPortfolioTop {
        display: block;
    }

    /* Display none para esconder elementos */

    nav,
    .sliderControls,
    #agendeVisita,
    .carouselControlPanel {
        display: none;
    }

    .displayFlex {
        display: block;
    }



    /* Estilos para seção de reviews do Google e Youtube */

    .reviewsCardsWrapper {
        padding-left: 2rem;
    }

    .reviewCard {
        width: 17rem;
    }

    .reviewStars {
        padding-top: 2rem;
    }

    .reviewsLink {
        display: none;
    }

    .reviewsLinkMobile {
        display: block;
        width: 83.33%;
        margin: 0 auto;
        padding: 0;
        text-align: center;
        padding-top: 3vh;
    }


    /* Estilos para página Portas de Enrolar */

    .productPageHeaderCTALinks {
        display: none;
    }

    .sliderCarouselWrapper {
        width: 83.33%;
        height: auto;
        border-radius: 10px;
        padding: 0;
    }

    .sliderCarouselControls {
        bottom: -20px;
        background-color: rgba(var(--color-lightGray), 1);
        margin-bottom: 5vh;
    }

    .sliderCarouselControls button {
        width: 20px;
        height: 20px;
        background-color: rgba(var(--color-almostWhite), 0.5);
    }

    .sliderCarouselControls button:hover {
        background-color: rgba(var(--color-almostWhite), 0.75);
    }

    .sliderCarouselControls i {
        font-size: 18px;
        margin-top: 3px;
        color: var(--color-almostWhite);
    }

    .sliderCarouselControlDots {
        width: 5px;
        height: 5px;
    }

    .productPageHeaderCallLeft h2,
    .productPageSection2Title h2,
    .seccionadasFabricacaoTitulo h2,
    .productPageBenefitsTitle h2,
    .productPageSpecsWrapper h3,
    .linhasAplicacaoTitle h2 {
        font-size: 28px;
        line-height: 1.2;
    }

    .productPageSpecsInfo p {
        font-size: 16px;
    }

    .productPageHeaderCallWrapper,
    .productPageBenefitsItem,
    .productPageBenefitsItemsDescriptionDetails,
    .productPageSpecsWrapper {
        display: block;
    }

    .productPageHeaderCallLeft,
    .productPageHeaderCallRight,
    .productPageBenefitsTitle,
    .productPageBenefitsItemsDescription,
    .productPageBenefitsItemsImg,
    .productPageBenefitsItemsImg img {
        width: 100%;
        height: auto;
    }

    .productPageHeaderCallRight {
        padding-top: 5vh;
    }

    .productPageBenefitsWrapper img {
        margin-bottom: 1rem;
    }

    .productPageBenefitsPersonalizationOptions span {
        width: 30px;
        height: 30px;
        border-radius: 10px;
    }

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

    .seccionadasFuncionamentoPreviewCard img {
        width: 200px;
    }

    .linhasAplicacaoWrapper {
        width: 90%;
    }

    .linhasAplicacaoContainer {
        width: 100%;
        display: block;
    }

    .paddingLeft5rem {
        padding: 0;
    }

    .linhasAplicacaoContainerContent {
        max-width: 100%;
    }

    .linhasAplicacaoContainerImage,
    .linhasAplicacaoContainerImage img {
        padding-bottom: 1rem;
        margin: 0;
        width: 100%;
        height: auto;
    }

    .btnWrapperbaixarCatalogo span {
        font-size: 0.8rem;
    }

    .seccionadasCaracteristicasList {
        grid-template-columns: repeat(2, 1fr);
    }

    .seccionadasPersonalizacaoTitulo h2 {
        font-size: 1.2rem;
        width: 100%;
    }

    .seccionadasAcessoriosList img {
        width: 25vw;
    }

    .seccionadasPainelCoresTexturas {
        display: block;
    }

    .seccionadasPersonalizacaoPaineisWrapper,
    .seccionadasTexturasList {
        margin-bottom: 3rem;
    }

    .seccionadasPersoanlizacaoWrapper {
        display: block;
    }

    .seccionadasPainelList,
    .personalizaTexturasWrapper,
    .seccionadasColorsList {
        width: 100%;
        padding: 0;
        justify-content: space-between;
        gap: 0.7rem;
    }

    .seccionadasPersonalizacaoPainelNormal,
    .seccionadasPersonalizacaoPainelGrade,
    .seccionadasPersonalizacaoPainelVisor,
    .seccionadasPersonalizacaoPainelVidro,
    .seccionadasPersonalizacaoTextura_01,
    .seccionadasPersonalizacaoTextura_02,
    .seccionadasPersonalizacaoTextura_03,
    .seccionadasPersonalizacaoTextura_04,
    .seccionadasPersonalizacaoColorBranco,
    .seccionadasPersonalizacaoColorMarrom,
    .seccionadasPersonalizacaoColorGrafite {
        width: 70px;
        height: 70px;
    }

    /* Estilos para página portas espirais */

    .seccionadasFuncionamentoSection h2,
    .espiraisDiferenciaisItem h4,
    .espiraisAplicacoes h2,
    .espiraisDesempenhoFuncionalidade h2,
    .espiraisPersonalizacao h2,
    .vidrosAplicacoes h2 {
        font-size: 24px;
        line-height: 1.2;
        width: 100%;
    }

    .espiraisSectionDescription p {
        width: 100%;
    }

    .espiraisDiferenciais {
        display: block;
        width: 75%;
    }

    .espiraisDiferenciaisItem {
        margin-bottom: 3rem;
    }

    .espiraisAplicacoesIcons,
    .vidrosAplicacoesIcons {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(2, 1fr);
        padding-left: 1rem;
    }

    .espiraisAplicacao p,
    .vidrosAplicacao p {
        font-size: 18px;
        line-height: 1.2;
    }

    .espiraisDesempenhoFuncionalidade h4 {
        font-size: 16px;
        line-height: 1.2;
    }

    .espiraisDesempenhoFuncionalidadeItems {
        grid-template-columns: repeat(2, 1fr);
    }

    .espiraisDesempenhoFuncionalidadeTitle {
        margin-top: 3rem;
    }

    .espiraisPersonalizacaoAcessoriosItems {
        gap: 3rem;
    }

    .espiraisPersonalizacaoAcessoriosItems img {
        width: 140px;
        height: auto;
    }

    .espiraisOpcoesPersonalizacaoCoresList li {
        width: 20vw;
    }

    .espiraisOpcoesPersonalizacaoPainelCores,
    .espiraisPersonalizacaoOpcoesTiposWrapper {
        display: block;
    }

    .espiraisOpcoesPersonalizacaoPainel img {
        width: 120px;
    }

    .espiraisTiposAplicacao {
        width: 100%;
        margin-top: 5rem;
    }

    .espiraisTiposAplicacao p {
        text-align: center;
    }

    .espiraisTiposAplicacao img {
        width: 110px;
    }

    .espiraisTiposAplicacaoItems {
        margin-top: 2rem;
    }

    /* Estilos para portas de vidro */

    .vidrosAplicacoesIcons {
        gap: 1rem;
        padding-left: 2rem;
    }

    .vidrosAssaAbloyWrapper {
        width: 90%;
        margin: 0 auto;
    }

    .vidrosAssaAbloyTitleDescription {
        display: block;
    }

    .vidrosAssaAbloyTitle {
        width: 100%;
    }

    .vidrosAssaAbloy h3 {
        font-size: 24px;
    }

    .vidrosAssaAbloy p {
        font-size: 16px;
    }

    .vidrosAssaAbloyLogoLink p {
        padding-top: 1rem;
        margin: 0;
        font-size: 14px;
        line-height: 1.2;
    }

    .vidrosAssaAbloyLogoLink img {
        width: 200px;
        padding-top: 2rem;
    }

}