:root {
    /*  Cores principais (tema porto / água) */
    --blue-darc: #1F4E79;
    --blue: #2196F3;
    --blue-hover: #286eaf;
    --orange: #f2a900;
    --black: #000000;
    --black-hover: #2d2c2c;

    --thiner-border-sec: rgba(55, 65, 81, 0.2);
    --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.1);
    --border-color: #ddd;


    --deep-indigo: #001f54;


    --ocean-cyan: #00b4d8;
    --marine-blue: #0077b6;
    --text-gray: #555;

    /*  Text */
    --text-white: #FFFFFF;
    --text-light: rgba(255, 255, 255, 0.85);
    --text-dark: #1A1A1A;

    /*  Glass effect */
    --glass-bg: rgba(255, 255, 255, 0.12);
    --glass-border: rgba(255, 255, 255, 0.25);
    --glass-blur: 12px;

    /*  shadow */
    --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.3);

    /* FONT-SIZE */
    --section-title: 2rem;
    --section-title-2: clamp(32px, 4vw, 46px);
    --hero-title: 4rem;
    --general-text: 1.1rem;
    --general-color: #59616e;
    --width-of-the-content-in-hero-section: 50%;
}

/* baackground glass */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));

    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
}

.cut-text-20 {
    display: inline-block;
    /* Garante que a largura máxima funcione */
    max-width: 20ch;
    /* Limita o tamanho do texto para aprox. 20 caracteres */
    overflow: hidden;
    /* Esconde o texto que passar do limite */
    white-space: nowrap;
    /* Impede o texto de quebrar para a linha de baixo */
    text-overflow: ellipsis;
    /* Adiciona os três pontinhos (...) no final */
    vertical-align: bottom;
    /* Alinha corretamente se estiver ao lado de outros elementos */
}

.text-with-only-4-lines {
    -webkit-line-clamp: 4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: sans-serif;
}

h1,
h2,
h4,
h5,
h6,
p {
    padding: 0;
    margin: 0;
}

.text,
.text-1 {
    font-size: 1.2rem;
}

.text-1 {
    color: var(--text-white);
}

.text {
    color: #000000;
}

img {
    height: 100%;
    width: 100%;
}

body .ui-scrolltop {
    background: var(--deep-indigo);
}

body .ui-scrolltop:hover {
    background: var(--blue-hover);
}

/* ================NAV BAR STYLE======== */
/* Container pai */
/* ==========================================================================
   EXPANDIR O LAYOUT E O FORMULÁRIO PARA 100% DA LARGURA
   ========================================================================== */

.main-nav>ul>li {
    position: relative;
}

.dashboard-form {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    box-sizing: border-box !important;
    height: 96%
}

.dashboard-form .ui-datatable .ui-paginator.ui-paginator-bottom{
    margin: 0 !important;
}

/* Cabeçalho: Título à esquerda, Botão à direita */
.dashboard-table-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}


  .index-dashboard-container .card-dashboard {
  width: 100%;
  max-width: none;
}

.dashboard-table-header .table-title {
    margin: 0 !important;
    font-size: 1.75rem !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   ESPAÇAMENTO DA PAGINAÇÃO EM RELAÇÃO À TABELA
   ========================================================================== */

.dashboard-form .ui-datatable .ui-paginator {
    margin-top: 5rem !important;
    /* Empurra o paginador para baixo */
    /* Aumenta o espaço interno em cima */
    /* Espaço em relação ao fundo do card */
    border-top: 1px solid #e2e8f0 !important;
    /* Linha de separação entre a tabela e a paginação */
    background: transparent !important;
}

/* O Card que envolve as abas e a tabela */
.dashboard-form .card {
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border-radius: 8px !important;
}

/* ==========================================================================
   FORÇAR O PRIMEFACES (TABVIEW E DATATABLE) A OCUPAR 100% DA TELA
   ========================================================================== */

/* Forçar o TabView e suas abas a expandirem totalmente */
.dashboard-form .news-letter-tab.ui-tabview,
.dashboard-form .news-letter-tab .ui-tabview-panels,
.dashboard-form .news-letter-tab .ui-tabview-panel {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    /* Cadeia de altura até ao fim da página (card > tabview > panel) */
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Container do DataTable */
.dashboard-form .ui-datatable,
.dashboard-form .table-news-letter {
    width: 100% !important;
    max-width: 100% !important;
}

/* Forçar a tag <table> interna do PrimeFaces a espalhar as colunas em 100% */
.dashboard-form .ui-datatable table {
    width: 100% !important;
    table-layout: fixed !important;
    /* Garante que as colunas ocupem a proporção correta */
}

/* ==========================================================================
   ESTILIZAÇÃO DAS LINHAS, COLUNAS E AÇÕES
   ========================================================================== */

/* Cabeçalhos da Tabela */
.dashboard-form .ui-datatable thead th {
    background-color: #f8fafc !important;
    color: #334155 !important;
    font-weight: 600 !important;
    padding: 0.85rem 1rem !important;
    border-bottom: 2px solid #e2e8f0 !important;
    text-align: left !important;
}

/* Células de Dados */
.dashboard-form .ui-datatable tbody td {
    padding: 0.85rem 1rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
    text-align: left !important;
    word-wrap: break-word !important;
}

/* Alinhar a última coluna (Ações / Trash Icon) exatamente no centro */
.dashboard-form .ui-datatable thead th:last-child,
.dashboard-form .ui-datatable tbody td:last-child {
    text-align: center !important;
}

.dashboard-form .ui-datatable thead th:last-child .p-column-header-content {
    justify-content: center !important;
}

.dashboard-form .ui-datatable tbody td:last-child .ui-button,
.dashboard-form .ui-datatable tbody td:last-child .p-button {
    margin: 0 auto !important;
    display: inline-flex !important;
}

/* Paginação no final da tabela */
.dashboard-form .ui-datatable .ui-paginator {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 0.75rem !important;
    background: transparent !important;
    border-top: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
}


.main-nav a,
.main-nav .nav-bar-button {
    text-decoration: none;

    color: #59616e;
    padding: 0.5rem 0;
    position: relative;
    display: inline-block;
    font-size: 1.1rem;
}

.main-nav a::after,
.main-nav .nav-bar-button::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--orange);
    transition: width 0.3s ease;
}

.main-nav a:hover::after,
.main-nav .nav-bar-button:hover::after,
.has-dropdown.open>.dropdown-toggle::after {
    width: 100%;
}

.main-nav a:hover,
.main-nav .nav-bar-button:hover {
    color: var(--blue);
}

/* Garante que o globo do idioma aparece e tem cor visível */
.language-selector .ui-menubutton .ui-button,
.language-selector .ui-menubutton .ui-button .ui-icon,
.language-selector .ui-menubutton .ui-button .ui-button-icon-left,
.language-selector .ui-menubutton .ui-button .pi,
.languageBtn .pi-globe,
.languageBtn .ui-icon {
    display: inline-block !important;
    color: #1f1555 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.languageBtn.ui-button .ui-button-text {
    display: none;
}

/* painel do dropdown */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translate(-50%, -10px);
    min-width: 230px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    list-style: none;
    margin: 0;
    padding: 8px 16px !important;
    z-index: 1000;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        visibility 0.28s;

    display: list-item !important;
}

.dropdown-menu a {
    white-space: nowrap;
}

.has-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
}


.has-dropdown.open>.dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}


.dropdown-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #fff;
}


.dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    border-radius: 10px;
    color: #444 !important;
    font-size: 0.8rem;
    line-height: 1.2;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.dropdown-item i {
    color: var(--blue);
    font-size: 0.8rem;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s ease;
}



.dropdown-item span {
    display: flex;
    align-items: center;
    line-height: 1.2;
}

.dropdown-item:hover {
    background: transparent;
    color: var(--blue-hover) !important;
    transform: translateX(3px);
}


.dropdown-item:hover i {
    color: var(--orange);
}

.has-dropdown.open .dropdown-menu li {
    animation: dropIn 0.3s ease forwards;
    opacity: 0;
}


.has-dropdown.open .dropdown-menu li:nth-child(1) {
    animation-delay: 0.04s;
}

.has-dropdown.open .dropdown-menu li:nth-child(2) {
    animation-delay: 0.09s;
}

.has-dropdown.open .dropdown-menu li:nth-child(3) {
    animation-delay: 0.14s;
}

.languageBtnIcon .ui-button.ui-button-text-icon-left .ui-button-text {
    color: var(--deep-indigo);
    text-transform: uppercase;
    font-weight: 700;
}

.languageBtnIcon .ui-button.ui-button-text-icon-left .ui-icon {
    display: none;
}

.languageBtnIcon .ui-menu.ui-menubar>.ui-menu-list>.ui-menuitem.ui-menubar-options,
body .ui-menu.ui-menubar>.ui-menu-list>.ui-menuitem.ui-menubar-end {
    margin: 0;
    width: 80%;
}

@media (prefers-reduced-motion: reduce) {
    .carousel-track {
        animation: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .member-card {
        scroll-snap-align: start;
    }
}

@keyframes dropIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



.nav-bar-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.nav-bar-wrapper .language-selector,
.nav-bar-wrapper .language-selector .ui-menubar,
.nav-bar-wrapper .language-selector .ui-menu-button,
.nav-bar-wrapper .open-menu-button {
    height: 2.5rem;
    /* mesma altura para ambos */
    display: inline-flex;
    align-items: center;
}

.nav-bar-wrapper .language-selector .ui-menubar {
    width: auto;
    border: none;
    padding: 0;
}

.nav-bar-wrapper .open-menu-button {
    padding: 0;
    line-height: 1;
}





/* ================DEFAULT SETTING FOR THE DATA TABLE USED ACCROSS PUBLIC PAGES======== */
body .ui-datascroller .ui-datascroller-content {
    padding: 0;
    border: 0;
    background: transparent;

    /* border: 2px solid red; */
}

.loader_container {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
}

.loader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    position: absolute;
    top: 40%;
    left: 45%;
    height: 100px;
    /* border: 20px solid; */
    color: var(--deep-indigo);
    border-radius: 50%;
    border-top-color: transparent;
    animation: loader 1.2s linear infinite;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active a,
.ui-tabs.ui-tabs-top>.ui-tabs-nav li.ui-tabs-header.ui-state-active {
    color: var(--deep-indigo) !important;
    border-color: var(--deep-indigo) !important;
}

@keyframes loader {
    100% {
        transform: rotate(360deg);
    }
}

/* ==================================================================
           MENU MOBILE - drawer lateral
           Cores herdadas de resources/css/general.css (:root)
           ================================================================== */

/* Fundo escurecido */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Painel do menu */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease;
}


.mobile-menu.active {
    transform: translateX(0);
    visibility: visible;
}

/* Cabecalho: marca + botao fechar */
.mobile-menu-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--thiner-border-sec);
}


.mobile-menu-header .logo-nav-bar {
    width: 52px;
    height: 52px;
}


.mobile-menu-header .logo-container a span {
    font-size: 1.15rem;
}

.mobile-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.5rem;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--general-color);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, transform 0.25s ease;
}

.mobile-menu-close:hover {
    color: var(--orange);
    background: rgba(242, 169, 0, 0.12);
    transform: rotate(90deg);
}

.mobile-menu-close .pi {
    font-size: 1.15rem;
}

/* Corpo com scroll */
.mobile-menu-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.25rem 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9ca3af;
}


/* Lista principal - mesmo tom dos links do navbar de topo */
.mobile-main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-item {
    border-bottom: 1px solid var(--thiner-border-sec);
}

.mobile-nav-item:last-child {
    border-bottom: none;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 0.25rem;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    line-height: 1.2;
    color: var(--general-color) !important;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, padding-left 0.2s ease;
}



.mobile-nav-link:hover,
.mobile-nav-link.is-active {
    color: var(--blue);
    padding-left: 0.5rem;
}

.mobile-chevron {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: #9ca3af;
    transition: transform 0.3s ease, color 0.2s ease;
}

.mobile-nav-link:hover .mobile-chevron,
.mobile-has-dropdown.open>.mobile-nav-link .mobile-chevron {
    color: var(--blue);
}


.mobile-has-dropdown.open>.mobile-nav-link .mobile-chevron {
    transform: rotate(180deg);
}


/* Submenu (acordeao) */
.mobile-dropdown-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.mobile-has-dropdown.open>.mobile-dropdown-menu {
    max-height: 30rem;
}


/* Item do submenu - mesmo tratamento do .dropdown-item do navbar */
.mobile-dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem 0.7rem 1.1rem;
    border-radius: 10px;
    color: #444 !important;
    font-size: 0.9rem;
    line-height: 1.2;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.mobile-dropdown-item .pi {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--blue);
    transition: color 0.2s ease;
}

.mobile-dropdown-item:hover {
    color: var(--blue-hover) !important;
    transform: translateX(3px);
}

.mobile-dropdown-item:hover .pi {
    color: var(--orange);
}









/* Rodape: apenas dois icones - telefone e idioma (globo).
           Espelha o .icons-container do navbar de topo. */
.mobile-menu-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 0.9rem 1.25rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--thiner-border-sec);
}

/* O p:menuButton (idioma) envolve o botao num span .ui-menubutton */
.mobile-menu-footer .ui-menubutton {
    display: inline-flex;
    background: none;
    border: none;
}

/* Botoes redondos, so com icone (p:button telefone e p:menuButton idioma) */
.mobile-menu-footer .ui-button,
.mobile-menu-footer .ui-button.ui-state-hover,
.mobile-menu-footer .ui-button.ui-state-active,
.mobile-menu-footer .ui-button.ui-state-focus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem !important;
    height: 2.75rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    color: var(--general-color) !important;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.mobile-menu-footer .ui-button:hover,
.mobile-menu-footer .ui-button.ui-state-hover {
    color: var(--blue) !important;
    border-color: var(--blue) !important;
    background: rgba(33, 150, 243, 0.08) !important;
}

/* O tema do PrimeFaces posiciona o icone em absoluto e reserva
           espaco para o texto; aqui o icone fica no fluxo e centrado. */
.mobile-menu-footer .ui-button .ui-button-icon-left,
.mobile-menu-footer .ui-button .ui-button-text {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.25rem;
    line-height: 1;
}

/* Acima do breakpoint o menu de topo assume o controlo */




/* ===========NAVBAR=========== */

#nav-bar {
    transition: opacity 0.15s linear;
    position: fixed;
    z-index: 150;
}

.navbar-glass {
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.navbar-glass.scrolled {
    background-color: rgba(15, 23, 42, 0.55) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}


.nav-bar {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4rem 8rem;

    /* border: 2px solid red; */
    z-index: 10;
    height: 14vh;
    width: 100%;

    background: transparent;
}

.nav-bar-content {
    background-color: #fff;
    border-radius: 16px;
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    font-family: sans-serif;

    padding-left: 1rem;
    padding-right: 1rem;
}

.institutional-highlight-text {
    color: var(--deep-indigo);

    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.5;
}

/* ==========================================================
   COMUNICADOS RECENTES
   ========================================================== */

.communications-scroller {
    width: 100%;
}

.communication-card-link {
    display: block;
    width: 100%;
    text-decoration: none !important;
    color: inherit !important;
    margin-bottom: 12px;
}

.communication-card {
    width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 18px 20px;

    background: var(--gg-bg-elevated);
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-md);

    box-shadow: var(--gg-shadow);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.communication-card:hover {
    transform: translateY(-2px);

    box-shadow: var(--gg-shadow-hover);

    border-color: var(--gg-primary);
}


/* ÍCONE */

.communication-icon {
    width: 44px;
    height: 44px;

    min-width: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: var(--gg-primary-soft);
    color: var(--gg-primary);
}

.communication-icon i {
    font-size: 1.1rem;
}


/* CONTEÚDO */

.communication-content {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 7px;
}


/* TÍTULO + ID */

.communication-header {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;
}

.communication-title {
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 1rem;
    font-weight: 700;

    color: var(--gg-text);
}

.communication-id {
    flex-shrink: 0;

    padding: 3px 8px;

    border-radius: 6px;

    background: var(--gg-primary-soft);
    color: var(--gg-primary);

    font-size: 0.75rem;
    font-weight: 700;
}


/* DATA */

.communication-meta {
    display: flex;
    align-items: center;

    color: var(--gg-text-muted);

    font-size: 0.82rem;
}

.communication-meta-item {
    display: flex;
    align-items: center;

    gap: 6px;
}

.communication-meta-item i {
    font-size: 0.78rem;
    color: var(--gg-primary);
}

.communication-meta-item h\:outputText {
    color: var(--gg-text);
    font-weight: 600;
}


/* SETA */

.communication-arrow {
    width: 32px;
    height: 32px;

    min-width: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--gg-text-muted);

    transition:
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.communication-card:hover .communication-arrow {
    background: var(--gg-primary-soft);
    color: var(--gg-primary);

    transform: translateX(2px);
}

.communication-arrow i {
    font-size: 0.8rem;
}


/* ==========================================================
   RESPONSIVO
   ========================================================== */



.open-menu-button.nav-bar-button {
    display: none;
}

.logo-container a {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.logo-nav-bar {
    width: 80px;
    height: 80px;
}

.logo-container a span {
    color: #1f1555;
    font-size: 1.4rem;
    font-weight: 600;
    font-family: sans-serif;
}

.pc-slide-card {

    min-width: 100%;
    box-sizing: border-box;

    padding: 25px;

    border-radius: 18px;

    /*background:rgba(255,255,255,.10);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
*/

    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));

    border: 1px solid rgba(255, 255, 255, .18);

    color: #FFF;

    text-align: left;
}


.quick-links {

    display: flex;
    gap: 4rem;
    align-items: center;
    padding: 1.5rem 5%;
    background-color: transparent;
    color: white;

    /* background: var(--glass-bg); */
    /* backdrop-filter: blur(var(--glass-blur)); */
    /* -webkit-backdrop-filter: blur(var(--glass-blur)); */

    /*border: 1px solid var(--glass-border);*/
    /* box-shadow: var(--shadow-soft); */
    /* border-radius: 80px; */

    min-width: 10rem;
}

.nav-bar .name-top {
    display: none;
}



.main-nav ul {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav a {
    text-decoration: none;

    transition: opacity 0.3s;
}

.main-nav a:hover {
    opacity: 0.7;
}

.icons-container {
    display: flex;
    gap: .2rem;
}

.icons-container-language {
    display: flex;
    align-items: center;
    gap: 4px;
}

.icons-container-language>div {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

.language-selector {
    margin: 0;
    padding: 0;
    border: none;
}

/* ===============MOBILE NAVBAR========== */

.mobile-nav-bar-overlay {
    right: -100%;
    background: rgba(0, 0, 0, 0.5);

    top: 0;
    z-index: 901;
    position: fixed;
    /* border: 2px solid red; */
    width: 100%;
    height: 100vh;
    transition: right 0.5s ease;
    /* animação suave */
}

.closeContactFormContainer {
    width: fit-content;
}

.video-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: transparent;
}

#hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: rgba(0, 0, 0, 0.1);
    flex-direction: row;
    gap: 2rem;
}

.content-container-video {
    max-width: 70%;
    text-align: left;
    padding: 0 5%;
    color: #fff;
}

.cta-section-title-video {
    font-size: var(--section-title);
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.cta-section-subtitle-video {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.button-container-video {
    display: flex;
    justify-content: flex-start;
}

.explore-button-video {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background-color: #fff;
    color: #000;
    border-radius: 50px;
    cursor: pointer;
    width: fit-content;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.explore-button-video:hover {
    background-color: #e0e0e0;
    transform: translateX(5px);
}

.explore-button-video p {
    margin: 0;
    font-weight: 600;
}

.icon-container-video {
    display: flex;
    align-items: center;
    justify-content: center;
}




.contactForm {
    background-color: var(--text-white);
    right: 0;
    z-index: 902;
    /* width: fit-content; */
    /* max-width: 50%; */
    width: 50%;
    height: 100%;
    position: absolute;
    padding: 2rem;
    overflow-y: auto;
}

.mobile-nav-container {
    /* border: 2px solid red; */
    padding: 20px 15px;
}

/* content container */
.mobile-accordion {
    /* border: 2px solid blue; */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Accordion Header (Presidência, Governo, etc) */
.accordion-item {
    border-bottom: 1px solid #f0f0f0;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 10px;
    font-weight: 700;
    color: var(--deep-indigo);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.3s;
}

.accordion-header i {
    color: var(--deep-indigo);

    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

/* Open State for Arrow */
.service-accordion-header.active i,
.accordion-item.active .accordion-header i {
    transform: rotate(180deg);
}



/* Accordion Content (The sub-links) */
.service-accordion-content,
.accordion-content {
    list-style: none;
    /* Indent to make room for the line */
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    position: relative;
}

.mission-carousel.ui-carousel .ui-carousel-indicators .ui-carousel-indicator button {
    border-radius: 4px;
}

.mission-carousel.ui-carousel .ui-carousel-indicators .ui-carousel-indicator.ui-state-highlight button {
    background: var(--angola-yellow);
    color: #fff;
}


.mission-carousel .ui-carousel-next.ui-link,
.mission-carousel.ui-carousel .ui-carousel-content .ui-carousel-prev {
    display: none;
}


.mission-carousel.ui-carousel .ui-carousel-item,
.mission-carousel.ui-carousel .ui-carousel-items-content {
    height: 100%;
    padding: 0;
}

.member-card {
    /*padding: 0 0 0 0;
    padding-right: 1rem;
    padding-top: 1rem;
    text-align: center;*/


    padding: 2rem 1rem 2rem 0rem;
    /*padding-right: 1rem;
    padding-top: 1rem;*/
    text-align: center;
    background: white;
    border-radius: 1rem;
    text-align: center;
    height: 50%;
}

/*
.member-card-content {
    cursor: pointer;
  border: 1px solid #ececec;
    border-radius: 8px;
    padding: 2rem 1rem;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    height: 50%;
}*/

.member-card-content:hover {
    /* border-color: var(--angola-red); 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);*/
}



.accordion-item.active .service-accordion-content {
    padding: .6rem;
}

.accordion-item.active .service-accordion-content,
.accordion-item.active .accordion-content {
    max-height: 1000px;
}

.accordion-item.active .accordion-content {
    padding: 0 0 10px 40px;

}

/* Sub-links style */
.service-accordion-content li,
.accordion-content li {
    padding: .6rem 0;
}



.accordion-content li a,
.accordion-item div a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.95rem;
    display: block;
}

.service-accordion-header {
    position: relative;
}



.service-accordion-header,
.accordion-header,
.accordion-header a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: var(--deep-indigo);

    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.3s;
    text-decoration: none;
}

.accordion-header {
    padding: 1rem 1.4rem;
}

.accordion-header a {
    padding: .2rem 0;
}

.accordion-item.accordion-header a:hover {
    color: var(--blue) !important;

}

/* ===========LANDING PAGE HERO=========== */

body .pi {
    cursor: pointer;
}


.p-datepicker {
    width: 100%;
}

.dashboard-create-dialog .p-datepicker .ui-inputfield {
    width: 93%;
}

.nav-bar-button.ui-button,
.language-selector.ui-menu.ui-menubar,
.language-selector .ui-menubutton .ui-button {
    background-color: transparent;
    border: none;
    padding: 0;
}


.nav-bar-button.ui-button,
.nav-bar-button.ui-button.ui-state-focus,
.nav-bar-button.ui-button.ui-state-hover,
.nav-bar-button.ui-button.ui-state-active,
.language-selector .ui-menubutton .ui-button,
.language-selector .ui-menubutton .ui-button.ui-state-focus,
.language-selector .ui-menubutton .ui-button.ui-state-active {
    outline: none;
    box-shadow: none;
    transform: none;
    background: none;
    border: none;
}

.dashoboard-language-selector .ui-icon {
    color: var(--deep-indigo);
    font-size: 1.4rem;
}

.icons-container .pi {
    font-size: 1.5rem;
    cursor: pointer;
    color: #1f1555;
}

.padding-for-containers {
    padding: 8rem;
    padding-top: 3rem;
    padding-bottom: 1rem;
}

.padding-for-containers-1 {
    padding: 10rem;
}

.hero-carousel {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.hero-carousel .carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.7s ease-in-out;
    will-change: transform;
}

.hero-carousel .carousel-slide {
    flex: 0 0 100%;
    min-width: 100%;
    height: 100%;
    position: relative;
}

.hero-carousel .carousel-slide .left {
    width: 70%;
}


.hero-carousel .carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
}
.hero-carousel .carousel-dots.in-index{
    bottom: 3.5rem;
}

.hero-carousel .carousel-dots .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 5px;
    padding: 0;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.hero-carousel .carousel-dots .dot.active {
    background: #ffffff;
    transform: scale(1.15);
}

.hero-carousel .carousel-dots .dot.active {
    background: #ffffff;
    transform: scale(1.15);
}

.carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.7s ease-in-out;
    /* transform: translateX(-10%); */
}

.hero-carousel .carousel-dots .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 5px;
    padding: 0;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
}

.carousel-slide .left {
    width: 100%;
}


/* Esconde o texto do nome do arquivo que aparece ao lado/baixo */
.form-section.imageUrl .ui-fileupload-filename {
    position: absolute;
    top: -1rem;
    left: 0px;
}

.form-section.imageUrl .ui-button {
    margin-top: 1rem;
    width: 100% !important;
    height: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: var(--blue);
    border: 2px dashed var(--blue);
    cursor: pointer;
    border-radius: 0.3rem;
    transition: background 0.3s;
}

.form-section.imageUrl .ui-button:hover {
    background: #f0f4f8;
}

.ui-button.ui-button-text-icon-left .ui-icon {
    display: none;
}

.ui-button-primary {
    background: #7b5eff;
    border: none !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 2rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.full-width {
    width: 100% !important;
}

.form-group {
    margin-bottom: 1.5rem;
}

.label-style {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

.status-toggle-container {
    display: flex;
    align-items: center;
    padding-top: 0.5rem;
}

.header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
}

.header .icon {
    background: var(--orange);
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.form-section.imageUrl .ui-fileupload-filename {
    position: absolute;
    top: -1rem;
    left: 0px;
}

.form-section.imageUrl .ui-button {
    margin-top: 1rem;
    width: 100% !important;
    height: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: var(--blue);
    border: 2px dashed var(--blue);
    cursor: pointer;
    border-radius: 0.3rem;
    transition: background 0.3s;
}

.form-section.imageUrl .ui-button:hover {
    background: #f0f4f8;
}

.ui-button.ui-button-text-icon-left .ui-icon {
    display: none;
}

.ui-button-primary {
    background: #7b5eff;
    border: none !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 2rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.full-width {
    width: 100% !important;
}

.form-group {
    margin-bottom: 1.5rem;
}

.label-style {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

.status-toggle-container {
    display: flex;
    align-items: center;
    padding-top: 0.5rem;
}

.header p {
    font-size: 1.1rem;
    color: #555;
    margin: 0;
}

.create-button-container {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #f0f0f0;
}

.ui-button-primary {
    background: var(--orange);
    border: none !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 2rem;
}

.ui-button-primary:hover {
    background: #d49a00 !important;
}

.form-section.imageUrl .ui-fileupload-filename {
    position: absolute;
    top: -1rem;
    left: 0px;
}

.form-section.imageUrl .ui-button {
    margin-top: 1rem;
    width: 100% !important;
    height: 8rem;
    /* Aumentei um pouco para parecer uma zona de drop */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: var(--blue);
    border: 2px dashed var(--blue);
    cursor: pointer;
    border-radius: .3rem;
    transition: background 0.3s;
}

.form-section.imageUrl .ui-button:hover {
    background: #f0f4f8;
    /* Efeito hover suave */
}

.ui-button.ui-button-text-icon-left .ui-icon {
    display: none;
}

.ui-button-primary {
    background: #7b5eff;
    border: none !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 2rem;
}

.header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
}

.header .icon {
    background: #7b5eff;
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.header p {
    font-size: 1.1rem;
    color: #555;
    margin: 0;
}

.create-button-container {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #f0f0f0;
}

.msg-box {
    background: #fffbe6;
    border: 1px solid #e3e6ea;
    border-left: 4px solid #2196f3;
    border-radius: 6px;
    padding: 0.7rem;
    min-height: 60px;
    white-space: pre-line;
    line-height: 1.5;
}

.msg-box.sent {
    background: #f0fdf4;
    border-left-color: #22c55e;
}

.response-dialog-footer {
    display: flex;
    justify-content: end;
    gap: 1rem;
}

.ui-dialog.ui-widget.ui-widget-content.ui-shadow.ui-hidden-container.dashboard-create-dialog.response-costumer-dialog.ui-draggable.ui-resizable {
    padding-bottom: 6rem;
}

.response-costumer-dialog.dashboard-create-dialog.ui-dialog.ui-resizable .ui-dialog-content,
.response-costumer-dialog .ui-dialog-titlebar.ui-widget-header.ui-helper-clearfix.ui-draggable-handle {
    padding: 2rem;
}

.readonly-box {
    background: #f6f7f9;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    display: block;
}


/* Melhorias no Dialog */
.dashboard-create-dialog {
    width: 70% !important;
    /* Ajustado para um tamanho mais equilibrado */
}

/* Container Flexível */
.dashboard-create-dialog .components-container {
    display: flex;
    gap: 2rem;
    /* Espaço entre as colunas */
    padding: 10px;
}

.dashboard-create-dialog .left-component {
    flex: 4;
    /* Proporção de 40% */
    display: flex;
    flex-direction: column;
}

.dashboard-create-dialog .right-component {
    flex: 6;
    /* Proporção de 60% */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Padronização de Labels e Inputs */
.dashboard-create-dialog .form-group {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dashboard-create-dialog .label-style {
    font-weight: bold;
    color: #444;
}

.dashboard-create-dialog .full-width {
    width: 100% !important;
}

/* Esconde o texto do nome do arquivo que aparece ao lado/baixo */
.dashboard-create-dialog .form-section.imageUrl .ui-fileupload-filename {
    position: absolute;
    top: -1rem;
    left: 0px;
}

.dashboard-create-dialog .form-section.imageUrl .ui-button {
    margin-top: 1rem;
    width: 100% !important;
    height: 8rem;
    /* Aumentei um pouco para parecer uma zona de drop */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: var(--blue);
    border: 2px dashed var(--blue);
    cursor: pointer;
    transition: background 0.3s;
}

.dashboard-create-dialog .form-section.imageUrl .ui-button:hover {
    background: #f0f4f8;
    /* Efeito hover suave */
}


/* Melhorias no Dialog */
.dashboard-create-dialog {
    width: 70% !important;
    /* Ajustado para um tamanho mais equilibrado */
}

/* Container Flexível */
.dashboard-create-dialog .components-container {
    display: flex;
    gap: 2rem;
    /* Espaço entre as colunas */
    padding: 10px;
}

.dashboard-create-dialog .left-component {
    flex: 4;
    /* Proporção de 40% */
    display: flex;
    flex-direction: column;
}

.dashboard-create-dialog .right-component {
    flex: 6;
    /* Proporção de 60% */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Padronização de Labels e Inputs */
.dashboard-create-dialog .form-group {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dashboard-create-dialog .label-style {
    font-weight: bold;
    color: #444;
}

.dashboard-create-dialog .full-width {
    width: 100% !important;
}

/* Esconde o texto do nome do arquivo que aparece ao lado/baixo */
.dashboard-create-dialog .form-section.imageUrl .ui-fileupload-filename {
    position: absolute;
    top: -1rem;
    left: 0px;
}

.dashboard-create-dialog .form-section.imageUrl .ui-button {
    margin-top: 1rem;
    width: 100% !important;
    height: 8rem;
    /* Aumentei um pouco para parecer uma zona de drop */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: var(--blue);
    border: 2px dashed var(--blue);
    cursor: pointer;
    transition: background 0.3s;
}

.dashboard-create-dialog .form-section.imageUrl .ui-button:hover {
    background: #f0f4f8;
    /* Efeito hover suave */
}

.dashboard-create-dialog .ui-button.ui-button-text-icon-left .ui-icon {
    display: none;
}

.dashboard-create-dialog .ui-button-primary {
    background: var(--blue);
    border: none !important;
    text-align: center !important;
    width: 100% !important;
}



.related-images-dialog {
    width: 80vw !important;
    max-width: 1400px;
}

.related-images-dialog .ui-dialog-content {
    max-height: 74vh;
    overflow-y: auto;
    padding: 1rem !important;
}

/* Inputs ocupam toda a largura da célula */
.related-images-dialog .ui-inputtext,
.related-images-dialog .ui-inputtextarea {
    width: 100% !important;
    box-sizing: border-box;
}

.related-images-upload {
    margin-bottom: 1.2rem;
}

/* ================= PAINEL DE EDIÇÃO ================= */
.related-image-edit-panel {
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 2px solid var(--orange);
}

.related-image-edit-panel .header {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
}

.related-image-edit-panel .header h2 {
    margin: 0;
    font-size: 1.1rem;
}

.related-image-edit-media {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 1rem;
}

.related-image-preview {
    max-width: 220px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.replacement-hint {
    display: block;
    margin-top: .4rem;
    font-size: .8rem;
    color: #6b7280;
    font-style: italic;
}

.related-image-edit-actions,
.related-images-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: .8rem;
    border-top: 1px solid #e5e7eb;
}

.dashboard-create-dialog .ui-button.ui-button-text-icon-left .ui-icon {
    display: none;
}

.dashboard-create-dialog .ui-button-primary {
    background: var(--blue);
    border: none !important;
    text-align: center !important;
    width: 100% !important;
}


.current-image {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 0.3rem;
}

.current-image img {
    border-radius: 0.3rem;
    border: 1px solid #ddd;
}

.current-image .image-label {
    font-size: 0.9rem;
    color: #666;
}

.header .icon {
    background: #7b5eff;
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.header p {
    font-size: 1.1rem;
    color: #555;
    margin: 0;
}

.create-button-container {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #f0f0f0;
}

/* =========================================================
       BLOCO BASE LEGAL
       ========================================================= */

.legal-card {
    position: relative;

    padding: 38px 38px 34px;

    background: #ffffff;

    border: 1px solid rgb(0 31 84 / 29%);
    border: 1px solid #e8edf3;
    box-shadow: 0 7px 25px rgba(0, 31, 84, 0.045);

    border-radius: 20px;

    /* box-shadow:
        0 20px 50px rgba(0, 31, 84, 0.09);*/

    overflow: hidden;
}


/* barra lateral */

/*.legal-card::before {
        content: "";

        position: absolute;

        top: 0;
        left: 0;

        width: 4px;
        height: 100%;

        background:
            linear-gradient(
                to bottom,
                var(--blue),
                var(--deep-indigo),
                var(--orange)
            );
    }*/


.legal-header {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 28px;
}


.legal-icon {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 13px;

    background: rgba(0, 31, 84, 0.07);

    color: var(--deep-indigo);
}

.legal-icon svg {
    width: 23px;
    height: 23px;

    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.legal-title {
    margin: 0;

    color: var(--deep-indigo);

    font-size: 23px;
    font-weight: 800;
}

.legal-subtitle {
    margin: 4px 0 0;

    color: #7b8491;

    font-size: 13px;
}


/* =========================================================
       LISTA DA LEGISLAÇÃO
       ========================================================= */

.legal-list {
    display: grid;

    gap: 14px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.legal-item {
    display: grid;

    grid-template-columns: 34px 1fr;

    gap: 12px;

    align-items: start;

    padding: 12px 13px;

    border-radius: 10px;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.legal-item:hover {
    background: rgba(33, 150, 243, 0.045);

    transform: translateX(3px);
}


.legal-number {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: rgba(33, 150, 243, 0.09);

    color: var(--blue-hover);

    font-size: var(--general-text);
    font-weight: 800;
}


.legal-item p {
    margin: 2px 0 0;

    color: var(--general-color);
    font-size: var(--general-text);
    line-height: 1.5;
}

.legal-item strong {
    color: var(--deep-indigo);
    font-weight: 700;
}

.port-services-section {
    position: relative;
    /* padding: 95px 8rem; */
    background: #ffffff;
    overflow: hidden;
}

.port-services-container {
    position: relative;
    z-index: 2;
    margin: 0;
    width: 100%;
}


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

.port-services-header {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}


.port-services-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px;
    margin-bottom: 20px;
    border-radius: 30px;
    background: rgba(33, 150, 243, 0.07);
    border: 1px solid rgba(33, 150, 243, 0.16);
    color: var(--blue-hover);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.port-services-tag::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
}

.port-services-title {
    margin: 0 0 18px;
    color: var(--deep-indigo);
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1px;
}

.port-services-title span {
    color: var(--blue);
}

.port-services-description {
    margin: 0 auto;
    max-width: 650px;
    color: #687386;
    font-size: 16px;
    line-height: 1.75;
}

/* =========================================================
       GRID DOS SERVIÇOS
       ========================================================= */

.port-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


/* =========================================================
       CARD
       ========================================================= */

.port-service-card {
    position: relative;
    min-height: 190px;
    padding: 27px 24px;
    background: #ffffff;
    border: 1px solid #e8edf3;
    border-radius: 16px;
    box-shadow: 0 7px 25px rgba(0, 31, 84, 0.045);

    overflow: hidden;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.port-service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(33, 150, 243, 0.25);
    box-shadow: 0 18px 40px rgba(0, 31, 84, 0.1);
}

/* Barra superior */

.port-service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}


.port-service-card:hover::before {
    transform: scaleX(1);
}

/* =========================================================
       ÍCONE
       ========================================================= */

.port-service-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 22px;

    border-radius: 13px;

    background: rgba(0, 31, 84, 0.065);

    color: var(--deep-indigo);

    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.port-service-card:hover .port-service-icon {
    background: var(--deep-indigo);

    color: #ffffff;
}

.port-service-icon svg {
    width: 23px;
    height: 23px;

    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}





.port-service-name {
    margin: 0 0 8px;

    color: var(--deep-indigo);

    font-size: 16px;

    font-weight: 800;
}



/* =========================================================
       TEXTO
       ========================================================= */


.port-service-description {
    margin: 0;

    color: #7a8493;

    font-size: 16px;

    line-height: 1.6;
}



/* =========================================================
       NÚMERO
       ========================================================= */

.port-service-number {
    position: absolute;

    right: 18px;
    bottom: 14px;

    color: rgba(0, 31, 84, 0.055);

    font-size: 34px;

    line-height: 1;

    font-weight: 900;

    pointer-events: none;
}



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

.port-services-footer {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 42px;

    color: #697586;

    font-size: 13px;
}

.port-services-footer-line {
    width: 35px;
    height: 2px;

    border-radius: 5px;

    background: var(--orange);
}

/* =========================================================
       RESPONSIVO
       ========================================================= */



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

.port-schedule-header {
    max-width: 650px;

    margin: 0 auto 50px;

    text-align: center;
}

.port-schedule-tag {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 7px 16px;

    margin-bottom: 20px;

    border-radius: 30px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.14);

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}

.port-schedule-tag::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--orange);

    box-shadow: 0 0 0 4px rgba(242, 169, 0, 0.13);
}

.port-schedule-title {
    margin: 0 0 17px;

    color: var(--deep-indigo);

    font-size: clamp(32px, 4vw, 45px);

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1px;
}

.port-schedule-title span {
    color: #5bb4ff;
}

.port-schedule-description {
    margin: 0 auto;

    max-width: 600px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
       CARTÃO PRINCIPAL
       ========================================================= */

.port-schedule-card {
    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    background: #ffffff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}

.slide-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scale(1);
    transition: transform 8s ease;
    object-fit: cover;
}

.carousel-slide.active .slide-bg {
    transform: scale(1.1);
}

.slide-content-over-lay {
    position: absolute;
    z-index: 9;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.0);
    color: var(--text-white);
    padding: 18% 8rem 5%;
}


/* Dots */
.carousel-dots {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

.carousel-dots .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 5px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
}

.carousel-dots .dot.active {
    background: var(--text-white);
}

.request-service-title,
.landing-page-hero .title {
    font-size: var(--hero-title);
    padding-bottom: 1rem;
}

.landing-page-hero .subtitle {
    font-size: var(--general-text);
}

.landing-page-hero .title {
    width: 80%;
}

.request-service-page-subtitle,
.landing-page-hero .subtitle {
    font-size: 1.3rem;
}


/* =================CAROUSEL SETTINGS============= */


.landing-page-hero {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;

}

.landing-page-hero>span {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.landing-page-hero>span .hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.landing-page-hero .hero-bg,
.news-hero .hero-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    inset: 0;
}

.landing-page-hero .landing-page-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.5);
    color: white;
}

.alinhamentoProvisorio {
    display: flex;
    align-items: flex-end;
    height: 80%;
}


.landing-page-hero .content-container {
    display: flex;

    justify-content: space-between;

    padding: .8rem 0;
    padding-top: 2rem;
}


.divider,
.dark-divider {
    height: 1px;
    width: 100%;
    border: none;
    padding: .06rem;
}

.divider {
    margin-top: 20px;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.1) 100%);
}

.dark-divider {
    background: linear-gradient(to right,
            rgb(66, 62, 62) 0%,
            rgba(47, 42, 42, 0.1) 100%);
}





/* =============BUTTON SETTINGS============ */
.explore-button {
    cursor: pointer;
    text-transform: uppercase;
    display: flex;
    gap: 1rem;
    align-items: center;
    border-radius: 8px;
    padding: 1rem 2rem;
    background-color: var(--deep-indigo);
    color: var(--text-white);
}

.button-container {
    color: var(--text-white);
    padding: 4rem 0;
    width: fit-content;
}

.news-section .button-container {
    width: fit-content;
    display: block;
    margin: 0 auto;


}

.contact-form-section .submit-btn.ui-button {
    background: var(--deep-indigo);
    border: none;
    border-radius: 50px;
    padding: .8rem 3rem;
    color: var(--text-white);
    font-weight: 600;
}

.explore-button:hover {
    background-color: var(--blue-hover);
}

.explore-button,
.icon-container {
    transition: all .2s ease;
}

.explore-button:hover .icon-container {
    transform: translateX(20px);
    border-color: var(--white-color);
}

/*Index Introduction*/

.institutional-intro {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}



.institutional-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px;
    margin-bottom: 22px;
    border-radius: 30px;
    background: rgba(33, 150, 243, 0.08);
    border: 1px solid rgba(33, 150, 243, 0.18);
    color: var(--blue-hover);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.institutional-tag::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 4px rgba(242, 169, 0, 0.12);
}


.institutional-description {
    max-width: 520px;
    margin: 0;
    color: #5b6472;
    font-size: 16px;
    line-height: 1.8;
}

/* Destaque */

.institutional-highlight {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 15px;

    margin-top: 35px;
    padding-top: 25px;
    padding-right: 1rem;
    padding-left: 1rem;
    border-top: 1px solid rgba(0, 31, 84, 0.10);
}

.growth-banner {
    background: var(--deep-indigo);
    border-radius: 16px;
}


.institutional-highlight-line {
    width: 42px;
    height: 3px;

    border-radius: 5px;

    background: var(--orange);
}







/* ===========================OUR SERVICES SECTION=============================== */
.port-resources {
    background-color: #fff;

    min-height: 100vh;
    padding-top: 6rem;
    padding-bottom: 3rem;
}

.big-title,
.section-title,
.section-title-white {
    font-weight: 900;
    font-size: clamp(32px, 4vw, 46px);

    position: relative;
    display: inline-block;
    line-height: 2;
}

.institutional-title {
    margin: 0 0 22px;
    color: var(--deep-indigo);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1.2px;
}

.institutional-title span {
    color: var(--blue);
}




.contact-form-section .main-title {
    font-size: var(--section-title);
    font-weight: 800;
    line-height: 1;
    margin: 1.5rem 0;
    text-transform: uppercase;
}

.sub-heading {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
    /* margin-bottom: 1.5rem; */
}

.big-title {
    font-size: 3rem;
}

.big-title,
.contact-form-section .main-title,
.contact-form-section .sub-heading,
.section-title {
    color: var(--deep-indigo);

}

.section-title-white {
    color: var(--text-white);

}

/* The yellow underline detail */
/* .section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background-color: #f2a900;
} */

.section-subtitle {
    font-size: 1.1rem;
    margin-bottom: 3rem;
    color: var(--text-gray);
}

.resource-card {
    display: flex;
    flex-direction: column;
}

.resource-card .card-image-wrapper {
    height: 15rem;
    overflow: hidden;
    position: relative;
    border-radius: 16px;
}

.institutional-partner-ship-grid,
.resources-grid {
    display: grid;

    gap: .8rem;
}

.institutional-partner-ship-grid {
    grid-template-columns: repeat(5, minmax(100px, 1fr));
}

.resources-grid {
    grid-template-columns: repeat(4, minmax(100px, 1fr));
}


/* =========================================================
       INTRODUÇÃO INSTITUCIONAL
       ========================================================= */

.institutional-section {
    position: relative;
    background-color: #ffffff;
    overflow: hidden;
}


.institutional-container {

    position: relative;
    z-index: 2;
    max-width: 100%;
    margin: 0 auto;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 0;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
}



/*
.card-image-wrapper {
    position: relative;
    height: 50%;
    overflow: hidden;
}*/

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
    transition: transform 0.5s ease;
    border-radius: 16px;
}

.resource-card:hover img {
    transform: scale(1.05);
    border-radius: 16px;
    /* Subtle zoom effect on hover */
}

.image-overlay {
    position: absolute;
    inset: 0;
    /* Dark gradient helps white text stand out */
    background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.5));
    display: flex;
    align-items: flex-end;
    padding: 20px;
}

.image-overlay h3 {
    color: white;
    text-transform: uppercase;
    font-size: var(--general-text);
    line-height: 1.2;
    margin: 0;
}

.resource-card .card-content {
    padding: 20px 0;
}

.resource-card .card-content p {
    color: var(--general-color);
    font-size: var(--general-text);
    line-height: 1.5;
    margin-bottom: 15px;
    height: 8rem;
    /* Keeps the "View More" aligned horizontally */
}

/* ==========================================================
   GALERIA (gallery.xhtml) — overlay que desliza de baixo p/
   cima no hover, com descrição rolável dentro da imagem.
   Escopado ao .gallery-scroller para não afetar outras páginas.
   ========================================================== */
.gallery-scroller .resource-card .card-image-wrapper {
    height: 15rem;
}

.gallery-scroller .resource-card .card-content {
    padding: 0;
    height: 0;
    overflow: hidden;
}

.gallery-scroller .gallery-overlay {
    inset: auto 0 0 0;
    height: 100%;
    padding: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.65) 0%,
            rgba(0, 0, 0, 0.45) 55%,
            rgba(0, 0, 0, 0.5) 100%);
    display: block;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.45s ease, opacity 0.45s ease;
    pointer-events: none;
    border-radius: 0 0 16px 16px;
}

.gallery-scroller .resource-card:hover .gallery-overlay,
.gallery-scroller .resource-card:focus-within .gallery-overlay {
    transform: translateY(0);
    opacity: 1;
    /* re-enable interactions so the panel can be scrolled with wheel/touch */
    pointer-events: auto;
}

.gallery-scroller .gallery-overlay-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.1rem;
    /* this div is bounded to the card height (inset: 0),
       so IT must be the scroll container */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.55) transparent;
}

.gallery-scroller .gallery-overlay-content p {
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--general-text);
    line-height: 1.5;
    margin: 0;
    padding-bottom: .4rem;
    /* no height/overflow here: the p simply grows and
       the parent (.gallery-overlay-content) scrolls it */
}

.gallery-scroller .gallery-overlay-content::-webkit-scrollbar {
    width: 5px;
}

.gallery-scroller .gallery-overlay-content::-webkit-scrollbar-track {
    background: transparent;
}

.gallery-scroller .gallery-overlay-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.55);
    border-radius: 999px;
}

.gallery-scroller .gallery-overlay-content h3 {
    position: sticky;
    top: 0;
    z-index: 1;
    background: transparent !important;
    margin: -1rem -1.1rem .2rem;
    padding: 1rem 1.1rem .6rem;
    color: white;
    text-transform: uppercase;
    font-size: var(--general-text);
    line-height: 1.2;
}

.doc-download-link.ui-commandlink {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.doc-download-link.ui-commandlink .events-content {
    color: var(--deep-indigo);
    font-size: var(--general-text);
    display: flex;
    flex-wrap: wrap;
    overflow-wrap: break-word;
}



/* =========================================================
       HORÁRIOS
       ========================================================= */

.schedule-name {
    margin: 0;
    color: var(--deep-indigo);
    font-size: var(--general-text);
    font-weight: 800;
}

.port-schedule-status p {
    margin: 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: var(--general-text);

    line-height: 1.65;
}

.port-schedule-status h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 24px;

    font-weight: 800;
}


.port-status-indicator {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 30px;

    font-size: 12px;

    font-weight: 700;
}

.port-status-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #37c978;

    box-shadow:
        0 0 0 5px rgba(55, 201, 120, 0.12);
}

.port-schedule-status-icon svg {
    width: 29px;
    height: 29px;

    stroke: #ffffff;

    fill: none;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;
}






.port-schedule-status-icon {
    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 25px;

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.09);
}


/* ===================== STATS ROW ===================== */
.indicators-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.indicator-item {
    position: relative;
    padding: 46px 24px;
    text-align: center;
}

.indicator-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 20%;
    bottom: 20%;
    right: 0;
    width: 1px;
    background: rgba(0, 0, 0, 0.08);
}

.indicator-item .indicator-icon {
    margin: 0 auto 22px;
}

.indicator-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(33, 150, 243, 0.09);
    border-radius: 16px;
    transition: background 0.3s ease, transform 0.3s ease;
}

.indicator-item:hover .indicator-icon {
    background: var(--blue);
    transform: translateY(-4px);
}

.indicator-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--blue);
    fill: none;
    stroke-width: 1.8;
    transition: stroke 0.3s ease;
}

.indicator-item:hover .indicator-icon svg {
    stroke: #ffffff;
}

.indicator-number {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
    color: var(--orange);
    margin-bottom: 12px;
}

.indicator-label {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: #444;
    max-width: 220px;
    margin: 0 auto;
}

/* CTA comercial */
.indicators-cta {
    margin-top: 60px;
    text-align: center;
}

.indicators-cta a {
    display: inline-block;
    padding: 14px 36px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--blue);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.2s ease;
}

.indicators-cta a:hover {
    background: var(--blue-hover);
    transform: translateY(-2px);
}

.resource-card:hover .view-more {
    /* color: var(--blue); */
    border-bottom-color: var(--orange);

    /* border-bottom-color: var(--blue-darc); */
}

/* ==================NEWS SECTION=========== */
.news-section {
    height: 100vh;
}

.news-grid {
    display: grid;
    /* Column 1 is 2 units wide, Columns 2 and 3 are 1 unit wide */
    grid-template-columns: 2fr 1fr 1fr;
    /* grid-template-rows: 1fr 1fr; */
    /* Two equal rows */
    gap: .2rem;
    height: 50%;
}

/* Defining the Bento Grid layout */
.item-a {
    grid-area: 1 / 1 / 3 / 2;
}

/* Starts at Row 1, Col 1 | Spans 2 rows */
.item-b {
    grid-area: 1 / 2;
}

.item-c {
    grid-area: 1 / 3 / 2 / 4;
}

.item-d {
    grid-area: 2 / 2 / 3 / 3;
}

.item-e {
    grid-area: 2 / 3 / 3 / 4;
}

/* Global Item Styling */
.news-item {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    background-color: var(--text-dark);
}

.news-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    /* Darkens image slightly for text contrast */
    transition: transform 0.5s ease;
}

.news-item:hover img {
    transform: scale(1.05);
    color: var(--orange);
}

.news-item:hover h3 {
    color: var(--orange);
}

/* Text Overlays */
.news-overlay {
    position: absolute;
    inset: 0;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
    pointer-events: none;
}

.news-date {
    background: #000;
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 6px;
    width: fit-content;
    margin-bottom: 8px;
}

.news-item h3 {
    color: #fff;
    font-size: 0.9rem;
    /* Smaller for small items */
    margin: 0;
    line-height: 1.3;
}

/* Make font bigger for the featured item */
.item-a h3 {
    font-size: 1.5rem;
}

/* ---------- Elementos exclusivos da galeria móvel (< 700px) ----------
   Ficam INERTES acima de 700px: o desenho original do desktop mantém-se
   exatamente igual (badge circular e pílula de categoria escondidos). */
.news-card-icon,
.news-category {
    display: none;
}

/* No desktop o wrapper é "transparente" (display: contents) para que a
   data e o título continuem a ser filhos diretos do overlay, empilhados
   tal como antes (data acima do título). */
.news-card-text {
    display: contents;
}


/* ====================LIVE OPERATION SECTION ===============  


    --deep-indigo: #001f54;


    --ocean-cyan: #00b4d8;
    --marine-blue: #0077b6;
 */
.live-operations-widget,
.cta-section {
    width: 100%;

    background-image: linear-gradient(135deg, #48b8e0 0%, #0077b6 100%);
    background-color: rgba(0, 0, 0, 0.1);
    background-blend-mode: multiply;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: var(--text-white);
}

.live-operations-widget {
    height: 100vh;
    background-image: url('../../resources/img/soyo-ship.webp');
    background-attachment: fixed;

}

.btnLinkLiveOperation a {
    text-decoration: none;
}

.btnLinkLiveOperation.ui-button {
    background-color: var(--blue);
    border-radius: 2rem;
    border: none;
}

.btnLinkLiveOperation.ui-button.ui-button-text-only .ui-button-text {
    padding: 1rem 1.5rem;
}




.cta-section {
    height: 100vh;
    background: linear-gradient(#0006, #0006),
        url('../../resources/img/cargas_portuarias3.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;


}


.cta-section .content-container {
    text-align: start;
}

.cta-section-title,
.live-operations-widget-title {
    font-size: var(--section-title-2);
    line-height: 3rem;
    text-transform: uppercase;
}

/* .live-operations-widget-title {
    text-transform: uppercase;
    font-size: 3rem;
} */

.cta-section-title,
.cta-section-subtitle {
    max-width: 80%;

}

.live-operations-widget-title,
.live-operations-widget .subtitle {
    max-width: 50%;
}

.cta-section-subtitle,
.live-operations-widget .subtitle {
    padding: 2rem 0;

}

.cta-section-subtitle {
    font-size: 1.4rem;

}

.live-operations-widget .subtitle {
    font-size: var(--general-text);

}

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

/* ==================PORT FACTS SECTION================= */
.port-facts-section {
    min-height: 100vh;

}

.port-facts-section .content-container {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: center;
}

.facts-container {
    padding: 0;
    gap: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.facts-container .item {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    width: 100%;
}

.facts-container .number {
    color: var(--deep-indigo);
    font-size: 2.5rem;

    border-bottom: 4px solid var(--orange);
}

.facts-container .label {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--deep-indigo);

}

/*
.schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}*/


.schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}


.schedule-header h2 {
    font-size: 2.35rem;
    font-weight: 900;
    color: #001f54;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    line-height: 1;
}

.schedule-header h2 i {
    color: var(--blue);
}

.schedule-header .badge-count {
    background: var(--blue);
    color: white;
    padding: 0.3rem 1.2rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
}


.schedule-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}




.schedule-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(31, 78, 121, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 4px solid var(--blue);
    position: relative;
    overflow: hidden;
}

.schedule-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle,
            rgba(33, 150, 243, 0.05) 0%,
            transparent 70%);
    border-radius: 50%;
    transform: translate(30%, -30%);
}

.schedule-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(31, 78, 121, 0.15);
    border-left-color: var(--orange);
}

.schedule-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.schedule-card .route-info {
    flex: 1;
}

.schedule-card .route-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--blue-darc);
    margin: 0 0 0.25rem 0;
}

.schedule-card .vessel-name {
    font-size: 0.85rem;
    color: var(--blue);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.schedule-card .vessel-name i {
    color: var(--blue);
}

.schedule-card .date-badge {
    background: var(--orange);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-size: var(--general-text);
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.schedule-card .route-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    margin: 0.75rem 0;
}

.schedule-card .location {
    text-align: center;
    flex: 1;
}

.schedule-card .location .label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #a0aec0;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.schedule-card .location .value {
    font-size: var(--general-text);
    font-weight: 500;
    color: var(--blue-darc);
    margin-top: 0.2rem;
}

/* Melhorias no Dialog */
.dashboard-create-dialog.ui-dialog {
    width: 40% !important;
    height: 80vh !important;
}

body .ui-dialog .ui-dialog-titlebar {
    padding: .5rem;
}

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto 1rem auto;
}

.header .pi {
    font-size: 3rem;
    color: var(--blue);
}

body .ui-dialog.ui-resizable .ui-dialog-content {
    height: 86% !important;
}


body .ui-tabs .ui-tabs-panels .ui-tabs-panel {
    padding: 0;
}

/* Padronização de Labels e Inputs */
.dashboard-create-dialog .form-group {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dashboard-create-dialog .label-style {
    font-weight: bold;
    color: #444;
}

/* .dashboard-create-dialog .full-width {
            width: 100% !important;
        } */

/* Esconde o texto do nome do arquivo que aparece ao lado/baixo */
.dashboard-create-dialog .form-section.imageUrl .ui-fileupload-filename {
    position: absolute;
    top: -1rem;
    left: 0px;
}

.imageUrl .ui-button {
    margin-top: 1rem;
    width: 100%;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: var(--blue);
    border: 2px dashed var(--blue);
    cursor: pointer;
    transition: background 0.3s;
}

.ui-fileupload-simple {
    width: 100%;
}

.imageUrl .ui-icon {
    display: none;
}

.imageUrl .ui-button:hover {
    background: #f0f4f8;
    color: var(--blue);
}

.dashboard-create-dialog .create-button.ui-button-primary {
    background: var(--blue);
    border: none;
    text-align: center;
    width: 100%;
}

.create-button-container {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 2rem
}



.gov-view-image-container {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f3f4f6;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.gov-view-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gov-view-details .form-group {
    margin-bottom: 1rem;
}

.gov-view-details .form-group p {
    margin: 0.25rem 0 0;
    color: #333;
}

.gov-view-period {
    display: flex !important;
    flex-flow: row !important;
    gap: 2rem;
    gap: 3rem !important;
    background: #0003;
    padding: .3rem .6rem;
    border-radius: .4rem;
    ;
}


/* Melhorias no Dialog */
.dashboard-create-dialog {
    width: 70% !important;
    /* Ajustado para um tamanho mais equilibrado */
}

/* Container Flexível */
.dashboard-create-dialog .components-container {
    display: flex;
    gap: 2rem;
    /* Espaço entre as colunas */
    padding: 10px;
}

.dashboard-create-dialog .left-component {
    flex: 4;
    /* Proporção de 40% */
    display: flex;
    flex-direction: column;
}

.dashboard-create-dialog .right-component {
    flex: 6;
    /* Proporção de 60% */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Padronização de Labels e Inputs */
.dashboard-create-dialog .form-group {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dashboard-create-dialog .label-style {
    font-weight: bold;
    color: #444;
}

.dashboard-create-dialog .full-width {
    width: 100% !important;
}

/* Esconde o texto do nome do arquivo que aparece ao lado/baixo */
.dashboard-create-dialog .form-section.imageUrl .ui-fileupload-filename {
    position: absolute;
    top: -1rem;
    left: 0px;
}

.dashboard-create-dialog .form-section.imageUrl .ui-button {
    margin-top: 1rem;
    width: 100% !important;
    height: 8rem;
    /* Aumentei um pouco para parecer uma zona de drop */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: var(--blue);
    border: 2px dashed var(--blue);
    cursor: pointer;
    transition: background 0.3s;
}

.dashboard-create-dialog .form-section.imageUrl .ui-button:hover {
    background: #f0f4f8;
    /* Efeito hover suave */
}

.dashboard-create-dialog .ui-button.ui-button-text-icon-left .ui-icon {
    display: none;
}

.dashboard-create-dialog .ui-button-primary {
    background: var(--blue);
    border: none !important;
    text-align: center !important;
    width: 100% !important;
}



.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.full-width {
    width: 100% !important;
    position: relative;
}

.full-width .ui-datepicker-trigger.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only {
    position: absolute;
    right: 0;
}

.form-group {
    margin-bottom: 1.5rem;
}

.label-style {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

.status-toggle-container {
    display: flex;
    align-items: center;
    padding-top: 0.5rem;
}

.header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
}

.header .icon {
    background: var(--blue);
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.header p {
    font-size: 1.1rem;
    color: #555;
    margin: 0;
}

.create-button-container {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #f0f0f0;
}

.ui-button-primary {
    background: var(--blue);
    border: none !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 2rem;
}

.ui-button-primary:hover {
    background: var(--blue-hover) !important;
}

.schedule-card .route-arrow {
    color: var(--blue);
    font-size: 1.2rem;
    padding: 0 0.5rem;
    flex-shrink: 0;
}

.schedule-card .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
}

.schedule-card .status-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.8rem;
    border-radius: 50px;
    font-weight: 500;
}

.schedule-card .status-badge.active {
    background: #c6f6d5;
    color: #22543d;
}

.schedule-card .status-badge.inactive {
    background: #fed7d7;
    color: #9b2c2c;
}

.schedule-card .order-badge {
    font-size: 0.75rem;
    color: #a0aec0;
}

.schedule-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 1rem;
}

.schedule-empty i {
    font-size: 4rem;
    color: #e2e8f0;
    margin-bottom: 1rem;
}

.schedule-empty h3 {
    color: var(--blue-darc);
    margin-bottom: 0.5rem;
}

.schedule-empty p {
    color: #a0aec0;
}




.filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--deep-indigo);
    color: var(--deep-indigo);
    border-radius: 8px;
    padding: .6rem 1.2rem;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}

.filter-toggle-btn:hover {
    background: rgba(0, 0, 0, .04);
}

.filter-panel {
    display: none;
    background: #f7f8fa;
    border-radius: 12px;
    padding: 1.2rem;
    margin: 1rem 0 1.5rem;
    /* impede que os widgets do PrimeFaces criem scroll horizontal em ecrãs estreitos */
    max-width: 100%;
    overflow-x: hidden;
}

.filter-panel.open {
    display: block;
    animation: filter-panel-in .25s ease both;
}

@keyframes filter-panel-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    align-items: end;
    width: 100%;
}

/* min-width: 0 permite que cada campo encolha dentro do grid
   em vez de ser empurrado pela largura natural dos widgets */
.filter-field {
    width: 100%;
    min-width: 0;
}

.filter-field label {
    display: block;
    font-size: var(--general-text);
    font-weight: 600;
    color: var(--deep-indigo);
    margin-bottom: .4rem;
}

/* Nomes de rotas/navios podem ser longos: corta com reticências
   em vez de alargar (e rebentar) a coluna do filtro */
.filter-field .ui-selectonemenu-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-field .filter-field-select.ui-selectonemenu,
.filter-field .filter-field-calendar.ui-calendar {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* O input do calendário vive dentro de um contentor flex (ver tools.xhtml);
   sem min-width: 0 a largura mínima do input faz o campo transbordar em ecrãs pequenos */
.filter-field .filter-field-calendar.ui-calendar input.hasDatepicker {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.4rem;
}

.filter-actions {
    display: flex;
    gap: .6rem;
    width: 100%;
}

/* botões com largura igual dentro da célula do grid */
.filter-actions .ui-button {
    flex: 1 1 0;
    min-width: 0;
}

.btn-apply-filters.ui-button {
    background: var(--orange);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 !important;
    height: 2.4rem;
    margin-top: auto;
}

.btn-clear-filters.ui-button {
    background: transparent;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    padding: 0 !important;
    height: 2.4rem;
    margin-top: auto;
}

/* ================= FILTROS: RESPONSIVIDADE ================= */
/* Portáteis pequenos / tablets: passa de 4 colunas (larguras mínimas
   apertadas) para 2 colunas bem espaçadas */


/* =================NEWS LETTER============ */
.news-letter-section {

    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;

}





/* Spinner de loading que o PrimeFaces injeta sozinho durante o ajax:
   como o tema o posiciona de forma absoluta, aqui centramo-lo
   explicitamente no meio do botão */
.black-btn.ui-button {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 17px !important;
    justify-content: center !important;
    gap: 0.1rem;
}

.black-btn.ui-button .ui-button-text,
.black-btn.ui-button .ui-button-icon-left,
.black-btn.ui-button .pi {
    position: static !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
    font-size: 1rem !important;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
}

/* Força o texto a ficar sempre visível, mesmo quando o PrimeFaces
   entra em estado de "processing" durante o ajax (o tema base
   costuma esconder o texto nesse estado via opacity/visibility) */
.black-btn.ui-button .ui-button-text {
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
}



/* Newsletter como 4ª coluna do footer, ao lado de Services/Industries/Company */

.news-letter-section {
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
    border-radius: 12px;
    padding: 24px;
}

.news-letter-col {
    gap: 1.2rem;
}

.news-letter-section-footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.news-letter-section-footer .section-title-white {
    font-size: 1.2rem;
}

.news-letter-section .title {
    text-align: center;
}

.news-letter-section-footer .text-1 {
    font-size: 0.95rem;
    color: var(--text-light);
}

.news-letter-section-footer .form-card {
    width: 100%;
}

/* Redes sociais pequenas, por baixo da newsletter */
.social-media-under-newsletter {
    margin-top: .5rem;
}

.social-media-under-newsletter .pi {
    font-size: 1.2rem;
}



.news-letterLabell {
    color: #000;
}

.news-letter-section .content-container {
    gap: 5%;
    display: flex;
    margin: 0 auto;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
    text-align: left;
}

.news-letter-section aside {
    width: 100%;
    text-align: left;
}

.form-card {
    width: 100%;

    /*
    
    background: var(--text-white);
    border-radius: 2.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);

    border-radius: 16px;
    box-shadow:
        0 7px 25px rgba(0, 31, 84, 0.045);
    border: 1px solid #e8edf3;*/

}

.news-letter-section .ui-outputlabel .ui-outputlabel-label {
    font-size: 1.2rem;
    font-weight: 600;
}

.news-letter-section .ui-fluid .ui-inputtext {
    border-radius: .8rem;
    height: 3rem;
}

.news-letter-filds-container {
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.black-btn.ui-button {
    background-color: var(--black);
    border: none;
    border-radius: 1rem;

    font-weight: bold;
}

.black-btn.ui-button:hover {
    background-color: var(--black-hover);
}

/* =================CALENDAR/EVENTS============== */
.events-section {
    min-height: 100vh;
    width: 100%;
}

/* Layout Container */
.events-section .events-grid,
.docs-procedures .docs-grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 4rem;
    color: var(--deep-indigo);
}

.events-section .events-header .events-title,
.docs-procedures .events-header .events-title {
    font-size: var(--section-title-2);
    font-weight: 900;
    /* margin-bottom: .8rem; */
    line-height: 1;
}

.events-section .events-header .events-divider,
.docs-procedures .events-header .events-divider {
    border: 0;
    border-top: 3px solid var(--orange);
    /* border-top: 3px solid #f2a900; */
    /* Yellow/Orange accent */
    width: 100%;
    margin: 1rem 0;
}

.events-section .events-header .events-link,
.docs-procedures .events-header .events-link {
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--deep-indigo);
    display: inline-block;
    margin-top: 1rem;
}

/* Events List Grid (2 columns for events) */
.events-section .events-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    column-gap: 30px;
    row-gap: 20px;
}

.docs-procedures .events-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    column-gap: 30px;
    row-gap: 20px;
}

/* Individual Event Item */
.events-section .events-item,
.docs-procedures .events-item {
    display: flex;
    cursor: pointer;
    align-items: flex-start;
    /* padding-bottom: 20px; */
    border-bottom: 1.8px solid #e0e0e0;
    transition: border-bottom .2s ease;
    overflow: hidden;
    gap: 6%;
}

.events-section .events-item:hover,
.docs-procedures .events-item:hover {
    border-bottom: 1.8px solid var(--orange);
}

.events-section .events-item .events-date {
    min-width: 60px;
    /* margin-right: 15px; */
}

.events-section .events-date .events-month {
    display: block;
    color: var(--orange);
    font-weight: bold;
    font-size: 0.9rem;
}

.events-section .events-date .events-day {
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    color: #999;
    line-height: 1;
}

.events-section .events-content .events-event-title,
.docs-procedures .events-content .events-event-title {
    font-size: 1.4rem;
    margin: 0 0 5px 0;
    font-weight: 600;
}

.events-description .events-section .events-content .events-time,
.docs-procedures .events-section .events-content .events-time {
    margin: 0;
    font-size: 1.1rem;
    color: #333;
}

/* ====================================================== */
/* LOGINPAGE */
/* ====================================================== */
.login-page .introduce-text {
    color: #fff;
    height: 50%;
    max-width: 40rem;
    padding-left: 10rem;
    text-align: center !important;
}

.login-page img {
    width: 20%;
    cursor: pointer;
}

.login-page .introduce-text p {
    font-size: 1.2em;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.login-page .introduce-text a {
    color: var(--text-white);
    text-decoration: none;
    font-weight: bold;
}

.login-page .introduce-text h1 {
    letter-spacing: 0.5px;
    font-size: 3rem;
    margin-top: 0px;
}


/* Define a imagem de fundo que ocupa a tela toda */
.login-page {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)),
        url('/resources/img/ship-hero1.webp') no-repeat center center fixed;
    background-size: cover;

    background-size: cover;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 4rem;

}

.login-page .login-header h2 {
    text-transform: uppercase;
    font-size: 1.8em;
    text-align: center;
}

/* Container do formulário de login */
.login-page .login-container {


    border-radius: 1.4rem;
    padding: 2rem;
    width: 30%;

    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

    color: #fff;
    /* texto claro */
}

/* Estilização dos campos do PrimeFaces para ficarem largos */

.login-page .ui-input-icon-left,
.login-page .ui-input-icon-right {
    width: 100%;
    display: unset;
}

.login-page .ui-inputfield {
    border-radius: .8rem;
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
}

/* Estilização do botão azul */
.login-page .btn-login.ui-button {
    border-radius: 1.2rem;
    width: 100%;
    background-color: var(--deep-indigo);
    border: none;
    font-size: 1.1em;
    padding: .4rem;
}

.login-page .btn-login.ui-button:hover {
    background-color: var(--blue-darc);
}

.email-input {
    margin-top: 8px !important;
}





/* Texto de ajuda e links */
.login-page .login-footer,
.login-page .login-header {
    text-align: left;
    font-size: .8rem;
    margin-bottom: .9rem;
    color: var(--text-light);
}

.login-page .login-footer .link-forget-password {
    color: var(--text-light);
    padding-bottom: 1rem;
    display: block;
    text-decoration: none;
}

.login-page .login-link {
    color: var(--blue);
    text-decoration: none;
    font-weight: bold;
}

/* Remove as bordas padrão do PrimeFaces para um visual mais limpo */
.login-page .ui-panelgrid,
.login-page .ui-panelgrid-cell {
    border: none !important;
}

.login-page .radio-group {
    padding-bottom: 1.3rem;
    display: flex;
    justify-content: space-between;
}

.login-page .footer-glass {
    position: absolute;
    bottom: 0%;
    left: 0;
    width: 100%;
    height: 3rem;

    text-align: center;

    color: var(--text-light);
    font-size: 0.9em;

    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border-top: 1px solid rgba(255, 255, 255, 0.2);
}



/* =================FOOTER============== */
footer {
    background-color: #111827;
    color: var(--text-white);
    position: relative;
}

footer .links-container {
    display: grid;
    align-items: baseline;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem;
    padding: 8rem 0;
}

footer .title {
    font-size: 1.2rem;
    font-weight: bold;
}

footer .links {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

footer a {
    color: #a2a3ce;
    font-size: 1.1rem;
    text-decoration: none;
    transition: .2s ease;
}

footer a:hover {
    color: var(--text-white);

}



.social-media-icons-wrapper {
    display: flex;
    gap: 1rem;
}

footer .pi {
    font-size: 1.8rem;
}

footer small {
    margin: 0 auto;
    padding-top: 2rem;
    width: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;

    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    width: 100%;
    gap: 1rem;
}

/* =========================
   FOOTER
========================= */

.footer-glass {
    width: 100%;
    padding: 10px 20px;
    text-align: center;
    font-size: 13px;
    box-sizing: border-box;
    background-color: #007bff;
    color: #ffffff;
    /* Cor branca para o texto se destacar no azul */

    /* SOLUÇÃO PARA O TEXTO FICAR DENTRO: */
    display: block;
    /* Força o rodapé a se comportar como um bloco sólido */
    position: relative;
    /* Garante que o fundo e o texto se movam juntos */
    clear: both;
    /* Impede que outros elementos da página fiquem por cima */
}

/* Ajuste específico para a tag de texto */
.footer-glass small {
    display: block;
    /* Transforma a tag small em bloco */
    margin: 0;
    /* Remove margens externas que empurram o texto */
    line-height: 1.5;
    /* Altura da linha para centralizar o texto verticalmente */
}





/* ===============SUPPORT PAGE============= */

.contact-form-section {
    display: flex;
    margin: 0 auto;
    gap: 10%;
    flex-flow: wrap;
    padding-top: 10rem;
    padding-bottom: 10rem;
}

/* Sticky Logic */
.form-intro {
    flex: 1;
}

.sticky-content {
    position: sticky;
    top: 50px;
    /* Adjust based on your header height */
}

.form-container {
    flex: 1.5;
    min-width: 22rem;
}


.description {
    font-size: 18px;
    color: #000;
    max-width: 350px;
}

/* Form Styling */
.form-row {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
    gap: 1rem;
}


.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
}


/* PrimeFaces Specific Overrides */
.contact-form-section .ui-inputfield,
.contact-form-section .ui-selectonemenu {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: .8rem !important;
    /* Removes default inner glow */
}

/* ===================== CAMPO DE TELEFONE COMBINADO ===================== */
/* País + número numa única caixa, como em formulários de sites modernos. */
.phone-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1.5px solid var(--border-color);
    border-radius: .8rem;
    background: #fafbfc;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}

.phone-group:focus-within {
    border-color: var(--blue) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15) !important;
}

/* seletor de país: compacto, sem borda própria, dividido por uma linha.
   Largura auto (o JS "syncCountryDialLabel" mostra só o DDI, ex.: +244),
   deixando o resto do espaço para o campo do número. */
.contact-form-section .phone-group .phone-country-select.ui-selectonemenu {
    width: 7rem !important;
    max-width: 7rem !important;
    min-width: 4.2rem !important;
    flex-shrink: 0;
    border: none !important;
    border-radius: 0 !important;
    border-right: 1.5px solid var(--border-color) !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 12px 10px 12px 14px !important;
}

.contact-form-section .phone-group .phone-country-select.ui-selectonemenu.ui-state-focus {
    border: none !important;
    border-right: 1.5px solid var(--border-color) !important;
    box-shadow: none !important;
    background: transparent !important;
}

.contact-form-section .phone-group .phone-country-select .ui-selectonemenu-label {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--black-hover);
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    width: auto !important;
}

/* A lista aberta mostra o nome do país + DDI por extenso, sem truncar.
   O painel do PrimeFaces é movido para o <body>, então é alvo direto pela
   styleClass (que também é aplicada ao painel). */
.phone-country-select.ui-selectonemenu-panel .ui-selectonemenu-item {
    white-space: normal !important;
    line-height: 1.35;
    padding: .5rem .8rem !important;
}

/* espaço para o código selecionado caber holgado */
.contact-form-section .phone-group .phone-country-select .ui-selectonemenu-trigger {
    color: var(--blue-hover);
    padding-left: .35rem !important;
}

.contact-form-section .phone-group .phone-country-select .ui-icon-triangle-1-s {
    margin-top: -3px !important;
}

/* input do número: preenche o resto, sem borda própria */
.contact-form-section .phone-group .ui-inputfield.ui-inputmask,
.contact-form-section .phone-group input.ui-inputfield.ui-inputmask {
    flex: 1;
    min-width: 0;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.contact-form-section .phone-group .ui-inputfield.ui-inputmask:focus,
.contact-form-section .phone-group input.ui-inputfield.ui-inputmask:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}






.contacts-container {
    width: 100%;

    list-style: none;
    padding: 0;
    /* margin: 30px 0; */
    /* Spacing from the description text */
}

.support-page .contact {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: var(--deep-indigo);
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem 0;

}

/* Styling the PrimeIcons */
.support-page .contact i {
    font-size: 1.2rem;
    margin-right: 1.4rem;
    color: var(--deep-indigo);
    width: 20px;
    text-align: center;
}

.support-page .contact p {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.2;
}

/* Optional: Hover effect for email/phone */
.support-page .contact:hover p {
    text-decoration: underline;
}

.support-page .hours-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.support-page .hours-row {
    display: flex;
    font-size: 1.1rem;
}

.support-page .day {
    font-weight: 600;
    margin-right: 4%;
    color: var(--deep-indigo);
}

.support-page .time {
    color: var(--deep-indigo);
}

.support-page .closed .time {
    color: #d9534f;
    font-weight: 600;
}

.support-page .section-title {
    font-size: var(--section-title);
    margin-bottom: 10px;
}

.contact-info-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 2rem;

    * {
        font-size: 1rem !important;
    }
}

/*=============================
DASHBOARD
============================
*/

.dashbord-layout {
    display: grid;
    grid-template-columns: 18% auto;
    height: 100vh;
    overflow: hidden;
    /* border: 3px solid blue; */
}

.dashbord-layout .logo {
    height: 50px;
    width: 50px;
}

.layout-content-container {
    height: 100%;
    overflow: hidden;
    min-width: 30rem;
}

.layout-side-bar-container {
    /* Anchor for the mobile expanded (overlay) sidebar */
    position: relative;
    box-shadow: var(--shadow-1);
}

.sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100% !important;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
    transition: width 0.3s ease;
    position: relative;
    padding-top: 1.1rem;
}

/* ---------------------------
   Dashboard top menu (bell, language selector, avatar)
--------------------------- */
.dashboard-menu .right-side {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Close ("x") button INSIDE the sidebar.
   Hidden while the sidebar is collapsed, shown only when expanded
   (mobile overlay state). Shares the base .hamburger-btn styling,
   hover and focus rules because the element carries both classes. */
.hamburger-btn-2 {
    position: absolute;
    top: 1rem;
    right: 0.25rem;
    z-index: 200;
    display: none;
}

/* Always hidden while the sidebar is collapsed — the higher
   specificity (0,2,0) beats the mobile `.hamburger-btn { display: block }`
   rule, so the button never appears in the collapsed icon rail. */
.sidebar .hamburger-btn-2 {
    display: none;
}

/* Hamburger button (inside the dashboard menu, mobile only) */
.hamburger-btn {
    display: none;
    /* Pin the button to the LEFT edge of the menu, while the bell,
       language selector and avatar stay on the right side. */
    margin-right: auto;
    z-index: 20;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.4rem;
    color: var(--deep-indigo);
    font-size: 1.4rem;
    transition: background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.hamburger-btn:hover {
    background: rgba(0, 31, 84, 0.08);
    color: var(--blue);
}

.hamburger-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.4);
}

/*========================
SIDER BAR
=========================*/

.dashLogo .container {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
}

.dashLogo .text {
    font-size: 1rem;
    color: var(--deep-indigo);
}

.side-bar.ui-menu {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0rem;
}


.layout-menu-container {
    height: 10%;
}

.layout-menu-container nav {
    height: 10%;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem;
    /* border-bottom: 1px solid var(--thiner-border-sec); */
    justify-content: end;

    position: sticky;
    left: 0;
    top: 0;
}

.side-bar.ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-text,
.side-bar.ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-icon,
.sidebar-overlay .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-text,
.sidebar-overlay .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-icon {
    font-weight: 500;
    color: var(--angola-black);
}

.side-bar.ui-menu .ui-menuitem-link {
    font-size: 0.9rem;
    display: flex;
    padding: .6rem .8rem !important;
    align-items: center;
    gap: 1rem;
}

.side-bar.ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.ui-state-hover {
    background-color: var(--angola-red);
}

.side-bar.ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.ui-state-hover .ui-menuitem-text,
.side-bar.ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.ui-state-hover .ui-menuitem-icon {
    color: var(--white-color);
}

.side-bar .logout-button {
    position: absolute;
    bottom: 0;
    left: 0;
}

.ui-menuitem.ui-widget .log-out-collapsed {
    position: absolute;
    bottom: 0;
}

.layout-children-container {
    padding: 0rem 1rem 0;
    /* border: 2px solid red; */
    height: 94%;
    overflow: hidden;
    width: 100%;
}


/* ============================================================== */
/* ======Responsiveness of the tables================== */
/* ============================================================== */
.ui-datatable.w150 table {
    min-width: 145rem;
}

.ui-datatable.w-xl table {
    min-width: 110rem;
}

.ui-datatable.w-xl-mini table {
    min-width: 88rem;
}

.ui-datatable.w-x table {
    min-width: 50rem;
}

.ui-paginator-center-content {
    min-width: 27rem !important;
    display: flex;
    justify-content: center;
}

.ui-paginator.ui-paginator-bottom.ui-widget-header {
    overflow: auto;
    scrollbar-width: none;
}

/* ============================================================== */

/* ===================================================== */
/* layout dashboards */
/* ===================================================== */

/* menu */
.side-bar.ui-menu .sidebar_element {
    color: var(--blue-darc) !important;
}

.side-bar.ui-menu .sidebar_element:hover {
    background: var(--deep-indigo) !important;
    color: var(--text-white) !important;
}

.goverment-detail .details-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 0.8rem;
}

.newsletter-language-select.ui-selectonemenu {
    border-radius: .8rem;
    height: 3rem;
}

.contact-form-section .ui-outputlabel-rfi {
    color: #d9534f;
}

.contact-form-section .form-group label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.2rem;
    width: fit-content;
}

/* dabhboard header on content */

.dashboard-form-settings {
    height: 80%;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: left;
    gap: 1rem;
}

.dashboard-form-settings-btn {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: row;
    gap: 1rem;
}

.dashboard-table-header {
    padding: 3rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10%;
    width: 100%;
}


.index-dashboard-container {
    width: 100%;
    height: 100%;

}


.index-dashboard-container .card {
    margin: 2rem 0;
    padding: 4rem;
    text-align: start;
    border-radius: 1.5rem;
    position: relative;
    overflow: hidden;
    color: #ffffff;
    width: 100%;

    /* Extreme Gradient: Combining linear deep indigo with a glowing cyan radial pulse */
    background:
        radial-gradient(circle at 90% 10%, rgba(0, 180, 216, 0.25) 0%, transparent 50%),
        linear-gradient(135deg, var(--deep-indigo) 0%, #001233 100%);

    /* Premium Shadow & Subtle Border Border */
    /* box-shadow: 
    0 20px 40px rgba(0, 31, 84, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.2); */

    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Decorative abstract maritime element (Abstract Wave/Glow) */
.index-dashboard-container .card::before {
    content: '';
    position: absolute;
    bottom: -50%;
    right: -10%;
    /* bottom: 0%;
    right: -4%; */
    width: 300px;
    height: 300px;
    background: var(--marine-blue);
    filter: blur(80px);
    border-radius: 50%;
    opacity: 1;
    pointer-events: none;
}

.index-dashboard-container .card h3 {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--ocean-cyan);
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.index-dashboard-container .card p {
    font-size: 2rem;
    font-weight: 500;

    /* background: linear-gradient(to right, #ffffff, #e0e0e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
}

/* ================Dashboard table============== */

.dashboard-form .table-title {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--deep-indigo);
}

.dashboard-form .table {
    /* height: 85%; */
}

.dashboard-form .ui-datatable tbody td {
    padding: 1rem 0;
}

.dashboard-form .ui-datatable-tablewrapper {
    /* Ocupa todo o espaço restante do form: a tabela chega ao fim da página
       e as linhas fazem scroll interno quando não cabem. */
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
}

/* A tabela estica-se dentro do .dashboard-form (flex column) até ao fim da página */
.dashboard-form .ui-datatable {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ===================DASHBOARD DIALOGS============ */


.dashboard-create-dialog.ui-dialog {
    width: 40% !important;
    height: 80vh !important;
}

body .ui-dialog .ui-dialog-titlebar {
    padding: .5rem;
}

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto 1rem auto;
}

.header .pi {
    font-size: 3rem;
    color: var(--blue);
}

.dashboard-create-dialog.ui-dialog.ui-resizable .ui-dialog-content {
    height: 86% !important;

}


.dashboard-create-dialog .ui-tabs .ui-tabs-panels .ui-tabs-panel {
    padding: 0;
}

/* Padronização de Labels e Inputs */
.dashboard-create-dialog .form-group {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dashboard-create-dialog .label-style {
    font-weight: bold;
    color: #444;
}


/* Esconde o texto do nome do arquivo que aparece ao lado/baixo */
.dashboard-create-dialog .form-section.imageUrl .ui-fileupload-filename {
    position: absolute;
    top: -1rem;
    left: 0px;
}

.imageUrl .ui-button {
    margin-top: 1rem;
    width: 100%;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: var(--blue);
    border: 2px dashed var(--blue);
    cursor: pointer;
    transition: background 0.3s;
}

.ui-fileupload-simple {
    width: 100%;
}

.imageUrl .ui-icon {
    display: none;
}

.imageUrl .ui-button:hover {
    background: #f0f4f8;
    color: var(--blue);
}

.dashboard-create-dialog .create-button.ui-button-primary {
    background: var(--blue);
    border: none;
    text-align: center;
    width: 100%;
}

.create-button-container {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 0px;

}

.ui-button.ui-button-text-icon-left .ui-button-text,
.ui-button-text-icon-left .ui-button-text {
    padding: 0;
}


/*PORT COMPANY SCHEDULE -STYLE*/
.port-company-info {
    background: linear-gradient(135deg, #1F4E79 0%, #2196F3 100%);
    border-radius: 1rem;
    padding: 2rem 2.5rem;
    margin-bottom: 2rem;
    color: white;
    box-shadow: 0 8px 30px rgba(31, 78, 121, 0.2);
    position: relative;
    overflow: hidden;
}

.port-company-info::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.port-company-info::after {
    content: '⚓';
    position: absolute;
    bottom: -20px;
    right: 30px;
    font-size: 8rem;
    opacity: 0.08;
    pointer-events: none;
}

.port-company-info .company-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.port-company-info .company-header .logo-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.port-company-info .company-header .company-name {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.port-company-info .company-header .company-name small {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 0.2rem;
    letter-spacing: 0.3px;
}

.port-company-info .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.port-company-info .info-item {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.port-company-info .info-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.port-company-info .info-item .info-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.port-company-info .info-item .info-value {
    font-size: 1.05rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.port-company-info .info-item .info-value i {
    opacity: 0.7;
    font-size: 1.1rem;
}

.port-company-info .info-item .info-value .highlight {
    color: #f2a900;
    font-weight: 600;
}

.port-company-info .info-item .info-value .route-arrow {
    color: #f2a900;
    margin: 0 0.2rem;
}

.port-company-info .schedule-note {
    grid-column: 1 / -1;
    background: rgba(242, 169, 0, 0.15);
    border: 1px solid rgba(242, 169, 0, 0.2);
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.port-company-info .schedule-note i {
    color: #f2a900;
    font-size: 1.2rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.port-company-info .schedule-note .note-text {
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.9;
}

.port-company-info .schedule-note .note-text strong {
    color: #f2a900;
}

.create-button {
    margin-top: 4px !important;
    margin-bottom: 14px !important;
}

.doc-icon {
    background: rgba(255, 165, 0, 0.15);
    color: var(--orange);
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* ========================================================== */

/* ================================================== */
/* SERVICE PUBLIC PAGE  */
/* ================================================== */

.services-page .service-content {
    padding-top: 3%;
    width: 100%;
    max-width: var(--width-of-the-content-in-hero-section);
}

.services-page .content-container {
    display: flex;
    flex-direction: column;
}




.services-page .cta-container {
    display: flex;
    gap: 2rem;
}


/* ====================================================== */
/* CREATE DIALOG (melhorado)                              */
/* ====================================================== */

/* --- Dialog: largura fluida e altura automática (antes: 40% / 80vh fixos,
       o que cortava o botão Guardar e ficava estreito em ecrãs médios) --- */
.dashboard-create-dialog.ui-dialog {
    width: clamp(22rem, 40vw, 34rem) !important;
    height: auto !important;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.dashboard-create-dialog.ui-dialog.ui-resizable .ui-dialog-content {
    height: auto !important;
    max-height: calc(90vh - 3rem);
    overflow-y: auto;
    padding: 1.5rem;
    scrollbar-width: thin;
}

/* --- Header: escopado (antes .header era global e podia colidir) --- */
.dashboard-create-dialog .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    margin: 0 auto 1.5rem;
    text-align: center;
}

.dashboard-create-dialog .header .icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(33, 150, 243, 0.09);
}

.dashboard-create-dialog .header .pi {
    font-size: 2rem;
    color: var(--blue);
}

.dashboard-create-dialog .header p {
    color: var(--text-gray);
    font-size: .95rem;
    line-height: 1.5;
}

/* --- Tabs de idioma --- */
.dashboard-create-dialog .ui-tabs .ui-tabs-nav {
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    padding: 0;
}

.dashboard-create-dialog .ui-tabs .ui-tabs-panels .ui-tabs-panel {
    padding: 1.25rem 0 0;
}

/* --- Grupos de campos (anula o flex:1 do .form-group global) --- */
.dashboard-create-dialog .form-group {
    flex: none;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.dashboard-create-dialog .label-style,
.dashboard-create-dialog .label-for-input {
    font-weight: 600;
    font-size: .9rem;

}

/* --- Larguras (não existiam no general) --- */
.dashboard-create-dialog .full-width,
.dashboard-create-dialog .w-full {
    width: 100% !important;
    box-sizing: border-box;
}

.dashboard-create-dialog .mt-3 {
    margin-top: 1rem;
}

/* --- Inputs e select --- */
.dashboard-create-dialog .ui-inputfield,
.dashboard-create-dialog .ui-selectonemenu {
    padding: .7rem .9rem;
    border: 1.5px solid var(--border-color);
    border-radius: .8rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.dashboard-create-dialog .ui-inputfield:focus,
.dashboard-create-dialog .ui-selectonemenu.ui-state-focus {
    border-color: var(--blue);


}

.dashboard-create-dialog .ui-selectonemenu .ui-selectonemenu-label {
    padding: 0;
}

/* --- Upload de documento (.form-grid / .label-for-input eram inexistentes) --- */
.dashboard-create-dialog .form-grid {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1.5rem;
}



.ui-fileupload-simple {
    width: 100%;
}

.dashboard-create-dialog .form-grid .ui-fileupload-simple {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.dashboard-create-dialog .form-grid .ui-fileupload-simple .ui-button {
    width: 100%;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--blue);
    border: 2px dashed var(--blue);
    border-radius: .8rem;
    cursor: pointer;
    transition: background .25s ease, transform .2s ease;
}

.dashboard-create-dialog .form-grid .ui-fileupload-simple .ui-button:hover {
    background: rgba(33, 150, 243, 0.06);
    transform: translateY(-1px);
}

.dashboard-create-dialog .form-grid .ui-fileupload-filename {
    font-size: .85rem;
    color: var(--text-gray);
    word-break: break-all;
}

/* --- Ações --- */
.create-button-container {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--thiner-border-sec);
}

.dashboard-create-dialog .save-button.ui-button {
    min-width: 9rem;
    padding: .7rem 1.6rem;
    background: var(--blue);
    color: var(--text-white);
    border: none;
    border-radius: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
}

.dashboard-create-dialog .save-button.ui-button:hover {
    background: var(--blue-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(31, 78, 121, 0.25);
}

/* --- Mobile --- */




/* ② QUICK SERVICES GRID (Glassmorphism) */
.services-container {

    position: relative;
    background: #fff;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.services-page .quick-grid {
    justify-content: center;
    align-items: center;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.56rem;
    height: 100%;
    /* border: 2px solid red; */
}

.services-page .service-card {
    cursor: pointer;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: var(--blur);
    border: 1px solid white;
    border-radius: 20px;
    padding: 2.5rem 1.875rem;
    text-align: center;
    transition: 0.4s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.service-card p {
    color: #6b7280;
}

.services-page .service-card:hover {
    transform: translateY(-10px);
    background: white;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.services-page .service-card i {
    font-size: 3rem;
    color: var(--deep-indigo);
    margin-bottom: 1.2rem;
}

.services-page .service-card .ui-button-text {
    color: var(--deep-indigo);
}

.services-page .service-card h3 {
    color: var(--deep-indigo);
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

.services-page .submeter-card {
    font-weight: 800;
    font-size: 1.1rem !important;
    width: fit-content;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: 0.2s;
}

.services-page .submeter-card:hover {
    border-color: var(--blue);
}

.services-page .card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}


/* ③ CAROUSEL SECTION */
.services-page .carousel-section {
    padding: 3.75rem 0;
    /* background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)),
            url("../resources/img/land-scape2.1.png"); */
    color: white;
    background: transparent !important;
}

.services-page .image-fixed {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: -1;
}

.services-page .image-fixed img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-page .image-fixed .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}


.services-page .custom-carousel .ui-carousel-item {
    padding: 1.56rem;
}

.services-page .carousel-item-content {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 25rem !important;
    width: 100%;
    border-radius: none !important;
}

.services-page .carousel-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.services-page .carousel-text {
    padding: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    border-radius: none !important;
    height: 100%;
}

/* ④ TIMELINE "COMO FUNCIONA" */
.services-page .timeline-section {
    padding: 100px 10%;
    text-align: center;
    background: #fff;
}

.services-page .timeline-container {
    display: flex;
    justify-content: space-between;
    margin-top: 3.125rem;
    position: relative;
}

.services-page .timeline-container::before {
    content: '';
    position: absolute;
    top: 1.675rem;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ddd;
    z-index: 1;
}

.services-page .step {
    position: relative;
    z-index: 2;
    flex: 1;
}

.services-page .step-icon {
    width: 60px;
    height: 60px;
    background: var(--blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-weight: bold;
    border: 5px solid #f4f7f9;
}

/* ⑤ SUBMISSION HUB */
.services-page .submission-hub {
    padding: 6.25rem 10%;
    background: linear-gradient(135deg, #fdfdfd 0%, #ebf2f8 100%);
    text-align: center;
}

.services-page .form-box {
    max-width: 31.25rem;
    margin: 2.4px auto;
    background: white;
    padding: 2.5rem;
    border-radius: 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);

}

.services-page .field {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: start;
}

/* AUXILIARES */


.services-page .rounded-btn {
    border-radius: 30px !important;
    padding: 0.625rem 1.5625rem !important;
    font-weight: bold !important;
}


.services-page .docs-procedures {
    background: #fff;
}



.docs-procedures .events-item {
    padding: 6% 0;
}

.docs-procedures {
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: start;
}

.doc-icon {
    background: rgba(255, 165, 0, 0.15);
    color: var(--orange);
    width: 60px;
    height: 60px;
    border-radius: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ///////////////////////////////////////// */
/* labels */
.section-main-services .detail-label {
    display: block;

    margin-bottom: 8px;

    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;

    color: var(--blue);

    opacity: .9;
}


/* conteúdo */
.section-main-services .custom-dialog .p-col-12 {
    margin-bottom: 18px;
}


/* título do serviço */
.section-main-services .custom-dialog .p-col-12:first-of-type+.p-col-12 span+* {
    display: block;

    color: var(--deep-indigo);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.4;
}


/* descrição */
.section-main-services .custom-dialog .p-col-12:last-of-type span+* {
    display: block;

    line-height: 1.7;
    color: var(--text-gray);
}


/* footer */
.section-main-services .custom-dialog .p-d-flex {
    padding-top: 20px;
    border-top: 1px solid var(--thiner-border-sec);
}


/* botão */
.section-main-services .custom-dialog .ui-button-flat {
    background: rgba(33, 150, 243, .08) !important;
    color: var(--blue-darc) !important;

    border: none !important;
    border-radius: 12px !important;

    padding: 12px 24px !important;

    font-weight: 600 !important;

    transition: all .3s ease;
}


.section-main-services .custom-dialog .ui-button-flat:hover {
    background: var(--blue) !important;
    color: white !important;

    transform: translateY(-2px);
}

.section-main-services {
    padding-top: 5%;
    /* display: grid;
                grid-template-columns: repeat(3, 1fr);

                border: 2px solid yellow; */
}

.section-main-services .detail-title * {
    padding: 0;
    margin: 0;
}

.section-main-services .detail-title {
    display: flex;
    align-items: baseline;
    gap: .8rem;
}




.services-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #f6f9fc;
    min-height: 100vh;
}



.services-section .ui-datascroller-inline .ui-datascroller-content {
    overflow: unset;
}

.section-main-services .ui-datascroller-list {
    /* border: 2px solid blue; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));

    gap: 2%;

    width: 100%;
    align-items: start;
}

.section-main-services .main-service-card {
    height: 25rem;
    background: var(--text-white);
    /* border: 1px solid var(--thiner-border-sec); */
    border-radius: 18px;

    overflow: hidden;
    cursor: pointer;

    /* box-shadow: var(--shadow-1); */

    transition: all 0.35s ease;

    display: flex;
    flex-direction: column;
    padding: 0;

    /* box-shadow: 0 16px 35px rgba(0, 31, 84, 0.12); */
    border-color: rgba(33, 150, 243, 0.25);

}



.docs-scroller .ui-datascroller-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    column-gap: 30px;
    row-gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.docs-scroller .ui-datascroller-item {
    padding: 0;
    list-style: none;
    min-width: 0;
}

.docs-scroller .ui-datascroller-loader {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}


/* ===================== SECTION ===================== */
.invite-clients-section {
    position: relative;
    background: #ffffff;
    overflow: hidden;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}


.invite-content-container {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.clients-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    margin-bottom: 24px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--blue-hover);
    background: rgba(33, 150, 243, 0.09);
    border: 1px solid rgba(33, 150, 243, 0.22);
    border-radius: 30px;
}

.clients-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
}

.section-title {
    margin: 0 0 20px;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.25;
    color: var(--deep-indigo);
}

.section-title .highlight {
    color: var(--orange);
}

.section-intro {
    margin: 0 auto 44px;
    max-width: 620px;
    font-size: var(--general-text);
    line-height: 1.75;
    color: var(--general-color);
}

.clients-cta {
    display: inline-flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.clients-cta a {
    display: inline-block;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.2s ease;
}

.clients-cta .btn-primary {
    color: #fff;
    background: var(--blue);
}

.clients-cta .btn-primary:hover {
    background: var(--blue-hover);
    transform: translateY(-2px);
}

.clients-cta .btn-outline {
    color: var(--deep-indigo);
    background: #fff;
    border: 1.5px solid var(--deep-indigo);
}

.clients-cta .btn-outline:hover {
    background: var(--deep-indigo);
    color: #fff;
}

/* ===================== LOGOS ===================== */
.clients-logos {
    margin-top: 70px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 46px;
}

.clients-logos .logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    opacity: 0.55;
    filter: grayscale(100%);
    transition:
        opacity 0.3s ease,
        filter 0.3s ease;
}

.clients-logos .logo-item:hover {
    opacity: 1;
    filter: grayscale(0%);
}

.clients-logos .logo-item img {
    max-height: 100%;
    max-width: 130px;
    object-fit: contain;
}

/* ===== Container do carrossel ===== */
.continuous-carousel {
    position: relative;
    width: 100%;

}

/* ===== Viewport com máscara lateral ===== */
.carousel-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg,
            transparent 0%,
            #000 8%,
            #000 92%,
            transparent 100%);
    mask-image: linear-gradient(90deg,
            transparent 0%,
            #000 8%,
            #000 92%,
            transparent 100%);
}

.remove-shadow {
    box-shadow: none;
    -webkit-mask-image: none;
    mask-image: none;
}




/* ===== Track que se move ===== */
.continuous-carousel .carousel-track {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: max-content;
    padding: 0.5rem 0;
    animation: scrollContinuous 40s linear infinite;
    will-change: transform;
}

.continuous-carousel:hover .carousel-track {
    animation-play-state: paused;
}


@keyframes scrollContinuous {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.continuous-carousel .member-card {
    flex: 0 0 auto;
    min-width: 0;
    width: 320px;
    height: auto;
}

/* ===== Card ===== */
.member-card {
    flex: 0 0 auto;
    width: 320px;
    background: #ffffff;
    min-width: 23rem;
    border: 1px solid #e6e9ef;
    border-radius: 18px;
    padding: 1.75rem 1.5rem;
    transition: all 0.35s ease;
    box-sizing: border-box;
    box-shadow: 0 4px 16px rgba(0, 31, 84, 0.06);
}

.member-card:hover {
    transform: translateY(-8px);
    border-color: var(--orange);
    box-shadow: 0 18px 40px rgba(0, 31, 84, 0.15);
}

.member-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
}

/* ===== Imagem / Avatar — CORRIGIDO ===== */
.member-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.card-image-wrapper {
    /* Dimensões fixas e quadradas — essencial para o círculo */
    width: 100%;
    height: 110px;
    flex-shrink: 0;
    overflow: hidden;
    border: 3px solid #f4f7fb;
    background: #f4f7fb;

    /* Garante que o filho preenche tudo */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* A imagem ocupa 100% e corta/centra corretamente */
.member-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* preenche o círculo sem distorcer */
    object-position: center;
    /* centra o rosto */
    display: block;
}

/* Fallback com inicial do nome */
.default-avatar {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, var(--blue) 0%, var(--deep-indigo) 100%);
}

/* ===== Info ===== */
.member-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.client-type {
    display: inline-block;
    align-self: center;
    background: rgba(33, 150, 243, 0.1);
    color: var(--blue-hover);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.85rem;
    border-radius: 50px;
    border: 1px solid rgba(33, 150, 243, 0.3);
}

.client-name {
    color: var(--deep-indigo);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0.25rem 0;
    line-height: 1.3;
}

.client-contact {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.client-contact span {
    color: var(--general-color);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    word-break: break-word;
}

.client-contact i {
    color: var(--orange);
    font-size: 0.85rem;
}

/* ===== Pontos de navegação ===== */
.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.75rem;
    padding: 0 1rem;
    flex-wrap: wrap;
}

.carousel-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d5dbe5;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.carousel-dots .dot:hover {
    background: var(--blue);
    transform: scale(1.2);
}

.carousel-dots .dot.active {
    background: var(--orange);
    width: 28px;
    border-radius: 6px;
}


/* ===== Wrapper com o vídeo ===== */
.gateway-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60vh;
    padding: 60px 24px;
    overflow: hidden;
    text-align: center;
}

#hero-video-service {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

/* ===== Overlay com a cor do vosso tema, semi-transparente ===== */
.gateway-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            var(--blue-darc) 0%,
            #001f54 100%);
    opacity: 0.75;
    z-index: 1;
}

/* detalhes decorativos, por cima do overlay */
.gateway-section::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 260px;
    height: 260px;
    background: #000;
    opacity: 0.12;
    border-radius: 50%;
    z-index: 2;
}

.gateway-section::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: -60px;
    width: 220px;
    height: 220px;
    background: #286eaf;
    opacity: 0.08;
    border-radius: 50%;
    z-index: 2;
}

.gateway-content {
    position: relative;
    z-index: 3;
    max-width: 720px;
}

.gateway-tag {
    display: inline-block;
    padding: 6px 16px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--black);
    background: var(--orange);
    border-radius: 20px;
}

.gateway-content h2 {
    margin: 0 0 16px;
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.2;
}

.gateway-content p {
    margin: 0 auto 28px;
    max-width: 560px;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.gateway-btn {
    display: inline-block;
    padding: 12px 32px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--orange);
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.25s ease,
        transform 0.2s ease;
}

.gateway-btn:hover {
    background: var(--black-hover);
    transform: translateY(-2px);
}

.institutional-partnership-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 1.5rem;
}

.institutional-partnership-section-containers {
    height: 100%;
    width: 100%;
}

.clients-carousel-container {
    height: 80%;
}

.clients-carousel-container-title {
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    gap: 1rem;
}

.clients-carousel-container-title h2 {
    font-size: var(--general-text);
    color: var(--general-color);
}

.port-soyo-section {
    width: 100%;
    background: #ffffff;
    font-family: sans-serif;
    height: 100vh;
}


.port-soyo-container {
    max-width: 100%;
    margin: 0 auto;
}

.port-soyo-content {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.port-soyo-label {
    display: inline-block;
    margin-bottom: 18px;

    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--orange);
}

.port-soyo-title {
    margin: 0;

    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 800;

    color: var(--deep-indigo);
}

.port-soyo-line {
    width: 55px;
    height: 4px;

    margin: 25px auto;

    background: var(--orange);
    border-radius: 10px;
}

.port-soyo-text {
    margin: 0 auto;

    font-size: var(--general-text);
    line-height: 1.8;

    color: var(--general-color);
}



/* container da imagem */
.section-main-services .card-image-container {
    position: relative;
    width: 100%;
    height: 50%;

    overflow: hidden;
    background: #f8fafc;

    transition: height 0.5s ease, transform 0.5s ease;

}

.section-main-services .main-service-card:hover .card-image-container {
    height: 35%;
}

/* .section-main-services .main-service-card:hover .card-image-container img {
                transform: scale(1.06);
            } */

/* imagem */
.section-main-services .card-image-container img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    /* transition: transform 0.5s ease; */
}

.pc-slider-wrapper {
    padding-top: 1rem;
    width: 40%;
    min-width: 18rem;
    overflow: hidden;
    position: relative;
    background: transparent;
}

.pc-slider-track {
    display: flex;
    transition: transform 0.7s ease;
}

.pc-slide-title {
    font-size: 18px;
    font-weight: 600;

    margin-bottom: 18px;

    color: #fff;
}

.pc-slide-title i {
    font-size: 20px;
}

.pc-slide-content {
    text-align: left;

    font-size: 16px;

    color: #fff;
}

.pc-slide-content i {
    font-size: 22px;
}

.pc-slide-content strong {
    color: #fff;
}

.pc-slide-content span {
    color: #fff;
}

.pc-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 10px;

    margin-top: 18px;
}

.pc-dot {
    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.35);

    cursor: pointer;

    transition: all 0.35s;
}

.pc-dot.active {
    width: 15px;

    border-radius: 20px;

    background: #fff;

    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}


/* Grid de cards */
.terminals-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1.75rem;
    width: 100%;
}

/* Card glass */
.terminal-card-main-cover {
    position: relative;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 18px;
    padding: 2rem 1.75rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    color: #fff;
    transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.terminal-card-main-cover:hover {
    transform: translateY(-8px) rotate(0deg) !important;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.35);
}

.terminal-card-main-cover h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0.75rem 0 0.6rem;
    color: #fff;
}

.terminal-card-main-cover p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.terminal-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--orange);
    color: var(--black);
    font-weight: 800;
    font-size: 0.95rem;
}

/* Efeito "atirado": rotações alternadas por card */
.card-rot-1 {
    transform: rotate(-3deg);
}

.card-rot-2 {
    transform: rotate(2deg);
}

.card-rot-3 {
    transform: rotate(-1.5deg);
}

.card-rot-4 {
    transform: rotate(3deg);
}

.card-rot-5 {
    transform: rotate(-2.5deg);
}

.card-rot-6 {
    transform: rotate(1.5deg);
}


.terminal-structure-section {
    background: #ffffff;

    overflow: hidden;
    position: relative;
}



/*=====================================================
        ORGANOGRAMA MODERNO
======================================================*/






/*=====================================================
HEADER
======================================================*/

.terminal-header {
    text-align: center;
    margin-bottom: 70px;
}

.terminal-subtitle {

    display: inline-block;
    color: #0d6efd;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-size: 14px;
}

.terminal-header h2 {

    font-size: 48px;
    font-weight: 800;
    color: #0f2444;
    margin-bottom: 18px;

}

.terminal-header p {

    max-width: 700px;
    margin: auto;
    color: #7d8b99;
    font-size: 17px;
    line-height: 30px;

}


/*=====================================================
ORGANOGRAMA
======================================================*/

.terminal-org-chart {

    display: flex;

    flex-direction: column;

    align-items: center;

    position: relative;

}

.level {

    display: flex;

    justify-content: center;

    width: 100%;

}

.connector.vertical {

    width: 2px;

    height: 45px;

    background: #b8c4d2;

}


/*=====================================================
CARDS PRINCIPAIS
======================================================*/

.card {

    background: #fff;

    border-radius: 18px;

    padding: 28px;

    text-align: center;

    width: 320px;

    box-shadow:

        0 15px 40px rgba(0, 0, 0, .08);

    transition: .35s;

    position: relative;

    z-index: 2;

}

.card:hover {

    transform: translateY(-8px);

    box-shadow: 0 25px 55px rgba(0, 0, 0, .12);

}

.card-icon {

    width: 70px;

    height: 70px;

    margin: auto;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #edf5ff;

    color: #0d6efd;

    font-size: 30px;

    margin-bottom: 18px;

}

.card h4 {

    color: #4d5967;
}

.ministry-card {

    /*border-top:5px solid #0d6efd;*/

}

.agency-card {

    /*border-top:5px solid #1f8ceb;*/

}

.port-card {

    background: #05378b;

    color: white;

}

.port-card .card-icon {

    background: rgba(255, 255, 255, .15);

    color: white;

}


/*=====================================================
LINHA DOS TERMINAIS
======================================================*/

.terminal-row {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 26px;

    margin-top: 30px;

}

.terminal-card {

    width: 220px;

    min-height: 210px;

    border-radius: 16px;

    background: #fff;
    /*linear-gradient(180deg,#0d73d6,#0a59b8);*/

    color: #2196f3;

    padding: 28px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    text-align: center;

    position: relative;

    transition: .35s;

    box-shadow: 0 20px 35px rgba(0, 0, 0, .12);

}

.terminal-card.active {

    background: #fff;

}

.terminal-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 30px 50px rgba(13, 115, 214, .35);

}

.terminal-card i {

    font-size: 40px;

    margin-bottom: 20px;

}

.terminal-card h5 {

    font-size: 1.1rem;

    font-weight: 700;

    line-height: 32px;

}

.terminal-card a {

    text-decoration: none;

    color: white;

    font-weight: 600;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

}

.terminal-card a i {

    font-size: 13px;

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .18);

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0;

}

/*=====================================================
SUB TERMINAIS
======================================================*/

.subterminal-row {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 45px;

}

.sub-card {

    width: 175px;

    min-height: 135px;

    border-radius: 16px;

    background: #2196f3;

    color: white;

    text-align: center;

    padding: 25px;

    transition: .35s;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .12);

}

.sub-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 25px 45px rgba(0, 0, 0, .16);

}

.sub-card i {

    font-size: 34px;

    margin-bottom: 18px;

    display: block;

}

.sub-card span {

    font-size: 18px;

    line-height: 26px;

    font-weight: 600;

}

/*=====================================================
FEATURES
======================================================*/

.terminal-features {

    margin-top: 70px;

    background: #fff;

    border-radius: 25px;

    padding: 2rem;

    display: flex;

    justify-content: space-around;

    gap: 10px;

    flex-wrap: wrap;

    width: 100%;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);

}

.feature {

    display: flex;

    align-items: center;

    gap: 15px;

    font-weight: 600;

    color: #4d5967;

}

.feature i {

    width: 58px;

    height: 58px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #edf5ff;

    color: #0d6efd;

    font-size: 24px;

}

/*==========================
BACKGROUND
==========================*/

.terminal-structure-section {

    position: relative;

    overflow: hidden;

    background: white;

}

.terminal-bg {

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 0;

}

.terminal-bg img {

    position: absolute;

    user-select: none;

    opacity: .18;

}

/* Âncora */

.bg-anchor {

    width: 170px;

    left: 40px;

    bottom: 180px;

    opacity: .20;

}

/* Porto */

.bg-port {

    width: 500px;

    right: -20px;

    bottom: 120px;

    opacity: .14;

}

/* Pontos */

.bg-dots-left {

    width: 150px;

    left: 0;

    top: 250px;

    opacity: .20;

}

.bg-dots-right {

    width: 180px;

    right: 0;

    top: 220px;

    opacity: .20;

}

/* Conteúdo acima das imagens */

.content-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-inline: var(--container-padding);
    box-sizing: border-box;
}





/* conteúdo */
.section-main-services .card-content {
    padding: 6%;
    height: 40%;
}

.section-main-services .card-content .card-description {
    margin: 0;
    font-size: 1.2rem;
    line-height: 30px;
    color: #1c1825;
    font-weight: 100;
    /* text-align: justify; */
    /* max-width: 30ch; */
    -webkit-line-clamp: 4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* zoom da imagem */
.section-main-services .description-container {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

.section-main-services .description-container .dark-divider {
    margin: 3% 0;
}


.section-main-services .main-service-card:hover .description-container {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.section-main-services .card-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--deep-indigo);

    transition: font-size 0.2s ease-out, transform 0.2s ease-out;

}

.section-main-services .main-service-card:hover .card-title {
    font-size: 1.2rem;

}

/* placeholder sem imagem */
.section-main-services .card-image-container .pi-image {
    color: #cbd5e1 !important;
    font-size: 3rem !important;
}

.section-main-services .card-image-container img,
.section-main-services .card-image-container .ui-graphicimage {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-page .header-container {
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

.services-page .header-container .section-title {
    padding: 1.4rem 0;
}

.header-container p {
    line-height: 2;
}

.services-page .header-container .meta-title {
    text-transform: uppercase;
    font-weight: 600;
}

.meta-title,
.services-page .header-container .subtitle {
    color: var(--blue);
    font-size: clamp(32px, 4vw, 46px);
}

.services-page .header-container .subtitle {
    font-size: 1.2rem;
    padding-bottom: 3rem;
}

/* ============================REQUEST SERVICE============================= */
.request-service-content {
    width: var(--width-of-the-content-in-hero-section);
}

.request-service-content.news {
    padding-top: 8rem;
}

/* =================================================================== */
/* NEWS PUBLIC PAGE */
/* =================================================================== */
/* Novo Hero Section */

.ships-hero-section {
    width: 100%;
    padding: 4rem 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    /* fundo por trás do container, já que este deixa de ser full-width */
}

.ships-hero-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ships-hero-section .hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.ships-hero-section .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.45) 0%,
            rgba(31, 78, 121, 0.55) 55%,
            rgba(0, 0, 0, 0.65) 100%);
    z-index: 1;
}

.ships-hero-section .hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    padding: 0 1.5rem;
    text-align: center;
}

.landing-page-hero .hero-content {
    padding-top: 12rem;

}


.ships-hero-section .section-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--orange);
    margin-bottom: 1rem;
}

.ships-hero-section .hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.ships-hero-section .hero-title::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    margin: 1rem auto 0;
    background: var(--orange);
    border-radius: 4px;
}

.ships-hero-section .hero-subtitle {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* Responsivo */
@media (max-width: 992px) {
       .related-images-dialog {
          width: 95vw !important;
        }

        .related-images-dialog .ui-dialog-content {
          max-height: 80vh;
        }

        .related-image-edit-media {
          flex-direction: column;
        }

        .terminals-cards-grid {
          grid-template-columns: repeat(2, 1fr);
      }
    .ships-hero-container {
        height: 75vh;
    }
}

@media (max-width: 640px) {

         .terminals-hero-section {
          height: auto;
          padding: 5rem 0;
      }

      .terminals-cards-grid {
          grid-template-columns: 1fr;
      }

      .card-rot-1,
      .card-rot-2,
      .card-rot-3,
      .card-rot-4,
      .card-rot-5,
      .card-rot-6 {
          transform: rotate(0deg);
      }
    .ships-hero-container {
        height: 60vh;


    }

    .ships-hero-section .hero-bg-video {
        object-position: ___ center;
    }

    .ships-hero-section {
        padding: 4rem 0 0;
    }
}





.news-page .news-hero {
    background: linear-gradient(135deg, var(--blue-darc) 0%, #153452 100%);
    height: 100vh !important;
}

.news-page .news-hero h1 {
    font-size: 2.8rem;
    margin-bottom: 10px;
    font-weight: 800;
}

/* Texto em fundo branco */
.news-page .news-item h3,
.news-page .sidebar-title {
    color: var(--text-dark) !important;
    text-transform: uppercase;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.news-page .news-item p {
    color: var(--text-dark);
}

.news-page .news-container {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
    min-height: 100vh;
}

/* Seção de Filtros */
.news-page .news-filters {
    grid-column: 1 / -1;
    padding: 15px;
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 2rem;
    background: var(--deep-indigo);
    border-radius: 8px;
    flex-flow: wrap;
    justify-content: space-between;
}

.filtering-options {
    min-width: 17rem;
}

.news-page .search-bar input {
    border-radius: 20px;
    width: 100%;
}

.news-page .search-bar {
    display: flex;
    gap: .8rem;
    width: 100%;
    min-width: 14rem;
    max-width: 18rem;
}

.news-page .search-bar .custom-search {
    border-radius: 20px;
    padding: 5px 15px;
}

/* Notícia em Destaque (Hero) */
.news-page .main-highlight {
    background-size: cover;
    background-position: center;
    background-image: url('../../resources/img/truckers1.jpg');
    position: relative;
    height: 28.125rem;
    overflow: hidden;
    /* border-radius: .3rem; */
    margin-bottom: 1.8rem;
}

.news-page .ui-datascroller .ui-datascroller-content {
    padding: 0;
    border: none;
}

.news-page .main-highlight h2 {
    font-size: 2rem;
}

.news-page .highlight-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    color: var(--text-white);
}

/* Grid de Notícias Secundárias */
.news-page .secondary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
    gap: 2rem;
}

.news-page .news-card {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: 0.3s;
}

.news-page .news-card:hover {
    transform: translateY(-5px);
}

/* IMAGE */
.news-page .card-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

/* CONTENT */
.news-page .card-content {
    padding: 1.5rem;
}

.news-page .card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    color: #777;
}

/* TAGS */
.news-page .tag {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    color: #fff;
}

.news-page .tag.animals {
    background: #2ecc71;
}

.news-page .tag.lifestyle {
    background: #1abc9c;
}

.news-page .tag.history {
    background: #34495e;
}

/* TITLE */
.news-page .news-card h3 {
    font-size: 1.1rem;
    margin: 10px 0;
}

/* TEXT */
.news-page .news-card p {
    font-size: 0.9rem;
    color: #555;
    height: auto;
}

.news-page .card-desc {
    font-size: 0.9rem;
    color: var(--text-gray);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.news-page .ui-button.ui-button-text-only .ui-button-text {
    color: var(--blue-darc);
}

/*===============BUTTON SETTINGS============ */

body .ui-commandlink:hover,
body .ui-link:hover {
    text-decoration: none;
}

.news-page .read-more-btn {
    margin-top: .635rem;
    background: none !important;
    color: #1abc9c !important;
    border: none !important;
    font-weight: bold;
}



/* Estilo dos Mini Cards na Sidebar */
.news-page .sidebar-wrapper {
    position: sticky;
    top: 1.2rem;
    /* Distância do topo ao fazer scroll */
    height: fit-content;
    max-height: 90vh;
    overflow: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.news-page .sidebar-update-card {
    display: flex;
    gap: .8rem;
    padding: 1.1rem;
    margin-bottom: .7rem;
    background: var(--text-white);
    border-radius: 8px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    /* Caso use link direto */
}

.news-page .sidebar-update-card:hover {
    border-color: var(--deep-indigo);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateX(5px);
}

.news-page .update-img {
    width: 4.375rem;
    height: 4.375rem;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.news-page .update-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-page .update-category {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--deep-indigo);
    margin-bottom: .2rem;
}

.news-page .update-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Ajuste na Sidebar para não ficar muito larga */
.news-page .sidebar-section {

    padding: 1rem !important;
    margin-top: 1rem;
}


/* ==========================ABOUT US PAGE========================================= */


.about-us-page .our-mission {
    margin: 10rem 0;
    min-height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('./../resources/img/armazenamento.webp');
    width: 100%;
}

.about-us-page .mission-desc {
    padding-top: 2rem;
    width: var(--width-of-the-content-in-hero-section);
    text-align: center;
}



.about-us-page .subtitle {
    padding-bottom: 2rem;
}


.about-us-page .history-section .content-container {
    padding: 2rem 0;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    font-size: var(--general-text) !important;
    color: var(--blue) !important;
}

.about-us-page .history-section .subtitle {
    width: 100%;
    text-align: left;
    font-size: var(--general-text);
    color: var(--general-color);
}


.about-us-page .history-section h1 {
    margin: 0 0 18px;
}

.about-us-page .history-section p {
    text-align: justify;
}

.about-us-page .history-section img {
    height: auto;
    width: 100%;
    border-radius: 16px;
}

.about-us-page .ui-tabs .ui-tabs-panels .ui-tabs-panel {
    padding: 0;
}

@media (max-width: 768px) {
    .about-us-page .ui-tabs .ui-tabs-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0;
        margin: 0;
        overflow: visible;
        box-sizing: border-box;
    }

    .about-us-page .ui-tabs .ui-tabs-nav li.ui-tabs-header {
        float: none;
        display: flex;
        flex: 1 1 14rem; /* encolhe com a tela, mínimo de 14rem; quebra linha se preciso */
        min-width: 0;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .about-us-page .ui-tabs .ui-tabs-nav li.ui-tabs-header>a {
        float: none;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        padding: 0.8rem 1rem;
        text-align: center;
        white-space: normal;
        box-sizing: border-box;
    }

    .about-us-page .ui-tabs .ui-tabs-nav li.ui-tabs-header>a h3 {
        margin: 0;
        font-size: clamp(0.95rem, 3.4vw, 1.15rem);
        line-height: 1.35;
        font-weight: 700;
        overflow-wrap: anywhere;
    }
}

/* Ecrãs estreitos: cada cabeçalho ocupa uma linha completa */
@media (max-width: 480px) {
    .about-us-page .ui-tabs .ui-tabs-nav li.ui-tabs-header {
        flex: 0 0 100%;
        width: 100%;
    }
}

/* Ecrãs muito pequenos (< 375px): menos espaço e tipografia contida */
@media (max-width: 375px) {
    .about-us-page .ui-tabs .ui-tabs-nav {
        gap: 0.4rem;
    }

    .about-us-page .ui-tabs .ui-tabs-nav li.ui-tabs-header>a {
        padding: 0.6rem 0.75rem;
    }

    .about-us-page .ui-tabs .ui-tabs-nav li.ui-tabs-header>a h3 {
        font-size: 0.95rem;
        letter-spacing: 0;
    }
}

.about-us-page .missions-and-values-section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0 0 10rem 0;
}

.about-us-page .missions-and-values-section .content-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 2rem;
    color: #333;
}


.about-us-page .visions-and-values-list {
    margin-top: 1.5rem;
}

.about-us-page .visions-and-values-list li {
    margin-bottom: 0.5rem;
    color: var(--general-color);
    font-size: var(--general-text);
}

.about-us-page .section-intro {
    margin-top: 0.8rem;
    color: var(--general-color);
    font-size: var(--general-text);
}


.about-us-page .organizational-structure-section .ui-carousel-content {
    /* position: relative; */
    padding-top: 2rem;
}

.about-us-page .missions-and-values-section .content-container .image-container {
    min-height: 30rem;
}

.about-us-page .organizational-structure-section .ui-carousel-prev.ui-link,
.about-us-page .organizational-structure-section .ui-carousel-next.ui-link {
    display: none;
    position: absolute;
}

.about-us-page .organizational-structure-section .content-container {
    display: flex;
    gap: 2rem;
    align-items: start;
    justify-content: space-between;
}

.about-us-page .organizational-structure-section h2 {
    padding-bottom: .8rem;
}

.about-us-page .infrastructure-container .pi {
    font-size: 3rem;
}

.about-us-page .infrastructure-container {
    height: 90vh;
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    /* Adjusted for sidebar visibility */
    gap: 24px;
    /* padding: 20px; */
    /* background-color: #000; */
    overflow: hidden;
    /* Prevents whole page scroll */
}

/* Main Left Card - Flex behavior for content and image */
.about-us-page .infrastructure-container .main-feature {
    /* background: linear-gradient(145deg, #111, #000); */
    /* border-radius: 24px; */
    /* padding: 40px; */
    display: flex;
    flex-direction: column;
    /* border: 1px solid #222; */
    overflow: hidden;
}

.about-us-page .infrastructure-container .main-visual {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    border-radius: 16px;
    overflow: hidden;
    /* background: #0a0a0a; */
}

.about-us-page .infrastructure-container .main-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Side Content - Scrollable */
.about-us-page .infrastructure-container .side-content {
    overflow-y: auto;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Scrollbar styling for a clean look */
.about-us-page .infrastructure-container .side-content::-webkit-scrollbar {
    width: 4px;
}

.organizational-structure-section-carousel img {
    border-radius: 16px;
}

.organizational-structure-section-carousel.ui-carousel .ui-carousel-indicators .ui-carousel-indicator.ui-state-highlight button {
    background-color: var(--deep-indigo) !important;
    border-radius: 16px;
}

.organizational-structure-section-carousel.ui-carousel .ui-carousel-indicators button {

    border-radius: 16px !important;
}

.about-us-page .infrastructure-container .side-content::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 10px;
}

.about-us-page .infrastructure-container .mini-card {
    /* background: #0f0f0f; */
    border-radius: 16px;
    border: 1px solid #007bff8f;
    box-shadow: 0 0 10px #0004;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-us-page .infrastructure-container .mini-card:hover {
    transform: translateY(-2px);
}

/* .mini-card.active {
            border-color: #007bff;
            background: #161616;
        } */

/* PrimeIcon Styles in Thumb */






.about-us-page .infrastructure-container .thumb {
    height: 120px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: #1a1a1a; */
    font-size: 2.5rem;
    color: #007bff;
    border-bottom: 1px solid #007bff8f;
}

.about-us-page .infrastructure-container .info {
    color: white;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.about-us-page .infrastructure-container .status-tag {
    font-size: 0.7rem;
    padding: 4px 10px;
    background: #222;
    border-radius: 20px;
    color: #aaa;
    font-weight: 600;
}

.about-us-page .infrastructure-container .status-tag.seller {
    background: #007bff;
    color: white;
}

/* =============================================================== */
.about-us-page .infrastructure-section .side-content h3 {
    color: var(--deep-indigo);
}

/* Container sizing */
.chronoline-admin-container {
    padding: 4rem 0;
    /* max-width: 900px; */
    margin: 0 auto;
}

/* Marker Styling - Putting the photo in the center line */
.ui-chronoline-event {
    height: 14rem;
}

.admin-marker {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #001f54;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.admin-marker img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card Styling inside the Chronoline */
.admin-node-card {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 10px;
    border-left: 5px solid #001f54;
    /* Left border accent */
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    text-align: left;
}

/* Reverse border for alternate side */
.ui-chronoline-event:nth-child(even) .admin-node-card {
    border-left: none;
    border-right: 5px solid #001f54;
    text-align: right;
}

.admin-name {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: #001f54;
}

.admin-rank {
    display: block;
    color: #004a99;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.admin-desc {
    font-size: 0.9rem;
    color: #555;
    margin: 0;
}

/* Adjusting the Chronoline connector line color */
/* .ui-chronoline-event-connector {
            background-color: #001f54;



        } */











/* Hide all panels by default, show only .active */
.display-panel {
    display: none;
}

.display-panel.active {
    display: contents;
    /* lets children flow naturally inside the card */
}




/* Highlight the active mini-card */
.mini-card.active {
    border-color: 4px solid green;
    /* e.g. box-shadow: 0 0 0 2px rgba(0, 100, 200, 0.2); */
}






/* ===================== SECTION ===================== */
.about-port-section {
    position: relative;
    background: #ffffff;
    overflow: hidden;
}

.about-port-section::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -180px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.07) 0%, transparent 70%);
}

.content-container-port-soyo-section {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
}

/* ===================== HEADER ===================== */
.about-port-header {
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
}

.about-port-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    margin-bottom: 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--blue-hover);
    background: rgba(33, 150, 243, 0.09);
    border: 1px solid rgba(33, 150, 243, 0.22);
    border-radius: 30px;
}

.about-port-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
}



.section-intro {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.8;
    color: #5b6472;
}

/* ===================== FACTOS-CHAVE ===================== */
.about-facts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 56px 0 76px;
}

.about-fact-card {
    background: #f6f9fc;
    border: 1px solid var(--thiner-border-sec);
    border-radius: 14px;
    padding: 26px 20px;
    text-align: center;
}

.about-fact-card .fact-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--orange);
    margin-bottom: 8px;
    line-height: 1.1;
}

.about-fact-card .fact-label {
    font-size: var(--general-text);
    line-height: 1.5;
    color: #667085;
}

/* ===================== BLOCO DE TEXTO ===================== */
.about-port-text {
    max-width: 100%;
    margin: 0 auto 80px;
    font-size: var(--general-text);
    line-height: 1.9;
    color: var(--general-color);
    text-align: center;
}

.about-port-text p {
    margin: 0 0 20px;
}

.about-port-text p:last-child {
    margin-bottom: 0;
}

/*
 .section-title {
    margin: 0 0 20px;
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -0.6px;
    color: var(--deep-indigo);
  }*/
/* ===================== TIMELINE ===================== */
/*.about-timeline-title {
    text-align: center;
    font-weight: 800;
    color: var(--deep-indigo);
    margin: 50px 0px 50px;


    font-size: clamp(32px, 4vw, 46px);
    position: relative;
    line-height: 2;
  }*/


.about-timeline {
    position: relative;
    max-width: 100%;
    text-align: left;
}

.about-timeline::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--thiner-border-sec);
}

.timeline-item {
    position: relative;
    padding-left: 62px;
    margin-bottom: 44px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-item .dot {
    position: absolute;
    left: -10px;
    top: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--blue);
    z-index: 1;
}

.timeline-item.milestone-alert .dot {
    border-color: var(--orange);
}

.timeline-item .year {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--blue-hover);
    background: rgba(33, 150, 243, 0.09);
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.timeline-item.milestone-alert .year {
    color: #b8790a;
    background: rgba(242, 169, 0, 0.14);
}

.timeline-item p {
    margin: 0;
    font-size: var(--general-text);
    line-height: 1.5;
    color: var(--general-color);
}



.institutional-title {
    display: flex;
    flex-direction: column;
}



/* =====================================================
     VALORES
  ===================================================== */
.missions-and-values-section {
    position: relative;
    background: #ffffff;
    overflow: hidden;
}

.missions-and-values-section::before {
    content: "";
    position: absolute;
    top: -180px;
    left: -160px;
    width: 420px;
    height: 420px;
    background: transparent;
    z-index: 0;
}



.visions-container .section-title {
    margin: 0 0 18px;
    font-size: clamp(28px, 3.6vw, 38px);
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--deep-indigo);
}

.visions-container .section-intro {
    margin: 0 0 34px;
    font-size: var(--general-text);
    line-height: 1.75;
    color: var(--general-color);
    max-width: 100%;
}

.visions-and-values-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;

}

.visions-and-values-list li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 500;
    color: var(--black-hover);
    background: #f6f9fc;
    border: 1px solid var(--thiner-border-sec);
    border-radius: 10px;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.visions-and-values-list li:hover {
    background: rgba(33, 150, 243, 0.06);
    border-color: rgba(33, 150, 243, 0.3);
    transform: translateX(4px);
}

.visions-and-values-list li::before {
    content: "";
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--deep-indigo);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

.image-container-missions-and-values {
    position: relative;
    height: 100%;
}

.image-container-missions-and-values::before {
    content: "";
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    z-index: 0;
    background: transparent;
    border: 1px solid var(--orange);
    border-radius: 18px;
    display: none;
}

.image-container-missions-and-values img {
    /*position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: var(--shadow-1);*/

    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left bottom;
    /* Alinha à esquerda e desce tudo para a base */
    border-radius: 16px;
    box-shadow: var(--shadow-1);

}



/* =====================================================
     MISSÃO
  ===================================================== */
.our-mission {
    position: relative;
    background: linear-gradient(135deg, var(--deep-indigo) 0%, var(--blue-darc) 100%);
    overflow: hidden;
}

.our-mission::before {
    content: "";
    position: absolute;
    bottom: -160px;
    right: -120px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(242, 169, 0, 0.14) 0%, transparent 70%);
}

.our-mission::after {
    content: "";
    position: absolute;
    top: -140px;
    left: -140px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.16) 0%, transparent 70%);
}

.our-mission .content-container {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    text-align: center;
}

.section-title-white {
    margin: 0 0 22px;
    font-size: clamp(28px, 3.8vw, 40px);
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #ffffff;
}

.our-mission .divider {
    width: 25%;
    height: 3px;
    margin: 0 auto 30px;
    border-radius: 2px;
    background: var(--orange);
}

.mission-desc {
    margin: 0;
    font-size: var(--general-text);
    line-height: 1.89;
    color: rgba(255, 255, 255);
}

.org-structure-section {
    position: relative;
    background: #f6f9fc;
    overflow: hidden;
}

.org-structure-section::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -180px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle,
            rgba(33, 150, 243, 0.08) 0%,
            transparent 70%);
}

.content-container-organizational-structure-section {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    min-height: 100vh;
}

.org-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    margin-bottom: 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--blue-hover);
    background: rgba(33, 150, 243, 0.09);
    border: 1px solid rgba(33, 150, 243, 0.22);
    border-radius: 30px;
}

.org-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
}

.section-title {
    margin: 0 0 20px;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--deep-indigo);
}

.section-intro {
    margin: 0 auto 56px;
    max-width: 620px;
    font-size: 16px;
    line-height: 1.75;
    color: #5b6472;
}

/* ===================== GRID DE CARGOS ===================== */
.org-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: left;
}

.org-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 20px;
    background: #ffffff;
    border: 1px solid var(--thiner-border-sec);
    border-radius: 14px;
    text-decoration: none;
    box-shadow: var(--shadow-1);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.org-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0, 31, 84, 0.12);
    border-color: rgba(33, 150, 243, 0.35);
}

.org-item .icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(33, 150, 243, 0.1);
    border-radius: 12px;
    transition: background 0.25s ease;
}

.org-item:hover .icon {
    background: var(--blue);
}

.org-item .icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--blue);
    fill: none;
    stroke-width: 1.8;
    transition: stroke 0.25s ease;
}

.org-item:hover .icon svg {
    stroke: #ffffff;
}

.org-item .label {
    font-size: var(--general-text);
    font-weight: 700;
    color: var(--deep-indigo);
    line-height: 1.35;
}

.org-item .arrow {
    margin-left: auto;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    stroke: var(--blue-hover);
    fill: none;
    stroke-width: 2;
    opacity: 0;
    transform: translateX(-4px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.org-item:hover .arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ===================== CTA ===================== */
.org-cta-wrap {
    margin-top: 54px;
    display: flex;
    justify-content: center;
}

.org-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 34px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    background: var(--deep-indigo);
    border-radius: 9px;
    text-decoration: none;
    transition:
        background 0.25s ease,
        transform 0.2s ease;
}

.org-cta-btn:hover {
    background: var(--blue-hover);
    transform: translateY(-2px);
}

.org-cta-btn svg {
    width: 16px;
    height: 16px;
    stroke: #ffffff;
    fill: none;
    stroke-width: 2.2;
}

.pca-section {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%;
    position: relative;
    background: #ffffff;
    overflow: visible;
}

.content-container-chairman-message {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 64px;
    align-items: center;
}

.pca-photo-wrap {
    position: relative;
}

.pca-photo-wrap::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: 3px solid var(--orange);
    border-radius: 18px;
    z-index: 0;
    display: none;
}

.pca-photo-wrap img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 460px;
    object-fit: cover;
    object-position: center 15%;
    border-radius: 18px;
    box-shadow: var(--shadow-1);
}

.pca-role-badge {
    position: absolute;
    z-index: 2;
    left: 24px;
    bottom: -22px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--deep-indigo);
    border-radius: 12px;
    box-shadow: 0 12px 25px rgba(0, 31, 84, 0.25);
}

.pca-role-badge span {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.3px;
}

.pca-message-col {
    padding-left: 8px;
}

.pca-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    margin-bottom: 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--blue-hover);
    background: rgba(33, 150, 243, 0.09);
    border: 1px solid rgba(33, 150, 243, 0.22);
    border-radius: 30px;
}

.link-message {
    text-decoration: none;
    color: var(--deep-indigo);
}

.pca-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
}

.pca-quote-icon {
    width: 46px;
    height: 34px;
    margin-bottom: 22px;
    fill: var(--blue);
    opacity: 0.85;
}

.section-title {
    margin: 0 0 26px;
    font-size: clamp(26px, 3.4vw, 34px);
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.25;
    color: var(--deep-indigo);
}

.pca-message-text {
    margin: 0 0 36px;
    font-size: var(--general-text);
    line-height: 1.85;
    color: var(--general-color);
}

.pca-message-text p {
    margin: 0 0 18px;
}

.pca-message-text p:last-child {
    margin-bottom: 0;
}

.pca-signature {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 26px;
    border-top: 1px solid var(--thiner-border-sec);
}

.pca-signature img.signature-img {
    height: 44px;
    object-fit: contain;
}

.pca-signature .pca-name-block strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: var(--deep-indigo);
}

.pca-signature .pca-name-block span {
    font-size: 13.5px;
    color: #667085;
}

/* ===================== SECTION ===================== */
.leadership-section {
    background: var(--deep-indigo);
    border-radius: 16px;
}

.content-container-organizational-structure {
    max-width: 1160px;
}

/* ===================== HEADER ===================== */
.leadership-eyebrow {
    font-size: 14px;
    color: #566072;
    margin: 0 0 18px;
}

.leadership-topbar {
    display: flex;
    align-items: center;
    padding-bottom: 26px;
    border-bottom: 1px solid #fff;
    margin-bottom: 44px;
}

.leadership-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.leadership-title .mark {
    width: 30px;
    height: 30px;
    border-radius: 6px 6px 6px 0;
    background: linear-gradient(135deg, var(--blue), var(--blue-darc));
}

.leadership-title h1 {
    margin: 0;
    font-size: clamp(26px, 3.4vw, 34px);
    font-weight: 800;
    color: #fff;
}

/* ===================== GRID: CTA fixa + carousel ===================== */
.leadership-grid {
    display: flex;
    gap: 22px;
    align-items: stretch;
}

.leadership-cta {
    flex: 0 0 260px;
    /*background: #ffffff;
        
        box-shadow: var(--shadow-1);
          padding: 28px 24px;
        */
    background: transparent;
    border-radius: 14px;


    display: flex;
    flex-direction: column;
}

.leadership-cta .eyebrow-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 14px;
}

.leadership-cta h2 {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
    color: #ffffff;
    margin: 0 0 14px;
}

.leadership-cta p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--orange);
    margin: 0 0 24px;
    flex-grow: 1;
}

.leadership-cta .cta-btn {
    display: inline-block;
    text-align: center;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    color: var(--deep-indigo);
    background: #fff;
    border: 1.5px solid var(--deep-indigo);
    border-radius: 8px;
    text-decoration: none;
    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.leadership-cta .cta-btn:hover {
    background: var(--deep-indigo);
    color: #fff;
}

/* ===================== CAROUSEL ===================== */
.carousel-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.carousel-viewport {
    overflow: hidden;
    border-radius: 14px;
}

.carousel-track-organizational {
    display: flex;
    transition: transform 0.6s ease;
}

.carousel-page {
    flex: 0 0 100%;
    display: flex;
    gap: 22px;
}

/* ---- card membro ---- */
.admin-node-card {
    position: relative;
    flex: 1;
    min-height: 400px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-1);
    background: #dfe6ec;
    display: flex;
    align-items: flex-end;
}

.admin-node-card .admin-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
}

.admin-node-card .card-info {
    position: relative;
    z-index: 1;
    width: 100%;
    background: #ffffff;
    padding: 16px 18px;
    border-radius: 8px;
}

.admin-node-card .admin-name {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--deep-indigo);
}

.admin-node-card .admin-rank {
    display: block;
    font-size: 13px;
    color: #667085;
    margin-top: 2px;
}

.admin-node-card .admin-desc,
.admin-node-card small {
    display: none;
}

/* ---- pontos ---- */
.carousel-dots-organizational-structure {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.carousel-dots-organizational-structure button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.carousel-dots-organizational-structure button.active {
    background: #ffffff;
    transform: scale(1.2);
}


/* ==================================================== */
/* DEELETE DIALOG */
/* ==================================================== */
/* Overlay */
.ui-dialog-mask {
    backdrop-filter: blur(6px);
    background: rgba(15, 23, 42, 0.35) !important;
}

/* Main dialog */
.embassy-dialog-warn {
    border: none !important;
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Header */
.embassy-dialog-warn .ui-dialog-titlebar {
    background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
    border: none !important;
    padding: 1.3rem 1.5rem !important;
    border-bottom: 1px solid #e2e8f0;
}

.embassy-dialog-warn .ui-dialog-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

/* Content */
.embassy-dialog-warn .ui-dialog-content {
    background: #ffffff !important;
    padding: 2rem 1.5rem !important;
    font-size: 15px;
    line-height: 1.6;
    color: #64748b;
    text-align: center;
}

/* Footer */
.embassy-dialog-warn .ui-dialog-footer {
    border: none !important;
    background: #ffffff !important;
    padding: 1rem 1.5rem 1.5rem !important;
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* Buttons */
.embassy-dialog-warn .ui-button {
    border-radius: 12px;
    font-weight: 600;
    border: none !important;
    transition: all .25s ease;
    box-shadow: none !important;
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: pointer;
    padding: .5rem 1rem;
}

/* Delete button */
.embassy-dialog-warn .ui-button-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

.embassy-dialog-warn .ui-button-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(239, 68, 68, .25) !important;
}

/* Cancel button */
.embassy-dialog-warn .ui-button-secondary {
    background: #f1f5f9 !important;
    color: #334155 !important;
}

.embassy-dialog-warn .ui-button-secondary:hover {
    background: #e2e8f0 !important;
    transform: translateY(-2px);
}

/* ==================================================== */

/* ====================================================== */
/* CREATE DIALOG */
/* ====================================================== */
.ui-dialog.ui-widget.ui-widget-content.ui-shadow.ui-hidden-container.dashboard-create-dialog.ui-draggable.ui-resizable {
    background: var(--text-white);
    border-radius: .8rem;
    min-width: 22rem;
}

/* ====================================================== */




/* ==============FAQs section in support page begin====================== */

section.FAQs {
    background: #f7f9fc;
}

section.FAQs .container {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

/* FAQ header */
section.FAQs .faq-header {
    text-align: center;
    margin-bottom: 3rem;
}

section.FAQs .faq-eyebrow {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: .5rem;
}

section.FAQs .faq-title {
    font-size: var(--section-title);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--deep-indigo);
    line-height: 1.2;
    margin-bottom: .75rem;
}

section.FAQs .faq-description {
    font-size: 1.05rem;
    color: var(--text-gray);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

/* FAQ list */
section.FAQs .faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

section.FAQs .faq-item {
    background: var(--text-white);
    border: 1px solid var(--border-color);
    border-radius: .75rem;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}

section.FAQs .faq-item.active {
    border-color: var(--blue);
    box-shadow: 0 8px 24px rgba(0, 31, 84, 0.08);
}

/* Question button */
section.FAQs .faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border: none;
    background: transparent;
    font-family: sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--deep-indigo);
    text-align: left;
    cursor: pointer;
    transition: color .25s ease;
}

section.FAQs .faq-question:hover {
    color: var(--blue-hover);
}

section.FAQs .faq-question i {
    color: var(--deep-indigo);
    font-size: .9rem;
    flex-shrink: 0;
    transition: transform .3s ease, color .3s ease;
}

section.FAQs .faq-item.active .faq-question i {
    transform: rotate(180deg);
    color: var(--blue);
}

.gateway-section {
    position: relative;
    width: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


#hero-video-service {
    position: absolute;
    width: 100%;
    object-fit: cover;
    height: 100%;
    z-index: 1;
}

.gateway-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.55);

    z-index: 2;
}


.gateway-content {
    position: relative;

    z-index: 3;

    width: min(800px, 90%);

    text-align: center;

    color: #ffffff;

    padding: 80px 20px;
}

.gateway-tag {
    display: inline-block;

    margin-bottom: 20px;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 2px;

}

gateway-content h2 {
    margin: 0 0 20px;

    font-size: clamp(32px, 5vw, 56px);

    line-height: 1.1;

    font-weight: 700;
}


/* Descrição */

.gateway-content p {
    max-width: 600px;

    margin: 0 auto 35px;

    font-size: 18px;

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.85);
}


/* Botão */

.gateway-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    padding: 14px 24px;

    background: var(--blue);

    color: #ffffff;

    text-decoration: none;

    border-radius: 5px;

    font-size: 15px;
    font-weight: 600;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.gateway-btn:hover {
    background: var(--blue-hover);

    transform: translateY(-3px);
}


.gateway-btn i {
    font-size: 14px;

    transition: transform 0.3s ease;
}


.gateway-btn:hover i {
    transform: translateX(4px);
}

td.position-style {
    text-align: center;
}

th.position-style {
    text-align: left;
}












/* Answer */
section.FAQs .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease-out;
}

section.FAQs .faq-item.active .faq-answer {
    max-height: 500px;
}

section.FAQs .faq-answer p {
    padding: 0 1.5rem 1.25rem;
    font-size: 1rem;
    color: var(--text-gray);
    line-height: 1.7;
}

/* ==============FAQs section in support page end==================== */



/* ==============SERVICE DETAIL page begin==================== */
.service-detail-page {}

.service-detail-page .container {}

/* Card da lista de serviços transformado em link para a página de detalhes.
   O <a> gerado pelo PrimeFaces passa a ser apenas o invólucro do card,
   para que a grid do dataScroller continue a alinhar os cartões. */
.section-main-services .main-service-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* ==============SERVICE DETAIL page end==================== */












/* =============================================================== */
/* ==============RESPONSIVENESS================ */
/* =============================================================== */

/* =============================================================== */
/* ==============DASHBOARD SIDEBAR RESPONSIVE================ */
/* =============================================================== */

/* Mobile: Sidebar collapses to icons only.
   When expanded, the sidebar OVERLAYS the dashboard content
   (absolute positioning) so the content keeps the full width. */



.table-header-1 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

}

/* ==========================================================================
   PORTO DO SOYO — News portal page (pages/news.xhtml)
   Every rule is scoped under .news-page so it overrides the legacy news
   rules that already live in general.css (loaded before this file).
   ========================================================================== */

/* ---------------------------------------------------------- HERO ---------- */
.news-page .news-hero {
    height: 78vh;
    min-height: 560px;
    /* padding: 0; */
    padding-bottom: 0;
    margin-bottom: 0;
    text-align: left;
    background: none;
}

.news-page .news-hero .hero-bg {

    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.55) saturate(1.1);
    transform: scale(1.05);
    transition: transform 8s ease;
}

.news-page .news-hero:hover .hero-bg {
    transform: scale(1.12);
}

/*
.news-page .news-hero .landing-page-hero-overlay {
    background: linear-gradient(135deg,
            rgba(0, 31, 84, 0.88) 0%,
            rgba(31, 78, 121, 0.72) 50%,
            rgba(0, 180, 216, 0.35) 100%);
}*/

.schedule-container {
    border-radius: 1rem;
    margin: 2rem 0;

    padding-top: 8rem;
    padding-bottom: 0rem;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
}


.news-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.news-page .news-hero .request-service-title {
    font-size: var(--hero-title);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.05;
    padding-bottom: 0;
    margin: 0;
    background: linear-gradient(90deg, #fff 0%, #b8e0ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.news-page .news-hero .request-service-page-subtitle {
    max-width: 640px;
    margin-top: 18px;
    font-size: 1.15rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

.news-page .news-hero .divider {
    height: 1px;
    margin-top: 26px;
    /*background: linear-gradient(90deg, var(--orange), var(--ocean-cyan));
    box-shadow: 0 0 20px rgba(242, 169, 0, 0.5);*/
    background: linear-gradient(to right,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.1) 100%);
}

/* ------------------------------------------------- STICKY FILTER BAR ------ */
.news-page .news-filter-bar {
    top: 16vh;
    z-index: 100;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--thiner-border-sec);
    box-shadow: var(--shadow-1);
}

.news-page .news-filter-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 14px;
    padding-bottom: 14px;
    flex-wrap: wrap;
}

.news-page .news-filter-inner form {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
}

.news-page .filter-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.news-page .filter-pill {
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--blue-darc);
    background: transparent;
    border: 1.5px solid var(--thiner-border-sec);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.news-page .filter-pill:hover,
.news-page .filter-pill:focus {
    background: var(--deep-indigo);
    color: #fff;
    border-color: var(--blue-darc);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(31, 78, 121, 0.25);
}

.news-page .filter-pill.active {
    background: var(--deep-indigo);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(31, 78, 121, 0.35);
}

.news-page .filter-category {
    min-width: 230px;
}

.news-page .category-select {
    width: 100%;
    border-radius: 999px !important;
    border: 1.5px solid var(--thiner-border-sec) !important;
    padding: 4px 14px !important;
    font-size: 0.9rem;
    transition: border-color 0.25s ease;
}

.news-page .category-select:focus-within,
.news-page .category-select.ui-state-focus {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15) !important;
}

.news-page .filter-search {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 340px;
    margin-left: auto;
}

.news-page .search-input {
    width: 100%;
    border-radius: 999px !important;
    padding: 10px 42px 10px 18px !important;
    border: 1.5px solid var(--thiner-border-sec) !important;
    font-size: 0.92rem;
    transition: all 0.25s ease;
}

.news-page .search-input:focus {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15) !important;
}

.news-page .search-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-gray);
    pointer-events: none;
}

/* ------------------------------------------------------- LAYOUT ----------- */
.news-page .news-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    max-width: 100%;
    min-height: 0;
}

.news-page .news-main {
    min-width: 0;
}

/* Section header (title + result count + clear filters) */
.news-page .news-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.news-page .news-section-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--orange);
}

.news-page .news-section-title {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 800;
    color: var(--deep-indigo);
    line-height: 1.15;
}

.news-page .news-section-count {
    margin-top: 8px;
    font-size: 0.9rem;
    color: var(--text-gray);
}

.news-page .clear-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 1.5px solid var(--thiner-border-sec);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue-darc);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.news-page .clear-filters-btn:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    transform: translateY(-2px);
}

/* ------------------------------------------------- TOP STORY / FEATURED --- */
.news-page .news-featured-wrap {
    display: block;
    margin-bottom: 36px;
}

.news-page .news-featured {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    background: #fff;
    border: 1px solid var(--thiner-border-sec);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 31, 84, 0.1);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
    animation: newsCardIn 0.55s ease;
}

.news-page .news-featured:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 50px rgba(0, 31, 84, 0.18);
}

.news-page .featured-image-wrap {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    background: var(--deep-indigo);
}

.news-page .featured-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.news-page .news-featured:hover .featured-image {
    transform: scale(1.06);
}

.news-page .featured-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(0, 31, 84, 0.6) 100%);
    pointer-events: none;
}

.news-page .featured-flag {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--orange);
    color: #1a1a1a;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.news-page .featured-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 30px 32px;
}

.news-page .featured-title {
    margin: 0;
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--deep-indigo);
    transition: color 0.25s ease;
}

.news-page .news-featured:hover .featured-title {
    color: var(--blue-hover);
}

.news-page .featured-desc {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--general-color);
}

.news-page .featured-byline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue-darc);
}

.news-page .featured-byline i {
    color: var(--orange);
}

/* ------------------------------------------- NEWS GRID (dataScroller) ----- */
.news-page .news-scroller .ui-datascroller-content {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.news-page .news-scroller .ui-datascroller-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.news-page .news-scroller .ui-datascroller-item {
    padding: 0;
    margin: 0;
    list-style: none;
    min-width: 0;
    height: 100%;
}

.news-page .news-scroller .ui-datascroller-loader {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.news-page .news-load-more {
    min-width: 220px;
    border-radius: 999px !important;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 8px 20px rgba(31, 78, 121, 0.22) !important;
}

.news-page .news-load-more .ui-button-text {
    padding: 10px 24px !important;
}

/* ----------------------------------------------------------- NEWS CARD ---- */
.news-page .news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--thiner-border-sec);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 31, 84, 0.08);
    position: relative;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.35s ease;
    animation: newsCardIn 0.5s ease;
}

.news-page .news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(94, 96, 98, 0.18);
}

.news-page .news-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1.5px;
    background: linear-gradient(135deg, var(--blue), var(--deep-indigo), var(--blue));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 3;
}

.news-page .news-card:hover::before {
    opacity: 1;
}

.news-page .card-image-wrap {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: var(--deep-indigo);
}

.news-page .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}





/* ===================== SECTION ===================== */
.social-section {
    position: relative;
    background: #ffffff;
    overflow: hidden;
}

.social-section::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -180px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.07) 0%, transparent 70%);
}

.content-container {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
}

/* ===================== HEADER ===================== */
.social-header {
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
}

.social-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    margin-bottom: 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--blue-hover);
    background: rgba(33, 150, 243, 0.09);
    border: 1px solid rgba(33, 150, 243, 0.22);
    border-radius: 30px;
}

.social-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
}

.section-title {
    margin: 0 0 12px;
    font-size: clamp(26px, 3.6vw, 38px);
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.25;
    color: var(--deep-indigo);
    text-transform: uppercase;
}

.social-subtitle {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--orange);
}

/* ===================== CORPO: texto + destaque ===================== */
.social-body {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: start;
    margin-bottom: 70px;
}

.social-text p {
    margin: 0 0 20px;
    font-size: var(--general-text);
    line-height: 1.85;
    color: #4c5566;
}

.social-text p:last-child {
    margin-bottom: 0;
}

.social-highlight-card {
    position: relative;
    background: linear-gradient(150deg, var(--deep-indigo) 0%, var(--blue-darc) 100%);
    border-radius: 18px;
    padding: 32px 28px;
    color: #ffffff;
    overflow: hidden;
}



.social-highlight-card .icon {
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    margin-bottom: 20px;
}

.social-highlight-card .icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--orange);
    fill: none;
    stroke-width: 1.8;
}

.social-highlight-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
}

.social-highlight-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
}

.social-highlight-tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.social-highlight-tags span {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

/* ===================== GALERIA DE FOTOS ===================== */
.social-gallery-title {
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    color: var(--deep-indigo);
    margin: 0 0 34px;
}

.social-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.social-gallery-grid img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: var(--shadow-1);
    transition: transform 0.35s ease;
}

.social-gallery-grid img:hover {
    transform: scale(1.03);
}

.doc-icon {
    background: rgba(255, 165, 0, 0.15);
    color: var(--orange);
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}





.gallery-scroller .ui-datascroller-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));

    gap: 0.8rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.gallery-scroller .ui-datascroller-item {
    padding: 0;
    list-style: none;
    min-width: 0;
}



.gallery-scroller .card-image-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* "Load more" button centered below the grid */
.gallery-scroller .ui-datascroller-loader {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.gallery-scroller button.ui-datascroller-load {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 1.5rem auto 0;
}

.gallery-scroller .resource-card.is-hovering .gallery-overlay {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.gallery-viewer-galleria .ui-galleria-caption-items {
    background: rgba(0, 0, 0, 0.4);
}

.gallery-viewer-galleria .galleria-caption h4 {
    margin: 0 0 0.2rem;
    font-size: 1rem;
}

.gallery-viewer-galleria .galleria-caption p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

.gallery-viewer-galleria {
    height: 50%;
}

.gallery-viewer-galleria .galleria-main-img {
    width: 100% !important;
    height: 420px !important;
    background: transparent;
}

.gallery-viewer-galleria .galleria-thumb-img {
    width: 80px !important;
    height: 60px !important;
    object-fit: cover;
}

.gallery-viewer-galleria .ui-galleria-thumbnail-items .ui-galleria-thumbnail-item {
    flex: none !important;
}

.gallery-viewer-galleria .ui-galleria-thumbnail-items {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.gallery-viewer-galleria.ui-galleria .ui-galleria-thumbnail-container {
    background: transparent;
    padding: 0;
}

.gallery-viewer-galleria.ui-galleria .ui-galleria-thumbnail-container .ui-galleria-thumbnail-prev,
.gallery-viewer-galleria.ui-galleria .ui-galleria-thumbnail-container .ui-galleria-thumbnail-next {
    margin: 0.2rem;
    background-color: var(--orange);
    color: #f8f9fa;
    width: 1.5rem;
    height: 1.5rem;
    transition:
        background-color 0.2s,
        color 0.2s,
        box-shadow 0.2s,
        opacity 0.2s ease-in-out;
    border-radius: 50%;
}

.gallery-viewer-galleria.ui-galleria .ui-galleria-thumbnail-container .ui-galleria-thumbnail-next {
    margin-left: 0.2rem;
    margin-right: 0;
}

.gallery-viewer-galleria.ui-galleria .ui-galleria-thumbnail-container .ui-galleria-thumbnail-prev {
    margin-right: 0.2rem;
    margin-left: 0;
}

.news-page .news-card:hover .card-image {
    transform: scale(1.08);
}

.news-page .card-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 31, 84, 0.7) 100%);
    pointer-events: none;
}

/* category badge — kept unscoped because PrimeFaces may move the dialog
   (and therefore .dialog-meta .card-category) outside of .news-page */
.card-category {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #fff;
    background: var(--blue-darc);
    backdrop-filter: blur(6px);
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.news-featured .card-category {
    left: auto;
    right: 14px;
}

/* category badge colours */
.card-category.politics {
    background: #1F4E79;
}

.card-category.economy {
    background: #2e7d32;
}

.card-category.society {
    background: #6a1b9a;
}

.card-category.culture {
    background: #ad1457;
}

.card-category.sports {
    background: #ef6c00;
}

.card-category.technology {
    background: #0277bd;
}

.card-category.internationalAffairs {
    background: #00838f;
}

.card-category.security {
    background: #b71c1c;
}

.card-category.officialAnnouncements {
    background: #37474f;
}

.card-category.bilateralCooperation {
    background: #4527a0;
}

.card-category.consularServices {
    background: #00695c;
}

.card-category.cultureAndTourism {
    background: #c2185b;
}

.card-category.education {
    background: #1565c0;
}

.card-category.refueling {
    background: #bf360c;
}

.news-page .card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
    padding: 20px 22px 22px;
}

.news-page .card-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-gray);
    margin-bottom: 0;
}

.news-page .card-meta i {
    color: var(--blue);
    margin-right: 5px;
}

.news-page .card-meta span {
    display: inline-flex;
    align-items: center;
}

.news-page .news-card .card-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--deep-indigo);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.25s ease;
}

.news-page .news-card:hover .card-title {
    color: var(--blue-hover);
}

.news-page .news-card .card-desc {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--general-color);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-page .card-actions {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--thiner-border-sec);
}

.news-page .read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 !important;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--blue-darc) !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.news-page .read-more-btn:hover {
    color: var(--orange) !important;
    gap: 12px;
}

.news-page .read-more-btn i {
    transition: transform 0.25s ease;
}

.news-page .read-more-btn:hover i {
    transform: translateX(4px);
}

.news-page .card-share {
    display: flex;
    gap: 8px;
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.3s ease;
}

.news-page .news-card:hover .card-share,
.news-page .news-featured:hover .card-share {
    opacity: 1;
    transform: translateY(0);
}

.share-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--thiner-border-sec);
    color: var(--blue-darc);
    font-size: 0.75rem;
    text-decoration: none;
    transition: all 0.25s ease;
}

.share-icon:hover {
    background: var(--blue-darc);
    color: #fff;
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 6px 14px rgba(31, 78, 121, 0.35);
}

/* ------------------------------------------------------- EMPTY STATE ------ */
.news-page .news-empty {
    text-align: center;
    padding: 70px 20px;
    color: var(--text-gray);
}

.news-page .news-empty i {
    display: block;
    font-size: 3.5rem;
    color: var(--thiner-border-sec);
    margin-bottom: 16px;
}

.news-page .news-empty h3 {
    color: var(--deep-indigo);
    margin-bottom: 8px;
}

/* entrance animation (also runs on ajax-injected nodes, unlike AOS) */
@keyframes newsCardIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .news-page .news-card,
    .news-page .news-featured {
        animation: none;
    }
}

/* ------------------------------------------------------------ SIDEBAR ----- */
.news-page .sidebar-wrapper {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-height: none;
    overflow: visible;
    height: fit-content;
}

.news-page .sidebar-section {
    background: #fff;
    border: 1px solid var(--thiner-border-sec);
    border-radius: 16px;
    padding: 20px !important;
    box-shadow: 0 4px 20px rgba(0, 31, 84, 0.06);
    transition: box-shadow 0.3s ease;
}

.news-page .sidebar-section:hover {
    box-shadow: 0 10px 30px rgba(0, 31, 84, 0.12);
}

.news-page .sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--thiner-border-sec);
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--deep-indigo) !important;
}

.news-page .sidebar-title i {
    color: var(--orange);
}

.news-page .sidebar-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.news-page .sidebar-card:hover {
    background: rgba(33, 150, 243, 0.06);
    transform: translateX(4px);
}

.news-page .sidebar-img {
    width: 62px;
    height: 62px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.news-page .sidebar-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.news-page .sidebar-cat {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.news-page .sidebar-title-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--deep-indigo);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-page .sidebar-date {
    font-size: 0.72rem;
    color: var(--text-gray);
}

.news-page .sidebar-date i {
    color: var(--blue);
    margin-right: 4px;
}

.news-page .sidebar-empty {
    font-size: 0.85rem;
    color: var(--text-gray);
    font-style: italic;
    padding: 6px 2px;
}

.news-page .sidebar-cat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.news-page .sidebar-cat-link {
    padding: 6px 14px;
    border: 1.5px solid var(--thiner-border-sec);
    border-radius: 999px;
    background: transparent;
    color: var(--blue-darc);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.news-page .sidebar-cat-link:hover {
    background: var(--blue-darc);
    border-color: var(--blue-darc);
    color: #fff;
}

.news-page .sidebar-cat-link.active {
    background: linear-gradient(135deg, var(--blue-darc), var(--marine-blue));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 14px rgba(31, 78, 121, 0.3);
}

.news-page .sidebar-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--blue-darc);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: color 0.25s ease;
}

.news-page .sidebar-link:hover {
    color: var(--orange);
}

/* ------------------------------------------------------------- DIALOG -----
   Unscoped on purpose: p:dialog may be appended to the body, outside .news-page */
.news-dialog .ui-dialog-content {
    padding: 0 !important;
}

.dialog-hero-img {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 1rem;
    display: block;
}

.news-img-container {
    padding: 1.5rem;
}

.dialog-meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
    padding: 18px 26px 0;
    font-size: 0.85rem;
    color: var(--text-gray);
}

.dialog-meta i {
    color: var(--blue);
    margin-right: 5px;
}

.dialog-meta span {
    display: inline-flex;
    align-items: center;
}

.dialog-meta .card-category {
    position: static;
    box-shadow: none;
}

.dialog-title {
    margin: 0;
    padding: 14px 26px 0;
    color: var(--deep-indigo);
    font-size: 1.6rem;
    line-height: 1.3;
}

.dialog-summary {
    margin: 10px 0 0;
    padding: 0 26px;
    color: var(--blue-darc);
    font-weight: 500;
    font-style: italic;
    line-height: 1.6;
}

.dialog-content {
    padding: 16px 26px 4px;
    line-height: 1.75;
    color: var(--general-color);
}

.dialog-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 16px 26px;
    border-top: 1px solid var(--thiner-border-sec);
    font-size: 0.9rem;
    color: var(--text-gray);
}

.dialog-byline {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--text-gray);
}

.dialog-byline span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dialog-byline i {
    color: var(--orange);
}

/* ==========================================================================
   RESPONSIVIDADE GLOBAL
   Ordem: desktop-first, do maior para o menor max-width.
   (com a mesma especificidade, ganha a regra que vem DEPOIS)
   ========================================================================== */


/* ---------- min-width (desktop) ---------- */

@media (min-width: 1024px) {
    .nav-bar-wrapper .open-menu-button {
        display: none;
    }

    .language-selector .ui-menubutton .ui-button.ui-button-icon-only .ui-icon {
        left: 0;
    }
}

/* Acima do breakpoint o menu de topo assume o controlo */
@media (min-width: 1025px) {

    .mobile-menu,
    .mobile-menu-overlay {
        display: none;
    }
}


/* ---------- max-width: 1224px ---------- */
@media (max-width: 1224px) {
    .login-page .introduce-text {
        padding-left: 5rem;
        width: 50%;
    }

    .login-page .login-container {
        width: 45%;
    }
}


/* ---------- max-width: 1200px ---------- */
/* Portáteis pequenos / tablets: passa de 4 colunas (larguras mínimas
   apertadas) para 2 colunas bem espaçadas */
@media (max-width: 1200px) {
    .terminal-row {

        justify-content: center;

    }

    .terminal-card {

        width: 250px;

    }

    .filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ---------- max-width: 1100px ---------- */
@media (max-width: 1100px) {
    .news-page .news-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .news-page .sidebar-wrapper {
        position: static;
    }

    .news-page .news-featured {
        grid-template-columns: 1fr;
    }

    .news-page .featured-image-wrap {
        min-height: 260px;
    }
}


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

    .member-card {
        width: 280px;
    }

    .carousel-track {
        animation-duration: 32s;
    }

    :root {
        --hero-title: 3.5rem;
        --section-title: 1.8rem;
        --section-title-2: 2.1rem;
        --general-text: 1rem;
        --width-of-the-content-in-hero-section: 70%;
    }

    .nav-bar,
    .slide-content-over-lay,
    .padding-for-containers {
        padding-left: 4rem;
        padding-right: 4rem;
    }

    .quick-links {
        justify-content: end;
        display: none;
    }

    .open-menu-button.nav-bar-button {
        display: block;
    }

    .main-nav {
        display: none;
    }

    /* ---------- resources ---------- */
    .resources-grid {
        display: flex;
        overflow: auto;
        scrollbar-width: none;
    }

    .resource-card {
        min-width: 16rem;

        h3 {
            font-size: 1.1rem;
        }
    }



    /* ---------- newsletter ---------- */
    .news-letter-section .content-container {
        gap: 4rem;
        justify-content: center;
        flex-flow: column;
    }

    .news-letter-section aside {
        width: 60%;
    }

    .news-letter-section .content-container .section-title-white,
    .news-letter-section .content-container .text-1 {
        width: 100%;
        text-align: center;
    }

    .news-letter-section .content-container .form-card {
        width: 100%;
    }

    /* ---------- hero ---------- */
    .landing-page-hero .content-container {
        flex-flow: column;
        align-items: start;
    }

    .slide-content-over-lay .content-container .left {
        padding-bottom: 2rem;
    }

    .slide-content-over-lay .content-container .left .title {
        width: 100%;
    }

    /* ---------- news page ---------- */
    .news-page .news-container {
        grid-template-columns: 1fr;
    }

    .news-page .sidebar-section {
        display: none;
    }

    /* ---------- carousel ---------- */
    .carousel-track {
        transform: translateX(0%);
    }

    /* ---------- tabelas ---------- */
    .hideOnTable {
        display: none;
    }

    /* ---------- login ---------- */
    .login-page {
        flex-flow: column;
        padding: 0;
        justify-content: start;
        gap: 3rem;
        padding-top: 2rem;
    }

    .login-page .introduce-text h1 {
        font-size: calc(var(--section-title-2) + .2rem);
    }

    .login-page .introduce-text p {
        display: none;
    }

    .login-page .introduce-text {
        padding: 0;
    }

    .login-page .login-container,
    .login-page .introduce-text {
        min-width: 22rem;
        width: 55%;
    }
}


/* ---------- max-width: 1000px ---------- */
@media (max-width: 1000px) {
    .port-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


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

    .terminal-header h2 {

        font-size: 36px;

    }

    .card {

        width: 90%;

        max-width: 400px;

    }.w-full{
        max-width: none;
    }

    :root {
        --hero-title: 3.2rem;
        --section-title: 1.6rem;
        --section-title-2: 1.9rem;
        --general-text: .9rem;
        --width-of-the-content-in-hero-section: 80%;
    }

    /* ---------- hero video ---------- */
    .cta-section-title-video {
        font-size: 2.25rem;
    }

    .cta-section-subtitle-video {
        font-size: 1.1rem;
    }

    .content-container-video {
        max-width: 80%;
    }

    /* ---------- eventos ---------- */
    .events-section .events-grid {
        grid-template-columns: 1fr;
    }

    .events-section .events-list {
        grid-template-columns: 1fr;
    }

    /* ---------- about us ---------- */
    .about-us-page section p {
        text-align: justify;
    }
}

@media (max-width: 980px) {
    .leadership-grid {
        flex-direction: row;
    }

    .leadership-cta {
        flex: 0 0 42%;
        padding: 22px 18px;
    }

    .leadership-cta h2 {
        font-size: 18px;
    }

    .admin-node-card {
        min-height: 320px;
    }
}



/* ---------- max-width: 960px ---------- */
@media (max-width: 960px) {
    .institutional-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .institutional-description {
        max-width: 100%;
    }

    .legal-card {
        max-width: 760px;
    }
}


@media (max-width: 940px) {
    .content-container-chairman-message {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .pca-photo-wrap img {
        height: 360px;
    }

    .pca-message-col {
        padding-left: 0;
    }

    .social-body {
        grid-template-columns: 1fr;
        gap: 36px;
    }

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


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

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

    .image-container-missions-and-values {
        order: -1;
        height: 100%;
    }

    .image-container-missions-and-values::before {
        top: -12px;
        right: -12px;
        display: none;
    }

    .dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        transition: max-height 0.3s ease;
    }

    .has-dropdown.open .dropdown-menu {
        max-height: 400px;
        padding: 0.5rem 0 0.5rem 1rem;
    }

    .dropdown-menu::before,
    .has-dropdown::after {
        display: none;
    }
}

@media (max-width: 860px) {
    .about-facts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ---------- max-width: 768px ---------- */
@media (max-width: 768px) {
     .cta-section .content-container {
    text-align:center;   /* valor que centra o texto */
  }
  .cta-section-title,
  .cta-section-subtitle {
    max-width: 100%;    /* valor que deixa o bloco ocupar tudo */
  }

    .gallery-scroller .resource-card .card-image-wrapper {
        width: 100%;
        /* que valor faz o wrapper ocupar a largura toda? */
    }


    .port-company-info {
        padding: 1.5rem;
    }

    .port-company-info .company-header .company-name {
        font-size: 1.2rem;
    }

    .port-company-info .company-header .logo-icon {
        width: 44px;
        height: 44px;
        font-size: 1.4rem;
    }

    .port-company-info .info-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .port-company-info .info-item {
        padding: 1rem;
    }

    .port-company-info .info-item .info-value {
        font-size: 0.95rem;
    }

    .port-company-info .schedule-note {
        flex-direction: column;
        align-items: flex-start;
    }

    .terminal-header h2 {

        font-size: 30px;

    }

    .terminal-row {

        flex-direction: column;

        align-items: center;

    }

    .terminal-card {

        width: 100%;

        max-width: 360px;

    }

    .subterminal-row {

        flex-direction: column;

        align-items: center;

    }

    .sub-card {

        width: 100%;

        max-width: 320px;

    }

    .terminal-features {

        flex-direction: column;

        align-items: flex-start;

    }


    .pc-slider-wrapper {
        width: 100%;
        margin-bottom: 6rem;
    }

    .continuous-carousel {
        padding: 2.5rem 0 1.5rem 0;
    }

    .member-card {
        width: 240px;
        padding: 1.4rem 1.1rem;
    }

    .card-image-wrapper {
        width: 80%;
    }
    .card-image-wrapper.in-index {
        width: 100%;
    }


    .default-avatar {
        font-size: 2rem;
    }

    .client-name {
        font-size: 1rem;
    }

    .carousel-track {
        animation-duration: 26s;
        gap: 1rem;
    }
    .carousel-track.no-gap{
        gap: 0 !important;
    }

    .carousel-dots {
        margin-top: 1.25rem;
        gap: 0.5rem;
    }

    .dashboard-create-dialog.ui-dialog {
        width: 92vw !important;
    }

    .dashboard-create-dialog.ui-dialog.ui-resizable .ui-dialog-content {
        padding: 1.1rem;
    }

    .create-button-container {
        justify-content: stretch;
    }

    .dashboard-create-dialog .save-button.ui-button {
        width: 100%;
    }

    /* ---------- news page ---------- */
    .news-page .news-hero .request-service-title {
        font-size: 2.4rem;
    }

    .news-page .news-filter-inner form {
        flex-direction: column;
        align-items: stretch;
    }

    .news-page .filter-pills {
        justify-content: center;
    }

    .news-page .filter-search {
        max-width: none;
        margin-left: 0;
    }

    .news-page .filter-category {
        min-width: 0;
    }

    /* ---------- horários ---------- */
    .schedule-container {
        padding: 2rem 1rem;
    }

    .schedule-header h2 {
        font-size: 1.5rem;
    }

    .schedule-grid {
        grid-template-columns: 1fr;
    }

    .schedule-card .route-details {
        flex-direction: column;
        gap: 0.5rem;
    }

    .schedule-card .route-arrow {
        transform: rotate(90deg);
    }

    /* ---------- paddings gerais ---------- */
    .nav-bar,
    .slide-content-over-lay,
    .padding-for-containers {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* ---------- newsletter ---------- */
    .news-letter-section aside {
        width: 80%;
    }

    /* ---------- hero / operações ---------- */
    .slide-content-over-lay .content-container {
        padding-top: 5rem;
    }

    .live-operations-widget-title,
    .live-operations-widget .subtitle {
        max-width: 100%;
    }

    .live-operations-widget .content-container p {
        font-size: 16px;
    }

    .ships-hero-section .hero-content p {
        text-align: center;
    }

    /* ---------- hero video ---------- */
    .video-section {
        height: 90vh;
    }

    .cta-section-title-video {
        font-size: 1.75rem;
    }

    .cta-section-subtitle-video {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .content-container-video {
        max-width: 90%;
        padding: 0 2rem;
    }

    .explore-button-video {
        padding: 0.6rem 1.25rem;
    }

    .news-item {
        height: 250px;
    }

    .carousel-section {
        padding: 0;
    }

    /* ---------- support ---------- */
    .contact-form-section {
        flex-direction: column;
    }

    .sticky-content {
        position: relative;
        top: 0;
        margin-bottom: 50px;
    }

    .form-container {
        min-width: 13rem;
    }

    .form-row {
        flex-direction: column;
    }

    /* ---------- services ---------- */
    .services-page .timeline-container {
        flex-direction: column;
        gap: 2.5rem;
    }

    .services-page .timeline-container::before {
        display: none;
    }

    .services-page .hero-content h1 {
        font-size: 2.2rem;
    }

    /* ---------- about us ---------- */
    .about-us-page .organizational-structure-section .content-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    }

    .about-us-page .infrastructure-container {
        grid-template-columns: 1fr;
    }

    /* ---------- galeria de notícias: contentor da secção ---------- */
    .news-section {
        /* deixa de ter altura fixa para a secção crescer com a galeria */
        height: auto;
        min-height: 100vh;
    }

    .news-section .button-container {
        padding: 2rem 0 1rem;
    }

    /* ---------- galeria: pista horizontal ---------- */
    .news-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: .55rem;
        height: 22rem;
        overflow: hidden;
    }

    /* ---------- galeria: cartão colapsado (estado por omissão) ---------- */
    .news-item {
        position: relative;
        flex: 1 1 0;
        /* sem min-width automático a tira pode encolher até ficar fina */
        min-width: 0;
        height: 100%;
        border-radius: 16px;
        overflow: hidden;
        contain: paint;
        outline: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        /* só flex-grow, a sombra e o "press" animam */
        transition:
            flex-grow .55s cubic-bezier(.22, .61, .36, 1),
            box-shadow .45s ease,
            transform .35s ease;
    }

    /* feedback de toque no cartão tocado */
    .news-item:active {
        transform: scale(.985);
    }

    .news-item img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* a imagem volta a ficar nítida (o desktop usa .8 de opacidade) */
        opacity: 1;
        transform: translateZ(0);
        backface-visibility: hidden;
        transition: transform .6s ease, filter .45s ease;
    }

    /* o zoom de hover do desktop não faz sentido em ecrãs táteis */
    .news-item:hover img {
        transform: translateZ(0);
    }

    /* tiras colapsadas escurecidas: o foco vai para o cartão ativo */
    .news-item:not(.active) img {
        filter: brightness(.68) saturate(.85);
    }

    /* ---------- galeria: cartão expandido ---------- */
    .news-item.active {
        flex-grow: 7;
        box-shadow: 0 16px 34px rgba(0, 31, 84, .3);
    }

    .news-item.active img,
    .news-item.active:hover img {
        transform: scale(1.04);
        filter: brightness(.95);
    }

    /* ---------- galeria: badge circular (canto superior esquerdo) ---------- */
    .news-card-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: .7rem;
        left: .7rem;
        z-index: 2;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .16);
        border: 1px solid rgba(255, 255, 255, .32);
        box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
        color: #fff;
        font-size: 1rem;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        transition:
            width .55s cubic-bezier(.22, .61, .36, 1),
            height .55s cubic-bezier(.22, .61, .36, 1),
            left .55s cubic-bezier(.22, .61, .36, 1),
            font-size .4s ease,
            transform .55s cubic-bezier(.22, .61, .36, 1);
    }

    /* no cartão colapsado o badge encolhe e centra-se sobre a tira */
    .news-item:not(.active) .news-card-icon {
        left: 50%;
        width: 26px;
        height: 26px;
        font-size: .68rem;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, .14);
    }

    /* ---------- galeria: overlay e texto ---------- */
    .news-overlay {
        padding: .85rem;
        background: linear-gradient(to top,
                rgba(0, 0, 0, .88) 0%,
                rgba(0, 0, 0, .5) 45%,
                rgba(0, 0, 0, 0) 78%);
    }

    /* pílula com a categoria da notícia */
    .news-category {
        display: inline-block;
        align-self: flex-start;
        max-width: 100%;
        margin-bottom: .55rem;
        padding: .26rem .68rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, .16);
        border: 1px solid rgba(255, 255, 255, .3);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        color: #fff;
        font-size: .6rem;
        font-weight: 800;
        letter-spacing: .9px;
        text-transform: uppercase;
        white-space: nowrap;
    }

    /* data + título agrupados no fundo do cartão */
    .news-card-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .35rem;
        min-width: 0;
    }

    /* colapsado: praticamente só a imagem (o texto esvanece e é cortado) */
    .news-card-text,
    .news-category {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .3s ease, transform .45s ease;
    }

    /* expandido: o texto entra depois de o cartão começar a abrir */
    .news-item.active .news-card-text,
    .news-item.active .news-category {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .35s ease .18s, transform .45s ease .15s;
    }

    .news-item h3,
    .news-item.item-a h3 {
        font-size: 1.05rem;
        line-height: 1.28;
        /* nunca mais de 3 linhas no cartão expandido */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .news-date {
        margin-bottom: 0;
        padding: 3px 7px;
        border-radius: 4px;
        font-size: .66rem;
        letter-spacing: .5px;
    }

    /* ---------- indicadores ---------- */
    .indicator-number {
        font-size: 2.3rem;
    }

    .indicators-section-number {
        padding-bottom: 3rem;
    }

    /* ---------- filtros ---------- */
    .filter-panel {
        padding: 1rem;
        margin: .85rem 0 1.25rem;
        border-radius: 10px;
    }

    .filter-grid {
        gap: .85rem;
    }

    .filter-toggle-btn {
        padding: .55rem 1rem;
        font-size: .9rem;
    }

    /* ---------- support ---------- */

    .support-page .contact {
        word-break: break-all;
        word-break: break-word;
    }

    /* ---------- dashboard: sidebar ---------- */
    .dashbord-layout {
        grid-template-columns: 4.5rem auto;
    }

    /* Show the hamburger button on the left edge of the menu */
    .hamburger-btn {
        display: block;
    }

    /* Allow content containers to shrink on mobile so tables remain
       scrollable. Without this, min-width: 30rem forces the content
       wider than the grid column and overflow: hidden clips it. */
    .layout-content-container,
    .layout-children-container {
        min-width: 0;
    }


    /* ---- Collapsed sidebar: icons only ---- */

    /* Hide logo in collapsed state */
    .side-bar.ui-menu .dashLogo {
        display: none;
    }

    /* Hide menu text, keep icons */
    .side-bar.ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-text {
        display: none;
    }

    .side-bar.ui-menu .ui-menuitem-link {
        justify-content: center;
        gap: 0;
        padding: 0.7rem 0.9rem !important;
    }

    .side-bar.ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-icon {
        font-size: 1.3rem;
        margin: 0;
    }

    .side-bar .logout-button {
        position: relative;
    }

    /* ---- Expanded sidebar: overlay on top of the dashboard content ----
       The grid column stays at 4.5rem, so the dashboard content does NOT
       lose space when the sidebar is expanded; the sidebar simply floats
       above it. */
    .sidebar.expanded {
        padding-top: 0rem;
        position: absolute;
        top: 0;
        left: 0;
        width: 12rem !important;
        min-width: 12rem;
        height: 100%;
        background: var(--white-color, #ffffff);
        box-shadow: var(--shadow-1);
        z-index: 100;
    }

    /* Show logo in expanded state */
    .sidebar.expanded .side-bar.ui-menu .dashLogo {
        display: block;
        margin-top: 0.5rem;
    }

    .sidebar.expanded .side-bar.ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-text {
        display: inline-block;
    }

    .sidebar.expanded .side-bar.ui-menu .ui-menuitem-link {
        justify-content: flex-start;
        gap: 1rem;
        padding: 0.8rem !important;
    }

    .sidebar.expanded .side-bar.ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-icon {
        font-size: 1rem;
    }

    .sidebar.expanded .side-bar .logout-button {
        position: absolute;
    }

    /* Close ("x") button inside the sidebar — visible only in the
       expanded (overlay) state, so it stays above the sidebar content */
    .sidebar.expanded .hamburger-btn-2 {
        display: block;
    }
}


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

    .hideOnTable {
        display: block;
    }

    .news-page .news-filters {
        justify-content: center;
    }

    .news-page .search-bar {
        min-width: 100%;
    }

    .dashboard-form-settings-btn {
        flex-flow: column;
    }
}



@media (max-width: 620px) {

    .clients-cta {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }

    .clients-cta a {
        width: 100%;
        box-sizing: border-box;
        padding: 14px 20px;
    }

    .clients-logos {
        gap: 30px;
        margin-top: 50px;
    }

    .clients-logos .logo-item {
        height: 34px;
    }

    .leadership-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .leadership-cta p {
        display: none;
    }

    .leadership-grid {
        flex-direction: column;
    }
}


/* ---------- max-width: 600px ---------- */
/* Ecrãs estreitos: um campo por linha, botões empilhados a 100% */
@media (max-width: 600px) {

    /* ---------- filtros ---------- */
    .filter-grid {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .filter-actions {
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
    }

    .filter-actions .ui-button {
        width: 100%;
    }

    /* ---------- comunicados ---------- */
    .communication-card {
        gap: 12px;
        padding: 15px;
    }

    .communication-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .communication-title {
        font-size: 0.92rem;
    }

    .communication-id {
        font-size: 0.7rem;
    }

    .communication-arrow {
        display: none;
    }

    /* ---------- serviços do porto ---------- */
    .port-services-header {
        margin-bottom: 40px;
    }

    .port-services-title {
        font-size: 32px;
    }

    .port-services-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .port-service-card {
        min-height: auto;
        padding: 24px 22px;
    }

    /* ---------- institucional / legislação ---------- */

    .institutional-title {
        font-size: 32px;
    }

    .legal-card {
        padding: 30px 22px 25px;
        border-radius: 16px;
    }

    .legal-item {
        grid-template-columns: 30px 1fr;
        gap: 10px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .legal-number {
        width: 26px;
        height: 26px;
    }

    .legal-item p {
        font-size: 13px;
    }
}




@media (max-width: 576px) {
    .related-images-dialog {
        width: 100vw !important;
    }

    .related-images-actions,
    .related-image-edit-actions {
        flex-direction: column;
    }

    .related-images-actions .ui-button,
    .related-image-edit-actions .ui-button {
        width: 100%;
    }
}


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

    .social-gallery-grid {
        grid-template-columns: 1fr;
    }

    .social-gallery-grid img {
        height: 220px;
    }

    .news-page .news-scroller .ui-datascroller-list {
        grid-template-columns: 1fr;
    }

    .news-page .news-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .news-page .card-actions {
        flex-wrap: wrap;
    }

    .news-page .card-share {
        opacity: 1;
        transform: none;
    }

    .about-facts-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin: 44px 0 56px;
    }

    .about-fact-card {
        padding: 20px 14px;
    }

    .about-fact-card .fact-value {
        font-size: 21px;
    }

    .about-port-text {
        font-size: 15px;
    }

    .timeline-item {
        padding-left: 50px;
    }

    .org-grid {
        grid-template-columns: 1fr;
    }

    .org-item {
        padding: 18px 16px;
    }

    .pca-photo-wrap::before {
        top: -12px;
        left: -12px;
    }

    .pca-role-badge {
        left: 16px;
        bottom: -18px;
        padding: 10px 16px;
    }

    .pca-message-text {
        font-size: 15.5px;
    }
}


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

    :root {
        --hero-title: 2.8rem;
        --section-title: 1.5rem;
        --section-title-2: 1.7rem;
        --general-text: .8rem;
        --width-of-the-content-in-hero-section: 95%;
    }

    .news-letter-section aside {
        width: 100%;
    }

    .contact-form-section .submit-btn.ui-button {
        margin: auto;
    }

    .dashboard-table-header {
        padding: 0;
        flex-flow: column;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;

        button {
            width: 98%;
        }
    }

    .logo-container a span {
        font-size: 12pt;
    }

    .mobile-menu-header .logo-container a span {
        display: block;
    }

    .nav-bar .name-top {
        display: block;
        position: absolute;
        top: 0rem;
        left: 0;
        right: 0;
        font-size: .8rem;
        color: #fff;
        text-align: center;
        padding: .2rem;
        background: #161132;
    }

    .logo-nav-bar {
        width: 70px;
        height: 70px;
        padding: 0.5rem;
    }
}


@media (max-width: 500px) {
    .visions-and-values-list li {
        padding: 12px 14px;
        font-size: 14px;
    }

    .mission-desc {
        font-size: 15.5px;
        text-align: justify !important;
    }
}


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

    .gallery-scroller .ui-datascroller-list {
        grid-template-columns: 1fr;
    }


    .port-soyo-label {
        font-size: 0.75rem;
        letter-spacing: 1.5px;
    }

    .port-soyo-title {
        font-size: 1.8rem;
    }

    .port-soyo-text {
        font-size: 0.98rem;
    }

    .member-card {
        width: 200px;
        padding: 1.2rem 1rem;
    }



    .client-type {
        font-size: 0.68rem;
        padding: 0.25rem 0.65rem;
    }

    .client-name {
        font-size: 0.95rem;
    }

    .client-contact span {
        font-size: 0.75rem;
    }

    .carousel-dots .dot {
        width: 8px;
        height: 8px;
    }

    .carousel-dots .dot.active {
        width: 22px;
    }

    /* ---------- horários ---------- */
    .schedule-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .schedule-card {
        padding: 1.25rem;
    }

    /* ---------- filtros ---------- */
    /* Telemóveis: botão de filtros a toda a largura, alinhado com o título */
    .filter-panel {
        padding: .85rem;
    }

    .filter-toggle-btn {
        width: 100%;
        justify-content: center;
    }

    /* ---------- hero video ---------- */
    .video-section {
        height: 80vh;
    }

    .cta-section-title-video {
        font-size: 1.4rem;
    }

    .cta-section-subtitle-video {
        font-size: 0.9rem;
    }

    .video-overlay {
        justify-content: center;
    }

    .content-container-video {
        text-align: center;
        max-width: 100%;
    }

    .button-container-video {
        justify-content: center;
    }

    /* Dots */
    .carousel-dots {
        bottom: 80px;
    }

    /* ---------- dashboard / support ---------- */
    .dashbord-layout {
        grid-template-columns: 4rem auto;
    }

    .contacts-container {
        list-style: none;
    }

    .public-dialog.ui-dialog {
        width: 85% !important;
    }

    .support-page .contact {
        word-break: break-all;
        word-break: break-word;
    }
}


/* ---------- max-width: 420px ---------- */
/* GALERIA EXPANSÍVEL — afinação para ecrãs muito estreitos */
@media (max-width: 420px) {

    .news-grid {
        gap: .4rem;
        height: 20rem;
    }

    .news-item {
        border-radius: 13px;
    }

    /* o cartão ativo fica com uma fatia um pouco menor para que as
       tiras colapsadas mostrem sempre uma porção legível da imagem */
    .news-item.active {
        flex-grow: 6;
    }

    .news-card-icon {
        top: .55rem;
        left: .55rem;
        width: 36px;
        height: 36px;
        font-size: .85rem;
    }

    .news-item:not(.active) .news-card-icon {
        width: 22px;
        height: 22px;
        font-size: .6rem;
    }

    .news-overlay {
        padding: .7rem;
    }

    .news-item h3,
    .news-item.item-a h3 {
        font-size: .95rem;
    }

    .news-category {
        padding: .22rem .55rem;
        font-size: .55rem;
    }

    .icons-container .ui-button.ui-widget.ui-state-default.ui-button-icon-only.nav-bar-button.phone,
    .icons-container .icons-container-language {
        display: none;
    }
}