.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);
  }

  @media (max-width: 768px) {
      .pc-slider-wrapper {
          width: 100%;
          margin-bottom: 6rem;
      }
  }



  .terminals-hero-section {
      position: relative;
      width: 100%;
      height: 150vh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .terminals-hero-section .hero-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
  }

  .terminals-hero-section .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg,
              rgba(0, 0, 0, 0.55) 0%,
              rgba(31, 78, 121, 0.65) 55%,
              rgba(0, 0, 0, 0.7) 100%);
      z-index: 1;
  }

  .terminals-hero-section .hero-content {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 1200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4rem;
  }

  /* Título */
  .terminals-hero-section .hero-heading {
      text-align: center;
      max-width: 720px;
  }

  .terminals-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.35);
  }

  .terminals-hero-section .hero-title::after {
      content: "";
      display: block;
      width: 70px;
      height: 4px;
      margin: 1rem auto 0;
      background: var(--orange);
      border-radius: 4px;
  }

  .terminals-hero-section .hero-subtitle {
      font-size: 1.1rem;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.9);
      margin: 0;
  }

  /* 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);
  }

  /* Responsivo */
  @media (max-width: 992px) {
      .terminals-cards-grid {
          grid-template-columns: repeat(2, 1fr);
      }
  }

  @media (max-width: 640px) {
      .terminals-hero-section {
          height: auto;
          padding-top: 5rem;
          padding-bottom: 5rem;
      }

      .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);
      }
  }



  /*=====================================================
        ORGANOGRAMA MODERNO
======================================================*/

  .terminal-structure-section {
      background: #ffffff;

      overflow: hidden;
      position: relative;
  }





  /*=====================================================
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;

  }


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

  @media(max-width:1200px) {

      .terminal-row {

          justify-content: center;

      }

      .terminal-card {

          width: 250px;

      }

  }

  @media(max-width:992px) {

      .terminal-header h2 {

          font-size: 36px;

      }

      .card {

          width: 90%;

          max-width: 400px;

      }

  }

  @media(max-width:768px) {

      .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;

      }

  }

  /*==========================
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 {

      position: relative;

      z-index: 5;

  }

/* ===== movido de pages/numbers-section.xhtml ===== */
:root {
                --blue: #2196F3;
                --blue-hover: #286eaf;
                --orange: #f2a900;
                --black: #000000;
            }

            * {
                box-sizing: border-box;
            }

            body {
                margin: 0;
                font-family: 'Segoe UI', Arial, sans-serif;
                background: #ffffff;
            }

            /* ===================== SECTION ===================== */
            .indicators-section-number {
                position: relative;
                background: #ffffff;
                overflow: hidden;

                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 150vh;
            }


            .content-container-number {
                position: relative;
                z-index: 1;
                max-width: 1080px;
                margin: 0 auto;
                width: 100%;
            }

            /* ===================== HEADER COMERCIAL ===================== */
            .indicators-header {
                text-align: center;
                max-width: 700px;
                margin: 0 auto 70px;
            }

            .indicators-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;
            }

            .indicators-eyebrow::before {
                content: "";
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--orange);
            }

            .section-title {
                margin: 0 0 18px;
                font-size: clamp(30px, 4.2vw, 46px);
                font-weight: 800;
                letter-spacing: -0.6px;
                line-height: 1.15;
                color: var(--black);
            }

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

            .section-intro {
                margin: 0;
                font-size: 17px;
                line-height: 1.75;
                color: #5b6472;
            }

           
            @media (max-width: 760px) {
                .indicators-row {
                    grid-template-columns: 1fr;
                }

                .indicator-item:not(:last-child)::after {
                    display: none;
                }

                .indicator-item:not(:last-child) {
                    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
                }
            }

/* ===== movido de pages/tools.xhtml ===== */
:root {
        --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;
      }

      * {
        box-sizing: border-box;
      }

      /* ===== Secção ===== */
      .numbers-section {
        background: #ffffff;
        padding: 90px 24px 110px;
        text-align: center;
        height: 150vh;
      }

      .numbers-header h2 {
        margin: 0 0 12px;
        font-size: clamp(26px, 3.5vw, 36px);
        font-weight: 700;
        color: var(--deep-indigo);
      }

      .numbers-header p {
        margin: 0 auto 64px;
        max-width: 640px;
        font-size: 16px;
        line-height: 1.6;
        color: #555;
      }

      /* ===== Cards ===== */
      .numbers-row {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 32px;
        flex-wrap: wrap;
        max-width: 1000px;
        margin: 0 auto;
      }

      .stat-card {
        position: relative;
        width: 240px;
        height: 340px;

        overflow: hidden;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
      }

      /* a mesma imagem, "cortada" em 3 partes -- background-size 300% garante
     que cada card mostre 1/3 da imagem total, criando a ilusão de imagem única */
      .stat-card .bg-image {
        position: absolute;
        inset: 0;
        background-image: url("../resources/img/land-scape2.1.png");
        background-size: 300% 100%;
        background-repeat: no-repeat;
      }

      .numbers-row .stat-card:nth-child(1) .bg-image {
        background-position: 0% center;
      }

      .numbers-row .stat-card:nth-child(2) .bg-image {
        background-position: 50% center;
      }

      .numbers-row .stat-card:nth-child(3) .bg-image {
        background-position: 100% center;
      }

      /* tom azul sobreposto à imagem -- a imagem só "aparece" dentro deste azul */
      .stat-card .overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(31, 78, 121, 0.9) 0%,
          rgba(0, 31, 84, 0.93) 100%
        );
        mix-blend-mode: multiply;
      }

      .stat-card .overlay-tint {
        position: absolute;
        inset: 0;
        background: rgba(31, 78, 121, 0.55);
      }

      .stat-card .content {
        position: relative;
        z-index: 2;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 28px 20px;
        text-align: center;
      }

      .stat-card .number {
        font-size: 40px;
        font-weight: 800;
        color: var(--orange);
        line-height: 1;
        margin-bottom: 16px;
      }

      .stat-card .desc {
        font-size: 15px;
        line-height: 1.5;
        color: #ffffff;
      }

      /* um dos cards fica mais elevado que os outros */
      .numbers-row .stat-card:nth-child(2) {
        margin-bottom: -50px;
      }

      .numbers-row .stat-card:nth-child(3) {
        margin-bottom: -123px;
      }

      @media (max-width: 820px) {
        .numbers-row .stat-card:nth-child(2) {
          margin-bottom: 0;
        }

        .numbers-row {
          align-items: center;
        }
      }

      .filter-field-select {
        width: 100%;
        height: 2.4rem;
      }

      .filter-field-calendar.ui-calendar {
        width: 100%;
        display: flex;
      }

      .filter-field-calendar.ui-calendar.ui-trigger-calendar
        input.hasDatepicker {
        width: 100%;
      }

      .filter-field-calendar .ui-button {
        background: var(--orange);
        border: none;
      }

      @media (max-width: 768px) {
        .schedules-hero {
          height: auto;
          min-height: 100vh;
        }

        .schedules-hero .landing-page-hero-overlay {
          position: relative;
          min-height: 100vh;
        }
        .schedules-hero .hero-content {
          padding-top: 6rem;
          padding-bottom: 6rem;
        }
      }


/* =================================================================== */
/* Ships Hero Section (tools/ships-hero.xhtml) */
/* =================================================================== */

.ships-hero-section {
    width: 100%;
    padding: 4rem 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.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;
}

.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;
}

@media (max-width: 992px) {
    .ships-hero-container {
        height: 75vh;
    }
}

@media (max-width: 640px) {
    .ships-hero-container {
        height: 60vh;
    }

    .ships-hero-section .hero-bg-video {
        object-position: center;
    }

    .ships-hero-section {
        padding: 4rem 0 0;
    }
}