/* =====================================================
   IVANI CORDEIRO - CSS ORGANIZADO DA PÁGINA INDEX
   Arquivo separado por pasta: css/index.css
   Não contém consulta, conexão ou lógica de banco.
   ===================================================== */

/* ==================== CABECALHO / MENU / BANNER ==================== */

/* =====================================================
   AJUSTE CLIQUE DO CARROSSEL DO BANNER
   ===================================================== */
#introCarousel,
#carousel-service2,
#introCarousel .carousel-inner,
#introCarousel .item,
#carousel-service2 .carousel-inner,
#carousel-service2 .item {
    pointer-events: auto !important;
}

#introCarousel .carousel-control,
#carousel-service2 .carousel-control,
#introCarousel .carousel-indicators,
#carousel-service2 .carousel-indicators {
    z-index: 50 !important;
    pointer-events: auto !important;
}

#introCarousel .carousel-background img,
#carousel-service2 .screenshot img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* =====================================================
   CORREÇÃO FINAL ESPAÇO DO BANNER MOBILE
   Remove altura vazia abaixo da imagem e mantém setas clicáveis.
   ===================================================== */
@media (max-width: 767px) {
    #intro,
    #intro .intro-container,
    #carousel-service2,
    #carousel-service2 .carousel-inner,
    #carousel-service2 .item,
    #carousel-service2 .row,
    #carousel-service2 .col-xs-12,
    #carousel-service2 .screenshot {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        background: transparent !important;
    }

    #carousel-service2 .screenshot img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        aspect-ratio: auto !important;
    }

    #carousel-service2 .carousel-caption {
        bottom: 8px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 20 !important;
    }

    #carousel-service2 .carousel-control {
        z-index: 30 !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        pointer-events: auto !important;
    }

    #carousel-service2 .carousel-indicators {
        z-index: 31 !important;
        bottom: 3px !important;
        pointer-events: auto !important;
    }
}

#carousel-service2,
#introCarousel {
    pointer-events: auto !important;
}

#carousel-service2 .carousel-control,
#introCarousel .carousel-control,
#carousel-service2 .carousel-indicators,
#introCarousel .carousel-indicators {
    pointer-events: auto !important;
    z-index: 50 !important;
}

/* ================================
       TEMA GLOBAL BASEADO NA COR DO PAINEL
       ================================ */
    /* Fundo geral do site + texto em #e9eefb */
    body {
        background: var(--jc-cor-sistema);
        color: #e9eefb;
    }

    /* Seções que usavam bg-white / bg-gray agora seguem a cor do painel */
    .home-section.bg-white,
    .home-section.bg-gray,
    #parallax1,
    #bottom-widget {
        background: var(--jc-cor-sistema);
        color: #e9eefb;
    }

    /* Rodapé alinhado com o tema */
    footer {
        background: var(--jc-cor-sistema) !important;
        color: #e9eefb;
    }
    footer p {
        color: #e9eefb;
    }
    footer a,
    footer a:visited {
        color: #fff;
    }
    footer a:hover {
        color: #e9eefb;
        text-decoration: underline;
    }

    /* ================================
       ÍCONES REDES SOCIAIS – RODAPÉ
       ================================ */
    .social-network .fa-stack {
        margin: 0 3px;
    }
    /* círculo de fundo mais suave */
    .social-network .fa-circle.fa-stack-2x {
        color: rgba(233, 238, 251, 0.15) !important;
    }
    /* ícone dentro do círculo */
    .social-network .fa-stack-1x.fa-inverse {
        color: #e9eefb !important;
    }
    /* hover: círculo com a cor do painel e ícone branco */
    .social-network a:hover .fa-circle.fa-stack-2x {
        color: var(--jc-cor-sistema) !important;
    }
    .social-network a:hover .fa-stack-1x.fa-inverse {
        color: #fff !important;
    }

    /* ================================
       TEXTOS / LINKS
       ================================ */
    .home-section h1,
    .home-section h2,
    .home-section h3,
    .home-section h4,
    .home-section h5,
    .home-section h6,
    .home-section p,
    .home-section li {
        color: #e9eefb;
    }

    /* Links gerais */
    a,
    a:focus,
    a:visited {
        color: #e9eefb;
    }
    a:hover {
        color: #fff;
        text-decoration: underline;
    }

    /* Links "neutros" que eram escuros no HTML */
    .link-neutro {
        color: #e9eefb !important;
    }

    /* ================================
       NAVBAR
       ================================ */
    .navbar-default {
        background: var(--jc-cor-sistema);
        border-color: transparent;
    }
    .navbar-default .navbar-brand,
    .navbar-default .navbar-brand:hover {
        color: #e9eefb;
    }
    .navbar-default .navbar-nav > li > a {
        color: #e9eefb;
    }
    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li.active > a,
    .navbar-default .navbar-nav > li.active > a:focus,
    .navbar-default .navbar-nav > li.active > a:hover {
        color: #fff;
        background: rgba(0, 0, 0, 0.1);
    }

    /* Classe para H1 apenas para SEO (não aparece visualmente) */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }

    /* ================================
       BOTÃO VOLTAR AO TOPO
       ================================ */
    .back-to-top {
        background: var(--jc-cor-sistema);
        color: #fff;
    }
    .back-to-top:focus {
        background: var(--jc-cor-sistema);
        color: #fff;
    }
    .back-to-top:hover {
        background: #019090;
        color: #fff;
    }

    /* ================================
       FORMULÁRIOS / FOCUS
       ================================ */
    .form-control {
        background: rgba(0, 0, 0, 0.15);
        border-color: rgba(233, 238, 251, 0.4);
        color: #e9eefb;
    }
    .form-control::placeholder {
        color: rgba(233, 238, 251, 0.7);
    }
    .form-control:focus {
        border-color: var(--jc-cor-sistema);
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 2px var(--jc-cor-sistema);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 2px var(--jc-cor-sistema);
        background: rgba(0, 0, 0, 0.25);
        color: #e9eefb;
    }

    /* ================================
       CAROUSEL / INDICADORES SERVIÇOS
       ================================ */
    .service .carousel-indicators {
        background: transparent !important;
        border: none;
        box-shadow: none;
        margin-top: 15px;
        padding-top: 0;
    }
    .service .carousel-indicators li {
        background: rgba(233, 238, 251, 0.4);
    }
    .service .carousel-indicators .active {
        background: var(--jc-cor-sistema);
    }

    /* ================================
       BOTÕES PADRÃO DO TEMA
       ================================ */
    .btn-theme {
        background: var(--jc-cor-sistema);
        color: #fff;
        border: none;
    }
    .btn-theme:hover,
    .btn-theme:focus {
        background: #019090;
        color: #fff;
    }

    /* Ícones de contato */
    .contact-widget i {
        color: #fff;
    }

    /* Botão de destaque no intro */
    #intro .btn-get-started {
        font-family: "Raleway", sans-serif;
        font-weight: 500;
        font-size: 14px;
        letter-spacing: 1px;
        display: inline-block;
        padding: 12px 32px;
        border-radius: 3px;
        transition: 0.5s;
        line-height: 1;
        margin: 10px;
        color: #fff;
        -webkit-animation-delay: 0.8s;
        animation-delay: 0.8s;
        border: 2px solid var(--jc-cor-sistema);
    }
    #intro .btn-get-started:hover {
        background: var(--jc-cor-sistema);
        color: #fff;
        text-decoration: none;
    }

    /* ================================
       AJUSTES BANNER / CARROSSEL INTRO
       DESKTOP E MOBILE
       ================================ */
    /* Desktop – usa o #introCarousel */
    #introCarousel,
    #introCarousel .carousel-inner,
    #introCarousel .carousel-inner .item,
    #introCarousel .carousel-background {
        width: 100%;
    }

    #introCarousel .carousel-background {
        background: none !important;
    }
    #introCarousel .carousel-background img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Mobile – carrossel #carousel-service2 (banners) */
    #carousel-service2 .screenshot img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    /* ===== AJUSTE DO BANNER NO CELULAR (SEM SUMIR COM ELE) ===== */
    @media (max-width: 767px) {
        #intro {
            height: auto !important;
            min-height: 280px;
        }
        #intro .carousel,
        #intro .carousel-inner,
        #intro .carousel-inner .item,
        #intro .carousel-background {
            height: auto !important;
        }
        #intro .carousel-background img {
            width: 100%;
            height: auto;
            display: block;
        }
    }

    /* ================================
       AJUSTES FINOS – SESSÃO SOBRE
       ================================ */
    #about,
    #about .section-heading h4,
    #about .section-heading p,
    #about .content,
    #about .content p,
    #about .content li {
        color: #e9eefb !important;
        opacity: 1;
    }

    /* ================================
       PORTFÓLIO – BOX QUE ABRE AO CLICAR
       ================================ */
    /* fundo do box que abre */
    #portfolio .og-expander {
        background: var(--jc-cor-sistema);
        color: #e9eefb !important;
        border-top: 1px solid rgba(233, 238, 251, 0.12);
    }
    /* área interna (texto + imagem) */
    #portfolio .og-expander-inner {
        padding: 40px 30px !important;
    }
    /* área da imagem grande */
    #portfolio .og-fullimg {
        background: transparent !important;
    }
    /* textos dentro do box */
    #portfolio .og-details,
    #portfolio .og-details h3,
    #portfolio .og-details p {
        color: #e9eefb !important;
    }
    /* botão "SABER MAIS +" dentro do box */
    #portfolio .og-details a,
    #portfolio .og-details a:visited {
        background: var(--jc-cor-sistema);
        color: #fff;
        display: inline-block;
        padding: 10px 22px;
        text-transform: uppercase;
        font-weight: 600;
        border-radius: 3px;
        text-decoration: none;
    }
    #portfolio .og-details a:hover {
        background: #019090;
        color: #fff;
        text-decoration: none;
    }

    /* ================================
       PERFORMANCE / PAGE SPEED
       Mantém o mesmo layout, mas reduz CLS e melhora LCP.
       ================================ */
    #intro,
    #introCarousel,
    #introCarousel .carousel-inner,
    #introCarousel .item {
        min-height: 620px;
        background-color: #071827;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    @media (max-width: 767px) {
        #intro,
        #carousel-service2,
        #carousel-service2 .carousel-inner,
        #carousel-service2 .item {
            min-height: auto;
            background-color: #071827;
        }

        #carousel-service2 .screenshot img {
            aspect-ratio: 16 / 9;
            object-fit: cover;
        }
    }

/* =====================================================
   CORE WEB VITALS - LCP / CLS
   Mantém a lógica do Bootstrap, mas deixa o primeiro banner estável e visível sem depender de animação.
   ===================================================== */
.navbar.navbar-default {
  min-height: 62px;
}

#intro,
#intro .intro-container,
#introCarousel,
#introCarousel .carousel-inner,
#introCarousel .item,
#carousel-service2,
#carousel-service2 .carousel-inner,
#carousel-service2 .item {
  background: #020918;
}

#introCarousel .carousel-background,
#carousel-service2 .screenshot {
  position: relative;
  overflow: hidden;
  background: #020918;
}

#introCarousel .carousel-background img,
#carousel-service2 .screenshot img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transform: translateZ(0);
}

#carousel-service2 .screenshot.jc-hero-lcp,
#carousel-service2 .screenshot.jc-hero-lcp img {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
}

#introCarousel .item.active .carousel-background,
#carousel-service2 .item.active .screenshot {
  visibility: visible !important;
  opacity: 1 !important;
}

#intro .item::before {
  pointer-events: none;
}

@media (max-width: 767px) {
  #intro {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
  }

  #intro .intro-container,
  #carousel-service2,
  #carousel-service2 .carousel-inner,
  #carousel-service2 .item {
    height: auto !important;
    min-height: 0 !important;
  }

  #carousel-service2 .screenshot {
    min-height: 190px;
  }

  #carousel-service2 .carousel-caption {
    position: absolute !important;
    bottom: 10px !important;
  }
}

@media (min-width: 768px) {
  #intro {
    height: auto !important;
    min-height: 560px !important;
  }

  #intro .intro-container,
  #introCarousel,
  #introCarousel .carousel-inner,
  #introCarousel .item,
  #introCarousel .carousel-background {
    min-height: 560px !important;
  }

  #introCarousel .carousel-background img {
    height: 100% !important;
    min-height: 560px !important;
  }
}

#about,
#services,
#portfolio,
#team,
#contact,
#bottom-widget {
  content-visibility: auto;
  contain-intrinsic-size: 720px;
}

@media (max-width: 767px) {
  #about,
  #services,
  #portfolio,
  #team,
  #contact,
  #bottom-widget {
    contain-intrinsic-size: 900px;
  }
}

/* ===== GARANTIR MODAL POR CIMA DO MENU ===== */
    /* se o teu menu tiver z-index muito alto, deixa ele abaixo do modal */
    header,
    .navbar,
    .menu,
    #topo {
        z-index: 1000; /* pode ajustar se quiser, só precisa ser menor que o do modal */
    }

    /* backdrop (fundo escuro atrás do modal) */
    .modal-backdrop.show {
        opacity: 0.6;
        z-index: 2000;
    }

    /* o próprio modal fica mais alto ainda */
    #modalWhatsapp {
        z-index: 2050;
    }
    #modalWhatsapp .modal-dialog {
        max-width: 600px;
        margin: 1.75rem auto;
    }
    #modalWhatsapp .modal-content {
        background-color: #ffffff;
        border-radius: 6px;
        border: none;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    }
    #modalWhatsapp .modal-header {
        border-bottom: 2px solid #128C7E;
        background: #25d366;
        color: #ffffff;
        padding: 12px 16px;
    }
    #modalWhatsapp .modal-title {
        font-weight: 600;
        font-size: 16px;
    }
    #modalWhatsapp .btn-close,
    #modalWhatsapp .close {
        color: #ffffff;
        opacity: 1;
    }
    #modalWhatsapp .modal-body {
        padding: 20px 25px;
        color: #333333;
        font-size: 14px;
    }
    #modalWhatsapp .modal-body p {
        margin-bottom: 15px;
        text-align: center;
        font-weight: 500;
        color: #555555;
    }
    #modalWhatsapp .form-control {
        background-color: #f9f9f9;
        border: 1px solid #dddddd;
        border-radius: 4px;
        color: #333333;
        font-size: 14px;
        height: 42px;
    }
    #modalWhatsapp .form-control:focus {
        border-color: #25d366;
        box-shadow: 0 0 0 0.15rem rgba(37, 211, 102, 0.25);
        background-color: #ffffff;
    }
    #modalWhatsapp .form-control::placeholder {
        color: #999999;
    }
    #modalWhatsapp .modal-footer {
        border-top: none;
        padding: 15px 20px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }
    #modalWhatsapp .btn-secondary {
        background-color: #cccccc;
        border-color: #cccccc;
        color: #333333;
        font-weight: 500;
    }
    #modalWhatsapp .btn-secondary:hover {
        background-color: #b3b3b3;
        border-color: #b3b3b3;
    }
    #modalWhatsapp .btn-success {
        background-color: #25d366;
        border-color: #25d366;
        font-weight: 600;
        padding: 8px 20px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    #modalWhatsapp .btn-success i {
        font-size: 18px;
    }
    #modalWhatsapp .btn-success:hover {
        background-color: #128C7E;
        border-color: #128C7E;
    }

    /* ===== BOTÃO WHATSAPP FLUTUANTE ===== */
    #btn-whatsapp-float {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 2100;              /* acima de tudo, inclusive menu */
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #25d366;
        color: #fff;
        font-size: 30px;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;      /* tira sublinhado se for <a> */
    }
    #btn-whatsapp-float i {
        line-height: 1;
        display: block;
    }
    #btn-whatsapp-float:hover {
        transform: scale(1.1);
        box-shadow: 2px 2px 12px rgba(37, 211, 102, 0.6);
        background-color: #128C7E;
    }
/* ====== DROPDOWN TRABALHOS - HOVER NO DESKTOP ====== */
@media (min-width: 992px) {
  .navbar-nav > li.dropdown-trabalhos:hover > .dropdown-menu {
    display: block;
  }
}

/* Estilo geral do dropdown de Trabalhos */
.dropdown-menu-trabalhos {
  background-color: #020918;        /* mesmo tom escuro do header */
  border: 1px solid rgba(148,163,184,0.4);
  min-width: 260px;
  padding: 8px 0;
}

.dropdown-menu-trabalhos > li > a {
  color: #e5e7eb;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.dropdown-menu-trabalhos > li > a i {
  width: 18px;
  text-align: center;
  font-size: 14px;
}

.dropdown-menu-trabalhos > li > a:hover,
.dropdown-menu-trabalhos > li > a:focus {
  background: rgba(37,99,235,0.15);
  color: #ffffff;
}

/* Cabeçalho dentro do submenu */
.dropdown-menu-trabalhos .dropdown-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #9ca3af;
  padding: 6px 18px;
  margin-top: 4px;
}

/* Divider mais discreto */
.dropdown-menu-trabalhos .divider {
  margin: 6px 0;
  background-color: rgba(148,163,184,0.25);
}

/* ====== AJUSTES PARA CELULAR (NAVBAR COLAPSADA) ====== */
@media (max-width: 991px) {

  /* seta do dropdown alinhada à direita */
  .navbar-nav > li.dropdown-trabalhos > a .caret {
    float: right;
    margin-top: 8px;
  }

  /* quando o item está "open" no mobile, o dropdown vira lista normal */
  .navbar-nav .open .dropdown-menu.dropdown-menu-trabalhos {
    position: static;
    float: none;
    width: 100%;
    margin-top: 0;
    border: 0;
    box-shadow: none;
    background-color: #020918;
  }

  .navbar-nav .open .dropdown-menu-trabalhos > li > a {
    padding: 10px 28px;   /* mais espaço para o dedo */
    font-size: 14px;
  }

  .navbar-nav .open .dropdown-menu-trabalhos .dropdown-header {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ================================
   PERFORMANCE MOBILE / CORE WEB VITALS
   Mantém a lógica do sistema e evita carregar imagens fora da primeira dobra.
   ================================ */
#intro {
  overflow: hidden;
  background: #020918;
}
#intro img {
  max-width: 100%;
  height: auto;
}
#carousel-service2 .item,
#introCarousel .item {
  min-height: 1px;
}
#carousel-service2 .screenshot,
#introCarousel .carousel-background {
  background: #020918;
}
#carousel-service2 .screenshot img,
#introCarousel .carousel-background img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (max-width: 767px) {
  #intro {
    padding-top: 0 !important;
    min-height: 0 !important;
  }
  #carousel-service2 .carousel-indicators {
    bottom: 5px;
    margin-bottom: 0;
  }
  #carousel-service2 .carousel-caption {
    bottom: 10px !important;
    left: 0;
    right: 0;
  }
  #carousel-service2 .btn-theme {
    padding: 8px 14px;
    font-size: 12px;
  }
}

/* =====================================================
   CORREÇÃO MENU MOBILE - SUBMENU TRABALHOS
   Mantém o padrão Bootstrap e libera clique nos links.
   ===================================================== */
@media (max-width: 991px) {
  .navbar,
  .navbar-default,
  .navbar-header,
  .navbar-collapse,
  .navbar-ex1-collapse,
  .navigation,
  .navbar-nav,
  .dropdown-trabalhos,
  .dropdown-menu-trabalhos {
    overflow: visible !important;
  }

  .navbar-default {
    position: relative;
    z-index: 99999;
  }

  .navbar-toggle {
    position: relative;
    z-index: 100001;
    pointer-events: auto !important;
  }

  .navbar-collapse.in,
  .navbar-ex1-collapse.in {
    display: block !important;
    height: auto !important;
    max-height: calc(100vh - 70px) !important;
    overflow-y: auto !important;
    position: relative;
    z-index: 100000;
    background: #020918;
  }

  .navbar-nav > li > a,
  .dropdown-menu-trabalhos > li > a,
  .dropdown-trabalhos > a.dropdown-toggle {
    position: relative;
    z-index: 100002;
    pointer-events: auto !important;
    cursor: pointer;
  }

  .navbar-nav > li.dropdown-trabalhos.open > .dropdown-menu.dropdown-menu-trabalhos {
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 6px 0 8px 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #020918 !important;
  }

  .dropdown-menu-trabalhos > li > a {
    display: block !important;
    width: 100% !important;
    padding: 11px 28px !important;
    color: #e9eefb !important;
  }

  .dropdown-menu-trabalhos > li > a:hover,
  .dropdown-menu-trabalhos > li > a:focus {
    color: #ffffff !important;
    background: rgba(37,99,235,0.18) !important;
    text-decoration: none !important;
  }
}

/* =====================================================
   CORREÇÃO INDEX / CARROSSEL COM BOOTSTRAP 5.3.8
   Mantém classes antigas usadas pelo sistema e corrige
   menu, banner, setas e indicadores sem alterar PHP/SQL.
   ===================================================== */
.img-responsive {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

.btn-block {
  display: block !important;
  width: 100% !important;
}

.col-xs-12 {
  flex: 0 0 auto !important;
  width: 100% !important;
}

@media (max-width: 767.98px) {
  .hidden-xs {
    display: none !important;
  }

  .visible-xs-block {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .visible-xs-block {
    display: none !important;
  }
}

/* Menu antigo do tema funcionando com Bootstrap 5 */
.navbar.navbar-default {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  min-height: 74px !important;
  margin-bottom: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  position: relative !important;
  top: 0 !important;
  z-index: 3000 !important;
}

.navbar.navbar-default .container {
  position: relative !important;
}

.navbar-brand {
  display: flex !important;
  align-items: center !important;
  min-height: 70px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  text-decoration: none !important;
}

.navbar-brand img {
  width: auto !important;
  max-width: 140px !important;
  height: auto !important;
  max-height: 50px !important;
  object-fit: contain !important;
}

.navbar-toggle {
  border: 1px solid rgba(159,49,91,0.28) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.82) !important;
  padding: 9px 10px !important;
  cursor: pointer !important;
}

.navbar-toggle .icon-bar {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  margin: 4px 0 !important;
  border-radius: 2px !important;
  background: #5f3343 !important;
}

.navbar-nav {
  list-style: none !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

.navbar-default .navbar-nav > li > a,
.navbar-nav > li > a {
  text-decoration: none !important;
  cursor: pointer !important;
}

@media (min-width: 768px) {
  .navbar-toggle {
    display: none !important;
  }

  .navbar.navbar-default .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  .navbar-header {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }

  .navigation.navbar-collapse,
  .navigation.navbar-collapse.collapse,
  .navbar-ex1-collapse.collapse {
    display: flex !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    visibility: visible !important;
  }

  .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    width: auto !important;
  }

  .navbar-nav > li {
    display: block !important;
    position: relative !important;
    float: none !important;
  }

  .navbar-nav > li > a {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 12px 13px !important;
    white-space: nowrap !important;
  }

  .dropdown-menu-trabalhos,
  .navbar-nav > li > .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 3100 !important;
    display: none !important;
    min-width: 260px !important;
    margin: 0 !important;
  }

  .dropdown-trabalhos:hover > .dropdown-menu-trabalhos,
  .dropdown-trabalhos.open > .dropdown-menu-trabalhos,
  .dropdown-trabalhos.show > .dropdown-menu-trabalhos {
    display: block !important;
  }
}

@media (max-width: 767.98px) {
  .navbar.navbar-default .container {
    display: block !important;
  }

  .navbar-header {
    min-height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .navbar-toggle {
    display: block !important;
  }

  .navigation.navbar-collapse,
  .navbar-ex1-collapse {
    width: 100% !important;
  }

  .navigation.navbar-collapse.collapse:not(.show):not(.in) {
    display: none !important;
  }

  .navigation.navbar-collapse.collapse.show,
  .navigation.navbar-collapse.collapse.in {
    display: block !important;
    height: auto !important;
    max-height: calc(100vh - 74px) !important;
    overflow-y: auto !important;
  }

  .navbar-nav {
    display: block !important;
    width: 100% !important;
    padding: 8px 0 14px !important;
  }

  .navbar-nav > li,
  .navbar-nav > li > a {
    display: block !important;
    width: 100% !important;
  }

  .navbar-nav > li > a {
    padding: 12px 15px !important;
  }

  .dropdown-trabalhos.open > .dropdown-menu-trabalhos,
  .dropdown-trabalhos.show > .dropdown-menu-trabalhos {
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    min-width: 100% !important;
  }
}

/* Garante que o menu não fique oculto pelo CSS antigo do tema */
nav.navbar.navbar-default,
.navbar-default.fixed-to-top,
.navbar-default {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  top: 0 !important;
}

/* Banner principal: remove altura fixa que deixava bloco preto abaixo da imagem */
#intro,
#intro .intro-container,
#introCarousel,
#carousel-service2,
#introCarousel .carousel-inner,
#carousel-service2 .carousel-inner,
#introCarousel .carousel-item,
#introCarousel .item,
#carousel-service2 .carousel-item,
#carousel-service2 .item,
#introCarousel .carousel-background,
#carousel-service2 .screenshot {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

#intro,
#intro .intro-container,
#introCarousel,
#carousel-service2 {
  background: #020918 !important;
  overflow: hidden !important;
}

#introCarousel .carousel-inner,
#carousel-service2 .carousel-inner {
  background: transparent !important;
}

#introCarousel .carousel-item,
#introCarousel .item,
#carousel-service2 .carousel-item,
#carousel-service2 .item {
  position: relative !important;
  width: 100% !important;
  background: transparent !important;
}

#introCarousel .carousel-background,
#carousel-service2 .screenshot {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  background: #020918 !important;
}

#introCarousel .carousel-background img,
#carousel-service2 .screenshot img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#intro .carousel-container {
  pointer-events: none !important;
}

#intro .carousel-content {
  pointer-events: auto !important;
}

#intro .carousel-control-prev,
#intro .carousel-control-next,
#carousel-service2 .carousel-control-prev,
#carousel-service2 .carousel-control-next,
#carousel-service2 .carousel-control,
#introCarousel .carousel-control {
  width: 9% !important;
  height: 80px !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 80 !important;
  opacity: .85 !important;
  background: transparent !important;
  text-decoration: none !important;
  pointer-events: auto !important;
}

#intro .carousel-control-prev {
  left: 0 !important;
}

#intro .carousel-control-next {
  right: 0 !important;
}

#intro .carousel-control-prev-icon,
#intro .carousel-control-next-icon,
#carousel-service2 .carousel-control-prev-icon,
#carousel-service2 .carousel-control-next-icon {
  background-image: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  color: #ffffff !important;
  font-size: 44px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
}

#intro .carousel-indicators,
#carousel-service2 .carousel-indicators {
  z-index: 85 !important;
  pointer-events: auto !important;
}

@media (max-width: 767.98px) {
  #intro .container,
  #intro .row,
  #intro .col-xs-12 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #carousel-service2 .carousel-caption {
    bottom: 8px !important;
  }
}

/* ==================== INDEX / SEÇÕES / CARROSSÉIS ==================== */

/* =====================================================
   AJUSTE CLIQUE DO CARROSSEL DO BANNER
   ===================================================== */
#introCarousel,
#carousel-service2,
#introCarousel .carousel-inner,
#introCarousel .item,
#carousel-service2 .carousel-inner,
#carousel-service2 .item {
    pointer-events: auto !important;
}

#introCarousel .carousel-control,
#carousel-service2 .carousel-control,
#introCarousel .carousel-indicators,
#carousel-service2 .carousel-indicators {
    z-index: 50 !important;
    pointer-events: auto !important;
}

#introCarousel .carousel-background img,
#carousel-service2 .screenshot img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* =========================================================
   CORREÇÃO IVANI CORDEIRO - FUNDO ROSA CLARO + TEXTO LEGÍVEL
   Sem alterar lógica PHP, consultas, menu, banner ou formulários.
   ========================================================= */

/* Fundo geral claro em tom rosa */
body,
#main,
.home-section,
.home-section.bg-white,
.home-section.bg-gray,
section,
#about,
#services,
#portfolio,
#team,
#contact,
#consulta,
#diagnostico,
#trabalhos,
#trabalhos-concluidos {
    background: #fde8ef !important;
}

/* Textos principais em tom escuro para leitura */
body,
.home-section,
.home-section p,
.home-section li,
.home-section span,
.home-section div,
.section-heading p,
.section-subtitle,
.content,
.content p,
.content li,
#about,
#about p,
#about li,
#about span,
#services p,
#services li,
#portfolio p,
#portfolio li,
#team p,
#team li,
#contact p,
#contact li {
    color: #5f3343 !important;
}

/* Títulos com rosa mais forte */
h1, h2, h3, h4, h5, h6,
.home-section h1,
.home-section h2,
.home-section h3,
.home-section h4,
.home-section h5,
.home-section h6,
.section-heading h1,
.section-heading h2,
.section-heading h3,
.section-heading h4,
.section-title {
    color: #9f315b !important;
    text-shadow: none !important;
}

/* Menu continua claro, mas com leitura */
.navbar,
.navbar-default {
    background: #f8c8d7 !important;
    border-color: rgba(159,49,91,0.15) !important;
}

.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(120,40,70,0.18) !important;
    font-weight: 700 !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a:hover {
    color: #ffffff !important;
    background: rgba(159,49,91,0.18) !important;
}

/* Dropdown Trabalhos */
.dropdown-menu-trabalhos,
.navbar-nav .open .dropdown-menu.dropdown-menu-trabalhos {
    background: #fff3f7 !important;
    border: 1px solid rgba(159,49,91,0.22) !important;
}

.dropdown-menu-trabalhos > li > a,
.dropdown-menu-trabalhos .dropdown-header {
    color: #713145 !important;
}

.dropdown-menu-trabalhos > li > a:hover {
    background: #f8c8d7 !important;
    color: #7a1f42 !important;
}

/* Seção SOBRE com duas colunas */
#about {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
}

/* Imagem do sobre sem cortar */
#about img,
.about-img img,
.img-sobre,
.sobre-img img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #fff8fb !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 34px rgba(159,49,91,0.16) !important;
}

/* Caixas/cards com contraste */
.box-team,
.service-box,
.service-card,
.problema-card,
.tech-card,
.portfolio-item,
.well,
.card {
    background: #fff3f7 !important;
    color: #5f3343 !important;
    border: 1px solid rgba(159,49,91,0.12) !important;
    border-radius: 16px !important;
}

/* Botões */
.btn-theme,
.btn-primary {
    background: #c94f78 !important;
    color: #ffffff !important;
    border-color: #c94f78 !important;
}

.btn-theme:hover,
.btn-primary:hover {
    background: #a9325e !important;
    color: #ffffff !important;
}

/* Linha abaixo dos títulos */
.heading-line,
.section-heading .heading-line {
    background: #9f315b !important;
    border-color: #9f315b !important;
}

/* Formulários */
.form-control,
input,
textarea,
select {
    background: #fff8fb !important;
    color: #5f3343 !important;
    border-color: rgba(159,49,91,0.25) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #9b6b7d !important;
}

/* Rodapé em tom rosa escuro para contraste */
footer,
#bottom-widget {
    background: #c94f78 !important;
    color: #ffffff !important;
}

footer p,
footer a,
footer span,
footer li,
#bottom-widget p,
#bottom-widget a,
#bottom-widget span,
#bottom-widget li {
    color: #ffffff !important;
}

/* WhatsApp flutuante preservado */
#btn-whatsapp-float,
.whatsapp-float,
.float-whatsapp {
    z-index: 999999 !important;
}

/* Mobile */
@media (max-width: 767px) {
    body,
    #main,
    .home-section,
    section {
        background: #fde8ef !important;
    }

    .home-section p,
    .home-section li,
    #about p,
    #about li,
    #about span {
        color: #5f3343 !important;
        font-size: 16px !important;
        line-height: 1.75 !important;
    }

    h1, h2, h3, h4,
    .section-title,
    .section-heading h4 {
        color: #9f315b !important;
        line-height: 1.25 !important;
    }

    .navbar-collapse,
    .navigation,
    .navbar-ex1-collapse {
        background: #f8c8d7 !important;
        z-index: 99999 !important;
    }

    .navbar-default .navbar-nav > li > a {
        color: #ffffff !important;
        padding: 12px 15px !important;
    }

    #about img,
    .about-img img,
    .img-sobre,
    .sobre-img img {
        margin-bottom: 22px !important;
        border-radius: 14px !important;
    }
}

/* ===== AJUSTE SOBRE IVANI CORDEIRO ===== */

#about{
    background:#f9dbe3 !important;
    padding:60px 0 !important;
}

#about .section-heading h4{
    color:#b14f72 !important;
    font-weight:700 !important;
}

#about .section-heading p{
    color:#7a4b5d !important;
}

#about .content{
    color:#6a4451 !important;
    font-size:20px !important;
    line-height:1.9 !important;
    font-weight:500 !important;
}

#about .content p,
#about .content li,
#about .content span{
    color:#6a4451 !important;
}

#about .about-img img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    border-radius:18px !important;
    object-fit:contain !important;
    background:#fff !important;
    box-shadow:0 8px 30px rgba(0,0,0,0.12) !important;
}

/* MOBILE */
@media(max-width:768px){

    #about{
        padding:35px 15px !important;
    }

    #about .content{
        margin-top:25px !important;
        font-size:17px !important;
        line-height:1.8 !important;
        text-align:left !important;
    }

    #about .about-img img{
        width:100% !important;
        height:auto !important;
    }
}

/* =====================================================
   CORREÇÃO CARROSSEL INDEX COM BOOTSTRAP 5.3.8
   Mantém item para CSS antigo e adiciona carousel-item.
   ===================================================== */
#carousel-service .carousel-item,
#carousel-clientes-desktop .carousel-item,
#carousel-clientes-mobile .carousel-item {
  width: 100% !important;
}

#carousel-service .carousel-item.active,
#carousel-clientes-desktop .carousel-item.active,
#carousel-clientes-mobile .carousel-item.active {
  display: block !important;
}

#carousel-clientes-desktop .carousel-control,
#carousel-clientes-mobile .carousel-control,
#carousel-clientes-desktop .carousel-control-prev,
#carousel-clientes-desktop .carousel-control-next,
#carousel-clientes-mobile .carousel-control-prev,
#carousel-clientes-mobile .carousel-control-next {
  width: 7% !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  height: 70px !important;
  z-index: 50 !important;
  background: transparent !important;
  text-decoration: none !important;
  opacity: .85 !important;
}

#carousel-clientes-desktop .left.carousel-control,
#carousel-clientes-mobile .left.carousel-control {
  left: 0 !important;
}

#carousel-clientes-desktop .right.carousel-control,
#carousel-clientes-mobile .right.carousel-control {
  right: 0 !important;
}

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

/* =====================================================
   RODAPÉ IVANI CORDEIRO - TEXTO ESCURO LEGÍVEL
   Mantém a lógica PHP e usa a cor padrão do sistema.
   ===================================================== */

#bottom-widget,
footer {
    background: var(--jc-cor-sistema) !important;
}

/* Textos escuros no rodapé, porque o fundo do sistema é rosa claro */
#bottom-widget,
#bottom-widget h5,
#bottom-widget p,
#bottom-widget a,
#bottom-widget span,
footer,
footer p,
footer a,
footer span {
    color: #7a2f4f !important;
}

#bottom-widget h5,
footer a {
    color: #9f315b !important;
    font-weight: 700 !important;
}

#bottom-widget .contact-widget i {
    color: #9f315b !important;
}

/* Redes sociais: círculo suave e ícone escuro */
#bottom-widget .social-network .fa-circle {
    color: rgba(159,49,91,0.16) !important;
}

#bottom-widget .social-network .fa-inverse {
    color: #9f315b !important;
}

#bottom-widget .social-network a:hover .fa-circle {
    color: rgba(159,49,91,0.28) !important;
}

#bottom-widget .social-network a:hover .fa-inverse {
    color: #7a2f4f !important;
}

/* Barra inferior */
footer {
    border-top: 1px solid rgba(159,49,91,0.18);
}

.footer-legal-links {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.6;
    white-space: nowrap;
}

.footer-legal-links a {
    display: inline-block;
    margin: 0 6px;
}

.footer-legal-links .footer-separador {
    display: inline-block;
    margin: 0 8px;
    opacity: 0.5;
}

@media (max-width: 767px) {
    .footer-legal-links {
        white-space: normal;
    }
}

/* Mantém o botão WhatsApp verde e branco */
#btn-whatsapp-float,
#btn-whatsapp-float i {
    color: #ffffff !important;
}


/* Colaborador - imagem clicável e carrossel com interação segura */
.jc-colaborador-img-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.jc-colaborador-img-link img {
    transition: transform .25s ease, box-shadow .25s ease;
}

.jc-colaborador-img-link:hover img,
.jc-colaborador-img-link:focus img {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}

.jc-colaborador-link {
    text-decoration: none;
}

.jc-colaborador-link:hover,
.jc-colaborador-link:focus {
    text-decoration: underline;
}

/* =====================================================
   CONTATO PROFISSIONAL - GOOGLE MAPS + reCAPTCHA
   Mantém consultas e padrão do sistema. Apenas organiza visual.
   ===================================================== */
.jc-contact-section{
    padding:48px 0 !important;
}

.jc-contact-heading{
    margin-bottom:28px !important;
}

.jc-contact-grid{
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
}

.jc-contact-grid > [class*="col-"]{
    display:flex;
    margin-bottom:24px;
}

.jc-contact-card{
    width:100%;
    background:#ffffff !important;
    border:1px solid rgba(159,49,91,.16);
    border-radius:22px;
    padding:24px;
    box-shadow:0 18px 45px rgba(95,51,67,.10);
    overflow:hidden;
}

.jc-contact-card-info{
    background:linear-gradient(180deg,#ffffff 0%,#fff5f8 100%) !important;
}

.jc-contact-card-form{
    background:#ffffff !important;
}

.jc-contact-card-header{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:20px;
}

.jc-contact-card-header h5{
    margin:0 0 3px;
    color:#9f315b !important;
    font-size:20px;
    font-weight:800;
}

.jc-contact-card-header p{
    margin:0;
    color:#7a4b5d !important;
    font-size:14px;
    line-height:1.45;
}

.jc-contact-icon-main{
    width:48px;
    height:48px;
    min-width:48px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f8c8d7;
    color:#9f315b;
    font-size:22px;
    box-shadow:0 8px 20px rgba(159,49,91,.18);
}

.jc-contact-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:18px;
}

.jc-contact-line{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    border-radius:15px;
    background:#fff8fa;
    border:1px solid rgba(159,49,91,.12);
    color:#5f3343 !important;
    text-decoration:none !important;
    font-weight:700;
    line-height:1.4;
    transition:all .2s ease;
}

.jc-contact-line:hover{
    transform:translateY(-2px);
    border-color:rgba(159,49,91,.30);
    box-shadow:0 10px 24px rgba(159,49,91,.10);
}

.jc-contact-line i{
    width:22px;
    text-align:center;
    color:#9f315b;
    font-size:18px;
}

.jc-contact-map{
    min-height:280px;
    border-radius:18px !important;
    overflow:hidden;
    border:1px solid rgba(159,49,91,.14) !important;
    background:#fff3f7 !important;
}

.jc-contact-map iframe{
    display:block;
    width:100%;
    min-height:280px;
    border:0;
    border-radius:18px;
}

.jc-contact-label{
    display:block;
    margin-bottom:7px;
    color:#713145 !important;
    font-size:13px;
    font-weight:800;
}

.jc-contact-card .form-control{
    min-height:46px;
    border:1px solid rgba(159,49,91,.18) !important;
    border-radius:14px !important;
    background:#fffafe !important;
    color:#5f3343 !important;
    box-shadow:none !important;
}

.jc-contact-card textarea.form-control{
    min-height:138px;
    resize:vertical;
}

.jc-contact-card .form-control:focus{
    border-color:#9f315b !important;
    box-shadow:0 0 0 3px rgba(159,49,91,.12) !important;
}

.jc-contact-privacy{
    font-size:13px !important;
    line-height:1.6 !important;
    color:#7a4b5d !important;
    margin:10px 0 16px !important;
}

.jc-contact-privacy a{
    color:#9f315b !important;
    font-weight:800;
    text-decoration:none;
}

.jc-contact-privacy a:hover{
    text-decoration:underline;
}

.jc-recaptcha-box{
    margin:16px 0 8px;
    padding:12px;
    border-radius:14px;
    background:#fff8fa;
    border:1px solid rgba(159,49,91,.14);
    overflow:auto;
}

.jc-recaptcha-status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:14px 0 4px;
    padding:10px 13px;
    border-radius:999px;
    background:#fff8fa;
    color:#713145 !important;
    border:1px solid rgba(159,49,91,.14);
    font-size:13px;
    font-weight:800;
}

.jc-recaptcha-status i{
    color:#9f315b;
}

.jc-contact-submit{
    border-radius:14px !important;
    font-weight:800 !important;
    letter-spacing:.2px;
    padding:13px 18px !important;
}

@media (max-width: 767px){
    .jc-contact-section{
        padding:34px 0 !important;
    }

    .jc-contact-card{
        padding:18px;
        border-radius:18px;
    }

    .jc-contact-card-header{
        align-items:flex-start;
    }

    .jc-contact-map,
    .jc-contact-map iframe{
        min-height:240px;
    }

    .jc-recaptcha-box .g-recaptcha{
        transform:scale(.88);
        transform-origin:left top;
    }
}

/* =====================================================
   AJUSTE FINAL - SEÇÕES EM DEGRADÊ ROSA SUAVE ALTERNADO
   Bootstrap 5: mantém estrutura atual, sem alterar PHP/banco/conexão.
   Ordem visual: seção 1 rosa clarinho, seção 2 rosa claro, até o rodapé.
   ===================================================== */
:root{
    --jc-rosa-texto:#4f3f46;
    --jc-rosa-titulo:#a83663;
    --jc-rosa-link:#b12f67;
    --jc-rosa-linha:#b95a7a;

    --jc-rosa-suave-1:#fffefe;
    --jc-rosa-suave-2:#fff7fa;
    --jc-rosa-suave-3:#fdeff5;

    --jc-rosa-claro-1:#fff8fb;
    --jc-rosa-claro-2:#fde7ef;
    --jc-rosa-claro-3:#fbd7e5;

    --jc-rosa-rodape-1:#fff8fb;
    --jc-rosa-rodape-2:#f9d6e4;
    --jc-rosa-rodape-3:#f3bfd4;
}

body,
#main{
    background:var(--jc-rosa-suave-2) !important;
    color:var(--jc-rosa-texto) !important;
}

#main > .home-section,
#main > section.home-section,
#bottom-widget.home-section{
    margin:0 !important;
    padding-top:56px !important;
    padding-bottom:56px !important;
    border:0 !important;
    color:var(--jc-rosa-texto) !important;
}

#about.home-section,
#portfolio.home-section,
#contact.home-section{
    background:linear-gradient(135deg, var(--jc-rosa-suave-1) 0%, var(--jc-rosa-suave-2) 55%, var(--jc-rosa-suave-3) 100%) !important;
}

#services.home-section,
#team.home-section,
#bottom-widget.home-section{
    background:linear-gradient(135deg, var(--jc-rosa-claro-1) 0%, var(--jc-rosa-claro-2) 55%, var(--jc-rosa-claro-3) 100%) !important;
}

#main > .home-section + .home-section,
#bottom-widget{
    box-shadow:inset 0 1px 0 rgba(168,54,99,.08) !important;
}

.home-section .section-heading,
.jc-contact-heading{
    margin-bottom:34px !important;
}

.home-section .section-heading h4,
.home-section h1,
.home-section h2,
.home-section h3,
.home-section h4,
.home-section h5,
.home-section h6{
    color:var(--jc-rosa-titulo) !important;
    text-shadow:none !important;
}

.home-section p,
.home-section li,
.home-section span,
.home-section div,
.home-section .content,
.home-section .content p,
.home-section .content li,
.section-heading p{
    color:var(--jc-rosa-texto) !important;
}

.home-section a:not(.btn):not(.carousel-control):not(.carousel-control-prev):not(.carousel-control-next),
.home-section a:not(.btn):visited{
    color:var(--jc-rosa-link) !important;
}

.heading-line,
.section-heading .heading-line{
    background:linear-gradient(90deg, transparent 0%, var(--jc-rosa-linha) 50%, transparent 100%) !important;
    border:0 !important;
    height:3px !important;
    max-width:160px !important;
}

.about-img img,
.screenshot img,
.box-team,
.service-box,
.service-card,
.problema-card,
.tech-card,
.portfolio-item,
.card,
.well,
.jc-contact-card{
    background:rgba(255,255,255,.86) !important;
    border:1px solid rgba(168,54,99,.10) !important;
    box-shadow:0 16px 38px rgba(95,51,67,.08) !important;
}

#about img,
.about-img img,
.screenshot img{
    border-radius:20px !important;
}

#bottom-widget{
    margin-top:0 !important;
    padding:44px 0 30px !important;
}

#bottom-widget,
#bottom-widget h5,
#bottom-widget p,
#bottom-widget a,
#bottom-widget span,
#bottom-widget li{
    color:var(--jc-rosa-texto) !important;
}

#bottom-widget h5,
#bottom-widget .contact-widget i,
#bottom-widget a{
    color:var(--jc-rosa-titulo) !important;
}

footer{
    background:linear-gradient(135deg, var(--jc-rosa-rodape-1) 0%, var(--jc-rosa-rodape-2) 58%, var(--jc-rosa-rodape-3) 100%) !important;
    color:var(--jc-rosa-texto) !important;
    border-top:1px solid rgba(168,54,99,.10) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.80) !important;
}

footer p,
footer a,
footer span,
footer li,
footer .footer-legal-links{
    color:var(--jc-rosa-texto) !important;
}

footer a,
footer a:visited{
    color:var(--jc-rosa-link) !important;
    font-weight:800 !important;
    text-decoration:none !important;
}

footer a:hover,
footer a:focus{
    color:#8e2550 !important;
    text-decoration:underline !important;
}

@media (max-width:767px){
    #main > .home-section,
    #main > section.home-section,
    #bottom-widget.home-section{
        padding-top:42px !important;
        padding-bottom:42px !important;
    }

    .home-section .section-heading,
    .jc-contact-heading{
        margin-bottom:24px !important;
    }
}

/* =====================================================
   CORREÇÃO FINAL - SETAS DO BANNER DENTRO DO CARROSSEL
   Mantém a estrutura atual. Corrige apenas a posição das setas.
   ===================================================== */
#introCarousel{
    position:relative !important;
}

#introCarousel > .carousel-control-prev,
#introCarousel > .carousel-control-next{
    position:absolute !important;
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
    width:54px !important;
    height:72px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(95,51,67,.18) !important;
    border-radius:14px !important;
    opacity:.95 !important;
    z-index:90 !important;
    text-decoration:none !important;
    pointer-events:auto !important;
}

#introCarousel > .carousel-control-prev{
    left:24px !important;
    right:auto !important;
}

#introCarousel > .carousel-control-next{
    right:24px !important;
    left:auto !important;
}

#introCarousel > .carousel-control-prev:hover,
#introCarousel > .carousel-control-next:hover,
#introCarousel > .carousel-control-prev:focus,
#introCarousel > .carousel-control-next:focus{
    background:rgba(159,49,91,.34) !important;
    opacity:1 !important;
}

#introCarousel > .carousel-control-prev .carousel-control-prev-icon,
#introCarousel > .carousel-control-next .carousel-control-next-icon{
    width:34px !important;
    height:34px !important;
    font-size:42px !important;
    line-height:34px !important;
    color:#ffffff !important;
    background-image:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-shadow:0 2px 8px rgba(0,0,0,.35) !important;
}

@media (max-width:767.98px){
    #introCarousel > .carousel-control-prev,
    #introCarousel > .carousel-control-next{
        width:42px !important;
        height:56px !important;
        border-radius:12px !important;
    }

    #introCarousel > .carousel-control-prev{
        left:10px !important;
    }

    #introCarousel > .carousel-control-next{
        right:10px !important;
    }

    #introCarousel > .carousel-control-prev .carousel-control-prev-icon,
    #introCarousel > .carousel-control-next .carousel-control-next-icon{
        width:28px !important;
        height:28px !important;
        font-size:34px !important;
        line-height:28px !important;
    }
}

/* =====================================================
   PORTFÓLIO / TRABALHOS - CARDS PROFISSIONAIS
   Corrige os cards da página inicial sem alterar consulta ou banco.
   ===================================================== */
#portfolio.jc-portfolio-section{
    padding-top:56px !important;
    padding-bottom:64px !important;
}

#portfolio .jc-portfolio-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    width:100%;
    max-width:1180px;
    padding:8px 0 0 !important;
    margin:0 auto !important;
    text-align:left !important;
}

#portfolio .jc-portfolio-grid:before,
#portfolio .jc-portfolio-grid:after{
    content:none !important;
}

#portfolio .jc-portfolio-item{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    vertical-align:top !important;
}

#portfolio .jc-portfolio-card,
#portfolio .jc-portfolio-card:visited{
    position:relative !important;
    display:flex !important;
    flex-direction:column;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    overflow:hidden;
    border:1px solid rgba(168,54,99,.13) !important;
    border-radius:22px !important;
    background:rgba(255,255,255,.92) !important;
    box-shadow:0 18px 46px rgba(95,51,67,.10) !important;
    color:#5f3343 !important;
    text-decoration:none !important;
    outline:none !important;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

#portfolio .jc-portfolio-card:hover,
#portfolio .jc-portfolio-card:focus{
    transform:translateY(-5px);
    border-color:rgba(168,54,99,.28) !important;
    box-shadow:0 24px 58px rgba(95,51,67,.15) !important;
    text-decoration:none !important;
}

#portfolio .jc-portfolio-card-media{
    display:block;
    position:relative;
    width:100%;
    aspect-ratio:16/10;
    background:linear-gradient(135deg,#fff8fb 0%,#fde8ef 100%);
    overflow:hidden;
}

#portfolio .jc-portfolio-card-media:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,0) 48%,rgba(95,51,67,.18) 100%);
    pointer-events:none;
}

#portfolio .jc-portfolio-card-media img,
#portfolio .og-grid li > a.jc-portfolio-card img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    border:0 !important;
    border-radius:0 !important;
    transition:transform .28s ease;
}

#portfolio .jc-portfolio-card:hover .jc-portfolio-card-media img{
    transform:scale(1.035);
}

#portfolio .jc-portfolio-card-body{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    width:100%;
    min-width:0;
    height:auto;
    padding:18px 18px 20px;
    min-height:158px;
}

#portfolio .jc-portfolio-card-body strong{
    display:block;
    width:100%;
    max-width:100%;
    color:#9f315b !important;
    font-size:18px;
    line-height:1.25;
    font-weight:900;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:break-word;
    word-break:normal;
}

#portfolio .jc-portfolio-card-body small{
    display:block;
    width:100%;
    max-width:100%;
    color:#6d4050 !important;
    font-size:13px;
    line-height:1.55;
    font-weight:500;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:break-word;
    word-break:normal;
}

#portfolio .jc-portfolio-card-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:auto;
    max-width:100%;
    margin-top:auto;
    padding:9px 15px;
    border-radius:999px;
    background:linear-gradient(135deg,#c94f78,#a9325e);
    color:#fff !important;
    font-size:12px;
    font-weight:900;
    line-height:1.25;
    letter-spacing:.02em;
    text-align:center;
    text-transform:uppercase;
    white-space:normal !important;
    box-shadow:0 10px 22px rgba(169,50,94,.18);
}

#portfolio .jc-portfolio-card-action.is-pending{
    background:#f8d9e5;
    color:#7a3850 !important;
    box-shadow:none;
}

#portfolio .og-expanded .jc-portfolio-card{
    border-color:rgba(169,50,94,.38) !important;
}

#portfolio .og-expander{
    margin-top:18px !important;
    border-radius:24px !important;
    background:rgba(255,255,255,.94) !important;
    box-shadow:0 24px 60px rgba(95,51,67,.14) !important;
    border:1px solid rgba(168,54,99,.14) !important;
}

#portfolio .og-expander-inner{
    padding:38px 30px !important;
}

#portfolio .og-fullimg{
    background:#fff7fb !important;
    border-radius:20px !important;
    overflow:hidden;
}

#portfolio .og-fullimg img{
    width:100%;
    height:auto;
    border-radius:20px;
}

#portfolio .og-details,
#portfolio .og-details h3,
#portfolio .og-details h4,
#portfolio .og-details p{
    color:#5f3343 !important;
}

#portfolio .og-details h3,
#portfolio .og-details h4{
    color:#9f315b !important;
    font-weight:900 !important;
}

#portfolio .og-details a.btn,
#portfolio .og-details a.btn:visited{
    border-radius:999px !important;
    background:linear-gradient(135deg,#c94f78,#a9325e) !important;
    border:0 !important;
    color:#fff !important;
    padding:11px 22px !important;
    font-weight:900 !important;
    text-decoration:none !important;
}

#portfolio .og-details a.btn:hover{
    background:linear-gradient(135deg,#a9325e,#84294b) !important;
    color:#fff !important;
}

@media (max-width:991px){
    #portfolio .jc-portfolio-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:18px;
    }
}

@media (max-width:575px){
    #portfolio.jc-portfolio-section{
        padding-top:42px !important;
        padding-bottom:46px !important;
    }

    #portfolio .jc-portfolio-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    #portfolio .jc-portfolio-card-body{
        min-height:auto;
        padding:16px;
    }

    #portfolio .og-expander-inner{
        padding:24px 16px !important;
    }
}

/* =====================================================
   AJUSTE SEÇÕES INDEX - CENTRALIZAÇÃO E LARGURA
   Corrige classes antigas de offset após Bootstrap 5.
   Sem alterar consultas, banco ou lógica PHP.
   ===================================================== */
#main,
#main > section.home-section{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
}

#main > section.home-section > .container{
    width:100% !important;
    max-width:1220px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:24px !important;
    padding-right:24px !important;
}

#main > section.home-section > .container > .row{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

#main > section.home-section > .container > .row > [class*="col-"]{
    padding-left:12px !important;
    padding-right:12px !important;
}

#main .section-heading,
#main .jc-contact-heading{
    width:100% !important;
    max-width:920px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
}

#main .section-heading h1,
#main .section-heading h2,
#main .section-heading h3,
#main .section-heading h4,
#main .jc-contact-heading h1,
#main .jc-contact-heading h2,
#main .jc-contact-heading h3,
#main .jc-contact-heading h4{
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
}

#main .section-heading p,
#main .jc-contact-heading p{
    width:100% !important;
    max-width:820px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
}

#main .section-heading .heading-line,
#main .jc-contact-heading .heading-line{
    margin-left:auto !important;
    margin-right:auto !important;
}

#about .content,
#services .bounceInLeft{
    width:100% !important;
    max-width:680px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

#services .carousel-item > .row,
#team .carousel-item > .row{
    align-items:center !important;
    justify-content:center !important;
}

#team .box-team{
    text-align:center !important;
    width:100% !important;
}

@media (max-width:767px){
    #main > section.home-section > .container{
        padding-left:16px !important;
        padding-right:16px !important;
    }

    #main > section.home-section > .container > .row > [class*="col-"]{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    #about .content,
    #services .bounceInLeft{
        max-width:100% !important;
        text-align:center !important;
    }
}

/* =====================================================
   SEÇÃO SOBRE - TÍTULO CENTRALIZADO E 2 CARDS
   Título/subtítulo ficam acima dos cards em 100% da seção.
   Card de mídia à esquerda e card de texto à direita no desktop.
   Mobile empilha em 100%.
   ===================================================== */
#about.jc-about-section{
    width:100% !important;
    padding-top:64px !important;
    padding-bottom:64px !important;
}

#about.jc-about-section > .container{
    width:100% !important;
    max-width:1180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

#about .jc-about-heading{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto 34px auto !important;
    padding:0 !important;
    text-align:center !important;
}

#about .jc-about-heading h4{
    width:100% !important;
    margin:0 0 14px 0 !important;
    color:#b64b76 !important;
    font-weight:800 !important;
    font-size:30px !important;
    line-height:1.22 !important;
    text-align:center !important;
}

#about .jc-about-heading .heading-line{
    display:block !important;
    width:76px !important;
    height:3px !important;
    margin:0 auto 16px auto !important;
    background:linear-gradient(90deg,#f7c9d9,#b64b76,#f7c9d9) !important;
}

#about .jc-about-heading p{
    max-width:860px !important;
    margin:0 auto !important;
    color:#8a405b !important;
    font-size:18px !important;
    line-height:1.55 !important;
    text-align:center !important;
}

#about .jc-about-row{
    display:flex !important;
    flex-wrap:wrap !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    align-items:stretch !important;
    justify-content:center !important;
}

#about .jc-about-row > .about-img,
#about .jc-about-row > .content{
    display:flex !important;
    align-items:stretch !important;
    width:50% !important;
    max-width:50% !important;
    flex:0 0 50% !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

#about .jc-about-card{
    width:100% !important;
    height:100% !important;
    border:1px solid rgba(188,76,120,.16) !important;
    border-radius:28px !important;
    background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,242,247,.92)) !important;
    box-shadow:0 18px 45px rgba(120,39,76,.10) !important;
    overflow:hidden !important;
}

#about .jc-about-card-media{
    min-height:100% !important;
    padding:16px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

#about .jc-about-card-media img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    border-radius:22px !important;
    object-fit:contain !important;
    box-shadow:none !important;
}

#about .jc-about-card-media iframe{
    width:100% !important;
    min-height:380px !important;
    border:0 !important;
    border-radius:22px !important;
}

#about .jc-about-card-text{
    padding:34px 36px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    color:#6f2f46 !important;
    font-size:18px !important;
    line-height:1.65 !important;
    text-align:left !important;
}

#about .jc-about-description{
    width:100% !important;
    text-align:left !important;
}

#about .jc-about-description p,
#about .jc-about-description li,
#about .jc-about-description span,
#about .jc-about-description div{
    color:#6f2f46 !important;
    font-size:18px !important;
    line-height:1.65 !important;
}

#about .jc-about-description p:last-child{
    margin-bottom:0 !important;
}

@media (max-width:991px){
    #about.jc-about-section{
        padding-top:48px !important;
        padding-bottom:48px !important;
    }

    #about.jc-about-section > .container{
        max-width:100% !important;
        padding-left:22px !important;
        padding-right:22px !important;
    }

    #about .jc-about-card-text{
        padding:28px !important;
    }

    #about .jc-about-card-media iframe{
        min-height:320px !important;
    }

    #about .jc-about-heading h4{
        font-size:26px !important;
    }
}

@media (max-width:767px){
    #about.jc-about-section{
        padding-top:42px !important;
        padding-bottom:42px !important;
    }

    #about.jc-about-section > .container{
        padding-left:16px !important;
        padding-right:16px !important;
    }

    #about .jc-about-heading{
        margin-bottom:24px !important;
    }

    #about .jc-about-heading h4{
        font-size:24px !important;
    }

    #about .jc-about-heading p{
        font-size:16px !important;
    }

    #about .jc-about-row{
        row-gap:18px !important;
    }

    #about .jc-about-row > .about-img,
    #about .jc-about-row > .content{
        width:100% !important;
        max-width:100% !important;
        flex:0 0 100% !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }

    #about .jc-about-card{
        border-radius:22px !important;
    }

    #about .jc-about-card-media{
        padding:12px !important;
    }

    #about .jc-about-card-media img,
    #about .jc-about-card-media iframe{
        border-radius:18px !important;
    }

    #about .jc-about-card-media iframe{
        min-height:260px !important;
    }

    #about .jc-about-card-text{
        padding:24px 20px !important;
    }
}


/* =====================================================
   PORTFÓLIO - MODAL AO CLICAR NA IMAGEM/CARD
   Corrige abertura do portfólio sem alterar banco ou conexão.
   ===================================================== */
#portfolio button.jc-portfolio-card{
    border:1px solid rgba(168,54,99,.13) !important;
    text-align:left !important;
    cursor:pointer !important;
    font-family:inherit !important;
}

#portfolio button.jc-portfolio-card:focus-visible{
    outline:3px solid rgba(201,79,120,.28) !important;
    outline-offset:3px !important;
}

#portfolio .og-grid li > button.jc-portfolio-card img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    border:0 !important;
    border-radius:0 !important;
    transition:transform .28s ease;
}

.jc-portfolio-modal .modal-content{
    position:relative;
    border:1px solid rgba(168,54,99,.16);
    border-radius:26px;
    overflow:hidden;
    background:linear-gradient(135deg,#fffafb 0%,#fff3f7 100%);
    box-shadow:0 28px 70px rgba(95,51,67,.22);
}

.jc-portfolio-modal .modal-body{
    padding:32px;
}

.jc-portfolio-modal-close{
    position:absolute;
    top:18px;
    right:18px;
    z-index:3;
    width:38px;
    height:38px;
    border-radius:50%;
    background-color:#fff;
    box-shadow:0 10px 24px rgba(95,51,67,.16);
    opacity:1;
}

.jc-portfolio-modal-media{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:360px;
    border:1px solid rgba(168,54,99,.13);
    border-radius:22px;
    overflow:hidden;
    background:#fff;
}

.jc-portfolio-modal-media img,
.jc-portfolio-modal-media iframe{
    display:block;
    width:100%;
    height:100%;
    min-height:360px;
    border:0;
}

.jc-portfolio-modal-media img{
    object-fit:cover;
    object-position:center center;
}

.jc-portfolio-modal-content{
    padding:18px 10px;
}

.jc-portfolio-modal-label{
    display:inline-flex;
    align-items:center;
    margin-bottom:12px;
    padding:7px 12px;
    border-radius:999px;
    background:#f8d9e5;
    color:#9f315b;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.jc-portfolio-modal-content h5{
    margin:0;
    color:#9f315b;
    font-size:30px;
    line-height:1.18;
    font-weight:900;
}

.jc-portfolio-modal-description{
    margin-top:22px;
    color:#653446;
    font-size:16px;
    line-height:1.75;
}

.jc-portfolio-modal-description p{
    margin-bottom:12px;
}

.jc-portfolio-modal-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:24px;
}

.jc-portfolio-modal-actions .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:999px;
    padding:12px 22px;
    font-weight:900;
    text-transform:uppercase;
}

.jc-portfolio-modal-pending,
.jc-portfolio-modal-empty{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:10px 16px;
    background:#f8d9e5;
    color:#7a3850;
    font-size:13px;
    font-weight:800;
}

@media (max-width:767px){
    .jc-portfolio-modal .modal-body{
        padding:22px 16px;
    }

    .jc-portfolio-modal-media,
    .jc-portfolio-modal-media img,
    .jc-portfolio-modal-media iframe{
        min-height:260px;
    }

    .jc-portfolio-modal-content{
        padding:4px 0 0;
    }

    .jc-portfolio-modal-content h5{
        font-size:24px;
    }
}

/* =====================================================
   PORTFÓLIO - MODAL ACIMA DO FUNDO ESCURO
   Corrige a modal do portfólio ficando atrás do backdrop.
   ===================================================== */
#modalPortfolio.jc-portfolio-modal{
    z-index:2060 !important;
}

#modalPortfolio.jc-portfolio-modal .modal-dialog{
    position:relative;
    z-index:2061 !important;
}

#modalPortfolio.jc-portfolio-modal .modal-content{
    position:relative;
    z-index:2062 !important;
}

/* =====================================================
   PORTFÓLIO - MODAL SEM TRAVAR A TELA
   Mantém a modal acima do fundo e permite fechar corretamente.
   ===================================================== */
.jc-portfolio-modal-backdrop{
    z-index:2050 !important;
}

body.modal-open #modalPortfolio.jc-portfolio-modal{
    overflow-x:hidden !important;
    overflow-y:auto !important;
}