/* =========================================================
   NORDESTE ENGENHARIA ELÉTRICA
   CSS COMPLETO, ORGANIZADO E SEM EMENDAS
========================================================= */


/* =========================================================
   RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    background: #071b35;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

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

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

button,
input,
textarea {
    font: inherit;
}


/* =========================================================
   CABEÇALHO
========================================================= */

.topo {
    width: 100%;
    padding: 8px 28px;
    background: #071b35;
    border-bottom: 3px solid #f7c600;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0;
}

.identidade {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-width: 0;
}

.logo-topo {
    width: 170px;
    height: 170px;
    object-fit: contain;
}

.nome-empresa {
    min-width: 0;
}

.nome-empresa h1 {
    color: #f7c600;
    font-size: 50px;
    line-height: 1.1;
    margin-top: 50px;
}

.nome-empresa p {
    color: #d9e4ef;
    font-size: 20px;
    margin-top: 20px;
}

.subtitulo-empresa {
    color: #f7c600;
    font-weight: bold;
}


/* =========================================================
   MENU PRINCIPAL
========================================================= */

.menu-principal {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-top: -5px;
    padding-left: 180px;
}

.menu-principal a {
    color: #f7c600;
    font-size: 20px;
    font-weight: bold;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.menu-principal a:hover {
    color: #ffffff;
    border-bottom-color: #f7c600;
}


/* =========================================================
   LAYOUT PRINCIPAL
========================================================= */

.pagina-principal {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    padding: 26px 20px 40px;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr) 270px;
    gap: 24px;
    align-items: start;
}

.coluna-servicos,
.coluna-informacoes,
.conteudo-central {
    min-width: 0;
}

.coluna-servicos,
.coluna-informacoes {
    position: static;
    max-height: none;
    overflow: visible;
}


/* =========================================================
   COLUNA DE SERVIÇOS
========================================================= */

.coluna-servicos {
    padding: 16px 0;
}

.coluna-servicos h2 {
    color: #f7c600;
    margin-bottom: 8px;
}

.introducao-menu {
    color: #d5dfeb;
    margin-bottom: 16px;
}

.item-servico {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(247, 198, 0, 0.35);
}

.item-servico summary {
    padding: 12px 4px;
    color: #f7c600;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
    position: relative;
}

.item-servico summary::-webkit-details-marker {
    display: none;
}

.item-servico summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    color: #f7c600;
}

.item-servico[open] summary::after {
    content: "−";
}

.item-servico summary:hover,
.item-servico[open] summary {
    color: #ffffff;
}

.item-servico p {
    padding: 0 4px 12px;
    color: #d7e2ec;
    font-size: 0.94rem;
}


/* =========================================================
   CONTEÚDO CENTRAL
========================================================= */

.conteudo-central {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.secao-apresentacao,
.secao-informacao,
.secao-videos,
.secao-galeria,
.secao-orcamento {
    width: 100%;
}

.caixa-texto {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.caixa-texto h2,
.secao-videos h2,
.secao-galeria h2,
.secao-orcamento h2 {
    color: #f7c600;
    margin-bottom: 12px;
}

.caixa-texto p {
    color: #e3ebf4;
    margin-bottom: 10px;
}


/* =========================================================
   CARROSSEL DE VÍDEOS
========================================================= */

.carrossel-videos,
.area-slides-videos {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background: #000000;
    border-radius: 10px;
}

.slide-video {
    display: none;
    width: 100%;
    margin: 0;
}

.slide-video.ativo {
    display: block;
}

.slide-video video {
    width: 100%;
    height: clamp(260px, 42vw, 460px);
    max-height: 460px;
    object-fit: contain;
    object-position: center;
    background: #000000;
    border: 0;
    border-radius: 10px;
}

.slide-video figcaption {
    padding: 10px 0 0;
    color: #ffffff;
    text-align: center;
    background: transparent;
    border: 0;
}


/* =========================================================
   CARROSSEL DE IMAGENS
========================================================= */

.carrossel-imagens,
.area-slides-imagens {
    width: 100%;
    position: relative;
    overflow: visible;
    background: transparent;
}

.slide-imagem {
    display: none;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.slide-imagem.ativo {
    display: block;
}

.slide-imagem img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
    background: transparent;
    border: 0;
    border-radius: 10px;
}

.slide-imagem figcaption {
    padding: 10px 0 0;
    color: #ffffff;
    text-align: center;
    background: transparent;
    border: 0;
}


/* =========================================================
   BOTÕES DOS CARROSSÉIS
========================================================= */

.botao-carrossel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 38px;
    height: 38px;
    border: 1px solid #f7c600;
    border-radius: 50%;
    background: rgba(7, 27, 53, 0.78);
    color: #f7c600;
    font-size: 1.35rem;
    font-weight: bold;
    cursor: pointer;
}

.botao-carrossel:hover {
    background: #f7c600;
    color: #071b35;
}

.botao-voltar-video,
.botao-voltar-imagem {
    left: 8px;
}

.botao-avancar-video,
.botao-avancar-imagem {
    right: 8px;
}


/* =========================================================
   INDICADORES DOS CARROSSÉIS
========================================================= */

.indicadores {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 12px;
}

.indicador-video,
.indicador-imagem {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #7d8a99;
    cursor: pointer;
}

.indicador-video.ativo,
.indicador-imagem.ativo {
    background: #f7c600;
}


/* =========================================================
   FORMULÁRIO
========================================================= */

.secao-orcamento {
    padding-top: 8px;
}

.formulario-orcamento {
    margin-top: 16px;
}

.formulario-orcamento fieldset {
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid rgba(247, 198, 0, 0.55);
    border-radius: 8px;
    background: transparent;
}

.formulario-orcamento legend {
    padding: 0 7px;
    color: #f7c600;
    font-weight: bold;
}

.grupo-campo {
    margin-bottom: 14px;
}

.grupo-campo:last-child {
    margin-bottom: 0;
}

.grupo-campo label {
    display: block;
    margin-bottom: 6px;
    color: #f7c600;
    font-weight: bold;
}

.grupo-campo input,
.grupo-campo textarea {
    width: 100%;
    padding: 11px 12px;
    background: #ffffff;
    color: #111111;
    border: 1px solid #6f8196;
    border-radius: 6px;
    outline: none;
}

.grupo-campo input:focus,
.grupo-campo textarea:focus {
    border-color: #f7c600;
}

.grupo-campo textarea {
    resize: vertical;
}

.grupo-campo small {
    display: block;
    margin-top: 5px;
    color: #d5dfeb;
}

.grade-opcoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.opcao-checkbox,
.opcao-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    color: #f7c600;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.opcao-checkbox input,
.opcao-radio input {
    width: 18px;
    height: 18px;
    accent-color: #f7c600;
}

.botao-enviar-whatsapp {
    width: 100%;
    padding: 14px 18px;
    border: 0;
    border-radius: 7px;
    background: #25d366;
    color: #062711;
    font-weight: bold;
    cursor: pointer;
}

.botao-enviar-whatsapp:hover {
    filter: brightness(1.05);
}


/* =========================================================
   COLUNA DIREITA
========================================================= */

.coluna-informacoes {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.caixa-lateral {
    padding: 0 0 16px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(247, 198, 0, 0.35);
    border-radius: 0;
    box-shadow: none;
}

.caixa-lateral h2 {
    color: #f7c600;
    margin-bottom: 10px;
}

.caixa-lateral p,
.caixa-lateral li {
    color: #e0e8f1;
}

.caixa-lateral ul {
    padding-left: 20px;
}

.destaque-seguranca {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(247, 198, 0, 0.35);
}

.link-lateral {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 150px;
    max-width: 210px;
    margin-top: 8px;
    padding: 8px 14px;
    border-radius: 6px;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.2;
    font-weight: bold;
}

.link-lateral.whatsapp {
    background: #25d366;
    color: #062711;
}

.link-lateral.instagram {
    background: linear-gradient(90deg, #833ab4, #fd1d1d, #fcb045);
    color: #ffffff;
}


/* =========================================================
   RODAPÉ
========================================================= */

.rodape {
    width: 100%;
    padding: 24px 20px;
    background: #05152b;
    border-top: 3px solid #f7c600;
    text-align: center;
}

.links-legais {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 24px;
    margin-bottom: 14px;
}

.links-legais a {
    color: #f7c600;
    font-weight: bold;
}

.links-legais a:hover {
    text-decoration: underline;
}

.direitos {
    color: #c1cedb;
}


/* =========================================================
   WHATSAPP FLUTUANTE
========================================================= */

.whatsapp-flutuante {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 1000;
    padding: 10px 14px;
    background: #25d366;
    color: #062711;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: bold;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}


/* =========================================================
   RESPONSIVIDADE — TELAS ATÉ 1100PX
========================================================= */

@media (max-width: 1100px) {
    .topo {
        text-align: center;
    }
    .menu-principal {
        justify-content: center;
        padding-left: 0;
        margin-top: 15px;
    }
    .pagina-principal {
        grid-template-columns: 240px minmax(0, 1fr);
    }
    .coluna-informacoes {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   RESPONSIVIDADE — TELAS ATÉ 800PX
========================================================= */

@media (max-width: 800px) {
    .pagina-principal {
        grid-template-columns: 1fr;
    }
    .conteudo-central {
        grid-row: 1;
    }
    .coluna-servicos {
        grid-row: 2;
    }
    .coluna-informacoes {
        grid-row: 3;
        grid-column: 1;
        display: flex;
    }
}


/* =========================================================
   RESPONSIVIDADE — CELULARES ATÉ 600PX
========================================================= */

@media (max-width: 600px) {
    .topo {
        padding: 16px 12px;
    }
    .identidade {
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }
    .logo-topo {
        width: 150px;
        height: 150px;
    }
    .nome-empresa h1 {
        margin-top: 0;
        font-size: 40px;
        line-height: 1.1;
    }
    .nome-empresa p {
        margin-top: 16px;
        font-size: 18px;
    }
    /* MENU DO CELULAR */
    .menu-principal {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 8px;
        margin-top: 18px;
        padding: 0;
    }
    .menu-principal a {
        display: block;
        width: 100%;
        min-width: 0;
        padding: 6px 2px;
        font-size: 16px;
        text-align: center;
        white-space: nowrap;
    }
    /* CONTEÚDO */
    .pagina-principal {
        padding: 18px 12px 30px;
        gap: 20px;
    }
    /* FORMULÁRIO */
    .grade-opcoes {
        grid-template-columns: 1fr;
    }
    /* VÍDEOS */
    .slide-video video {
        height: 230px;
        max-height: 230px;
    }
    /* IMAGENS */
    .slide-imagem {
        width: 100%;
        max-width: 100%;
    }
    .slide-imagem img {
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 10px;
    }
    /* BOTÕES DOS CARROSSÉIS */
    .botao-carrossel {
        width: 34px;
        height: 34px;
        font-size: 1.15rem;
    }
    /* LINKS LATERAIS */
    .link-lateral {
        min-width: 135px;
        max-width: 180px;
        padding: 7px 12px;
        font-size: 0.86rem;
    }
    /* RODAPÉ */
    .links-legais {
        flex-direction: column;
        gap: 8px;
    }
}


/* =========================================================
   CELULARES MUITO ESTREITOS — ATÉ 320PX
========================================================= */

@media (max-width: 320px) {
    .nome-empresa h1 {
        font-size: 34px;
    }
    .nome-empresa p {
        font-size: 16px;
    }
    .menu-principal {
        gap: 8px 4px;
    }
    .menu-principal a {
        padding: 5px 1px;
        font-size: 14px;
    }
}