/* ============================================================
   RESPONSIVE.CSS
   Ficheiro exclusivo para responsividade + menu hambúrguer.
   Não altera nenhuma regra do style-principal.css — apenas
   sobrepõe/ajusta valores dentro de media queries.
   O JS (js/js.js) já alterna as classes "ativo" e "menu-aberto"
   no #menu quando o botão #menu-mobile é clicado — por isso
   este ficheiro estiliza o menu aberto usando ambas as classes.
   ============================================================ */


/* ============================================================
   1200px e abaixo — ecrãs grandes / laptops pequenos
   ============================================================ */
@media (max-width: 1200px) {

    .barra-topo,
    header {
        padding-left: 30px;
        padding-right: 30px;
    }

    .secao-destaques {
        padding: 70px 30px;
    }

    .grelha-produtos {
        grid-template-columns: repeat(3, 1fr);
    }

    .grelha-confianca {
        grid-template-columns: repeat(2, 1fr);
    }

    .selo-confianca {
        border-radius: 6px;
    }

    .secao-servicos {
        padding: 60px 30px 25px;
    }

    .topo-servicos {
        gap: 2.5rem;
    }

    .coluna-esquerda-servicos {
        width: auto;
        flex: 1;
    }

    .grelha-cartoes-servico {
        grid-template-columns: repeat(2, 1fr);
    }

    .empresa {
        padding: 90px 5%;
    }
}


/* ============================================================
   992px e abaixo — tablets / ativação do menu hambúrguer
   ============================================================ */
@media (max-width: 992px) {

    /* --- Cabeçalho / navegação --- */
    header {
        padding: 0 20px;
        position: relative;
    }

    .barra-topo {
        padding: 8px 20px;
    }

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

    nav#menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: var(--cor-primaria);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 12px 24px rgba(10, 22, 38, 0.25);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.3s ease, opacity 0.2s ease;
        z-index: 999;
    }

    nav#menu a {
        width: 100%;
        padding: 16px 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    nav#menu a::after {
        display: none;
    }

    /* O JS alterna as classes "ativo" e "menu-aberto" ao mesmo tempo */
    nav#menu.ativo,
    nav#menu.menu-aberto {
        max-height: 600px;
        opacity: 1;
        visibility: visible;
    }

    .botao-contacto {
        padding: 9px 14px;
        font-size: 14px;
    }

    /* --- Empresa --- */
    .grid-empresa {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .div-img img {
        height: 350px;
    }

    /* --- Propósito / Missão e Valores --- */
    .grelha-depoimentos {
        grid-template-columns: 1fr;
    }

    /* --- Segmentos de mercado --- */
    .topo-servicos {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .coluna-direita-servicos {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    /* --- Rodapé --- */
    .rodape-topo {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}


/* ============================================================
   768px e abaixo — tablets pequenos / telemóveis grandes
   ============================================================ */
@media (max-width: 768px) {

    /* --- Barra de contactos --- */
    .barra-topo {
        height: auto;
        flex-direction: column;
        gap: 6px;
        padding: 10px 16px;
    }

    .contacto-esquerda,
    .contacto-direita {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 16px;
    }

    .item-contacto {
        font-size: 12.5px;
    }

    header {
        padding: 0 16px;
        height: 64px;
    }

    .logotipo img {
        width: 42px;
        height: 34px;
    }

    /* --- Hero --- */
    .secao-inicio {
        height: auto;
        min-height: 90vh;
        padding: 40px 20px;
    }

    .texto-inicio {
        margin-bottom: 40px;
    }

    .texto-inicio h1,
    .texto-inicio h2 {
        font-size: 32px;
    }

    .texto-inicio p {
        font-size: 14px;
    }

    .botoes-inicio {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }

    .botao-servico,
    .botao-contorno-claro {
        justify-content: center;
        text-align: center;
    }

    .seta-hero {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .seta-esquerda { left: 10px; }
    .seta-direita { right: 10px; }

    .controlos-hero {
        bottom: 20px;
    }

    /* --- Propósito / Missão e Valores --- */
    .secao-depoimentos {
        padding: 60px 5%;
    }

    .titulo-secao {
        font-size: 24px;
    }

    .cartao-depoimento {
        padding: 24px;
    }

    #grid-x {
        grid-template-columns: 1fr;
    }

    /* --- Empresa --- */
    .tex-empre h1 {
        font-size: 34px;
    }

    .grid2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
        padding: 30px 20px;
    }

    /* --- Produtos --- */
    .secao-destaques {
        padding: 50px 20px;
    }

    .grelha-produtos {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .imagem-produto {
        height: 220px;
    }

    /* --- Marcas parceiras --- */
    .brands {
        padding: 60px 5%;
    }

    .brand-card {
        min-width: 140px;
        height: 100px;
        padding: 16px;
    }

    /* --- Confiança / Serviços resumo --- */
    .grelha-confianca {
        grid-template-columns: 1fr;
    }

    /* --- Segmentos de mercado --- */
    .secao-servicos {
        padding: 50px 20px 20px;
    }

    .titulo-grande {
        font-size: 26px;
    }

    .grelha-cartoes-servico {
        grid-template-columns: 1fr;
    }

    /* --- Rodapé --- */
    .rodape-topo {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 32px;
    }

    .rodape-marca p {
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .redes-sociais {
        justify-content: center;
    }

    .coluna-rodape ul {
        align-items: center;
    }

    .item-contacto-rodape {
        justify-content: center;
    }

    .in-agen {
        max-width: 320px;
        margin: 20px auto 0;
    }
}


/* ============================================================
   480px e abaixo — telemóveis
   ============================================================ */
@media (max-width: 480px) {

    .contacto-direita .item-contacto:last-child,
    .contacto-esquerda .item-contacto:last-child {
        display: none;
    }

    .botao-contacto span,
    .botao-contacto {
        font-size: 13px;
        padding: 8px 12px;
    }

    .texto-inicio h1,
    .texto-inicio h2 {
        font-size: 26px;
    }

    .etiqueta-hero {
        font-size: 12px;
    }

    .titulo-secao {
        font-size: 21px;
    }

    .titulo-depoimento {
        font-size: 22px;
    }

    .empresa {
        padding: 50px 6%;
    }

    .tex-empre h1 {
        font-size: 28px;
    }

    .div-img img {
        height: 240px;
    }

    .grid2 {
        grid-template-columns: 1fr 1fr;
        padding: 24px 14px;
    }

    .grid2 h1 {
        font-size: 28px;
    }

    .grelha-produtos {
        grid-template-columns: 1fr;
    }

    .nome-produto {
        font-size: 20px;
    }

    .brand-card {
        min-width: 120px;
        height: 90px;
    }

    .titulo-grande {
        font-size: 22px;
    }

    .cartao-servico {
        height: auto;
    }

    .imagem-cartao-servico img {
        height: 130px;
    }

    .rodape-topo {
        gap: 26px;
    }

    .campo-email {
        font-size: 13px;
    }
}

/* ============================================================
   RESPONSIVE.CSS
   Ficheiro exclusivo para responsividade + menu hambúrguer.
   Não altera nenhuma regra do style-principal.css — apenas
   sobrepõe/ajusta valores dentro de media queries.
   O JS (js/js.js) já alterna as classes "ativo" e "menu-aberto"
   no #menu quando o botão #menu-mobile é clicado — por isso
   este ficheiro estiliza o menu aberto usando ambas as classes.
   ============================================================ */


/* ============================================================
   1200px e abaixo — ecrãs grandes / laptops pequenos
   ============================================================ */
@media (max-width: 1200px) {

    .barra-topo,
    header {
        padding-left: 30px;
        padding-right: 30px;
    }

    .secao-destaques {
        padding: 70px 30px;
    }

    .grelha-produtos {
        grid-template-columns: repeat(3, 1fr);
    }

    .grelha-confianca {
        grid-template-columns: repeat(2, 1fr);
    }

    .selo-confianca {
        border-radius: 6px;
    }

    .secao-servicos {
        padding: 60px 30px 25px;
    }

    .topo-servicos {
        gap: 2.5rem;
    }

    .coluna-esquerda-servicos {
        width: auto;
        flex: 1;
    }

    .grelha-cartoes-servico {
        grid-template-columns: repeat(2, 1fr);
    }

    .empresa {
        padding: 90px 5%;
    }
}


/* ============================================================
   992px e abaixo — tablets / ativação do menu hambúrguer
   ============================================================ */
@media (max-width: 992px) {

    /* --- Cabeçalho / navegação --- */
    header {
        padding: 0 20px;
        position: relative;
    }

    .barra-topo {
        padding: 8px 20px;
    }

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

    nav#menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: var(--cor-primaria);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 12px 24px rgba(10, 22, 38, 0.25);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.3s ease, opacity 0.2s ease;
        z-index: 999;
    }

    nav#menu a {
        width: 100%;
        padding: 16px 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    nav#menu a::after {
        display: none;
    }

    /* O JS alterna as classes "ativo" e "menu-aberto" ao mesmo tempo */
    nav#menu.ativo,
    nav#menu.menu-aberto {
        max-height: 600px;
        opacity: 1;
        visibility: visible;
    }

    .botao-contacto {
        padding: 9px 14px;
        font-size: 14px;
    }

    /* --- Empresa --- */
    .grid-empresa {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .div-img img {
        height: 350px;
    }

    /* --- Propósito / Missão e Valores --- */
    .grelha-depoimentos {
        grid-template-columns: 1fr;
    }

    /* --- Segmentos de mercado --- */
    .topo-servicos {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .coluna-direita-servicos {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    /* --- Rodapé --- */
    .rodape-topo {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }

    /* --- Confiança / Serviços resumo: vira carrossel (só deslizar) --- */
    .grelha-confianca {
        display: flex;
        grid-template-columns: unset;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        gap: 16px;
        padding-bottom: 10px;
        margin: 0 -20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .grelha-confianca::-webkit-scrollbar {
        height: 6px;
    }

    .grelha-confianca::-webkit-scrollbar-thumb {
        background: var(--cor-borda);
        border-radius: 10px;
    }

    .selo-confianca {
        flex: 0 0 80%;
        scroll-snap-align: center;
    }
}


/* ============================================================
   768px e abaixo — tablets pequenos / telemóveis grandes
   ============================================================ */
@media (max-width: 768px) {

    /* --- Barra de contactos --- */
    .barra-topo {
        height: auto;
        flex-direction: column;
        gap: 6px;
        padding: 10px 16px;
    }

    .contacto-esquerda,
    .contacto-direita {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 16px;
    }

    .item-contacto {
        font-size: 12.5px;
    }

    header {
        padding: 0 16px;
        height: 64px;
    }

    .logotipo img {
        width: 42px;
        height: 34px;
    }

    /* --- Hero --- */
    .secao-inicio {
        height: auto;
        min-height: 90vh;
        padding: 40px 20px;
    }

    .texto-inicio {
        margin-bottom: 40px;
    }

    .texto-inicio h1,
    .texto-inicio h2 {
        font-size: 32px;
    }

    .texto-inicio p {
        font-size: 14px;
    }

    .botoes-inicio {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }

    .botao-servico,
    .botao-contorno-claro {
        justify-content: center;
        text-align: center;
    }

    .seta-hero {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .seta-esquerda { left: 10px; }
    .seta-direita { right: 10px; }

    .controlos-hero {
        bottom: 20px;
    }

    /* --- Propósito / Missão e Valores --- */
    .secao-depoimentos {
        padding: 60px 5%;
    }

    .titulo-secao {
        font-size: 24px;
    }

    .cartao-depoimento {
        padding: 24px;
    }

    #grid-x {
        grid-template-columns: 1fr;
    }

    /* --- Empresa --- */
    .tex-empre h1 {
        font-size: 34px;
    }

    .grid2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
        padding: 30px 20px;
    }

    /* --- Produtos --- */
    .secao-destaques {
        padding: 50px 20px;
    }

    .grelha-produtos {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .imagem-produto {
        height: 220px;
    }

    /* --- Marcas parceiras --- */
    .brands {
        padding: 60px 5%;
    }

    .brand-card {
        min-width: 140px;
        height: 100px;
        padding: 16px;
    }

    /* --- Confiança / Serviços resumo (carrossel) --- */
    .grelha-confianca {
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .selo-confianca {
        flex: 0 0 88%;
    }

    /* --- Segmentos de mercado --- */
    .secao-servicos {
        padding: 50px 20px 20px;
    }

    .titulo-grande {
        font-size: 26px;
    }

    .grelha-cartoes-servico {
        grid-template-columns: 1fr;
    }

    
}


/* ============================================================
   480px e abaixo — telemóveis
   ============================================================ */
@media (max-width: 480px) {

    .contacto-direita .item-contacto:last-child,
    .contacto-esquerda .item-contacto:last-child {
        display: none;
    }

    .botao-contacto span,
    .botao-contacto {
        font-size: 13px;
        padding: 8px 12px;
    }

    .texto-inicio h1,
    .texto-inicio h2 {
        font-size: 26px;
    }

    .etiqueta-hero {
        font-size: 12px;
    }

    .titulo-secao {
        font-size: 21px;
    }

    .titulo-depoimento {
        font-size: 22px;
    }

    .empresa {
        padding: 50px 6%;
    }

    .tex-empre h1 {
        font-size: 28px;
    }

    .div-img img {
        height: 240px;
    }

    .grid2 {
        grid-template-columns: 1fr 1fr;
        padding: 24px 14px;
    }

    .grid2 h1 {
        font-size: 28px;
    }

    .grelha-produtos {
        grid-template-columns: 1fr;
    }

    .nome-produto {
        font-size: 20px;
    }

    .brand-card {
        min-width: 120px;
        height: 90px;
    }

    .titulo-grande {
        font-size: 22px;
    }

    .selo-confianca {
        flex: 0 0 92%;
        padding: 22px;
    }

    .cartao-servico {
        height: auto;
    }

    .imagem-cartao-servico img {
        height: 130px;
    }

    .rodape-topo {
        gap: 26px;
    }

    .campo-email {
        font-size: 13px;
    }
}
/* ============================================================
   FOOTER RESPONSIVO
   ============================================================ */

/* Tablets */

@media (max-width: 992px) {

    .rodape-topo {
        grid-template-columns: 1fr 1fr;
        gap: 35px 40px;
        text-align: left;
    }

    .rodape-marca {
        text-align: left;
    }

    .rodape-marca p {
        max-width: 300px;
        margin-left: 0;
        margin-right: 0;
    }

    .redes-sociais {
        justify-content: flex-start;
    }

    .coluna-rodape {
        text-align: left;
    }

    .coluna-rodape ul {
        align-items: flex-start;
    }

    .item-contacto-rodape {
        justify-content: flex-start;
        text-align: left;
    }

}


/* Telemóveis */

@media (max-width: 768px) {

    footer {
        padding: 45px 24px 25px;
    }

    .rodape-topo {
        grid-template-columns: 1fr;
        gap: 35px;
        text-align: left;
    }

    .rodape-marca {
        text-align: left;
    }

    .logotipo-rodape img {
        width: 82px;
        height: 82px;
        object-fit: contain;
    }

    .rodape-marca p {
        max-width: 380px;
        margin: 15px 0 20px;
        line-height: 1.7;
    }

    .redes-sociais {
        justify-content: flex-start;
        align-items: center;
    }

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

    .coluna-rodape h5 {
        text-align: left;
        margin-bottom: 15px;
    }

    .coluna-rodape ul {
        align-items: flex-start;
        text-align: left;
    }

    .coluna-rodape ul li {
        text-align: left;
    }

    .coluna-rodape ul a {
        display: inline-block;
    }

    .item-contacto-rodape {
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
    }

    .item-contacto-rodape span {
        overflow-wrap: anywhere;
    }

    .texto-newsletter {
        max-width: 400px;
        text-align: left;
    }

    .form-newsletter {
        width: 100%;
        max-width: 400px;
    }

    .rodape-fundo {
        text-align: center;
    }

}


/* Telemóveis pequenos */

@media (max-width: 480px) {

    footer {
        padding: 40px 20px 22px;
    }

    .rodape-topo {
        gap: 30px;
    }

    .logotipo-rodape img {
        width: 75px;
        height: 75px;
    }

    .rodape-marca p {
        font-size: 12px;
        max-width: 100%;
    }

    .redes-sociais {
        gap: 10px;
    }

    .redes-sociais a {
        width: 39px;
        height: 39px;
        font-size: 16px;
    }

    .coluna-rodape h5 {
        font-size: 11px;
    }

    .coluna-rodape ul {
        gap: 8px;
    }

    .coluna-rodape ul a {
        font-size: 12px;
    }

    .item-contacto-rodape {
        font-size: 12px;
        gap: 9px;
        line-height: 1.5;
    }

    .item-contacto-rodape i {
        margin-top: 3px;
    }

    .texto-newsletter {
        font-size: 12px;
        line-height: 1.6;
    }

    .form-newsletter {
        max-width: 100%;
    }

    .campo-email {
        min-width: 0;
        width: 100%;
        font-size: 12px;
    }

    .botao-newsletter {
        width: 40px;
        min-width: 40px;
    }

    .rodape-fundo p {
        font-size: 10px;
        line-height: 1.5;
    }

}