/* ==========================================================================
   GRUPO VYAS — DESIGN SYSTEM & ESTILOS PRINCIPAIS
   Baseado em: vyas-design-system.md e 1 Home.png
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS DE DESIGN & VARIÁVEIS CSS (BOOTSTRAP 5 STANDARD)
   -------------------------------------------------------------------------- */
:root {
  /* ==========================================================================
     BOOTSTRAP 5 — TOKENS OFICIAIS DO GRUPO VYAS
     ========================================================================== */
  --bs-primary: #006398;
  --bs-primary-rgb: 0, 99, 152;

  --bs-secondary: #C4D400;
  --bs-secondary-rgb: 196, 212, 0;

  --bs-info: #35A2A4;
  --bs-info-rgb: 53, 162, 164;

  --bs-success: #64BF80;
  --bs-success-rgb: 100, 191, 128;

  --bs-warning: #F0C000;
  --bs-warning-rgb: 240, 192, 0;

  --bs-dark: #0E2638;
  --bs-dark-rgb: 14, 38, 56;

  --bs-light: #EFF2F5;
  --bs-light-rgb: 239, 242, 245;

  --bs-body-color: #2E2E2E;
  --bs-body-bg: #FAFAFA;

  /* ==========================================================================
     DIFERENCIAIS EXCLUSIVOS DA MARCA GRUPO VYAS
     ========================================================================== */
  /* Gradiente oficial da marca (símbolo V) */
  --vyas-gradient: linear-gradient(90deg,
    #35A2A4 0%,
    #64BF80 27%,
    #9CE156 61%,
    #BEF63C 86%,
    #CCFF33 100%
  );

  /* Variáveis de apoio compatíveis */
  --vyas-navy: var(--bs-primary);
  --vyas-blue-title: var(--bs-primary);
  --vyas-lime-solid: var(--bs-secondary);
  --vyas-teal: var(--bs-info);
  --vyas-green: var(--bs-success);
  --vyas-amber: var(--bs-warning);
  --vyas-navy-dark: var(--bs-dark);
  --vyas-white: #FFFFFF;

  /* Tipografia */
  --vyas-font-main: 'Google Sans Flex', sans-serif;
  --vyas-font-alt: 'Google Sans Flex', sans-serif;

  /* Bordas e Sombras */
  --vyas-radius-sm: 8px;
  --vyas-radius-md: 16px;
  --vyas-radius-lg: 24px;
  --vyas-radius-xl: 32px;
  --vyas-shadow-sm: 0 4px 12px rgba(0, 99, 152, 0.06);
  --vyas-shadow-md: 0 10px 25px rgba(0, 99, 152, 0.10);
  --vyas-shadow-lg: 0 20px 40px rgba(0, 99, 152, 0.15);
}

/* --------------------------------------------------------------------------
   2. ESTILOS GERAIS & RESET
   -------------------------------------------------------------------------- */
body {
  font-family: var(--vyas-font-main);
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  overflow-x: hidden;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--vyas-font-main);
  font-weight: 700;
  color: var(--bs-primary);
  letter-spacing: -0.02em;
}

*,
*::before,
*::after {
  text-decoration: none !important;
}

a,
a:hover,
a:focus,
a:active {
  text-decoration: none !important;
  transition: all 0.2s ease-in-out;
}

/* --------------------------------------------------------------------------
   3. BOTÕES BOOTSTRAP 5 (PADRÃO DO PROJETO COM ZERO CÓDIGO EXTRA)
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--vyas-font-main);
  transition: all 0.25s ease;
}

/* Botão Secundário (CTA Destaque Verde-Limão #C4D400) */
.btn-secondary,
.btn-vyas-lime {
  --bs-btn-color: #0E2638;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #0E2638;
  --bs-btn-hover-bg: #b5c400;
  --bs-btn-hover-border-color: #b5c400;
  --bs-btn-focus-shadow-rgb: 196, 212, 0;
  --bs-btn-active-color: #0E2638;
  --bs-btn-active-bg: #a6b400;
  --bs-btn-active-border-color: #a6b400;
  --bs-btn-border-radius: 50rem;
  font-weight: normal;
  font-size: 1.05rem;
  padding: 0.85rem 2.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: none;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-vyas-lime:hover,
.btn-vyas-lime:focus {
  background-color: #b5c400;
  border-color: #b5c400;
  color: #0E2638;
  transform: translateY(-2px);
  box-shadow: none;
}

/* Botão Primário (Azul Institucional #006398) */
.btn-primary,
.btn-vyas-navy {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: #004f7a;
  --bs-btn-hover-border-color: #004a72;
  --bs-btn-focus-shadow-rgb: 0, 99, 152;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: #00456b;
  --bs-btn-active-border-color: #004063;
  --bs-btn-border-radius: 50rem;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-vyas-navy:hover,
.btn-vyas-navy:focus {
  background-color: #004f7a;
  border-color: #004a72;
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   4. MARCAÇÃO DE TEXTO E ASSINATURA VISUAL (SEM SUBLINHADOS)
   -------------------------------------------------------------------------- */
.vyas-heading-underline,
.vyas-heading-underline-lime,
.vyas-heading-underline-white,
.vyas-heading-underline-light {
  display: inline-block;
  text-decoration: none !important;
}

.vyas-text-lines-translucent,
.vyas-text-lines-dark {
  text-decoration: none !important;
}

.vyas-eyebrow {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vyas-navy);
  margin-bottom: 1.25rem;
  display: block;
}

.vyas-eyebrow-social {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vyas-white);
  margin-bottom: 1.25rem;
  display: block;
}

/* --------------------------------------------------------------------------
   5. NAVBAR / HEADER
   -------------------------------------------------------------------------- */
.vyas-navbar {
  padding: 1.25rem 0;
  background-color: transparent;
  transition: all 0.3s ease;
}

.vyas-navbar .navbar-brand img {
  height: 42px;
  width: auto;
}

.vyas-nav-link {
  color: var(--vyas-navy);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.5rem 0.85rem !important;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.vyas-nav-link:hover {
  color: var(--vyas-teal);
  text-decoration: none;
}

.vyas-nav-pill-active {
  background-color: var(--vyas-navy);
  color: var(--vyas-white) !important;
  border-radius: 50rem;
  padding: 0.35rem 0.95rem !important;
  transition: all 0.25s ease;
}

.vyas-nav-pill-active:hover,
.vyas-nav-pill-active:focus,
.nav-item.dropdown:hover > .vyas-nav-pill-active {
  background-color: var(--vyas-navy) !important;
  color: var(--vyas-white) !important;
  text-decoration: none;
  box-shadow: none;
}

.vyas-menu-toggle {
  border: none;
  background: transparent;
  color: var(--vyas-navy);
  font-size: 1.75rem;
  padding: 0.25rem;
  cursor: pointer;
  display: none;
}

@media (max-width: 991.98px) {
  .vyas-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

.offcanvas [data-bs-toggle="collapse"] .bi-chevron-down {
  transition: transform 0.25s ease;
}

.offcanvas [data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

/* Dropdowns no Navbar Desktop (Abertura automática no hover) */
@media (min-width: 992px) {
  .vyas-navbar .nav-item.dropdown {
    position: relative;
  }

  /* Dropdown Menu com descida e transição suave */
  .vyas-navbar .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.22s;
    margin-top: 0.35rem;
    border-radius: 14px;
    border: 1px solid rgba(0, 99, 152, 0.08);
    box-shadow: 0 12px 35px rgba(0, 40, 70, 0.12);
    min-width: 240px;
    padding: 0.5rem 0.4rem;
    background-color: #FFFFFF;
  }

  .vyas-navbar .dropdown-menu.dropdown-menu-end {
    left: auto;
    right: 0;
  }

  /* Ponte invisível para evitar perda do hover ao mover o cursor para o menu */
  .vyas-navbar .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 14px;
    background: transparent;
  }

  /* Exibe o menu suavemente ao passar o mouse */
  .vyas-navbar .nav-item.dropdown:hover > .dropdown-menu,
  .vyas-navbar .nav-item.dropdown.show > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Rotação suave da setinha (dropdown-toggle) ao abrir */
  .vyas-navbar .dropdown-toggle::after {
    transition: transform 0.25s ease;
    vertical-align: 0.15em;
  }

  .vyas-navbar .nav-item.dropdown:hover > .dropdown-toggle::after,
  .vyas-navbar .nav-item.dropdown.show > .dropdown-toggle::after {
    transform: rotate(180deg);
  }

  /* Estilização refinada dos links dentro do dropdown */
  .vyas-navbar .dropdown-item {
    font-size: 0.88rem;
    font-weight: 500;
    color: #104C74;
    padding: 0.65rem 1.15rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
  }

  .vyas-navbar .dropdown-item:hover,
  .vyas-navbar .dropdown-item:focus {
    background-color: #EDF9FC;
    color: var(--bs-primary);
    transform: translateX(4px);
    font-weight: 600;
  }
}

/* --------------------------------------------------------------------------
   6. HERO HOME
   -------------------------------------------------------------------------- */
.vyas-hero-section {
  position: relative;
  overflow: visible;
}

.vyas-hero-wrapper {
  position: relative;
  width: 100%;
}

.vyas-hero-card {
  position: relative;
  width: 100%;
  border-radius: 36px;
  overflow: hidden;
  aspect-ratio: 1.9 / 1;
  min-height: 460px;
  max-height: 620px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.35s ease;
}

.vyas-hero-card .vyas-parallax-bg {
  background-position: center 25%;
}

/* Hero principal: fundo estático, sem o efeito parallax (sem folga vertical nem translate) */
.vyas-hero-card .vyas-hero-bg {
  top: 0;
  height: 100%;
  transform: none;
  will-change: auto;
}

/* Camada de fundo com folga vertical para o efeito parallax (JS translada esta camada no scroll) */
.vyas-parallax-bg {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translateY(var(--parallax-y, 0px));
  will-change: transform;
}

.vyas-hero-card:hover {
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18);
}

/* Filtro sutil apenas no canto esquerdo da foto para contraste de leitura */
.vyas-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(12, 14, 16, 0.72) 0%,
    rgba(12, 14, 16, 0.52) 26%,
    rgba(12, 14, 16, 0.16) 40%,
    rgba(12, 14, 16, 0) 54%
  );
  z-index: 1;
  pointer-events: none;
}

.vyas-hero-content {
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 3.8vw, 3.5rem);
  max-width: 600px;
}

.vyas-hero-title {
  color: #CCFF33;
  font-family: var(--vyas-font-main);
  font-size: clamp(2.2rem, 3.6vw, 3.3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 0.85rem;
  display: block;
  text-decoration: none;
  transition: all 0.25s ease;
}

.vyas-hero-title-line {
  display: block;
  white-space: nowrap;
}

.vyas-hero-subtitle {
  color: #FFFFFF;
  opacity: 0.95;
  font-family: var(--vyas-font-main);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 400;
  line-height: 1.55;
  max-width: 520px;
  margin-bottom: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  text-decoration: none;
  transition: all 0.25s ease;
}

/* Símbolo V: animação de entrada ao acessar a página e efeito ao passar o mouse na section */
.vyas-hero-symbol {
  position: absolute;
  right: 1.5%;
  bottom: -34px;
  width: clamp(420px, 40vw, 640px);
  height: auto;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.32));
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
  animation: vyasSymbolEntrance 1.15s cubic-bezier(0.16, 1, 0.3, 1) 1s both;
  will-change: transform, opacity, filter;
}

/* Hover da section anima o símbolo V */
.vyas-hero-section:hover .vyas-hero-symbol,
.vyas-hero-wrapper:hover .vyas-hero-symbol {
  transform: translateY(-16px) scale(1.03);
  filter: drop-shadow(0 26px 42px rgba(0, 0, 0, 0.48));
}

/* Animação de Entrada: o símbolo do V vem de baixo ao acessar a página */
@keyframes vyasSymbolEntrance {
  0% {
    opacity: 0;
    transform: translateY(160px);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  }
  60% {
    opacity: 1;
  }
  82% {
    transform: translateY(-10px);
    filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.4));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.32));
  }
}

@media (prefers-reduced-motion: reduce) {
  .vyas-hero-symbol {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   7. SEÇÃO DE NÚMEROS (ESTATÍSTICAS)
   -------------------------------------------------------------------------- */
.vyas-numbers-wrapper {
  background-color: #EFF2F5;
  border-radius: 40px;
  padding: 3.5rem 2rem;
}

.vyas-numbers-title {
  color: var(--bs-primary);
  font-family: var(--vyas-font-main);
  font-size: 55px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 0;
}

.vyas-numbers-grid {
  max-width: 1020px;
  width: 100%;
}

.vyas-stat-card {
  position: relative;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(135deg, #35A2A4 0%, #64BF80 32%, #9CE156 68%, #BEF63C 100%) border-box;
  border: 2px solid transparent;
  border-radius: 20px;
  padding: 1.4rem 1.5rem;
  text-align: center;
  height: 100%;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 80, 121, 0.04);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.vyas-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(20, 80, 121, 0.08);
}

.vyas-stat-eyebrow {
  font-family: var(--vyas-font-main);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--vyas-navy);
  margin-bottom: 0.15rem;
  line-height: 1.2;
}

.vyas-stat-number {
  font-family: var(--vyas-font-main);
  font-size: 56px;
  font-weight: 700;
  color: var(--vyas-teal);
  line-height: 1.1;
  margin-bottom: 0.3rem;
  display: inline-block;
  text-decoration: none !important;
  transition: all 0.25s ease;
}

.vyas-revenda-numbers-inset .vyas-stat-number {
  font-size: 70px;
  font-weight: 700;
}

.vyas-stat-label {
  font-family: var(--vyas-font-main);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--vyas-navy);
  margin-bottom: 0;
  line-height: 1.2;
  display: inline-block;
  text-decoration: none !important;
  transition: all 0.25s ease;
}

/* --------------------------------------------------------------------------
   8. SEÇÃO PESSOAS / EQUIPE
   -------------------------------------------------------------------------- */
.vyas-people-title {
  color: var(--bs-primary);
  font-family: var(--vyas-font-main);
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}

.vyas-people-desc {
  color: #4A4A4A;
  font-family: var(--vyas-font-main);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  font-weight: 400;
  line-height: 1.55;
  max-width: 420px;
  margin-bottom: 2rem;
}

.vyas-people-photo {
  border-radius: 18px;
  height: auto; /* o atributo height do WordPress não pode esticar a foto */
}

/* --------------------------------------------------------------------------
   9. CARD DE PROPÓSITO INTEGRADO (NAVY CARD)
   -------------------------------------------------------------------------- */
.vyas-purpose-section {
  position: relative;
  overflow: visible;
}

.vyas-navy-card {
  background-color: #145079;
  border-radius: 40px;
  padding: clamp(2.5rem, 4vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  padding-top: 90px;
  padding-bottom: 90px;
  color: var(--vyas-white);
  position: relative;
  overflow: visible;
  box-shadow: 0 16px 40px rgba(20, 80, 121, 0.18);
  transition: all 0.35s ease;
}

.vyas-navy-card:hover {
  box-shadow: 0 22px 50px rgba(20, 80, 121, 0.25);
}

.vyas-navy-symbol {
  position: absolute;
  top: -60px;
  left: -30px;
  width: clamp(400px, 33vw, 500px);
  max-width: none;
  height: auto;
  margin: 0;
  filter: none;
  opacity: 0;
  transform: translateX(-140px);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.9s ease,
              filter 0.4s ease;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Estado ativado ao rolar a página até a section */
.vyas-navy-symbol.vyas-revealed {
  opacity: 1;
  transform: translateX(0);
}

.vyas-navy-card:hover .vyas-navy-symbol.vyas-revealed {
  transform: translateX(0) scale(1.04) rotate(1deg);
  filter: none;
}

.vyas-navy-content {
  max-width: 92%;
}

.vyas-navy-text-p {
  font-family: var(--vyas-font-main);
  font-size: 20px;
  line-height: 25px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
  margin-bottom: 1.5rem;
  text-align: left;
}

/* Destaque sem sublinhado */
.vyas-navy-highlight {
  font-family: var(--vyas-font-main);
  font-size: clamp(1.05rem, 1.2vw, 1.3rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.6;
  margin-bottom: 0;
  text-decoration: none !important;
  display: inline-block;
}

/* Botão Saiba Mais com Glow Neon Verde-Limão */
.vyas-btn-glow {
  background-color: var(--vyas-lime-solid);
  color: var(--vyas-navy);
  font-family: var(--vyas-font-main);
  font-weight: normal;
  font-size: 1.05rem;
  border-radius: 50rem;
  padding: 0.85rem 2.1rem;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: none;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  text-decoration: none;
}

.vyas-btn-glow:hover,
.vyas-btn-glow:focus {
  background-color: #b5c400;
  color: var(--vyas-navy);
  transform: translateY(-2px);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   10. ÁREAS DE NEGÓCIO
   -------------------------------------------------------------------------- */
.vyas-business-section-title {
  color: var(--bs-primary);
  font-family: var(--vyas-font-main);
  font-size: clamp(2.4rem, 3.6vw, 3.1rem);
  letter-spacing: -0.02em;
  margin-bottom: 0;
  text-align: center;
}

.vyas-business-section-title .fw-normal {
  font-weight: 400;
  color: var(--bs-primary);
}

.vyas-business-section-title .fw-bold {
  font-weight: 800;
  color: var(--bs-primary);
}

.vyas-business-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  height: 310px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 0 10px 28px rgba(14, 38, 56, 0.12);
  transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.35rem 1.4rem 1.15rem 1.4rem;
  color: var(--vyas-white);
  cursor: pointer;
}

.vyas-business-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(14, 38, 56, 0.22);
}

.vyas-business-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.70) 86%, rgba(0, 0, 0, 0.70) 100%);
  z-index: 1;
  transition: background 0.35s ease;
}

.vyas-business-card:hover .vyas-business-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 86%, rgba(0, 0, 0, 0.65) 100%);
}

.vyas-business-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.vyas-business-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--vyas-lime-solid);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  display: block;
}

.vyas-business-title {
  color: #ffffff;
  font-family: var(--vyas-font-main);
  font-size: clamp(1.55rem, 1.9vw, 1.85rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 0.45rem;
}

.vyas-business-desc {
  font-size: 0.92rem;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.35;
  margin-bottom: 0.65rem;
  letter-spacing: -0.005em;
}

.vyas-business-link {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--vyas-lime-solid) !important;
  text-transform: uppercase;
  text-decoration: none !important;
  display: inline-block;
  transition: transform 0.25s ease, color 0.25s ease;
}

.vyas-business-link:hover,
.vyas-business-card:hover .vyas-business-link {
  transform: translateX(3px);
  color: var(--vyas-lime-bright) !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   11. BANNER RESPONSABILIDADE SOCIAL
   -------------------------------------------------------------------------- */
.vyas-social-section {
  position: relative;
  overflow: visible;
}

.vyas-social-wrapper {
  position: relative;
  width: 100%;
  overflow: visible;
}

.vyas-social-banner {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  padding: 4.5rem 3.5rem;
  box-shadow: 0 16px 40px rgba(20, 80, 121, 0.14);
  color: var(--vyas-white);
  transition: all 0.35s ease;
}

.vyas-social-banner:hover {
  box-shadow: 0 22px 50px rgba(20, 80, 121, 0.2);
}

.vyas-social-banner .vyas-parallax-bg {
  background-position: center;
}

.vyas-social-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.65) 40%, rgba(0, 0, 0, 0) 75%);
  z-index: 1;
}

.vyas-social-content {
  position: relative;
  z-index: 2;
  max-width: 410px;
}

.vyas-social-content p {
  font-size: 1.1rem;
}

.vyas-social-title {
  color: #CCFF33;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.vyas-social-symbol {
  position: absolute;
  right: 60px;
  bottom: -34px;
  width: 540px;
  height: auto;
  opacity: 0;
  transform: translateX(180px);
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.45));
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.9s ease,
              filter 0.4s ease;
  will-change: transform, opacity;
}

/* Estado ativado ao rolar a página até a section (surge da direita para a esquerda) */
.vyas-social-symbol.vyas-revealed {
  opacity: 0.98;
  transform: translateX(0);
}

.vyas-social-wrapper:hover .vyas-social-symbol.vyas-revealed,
.vyas-social-banner:hover .vyas-social-symbol.vyas-revealed {
  transform: translateX(0) translateY(-8px) scale(1.03);
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.55));
}

/* --------------------------------------------------------------------------
   12. SEÇÃO REDES SOCIAIS / POSTS
   -------------------------------------------------------------------------- */
.vyas-instagram-title {
  font-size: clamp(2.2rem, 3.2vw, 2.75rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--vyas-navy);
  letter-spacing: -0.025em;
}

.vyas-social-icon-btn {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.vyas-social-icon-btn img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.vyas-social-icon-btn:hover {
  transform: translateY(-3px) scale(1.08);
}

.vyas-insta-card {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(20, 80, 121, 0.08);
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  background: #fff;
  cursor: pointer;
}

.vyas-insta-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(20, 80, 121, 0.16);
}

.vyas-insta-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.vyas-footer {
  background-color: #F8FAFC;
  padding: 4.5rem 0 2.5rem 0;
  color: var(--bs-body-color);
  font-size: 0.9rem;
}

.vyas-footer-slogan {
  color: var(--bs-primary);
  font-family: var(--vyas-font-main);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.vyas-footer-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bs-dark);
  margin-bottom: 1.25rem;
}

.vyas-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vyas-footer-links li {
  margin-bottom: 0.55rem;
}

.vyas-footer-links a {
  color: #4A5568;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.88rem;
  transition: color 0.2s ease;
}

.vyas-footer-links a:hover {
  color: var(--bs-primary);
  text-decoration: none !important;
}

.vyas-footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
  color: #2D3748;
  font-size: 0.86rem;
  line-height: 1.45;
}

.vyas-footer-contact-item i {
  font-size: 1.05rem;
  flex-shrink: 0;
  color: var(--bs-primary);
  margin-top: 2px;
}

.vyas-footer-contact-item a {
  color: #2D3748;
  text-decoration: none;
  transition: color 0.2s ease;
}

.vyas-footer-contact-item a:hover {
  color: var(--bs-primary);
  text-decoration: none !important;
}

.vyas-footer-ouvidoria-badge {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.vyas-footer-ouvidoria-badge img {
  max-width: 100%;
  height: auto;
  display: block;
}

.vyas-footer-ouvidoria-badge:hover {
  transform: translateY(-2px);
}

.vyas-footer-contact-item--plain {
  padding-left: 0;
}

.vyas-ouvidoria-badge {
  background-color: #D8E8F2;
  border: 1.5px solid #B8D3E4;
  border-radius: 50rem;
  padding: 0.6rem 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--vyas-navy);
  transition: all 0.25s ease;
}

.vyas-ouvidoria-badge:hover {
  background-color: #C5DBE9;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(20, 80, 121, 0.1);
}

.vyas-ouvidoria-badge .badge-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.vyas-copyright {
  border-top: 1px solid #E2E8F0;
  padding-top: 2rem;
  margin-top: 3.5rem;
  font-size: 0.82rem;
  color: #718096;
}

.vyas-legal-link {
  color: #718096;
  font-size: 0.82rem;
  text-decoration: underline !important;
  transition: color 0.2s ease;
}

.vyas-legal-link:hover {
  color: var(--bs-primary);
}

.vyas-argo-link {
  color: var(--bs-primary);
  font-weight: 600;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.vyas-argo-link:hover {
  color: var(--bs-info);
  text-decoration: underline !important;
}

.vyas-footer-v-icon {
  height: 16px;
  width: auto;
  display: inline-block;
  vertical-align: -2px;
}

/* --------------------------------------------------------------------------
   14. BOTÃO FLUTUANTE DO WHATSAPP
   -------------------------------------------------------------------------- */
.vyas-whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 62px;
  height: 62px;
  background-color: #25D366;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  z-index: 1050;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.vyas-whatsapp-float:hover {
  transform: scale(1.1);
  color: #FFFFFF;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.6);
}

/* --------------------------------------------------------------------------
   15. RESPONSIVIDADE E AJUSTES MOBILE / DESKTOP
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .vyas-hero-symbol {
    width: 240px;
    right: 2%;
    bottom: -20px;
    opacity: 0.9;
  }
  .vyas-social-symbol {
    display: none;
  }
  .vyas-numbers-wrapper {
    padding: 2.75rem 1.5rem;
    border-radius: 26px;
  }
  .vyas-numbers-grid {
    max-width: 660px;
  }
  .vyas-stat-card {
    border-radius: 18px;
    padding: 1rem 1rem;
    min-height: 125px;
  }
  .vyas-stat-number {
    font-size: 1.95rem;
  }
  .vyas-navy-card {
    padding: 2.5rem 1.75rem;
    border-radius: 28px;
  }
  .vyas-navy-symbol {
    position: static;
    width: 100%;
    max-width: 270px;
    top: auto;
    left: auto;
    margin-top: -2.5rem;
    margin-left: -1.75rem;
    margin-bottom: 0;
  }
  .vyas-navy-content {
    max-width: 100%;
  }
  .vyas-social-banner {
    padding: 2.5rem 1.75rem;
  }
  .vyas-social-title {
    font-size: 1.75rem;
  }
  .vyas-people-title {
    font-size: 2rem;
  }
}

@media (max-width: 767.98px) {
  .vyas-hero-wrapper {
    max-width: 100%;
  }
  .vyas-hero-card {
    aspect-ratio: 3 / 4;
    min-height: 480px;
    max-height: 640px;
    border-radius: 24px;
    padding: 2rem 1.5rem;
  }
  .vyas-hero-card .vyas-parallax-bg {
    background-position: right 25%;
  }
  .vyas-hero-content {
    padding: 1.25rem 0;
    max-width: 100%;
  }
  .vyas-hero-title {
    font-size: clamp(1.45rem, 5.5vw, 1.85rem);
  }
  .vyas-hero-symbol {
    width: 190px;
    right: 0;
    bottom: -15px;
    opacity: 0.85;
  }
  .vyas-navy-symbol {
    max-width: 220px;
    margin-top: -2rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    display: block;
    transform: translateX(-60px);
  }
  .vyas-navy-symbol.vyas-revealed {
    transform: translateX(0);
  }
  .vyas-business-card {
    height: 260px;
    padding: 1.25rem 1.25rem 1.1rem 1.25rem;
  }
}

@media (max-width: 575.98px) {
  .vyas-hero-symbol {
    width: 140px;
    right: -6px;
    bottom: -10px;
    opacity: 0.8;
  }
  .vyas-hero-card {
    border-radius: 20px;
    aspect-ratio: 4 / 5;
    min-height: 460px;
  }
  .vyas-hero-title {
    font-size: clamp(1.35rem, 5.8vw, 1.6rem);
  }
  .vyas-numbers-wrapper {
    padding: 2rem 1.25rem;
    border-radius: 22px;
  }
  .vyas-numbers-grid {
    max-width: 100%;
  }
  .vyas-stat-card {
    border-radius: 16px;
    padding: 0.95rem 0.85rem;
    min-height: 118px;
  }
  .vyas-stat-number {
    font-size: 1.65rem;
  }
  .vyas-stat-label {
    font-size: 0.82rem;
  }
  .vyas-people-title {
    font-size: 1.75rem;
  }
  .vyas-navy-card {
    border-radius: 22px;
    padding: 2rem 1.25rem;
  }
  .vyas-navy-symbol {
    max-width: 170px;
    margin-top: -1.75rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
  }
  .vyas-social-banner {
    border-radius: 22px;
  }
  .vyas-business-card {
    height: 250px;
    border-radius: 20px;
  }
}

/* ==========================================================================
   10. PÁGINA QUEM SOMOS
   ========================================================================== */
.vyas-about-hero {
  padding: 2.5rem 0 3.5rem;
  background-color: #ffffff;
}

.vyas-about-title {
  color: var(--bs-primary);
  font-size: clamp(2.2rem, 3.8vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.vyas-about-rule {
  display: block;
  width: 100%;
  max-width: 354px;
  height: 2px;
  border: none;
  margin: 0 0 1rem;
}

.vyas-about-subtitle {
  color: var(--bs-primary);
  font-weight: normal;
  font-size: 22px;
}

.vyas-about-text {
  font-size: 18px;
  line-height: 22px;
  color: #333333;
  text-align: left;
}

.vyas-about-map-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

.vyas-about-map-img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 28px rgba(0, 99, 152, 0.08));
}

/* Timeline: Nossa história em movimento */
.vyas-history-section {
  padding: 5.5rem 0;
  background-color: #FAFAFA;
  overflow: hidden;
}

.vyas-history-title {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 400; /* Regular conforme solicitado */
  color: #006398;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.02em;
}

.vyas-history-title .vyas-history-gradient {
  display: block;
  font-weight: 800;
  background: linear-gradient(90deg, #35A2A4 0%, #4EB978 35%, #88C533 70%, #B4DE15 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vyas-timeline-wrapper {
  position: relative;
  margin-top: 2.75rem;
}

.vyas-timeline-container {
  display: flex;
  align-items: stretch;
  gap: 4.5rem;
  overflow-x: auto;
  padding: 1rem 3.5rem 2.25rem 0.5rem;
  scrollbar-width: none;       /* Firefox: sem barra de rolagem (as setas já rolam) */
  -ms-overflow-style: none;    /* Edge/IE antigo */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

/* Chrome, Safari e Edge: esconde a barra, mantendo a rolagem pelas setas e pelo toque */
.vyas-timeline-container::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.vyas-timeline-item {
  position: relative;
  flex: 0 0 245px;
  min-width: 245px;
  max-width: 245px;
  display: flex;
  flex-direction: column;
  padding-top: 32px;
  scroll-snap-align: start;
}

/* Um card por tela no mobile: o item ocupa a largura visível do
   carrossel, então avançar (seta ou arrastar o dedo) sempre mostra
   exatamente 1 card inteiro, sem cortar o conteúdo no meio. */
@media (max-width: 767.98px) {
  .vyas-timeline-container {
    gap: 1.25rem;
    padding-right: 1rem;
  }

  .vyas-timeline-item {
    flex: 0 0 calc(100vw - 5rem);
    min-width: calc(100vw - 5rem);
    max-width: calc(100vw - 5rem);
  }
}

/* Marcador: Número no topo, traço horizontal e linha vertical proporcional */
.vyas-tl-marker-wrap {
  position: absolute;
  top: 0;
  left: 20px;
  bottom: -20px;
  width: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  pointer-events: none;
}

.vyas-tl-number {
  font-weight: 700;
  font-size: 1.05rem;
  color: #BADA00;
  line-height: 1;
  margin-bottom: 2px;
}

.vyas-tl-tick {
  width: 12px;
  height: 2px;
  background-color: #BADA00;
  margin-bottom: 0;
  flex-shrink: 0;
}

.vyas-tl-long-line {
  width: 2px;
  flex-grow: 1;
  background-color: #BADA00;
}

/* Cards da Linha do Tempo (Mais compactos e proporcionais) */
.vyas-timeline-card {
  position: relative;
  border-radius: 18px;
  padding: 1.25rem 1rem 1.35rem 2.15rem;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Card Azul Escuro (1989, 2010, 2017-2018, 2022, 2024) */
.vyas-tl-card-navy {
  background-color: #104C74;
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(16, 76, 116, 0.15);
}

.vyas-tl-card-navy:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(16, 76, 116, 0.25);
}

.vyas-tl-card-navy .vyas-tl-year {
  color: #FFFFFF;
}

.vyas-tl-card-navy .vyas-tl-tag {
  color: #C4D400;
}

.vyas-tl-card-navy .vyas-tl-subtitle {
  color: #FFFFFF;
}

.vyas-tl-card-navy .vyas-tl-desc {
  color: rgba(255, 255, 255, 0.9);
}

/* Card Transparente (1998, 2011, 2014-2015, 2019-2021, 2023) */
.vyas-tl-card-transparent {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.vyas-tl-card-transparent:hover {
  transform: translateY(-4px);
}

.vyas-tl-card-transparent .vyas-tl-year {
  color: #C4D400;
}

.vyas-tl-card-transparent .vyas-tl-tag {
  color: #8EB738;
}

.vyas-tl-card-transparent .vyas-tl-subtitle {
  color: #104C74;
}

.vyas-tl-card-transparent .vyas-tl-desc {
  color: #104C74;
  font-weight: 400;
}

/* Variação Card 9 (2023 - Ano em Azul Marinho) */
.vyas-tl-year-navy .vyas-tl-year {
  color: #104C74 !important;
}

/* Card Verde Limão Especial (Marco 11: 2026 - O Futuro) */
.vyas-tl-card-lime {
  background-color: #9DBD1A;
  color: #104C74;
  box-shadow: 0 8px 24px rgba(157, 189, 26, 0.25);
  justify-content: flex-start;
}

.vyas-tl-card-lime:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(157, 189, 26, 0.35);
}

.vyas-tl-card-lime .vyas-tl-year {
  color: #104C74;
}

.vyas-tl-future-item {
  font-size: 0.72rem;
  font-weight: 700;
  color: #104C74;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.35;
  margin-bottom: 0.85rem;
}

.vyas-tl-future-item:last-child {
  margin-bottom: 0;
}

/* Marcador Azul Marinho Exclusivo do Marco 11 */
.vyas-tl-marker-navy .vyas-tl-number {
  color: #104C74 !important;
}

.vyas-tl-marker-navy .vyas-tl-tick,
.vyas-tl-marker-navy .vyas-tl-long-line {
  background-color: #104C74 !important;
}

/* Tipografia dos Itens Proporcional */
.vyas-tl-year {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 0.55rem;
}

.vyas-tl-tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.vyas-tl-subtitle {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.vyas-tl-desc {
  font-size: .8rem;
  line-height: 1.45;
  margin-bottom: 0;
  opacity: 0.92;
}

/* Controles de Navegação Fixos à Direita */
.vyas-timeline-fixed-nav {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.vyas-timeline-arrow-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #006398;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  transition: all 0.25s ease;
  box-shadow: 0 6px 18px rgba(0, 99, 152, 0.25);
  cursor: pointer;
}

.vyas-timeline-arrow-btn:hover {
  background-color: #004d77;
  color: #FFFFFF;
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(0, 99, 152, 0.4);
}

@media (max-width: 767.98px) {
  .vyas-timeline-fixed-nav {
    right: 4px;
  }
  .vyas-timeline-arrow-btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}

/* Seção 3: Conectando Operações */
.vyas-ops-section {
  padding: 5rem 0;
  background-color: #ffffff;
}

.vyas-ops-title {
  color: var(--bs-primary);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
}

.vyas-ops-text {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #333333;
  text-align: left;
}

.vyas-ops-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.vyas-ops-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  aspect-ratio: 4 / 3.3;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
}

.vyas-ops-img:hover {
  transform: scale(1.02);
}

/* Seção 4: Valores, Propósito e Visão */
.vyas-values-section {
  padding: 5.5rem 0;
  background-color: #EEFBFE;
  overflow: hidden;
}

.vyas-heading-accent {
  width: 85px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #35A2A4 0%, #88C533 100%);
  margin-bottom: 0.65rem;
}

.vyas-values-title,
.vyas-pv-title {
  font-size: 42px;
  font-weight: 700;
  color: #006398;
  margin-bottom: 1.75rem;
  line-height: 1.2;
}

.vyas-pv-text {
  font-size: 0.98rem;
  line-height: 1.55;
  color: #333333;
  max-width: 440px;
  text-align: left;
}

/* Grid Layout Principal da Seção de Valores */
.vyas-values-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.vyas-values-cards-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

.vyas-value-card {
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
              linear-gradient(135deg, #35A2A4 0%, #88C533 100%) border-box;
  border: 3.5px solid transparent;
  border-radius: 20px;
  padding: 1.45rem 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 160px;
  box-shadow: 0 8px 22px rgba(53, 162, 164, 0.12), 0 2px 6px rgba(0, 99, 152, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
  position: relative;
}

.vyas-value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(53, 162, 164, 0.22), 0 4px 12px rgba(0, 99, 152, 0.08);
}

.vyas-value-card h3 {
  font-size: 28px;
  font-weight: 800;
  color: #006398;
  margin-bottom: 0.75rem;
  line-height: 1.22;
}

/* Altura fixa (mínima) dos títulos dos cards: os textos sempre começam alinhados.
   Cards lado a lado (2 ou 4 colunas): reserva 2 linhas; em 4 colunas estreitas, 3. */
@media (min-width: 576px) {
  .vyas-value-card h3 {
    min-height: calc(1.22em * 2);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .vyas-value-card h3 {
    min-height: calc(1.22em * 3);
  }
}

.vyas-value-text {
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  color: #374151;
  margin-bottom: 0;
  opacity: 1;
}

/* Animação ao rolar a página: Cards da esquerda e Textos da direita */
.vyas-grid-valores-top,
.vyas-grid-valores-bottom {
  opacity: 0;
  transform: translateX(-70px);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s ease;
  will-change: transform, opacity;
}

.vyas-grid-proposito,
.vyas-grid-visao {
  opacity: 0;
  transform: translateX(70px);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s ease;
  will-change: transform, opacity;
}

/* Revelação ao atingir a seção com o scroll */
.vyas-values-section.vyas-revealed .vyas-grid-valores-top {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.05s;
}

.vyas-values-section.vyas-revealed .vyas-grid-proposito {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.15s;
}

.vyas-values-section.vyas-revealed .vyas-grid-valores-bottom {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.25s;
}

.vyas-values-section.vyas-revealed .vyas-grid-visao {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.35s;
}

/* Celular/tablet: cada bloco é revelado individualmente (JS marca o próprio bloco) */
.vyas-grid-valores-top.vyas-revealed,
.vyas-grid-valores-bottom.vyas-revealed,
.vyas-grid-proposito.vyas-revealed,
.vyas-grid-visao.vyas-revealed {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.05s;
}

@media (max-width: 767.98px) {
  .vyas-grid-valores-top,
  .vyas-grid-valores-bottom {
    transform: translateX(-35px);
  }
  .vyas-grid-proposito,
  .vyas-grid-visao {
    transform: translateX(35px);
  }
}

/* Alinhamento Desktop: Valores em 4 colunas, Propósito/Visão lado a lado abaixo */
@media (min-width: 992px) {
  .vyas-values-layout {
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
  }

  .vyas-values-cards-row--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .vyas-values-row-pv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3.5rem;
  }
}

/* Responsividade Mobile e Tablet */
@media (max-width: 991.98px) {
  .vyas-about-hero,
  .vyas-history-section,
  .vyas-ops-section,
  .vyas-values-section {
    padding: 3.5rem 0;
  }

  .vyas-grid-valores-top {
    order: 1;
  }
  .vyas-grid-valores-bottom {
    order: 2;
  }
  .vyas-grid-proposito {
    order: 3;
    margin-top: 1rem;
  }
  .vyas-grid-visao {
    order: 4;
  }
}

@media (max-width: 767.98px) {
  .vyas-ops-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

@media (max-width: 575.98px) {
  .vyas-values-cards-row {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
}

/* ==========================================================================
   11. MAPA INTERATIVO DO BRASIL (QUEM SOMOS)
   ========================================================================== */
.vyas-map-card {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  border: none;
  position: relative;
}

.vyas-map-interactive-container {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.vyas-brazil-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Estados padrão: fundo claro, igual ao Figma (só os estados de operação têm cor) */
.vyas-brazil-svg .state {
  fill: #EBF0F3;
  stroke: #7F90A6 !important;
  stroke-width: 0.7px !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  cursor: default;
  transition: fill 0.2s ease, filter 0.2s ease;
}

/* Estados com Operação Oficial do Grupo Vyas */
.vyas-brazil-svg #PA {
  fill: #335277 !important; /* Azul-marinho */
  cursor: pointer;
}

.vyas-brazil-svg #MT {
  fill: #C8D032 !important; /* Verde-limão */
  cursor: pointer;
}

.vyas-brazil-svg #MG {
  fill: #C8D032 !important; /* Verde-limão */
  cursor: pointer;
}

.vyas-brazil-svg #AL {
  fill: #69C27D !important; /* Verde claro */
  cursor: pointer;
}

/* Hover EXCLUSIVO nos estados em destaque (largura/contorno fixos sem distorção) */
.vyas-brazil-svg #PA:hover {
  fill: #2a4568 !important;
  filter: brightness(1.08) drop-shadow(0 4px 10px rgba(51, 82, 119, 0.45));
}

.vyas-brazil-svg #MT:hover,
.vyas-brazil-svg #MG:hover {
  fill: #b9c22a !important;
  filter: brightness(1.06) drop-shadow(0 4px 10px rgba(200, 208, 50, 0.5));
}

.vyas-brazil-svg #AL:hover {
  fill: #58b06c !important;
  filter: brightness(1.06) drop-shadow(0 4px 10px rgba(105, 194, 125, 0.5));
}

/* Rótulos de Texto (Siglas dentro dos estados) */
.vyas-map-label {
  font-family: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: 11px;
  text-anchor: middle;
  dominant-baseline: central;
  user-select: none;
  pointer-events: none;
}

.vyas-label-light {
  fill: #FFFFFF;
}

.vyas-label-dark {
  fill: #355052;
}

.vyas-brazil-svg #mapLabels text:last-child {
  fill: #2F4A6E; /* AL: rótulo fora do estado */
}

.vyas-label-sm {
  font-size: 9px;
}

.vyas-label-xs {
  font-size: 7.5px;
}

/* Tooltip Flutuante Interativo (Largura Fixa Estrita) */
.vyas-map-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  box-sizing: border-box !important;
  background: rgba(14, 38, 56, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.4;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -115%);
  transition: opacity 0.15s ease, visibility 0.15s ease;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(196, 212, 0, 0.3);
}

.vyas-map-tooltip.visible {
  opacity: 1;
  visibility: visible;
}

.vyas-map-tooltip-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #FFFFFF;
  margin-bottom: 0.35rem;
  white-space: nowrap;
  display: block;
}

.vyas-map-tooltip-desc {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 0;
  line-height: 1.35;
}

/* Legenda Informativa abaixo do mapa */
.vyas-map-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 99, 152, 0.1);
}

.vyas-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #555555;
}

.vyas-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ==========================================================================
   PÁGINA VYAS REVENDA (vyas-revenda.html)
   ========================================================================== */

/* 1. Hero / Capa Revenda */
.vyas-revenda-hero {
  background-color: #c4d200;
  border-radius: 40px;
  padding: 5rem 3rem;
  position: relative;
  overflow: visible;
  margin-bottom: 2.75rem;
}

/* Cards de números: ficam mais estreitos que o card verde acima, não até a borda */
.vyas-revenda-numbers-inset {
  max-width: 92%;
  margin: 0 auto;
}

.vyas-revenda-hero-title {
  color: #006398;
  font-size: clamp(2.3rem, 3.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
  line-height: 1.15;
  text-decoration: none !important;
}

.vyas-revenda-hero-subtitle {
  color: #333333;
  font-size: 1.02rem;
  font-weight: normal;
  margin-bottom: 1.25rem;
  line-height: 1.4;
  max-width: 480px;
  text-align: left;
  border-bottom: none !important;
  text-decoration: none !important;
}

.vyas-revenda-hero-desc {
  color: #333333;
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 480px;
  margin-bottom: 0;
  font-weight: 400;
  text-align: left;
  border-bottom: none !important;
  text-decoration: none !important;
}

.vyas-revenda-hero-img-wrap {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
  display: inline-block;
  width: 100%;
  max-width: auto;
  height: 290px;
  margin-bottom: -7.5rem;
  margin-top: 0.5rem;
}

.vyas-revenda-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

/* 2. Métricas / Contadores Revenda */
.vyas-revenda-metric-card {
  background: #ffffff;
  border: 2px solid #2395ba;
  border-radius: 20px;
  padding: 1.75rem 1.25rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vyas-revenda-metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(35, 149, 186, 0.15);
}

.vyas-revenda-metric-prefix {
  font-size: 0.88rem;
  font-weight: 500;
  color: #1a7fa0;
  margin-bottom: 0.25rem;
}

.vyas-revenda-metric-number {
  font-size: 70px;
  font-weight: 700;
  color: #1a7fa0;
  line-height: 1.1;
  position: relative;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.vyas-revenda-metric-line {
  width: 75%;
  height: 2px;
  background-color: #2395ba;
  margin: 0 auto 0.65rem auto;
}

.vyas-revenda-metric-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #004d77;
  margin-bottom: 0;
}

/* 3. Seção Vyas Revenda (Cidades & Mapa MT) */
.vyas-revenda-map-title {
  color: #004d77;
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 2rem;
  text-decoration: none !important;
}

/* Navegação dos Polos em Pills */
.vyas-map-pills-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 2.75rem;
}

.vyas-map-pill-btn {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 50rem;
  padding: 0.55rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #004d77;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none !important;
}

.vyas-map-pill-btn:hover {
  background: #e2e8f0;
  color: #003654;
  transform: translateY(-2px);
}

.vyas-map-pill-btn.active {
  background: #004d77;
  border-color: #004d77;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 77, 119, 0.22);
  transform: translateY(-2px);
}

/* Coluna de Informações / Abrangência */
.vyas-map-info-wrap {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 1.5rem;
}

.vyas-map-unit-panel {
  display: none;
  animation: fadeInMapText 0.3s ease forwards;
}

.vyas-map-unit-panel.active {
  display: block;
}

@keyframes fadeInMapText {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.vyas-map-hub-heading {
  color: #004d77;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.vyas-map-scope-sub {
  color: #527c94;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  display: block;
}

.vyas-map-coverage-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.vyas-map-coverage-list.two-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 1.25rem;
}

.vyas-map-coverage-list li {
  font-size: 0.85rem;
  font-weight: 600;
  color: #006398;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-transform: uppercase;
  transition: color 0.15s ease, transform 0.15s ease;
  cursor: default;
}

.vyas-map-coverage-list li:hover {
  color: #003654;
  transform: translateX(3px);
}

.vyas-map-support-note {
  margin-top: 1.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #718096;
  letter-spacing: 0.04em;
}

/* Coluna do Mapa */
.vyas-mt-map-stage {
  position: relative;
  width: 100%;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vyas-mt-map-stage svg {
  width: 100%;
  height: 100%;
  max-height: 480px;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.04));
}

/* Municípios base */
.vyas-mt-city {
  fill: #ebebeb;
  stroke: #ffffff;
  stroke-width: 0.75;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill 0.25s ease, stroke 0.25s ease;
}

.vyas-mt-city:hover {
  filter: brightness(0.92);
  stroke: #ffffff;
  stroke-width: 1.2;
}

/* Cores das Regiões Conforme Referência dos Slides */
/* 1. Cáceres: Verde Limão */
.vyas-mt-map-stage[data-active-unit="caceres"] .vyas-mt-city[data-unit="caceres"] {
  fill: #8ecc00 !important;
  stroke: #ffffff;
}

/* 2. Colíder: Sub-área 1 Teal + Sub-área 2 Amarelo-Limão */
.vyas-mt-map-stage[data-active-unit="colider"] .vyas-mt-city[data-unit="colider_teal"] {
  fill: #35a2a4 !important;
  stroke: #ffffff;
}
.vyas-mt-map-stage[data-active-unit="colider"] .vyas-mt-city[data-unit="colider_lime"] {
  fill: #cadc1e !important;
  stroke: #ffffff;
}

/* 3. Lucas do Rio Verde: Azul Marinho Escuro */
.vyas-mt-map-stage[data-active-unit="lucas"] .vyas-mt-city[data-unit="lucas"] {
  fill: #1b4d72 !important;
  stroke: #ffffff;
}

/* 4. Sapezal: Azul Marinho Mais Escuro */
.vyas-mt-map-stage[data-active-unit="sapezal"] .vyas-mt-city[data-unit="sapezal"] {
  fill: #123854 !important;
  stroke: #ffffff;
}

/* 5. Sinop: Azul Petróleo */
.vyas-mt-map-stage[data-active-unit="sinop"] .vyas-mt-city[data-unit="sinop"] {
  fill: #1d4b70 !important;
  stroke: #ffffff;
}

/* 6. Tangará da Serra: Cyan/Teal */
.vyas-mt-map-stage[data-active-unit="tangara"] .vyas-mt-city[data-unit="tangara"] {
  fill: #2c8a9d !important;
  stroke: #ffffff;
}

/* Tooltip */
.vyas-mt-map-tooltip {
  position: absolute;
  background: #002d47;
  color: #ffffff;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 100;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -130%);
}

.vyas-mt-map-tooltip.visible {
  opacity: 1;
}

/* 4. Grid de 4 Diferenciais (2 colunas x 2 linhas) */
.vyas-revenda-diff-section {
  background-color: #ffffff;
}

.vyas-revenda-diff-card {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;

  background-color: #ffffff;
  border-radius: 28px;

  /* Permite que o bloco teal tenha os quatro cantos arredondados */
  overflow: visible;

  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.035);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.vyas-revenda-diff-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.vyas-revenda-diff-header {
  background-color: #ffffff;

  padding: 0.85rem 1.1rem 0.65rem;

  text-align: center;

  min-height: 68px;

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

  border-radius: 28px 28px 0 0;
}

.vyas-revenda-diff-title {
  color: #145079;

  font-size: clamp(1rem, 1.25vw, 1.18rem);
  font-weight: 700;

  letter-spacing: -0.015em;
  text-transform: uppercase;

  margin-bottom: 0;

  line-height: 1.12;

  text-decoration: none !important;
}

.vyas-revenda-diff-body {
  background-color: #c4d200;

  /* Encosta perfeitamente no header (sem frincha/seam): só os
     cantos externos arredondados, não os quatro independentemente. */
  border-radius: 0 0 28px 28px;

  padding: 1.1rem 1.5rem 1.2rem;

  min-height: 120px;

  color: #004d77;

  font-size: 0.96rem;
  line-height: 1.35;
  font-weight: 400;
  text-align: left;

  flex-grow: 1;

  display: flex;
  align-items: center;
}

.vyas-revenda-diff-body p {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin-bottom: 0;
  text-align: inherit;
}

/* Modificador de Corpo Azul nos Cards */
.vyas-card-blue-body .vyas-revenda-diff-body {
  background-color: #145079 !important;
  color: #ffffff !important;
}

.vyas-card-blue-body .vyas-revenda-diff-body p {
  color: #ffffff !important;
}

/* Modificador de Corpo Teal nos Cards (Vyas Energia) */
.vyas-card-teal-body .vyas-revenda-diff-body {
  background-color: #2294A8 !important;
  color: #ffffff !important;

  /* Mesma correção de seam da regra base: só cantos externos */
  border-radius: 0 0 28px 28px;
  min-height: 120px;

  padding: 1.1rem 1.5rem 1.2rem;

  font-size: 0.96rem;
  line-height: 1.35;
  font-weight: 400;
}

.vyas-card-teal-body .vyas-revenda-diff-body p {
  color: #ffffff !important;

  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;

  text-align: inherit;
}

/* Ajustes responsivos dos cards de diferenciais */
@media (max-width: 991.98px) {
  .vyas-revenda-diff-header {
    min-height: 82px;
    padding: 1rem 1rem 0.75rem;
  }

  .vyas-revenda-diff-title {
    font-size: 1rem;
  }

  .vyas-card-teal-body .vyas-revenda-diff-body {
    min-height: 145px;
    padding: 1.25rem 1.5rem;
    font-size: 0.92rem;
  }
}

@media (max-width: 767.98px) {
  .vyas-revenda-diff-header {
    min-height: 76px;
  }

  .vyas-revenda-diff-title {
    font-size: 0.98rem;
  }

  .vyas-card-teal-body .vyas-revenda-diff-body {
    min-height: 135px;
    padding: 1.25rem 1.35rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 575.98px) {
  .vyas-revenda-diff-card {
    border-radius: 24px;
  }

  .vyas-revenda-diff-header {
    min-height: 72px;
    border-radius: 24px;
    padding: 0.9rem 1rem 0.7rem;
  }

  .vyas-revenda-diff-title {
    font-size: 0.92rem;
  }

  .vyas-card-teal-body .vyas-revenda-diff-body {
    border-radius: 24px;
    min-height: 130px;
    padding: 1.15rem 1.25rem;
    font-size: 0.88rem;
  }
}

/* Animação Sequencial ao Rolar a Página (.vyas-scroll-card) */
.vyas-scroll-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.vyas-scroll-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.vyas-delay-1 {
  transition-delay: 0.1s;
}

.vyas-delay-2 {
  transition-delay: 0.25s;
}

.vyas-delay-3 {
  transition-delay: 0.4s;
}

.vyas-delay-4 {
  transition-delay: 0.55s;
}

/* 5. Nossas Revendas (Showcase Container Azul Escuro) */
.vyas-revendas-showcase-container {
  background-color: #0f466d;
  border-radius: 28px;
  padding: 3.5rem 3rem;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.vyas-revendas-showcase-title {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.25rem;
}

.vyas-revendas-showcase-sub {
  color: #c4d400;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2.5rem;
  text-decoration: none !important;
}

.vyas-revenda-unit-card {
  display: none;
  animation: fadeInRevenda 0.35s ease forwards;
}

.vyas-revenda-unit-card.active {
  display: block;
}

@keyframes fadeInRevenda {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.vyas-revenda-photo-box {
  border-radius: 20px;
  overflow: hidden;
  height: 280px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  background-color: transparent;
}

.vyas-revenda-photo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.vyas-revenda-map-box {
  border-radius: 20px;
  overflow: hidden;
  height: 280px;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  background-color: transparent;
}

.vyas-revenda-map-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.vyas-revenda-map-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.vyas-revenda-maps-btn {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #bece04;
  color: #0e2638;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.52rem 1.6rem;
  border-radius: 50rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  text-decoration: none !important;
  white-space: nowrap;
  transition: all 0.2s ease;
  z-index: 10;
}

.vyas-revenda-maps-btn:hover {
  background-color: #abb904;
  color: #0e2638;
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.vyas-revenda-info-footer {
  margin-top: 1.5rem;
  text-align: center;
}

.vyas-revenda-info-title {
  color: #ffffff;
  font-size: 1.45rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.vyas-revenda-info-address {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.95rem;
  margin-bottom: 0;
  display: inline-flex;
  align-items: start;
  justify-content: center;
  gap: 0.5rem;
  max-width: 820px;
}

.vyas-revenda-info-address i {
  color: #bece04 !important;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.vyas-showcase-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.25s ease;
  z-index: 20;
}

.vyas-showcase-nav-arrow:hover {
  background: #c4d400;
  border-color: #c4d400;
  color: #0e2638;
}

.vyas-showcase-nav-prev {
  left: 15px;
}

.vyas-showcase-nav-next {
  right: 15px;
}

/* 6. Nossos Reconhecimentos */
.vyas-reconhecimentos-title {
  color: #004d77;
  font-size: 2.2rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 2.5rem;
  text-decoration: none !important;
  letter-spacing: 0.02em;
}

/* Par vertical: 2 selos empilhados (um em cima, outro embaixo) por slide
   do carrossel — assim cada clique de avançar troca essa dupla inteira. */
.vyas-reconhecimento-pair {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.vyas-reconhecimento-item {
  text-align: center;
  padding: 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 210px;
}

.vyas-reconhecimento-card-dpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vyas-reconhecimento-dpo-img {
  width: 100%;
  max-width: 165px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0 auto 0.75rem auto;
  transition: transform 0.3s ease;
}

.vyas-reconhecimento-name {
  color: #004d77;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
}

.vyas-reconhecimento-status {
  color: #64748b;
  font-size: 0.78rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.vyas-reconhecimento-status.status-qualificada {
  color: #15803d;
  font-weight: 800;
}

.vyas-reconhecimento-item:hover .vyas-reconhecimento-card-dpo {
  transform: translateY(-8px) scale(1.04);
}

.vyas-reconhecimento-img {
  width: 100%;
  max-width: 165px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0 auto;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vyas-reconhecimento-item:hover .vyas-reconhecimento-img {
  transform: translateY(-8px) scale(1.04);
}

.vyas-reconhecimentos-carousel, .vyas-ambev-carousel, .vyas-marketplace-carousel {
  position: relative;
  padding: 0 10px;
}

.vyas-reconhecimentos-carousel .owl-dots ,
.vyas-ambev-carousel .owl-dots ,
.vyas-marketplace-carousel .owl-dots {
  margin-top: 1.75rem !important;
}

.vyas-reconhecimentos-carousel .owl-dot span ,
.vyas-ambev-carousel .owl-dot span ,
.vyas-marketplace-carousel .owl-dot span {
  width: 10px !important;
  height: 10px !important;
  margin: 5px 6px !important;
  background: #cbd5e1 !important;
  transition: all 0.25s ease !important;
}

.vyas-reconhecimentos-carousel .owl-dot.active span ,
.vyas-ambev-carousel .owl-dot.active span ,
.vyas-marketplace-carousel .owl-dot.active span {
  background: #004d77 !important;
  width: 26px !important;
  border-radius: 6px !important;
}

.vyas-reconhecimentos-carousel .owl-nav ,
.vyas-ambev-carousel .owl-nav ,
.vyas-marketplace-carousel .owl-nav {
  position: absolute;
  top: 40%;
  left: -20px;
  right: -20px;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  width: calc(100% + 40px);
  pointer-events: none;
  margin: 0 !important;
}

.vyas-reconhecimentos-carousel .owl-nav button.owl-prev,
.vyas-ambev-carousel .owl-nav button.owl-prev,
.vyas-marketplace-carousel .owl-nav button.owl-prev,
.vyas-reconhecimentos-carousel .owl-nav button.owl-next ,
.vyas-ambev-carousel .owl-nav button.owl-next ,
.vyas-marketplace-carousel .owl-nav button.owl-next {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #004d77 !important;
  box-shadow: 0 4px 14px rgba(0, 77, 119, 0.15) !important;
  font-size: 1.8rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transition: all 0.25s ease !important;
}

.vyas-reconhecimentos-carousel .owl-nav button.owl-prev:hover,
.vyas-ambev-carousel .owl-nav button.owl-prev:hover,
.vyas-marketplace-carousel .owl-nav button.owl-prev:hover,
.vyas-reconhecimentos-carousel .owl-nav button.owl-next:hover ,
.vyas-ambev-carousel .owl-nav button.owl-next:hover ,
.vyas-marketplace-carousel .owl-nav button.owl-next:hover {
  background: #004d77 !important;
  color: #ffffff !important;
  transform: scale(1.08);
}

/* 7. Parcerias BEES & Zé Delivery */
.vyas-partner-card {
  background-color: #fdbf0a;
  border-radius: 20px;
  padding: 3rem 3rem 2.5rem 3rem;
  box-shadow: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vyas-partner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(253, 191, 10, 0.25);
}

.vyas-partner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
}

.vyas-partner-title {
  color: #000000;
  font-size: 2.35rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

.vyas-partner-logo {
  object-fit: contain;
  flex-shrink: 0;
}

.vyas-partner-logo-bees {
  height: 48px;
  width: auto;
  max-width: 145px;
}

.vyas-partner-logo-ze {
  height: 72px;
  width: auto;
  max-width: 165px;
}

.vyas-partner-desc {
  color: #000000;
  font-size: 1.15rem;
  line-height: 1.35;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
  font-weight: 500;
}

.vyas-partner-desc strong {
  font-weight: 700;
}

.vyas-partner-btn {
  background-color: #ffffff;
  color: #000000;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.65rem 2.2rem;
  border-radius: 50rem;
  display: inline-block;
  box-shadow: none;
  transition: all 0.2s ease;
  text-decoration: none !important;
}

.vyas-partner-btn:hover {
  background-color: #000000;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .vyas-partner-card {
    padding: 2rem 1.75rem;
  }
  .vyas-partner-title {
    font-size: 1.85rem;
  }
  .vyas-partner-desc {
    font-size: 1rem;
  }
}

/* 8. Portfólio Ambev Container */
.vyas-portfolio-lime {
  background-color: #c4d200;
  border-radius: 36px;
  width: 100%;
  margin: 0 auto;
  padding: 3rem 2rem 2.75rem 2rem;
  text-align: center;
  position: relative;
}

.vyas-portfolio-lime-title {
  color: #006398;
  font-size: 2.25rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}

.vyas-portfolio-lime-sub {
  color: #006398;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none !important;
  margin-bottom: 2.25rem;
}

/* Par vertical: 2 logos empilhados por slide do carrossel (mesmo padrão
   do carrossel de Reconhecimentos). */
.vyas-brand-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 100%;
}

.vyas-brand-card-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 120px;
  background: transparent !important;
}

.vyas-brand-card-img {
  width: 138px;
  height: auto;
  border-radius: 16px;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.vyas-brand-card-img:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

/* 9. Produtos Marketplace Container */
.vyas-portfolio-teal {
  background-color: #2294a8;
  border-radius: 36px;
  width: 100%;
  margin: 0 auto;
  padding: 3rem 2rem 2.75rem 2rem;
  text-align: center;
  position: relative;
}

.vyas-portfolio-teal-title {
  color: #ffffff;
  font-size: 2.25rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}

.vyas-portfolio-teal-sub {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none !important;
  margin-bottom: 2.25rem;
}

@media (max-width: 1200px) {
  .vyas-brand-card-img {
    width: 120px;
  }
}

@media (max-width: 991px) {
  .vyas-portfolio-lime,
  .vyas-portfolio-teal {
    padding: 2.25rem 1rem 2rem 1rem;
    border-radius: 28px;
  }
  .vyas-brand-card-img {
    width: 110px;
  }
}

@media (max-width: 576px) {
  .vyas-portfolio-lime,
  .vyas-portfolio-teal {
    padding: 1.75rem 0.75rem 1.5rem 0.75rem;
    border-radius: 20px;
  }
  .vyas-portfolio-lime-title,
  .vyas-portfolio-teal-title {
    font-size: 1.65rem;
  }
  .vyas-brand-card-img {
    width: 92px;
    border-radius: 12px;
  }
}

/* =========================================================================
   4. MAPA INTERATIVO VYAS REVENDA E CIDADES DE ATUAÇÃO
   ========================================================================= */
.vyas-revenda-map-section {
  background-color: #ffffff;
}

.vyas-revenda-map-title {
  color: #004d77;
  font-size: 2.25rem;
  font-weight: 800;
  text-decoration: none !important;
  margin-bottom: 1.5rem;
  letter-spacing: 0.01em;
}

.vyas-map-pills-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 2.25rem;
}

.vyas-map-pill-btn {
  background-color: #ffffff;
  border: 1.5px solid #d2dbe0;
  color: #0e2638;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.55rem 1.45rem;
  border-radius: 50rem;
  cursor: pointer;
  transition: all 0.22s ease;
  outline: none;
  text-decoration: none !important;
}

.vyas-map-pill-btn:hover {
  background-color: #f1f5f9;
  border-color: #004d77;
  color: #004d77;
  transform: translateY(-1px);
}

.vyas-map-pill-btn.active {
  background-color: #004d77;
  border-color: #004d77;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 77, 119, 0.25);
}

/* Painéis de Cobertura */
.vyas-map-info-wrap {
  min-height: 380px;
  padding: 0.5rem 0;
}

.vyas-map-unit-panel {
  display: none;
  animation: fadeInMapPanel 0.3s ease forwards;
}

.vyas-map-unit-panel.active {
  display: block;
}

@keyframes fadeInMapPanel {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.vyas-map-hub-heading {
  color: #004d77;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
  text-decoration: none !important;
}

.vyas-map-scope-sub {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #526778;
  margin-bottom: 1.35rem;
  text-decoration: none !important;
}

.vyas-map-coverage-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1rem;
}

.vyas-map-coverage-list li {
  font-size: 0.88rem;
  font-weight: 700;
  color: #004d77;
  padding: 0.22rem 0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.35;
  transition: color 0.15s ease, transform 0.15s ease;
}

.vyas-map-coverage-list li:hover {
  color: #123854;
  transform: translateX(3px);
}

.vyas-map-coverage-list.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
}

.vyas-map-support-note {
  font-size: 0.78rem;
  font-weight: 700;
  color: #526778;
  margin-top: 0.85rem;
  letter-spacing: 0.04em;
}

/* Palco do Mapa SVG */
.vyas-mt-map-stage {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 1.05 / 1;
  background-color: transparent;
  border-radius: 28px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border: 1px solid #edf2f7; */
}

.vyas-mt-map-stage svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.03));
}

.vyas-mt-city {
  fill: #ebf0f3;
  stroke: #ffffff;
  stroke-width: 1.2px;
  cursor: pointer;
  transition: fill 0.22s ease, stroke 0.2s ease, opacity 0.2s ease;
  vector-effect: non-scaling-stroke;
}

.vyas-mt-city:hover {
  stroke: #0e2638 !important;
  stroke-width: 2.2px !important;
}

/* Regras de Cores por Polo conforme referências */
/* 1. Cáceres: Verde Limão (#8ecc00) */
[data-active-unit="caceres"] .vyas-mt-city[data-unit="caceres"] {
  fill: #8ecc00 !important;
  stroke: #ffffff;
}
[data-active-unit="caceres"] .vyas-mt-city[data-unit="caceres"]:hover {
  fill: #7cb500 !important;
}

/* 2. Colíder: Duas cores (Verde-azulado Alta Floresta #35a2a4 / Amarelo-limão Leste #cadc1e) */
[data-active-unit="colider"] .vyas-mt-city[data-unit="colider_teal"] {
  fill: #35a2a4 !important;
  stroke: #ffffff;
}
[data-active-unit="colider"] .vyas-mt-city[data-unit="colider_teal"]:hover {
  fill: #2a8688 !important;
}
[data-active-unit="colider"] .vyas-mt-city[data-unit="colider_lime"] {
  fill: #cadc1e !important;
  stroke: #ffffff;
}
[data-active-unit="colider"] .vyas-mt-city[data-unit="colider_lime"]:hover {
  fill: #b3c416 !important;
}

/* 3. Lucas do Rio Verde: Azul Profundo (#1b4d72) */
[data-active-unit="lucas"] .vyas-mt-city[data-unit="lucas"] {
  fill: #1b4d72 !important;
  stroke: #ffffff;
}
[data-active-unit="lucas"] .vyas-mt-city[data-unit="lucas"]:hover {
  fill: #143d5c !important;
}

/* 4. Sapezal: Azul Escuro (#123854) */
[data-active-unit="sapezal"] .vyas-mt-city[data-unit="sapezal"] {
  fill: #123854 !important;
  stroke: #ffffff;
}
[data-active-unit="sapezal"] .vyas-mt-city[data-unit="sapezal"]:hover {
  fill: #0c2538 !important;
}

/* 5. Sinop: Azul Marinho (#1d4b70) */
[data-active-unit="sinop"] .vyas-mt-city[data-unit="sinop"] {
  fill: #1d4b70 !important;
  stroke: #ffffff;
}
[data-active-unit="sinop"] .vyas-mt-city[data-unit="sinop"]:hover {
  fill: #153957 !important;
}

/* 6. Tangará da Serra: Petróleo / Teal (#2c8a9d) */
[data-active-unit="tangara"] .vyas-mt-city[data-unit="tangara"] {
  fill: #2c8a9d !important;
  stroke: #ffffff;
}
[data-active-unit="tangara"] .vyas-mt-city[data-unit="tangara"]:hover {
  fill: #226f7f !important;
}

/* 7. Todas: visão geral com todas as áreas coloridas ao mesmo tempo */
[data-active-unit="todas"] .vyas-mt-city[data-unit="caceres"] {
  fill: #8ecc00 !important;
  stroke: #ffffff;
}
[data-active-unit="todas"] .vyas-mt-city[data-unit="caceres"]:hover {
  fill: #7cb500 !important;
}
[data-active-unit="todas"] .vyas-mt-city[data-unit="colider_teal"] {
  fill: #35a2a4 !important;
  stroke: #ffffff;
}
[data-active-unit="todas"] .vyas-mt-city[data-unit="colider_teal"]:hover {
  fill: #2a8688 !important;
}
[data-active-unit="todas"] .vyas-mt-city[data-unit="colider_lime"] {
  fill: #cadc1e !important;
  stroke: #ffffff;
}
[data-active-unit="todas"] .vyas-mt-city[data-unit="colider_lime"]:hover {
  fill: #b3c416 !important;
}
[data-active-unit="todas"] .vyas-mt-city[data-unit="lucas"] {
  fill: #1b4d72 !important;
  stroke: #ffffff;
}
[data-active-unit="todas"] .vyas-mt-city[data-unit="lucas"]:hover {
  fill: #143d5c !important;
}
[data-active-unit="todas"] .vyas-mt-city[data-unit="sapezal"] {
  fill: #123854 !important;
  stroke: #ffffff;
}
[data-active-unit="todas"] .vyas-mt-city[data-unit="sapezal"]:hover {
  fill: #0c2538 !important;
}
[data-active-unit="todas"] .vyas-mt-city[data-unit="sinop"] {
  fill: #1d4b70 !important;
  stroke: #ffffff;
}
[data-active-unit="todas"] .vyas-mt-city[data-unit="sinop"]:hover {
  fill: #153957 !important;
}
[data-active-unit="todas"] .vyas-mt-city[data-unit="tangara"] {
  fill: #2c8a9d !important;
  stroke: #ffffff;
}
[data-active-unit="todas"] .vyas-mt-city[data-unit="tangara"]:hover {
  fill: #226f7f !important;
}

/* Legenda do painel "Todas" */
.vyas-map-legend-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1rem;
}

.vyas-map-legend-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #004d77;
  padding: 0.32rem 0;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.vyas-map-legend-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Tooltip do Mapa */
.vyas-mt-map-tooltip {
  position: absolute;
  pointer-events: none;
  background-color: rgba(14, 38, 56, 0.94);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  z-index: 50;
  opacity: 0;
  transform: translate(-50%, -120%);
  transition: opacity 0.15s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.vyas-mt-map-tooltip.active {
  opacity: 1;
}

/* Responsividade específica da página Revenda */
@media (max-width: 991.98px) {
  .vyas-revenda-hero {
    padding: 2.5rem 1.75rem 2.5rem 1.75rem;
    border-radius: 28px;
    margin-bottom: 2.75rem;
  }
  .vyas-revenda-hero-title {
    font-size: 2.2rem;
  }
  .vyas-revenda-hero-img-wrap {
    height: 300px;
    border-radius: 24px;
    margin-bottom: -3.25rem;
    max-width: 100%;
  }
  .vyas-revendas-showcase-container {
    padding: 2.5rem 1.5rem;
  }
  .vyas-revendas-showcase-title {
    font-size: 2rem;
  }
  .vyas-showcase-nav-arrow {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .vyas-revenda-hero {
    padding: 2rem 1.25rem 2rem 1.25rem;
    border-radius: 24px;
    margin-bottom: 2.25rem;
  }
  .vyas-revenda-hero-title {
    font-size: 1.85rem;
  }
  .vyas-revenda-hero-img-wrap {
    height: 230px;
    border-radius: 18px;
    margin-bottom: -2.25rem;
  }
  .vyas-brand-badge {
    min-width: 90px;
    height: 56px;
    padding: 0.5rem 0.85rem;
  }
  .vyas-partner-card {
    padding: 1.5rem 1.25rem;
  }
}

/* =========================================================================
   VYAS TRANSPORTE — ESTILOS ESPECÍFICOS E SEÇÕES TEMÁTICAS
   ========================================================================= */

/* 1. Hero Transporte */
.vyas-transporte-hero-section {
  background-color: #ffffff;
}

.vyas-transporte-hero {
  background-color: #006398;
  border-radius: 40px;
  padding: 3.5rem 3rem;
  position: relative;
  overflow: visible;
  margin-bottom: 2.75rem;
}

.vyas-transporte-hero-title {
  color: #c4d200;
  font-size: clamp(2.3rem, 3.5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  line-height: 1.15;
  text-decoration: none !important;
}

.vyas-transporte-hero-subtitle {
  color: #c4d200;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.4;
  text-decoration: none !important;
}

.vyas-transporte-hero-desc {
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 500px;
  margin-bottom: 1.25rem;
  font-weight: 400;
  text-align: left;
  text-decoration: none !important;
}

.vyas-transporte-hero-img-wrap {
  position: relative;
  border-radius: 30px;
  overflow: visible;
  display: inline-block;
  width: 110%;
  max-width: 620px;
  margin-bottom: -8.5rem;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.2));
}

.vyas-transporte-hero-img {
  width: 110%;
  height: auto;
  display: block;
  border-radius: 30px;
}

/* 2. Seções com Background de Imagem (Cobertura, Soluções, Segurança, Capacidade) */
.vyas-transporte-sec-cobertura {
  background: 
    linear-gradient(90deg, rgba(8, 12, 16, 0.88) 0%, rgba(8, 12, 16, 0.80) 48%, rgba(8, 12, 16, 0.42) 75%, rgba(8, 12, 16, 0.28) 100%),
    var(--vyas-sec-bg, url('../img/transporte-bg-driver.png')) no-repeat center right / cover;
  border-radius: 36px;
  padding: 3.5rem 2.5rem;
  min-height: 560px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.vyas-transporte-sec-solucoes {
  background: 
    linear-gradient(90deg, rgba(8, 12, 16, 0.92) 0%, rgba(8, 12, 16, 0.84) 44%, rgba(8, 12, 16, 0.35) 72%, rgba(8, 12, 16, 0.1) 100%),
    var(--vyas-sec-bg, url('../img/transporte-bg-solucoes.png')) no-repeat center right / cover;
  border-radius: 36px;
  padding: 4rem 3rem;
  min-height: 540px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.vyas-transporte-sec-seguranca {
  background: 
    linear-gradient(90deg, rgba(10, 20, 14, 0.90) 0%, rgba(10, 20, 14, 0.82) 44%, rgba(10, 20, 14, 0.35) 75%, rgba(10, 20, 14, 0.15) 100%),
    var(--vyas-sec-bg, url('../img/transporte-bg-seguranca.png')) no-repeat center center / cover;
  border-radius: 36px;
  padding: 4rem 3rem;
  min-height: 540px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.vyas-transporte-sec-capacidade {
  background: 
    linear-gradient(90deg, rgba(8, 12, 16, 0.92) 0%, rgba(8, 12, 16, 0.85) 52%, rgba(8, 12, 16, 0.35) 75%, rgba(8, 12, 16, 0.1) 100%),
    var(--vyas-sec-bg, url('../img/transporte-bg-capacidade.png')) no-repeat center right / cover;
  border-radius: 36px;
  padding: 4rem 3rem;
  min-height: 560px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.vyas-transporte-sec-cobertura > .row,
.vyas-transporte-sec-solucoes > .row,
.vyas-transporte-sec-seguranca > .row,
.vyas-transporte-sec-capacidade > .row {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.vyas-transporte-sec-title {
  color: #c4d200;
  font-size: clamp(2.3rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
  text-decoration: none !important;
}

.vyas-transporte-sec-desc {
  color: #ffffff;
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  text-decoration: none !important;
  font-weight: 400;
}

/* Modificador de Cabeçalho Azul nos Cards de Destaque */
.vyas-card-blue-header .vyas-revenda-diff-header {
  background-color: #006398 !important;
}

.vyas-card-blue-header .vyas-revenda-diff-title {
  color: #c4d200 !important;
}

.vyas-transporte-sec-cobertura .vyas-revenda-diff-card,
.vyas-transporte-sec-seguranca .vyas-revenda-diff-card,
.vyas-transporte-sec-capacidade .vyas-revenda-diff-card {
  height: 100%;
}

.vyas-transporte-sec-solucoes .vyas-revenda-diff-card {
  max-width: 380px;
  height: auto;
}

/* Responsividade Vyas Transporte */
@media (max-width: 991.98px) {
  .vyas-transporte-hero {
    padding: 2.5rem 1.75rem 2.25rem 1.75rem;
    border-radius: 28px;
    margin-bottom: 2rem;
  }
  .vyas-transporte-hero-img-wrap {
    margin-bottom: 0;
    max-width: 100%;
    width: 100%;
  }
  .vyas-transporte-hero-img {
    width: 100%;
    max-width: 100%;
  }
  .vyas-transporte-sec-cobertura,
  .vyas-transporte-sec-solucoes,
  .vyas-transporte-sec-seguranca,
  .vyas-transporte-sec-capacidade {
    padding: 2.75rem 1.5rem;
    border-radius: 28px;
    min-height: auto;
  }
}

@media (max-width: 575.98px) {
  .vyas-transporte-hero {
    padding: 2rem 1.25rem;
    border-radius: 20px;
  }
  .vyas-transporte-hero-title {
    font-size: 1.95rem;
  }
  .vyas-transporte-sec-cobertura,
  .vyas-transporte-sec-solucoes,
  .vyas-transporte-sec-seguranca,
  .vyas-transporte-sec-capacidade {
    padding: 2rem 1.25rem;
    border-radius: 20px;
  }
  .vyas-transporte-sec-title {
    font-size: 1.75rem;
  }
}

/* =========================================================================
   VYAS ENERGIA — ESTILOS ESPECÍFICOS E SEÇÕES
   ========================================================================= */

/* 1. Hero Vyas Energia */
.vyas-energia-hero-section {
  background-color: #ffffff;
}

.vyas-energia-hero {
  background-color: #c4d200;
  border-radius: 40px;
  padding: 3.5rem 3rem 2.5rem 3rem;
  position: relative;
  overflow: visible;
  margin-bottom: 2.75rem;
}

.vyas-energia-hero-title {
  color: #004d77;
  font-size: clamp(2.3rem, 3.5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  line-height: 1.15;
  text-decoration: none !important;
}

.vyas-energia-hero-desc {
  color: #003e61;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: 1.35rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none !important;
}

.vyas-energia-hero-img-wrap {
  position: relative;
  border-radius: 32px;
  display: inline-block;
  max-width: 616px;
  width: 100%;
  margin-bottom: -4rem;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.18));
}

.vyas-energia-hero-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 32px;
}

/* 2. Seção de Diferenciais (Grid 2x2 com cards teal) */
.vyas-energia-diff-section {
  background-color: #ffffff;
}

/* 3. Seção Mapa Brasil de Atuação */
.vyas-energia-map-section {
  background-color: #f8f8f8;
  padding: 5rem 0;
}

.vyas-energia-map-img-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}

.vyas-energia-map-img {
  max-width: 100%;
  max-height: 520px;
  width: auto;
  height: auto;
  filter: drop-shadow(0 12px 28px rgba(0, 60, 100, 0.08));
  transition: transform 0.3s ease;
}

.vyas-energia-map-img:hover {
  transform: scale(1.02);
}

.vyas-energia-map-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.vyas-energia-map-highlight {
  color: #006398;
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin-bottom: 2.75rem;
  text-decoration: none !important;
  display: block;
}

.vyas-energia-map-highlight:last-child {
  margin-bottom: 0;
}

/* 4. Seção Soluções Energéticas */
.vyas-energia-solucoes-section {
  padding: 5.5rem 0;
  background-color: #ffffff;
}

.vyas-energia-heading-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #006398;
}

.vyas-energia-heading-top {
  font-size: clamp(1.8rem, 2.7vw, 2.35rem);
  font-weight: 400;
  color: #006398;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.vyas-energia-heading-top strong {
  font-weight: 800;
}

.vyas-energia-heading-divider {
  width: 100%;
  height: 2.5px;
  background-color: #006398;
  margin: 0.35rem 0 0.45rem 0;
}

.vyas-energia-heading-bottom {
  font-size: clamp(1.8rem, 2.7vw, 2.35rem);
  font-weight: 400;
  color: #006398;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.vyas-energia-heading-bottom strong {
  font-weight: 800;
}

.vyas-energia-solucao-card {
  background-color: #ffffff;
  border: 2px solid #64bf80;
  border-radius: 28px;
  padding: 1.35rem 1.35rem 2rem 1.35rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 20px rgba(0, 60, 100, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.vyas-energia-solucao-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(0, 60, 100, 0.12);
  border-color: #35a2a4;
}

.vyas-energia-solucao-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 1.5rem;
}

.vyas-energia-solucao-title {
  color: #006398;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  padding-bottom: 0.35rem;
  display: inline-block;
  align-self: flex-start;
}

.vyas-energia-solucao-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex-grow: 1;
}

.vyas-energia-item {
  margin-bottom: 0;
}

.vyas-energia-item-title {
  color: #004d77;
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 0.2rem;
  line-height: 1.3;
}

.vyas-energia-item-desc {
  color: #006398;
  font-size: 0.92rem;
  font-weight: 500;
  margin-bottom: 0;
  line-height: 1.4;
}

/* Responsividade Vyas Energia */
@media (max-width: 991.98px) {
  .vyas-energia-hero {
    padding: 2.5rem 1.75rem 2.25rem 1.75rem;
    border-radius: 28px;
    margin-bottom: 2rem;
  }
  .vyas-energia-hero-img-wrap {
    margin-bottom: 0;
    margin-top: 1.5rem;
    max-width: 100%;
  }
  .vyas-energia-map-section {
    padding: 3.5rem 0;
  }
  .vyas-energia-map-highlight {
    margin-bottom: 1.75rem;
    text-align: center;
  }
  .vyas-energia-solucoes-section {
    padding: 3.5rem 0;
  }
}

@media (max-width: 575.98px) {
  .vyas-energia-hero {
    padding: 2rem 1.25rem;
    border-radius: 20px;
  }
  .vyas-energia-hero-title {
    font-size: 1.95rem;
  }
  .vyas-energia-solucao-card {
    border-radius: 20px;
    padding: 1.15rem 1.15rem 1.75rem 1.15rem;
  }
}


/* ==========================================================================
   PÁGINA RESPONSABILIDADE SOCIAL / SUSTENTABILIDADE
   ========================================================================== */

.vyas-sustainability-page {
  background-color: #ffffff;
}

/* HERO */
.vyas-sustainability-hero {
  padding: 1.5rem 0 2.5rem;
}

.vyas-sustainability-hero .vyas-social-banner {
  min-height: 430px;
  padding: 4.5rem 3.5rem;
  background-position: center center;
  border-radius: 36px;
  display: flex;
  align-items: center;
}

.vyas-sustainability-hero .vyas-social-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.60) 36%,
      rgba(0, 0, 0, 0.20) 62%,
      rgba(0, 0, 0, 0) 100%
    );
}

.vyas-sustainability-content {
  position: relative;
  z-index: 2;
  max-width: 650px;
}

.vyas-sustainability-kicker {
  display: inline-block;
  color: #CCFF33;
  font-size: clamp(1.65rem, 3vw, 2.55rem);
  font-weight: 800;
  line-height: 1.02;
  text-transform: uppercase;
  margin-bottom: 1rem;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
}

.vyas-sustainability-title {
  color: #ffffff;
  font-size: clamp(1.5rem, 2.5vw, 2.15rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.65rem;
}

.vyas-sustainability-text {
  max-width: 620px;
  color: #ffffff;
  font-size: clamp(0.9rem, 1.15vw, 1.05rem);
  line-height: 1.4;
  margin: 0;
  text-align: left;
}

/* PROJETOS */
.vyas-projects-section {
  padding: 2rem 0 5rem;
}

.vyas-projects-heading {
  text-align: center;
  margin-bottom: 2rem;
}

.vyas-projects-title {
  color: #006398;
  font-size: clamp(2rem, 3.3vw, 3rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
}

.vyas-projects-title strong {
  display: block;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.vyas-projects-grid {
  --bs-gutter-x: 1.35rem;
  --bs-gutter-y: 1.35rem;
}

/* Card PDF */
.vyas-project-pdf-card {
  position: relative;
  min-height: 255px;
  height: 100%;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 1.1rem 1.15rem;

  border-radius: 18px;
  border: 2px solid #C4D400;

  background:
    linear-gradient(
      115deg,
      #062A35 0%,
      #063C52 42%,
      #087DA0 72%,
      #2294A8 100%
    );

  box-shadow: 0 8px 22px rgba(0, 75, 100, 0.10);

  color: #ffffff;
  text-decoration: none !important;

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

.vyas-project-pdf-card:hover {
  transform: translateY(-5px);
  border-color: #CCFF33;
  box-shadow: 0 15px 30px rgba(0, 75, 100, 0.18);
}

/* Ícone PDF usado como elemento de fundo */
.vyas-project-pdf-icon {
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  font-size: 8.5rem;
  line-height: 1;

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

  pointer-events: none;
  z-index: 0;

  transition:
    transform 0.35s ease,
    color 0.35s ease;
}

.vyas-project-pdf-card:hover .vyas-project-pdf-icon {
  transform: translate(-50%, -50%) scale(1.08);
  color: rgba(204, 255, 51, 0.14);
}

.vyas-project-pdf-content,
.vyas-project-pdf-footer {
  position: relative;
  z-index: 1;
}

.vyas-project-pdf-title {
  color: #CCFF33;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.vyas-project-pdf-year {
  display: block;
  margin-top: 0.15rem;

  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;

  text-decoration: underline;
  text-underline-offset: 3px;
}

.vyas-project-pdf-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  width: fit-content;

  padding: 0.42rem 0.9rem;

  border-radius: 50rem;

  background-color: #CCFF33;
  color: #0E2638 !important;

  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;


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

.vyas-project-pdf-card:hover .vyas-project-pdf-action {
  transform: translateX(3px);
  background-color: #C4D400;
}

/* Responsividade */
@media (max-width: 991.98px) {
  .vyas-sustainability-hero {
    padding-top: 1.25rem;
  }

  .vyas-sustainability-hero .vyas-social-banner {
    min-height: 390px;
    padding: 3.5rem 2.5rem;
    border-radius: 30px;
  }

  .vyas-project-pdf-card {
    min-height: 235px;
  }
}

@media (max-width: 767.98px) {
  .vyas-sustainability-hero .vyas-social-banner {
    min-height: 370px;
    padding: 2.5rem 1.5rem;
    border-radius: 24px;
  }

  .vyas-sustainability-hero .vyas-social-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.48) 70%,
        rgba(0, 0, 0, 0.15) 100%
      );
  }

  .vyas-projects-section {
    padding-bottom: 3.5rem;
  }

  .vyas-projects-title {
    font-size: 2rem;
  }

  .vyas-project-pdf-card {
    min-height: 220px;
  }
}

@media (max-width: 575.98px) {
  .vyas-sustainability-hero {
    padding-top: 0.75rem;
  }

  .vyas-sustainability-hero .vyas-social-banner {
    min-height: 390px;
    padding: 2rem 1.25rem;
    border-radius: 20px;
  }

  .vyas-sustainability-kicker {
    font-size: 1.65rem;
  }

  .vyas-sustainability-title {
    font-size: 1.35rem;
  }

  .vyas-sustainability-text {
    font-size: 0.88rem;
  }

  .vyas-projects-heading {
    margin-bottom: 1.5rem;
  }

  .vyas-project-pdf-card {
    min-height: 210px;
  }

  .vyas-project-pdf-icon {
    font-size: 7rem;
  }
}

/* ==========================================================================
   PÁGINA VEM CRESCER COM VYAS / TRABALHE CONOSCO
   ========================================================================== */

.vyas-careers-page {
  background-color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.vyas-careers-hero {
  position: relative;
  overflow: visible;
}

.vyas-careers-hero-wrapper {
  position: relative;
  overflow: visible;
}

.vyas-careers-hero-card {
  position: relative;
  min-height: 500px;
  border-radius: 36px;
  overflow: hidden;

  background-image: url('../img/trabalhe-conosco-capa.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;

  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.12);
}

.vyas-careers-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.62) 28%,
      rgba(0, 0, 0, 0.22) 58%,
      rgba(0, 0, 0, 0.05) 100%
    );
}

.vyas-careers-hero-content {
  position: relative;
  z-index: 2;

  padding: clamp(2rem, 4.2vw, 4.5rem);
  max-width: 620px;
}

.vyas-careers-hero-title {
  margin: 0 0 1.25rem;

  color: #CCFF33;
  font-family: var(--vyas-font-main);
  font-size: clamp(2.25rem, 4vw, 3.55rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.vyas-careers-hero-title span {
  display: block;
  width: fit-content;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 8px;
}

.vyas-careers-hero-subtitle {
  margin: 0;

  color: #FFFFFF;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  font-weight: 400;
  line-height: 1.4;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Símbolo V atravessando a borda inferior do hero */
.vyas-careers-hero-symbol {
  position: absolute;

  right: 7%;
  bottom: -122px;

  width: clamp(285px, 31vw, 440px);
  height: auto;

  z-index: 5;
  pointer-events: none;

  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.18));

  animation: vyasCareersSymbolEntrance 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
}

@keyframes vyasCareersSymbolEntrance {
  0% {
    opacity: 0;
    transform: translateY(90px) scale(0.94);
  }

  70% {
    opacity: 1;
    transform: translateY(-8px) scale(1.01);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --------------------------------------------------------------------------
   INTRO / CTA
   -------------------------------------------------------------------------- */

.vyas-careers-intro {
  position: relative;
  min-height: 500px;
  padding-top: 5rem !important;
  padding-bottom: 7rem !important;
}

.vyas-careers-intro-content {
  max-width: 590px;
  position: relative;
  z-index: 2;
}

.vyas-careers-intro-content p {
  margin: 0 0 1.4rem;

  color: var(--bs-primary);
  font-family: var(--vyas-font-main);
  font-size: clamp(0.98rem, 1.2vw, 1.12rem);
  font-weight: 400;
  line-height: 1.45;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px;
}

.vyas-careers-cta {
  margin-top: 0.35rem;
}

/* Mantém o espaço visual da referência para o símbolo que invade a área branca */
.vyas-careers-intro::after {
  content: "";
  display: block;
  height: 1px;
}

/* --------------------------------------------------------------------------
   RESPONSIVIDADE
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  .vyas-careers-hero-card {
    min-height: 460px;
  }

  .vyas-careers-hero-symbol {
    right: 5%;
    bottom: -105px;
    width: clamp(270px, 31vw, 390px);
  }

  .vyas-careers-intro {
    min-height: 460px;
  }
}

@media (max-width: 991.98px) {
  .vyas-careers-hero {
    padding-top: 1.25rem !important;
  }

  .vyas-careers-hero-card {
    min-height: 420px;
    border-radius: 30px;
    background-position: center center;
  }

  .vyas-careers-hero-content {
    padding: 3rem 2.5rem;
  }

  .vyas-careers-hero-symbol {
    right: 3%;
    bottom: -90px;
    width: 310px;
  }

  .vyas-careers-intro {
    min-height: 430px;
    padding-top: 4.5rem !important;
    padding-bottom: 5rem !important;
  }

  .vyas-careers-intro-content {
    max-width: 520px;
  }
}

@media (max-width: 767.98px) {
  .vyas-careers-hero-card {
    min-height: 390px;
    border-radius: 24px;
    background-position: 58% center;
  }

  .vyas-careers-hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.80) 0%,
        rgba(0, 0, 0, 0.60) 55%,
        rgba(0, 0, 0, 0.18) 100%
      );
  }

  .vyas-careers-hero-content {
    padding: 2.5rem 1.5rem;
  }

  .vyas-careers-hero-title {
    font-size: 2.25rem;
  }

  .vyas-careers-hero-subtitle {
    font-size: 0.96rem;
  }

  .vyas-careers-hero-symbol {
    width: 245px;
    right: -2%;
    bottom: -72px;
  }

  .vyas-careers-intro {
    min-height: 410px;
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  .vyas-careers-intro-content {
    max-width: 100%;
  }

  .vyas-careers-intro-content p {
    font-size: 0.94rem;
  }
}

@media (max-width: 575.98px) {
  .vyas-careers-hero {
    padding-top: 0.75rem !important;
  }

  .vyas-careers-hero-card {
    min-height: 370px;
    border-radius: 20px;
    background-position: 62% center;
  }

  .vyas-careers-hero-content {
    padding: 2rem 1.25rem;
  }

  .vyas-careers-hero-title {
    font-size: 1.95rem;
  }

  .vyas-careers-hero-title span {
    text-decoration-thickness: 2px !important;
    text-underline-offset: 5px;
  }

  .vyas-careers-hero-subtitle {
    font-size: 0.88rem;
    line-height: 1.35;
  }

  .vyas-careers-hero-symbol {
    width: 190px;
    right: -4%;
    bottom: -55px;
  }

  .vyas-careers-intro {
    min-height: 390px;
    padding-top: 3.25rem !important;
    padding-bottom: 3.5rem !important;
  }

  .vyas-careers-intro-content p {
    font-size: 0.88rem;
    line-height: 1.4;
  }

  .vyas-careers-cta {
    font-size: 0.88rem;
    padding: 0.6rem 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vyas-careers-hero-symbol {
    animation: none !important;
  }
}

/* ==========================================================================
   PÁGINA OUVIDORIA
   ========================================================================== */

.vyas-ouvidoria-page {
  background: #ffffff;
}

/* --------------------------------------------------------------------------
   HERO / FORMULÁRIO
   -------------------------------------------------------------------------- */

.vyas-ouvidoria-section {
  background: #C4D400;
  min-height: 798px;
  display: flex;
  align-items: center;
  padding: 4.75rem 0 5.5rem;
}

.vyas-ouvidoria-section > .container {
  width: 100%;
}

.vyas-ouvidoria-content {
  padding-left: clamp(0rem, 1.5vw, 1.5rem);
}

/* Imagem de destaque da Ouvidoria: largura pelo w-75, altura proporcional (sem deformar) */
.vyas-ouvidoria-content .wp-post-image {
  height: auto;
}

.vyas-ouvidoria-title {
  margin: 0 0 1rem;

  color: #145079;
  font-family: var(--vyas-font-main);
  font-size: clamp(2rem, 3.05vw, 3.15rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.vyas-ouvidoria-title span {
  display: block;
  width: fit-content;

  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

.vyas-ouvidoria-subtitle {
  margin: 0;

  color: #111111;
  font-family: var(--vyas-font-main);
  font-size: clamp(1rem, 1.28vw, 1.22rem);
  font-weight: 400;
  line-height: 1.28;

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.vyas-ouvidoria-illustration {
  width: 360px;
  height: 245px;

  margin: 2rem 0 0 -0.5rem;

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

  position: relative;
}

.vyas-ouvidoria-illustration::before {
  content: "";
  position: absolute;
  width: 245px;
  height: 150px;

  background: #2294A8;
  border-radius: 55% 45% 50% 40%;

  transform: rotate(-7deg);
  opacity: 0.95;
}

.vyas-ouvidoria-illustration i {
  position: relative;
  z-index: 1;

  color: #145079;
  font-size: 13rem;
  line-height: 1;

  transform: rotate(-4deg);
  filter: drop-shadow(7px 8px 0 #2294A8);
}

/* --------------------------------------------------------------------------
   FORM CARD
   -------------------------------------------------------------------------- */

.vyas-ouvidoria-form-card {
  width: min(100%);

  margin-left: auto;

  padding: 2.85rem 2rem 2.65rem;

  background: #ffffff;
  border-radius: 20px;

  box-shadow: 0 8px 22px rgba(20, 80, 121, 0.05);
}

.vyas-ouvidoria-form {
  width: 100%;
}

.vyas-ouvidoria-field {
  margin-bottom: 1.45rem;
}

.vyas-ouvidoria-field label {
  display: block;

  margin-bottom: 0.35rem;

  color: #145079;
  font-family: var(--vyas-font-main);
  font-size: 0.88rem;
  font-weight: 500;

  text-decoration: underline;
  text-underline-offset: 2px;
}

.vyas-ouvidoria-field input,
.vyas-ouvidoria-field select {
  width: 100%;
  height: 2.25rem;

  padding: 0.15rem 0.65rem;

  border: 0;
  border-bottom: 2px solid #D0D0D0;
  border-radius: 0;

  background: transparent;

  color: #666666;
  font-family: var(--vyas-font-main);
  font-size: 0.86rem;

  outline: none;

  transition: border-color 0.2s ease;
}

.vyas-ouvidoria-field input::placeholder {
  color: #9D9D9D;
  opacity: 1;
}

.vyas-ouvidoria-field input:focus,
.vyas-ouvidoria-field select:focus {
  border-bottom-color: #2294A8;
  box-shadow: none;
}

.vyas-ouvidoria-field:nth-child(1) input {
  border-bottom-color: #2294A8;
}

.vyas-ouvidoria-field select {
  appearance: none;
  -webkit-appearance: none;

  padding-right: 2rem;

  background-image:
    linear-gradient(45deg, transparent 50%, #145079 50%),
    linear-gradient(135deg, #145079 50%, transparent 50%);
  background-position:
    calc(100% - 13px) 50%,
    calc(100% - 8px) 50%;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
}

.vyas-ouvidoria-message {
  margin-bottom: 1.35rem;
}

.vyas-ouvidoria-field textarea {
  display: block;

  width: 100%;
  min-height: 100px;

  padding: 0.65rem;

  resize: vertical;

  border: 1.5px solid #C8C8C8;
  border-radius: 9px;

  background: #ffffff;

  color: #333333;
  font-family: var(--vyas-font-main);
  font-size: 0.9rem;

  outline: none;

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

.vyas-ouvidoria-field textarea:focus {
  border-color: #2294A8;
  box-shadow: 0 0 0 0.15rem rgba(34, 148, 168, 0.08);
}

.vyas-ouvidoria-submit {
  width: 100%;

  min-height: 48px;

  border: 0;
  border-radius: 999px;

  background: #C4D400;
  color: #ffffff;

  font-family: var(--vyas-font-main);
  font-size: 0.9rem;
  font-weight: 700;

  cursor: pointer;

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

.vyas-ouvidoria-submit:hover {
  background: #B9C900;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   FOOTER ESPECÍFICO DA REFERÊNCIA
   -------------------------------------------------------------------------- */

.vyas-ouvidoria-footer {
  background: #F1F1F1;
  padding: 5.6rem 0 2rem;

  color: #2E2E2E;
}

.vyas-ouvidoria-footer h2 {
  margin: 0 0 2rem;

  color: #2E2E2E;

  font-family: var(--vyas-font-main);
  font-size: 0.78rem;
  font-weight: 800;

  letter-spacing: 0.14em;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.vyas-ouvidoria-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vyas-ouvidoria-footer li {
  margin-bottom: 1rem;
}

.vyas-ouvidoria-footer a {
  color: #2E2E2E;
  font-size: 0.88rem;
  line-height: 1.25;

  text-decoration: underline;
  text-underline-offset: 2px;
}

.vyas-ouvidoria-footer-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  padding-top: 2.1rem;
}

.vyas-ouvidoria-footer-links a {
  margin: 0;
}

.vyas-ouvidoria-contact {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.vyas-ouvidoria-contact a,
.vyas-ouvidoria-contact address {
  margin: 0;

  font-size: 0.84rem;
  line-height: 1.2;
}

.vyas-ouvidoria-contact i {
  color: #37C95A;
  margin-right: 0.35rem;
}

.vyas-ouvidoria-footer-bottom {
  position: relative;

  min-height: 75px;

  margin-top: 4rem;
  padding-top: 2rem;

  border-top: 0;
}

.vyas-ouvidoria-footer-bottom p {
  margin: 0;

  text-align: center;

  color: #B1B1B1;
  font-size: 0.72rem;
}

.vyas-ouvidoria-badge {
  position: absolute;
  right: 0;
  top: 0;

  display: flex;
  align-items: center;
  gap: 0.45rem;

  min-width: 210px;
  padding: 0.2rem 0.45rem 0.2rem 0.2rem;

  border: 1px solid #9CE156;
  border-radius: 999px;

  color: #006398 !important;
  text-decoration: none !important;
  font-size: 0.74rem !important;
  font-weight: 700;
}

.vyas-ouvidoria-badge-icon {
  width: 34px;
  height: 34px;

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

  border-radius: 50%;

  background: linear-gradient(135deg, #35A2A4, #9CE156);
  color: #ffffff;
}

.vyas-ouvidoria-badge span:not(.vyas-ouvidoria-badge-icon) {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.vyas-ouvidoria-badge small {
  color: #006398;
  font-size: 0.54rem;
  font-weight: 800;
}

.vyas-ouvidoria-badge > i {
  margin-left: auto;
  color: #006398;
}

/* --------------------------------------------------------------------------
   RESPONSIVO
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  .vyas-ouvidoria-section {
    min-height: 720px;
  }

  .vyas-ouvidoria-form-card {
    width: min(100%, 430px);
  }

  .vyas-ouvidoria-illustration {
    width: 320px;
  }
}

@media (max-width: 991.98px) {
  .vyas-ouvidoria-section {
    min-height: auto;
    padding: 4rem 0 4.5rem;
  }

  .vyas-ouvidoria-content {
    max-width: 560px;
    margin: 0 auto;
  }

  .vyas-ouvidoria-form-card {
    margin: 0 auto;
  }

  .vyas-ouvidoria-illustration {
    margin-left: 0;
  }

  .vyas-ouvidoria-footer {
    padding-top: 4rem;
  }

  .vyas-ouvidoria-footer-bottom {
    margin-top: 3rem;
  }
}

@media (max-width: 767.98px) {
  .vyas-ouvidoria-section {
    padding: 3rem 0 3.5rem;
  }

  .vyas-ouvidoria-title {
    font-size: 2.1rem;
  }

  .vyas-ouvidoria-subtitle {
    font-size: 1rem;
  }

  .vyas-ouvidoria-illustration {
    width: 280px;
    height: 200px;
    margin: 1.5rem auto 0;
  }

  .vyas-ouvidoria-illustration i {
    font-size: 10rem;
  }

  .vyas-ouvidoria-illustration::before {
    width: 190px;
    height: 115px;
  }

  .vyas-ouvidoria-form-card {
    padding: 2rem 1.35rem 2rem;
    border-radius: 18px;
  }

  .vyas-ouvidoria-footer {
    padding: 3.5rem 0 1.5rem;
  }

  .vyas-ouvidoria-footer-links {
    padding-top: 0;
  }

  .vyas-ouvidoria-badge {
    position: static;
    margin: 1.5rem auto 0;
    width: fit-content;
  }
}

@media (max-width: 575.98px) {
  .vyas-ouvidoria-title {
    font-size: 1.85rem;
  }

  .vyas-ouvidoria-title span {
    text-underline-offset: 5px;
  }

  .vyas-ouvidoria-subtitle {
    font-size: 0.92rem;
  }

  .vyas-ouvidoria-illustration {
    width: 245px;
    height: 175px;
  }

  .vyas-ouvidoria-illustration i {
    font-size: 8.2rem;
  }

  .vyas-ouvidoria-form-card {
    padding: 1.75rem 1.1rem;
  }

  .vyas-ouvidoria-field {
    margin-bottom: 1.2rem;
  }

  .vyas-ouvidoria-footer h2 {
    margin-bottom: 1.25rem;
  }
}

/* ==========================================================================
   PÁGINA CONTATO
   Referência: layout desktop "8 CONTATO"
   ========================================================================== */

.vyas-contato-page {
  background: #ffffff;
}

/* --------------------------------------------------------------------------
   HERO / ÁREA PRINCIPAL
   -------------------------------------------------------------------------- */

.vyas-contato-section {
  position: relative;
  min-height: 860px;
  display: flex;
  align-items: center;
  padding: 4.5rem 0 5.5rem;
  background-color: #006398;
  overflow: hidden;
}

.vyas-contato-eyebrow {
  display: inline-block;
  margin-bottom: 0.85rem;
  color: #C4D200;
  font-family: var(--vyas-font-main);
  font-size: clamp(1.8rem, 2.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
  letter-spacing: -0.01em;
}

.vyas-contato-title {
  margin: 0 0 2rem 0;
  color: #ffffff;
  font-family: var(--vyas-font-main);
  font-size: clamp(2rem, 3.1vw, 3rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.vyas-contato-title strong {
  font-weight: 800;
}

/* Desktop: o título fica sempre em 2 linhas (uma por <span>), com a fonte
   ajustada à largura da coluna para a 2ª linha não quebrar. */
@media (min-width: 992px) {
  .vyas-contato-title {
    font-size: min(2.3rem, 2.75vw);
  }

  .vyas-contato-title span {
    display: block;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   FORMULÁRIO
   -------------------------------------------------------------------------- */

.vyas-contato-form-card {
  width: 100%;
  max-width: 540px;
  padding: 2.75rem 2.25rem 2.25rem 2.25rem;
  background-color: #145079;
  border-radius: 28px;
  box-shadow: 0 16px 40px rgba(0, 40, 70, 0.25);
}

.vyas-contato-form {
  width: 100%;
}

.vyas-contato-field {
  margin-bottom: 1.35rem;
}

.vyas-contato-field label {
  display: block;
  margin-bottom: 0.25rem;
  color: #ffffff;
  font-family: var(--vyas-font-main);
  font-size: 0.88rem;
  font-weight: 500;
}

.vyas-contato-field input,
.vyas-contato-field select {
  width: 100%;
  height: 2.4rem;
  padding: 0.15rem 0.25rem;
  border: 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font-family: var(--vyas-font-main);
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.vyas-contato-field input::placeholder {
  color: rgba(255, 255, 255, 0.65);
  opacity: 1;
}

.vyas-contato-field input:focus,
.vyas-contato-field select:focus {
  border-bottom-color: #C4D200;
  box-shadow: none;
}

.vyas-contato-message {
  margin-bottom: 1.75rem;
}

.vyas-contato-field textarea {
  display: block;
  width: 100%;
  min-height: 125px;
  padding: 0.75rem;
  resize: vertical;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  background: transparent;
  color: #ffffff;
  font-family: var(--vyas-font-main);
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.vyas-contato-field textarea:focus {
  border-color: #C4D200;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}

.vyas-contato-submit {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  background-color: #C4D200;
  color: #111111;
  font-family: var(--vyas-font-main);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.vyas-contato-submit:hover {
  background-color: #d4e400;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(196, 210, 0, 0.35);
}

/* --------------------------------------------------------------------------
   ILUSTRAÇÃO
   -------------------------------------------------------------------------- */

.vyas-contato-illustration {
  position: relative;

  width: 100%;
  min-height: 390px;

  margin-top: 5.8rem;
}

.vyas-contato-blob {
  position: absolute;

  top: 10px;
  left: -30px;

  width: 300px;
  height: 275px;

  border-radius: 48% 52% 46% 54%;

  background: rgba(86, 158, 197, 0.7);

  transform: rotate(15deg);
}

.vyas-contato-illustration i {
  position: absolute;

  top: 88px;
  left: 32px;

  z-index: 2;

  color: #C4D400;

  font-size: 10rem;
  line-height: 1;

  transform: rotate(11deg);

  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.02));
}

.vyas-contato-bubble {
  position: absolute;

  top: 75px;
  left: 62px;

  z-index: 4;

  width: 82px;
  height: 67px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: #145079;

  border-radius: 50%;
}

.vyas-contato-bubble::after {
  content: "";

  position: absolute;

  right: 5px;
  bottom: -10px;

  width: 25px;
  height: 25px;

  background: #145079;

  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.vyas-contato-bubble span {
  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: #C4D400;
}

/* --------------------------------------------------------------------------
   RESPONSIVO
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  .vyas-contato-section {
    min-height: 850px;
  }

  .vyas-contato-form-card {
    max-width: 405px;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
  }

  .vyas-contato-illustration {
    transform: scale(0.86);
    transform-origin: left top;
  }
}

@media (max-width: 991.98px) {
  .vyas-contato-section {
    min-height: auto;
    padding: 4rem 0 5rem;
  }

  .vyas-contato-content {
    max-width: 650px;
    margin: 0 auto;
  }

  .vyas-contato-form-card {
    max-width: 500px;
    margin: 0 auto;
  }

  .vyas-contato-illustration {
    width: 360px;
    min-height: 310px;
    margin: 1rem auto 0;
    transform: none;
  }

  .vyas-contato-blob {
    left: 20px;
  }

  .vyas-contato-illustration i {
    left: 85px;
  }

  .vyas-contato-bubble {
    left: 115px;
  }
}

@media (max-width: 767.98px) {
  .vyas-contato-section {
    padding: 3rem 0 4rem;
  }

  .vyas-contato-eyebrow {
    font-size: 1.8rem;
    text-underline-offset: 5px;
  }

  .vyas-contato-title {
    font-size: 2rem;
  }

  .vyas-contato-title span {
    text-underline-offset: 5px;
  }

  .vyas-contato-form-card {
    padding: 2.4rem 1.35rem 1.7rem;
    border-radius: 15px;
  }

  .vyas-contato-illustration {
    width: 300px;
    min-height: 260px;
  }

  .vyas-contato-blob {
    left: 0;
    width: 260px;
    height: 235px;
  }

  .vyas-contato-illustration i {
    top: 76px;
    left: 55px;
    font-size: 8rem;
  }

  .vyas-contato-bubble {
    top: 65px;
    left: 88px;
    width: 70px;
    height: 58px;
  }
}

@media (max-width: 575.98px) {
  .vyas-contato-section {
    padding: 2.5rem 0 3.5rem;
  }

  .vyas-contato-eyebrow {
    font-size: 1.55rem;
  }

  .vyas-contato-title {
    font-size: 1.7rem;
  }

  .vyas-contato-form-card {
    padding: 2rem 1.1rem 1.5rem;
  }

  .vyas-contato-field {
    margin-bottom: 1rem;
  }

  .vyas-contato-illustration {
    width: 260px;
    min-height: 225px;
  }

  .vyas-contato-blob {
    width: 225px;
    height: 205px;
  }

  .vyas-contato-illustration i {
    top: 65px;
    left: 45px;
    font-size: 6.8rem;
  }

  .vyas-contato-bubble {
    top: 55px;
    left: 72px;
    width: 60px;
    height: 50px;
  }

  .vyas-contato-bubble span {
    width: 8px;
    height: 8px;
  }
}

/* Item ativo do dropdown do menu: texto branco sobre o azul.
   O fundo precisa ficar explícito aqui também, senão o hover genérico do
   .dropdown-item (fundo claro) sobrescreve o fundo e o texto branco some. */
.vyas-navbar .dropdown-menu .dropdown-item.active,
.vyas-navbar .dropdown-menu .dropdown-item.active:hover,
.vyas-navbar .dropdown-menu .dropdown-item.active:focus,
.vyas-navbar .dropdown-menu .dropdown-item:active {
  background-color: var(--bs-primary);
  color: #fff;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   BLOG — Listagem, Categoria e Post Interno
   -------------------------------------------------------------------------- */
.vyas-blog-lead {
  color: #64748b;
  font-size: 1.05rem;
  max-width: 640px;
  margin: 0.75rem auto 0;
}

/* Fallback do card quando o post não tem imagem destacada */
.vyas-business-card-noimg {
  background-color: var(--bs-primary);
}

.vyas-post-meta {
  color: #004d77;
  opacity: 0.75;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Corpo do texto do post (the_content) */
.vyas-post-content {
  color: #33475b;
  font-size: 1.05rem;
  line-height: 1.75;
}

.vyas-post-content p {
  margin-bottom: 1.25rem;
}

.vyas-post-content h2,
.vyas-post-content h3,
.vyas-post-content h4 {
  color: var(--bs-primary);
  font-family: var(--vyas-font-main);
  font-weight: 800;
  margin: 2rem 0 1rem;
}

.vyas-post-content h2 { font-size: 1.6rem; }
.vyas-post-content h3 { font-size: 1.3rem; }

.vyas-post-content ul,
.vyas-post-content ol {
  margin-bottom: 1.25rem;
  padding-left: 1.25rem;
}

.vyas-post-content li {
  margin-bottom: 0.5rem;
}

.vyas-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  margin: 1rem 0;
}

.vyas-post-content a {
  color: var(--bs-primary);
  font-weight: 600;
}

.vyas-post-content blockquote {
  border-left: 4px solid var(--vyas-lime-solid, #b5d535);
  padding: 0.5rem 0 0.5rem 1.25rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: #004d77;
}

/* Paginação */
.vyas-pagination-nav {
  display: flex;
  justify-content: center;
}

.vyas-pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.vyas-pagination li a,
.vyas-pagination li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.5rem;
  border-radius: 10px;
  color: var(--bs-primary);
  font-weight: 700;
  text-decoration: none !important;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.vyas-pagination li a:hover {
  background-color: var(--bs-primary);
  color: #ffffff !important;
  border-color: var(--bs-primary);
}

.vyas-pagination li span.current {
  background-color: var(--bs-primary);
  color: #ffffff;
  border-color: var(--bs-primary);
}

/* --------------------------------------------------------------------------
   VYAS TRANSPORTE (MOBILE) — Alterna "pequena" / "background" entre as
   4 seções. Cobertura e Segurança têm 4 cards empilhados no mobile, o
   que deixa a seção muito alta e estreita: a foto de fundo (pensada pra
   telas largas) fica super ampliada e corta de forma estranha, sobrando
   só uma tira no topo. Em vez de forçar a foto cheia, essas duas viram
   uma faixa de foto compacta no topo + cards em fundo claro. Soluções e
   Capacidade têm menos conteúdo e continuam com a foto cheia ao fundo.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .vyas-transporte-sec-cobertura,
  .vyas-transporte-sec-seguranca {
    background: none;
    background-color: #f4f5f7;
    display: block;
    padding: 0 0 2rem;
    overflow: hidden;
  }

  .vyas-transporte-sec-cobertura::before,
  .vyas-transporte-sec-seguranca::before {
    content: '';
    display: block;
    height: 190px;
    background-size: cover;
    background-position: center;
    margin-bottom: 1.5rem;
  }

  .vyas-transporte-sec-cobertura::before {
    background-image: var(--vyas-sec-bg, url('../img/transporte-bg-driver.png'));
  }

  .vyas-transporte-sec-seguranca::before {
    background-image: var(--vyas-sec-bg, url('../img/transporte-bg-seguranca.png'));
  }

  .vyas-transporte-sec-cobertura > .row,
  .vyas-transporte-sec-seguranca > .row {
    padding: 0 1.5rem;
  }

  .vyas-transporte-sec-cobertura .vyas-transporte-sec-title,
  .vyas-transporte-sec-seguranca .vyas-transporte-sec-title {
    color: #004d77;
    padding: 0 1.5rem;
  }

  .vyas-transporte-sec-cobertura .vyas-transporte-sec-desc,
  .vyas-transporte-sec-seguranca .vyas-transporte-sec-desc {
    color: #33475b;
    padding: 0 1.5rem;
  }

  /* Soluções e Capacidade seguem com a foto cheia; só reancoro o
     enquadramento da Capacidade (tem 4 cards, fica bem alta) pro
     corte não ficar tão fechado quanto o de Cobertura era antes. */
  .vyas-transporte-sec-capacidade {
    background-position: center top;
  }
}

/* ==========================================================================
   EFEITOS DE ENTRADA (HOME)
   - Hero: animações CSS no carregamento da página
   - Demais seções: revelação ao rolar (data-reveal + classe .is-revealed)
   ========================================================================== */

/* ---- Hero: foto com fade in, textos entrando da esquerda para a direita ---- */
@keyframes vyasHeroPhotoIn {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes vyasSlideFromLeft {
  from { opacity: 0; transform: translateX(-70px); }
  to   { opacity: 1; transform: translateX(0); }
}

.vyas-hero-card {
  animation: vyasHeroPhotoIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.vyas-hero-title-line,
.vyas-hero-subtitle {
  animation: vyasSlideFromLeft 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.vyas-hero-title-line:nth-child(1) { animation-delay: 0.45s; }
.vyas-hero-title-line:nth-child(2) { animation-delay: 0.65s; }
.vyas-hero-subtitle { animation-delay: 0.9s; }

/* ---- Revelação ao rolar ----
   Usa animação (keyframes) e não transição: assim roda sempre, mesmo para
   elementos que já estão visíveis no carregamento (hero das páginas). */
.js-reveal [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}

.js-reveal [data-reveal="left"]  { --reveal-from: translateX(calc(var(--reveal-distance, 70px) * -1)); }
.js-reveal [data-reveal="right"] { --reveal-from: translateX(var(--reveal-distance, 70px)); }
.js-reveal [data-reveal="up"]    { --reveal-from: translateY(var(--reveal-distance, 60px)); }
.js-reveal [data-reveal="zoom"]  { --reveal-from: translateY(40px) scale(0.94); }
.js-reveal [data-reveal="fade"]  { --reveal-from: none; }

@keyframes vyasRevealIn {
  from { opacity: 0; transform: var(--reveal-from, none); }
  to   { opacity: 1; transform: none; }
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  animation: vyasRevealIn 1s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s) backwards;
}

/* ---- Caixa azul (Propósito & Atuação): sobe com zoom, brilho e faixa de luz ---- */
.js-reveal .vyas-navy-card[data-reveal-card] {
  opacity: 0;
  transform: translateY(70px) scale(0.93);
}

.js-reveal .vyas-navy-card[data-reveal-card].is-revealed {
  opacity: 1;
  transform: none;
  animation: vyasNavyCardIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes vyasNavyCardIn {
  0% {
    opacity: 0;
    transform: translateY(70px) scale(0.93);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 767.98px) {
  .js-reveal [data-reveal] { --reveal-distance: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .vyas-hero-card,
  .vyas-hero-title-line,
  .vyas-hero-subtitle {
    animation: none !important;
  }
}

/* Evita rolagem horizontal enquanto elementos aguardam entrar pela lateral */
.js-reveal main {
  overflow-x: clip;
}

/* ---- Hero da Home e do Vem Crescer: entrada refeita ao rolar de volta ao topo ----
   Com JS ativo, o hero só anima quando o wrapper recebe .is-revealed (e volta
   ao início quando sai da tela). Sem JS, as animações de carregamento seguem normais. */
.js-reveal [data-hero-replay]:not(.is-revealed) .vyas-hero-card,
.js-reveal [data-hero-replay]:not(.is-revealed) .vyas-hero-title-line,
.js-reveal [data-hero-replay]:not(.is-revealed) .vyas-hero-subtitle,
.js-reveal [data-hero-replay]:not(.is-revealed) .vyas-hero-symbol,
.js-reveal [data-hero-replay]:not(.is-revealed) .vyas-careers-hero-symbol {
  animation: none;
  opacity: 0;
}

/* ==========================================================================
   VYAS ENERGIA: mapa do Brasil em SVG (código) com marcadores e legenda
   ========================================================================== */
.vyas-energia-map-figure {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.vyas-energia-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 28px rgba(0, 60, 100, 0.08));
}

.vyas-energia-svg .state {
  fill: #EBF0F3;
  stroke: #556980 !important;
  stroke-width: 0.75px !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Estados com empreendimento: na cor do marcador (laranja = PA e AL, verde-azulado = PI, azul = MT) */
.vyas-energia-svg #PA,
.vyas-energia-svg #AL {
  fill: #e8792a;
}

.vyas-energia-svg #PI {
  fill: #35a2a4;
}

.vyas-energia-svg #MT {
  fill: #0a5f9e;
}

.vyas-energia-pin-label {
  font-family: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.1px;
  stroke: #FFFFFF;
  stroke-width: 2.6px;
  paint-order: stroke;
  stroke-linejoin: round;
  user-select: none;
}

.vyas-energia-pin {
  transition: transform 0.2s ease;
}

.vyas-energia-map-legend {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  gap: 0.6rem 1.5rem;
}

.vyas-energia-map-legend .vyas-legend-item {
  font-size: 0.95rem;
  color: #006398;
}

.vyas-energia-map-legend .vyas-legend-dot {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   PÁGINA 404
   ========================================================================== */
.vyas-404-section {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.vyas-404-code {
  display: block;
  font-family: var(--vyas-font-main);
  font-size: clamp(5rem, 16vw, 10rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #35A2A4 0%, #64BF80 32%, #9CE156 68%, #BEF63C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}

/* Botões da 404: mesmo tamanho e alinhamento (verde e azul lado a lado) */
.vyas-404-section .btn {
  font-size: 1.05rem;
  font-weight: normal;
  padding: 0.85rem 2.1rem;
  line-height: 1.5;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   CONTACT FORM 7 (Contato e Ouvidoria)
   O plugin gera os campos; o visual continua o das classes do tema
   (.vyas-contato-* e .vyas-ouvidoria-*). Aqui ficam só os elementos do plugin.
   ========================================================================== */

/* Cores por formulário: Contato = card azul escuro · Ouvidoria = card branco */
.vyas-contato-form {
  --vyas-form-error: #ffb4a8;
  --vyas-form-text: #ffffff;
  --vyas-form-accent: #C4D200;
}

.vyas-ouvidoria-form {
  --vyas-form-error: #c0392b;
  --vyas-form-text: #145079;
  --vyas-form-accent: #C4D400;
}

.wpcf7-form-control-wrap {
  display: block;
}

/* Invólucros técnicos do plugin (escondidos, como no CSS original dele) */
.wpcf7 .screen-reader-response {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.wpcf7 form .hidden-fields-container {
  display: none;
}

.wpcf7-spinner {
  display: none;
}

/* Erro de cada campo */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--vyas-font-main);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--vyas-form-error);
}

.wpcf7-form .wpcf7-not-valid {
  border-color: var(--vyas-form-error) !important;
}

/* Mensagem geral (enviado / erro) */
.wpcf7-response-output {
  margin: 1.25rem 0 0;
  padding: 0.75rem 1rem;
  border: 2px solid var(--vyas-form-accent);
  border-radius: 14px;
  font-family: var(--vyas-font-main);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--vyas-form-text);
}

.wpcf7 form.init .wpcf7-response-output {
  display: none;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--vyas-form-error);
}

/* Botão enquanto envia */
.wpcf7 form.submitting .wpcf7-submit {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}

/* Botão de envio é <input>: mantém o mesmo visual do <button> original */
input.vyas-contato-submit,
input.vyas-ouvidoria-submit {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  text-align: center;
}

/* ==========================================================================
   REVENDA (celular/tablet): unidade na ordem foto → nome/endereço → mapa → botão,
   setas laterais visíveis, título dos reconhecimentos sem estourar a tela
   ========================================================================== */
.vyas-revenda-map-col {
  position: relative;
}

@media (max-width: 991.98px) {
  .vyas-revenda-unit-card.active {
    display: flex;
    flex-direction: column;
  }

  /* os blocos da linha viram itens da coluna, para podermos reordenar */
  .vyas-revenda-unit-card > .row {
    display: contents;
  }

  .vyas-revenda-unit-card > .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
  }

  .vyas-revenda-unit-card > .row > :first-child {
    order: 1;
  }

  .vyas-revenda-unit-card .vyas-revenda-info-footer {
    order: 2;
    margin: 1.25rem 0 1.25rem;
  }

  .vyas-revenda-unit-card .vyas-revenda-map-col {
    order: 3;
  }

  /* botão do Maps abaixo do mapa (e não por cima dele) */
  .vyas-revenda-maps-btn,
  .vyas-revenda-maps-btn:hover {
    position: static;
    transform: none;
    display: block;
    width: fit-content;
    margin: 1rem auto 0;
  }

  .vyas-revenda-photo-box,
  .vyas-revenda-map-box {
    height: 230px;
  }

  /* setas laterais, alinhadas ao título "Nossas Revendas" */
  .vyas-revendas-showcase-container {
    padding: 2rem 1.25rem 1.75rem;
  }

  .vyas-revendas-showcase-title {
    font-size: 1.7rem;
  }

  .vyas-revendas-showcase-sub {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
  }

  .vyas-showcase-nav-arrow {
    display: flex;
    width: 38px;
    height: 38px;
    font-size: 1.15rem;
    top: 2.9rem;
    transform: translateY(-50%);
  }

  .vyas-showcase-nav-prev { left: 0.6rem; }
  .vyas-showcase-nav-next { right: 0.6rem; }

  .vyas-reconhecimentos-title {
    font-size: 1.55rem;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    margin-bottom: 1.75rem;
  }
}