/* ===== movido de pages/gallery-section/gallery-preview-section.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;
      }

      /* ===================== PORTO DO SOYO TITLE ===================== */
      .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);
      }

      /* Tablet */
      @media (max-width: 768px) {
        .port-soyo-title { font-size: 2.1rem; }
        .port-soyo-text { font-size: 1rem; line-height: 1.7; }
      }

      /* Mobile */
      @media (max-width: 480px) {
        .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; }
      }

      /* ===================== SECTION ===================== */
      .gallery-preview-section {
        position: relative;
        background: #ffffff;
        overflow: hidden;
        min-height: 120vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
      }

      .content-container {
        z-index: 1;
        width: 100%;
      }

      .gallery-preview-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 48px;
      }

      .gallery-preview-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 18px;
        margin-bottom: 18px;
        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;
      }

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

      .section-title {
        margin: 0;
        font-size: clamp(26px, 3.4vw, 36px);
        font-weight: 800;
        letter-spacing: -0.5px;
        color: var(--deep-indigo);
      }

      .gallery-preview-header p {
        margin: 10px 0 0;
        font-size: 15px;
        color: #5b6472;
        max-width: 440px;
      }

      .gallery-header-link {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 700;
        color: var(--deep-indigo);
        text-decoration: none;
        white-space: nowrap;
        padding-bottom: 4px;
        transition: color 0.25s ease;
      }

      .gallery-header-link svg {
        width: 15px;
        height: 15px;
        stroke: var(--deep-indigo);
        fill: none;
        stroke-width: 2.2;
        transition: transform 0.25s ease, stroke 0.25s ease;
      }

      .gallery-header-link:hover { color: var(--blue-hover); }
      .gallery-header-link:hover svg { stroke: var(--blue-hover); transform: translateX(3px); }

      /* ===================== GRID ===================== */
      .gallery-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
      }

      .gallery-card {
        position: relative;
        display: block;
        height: 280px;
        border-radius: 16px;
        overflow: hidden;
        text-decoration: none;
        box-shadow: var(--shadow-1);
      }

      .gallery-card-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }

      .gallery-card:hover .gallery-card-img { transform: scale(1.08); }

      /* título por cima da imagem, com gradiente na base para legibilidade */
      .gallery-card-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: flex-end;
        padding: 18px;
        background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,31,84,0.75) 100%);
        transition: background 0.3s ease;
      }

      .gallery-card:hover .gallery-card-overlay {
        background: linear-gradient(180deg, rgba(0,0,0,0.05) 30%, rgba(0,31,84,0.85) 100%);
      }

      .gallery-card-title {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: #ffffff;
        line-height: 1.35;
      }

      /* ---- último card: CTA sobre a imagem ---- */
      .gallery-card--cta .gallery-card-img {
        filter: brightness(0.55) saturate(0.9);
      }

      .gallery-card--cta:hover .gallery-card-img {
        filter: brightness(0.4) saturate(0.9);
      }

      .gallery-cta-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        text-align: center;
        padding: 20px;
      }

      .gallery-cta-overlay .cta-icon {
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        border: 1.5px solid rgba(255, 255, 255, 0.4);
      }

      .gallery-cta-overlay .cta-icon svg {
        width: 18px;
        height: 18px;
        stroke: #ffffff;
        fill: none;
        stroke-width: 2;
      }

      .gallery-cta-overlay span.cta-text {
        font-size: 15px;
        font-weight: 700;
        color: #ffffff;
      }

      @media (max-width: 980px) {
        .gallery-grid { grid-template-columns: repeat(2, 1fr); }
      }

      @media (max-width: 620px) {
        .gallery-preview-header { flex-direction: column; align-items: flex-start; }
        .gallery-grid { grid-template-columns: 1fr; }
        .gallery-card { height: 240px; }
      }

/* ===== movido de pages/organizational-structure.xhtml ===== */
/* ===========================
           ABOUT US REDIRECT SECTION
           =========================== */
      .organizational-structure-page .about-redirect-section {
        background: linear-gradient(
          135deg,
          rgba(0, 31, 84, 0.95) 0%,
          rgba(1, 36, 109, 0.9) 100%
        );
        border-radius: 20px;
        padding: 4rem 3rem;
        margin-bottom: 3rem;
        overflow: hidden;
        position: relative;
      }

      .organizational-structure-page .about-redirect-section::before {
        content: "";
        position: absolute;
        top: -50px;
        right: -50px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(242, 169, 0, 0.15) 0%,
          transparent 70%
        );
        z-index: 0;
      }

      .organizational-structure-page .about-redirect-section::after {
        content: "";
        position: absolute;
        bottom: -80px;
        left: -80px;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(242, 169, 0, 0.12) 0%,
          transparent 70%
        );
        z-index: 0;
      }

      .organizational-structure-page .about-redirect-section .content-wrapper {
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
        position: relative;
        z-index: 1;
      }

      .organizational-structure-page .about-redirect-section .section-title {
        color: var(--text-white);
        margin-bottom: 1.5rem;
        font-size: clamp(32px, 4vw, 46px);
      }

      .organizational-structure-page .about-redirect-section .section-subtitle {
        color: var(--text-light);
        font-size: 1.1rem;
        line-height: 1.7;
        margin-bottom: 2.5rem;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
      }

      .organizational-structure-page
        .about-redirect-section
        .about-explore-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 2.5rem;
        background: linear-gradient(135deg, var(--blue-hover) 100%);
        color: var(--text-white);
        border-radius: 50px;
        text-decoration: none;
        font-weight: 700;
        font-size: 1.05rem;
        letter-spacing: 0.03em;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        border: 2px solid transparent;
        position: relative;
        overflow: hidden;
        z-index: 1;
      }

      .organizational-structure-page
        .about-redirect-section
        .about-explore-btn::before {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(135deg, var(--blue-hover), var(--orange));
        border-radius: 52px;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.4s ease;
      }

      .organizational-structure-page
        .about-redirect-section
        .about-explore-btn:hover::before {
        opacity: 1;
      }

      .organizational-structure-page
        .about-redirect-section
        .about-explore-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        border-color: rgba(242, 169, 0, 0.5);
      }

      .organizational-structure-page
        .about-redirect-section
        .about-explore-btn:active {
        transform: translateY(-2px);
      }

      .organizational-structure-page
        .about-redirect-section
        .about-explore-btn
        i {
        font-size: 1.2rem;
        transition: transform 0.4s ease;
      }

      .organizational-structure-page
        .about-redirect-section
        .about-explore-btn:hover
        i {
        transform: translateX(6px);
      }

      /* Responsive - about redirect section */
      @media (max-width: 768px) {
        .organizational-structure-page .about-redirect-section {
          padding: 3rem 2rem;
          margin-bottom: 2rem;
        }

        .organizational-structure-page
          .about-redirect-section
          .section-subtitle {
          font-size: 1rem;
        }

        .organizational-structure-page
          .about-redirect-section
          .about-explore-btn {
          padding: 0.9rem 2rem;
          font-size: 0.95rem;
          gap: 0.6rem;
        }
      }

      /* ===========================
           ORGANIZATIONAL STRUCTURE CARDS
           =========================== */
      .organizational-structure-page .organizational-structure-section {
        margin-bottom: 3rem;
      }

      .organizational-structure-page
        .organizational-structure-section
        .section-title {
        text-align: center;
        margin-bottom: 3rem;
      }

      .organizational-structure-page .org-cards-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 1.5rem;
        margin-top: 2rem;
      }

      .organizational-structure-page .org-card {
        background: var(--glass-bg);
        backdrop-filter: blur(var(--glass-blur));
        -webkit-backdrop-filter: blur(var(--glass-blur));
        border: 1px solid var(--glass-border);
        border-radius: 16px;
        padding: 2rem;
        box-shadow: var(--shadow-1);
        transition: all 0.35s ease;
        cursor: default;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      .organizational-structure-page .org-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(
          90deg,
          var(--deep-indigo),
          var(--blue-hover)
        );
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.4s ease;
      }

      .organizational-structure-page .org-card:hover::before {
        transform: scaleX(1);
        transform-origin: left;
      }

      .organizational-structure-page .org-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-soft);
        border-color: var(--blue-hover);
        background: rgba(255, 255, 255, 0.18);
      }

      .organizational-structure-page .org-card-icon {
        width: 70px;
        height: 70px;
        background: rgba(0, 31, 84, 0.08);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.2rem;
        flex-shrink: 0;
        transition: all 0.35s ease;
      }

      .organizational-structure-page .org-card:hover .org-card-icon {
        background: rgba(0, 31, 84, 0.15);
        transform: scale(1.1) rotate(5deg);
      }

      .organizational-structure-page .org-card-icon i {
        font-size: 2rem;
        color: var(--deep-indigo);
        transition: color 0.35s ease;
      }

      .organizational-structure-page .org-card:hover .org-card-icon i {
        color: var(--blue-hover);
      }

      .organizational-structure-page .org-card-content h2 {
        font-size: 1.25rem;
        color: var(--deep-indigo);
        margin: 0 0 0.8rem 0;
        font-weight: 700;
        text-align: center;
      }

      .organizational-structure-page .org-card-content p {
        color: var(--text-gray);
        font-size: 0.95rem;
        line-height: 1.6;
        margin: 0;
        flex-grow: 1;
        text-align: center;
      }

      /* Responsive */
      @media (max-width: 768px) {
        .organizational-structure-page .org-cards-wrapper {
          grid-template-columns: 1fr;
          gap: 1rem;
        }
      }

      @media (max-width: 480px) {
        .organizational-structure-page .org-card {
          padding: 1.5rem;
        }

        .organizational-structure-page .org-card-content h2 {
          font-size: 1.1rem;
        }

        .organizational-structure-page .org-card-icon {
          width: 60px;
          height: 60px;
        }

        .organizational-structure-page .org-card-icon i {
          font-size: 1.7rem;
        }
      }