/*
Theme Name: Caixa Smart
Theme URI: https://caixasmart.com.br
Author: Caixa Smart
Author URI: https://caixasmart.com.br
Description: Tema personalizado para a landing page da Caixa Smart - Solução inteligente para ar-condicionado em condomínios.
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: caixasmart
*/

        /* ========== Reset & Base ========== */
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --azul-escuro: #0a2ba3;
            --azul-medio: #0a2ba3;
            --ciano: #05c7f2;
            --verde-lima: #dbf229;
            --amarelo: #e6e600;
            --branco: #ffffff;
            --cinza-claro: #f5f5f5;
            --texto-claro: #d0d8e8;
        }

        html { scroll-behavior: smooth; scroll-padding-top: 72px; }

        html, body {
            overflow-x: hidden;
            max-width: 100%;
        }
        body {
            font-family: 'Poppins', sans-serif;
            color: var(--branco);
            background: var(--azul-escuro);
            line-height: 1.6;
        }

        img { max-width: 100%; height: auto; display: block; }
        a { text-decoration: none; color: inherit; transition: opacity 0.3s; }
        a:hover { opacity: 0.85; }

        .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

        .section-tag {
            font-size: 0.75rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--texto-claro);
            margin-bottom: 8px;
            font-weight: 400;
        }

        .section-title {
            font-size: clamp(1.8rem, 4vw, 2.8rem);
            font-weight: 700;
            line-height: 1.15;
            margin-bottom: 24px;
        }

        .section-title span { color: var(--ciano); }

        .accent-dots { display: inline-flex; gap: 4px; margin-left: 8px; }
        .accent-dots i {
            width: 6px; height: 6px;
            background: var(--verde-lima);
            border-radius: 50%;
            display: inline-block;
        }

        .btn-primary {
            display: inline-block;
            background: var(--verde-lima);
            color: var(--azul-escuro);
            font-weight: 700;
            font-size: 0.95rem;
            padding: 14px 32px;
            border-radius: 2px;
            border: none;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            text-align: center;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(200,230,0,0.35);
            opacity: 1;
        }

        /* ========== HEADER ========== */
        .site-header {
            position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
            background: rgb(16 39 123 / 95%);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .site-header .container {
            display: flex; align-items: center; justify-content: space-between; height: 72px;
        }
        .site-logo img { height: 36px; width: auto; }
        .main-nav { display: flex; align-items: center; gap: 18px; }
        .main-nav a {
            font-size: 0.65rem; font-weight: 500; text-transform: uppercase;
            letter-spacing: 0.3px; color: var(--texto-claro); transition: color 0.3s;
            white-space: nowrap;
        }
        .main-nav a:hover { color: var(--verde-lima); opacity: 1; }
        .main-nav .nav-cta {
            background: var(--branco); color: var(--azul-escuro);
            padding: 8px 20px; border-radius: 4px; font-weight: 700;
        }
        .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
        .menu-toggle span { display: block; width: 24px; height: 2px; background: var(--branco); margin: 5px 0; }

        /* ========== HERO ========== */
        .hero-section {
            position: relative; min-height: 100vh; display: flex; align-items: center;
            padding: 80px 0 40px;
            background: #001562;
            overflow: hidden;
        }
        .hero-section .container {
            position: relative; z-index: 1;
            display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center;
        }
        .hero-content h1 {
            font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700;
            line-height: 1.1; margin-bottom: 16px; color: #dbf229;
        }
        .hero-content p { font-size: 0.9rem; color: var(--texto-claro); margin-bottom: 10px; max-width: 480px; }
        .hero-content .btn-primary { margin-top: 16px; }

        .hero-stats { display: flex; gap: 28px; margin-top: 24px; }
        .hero-stats .stat h3 { font-size: 1.8rem; font-weight: 700; color: var(--branco); line-height: 1; }
        .hero-stats .stat p { font-size: 0.75rem; color: #05c7f2; margin: 0; }

        .hero-image { display: flex; justify-content: center; align-items: center; flex-direction: column; }
        .hero-image img {
            max-width: 460px;
            width: 100%;
            border-radius: 8px;
        }
        .hero-arrows { color: var(--branco); font-size: 1rem; letter-spacing: 4px; margin-top: 12px; text-align: center; font-weight: 300; }

        /* ========== WRAPPER HERO + VÍDEO (imagem de fundo contínua) ========== */
        .hero-video-wrapper {
            position: relative;
            background: #001562;
        }
        .hero-video-wrapper::before {
            content: ''; position: absolute; inset: 0;
            background: url('assets/img/bg-fachada.jpg') center/cover no-repeat;
            opacity: 0.18;
            z-index: 0;
        }
        .hero-video-wrapper .hero-section {
            position: relative;
            z-index: 1;
            background: transparent;
        }
        .hero-video-wrapper .video-section {
            position: relative;
            z-index: 1;
        }

        /* ========== VÍDEO ========== */
        .video-section {
            padding: 80px 0;
            background: rgba(5, 199, 242, 0.15);
        }
        .video-wrapper {
            position: relative; max-width: 1000px; margin: 0 auto;
            border-radius: 12px; overflow: hidden; cursor: pointer;
            aspect-ratio: 16/9;
        }
        .video-wrapper img { width: 100%; }
        .video-overlay {
            position: absolute; inset: 0;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            background: rgba(11,26,59,0.55); text-align: center;
        }
        .video-overlay h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; text-transform: uppercase; }
        .play-btn {
            width: 72px; height: 72px; background: rgba(255,255,255,0.2);
            border: 2px solid var(--branco); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            margin: 16px 0; transition: transform 0.3s;
        }
        .play-btn:hover { transform: scale(1.1); }
        .play-btn::after {
            content: ''; display: block; width: 0; height: 0;
            border-style: solid; border-width: 12px 0 12px 22px;
            border-color: transparent transparent transparent var(--branco); margin-left: 4px;
        }

        /* ========== CONHEÇA ========== */
        .conheca-section { padding: 100px 0; background: var(--branco); color: var(--azul-escuro); }
        .conheca-section .container {
            display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
        }
        .conheca-image { position: relative; }
        .conheca-image img { border-radius: 8px; }
        .conheca-image .selo-inpi {
            position: absolute; top: -50px; right: -20px;
            width: 160px; height: auto; z-index: 2;
            filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
        }
        .conheca-content .section-title { color: var(--ciano); font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -1px; position: relative; }
        .conheca-arrows {
            position: absolute; top: 0; right: 0;
            color: var(--ciano); font-weight: 300; font-size: 1.2rem; letter-spacing: 2px;
        }
        .conheca-image .img-wrapper { position: relative; }
        .conheca-image .img-wrapper img:first-child { border-radius: 8px; width: 100%; min-height: 500px; object-fit: cover; }
        .conheca-dots { color: var(--ciano); font-size: 0.75rem; letter-spacing: 3px; margin-top: 12px; font-weight: 300; }
        .conheca-content p { color: #444; font-size: 0.92rem; margin-bottom: 12px; }
        .beneficios-label { font-weight: 700; color: var(--azul-escuro); margin: 20px 0 12px; }
        .beneficios-list { list-style: none; }
        .beneficios-list li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; font-size: 0.88rem; color: #333; font-weight: 600; }
        .icon-check {
            flex-shrink: 0; width: 22px; height: 22px; background: var(--ciano);
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            color: var(--branco); font-size: 0.7rem; font-weight: 700;
        }
        .normas-text { margin-top: 16px; font-size: 0.8rem; color: #666; font-style: italic; }

        /* ========== MODELOS ========== */
        .modelos-section { padding: 100px 0; background: var(--branco); color: var(--azul-escuro); text-align: center; overflow: hidden; }
        .modelos-section .section-title {
            color: var(--azul-escuro); font-size: clamp(2.2rem, 5vw, 3.4rem);
            letter-spacing: -1px; display: inline-block; position: relative;
        }
        .modelos-section .section-arrows {
            position: absolute; top: 14px; left: -50px;
            color: var(--ciano); font-weight: 300; font-size: 1.2rem; letter-spacing: 2px;
        }

        /* Wrapper geral com C shapes amarelos - mesmo tamanho, pernas maiores */
        .modelos-outer-wrapper {
            position: relative; margin: 40px 0 0; padding: 0 28px;
        }
        /* C shape esquerdo */
        .modelos-outer-wrapper::before {
            content: ''; position: absolute; top: -30px; left: 0;
            width: 30px; height: calc(100% - 10px);
            border: 12px solid var(--verde-lima);
            border-right: none;
            border-radius: 0;
            z-index: 2;
        }
        /* C shape direito - mesmo tamanho */
        .modelos-outer-wrapper::after {
            content: ''; position: absolute; top: -30px; right: 0;
            width: 30px; height: calc(100% - 10px);
            border: 12px solid var(--verde-lima);
            border-left: none;
            border-radius: 0;
            z-index: 2;
        }

        /* Destaque Decor - área inteira */
        .modelo-destaque-area {
            position: relative;
            padding-top: 20px;
            margin-bottom: 24px;
            overflow: visible;
        }
        /* Badge SPLIT OU JANELA - alinhado à direita da imagem */
        .split-badge {
            display: flex; align-items: center; gap: 14px;
            justify-content: flex-start;
            margin-bottom: 8px; padding: 0 0 0 calc(420px + 28px + 44px - 28px);
            position: relative; z-index: 3;
        }
        .split-badge .shield-icon {
            width: 52px; height: 52px;
            border: 2.5px solid var(--azul-escuro);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
        }
        .split-badge span {
            font-size: 1.6rem; font-weight: 700; color: var(--azul-escuro);
            text-transform: uppercase; letter-spacing: 1px;
        }
        /* Barra cyan - full width da tela */
        .modelo-destaque-bar {
            background: var(--ciano);
            padding: 0;
            height: 160px;
            position: relative;
            width: 100vw;
            left: 50%;
            transform: translateX(-50%);
        }
        /* Conteúdo posicionado sobre a barra: imagem ESQUERDA, texto DIREITA */
        .modelo-destaque-content {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            max-width: 1200px;
            display: flex; align-items: center; gap: 28px;
            padding: 0 44px;
        }
        .modelo-destaque-img {
            position: relative; flex-shrink: 0; z-index: 1;
        }
        .modelo-destaque-img img {
            max-width: 420px;
            margin-top: -60px;
            transition: transform 0.4s ease;
            cursor: pointer;
        }
        .modelo-destaque-img:hover img {
            transform: translateY(-10px) scale(1.05);
        }
        .modelo-destaque-img .selo-modelo {
            position: absolute; top: 50%; left: -10px;
            transform: translateY(-50%);
            width: 150px; height: auto;
            filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
        }
        .modelo-destaque-info { text-align: left; flex: 1; }
        .modelo-destaque-info h3 {
            color: var(--azul-escuro); font-size: 1.5rem; font-weight: 700; margin-bottom: 4px;
        }
        .modelo-destaque-info p { color: var(--azul-escuro); font-size: 1rem; }
        .modelo-destaque-dots {
            text-align: right; margin-top: 16px;
            color: var(--ciano); font-size: 0.75rem; letter-spacing: 3px; font-weight: 300;
        }

        /* Grid modelos - barra cyan full width da tela */
        .modelos-grid-wrapper {
            position: relative;
        }
        .modelos-grid-bar {
            background: var(--ciano);
            position: absolute;
            top: 30px; bottom: 30px;
            width: 100vw;
            left: 50%;
            transform: translateX(-50%);
        }
        .modelos-grid {
            position: relative; z-index: 1;
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
            padding: 0 20px 40px;
        }
        .modelo-card {
            background: transparent; text-align: center;
            position: relative; transition: transform 0.3s;
        }
        .modelo-card:hover { transform: translateY(-4px); }
        .modelo-card .modelo-card-img {
            position: relative; display: block;
            width: 100%; aspect-ratio: 1 / 1;
        }
        .modelo-card .modelo-card-img img {
            width: 100%; height: 100%; object-fit: contain;
        }
        .modelo-card .modelo-card-img .selo-mini {
            position: absolute; bottom: 15px; left: 0;
            width: 110px; height: auto;
            filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
        }
        .modelo-card h4 {
            padding: 8px 0 0; font-size: 1.1rem; font-weight: 700;
            color: var(--azul-escuro);
        }

        /* ========== FÁBRICA ========== */
        .fabrica-section { padding: 100px 0; background: var(--verde-lima); color: var(--azul-escuro); }
        .fabrica-section .container {
            display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
        }
        .fabrica-gallery { position: relative; }
        .fabrica-gallery .main-photo { position: relative; }
        .fabrica-gallery .main-photo img { border-radius: 0; width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: left; }
        .thumb-row { display: flex; gap: 6px; margin-top: 32px; }
        .thumb-row img { width: calc(20% - 5px); border-radius: 0; cursor: pointer; transition: opacity 0.3s; aspect-ratio: 1/1; object-fit: cover; object-position: left; }
        .thumb-row img:hover { opacity: 0.8; }
        .fabrica-content { padding-left: 32px; }
        .fabrica-content .section-tag { color: #555; margin-bottom: 8px; }
        .fabrica-content .section-title {
            color: var(--azul-escuro); font-size: clamp(2.4rem, 5vw, 3.6rem);
            letter-spacing: -2px; line-height: 1.05; margin-bottom: 8px;
        }
        .fabrica-content .fabrica-dots {
            text-align: right; color: var(--branco); font-size: 0.8rem;
            letter-spacing: 4px; font-weight: 300; margin-bottom: 20px;
        }
        .fabrica-content p { font-size: 0.92rem; color: #333; margin-bottom: 12px; }
        .fabrica-content .fabrica-arrows {
            color: var(--branco); font-weight: 300; font-size: 1.1rem;
            letter-spacing: 4px; margin-top: 16px;
        }

        /* ========== ENGENHARIA ========== */
        .engenharia-section { padding: 80px 0; background: var(--branco); text-align: center; }
        .engenharia-section .section-tag { color: var(--azul-escuro); }
        .engenharia-section .eng-arrows {
            color: var(--ciano); font-weight: 300; font-size: 1.1rem;
            letter-spacing: 4px; margin-bottom: 4px; text-align: right;
        }
        .engenharia-section .section-title {
            color: var(--ciano); font-size: clamp(1.8rem, 4vw, 2.8rem);
            letter-spacing: -1px;
        }
        .engenharia-section > .container > p.eng-subtitle {
            color: #555; margin-bottom: 48px; font-size: 0.92rem;
        }
        .engenharia-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
        .engenharia-card { background: var(--branco); border-radius: 0; overflow: hidden; }
        .engenharia-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
        .engenharia-card p { padding: 16px 12px; font-size: 0.85rem; color: #555; }
        .engenharia-dots {
            color: var(--ciano); font-size: 0.8rem; letter-spacing: 4px;
            font-weight: 300; margin-top: 32px; text-align: center;
        }

        /* ========== INSTALAÇÃO ========== */
        .instalacao-section {
            position: relative; padding: 0; overflow: hidden;
            min-height: 700px; display: flex; align-items: stretch;
        }
        /* Imagem de fundo full */
        .instalacao-section::before {
            content: ''; position: absolute; inset: 0;
            background: url('assets/img/bg-predio.jpg') center/cover no-repeat;
            z-index: 0;
        }
        /* Overlay azulado */
        .instalacao-section::after {
            content: ''; position: absolute; inset: 0;
            background: rgba(0, 80, 120, 0.55);
            z-index: 0;
        }
        .instalacao-section .container {
            position: relative; z-index: 1;
            display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch;
            width: 100%;
        }
        /* Tarja azul por trás do texto */
        .instalacao-content {
            background: rgba(5, 199, 242, 0.88);
            padding: 80px 48px 80px 48px;
            display: flex; flex-direction: column; justify-content: center;
        }
        .instalacao-content .section-tag { color: var(--azul-escuro); margin-bottom: 8px; }
        .instalacao-content h2 {
            color: var(--branco); font-size: clamp(2.2rem, 5vw, 3.4rem);
            line-height: 1.05; margin-bottom: 28px; letter-spacing: -2px; font-weight: 800;
        }
        .instalacao-list { list-style: none; }
        .instalacao-list li {
            display: flex; align-items: flex-start; gap: 14px;
            margin-bottom: 18px; font-size: 0.9rem; color: var(--azul-escuro);
        }
        .instalacao-list li .icon-img {
            flex-shrink: 0; width: 42px; height: 42px;
        }
        .instalacao-list li .icon-img img { width: 100%; height: 100%; }
        .instalacao-arrows {
            color: var(--branco); font-weight: 300; font-size: 1rem;
            letter-spacing: 4px;
            position: absolute; right: -120px;
        }
        .instalacao-arrows-wrap {
            position: relative;
        }
        .instalacao-dots {
            color: var(--branco); font-size: 0.75rem; letter-spacing: 4px;
            font-weight: 300;
        }
        .instalacao-btn {
            display: inline-block; background: var(--azul-escuro); color: var(--branco);
            padding: 16px 36px; font-size: 1rem; font-weight: 700;
            border: none; border-radius: 0; cursor: pointer;
            text-align: center; transition: opacity 0.3s;
        }
        .instalacao-btn:hover { opacity: 0.9; }
        .instalacao-bottom {
            display: flex; align-items: center; gap: 24px; margin-top: 20px;
            margin-left: -48px; padding-left: 48px;
            position: relative;
        }
        /* Imagens empilhadas verticalmente */
        .instalacao-images {
            display: flex; flex-direction: column; gap: 8px;
            padding: 40px 24px;
            align-items: center; justify-content: center;
        }
        .instalacao-images img {
            width: 240px; border-radius: 4px; object-fit: cover;
            box-shadow: 4px 4px 16px rgba(0,0,0,0.3);
        }

        /* ========== FACHADAS ========== */
        .fachadas-section { padding: 100px 0; background: var(--azul-escuro); }
        .fachadas-section .container {
            display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
        }
        /* Galeria de fachadas */
        .fachadas-gallery { position: relative; }
        .fachadas-main-photo img { width: 100%; object-fit: cover; cursor: zoom-in; }
        .fachadas-thumb-row { display: flex; gap: 8px; margin-top: 12px; }
        .fachadas-thumb-row img {
            width: calc(33.333% - 6px); aspect-ratio: 16/9; object-fit: cover;
            cursor: pointer; opacity: 0.6; transition: opacity 0.3s;
        }
        .fachadas-thumb-row img:hover,
        .fachadas-thumb-row img.active { opacity: 1; }
        .fachadas-content .section-tag { color: var(--texto-claro); margin-bottom: 8px; }
        .fachadas-content .section-title {
            color: var(--verde-lima); font-size: clamp(2.2rem, 5vw, 3.4rem);
            letter-spacing: -2px; line-height: 1.05; margin-bottom: 16px;
        }
        .fachadas-content p { font-size: 0.92rem; color: var(--texto-claro); margin-bottom: 10px; }
        .fachadas-content .fachadas-last {
            display: flex; align-items: center; gap: 20px;
        }
        .fachadas-content .fachadas-arrows {
            color: var(--ciano); font-weight: 300; font-size: 1rem; letter-spacing: 4px;
        }

        /* ========== LIGHTBOX IMAGEM ========== */
        .img-lightbox {
            display: none; position: fixed; inset: 0; z-index: 9999;
            background: rgba(0,0,0,0.9); align-items: center; justify-content: center;
            cursor: zoom-out;
        }
        .img-lightbox.active { display: flex; }
        .img-lightbox img {
            max-width: 90vw; max-height: 90vh; object-fit: contain;
            box-shadow: 0 8px 40px rgba(0,0,0,0.5);
        }
        .img-lightbox .lightbox-close-img {
            position: absolute; top: 20px; right: 30px;
            color: white; font-size: 2.5rem; cursor: pointer;
            background: none; border: none; line-height: 1;
        }
        .fachadas-main-photo img { cursor: zoom-in; transition: opacity 0.3s; }
        .fachadas-main-photo img:hover { opacity: 0.85; }

        /* ========== DEPOIMENTOS ========== */
        .depoimentos-section {
            padding: 100px 0; position: relative; overflow: hidden;
        }
        .depoimentos-section::before {
            content: ''; position: absolute; inset: 0;
            background: url('assets/img/bg-aereo.jpg') center/cover no-repeat;
            opacity: 0.15; z-index: 0;
        }
        .depoimentos-section::after {
            content: ''; position: absolute; inset: 0;
            background: var(--branco); z-index: 0;
        }
        .depoimentos-section .container { position: relative; z-index: 1; }
        .depoimentos-section .section-tag { color: #999; }
        .depoimentos-section .section-title {
            color: var(--ciano); margin-bottom: 48px;
            font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -2px;
            display: inline-block;
        }
        .depoimentos-section .dep-dots {
            color: var(--ciano); font-size: 0.8rem; letter-spacing: 4px;
            font-weight: 300; display: inline-block; margin-left: 20px; vertical-align: middle;
        }
        .depoimentos-grid {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
        }
        .depoimento-item {
            display: flex; align-items: center; gap: 0;
        }
        /* Info box por trás da imagem */
        .dep-info-box {
            background: var(--branco); padding: 20px 50px 20px 16px;
            border: 2px solid var(--ciano);
            min-width: 160px; text-align: left;
            z-index: 0; margin-right: -40px;
            align-self: center;
        }
        .dep-info-box h4 {
            font-size: 0.95rem; font-weight: 800; color: var(--azul-escuro);
            text-transform: uppercase; line-height: 1.2; margin-bottom: 8px;
        }
        .dep-info-box p {
            font-size: 0.78rem; color: #555; line-height: 1.4;
        }
        /* Card imagem/video */
        .depoimento-card {
            position: relative; overflow: hidden;
            aspect-ratio: 9/16; max-height: 420px; cursor: pointer;
            flex-shrink: 0; flex: 1; z-index: 1;
        }
        .depoimento-card img { width: 100%; height: 100%; object-fit: cover; }
        .depoimento-card .dep-play-btn {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 60px; height: 60px; background: rgba(255,255,255,0.2);
            border: 2px solid var(--branco); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            transition: transform 0.3s;
        }
        .depoimento-card .dep-play-btn::after {
            content: ''; display: block; width: 0; height: 0;
            border-style: solid; border-width: 10px 0 10px 18px;
            border-color: transparent transparent transparent var(--branco);
            margin-left: 4px;
        }
        .depoimento-card:hover .dep-play-btn { transform: translate(-50%, -50%) scale(1.1); }
        /* Lightbox */
        .video-lightbox {
            display: none; position: fixed; inset: 0; z-index: 9999;
            background: rgba(0,0,0,0.85); align-items: center; justify-content: center;
        }
        .video-lightbox.active { display: flex; }
        .video-lightbox .lightbox-content {
            position: relative; width: 80%; max-width: 900px; aspect-ratio: 16/9;
        }
        .video-lightbox iframe {
            width: 100%; height: 100%; border: none; border-radius: 8px;
        }
        .video-lightbox .lightbox-close {
            position: absolute; top: -40px; right: 0;
            color: white; font-size: 2rem; cursor: pointer; background: none; border: none;
        }

        /* ========== SÍNDICOS ========== */
        .sindicos-section { padding: 80px 0; background: var(--verde-lima); color: var(--azul-escuro); }
        .sindicos-section .container {
            display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
        }
        .sindicos-left .section-tag { color: #555; margin-bottom: 8px; }
        .sindicos-left .section-title {
            color: var(--azul-escuro); font-size: clamp(2.2rem, 5vw, 3.4rem);
            letter-spacing: -2px; line-height: 1.05; margin-bottom: 16px;
        }
        .sindicos-left .sindicos-dots {
            color: var(--azul-escuro); font-size: 0.8rem; letter-spacing: 4px;
            font-weight: 300; margin-top: 12px; text-align: right;
        }
        .sindicos-right .sindicos-list { list-style: none; }
        .sindicos-right .sindicos-list li {
            display: flex; align-items: flex-start; gap: 14px;
            margin-bottom: 20px; font-size: 0.92rem; color: #333;
        }
        .sindicos-right .sindicos-list li .icon-img {
            flex-shrink: 0; width: 40px; height: 40px;
        }
        .sindicos-right .sindicos-list li .icon-img img { width: 100%; height: 100%; }
        .sindicos-right .sindicos-arrows {
            color: var(--ciano); font-weight: 300; font-size: 1rem;
            letter-spacing: 4px; text-align: right; margin-bottom: 16px;
        }
        .sindicos-btn {
            display: block; background: var(--azul-escuro); color: var(--branco);
            padding: 20px 36px; font-size: 1.1rem; font-weight: 700;
            border: none; border-radius: 0; cursor: pointer;
            text-align: center; transition: opacity 0.3s;
        }
        .sindicos-btn:hover { opacity: 0.9; }

        /* ========== NA PRÁTICA ========== */
        .pratica-section {
            padding: 100px 0; background: var(--azul-escuro);
            position: relative; overflow: hidden;
        }
        .pratica-section::before {
            content: ''; position: absolute; inset: 0;
            background: url('assets/img/fachada-depois-2.jpg') center/cover no-repeat;
            opacity: 0.08; z-index: 0;
        }
        .pratica-section .container { position: relative; z-index: 1; }
        .pratica-section .section-tag { color: var(--texto-claro); margin-bottom: 8px; }
        .pratica-section .section-title {
            color: var(--ciano); font-size: clamp(2.2rem, 5vw, 3.4rem);
            letter-spacing: -2px; line-height: 1.05; margin-bottom: 8px;
            display: inline-block;
        }
        .pratica-section .pratica-dots {
            color: var(--branco); font-size: 0.8rem; letter-spacing: 4px;
            font-weight: 300; display: inline-block; margin-left: 20px; vertical-align: top;
        }
        .pratica-layout {
            display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: start;
            margin-top: 24px;
        }
        .pratica-text p { font-size: 0.92rem; color: var(--texto-claro); margin-bottom: 16px; }
        .pratica-text .pratica-arrows {
            color: var(--branco); font-weight: 300; font-size: 1rem;
            letter-spacing: 4px; margin-top: 8px;
        }
        .social-links { display: flex; gap: 24px; margin-top: 28px; }
        .social-links a {
            width: 52px; height: 52px; border: 2px solid var(--branco);
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            font-size: 1.2rem; color: var(--branco); transition: all 0.3s;
        }
        .social-links a:hover { background: var(--verde-lima); border-color: var(--verde-lima); color: var(--azul-escuro); opacity: 1; }
        .pratica-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
        .pratica-video-card {
            position: relative; cursor: pointer; overflow: hidden;
        }
        .pratica-video-card img { width: 100%; aspect-ratio: 9/16; object-fit: cover; }
        .pratica-video-card .dep-play-btn {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 60px; height: 60px; background: rgba(255,255,255,0.2);
            border: 2px solid var(--branco); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            transition: transform 0.3s;
        }
        .pratica-video-card .dep-play-btn::after {
            content: ''; display: block; width: 0; height: 0;
            border-style: solid; border-width: 10px 0 10px 18px;
            border-color: transparent transparent transparent var(--branco);
            margin-left: 4px;
        }
        .pratica-video-card:hover .dep-play-btn { transform: translate(-50%, -50%) scale(1.1); }

        /* ========== HISTÓRIA ========== */
        .historia-section {
            padding: 100px 0; background: var(--branco); position: relative; overflow: hidden;
        }
        .historia-section::before {
            content: ''; position: absolute; inset: 0;
            background: url('assets/img/fachada-depois-2.jpg') center/cover no-repeat;
            opacity: 0.08; z-index: 0;
        }
        .historia-section .container { position: relative; z-index: 1; }
        .historia-header {
            display: flex; align-items: flex-start; gap: 24px; margin-bottom: 48px;
            flex-wrap: wrap;
        }
        .historia-header .section-arrows {
            color: var(--ciano); font-weight: 300; font-size: 1.1rem;
            letter-spacing: 4px; margin-top: 16px;
        }
        .historia-header .section-title {
            color: var(--azul-escuro); font-size: clamp(2.2rem, 5vw, 3.4rem);
            letter-spacing: -2px; line-height: 1.05;
        }
        .historia-header .historia-subtitle {
            color: #555; font-size: 0.92rem; margin-top: 12px; max-width: 300px;
        }
        .historia-header .historia-dots {
            color: var(--ciano); font-size: 0.8rem; letter-spacing: 4px;
            font-weight: 300; margin-top: 12px;
        }
        .historia-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; text-align: center; }
        .historia-card { background: transparent; }
        .historia-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: left; }
        .historia-card p { padding: 16px 8px; font-size: 0.88rem; color: #555; }

        /* ========== NA MÍDIA ========== */
        .namidia-section {
            padding: 80px 0; background: var(--azul-escuro); position: relative; overflow: hidden;
        }
        .namidia-section::before {
            content: ''; position: absolute; inset: 0;
            background: url('assets/img/fachada-depois-2.jpg') center/cover no-repeat;
            opacity: 0.06; z-index: 0;
        }
        .namidia-section .container {
            position: relative; z-index: 1;
            display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
        }
        .namidia-content .section-tag { color: var(--texto-claro); margin-bottom: 8px; }
        .namidia-content .section-title {
            color: var(--branco); font-size: clamp(2rem, 4vw, 3rem);
            letter-spacing: -2px; line-height: 1.05; margin-bottom: 16px;
        }
        .namidia-content .section-title span { color: var(--verde-lima); }
        .namidia-content p { color: var(--texto-claro); font-size: 0.92rem; line-height: 1.7; margin-bottom: 12px; }
        .namidia-content .namidia-fonte {
            color: var(--ciano); font-size: 0.8rem; font-weight: 600;
            letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px;
        }
        .namidia-content .namidia-dots {
            color: var(--ciano); font-size: 0.8rem; letter-spacing: 4px;
            font-weight: 300; margin-bottom: 24px;
        }
        .namidia-btn {
            display: inline-block; padding: 14px 32px;
            background: var(--verde-lima); color: var(--azul-escuro);
            font-weight: 700; font-size: 0.9rem; text-decoration: none;
            transition: background 0.3s, transform 0.3s;
        }
        .namidia-btn:hover { background: var(--ciano); color: var(--branco); transform: translateY(-2px); }
        .namidia-image { text-align: center; }
        .namidia-image img {
            width: 100%; max-width: 500px; object-fit: cover;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        }
        .namidia-image .namidia-caption {
            color: var(--texto-claro); font-size: 0.78rem; margin-top: 12px; opacity: 0.7;
        }

        /* ========== CONTATO ========== */
        .contato-section { padding: 100px 0; background: var(--verde-lima); color: var(--azul-escuro); }
        .contato-section .section-tag { color: #555; }
        .contato-section .contato-title {
            color: var(--azul-escuro); font-size: clamp(2.2rem, 5vw, 3.4rem);
            letter-spacing: -2px; line-height: 1.05; margin-bottom: 8px;
        }
        .contato-section .contato-subtitle { color: #333; font-size: 0.92rem; margin-bottom: 0; }
        .contato-section .contato-arrows {
            color: var(--ciano); font-weight: 300; font-size: 1rem;
            letter-spacing: 4px; position: absolute; top: 0; right: 0;
        }
        .contato-section .container {
            display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; row-gap: 16px; position: relative;
        }
        .form-group { margin-bottom: 16px; }
        .form-group label { display: block; font-size: 0.82rem; color: var(--azul-escuro); margin-bottom: 6px; font-weight: 500; }
        .form-group input, .form-group textarea {
            width: 100%; padding: 12px 16px; border: none; border-radius: 0;
            font-family: 'Poppins', sans-serif; font-size: 0.9rem; transition: border-color 0.3s;
            background: var(--branco);
        }
        .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--ciano); }
        .form-group textarea { resize: vertical; min-height: 120px; }
        .contato-form-bottom {
            display: flex; align-items: center; gap: 24px; margin-top: 16px;
        }
        .contato-dots {
            color: var(--azul-escuro); font-size: 0.75rem; letter-spacing: 4px; font-weight: 300;
        }
        .contato-btn {
            display: inline-block; background: var(--azul-escuro); color: var(--branco);
            padding: 18px 40px; font-size: 1rem; font-weight: 700;
            border: none; border-radius: 0; cursor: pointer; transition: opacity 0.3s;
        }
        .contato-btn:hover { opacity: 0.9; }

        .contato-info { padding-top: 40px; }
        .contato-info h3 { font-size: 0.9rem; margin-bottom: 4px; color: #555; font-weight: 500; }
        .whatsapp-number { font-size: 1.8rem; font-weight: 700; color: var(--azul-escuro); margin-bottom: 20px; display: block; }
        .email-link { font-size: 1.5rem; font-weight: 700; color: var(--azul-escuro); margin-bottom: 28px; display: block; }
        .escritorios h4 { font-weight: 700; color: var(--azul-escuro); margin-top: 16px; font-size: 1.4rem; }
        .escritorios p { color: var(--azul-escuro); font-size: 1.15rem; font-weight: 700; }

        /* ========== FOOTER ========== */
        .site-footer { background: var(--azul-medio); padding: 60px 0 24px; border-top: 1px solid rgba(255,255,255,0.06); }
        .footer-brand img { max-width: 200px; margin-bottom: 16px; }
        .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
        .footer-brand p { font-size: 0.82rem; color: var(--texto-claro); }
        .footer-nav h4, .footer-contact h4 {
            font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px;
            color: var(--branco); margin-bottom: 16px;
        }
        .footer-nav ul { list-style: none; }
        .footer-nav ul li { margin-bottom: 8px; }
        .footer-nav ul li a { font-size: 0.82rem; color: var(--texto-claro); transition: color 0.3s; }
        .footer-nav ul li a:hover { color: var(--verde-lima); opacity: 1; }
        .footer-contact p { font-size: 0.82rem; color: var(--texto-claro); margin-bottom: 6px; }
        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px;
            display: flex; justify-content: space-between; align-items: center;
            font-size: 0.75rem; color: var(--texto-claro);
        }

        /* ========== WhatsApp Float ========== */
        .whatsapp-float {
            position: fixed; bottom: 28px; right: 28px; width: 60px; height: 60px;
            background: #25D366; border-radius: 50%; display: flex; align-items: center;
            justify-content: center; z-index: 999;
            box-shadow: 0 4px 16px rgba(37,211,102,0.4); transition: transform 0.3s;
        }
        .whatsapp-float:hover { transform: scale(1.1); opacity: 1; }
        .whatsapp-float svg { width: 30px; height: 30px; fill: var(--branco); }

        /* ========== FIX OVERFLOW 100vw (scrollbar) ========== */
        .modelo-destaque-bar,
        .modelos-grid-bar {
            width: 100%;
            left: 0;
            transform: none;
            margin-left: calc(-28px);
            width: calc(100% + 56px);
        }
        @supports (width: 100vw) {
            .modelos-section { overflow: hidden; }
            .modelo-destaque-bar,
            .modelos-grid-bar {
                width: 100vw;
                left: 50%;
                transform: translateX(-50%);
                margin-left: 0;
            }
        }

        /* ========== RESPONSIVO ========== */
        @media (max-width: 1440px) {
            /* Hero */
            .hero-image img { max-width: 400px; }
            .hero-section { padding: 80px 0 30px; }
            /* Conheça */
            .conheca-image .selo-inpi { width: 130px; }
            .conheca-image .img-wrapper img:first-child { min-height: 400px; }
            /* Modelos */
            .modelo-destaque-img img { max-width: 360px; }
            .split-badge { padding-left: calc(360px + 28px + 44px - 28px); }
            .modelo-card .modelo-card-img .selo-mini { width: 90px; }
            /* Fábrica */
            .fabrica-gallery .main-photo img { max-height: 350px; }
            .thumb-row img { max-height: 80px; }
            /* Engenharia */
            .engenharia-card img { max-height: 220px; }
            /* Instalação */
            .instalacao-images img { width: 200px; }
            /* Fachadas */
            .fachadas-antes-depois img { max-height: 400px; }
            /* Depoimentos */
            .depoimento-card { max-height: 360px; }
            /* Na Prática */
            .pratica-video-card img { max-height: 360px; }
            /* História */
            .historia-card img { max-height: 250px; }
            .namidia-image img { max-width: 400px; }
            /* Geral - seções com menos padding */
            .modelos-section, .conheca-section, .fachadas-section,
            .depoimentos-section, .pratica-section, .historia-section,
            .contato-section { padding: 80px 0; }
            .fabrica-section, .sindicos-section { padding: 60px 0; }
            .engenharia-section { padding: 60px 0; }
        }
        @media (max-width: 1024px) {
            .hero-section .container,
            .conheca-section .container,
            .fabrica-section .container,
            .instalacao-section .container,
            .fachadas-section .container,
            .sindicos-section .container,
            .contato-section .container { grid-template-columns: 1fr; gap: 40px; }
            .modelos-grid, .engenharia-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-top { grid-template-columns: 1fr 1fr; }

            /* Pratica - imagens abaixo do texto */
            .pratica-layout { grid-template-columns: 1fr; gap: 32px; }
            .pratica-videos { grid-template-columns: repeat(3, 1fr); }

            /* Modelo destaque */
            .modelo-destaque-img img { max-width: 300px; }
            .split-badge { padding-left: calc(300px + 28px + 44px - 28px); }

            /* Selo e hero menores em telas médias */
            .conheca-image .selo-inpi { width: 120px; }
            .hero-image img { max-width: 380px; }
            .modelo-card .modelo-card-img .selo-mini { width: 80px; }
            .modelo-destaque-img .selo-modelo { width: 110px; }

            /* Instalação */
            .instalacao-section { min-height: auto; }
            .instalacao-images { padding: 40px 16px; }
        }

        @media (max-width: 768px) {
            /* Menu mobile */
            .main-nav {
                display: none; position: fixed; top: 72px; left: 0; width: 100%;
                background: var(--azul-escuro); flex-direction: column; padding: 24px;
                gap: 16px; border-top: 1px solid rgba(255,255,255,0.1);
                z-index: 1000;
            }
            .main-nav.active { display: flex; }
            .menu-toggle { display: block; }

            /* Hero */
            .hero-section { padding: 80px 0 40px; min-height: auto; }
            .hero-section .container { grid-template-columns: 1fr; text-align: center; }
            .hero-content p { max-width: 100%; }
            .hero-image img { max-width: 280px; margin: 0 auto; }
            .hero-stats { flex-wrap: wrap; gap: 20px; justify-content: center; }

            /* Conheça */
            .conheca-image .img-wrapper img:first-child { min-height: auto; }

            /* Modelos */
            .modelos-outer-wrapper { padding: 0 16px; }
            .modelos-outer-wrapper::before,
            .modelos-outer-wrapper::after { display: none; }
            .split-badge { padding-left: 0; justify-content: center; }
            .modelo-destaque-bar { height: auto; min-height: 120px; }
            .modelo-destaque-content {
                position: relative; top: auto; left: auto; transform: none;
                flex-direction: column; text-align: center; padding: 20px 16px;
            }
            .modelo-destaque-img img { max-width: 220px; margin: 0 auto; }
            .modelos-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 8px 24px; }
            .modelo-card h4 { font-size: 0.9rem; }
            .modelo-card .modelo-card-img .selo-mini { width: 60px; }
            .conheca-image .selo-inpi { width: 90px; top: -30px; right: -10px; }

            /* Fábrica */
            .fabrica-section .container { gap: 32px; }
            .fabrica-gallery .main-photo::after { display: none; }
            .fabrica-content { padding-left: 0; }

            /* Engenharia */
            .engenharia-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

            /* Instalação */
            .instalacao-section { min-height: auto; }
            .instalacao-section .container { grid-template-columns: 1fr; }
            .instalacao-content { padding: 48px 24px; }
            .instalacao-arrows { position: static; margin-top: 4px; }
            .instalacao-images {
                flex-direction: row; flex-wrap: wrap; justify-content: center;
                padding: 24px 16px; gap: 12px;
            }
            .instalacao-images img { width: 140px; }

            /* Fachadas */
            .fachadas-section .container { grid-template-columns: 1fr; }

            /* Depoimentos */
            .depoimentos-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
            .depoimento-item { flex-direction: column; }
            .dep-info-box {
                margin-right: 0; margin-bottom: -20px;
                padding: 16px 16px 32px; text-align: center;
                z-index: 0;
            }
            .depoimento-card { z-index: 1; width: 100%; }

            /* Na Prática */
            .pratica-layout { grid-template-columns: 1fr; }
            .pratica-videos { grid-template-columns: repeat(3, 1fr); gap: 8px; }
            .pratica-video-card .dep-play-btn { width: 40px; height: 40px; }
            .pratica-video-card .dep-play-btn::after { border-width: 7px 0 7px 12px; }

            /* História */
            .historia-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
            .historia-header { flex-direction: column; }

            /* Na Mídia */
            .namidia-section .container { grid-template-columns: 1fr; gap: 32px; }
            .namidia-image { order: -1; }
            .namidia-image img { max-width: 100%; }

            /* Contato - formulário */
            .contato-section .container { grid-template-columns: 1fr; gap: 32px; }
            .contato-section .container > div[style*="grid-column"] { grid-column: auto; }
            .contato-form-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
            .contato-btn { width: 100%; }
            .form-group input, .form-group textarea { font-size: 16px; }
            .contato-info { overflow-wrap: break-word; word-break: break-word; }
            .whatsapp-number { font-size: 1.5rem; }
            .email-link { font-size: 1.2rem; }
            .escritorios h4 { font-size: 1.2rem; }
            .escritorios p { font-size: 1rem; }

            /* Footer */
            .footer-top { grid-template-columns: 1fr; }
            .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
        }

        @media (max-width: 480px) {
            .container { padding: 0 16px; }
            .hero-content h1 { font-size: 1.6rem; }
            .hero-stats .stat h3 { font-size: 1.4rem; }
            .section-title { font-size: clamp(1.5rem, 6vw, 2.4rem); }
            .whatsapp-number { font-size: 1.3rem; }
            .email-link { font-size: 1rem; }
            .escritorios h4 { font-size: 1.1rem; }
            .escritorios p { font-size: 0.9rem; }
        }