/* ============================================================
   LARITUS — MELHORIAS DE RESPONSIVIDADE
   ------------------------------------------------------------
   Este ficheiro é carregado DEPOIS de gaia.css e das regras
   inline de cada página, pelo que pode sobrepor ajustes finos
   para telas pequenas (smartphones e tablets pequenos).

   Estratégia:
   - Breakpoints principais: 1199, 991, 767, 575, 480, 360
   - Sempre que possível, usar unidades fluidas (vw, %, rem)
   - Evitar !important salvo onde o gaia.css força regras rígidas
   ============================================================ */

/* ------------------------------------------------------------
   VARIÁVEIS (espelham as das páginas — apenas para clareza)
   ------------------------------------------------------------ */
:root {
    --laritus-blue: #0B5FBF;
    --laritus-blue-dark: #094a96;
    --laritus-blue-light: #1a7ae0;
}

/* ------------------------------------------------------------
   LAYOUT GERAL — CONTENTORES E SECÇÕES
   ------------------------------------------------------------ */

/* Em telas pequenas, o .container do Bootstrap fica muito largo;
   reduzimos o padding lateral para aproveitar melhor a largura. */
@media (max-width: 767px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Secções com menos espaçamento vertical em mobile */
    .section {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }
    .section.section-small {
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }

    /* Secção do cabeçalho (header parallax) — altura mais controlada */
    .section-header .parallax,
    .section-header .static-image {
        min-height: 60vh;
        height: auto !important;
    }
    .section-header .parallax::after,
    .section-header .static-image::after {
        min-height: 60vh;
        height: 100% !important;
    }
    .section-header .content {
        top: 50%;
        padding-top: 70px; /* compensa navbar fixa */
        padding-bottom: 30px;
    }
}

/* Telas muito pequenas (≤ 480px) */
@media (max-width: 480px) {
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }
    .section {
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }
}

/* ------------------------------------------------------------
   NAVBAR — BOTÃO HAMBÚRGUER E LOGO
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    /* Reduz o tamanho do logo em telas pequenas */
    .navbar .navbar-brand img {
        height: 38px !important;
        max-width: 140px !important;
    }
    .navbar .navbar-header {
        padding: 4px 0 !important;
    }

    /* Botão hambúrguer maior e mais fácil de tocar (regra de acessibilidade: ≥44px) */
    .navbar .navbar-toggle {
        margin-top: 12px !important;
        margin-bottom: 12px !important;
        margin-right: 0 !important;
        padding: 10px 12px !important;
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.35);
        min-width: 44px;
        min-height: 44px;
    }
    .navbar:not(.navbar-transparent) .navbar-toggle {
        border-color: rgba(11, 95, 191, 0.25);
    }
    .navbar .navbar-toggle .icon-bar {
        width: 26px !important;
        height: 3px !important;
        border-radius: 2px;
    }

    /* Menu lateral (navbar-collapse) — largura um pouco maior para os itens */
    .navbar-collapse {
        width: 260px !important;
    }
    .navbar-collapse .nav > li > a {
        font-size: 14px !important;
        padding: 16px 6px !important;
        line-height: 1.4 !important;
    }
    /* Botão "Solicitar Orçamento" no menu mobile */
    .navbar-collapse .nav > li > .btn,
    .navbar-collapse .nav > li > a.btn {
        display: inline-block;
        width: auto;
        max-width: 90%;
        margin: 8px auto !important;
        text-align: center;
    }
}

@media (max-width: 360px) {
    .navbar .navbar-brand img {
        height: 34px !important;
        max-width: 120px !important;
    }
    .navbar-collapse {
        width: 240px !important;
    }
}

/* ------------------------------------------------------------
   CABEÇALHO DAS PÁGINAS (section-header)
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    .section-header .title-area .title-modern,
    h1.title-modern {
        font-size: 52px !important;
        letter-spacing: 3px !important;
    }
    .section-header .title-area h3 {
        font-size: 19px !important;
    }
}

@media (max-width: 767px) {
    .section-header .title-area .title-modern,
    h1.title-modern {
        font-size: 40px !important;
        letter-spacing: 2px !important;
        margin-bottom: 12px !important;
    }
    .section-header .title-area h3 {
        font-size: 16px !important;
        line-height: 1.55 !important;
        padding: 0 8px !important;
    }
    .section-header .title-area .separator {
        margin: 16px auto 0 auto !important;
    }
    .section-header .button-get-started {
        margin-top: 25px !important;
    }
}

@media (max-width: 480px) {
    .section-header .title-area .title-modern,
    h1.title-modern {
        font-size: 32px !important;
        letter-spacing: 1px !important;
    }
    .section-header .title-area h3 {
        font-size: 15px !important;
        padding: 0 4px !important;
    }
}

/* ------------------------------------------------------------
   BOTÕES — mais confortáveis em toque mobile
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .btn-lg,
    .btn.btn-lg {
        padding: 12px 22px !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
    }

    /* Botões grandes no header tornam-se full-width */
    .section-header .button-get-started .btn,
    .section-get-started .button-get-started .btn,
    .section-cta .button-get-started .btn {
        display: block !important;
        width: 100% !important;
        max-width: 320px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ------------------------------------------------------------
   TÍTULOS DE SECÇÃO (title-area)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .title-area h2 {
        font-size: 26px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }
    .title-area .description {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    .title-area .separator {
        margin: 14px auto !important;
    }
}

/* ------------------------------------------------------------
   CARTÕES (cards de serviço, planos, projetos, etc.)
   ------------------------------------------------------------ */

/* Em telas pequenas, colunas col-md-4 empilham. Damos um
   respiro entre os cartões. */
@media (max-width: 767px) {
    .row > [class^="col-md-"],
    .row > [class^="col-sm-"] {
        margin-bottom: 25px;
    }
    .row > [class^="col-md-"]:last-child,
    .row > [class^="col-sm-"]:last-child {
        margin-bottom: 0;
    }

    /* Cards com padding menor em mobile */
    .section-services-detail .service-card,
    .section-plans .plan-card,
    .section-values .value-card {
        padding: 25px 20px !important;
    }
    .section-services-detail .service-card .icon,
    .section-values .value-card .icon {
        font-size: 38px !important;
        margin-bottom: 12px !important;
    }
    .section-services-detail .service-card h3,
    .section-plans .plan-card h3,
    .section-values .value-card h4 {
        font-size: 18px !important;
    }
    .section-plans .plan-card.featured::before {
        font-size: 10px !important;
        padding: 4px 12px !important;
    }
}

@media (max-width: 480px) {
    .section-services-detail .service-card,
    .section-plans .plan-card,
    .section-values .value-card {
        padding: 20px 16px !important;
    }
}

/* ------------------------------------------------------------
   SECÇÃO NÚMEROS (Quem Somos)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    /* Em mobile, números em 2 colunas para melhor leitura */
    .section-numbers .row > [class^="col-"] {
        margin-bottom: 8px;
    }
    .section-numbers .number-item .number {
        font-size: 34px !important;
    }
    .section-numbers .number-item .label {
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    /* Em telas muito pequenas, números em coluna única */
    .section-numbers .row > [class^="col-"] {
        width: 100%;
        float: none;
    }
    .section-numbers .number-item {
        padding: 12px 0 !important;
    }
}

/* ------------------------------------------------------------
   HISTÓRIA (Quem Somos) — texto e imagem
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .section-history .title-area.text-left {
        text-align: center !important;
    }
    .section-history .title-area.text-left .description,
    .section-history .title-area.text-left p {
        text-align: center !important;
        margin-left: auto !important;
    }
    .section-history .button-get-started.text-left {
        text-align: center !important;
    }
    .section-history .button-get-started.text-left .btn {
        display: inline-block;
    }
    .section-history .history-text {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
    .section-history .history-image {
        margin-top: 25px;
    }
}

/* ------------------------------------------------------------
   DIFERENCIAIS (Serviços)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .section-diferenciais .diferencial-item {
        flex-direction: row;
        margin-bottom: 22px !important;
    }
    .section-diferenciais .diferencial-item .icon {
        font-size: 30px !important;
        margin-right: 15px !important;
    }
    .section-diferenciais .diferencial-item h4 {
        font-size: 16px !important;
    }
    .section-diferenciais .diferencial-item p {
        font-size: 14px !important;
    }
    /* Title left deve centrar em mobile */
    .section-diferenciais .title-area.text-left,
    .section-diferenciais .description[style*="text-align:left"] {
        text-align: center !important;
        margin-left: 0 !important;
    }
}

/* ------------------------------------------------------------
   PROCESSO (Serviços) — passos numerados
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    .section-process .process-step {
        padding: 20px 15px !important;
    }
    .section-process .process-step .step-number {
        width: 60px !important;
        height: 60px !important;
        line-height: 60px !important;
        font-size: 22px !important;
    }
    .section-process .process-step h4 {
        font-size: 16px !important;
    }
    .section-process .process-step p {
        font-size: 13px !important;
    }
}

/* ------------------------------------------------------------
   FAQ (Serviços e Fale Conosco)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .section-faq .faq-item,
    .faq-mini-item {
        padding: 18px 18px !important;
    }
    .section-faq .faq-item h4,
    .faq-mini-item h4 {
        font-size: 15px !important;
    }
    .section-faq .faq-item p,
    .faq-mini-item p {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }
}

/* ------------------------------------------------------------
   PLANOS / PACOTES (Serviços)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .section-plans .plan-card .price {
        font-size: 22px !important;
    }
    .section-plans .plan-card ul li {
        font-size: 13px !important;
        padding: 6px 0 6px 22px !important;
    }
}

/* ------------------------------------------------------------
   PROJETOS — PORTFÓLIO E ESTUDO DE CASO
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .portfolio-filters {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    .portfolio-filters .filter-btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
        margin: 0 !important;
        flex: 1 1 auto;
        min-width: 80px;
        text-align: center;
    }

    .project-card .project-body {
        padding: 20px 18px !important;
    }
    .project-card .project-body h3 {
        font-size: 17px !important;
    }
    .project-card .project-body p {
        font-size: 13px !important;
        margin-bottom: 14px !important;
    }

    /* Estudo de caso destaque: empilha verticalmente */
    .case-study .case-image {
        min-height: 180px !important;
    }
    .case-study .case-content {
        padding: 25px 20px !important;
    }
    .case-study .case-content h3 {
        font-size: 20px !important;
    }
    .case-study .case-content p {
        font-size: 14px !important;
    }
    .case-study .case-results {
        gap: 18px !important;
        justify-content: space-around;
    }
    .case-study .case-results .result-item .result-number {
        font-size: 24px !important;
    }
}

@media (max-width: 480px) {
    .case-study .case-results {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .case-study .case-results .result-item {
        text-align: center !important;
    }
}

/* ------------------------------------------------------------
   CONTACTO — FORMULÁRIO E INFO
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .contact-form-wrapper {
        padding: 25px 18px !important;
    }
    .contact-form-wrapper h3 {
        font-size: 20px !important;
    }
    .contact-form-wrapper .form-subtitle {
        font-size: 14px !important;
        margin-bottom: 22px !important;
    }
    .contact-form-wrapper .form-group {
        margin-bottom: 16px !important;
    }
    .contact-form-wrapper .form-control {
        padding: 10px 14px !important;
        font-size: 15px !important; /* ≥16px evita zoom automático no iOS */
    }
    .contact-form-wrapper textarea.form-control {
        min-height: 120px !important;
    }
    .contact-form-wrapper .btn-submit {
        padding: 13px 18px !important;
        font-size: 14px !important;
        width: 100% !important;
    }

    /* Informações de contacto: remove padding-left que só fazia
       sentido quando estava ao lado do formulário */
    .contact-info-wrapper {
        padding-left: 0 !important;
        margin-top: 30px !important;
    }
    .contact-info-item {
        margin-bottom: 22px !important;
    }
    .contact-info-item .icon-box {
        width: 50px !important;
        height: 50px !important;
        font-size: 22px !important;
        margin-right: 15px !important;
    }
    .contact-info-item .info-text h4 {
        font-size: 15px !important;
    }
    .contact-info-item .info-text p,
    .contact-info-item .info-text a {
        font-size: 13px !important;
    }

    /* Horários */
    .hours-card {
        padding: 22px 18px !important;
        margin-top: 20px !important;
    }
    .hours-card .hours-row {
        font-size: 13px !important;
        padding: 8px 0 !important;
    }
}

/* Mapa */
@media (max-width: 767px) {
    .map-wrapper iframe {
        height: 260px !important;
    }
}

@media (max-width: 480px) {
    .map-wrapper iframe {
        height: 220px !important;
    }
}

/* ------------------------------------------------------------
   MARQUEE DE CLIENTES
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .clients-marquee {
        padding: 18px 0 25px 0 !important;
    }
    .clients-marquee-track {
        gap: 30px !important;
        animation-duration: 22s !important;
    }
    .clients-marquee-track img {
        height: 40px !important;
        max-width: 110px !important;
    }
}

@media (max-width: 480px) {
    .clients-marquee-track img {
        height: 34px !important;
        max-width: 90px !important;
    }
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .footer.footer-big {
        padding-top: 30px !important;
        padding-bottom: 20px !important;
    }
    .footer .info {
        text-align: center !important;
        margin-bottom: 25px;
    }
    .footer .info .title {
        font-size: 15px !important;
        margin-top: 0 !important;
        margin-bottom: 12px !important;
    }
    .footer .info ul {
        text-align: center !important;
    }
    .footer .info ul li {
        margin-bottom: 6px;
    }
    .footer .info ul li a {
        font-size: 13px !important;
    }
    .footer .copyright {
        font-size: 12px !important;
        margin-top: 10px !important;
    }
    /* Ajusta offsets do Bootstrap que só fazem sentido em desktop */
    .footer .col-md-offset-1 {
        margin-left: 0 !important;
    }
}

/* ------------------------------------------------------------
   SECÇÃO CTA / GET-STARTED (faixa final com fundo de imagem)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .section-get-started,
    .section-cta {
        text-align: center;
    }
    .section-get-started .title-area h2,
    .section-cta .title-area h2 {
        font-size: 24px !important;
    }
    .section-get-started .title-area .description,
    .section-cta .title-area .description {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    .section-get-started .button-get-started .btn,
    .section-cta .button-get-started .btn {
        display: block !important;
        width: 100% !important;
        max-width: 280px;
        margin: 0 auto !important;
    }
}

/* ------------------------------------------------------------
   EQUIPE (Quem Somos — cards de membros)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .section-our-team-freebie .card-member {
        max-width: 320px;
        margin: 0 auto 25px auto !important;
    }
    .section-our-team-freebie .card-member .description .title {
        font-size: 17px !important;
    }
    .section-our-team-freebie .card-member .description .small-text {
        font-size: 12px !important;
    }
    .section-our-team-freebie .card-member .description .description {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }
}

/* ------------------------------------------------------------
   OVERFLOW HORIZONTAL — previne scrolls laterais acidentais
   ------------------------------------------------------------ */
body {
    overflow-x: hidden;
}

/* Qualquer elemento com largura fixa que extrapola a viewport */
img, video, iframe, .embed-responsive {
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------------------
   ACESSIBILIDADE — reduz animações em telas pequenas (opcional)
   ------------------------------------------------------------ */
@media (max-width: 480px) and (prefers-reduced-motion: no-preference) {
    /* Animações de reveal mais rápidas em mobile para evitar
       a sensação de "travado" em telas pequenas. */
    [data-reveal] {
        transition-duration: .5s !important;
    }
}